Html Liste Oluşturma ( Ul, Ol Ve Dl Etiketi) - Tasarım Ve Yazılım

Trang chủ » Html Iç Içe Listeleme örnekleri » Html Liste Oluşturma ( Ul, Ol Ve Dl Etiketi) - Tasarım Ve Yazılım

Có thể bạn quan tâm

Bu yazımızda html liste oluşturma işlemlerni öğreneceğiz. Html de liste oluştururken ul, ol ve dl etiketleri kullanılır. Html attribute ile de liste elemanlarının önündeki şekilleri değiştirilir.

Sırasız Html Liste Oluşturma ( ul Etiketi )

SıraSırasız liste oluştururken <ul> etiketi ile yapıyoruz. Sırasız olmasından kasıt listedeki elemanların başında 1,2,3.. veya a,b,c.. vb. şeklinde olmaması. Örnek kod kısmı:

<!DOCTYPE html> <html> <body> <h2>İçecek Listesi</h2> <ul> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ul> </body> </html>

Sonucu:

html liste oluşturma

Sırasız liste oluştururken varsayılan olarak liste elemanlarının başında madde imi şeklinde gelir. Eğer bunu değiştirmek istersek CSS ile ya da html attribute ile değişiklik yapabiliriz. Css ile liste elemanlarını düzenlemeyi css derslerimizde yapacağız. Html attribute ile nasıl yapıldığını görelim. Sırasız liste için html attribute:

AttributeOluşan Şekil
disk madde imi şekline ayarlar (varsayılan)
circledaire şekline ayarlar
squarekare şekline ayarlar
noneherhangi bir şekil olmaz

Örnek: Html attribute kısmına “circle” yazalım. Kod kısmı:

<!DOCTYPE html> <html> <body> <ul style="list-style-type:circle;"> //buradaki attribute değeri ile <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ul> </body> </html>

Sonucu:

html liste oluşturma sıralı liste circle

Örnek: Html attribute kısmına “square” yazalım. Kod kısmı:

<!DOCTYPE html> <html> <body> <ul style="list-style-type:square;"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ul> </body> </html>

Sonucu:

html liste oluşturma sıralı liste square

Örnek: Html attribute kısmına “none” yazalım. Kod kısmı:

<!DOCTYPE html> <html> <body> <ul style="list-style-type:none;"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ul> </body> </html>

Sonucu:

html liste oluşturma sıralı liste none

Html Sıralı Liste Oluşturma ( ol Etiketi )

Sıralı listede liste elemanlarının başında 1,2,3.. a,b,c.. vb. değerler bulunur. Varssayılan değer olarak 1,2,3.. şeklinde gelir. Html attribute ile değiştirebiliriz. İki farklı attribute değeri ile değişiklik yapabiliriz. Aşağıdaki tabloda bu değerleri görelim:

type(Attribute)style-list-type (Attribute)Oluşan Şekil
alower-alphaKüçük Harfleri Sıra ile
Alower-alphaBüyük Harfleri Sıra ile
ilower-romanRoma Rakamı Sıra ile(Küçük)
Iupper-romanRoma Rakamı Sıra ile(Büyük)
1 decimal Sayılar sıra ile(1,2,3… gibi)
decimal-leading-zero Sayılar sıra ile(01,02,03..gibi)

Örnek: type=”a” ve “style-list-type:lower-alpha” degerlerinde aynı sonucu aldığımızı görelim.

<!DOCTYPE html> <html> <body> <ol type="1"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ol> </body> </html> <!DOCTYPE html> <html> <body> <ol style="list-style-type:lower-alpha;"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ol> </body> </html>

Sonucu:

sıralı liste a-b-c

Örnek: type=”A” ve “style-list-type:upper-alpha” degerlerinde aynı sonucu aldığımızı görelim.

<!DOCTYPE html> <html> <body> <ol style="list-style-type:upper-alpha;"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ol> </body> </html> <!DOCTYPE html> <html> <body> <ol type="A"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> </ol> </body> </html>

Sonucu:

sıralı liste

Diger attribute değerlerinde de mantık aynı şekildedir.

İç içe Liste Oluşturma

İç içe liste oluştururken liste etiketlerini iç içe yazarız. Örnek Kod:

<!DOCTYPE html> <html> <body> <ul> <li>Süt <ul> <li>İnek Sütü</li> <li>Keçi Sütü</li> </ul> </li> <li>Çay <ul> <li>Yeşil</li> <li>Siyah</li> </ul> </li> <li>Kahve <ul> <li>Sütlü</li> <li>Sütsüz</li> </ul> </li> </ul> </body> </html>

Sonucu:

iç içe liste

HTML Açıklama Listeleri ( dl Etiketi )

Açıklama listeleri, her bir terimin açıklamasını içeren bir terimler listesidir. <dl> etiketi ile oluşturulur. Örnek Kod Yazımı:

<!DOCTYPE html> <html> <body> <h2>Açıklama Listesi</h2> <dl> <dt>Html</dt> <dd>- Köprü Metin İşaretleme Dili</dd> <dt>Css</dt> <dd>- Basamaklı Stil Sayfası</dd> </dl> </body> </html>

Sonucu:

html acıklama listesi

Burada şu soru aklımıza gelebilir; “Bunu sırasız liste ile de yapabilirken neden açıklama listesi diye bir şey var?”. Tarayıcılar etiketlere göre ne olduğunu anlayabildikleri için ayrı etiketle tanımlama gerekiyor. Tarayıcı <dl> etiketini gördüğünde bunun açıklama listesi olduğunu anlıyor.

Başka bir yazımızda görüşmek üzere…

Tweet

Từ khóa » Html Iç Içe Listeleme örnekleri