HTML - Pautan Imej

Hai there, para pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik dari pautan imej HTML. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk membimbing Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman kesukaan Anda, betahkan diri, dan mari kita mulai petualangan ini bersama!

HTML - Image Links

Apa Itu Pautan Imej HTML?

Sebelum kita masuk ke dalam hal yang mendalam, mari kita mengerti apa itu pautan imej HTML. Bayangkan Anda membuat album foto digital. Anda ingin menampilkan gambar, tetapi Anda juga ingin orang mengklik gambar itu untuk mengunjungi halaman web lain. Itu tepat apa yang dilakukan pautan imej HTML - mereka menjadikan gambar menjadi pautan yang dapat diklik!

Sintaks

Sekarang, mari kita lihat sintaks untuk membuat pautan imej. Jangan khawatir jika itu terlihat agak menakutkan pertama kali - kita akan menguraikannya bersama!

<a href="URL_dari_pautan">
<img src="URL_imej" alt="Deskripsi_imej">
</a>

mari kitauraikan kode ini:

<a href="URL_dari_pautan">: Ini adalah tag anchor kita. Itu membuat pautan.
<img src="URL_imej" alt="Deskripsi_imej">: Ini adalah tag imej, disembunyikan dalam tag anchor.
</a>: Ini menutup tag anchor kita.

Contoh Pautan Imej HTML

Contoh 1: Pautan Imej Dasar

Mari kita mulai dengan contoh sederhana. Katakanlah kita ingin membuat gambar anjing yang lucu yang, ketika diklik, membawa kita ke situs tentang perawatan anjing.

<a href="https://www.dogcare.com">
<img src="cute_puppy.jpg" alt="Anjing lucu">
</a>

Dalam contoh ini:

Berkas gambar adalah "cute_puppy.jpg"
Mengklik gambar akan membawa Anda ke "https://www.dogcare.com"
Jika gambar tidak dimuat, "Anjing lucu" akan ditampilkan sebagai teks alternatif

Contoh 2: Membuka Pautan di Tab Baru

kadang-kadang, kita ingin pautan membuka di tab baru. Kita bisa melakukan ini dengan menambahkan target="_blank" ke tag anchor kita.

<a href="https://www.catcare.com" target="_blank">
<img src="playful_kitten.jpg" alt="Kucing yang bermain">
</a>

Kode ini akan membuka situs perawatan kucing di tab baru ketika gambar kucing diklik.

Contoh 3: Menambahkan Judul

Kita juga bisa menambahkan judul ke pautan imej kita, yang akan muncul sebagai tooltip saat seseorang mengarahkan mouse ke gambar.

<a href="https://www.birdwatching.com" title="Pelajari tentang pengamatan burung">
<img src="colorful_parrot.jpg" alt="Burung parrot berwarna-warni">
</a>

Sekarang, saat seseorang mengarahkan mouse ke gambar burung, mereka akan melihat "Pelajari tentang pengamatan burung" sebagai tooltip.

Sistem Koordinat di Imej HTML

Sekarang, mari kita bicarakan sesuatu yang sedikit lebih maju - sistem koordinat di imej HTML. Ini sangat berguna saat Anda ingin membuat bagian yang berbeda di imej dapat diklik dan menghubungkan ke halaman web yang berbeda.

Peta Imej

Peta imej memungkinkan Anda menentukan area yang dapat diklik di dalam gambar. Area ini bisa berbentuk berbeda: persegi panjang, lingkaran, atau poligon.

Ini adalah contoh cara membuat peta imej:

<img src="world_map.jpg" alt="Peta Dunia" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="0,0,82,126" href="north_america.html" alt="Amerika Utara">
<area shape="circle" coords="90,58,3" href="south_america.html" alt="Amerika Selatan">
<area shape="poly" coords="124,58,96,71,102,83,124,83,129,72" href="africa.html" alt="Afrika">
</map>

mari kitauraikan ini:

Kita memiliki gambar peta dunia.
Kita menentukan peta dengan nama "worldmap".
Dalam peta, kita menentukan tiga area yang dapat diklik:

Sebuah persegi panjang untuk Amerika Utara
Sebuah lingkaran untuk Amerika Selatan
Sebuah poligon untuk Afrika

Setiap area memiliki bentuk, koordinat, dan pautannya sendiri.

Mengerti Koordinat

Sistem koordinat dimulai di sudut kiri atas gambar (0,0). Koordinat x meningkat saat Anda bergerak ke kanan, dan koordinat y meningkat saat Anda bergerak ke bawah.

Untuk bentuk yang berbeda, koordinat bekerja sedikit berbeda:

Bentuk	Format Koordinat	Contoh
Persegi Panjang	x1,y1,x2,y2	coords="0,0,82,126" (kiri atas ke kanan bawah)
Lingkaran	x,y,jejaring	coords="90,58,3" (pusat x, pusat y, jejaring)
Poligon	x1,y1,x2,y2,...,xn,yn	coords="124,58,96,71,102,83,124,83,129,72" (serangkaian titik)

Kesimpulan

Dan begitu juga, teman-teman! Kita telah berpergian melalui dunia pautan imej HTML, dari sintaks dasar hingga peta imej maju. Ingat, latihan membuat sempurna. Cobalah membuat pautan imej dan peta imej Anda sendiri - Anda mungkin terkejut betapa cepat Anda bisa menguasai itu!

Saat kita menutup, saya teringat tentang seorang siswa yang pernah katakan kepadaku, "Sir, saya pikir HTML hanya untuk teks yang membosankan, tapi sekarang saya melihat itu bisa membuat internet hidup!" Dan itu tepat apa yang Anda belajar - membawa internet ke kehidupan, satu pautan imej demi satu.

Terus coding, terus belajar, dan terutama, terus bersenang-senang dengannya! Sampaijumpa lagi, ini adalah guru komputer yang ramah Anda menutup. Happy coding!

Credits: Image by storyset