Gambar di halaman web dipasang pakai tag <img> (dari image). Gambarnya sendiri gak kamu taruh di dalam HTML. Kamu cuma menulis alamat file gambarnya, lalu browser yang mengambil file itu dan menampilkannya.
<img> beda dengan <p> atau <h1>: dia gak membungkus teks, jadi gak punya tag penutup. Semua infonya ditulis di atribut: info tambahan di dalam tag, bentuknya nama="nilai".
🧪 Tebakan cepat:
<img href="foto.jpg">bakal nampilin fotonya gak? Tebak dulu, jawabannya ada di bagian "src: alamat gambarnya".
Memasang gambar
<img
src="https://images.unsplash.com/photo-1501785888041-af3ef285b470"
alt="Pemandangan gunung dan danau"
>
Ini satu tag <img>, cuma ditulis di beberapa baris biar gampang dibaca. Tag-nya mulai di <img dan selesai di >.
<imgadalah awal tag gambar.src="..."adalah alamat file gambarnya (dari source, sumber). Ini alamat satu foto di situs Unsplash. Panjang, tapi gak perlu dihafal, cukup disalin.alt="..."adalah teks pengganti: isi gambarnya, ditulis pakai kata-kata.>menutup tag. Gak ada</img>.
Hasilnya: foto pemandangan muncul di halaman. Teks alt gak kelihatan selama fotonya berhasil dimuat. Atributnya boleh juga ditulis di satu baris, hasilnya sama.
Cara menulis atribut
- Antar atribut dipisah spasi:
src="foto.jpg" alt="Foto", bukansrc="foto.jpg"alt="Foto". - Nilainya diapit tanda kutip dua:
alt="Foto Profil". Tanpa kutip,alt=Foto Profilcuma kebacaFoto. - Nama atribut harus tepat:
src, bukanscr. - Tag diakhiri
>. Kalau lupa, browser gak tahu tag-nya selesai di mana, jadi gambarnya atau teks sesudahnya bisa gak muncul. Kadang kamu lihat/>di akhir, kayak<img src="foto.jpg" />. Itu sama aja.
src: alamat gambarnya
Alamat gambar selalu ditulis di src. href itu atribut buat link <a>, yang kamu pelajari di pelajaran berikutnya. Jadi <img href="foto.jpg"> gak nampilin apa-apa.
Alamatnya harus menuju file gambarnya langsung, bukan halaman web yang ada gambarnya. Cara ngeceknya: buka alamat itu di tab baru. Yang muncul harus gambarnya aja. Gambar dari situs lain ditulis lengkap dari https://. File gambar yang ada di folder yang sama dengan file HTML-mu cukup ditulis namanya, misalnya src="foto.jpg".
alt, width, dan height
Ini gambar yang sama, sekarang dengan ukuran:
<img
src="https://images.unsplash.com/photo-1501785888041-af3ef285b470"
alt="Pemandangan gunung dan danau"
width="300"
height="200"
>
altdibaca screen reader (yang membacakan halaman buat pengguna tunanetra), yang gak bisa melihat gambar. Mesin pencari kayak Google juga memakainya buat memahami isi gambar. Jadi tulis isi gambarnya, misalnyaalt="Foto Profil". Teks ini juga muncul di halaman kalau gambarnya gagal dimuat.widthitu lebar,heightitu tinggi. Satuannya pixel, titik-titik kecil penyusun layar. Tulis angkanya aja, tanpapx.
Hasilnya: foto yang sama, selebar 300 pixel dan setinggi 200 pixel.
Kenapa ukurannya perlu ditulis? File gambar butuh waktu buat dimuat. Kalau browser udah tahu ukurannya dari awal, dia bisa nyiapin tempat kosong buat gambar itu. Tanpa width dan height, teks di bawahnya bisa loncat waktu gambarnya muncul.
Dua gambar berarti dua tag <img>, masing-masing dengan src dan alt sendiri.
⚠️ Jebakan yang sering ketemu
- Menulis
</img>.<img>gak punya tag penutup. Cukup akhiri tag-nya dengan>. - Ketukar
widthdanheight.widthitu lebar,heightitu tinggi. - File gambar raksasa. Foto 5 MB tetap di-download penuh walau ditampilkan kecil. Kecilkan dulu file-nya, atau pakai format yang lebih hemat kayak WebP.
💡 Gambar yang jauh di bawah halaman bisa ditunda. Tambah
loading="lazy", dan browser baru memuat gambar itu waktu pengunjung scroll mendekatinya. Halaman jadi lebih cepat kebuka.
TL;DR: Gambar dipasang pakai <img>, tanpa tag penutup. src berisi alamat file gambarnya (bukan href), alt berisi teks pengganti, width dan height berisi ukuran dalam pixel tanpa px. Atribut dipisah spasi, nilainya diapit tanda kutip dua, dan tag-nya diakhiri >.
