ID (Indonesia) Translation

HTML - Peta Gambar: Panduan Ramah untuk Pemula

Halo teman-teman yang sedang belajar menjadi pengembang web! Hari ini, kita akan masuk ke dunia yang menarik dari Peta Gambar HTML. Jangan khawatir jika Anda masih baru; saya akan menggイド Anda melalui setiap langkah dengan kesabaran yang sama seperti yang saya gunakan di kelas selama tahun. Mari kita mulai perjalanan ini bersama!

HTML - Image Map

Mengapa Menggunakan Peta Gambar?

Imaginilah Anda memiliki gambar yang indah dari peta dunia di situs web Anda, dan Anda ingin pengunjung mengklik negara-negara yang berbeda untuk belajar lebih banyak tentang mereka. Itu adalah tempat peta gambar berguna! Mereka memungkinkan Anda menciptakan area yang dapat diklik di dalam satu gambar, menjadikannya elemen interaktif.

Tag HTML `<map>`

Tag <map> adalah seperti wadah bagi area interaktif kita. Di sini kita mendefinisikan nama peta, yang kita akan gunakan untuk menghubungkannya ke gambar.

Ini adalah penampilannya:

<map name="worldmap">
<!-- Kita akan menambahkan area yang dapat diklik di sini -->
</map>

Dalam contoh ini, kita menamai peta kita "worldmap". Pensejalahkan itu seperti memberikan peta Anda ID unik yang kita akan gunakan kemudian.

Tag HTML `<area>`

Sekarang, mari bicarakan tentang tag <area>. Di sini tempat magik terjadi! Setiap tag <area> mendefinisikan area yang dapat diklik di dalam peta gambar kita.

Ini adalah struktur dasar:

<area shape="shape_type" coords="coordinates" href="link_url" alt="description">

mari kitauraikan ini:

shape: Mendefinisikan bentuk area yang dapat diklik (rect, circle, atau poly)
coords: Menentukan koordinat area
href: URL yang akan dibuka saat area diklik
alt: Deskripsi teks dari area (penting untuk aksesibilitas)

Peta Gambar HTML dalam Aksi

Sekarang, mari kita gabungkan semuanya dengan contoh nyata. Imaginilah kita memiliki gambar pizza, dan kita ingin membuat setiappiring pizza dapat diklik.

<img src="pizza.jpg" alt="Pizza yang Lezat" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="Piring Cheese">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="Piring Pepperoni">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="Piring Mushroom">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="Piring Veggie">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="Piring Supreme">
</map>

mari kitauraikan ini:

Kita memiliki tag <img> yang menampilkan gambar pizza kita.
Atribut usemap di tag <img> menghubungkannya ke peta kita yang dinamai "pizzamap".
Kita mendefinisikan peta kita dengan nama "pizzamap".
Setiap <area> mewakilipiring pizza:

Kita gunakan shape="poly" untuk bentuk poligon (piring segitiga).
Coords menentukan titik-titik setiap segitiga.
Setiappiring menghubungkan ke halaman yang berbeda tentang jenis pizza itu.

Jenis Bentuk dan Koordinatnya

mari kita lihat jenis bentuk yang Anda dapat gunakan di peta gambar Anda:

Bentuk	Koordinat	Contoh
rect	kiri, atas, kanan, bawah	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="Persegi">`
circle	pusat-x, pusat-y, jari-jari	`<area shape="circle" coords="90,58,3" href="circle.html" alt="Lingkaran">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="Poligon">`

Ingat, koordinat diukur dalam piksel dari sudut kiri atas gambar!

Tips dan Trik

Gunakan Penghasil Peta Gambar: Ketika saya pertama kali mulai mengajar ini, saya menghabiskan jam untuk menghitung koordinat. Sekarang, saya menggunakan alat online untuk menghasilkan mereka secara cepat!
Uji, Uji, Uji: Selalu periksa peta gambar Anda di berbagai perangkat dan browser. Yang terlihat sempurna di komputer Anda mungkin jauh berbeda di smartphone.
Simpan Sederhana: Mulai dengan bentuk sederhana dan perlahan-lahan beralih ke yang lebih kompleks. Roma tak dibangun dalam sehari, dan demikian pula peta gambar yang sempurna!
Aksesibilitas Penting: Selalu sertakan teks deskriptif alt untuk setiap area. Itu tidak hanya praktik yang baik; itu penting bagi pengguna dengan pembaca layar.

Kesimpulan

Selamat! Anda baru saja belajar cara menciptakan gambar interaktif menggunakan Peta Gambar HTML. Ingat, seperti belajar menunggang sepeda, mungkin merasa berayun di awal, tapi dengan latihan, Anda akan menciptakan peta gambar yang kompleks dalam waktu singkat.

Berikut kali Anda menjelajahi situs web dan menemukan gambar interaktif, Anda akan tahu keajaiban di baliknya. Siapa tahu? Mungkin Anda akan diinspirasi untuk menciptakan sesuatu yang lebih menarik untuk situs Anda sendiri!

Terus kode, terus belajar, dan terutama, bersenang-senang dengannya! Jika Anda pernah merasa terjebak, ingat saja: setiap ahli pernah menjadi pemula. Selamat menempatkan peta!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Gambar

Tutorial Selanjutnya:

HTML - Iframes