Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Link Gambar HTML Menggunakan Tag Area

Dipublikasikan Oleh: elfanmauludi 6 komentar
Tag <area> digunakan pada dokumen HTML untuk memetakan porsi dari gambar untuk membuatnya dapat diklik oleh end-user. Tag 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.

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, Cara Membuat Teks dengan Format Alamat Menggunakan Tag Address HTML, dan Cara Membuat Singkatan HTML Menggunakan Tag Acronym.
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

Contoh: 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>.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

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

  1. AnonimRabu, 02 Juni 2021 pukul 13.27.00 WIB

    Apa yang dimaksud dengan tag area pada html?

    BalasHapus
    Balasan
    1. AnonimRabu, 02 Juni 2021 pukul 13.27.00 WIB

      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. AnonimRabu, 02 Juni 2021 pukul 13.30.00 WIB

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

    BalasHapus
  3. AnonimRabu, 02 Juni 2021 pukul 13.30.00 WIB

    Elemen area selalu bersarang di dalam tag map pada html.

    BalasHapus
  4. AnonimRabu, 02 Juni 2021 pukul 13.32.00 WIB

    Apa fungsi atribut shape dan koridor?

    BalasHapus
    Balasan
    1. AnonimRabu, 02 Juni 2021 pukul 13.32.00 WIB

      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 -