HTML İle Liste Oluşturma

Html İle Liste Oluşturma

HTML İle Liste Oluşturma

HTML İle Liste Oluşturma Nedir?


Bir çoğumuz etiketleri çeşitli dokümanlarda kullanmışızdır. Özellikle kelime işlemci programları kullandıysanız alt alta maddeler halinde listelediğimiz verilere html ile liste oluşturma adı verilir.

HTML de liste ve liste ögelerini belirlemek için çeşitli etiketler ve parametreler kullanarak listeleri oluştururuz.

HTML Liste Etiketleri Nelerdir?

HTML ile liste oluşturmak için < ol > , < ul > ve < dl > etiketleri kullanılır. Bu etiketlere ait çeşitli parametreler ile liste ögeleri belirlenerek düzenlenir. Liste etiketlerimize ait parametreler ise < li >  , < dt > ve < dd > dir.

HTML Liste Türleri Nelerdir?

HTML dokümanlarımızda sıralı liste, sırasız liste ve tanımlama listeleri olmak üzere 3 tip liste vardır.


  • SIRASIZ LİSTE

Html ile sırasız liste oluşturma için kullanacağımız etiket < ul > etiketidir. Unordered list  kelimelerinin kısaltması < ul > etiketi oluşmuştur.

Listemizin ögeleri ise < li > parametresi ile tanımlanır. Şimdi kod editörümüzde adım adım liste oluşturma işlemlerini uygulamalı olarak görelim.

Öncelikli olarak < ul > etiketini açarak sırasız liste oluşturmak istediğimiz bildiriyorum. Ardından < li > etiketi ile bu listede yer almasını istediğim verileri belirleyeceğim.


Html ile sırasız liste

Açılan her < li > parametresi liste elemanı yazıldıktan sonra kapatılmak zorundadır. Her liste verisi ayrı ayrı < li > etiketleri arasında tanımlanmak zorundadır. 

İster her liste elemanı için ayrı ayrı yazalım, istersek de CTRL + D tuş kombinasyonunu kullanarak otomatik olarak çoğaltalım. 

Ben bir kaç kez CTRL + D tuş kombinasyonunu kullanarak kod satırlarımı kopyaladım. 

html li kodu

Şimdi ise sadece liste verisinin olduğu alanı düzenleyeceğim ve HTML belgemi kaydedip tarayıcıda görüntülüyorum. 

html ul kodu

UL etiketi içerisinde type parametresi kullanılabilir. Type parametresi ile liste verisinin sol kısmında yer alan simgenin türü belirlenir. Type parametresi circle, square ve disc değerlerini alabilir. 

 < 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ı belirtebiliriz. 

html type etiketi

  • SIRALI LİSTE


Html ile sıralı liste oluşturmak için kullanacağımız etiket < ol > etiketidir. Ordered list  kelimelerinin kısaltması < ol > etiketi oluşmuştur.
Sıralı liste yapmaya yarayan <ol> etiketi’nin <ul> etiketine göre daha fazla seçeneğe sahiptir.  < ol > etiketi için de  yine  “type” parametresi ile Rakam, Roma Rakamı, Harf gibi başlatma seçenekleri kullanılabilir.
Ö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.
Listemizin öğeleri ise < li > parametresi ile tanımlanır. Şimdi kod editörümüzde adım adım liste oluşturma işlemlerini uygulamalı olarak görelim.

Öncelikli olarak  < ol > etiketini açarak sıralı liste oluşturmak istediğimiz bildiriyorum. Ardından < li > etiketi ile bu listede yer almasını istediğim verileri belirleyeceğim.

html ile sırasız liste


Şimdi ise start parametresini de kod alanımızda ilave ederek kullanımını görelim. 

html liste oluşturma



  • TANIMLAMA LİSTELERİ

Tanımlama listeleri aslında kelime işlemci programlarında da sık sık kullandığımız iç içe listelerdir. Herhangi bir liste ögesinin alt maddeleri ile birlikte listelenmesini istediğim zamanlarda kullandığım liste biçimidir. 

Şimdi HTML kod editörümüzde uygulamalı olarak html ile tanımlama listesi oluşturma kullanımını görelim. 

html kodu ile liste oluşturma

Güncel bilgiler için instagram sayfamızı takip etmeyi unutmayın.