Tutorial HTML <area>
HTML
area
Tag - belajar html area. Element area mendefinisikan sebagai area yang berada di dalam gambar (peta gambar), dan dapat diklik oleh user dengan setting koordinat yang telah ditentukan.Dalam penulisan pada html, html
<area>
harus di bungkus oleh html <map>
, html <area>
akan terintegrasi dengan html <img>
yang disertai dengan atribut usemap
Atribut HTML <area>
Atribut | Nilai | Penjelasan |
---|---|---|
alt | teks | Menunjukkan sebuah alternate text pada area. |
coords | koordinat | Menentukkan koordinat pada area |
download | nama file | Menunjukkan bahwa target akan didownload ketika diklik |
href | url/link | Menentukkan URL / Link. |
hreflang | kode bahasa | Menentukkan bahasa yang digunakan pada target. |
media | media query | Menentukkan media query yang digunakan pada dokumen pada url, yang berada pada area yang ditentukan. |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Menentukan hubungan antara dokumen yang ada dengan target pada URL |
shape | default rect circle poly | Menentukkan bentuk dari area. |
target | _blank _parent _self _top nama_frame | Menentukan bagaimana cara membuka halaman yang berada pada sebuah link. |
type | media_type | Menentukkan tipe media dari yang berada pada target link. |
Contoh HTML <area>
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JBkrrnCqiHDihm0jMJkAdaWGcp5lL1jpULN8Owa1-x4B5NdlUc30Zk6DwlBkfOaTiDE-54ujHXByVg3EyZ0_tL6CthoJRFVOdTO1AYmTKeYy76hn-BbkDBicoUATKUcmnOk-NV60Sy3K/s1600/html-css-js.png"
alt="image"
usemap="#contoh" />
<map name="contoh">
<area
alt="html"
title="HTML"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png"
shape="poly"
coords="23,66,55,66,59,28,19,27"/>
</map>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JBkrrnCqiHDihm0jMJkAdaWGcp5lL1jpULN8Owa1-x4B5NdlUc30Zk6DwlBkfOaTiDE-54ujHXByVg3EyZ0_tL6CthoJRFVOdTO1AYmTKeYy76hn-BbkDBicoUATKUcmnOk-NV60Sy3K/s1600/html-css-js.png" alt="image" usemap="#contoh" /> <map name="contoh"> <area alt="html" title="HTML" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png" shape="poly" coords="23,66,55,66,59,28,19,27"/> </map> <p> Klik Logo Logo yang bertanda <b>HTML</b> </p> </body> </html>
Contoh HTML <area>
<map name="contoh">
<area
alt="html"
title="HTML"
href="//triksonic.blogspot.com/search/label/HTML"
shape="poly"
coords="23,66,55,66,59,28,19,27"/>
<area
alt="css"
title="CSS"
href="//triksonic.blogspot.com/search/label/CSS"
shape="poly"
coords="78,66,109,66,113,28,74,27" />
<area
alt="javascript"
title="JAVASCRIPT"
href="//triksonic.blogspot.com/search/label/Javascript"
shape="poly"
coords="82,118,47,119,45,80,85,80" />
</map>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JBkrrnCqiHDihm0jMJkAdaWGcp5lL1jpULN8Owa1-x4B5NdlUc30Zk6DwlBkfOaTiDE-54ujHXByVg3EyZ0_tL6CthoJRFVOdTO1AYmTKeYy76hn-BbkDBicoUATKUcmnOk-NV60Sy3K/s1600/html-css-js.png" alt="image" usemap="#contoh" /> <map name="contoh"> <area alt="html" title="HTML" href="//triksonic.blogspot.com/search/label/HTML" shape="poly" coords="23,66,55,66,59,28,19,27"/> <area alt="css" title="CSS" href="//triksonic.blogspot.com/search/label/CSS" shape="poly" coords="78,66,109,66,113,28,74,27" /> <area alt="javascript" title="JAVASCRIPT" href="//triksonic.blogspot.com/search/label/Javascript" shape="poly" coords="82,118,47,119,45,80,85,80" /> </map> <p> Ketiga logo merupakan 1 gambar saja, tapi memiliki 3 link/url yang berbeda, silahkan klik pada masing masing logo, dan silahkan tunggu. </p> </body> </html>
Global Attributes:
Element
<area>
mencakup Global Attributes HTML.
Event Attributes:
Element
<area>
mencakup Event Attributes HTML.
Browser Support HTML <area>
Desktop
Chrome | Ya |
---|---|
Safari | Ya |
Firefox | 1 |
Opera | Ya |
IE | Ya |
Edge | Ya |
Mobile
Android webview | Ya |
---|---|
Chrome Android | Ya |
Edge mobile | Ya |
Firefox Android | 4 |
IE mobile | Ya |
Opera Android | Ya |
iOS Safari | Ya |
Default CSS :
Browser yang support dengan element
<area>
, biasanya mempunyai nilai default:
area {
display: none;
}