HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
html add a list item
html add listener
html add list items
html sırasız liste türleri
html sıralı liste
html sıralı liste örnekleri
html sıralı liste oluşturma
html sıralı liste kodu
html sıralı listeleme
html sıralı liste etiketi
html sıralı sırasız listeler
html de sıralı liste oluşturma
html dilinde sıralı liste oluşturmak
html sıralı liste kodu
html sıralı liste örnekleri
html sıralı liste oluşturma
html sıralı listeleme
html sıralı liste etiketi
html de sıralı liste oluşturma
html list ul style
html list types
html list types style
html list type style
html list and types
html ul disc
html list style disc
html ul circle
html ul circle size
html ul square
html square list item

HTML Liste Ekleme(Add a List)

HTML Liste Ekleme(Add a List)
Html
<ul>
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ul>
<ul type="square">
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ul>
<ol>
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ol>
<ol type="a">
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ol>

Web Sayfamıza liste eklemek isteyebilirsiniz. Mesela 'İçecekler' konulu bir yazınız vardır.İçecekleri; kahve, çay, meyve suyu diye liste oluşturabilirsiniz ve bu listedeki elemanlara link vererek ilgili sayfaya yönlendirebilirsiniz.(Link verme dersimize bakabilirsiniz.).Fazla uzatmadan nasıl yaparız ona bir bakalım..

Listeler sıralı ve sırasız liste olarak ikiye ayrılıyor;

1-Sırasız Liste

Sırasız listeler, listelerin başında sayaç bulunmayan yani listemizin sırasını bilemediğimiz simgelerden oluşan listelerdir.

Kullanımı:

<ul>
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ul>

Gördüğünüz bu örnekte listemizde kaç tane eleman olduğunu bilmiyoruz.

Nasıl Yani 3 Tane Ya İşte ?

Tabi üç tane bunda bir yanlışlık yok fakat bu listede gözümüzle bile kaç tane olduğunu görebiliyoruz. Yani bu listede 30-40 tane eleman olsaydı o zaman teker teker saymamız gerekecek bu da hem yorucu hem zaman kaybı.

Peki ya nasıl kolay yoldan kaç tane olduğunu öğreneceğiz?

Bunun için sıralı liste kullanmalısın onu birazdan göstereceğim.

Ama önce sırasız listemizde varsayılan olan tanımlanan "circle" yani yuvarlak simgemizi nasıl değiştirebiliriz ona bir bakalım.Bunun için sırasız liste etiketimiz olan <ul> ye parametre vermemiz gerekecek.

Parametreler

type: Sadece <ul> etiketinde kullanılan bu parametre sırasız listenin elemanlarının simgesini değiştiriyor.Değerleri ise disc(içi dolu yuvarlak), circle (içi boş yuvarlak), square(içi dolu kare) değerlerini alır.

Kullanımı

<ul type="square">
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ul>

2-Sıralı Liste

Sıralı listeler, başlangıçtan bitişe kadar numaralı olan listelerdir ve sizin saymanıza gerek olmadan o kendisi numara verir.

Kullanımı

<ol>
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ol>

Tabi bu numaraların çeşitleri vardır. Bunun için yine aynı parametre yani "type" parametresini kullanacağız.Çeşitler çok olduğu için alt alta yazıyorum.

type değerleri

1: Birden başlayarak değer alır.

A: Büyük harflerle sırasıyla değer alır.

a: Küçük harflerle sırasıyle değer alır.

I: Büyük romen rakamları ile değer alır.

i: Küçük romen rakamları ile değer alır.

Bir örnek yapalım kalanlarını kod editörümde deneyebilirsiniz.

Kullanımı

<ol type="a">
<li>Kahve</li>
<li>Çay</li>
<li>Meyve Suyu</li>
</ol>

Not: Sıralı listelere type parametresi yazmasanız varsayılan olarak birden başlayacaktır.



Paylaş:

Enes KILIÇ
Webmaster