Heading yang bisa dipindai, daftar isi yang tepat sasaran, contoh perintah yang rapi, tabel referensi yang ramah pembaca layar, dan metadata yang lengkap — lima keterampilan yang sudah kita kenal satu per satu kini dirangkai menjadi jenis halaman yang paling sering kita baca sebagai pengembang: dokumentasi produk. Proyek ini membangun dokumentasi untuk produk fiktif Tugas CLI v1.0, alat pencatatan tugas baris perintah berbahasa Indonesia. Seluruh halamannya ditulis dalam satu berkas index.html: header dengan pencarian dan daftar isi, lima section isi, dua tabel referensi, dan metadata paling lengkap yang pernah kita rangkai — dari title sampai Open Graph.

Dokumentasi juga jarang dibaca dari atas ke bawah. Pembacanya datang dengan pertanyaan spesifik — “bagaimana cara memasangnya?”, “perintah apa saja yang tersedia?” — lalu ingin melompat langsung ke bagiannya. Proyek ini melatih justru keterampilan yang dibutuhkan situasi itu: menata jenjang heading h1 sampai h3 tanpa lompatan, memasang navigasi fragment, membedah kombinasi pre, code, kbd, dan samp untuk contoh perintah, menyusun tabel referensi accessible, serta menutupnya dengan metadata yang membuat halaman mudah ditemukan dan dibagikan.

Perilaku yang Diharapkan #

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

  • header dengan nama alat, lencana versi, dan form pencarian,
  • nav daftar isi berisi lima tautan fragment — Instalasi, Penggunaan, Perintah, Konfigurasi, Masalah Umum,
  • judul dan pengantar singkat dokumentasi,
  • section Instalasi dengan contoh perintah pemasangan dalam blok pre,
  • section Penggunaan dengan contoh perintah beserta keluaran terminalnya,
  • section Perintah berisi enam perintah, masing-masing dengan heading h3, ditutup tabel ringkasan tiga kolom,
  • section Konfigurasi berisi daftar opsi sebagai dl dan tabel variabel lingkungan,
  • section Masalah Umum dengan pertanyaan lazim yang bisa dibuka-tutup,
  • footer berisi versi, tanggal pembaruan, dan tautan catatan rilis.

Klik tautan “Perintah” pada daftar isi — halaman menggulir langsung ke bagian tabelnya tanpa memuat halaman baru. Pertanyaan pada bagian akhir terlipat dan terbuka hanya saat diklik. Seluruhnya murni HTML: cukup buka berkas index.html di browser, tanpa server dan tanpa alat tambahan. Proyek ini tidak memakai gambar, jadi tidak ada folder assets/ yang perlu disiapkan.

Tahapan Pengerjaan #

Proyek dikerjakan dalam enam bagian berurutan. Setiap bagian menghasilkan halaman yang tetap bisa diperiksa di browser:

  1. Struktur dokumentasi — menyusun kerangka: head lengkap, header dengan nama alat dan lencana versi, main berisi pengantar dan lima section kosong, serta footer penutup.
  2. Navigasi dokumentasi — melengkapi header dengan form pencarian dan nav daftar isi, lalu menguji perilaku tautan fragment.
  3. Heading dan section — mengatur jenjang heading: satu h2 per bagian utama dan h3 untuk tiap perintah, tanpa lompatan jenjang.
  4. Contoh kode — mengisi Instalasi dan Penggunaan: blok perintah pre+code, nama perintah inline, tombol kbd, keluaran samp, dan aturan penulisan karakter khusus.
  5. Tabel referensi — mengisi Perintah dan Konfigurasi: tabel ringkasan perintah, pasangan opsi dl, dan tabel variabel lingkungan.
  6. Metadata dokumentasi — menimbang canonical dan Open Graph pada head, menutup halaman dengan FAQ details dan footer bertanggal, lalu menguji hasil akhir.

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 enam bagian di atas — 123 baris, enam perintah, dua tabel referensi. 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>Dokumentasi Tugas CLI v1.0</title>
  <meta name="description" content="Dokumentasi resmi Tugas CLI v1.0, alat pencatatan tugas di terminal berbahasa Indonesia: instalasi, penggunaan, perintah, konfigurasi, dan masalah umum.">
  <link rel="canonical" href="https://tugas-cli.example.com/dokumentasi/">
  <meta property="og:title" content="Dokumentasi Tugas CLI v1.0">
  <meta property="og:description" content="Panduan memakai Tugas, alat pencatatan tugas di terminal: instalasi, daftar perintah, konfigurasi, dan pemecahan masalah.">
  <meta property="og:type" content="article">
