Belajar Coding Bagian 6: Membuat Link dan Navigasi dalam HTML

Pada Bagian 5, kita sudah mempelajari list berurutan dan tidak berurutan.
Sekarang kita akan masuk ke elemen yang sangat penting dalam sebuah website, yaitu link dan navigasi.

Tanpa link:

• Website hanya satu halaman

  Baca juga:
  • Belajar CSS Bagian 9 : CSS Display Flex (Flexbox) - Fondasi Layout Modern
  • Konsep Layout pada Aplikasi Web PHP
  

• Tidak bisa berpindah halaman

• Tidak ada menu navigasi

📌 Link adalah penghubung antar halaman website.

---

Apa Itu Link dalam HTML?

Link (tautan) adalah elemen HTML yang memungkinkan pengguna:

• Berpindah ke halaman lain

• Membuka website lain

• Menuju bagian tertentu dalam halaman

Link dibuat menggunakan tag <a> (anchor).

---

Struktur Dasar Link HTML

Struktur dasar link:

<a href="tujuan-link">Teks Link</a> 

Keterangan:

• <a> → anchor / link

• href → alamat tujuan

• Teks Link → teks yang bisa diklik

---

Contoh Link ke Website Lain

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

📌 Jika diklik, browser akan membuka halaman Google.

---

Membuat Link ke Halaman Sendiri

Misalnya kamu memiliki file:

• index.html

• about.html

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

📌 Pastikan file berada di folder yang sama.

---

Membuka Link di Tab Baru

Gunakan atribut target="_blank".

<a href="https://www.youtube.com" target="_blank"> Buka YouTube </a> 

📌 Cocok untuk link ke website luar.

---

Link ke Bagian Tertentu (Anchor Link)

Kita bisa membuat link menuju bagian tertentu dalam halaman.

1️⃣ Buat ID Tujuan

<h2 id="kontak">Kontak</h2> 

2️⃣ Buat Link-nya

<a href="#kontak">Ke Bagian Kontak</a> 

📌 Biasanya digunakan untuk:

• Daftar isi

• Tombol “kembali ke atas”

• One-page website

---

Link Email dan Telepon

Link Email

<a href="mailto:admin@email.com">Email Kami</a> 

Link Telepon

<a href="tel:08123456789">Hubungi Kami</a> 

📌 Sangat berguna untuk website bisnis & profil.

---

Membuat Navigasi Menu

Navigasi biasanya dibuat dari list (<ul>) + link (<a>).

Contoh Navigasi Sederhana

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">Tentang</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="kontak.html">Kontak</a></li>
</ul>

📌 Ini adalah dasar menu website sebelum masuk ke CSS.

---

Navigasi dalam <nav>

HTML menyediakan tag khusus untuk navigasi.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Artikel</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

📌 <nav> membantu:

• Struktur HTML lebih jelas

• SEO lebih baik

• Aksesibilitas lebih bagus

---

Contoh Lengkap Link & Navigasi

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#materi">Materi</a></li>
    <li><a href="#kontak">Kontak</a></li>
  </ul>
</nav>
<h2 id="home">Home</h2>
<p>Selamat datang di website kami.</p>
<h2 id="materi">Materi</h2>
<p>Belajar HTML untuk pemula.</p>
<h2 id="kontak">Kontak</h2>
<p>Email: admin@email.com</p>

---

Kesalahan Umum Pemula

❌ Lupa href
❌ Salah tulis nama file
❌ Tidak pakai target="_blank" untuk link luar
❌ Struktur navigasi tidak rapi

---

Ringkasan

✔ Link dibuat dengan <a>
✔ href menentukan tujuan
✔ Bisa ke halaman lain, bagian tertentu, email, dan telepon
✔ Navigasi dibuat dari list + link
✔ <nav> membuat struktur lebih baik

---

Penutup

Di Bagian 6, kamu sudah mempelajari:

• Membuat link HTML

• Link internal & eksternal

• Anchor link

• Menu navigasi website