Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Sıralamalı Listeler

önceki ders sonraki ders
Sayfa içeriği
  • › Sıralı listeler kavramı
  • › Sayfaya sıralı bir liste eklemek
  • ›Numaralandırma türleri
  • › Numaralandırmanın nerede başlıcağın belirtlemek
  • › Mevcut numaralandırmayı kesmek
  • › Liste rengini seçmek
  • › Liste içinde bir liste eklemek

Sıralı listeler kavramı

Sıralı bir liste, içine girilen her bir öğenin numarasıyla birlikte bir öğe grubunu görüntülemeyi amaçlar.
Sıralı listelerin en önemli özelliklerinden biri numaralandırmayı istediğin gibi görüntüleyebilmeni, mesela normal sayıları, alfabetik karakterleri, Roman rakamlarını vb. görüntüleyebilmenidir.


Sayfaya sıralı bir liste eklemek

Genel olarak, tarayıcıya sayfada sıralı bir liste görüntülemek istediğimizi bildirmek için <ol> </ol> etiketini kullanılıyor.

İçine eklemek istediğimiz herhangi bir öğe <li> </li> etiketinin içine yerleştirilmelidir.

bilgi : ol, sıralı liste anlamına gelen "Ordered" kelimesinin kısaltmasıdır ve li, listedeki bir öğe anlamına gelen "item" kelimesinin kısaltmasıdır.

Aşağıdaki örnekte, içinde üç öğe bulunan sıralı bir liste ekledim.

  • <ol>
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Numaralandırma türleri

Önceki örnekte, sıralı listeye eklediğim her seçeneğin arkasında sayılar olduğunu fark ettin mi?

ben de bunu fark ettim, bunun adı numaralandırma denir.

Listenin numaralandırma türünü istediğin göre başka bir seçeneğe seçebilirsin.

Her elemanın başında görünecek numaralandırma türünü belirtmek için type özelliği <ol> etiketine ekleyebilir ve değer olarak aşağıdaki karakterlerden birini iletebilirsin:

  • type="A": Her öğeden önce büyük harflerle alfabetik bir numaralandırma gösterir.
  • type="a": Her öğeden önce küçük harflerle alfabetik bir numaralandırma gösterir.
  • type="I": Her öğeden önce büyük harflerle roman numaralandırmasını gösterir.
  • type="i": Her öğeden önce küçük harflerle roman numaralandırmasını gösterir.
  • type="1": Her öğeden önce normal numaralandırmayı gösterir ve bu, değeri kendini belirtmemiş olmanı durumunda ayarlanan varsayılan değerdir.

Aşağıdaki örnekte, numaralandırma türünü büyük harflerle alfasayısal olarak değiştirdim.

  • <ol type="A">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>listeler</li>
  • </ol>
kod dene 

Aşağıdaki örnekte, numaralandırma türünü küçük harflerle alfasayısal olarak değiştirdim.

  • <ol type="a">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Aşağıdaki örnekte, numaralandırma türünü büyük harflerle Roman rakamlarıyla değiştirdim.

  • <ol type="I">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Aşağıdaki örnekte, numaralandırma türünü küçük harflerle Roman rakamlarıyla değiştirdim.

  • <ol type="i">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Aşağıdaki örnekte, numaralandırma türünün normal bir numaralandırma olduğunu belirttim ve elbette varsayılan numaralandırma türü temelde sayısal olduğu için herhangi bir fark görmeyeceğiz.

  • <ol type="1">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Numaralandırmanın nerede başlıcağın belirtlemek

okuduğun gibi, numaralandırmanın nerede başlıcağın belirtmek.

Listenin numaralandırmaya hangi numaradan başlayacağını belirtmek istiyorsan, <ol> etiketinin start özelliğini ekleyebilir ve başlamak istediğin numarayı iletebilirsin.

Aşağıdaki örnekte numaralandırmanın 5 ile başlayacağını belirttim.

  • <ol start="5">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Aşağıdaki örnekte numaralandırmanın 3 rakamı ile başlayacağını ve numaralandırma türünün küçük harf olacağını belirttim.

  • <ol start="3" type="a">
  •     <li>HTML</li>
  •     <li>Sıralamalı</li>
  •     <li>Listeler</li>
  • </ol>
kod dene 

Mevcut numaralandırmayı kesmek

Numaralandırmanın ulaştığı sayının değerini değiştirmek istiyorsan, listedeki belirli bir elemandan başlayarak, elemana value özelliğini (yani <li> etiketine) ekleyebilir ve istediğin sayıyı iletebilirsin.

Aşağıdaki örnekte, dördüncü elemandaki numaralandırmayı 7 olarak değiştirdim.

  • <ol>
  •  <li>html</li>
  •  <li>css</li>
  •  <li>java script</li>
  •  <li value="7">ens</li>
  •  <li>k-kudo</li>
  •  <li>k-html</li> 
  • </ol>
kod dene 

Liste rengini seçmek

Aşağıdaki örnekte listenin rengini kırmızı olarak ayarladım.

  • <ol style="color:  #ff0000;" >
  • <li>HTML</li>
  • <li>Sıralamalı</li>
  • <li>Listeler</li>
  • </ol>
kod dene 

"color" özelliğini ekledikten sonra bir renk kodu ekledim ve buradan istediğin renk için kod alabilirsin.

Not: style özelliği CSS ilgili bir özelliktir.
Ona göre şimdi style özelliği önem vermemilisin.

Liste içinde bir liste eklemek

Liste öğesinin altında görünmesi için listeleri iç içe gösterebilirsin.
Özel bir liste ayarlamak istediğin herhangi bir öğe, öğenin içindeki listeyi bilmelidir.

Aşağıdaki örnekte iki öğe tanımladım ve her öğenin başka bir listesi var.

  • <ol>
  •     <!−− İçine koyduğumuz ilk öğe üç öğeden oluşan bir liste −−>
  •     <li>Front−End
  •         <ol>
  •             <li>HTML</li>
  •             <li>CSS</li>
  •             <li>Javascript</li>
  •         </ol>
  •     </li>
  •     <!−− İçine koyduğumuz ikinci öğe, iki öğeden oluşan bir liste −−>
  •     <li>Back−End
  •         <ol>
  •             <li>MySQL</li>
  •             <li>Aspnetcore</li>
  •         </ol>
  •     </li>
  • </ol>
kod dene 
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.