1. Pengertian Link

Link (Hyperlink) adalah elemen HTML yang digunakan untuk:

• Berpindah dari satu halaman ke halaman lain
• Menghubungkan antar file
• Mengakses website lain

Tag yang digunakan:

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

👉 <a> = anchor (jangkar)

---

2. Struktur Dasar Link

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

Penjelasan:

• href → tujuan link
• Isi tag → teks yang diklik

---

3. Jenis-Jenis Link

3.1 Link Eksternal

Menuju website lain:

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

---

3.2 Link Internal (PENTING 🔥)

Digunakan untuk menghubungkan antar halaman dalam satu website

<a href="profil.html">Profil</a>

👉 Ini yang digunakan untuk membuat website multi halaman

---

3.3 Link dalam Halaman (Anchor)

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

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

---

3.4 Link Email

<a href="mailto:[email protected]">Kirim Email</a>

---

3.5 Link Telepon

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

---

4. Atribut Penting pada Link

4.1 target=”_blank”

Membuka di tab baru:

<a href="https://google.com" target="_blank">Buka</a>

---

4.2 title

Tooltip saat hover:

<a href="profil.html" title="Lihat profil">Profil</a>

---

5. STRUKTUR FOLDER WEBSITE (WAJIB PAHAM 🔥)

Ini yang membedakan pemula vs siap industri.

5.1 Contoh Struktur

website/
│
├── index.html
├── profil.html
├── kontak.html
│
├── assets/
│   ├── css/
│   ├── img/
│   └── js/

---

5.2 Penjelasan

File	Fungsi
index.html	Halaman utama
profil.html	Halaman profil
kontak.html	Halaman kontak

---

6. CARA MENGHUBUNGKAN HALAMAN

6.1 Dari index ke profil

<a href="profil.html">Profil</a>

---

6.2 Dari profil ke index

<a href="index.html">Home</a>

---

6.3 Navigasi Lengkap

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="profil.html">Profil</a></li>
    <li><a href="kontak.html">Kontak</a></li>
</ul>

👉 Ini adalah navbar website nyata

---

7. RELATIVE PATH vs ABSOLUTE PATH

7.1 Relative Path (WAJIB DIGUNAKAN)

<a href="profil.html">Profil</a>

👉 Digunakan dalam project lokal

---

7.2 Absolute Path

<a href="https://example.com/profil.html">Profil</a>

👉 Digunakan untuk link luar

---

7.3 Folder Path

Jika file di dalam folder:

<a href="assets/img/gambar.jpg">Gambar</a>

---

Jika naik folder:

<a href="../index.html">Kembali</a>

👉 .. = naik satu folder

---

8. STUDI KASUS UTAMA (WEBSITE MULTI HALAMAN)

🎯 Kasus: Website Sekolah

Struktur:

sekolah/
├── index.html
├── profil.html
├── kontak.html

---

8.1 index.html

<h1>Website Sekolah</h1>

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="profil.html">Profil</a></li>
    <li><a href="kontak.html">Kontak</a></li>
</ul>

<p>Selamat datang di website sekolah.</p>

---

8.2 profil.html

<h1>Profil Sekolah</h1>

<a href="index.html">Kembali ke Home</a>

<p>Sekolah unggulan di bidang teknologi.</p>

---

8.3 kontak.html

<h1>Kontak</h1>

<a href="index.html">Kembali ke Home</a>

<p>Email: [email protected]</p>

---

👉 Ini sudah menjadi website sederhana multi halaman 🔥

---

9. BEST PRACTICE INDUSTRI

✔ Gunakan struktur folder rapi

✔ Gunakan relative path

✔ Gunakan navbar di semua halaman

✔ Gunakan nama file konsisten

---

10. KESALAHAN UMUM SISWA

❌ File tidak ditemukan

👉 Salah:

<a href="Profile.html">

Padahal:

profil.html

⚠️ Case sensitive!

---

❌ Path salah

👉 File di folder tapi tidak ditulis

---

❌ Tidak ada navigasi balik

👉 User tidak bisa kembali

---

11. DEBUGGING (WAJIB DIAJARKAN)

Jika link tidak jalan:

1. Cek nama file
2. Cek huruf besar/kecil
3. Cek folder
4. Klik kanan → inspect

---

12. LATIHAN SISWA

Latihan 1

Buat:

• 2 halaman (index & profil)

---

Latihan 2

Buat:

• Navigasi 3 menu

---

Latihan 3

Buat:

• Link email & telepon

---

13. MINI PROJECT

🎯 “WEBSITE PROFIL DIRI”

Buat struktur:

project/
├── index.html
├── tentang.html
├── kontak.html

Isi:

• Navbar di semua halaman
• Link saling terhubung
• Konten berbeda tiap halaman

---

14. KESIMPULAN

Link HTML adalah kunci untuk:

• Membuat website multi halaman
• Navigasi antar halaman
• Menghubungkan informasi

Tag utama:

<a href="">...</a>