Ders_19 HTML Listeleri (List)

HTML Listeleri (List)

Aşağıda, sıralanmamış (unordered) bir liste örneği vardır:

Birinci madde
ikinci madde
Üçüncü madde

Aşağıda, sıralanmış (ordered) bir liste örneği vardır:

Birinci madde
İkinci madde
Üçüncü madde

Sıralanmamış (unordered) HTML Listeleri

Sıralanmamış bir liste elemanı, <ul> tagı ile başlar </ul> tagı ile biter.

Listedeki her bir madde ise <li> ve </li> tagları arasında ilan edilir.

Listedeki her bir madde, bir madde işareti ile (varsayılan olarak, içi dolu küçük bir daire) işaretlenir.

Aşağıdaki sıralanmamış liste örneğine bakalım:

<ul>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Yukarıdaki liste elemanı şöyle görünür.

Kahve
Çay
Süt

Unordered HTML Listelerinde Stil Özellikleri

Sıralanmamış listelerde farklı madde işaretlerini belirlemek için, CSS stilleri kullanılır. Madde işaretlerini yöneten CSS özelliği list-style-type kodudur.

Aşağıda list-style-type özelliğine atanabilecek değerler ve anlamları verilmiştir:

Style	Anlamı
list-style-type:disc	Her maddenin önüne, küçük ve içi dolu bir disk koyar. (varsayılandır)
list-style-type:circle	Her maddenin önüne, küçük ve içi boş bir daire koyar.
list-style-type:square	Her maddenin önüne, küçük ve içi dolu bir kare koyar.
list-style-type:none	Her maddenin önü boş kalır.

Aşağıdaki örneğe dikkat edelim:

<ul style="list-style-type:square">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Yukarıdaki liste elemanı şöyle görünecektir:

Kahve
Çay
Süt

Sıralanmış (ordered) HTML Listeleri

Sıralanmamış bir liste elemanı, <ol> tagı ile başlar </ol> tagı ile biter.

Listedeki her bir madde ise <li> ve </li> tagları arasında ilan edilir.

Listedeki her bir madde, sırayla numaralandırılır. (Varsayılan olarak, 1'den başlanır ve sırayla devam edilir.)

Aşağıdaki sıralanmış liste örneğine bakalım:

<ol>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

Yukarıdaki liste elemanı şöyle görünür.

Kahve
Çay
Süt

Ordered HTML Listelerinde type Özelliği

Bir ordered liste elemanına type özelliği eklenerek madde işaretçilerinin hangi tipte olacağı belirlenir.

type CSS değil html özelliğidir.

Aşağıda type özelliğine atanabilecek değerler ve anlamları verilmiştir:

Type	Anlamı
type="1"	Her maddenin önüne 1'den başlayarak bir sayı koyulur. (varsayılandır)
type="A"	Her maddenin önüne A'dan başlayarak bir büyük harf koyulur.
type="a"	Her maddenin önüne a'dan başlayarak bir küçük harf koyulur.
type="I"	Her maddenin önüne büyük harflerle Roma rakamı koyulur.
type="i"	Her maddenin önüne küçük harflerle Roma rakamı koyulur.

Örneğin:

<ol type="A">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

Bu liste şöyle görünecektir:

Coffee
Tea
Milk

HTML Tanımlama (Description) Listeleri

Html'de tanım listesi özelliği de vardır.

Bir tanımlama listesi, terimler ve bu terimlerin anlamlarından oluşur.

Bir tanımlama listesi <dl> tagı ile başlar </dl> tagı ile biter. Bu tagların arasındaki her bir <dt> elemanı bir terim barındırır, her bir <dd> elemanı da bir tanım barındırır.

Aşağıda, kahve ve sütü tanımlayan bir tanım listesi verilmiştir:

<dl>
  <dt>Kayve</dt>
  <dd>- siyah ve sıcak bir içecektir.</dd>
  <dt>Süt</dt>
  <dd>- beyaz ve soğuk bir içecektir.</dd>
</dl>

Bu listenin çıktısı şöyle olacaktır:

Kayve

- siyah ve sıcak bir içecektir.
Süt: - beyaz ve soğuk bir içecektir.

İçiçe (Nested) HTML Listeleri

Bir liste, içerisinde başka bir liste barındırabilir. Bunun yanında, bir html listesi, resimler veya linkler gibi diğer html elemanlarını da barındırabilir.

Öreneğe dikkat edelim:

<ul>
  <li>Kahve</li>
  <li>Çay
  <ul>
      <li>Siyah çay</li>
      <li>Yeşil çay</li>
    </ul>
  </li>
  <li>Süt</li>
</ul>

Yukarıdaki listeye dikkat edersek; bir <li> elamanıda ayrı bir liste daha kodlanmıştır. Bu liste şöyle görünecektir:

Kahve

Çay

Siyah çay
Yeşil çay

Süt

Yatay (Horizontal) Listeler

Bir liste elemanının maddeleri her zaman alt alta olmak zorunda değildir.

CSS ile bir listenin maddelerini yatay olarak (inline) sıralayabiliriz.

Bunun için display özeliğine inline değerini atamamız yeterli olacaktır.

Örneğe dikkat edelim:

<ul style="display:inline;">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Bu liste şöyle görünecektir:

Kahve

Çay

Süt

Şimdi küçük bir uygulama yapalım ve bir menü (navigation bar) sayfası yazırlayalım.

Html listesi menü hazırlamak için uygun bir elemandır.

Örneğe dikkat edelim:

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
padding: 0;
}

ul#menu li {
display: inline;
}

ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}



</style>
</head>
<body>

<h2>display:inline özelliği ile yapılmış bir menü</h2>

<ul id="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>

</body>
</html>

Yukarıdaki CSS kodlarına baktığımızda;

ul#menu seçicisi; kimliği menu olan <ul> listesini seçmiştir.
ul#menu li seçicisi; kimliği menu olan <ul> listesinin, bütün yavru <li> elemanlarını seçmiştir.
ul#menu li a seçicisi; kimliği menu olan <ul> listesinin bütün yavru <li> elemanlarının yavrusu olan bütün <a> link elemanlarını seçmiştir.
ul#menu li a:hover seçicisi; kimliği menu olan <ul> listesinin bütün yavru <li> elemanlarının yavrusu olan bütün <a> link elemanlarının uzerine fare getirildiğinde (hover) ne olacağını seçmiştir.
text-decoration: none stil kodu; link textlerinin alt çizgilerini iptal etmiştir.
border-radius: 4px 4px 0 0 kodu; arkplan dolgusunun köşelerini ovalleştirir yani köşeleri dairesel yapar. Dolgunun, sırasıyla üst sol, üst sağ, alt sağ ve alt sol köşelerinin ne kadar ovalleşeceği, pixel cinsinden belirtilmiştir = 4px 4px 0 0. Bu değerler köşelerin ovallik çaplarıdır ve bu değerler attıkça ovalleşme artar.

Yukarıdaki kodların çıktısı şöyle olacaktır:

display:inline özelliği ile yapılmış bir menü

sonraki ders için tıklayınız

DERSİMİZ KOD - HTML