Kini kita akan memasuki tutorial HTML mengenai gambar. Sebelumnya kita belum pernah menyinggung mengenai pemasangan gambar. Kita hanya mempelajari cara penyusunan tulisan di dalam dokumen HTML. Sekarang sudah saatnya kita mempercantik tampilan halaman website kita menggunakan gambar.

Tutorial HTML – Gambar – Bagian 13 (Bahasa Indonesia)

Gambar pada halaman HTML, bukan berarti kita menggambar di dalam dokumen HTML tapi kita menghubungkan gambar yang kita miliki ke dalam dokumen HTML. Sebelumnya kita harus memiliki sebuah gambar, foto, ilustrasi ataupun logo yang berekstensi .jpg, .png atau .gif. Bila foto yang kita miliki berekstensi lain maka kita harus mengkonversi foto yang kita miliki ke dalam ekstensi yang didukung oleh HTML.

Tempat penyimpanan gambar

Saya akan memberikan sebuah foto untuk dijadikan bahan latihan pada tutorial ini. Anda juga bisa menggunakan foto lain untuk dijadikan bahan latihan.

Tutorial HTML - Logo - Gambar

Silahkan klik kanan pada foto di atas dan pilih “simpan gambar sebagai..” atau “save image as..” untuk menyimpan gambar di atas. Simpanlah gambar di dalam folder terpisah di dalam folder dokumen HTML disimpan. Sebagai contoh berikut ini adalah tempat saya menyimpan dokumen HTML beserta foto atau gambarnya:

C:\HTML\ tempat menyimpan dokumen HTML
C:\HTML\images\ tempat menyimpan foto atau gambar
logo1.png nama gambar yang saya gunakan
C:\HTML\images\logo1.png alamat lengkap gambar di dalam komputer

Perhatian: Saya menggunakan sistem operasi windows. Bila Anda menggunakan sistem operasi lain, harap disesuaikan kembali.

Nama dokumen gambar dan tempat penyimpanan gambar terkait harus diperhatikan karena HTML membutuhkan lokasi penyimpanan gambar dan gambar untuk mengakses gambar bersebut. Namun ketika kita mengakses gambar melalui HTML, alamat gambar harus menggunakan alamat relatif yang diukur dari lokasi dokumen HTML. Garis miring yang digunakan juga harus diganti. Sebelumnya di dalam komputer garis miring yang digunakan adalah “\”, ketika diakses melalui aplikasi peramban lokasi gambar harus menggunakan garis miring yang dibalik menjadi “/”. Untuk lebih jelasnya perhatikan contoh berikut ini:

C:\HTML\ tempat menyimpan dokumen HTML
C:\HTML\images\ tempat menyimpan foto atau gambar
images/ lokasi relatif untuk mengakses gambar melalui html
garis miring berubah dari \ menjadi /
images/logo1.png alamat mengakses gambar melalui HTML

Penempelan gambar pada dokumen HTML

Setelah kita menyediakan gambar di dalam folder yang telah kita tentukan. Kita selanjutnya perlu menempelkan gambar di dalam dokumen HTML kita. Cara menempelkannya tidak seperti pada saat melakukan edit gambar, kita harus menempelkannya menggunakan tag img. Tag img digunakan untuk menampilkan gambar di dalam dokumen HTML. Alamat untuk memasukkan gambar harus dimasukkan pada atribut src. Silahkan perhatikan contoh kode berikut ini:

 

Bila kode di atas kita jalankan maka kita akan melihat hasil tampilan seperti di bawah ini:

Tutorial HTML - Gambar 1

Pengaturan gambar para dokumen HTML

Tag img memiliki banyak jenis atribut yang dapat digunakan untuk mengatur tampilan dan fungsi dari sebuah gambar. Tapi, dalam praktek pembuatan sebuah halaman website sangat jarang digunakan atribut yang sangat bervariasi. Pada penggunaan biasa tag img hanya membutuhkan atribut berikut ini:

alt – menuliskan judul untuk gambar terkait, digunakan ketika aplikasi peramban tidak menampilkan gambar.
border – memberikan kotak atau frame pada gambar dalam satuan pixel
height – menentukan tinggi gambar dalam satuan pixel
src – lokasi untuk mengakses gambar
width – menentukan lebar gambar dalam satuan pixel

Kita akan mencoba melakukan pengaturan terhadap logo yang dipasangkan. Pada contoh sebelumnya terlihat logo yang dipasangkan terlalu besar dan kini kita akan mengecilkannya logo tersebut agar lebih enak dipandang. Saya akan mengubah kode html sebelumnya, seperti berikut ini:

 

Berikut ini adalah tampilan dari kode yang telah diubah

Tutorial HTML - Gambar 2

Pada hasil tampilan tidak terlihat penggunakan atribut alt, setting pada atribut alt akan terlihat ketika gambar terjadi gagal loading atau gambar tidak ditemukan pada lokasi. Gambar logo di atas diperkecil menggunakan atribut height dan width. Gambar logi di atas dan logo dibawah terdapat perbedaan ukuran. Masing-masing ukuran gambar ditentukan oleh nilai atribut width dan height yang disertakan.

Saya rasa tutorial HTML mengenai gambar ini tidak terlalu sulit untuk dipelajari. Pada tutorial selanjutnya kita akan membahas pembuatan tabel.

Tutorial HTML – Tabel(Dasar) – Bagian 14-1 (Bahasa Indonesia)