Penggunaan gambar di html pada sebuah website sangat variatif, selain memperindah tampilan website umumnya gambar di html digunakan untuk menampilkan logo atau sebagai penambah kesan visualisasi pada tulisan diwebsite, dimana peran gambar ini seperti menjadi pesan hidup pada sebuah tulisan. Tak jarang gambar di html sering digunakan sebagai pengenalan awal dalam mempelajari kode html, seperti tulisan ini, setelah sebelumnya banyak membahas cara penggunaan teks, kali ini pembahasan mengenai cara menampilkan gambar di html.
Penggunaan dan Atribut Tag Image ![]()
HTML
Di dalam html gambar di definisikan sebagai tag <img> dimana tag <img> ini tidak di tulis secara berpasangan atau tag tunggal yang tidak memiliki tag penutup sehingga dalam memberian nilai pada tag <img> ini hanya dengan menggunakan atribut bukan elemen, contoh dibawah ini adalah kumpulan atribut standar yang biasa di gunakan untuk menampilkan gambar.
| Atribut | Nilai | Keterangan |
|---|---|---|
| src | URL | Atribut wajib pada tag html untuk menentukan lokasi gambar yang ingin di tampilkan. |
| alt | teks | Untuk menentukan alternate text (teks pengganti) apabila gambar tidak dapat tampil di browser. |
| width | pixels | Digunakan untuk menentukan tinggi gambar. |
| height | pixels | Digunakan untuk menentukan lebar gambar. |
Tabel atribut untuk tag <img> di atas adalah tag yang paling sering di gunakan, sebenarnya masih ada beberapa tag gambar yang bisa di lihat di w3schools.
Contoh Kode Gambar Di HTML
Untuk menampilkan gambar pada tag img di html seperti keterangan pada tabel di atas yaitu dengan menggunakan atribut src, dimana nilai dari src ini adalah alamat lokasi gambar berada.
<img src="lokasi-gambar.ekstensi-gambar">Code language: HTML, XML (xml)Penulisan kode img pada html ini sering sekali kurang ketelitian sehingga gambar tidak muncul pada browser, biasanya ini terjadi akibat tidak memasukan lokasi gambar dengan benar, atau penulisan ekstensi atau format gambar tidak tepat sehingga menyebabkan gambar tersebut tidak muncul, contoh lengkap untuk menamplkan gambar.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML</title>
</head>
<body>
<img src="contoh-gambar-html.jpg">
</body>
</html>Code language: HTML, XML (xml)Dari kode html lengkap untuk menampilkan gambar diatas maka akan tampil seperti gambar di bawah ini.
Maka kurang lebih akan tampil seperti di atas, sekali lagi penulis tekankan bahwa apabila gambar tidak dapat tampil di web browser maka periksa kembali lokasi gambar berada.
Merubah Ukuran Gambar Pada Tag IMAGE
Gambar yang telah di pilih untuk di tampilkan pada website biasanya miliki ukuran tinggi dan lebar yang tidak sesuai ke inginan, tapi tenang saja, kita tidak perlu mengedit gambar tersebut menggunakan editor foto, anda hanya perlu menambahkan atribut width dan atau height di dalam tag <img>, penulis akan memberikan nilai untuk width 400px dan height 500px.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML</title>
</head>
<body>
<img src="contoh-gambar-html.jpg" width="400px" height="500px">
</body>
</html>Code language: HTML, XML (xml)Dari kode html di atas maka akan menghasilkan tampilan seperti di bawah ini.
Dari gambar diatas terlihat akan menghasilkan ukuran yang tidak seimbang antara objek di dalam foto dan ukuran lebar dan tinggi, sehingga bentuk gambar akan menjadi terlihat aneh. Maka gunakanlah satu atribut saja untuk menyesuaikan bentuk gambar tersebut, pilih antara width atau height, misalnya hanya menggunakan atribut width, secara otomatis untuk ukuran tingginya akan menyesuaikan sesuai bentuk aslinya, seperti contoh di bawah ini penulis hanya memberikan nilai 400px dari lebar (width) pada gambar.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML</title>
</head>
<body>
<img src="contoh-gambar-html.jpg" width="400px">
</body>
</html>Code language: HTML, XML (xml)Hasilnya seperti dibawah ini.
Menambahkan Teks Alternatif Pada Tag Image html
Penggunaan atribut alt (alternate text) ini sangat membantu apabila browser gagal menampilkan gambar, kegagalan browser dalam menampilkan gambar ada banyak faktor, misalnya gambar yang di arahkan telah di hapus pada sumbernya atau koneksi lambat menjadi pemicunya, apabila hal itu terjadi maka sebagai gantinya browser akan menggantinya dengan tampilan nilai yang di berikan pada atribut alt ini. Sebagai contoh penulis akan memberikan nilai src dengan dua tag <img> tanpa ada gambar yang ditujukan, satu dengan tidak menggunakan atribut alt dan satu lagi dengan menggunakan atribut alt.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar di HTML</title>
</head>
<body>
1. <img src="tidak-ada.jpg" width="400px"><br />
2. <img src="tidak-ada.jpg" width="400px" alt="Teks pengganti">
</body>
</html>Code language: HTML, XML (xml)Maka akan menghasilkan output seperti di bawah ini.
Dari gambar diatas terlihat bahwa penggunaan atribut alt ini sangat membantu sekali untuk menangani kemungkinan browser gagal menampilkan gambar, sehingga pembaca website akan mengetahui secara teks apakah gambar tersebut.
Demikian tutorial dalam menampilkan gambar di kode html, sebenarnya masih ada beberapa atribut yang bisa di gunakan pada tag <img> ini, hanya saja atribut-atribut yang di tulis di sini adalah atribut yang umumnya sering di gunakan untuk membuat gambar pada kode html.
