HTML’ de verileri belirli bir sıra ile listelemek istediğimizde listeleme etiketlerinden faydalanırız. Listeleme etiketleri 3 çeşittir;
1. “unordered list” yani kuralsız liste,
2. “ordered list” u-yani kurallı liste,
3. “definitions” bu da tanımlamalar’dır.
Unordered list’ de her elemanın başında sizin istediğiniz bir işaret vardır. Örneğin yıldız,nokta vs.. Ordered list’ te ise her eleman eklendiğinde otomatik olarak başına sıra sayısını ya da harfini atar. Örneğin 1 ise 2, a ise b, A ise B yapar. Siz her eleman eklediğinizde o bu artımı gerçekleştirir. Definitions’larda ise bir terim verilir ve sonra onun açıklaması verilir. Her terim ve açıklamasını eklediğinizde aynı biçimde gözükecektir. Şimdi ayrı ayrı bu listeleme etiketlerini inceleyelim.
Unordered Liste
Bu listede her eleman eklediğinizde elamanın başına bir disk işareti koyar. Örnek vermek gerekirse;
<html>
<body>
<ul>
<li>ali
<li>veli
<li>züleyha
</ul>
</body>
</html>
Listenin sıralama işaretini değiştirebiliriz. Aşağıdaki örnekte listenin başına kare işaretini ekliyoruz.
Bu işaretler: square-kare,disc-siyah disk,circle-çember
<html>
<body>
<ul type=”square”>
<li>ali
<li>veli
<li>züleyha
</ul>
</body>
</html>
Ordered Liste
Bu listeleme tipinde her bir eleman bir önceki işaretin bir artırılmasıyla oluşmaktadır. Mesela işeret 1 ise bir sonraki 2 olur. Eğer A ise bir sonraki B olur. Orderd listede beş tip vardır. “1 2 3..”, “a b c..”, “A B C…”, “i ii iii…” , “I II II IV…”.
Aşağıda bir ordered liste yapıyoruz. Type’ ni vermediğimiz sürece listeleme türü 1 2 3 olarak gider.
<html>
<body>
<ol>
<li>birinci elemen
<li>ikinci eleman
<li>üçüncü eleman
</ol>
</body>
</html>
Şimdi a b c olarak listelendirelim.
<html>
<body>
<ol type=”a”>
<li>ali
<li>veli
<li>züleyha
</ol>
</body>
</html>
İç içe Liste kullanımı
Listelerin içinde başka listeler bulunabilir. Örneğin bir unordered listenin elamanları ordered liste olabilir. Aşağıda ki örnekte bunu yapıyoruz.
<html>
<body>
<ul>
<li>Ali
<ol>
<li>akıllı
<li>iyi
</ol>
<li>veli
<ol>
<li>inatçı
<li>kibirli
</ol>
<li>züleyha
<ol>
<li>korkak
<li>uyanık
<li>iyi
</ol>
</ul>
</body>
</html>
Hiç yorum yok:
Yorum Gönder