Indonesia

Tutorial HTML

Tabel HTML

Daftar HTML

Tautan HTML

Referensi HTML

Nama dan Nilai Warna HTML

Formulir HTML

Media HTML

Header HTML

Tata Letak HTML

Grafik HTML

API HTML

Miscellaneous HTML

Demo HTML

Alat HTML

Sumber Daya HTML

HTML - Tautan Gambar

Hai teman-teman yang sedang belajar menjadi pengembang web! Hari ini, kita akan mendalamkan pengetahuan kita tentang dunia menarik tautan gambar di 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, duduk nyaman, dan mari kita mulai petualangan ini bersama!

HTML - Image Links

Apa Itu Tautan Gambar HTML?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu tautan gambar HTML. Bayangkan Anda sedang membuat album foto digital. Anda ingin menampilkan gambar, tapi Anda juga ingin orang mengklik gambar itu untuk mengunjungi halaman web lain. Itu tepatnya apa yang dilakukan tautan gambar HTML – mereka menjadikan gambar menjadi tombol yang dapat diklik!

Sintaks

Sekarang, mari kita lihat sintaks untuk membuat tautan gambar. Jangan khawatir jika awalnya terlihat agak menakutkan – kita akan membongkar itu bersama!

<a href="URL_tautan">
<img src="URL_gambar" alt="Deskripsi gambar">
</a>

mari kitauraikan kode ini:

  1. <a href="URL_tautan">: Ini adalah tag anchor kita. Itu membuat tautan.
  2. <img src="URL_gambar" alt="Deskripsi gambar">: Ini adalah tag gambar, ditempatkan di dalam tag anchor.
  3. </a>: Ini menutup tag anchor kita.

Contoh Tautan Gambar HTML

Contoh 1: Tautan Gambar Dasar

Mari kita mulai dengan contoh sederhana. Katakanlah kita ingin membuat gambar anjing lucu yang, ketika diklik, akan 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 gambarnya akan membawa Anda ke "https://www.dogcare.com"
  • Jika gambar tidak termuat, "Anjing lucu" akan ditampilkan sebagai teks alternatif

Contoh 2: Membuka Tautan di Tab Baru

kadang-kadang, kita ingin tautan membuka di tab baru. Kita dapat 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 saat gambarnya diklik.

Contoh 3: Menambahkan Judul

Kita dapat menambahkan judul ke tautan gambar kita, yang akan muncul sebagai tooltip saat seseorang mengarahkan cursor ke gambar.

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

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

Sistem Koordinat di Gambar HTML

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

Peta Gambar

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

Berikut contoh cara membuat peta gambar:

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

  1. Kita memiliki gambar peta dunia.
  2. Kita menentukan peta dengan nama "worldmap".
  3. Dalam peta, kita tentukan 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 tautannya sendiri.

Memahami 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,jari-jari coords="90,58,3" (pusat x, pusat y, jari-jari)
Poligon x1,y1,x2,y2,...,xn,yn coords="124,58,96,71,102,83,124,83,129,72" (seri titik)

Kesimpulan

Dan begitulah, teman-teman! Kita telah melakukan perjalanan melalui dunia tautan gambar HTML, dari sintaks dasar hingga peta gambar maju. Ingat, latihan membuat sempurna. Cobalah membuat tautan gambar dan peta gambar Anda sendiri – Anda mungkin terkejut betapa cepat Anda memahaminya!

Saat kita selesai, saya teringat tentang seorang murid yang pernah mengatakan kepadaku, "Pak, saya khawatir HTML hanya untuk teks yang membosankan, tapi sekarang saya melihat bahwa itu bisa membuat internet hidup!" Dan itu tepatnya apa yang Anda belajar – membawa internet ke kehidupan, satu tautan gambar demi lainnya.

Terus kode, terus belajar, dan yang paling penting, terus bersenang-senang dengannya! Sampai jumpa lagi, ini guru komputer yang ramah Anda menutup. Selamat berkoding!

Credits: Image by storyset

Tutorial Sebelumnya:
HTML - Tautan Teks
Tutorial Selanjutnya:
HTML - Tautan Email