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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body> <p> Gerçek <b>tereyağı</b> nasıl anlaşılır?</p> <ol> <li>Oda sıcaklığında tamamen erimez</li> <li>Suyun içinde tek parça halinde çözünür</li> <li>Terayağı rengi sarı yada beyaz olabilir</li> </ol> <p>Ölmeden önce bunları yapmak isterdim.</p> <ul> <li>Ayı ziyatet etmek</li> <li>Maratonda geriye doğru koşmak</li> <li>Bill Gates ile iki el tavla oynamak</li> </ul> </body> |
Çıktı:
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.
type | Etkisi | type | Etkisi |
a | a. b. c. | square | içi dolu kare |
A | A. B. C. | disk | içi dolu disk |
i | i. ii. iii. | circle | içi boş daire |
I | I. II. III. |
HTML Liste Örnekleri 2:
1 2 3 4 5 6 7 8 9 10 | <body> <p> Bunu biliyor muydunuz: </p> <ol type="A"> <li>Naim Süleymanoğlu kendi ağırlığının 3 katının 10kg fazlasını kaldıran tek insandır.</li> <li>Soluduğumuz havanın %80'i denizlerde oluşur.</li> <li>Sinek kuşu saniyede 80 kez kanat çırpabilir.</li> </ol> </body> |
Çıktı:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <p> Baştan başlayalım: </p> <ol> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> <p>Şimde tekrar sıralayalım</p> <ol start="5"> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> |
Çıktı:
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <p> Baştan başlayalım: </p> <ol type="A"> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> <p>Şimde tekrar sıralayalım</p> <ol type="A" start="4"> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> |
Çıktı:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <p> Baştan başlayalım: </p> <ol> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> <p>Şimde tekrar sıralayalım</p> <ol reversed> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> </body> |
Çıktı:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <body> <p> Baştan başlayalım: </p> <ol> <li>Elma</li> <li>Armut</li> <li>Portakal</li> <li>Biber</li> <li>Kabak</li> <li>Lahana</li> </ol> <p>Şimde tekrar sıralayalım</p> <ol reversed> <li>Elma</li> <li>Armut</li> <li>Portakal</li> <li value="20">Biber</li> <li>Kabak</li> <li>Lahana</li> </ol> </body> |
Çıktı:
İç İç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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <p>HTML Dersleri:</p> <ol> <li value="7">Linkler</li> <li>Resimler</li> <li>Listeler <ol type="i"> <li>Açıklama</li> <li>Liste Tanımlama</li> <li>İç İçe Liste Kullanımı</li> </ol> </li> <li>Tablolar</li> </ol> </body> |
Çıktı:
HTML Liste Örnekleri 8: İç içe sıralı ve sırasız liste kullanımı örnekleri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <body> <ol> <li>İstanbul <ol type="i"> <li>Adalar</li> <li>Avcılar</li> <li>Bahçelievler</li> <li>Bakırköy</li> </ol> </li> <li>Ankara <ul type="disc"> <li>Ulus</li> <li>Çankaya</li> </ul> </li> <li>İzmir <ul> <li>Karşıyaka</li> <li>Göztepe</li> </ul> </li> <li>Eskişehir</li> </ol> </body> |
Çıktı:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <p> Bazı tanımlar: </p> <dl> <dt> İnternet</dt> <dd> Sınıflarınızı başarısız olmanızın nedeni. </dd> <dt> Yarın </dt> <dd> İnsan verimliliğinin ve motivasyonunun% 99'unun depolandığı mistik bir yer. </dd> <dt> Ahtapot </dt> <dd> Sekiz bacağı olan bir kedi. </dd> </dl> </body> |
Çıktı:
Diğer HTML Liste Örnekleri
HTML Liste Örnekleri 10: Liste başındaki işareti değiştirme
1 2 3 4 5 6 7 8 9 10 | <body> <p>Sağlık için Meyve Önemli:</p> <ul style="list-style-image:url(plus.png);"> <li>Elma</li> <li>Mandaline</li> <li>Çilek</li> </ul> </body> |
Çıktı:
HTML Liste Örnekleri 11: Liste başındaki işaretleri kaldırma
1 2 3 4 5 6 7 8 9 10 | <body> <p>Sağlık için Meyve Önemli:</p> <ul style="list-style:none;"> <li>Elma</li> <li>Mandaline</li> <li>Çilek</li> </ul> </body> |
Çıktı:
HTML Liste Örnekleri 12: İç içe liste örnekleri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <body> <h1>Bugün Yapılacaklar</h1> <ol> <li>Kediyi Besle <ul> <li>Kaseyi temizle</li> <li>Kedi mamasını aç</li> <li>Kuru ve yaş mamayı karıştır</li> <li>Zil kullanarak Boncuk'u çağır</li> </ul> </li> <li>Arabayı Yık <ul> <li>Araç içini süpür</li> <li>Araç dışını yık</li> <li>Araç dışını kurula</li> </ul> </li> <li>Market Alışverişi Yap <ul> <li>Ekmek al</li> <li>Balık al</li> <li>Limon al</li> <li>Mısır unu al</li> </ul> </li> </ol> </body> |
Çıktı:
Bu yazıda HTML Liste kavramı ile ilgili çeşitli zorluklarda örnekler yaptık ve açıkladık.
1 Yorum