HTML İLE LİSTE YAPMAK

Bu dersimizde, web (html) sayfasında sırasız (maddeler) halinde ve sıralamalı listelerin nasıl yapıldığından bahsedeceğim.

İlk olarak sırasız (maddeli) listeleme olarak listelemede Güneş Sistemimizde bulunan gezegenlerin listelenmesi yaparak başlayalım.
Listeleme biçimlerini tamamını görebilmemiz için 10 ayrı biçimde listeleme örneklerine bir atalım, listelenecek kelime veya cümleleri <>...</ > tagları içine yazacağımız liste belirleyici kodları kullanarak oluşturacağız örnek olarak <li>kelime</li> tagı gibi, burada tagların içine yazacağımız sıralama belirleyici kodları yazmak yerine aşağı tabloda sol sutunda yazılan taglar ve sağ sutunda da sıralama örneğini bilgilerinize sunuyorum.

Sizde uygulama yapmak üzere, bir Noteped (metin belgesi) açarak sayfanın baş tarafına her web sayfasında standart kullanacağımız aşağıdaki başlangıç kodunu kopyalayıp yapıştırın.

Sonra aynı sayfaya aşağıda sol sutunda verdiğim kodları <body>.. </body> etiketi arasına yapıştırarak sağ sutundaki web görüntüsünü alalım,
İsterseniz tüm kodları alt alta yapıştırarak sizde deneyiniz. Unutmayınız ki sloganımız (Deneyim En İyi Öğretmendir.)

LİSTELEME KODLARI

LİSTE WEB GÖRÜNTÜSÜ
Standart madde imi biçimi listeleme

<li>Merkür</li>
<li>Venüs</li>
<li>Dünya</li>
<li>Mars</li>
  • Merkür
  • Venüs
  • Dünya
  • Mars
    		•
    İçi Boş yuvarlak madde imi İçin "circle" tanımı

    <ul type="circle">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ul>
    • Merkür
    • Venüs
    • Dünya
    • Mars
    İçi dolu kare madde imi için "square" tanımı

    <ul type="square">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ul>
    • Merkür
    • Venüs
    • Dünya
    • Mars
    Girinti standart madde imi için "disc" tanımı

    <ul type="disc">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ul>
    • Merkür
    • Venüs
    • Dünya
    • Mars
    Standart numaratik madde imi listeleme

    <ol>
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ol>
    1. Merkür
    2. Venüs
    3. Dünya
    4. Mars
    Standart alfabetik madde imi listeleme

    <ol type="a">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ol>
    1. Merkür
    2. Venüs
    3. Dünya
    4. Mars
    Büyük harf alfabetik madde imi Listeleme

    <ol type="A">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ol>
    1. Merkür
    2. Venüs
    3. Dünya
    4. Mars
    Romen rakamı madde imi Listeleme

    <ol type="I">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ol>
    1. Merkür
    2. Venüs
    3. Dünya
    4. Mars
    Arzu edilen sayıdan başlayan madde imi listeleme
    Örneğimizde 5. maddeden başlattık.(start="5")

    <ol type="I" start="5">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ol>
    1. Merkür
    2. Venüs
    3. Dünya
    4. Mars
    Arzu edilen harften başlayan madde imi listeleme
    Örneğimizde 5. harften başlattık (start="5")

    <ol type="A" start="5">
    <li>Merkür</li>
    <li>Venüs</li>
    <li>Dünya</li>
    <li>Mars</li>
    </ol>
    1. Merkür
    2. Venüs
    3. Dünya
    4. Mars

    İstediğiniz sonuçları aldıysanız sıralı ve sırasız listeleme etiketlerini anlamışsınız demektir,
    bu dersimizde burada sona erdi...

      

    Copyright © 2018 Hüseyin Tepe