İç içe listeler
Listeleri iç içe geçirerek hiyerarşik yapılar kurmayı öğrenirsin.
İç içe liste nedir?
Bazen bir liste öğesinin altında başka bir liste gerekir. Buna iç içe liste denir. Alt liste, bir <li> öğesinin içine yeni bir <ul> ya da <ol> açılarak yazılır.
Örnek: bir kitaplıkta 'Programlama' altında 'Python' ve 'JavaScript' olabilir. Üst liste kategorileri, alt liste o kategorinin başlıklarını taşır. Doğru kapanış etiketlerine dikkat etmek burada çok önemlidir.
Girinti ve okunabilirlik
İç içe listelerde girinti (indentation) sadece estetik değil, anlam taşır. Her seviyeyi bir adım içeri yazmak, hangi etiketin hangisinin içinde olduğunu gözle gösterir.
Hatalı kapanış etiketi, iç içe listede en sık yapılan hatadır. Önce içtekini kapat, sonra dıştakini. Tarayıcı yanlış girintiyi yok sayar ama kapanış sırasını yanlış yaparsan liste dağılır.
Uygulama İki seviyeli iç içe liste yaz
Body içine iç içe bir <ul> listesi ekle. Üst listede en az iki <li> olsun; ilk öğenin içinde bir alt <ul> daha olsun (örneğin Meyveler altında Elma ve Armut, ayrıca Sebzeler öğesi).
Örnek çözümü göster
<body>
<ul>
<li>Meyveler
<ul>
<li>Elma</li>
<li>Armut</li>
</ul>
</li>
<li>Sebzeler</li>
</ul>
</body>
Kendini test et
-
İç içe listede alt liste nereye yazılır?
- Bir <li> etiketinin içine
- <ul> etiketinin dışına, kardeş bir liste olarak
- <body> içine ama li'den tamamen ayrı
- Listenin en başına, ilk li'den önce
Cevabı göster
Bir <li> etiketinin içine — Doğru. Alt liste bir <li> öğesinin içine açılır; böylece iç içelik kurulur.
-
Alt listeyi kapat
<ul> <li>Hayvanlar <ul> <li>Kedi</li> <li>Köpek</li> ____ </li> </ul>Cevabı göster
<ul> <li>Hayvanlar <ul> <li>Kedi</li> <li>Köpek</li> </ul> </li> </ul> -
Senaryoyu liste türüyle eşleştir
- Tarif malzemeleri
- Sırasız liste (ul)
- Yarış sıralaması
- Sıralı liste (ol)
- Sözcük ve anlamı
- Açıklama listesi (dl)
- Menü ve alt öğeler
- İç içe liste