5. Ders: Html ile Liste Nasıl Oluşturulur?


Herkese merhaba. Bugün günlük yaşantımızda sürekli kullandığımız bir yapıdan bahsediyor olacağım. Nedir peki bu yapı? Tabiki de liste yapılarından bahsediyorum. Alışverişe gideriz liste, plan yaparız liste oluştururuz kısaca heryerde bunu kullanmaktayız.

Bu kadar içiçe olduğumuz bir yapıyı html ile nasıl oluştururuz?

Burada iki tip liste bulunmaktadır. Bu her iki tipte de eleman eklemek için li etiketi kullanılmaktadır. Şimdi de liste tiplerine bakalım;

  • Sıralı Listeler (ol)
  • Sırasız Listeler (ul)

Sıralı Listeler (ol)

Evet şimdi bu liste yapımızı öğrenelim. Öncelikle bu listeleri nerede kullanılır? Bu liste tipi listede bulunan elemanların birbirine bir üstünlüğü ve/veya sıralaması varsa bu liste bizim için en uygun liste tipi olmaktadır.

Örnek: İki sayının toplamını bulan programın algoritmasını yazalım.

<ol>
   <li>Başla</li>
   <li>x değerini gir:</li>
   <li>y değerini gir:</li>
   <li>toplam=x+y</li>
   <li>toplam yaz</li>
   <li>Bitir</li>
</ol>

Önizleme:

  1. Başla
  2. x değerini gir:
  3. y değerini gir:
  4. toplam=x+y
  5. toplam yaz
  6. Bitir

Yukarıda verilen örnekten anlaşılacağı gibi bu algoritmanın bir sırası olması gerekmektedir. Bu yüzden bu yapıyı kullandık.

Peki herzaman 1, 2, 3…. şeklinde mi liste madde imleri olacak? Tabiki de hayır! Bizler bu madde imlerini değiştirebiliyoruz. Değiştirmek için type=” “ özelliğinden yararlanıyoruz. Madde işaretleri sırasıyla A, a, 1, I ve i olabilmektedir.

Bu listede maddelerin başlangıç indisini değiştirebilmekteyiz. Bu start=”” özelliği ile yapabilmekteyiz.

Sırasız Listeler

Evet şimdi  de bu liste yapımızı öğrenelim. Öncelikle bu listeleri nerede kullanılır? Bu liste tipi listede bulunan elemanların birbirine bir üstünlüğü ve/veya sıralaması yoksa bu liste bizim için en uygun liste tipi olmaktadır.

Örnek: Market Listesi Oluşturalım

<ul>
  <li>Domates</li>
  <li>Mandalina</li>
  <li>Portakal</li>
  <li>Biber</li>
  <li>Şeftali</li>
</ul>

Önizleme:

  • Domates
  • Mandalina
  • Portakal
  • Biber
  • Şeftali

Bu listemizde de bu madde imlerini değiştirebiliyoruz. Değiştirmek için type=” “ özelliğinden yararlandığımızı söylemiştik. Madde işaretleri sırasıyla disc, circle, square ve none olabilmektedir.

Yayınlayan

Fuat ŞENGÜL

Fuat ŞENGÜL Samsun Havza ilçesinde 23.05.1990 da doğdu. Bilgisayar ile lise öğreniminde tanışan yazar Pascal, C/C++, Assembly ve Visual Basic dilleriyle birlikte yazılıma adım attı. 2008 yılında Fırat Üniversitesi Teknik Eğitim Fakültesi Bilgisayar öğretmenliğini kazandı. Öğrenimi sırasında web ve masaüstü yazılımları konusunda projelere imza atan yazar 2012 yılında mezun oldu. Yazar C/C++, C#, Asp.Net, Matlap, Jquery, Css ve Html gibi programlama dillerine hakim ve bu diller ile projeler üretmeye devam etmektedir. Bilişim Teknolojileri öğretmeni olarak görev yapmaktadır.

Bir cevap yazın

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

16 − one =