Main Title

HTML’de liste örnekleri oluşturmak ve kullanmak oldukça önemlidir. Listeler, belgelerin düzenini sağlamak ve içeriği daha anlaşılabilir hale getirmek için kullanılır. HTML, sıralı listeler, sırasız listeler, defter listeler ve iç içe geçmiş listeler gibi çeşitli liste türlerini destekler. Bu liste türlerini birlikte inceleyelim:

Sıralı listeler, numaralandırılmış bir yapıda elemanları sıralamak için kullanılır. HTML’de sıralı listeler oluşturmak için <ol> etiketi kullanılır. Öğelerin sıralama şeklini belirtmek için <li> etiketi kullanılır. Örneğin:

<ol>   <li>Meyve</li>   <li>Sebze</li>   <li>Et</li></ol>

Bu kod, bir sıralı liste oluşturur ve “Meyve”, “Sebze” ve “Et” öğelerini numaralandırarak sıralar.

Sırasız listeler, madde işaretleriyle öğelerin sıralandığı bir yapıdır. HTML’de sırasız listeler oluşturmak için <ul> etiketi kullanılır. Öğelerin sıralanmasını sağlamak için yine <li> etiketi kullanılır. Örneğin:

<ul>   <li>Elma</li>   <li>Armut</li>   <li>Portakal</li></ul>

Bu kod, sırasız bir liste oluşturur ve “Elma”, “Armut” ve “Portakal” öğelerini madde işaretleriyle sıralar.

HTML’de liste örnekleri kullanmak, içeriğin organize edilmesine yardımcı olur ve kullanıcıların bilgileri daha kolay anlamasını sağlar.

Sıralı Listeler (Ordered Lists)

Sıralı Listeler (Ordered Lists)

HTML’de sıralı listeler belirli bir sıra veya numara düzeniyle bir dizi farklı öğeyi göstermek için kullanılır. Sıralı listeler, öğelerin birbirinden bağımsızlığını korurken, sıralı bir şekilde sunulmasını sağlar. Sıralı liste oluşturmak için <ol> etiketi kullanılır ve her bir öğeyi temsil etmek için <li> etiketi kullanılır.

Örnek bir HTML sıralı listesi aşağıdaki gibi olabilir:

<ol>  <li>Elma</li>  <li>Armut</li>  <li>Portakal</li></ol>

Bu liste aşağıdaki gibi görünecektir:

1. Elma
2. Armut
3. Portakal

Sıralı listelerin görüntüsü tarayıcıya bağlı olarak değişebilir. CSS ile listelerin numerik düzenini veya işaretlerini özelleştirmek mümkündür. Sıralı listeler, makaleler, blog yazıları ve içeriklerin okunabilirliğini ve düzenini artırmak için sıkça kullanılır.

Sıralı listelerin yanı sıra sırasız listeler, gömülü listeler ve defter listeler gibi farklı listeleme şekilleri de HTML’de mevcuttur. Her liste türü farklı bir amaçla kullanılır ve içeriklerin düzenli ve anlaşılır bir şekilde sunulmasını sağlar.

Sırasız Listeler (Unordered Lists)

HTML’de sırasız listeler, belirli bir sıralama olmaksızın öğelerin bir listesini oluşturmak için kullanılır. Sırasız listeler, kullanıcıya bilgileri daha düzenli ve anlaşılır bir şekilde sunabilmenin önemli bir yoludur.

Sırasız listeler oluşturmak için HTML’de

