Multi Page Website

Kerangka yang dapat dipakai ulang kini siap dipakai untuk sesuatu yang lebih besar: situs yang terdiri atas banyak halaman. Situs semacam ini menuntut keputusan arsitektural di atas tingkat halaman: letak folder setiap file, cara halaman saling menyambung, dan bagian yang harus berbeda antarhalaman. Chapter ini merakit situs kecil milik Budi memakai seluruh bekal dari section Links dan dua Chapter sebelumnya.

Pohon Folder Situs Multi Halaman #

Arsitektur folder adalah peta situs. Rancangan berikut menampung enam halaman dalam folder utama situs-budi:

situs-budi/
├── index.html
├── tentang.html
├── kontak.html
├── galeri/
│   └── index.html
└── blog/
    └── index.html

Perannya sebagai berikut:

• Akar folder (root): halaman-halaman utama — index.html sebagai beranda, lalu tentang.html dan kontak.html.
• Subfolder galeri: menampung halaman galeri lewat index.html miliknya sendiri.
• Subfolder blog: menampung daftar artikel; artikel baru ditambahkan di sini.

Kaidah index.html bekerja di setiap folder: membuka www.example.com/blog/ tanpa nama file menampilkan blog/index.html. Satu kebutuhan baru berarti satu folder baru, tanpa menimbun file di akar.

Navigasi Global yang Konsisten #

Situs multi-halaman hidup dari satu menu yang sama: urutan tautan, labelnya, dan tujuannya identik di seluruh halaman. Menu inilah navigasi global, ditulis sebagai nav di dalam header — wilayah tetap kerangka dasar yang telah kita susun. Pengunjung yang menghafal posisi menu di halaman pertama mengandalkan posisi yang sama di halaman berikutnya.

Path Relatif Antar Folder #

Setiap halaman menulis menu yang sama, tetapi path-nya berbeda karena relative URL dihitung dari letak file yang memuatnya — rangkuman dari Chapter Absolute dan Relative URL:

Aturannya dua: turun ke subfolder berarti menulis nama folder lalu garis miring; naik ke folder induk berarti mengawali path dengan ../. Dengan path yang seluruhnya relative, folder situs dapat dipindah ke lokasi mana pun tanpa memperbaiki satu tautan pun.

Title dan Deskripsi Unik per Halaman #

Kerangka yang sama tidak berarti identitas halaman boleh sama. Setiap halaman membutuhkan title dan meta description yang unik, karena keduanya tampil di hasil mesin pencari dan di tab browser — materi Chapter Title dan Description:

Pola penamaan “Nama Halaman — Nama Situs” menjaga setiap tab tetap teridentifikasi. Meta description ditulis khusus per halaman, sebab ringkasan beranda tidak mungkin menggambarkan isi halaman tentang.

Contoh: Beranda yang Menyambung Semua #

File berikut adalah index.html di akar folder situs-budi. Simpan sebagai beranda-situs.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Beranda Situs Budi: catatan latihan HTML, galeri latihan, dan daftar artikel.">
  <title>Beranda — Situs Budi</title>
</head>
<body>
  <header>
    <p><strong>Situs Budi</strong></p>
    <nav>
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kontak.html">Kontak</a></li>
        <li><a href="galeri/index.html">Galeri</a></li>
        <li><a href="blog/index.html">Blog</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Selamat datang di Situs Budi</h1>
    <p>Situs ini menghimpun latihan HTML: halaman profil, galeri gambar, dan blog singkat.</p>
    <p>Mulai dari <a href="tentang.html">halaman tentang</a> atau telusuri <a href="blog/index.html">artikel terbaru</a>.</p>
  </main>
  <footer>
    <nav>
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kontak.html">Kontak</a></li>
        <li><a href="galeri/index.html">Galeri</a></li>
        <li><a href="blog/index.html">Blog</a></li>
      </ul>
    </nav>
    <p>&copy; 2025 Situs Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Menu navigasi global berisi lima tautan di bagian atas
  - Sambutan beranda beserta dua tautan ke halaman tentang dan blog
  - Menu yang sama sekali lagi di footer, diikuti baris hak cipta
  - Tab browser bertuliskan "Beranda — Situs Budi"

Mari kita telaah bagiannya:

1. Meta description pada head: ringkasan khas beranda, berbeda dari description halaman lain.
2. nav pertama: navigasi global berisi lima halaman; path galeri/index.html dan blog/index.html turun ke subfolder.
3. main: konten khas beranda dengan dua tautan yang mengarahkan pengunjung baru.
4. nav kedua di footer: menu sekunder; satu halaman boleh memuat dua nav berbeda peran, dan browser memperlakukannya sebagai wilayah terpisah.
5. title: pola “Beranda — Situs Budi” yang menjadi templat penamaan bagi halaman-halaman lain.

Menu pada halaman subfolder perlu penyesuaian path. Cuplikan berikut memperlihatkan nav di blog/index.html:

<nav>
  <ul>
    <li><a href="../index.html">Beranda</a></li>
    <li><a href="../tentang.html">Tentang</a></li>
    <li><a href="../kontak.html">Kontak</a></li>
    <li><a href="../galeri/index.html">Galeri</a></li>
  </ul>
</nav>

Setiap path diawali ../ untuk naik ke akar folder, kecuali tautan menuju halaman blog sendiri yang cukup ditulis index.html. Label dan urutannya tetap sama; hanya penulisan alamatnya yang berubah.

Situs Budi kini terhubung utuh: enam halaman, satu menu global, identitas yang jelas di tiap halaman. Bekal berikutnya adalah isi main — halaman sejenis sebaiknya mengikuti pola konten yang sama.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen nav
• MDN Web Docs — Elemen title
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Beranda Situs Budi: catatan latihan HTML, galeri latihan, dan daftar artikel.">
  <title>Beranda — Situs Budi</title>
</head>
<body>
  <header>
    <p><strong>Situs Budi</strong></p>
    <nav>
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kontak.html">Kontak</a></li>
        <li><a href="galeri/index.html">Galeri</a></li>
        <li><a href="blog/index.html">Blog</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Selamat datang di Situs Budi</h1>
    <p>Situs ini menghimpun latihan HTML: halaman profil, galeri gambar, dan blog singkat.</p>
    <p>Mulai dari <a href="tentang.html">halaman tentang</a> atau telusuri <a href="blog/index.html">artikel terbaru</a>.</p>
  </main>
  <footer>
    <nav>
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kontak.html">Kontak</a></li>
        <li><a href="galeri/index.html">Galeri</a></li>
        <li><a href="blog/index.html">Blog</a></li>
      </ul>
    </nav>
    <p>&copy; 2025 Situs Budi</p>
  </footer>
</body>
</html>