Reusable Page Structure

Dua contoh pada Chapter sebelumnya menunjukkan kebiasaan yang tersebar di hampir semua situs: halaman-halaman dalam satu situs saling berbagi kerangka. Bagian head, header dengan menu navigasi, dan footer tampil sama di seluruh halaman, sedangkan hanya isinya yang berganti. Chapter ini membahas cara menata kerangka yang dapat dipakai ulang tersebut: menyiapkan kerangka dasar, memahami konsep template dan partial, menetapkan konvensi penamaan file, serta menandai wilayah-wilayah penting dengan komentar.

Kerangka Dasar yang Disalin di Setiap Halaman #

Langkah pertamanya adalah menetapkan satu kerangka dasar: dokumen HTML lengkap dengan wilayah-wilayah tetap, dan main yang sengaja dibiarkan kosong sebagai tempat isi. Simpan file berikut sebagai kerangka-dasar.html:

html
kerangka-dasar.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Judul Halaman Ini — Situs Budi</title>
</head>
<body>
  <!-- ===== HEADER SITUS: sama di semua halaman ===== -->
  <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>
      </ul>
    </nav>
  </header>

  <!-- ===== KONTEN UTAMA: berbeda di setiap halaman ===== -->
  <main>
    <!-- isi halaman ditulis di sini -->
  </main>

  <!-- ===== FOOTER SITUS: sama di semua halaman ===== -->
  <footer>
    <p>&copy; 2025 Situs Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Jendela browser menampilkan:
  - Nama "Situs Budi" beserta menu Beranda, Tentang, Kontak
  - Wilayah tengah kosong karena main belum diisi
  - Baris hak cipta di bagian bawah

Mari kita telaah pembagiannya:

head: charset, viewport, dan judul menjadi bagian tetap; hanya teks title yang disesuaikan per halaman.
header dengan nav: menu navigasi global; isinya sama di semua halaman sehingga pengunjung tidak kehilangan arah.
main kosong: satu-satunya wilayah yang berbeda di tiap halaman — di sinilah konten khas diletakkan.
footer: penutup situs yang seragam.

Kerangka semacam ini disalin ke setiap halaman baru, lalu diisi. Kuncinya bukan pada file kerangka-dasar.html itu sendiri, melainkan pada disiplin: salinan di semua halaman harus identik bagian yang identik itu.

Konsep Template dan Partial #

Dua istilah industri mendeskripsikan praktik di atas secara lebih rapi. Template adalah dokumen induk yang menyisakan slot untuk konten yang berubah-ubah — kerangka dasar kita adalah template dalam bentuk paling sederhana. Partial adalah potongan yang dipakai ulang di banyak halaman, misalnya potongan header atau footer yang disimpan tersendiri lalu disisipkan ke setiap halaman.

Dalam HTML murni, penyisipan dilakukan dengan menyalin potongan secara manual. Generator situs statis maupun mesin template di sisi server mengotomatiskan penyisipan yang sama, sehingga satu perubahan cukup ditulis sekali untuk seluruh situs.

Konvensi Penamaan File Halaman #

Kerangka yang dipakai ulang hanya rapi bila nama filenya juga rapi. Konvensi yang kita pegang:

Nama file	Peran
`index.html`	beranda, atau halaman bawaan sebuah folder
`tentang.html`	profil situs atau pemiliknya
`kontak.html`	cara menghubungi pemilik situs
`galeri/index.html`	halaman bawaan subfolder `galeri`

Tiga kaidahnya: nama file berhuruf kecil, tanpa spasi, dan deskriptif — kebiasaan yang sama dengan yang kita pegang saat menyusun menu navigasi pada Chapter Navigasi Antarhalaman. Nama semacam ini aman di semua sistem operasi dan terbaca jelas di URL. File index.html menempati posisi khusus: browser dan server menampilkannya ketika pengunjung membuka alamat folder tanpa nama file.

Komentar Penanda pada Kerangka #

Kerangka dasar di atas memakai komentar penanda seperti . Penanda ini berfungsi sebagai papan petunjuk saat kerangka disunting: anggota tim baru langsung membaca wilayah mana yang boleh diubah dan wilayah mana yang harus dibiarkan sama di semua salinan.

Penanda paling berguna menjawab dua pertanyaan: wilayah ini milik situs atau halaman, dan bolehkah isinya berbeda antarhalaman. Karena komentar ikut terkirim ke browser pengunjung sebagaimana dibahas pada Chapter Batas Keamanan HTML, isinya sebaiknya ringkas dan tidak memuat apa pun yang sifatnya rahasia.

Variasi Halaman dari Kerangka yang Sama #

Berikut satu salinan kerangka yang telah diisi menjadi halaman tentang. Simpan sebagai halaman-tentang.html, lalu bandingkan dengan kerangka dasarnya:

html
halaman-tentang.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang — Situs Budi</title>
</head>
<body>
  <!-- ===== HEADER SITUS: sama di semua halaman ===== -->
  <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>
      </ul>
    </nav>
  </header>

  <!-- ===== KONTEN UTAMA: berbeda di setiap halaman ===== -->
  <main>
    <h1>Tentang Situs Budi</h1>
    <p>Situs ini adalah catatan latihan HTML milik Budi.</p>
    <p>Materinya disusun bertahap dari struktur dokumen hingga form.</p>
  </main>

  <!-- ===== FOOTER SITUS: sama di semua halaman ===== -->
  <footer>
    <p>&copy; 2025 Situs Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Jendela browser menampilkan:
  - Header, menu, dan footer yang persis sama dengan kerangka dasar
  - Judul tab browser "Tentang — Situs Budi"
  - Dua paragraf perkenalan di wilayah utama

Perbedaan dengan kerangka dasar hanya dua: teks title dan isi main. Seluruh wilayah lain — meta, header, nav, footer, hingga komentar penandanya — tersalin apa adanya. Perbandingan ini adalah uji kelayakan kerangka: bila membuat halaman baru menuntut perubahan di luar title dan main, berarti ada bagian situs yang sifatnya tetap namun belum ditempatkan ke wilayah tetap kerangka.

Kerangka yang konsisten adalah modal utama situs multi-halaman. Chapter berikutnya merakit modal itu menjadi situs utuh: struktur folder yang tertata, navigasi global antarhalaman, dan detail kecil seperti title yang unik di setiap halaman.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang — Situs Budi</title>
</head>
<body>
  <!-- ===== HEADER SITUS: sama di semua halaman ===== -->
  <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>
      </ul>
    </nav>
  </header>

  <!-- ===== KONTEN UTAMA: berbeda di setiap halaman ===== -->
  <main>
    <h1>Tentang Situs Budi</h1>
    <p>Situs ini adalah catatan latihan HTML milik Budi.</p>
    <p>Materinya disusun bertahap dari struktur dokumen hingga form.</p>
  </main>

  <!-- ===== FOOTER SITUS: sama di semua halaman ===== -->
  <footer>
    <p>&copy; 2025 Situs Budi</p>
  </footer>
</body>
</html>

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Judul Halaman Ini — Situs Budi</title>
</head>
<body>
  <!-- ===== HEADER SITUS: sama di semua halaman ===== -->
  <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>
      </ul>
    </nav>
  </header>

  <!-- ===== KONTEN UTAMA: berbeda di setiap halaman ===== -->
  <main>
    <!-- isi halaman ditulis di sini -->
  </main>

  <!-- ===== FOOTER SITUS: sama di semua halaman ===== -->
  <footer>
    <p>&copy; 2025 Situs Budi</p>
  </footer>
</body>
</html>