HTML Listeleme

Bu yazıda HTML Liste etiketlerini oluşturmayı ve web sitelerinde nerelerde kullanıldıklarını açıklayacağım. HTML listelerinin nerelerde kullanıldığı gibi kavramlara göz atmadan, HTML Liste Kullanımına ve HTML Liste Örneklerine bakmak isterseniz, sayfayı biraz aşağı aşağı kaydırmanız yeterli olacaktır.

Şimdi gelelim HTML Listeleme Etiketleri Nerelerde Kullanılır?

Nasıl kullanıldığını açıklamadan önce nerelerde kullanılır öncelikle onu bilmekte fayda var. Bazı içeriklerin listelerde sunulması kullanıcıların bu içerikleri okumaları için uygun bir yöntemdir. Kullanıcı bu içerikleri hızlı bir şekilde göz gezdirebilir. Ayrıca SEO açısından da listeler sevilen unsurlardan biridir. Dolayısıyla listeler web’in ayrılmaz bir parçasıdır ve her zaman web’de kullanılır. Makaleler, web sitesi gezinme menüleri ve e-ticaret web sitelerindeki ürün özellikleri, listelerin sık kullanılmasını sağlar.

İçindekiler

HTML Liste Kullanım Örnekleri

Bunu 3 örnekle gösterelim. İlk örneğimiz.

Örnek 1: Milli Eğitim bakanlığının web sayfasında bulunan dolaşım menüsüdür. UL sırasız listesi kullanılarak oluşturulmuştur.

Örnek 2: N11 sitesinde alış veriş sepetindeki ürünlerin listelenmesidir. Yine UL sırasız listesi kullanılarak oluşturulmuştur.

Örnek 3: Son örnekte siteden gelsin yazilimkodlama.com adresindeki dolaşım da yine sırasız liste kullanılarak oluşturulmuştur.

HTML Liste Etiketleri Nelerdir?

Kullanabileceğiniz üç tür liste vardır ve bu yazı, her birinin nasıl kullanılacağını gösterir.

Unordered List ( UL – Sırasız Liste)
Ordered List (OL – Sıralı Liste)
Description List (DL -Tanım Listesi)

HTML Sırasız Liste (Unordered HTML List) – Html ul li Kullanımı

Sırasız liste, liste öğelerinin sırasının önemli olmadığı bir listedir. Liste öğelerinin sırasının yeniden düzenlenmesi, karışıklık yaratmayacak veya listedeki bilgilerin anlamını değiştirmeyecek şekilde düzenlenmemiş listeler kullanılmalıdır.

Ul öğesi, bir listeyi açar ve kapatır. Listedeki öğeler liste öğesi, li, etiketler arasında bulunur. Aşağıdaki HTML ile üç öğe içeren basit bir sırasız liste oluşturulmuştur.


       <ul> 
           <li>Elam</li>
           <li>Armut</li>
           <li>Portakal</li> 
        </ul>

<ul>

<li>Armut</li>

<li>Portakal</li>

</ul>

CSS ile yeniden düzenlenmedikçe sol tarafında girinti ve disk varsayılan olarak görünecektir. Genellikle CSS kullanılarak yukarıdaki örneklerde olduğu gibi görünümü değiştirilir.


<style>  
    ul{
        list-style-type:circle;
    }
</style>
<ul> 
   <li>Elam</li>
   <li>Armut</li>
   <li>Portakal</li> 
</ul>

<style>

ul{

list-style-type:circle;

}

</style>

<ul>

<li>Armut</li>

<li>Portakal</li>

</ul>

HTML Sırasız Liste Örneği: Aşağıdaki gibi sırasız listelerden yatay yada dikey menüler oluşturabilirsiniz.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<style>
ul#yatay-menu {
list-style: none;
margin:0;
padding:0;
}
ul#yatay-menu li {
display: inline-block;
padding:0 10px;
border-bottom:2px solid #3DA4AB;
margin:auto -2px;
}
ul#yatay-menu li a {
color: #F6CD61;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
height: 36px;
line-height: 36px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-color:#4A4E4D; 
}
ul#yatay-menu li a:hover{
color: #4A4E4D;
background-color:#F6CD61; 
}
 
</style>
</head>
 
<body>
<ul id="yatay-menu">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Web Tasarımı</a></li>
<li><a href="#">Grafik Animasyon</a></li>
<li><a href="#">Veritabanı</a></li>
<li><a href="#">Programlama</a></li>
</ul>
</body>
</html>

<!doctype html>

<html>

<head>

<style>

ul#yatay-menu {

list-style: none;

margin:0;

padding:0;

}

ul#yatay-menu li {

display: inline-block;

padding:0 10px;

border-bottom:2px solid #3DA4AB;

margin:auto -2px;

}

ul#yatay-menu li a {

color: #F6CD61;

display: inline-block;

font: 14px/100% Arial, Helvetica, sans-serif;

height: 36px;

line-height: 36px;

text-decoration: none;

vertical-align: middle;

padding: 0 10px;

background-color:#4A4E4D;

}

ul#yatay-menu li a:hover{

color: #4A4E4D;

background-color:#F6CD61;

}

</style>

</head>

<body>

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Web Tasarımı</a></li>

<li><a href="#">Grafik Animasyon</a></li>

<li><a href="#">Veritabanı</a></li>

