Listeleme Düzeni Bu sayfada HTML'in listeleme kodlarını öğreneceğiz. Sırasız Listeleme Öğreneceğimiz ilk maddeleme çeşidi "unordered list" . Bu tür listenin komutlarını <ul>...</ul> kodları arasına yazıyoruz. Ve listelenecek her madde <li>...</li> arasına yazılır. Hemen bir örnek çözelim. Kod: Tümünü seç<html> <head> <title>Mario Vargas Llosa</title> </head> <body> Mario Vargas Llosa'nın kitapları: <ul> <li>Kent ve Köpekler</li> <li>Julia Teyze</li> <li>Yüzbaşı ve Kadınlar Taburu</li> <li>Alplerde Kaybolmak</li> </ul> </body> </html> Bu örneğimizde Vargas'ın kitaplarını ardı ardına sıraladık ve her maddenin başına siyah bir nokta işareti konuldu. Maddelerin başına başka işaretler koymak da olasıdır. Bunun için <ul> koduna type="..." parametresi tanımlanır. Bir kaç örnek vermek gerekirse: <ul type="disc">,<ul type="circle"> veya <ul type="square">. Kod: Tümünü seç<html> <head> <title>Kitaplar</title> </head> <body> Mario Vargas Llosa'nın kitapları: <ul type="disc"> <li>Kent ve Köpekler</li> <li>Julia Teyze</li> <li>Yüzbaşı ve Kadınlar Taburu</li> <li>Alplerde Kaybolmak</li> </ul> Amin Maalouf'un kitapları: <ul type="square"> <li>Afrikalı Leon</li> <li>Tanios Kayası</li> <li>Doğunun Limanları</li> <li>Semerkant</li> </ul> Ursula K. Leguin'in kitapları: <ul type="circle"> <li>Karanlığın Sol Eli</li> <li>Mülksüzler</li> <li>Yerdeniz Üçlemesi </li> <li>Başlama Yeri</li> </ul> </body> </html> Bazen maddelerin alt maddeleri de vardır. Aşağıdaki örneği inceleyelim: Kod: Tümünü seç<html> <head> <title>Ursula K. Leguin</title> </head> <body> Ursula Kroeber Leguin'in kitapları: <ul> <li>Karanlığın Sol Eli</li> <li>Mülksüzler</li> <li>Yerdeniz Üçlemesi</li> <ul> <li>Yerdeniz Büyücüsü</li> <li>Atuan Mezarları</li> <li>En Uzak Sahil</li> <li>Tehanu</li> </ul> <li>Alplerde Kaybolmak</li> </ul> </body> </html> Yukarıdaki uygulamada <ul>...</ul> kodları arasında bir başka <ul>...</ul> kod dizini kullanarak, alt maddelendirme yoluna gittik. Sıralı Listeleme Genellikle listelerimizde maddelerin önüne işaret yerine, maddenin sırasını belirten rakam veya harf koymayı tercih ederiz. Bunun için de <ol>...</ol> kodlarını kullanırız. Bu kodlar arasına listeleyeceğimiz maddeleri <ul> kodunda olduğu gibi <li>...</li> arasına yazarız. Kod: Tümünü seç<html> <head> <title>Halikarnas Balıkçısı</title> </head> <body> Cevat Şakir Kabaağaçlı'nın kitapları: <ol> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> </body> </html> Bu uygulamamızda maddelerin önüne sıra numaraları koymuş olduk. İşaretlerde olduğu gibi, sıra numaralarının da çeşitleri vardır. Ve alt maddeler oluşturmak olasıdır. Kod: Tümünü seç<html> <head> <title>Halikarnas Balıkçısı</title> </head> <body> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="A"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="a"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="I"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="i"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> </body> </html> Eğer type="..." parametresini kullanmazsanız maddeler 1,2,3... diye sıralanacaktır. Bu maddeleme şekillerini içiçe kullanarak güzel bir indeks oluşturmanız da mümkün. Bunun örneğini ben yapmayım da, siz akıl edin. Tanım Listesi Elbette listenizi maddelerken önüne bir işaret veya sıra numarası koymanız şart değil. Bunun için <dl>...</dl> kodları arasında <dd>...</dd> ile işaretsiz ve numarasız maddeler sıralayabilirsiniz. Bu maddelerin önünde sadece boşluk olacaktır. Bu boşluk olmasını istemiyorsanız <dt>...</dt> kullanabilirsiniz. Hemen örnekle gösterelim: Kod: Tümünü seç<html> <head> <title>Kitaplar</title> </head> <body> Yazarlar ve kitapları: <dl> <dt>Mario Vargas Llosa'nın kitapları:</dt> <dd>Kent ve Köpekler</dd> <dd>Julia Teyze</dd> <dd>Yüzbaşı ve Kadınlar Taburu</dd> <dd>Alplerde Kaybolmak</dd> <dt>Amin Maalouf'un kitapları:</dt> <dd>Afrikalı Leon</dd> <dd>Tanios Kayası</dd> <dd>Doğunun Limanları</dd> <dd>Semerkant</dd> <dt>Ursula K. Leguin'in kitapları:</dt> <dd>Karanlığın Sol Eli</dd> <dd>Mülksüzler</dd> <dd>Yerdeniz Üçlemesi </dd> <dd>Başlama Yeri</dd> </dl> </body> </html> Bu uygulamada yazarların isimlerini "bold" yazsaydık daha güzel gözükürdü herhalde. Bu listeleme tarzında da içiçe listeler ve alt maddeler oluşturulabilir. Göstermediğim bir kaç kod daha var, onları da kısaca anlatayım. <ul>...</ul> yerine <dır>...</dır> veya <menu>...</menu> kodlarını da kullanabilirsiniz, değişen birşey olmaz. Sıralı Listelemede Belli Bir Sıra Numarasından Başlatma Sayfanın sonunda bir incelik öğreteyim dedim: Sıra numaralı listelerde <ol>...</ol> kodlarının kullanılacağını söylemiştik ve type="..." kodu ile sıra numaralarının şeklini belirleyebiliyorduk. Ama listemizin maddelerini ilk numaradan başlatmak zorunda değiliz. Bunun için start="..." parametresini kullanırız. Kaçıncı maddeden başlayacaksak, o sayıyı tırnak arasına yazarız: Kod: Tümünü seç<html> <head> <title>Halikarnas Balıkçısı</title> </head> <body> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="A" start="3"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="a" start="5"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="I" start="7"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> Cevat Şakir Kabaağaçlı'nın kitapları: <ol type="i" start="9"> <li>Mavi Sürgün</li> <li>Aganta Burina Burinata</li> <li>Anadolu'nun Tanrıları</li> <li>Parmak Damgası</li> </ol> </body> </html> Volkan Derinbay'a tşkler.