Sayfa içeriği
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 ekledik.
- <ol>
- <li>Apple</li>
- <li>Orange</li>
- <li>Mango</li>
- </ol>
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>mai sakurajima</li>
- <li>miku nakano</li>
- <li>kaneki ken</li>
- </ol>
Aşağıdaki örnekte, numaralandırma türünü küçük harflerle alfasayısal olarak değiştirdim.
- <ol type="a">
- <li>mai sakurajima</li>
- <li>miku chan</li>
- <li>kaneki ken</li>
- </ol>
Aşağıdaki örnekte, numaralandırma türünü büyük harflerle Roman rakamlarıyla değiştirdim.
- <ol type="I">
- <li>mai</li>
- <li>sakurajima</li>
- <li>Mai Sakurajima</li>
- </ol>
Aşağıdaki örnekte, numaralandırma türünü küçük harflerle Roman rakamlarıyla değiştirdim.
- <ol type="i">
- <li>java</li>
- <li>is other language than</li>
- <li>javascript</li>
- </ol>
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>Java</li>
- <li>javascript"ten</li>
- <li>tamamen farklı bir dildir</li>
- </ol>
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>mai sakurajıma</li>
- <li>miku nakano</li>
- <li>kaneki ken</li>
- </ol>
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>Mai sakurajima</li>
- <li>miku nakano</li>
- <li>kaneki ken</li>
- </ol>
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>
Liste rengini seçmek
Aşağıdaki örnekte listenin rengini kırmızı olarak ayarladım.
- <ol style="color: #ff0000;" >
- <li>mai sakurajima</li>
- <li>miku nakano</li>
- <li>kaneki ken</li>
- </ol>
"color" özelliğini ekledikten sonra bir renk kodu ekledim ve buradan istediğin renk için kod alabilirsin ..
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>