Html Listeleme

html listeleme3

html listeleme3

Html özelliklerini kullanarak sayfamızda listeleme ve sıralama yapmak  oldukça kolaydır..

Html’de listeleme üç farklı şekilde oluşur; 

1) Numaralandırma  ve  Harflendirme ile Listeleme : Listeleyeceğimiz seçenekleri numara ve harfler ile sıralar.  Bu yöntem sıralı olduğu için <ol>..</ol> tag’ı kullanılır.
Eğer numara ile sıralandırmak istiyorsak ;

<html>
<head><title>Numaralandırma</title>

html_ isteleme

html_ isteleme

</head>
<ol>
    <li> Dahiweb</li>

    <li> Dahihost</li>
    <li>Flashoyun</li>
</ol>
</body>
</html>

Harflendirme ile sıralamak istiyorsak ;

<html>                                                          

html listeleme1

html listeleme1

<head><title>Harflendirme</title>
</head>
<ol type=”a”>
   <li>Dahiweb</li>
   <li>Dahihost</li>
   <li>Flashoyun</li>
</ol>
</body>
</html>

şeklinde yazarız.

Uyarı :  Sıralanacak olan ifadelerin başına <li> getirmeyi unutmayınız.


Örnek : 
<html>
 

html listeleme3

html listeleme3

<head><title> Listeler </title>
</head>
<body>
<ol type=”1″>
   <li>DahiWeb</li></ol>
<ol type=”a”>
   <li>Kıssadan Hisse</li>
   <li>Siteye Destek Verenler</li></ol>
   <li>DahiHost</li>
<ol type=”a” start=”3″>
   <li>Domain Sorgulama</li>
   <li>Ucuz Host</li>
</ol>
</body>
</html>

 2)Madde İşareti ile Listeleme: Listeleyeceğimiz seçenekleri madde imler ile sıralar. <ul>..</ul> tag’ı kullanılır. Disc (İçi dolu yuvarlak) , Square ( Kare )  ve  Circle ( İçi boş yuvarlak )  diye 3 maddeye ayrılır. Kullanımı aşağıdaki gibidir.

<html>
<head><title> Listeler </title>

html_listeleme2

html_listeleme2

</head>
<body>
<ul type=”disc”>
   <li>DahiWeb</li>
<ul type=”square”>
   <li>Kıssadan Hisse</li>
   <li>Siteye Destek Verenler</li></ul>
   <li>DahiHost</li>
<ul type=”circle”>
   <li>Domain Sorgulama</li>
   <li>Ucuz Host</li>
</ul>
</body>
</html>

3)Tanımlama ile Listeleme : Bir terimin açıklamasını yapmak için kullanılır. Tanımlanacak olan kelimeler için <dt> tag’ı kullanılır. Tanımlama cümlesi  için <dd> tag’ı kullanılır. Tanımlama listesi için ise <dl> tag’ı kullanılır.

Örnek:
<html>
<head><title> Listeler </title>

html_listeleme4

html_listeleme4

</head>
<body>
 <dl>
<dt>DahiWeb</dt>
   <dd>Bilişimcilerin Otağı</dd>
<dt>FlashOyun</dt>
   <dd>Türkiyenin En Eğlenceli Sitesi</dd>
</dl>
</body>
</html>

Yazar: Ümit

Ümit BAL sitemizde 6 yazı eklemiş...

Share
  • Fatican

    Ya hocam ne Allah razı olsunu ya yapanların eline sağlık ama bukadar basit bir örneği kendin yapamıyorsun asp, aspx, php de ne yapıcaksın sen meslek lisesi okuyorsun sanırım hocam aynısını dreamwear da yaaprsın gösrsel kısmında 😀

  • Caqlar

    vala ellerine sağlık yazılıda cok işe yaradı yine böle bi kodda 100 sözlü aldım allah razı olsun 😀

  • umit.bal053

    Evat Özgür Hoca’da anlatmıştı. Farklı bir açıklamada biz yaptık. Yorumlar için teşekkürler arkadaşlar..

  • güzel anlatım olmuş.

    http://www.dahiweb.com/html-etiketleri-4-listeleme-cesitleri

    bu sayfada da listeleme çeşitlerinin farklı açıklamasını bulabilirsiniz.

  • duhanhas

    ümit kardeşim çok güzel olmuş emeğine sağlık devamını beklerizz…

  • unal_akce

    yazdığın yazıdan bilgilendik teşekkürler

  • ozan kutlu

    oo ümit çok güzel paylaşmışsın teşekkür ederiiizzz..

  • Bengü Özgüngör

    css kullanarak listelemelerdeki yuvarlak veya karelerin yerinde reimde koyabilirsiniz. bizim yazılı sorumuzdu 🙂