Menampilkan gambar

Sisipkan gambar dengan img, src, dan alt.

Pahami konsepnya

Gambar membuat halaman hidup, dan HTML menampilkannya lewat tag kosong <img> — tidak punya penutup karena tidak berisi teks. Dua atribut kuncinya: src menunjuk lokasi berkas gambar (jpg, png, gif, webp), dan alt menuliskan deskripsi singkat isinya.

alt bukan hiasan: teks itulah yang dibacakan pembaca layar bagi pengguna tunanetra, dan yang tampil bila berkas gagal dimuat. Menulis alt yang jujur (misalnya "Suasana kelas belajar coding") adalah kebiasaan aksesibilitas sekaligus SEO yang baik; alt kosong alt="" justru menandakan gambar dekoratif yang boleh dilewati.

Ukuran diatur lewat atribut width dan height — nilainya piksel, cukup angkanya saja. Aturan lokasi berkas sama seperti tautan: nama berkas bila sefolder, folder/nama bila di dalam subfolder, ../nama bila di atasnya. Menyalakan latihan: gabungkan img di dalam a untuk membuat tombol gambar yang bisa diklik.

Coba contoh kode

<h2>Galeri latihan</h2>
<img src="pantai.jpg" alt="Matahari terbenam di pantai" width="320">
<img src="foto/profil.jpg" alt="Foto profil penulis" width="120">

Dua contoh src memperlihatkan aturan lokasi: pantai.jpg di folder yang sama, foto/profil.jpg di dalam subfolder foto. width menahan lebar tampilan; tinggi menyesuaikan proporsinya. Ganti src ke berkas milikmu sendiri dan perhatikan apa yang tampil bila alt-nya yang muncul.

Latihan singkat

Tampilkan dua gambar milikmu (satu sefolder, satu dari subfolder) dengan alt deskriptif dan lebar berbeda, lalu bungkus satu di antaranya menjadi tautan.