KITTY223 – Tag <area> dalam HTML digunakan bersama dengan tag <map> untuk membuat peta gambar (image map) yang memungkinkan pengguna untuk mengklik area tertentu di dalam gambar untuk melakukan tindakan tertentu. Mari kita jelajahi lebih lanjut tentang penggunaan tag <area>:
baca juga : address tag html untuk alamat
Penggunaan Dasar
<img src="map.jpg" alt="Peta Gambar" usemap="#peta">
<map name="peta">
<area shape="rect" coords="0,0,50,50" href="klik1.html" alt="Area 1">
<area shape="circle" coords="100,100,50" href="klik2.html" alt="Area 2">
<area shape="poly" coords="200,200,250,250,300,200" href="klik3.html" alt="Area 3">
</map>
Dalam contoh di atas, kita memiliki sebuah gambar (map.jpg) yang diberi tag <map> dengan atribut name="peta". Setiap area pada gambar ditentukan dengan menggunakan tag <area> yang berada di dalam tag <map>. Setiap <area> memiliki atribut shape untuk menentukan bentuk area (rectangle, circle, atau polygon) dan atribut coords untuk menentukan koordinat area. Setiap <area> juga dapat memiliki atribut href untuk menentukan tautan yang akan dibuka ketika area tersebut diklik.
Contoh Lebih Lanjut
<img src="plan.jpg" alt="Rencana Lantai" usemap="#plan">
<map name="plan">
<area shape="rect" coords="100,100,200,200" href="ruang1.html" alt="Ruang 1">
<area shape="rect" coords="300,100,400,200" href="ruang2.html" alt="Ruang 2">
<area shape="rect" coords="500,100,600,200" href="ruang3.html" alt="Ruang 3">
</map>
Dalam contoh ini, kita menggunakan peta gambar untuk menunjukkan rencana lantai. Setiap area pada gambar merepresentasikan ruang tertentu di dalam bangunan, dan ketika area tersebut diklik, pengguna akan diarahkan ke halaman yang sesuai.
Catatan Penting
- Tag
<area>harus digunakan bersama dengan tag<map>untuk membuat peta gambar yang berfungsi. - Atribut
altpada tag<area>digunakan untuk memberikan teks alternatif yang akan ditampilkan jika area tersebut tidak dapat ditampilkan, misalnya jika gambar tidak dimuat atau jika pengguna menggunakan pembaca layar.
baca juga : acronym tag html untuk akronim
Kesimpulan HTML <area>
Tag <area> dalam HTML digunakan bersama dengan tag <map> untuk membuat peta gambar (image map) yang memungkinkan pengguna untuk mengklik area tertentu di dalam gambar untuk melakukan tindakan tertentu. Ini berguna untuk membuat tautan interaktif di dalam gambar, seperti peta, rencana lantai, atau diagram.
