Python Kod

  1. Anasayfa
  2. »
  3. Genel
  4. »
  5. HTML Listeleme Örnekleri

HTML Listeleme Örnekleri

admin admin - - 8 dk okuma süresi
156 0

Bu makalede HTML’de listeleme işlemlerini gösteren örnekler yer almaktadır.

Sıralı Liste

Sıralı liste oluşturmak için HTML’de `

    ` etiketi kullanılır. Bu etiketin içinde her bir liste elemanı `

  1. ` etiketiyle belirtilir. Örneğin, aşağıdaki kod ile HTML’de sıralı bir liste oluşturabilirsiniz:

    1. İlk liste elemanı
    2. İkinci liste elemanı
    3. Üçüncü liste elemanı

    Yukarıdaki kodu kullanarak tarayıcıda aşağıdaki gibi bir sıralı liste görüntülenecektir:

    1. İlk liste elemanı
    2. İkinci liste elemanı
    3. Üçüncü liste elemanı

    Her bir liste elemanı, `

  2. ` etiketiyle tanımlanır. Bu etiketin içerisinde liste elemanının içeriği yer alır. Sıralı listelerde numaralar otomatik olarak tanımlanır ve listede sıra numaralarıyla görüntülenir. Örneğin, yukarıdaki örnekte ilk liste elemanı sıra numarası 1, ikinci liste elemanı sıra numarası 2, üçüncü liste elemanı ise sıra numarası 3 ile gösterilmektedir.

    Sıralı listeler genellikle sıralı bilgi veya adımların gösterimi için kullanılır. Örneğin, bir reçetenin maddelerini liste halinde göstermek veya numaralı adımlarla yapılması gereken bir işlemi açıklamak için sıralı listeler tercih edilebilir.

    Numarasız Liste

    =Numarasız bir liste oluşturmak için <ul> etiketi kullanılır ve her bir liste elemanı yine <li> etiketiyle belirtilir.

    Numarasız liste, HTML’de listeleme işlemleri için önemli bir yapıdır. Bu liste türü, sıralı bir şekilde numaralandırılmadan sadece maddelerin sunulmasını sağlar. Numarasız liste oluşturmak için <ul> etiketi kullanılır ve her bir liste elemanı <li> etiketiyle belirtilir.

    Örneğin, bir alışveriş listesi oluşturmak istediğinizi düşünelim. Kahve, çay, ekmek, tereyağı ve peynir gibi ürünleri belirtmek istediğinizde numarasız liste yapısını kullanabilirsiniz. Bunun için <ul> etiketiyle bir liste başlatılır ve her bir ürün <li> etiketiyle ayrı bir liste elemanı olarak eklenir. Sonuç olarak, kullanıcılarınıza liste şeklinde bu ürünleri sunabilirsiniz.

    Numarasız listeler görsel olarak sıralama gerektirmeyen, ancak mantıksal bir gruplama veya kategorizasyonu temsil eden maddelerin sunulması için oldukça kullanışlıdır. HTML’de bu liste yapısını kullanmak, içeriği düzenli ve okunabilir hale getirirken aynı zamanda sayfanın yapısal bütünlüğünü korumanızı sağlar.

    Gömülü Liste

    Gömülü Liste

    Bir liste içinde başka bir liste oluşturmak için gömülü liste yapısı kullanılır. İç içe geçmiş ‘<ul>‘ ve ‘<ol>‘ etiketleriyle bu yapı oluşturulur. Gömülü liste, alt liste olarak da adlandırılır ve birden fazla seviyede listeleme yapılmasını sağlar. Bu yapı, belgenin hiyerarşik bir düzen içinde sunulmasını sağlar ve bilgilerin anlaşılabilirliğini arttırır.

    Sıralı Liste Numarasız Liste
    1. Birinci madde
    2. İkinci madde
    3. Üçüncü madde
    • İlk nokta
    • İkinci nokta
    • Üçüncü nokta

    Gömülü listeler, iç içe kullanılarak daha karmaşık bir yapı oluşturabilir. Aşağıdaki örnek, hem sıralı listeyi hem de numarasız listeyi gömülü olarak kullanmaktadır:

    1. Birinci madde
    2. İkinci madde
      • Alt nokta 1
      • Alt nokta 2
    3. Üçüncü madde

    Gömülü listeler, belgenin yapısını daha düzenli ve okunabilir hale getirirken, bilgilerin hiyerarşik olarak sunulmasını sağlar. Bu şekilde, kullanıcılar daha iyi bir deneyim yaşar ve aradıkları bilgilere daha kolay erişebilir.

    Çok Düzeyli Gömülü Liste

    Çok düzeyli gömülü listeler, birden fazla seviyeli listeler oluşturmak için kullanılır. Bu tür bir liste oluştururken her düzeydeki liste için ayrı <ul> veya <ol> etiketi kullanılır. İlk düzey liste için <ul> veya <ol> etiketi kullanılırken, iç içe geçen listeler için her bir seviye için ayrı <ul> veya <ol> etiketi eklenir.Bir örnekle açıklamak gerekirse, aşağıdaki şekilde bir çok düzeyli gömülü liste oluşturulabilir:

    • Seviye 1, Öğe 1
    • Seviye 1, Öğe 2
    • Seviye 1, Öğe 3
      • Seviye 2, Öğe 1
      • Seviye 2, Öğe 2
      • Seviye 2, Öğe 3
        • Seviye 3, Öğe 1
        • Seviye 3, Öğe 2

    Bu örnekte, ilk düzey liste için <ul> kullanılırken, ikinci ve üçüncü düzey listeler için <ul> etiketi kullanılmıştır. Bu şekilde, her seviyedeki öğeleri belirlemek ve görsel olarak açık bir şekilde hiyerarşiyi göstermek mümkündür.

İlgili Yazılar

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir