Html Dersleri – 3 (Listeleme ve Tablo)

Merhabalar..

Html’de listeleme dediğimiz şey bildiğiniz üzere Word’deki listelemenin aynısıdır.

 

Örn:

Peki biz bunu html de nasıl yapacağız? Bunun için <ul> <ol> ve <li> etiketlerimiz var..

ul : Genellikle sıralama niteliğine sahip olmayan öğeler için kullanılır.

ol : Genellikle sıralama, dizilim yapılan içeriklerin listelenmesi için kullanılır.

li : ul ya da ol içinde yer alan listenin her bir öğesini kapsar.

type: Listeleme şekillerini belirler..

type: disc = İçi dolu bir daire görüntüler

type: circle = İçi boş bir daire görüntüler

type: square = İçi dolu ya da boş bir kare görüntüler

 

 

Bu örnekte en basit kullanımı inceleyebilirsiniz.

 

<ol>
<li>İlk içerik</li>
<li>İkinci içerik</li>
<li>Üçüncü içerik</li>
</ol>

Daha detaylı görelim..

 

<ol type="i">
 <li> Birinci öğe...</li>
 <li> İkinci öğe ...
 <ul type="square">
 <li>İkinci öğenin bir öğesi...
 <li>İkinci öğenin başka bir öğesi...
 </ul>
 </li>
 <li> Üçüncü öğe...</li>
</ol>

Sonuç:


İleride Css kullanarak ul ve li sayesinde yan menü açılır menü vb. menüler oluşturabileceğiz..

 

Tablo

 

Word de bildiğimiz tablo yapısıdır. Kod yapısı:

<table> <tr> <td>

table : tablo kodu

tr: satır kodu

td: sütun kodu

 

Örneğimiz:

Border = Kenarlık –> 1 pixel

 

<table border="1">
 <tr>
 <td>1. Satırın 1. Hücresi</td>
 <td>1. Satırın 2. Hücresi</td>
 <td>1. Satırın 3. Hücresi</td>
 </tr>
 <tr>
 <td>2. Satırın 1. Hücresi</td>
 <td>2. Satırın 2. Hücresi</td>
 <td>2. Satırın 3. Hücresi</td>
 </tr>
</table>

Ekran Görüntüsü

 

Yorum yap

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir