Gambar HTML
Gambar dapat meningkatkan desain dan tampilan halaman web.
Contoh
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Contoh
<img src="img_girl.jpg"
alt="Girl in a jacket">
Contoh
<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 ditautkan ke halaman web. Tag <img>menciptakan ruang penyimpanan untuk gambar yang direferensikan.
Tag <img>kosong, hanya berisi atribut, dan tidak memiliki tag penutup.
Tag <img>memiliki dua atribut yang diperlukan:
- src - Menentukan jalur ke gambar
- alt - Menentukan teks alternatif untuk gambar
Sintaksis
<img src="url" alt="alternatetext">
Atribut src
Atribut yang diperlukan srcmenentukan jalur (URL) ke gambar.
Catatan: Saat halaman web dimuat, browserlah yang pada saat itu mengambil gambar dari server web dan menyisipkannya ke halaman. Oleh karena itu, pastikan bahwa gambar tersebut benar-benar berada di tempat yang sama dengan halaman web, jika tidak pengunjung Anda akan mendapatkan ikon tautan yang rusak. Ikon tautan rusak dan altteks ditampilkan jika browser tidak dapat menemukan gambar.
Contoh
<img src="img_chania.jpg" alt="Flowers
in Chania">
Atribut alt
Atribut yang diperlukan altmenyediakan teks alternatif untuk sebuah gambar, jika pengguna karena alasan tertentu tidak dapat melihatnya (karena koneksi yang lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).
Nilai altatribut harus mendeskripsikan gambar:
Contoh
<img src="img_chania.jpg" alt="Flowers
in Chania">
Jika browser tidak dapat menemukan gambar, itu akan menampilkan nilai alt
atribut:
Contoh
<img src="wrongname.gif" alt="Flowers
in Chania">
Tip: Pembaca layar adalah program perangkat lunak yang membaca kode HTML, dan memungkinkan pengguna untuk "mendengarkan" konten. Pembaca layar berguna bagi orang-orang yang mengalami gangguan penglihatan atau ketidakmampuan belajar.
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan styleatribut untuk menentukan lebar dan tinggi gambar.
Contoh
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Atau, Anda dapat menggunakan atribut widthand :height
Contoh
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Atribut widthand heightselalu menentukan 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.
Lebar dan Tinggi, atau Gaya?
Atribut width, height, dan stylesemua valid dalam HTML.
Namun, kami menyarankan menggunakan styleatribut. Ini mencegah lembar gaya mengubah ukuran gambar:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Gambar di Folder Lain
Jika Anda memiliki gambar di sub-folder, Anda harus menyertakan nama folder di srcatribut:
Contoh
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Gambar di Server/Situs Web Lain
Beberapa situs web menunjuk ke gambar di server lain.
Untuk menunjuk ke gambar di server lain, Anda harus menentukan URL absolut (penuh) dalam srcatribut:
Contoh
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Catatan tentang gambar eksternal: Gambar eksternal mungkin berada di bawah hak cipta. Jika Anda tidak mendapatkan izin untuk menggunakannya, Anda mungkin melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat mengontrol gambar eksternal; itu bisa tiba-tiba dihapus atau diubah.
Gambar Animasi
HTML memungkinkan GIF animasi:
Contoh
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Gambar sebagai Tautan
Untuk menggunakan gambar sebagai tautan, letakkan <img>tag di dalam <a>
tag:
Contoh
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Gambar Mengambang
Gunakan properti CSS floatuntuk membiarkan gambar melayang ke kanan atau ke kiri teks:
Contoh
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Tip: Untuk mempelajari lebih lanjut tentang CSS Float, baca Tutorial CSS Float kami .
Format Gambar Umum
Berikut adalah jenis file gambar yang paling umum, yang didukung di semua browser (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Ringkasan Bab
- Gunakan elemen HTML
<img>untuk mendefinisikan gambar - Gunakan atribut HTML
srcuntuk menentukan URL gambar - Gunakan atribut HTML
altuntuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan - Gunakan HTML
widthdanheightatribut atau CSSwidthdanheightproperti untuk menentukan ukuran gambar - Gunakan properti CSS
floatuntuk membiarkan gambar melayang ke kiri atau ke kanan
Catatan: Memuat gambar besar membutuhkan waktu, dan dapat memperlambat halaman web Anda. Gunakan gambar dengan hati-hati.
Latihan HTML
Tag Gambar HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .