HTML Örnekleri - HTML Samples

HTML Listeler

HTML belgelerinde 3 çeşit liste kullanılmaktadır.

1. Sıralı listeler (ordered list) : Rakam veya harf yada her ikisini içiçe kullanarak oluşturulan listelerdir.
2. Sırasız listeler (unordered list) : Madde işaretleriyle oluşturulan listelerdir.
3. Tanımlama listeleri (definition list) : Liste yerine uzun metinlerin okunmasını kolaylaştıran bir araçtır.

1. Sıralı Listeler (Ordered List)

Sıralı listelemede liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılmaktadır. Bu etiketler listenin başladığını ve bittiğini belirtir.

Listenin maddelerinin başına ise <li> (list item) etiketini getirilmektedir. Bu etikette tıpkı <br> etiketi gibi sonlandırılmamaktadır.

<ol> etiketi kullanılırken parametreler eklenebilir. Bu şekilde listenin rakamla mı harfle mi başlayacağı (type) yada hangi rakam/harfle başlayacağı (start) belirlenebilmektedir. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlamaktadır.

Aşağıdaki örnek kodları ve sonucunu görelim.

View Code HTML

<html>
<head>
<title>Sıralı Listeler</title>
</head>
<body>
<ol type="1">
<li>Dersler
<ol type="a">
<li>Matematik
<li>Türkçe
</ol>
<li>Yabancı Diller
<ol type="a">
<li>İngilizce
<li>Almanca
</ol>
<li>İller
<ol type="a">
<li>Ankara
<li>Samsun
<ol type="i">
<li>Atakum
<li>Atakent
</ol>
</ol>
</ol>
</body>
</html>

Yukarıdaki kodları çalıştırdığımızda aşağıdaki pencere ekrana gelir.

Yukarıdaki örneğe dikkat edilirse <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirilmekte, liste bitirilirken </ol> etiketini yazılır. Liste içinde yeni bir liste oluşturulacaksa tekrar <ol> etiketini yazılır. Type parametresi ile maddelerin hangi şekilde başlayacağı belirlenir. (rakam/harf/romen rakamları vb.)

2. Sırasız Listeler (Unordered List)

Sırasız listelerin farkı listeleme yapılırken maddelerin başına harf, rakamlar yerine küçük yuvarlaklar,kareler kullanılabilmesidir. <ol> etiketi yerine <ul> etiketi yazılmaktadır. Maddeler için <li> aynı şekilde kullanılmaktadır. <ol> için parametreler ise; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact parametresi sırasız listelerde de kullanılabiliyor.

Aşağıdaki örnek kodları ve sonucunu görelim.

View Code HTML

<html>
<head>
<title>Sırasız Listeler</title>
</head>
<body>
<ul type="disc">
<li>Dersler
<ul type="square">
<li>Matematik
<li>Türkçe
</ul>
<li>Yabancı Diller
<ul type="square">
<li>İngilizce
<li>Almanca
</ul>
<li>İller
<ul type="square">
<li>Ankara
<li>Samsun
<ul type="circle">
<li>Atakum
<li>Atakent
</ul>
</ul>
</ul>
</body>
</html>

Yukarıdaki kodları çalıştırdığımızda aşağıdaki pencere ekrana gelir.

3. Tanımlama Listeleri

Bu listelemede kullanılan etiketleri şu şekildedir.; <dl>...</dl> , <dd>...</dd> , <dt>...</dt>

Listenin maddelerini belirtmek için <li> etiketinin yerine <dd> ve <dt> etiketleri yazılır. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listede ise <dl>... </dl> etiketleri kullanılır. Yine parametre olarak <dl> etiketi içinde compact ifadesi kullanılmaktadır..

Aşağıdaki örnek kodları ve sonucunu görelim.

View Code HTML

<html>
<head>
<title>Tanımlama  Listeleri</title>
</head>
<body>

<font face="verdana" size="4" color="red">Neler öğrendik?</font>
<dl compact>
<dt><font size="3" color="blue">Listeler nelerdir?</font>
<dd><font size="2" color="black">HTML belgelerinde 
      3 çeşit liste kullanılmaktadır</font>
<dt><font size="3" color="blue">Sıralı listeler </font> 
<dd><font size="2" color="black">Rakam veya harf yada her ikisini 
      içiçe kullanarak oluşturulan listelerdir</font>
<dt><font size="3" color="blue">Sırasız listeler </font>
<dd><font size="2" color="black">Madde işaretleriyle oluşturulan 
      listelerdir</font>
<dt><font size="3" color="blue">Tanımlama listeleri </font>
<dd><font size="2" color="black">Liste yerine uzun metinlerin 
      okunmasını kolaylaştıran bir araçtır</font>
</dl>

</body>
</html>

Yukarıdaki kodları çalıştırdığımızda aşağıdaki pencere ekrana gelir.

email : info@kodornekleri.com