İç İçe Sıralı Liste Oluşturma
Sıralı liste oluşturmayı bir önceki derslerimizde görmüştük. Tekrar etmekte fayda var. Sıralı liste oluştururken <ol> etiketini kullanırız.
Bir liste oluştururken listemizdeki maddelerden birinin alt maddeleri olabilir. Bunun için içe içe listeleri kullanırız. Mantık son derece basittir. Yaptığımız tek şey mevcut bir liste elemanının içerisine girip yeni bir liste oluşturmak.
Konuyu daha iyi anlamak için örnek yapalım ve örneğimizi adım adım inceleyelim.
1. Adım: Listemizi oluşturalım. Listemizin elemanları "İslamın Şartları" ve "İmanın Şartları" olsun.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>İslamın ve İmanın Şartları</title>
</head>
<body>
<ol>
<li>İslamın Şartları</li>
<li>İmanın Şartları</li>
</ol>
</body>
</html>2. Adım: Listemizdeki "İslamın Şartları" elemanını alt dallara ayıralım. Bunun için <li> etiketimizin içerisine girmemiz ve "İslamın Şartları" yazısından sonra bir alt satıra inerek yeni bir <ol> etiketi açmamız yazmamız gerekiyor. Ardından yeni açtığımız <ol> etiketinin içerisine <li> etiketiyle elemanlarımızı giriyoruz.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>İslamın ve İmanın Şartları</title>
</head>
<body>
<ol>
<li>İslamın Şartları
<ol>
<li>Şehâdet Etmek</li>
<li>Namaz Kılmak</li>
<li>Zekât Vermek</li>
<li>Oruç Tutmak</li>
<li>Hacca Gitmek</li>
</ol>
</li>
<li>İmanın Şartları</li>
</ol>
</body>
</html>Gördüğünüz gibi ana listemizdeki <li> etiketinin içerisine yeni bir <ol> etiketi açarak iç içe liste oluşturmuş olduk. Bunu bu şekilde devam ettirmek mümkündür.
Şimdi de "İmanın Şartları" elemanının içerisine yeni bir liste oluşturalım.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>İslamın ve İmanın Şartları</title>
</head>
<body>
<ol>
<li>İslamın Şartları
<ol>
<li>Şehâdet Etmek</li>
<li>Namaz Kılmak</li>
<li>Zekât Vermek</li>
<li>Oruç Tutmak</li>
<li>Hacca Gitmek</li>
</ol>
</li>
<li>İmanın Şartları
<ol>
<li>Allah'ın Varlığına ve Birliğine İman</li>
<li>Allah'ın Kitaplarına İman</li>
<li>Peygamberlere İman</li>
<li>Meleklere İman</li>
<li>Ahiret Gününe İman</li>
<li>Kadere ve Kazaya İman</li>
</ol>
</li>
</ol>
</body>
</html>Gördüğünüz gibi hem İslamın Şartları'nın hem de İmanın Şartları'nın alt listelerini oluşturmuş olduk.
type niteliği bu gibi durumlarda imdadımıza koşar. Şimdi aynı örneği bir daha yapalım ama bu sefer farklı olarak alt listelerimizin type niteliğine "a" değerini verelim.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>İslamın ve İmanın Şartları</title>
</head>
<body>
<ol>
<li>İslamın Şartları
<ol type="a">
<li>Şehâdet Etmek</li>
<li>Namaz Kılmak</li>
<li>Zekât Vermek</li>
<li>Oruç Tutmak</li>
<li>Hacca Gitmek</li>
</ol>
</li>
<li>İmanın Şartları
<ol type="a">
<li>Allah'ın Varlığına ve Birliğine İman</li>
<li>Allah'ın Kitaplarına İman</li>
<li>Peygamberlere İman</li>
<li>Meleklere İman</li>
<li>Ahiret Gününe İman</li>
<li>Kadere ve Kazaya İman</li>
</ol>
</li>
</ol>
</body>
</html>Gördüğünüz gibi listelerimizin numaralandırma tiplerini değiştirerek daha anlaşılır bir görünüm elde etmiş olduk.