Anasayfa / HTML / HTML’de Sıralı ve Sırasız Liste

HTML’de Sıralı ve Sırasız Liste

HTML’de Sıralı ve Sırasız Liste

HTML’de elemanları belli bir sıraya göre liste mantığında oluşturmaya yarayan elementler <ul> ve <ol> etiketleridir.Bu iki etiket Sıralı ve sırasız liste olarak elemanlarımızı düzgün bir şekilde oluşturmamızı sağlar.Her zaman olduğu gibi bu etiketlerin İngilizce açıklamalarını da vererek gidelim.

<ul>–>Unordinary List –> Sırasız Liste

<ol>–>Ordinary List –> Sıralı Liste

Tabi bu etiketler Bir listenin Sıralı mı yoksa Sırasız mı olduğunu belirtir.Peki Elemanları nerede ve nasıl tanımlayacağız.İşte burda iki etiketin ihtiyacı olan <li> etiketi devreye giriyor.Her ikisinde de mutlaka bu elemanı kullanmamız gerekiyor.Peki bunun İngilizce açılımı nedir?

<li>–>List item –> Liste Elemanı

Şimdi tek tek gidecek olursak;

1-) <ul> Etiketi : Sırasız Liste yapmaya yarayan bu etiket genel olarak belli bir sıra takip etmeyecek liste elemanlarında ve özellikle Menü yapımında büyük önem teşkil ediyor.

Peki <ul> özelliğinde liste elemanlarında görünüm nasıl olacak işte tam burada daha önceki derslerde anlattğımız parametre konusu devreye giriyor.Burada “type” parametresi ile sırasız listemizin disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare) olup olmadığını belirtiyoruz.

ul type parametreleri
ul type parametreleri

Örnek uygulama:

<html>

<head>

<title>Ordinary List</title>

</head>

<body>

Aylar

<ul>

<li>Ocak</li>

<li>Şubat</li>

<li>Mart</li>

<li>Nisan</li>

<li>Mayıs</li>

<li>Haziran</li>

<li>Temmuz</li>

<li>Ağustos</li>

<li>Eylül</li>

<li>Ekim</li>

<li>Kasım</li>

<li>Aralık</li>

</ul>

</body>

</html>

Yukarıda ki kodlar default(varsayılan) olarak içi dolu daire getirecektir.Peki stili değiştirmek için yapmamız gereken “type” parametresini nereye yazacağız?Bunu tabi ki sırasız liste etiketi olan <ul> etiketinde belirtmemiz gerekiyor.Bunun için <ul type=”square”> yazıldığında <li> etiketine dokunmadan her bir elemanın yanındaki simge içi dolu kare olacaktır.

2-)<ol> Etiketi: Sıralı liste yapmaya yarayan <ol> etiketi’nin <ul>’de olduğu gibi sınırlı simgesi yoktur.Daha fazla seçeneğe sahip olan <ol> etiketi yine  “type” parametresi ile Rakam,Roma Rakamı,Harf gibi başlatma seçenekleri mevcuttur.

Özellikle karışık listeler yaparken “type” parametresine ek olarak “start” parametresi de önemlidir.Bu parametre bize type’ı verilen simge grubunda istediğimiz yerden başlamamızı sağlar yani sıralı listesi “a,b,c,d,e,f…….” Şeklinde giden bir sıralı listede sadece type=”a” dersek direkt sıralı olarak gider.Fakat ben başlatmayı tipi “a” olsun istiyorum ama “d”den başlasın istiyorsam koda start=”4” eklememiz gerekir.

ol type parametresi
ol type parametresi

Örnek uygulama:

<ol>

<li>Pazartesi</li>

<li>Salı</li>

<li>Çarşamba</li>

<li>Perşembe</li>

<li>Cuma</li>

<li>Cumartesi</li>

<li>Pazar</li>

</ol>

3-)Sıralı ve Sırasız liste beraber de kullanılabilir.Bunun için hangisini hangisinin içinde kullancaksam o <li> etiketinden sonra kullanmam gerekir.Aşağıdaki resmi dikkatle inceleyelim.

Karışık ol ve ul etiketleri
Karışık ol ve ul etiketleri

Yukarıdaki yapıyı oluşturmak için aşağıdaki kod bloğunu kullanmamız gerekir.

<ul>

  <li>İçecekler 

    <ol>

      <li>Kola

                <ul>

                  <li>Coca Cola</li>

                 <li>Pepsi</li>

                </ul>

      </li>

      <li>Su</li>

      <li>Çay</li>

    </ol>

  </li>

  <li>Soğuk Yemekler

    <ol>

      <li>Haydari</li>

      <li>Piyazlar</li>

    </ol>

  </li>

  <li>Sıcak Yemekler</li>

  <li>Liste dört</li>

</ul>

 

Hakkında sas7979

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir