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>

Belajar HTML Untuk Pemula


1. Pengenalan HTML

2. Membuat dan Menjalankan File HTML

3. Tag, Atribut, dan Elemen HTML

4. Struktur Dasar HTML

5. Membuat Heading Di HTML

6. Membuat Paragraf di HTML

7. Cara Membuat Komentar di HTML

8. Text Formatting HTML

9. Membuat Link Pada HTML

10. Membuat List Pada HTML

11. Menampilkan Gambar di HTML

12. Membuat Tabel di HTML

13. Membuat Form Pada HTML

14. Perbedaan Class dan Id Pada HTML

15. Menambahkan Audio pada HTML

16. Menambahkan Video pada HTML

17. Elemen Sematik Pada HTML