Enam proyek sebelumnya masing-masing mengambil satu kelompok materi dan menggarapnya sampai tuntas: profil penulis bersandar pada struktur dokumen, dokumentasi produk pada heading dan tabel, formulir survei pada form dan validasinya. Proyek penutup Course ini berperan sebagai puncak: situs multi-halaman lengkap untuk komunitas fiktif Kopi.dev — Komunitas Belajar Web, empat berkas HTML yang menggabungkan hampir seluruh materi Course sekaligus — kerangka semantik, navigasi antarhalaman, teks, tabel, form, dan metadata masing-masing menempati perannya.

Tiga kemampuan diuji sekaligus di sini. Pertama, struktur semantic menyeluruh: keempat halaman memakai header, nav, main, dan footer dengan pola sama, sementara isi main-nya berbeda-beda — hero, cerita, tabel, dan form menuntut pilihan elemen yang berbeda pula. Kedua, navigasi konsisten: menu yang sama ditempelkan ke empat berkas dan penanda halaman aktif berpindah mengikuti pembaca. Ketiga, kombinasi elemen terluas sepanjang Course: blockquote untuk kutipan pendiri, time untuk tanggal kegiatan, address untuk lokasi, table untuk jadwal, sampai form lengkap dengan select dan textarea — semuanya dalam satu situs yang saling terhubung.

Perilaku yang Diharapkan #

Sebelum menulis kode, mari kita tetapkan dulu hasil akhirnya — kali ini untuk empat halaman sekaligus. Semua halaman terhubung lewat menu di bagian atas, dan setiap halaman punya satu tanggung jawab isi.

  • Menu di bagian atas keempat halaman memuat empat item yang sama: Beranda, Tentang, Kegiatan, dan Kontak. Satu klik memindahkan pengunjung antarberkas — item halaman yang sedang dibuka bertanda aria-current, jadi pengunjung selalu tahu posisinya.
  • Halaman utama menyambut pengunjung dengan hero — satu h1, ajakan singkat, dan dua tautan lanjutan. Di bawahnya: sekilas tiga kegiatan dalam article ber-time, lalu daftar alasan bergabung.
  • Halaman Tentang menjawab pertanyaan “siapa”: cerita komunitas, visi dengan kutipan pendiri dalam blockquote, dan struktur pengurus yang disusun heading berjenjang h2-h3.
  • Halaman Kegiatan memuat tiga article lengkap — tanggal ber-time, deskripsi, address lokasi, dan tautan pendaftaran — ditutup tabel jadwal rutin dengan caption dan scope.
  • Halaman Kontak menutup situs dengan form pesan berlabel lengkap serta address berisi tautan tel: dan mailto:.
  • Footer yang sama menempel di keempat halaman: alamat sekretariat, tautan sosial komunitas, dan baris hak cipta ber-time.

Untuk melihatnya, unduh keempat berkas ke satu folder yang sama, lalu buka index.html di browser — tanpa server, tanpa alat tambahan. Tautan antarhalaman ditulis relatif, jadi hanya berfungsi bila keempat berkas bertetangga.

Struktur Berkas #

Keempat halaman tinggal di satu folder, berdampingan dengan folder aset:

text 
website-komunitas/
├── index.html
├── tentang.html
├── kegiatan.html
├── kontak.html
└── assets/

Karena semua berkas berada di folder yang sama, tautan antarhalaman cukup ditulis nama berkasnya — kegiatan.html — dan browser melengkapinya dengan lokasi halaman saat ini. Folder assets/ disiapkan untuk gambar kegiatan di kemudian hari; situs ini murni teks karena fokus pembelajarannya memang pada struktur.