</head>
<body>
  <header>
    <p><strong>tugas</strong> <span>v1.0</span> — pencatat tugas di terminal, berbahasa Indonesia.</p>
    <search>
      <form>
        <input type="search" name="q" aria-label="Cari di dokumentasi" placeholder="Cari topik…">
        <button type="submit">Cari</button>
      </form>
    </search>
    <nav aria-label="Daftar isi dokumentasi">
      <ul>
        <li><a href="#instalasi">Instalasi</a></li>
        <li><a href="#penggunaan">Penggunaan</a></li>
        <li><a href="#perintah">Perintah</a></li>
        <li><a href="#konfigurasi">Konfigurasi</a></li>
        <li><a href="#masalah">Masalah Umum</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Dokumentasi Tugas CLI</h1>
    <p><code>tugas</code> adalah alat pencatatan tugas baris perintah untuk pekerjaan sehari-hari: catat tugas saat terlintas, tinjau daftar saat mulai bekerja, tandai selesai saat tuntas, dan ekspor arsip bila diperlukan. Halaman ini merangkum seluruh hal yang perlu diketahui untuk memakai versi 1.0 — dari pemasangan sampai pemecahan masalah.</p>
    <section id="instalasi">
      <h2>Instalasi</h2>
      <p>Tugas terdistribusi sebagai satu berkas mandiri. Unduh rilis terbaru, beri izin eksekusi, lalu pindahkan ke folder yang tercantum pada variabel <code>PATH</code>:</p>
      <pre><code>curl -O https://tugas-cli.example.com/unduh/tugas-1.0
chmod +x tugas-1.0
sudo mv tugas-1.0 /usr/local/bin/tugas</code></pre>
      <p>Uji pemasangan dengan menjalankan <code>tugas bantuan</code> lalu menekan <kbd>Enter</kbd>; baris <samp>Tugas v1.0</samp> di bagian atas ringkasan menandakan alat siap dipakai.</p>
    </section>
    <section id="penggunaan">
      <h2>Penggunaan</h2>
      <p>Alur harian Tugas singkat: catat, tinjau, lalu tandai selesai. Dua perintah berikut memperlihatkan keseluruhannya:</p>
      <pre><code>tugas tambah "Kirim laporan mingguan tiap Jumat"
tugas daftar</code></pre>
      <p>Terminal membalas:</p>
      <pre><samp>1. [ ] Kirim laporan mingguan tiap Jumat</samp></pre>
      <p>Angka di depan tiap baris adalah nomor tugas — <code>tugas selesai 1</code> menutup tugas pertama tersebut.</p>
    </section>
    <section id="perintah">
      <h2>Perintah</h2>
      <p>Enam perintah menutup seluruh kebutuhan harian. Tiap perintah diuraikan berikut ini, lalu dirangkum dalam tabel pada akhir bagian.</p>
      <h3><code>tugas tambah</code></h3>
      <p>Mencatat tugas baru; tulis teksnya di dalam tanda petik, misalnya <code>tugas tambah "susun agenda rapat"</code>.</p>
      <h3><code>tugas daftar</code></h3>
      <p>Menampilkan tugas berjalan beserta nomornya; tambahkan <code>--semua</code> agar tugas yang selesai ikut tampil.</p>
      <h3><code>tugas selesai</code></h3>
      <p>Menandai tugas selesai menurut nomornya: <code>tugas selesai 2</code> menutup tugas nomor dua.</p>
      <h3><code>tugas hapus</code></h3>
      <p>Menghapus satu tugas dari daftar: <code>tugas hapus 3</code> menghapus tugas nomor tiga.</p>
      <h3><code>tugas ekspor</code></h3>
      <p>Menyimpan seluruh daftar ke berkas CSV: <code>tugas ekspor arsip.csv</code>.</p>
      <h3><code>tugas bantuan</code></h3>
      <p>Menampilkan ringkasan sintaks seluruh perintah, termasuk bentuk generik seperti <code>tugas selesai &lt;nomor&gt;</code>.</p>
      <table>
        <caption>Ringkasan perintah Tugas CLI v1.0</caption>
        <thead>
          <tr><th scope="col">Perintah</th><th scope="col">Fungsi</th><th scope="col">Contoh</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">tugas tambah</th><td>mencatat tugas baru</td><td><code>tugas tambah "beli gula"</code></td></tr>
          <tr><th scope="row">tugas daftar</th><td>menampilkan daftar tugas</td><td><code>tugas daftar --semua</code></td></tr>
          <tr><th scope="row">tugas selesai</th><td>menandai tugas selesai</td><td><code>tugas selesai 1</code></td></tr>
          <tr><th scope="row">tugas hapus</th><td>menghapus satu tugas</td><td><code>tugas hapus 3</code></td></tr>
          <tr><th scope="row">tugas ekspor</th><td>menyimpan daftar ke berkas CSV</td><td><code>tugas ekspor arsip.csv</code></td></tr>
          <tr><th scope="row">tugas bantuan</th><td>menampilkan ringkasan sintaks</td><td><code>tugas bantuan</code></td></tr>
        </tbody>
      </table>
    </section>
    <section id="konfigurasi">
      <h2>Konfigurasi</h2>
      <p>Tiga pengaturan mengatur perilaku bawaan Tugas; semuanya ditulis pada berkas <code>~/.tugasrc</code>:</p>
      <dl>
        <dt>format</dt>
        <dd>Bentuk baris daftar: <code>nomor</code> (bawaan), <code>tabel</code>, atau <code>ringkas</code>.</dd>
        <dt>berkas</dt>
        <dd>Lokasi penyimpanan data; bawaannya <code>~/.tugas.csv</code>.</dd>
        <dt>warna</dt>
        <dd>Warna keluaran terminal: <code>aktif</code> atau <code>nonaktif</code>.</dd>
      </dl>
      <p>Variabel lingkungan menimpa berkas konfigurasi — berguna saat Tugas dipakai di dalam skrip:</p>
      <table>
        <caption>Variabel lingkungan Tugas CLI</caption>
        <thead>
          <tr><th scope="col">Variabel</th><th scope="col">Nilai bawaan</th><th scope="col">Fungsi</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">TUGAS_BERKAS</th><td>~/.tugas.csv</td><td>lokasi berkas data</td></tr>
          <tr><th scope="row">TUGAS_FORMAT</th><td>nomor</td><td>bentuk baris daftar</td></tr>
          <tr><th scope="row">TUGAS_WARNA</th><td>aktif</td><td>warna keluaran terminal</td></tr>
        </tbody>
      </table>
    </section>
    <section id="masalah">
      <h2>Masalah Umum</h2>
      <p>Dua pertanyaan yang paling sering muncul:</p>
      <details>
        <summary>Mengapa nomor tugas berubah setelah satu baris dihapus?</summary>
        <p>Nomor dihitung dari posisi baris, bukan identitas tetap. Tandai tugas selesai bila jejaknya ingin dipertahankan, atau ekspor daftar sebelum menghapus.</p>
      </details>
      <details>
        <summary>Bagaimana membatalkan perintah yang sedang berjalan?</summary>
        <p>Tekan <kbd>Ctrl</kbd>+<kbd>C</kbd>. Data tersimpan setelah tiap perintah selesai, jadi pembatalan tidak merusak berkas data.</p>
      </details>
    </section>
  </main>
  <footer>
    <p>Dokumentasi Tugas CLI v1.0 — diperbarui <time datetime="2026-10-17">17 Oktober 2026</time>. Baca <a href="https://tugas-cli.example.com/rilis/">catatan rilis</a> untuk rincian tiap versi.</p>
  </footer>
