0Pricing
HTML Academy · Ders

Sıralı Listeler: ol, start, reversed ve type

Numaralı listeler oluşturmayı ve sıralarını özelleştirmeyi öğrenin.

Sıralı Listeler: ol, start, reversed ve type, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Sıralı Liste Nedir

Sıralı liste, sıralamanın önemli olduğu öğeleri görüntüler:

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

ol Elementi

<ol> (sıralı liste) elementi, liste öğelerini varsayılan olarak ardışık sayılarla oluşturur:

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

start Özniteliği

start özniteliği başlangıç numarasını ayarlar:

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

reversed Özniteliği

reversed özniteliği yukarı doğru saymak yerine geriye doğru sayar:

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

type Özniteliği

type özniteliği işaretçi stilini değiştirir:

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

CSS ve HTML'de type

HTML type özniteliği yerine CSS list-style-type kullanmayı tercih edin:

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

li Üzerinde value Özniteliği

value ile tek tek liste öğelerinin numarasını geçersiz kılın:

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

İç İçe ol ve ul

Listeler iç içe yerleştirilebilir — sıralı ve sırasız listeleri birlikte kullanabilirsiniz:

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

Anlamsal Kullanım Alanları

Sıralamanın anlamlı olduğu durumlarda <ol> kullanın:

  • Adım adım yönergeler
  • Sıralanmış sonuçlar (ilk 10 listeleri)
  • Hukuki belge bölümleri
  • Yemek tarifi adımları
  • Numaralı bölümlere sahip içindekiler

CSS'de Counter-Reset

CSS sayaçları, liste numaralandırma stilini tamamen denetlemenizi sağlar:

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

ol li {
  counter-increment: step;
}

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

Breadcrumb'lar için ol

Breadcrumb gezinmesi anlamsal olarak sıralı bir listedir:

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

Hızlı Kontrol

Hangi öznitelik bir ol listesinin geriye doğru saymasını sağlar?

Özet: Sıralı Listeler

Sıralı listelerin temel özellikleri:

  • <ol> — sıralamanın önemli olduğu ardışık liste
  • start — numaralandırmayı özel bir numaradan başlatır
  • reversed — geriye doğru sayar
  • type — işareti değiştirir: 1, a, A, i, I
  • <li> üzerindeki value — tek tek öğelerin numarasını geçersiz kılar
  • Daha fazla denetim için CSS list-style-type ve sayaçlarını kullanın

Sıkça Sorulan Sorular

“Sıralı Listeler: ol, start, reversed ve type” dersi ücretsiz mi?

Evet — “Sıralı Listeler: ol, start, reversed ve type” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Sıralı Listeler: ol, start, reversed ve type” dersinde ne öğreneceğim?

Numaralı listeler oluşturmayı ve sıralarını özelleştirmeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Sıralı Listeler: ol, start, reversed ve type” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Sırasız Listeler: ul ve li
  2. Sıralı Listeler: ol, start, reversed ve type
  3. Açıklama Listeleri: dl, dt ve dd
  4. İç İçe Listeler ve Liste Biçimlendirme
← HTML Academy Sayfasına Dön