Belajar HTML area element yang digunakan untuk menunjukkan area (daerah)
Deskripsi
Penjelasan HTML area
area element digunakan untuk menunjukkan area (daerah), baik sebuah teks hyperlink dan area tertentu di dalam image map (peta gambar). image map adalah gambar pemetaan yang dapat diklik pada area tertentu didalam gambar itu sendiri.
Jika area element tidak dituliskan href attribute-nya, maka area (image map) dari element tersebut tidak bisa terseleksi, maka alt attribute tidak boleh ditulis.
Attribute target, download, rel, hreflang dan type tidak boleh digunakan jika pada element area tersebut tidak disebutkan href attribute.
Jika itemprop attribute disebutkan (ditulis) pada area element, maka hrefattribute juga harus ditulis pada element tersebut.
Attributes
Atribut HTML Tag <area>
Menunjukkan sebuah alternate text (teks pengganti) untuk area element.
Menentukkan sebuah coordinates (koordinat) sebuah area.
| Value | Untuk | Penjelasan |
|---|---|---|
| X1,Y1,X2,Y2 | shape="rect" |
Menentukkan koordinat dari kiri, atas, kanan dan bawah sudut persegi panjang (rectangle) |
| X,Y,radius | shape="circle" |
Menentukkan koordinat pusat lingkaran (circle) dan radius |
| X1,Y1,X2,Y2,..,Xn,Yn | shape="poly" |
Menentukkan koordinat tepi dari polygon (poligon=segi banyak). Jika pasangan koordinat pertama dan terakhir tidak sama, browser (user agent) akan menambahkan pasangan koordinat terakhir yang terdekat poligon. |
Menunjukkan bahwa target dari link tersebut akan didownload ketika user mengkliknya.
Menentukkan target dari alamat URL (Hyperlink).
Menentukkan bahasa yang digunakan pada halaman yang di link.
Menentukkan media query yang digunakan pada dokumen yang dirujuk oleh link tersebut.
Menentukkan hubungan (relationship) antara dokumen yang sedang dibuka dan dokumen lain yang dirujuk oleh link tersebut.
Menentukkan shape (bentuk) dari area.
Menentukkan konteks jelajah dokumen yang di link, bagaimana cara membuka halaman yang dirujuk dari link tersebut?
Menentukkan tipe media dari halaman yang di link.
Global Attributes
Atribut Secara Global (Keseluruhan)
<area> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<area> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <area> element
<h3>Klik area gambar (smiley) untuk memperjelas</h3>
<img src="/media/posts/suasana-hati.png" alt="gambar suasana hati" width="185" height="160" style="border:0" usemap="#suasanahati"/>
<map name="suasanahati">
<area shape="circle" coords="83,110,8" href="/example/html/embed/senang.html" alt="senang" title="senang">
<area shape="circle" coords="104,110,8" href="/example/html/embed/sedih.html" alt="sedih" title="sedih">
Pada contoh diatas kita bisa mengklik area tertentu pada sebuah gambar (smiley) yang apabila diklik maka akan terbuka URL dari area shape yang kita tentukkan tersebut. lihat contoh lengkapnya dibawah ini.
Contoh Lengkap
Contoh source code lengkap disertai dengan link “editor” untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
</style>
</head>
<body>
<h3>Klik area gambar (smiley) untuk memperjelas</h3>
<img src="/media/posts/suasana-hati.png" alt="gambar suasana hati" width="185" height="160" style="border:0" usemap="#suasanahati"/>
<map name="suasanahati">
<area shape="circle" coords="83,110,8" href="/example/html/embed/senang.html" alt="senang" title="senang">
<area shape="circle" coords="104,110,8" href="/example/html/embed/sedih.html" alt="sedih" title="sedih">
</map>
</body>
</html>