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 usemapAtribut 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 | alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | Menentukan hubungan antara dokumen yang ada dengan target pada URL |
shape | defaultrectcirclepoly | Menentukkan bentuk dari area. |
target | _blank_parent_self_topnama_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;
}