HTML'de çeşitli liste türleri bulunmaktadır. İlk olarak, madde işaretli listeler vardır. Bu liste türünde, her liste girişi bir maddenin işareti olan Bullet ile donatılmıştır.
Maddeli listeler ul etiketiyle başlatılır. Her liste girişi li etiketi ile tanımlanmıştır.
<p>Forumdaki Güncel Konular</p> <ul> <li>CSS devam etmiyor</li> <li>40'ların Hollywood tarzı Showroom'u</li> <li>Açılır CSS listesi</li> <li>PHP bağlanma/kesme</li> <li>Küçük Showroom'um - Başlangıç seviyesi ipuçları istiyor!</li> </ul>
İşte tarayıcıda alınan sonuca göz atın:
Her gönderinin önüne bir madde işareti eklenir. Bu varsayılan olarak tarayıcılar tarafından belirlenir. Listelerin görünümünü etkileyebilen bazı özellikler bulunsa da, bunlar artık kullanılmamalıdır. Bunun yerine CSS özellikleri devreye girer.
Madde işaretli listeler ayrıca iç içe geçirilebilir. İlk olarak aşağıdaki şekilde bir resme göz atın:
Bu iç içe geçirmenin ne anlama geldiği açıkça görülmektedir.
Söz konusu sözdizimi şöyle görünür:
<ul>
<li>Öğretiler
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Video eğitimler
<ul>
<li>3D</li>
<li>Medya tasarımı</li>
<li>Web</li>
</ul>
</li>
<li>İpuçları</li>
<li>Mağazalar</li>
</ul>
Bir liste girdisi içinde başka bir liste olabilir. Bu durumda zorunlu olarak madde işaretli liste olması gerekmez. Aslında, bu kendisini gösteren başka liste türleri de - bu ders kapsamında tanıtılacak olanlar - ekleyebilir.
Ayrıca, HTML5'te kapanış </li> etiketini kullanmak zorunlu değildir. Okunabilirlik açısından her zaman kapatmayı tercih etsem de. Sözdizimsel olarak doğru olan, aşağıdaki gibi bir şeydir:
<p>Forumdan Güncel Konular</p> <ul> <li>CSS devam etmiyor <li>40'ların Hollywood tarzı Showroom'u <li>Açılır CSS listesi <li>PHP bağlanma/kesme <li>Küçük Showroom'um - Başlangıç seviyesi ipuçları istiyor! </ul>
Sıralı Listeler
Madde işaretli listelerin yanı sıra sıralı listeler de tanımlanabilir. İşte bu tür sıralı listelerin aslında ne olduğunu gösteren bir resim de önceki gibi.
Liste girdilerine sıralı sayılar eklendi. Sıralı listeler ol etiketiyle başlatılır.
Aşağıdaki örnek, bu etiketin nasıl kullanılabileceğini göstermektedir.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Madde işaretli listelerde olduğu gibi, burada da liste girdileri li etiketiyle işaretlenir.
Teorik olarak, madde işaretli listeler de iç içe geçirilebilir.
<ol>
<li>Eğitimler
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Video eğitimler
<ol>
<li>3D</li>
<li>Medya tasarımı</li>
<li>Web</li>
</ol>
</li>
<li>İpuçları</li>
<li>Mağazalar</li>
</ol>Ancak tarayıcıdaki sonuç hayal kırıklığı yaratır.
Bu nedenle şu şemaya göre numaralandırma elde edilmez:
1. Eğitimler 2D
1.1 3D
1.2 Web
- Video eğitimler 3D
2.1 Medya tasarımı
2.2 Web - İpuçları
- Mağazalar
Bu, saf HTML ile mümkün değil. Aslında, içeriği otomatik olarak böyle bir şema ile numaralandırmak için CSS'ye başvurmak gerekmektedir.
Definition Listeleri
Bir diğer liste türü, tanım listeleridir. Bu tür tanımlı listelerin tarayıcıda nasıl görüneceğine dair bir örnek daha önce olduğu gibi aşağıdadır:
Tanım listeleri için temel kullanım alanı kılavuzlardır. İşte önceki çıktıyı oluşturan sözdizimi:
<dl>
<dt>AM</dt>
<dd>AM - Hava Postası</dd>
<dd>AM - Hava Mareşal</dd>
<dd>AM - Amberg</dd>
<dd>AM - Amerikyum</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - adı geçen</dd>
<dd>AN - Erişim Noktası</dd>
<dd>AN - Ancona</dd>
</dl>Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.
Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.
Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.
In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Yeni...</button> <button type="button" onclick="fopen()">Aç...</button> <button type="button" onclick="fsave()">Kaydet</button> <button type="button" onclick="fsaveas()">Farklı kaydet...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Kopyala</button> <button type="button" onclick="ecut()">Kes</button> <button type="button" onclick="epaste()">Yapıştır</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Yardım</a></li> <li><a href="about.html">Hakkında</a></li> </menu> </li> </menu>
Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.
Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.
Listen gestalten
Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.
Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.
<ol type="A">
Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.
