Html Etiketleri 4 (Listeleme Çeşitleri)
Html’ de 3 çeşit listeleme yöntemi bulunmaktadır.
1.Sıralı Listeleme(ol etiketi): Ordered List yani sıralı liste anlamına gelen bu etiket verilen maddeleri harf, rakam veya herhangibir işarete göre sıralama yapar. Genel kullanımı:
<ol type=1>
<li>Birinci madde
<li>ikinci madde
</ol>
örneğimizi hemen bir html dosyasının içerisinde kullanalım:
<head>
<title>Sıralı Listeler</title>
</head>
<body>
<ol type=1>
<li>Birinci madde
<li>ikinci madde
</ol>
</body>
</html>
Böylesi bir html kodunun çıktısı aşağıdaki şekilde olacaktır.
- Birinci madde
- ikinci madde
Burada type bileşeni listelemenin tipini belirlemede kullanılır. Alabileceği farklı değerler tablosu aşağıdaki gibidir.
Türü Sıralama
1 Onluk tabanda numaralama (1,2,3,4,…)
i Küçük rakamlarla romen sayıları (i,ii,iii,iv,…)
I Büyük rakamlarla romen sayıları (I,II,III,IV,…)
a Küçük harflerle alfabetik (a,b,c,…)
A Büyük harflerle alfabetik (A,B,C,…)
İpucu: Listelemeleri iç içe de yapabiliriz. Aşağıdaki örneği inceleyin.
<head>
<title>Sıralı Listeler</title>
</head>
<body>
<strong>bölümler</strong>
<ol type=i>
<li>Elektronik
<li>Tesisat
<li>Bilgisayar
<ol type=a>
<li>Veritabanı Programlama
<li>Grafik Animasyon
<li>Ağ İşletmenliği
<li>Açık Kaynak İşletim Sistemleri
</ol>
</ol>
</body>
</html>
böylesi bir html kodunun çıktısı aşağıdaki gibi olacaktır:
bölümler
- Elektronik
- Tesisat
- Bilgisayar
- Veritabanı Programlama
- Grafik Animasyon
- Ağ İşletmenliği
- Açık Kaynak İşletim Sistemleri
Evet örnekten de anlaşılacağı gibi listeleri iç içe yani gömülü biçimdede kullanabiliriz.Hemen ikinci liste tipimizi anlatalım.
2-Sırasız Listeleme(ul etiketi): Unordered list yani sırasız listelemede listeleme işlemi adı üzerinde bir sıra verilmeden sadece maddeler halinde listelenmesi yöntemidir.Asılında kullanımı sıralı listelerle aynıdırda diyebiliriz.
Genel Kullanımı:
<ul type=disc>
<li>birinci öğe
<li>ikinci öğe
</ul>
örneğimizi hemen bir html dosyasının içerisinde kullanalım:
<head>
<title>Sırasız Listeler</title>
</head>
<body>
<ul type=disc>
<li>Birinci madde
<li>ikinci madde
</ul>
</body>
</html>
Böylesi bir html kodunun çıktısı aşağıdaki şekilde olacaktır.
- Birinci madde
- ikinci madde
Burada type bileşeni listelemenin tipini belirlemede kullanılır. Alabileceği farklı değerler tablosu aşağıdaki gibidir.
1. disc – İçi dolu bir daire görüntüler
2. circle – İçi boş bir daire görüntüler
3. square – İçi dolu ya da boş bir kare görüntüler
İç içe listelemeye önceki örneğimizi genişleterek örnek verelim:
<head>
<title>Sıralı Listeler</title>
</head>
<body>
<strong>bölümler</strong>
<ul type=circle>
<li>Elektronik
<li>Tesisat
<li>Bilgisayar
<ul type=disc>
<li>Veritabanı Programlama
<ul type=”square”>
<li>Mysql
<li>Access
</ul>
<li>Grafik Animasyon
<li>Ağ İşletmenliği
<li>Açık Kaynak İşletim Sistemleri
</ul>
</ul>
</body>
</html>
Bu örneğimizin de çıktısı aşağıdaki gibi olacaktır.
bölümler
- Elektronik
- Tesisat
- Bilgisayar
- Veritabanı Programlama
- Mysql
- Access
- Grafik Animasyon
- Ağ İşletmenliği
- Açık Kaynak İşletim Sistemleri
- Veritabanı Programlama
3-Tanımlama Listeleri(dl): Definetion List yani tanımlama listeleri terim ve açıklamaları içeren listeler oluşturmamızı sağlar.
Genel Kullanımı:
<dl>
<dt>Terim veya tanım başlığı</dt>
<dd>Terimveya tanım Açıklaması</dd>
</dl>
Bir örnek verecek olursak:
<dl>
<dt>Teknoloji nedir ?</dt>
<dd>Teknoloji (technoslogos), techne; yapmak ve logos; bilmek anlamına gelmektedir. İnsanoğlunun gereklerine uygun yardımcı alet ve edevatın yapılması ya da üretilmesi için gerekli bilgi ve yetenektir. Bir insan etkinliği olarak teknoloji, insanlığın tarihinde bilim ve mühendislikten önce ortaya çıkmıştır</dd>
</dl>
Yukarıdaki html kodlarını yazarsak ekran çıktımız aşağıdaki gibi olacaktır.
- Teknoloji nedir ?
- Teknoloji (technoslogos), techne; yapmak ve logos; bilmek anlamına gelmektedir. İnsanoğlunun gereklerine uygun yardımcı alet ve edevatın yapılması ya da üretilmesi için gerekli bilgi ve yetenektir. Bir insan etkinliği olarak teknoloji, insanlığın tarihinde bilim ve mühendislikten önce ortaya çıkmıştır.
Evet listeleme etiketlerini de anlatmış olduk.Umarım herkes için yararlı bir doküman olmuştur.İyi Çalışmalar:)
-
xhtml html farkı Html nedir? HTML (Hyper Text Markup Language) sözcüklerinin baş harflerinin bir araya gelmesiyle oluşan -
Php post methodu Formdan post metodu ile gönderilen sayı kadar tabloda satır açmaya yarayan kod örneği: (5
About Author