Gambar di HTML dapat membuat penampilan web kita menjadi lebih menarik.
Contoh :
Gambar 1
<img src="https://dosenit.com/wp-content/uploads/2020/10/pic_trulli.jpg" alt="Italian Trulli">
Gambar 2
<img src="https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket">
Gambar 3
<img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">
Section Artikel
Tag HTML <img> digunakan untuk menyisipkan gambar di halaman web.
Gambar tidak langsung dimasukkan kedalam website begitu saja tetapi gambar di tautkan ke halaman website menggunakan tag <img>. Tag <img> berfungsi untuk merujuk file sumber gambar tersebut berada(disimpan).
Tag <img> kosong, hanya berisi atribut, dan tidak memiliki tag penutup.
Tag <img> memiliki dua atribut yang diperlukan:
src – Menentukan jalur ke gambar (merujuk ke file sumber gambar)alt – Menentukan teks alternatif untuk gambarSintaks :
<img src="url" alt="alternatetext">
Atribut src, diperlukan untuk menentukan jalur (URL) ke gambar(sumber file gambar).
Catatan: Saat halaman web dimuat di browser, pada saat itu server akan mengambil gambar dari tempat penyimpanan file gambar tersebut. Maka, pastikan rujukan file gambar benar agar bisa ditampikan di halaman web, jika salah, halaman tidak akan menampilkan gambarnya dan yang ditampilkan hanyalah ikon tautan gambar rusak dan altnya.
Contoh :
Salah
<img src="img_chania.jpg" alt="Flowers in Chania">
Benar
<img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">
Atribut alt diperlukan untuk memberikan teks alternatif untuk sebuah gambar, jika karena alasan tertentu tidak dapat melihatnya gambar (karena koneksi yang lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar) maka, atribut alt akan menggantikan gambarnya.
Nilai atribut alt harus mendeskripsikan gambar:
Contoh :
<img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" alt="Flowers in Chania">
Jika browser tidak dapat menemukan gambar itu , maka akan ditampilkan nilai atribut alt:
Contoh :
<img src="wrongname.gif" alt="Flowers in Chania">
Kita bisa menggunakan atribut style untuk menentukan lebar dan tinggi gambar.
Contoh :
<img src="https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatifnya,kita bisa menggunakan atribut width dan height :
Contoh :
<img src="ihttps://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Atribut widht dan height selalu 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.
Atribut width, height, dan style semuanya memang atribut HTML.
Namun, sebaiknya gunakan atribut style. Untuk mencegah halaman style mengubah ukutan gambar.
Contoh :
Result Size: 668 x 547
<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */img {
width: 100%;
}
</style>
</head>
<body>
<h2>Width/Height atribut atau Style?</h2>
<p>Gambar pertama menggunakan atribut width (disetel ke 128 piksel), tetapi gaya di bagian kepala menimpanya, dan menyetel lebarnya menjadi 100%.</p>
<img src="https://dosenit.com/wp-content/uploads/2020/10/html.jpg" alt="HTML5 Icon" width="128" height="128">
<p>Gambar kedua menggunakan atribut style untuk mengatur lebar menjadi 128 piksel, ini tidak akan diganti dengan gaya di bagian head:</p>
<img src="https://dosenit.com/wp-content/uploads/2020/10/html.jpg" alt="HTML5 Icon" style="width:128px;height:128px;">
<p> Terlihat kan bedanya?<p>
</body>
</html>
Jika kita memiliki gambar di sub-folder komputer kita, kita harus menyertakan nama folder di atribut src:
Contoh :
<img src="/images/https://dosenit.com/wp-content/uploads/2020/10/html.jpg" alt="HTML5 Icon" style="width:128px;height:128px;">
Beberapa situs web menunjuk ke gambar eksternal di server lain. Untuk mengarahkan ke gambar di server lain, kita harus menyertakan URL absolut (lengkap) di atribut src:
Contoh :
<img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" alt="Oregairu">
Catatan gambar eksternal: Gambar eksternal mungkin memiliki hak cipta. Jika kita tidak mendapatkan izin untuk menggunakannya, kita mungkin melanggar undang-undang hak cipta. Selain itu, kita tidak bisa mengontrol gambar eksternal, gambar tersebut bisa saja di hapus sewaktu-waktu oleh pemilik hak cipta.
HTML memungkinkan GIF animasi:
Contoh :
<img src="https://media.giphy.com/media/NXp9HM6YeuS0U/source.gif" alt="Computer Man" style="width:48px;height:48px;">
Untuk menggunakan gambar sebagai tautan, letakkan tag <img> di dalam tag<a> :
Contoh :
<a href="default.asp"> <img src="https://media.giphy.com/media/11JTxkrmq4bGE0/source.gif" alt="Kucing" style="width:42px;height:42px;"> </a>
Gunakan properti CSS float untuk membuat gambar melayang ke kanan atau ke kiri teks:
Contoh :
<p><img src="https://media.giphy.com/media/NXp9HM6YeuS0U/source.gif" alt="happy man" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="https://media.giphy.com/media/NXp9HM6YeuS0U/source.gif" alt="Happy Man" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p>
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 |
<img> untuk menentukan gambarsrc untuk menentukan URL gambaralt HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkanwidth dan height HTML atau properti lebar dan tinggi CSS untuk menentukan ukuran gambarfloat untuk membiarkan gambar melayang ke kiri atau ke kanan