HTML Liste Oluşturma

HTML’de çeşitli biçimlerde listeler oluşturmamız mümkündür. Ayrıca html listelerini web sayfalarına menü yaparken de çok sık kullanırız.

HTML’de liste yapımı için ;

< ul > ………. < / ul>    – Listeli Sıralama

< ol > ………. < / ol>    – Sayılı Sıralama

etiketlerini kullanırız.

listenin elemanları için ise;

< li > …..   < / li>

yapılarını kullanabiliriz.

Örnek:

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
<ul>

Önizleme:

• • HTML
  • CSS
  • JS
  • PHP

HTML Liste <ul> ile <ol> Farkı

HTML de listeler numaralandırılmış ve numaralandırılmamış olarak iki farklı şekilde listelenebilmektedir. ol ve ul yapılarıda isimlerini bu ingilizcede bu anlama gelen

Unordered List

Ordered List

kelimelerin baş harflerinden alınmıştır. İngilizce bilenler için bu açıklama ul ve ol yapılarının akılda kalmasını kolaylaştıracaktır.

HTML Sayılı Sıralı Listeleme

Ayrıca listelemeyi sayılı olarak da yapabiliriz bu şekilde yapılan listelerde her eleman ardışık sayı şeklinde ilerleyecektir.;

Örnek:

<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
<ol>

Önizleme:

1. 1. HTML
   2. CSS
   3. JS
   4. PHP

Listeleme Tipini Değiştirme

HTML listelerde listeleme tipini değiştirmek için bazı alternatiflerimiz bulunmaktadır. Bunları < ul > e özel olan list-style-type niteliği ile yapabiliyoruz. Burada yazabilceğimiz stiller;

• disc
• circle
• square
• none

Örnek:

<h3>Disk Şeklinde Listeleme</h3>
<ul style="list-style-type:disc;">
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
<ul>


<h3>Çember Şeklinde Listeleme</h3>
<ul style="list-style-type:circle;">
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
<ul>


<h3>Kare Şeklinde Listeleme</h3>
<ul style="list-style-type:square;">
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
<ul>


<h3>Yalın Şeklinde Listeleme</h3>
<ul style="list-style-type:none;">
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
<ul>

Önizleme:

Disk Şeklinde Listeleme

• • HTML
  • CSS
  • JS
  • PHP

Çember Şeklinde Listeleme

• • • • HTML
      • CSS
      • JS
      • PHP

Kare Şeklinde Listeleme

• • • • • • HTML
          • CSS
          • JS
          • PHP

Yalın Şeklinde Listeleme

• • • • • • • • HTML
              • CSS
              • JS
              • PHP