Menampilkan Gambar di HTML

Menampilkan gambar di halaman web membuat tampilan terlihat segar dan indah untuk dilihat. Ada banyak tag baru yang akan Anda pelajari disini, karena tag <img> memerlukan tag lainnya untuk menampilkan gambar lebih efektif.

Daftar isi:

Menampilkan gambar sederhana

Tag <img> digunakan untuk menampilkan gambar pada halaman web yang memiliki dua atribut yang diperlukan yaitu src (menentukan tautan ke gambar) dan alt (memberikan teks alternatif jika gambar tidak ditemukan). Hal yang paling unik dari tag <img> ialah tidak memiliki tag penutup. Berikut contohnya:

<img src="gambar.jpg" alt="ini adalah gambar">

Memberikan panjang dan tinggi gambar

Ada 2 cara memberikan panjang dan tinggi gambar yaitu dengan inline CSS atau atribut. Berikut contohnya:

<!-- inline CSS -->
<img src="gambar.jpg" alt="ini adalah gambar" style="width:96px;height:96px;">
<!-- atribut -->
<img src="gambar.jpg" alt="ini adalah gambar" width="96" height="96">

Akses gambar pada direktori

Jika Anda ingin mengakses berkas gambar ada dua hal yang perlu diketahu yaitu mengakses gambar sesudah dan sebelum berkas HTML yang sedang dijalankan. Berikut contohnya:

<!-- sesudah direktori gambar -->
<img src="/gambar/berkas.jpg" alt="ini adalah gambar">

<!-- sebelum direktori gambar -->
<img src="/../gambar/berkas.jpg" alt="ini adalah gambar">

Catatan: Menggunakan ../ yang maksudkan ialah mundur satu langkah dari direktori saat ini.

Menggunakan tag figure dan figcaption

Saya sering kali menggunakan kedua tag ini untuk mendefinisikan sebuah dan keterangan gambar. Tag <figure> digunakan untuk konten mandiri seperti ilustrasi, foto, daftar kode, dan lainnya. Sedangkan tag <figcaption> untuk memberikan keterangan untuk elemen <figure> tepatnya untuk keterangan gambar. Berikut contohnya:

<figure>
    <img src="gambar.jpg" alt="ini adalah gambar">
    <figcaption>Gambar yang sangat mengagumkan</figcaption>
</figure>