Bagian 2: Navigasi Dokumentasi

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Dokumentasi CatatKu: panduan penggunaan aplikasi pencatat ringan dari Komunitas Belajar Web.">
  <title>Dokumentasi CatatKu</title>
</head>
<body>
  <header>
    <img src="../assets/logo-docs.svg" alt="Logo Dokumentasi CatatKu" width="48" height="48">
    <div>
      <h1>Dokumentasi CatatKu</h1>
      <p>Panduan pengguna aplikasi pencatat ringan</p>
    </div>
  </header>
  <main>
    <nav aria-label="Daftar topik">
      <ul>
        <li><a href="#pengenalan">Pengenalan</a></li>
        <li><a href="#memulai">Memulai</a></li>
        <li><a href="#memformat">Memformat Catatan</a></li>
        <li><a href="#pintasan">Pintasan Keyboard</a></li>
        <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
      </ul>
    </nav>
    <article>
      <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol>
          <li><a href="www.example.com">Beranda</a></li>
          <li aria-current="page">Dokumentasi</li>
        </ol>
      </nav>
      <nav class="toc" aria-label="Di halaman ini">
        <p class="toc-label">Di halaman ini</p>
        <ol>
          <li><a href="#pengenalan">Pengenalan</a></li>
          <li><a href="#memulai">Memulai</a></li>
          <li><a href="#memformat">Memformat Catatan</a></li>
          <li><a href="#pintasan">Pintasan Keyboard</a></li>
          <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
          <li><a href="#dukungan">Dukungan</a></li>
        </ol>
      </nav>
      <h2 id="pengenalan">Pengenalan</h2>
      <p>CatatKu adalah aplikasi pencatat ringan untuk komputer dan ponsel yang dikembangkan oleh Komunitas Belajar Web. Aplikasi ini menyimpan catatan secara lokal, sehingga tulisan tetap terbaca meski perangkat tidak terhubung ke internet. Halaman dokumentasi ini merangkum topik yang paling sering dicari pengguna baru.</p>
      <h2 id="memulai">Memulai</h2>
      <p>Tiga langkah berikut menyiapkan catatan pertama di CatatKu:</p>
      <ol>
        <li>Unduh CatatKu dari halaman unduhan di situs Komunitas Belajar Web, lalu pasang seperti aplikasi biasa.</li>
        <li>Buka aplikasi, tekan pintasan <kbd>Ctrl</kbd>+<kbd>N</kbd>, atau pilih menu Catatan lalu Catatan Baru.</li>
        <li>Tulis isi catatan; CatatKu menyimpan perubahan secara otomatis setiap beberapa detik.</li>
      </ol>
      <h2 id="memformat">Memformat Catatan</h2>
      <p>CatatKu memakai penanda sederhana untuk memformat teks. Tanda bintang ganda membuat teks tampil tebal, tanda bintang tunggal membuat teks tampil miring, dan tanda pagar di awal baris menjadikan baris tersebut judul bagian.</p>
      <pre><code># Rencana belajar pekan ini
- Menulis ulang catatan *struktur tabel*
- Membaca catatan **pintasan keyboard** dua kali</code></pre>
      <h2 id="pintasan">Pintasan Keyboard</h2>
      <p>Pintasan berikut mempercepat pekerjaan sehari-hari tanpa menyentuh menu:</p>
      <table>
        <caption>Pintasan keyboard pada CatatKu versi desktop</caption>
        <thead>
          <tr>
            <th scope="col">Pintasan</th>
            <th scope="col">Fungsi</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>N</kbd></td>
            <td>Membuat catatan baru</td>
          </tr>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
            <td>Menyimpan salinan catatan aktif</td>
          </tr>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>F</kbd></td>
            <td>Mencari teks di dalam catatan terbuka</td>
          </tr>
        </tbody>
      </table>
      <h2 id="berbagi">Menyimpan dan Berbagi</h2>
      <p>Selain menyimpan otomatis, menu Berkas menyediakan opsi Ekspor Catatan. Hasil ekspor berupa berkas teks yang dapat dikirim lewat surel atau dibuka di aplikasi teks apa pun. Untuk berbagi seluruh arsip, menu yang sama menyediakan opsi Cadangkan.</p>
      <h2 id="dukungan">Dukungan</h2>
      <p>Menemui kendala saat memakai CatatKu? Tim dokumentasi memantau surel dukungan pada hari kerja. Sertakan versi aplikasi dan langkah yang memunculkan kendala agar pertanyaan cepat terjawab.</p>
      <address>
        Surel dukungan: <a href="mailto:[email protected]">[email protected]</a>
      </address>
    </article>
  </main>
  <footer>
    <p>Dokumentasi CatatKu — dikelola oleh Komunitas Belajar Web.</p>
  </footer>
</body>
</html>

Di bawah header kini tampil dua wilayah berdampingan secara konsep:
  - Kiri: daftar lima topik dokumentasi
  - Kanan: breadcrumb "Beranda › Dokumentasi", daftar "Di halaman ini",
    lalu enam bagian artikel berurutan
Klik "Pintasan Keyboard" pada daftar mana pun:
  - Halaman langsung tergulir ke tabel pintasan keyboard