Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang cara membuat link dengan tag <a>, sekarang saatnya kita mengenal cara menampilkan gambar di halaman HTML menggunakan tag <img>. Gambar adalah salah satu elemen penting untuk membuat website lebih menarik dan informatif.
1. Struktur Dasar Tag <img>
Berbeda dengan tag lain, tag <img> adalah tag tunggal (self-closing), artinya tidak punya penutup.
Contohnya:
<img src="gambar.jpg" alt="Deskripsi gambar">
Penjelasan atribut:
src: alamat atau path gambar yang akan ditampilkan.alt: teks alternatif jika gambar gagal dimuat (juga dibaca oleh screen reader).
2. Menampilkan Gambar dari Folder Lokal
Misalnya kita punya file gambar bernama logo.png yang ada di folder yang sama dengan file HTML, maka:
<img src="logo.png" alt="Logo Website">
Kalau gambar ada di dalam folder images, tulis:
<img src="images/logo.png" alt="Logo Website">
3. Menampilkan Gambar dari Internet
Kita juga bisa menggunakan URL gambar langsung dari internet:
<img src="https://via.placeholder.com/150" alt="Contoh Gambar">
Tapi hati-hati, gambar dari luar bisa berubah atau dihapus sewaktu-waktu.
4. Mengatur Ukuran Gambar
Kita bisa atur ukuran dengan atribut width dan height, misalnya:
<img src="logo.png" alt="Logo" width="200">
Atau menggunakan CSS (lebih fleksibel):
<img src="logo.png" alt="Logo" style="width: 200px; height: auto;">
5. Teks Alternatif Sangat Penting!
Selalu sertakan alt pada gambar. Ini bermanfaat:
- Untuk SEO (search engine optimization)
- Untuk aksesibilitas (dibaca oleh pembaca layar)
- Sebagai pengganti jika gambar gagal dimuat
<img src="produk.jpg" alt="Gambar Produk Kemeja Lengan Panjang">
6. Contoh Lengkap Penggunaan Gambar
<h2>Logo Website</h2>
<img src="logo.png" alt="Logo SantriKoding" width="150">
<h2>Foto dari Internet</h2>
<img src="https://via.placeholder.com/300" alt="Gambar Placeholder">
<h2>Gambar Produk</h2>
<img src="images/produk1.jpg" alt="Produk Sepatu Casual" style="width: 250px;">
Kesimpulan
Dengan tag <img>, kita bisa memperkaya tampilan website dengan gambar. Kita sudah belajar cara menampilkan gambar dari lokal maupun internet, serta pentingnya menambahkan teks alternatif dan mengatur ukuran.
Di artikel berikutnya, kita akan belajar tentang list (daftar) dalam HTML, baik itu daftar yang terurut (numbered list) maupun tidak terurut (bullet list).
Terima Kasih