etiketi kullanılır.
etiketi, listeye ait öğeleri tanımlamak ve düzenlemek için kullanılan bir etikettir. Sırasız listenin içindeki her bir öğe ayrıca
• etiketi ile tanımlanır.

  Örneğin, bir alışveriş listesi oluşturmak istediğinizi düşünelim. Bu listeyi sırasız bir liste olarak göstermek için aşağıdaki HTML kodunu kullanabilirsiniz:

  <ul>  <li>Ekmek</li>  <li>Süt</li>  <li>Yumurta</li>  <li>Meyve</li></ul>

  Bu kodu tarayıcınızda görüntülediğinizde, sırasız bir liste şeklinde görünen alışveriş listesini göreceksiniz. Her bir öğe, bir madde işareti ile başlayacak ve ayrı bir satırda listelenecektir.

  Sırasız listeler ayrıca nested listeler oluşturmak için de kullanılabilir. Yani bir sırasız listenin içinde başka bir sırasız liste oluşturabilirsiniz. Bu şekilde daha derin ve hiyerarşik bir yapı oluşturabilir ve ilgili öğeleri daha düzenli bir şekilde gösterebilirsiniz.

  Unordered lists are a great way to present information in a clear and organized manner without a specific order. By using the

  tag in HTML, you can create unordered lists and use the
  • tag to define each item in the list. Whether it’s a simple grocery shopping list or a complex hierarchy of nested lists, unordered lists offer flexibility and readability to your content.

    Gömülü Listeler

    Gömülü Listeler

    Sıralı veya sırasız listelerin içinde başka bir liste oluşturmanın nasıl yapıldığını anlamak, HTML’de liste öğelerini kullanma becerilerinizi genişletecektir. Bu, içeriklerinizi daha düzenli ve okunabilir hale getirmenize yardımcı olur. Gömülü listeler, bir listeyi başka bir listeye yerleştirerek oluşturulur.

    Bir sıralı liste içinde yeni bir sırasız liste oluşturmak isterseniz,

    etiketini kullanmalısınız. Öncelikle sıralı listeyi
    ve

    etiketleri arasına yazmalısınız. Ardından, sırasız listenin her öğesini

    • ve

    etiketleri arasında tanımlamalısınız. Bu şekilde, bir sıralı listeye gömülü bir sırasız liste oluşturabilirsiniz.

    Örneğin:

    <ol>   <li>Ana liste öğesi 1</li>   <li> Ana liste öğesi 2      <ul>         <li>Gömülü liste öğesi 1</li>         <li>Gömülü liste öğesi 2</li>      </ul>   </li>   <li>Ana liste öğesi 3</li></ol>

    Aynı şekilde, bir sırasız liste içine bir sıralı liste yerleştirebilirsiniz. İlk olarak, sırasız listeyi

    ve

    etiketleri arasına yerleştirin. Ardından, sıralı listenin her öğesini

    • ve

    etiketleri arasında tanımlayın. Böylece, bir sırasız listeye gömülü bir sıralı liste ekleyebilirsiniz.

    Örneğin:

    <ul>   <li>Ana liste öğesi 1</li>   <li> Ana liste öğesi 2      <ol>         <li>Gömülü liste öğesi 1</li>         <li>Gömülü liste öğesi 2</li>      </ol>   </li>   <li>Ana liste öğesi 3</li></ul>

    Gömülü listeler kullanarak, karmaşık ve hiyerarşik bilgileri daha iyi organize edebilirsiniz. Listeleri düzenlemek için

    ,
    ,
    1. etiketlerini kullanmaktan çekinmeyin!

       Gömülü Sıralı Listeler

       Gömülü listeler, bir liste içinde başka bir liste oluşturmanın bir yoludur. Sıralı listelerin içinde sıralı listeler oluşturmak için

       etiketi kullanılır. Bu şekilde, iç içe geçmiş listeler oluşturulabilir ve iç listeye yeni bir seviye eklenir.

       Örnek bir gömülü sıralı liste şu şekilde oluşturulabilir:

       Sıralı Liste 1	Öğe 1 Öğe 2 Öğe 3
       Sıralı Liste 2	Öğe 1 Öğe 2 Öğe 3

       Bu örnekte, birinci sıralı liste içinde ikinci bir sıralı liste oluşturulmuştur. Bu şekilde, içinde daha fazla öğe bulunan daha karmaşık bir liste oluşturabilirsiniz.

       Gömülü sıralı listeler, düzenli ve hiyerarşik bir görünüm sağlamak için kullanılabilir. Bu, içeriğin daha iyi anlaşılmasını sağlayabilir ve okuyucuların bilgileri daha kolay takip etmelerini sağlayabilir.

       Gömülü Sırasız Listeler

       Gömülü Sırasız Listeler

       Gömülü listeler, başka bir listenin içinde yer alan listelerdir. Bu tür bir yapının oluşturulması, iç içe geçmiş ve daha ayrıntılı bilgi sunmayı sağlar. HTML’de gömülü sırasız listeler oluşturmak için <ul> ve <li> etiketlerini kullanırız.

       Örneğin, bir alışveriş listemiz olduğunu düşünelim. Ana alışveriş listesinin altında, içerisinde farklı kategorilerdeki ürünlerin yer aldığı alt listeler oluşturmak isteyebiliriz. Bu durumda gömülü sırasız listeler bize büyük bir kolaylık sağlar.

       Meyveler Elma Armut Portakal Sebzeler Ispanak Havuç Domates Atıştırmalıklar Cips Çikolata Kuruyemiş

       Görüldüğü gibi, ana alışveriş listesinin altında gömülü sırasız listeler kullanarak meyveler, sebzeler ve atıştırmalıklar gibi farklı kategoriler altında ürünleri düzenlemek mümkün hale gelir. Bu sayede alışveriş yaparken hangi ürünleri alacağımızı daha kolay bir şekilde belirleyebiliriz.

       Özetle, gömülü sırasız listeler, iç içe geçmiş listeler oluşturarak daha fazla bilgi sunmayı sağlar. Bu listeleri oluşturmak için <ul> ve <li> etiketlerini kullanırız. Alışveriş listesi örneği gibi durumlarda gömülü sırasız listelerin kullanımı oldukça faydalı olabilir.

       Defter Listeler (Definition Lists)

       Defter listeler (Definition Lists), HTML’de tanım listelerinin oluşturulduğu ve kullanıldığı bir yapıdır. Bu liste türü, bir anahtar kelimenin veya terimin karşılığı olan açıklama veya tanımını içeren bir yapının oluşturulmasına olanak tanır.

       Bir defter listesi oluşturmak için HTML’de <dl> etiketi kullanılır. Bu etiket, tanım listesinin başlangıcını işaretler. Ardından, <dt> etiketi kullanılarak anahtar kelime veya terim tanımlanır. Anahtar kelimenin hemen sonra <dd> etiketi ile açıklama veya tanım yazılır. Bu şekilde <dt> ve <dd> etiketleri çiftleri arasında tanımlar ve açıklamalar yer alır.

       Örnek olarak, bir defter listesi oluşturmak istediğimizi varsayalım. Anahtar kelime “HTML” olsun ve açıklama olarak “Hypertext Markup Language” kullanalım. Bu durumda, <dl> etiketiyle tanım listesini başlatırız. Ardından, <dt> etiketiyle “HTML” anahtar kelimesini tanımlarız. <dd> etiketiyle de “Hypertext Markup Language” açıklamasını yazabiliriz. Bu şekilde HTML’de bir defter listesi oluşturmuş oluruz.

       Defter listeler, özellikle terimlerin ve açıklamaların bir arada olduğu durumlarda kullanışlıdır. HTML sayfalarında veya web sitelerinde genel terimlerin veya kavramların tanımlanması için defter listeleri sıklıkla kullanılır.

       HTML’deki defter listeleri, sayfanın hiyerarşik yapısını vurgulamak ve kullanıcılara daha anlaşılır bir içerik sunmak için kullanılabilir. Bu sayede kullanıcılar, çeşitli terimlerin tanımlarına ve açıklamalarına kolayca erişebilir ve anlamlarını daha iyi anlayabilirler.

       Açıklamalı Listeler (Nested Lists)

       HTML’de iç içe geçmiş listeler oluşturmak ve kullanmak oldukça kolay bir işlemdir. Açıklamalı listeler, yani iç içe geçmiş listeler, diğer listelerin içine yerleştirilen ve daha fazla ayrıntı sağlayan listelerdir. Bu tür listelerin kullanımı sıklıkla bilgi veya açıklama vermek amacıyla tercih edilmektedir.

       Açıklamalı listeler oluşturmak için öncelikle bir ana listede sıralı veya sırasız bir liste oluştururuz. Ardından, bu ana liste içindeki her liste elemanının yanında bir alt liste oluşturarak açıklamaları ekleyebiliriz. Alt listeyi oluşturmak için

       veya
       etiketlerini kullanabiliriz.

       HTML kodunda açıklamalı bir liste oluşturmak için şu adımları izleyebilirsiniz:

       1. İlk olarak, ana listenin bulunduğu
          veya
          etiketini açın.
          1. Sonra, her liste elemanının yanında bir alt liste oluşturmak için
             veya
             etiketini kullanın.
             1. Alt listenin içine eklemek istediğiniz açıklamaları
             2. etiketi ile ekleyin.
             3. Son olarak, alt listenin kapanışını yapmak için

             veya

          etiketini kullanın.

       Bu şekilde iç içe geçmiş listeler oluşturarak daha detaylı ve açıklamalı bir yapıya sahip olabilirsiniz. Açıklamalı listeler, kullanıcıların okunabilirlik ve bilgi alışverişi açısından daha iyi bir deneyim yaşamalarını sağlayabilir.

       Gömülü Sıralı ve Sırasız Listeler

       Birbirinin içinde geçmiş sıralı ve sırasız listeler, HTML’de oldukça kullanışlı bir özelliktir. Bu listeler, bir listenin içinde başka bir liste oluşturmayı sağlar. Öncelikle, sıralı bir liste oluştururken

       etiketi kullanılır. Bu etiketin içine
       1. etiketi ile maddelemeler eklenir. Ardından, iç içe geçmiş bir sırasız liste eklemek istiyorsak,
          etiketi kullanılır. Bu etiketin içinde de yine
          • etiketi ile maddeler eklenir. Örneğin, bir restoran menüsünü listelemek istediğimizi düşünelim. İlk olarak ana yemekleri sıralı bir liste olarak oluştururuz. Bu listeye
            etiketi ile başlar ve her ana yemeği
            1. etiketiyle tanımlarız. Sonra, her ana yemeğin içindeki yan yemekleri sırasız bir liste olarak belirtmek için
               etiketini kullanırız. Yan yemeklerin her biri de yine
               • etiketi ile tanımlanır.Bu şekilde, birbirinin içinde geçmiş sıralı ve sırasız listeler oluşturabilir ve HTML sayfalarında düzenli bir şekilde içerik gösterebiliriz. Bununla birlikte, liste içerisinde gömülü olarak sıralı veya sırasız bir liste oluşturmanın kesin bir sınırlaması olmadığı için istediğimiz kadar iç içe geçmiş listeler oluşturabiliriz.

                 Sıralı listeler içinde Sırasız Listeler

                 Sıralı listelerin içinde sırasız listeler oluşturmak oldukça kolaydır ve HTML işaretleri kullanarak yapılabilir. Sıralı bir liste oluşturduktan sonra, herhangi bir sıralı listenin elemanları olarak sırasız bir liste ekleyebilirsiniz. Bu, bilgiyi daha iyi organize etmek ve daha fazla ayrıntı sağlamak için kullanışlı olabilir.

                 Bunun için, sıralı listenin elemanlarının etiketlerini açın ve elemanlara ait sırasız bir liste oluşturun. Sırasız listeyi tamamladıktan sonra, orijinal sıralı listenin etiketlerini kapatmalısınız. Böylece, sırasız liste sadece belirli bir sıralı listenin elemanları olarak görünecektir. Bu yöntem, öğeler arasında hiyerarşi ve ayrım sağlama konusunda büyük ölçüde yardımcı olur.

                 Bir örnek verecek olursak, bir sıralı liste oluşturarak birkaç adımdan oluşan bir reçete yazıyor olabilirsiniz. Daha sonra, her adımın altında açıklamaların bulunduğu bir sırasız liste ekleyebilirsiniz. Bu şekilde, okuyucular hem adımları hem de açıklamaları kolayca takip edebilirler.

                 Adımlar	Açıklamalar
                 Adım 1	Açıklama 1 Açıklama 2 Açıklama 3
                 Adım 2	Açıklama 1 Açıklama 2 Açıklama 3
                 Adım 3	Açıklama 1 Açıklama 2 Açıklama 3

                 Bu şekilde, okuyucularınızın adımları ve açıklamaları kolayca takip etmelerini sağlayabilir ve bilgiyi daha anlaşılır hale getirebilirsiniz. Sıralı listelerin içinde sırasız listeler oluşturmak, içeriğinizi daha organize ve okunabilir hale getirmek için etkili bir yol sağlayacaktır.