Bagian 2: Navigasi dan Section

Kerangka dari Bagian 1 kini diisi konten sekaligus dihubungkan. Bagian ini menambahkan nav dengan tautan anchor, empat section ber-id, dan daftar proyek berbentuk article. Pola inilah pola dasar website satu halaman: satu dokumen, banyak section, satu navigasi.

Tautan Anchor dan Section Ber-id #

Tautan anchor memakai nilai href berbentuk #nama-id, dan browser meresponsnya dengan menggulir ke elemen yang ber-id tersebut. Agar setiap tautan menemukan tujuannya, nilai id harus unik dan ditulis sama persis — huruf besar dan kecil berpengaruh. Pemetaan navigasi portofolio ini seperti tabel berikut:

Tautan pada nav	Tujuan
`#beranda`	Section hero berisi sambutan singkat
`#proyek`	Section daftar proyek berbentuk article
`#keahlian`	Section daftar keahlian
`#kontak`	Section kontak dengan tautan mailto

Elemen nav membungkus seluruh tautan tersebut, dan atribut aria-label="Navigasi utama" memberi nama pada wilayah navigasi bila halaman memiliki lebih dari satu nav. Setiap proyek dibungkus article — elemen yang menyatakan satu karya mandiri, lengkap dengan heading h3 miliknya sendiri.

Mengisi Header dan Main #

File berikut melengkapi portofolio.html dari Bagian 1 dengan nav dan empat section:

html
portofolio-navigasi.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="Portofolio Siti Rahma, pengembang web yang fokus pada halaman cepat dan aksesibel.">
  <title>Portofolio Siti Rahma</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram SR" width="56" height="56">
    <div>
      <h1>Siti Rahma</h1>
      <p>Pengembang web: antarmuka cepat dan aksesibel</p>
    </div>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#proyek">Proyek</a></li>
        <li><a href="#keahlian">Keahlian</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="beranda">
      <h2>Selamat Datang</h2>
      <p>Saya membangun halaman web yang rapi dari sisi struktur dan ringan dari sisi ukuran berkas. Jelajahi daftar proyek di bawah, lalu hubungi saya bila ada ide yang ingin dikembangkan bersama.</p>
      <p><a href="#proyek">Lihat daftar proyek</a></p>
    </section>
    <section id="proyek">
      <h2>Proyek Pilihan</h2>
      <article>
        <h3>Galeri Foto Kelas</h3>
        <p>Halaman galeri untuk karya fotografi siswa, dibangun dengan figure dan img yang membawa atribut alt lengkap.</p>
        <p><a href="www.example.com/galeri-foto-kelas">www.example.com/galeri-foto-kelas</a></p>
      </article>
      <article>
        <h3>Buku Resep Dapur</h3>
        <p>Kumpulan resep keluarga yang disusun per kategori dengan daftar bersarang dan tabel takaran.</p>
        <p><a href="www.example.com/buku-resep">www.example.com/buku-resep</a></p>
      </article>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Struktur dokumen HTML yang semantik</li>
        <li>Tabel dan daftar untuk konten terstruktur</li>
        <li>Optimasi gambar agar halaman tetap ringan</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Surel: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Siti Rahma</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Di bawah header kini tampil empat blok berurutan:
  - "Selamat Datang" berisi sambutan dan tautan menuju daftar proyek
  - "Proyek Pilihan" memuat dua kartu proyek, masing-masing dengan judul dan tautan
  - "Keahlian" memuat tiga butir berpenanda bulat
  - "Kontak" memuat tautan surel
Mengklik tautan pada nav langsung menggulir halaman ke section tujuannya.

Mari kita bedah bagian yang baru:

Baris 16-23: nav di dalam header membungkus ul berisi empat tautan anchor; atribut aria-label menamai wilayah navigasinya.
Baris 26-30: section#beranda memadukan judul h2, paragraf sambutan, dan tautan menuju #proyek.
Baris 31-43: section#proyek menampung dua article; setiap article membawa heading h3, satu paragraf deskripsi, dan tautan menuju alamat contoh www.example.com .
Baris 44-51: section#keahlian menyusun tiga keahlian di dalam ul.
Baris 52-55: section#kontak memuat tautan mailto:[email protected].

Pemeriksaan Hasil Tahap Ini #

Buka portofolio-navigasi.html di browser, lalu klik setiap tautan nav; halaman harus menggulir ke section yang tepat.
Klik tautan “Lihat daftar proyek” pada hero; halaman menggulir ke section proyek.
Jalankan tests/cek-struktur.html, lalu centang butir-butir navigasi dan konten yang telah dipenuhi.

Seluruh konten kini saling terhubung, tetapi tampilannya masih gaya bawaan browser. Bagian berikutnya menatanya dengan stylesheet proyek.

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">
  <meta name="description" content="Portofolio Siti Rahma, pengembang web yang fokus pada halaman cepat dan aksesibel.">
  <title>Portofolio Siti Rahma</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram SR" width="56" height="56">
    <div>
      <h1>Siti Rahma</h1>
      <p>Pengembang web: antarmuka cepat dan aksesibel</p>
    </div>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#proyek">Proyek</a></li>
        <li><a href="#keahlian">Keahlian</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="beranda">
      <h2>Selamat Datang</h2>
      <p>Saya membangun halaman web yang rapi dari sisi struktur dan ringan dari sisi ukuran berkas. Jelajahi daftar proyek di bawah, lalu hubungi saya bila ada ide yang ingin dikembangkan bersama.</p>
      <p><a href="#proyek">Lihat daftar proyek</a></p>
    </section>
    <section id="proyek">
      <h2>Proyek Pilihan</h2>
      <article>
        <h3>Galeri Foto Kelas</h3>
        <p>Halaman galeri untuk karya fotografi siswa, dibangun dengan figure dan img yang membawa atribut alt lengkap.</p>
        <p><a href="www.example.com/galeri-foto-kelas">www.example.com/galeri-foto-kelas</a></p>
      </article>
      <article>
        <h3>Buku Resep Dapur</h3>
        <p>Kumpulan resep keluarga yang disusun per kategori dengan daftar bersarang dan tabel takaran.</p>
        <p><a href="www.example.com/buku-resep">www.example.com/buku-resep</a></p>
      </article>
    </section>
    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>Struktur dokumen HTML yang semantik</li>
        <li>Tabel dan daftar untuk konten terstruktur</li>
        <li>Optimasi gambar agar halaman tetap ringan</li>
      </ul>
    </section>
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Surel: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Siti Rahma</p>
  </footer>
</body>
</html>