ForumTayfa  

Go Back   ForumTayfa > Güvenlik & Bilgisayar & İnternet & Webmaster & Programlama Bölümü > Güvenlik & Bilgisayar & İnternet & Webmaster & Programlama > ASP, Perl, Php, Html

ASP, Perl, Php, Html ASP, Perl, Php, Html, Java gibi her tür programcılık dili için yardım alabilceğimiz bölüm...

Yeni Konu aç  Cevapla
 
LinkBack Seçenekler Stil
Alt 01.02.07, 13:48   #1 (permalink)
Yeni Tayfa
 
long_time_03 - ait Kullanıcı Resmi (Avatar)
 
Üyelik Tarihi: Jan 2007
Nereden: AfYoN
Mesaj Sayısı: 126
Konu Sayısı: 57
Rep Gücü: 233
Rep Puanı: 21927
Rep Derecesi : long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000
Ruh Hali:

Smile HTML Listeleme Düzeni




Bu sayfada HTML'in listeleme (maddeleme) kodlarını öğreneceğiz.

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.



codeDivStart()Kod:
<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 (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">.



codeDivStart()Kod:
<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 (aslında "dörtleme")</li>
<li>Başlama Yeri</li>
</ul>
</body>
</html>


Bazen maddelerin alt maddeleri de vardır. Aşağıdaki örneği inceleyelim:



codeDivStart()Kod:
<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> (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.



codeDivStart()Kod:
<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.



codeDivStart()Kod:
<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. (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:



codeDivStart()Kod:
<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 (aslında "dörtleme")</dd>
<dd>Başlama Yeri</dd>
</dl>
</body>
</html>



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:



codeDivStart()Kod:
<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>



__________________
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
long_time_03 isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık



Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 06:07.


Powered by vBulletin® Version 3.8.0
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.0
User Alert System provided by Advanced User Tagging v3.0.6 (Lite) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
ForumTayfa

Arşiv: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 16 22 23 24 25 26 27 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 95 96 97 98 99 100 102 103 104 105 106 155 156 157 158 159 160 161 162 163 164 167 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271


ForumTayfa - Link Değişimi
Telinka İletişim | Voip Ürünleri | Link Değişimine Katılın |

Sitemiz bir forum sitesi olduğundan dolayı, kullanıcılar her türlü görüşlerini önceden onay olmadan anında siteye yazabilmektedir. ForumTayfa Yöneticileri mesajları itina ile kontrol etse de, bu yazılardan dolayı doğabilecek her türlü sorumluluk yazan kullanıcılara aittir. Yine de sitemizde yasalara aykırı unsurlar bulursanız [email protected] email adresine bildirebilirsiniz, şikayetiniz incelendikten sonra en kısa sürede gereken yapılacaktır.

Any member of our web site has the right of adding comments instantly without getting permisson due to the forum structure of our site basis. Althought, our site modarators check comments with care, all the responsibilities sourced from these comments directly belong to the members. If you still find any illegal content in our site ( A.buse, H.arassment, S.camming, H.acking, W.arez, C.rack, D.ivx, Mp.3 or any Illegal Activity ), please report us via [email protected] .Your reports will be evaluated as soon as the arrival of your e-mail.