tRikSonic
Tema

HTML area Tag - Tutorial HTML

Terakhir diperbarui : 23 Mei 2018 - 15.47

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.
background html
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>

AtributNilaiPenjelasan
altteksMenunjukkan sebuah alternate text pada area.
coordskoordinatMenentukkan koordinat pada area
downloadnama fileMenunjukkan bahwa target akan didownload ketika diklik
hrefurl/linkMenentukkan URL / Link.
hreflangkode bahasaMenentukkan bahasa yang digunakan pada target.
mediamedia queryMenentukkan media query yang digunakan pada dokumen pada url, yang berada pada area yang ditentukan.
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Menentukan hubungan antara dokumen yang ada dengan target pada URL
shapedefault
rect
circle
poly
Menentukkan bentuk dari area.
target_blank
_parent
_self
_top
nama_frame
Menentukan bagaimana cara membuka halaman yang berada pada sebuah link.
typemedia_typeMenentukkan 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
ChromeYa
SafariYa
Firefox1
OperaYa
IEYa
EdgeYa
Mobile
Android webviewYa
Chrome AndroidYa
Edge mobileYa
Firefox Android4
IE mobileYa
Opera AndroidYa
iOS SafariYa

Default CSS :

Browser yang support dengan element <area>, biasanya mempunyai nilai default:
area { 
    display: none;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.