32 – Html Sıralı Listeler – Ordered List
Sıralı listeler sayı veya alfabetik olarak sıralı halde sunulan listelerdir.
<ol> etiketi ile açılır ve </ol> etiketi ile sonlandırılır.
<ol> açılış ve kapanış etiketleri içerisinde sunacağımız liste öğeleri <li> etiketi ile eklenir.
Kullanım Örneği:
<ol>
<li> ..... </li>
<li> ..... </li>
</ol>
Örnek
<html>
<head>
<title>Html Sıralı Liste</title>
</head>
<body>
<ol>
<li>Html Dersleri</li>
<li>Css Dersleri</li>
<li>Javascript Dersleri</li>
<li>Dart Dersleri</li>
</ol>
</body>
</html>Yukarıdaki örnek varsayılan değerlerle geldiği için başına sayı aldı. Bu sayıları <ol> etiketinde type attribute kullanarak değiştirebiliriz.
Sıralı Listeler (ordered) Type Attribute
type attribute sayesinde sıralı listelerde sayı yerine harf kullanabiliriz.
- type=”1″ varsayılan olarak başına sayı değerleri getirilir.
- type=”A” başına büyük harf getirilerek alfabetik olarak sıralanır.
- type=”a” başına küçük harf getirerek alfabetik olarak sıralanır.
- type=”I” listenin başına büyük romen rakamları getirilir.
- type=”i” listenin başına küçük romen rakamları getirilir.
Listeyi Büyük Harf İle Sıralama
Örnek type=”A”
<html>
<head>
<title>Html Liste Büyük Harf Sıralama</title>
</head>
<body>
<ol type="A">
<li>Bilim Kurgu Filmleri</li>
<li>Fantastik Filmler</li>
<li>Korku Filmleri</li>
<li>Komedi Filmleri</li>
</ol>
</body>
</html>Listeyi Küçük Harf ile Sıralama
Örnek type=”a”
<html>
<head>
<title>Html Liste Küçük Harf Sıralama</title>
</head>
<body>
<ol type="a">
<li>Bilim Kurgu Filmleri</li>
<li>Fantastik Filmler</li>
<li>Korku Filmleri</li>
<li>Komedi Filmleri</li>
</ol>
</body>
</html>Listeyi Romen Rakamları ile Sıralama
type=”I” olarak kullanımı ile liste öğelerimizin başına büyük romen rakamları getirilir.
type=”i” olarak kullanımı ise liste öğelerimizin başına küçük harfle romen rakamları getirilir.
Örnek type=”I”
Örnek type=”i”
<html>
<head>
<title>Html Liste Romen Rakamları</title>
</head>
<body>
<ol type="i">
<li>Bilim Kurgu Filmleri</li>
<li>Fantastik Filmler</li>
<li>Korku Filmleri</li>
<li>Komedi Filmleri</li>
</ol>
</body>
</html>Listenin Başındaki Sayıları Değiştirme
Sayısal ve alfabetik olarak en baştan başlayan sıralamayı farklı bir sayıdan veya harften başlamasını isteyebiliriz. Bunun için start attribute kullanabiliriz.
Örnek
<html>
<head>
<title>Html Liste Başlangıç Sayısı</title>
</head>
<body>
<ol type="1" start="20">
<li>Bilim Kurgu Filmleri</li>
<li>Fantastik Filmler</li>
<li>Korku Filmleri</li>
<li>Komedi Filmleri</li>
</ol>
</body>
</html>İç içe sıralı liste oluşturmak
İç içe sıralı liste oluşturmak için <li> etiketleri arasında tekrar <ol> ile liste oluşturmalıyız. Bunlar başlık, alt başlık gibi düşünülebilir.
Örnek
<html>
<head>
<title>Html iç içe listeler</title>
</head>
<body>
<ol type="1">
<li>Bilim Kurgu Filmleri
<ol>
<li>Bilim Kurgu Filmi</li>
<li>Bilim Kurgu Filmi</li>
</ol>
</li>
<li>Fantastik Filmler</li>
<li>Korku Filmleri</li>
<li>Komedi Filmleri</li>
</ol>
</body>
</html>