🔗 Membuat Tautan dan Gambar

Tautan (atau hyperlink) dan gambar adalah dua elemen penting yang bikin halaman web jadi lebih interaktif dan menarik. Tautan berfungsi sebagai penghubung—baik itu antarhalaman di satu website, maupun ke situs lain. Dengan kata lain, tag <a> dipakai untuk mengarahkan pengunjung ke tempat lain hanya dengan satu klik. Kita bisa menautkan teks, gambar, atau bahkan tombol menggunakan tag ini.
Sementara itu, tag <img> digunakan untuk menampilkan gambar di halaman web. Gambar bisa digunakan untuk memperjelas informasi, mempercantik tampilan, atau sekadar menarik perhatian pengunjung. Supaya gambar muncul dengan benar, kita perlu menentukan atribut src untuk alamat gambarnya, dan sebaiknya juga menambahkan atribut alt sebagai deskripsi alternatif—ini penting untuk aksesibilitas dan SEO juga. Jadi, dengan dua tag ini, kamu bisa mulai membangun halaman yang lebih kaya konten dan user-friendly.

🌐 Membuat Tautan (Anchor Tag)

Tag <a> (anchor) digunakan untuk membuat hyperlink. Atribut terpenting dari tag ini adalah href, yang menentukan tujuan atau URL dari tautan tersebut.

href: Menentukan URL tujuan. Ini bisa berupa URL absolut (misalnya, https://www.google.com) atau URL relatif (misalnya, /halaman-lain.html).
target: Menentukan di mana tautan akan dibuka. Nilai yang umum digunakan adalah _blank untuk membuka di tab baru.
title: Memberikan informasi tambahan tentang tautan yang akan muncul sebagai tooltip saat kursor diarahkan ke tautan.

🖼️ Menyisipkan Gambar (Image Tag)

Tag <img> digunakan untuk menampilkan gambar di halaman web. Tag ini bersifat *self-closing*, artinya tidak memerlukan tag penutup seperti </img>.

src: (Source) Atribut wajib yang menentukan path atau URL dari gambar yang akan ditampilkan.
alt: (Alternative Text) Atribut wajib yang menyediakan teks alternatif untuk gambar. Teks ini akan ditampilkan jika gambar gagal dimuat dan sangat penting untuk aksesibilitas (dibaca oleh screen reader).
width dan height: Menentukan lebar dan tinggi gambar dalam piksel. Menentukan ukuran gambar membantu browser merender halaman lebih cepat.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tautan dan Gambar</title>
  </head>
  <body>
    <h1>Belajar Tautan dan Gambar</h1>

    <p>
        Klik tautan ini untuk mengunjungi 
        <a href="https://www.google.com" target="_blank" title="Buka Google di tab baru">Google</a>.
    </p>

    <h2>Ini adalah gambar logo CodeTack</h2>
    <img src="https://i.ibb.co/M6g8d5w/logo.png" alt="Logo CodeTack" width="200">

    <h2>Gambar sebagai Tautan</h2>
    <a href="../../../../index.html">
        <img src="https://i.ibb.co/M6g8d5w/logo.png" alt="Logo CodeTack yang bisa diklik" width="150">
    </a>
  </body>
</html>

⚙️ Demo Interaktif:

💡 Tips: Selalu gunakan atribut alt pada tag <img>. Ini sangat penting untuk aksesibilitas dan SEO!