Elemen semantik, list, gambar, dan teks berstruktur sudah kita kenal satu per satu. Sekarang saatnya merangkai semuanya menjadi satu halaman nyata: katalog resep milik situs masakan rumahan fiktif Dapur Siti. Halaman ini berisi dua resep lengkap — Nasi Goreng Kampung dan Pisang Goreng Crispy — dalam satu berkas index.html.

Proyek ini melatih keterampilan yang jarang dilatih lewat potongan kecil: menyusun article bersarang di dalam section, memilih ul atau ol berdasarkan makna, menyisipkan figure dengan figcaption, menata informasi ringkas sebagai dl, menandai durasi dengan time, serta merangkai header, main, dan footer menjadi satu dokumen utuh yang tervalidasi.

Perilaku yang Diharapkan #

Sebelum menulis kode, mari kita tetapkan dulu hasil akhirnya. Halaman yang selesai menampilkan:

  • nama situs beserta tagline dan navigasi mini di bagian atas,
  • pengantar singkat katalog diikuti dua resep utuh,
  • setiap resep berisi foto hidangan, keterangan gambar, informasi porsi, waktu memasak, tingkat kesulitan, daftar bahan, dan langkah memasak bernomor,
  • catatan penutup dan footer kecil di bagian bawah.

Navigasi di header memakai fragment: satu klik pada “Nasi Goreng Kampung” menggulirkan halaman langsung ke resep tersebut tanpa memuat halaman baru.

Untuk melihatnya, cukup buka berkas index.html di browser — tanpa server, tanpa alat tambahan. Foto hidangan dirujuk dari folder assets/ di samping berkas; siapkan foto sendiri dengan nama berkas yang sama, seperti dibahas pada Bagian 4.

Tahapan Pengerjaan #

Proyek dikerjakan dalam lima bagian berurutan. Setiap bagian menghasilkan halaman yang dapat langsung diperiksa di browser:

  1. Struktur resep — menyusun kerangka halaman: head lengkap, header dengan navigasi fragment, dan section kosong siap diisi.
  2. Daftar bahan — mengisi setiap resep dengan ul bahan berformat kuantitas, termasuk sublist untuk bumbu halus.
  3. Langkah memasak — menuliskan urutan memasak sebagai ol dengan redaksi perintah satu aksi per langkah.
  4. Gambar dan caption — menyisipkan foto hidangan dalam figure lengkap dengan alt deskriptif dan figcaption.
  5. Informasi tambahan — menambahkan dl informasi resep, time durasi, section catatan penutup, dan footer.

Mulailah dari Bagian 1 dan ikuti urutannya karena setiap bagian dibangun di atas struktur bagian sebelumnya.

Kode Sumber Lengkap #

Berkas index.html berikut memuat keseluruhan hasil lima bagian di atas — 120 baris, dua resep utuh, berkomentar penanda bagian. Gunakan tombol unduh pada header code block untuk menyimpannya, lalu buka langsung di browser:

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Resep — Dapur Siti</title>
  <meta name="description" content="Katalog resep rumahan Dapur Siti: nasi goreng kampung dan pisang goreng crispy dengan daftar bahan dan langkah memasak yang mudah diikuti.">
