Bagian 1: Menyusun Struktur Konten

Bagian pertama menyusun kerangka konten landing page: urutan bagian yang membawa pengunjung dari tawaran menuju tindakan. Urutannya bukan hasil kebetulan — hero menjawab “apa tawaran ini” dalam satu pandangan, fitur menjawab “apa isinya”, testimoni menjawab “apakah layak dipercaya”, dan call-to-action menunggu di ujungnya. Kita bangun semuanya dengan elemen semantik dari section Semantic HTML, lengkap dengan metadata dokumen yang benar.

Unsur Kerangka Landing Page #

Setiap unsur kerangka punya peran yang jelas:

Unsur	Peran pada landing page
`header` dengan `nav` CTA	Identitas produk plus satu tautan “Daftar” yang selalu terlihat di atas
`section` hero	Tawaran utama: judul besar, ringkasan manfaat, CTA, dan gambar pendukung
`section` fitur	Tiga alasan singkat mengapa tawaran itu berharga
`section` testimoni	Dua kutipan peserta dengan atribusi sebagai bukti sosial
`footer`	Penutup: kepemilikan dan (pada Bagian 2) satu CTA tambahan

Header landing page sengaja ramping: satu nama produk dan satu nav berisi CTA. Menu panjang justru membagi perhatian pengunjung; seluruh halaman ini dipersiapkan menuju satu tindakan yang sama, yaitu mendaftar.

Membangun Kerangka Halaman #

File berikut adalah hasil utuh tahap ini. Simpan sebagai landing.html, atau unduh melalui tautan pada header code block:

html
landing.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="Kelas Web Dasar: kelas daring gratis empat pekan dari Komunitas Belajar Web. Daftarkan diri untuk gelombang berikutnya.">
  <title>Kelas Web Dasar — Komunitas Belajar Web</title>
</head>
<body>
  <header>
    <p class="logo">Kelas Web Dasar</p>
    <nav aria-label="Navigasi utama">
      <a class="tombol" href="#daftar">Daftar</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div>
        <h1>Belajar Membangun Halaman Web dari Nol</h1>
        <p>Kelas daring gratis selama empat pekan untuk memahami HTML dan CSS, dipandu mentor Komunitas Belajar Web. Setiap pekan berisi satu sesi langsung, satu latihan, dan satu diskusi bersama.</p>
        <a class="tombol" href="#daftar">Daftar Gelombang 7</a>
      </div>
      <img src="../assets/ilustrasi-hero.svg" alt="Ilustrasi jendela browser dengan halaman web yang sedang disusun" width="320" height="240">
    </section>
    <section id="daftar">
      <!-- Form pendaftaran ditambahkan pada Bagian 2 -->
    </section>
    <section id="fitur">
      <h2>Apa yang Dipelajari</h2>
      <div>
        <h3>Materi Terstruktur</h3>
        <p>Empat pekan berurutan: struktur dokumen, teks dan tautan, tabel dan form, lalu styling dasar.</p>
      </div>
      <div>
        <h3>Mentor Pendamping</h3>
        <p>Setiap peserta bergabung ke kelompok kecil berisi lima orang dengan satu mentor.</p>
      </div>
      <div>
        <h3>Proyek Akhir</h3>
        <p>Pekan terakhir menutup dengan satu halaman profil pribadi yang diulas mentor.</p>
      </div>
    </section>
    <section id="testimoni">
      <h2>Kata Peserta Sebelumnya</h2>
      <blockquote>
        <p>"Sesi langsungnya santai tetapi terarah; latihan tiap pekan membuat materi menempel."</p>
        <footer>— Dewi, peserta Gelombang 6</footer>
      </blockquote>
      <blockquote>
        <p>"Proyek akhir saya kini dipakai sebagai halaman profil di komunitas tempat saya belajar."</p>
        <footer>— Raka, peserta Gelombang 5</footer>
      </blockquote>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Komunitas Belajar Web</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Jendela browser menampilkan, dari atas ke bawah:
  - Header putih: nama produk di kiri, tautan "Daftar" di kanan
  - Hero: judul besar, ringkasan kelas, tautan "Daftar Gelombang 7", ilustrasi
  - Section kosong #daftar (tempat form pada Bagian 2)
  - Tiga blok fitur dan dua kutipan testimoni
  - Baris hak cipta di dasar halaman
  - Teks "Kelas Web Dasar — Komunitas Belajar Web" pada tab browser