<li><a href="#">Programlama</a></li>

</ul>

</body>

</html>

HTML Sıralı Liste ( Ordered HTML List ) – Html ol li Kullanımı

Sırasız liste kadar fazla kullanımı olmasa da öğelerin sırasının önemli olduğu öğelerin listeleri için kullanılır. Sıralı bir listenin sözdizimi, sıralanmamış bir liste ile tamamen aynıdır. Bununla birlikte, sıralı bir liste oluşturmak için, ol etiketi kullanılır. Bu değişikliği yaparak, önceki örneğimizdeki sırasız listeyi sıralı bir listeye dönüştürebiliriz.

Ayrıca, belirli bir sırayla görünmesi gereken öğeler olduklarını açıkça göstermek için liste öğelerinin metnini de değiştireceğiz.


<ol> 
   <li>Elam</li>
   <li>Armut</li>
   <li>Portakal</li> 
</ol>

<ol>

<li>Armut</li>

<li>Portakal</li>

</ol>

Ol etiketinin, UL etiketinden farklı olan bazı özellikleri de vardır. Bunlar Sıralama ölçütünün hangi sembol olacağı, sıralamanın nereden başlayacağı, yada sıralamanın yönünün nasıl olacağı gibi niketikleri belirtebiliriz.

Azalan sıra ile Listeleme

Liste ögelerini azalan sıra ile göstermek için reversed niteliği kullanılır.


<ol reversed> 
   <li>Elam</li>
   <li>Armut</li>
   <li>Portakal</li> 
</ol>

<li>Armut</li>

<li>Portakal</li>

</ol>

Başlangıç Sırasını Değiştirme

Sıralama başlangıcını 1 yada A harfi olmasını istemeyebilirsiniz. Örneğin D yada 4 sayısından başlaması için start niteliğini 4 yapmak gerekir.


<ol start="4"> 
   <li>Elam</li>
   <li>Armut</li>
   <li>Portakal</li> 
</ol>

<li>Armut</li>

<li>Portakal</li>

</ol>

Sıralama Ögesini değiştirme

Sıralama öğesi sadece sayı değil aşağıdaki sembollerden biride olabilir.


<ol type="i"> 
   <li>Elam</li>
   <li>Armut</li>
   <li>Portakal</li> 
</ol>

<li>Armut</li>

<li>Portakal</li>

</ol>

HTML Tanım Listesi ( HTML Description List)

Tanım listeleri dl etiketi ile oluşturulur. Sıralı ve sıralanmamış meslektaşlarından çok daha az kullanılan isim listeleri, isim-değer gruplarını içermek için kullanılır. Her isim-değer grubu, dt etiketleri arasına yerleştirilen bir isim veya terimden oluşur, ardından dd etiketleri arasına yerleştirilen her bir değer veya açıklama ile bir veya daha fazla değer gelir.

Örneğin, bir ailenin üyeleri arasındaki ilişkiyi açıklamak için bir açıklama listesi kullanmak istiyorsak aşağıdaki kodu kullanabiliriz:


<dl> 
    <dt>Ebeveyn</dt> 
        <dd>Mustafa</dd> 
        <dd>Fatma</dd> 
    <dt>Çocuklar</dt> 
        <dd>Recep</dd>
        <dd>Nurten</dd> 
        <dd>Yavuz</dd>
    <dt>Hayvanlar</dt> 
        <dd>Köpek</dd> 
        <dd>Kedi</dd> 
</dl>

<dl>

<dt>Ebeveyn</dt>

<dd>Mustafa</dd>

<dd>Fatma</dd>

<dt>Çocuklar</dt>

<dd>Recep</dd>

<dd>Nurten</dd>

<dd>Yavuz</dd>

<dt>Hayvanlar</dt>

<dd>Köpek</dd>

</dl>

HTML İç İçe Listeleme

Tüm HTML etiketlerinde olduğu gibi listeleri ve diğer etiketleri bir biri içinde kullanabiliriz. Aşağıdaki örnekte iki tane liste iç içe kullanılmıştır.


<ul > 
   <li>Meyve
        <ol>
            <li>Elma</li>
            <li>Armut</li>
            <li>Portakal</li>
            <li>İncir</li>
        </ol>
    </li>
   <li>Sebze
        <ol>
            <li>Biber</li>
            <li>Brokoli</li>
            <li>Karnıbahar</li>
        </ol>
    </li>
</ul>

<ul >

<li>Meyve

<ol>

<li>Armut</li>

<li>Portakal</li>

<li>İncir</li>

</ol>

</li>

<li>Sebze

<ol>

<li>Biber</li>

<li>Brokoli</li>

<li>Karnıbahar</li>

</ol>

</li>

</ul>

Daha fazlası için HTML Liste Örnekleri konusuna bakabilirsiniz.

HTML Liste Kullanım Örnekleri

HTML Liste Etiketleri Nelerdir?

HTML Sırasız Liste (Unordered HTML List) – Html ul li Kullanımı

HTML Sıralı Liste ( Ordered HTML List ) – Html ol li Kullanımı

Azalan sıra ile Listeleme

Başlangıç Sırasını Değiştirme

Sıralama Ögesini değiştirme

HTML Tanım Listesi ( HTML Description List)

HTML İç İçe Listeleme

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin