Belajar HTML - Cara Membuat Tautan (Link) di Halaman Web

Home » HTML

Halo teman-teman,

Setelah sebelumnya kita bahas tentang CSS untuk mengatur tampilan halaman web, sekarang kita akan belajar salah satu fitur HTML yang paling umum dan penting, yaitu tautan atau link.

Dengan link, pengunjung bisa berpindah dari satu halaman ke halaman lain hanya dengan satu klik. Link bisa berupa teks, gambar, tombol, dan masih banyak lagi. Yuk kita bahas langkah-langkahnya!

Dasar Link: Tag `<a>` dan Atribut `href`

Semua link di HTML dibuat dengan elemen <a>. Untuk menentukan tujuan link, kita pakai atribut href.

<a href="https://www.google.com">Kunjungi Google</a>

<a> adalah tag anchor untuk membuat link
href adalah tujuan link (alamat URL)
Teks di antara tag adalah bagian yang bisa diklik

Kalau link-nya berhasil, saat kursor diarahkan ke teks tersebut, kursor berubah jadi ikon tangan.

Link ke Halaman Lokal (Relative URL)

Selain link ke situs lain, kamu juga bisa membuat link ke halaman lain di situs yang sama.

<a href="kontak.html">Halaman Kontak</a>

Ini disebut relative URL karena tidak perlu menyebutkan domain lengkap.

Membuka Link di Tab Baru: Atribut `target`

Kalau kamu mau link terbuka di tab baru, gunakan target="_blank".

<a href="https://unibsi.blogspot.com" target="_blank">Buka Blog di Tab Baru</a>

Beberapa nilai target yang bisa digunakan:

_self (default) = buka di tab yang sama
_blank = buka di tab baru
_parent = buka di parent frame
_top = buka di seluruh jendela browser

Link Gambar (Image Link)

Kamu juga bisa menjadikan gambar sebagai link. Caranya: bungkus elemen <img> di dalam tag <a>.

<a href="https://example.com">
  <img src="logo.png" alt="Logo">
</a>

Saat gambar diklik, maka akan membuka alamat sesuai href.

Menambahkan Judul Link

Atribut title bisa digunakan untuk memberi info tambahan saat kursor diarahkan ke link.

<a href="/about.html" title="Tentang Kami">Tentang</a>

Biasanya akan muncul tooltip kecil saat kursor berada di atas link tersebut.

Dengan memahami cara kerja link dan kombinasi atributnya, kamu bisa membuat navigasi yang fleksibel dan user-friendly untuk pengunjung situsmu.

Kalau kamu masih bingung atau ingin tanya-tanya soal penggunaan link di HTML, silakan tulis di kolom komentar. Kita belajar bareng ya!

Di materi selanjutnya, kita akan belajar cara menampilkan gambar di HTML dan mengatur atribut penting seperti src, alt, dan ukuran gambar. Sampai ketemu di tutorial berikutnya!