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
Sintaks Gambar HTML
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 gambar
Sintaks :
<img src="url" alt="alternatetext">
Atribut src
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
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">
Ukuran Gambar – Lebar dan Tinggi
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.
Lebar dan Tinggi, atau Gaya?
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>
Gambar di Folder Lain
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;">
Gambar di Server / Situs Lain
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.
Gambar Animasi
HTML memungkinkan GIF animasi:
Contoh :
<img src="https://media.giphy.com/media/NXp9HM6YeuS0U/source.gif" alt="Computer Man" style="width:48px;height:48px;">
Gambar sebagai Tautan
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>
Gambar Floating
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>
Format Gambar
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 menentukan gambar - Gunakan atribut HTML
srcuntuk menentukan URL gambar - Gunakan atribut
altHTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan - Gunakan atribut
widthdanheightHTML atau properti lebar dan tinggi CSS untuk menentukan ukuran gambar - Gunakan properti CSS
floatuntuk membiarkan gambar melayang ke kiri atau ke kanan
