Menyisipkan Gambar (Image) pada Dokumen HTML

Menyisipkan gambar (image) pada dokumen HTML tidaklah sama dengan menyisipkan gambar seperti pada MS Word. Ketika kita membuat gambar pada MS Word, maka gambar tersebut secara otomatis menjadi “bagian” dari file MS Word tersebut.

Pada HTML, gambar yang disisipkan tidak menjadi “bagian” dari dokumen HTML tersebut. Secara teknis, kita hanyalah membuat tautan untuk memanggil gambar dari alamat tertentu dan pada saat seseorang membuka halaman web tersebut, maka browser-lah yang sebenarnya memanggil gambar dari server dan menyisipkannya pada halaman web bersangkutan. Untuk memanggil gambar pada HTML, kita memerlukan tag <img dan atribut src. Tag <img digunakan untuk memberitahukan browser bahwa bagian tersebut adalah gambar, sedangkan atribut src digunakan untuk meberitahukan alamat tempat gambar yang akan disisipkan berada. Atribut src ini harus selalu disertakan, karena jika tidak gambar tidak akan tampil sama sekali.

<img src="url" />

Karena tag <img tidak memiliki tag penutup, maka dalam penulisannya diakhiri dengan menambahkan tanda garis miring /> seperti terlihat pada contoh di atas.

Alamat Absolut dan Relatif

Ada dua jenis alamat yang digunakan untuk memanggil file gambar, yakni: absolut dan relatif. Alamat absolut merujuk pada file gambar yang berada di situs lain, misalnya gambar-gambar yang kita panggil dari Photobucket atau imageshack.
Untuk memanggil gambar dengan alamat absolut ini, maka kita perlu mengganti nilai untuk atribut src dengan menyebutkan situs dan/atau beserta alamat folder gambar tersebut berada. Berikut contoh penulisannya.

<img src="http://i278.photobucket.com/albums/kk82/akun/gambar.gif" />

Dari contoh di atas, kita melihat bahwa nama gambar yang dipanggil adalah “gambar.gif” yang berada pada urutan folder: albums/kk82/akun pada url http://i278.photobucket.com/.

Adapun alamat relatif merujuk pada file-file gambar yang berada pada situs yang sama dengan file HTML yang akan digunakan untuk memanggil gambar tersebut. Dalam prakteknya, gambar-gambar tersebut sering pula disimpan pada folder yang terpisah dari file HTML-nya untuk tujuan kerapihan dan kepraktisan. Untuk menampilkan gambar yang berada pada folder yang sama dengan file HTML tempat gambar tersebut akan disisipkan, nilai untuk atribut src diisi langsung dengan nama file gambar tersebut.

<img src="gambar.gif" />

perlu diIngat! Nama file gambar adalah case sensitive. Artinya kesalahan dalam menuliskan huruf kecil atau kapital dapat mengakibatkan gambar tersebut tidak tampil sama sekali. Di samping itu, perlu pula diperhatikan format file yang digunakan; GIF, JPG, atau PNG.

Pada contoh di atas nama file gambar yang digunakan adalah “gambar.gif”.
Apabila file gambar tersbebut berada pada folder yang berbeda dari file HTML-nya, maka kita perlu menyebutkan nama folder tempat file gambar tersebut berada diikuti dengan garis miring (/) dan selanjutnya nama file gambar. Berikut contoh penulisannya.

<img src="folder/gambar.gif"  />

Terinspirasi oleh: Bang Joe Alfaraby