Listeleme DuzeniListeleme Düzeni
Bu sayfada HTML'in listeleme (maddeleme) kodlarını öğreneceğiz. Hemen konuya girelim:
Sırasız Listeleme
Öğreneceğimiz ilk maddeleme çeşidi "unordered list" (sırasız liste). 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.
Bu sayfada HTML'in listeleme (maddeleme) kodlarını öğreneceğiz. Hemen konuya girelim:
Sırasız Listeleme
Öğreneceğimiz ilk maddeleme çeşidi "unordered list" (sırasız liste). 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.
Bu örneğimizde Vargas'ın kitaplarını ardı ardına sıraladık ve her maddenin başına siyah bir nokta işareti (disc) 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">.
Bazen maddelerin alt maddeleri de vardır. Aşağıdaki örneği inceleyelim:
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> (ordered list) kodlarını kullanırız. Bu kodlar arasına listeleyeceğimiz maddeleri <ul> kodunda olduğu gibi <li>...</li> arasına yazarız.
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.
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. (Zekânızı küçümsemek istemem.)
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> (definition list; tanım listesi) kodları arasında <dd>...</dd> (definition description; tanım açıklaması) 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> (definition term; tanım terimi) kullanabilirsiniz. Hemen örnekle gösterelim:
Bu uygulamada yazarların isimlerini "bold" (kalın) 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 (ayrıntı) öğreteyim dedim: Sıra numaralı listelerde <ol>...</ol> (ordered list; sıralı listeler) 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:
Bu uygulamamızda her çeşit sıra numarasını istediğimiz sıradan başlayarak maddeledik. Böylece listeleme düzeniyle ilgili sayfamız burada sonra eriyor. Diğer sayfada görüşmek üzere.
Bu örneğimizde Vargas'ın kitaplarını ardı ardına sıraladık ve her maddenin başına siyah bir nokta işareti (disc) 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">.
Bazen maddelerin alt maddeleri de vardır. Aşağıdaki örneği inceleyelim:
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> (ordered list) kodlarını kullanırız. Bu kodlar arasına listeleyeceğimiz maddeleri <ul> kodunda olduğu gibi <li>...</li> arasına yazarız.
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.
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. (Zekânızı küçümsemek istemem.)
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> (definition list; tanım listesi) kodları arasında <dd>...</dd> (definition description; tanım açıklaması) 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> (definition term; tanım terimi) kullanabilirsiniz. Hemen örnekle gösterelim:
Bu uygulamada yazarların isimlerini "bold" (kalın) 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 (ayrıntı) öğreteyim dedim: Sıra numaralı listelerde <ol>...</ol> (ordered list; sıralı listeler) 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:
Bu uygulamamızda her çeşit sıra numarasını istediğimiz sıradan başlayarak maddeledik. Böylece listeleme düzeniyle ilgili sayfamız burada sonra eriyor. Diğer sayfada görüşmek üzere.© 2010 Bucdet, Teşekkürler Mymalatya Bugün 1 ziyaretçi (2 klik) kişi burdaydı! |
