Contoh Gambar Berjajar
Berikut ini adalah contoh gambar berjajar dari 3 gambar berbeda.
Untuk membuatnya nggak sulit kok. Hanya menggunakan fungsi tabel pada script HTML.
Untuk membuatnya nggak sulit kok. Hanya menggunakan fungsi tabel pada script HTML.
Cara Membuat
Program aplikasi yang Saya gunakan adalah Notepad++ versi 6.6.9.
Klik disini untuk download Notepad++.
Klik disini untuk download Notepad++.
Pertama-tama buatlah script seperti berikut ini.
Script tersebut adalah dasar script HTML.
Lalu buatlah script tabel di antara <body> ... </body> seperti ini.
<table> ... </table> adalah script untuk membuat tabel.
<tr> ... </tr> namanya Table Row. Digunakan untuk membuat baris pada tabel.
<td> ... </td> namanya Table Down. Digunakan untuk mengisi data pada kolom tabel.
Simpan sebagai file HTML dalam folder baru.
Simpan sebagai file HTML dalam folder baru.
Copy beberapa buah gambar yang akan ditampilkan berjajar di folder tempat menyimpan file HTML tadi.
Selanjutnya buat script untuk memasukkan gambar di antara <td> ... </td>.
Fungsi script <img src="Gallery (1).jpg"> adalah untuk memuat file gambar bernama "Gallery (1).jpg" yang sudah dicopy ke folder tempat file HTML berada. Tujuan menjadikannya satu folder adalah supaya script tidak terlalu panjang untuk mencari link tempat file gambar berada, cukup menggunakan nama dan ekstensi file gambar saja.
Berikutnya adalah menambahkan script untuk mengatur ukuran gambar agar sama lebar di dalam script <img src ... >.
width="250px" maksudnya adalah lebar gambar diubah menjadi 250 pixel. height="250px" artinya tinggi gambar diubah menjadi 250 pixel. Jadi semua gambar akan berukuran sama yaitu 250x250 pixel.
Sekarang Save script tersebut, lalu buka file HTML tersebut di browser.
Maka jadinya akan seperti ini tampilannya.
Sedikit Info
Gambar berjajar bisa diterapkan di Website / Blog apapun. Fungsinya sebagai Display / Preview, dan bisa juga ditambah link. Untuk penataan gambar yang baik, usahakan ukuran tiap gambar memiliki ukuran yang sama. Lebih bagus lagi apabila gambar ini digunakan sebagai Slide Show.
Apabila terdapat kesalahan silahkan memberi saran ataupun komentar.
2 komentar :
template begini membrli atau hasil download, jika download dipasang dimana/ penempatannya, matur nuwun
kalau sejajar sudah penuh, terus mau pindah ke bawahnya bgmn gan?
http://pelaminankaretsponati.blogspot.co.id/2017/07/dekorasi-pelaminan-karet-spon-busa-ati.html
Post a Comment