Struktur Direktori

Kerangka dulu, isi kemudian. Pada bagian ini kita menyiapkan seluruh wadah katalog: head dengan metadata lengkap, header berisi nama perpustakaan dan navigasi fragment, main dengan judul dan pengantar, serta tiga section kosong yang menunggu tabel kategori. Setelah bagian ini selesai, tiga bagian berikutnya tinggal mengisi tempat yang sudah disiapkan.

Kerangka Halaman #

Kode berikut adalah titik awal proyek. Simpan sebagai index.html di dalam folder src/, lalu buka di browser:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pustaka Cendekia — Katalog Koleksi</title>
  <meta name="description" content="Katalog koleksi Pustaka Cendekia, perpustakaan komunitas warga: sepuluh buku fiksi, nonfiksi, dan referensi beserta tata cara peminjaman.">
</head>
<body>
  <header>
    <p><strong>Pustaka Cendekia</strong> — perpustakaan komunitas warga</p>
    <nav aria-label="Navigasi katalog">
      <ul>
        <li><a href="#fiksi">Fiksi</a></li>
        <li><a href="#nonfiksi">Nonfiksi</a></li>
        <li><a href="#referensi">Referensi</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Katalog Koleksi Pustaka Cendekia</h1>
    <p>Pustaka Cendekia adalah perpustakaan komunitas yang dikelola warga: koleksinya berasal dari sumbangan anggota, petugasnya relawan, dan seluruh layanan gratis. Katalog berikut memuat sepuluh judul yang tersedia di rak, dikelompokkan menjadi fiksi, nonfiksi, dan referensi.</p>
    <section id="fiksi">
      <!-- tabel fiksi diisi mulai Bagian 2 -->
    </section>
    <section id="nonfiksi">
      <!-- tabel nonfiksi diisi mulai Bagian 3 -->
    </section>
    <section id="referensi">
      <!-- tabel referensi diisi mulai Bagian 3 -->
    </section>
  </main>
</body>
</html>

Mari kita bedah baris demi baris:

1. Blok head (baris 1-8): charset UTF-8, viewport, title, dan meta description — empat metadata minimum halaman modern yang telah kita kuasai sejak Section Struktur Dokumen.
2. Nama perpustakaan dan tagline (baris 11): satu paragraf dengan strong pada namanya. Nama perpustakaan sengaja bukan heading — satu-satunya h1 disiapkan untuk judul katalog di dalam main.
3. nav dengan label (baris 12-18): navigasi memakai ul tautan; aria-label memberi nama wilayahnya bagi pembaca layar.
4. Tiga tautan fragment (baris 14-16): nilai href diawali kres dan harus sama persis dengan id targetnya — #fiksi menuju section di baris 22, #nonfiksi dan #referensi ke dua section di bawahnya.
5. Judul dan pengantar (baris 20-21): h1 tunggal seluruh halaman plus satu paragraf pembuka yang menjelaskan apa itu Pustaka Cendekia.
6. Tiga section kosong (baris 22-30): penanda tempat. Komentar HTML di dalamnya diganti tabel sungguhan mulai bagian berikutnya; tautan navigasi sudah bisa diklik karena id-nya terpasang.

Satu Section per Kategori #

Keputusan terbesar bagian ini ada pada bentuk wadahnya: tiga section — satu per kategori — alih-alih satu wadah besar untuk seluruh koleksi. Dua alasan menopang pilihan ini.

Pertama, pemilahan konteks pembaca. Pengunjung perpustakaan datang dengan kebutuhan spesifik: yang mencari bacaan akhir pekan langsung ingin daftar fiksi, yang mengerjakan tugas langsung ke referensi. Section per kategori memungkinkan tiap jenis pengunjung menemukan raknya tanpa menyaring baris yang tidak relevan. Tiap section juga membawa h2 sendiri, sehingga kerangka heading halaman sekaligus menjadi daftar isi katalog.

Kedua, navigasi fragment. Tautan #nonfiksi hanya bisa melompat ke elemen ber-id; tiga section memberi tiga sasaran lompatan yang berbeda. Satu wadah raksasa hanya punya satu sasaran — navigasi header kehilangan fungsinya.

Hasil pada Browser #

Judul tab menampilkan “Pustaka Cendekia — Katalog Koleksi” dari title. Di halaman tampak nama perpustakaan, tagline, tiga tautan, judul katalog, dan paragraf pengantar; tiga area kategori di bawahnya masih kosong. Klik “Fiksi” — address bar bertambah #fiksi dan halaman menggulir ke posisi section kosong pertama. Halaman valid dan seluruh tautan berfungsi, meski belum ada satu baris data pun.

Inilah keadaan halaman pada akhir Bagian 1 — tiga section kategori masih kosong karena tabelnya menyusul; klik ketiga tautan navigasi untuk melompat ke posisi masing-masing:

Ringkasan Bagian 1 #

• Kerangka lengkap: head berisi empat metadata minimum, header dengan navigasi fragment, main dengan judul, pengantar, dan tiga section kosong.
• Tiga section kategori memberi tiga sasaran lompatan fragment — href dan id wajib sama persis.
• Section per kategori memilah konteks pembaca dan menjadikan kerangka heading sebagai daftar isi katalog.

Bagian berikutnya mengisi section pertama dengan tabel katalog fiksi.