Beranda adalah halaman pertama yang dimuat pengunjung. Bagian ini membangun src/index.html dari baris pertama: head lengkap, header berisi nama situs dan menu, lalu main berisi tiga section — hero, sekilas kegiatan, dan manfaat bergabung. Polanya pola landing sederhana: satu judul besar, ajakan bertindak, lalu ringkasan isi di bawahnya.

Kerangka: Head dan Header #

Ketik baris berikut sebagai awal src/index.html — sama persis dengan baris 1-21 berkas final; pola head-nya diulang dengan judul berbeda pada tiga halaman lain:

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>

Mari kita bedah baris demi baris:

  1. title unik (baris 6): “Kopi.dev — Komunitas Belajar Web”. Empat halaman berarti empat judul tab berbeda — pengunjung memilih halaman dari riwayat browser tanpa menebak, kebiasaan chapter Title dan Description.
  2. meta description (baris 7): ringkasan isi beranda — tiga halaman lain membawa versinya sendiri, materi chapter Meta Description.
  3. Logo teks, bukan heading (baris 12): nama situs dan tagline dibungkus p ber-strong; satu-satunya h1 disimpan untuk isi di dalam main.
  4. nav bernama (baris 13-20): aria-label="Navigasi utama" memberi nama wilayah bagi pembaca layar; isinya ul empat tautan — chapter Navigasi dengan Nav.
  5. Empat tautan relatif (baris 15-18): semua ditulis nama berkas saja karena keempat berkas bertetangga di satu folder; browser melengkapinya dengan lokasi halaman saat ini.
  6. Penanda beranda (baris 15): tautan Beranda bertanda aria-current="page" karena beranda memang halaman yang sedang dibuka — menunya menaut berandanya sendiri, beda panduan wisata; tuntasnya di Bagian 5.

Hero: Judul dan Dua Ajakan #

Buka elemen main, lalu ketik section pertama — hero yang menyampaikan janji situs dan dua jalur lanjutan. Potongan berikut sama persis dengan baris 23-28 berkas final:

html 
    <!-- 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>

Bedah potongan ini:

  1. Section hero (baris 1-2): id="hero" menandai struktur — pola penanda yang dipertahankan di seluruh proyek.
  2. h1 tunggal (baris 3): satu h1 untuk seluruh halaman, isinya menyampaikan janji situs — bukan “Selamat Datang” yang bisa berdiri di situs mana pun.
  3. Paragraf ajakan (baris 4): siapa yang dikumpulkan dan apa yang didapat — pengunjung memutuskan lanjut atau keluar dari paragraf ini.
  4. Dua tautan lanjutan (baris 5): teksnya menyebut tujuan — “Kenali komunitas kami” ke tentang.html, “lihat kegiatan terdekat” ke kegiatan.html — kebiasaan chapter Link Text yang Jelas.

Sekilas Kegiatan dalam Tiga Article #

Section kedua merangkum tiga kegiatan terdekat dalam article ringkas — cuplikan yang masing-masing berdiri sendiri:

html 
    <!-- 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>

Mari kita bedah baris demi baris:

  1. section ber-h2 (baris 2-3): section pengelompok ber-id dan judulnya sendiri — judul isi di bawahnya turun satu tingkat heading.
  2. article per kegiatan (baris 4-7, 8-11, 12-15): tiap cuplikan lolos uji dicabut — dicabut dari halaman, “Workshop HTML Dasar” tetap masuk akal dibaca, keputusan dari chapter Section vs Article.
  3. h3 judul kegiatan (baris 5, 9, 13): satu tingkat di bawah h2 section — di halaman Kegiatan judul yang sama menjadi h2 karena article-nya menempel langsung di main; level mengikuti kedalaman, bukan ukuran huruf.
  4. time ber-datetime (baris 6, 10, 14): tanggal tampil manusiawi dan terbaca mesin lewat datetime="2026-11-07" — format ISO chapter Time, di tengah kalimat.
  5. Tautan penutup section (baris 16): “Lihat seluruh kegiatan dan jadwal rutin” membawa yang tertarik ke halaman lengkapnya.

Daftar Manfaat Bergabung #

Section ketiga menjawab keraguan calon anggota — bentuknya daftar, bukan paragraf. Potongan berikut sama persis dengan baris 46-55 berkas final:

html 
    <!-- 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>

Bedah potongan ini:

  1. ul empat butir (baris 4-9): manfaat adalah daftar — dipindai cepat, urutan butirnya bebas. Satu butir satu manfaat.
  2. Teks butir menjawab keraguan (baris 5-8): biaya, materi, teman, dan kesempatan — empat hal yang paling sering ditanyakan calon anggota.
  3. Penutup main: setelah section manfaat, tutup elemen main — tiga section tadi adalah seluruh isi beranda, dan footer menyusul pada Bagian 5 bersama perapihan navigasi.

Hasil pada Browser #

Simpan berkas dan buka di browser: judul tab berbunyi “Kopi.dev — Komunitas Belajar Web”, dan halaman menampilkan menu, hero ber-h1, tiga cuplikan kegiatan, serta daftar manfaat. Klik “Tentang” — browser melaporkan berkas tidak ditemukan karena tentang.html belum ditulis; itu penanda lanjutan, bukan galat kita.

Inilah keadaan beranda pada akhir Bagian 1 — main sudah utuh dengan tiga sectionnya; footer belum ada karena baru ditempelkan pada Bagian 5:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) karena demo hanya satu potongan berkas — pada berkas tersimpan, klik “Tentang” saat ini justru melaporkan berkas tidak ditemukan karena tentang.html baru ditulis pada Bagian 2.

Ringkasan Bagian 1 #

  • Kerangka beranda: head ber-title unik, header berisi logo teks dan menu, main berisi tiga section.
  • Hero memakai h1 tunggal dan dua tautan berteks jelas; sekilas kegiatan memakai article ber-h3 dan time.
  • Manfaat bergabung disajikan ul — satu butir satu jawaban.

Bagian berikutnya membuat halaman kedua yang menjadi tujuan tautan “Kenali komunitas kami”: tentang.html dengan cerita, visi, dan struktur pengurus.