adydetra_
3 Jul 2025

Link dan Navigasi di HTML

Di bagian ini, kita akan membahas tautan (link)—fitur yang menjadikan web saling terhubung antar halaman dan situs.

Tautan memungkinkan pengguna untuk berpindah halaman, mengunjungi situs lain, atau melompat ke bagian tertentu dalam halaman yang sama.

Struktur Dasar

Seperti biasa, contoh-contoh berikut dapat kamu tempatkan di dalam tag <body> pada file HTML kamu:

index.html
<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <!-- Letakkan semua contoh tautan HTML di sini -->
  </body>
</html>

Membuat Tautan Dasar dengan <a>

Elemen <a> (anchor) digunakan untuk membuat tautan.

<a href="https://www.adydetra.my.id">Kunjungi blog saya</a>

Tautan ke Halaman Lain di Situs Anda

Jika kamu punya beberapa halaman HTML:

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

Membuka Tautan di Tab Baru

Gunakan atribut target="_blank" untuk membuka tautan di tab baru.

<a href="https://www.google.com" target="_blank">Cari di Google</a>

Tautan ke Bagian dalam Halaman (Anchor)

Kamu bisa membuat navigasi ke bagian tertentu di halaman yang sama menggunakan id.

<a href="#kontak">Lompat ke bagian kontak</a>

<!-- ...bagian bawah halaman -->
<h2 id="kontak">Kontak</h2>
<p>Email: kamu@email.com</p>

Menggunakan title untuk Tooltip

title akan tampil saat kursor diarahkan ke tautan.

<a href="https://www.adydetra.my.id" title="Buka blog saya">Blog</a>

Tautan Gambar

Gambar juga bisa dijadikan tautan.

<a href="https://www.adydetra.my.id">
  <img src="logo.png" alt="Logo Situs" width="100" />
</a>

Contoh struktur navigasi di bagian atas halaman:

<nav>
  <a href="index.html">Beranda</a> |
  <a href="about.html">Tentang</a> |
  <a href="contact.html">Kontak</a>
</nav>

Biasanya navigasi ditulis dalam bentuk daftar:

<ul>
  <li><a href="index.html">Beranda</a></li>
  <li><a href="services.html">Layanan</a></li>
  <li><a href="portfolio.html">Portofolio</a></li>
  <li><a href="contact.html">Kontak</a></li>
</ul>

Tautan ini akan membuka aplikasi email.

<a href="mailto:kamu@email.com">Kirim Email</a>

Cocok untuk perangkat mobile.

<a href="tel:+6281234567890">Hubungi Kami</a>

Kesimpulan

Elemen <a> adalah fondasi dari sistem navigasi di web. Dengan memahaminya, kamu bisa membuat situs yang lebih interaktif dan mudah dijelajahi.

Di bagian selanjutnya, kita akan membahas tentang gambar di HTML, termasuk cara menampilkannya dengan benar dan menjadikannya responsif.

Sampai jumpa di Part 7! 🗿