Mari kita telaah peran setiap bagian kode di atas:

Baris 4-7: empat metadata wajib proyek — charset, viewport, description, dan title; description menjelaskan tawaran dalam satu kalimat.
Baris 10-15: header memuat nama produk dan nav berisi satu tautan CTA; nilai href="#daftar" menunjuk section tujuan yang id-nya memang telah disiapkan.
Baris 17-24: hero adalah section pertama main. Di dalamnya ada h1 sebagai judul tawaran, satu paragraf manfaat, tautan CTA, dan img ilustrasi beratribut alt, width, serta height.
Baris 25-27: section#daftar masih berupa wadah kosong; id-nya dipasang sekarang agar seluruh CTA di halaman tidak mati sejak Bagian 1.
Baris 28-42: section#fitur membuka dengan h2, lalu tiga blok div yang masing-masing membawa h3 dan satu paragraf singkat.
Baris 43-53: section#testimoni memuat dua blockquote; elemen footer di dalam kutipan adalah tempat sah untuk atribusi, sesuai materi section Teks dan Formatting.
Baris 55-57: footer menutup halaman dengan baris hak cipta; CTA tambahannya menyusul pada Bagian 2.

Pemeriksaan Hasil Tahap Ini #

Buka landing.html di browser, lalu pastikan urutan header, hero, fitur, testimoni, dan footer tampil dari atas ke bawah.
Klik tautan “Daftar” pada header dan CTA pada hero; keduanya harus menggulir halaman ke section kosong #daftar.
Periksa judul pada tab browser; teksnya harus sama dengan isi elemen title.
Buka tests/cek-struktur.html, lalu centang butir-butir kerangka yang telah dipenuhi oleh file ini.

Kerangka konten telah berdiri utuh. Bagian berikutnya meninjau ulang seluruh CTA di halaman ini dan menambahkan form langganan email yang menjadi tujuan akhirnya.

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="Kelas Web Dasar: kelas daring gratis empat pekan dari Komunitas Belajar Web. Daftarkan diri untuk gelombang berikutnya.">
  <title>Kelas Web Dasar — Komunitas Belajar Web</title>
</head>
<body>
  <header>
    <p class="logo">Kelas Web Dasar</p>
    <nav aria-label="Navigasi utama">
      <a class="tombol" href="#daftar">Daftar</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div>
        <h1>Belajar Membangun Halaman Web dari Nol</h1>
        <p>Kelas daring gratis selama empat pekan untuk memahami HTML dan CSS, dipandu mentor Komunitas Belajar Web. Setiap pekan berisi satu sesi langsung, satu latihan, dan satu diskusi bersama.</p>
        <a class="tombol" href="#daftar">Daftar Gelombang 7</a>
      </div>
      <img src="../assets/ilustrasi-hero.svg" alt="Ilustrasi jendela browser dengan halaman web yang sedang disusun" width="320" height="240">
    </section>
    <section id="daftar">
      <!-- Form pendaftaran ditambahkan pada Bagian 2 -->
    </section>
    <section id="fitur">
      <h2>Apa yang Dipelajari</h2>
      <div>
        <h3>Materi Terstruktur</h3>
        <p>Empat pekan berurutan: struktur dokumen, teks dan tautan, tabel dan form, lalu styling dasar.</p>
      </div>
      <div>
        <h3>Mentor Pendamping</h3>
        <p>Setiap peserta bergabung ke kelompok kecil berisi lima orang dengan satu mentor.</p>
      </div>
      <div>
        <h3>Proyek Akhir</h3>
        <p>Pekan terakhir menutup dengan satu halaman profil pribadi yang diulas mentor.</p>
      </div>
    </section>
    <section id="testimoni">
      <h2>Kata Peserta Sebelumnya</h2>
      <blockquote>
        <p>"Sesi langsungnya santai tetapi terarah; latihan tiap pekan membuat materi menempel."</p>
        <footer>— Dewi, peserta Gelombang 6</footer>
      </blockquote>
      <blockquote>
        <p>"Proyek akhir saya kini dipakai sebagai halaman profil di komunitas tempat saya belajar."</p>
        <footer>— Raka, peserta Gelombang 5</footer>
      </blockquote>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Komunitas Belajar Web</p>
  </footer>
</body>
</html>