Tahapan Pengerjaan #

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

  1. Halaman Utama — menyusun hero ber-h1 dengan dua tautan ajakan, sekilas kegiatan dalam article ber-time, dan daftar manfaat bergabung.
  2. Halaman Tentang — membangun section Cerita, Visi dengan blockquote pendiri, dan Struktur pengurus berheading berjenjang.
  3. Halaman Kegiatan — menulis tiga article kegiatan ber-time dan address, ditutup tabel jadwal rutin dengan caption dan scope.
  4. Halaman Kontak — mengisi form pesan dengan label, required, autocomplete, select, dan textarea, plus address berisi tel: dan mailto:.
  5. Navigasi Antarhalaman — menempelkan menu yang sama ke empat berkas, menggeser penanda aria-current, dan menimbang biaya pemeliharaannya.
  6. Struktur Semantic HTML — mengaudit pohon semantic dan heading seluruh situs, menguji semua tautan, lalu menutup Course.

Mulailah dari Bagian 1 dan ikuti urutannya — setiap bagian dibangun di atas struktur bagian sebelumnya, dan potongan kode pada tiap bagian sama persis dengan bagiannya pada berkas final.

Kode Sumber Lengkap #

Empat berkas berikut memuat keseluruhan hasil enam bagian di atas. Gunakan tombol unduh pada header tiap code block untuk menyimpannya, lalu letakkan keempatnya di satu folder yang sama:

index.html — halaman utama, 73 baris: hero, sekilas kegiatan, dan manfaat bergabung.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kopi.dev — Komunitas Belajar Web</title>
  <meta name="description" content="Kopi.dev adalah komunitas belajar web untuk pemula: kelas dasar HTML, sesi latihan bersama, dan diskusi bulanan. Bergabung tanpa biaya.">
</head>
<body>
  <!-- Kepala situs: nama, tagline, dan navigasi utama -->
  <header>
    <p><strong>Kopi.dev</strong> — komunitas belajar web</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html" aria-current="page">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kegiatan.html">Kegiatan</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- Hero: sambutan dan ajakan utama -->
    <section id="hero">
      <h1>Belajar Web Bersama, Langsung Praktik</h1>
      <p>Kopi.dev mengumpulkan orang-orang yang sedang belajar membangun halaman web: pelajar, mahasiswa, guru, hingga purnawirawan. Setiap pertemuan berangkat dari satu berkas kosong dan pulang membawa halaman yang benar-benar tampil di browser.</p>
      <p><a href="tentang.html">Kenali komunitas kami</a> atau langsung <a href="kegiatan.html">lihat kegiatan terdekat</a>.</p>
    </section>
    <!-- Sekilas kegiatan terdekat -->
    <section id="sekilas-kegiatan">
      <h2>Sekilas Kegiatan</h2>
      <article>
        <h3>Workshop HTML Dasar</h3>
        <p>Sabtu, <time datetime="2026-11-07">7 November 2026</time> — kerangka halaman, teks, dan tautan untuk pemula. Terbuka 20 kursi.</p>
      </article>
      <article>
        <h3>Sesi Latihan Bersama</h3>
        <p>Rabu, <time datetime="2026-11-11">11 November 2026</time> — membongkar halaman anggota lalu menyusunnya kembali dengan elemen semantik.</p>
      </article>
      <article>
        <h3>Diskusi Bulanan</h3>
        <p>Sabtu, <time datetime="2026-11-21">21 November 2026</time> — topik bulan ini: membaca dokumentasi resmi tanpa tersesat.</p>
      </article>
      <p><a href="kegiatan.html">Lihat seluruh kegiatan dan jadwal rutin</a></p>
    </section>
    <!-- Alasan bergabung -->
    <section id="kenapa-bergabung">
      <h2>Kenapa Bergabung?</h2>
      <ul>
        <li>Tidak ada biaya — komunitas dijalankan anggota untuk anggota.</li>
        <li>Materi berjenjang dari HTML hingga CSS, disusun pengurus dan dipraktikkan bersama.</li>
        <li>Teman yang siap memeriksa kode kita dan menjelaskan bagian yang macet.</li>
        <li>Kesempatan memandu sesi begitu materi dasar dikuasai.</li>
      </ul>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    </address>
    <nav aria-label="Tautan sosial">
      <ul>
        <li><a href="https://www.example.com/kopidev-forum" target="_blank" rel="noopener">Forum</a></li>
        <li><a href="https://www.example.com/kopidev-chat" target="_blank" rel="noopener">Ruang chat</a></li>
        <li><a href="https://www.example.com/kopidev-kode" target="_blank" rel="noopener">Repositori latihan</a></li>
      </ul>
    </nav>
    <p><small>© <time datetime="2026">2026</time> Kopi.dev — Komunitas Belajar Web.</small></p>
  </footer>
