html ul arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/html-ul/ Yazılımcı Notları Fri, 06 Apr 2018 06:47:02 +0000 tr hourly 1 https://wordpress.org/?v=6.1.10 https://www.mehmetkirazli.com/wp-content/uploads/2018/04/mehmetkirazlilogo.png html ul arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/html-ul/ 32 32 Html Listeleme Yapısı https://www.mehmetkirazli.com/html-listeleme-yapisi/ https://www.mehmetkirazli.com/html-listeleme-yapisi/#respond Sun, 04 Mar 2012 10:09:42 +0000 http://www.mehmetkirazli.com/?p=247 Yapacağımız html sayfalarında bazı yazılarımızı maddeler halinde listelemek isteyebiliriz. Yazacağımız listeyi sıralı ve sırasız olarak 2 şekilde düzenleyebiliriz. Bunu html liste etiketleri ile yapabiliriz Html Liste Türleri Sırasız ( unordered list ) oluşturmak  için kullanacağımız etiket <ul> dir  ve  </ul> etiketiyle kapatılması gerekir.Bu etiket yardımıyla listeyi oluşturmuş oluruz ve bu etiketlerin içerisine yazacağımız <li> etiketleriyle …

The post Html Listeleme Yapısı appeared first on Mehmet Kirazlı.

]]> Yapacağımız html sayfalarında bazı yazılarımızı maddeler halinde listelemek isteyebiliriz. Yazacağımız listeyi sıralı ve sırasız olarak 2 şekilde düzenleyebiliriz. Bunu html liste etiketleri ile yapabiliriz

Html Liste Türleri

Sırasız ( unordered list ) oluşturmak  için kullanacağımız etiket <ul> dir  ve  </ul> etiketiyle kapatılması gerekir.Bu etiket yardımıyla listeyi oluşturmuş oluruz ve bu etiketlerin içerisine yazacağımız <li> etiketleriyle de listemizin elemanlarını belirleriz.

Ekleyeceğimiz her liste elemanı için <li> Eklenecek eleman </li>  etiketlerini kullanmalıyız.Anlattıklarımıza basit bir örnek verelim;

<html>
 <head>
  <title>Listeleme</title>
 </head>
 <body>
  <h4>Listeleyeceğimiz Elemanlar</h4>
  <ul>
   <li>1.eleman</li>
   <li>2.eleman</li>
   <li>3.eleman</li>
  </ul>
  </body>
</html>

<h4> etiketleri arasına başlığımızı yazdık. <ul> etiketleri arasına listeleyeceğimiz elemanları yazarak listemizi oluşturduk.

Çıktımız aşağıdaki gibi olacaktır

Çıktımızda görüldüğü gibi her liste elemanının başında nokta işareti var.Peki bunu nasıl değiştirebiliriz? Bunun için  <ul> etiketinin özelliklerini kullanacağız. <ul> etiketinin type özelliğini kullanırsak, bu işaretlerin yerine bazı simgeler koyabiliriz.Kullanılışı ise şu şekildedir;

<ul type="circle">

(listelenecek elemanlar)

</ul>

Kullanabileceğimiz en bilindik simgeler ; circle, square ve disc dir. Bunların her birini kullandığımız bir örnek verelim;

<html>
<head>
  <title>Listeler</title>
</head>
<body>
  <h4>Liste Elemanları<h4>
  <ul type="square">
    <li>Eleman 1</li>
    <li>Eleman 2</li>
  </ul>
  <h4>Liste Elemanları<h4>
  <ul type="circle">
    <li>Eleman 1</li>
    <li>Eleman 2</li>
  </ul>
    <h4>Liste Elemanları<h4>
  <ul type="disc">
    <li>Eleman 1</li>
    <li>Eleman 2</li>
  </ul>
</body>
</html>

Şimdi ise yeni oluşturduğumuz simgelerin ne olduklarını çıktımızda görelim


Şunu da belirtelim.Burada her listeyi ayrı ayrı yaptık.Fakat bir liste diğer listenin bir alt listesi de olabilir.Bunun için kodumuzdaki <ul> etiketlerini birbirinden bağımsız değil de birini diğerinin içinde yazarsak listelerimizin alt listelerini de oluşturabiliriz

Sıralı Liste

Sıralı listemizin tek farkı, simgelerimizin yerine 1,2,3..  A,B,C..  i,ii,iii…  gibi sıralı giden simgeler kullanmasıdır.Kendisi bizim yerimize bu rakamları oluşturacaktır.Sıralı( ordered list ) listeler oluşturmak için kullanacağımız etiket ise <ol> dir.Bir önceki sırasız listelemede ise <ul> etiketini kullanmıştır.Yapı olarak tamamen aynıdır.Bir örnek verelim ve çıktımızı oluşturarak farkı görelim;

<html>
<head>
  <title>Sıralı liste oluşturma</title>
</head>
<body>
  Sıralı Liste
  <ol>
    <li>Eleman 1</li>
    <li>Eleman 2</li>
    <li>Eleman 3</li>
  </ol>
</body>
</html>

Oluşan çıktımız ;


Sıralı listemizde de kullanacağımız , <ol type=””>  özelliği ile sıralı listelerimizin romen rakamları (i,ii,iii) veya  A,B,C  şeklinde sıralanmasını sağlayabiliriz.Bunun için açtığımız her <ol> etiketine  <ol type=”A”> veya <ol type=”i”> yazalım

==>Şunu da dipnot olarak düşelim.Şuana kadar 2 çeşit listeleme yöntemi gördük.Bunların her ikisinde de liste elemanlarımızın önüne bir simge,bir harf ve benzeri şeyler koyduk.Peki elemanlarımızın başına hiçbir işaret koymak istemezsek? Kullandığımız bu 2 etiket türü ile bunlar mümkün değil.Bunun için yeni bir etiket kullanmamız gerekiyor. <dl> etiketi ile listemizi açalım ve her liste elemanımızı da <dd> etiketleri arasına yazarsak, liste elemanlarımızın önünde bir simge olmadan sıralanacaktır.Html kodumuzda değiştireceğimiz kısımlar sadece bunlardır

The post Html Listeleme Yapısı appeared first on Mehmet Kirazlı.

]]> https://www.mehmetkirazli.com/html-listeleme-yapisi/feed/ 0