HTML Liste Örnekleri - Tasarım Kodlama

Trang chủ » Html Iç Içe Listeleme örnekleri » HTML Liste Örnekleri - Tasarım Kodlama

Có thể bạn quan tâm

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.

İçindekiler

Toggle
  • HTML Liste Örnekleri
  • Bir Listenin Görüntülenmesi
  • List type ile Liste Türlerini Değiştirme
  • start Niteliği ile Sıralamayı Değiştirme
  • Sıralamayı Tersten Yapmak için reversed Niteliği Kullanma
  • Sıralamayı Bölme
  • İç İçe Listeler Oluşturma
  • Tanım Listeleri
  • Diğer HTML Liste Örnekleri

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

<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>
12345678910111213141516 <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 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:

<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>
12345678910 <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ı:

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:

<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>
123456789101112131415 <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 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.

<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>
123456789101112131415 <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ı:

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:

<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>
1234567891011121314151617 <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ı:

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:

<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>
1234567891011121314151617181920212223 <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ı:

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:

<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>
1234567891011121314151617 <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 7
HTML liste örnekleri 7

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

<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>
123456789101112131415161718192021222324252627 <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ı:

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:

<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>
12345678910111213 <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ı:

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

<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>
12345678910 <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 10
HTML liste örnekleri 10

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

<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>
12345678910 <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 11
HTML liste örnekleri 11

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

<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>
123456789101112131415161718192021222324252627282930 <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ı:

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.

EtiketlerHTML Basit Liste Örnekleri HTML Etiketleri HTML Liste Örnekleri HTML Listeler Liste Örnekleri

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