</head>
<body>
  <!-- Kepala situs -->
  <header>
    <p><strong>Dapur Siti</strong> — resep rumahan sehari-hari</p>
    <nav aria-label="Navigasi katalog">
      <ul>
        <li><a href="#resep-utama">Resep Utama</a></li>
        <li><a href="#nasi-goreng-kampung">Nasi Goreng Kampung</a></li>
        <li><a href="#pisang-goreng-crispy">Pisang Goreng Crispy</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="pengantar">
      <h1>Katalog Resep Dapur Siti</h1>
      <p>Selamat datang di Dapur Siti — kumpulan resep masakan rumahan yang dicatat langsung dari dapur keluarga. Semua bahan mudah didapat di pasar terdekat, setiap langkah ditulis untuk pemula, dan setiap resep dilengkapi foto hidangan, informasi porsi dan waktu memasak, daftar bahan, serta langkah yang tersusun berurutan.</p>
    </section>
    <section id="resep-utama">
      <article id="nasi-goreng-kampung">
        <h2>Nasi Goreng Kampung</h2>
        <figure>
          <img
            src="assets/resep-nasi-goreng.svg"
            alt="Piring nasi goreng kecokelatan dengan telur mata sapi dan irisan cabai merah"
            width="800"
            height="600">
          <figcaption>Nasi Goreng Kampung — menu sarapan favorit keluarga akhir pekan.</figcaption>
        </figure>
        <dl>
          <dt>Porsi</dt>
          <dd>2 porsi</dd>
          <dt>Waktu memasak</dt>
          <dd><time datetime="PT15M">15 menit</time></dd>
          <dt>Tingkat kesulitan</dt>
          <dd>Mudah</dd>
        </dl>
        <h3>Bahan</h3>
        <ul>
          <li>400 gram nasi putih dingin</li>
          <li>3 butir bawang merah, iris tipis</li>
          <li>2 siung bawang putih, cincang halus</li>
          <li>2 butir telur ayam</li>
          <li>2 sendok makan kecap manis</li>
          <li>2 sendok makan minyak goreng</li>
          <li>Bumbu halus:
            <ul>
              <li>3 buah cabai merah keriting</li>
              <li>1 sendok teh terasi bakar</li>
            </ul>
          </li>
        </ul>
        <h3>Langkah</h3>
        <ol>
          <li>Panaskan minyak goreng di wajan dengan api sedang.</li>
          <li>Tumis bawang merah, bawang putih, dan bumbu halus hingga harum.</li>
          <li>Sisihkan tumisan ke tepi wajan, kemudian buat orak-arik telur di sisi kosong.</li>
          <li>Masukkan nasi dingin, aduk hingga tercampur rata dengan bumbu dan telur.</li>
          <li>Tambahkan kecap manis, aduk hingga warna nasi merata.</li>
          <li>Angkat dan sajikan selagi hangat.</li>
        </ol>
      </article>
      <!-- Pisang goreng crispy -->
      <article id="pisang-goreng-crispy">
        <h2>Pisang Goreng Crispy</h2>
        <figure>
          <img
            src="assets/resep-pisang-goreng.svg"
            alt="Tumpukan pisang goreng kuning keemasan dengan balutan tepung yang renyah"
            width="800"
            height="600">
          <figcaption>Pisang Goreng Crispy — teman minum teh di sore hari.</figcaption>
        </figure>
        <dl>
          <dt>Porsi</dt>
          <dd>4 porsi</dd>
          <dt>Waktu memasak</dt>
          <dd><time datetime="PT25M">25 menit</time></dd>
          <dt>Tingkat kesulitan</dt>
          <dd>Sedang</dd>
        </dl>
        <h3>Bahan</h3>
        <ul>
          <li>8 buah pisang kepok matang</li>
          <li>100 gram tepung beras</li>
          <li>50 gram tepung terigu</li>
          <li>150 mililiter air es</li>
          <li>1/2 sendok teh garam</li>
          <li>500 mililiter minyak goreng untuk menggoreng</li>
        </ul>
        <h3>Langkah</h3>
        <ol>
          <li>Kupas pisang, lalu belah tiap buah menjadi dua bagian.</li>
          <li>Campur tepung beras, tepung terigu, dan garam dalam mangkuk.</li>
          <li>Tuang air es sedikit demi sedikit sambil diaduk hingga adonan licin.</li>
          <li>Celupkan pisang ke adonan hingga seluruh permukaannya terbalut.</li>
          <li>Goreng pisang dalam minyak panas hingga kuning keemasan.</li>
          <li>Angkat, tiriskan, lalu sajikan selagi hangat.</li>
        </ol>
      </article>
    </section>
    <!-- Catatan penutup -->
    <section id="catatan">
      <h2>Catatan Penutup</h2>
      <p>Semua resep di atas sudah dicoba berulang kali di dapur keluarga. Takaran bumbu boleh disesuaikan dengan selera — kurangi cabai bila menyajikan untuk anak-anak, dan resep baru ditambahkan secara berkala.</p>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <p><small>© 2026 Dapur Siti — catatan masak keluarga Siti.</small></p>
  </footer>
</body>
</html>

Hasil yang dijanjikan bagian Perilaku yang Diharapkan bisa diperiksa langsung di sini — dan navigasinya hidup: klik salah satu tautan di bagian atas, halaman bergulir ke resepnya tanpa memuat halaman baru:

Pada demo, dua foto hidangan diganti placeholder SVG berukuran sama agar tampilannya langsung terlihat; markup dan seluruh teksnya sama persis dengan berkas proyek.

Peta besar berkasnya dapat dibaca dari komentarnya. Mari kita bedah per blok:

  1. Blok head (baris 1-8): doctype, lang="id", charset, viewport, title, dan meta description — metadata minimal yang sudah kita kuasai sejak Section Struktur Dokumen.
  2. Blok header (baris 10-20): nama situs dan tagline dalam satu paragraf, lalu nav berisi tiga tautan fragment menuju grup resep dan tiap resep.
  3. Blok pengantar (baris 22-25): satu h1 untuk seluruh halaman plus paragraf pembuka — pembaca dan mesin pencari menemukan konteks katalognya di sini.
  4. Blok resep (baris 26-108): inti halaman — section pengelompok membungkus dua article; tiap resep berisi h2, figure, dl, ul bahan dengan sublist bumbu halus, dan ol langkah.
  5. Blok penutup (baris 109-118): section catatan ber-h2 lalu footer kecil bertanda hak cipta.
# Struktur Resep

Rancang kerangka halaman resep: header, article, dan bagian isi resep.

Buka → # Daftar Bahan

Susun daftar bahan dengan unordered list yang rapi.

Buka → # Langkah Memasak

Susun langkah memasak dengan ordered list berjenjang.

Buka → # Gambar dan Caption

Sisipkan gambar hidangan lengkap dengan figure dan figcaption.

Buka → # Informasi Tambahan

Tambahkan waktu memasak, porsi, dan label diet memakai elemen teks semantik.

Buka →