Langsung ke konten utama

HTML Tag Area

Tag <area> digunakan pada dokumen HTML untuk memetakan porsi dari gambar untuk membuatnya dapat diklik oleh end-userTag ini digunakan untuk mengarahkan user ke link berbeda setelah user mengklik porsi map dari gambar. Tag ini juga digunakan sebagai tag child dari tag <map>. Tag ini tidak memiliki closing tag dan merupakan tag kosong untuk HTML tetapi pada XHTML maka memerlukan penutup tag dengan atribut diperlihatkan pada tabel 1.

Sintak:
<area>

Tabel 1 Atribut Tag Area
VALUEDESKRIPSI
shapeMelakukan mapping pada gambar, dapat berupa persegi, lingkaran, atapu   segitika, dan lain sebagainya.
coordsKoordinat dari shape
hreflink dimana user akan diarahkan ke alamat tujuan setelah mengklik porsi   map dari gambar
altTeks alternatif untuk area klik pada map gambar
downloadDownloat target ketika hyperlink diklik.
targetKonteks dalam lokasi sumber yang akan dibuka pada link
hreflangBahasa URL target
mediaOptimisasi URL untuk media atau perangkat
relHubungan antara URL dan dokumen
typeTipe media dari URL

Tag <area> pada html

<!DOCTYPE html>

<html>

 

<head>

<title>

Tag Area

</title>

 

<style>

body 

{

text-align: center;}

  

h1 

{

color: green;}

</style>

</head>

 

<body>

<img 

src=

"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"

alt=""

width="300"

height="119"

class="aligncenter size-medium wp-image-910965"

usemap="#shapemap" 

/>

 

<map 

name="shapemap">

 

<!-- tag area mengandung gambar -->

<area 

shape="poly"

coords="59,31,28,83,91,83"

href="https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"

alt="Triangle"

>

  

<area 

shape="circle"

coords="155,56,26"

href="https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"

alt="Circle">

  

<area 

shape="rect"

coords="224,30,276,82"

href="https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"

alt="Square">

</map>

</body>

 

</html>

Output:

klik salah satu gambar

TriangleCircleSquare


Catatan: Tag <area> selalu bersarang terhadap tag <map>.

Komentar

  1. Apa yang dimaksud dengan tag area pada html?

    BalasHapus
    Balasan
    1. Tag area pada html digunakan untuk mendefinisikan area dalam peta gambar yang memiliki area yang dapat di klik sebelumnya. Peta memungkinkan area geometris pada gambar yang dikaitkan dengan tautan hypertext. Elemen ini hanya digunakan pada elemen map.

      Hapus
  2. Tag area mendefinisikan area di dalam peta gambar, dimana peta sendiri adalah gambar dengan area yang dapat diklik pada halaman html.

    BalasHapus
  3. Elemen area selalu bersarang di dalam tag map pada html.

    BalasHapus
  4. Apa fungsi atribut shape dan koridor?

    BalasHapus
    Balasan
    1. Atribut shape mendefinisikan bentuk area berupa persegi panjang, lingkaran, atau poligon, dan koordinat menunjukkan penempatan ukuran area di atas gambar. Elemen area juga mendefinisikan atribut lain yang berkaitan dengan tautan link, termasuk href dan target.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D