</body>
</html>

Beranda yang dijanjikan bagian Perilaku yang Diharapkan bisa diperiksa langsung di sini — strukturnya lengkap dari menu sampai footer:

Pada demo, seluruh tautan antarhalaman dimatikan (nilainya diganti #) karena demo hanya satu potongan berkas — unduh keempat berkasnya ke satu folder untuk navigasi sungguhan; tautan mailto: biasanya ditahan browser di dalam iframe, sedangkan tiga tautan sosial tetap terbuka di tab baru.

tentang.html — halaman tentang, 73 baris: cerita, visi dengan kutipan pendiri, dan struktur pengurus.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang Kami — Kopi.dev</title>
  <meta name="description" content="Cerita, visi, dan struktur pengurus Kopi.dev — komunitas belajar web yang berawal dari satu meja kedai kopi pada 2023.">
</head>
<body>
  <!-- Kepala situs: nama, tagline, dan navigasi utama -->
  <header>
    <p><strong>Kopi.dev</strong> — komunitas belajar web</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html" aria-current="page">Tentang</a></li>
        <li><a href="kegiatan.html">Kegiatan</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Tentang Kopi.dev</h1>
    <p>Halaman ini menjawab tiga pertanyaan yang paling sering sampai ke pengurus: bagaimana komunitas ini berdiri, ke mana arahnya, dan siapa yang menjalankannya sehari-hari.</p>
    <!-- Cerita komunitas -->
    <section id="cerita">
      <h2>Cerita Kami</h2>
      <p>Kopi.dev berawal pada 2023 dari satu meja panjang di kedai kopi dekat kampus. Lima orang yang sama-sama baru belajar HTML sepakat bahwa materi dikerjakan bersama jauh lebih mudah dicerna daripada dipelajari sendirian di depan tutorial.</p>
      <p>Meja itu berubah menjadi pertemuan rutin, pertemuan rutin menjadi jadwal tetap, dan jadwal tetap menjadi komunitas bernama Kopi.dev — nama yang mengingatkan kami pada tempat berawalnya.</p>
    </section>
    <!-- Visi dan kutipan pendiri -->
    <section id="visi">
      <h2>Visi</h2>
      <p>Setiap orang di sekitar kami yang ingin belajar web menemukan tempat bertanya, teman berlatih, dan panggung untuk mengajar kembali begitu siap.</p>
      <blockquote cite="https://www.example.com/wawancara-pendiri">
        <p>Kode yang diperlihatkan kepada teman sebelah tumbuh lebih cepat daripada kode yang disimpan sendiri.</p>
        <footer>— Rani Puspita, pendiri Kopi.dev</footer>
      </blockquote>
    </section>
    <!-- Struktur komunitas -->
    <section id="struktur">
      <h2>Struktur Komunitas</h2>
      <h3>Pengurus</h3>
      <p>Pengurus mengatur jadwal, materi, dan keuangan komunitas untuk masa bakti satu tahun.</p>
      <ul>
        <li>Rani Puspita — koordinator umum</li>
        <li>Bagas Pratama — koordinator materi</li>
        <li>Ayu Lestari — koordinator acara</li>
        <li>Fajar Nugroho — bendahara</li>
      </ul>
      <h3>Tim Inti</h3>
      <p>Enam anggota yang membuka sesi latihan dan menjawab pertanyaan di forum antarpertemuan.</p>
      <h3>Anggota</h3>
      <p>Semua peserta kegiatan, dari pemula penuh sampai yang mulai memandu sesi. Peran berputar: anggota hari ini bisa menjadi tim inti semester depan.</p>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    </address>
    <nav aria-label="Tautan sosial">
      <ul>
        <li><a href="https://www.example.com/kopidev-forum" target="_blank" rel="noopener">Forum</a></li>
        <li><a href="https://www.example.com/kopidev-chat" target="_blank" rel="noopener">Ruang chat</a></li>
        <li><a href="https://www.example.com/kopidev-kode" target="_blank" rel="noopener">Repositori latihan</a></li>
      </ul>
    </nav>
    <p><small>© <time datetime="2026">2026</time> Kopi.dev — Komunitas Belajar Web.</small></p>
  </footer>
</body>
</html>

kegiatan.html — halaman kegiatan, 88 baris: tiga article kegiatan dan tabel jadwal rutin.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kegiatan — Kopi.dev</title>
  <meta name="description" content="Kegiatan Kopi.dev: workshop HTML dasar, sesi latihan bersama, diskusi bulanan, dan jadwal rutin komunitas sepanjang pekan.">
</head>
<body>
  <!-- Kepala situs: nama, tagline, dan navigasi utama -->
  <header>
    <p><strong>Kopi.dev</strong> — komunitas belajar web</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kegiatan.html" aria-current="page">Kegiatan</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Kegiatan Komunitas</h1>
    <p>Tiga kegiatan besar menanti pada November 2026, dan semuanya terbuka bagi anggota baru — cukup datang dan kenalkan diri. Di luar tanggal itu, komunitas bergerak mengikuti <a href="#jadwal-rutin">jadwal rutin sepanjang pekan</a>.</p>
    <!-- Kegiatan: workshop HTML dasar -->
    <article id="workshop-html-dasar">
      <h2>Workshop HTML Dasar</h2>
      <p>Sabtu, <time datetime="2026-11-07">7 November 2026</time>, 10.00–12.00 WIB.</p>
      <p>Membangun halaman pertama dari nol: struktur dokumen, teks, tautan, dan gambar. Kursi dibatasi 20 orang agar pemateri sempat memeriksa kode tiap peserta.</p>
      <address>
        Ruang Cendana, Jalan Kenari No. 12, Jakarta Selatan 12130
      </address>
      <p><a href="https://www.example.com/daftar-workshop" target="_blank" rel="noopener">Daftar kursi workshop</a></p>
    </article>
    <!-- Kegiatan: sesi latihan bersama -->
    <article id="sesi-latihan">
      <h2>Sesi Latihan Bersama</h2>
      <p>Rabu, <time datetime="2026-11-11">11 November 2026</time>, 19.00–21.00 WIB.</p>
      <p>Membongkar halaman milik anggota lalu menyusunnya kembali dengan elemen semantik. Bawa satu berkas HTML Anda; sisanya disediakan di tempat.</p>
      <address>
        Kedai Sebelah, Jalan Cempaka No. 8, Jakarta Selatan 12790
      </address>
      <p><a href="https://www.example.com/daftar-latihan" target="_blank" rel="noopener">Daftar sesi latihan</a></p>
    </article>
    <!-- Kegiatan: diskusi bulanan -->
    <article id="diskusi-bulanan">
      <h2>Diskusi Bulanan</h2>
      <p>Sabtu, <time datetime="2026-11-21">21 November 2026</time>, 15.00–17.00 WIB.</p>
      <p>Topik bulan ini: membaca dokumentasi resmi tanpa tersesat. Sesi terbuka — cukup dengarkan, atau bawa pertanyaan Anda sendiri.</p>
      <address>
        Ruang Cendana, Jalan Kenari No. 12, Jakarta Selatan 12130
      </address>
      <p><a href="https://www.example.com/daftar-diskusi" target="_blank" rel="noopener">Daftar diskusi bulanan</a></p>
    </article>
    <!-- Jadwal rutin mingguan -->
    <section id="jadwal-rutin">
      <h2>Jadwal Rutin Komunitas</h2>
      <p>Di luar kegiatan besar, tiap pekan berisi pertemuan tetap:</p>
      <table>
        <caption>Pertemuan rutin Kopi.dev sepanjang pekan</caption>
        <thead>
          <tr><th scope="col">Hari</th><th scope="col">Kegiatan</th><th scope="col">Waktu</th><th scope="col">Tempat</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">Senin</th><td>Forum tanya jawab</td><td>19.00–21.00</td><td>Daring</td></tr>
          <tr><th scope="row">Rabu</th><td>Sesi latihan</td><td>19.00–21.00</td><td>Kedai Sebelah</td></tr>
          <tr><th scope="row">Sabtu</th><td>Kelas dasar</td><td>10.00–12.00</td><td>Ruang Cendana</td></tr>
        </tbody>
      </table>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    </address>
    <nav aria-label="Tautan sosial">
      <ul>
        <li><a href="https://www.example.com/kopidev-forum" target="_blank" rel="noopener">Forum</a></li>
        <li><a href="https://www.example.com/kopidev-chat" target="_blank" rel="noopener">Ruang chat</a></li>
        <li><a href="https://www.example.com/kopidev-kode" target="_blank" rel="noopener">Repositori latihan</a></li>
      </ul>
    </nav>
    <p><small>© <time datetime="2026">2026</time> Kopi.dev — Komunitas Belajar Web.</small></p>
  </footer>
</body>
</html>

kontak.html — halaman kontak, 79 baris: form pesan dan address kanal kontak.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontak — Kopi.dev</title>
  <meta name="description" content="Hubungi Kopi.dev: kirim pesan lewat form, atau datang ke sekretariat komunitas di Jalan Kenari No. 12, Jakarta Selatan.">
</head>
<body>
  <!-- Kepala situs: nama, tagline, dan navigasi utama -->
  <header>
    <p><strong>Kopi.dev</strong> — komunitas belajar web</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kegiatan.html">Kegiatan</a></li>
        <li><a href="kontak.html" aria-current="page">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Hubungi Kami</h1>
    <p>Pesan anggota baru, tawaran kolaborasi, atau pertanyaan materi — semuanya sampai ke pengurus lewat satu form di bawah ini, atau lewat kanal pada bagian akhir halaman.</p>
    <!-- Form pesan -->
    <section id="form-pesan">
      <h2>Kirim Pesan</h2>
      <form action="https://www.example.com/kirim-pesan" method="post">
        <p>
          <label for="nama">Nama lengkap</label>
          <input type="text" id="nama" name="nama" required autocomplete="name">
        </p>
        <p>
          <label for="email">Alamat email</label>
          <input type="email" id="email" name="email" required autocomplete="email">
        </p>
        <p>
          <label for="topik">Topik pesan</label>
          <select id="topik" name="topik">
            <option value="umum">Pertanyaan umum</option>
            <option value="materi">Pertanyaan materi</option>
            <option value="kolaborasi">Kolaborasi</option>
            <option value="lainnya">Lainnya</option>
          </select>
        </p>
        <p>
          <label for="pesan">Isi pesan</label>
          <textarea id="pesan" name="pesan" rows="6" cols="40"></textarea>
        </p>
        <button type="submit">Kirim Pesan</button>
      </form>
    </section>
    <!-- Alamat dan kanal kontak lain -->
    <section id="alamat">
      <h2>Alamat dan Kanal Lain</h2>
      <address>
        <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
        <p>Telepon: <a href="tel:+622187654321">(021) 876-5432</a>, Senin–Sabtu, 09.00–17.00 WIB.</p>
        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      </address>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    </address>
    <nav aria-label="Tautan sosial">
      <ul>
        <li><a href="https://www.example.com/kopidev-forum" target="_blank" rel="noopener">Forum</a></li>
        <li><a href="https://www.example.com/kopidev-chat" target="_blank" rel="noopener">Ruang chat</a></li>
        <li><a href="https://www.example.com/kopidev-kode" target="_blank" rel="noopener">Repositori latihan</a></li>
      </ul>
    </nav>
    <p><small>© <time datetime="2026">2026</time> Kopi.dev — Komunitas Belajar Web.</small></p>
  </footer>
</body>
</html>

Penjelasan singkat per blok besar, dari atas ke bawah:

index.html — halaman utama #

  1. Blok head (baris 3-8): doctype, lang="id", charset, viewport, title, dan meta description — metadata minimum halaman modern.
  2. Blok header (baris 10-21): nama situs dan tagline dalam p ber-strong, lalu nav berisi empat tautan; tautan Beranda bertanda aria-current="page" karena beranda memang halaman yang sedang dibuka.
  3. Section hero (baris 23-28): h1 tunggal seluruh halaman, paragraf ajakan, dan dua tautan menuju halaman Tentang dan Kegiatan.
  4. Section sekilas kegiatan (baris 29-45): tiga article ber-h3 dan time, ditutup satu tautan menuju kegiatan.html.
  5. Section manfaat (baris 46-55): ul empat butir alasan bergabung — satu butir satu manfaat.
  6. Blok footer (baris 57-71): address sekretariat, nav tautan sosial, dan hak cipta ber-time — blok yang sama menutup keempat halaman.

tentang.html — halaman tentang #

  1. Blok head (baris 3-8): title unik “Tentang Kami — Kopi.dev” beserta meta description versinya sendiri.
  2. Blok header (baris 10-21): struktur, label, dan urutan menu sama persis dengan beranda; penanda aria-current="page" berpindah ke tautan Tentang.
  3. Pengantar (baris 22-24): h1 dan satu paragraf yang merangkum tiga pertanyaan dijawab halaman ini.
  4. Section cerita (baris 25-30): dua paragraf sejarah komunitas — bagian naratif tanpa daftar.
  5. Section visi (baris 31-39): satu paragraf visi ditopang blockquote pendiri dengan atribut cite dan footer atribusi.
  6. Section struktur (baris 40-55): h2 besar lalu tiga h3 — Pengurus, Tim Inti, Anggota; daftar pengurus disusun ul.
  7. Blok footer (baris 57-71): salinan footer beranda, identik untuk kedua kalinya.

kegiatan.html — halaman kegiatan #

  1. Blok head (baris 3-8): title dan meta description khas halaman kegiatan.
  2. Blok header (baris 10-21): menu yang sama; penanda aktif kini menempel pada tautan Kegiatan.
  3. Pengantar (baris 22-24): h1 dan paragraf pembuka yang memuat tautan fragment #jadwal-rutin — lompatan ke tabel di akhir halaman.
  4. Tiga article kegiatan (baris 25-54): tiap kegiatan ber-id, h2, tanggal ber-time, dua paragraf isi, address lokasi, dan tautan pendaftaran eksternal target="_blank" rel="noopener".
  5. Section jadwal (baris 55-70): table dengan caption, thead ber-scope="col", dan tbody ber-scope="row" — jadwal mingguan tiga baris.
  6. Blok footer (baris 72-86): footer yang sama untuk ketiga kalinya.

kontak.html — halaman kontak #

  1. Blok head (baris 3-8): title dan meta description khas halaman kontak.
  2. Blok header (baris 10-21): menu yang sama; penanda aktif menutup daftar pada tautan Kontak.
  3. Pengantar (baris 22-24): h1 dan paragraf yang memperkenalkan dua kanal — form dan alamat.
  4. Section form (baris 25-52): form ber-action dan method="post"; label for-id untuk semua kontrol; nama dan email required ber-autocomplete; select topik; textarea isi pesan; button kirim.
  5. Section alamat (baris 53-61): address berisi alamat lengkap, tautan tel:, dan mailto:.
  6. Blok footer (baris 63-77): footer yang sama menutup situs untuk keempat kalinya.

Enam bagian berikut membedah keempat berkas tahap demi tahap. Setiap part menampilkan potongan yang identik dengan bagiannya pada berkas di atas, sehingga hasil mengetik ulang kita bisa cocok diperiksa baris demi baris.

# Halaman Utama

Bangun halaman depan komunitas dengan hero, keunggulan, dan ajakan bergabung.

Buka → # Halaman Tentang

Bangun halaman tentang dengan sejarah, visi, dan struktur pengurus.

Buka → # Halaman Kegiatan

Susun daftar kegiatan komunitas memakai article dan time.

Buka → # Halaman Kontak

Bangun halaman kontak dengan form pesan dan informasi alamat.

Buka → # Navigasi Antarhalaman

Rapikan navigasi agar sama dan benar di keempat halaman.

Buka → # Struktur Semantic HTML

Tinjau dan sempurnakan struktur semantik seluruh halaman website.

Buka →