HTML Sırasız Liste

0 111

Sırasız Listeler, web sayfalarında bir dizi öğenin sıralamasız bir şekilde listelenmesi gerektiğinde kullanılır. Bu liste türü, numaralandırılmamış ve öğeler arasında birbirine bağımlılık olmadan sıralanır.

Sırasız liste oluşturmak için HTML‘de kullanılan etiket <ul> dir. Bu etiket, sırasız listenin başlatılacağını ve sonlandırılacağını belirtir. Her öğe için kullanılan etiket ise <li> dir.

Örneğin, bir restoranın menüsünü sırasız liste olarak düşünelim. Sırasız listede, menü öğeleri arasında bir sıralama olmaz, çünkü her öğenin diğerinden bağımsız bir şekilde listelendiği bir liste türüdür.

HTML’de sırasız listenin düzenlenmesi ve stilize edilmesi de mümkündür. CSS kullanılarak sırasız listenin öğeleri arasına boşluk veya çizgi eklenebilir, öğelerin metin rengi veya arka plan rengi değiştirilebilir.

Sonuç olarak, HTML sırasız liste, web sayfalarında listelenmesi gereken öğelerin numaralandırılmadan sıralanması için kullanılan bir liste türüdür. Bu liste türü, menüler, ürün listeleri ve daha birçok alanda kullanılabilir. Sırasız listeler, HTML ve CSS kullanılarak özelleştirilebilir ve görsel olarak daha ilgi çekici hale getirilebilir.

HTML’de Sırasız Liste Nasıl Oluşturulur?

HTML’de sırasız liste oluşturmak oldukça kolaydır. Sırasız listenin başlatılması ve bitirilmesi için kullanılan etiket <ul> dir. Bu etiket, Unordered List (Sırasız Liste) anlamına gelir ve liste öğelerinin bulunacağı bloğun başlangıcını belirtir.

Her öğe için ise <li> etiketi kullanılır. Bu etiket, List Item (Liste Öğesi) anlamına gelir ve sırasız listenin her bir öğesini belirtir.

Örneğin, bir alışveriş sepeti oluşturmak için aşağıdaki kod kullanılabilir:

<ul>
  <li>Elma</li>
  <li>Armut</li>
  <li>Portakal</li>
  <li>Muz</li>
</ul>

Yukarıdaki kod, sırasız liste öğelerinin dört adet meyve isminden oluştuğunu göstermektedir. Her bir meyve ismi <li> etiketi arasına yazılmıştır.

Sırasız listenin öğeleri, varsayılan olarak sol tarafta küçük bir nokta işareti ile işaretlenir. Ancak, CSS kullanarak bu işaretlerin stilini değiştirebilirsiniz. Örneğin, işaretleri yuvarlak bir şekil veya ok şekline dönüştürebilirsiniz.

Sırasız listeler, web sayfalarında ürün listeleri, menüler ve daha birçok alan için kullanılır. Bu liste türü, HTML’de kullanılan en basit ve kullanışlı öğelerden biridir ve her web geliştiricisinin öğrenmesi gereken bir konudur.

Sırasız Liste Öğeleri Nasıl Düzenlenir ve Stilize Edilir?

Sırasız liste öğeleri HTML ve CSS kullanılarak kolayca düzenlenebilir ve stilize edilebilir. Bu sayede, sırasız listeler daha etkileyici ve görsel olarak çekici hale getirilebilir.

Sırasız listenin öğelerinin arasına boşluk eklemek için CSS’de margin özelliği kullanılır. Örneğin, her öğe arasına 10 piksel boşluk bırakmak istiyorsanız, aşağıdaki kodu kullanabilirsiniz:

li {
  margin-bottom: 10px;
}

Ayrıca, sırasız listenin öğelerinin stilini değiştirmek için CSS’de list-style-type özelliği kullanılır. Bu özellik, sırasız listenin işaretlerinin nasıl görüneceğini belirler. Örneğin, sırasız listeyi yuvarlak işaretlerle göstermek isterseniz, aşağıdaki kodu kullanabilirsiniz:

ul {
  list-style-type: circle;
}

Sırasız listeyi kare işaretlerle göstermek isterseniz, “square” değerini kullanabilirsiniz:

ul {
  list-style-type: square;
}

Ayrıca, sırasız listeyi ok işaretleriyle göstermek isterseniz, “disc” değerini kullanabilirsiniz:

ul {
  list-style-type: disc;
}

Sırasız listeler, web sayfalarında sıkça kullanılan bir öğe olduğundan, stilize edilmesi önemlidir. CSS kullanarak sırasız listenin öğelerinin arasına boşluk ekleyebilir, işaretlerin stilini değiştirebilir veya farklı renkler kullanabilirsiniz. Böylece sırasız liste, daha dikkat çekici hale getirilebilir ve kullanıcılara daha iyi bir deneyim sunulabilir.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.