HTML Academy · Pelajaran

Daftar Berurutan ol start reversed type

Buat daftar bernomor dan sesuaikan urutannya.

Daftar Berurutan ol start reversed type adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Daftar Berurutan?

Daftar berurutan menampilkan item yang urutannya penting:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

Elemen ol

Elemen <ol> (daftar berurutan) menampilkan item daftar dengan angka berurutan secara bawaan:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

Atribut start

Atribut start menetapkan angka awal:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

Atribut reversed

Atribut reversed menghitung mundur, bukan naik:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

Atribut type

Atribut type mengubah gaya penanda:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

type dalam CSS vs HTML

Utamakan CSS list-style-type daripada atribut type HTML:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

Atribut value pada li

Timpa angka setiap item daftar dengan value:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

ol dan ul Bersarang

Daftar dapat dibuat bersarang — gabungkan daftar berurutan dan tak berurutan:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

Kasus Penggunaan Semantik

Gunakan <ol> saat urutan memiliki makna:

Petunjuk langkah demi langkah
Hasil yang diurutkan (daftar 10 teratas)
Bagian dokumen hukum
Langkah-langkah resep
Daftar isi dengan bagian bernomor

Counter-Reset dalam CSS

Penghitung CSS memberi Anda kendali penuh atas gaya penomoran daftar:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol untuk Breadcrumb

Navigasi breadcrumb secara semantik merupakan daftar berurutan:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

Pemeriksaan Singkat

Atribut mana yang membuat ol menghitung mundur?

Ringkasan: Daftar Berurutan

Hal-hal penting tentang daftar berurutan:

<ol> — daftar berurutan yang urutannya penting
start — memulai penomoran dari angka khusus
reversed — menghitung mundur
type — mengubah penanda: 1, a, A, i, I
value pada <li> — menimpa nomor item individual
Gunakan CSS list-style-type dan penghitung untuk kendali yang lebih besar

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar Berurutan ol start reversed type” gratis?

Ya — teks lengkap “Daftar Berurutan ol start reversed type” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar Berurutan ol start reversed type”?

Buat daftar bernomor dan sesuaikan urutannya. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Daftar Berurutan ol start reversed type” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy