Halaman Tentang

Tautan “Kenali komunitas kami” dari hero masih menuju berkas yang kosong. Bagian ini mengisinya: halaman kedua menjawab “siapa di balik situs ini” dengan tiga section — Cerita, Visi, dan Struktur. Materinya padat teks, jadi fokusnya bergeser ke elemen yang belum terpakai pada proyek seluas ini: blockquote untuk kutipan pendiri dan heading berjenjang untuk struktur organisasi.

Kerangka Halaman Tentang #

Buat src/tentang.html di folder yang sama. head-nya meniru pola beranda dengan judul dan deskripsi versinya sendiri:

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

Setelah head, salin header beranda apa adanya — nama situs, tagline, dan menu empat tautan sama persis. Penanda aria-current pada tautan Tentang kita rapikan pada Bagian 5; sekarang lanjut ke isi halaman. Buka elemen main, lalu ketik judul dan pengantarnya — sama persis dengan baris 23-24 berkas final:

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

Bedah kerangka ini:

1. title unik (baris 6): “Tentang Kami — Kopi.dev” — nama halaman dulu, nama situs belakang; kebalikan beranda, karena pengunjung halaman ini sudah tahu situsnya.
2. meta description (baris 7): merangkum tiga isi halaman — cerita, visi, struktur — satu kalimat untuk hasil penelusuran.
3. h1 tanpa section (baris 1): berbeda dari beranda, main halaman ini dibuka h1 telanjang lalu pengantar — isinya section-section sejajar, tidak butuh section pembuka khusus.
4. Pengantar menjanjikan isi (baris 2): satu paragraf yang menyebut tiga pertanyaan — tiga section berikut menjawabnya berurutan.

Section Cerita #

Section pertama menjawab “bagaimana komunitas ini berdiri” — dua paragraf murni naratif:

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

Bedah potongan ini:

1. section ber-h2 (baris 2-3): pola section ber-id dan judul tetap dipertahankan — pengunjung bisa melompat ke bagian yang menarik minatnya.
2. Dua paragraf, tanpa daftar (baris 4-5): cerita adalah narasi — memaksakan ul justru merusak alur membaca. Section tidak wajib berisi daftar; heading yang menjaga keterpindaiannya.
3. Tahun tanpa time (baris 4): “2023” ditulis polos karena bukan tanggal yang dijadwalkan — time kita simpan untuk tanggal kegiatan yang pengunjung catat.

Section Visi dan Kutipan Pendiri #

Section kedua menjawab “ke mana arahnya”. Visi ditulis satu paragraf, lalu diperkuat kutipan pendiri dalam blockquote:

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

Mari kita bedah baris demi baris:

1. Paragraf visi (baris 4): satu kalimat yang menyatakan arah — visi memang bukan daftar tugas, melainkan gambaran tujuan.
2. blockquote dengan atribut cite (baris 5): alamat sumber wawancara ditulis di atribut — terbaca mesin, tidak pernah tampil di layar; atribusi untuk pembaca manusia ditangani baris berikutnya, persis pembagian kerja dari chapter Blockquote.
3. Isi kutipan dibungkus p (baris 6): isi blockquote tetap berupa paragraf — bukan teks telanjang — supaya tiap paragraf kutipan diperlakukan sebagai paragraf.
4. footer atribusi (baris 7): nama dan peran penutur sebagai baris terakhir di dalam blockquote — elemen footer di sini berarti atribusi kutipan, bukan kaki halaman; satu elemen, dua peran sesuai konteksnya.

Section Struktur dengan Heading Berjenjang #

Section ketiga menjawab “siapa yang menjalankannya”. Struktur organisasi diterjemahkan menjadi heading h2 dan h3:

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

Bedah potongan ini:

1. h2 judul section (baris 3): “Struktur Komunitas” satu tingkat di bawah h1 halaman — semua section sejajar memakai h2.
2. Tiga h3 subbagian (baris 4, 12, 14): Pengurus, Tim Inti, dan Anggota berada satu tingkat di bawah section Struktur — pembaca layar bisa melompat dari h3 ke h3 untuk membandingkan ketiganya.
3. ul pengurus (baris 6-11): nama dan peran dalam satu butir — keempat pengurus dipindai sekali pandang; nama-namanya fiktif, seperti data contoh lain di Course ini.
4. Paragraf penjelas tiap kelompok (baris 5, 13, 15): satu kalimat peran sebelum daftar — pembaca paham fungsi kelompok sebelum mengenal orangnya.

Hasil pada Browser #

Simpan tentang.html di sebelah index.html, muat ulang beranda, lalu klik “Kenali komunitas kami”. Halaman tampil dengan judul tabnya sendiri, tiga section berurutan, dan kutipan pendiri menjorok dengan margin bawaan blockquote. Menunya masih salinan beranda — kita tandai posisinya pada Bagian 5.

Inilah keadaan tentang.html pada akhir Bagian 2 — tiga section berurutan menjawab tiga pertanyaan pengantarnya, dan kutipan pendiri menjorok khas blockquote:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) dan menunya masih salinan beranda — penanda aria-current masih menempel pada Beranda karena baru digeser pada Bagian 5. Footer juga belum termasuk; ia ditempelkan pada Bagian 5.

Ringkasan Bagian 2 #

• Halaman tentang meniru kerangka beranda dengan title dan meta description versinya sendiri; isinya tiga section sejajar.
• blockquote membawa atribut cite untuk mesin dan footer untuk atribusi yang terlihat.
• Struktur organisasi diterjemahkan heading berjenjang h2-h3, dengan ul untuk daftar pengurus.

Bagian berikutnya mengisi halaman ketiga — kegiatan.html, halaman terpadat situs dengan tiga article dan satu tabel.