Gambar HTML

Gambar dapat meningkatkan desain dan tampilan halaman web.

Contoh:

<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_chania.jpg" alt="Flowers in Chania">

Sintaks Gambar HTML

Tag HTML <img> digunakan untuk menyematkan gambar di halaman web.

Gambar secara teknis tidak dimasukkan ke dalam halaman web; gambar-gambar tersebut terhubung ke halaman web. Tag <img> menciptakan ruang penampung untuk gambar yang dirujuk.

Tag <img> adalah tag kosong, hanya berisi atribut, dan tidak memiliki tag penutup.

Tag <img> memiliki dua atribut yang wajib:

• src - Menentukan jalur menuju gambar.

• alt - Menentukan teks alternatif untuk gambar.

Atribut src

Atribut src yang wajib digunakan menentukan jalur (URL) ke gambar.

Catatan: Ketika halaman web dimuat, pada saat itu browser yang mengambil gambar dari server web dan menyisipkannya ke dalam halaman. Oleh karena itu, pastikan gambar tersebut tetap berada di tempat yang sama terkait dengan halaman web, jika tidak, pengunjung Anda akan melihat ikon tautan yang rusak. Ikon tautan yang rusak dan teks alt akan ditampilkan jika browser tidak dapat menemukan gambar.

Atribut alt

Atribut alt yang wajib digunakan menyediakan teks alternatif untuk gambar, jika pengguna karena alasan tertentu tidak dapat melihat gambar tersebut (karena koneksi lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).

Sintaks Image pada HTML:

<img src="url" alt="alternatetext">

Tip: Pembaca layar adalah program perangkat lunak yang membaca kode HTML dan memungkinkan pengguna untuk “mendengarkan” konten. Pembaca layar sangat berguna untuk orang yang memiliki gangguan penglihatan atau disabilitas belajar.

Ukuran Gambar - Lebar dan Tinggi

Anda dapat menggunakan atribut style untuk menentukan lebar dan tinggi gambar.

Contoh:

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Sebagai alternatif, Anda dapat menggunakan atribut width dan height.

Contoh:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Atribut width dan height selalu mendefinisikan lebar dan tinggi gambar dalam piksel.

Catatan: Selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi tidak ditentukan, halaman web mungkin berkedip saat gambar dimuat.