Like & Share:
- Like & Share : Share if you find this article useful, there are always many ways to like and share this article.
- Comment : Always give positive and relevant comments, irrelevant and spammy comment will never be published.
- Thank You : We appreciate you sticking with us. ---thank you for your time!
Albinon.Com – HTML area TAG. HTML <area> tag mendefinisikan area di dalam peta gambar (peta gambar adalah gambar dengan area yang dapat diklik) dan <area> elemen selalu bersarang di dalam tag <map>.
Atribut usemap di dalam tag <img> diasosiasikan dengan atribut nama elemen <map>, dan membuat hubungan antara gambar dan peta.
Table of Contents
HTML area TAG
Contoh Kode HTML <area> tag
<!DOCTYPE html>
<html>
<body>
<h2>MAP & AREA element di dalam HTML</h2>
<p>
<ol>
<li>Klik handphone sebelah kiri untuk melihat artikel handphone 1</li>
<li>Dan handphone sebelah kanan menuju artikel tentang handphone 2</li>
</ol></p>
<img src="https://albinon.com/wp-content/uploads/2023/07/albinon-hero.webp" alt="Workplace" usemap="#workmap" width="558" height="370">
<map name="workmap">
<area shape="rect" coords="6,2,367,369" alt="Handphone 1" href="#handphone-1">
<area shape="rect" coords="556,369,370,122" alt="Handphone 2" href="#handphone-2">
</map>
</body>
</html>Contoh kode di atas akan menunjukkan penggunaan elemen <area> menunjukkan link ketika sebuah gambar di klik oleh pengguna. Kami menyematkan gambar 2 buah handphone. Handphone sebelah kiri yang kami berikan alt Handphone1, dan handphone kecil di sebelah kanan dengan alt Handphone2.
Coba klik di manapun dalam wilayah gambar handphone1 untuk menuju link yang disematkan pada gambar handphone1 lalu klik juga gambar handphone2 untuk menuju link yang disematkan pada gambar handphone2.
Kode di atas oleh browser akan di render sebagai berikut:
MAP & AREA element di dalam HTML
- Klik handphone sebelah kiri untuk melihat artikel handphone 1
- Dan handphone sebelah kanan menuju artikel tentang handphone 2
Contoh implementasi kode HTML <area> tag
Handphone1
HTML <area> tag untuk Handphone1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in consequat turpis. Morbi nisi metus, sagittis id ipsum et, tincidunt eleifend sem. Nulla felis tortor, dictum in rutrum vitae, convallis a nulla.
Quisque tellus mauris, rhoncus eu nisi sed, luctus dictum libero. Aenean metus lorem, rhoncus sit amet tempor ac, dignissim dictum ligula. Pellentesque pellentesque, ex eget hendrerit ultrices, purus arcu sollicitudin ipsum, a placerat erat massa eu diam.
Handphone2
HTML <area> tag untuk Handphone2
Maecenas ipsum massa, laoreet id lorem ut, porta posuere neque. Aliquam at leo ultricies, placerat mauris efficitur, lobortis mi. Aliquam erat volutpat. Phasellus ornare, mauris et molestie efficitur, sem elit rutrum mi, eget rhoncus orci lacus elementum ex.
Vestibulum blandit erat arcu, non molestie arcu cursus eu. Vestibulum ut turpis in dui cursus pharetra at ac tellus. Nam consectetur risus id elementum tincidunt. Fusce maximus eget velit et cursus. Sed venenatis facilisis accumsan. Mauris in purus velit. Aenean egestas lectus ut tempor eleifend. Mauris facilisis suscipit diam in sodales.
Artikel ini adalah artikel anak dari HTML TAGS, Artikel / Tutorial Tag HTML berikutnya, HTML <article> TAG.
1 Topik artikel yang cocok dengan “html area tag”, area tag html.
