HTML Liste Örnekleri – Tasarım Kodlama
HTML

HTML Liste Örnekleri

Bazı içerikler bir listede sunulmak için doğal olarak uygundur. Çoğu kişi de listelerden hoşlanır; çünkü içeriği hızlı bir şekilde taraması ve alması kolaydır. Bu bölümde HTML’de nasıl liste oluşturulacağını örneklerle öğreneceksiniz.

HTML Liste Örnekleri

Bu bölümde oldukça okunaklı örnekler var ama genelde ilk birkaç kısımda öğrendiklerinizden faydalanarak listeleri anlamanız mümkün. Yine de daha fazla fikir edinmek için gerisini gözden geçirmelisiniz.

Bir Listenin Görüntülenmesi

HTML’de iki tür liste vardır. Sıralı listeler (ol), her liste(li) elementinin önünde sıralama ölçütü ile bir liste oluşturur. Sırasız listeler (ul), her liste(li) elementinin önünde bir liste işareti genellikle disk ile gösterilir.

Liste Örnekleri 1

Çıktı:

HTML liste örnekleri 1

HTML liste örnekleri 1

HTML liste örnekleri 1Kod girintisi artık önem kazanmaya başlıyor. Yukarıdaki HTML kodunda, li öğelerini ol ve ul etiketlerinin aksine bir adımda girintili gördüğümüzü görebilirsiniz. Bu yapıyı görmeyi kolaylaştırır.

 

List type ile Liste Türlerini Değiştirme

Sadece ondalık sayılar ve yuvarlak diskler ile sınırlı olsaydık, sıkıcı olurdu. Neyse ki işleri biraz değiştirebiliriz. Bunu nitelik türünü kullanarak yapıyoruz.

typeEtkisitypeEtkisi
aa. b. c.squareiçi dolu kare
AA. B. C.diskiçi dolu disk
ii. ii. iii.circleiçi boş daire
I I. II. III.

HTML Liste Örnekleri 2:

Çıktı:

HTML liste örnekleri 2

HTML liste örnekleri 2

 

start Niteliği ile Sıralamayı Değiştirme

start niteliği ile sıralamayı değiştirmek mümkündür. Aşağıdaki örneğin sıralaması 5. sayıdan başlayıp ileri doğru gitmektedir.

HTML Liste Örnekleri 3:

Çıktı:

HTML liste örnekleri 3

HTML liste örnekleri 3

HTML Liste Örnekleri 4: Sıralamayı D harfinden başlatmak için  ise type=”A” yapmak ve start=”4″ değerini de D için 4 yapmak gerekir.

Çıktı:

HTML liste örnekleri 4

HTML liste örnekleri 4

Sıralamayı Tersten Yapmak için reversed Niteliği Kullanma

Bazı durumlarda sıralama ölçütünü azalan şekilde yapmak isteyebilirsiniz. İşte bunun için reversed  niteliğini kullanabilirsiniz. reversed  ile sıralama azalan şekilde yapılacaktır.

HTML Liste Örnekleri 5:

Çıktı:

HTML liste örnekleri 5

HTML liste örnekleri 5

Sıralamayı Bölme

Sıralamayı bölüp yeniden numaralandırmak mümkün mü diye düşünüyorsanız, bu mümkün olduğunu bilmelisiniz. Bunu value niteliğini istenen liste(li) öğesine ekleyerek yaparsınız.

HTML Liste Örnekleri 6:

Çıktı:

HTML liste örnekleri 6

HTML liste örnekleri 6

İç İçe Listeler Oluşturma

İç içe listeler olması mümkündür. Bu, bir liste öğesinin içine başka bir liste eklediğinizde olur. Aynı tür olmaları gerekmez; örneğin, sıralı bir listede sıralanmamış bir listeye sahip olabilirsiniz.

Bunun yararlı olduğu pek çok yer var. İçindekiler tablosu oluşturmak yaygın bir durumdur.

HTML Liste Örnekleri 7:

Çıktı:

HTML liste örnekleri 7

HTML liste örnekleri 7

HTML Liste Örnekleri 8: İç içe sıralı ve sırasız liste kullanımı örnekleri

Çıktı:

HTML liste örnekleri 8

HTML liste örnekleri 8

Tanım Listeleri

Çok fazla tercih edilmese de bir şeyin tanımını yapmak için tanım listesini kullanabilirsiniz. Başlangıçta kelimeleri ve tanımlarını listelemek niyetindeydi, ancak herhangi bir değer çifti listesi için kullanılabilir.

HTML Liste Örnekleri 9:

Çıktı:

HTML liste örnekleri 9

HTML liste örnekleri 9

 

Diğer HTML Liste Örnekleri

HTML Liste Örnekleri 10: Liste başındaki işareti değiştirme

indirmek için tıklayın

Çıktı:

HTML liste örnekleri 10

HTML liste örnekleri 10

HTML Liste Örnekleri 11: Liste başındaki işaretleri kaldırma

Çıktı:

HTML liste örnekleri 11

HTML liste örnekleri 11

HTML Liste Örnekleri 12: İç içe liste örnekleri

Çıktı:

HTML liste örnekleri 12

HTML liste örnekleri 12

Bu yazıda HTML Liste kavramı ile ilgili çeşitli zorluklarda örnekler yaptık ve açıkladık.

1 Yorum

Yorum bırak