Elemen image digunakan untuk menampilkan gambar atau foto pada dokumen HTML. Elemen image menggunakan tag img. Gambar yang ditampilkan tidak menyatu dengan dokumen HTML. Gambar yang ditampilkan akan diberikan dalam bentuk link atau URL dari lokasi fisik file gambar tersebut. File gambar bisa berbentuk bmp, jpg, png dan berbagai format file gambar umum lainnya. Tag img tidak mempunyai tag penutup. Tag img mempunyai dua atribut penting :
- src, adalah lokasi URL gambar yang akan ditampilkan.
- alt, penjelasan berupa text tentang gambar yang ditampilkan.
Di bawah ini adalah format penulisan image :
<img src="url" alt="alternatetext"> Atribut src
Atribut src berisi lokasi URL gambar yang ditampilkan. Web browser akan mengambil gambar dari lokasi URL kemudian menampilkan gambar tersebut. URL yang diberikan harus valid dan berisi lokasi fisik file gambar yang akan ditampilkan. Apabila URL tidak valid atau gambar tidak ditemukan pada URL tersebut maka web browser akan menampilkan atribut alt.
<img src="img_chania.jpg" alt="Flowers in Chania"> Atribut alt
Atribut alt berisi penjelasan berupa text terhadap gambar yang akan ditampilkan. Text ini akan otomatis ditampilkan secara utuh apabila URL gambar tidak valid atau file gambar tidak ditemukan.
<img src="img_chania.jpg" alt="Flowers in Chania"> Atribut alt akan otomatis tampil secara utuh apabila file gambar tidak ditemukan.
<img src="wrongname.gif" alt="Flowers in Chania"> Ukuran Gambar
Kita dapat menentukan ukuran gambar pada elemen image dengan memakai atribut width dan height. Atribut width dipakai untuk menentukan lebar gambar. Atribut height dipakai untuk menentukan tinggi gambar. Baik atribut width ataupun height memakai satuan pixel (px).
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> Lokasi Gambar
Lokasi atau URL gambar pada atribut src dapat dituliskan dalam bentuk URL absolute ataupun URL relative. Hal ini sama dengan ketentuan tag link.
Contoh untuk URL absolute.
<img src="https://nextgen.co.id/nextgen.jpg" alt="Nextgen Logo"> Contoh untuk URL relative.
<img src="img_chania.jpg"> Image Sebagai Link
Kita dapat menjadikan image sebagai link dengan meletakkan tag img di dalam tag a.
<a href="https://nextgen.co.id">
<img src="nextgen.jpg" alt="Nextgen" style="width:42px;height:42px;">
</a> Tutorial sebelumnya : Cara Membuat Link Di HTML
Tutorial setelahnya : Cara Membuat List Di HTML
Semua Tutorial HTML : Tutorial HTML