Gambar HTML
Dalam tutorial ini akan belajar bagaimana memasukkan gambar ke dalam dokumen HTML.
Memasukkan Gambar ke Halaman Web
Gambar meningkatkan tampilan visual halaman web dengan membuatnya lebih menarik dan berwarna.
Tag <img> digunakan untuk menyisipkan gambar ke dalam dokumen HTML. Ini adalah elemen kosong dan hanya berisi atribut. Sintaks tag <img> dapat diberikan dengan:
<img src="url" alt="beberapa_teks" />
Contoh berikut menyisipkan tiga gambar di halaman web:
<img src="layang-layang.jpg" alt="Terbang Layang-Layang" />
<img src="langit.jpg" alt="Langit Mendung" />
<img src="balon.jpg" alt="Balon" />
2
3
Setiap gambar harus membawa setidaknya dua atribut: atribut src, dan atribut alt.
Atribut src memberi tahu browser tempat menemukan gambar. Isinya adalah URL file gambar.
Sedangkan, atribut alt menyediakan teks alternatif untuk gambar, jika tidak tersedia atau tidak dapat ditampilkan karena alasan tertentu. Isinya harus menjadi pengganti gambar yang berarti.
CATATAN
Seperti <br> , elemen <img> juga merupakan elemen kosong, dan tidak memiliki tag penutup. Namun, dalam XHTML ia menutup dirinya sendiri yang diakhiri dengan />.
TIP
Atribut alt yang diperlukan memberikan deskripsi teks alternatif untuk gambar jika pengguna karena alasan tertentu tidak dapat melihatnya karena koneksi yang lambat, gambar tidak tersedia di URL yang ditentukan, atau jika pengguna menggunakan pembaca layar atau non-grafis peramban.
Mengatur Lebar dan Tinggi Gambar
Atribut width dan height digunakan untuk menentukan lebar dan tinggi suatu gambar.
Nilai atribut ini diinterpretasikan dalam pixels secara default.
<img
src="layang-layang.jpg"
alt="Layang-layang Terbang"
width="300"
height="300"
/>
<img src="langit.jpg" alt="Langit Mendung" width="250" height="150" />
<img src="balon.jpg" alt="Balon" width="200" height="200" />
2
3
4
5
6
7
8
Kalian juga dapat menggunakan atribut style untuk menentukan lebar dan tinggi gambar. Ini mencegah lembar gaya mengubah ukuran gambar secara tidak sengaja, karena gaya sebaris memiliki prioritas tertinggi.
<img
src="layang-layang.jpg"
alt="Layang-layang Terbang"
style="width: 300px; height: 300px;"
/>
<img
src="langit.jpg"
alt="Langit Mendung"
style="width: 250 piksel; height: 150 piksel;"
/>
<img
src="balon.jpg"
alt="Balon"
style="width: 200 piksel; height: 200 piksel;"
/>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CATATAN
Sebaiknya tentukan atribut width dan height untuk sebuah gambar, sehingga browser dapat mengalokasikan banyak ruang untuk gambar sebelum diunduh. Jika tidak, pemuatan gambar dapat menyebabkan distorsi atau kedipan pada tata letak situs web Anda.
Menggunakan Elemen Gambar HTML5
Terkadang, penskalaan gambar ke atas atau ke bawah agar sesuai dengan perangkat yang berbeda (atau ukuran layar) tidak berfungsi seperti yang diharapkan. Selain itu, mengurangi dimensi gambar menggunakan atribut atau properti width dan height tidak mengurangi ukuran file asli. Untuk mengatasi masalah ini HTML5 telah memperkenalkan tag <picture> yang memungkinkan Anda untuk menentukan beberapa versi gambar untuk menargetkan berbagai jenis perangkat.
Elemen <picture> berisi nol atau lebih elemen <source>, masing-masing mengacu pada sumber gambar yang berbeda, dan satu elemen <img> di akhir. Juga setiap elemen <source> memiliki atribut media yang menentukan kondisi media (mirip dengan media query) yang digunakan oleh browser untuk menentukan kapan sumber tertentu harus digunakan. Mari kita coba sebuah contoh:
<picture>
<source media="(min-width: 1000px)" srcset="logo-large.png" />
<source media="(max-width: 500px)" srcset="logo-small.png" />
<img src="logo-default.png" alt="My logo" />
</picture>
2
3
4
5
CATATAN
Browser akan mengevaluasi setiap elemen <source> anak dan memilih yang paling cocok di antara mereka; jika tidak ada kecocokan yang ditemukan, URL atribut src elemen <img> akan digunakan. Juga, tag <img> harus ditentukan sebagai anak terakhir dari elemen <picture>.
Bekerja dengan Peta Gambar
Peta gambar memungkinkan Anda untuk menentukan hotspot pada gambar yang bertindak seperti hyperlink.
Ide dasar di balik pembuatan peta gambar adalah menyediakan cara mudah untuk menghubungkan berbagai bagian gambar tanpa membaginya menjadi file gambar terpisah. Misalnya, peta dunia mungkin memiliki hyperlink setiap negara ke informasi lebih lanjut tentang negara itu.
Mari kita coba contoh sederhana untuk memahami cara kerjanya:
<img src="objects.png" usemap="#objects" alt="Objects" />
<map name="objects">
<area shape="circle" coords="137,231,71" href="clock.html" alt="Clock" />
<area
shape="poly"
coords="363,146,273,302,452,300"
href="sign.html"
alt="Sign"
/>
<area shape="rect" coords="520,160,641,302" href="book.html" alt="Book" />
</map>
2
3
4
5
6
7
8
9
10
11
Atribut name dari tag <map> digunakan untuk mereferensikan peta dari tag <img> menggunakan atribut usemap-nya. Tag <area> digunakan di dalam elemen <map> untuk menentukan area yang dapat diklik pada gambar. Kalian dapat menentukan sejumlah area yang dapat diklik di dalam gambar.
CATATAN
Peta gambar tidak boleh digunakan untuk navigasi situs web. Mereka tidak ramah mesin pencari. Penggunaan peta gambar yang valid adalah dengan peta geografis.
TIP
Ada banyak tool online yang tersedia untuk membuat peta gambar. Beberapa editor tingkat lanjut seperti Adobe Dreamweaver juga menyediakan seperangkat alat untuk membuat peta gambar dengan mudah.