</body>
</html>

Hasil yang dijanjikan bagian Perilaku yang Diharapkan bisa diperiksa langsung di sini — dan dua perilakunya hidup: klik “Perintah” atau “Masalah Umum” pada daftar isi dan halaman menggulir ke sectionnya tanpa memuat ulang; kedua pertanyaan pada bagian akhir terlipat dan terbuka saat summary-nya diklik:

Pada demo, tautan “catatan rilis” di footer mengarah ke domain fiktif yang tidak diresolusi — bila diklik, iframe berganti halaman galat; muat ulang halaman ini untuk mengembalikan demo. Menekan tombol Cari juga tidak berbekas di address bar karena dokumen demo hidup di dalam iframe tanpa alamat — coba pada berkas tersimpan untuk melihat ?q= muncul. Demo juga menyertakan satu elemen <base> tambahan agar lompatan fragment tetap terjadi di dalam iframe — pada berkas tersimpan, elemen itu tidak diperlukan.

Peta besar berkasnya terbaca dari urutan bloknya. Mari kita bedah per blok:

  1. Blok head (baris 1-12): doctype, lang="id", dan delapan baris metadata — charset, viewport, title berlabel versi, description, canonical, serta tiga tag Open Graph.
  2. Blok header (baris 14-31): nama alat dengan strong dan lencana versi span, form pencarian bertipe search di dalam elemen search, lalu nav daftar isi berisi lima tautan fragment.
  3. Blok pembuka main (baris 32-34): satu h1 untuk seluruh halaman plus paragraf pengantar alat.
  4. Blok Instalasi (baris 35-42): h2, paragraf pengantar, blok pre berisi tiga perintah pemasangan, ditutup paragraf uji yang memuat kbd dan samp.
  5. Blok Penggunaan (baris 43-51): contoh alur harian dalam pre+code, lalu keluaran terminal dalam pre+samp.
  6. Blok Perintah (baris 52-81): enam pasang h3 dan paragraf uraian — satu per perintah — ditutup tabel ringkasan caption-thead-tbody.
  7. Blok Konfigurasi (baris 82-105): dl tiga opsi berkas ~/.tugasrc dan tabel tiga variabel lingkungan.
  8. Blok Masalah Umum (baris 106-117): dua details ber-summary — pertanyaan terlipat, jawaban tampil saat dibuka.
  9. Blok penutup (baris 118-123): footer berisi versi, tanggal pembaruan bertanda time, dan tautan catatan rilis, lalu penutup body dan html.

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

# Struktur Dokumentasi

Rancang kerangka dokumentasi: header, nav samping, dan main.

Buka → # Navigasi Dokumentasi

Susun daftar isi dan tautan antarbagian dokumentasi.

Buka → # Heading dan Section

Susun jenjang heading dokumentasi yang bisa dipindai cepat.

Buka → # Contoh Kode

Tampilkan potongan kode memakai pre dan code dengan markup yang benar.

Buka → # Tabel Referensi

Bangun tabel referensi parameter dengan struktur accessible.

Buka → # Metadata Dokumentasi

Lengkapi title, description, dan Open Graph halaman dokumentasi.

Buka →