Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Link Gambar HTML Menggunakan 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.

10 Nilai Atribut Utama untuk Penggunaan Tag Area HTML
Ilustrasi Tag Area HTML

Sebelum memahami lebih dalam materi tentang Membuat Link Gambar HTML Menggunakan Tag Area, terlebih dahulu pelajari materi tentang: Cara Membuat Program Java pada HTML Menggunakan Tag Applets [klik], Cara Membuat Teks dengan Format Alamat Menggunakan Tag Address HTML [klik], dan Cara Membuat Singkatan HTML Menggunakan Tag Acronym [klik].
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=

"..."

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="..."

alt="Triangle"

>

  

<area 

shape="circle"

coords="155,56,26"

href="..."

alt="Circle">

  

<area 

shape="rect"

coords="224,30,276,82"

href="..."

alt="Square">

</map>

</body>

 

</html>

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

6 komentar untuk "Membuat Link Gambar HTML Menggunakan Tag Area"

  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

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -