Html Css Eğitimleri

HTML5 Listeler ve Liste Özellikleri

Desinggo.com da HTML-CSS Eğitimi Serisinin bu dersinde sizlerle Liste etiketleri ile birlikteyiz.
Bu yazıda sıralısırasız ve HTML5 ile gelen  tanımlama listelerini ele alacağız. Öncelikle liste etiketlerini bir web sayfası hazırlarken çok fazla kullanıyoruz. Özellikle header ve footer bölümlerinde sırasız listeler vazgeçilmezdir. Bu sebeple listeleri dördüncü dersimizde öğreneceğiz ve listelere vereceğimiz display özellikleri ile de basit bir menü hazırlayacağız. Kullanacağımız CSS özelliklerini bilmiyor olabilirsiniz. Fakat önümüzdeki derslerde hepsini ele alıp örneklerle birlikte pekiştireceğiz. Bu yazıdaki amaç HTML tagi olan listeleri öğrenmek.  O zaman hemen listelere ve onların özelliklerini öğrenmek ile  ile başlayalım.

Listeler üçe ayrılır

1.<ol> (Order lists – Sıralı Listeler)

Sıralı liste 1, 2, 3 veya a , b, c şeklinde devam eden listelerdir ve <ol> etiketleri ile ifade edilir. Varsayılan (default) sıralama tipi decimal (1, 2, 3 …) dir. Kaçıncı sıradan başlayacağına ise ol etiketinin start attribute ile belirleyebiliriz.

<ol>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
</ol>

Çıktısı:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
  5. Lorem ipsum dolor sit amet.
<ol start = "3">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
</ol>

Çıktısı:

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
  5. Lorem ipsum dolor sit amet.

Gördüğünüz gibi sıralı listede start attribute ile kaçıncı sıradan başlayacağını belirttik.

2.<ul> (Unordered Lists – Sırasız Listeler):

Özel bir sıraya veya diziye sahip olmayan listelerdir. Sırasız listeler <ul> etiketi ile ifade edilir. Varsayılan sıralama tipi disc.

  <ul>
      <li>Home</li>
      <li>Products</li>
      <li>Gallery</li>
      <li>About Us</li>
      <li>Contact Us</li>
  </ul>

Çıktısı:

  • Home
  • Products
  • Gallery
  • About Us
  • Contact Us

3. <dl>(Description Lists – Açıklama Listeleri):

HTML5 ile gelen liste türüdürİsminden de anlaşılacağı üzere tanımlama listeleridir. <dl> etiketi listeyi kapsayan etikettir. <dt> terimi tanımlar, <dd> ise bu terimin açıklaması için kullanılan etikettir.

<dl>
  <dt>İsim-Soyisim</dt>
  <dd>Desinggo Com</dd>
  <dt>Dersler</dt>
  <dd>HTML</dd>
  <dd>CSS</dd>
  <dd>Javascript</dd>
</dl>

Çıktısı:
İsim-Soyisim
Desinggo Com
Dersler
HTML
CSS
Javascript

ul , ol ve dl etiketleri listeyi kapsayan etiketlerdir. Listenin her elemanı ise sıralı ve sırasız listeler için  li etiketleri ile tanımlanır. <li> etiketleri tarayıcıyı tamamen kaplarlar. Bu da onların blok etiketi olduğunu gösterir.

Listelerin Stil Özellikleri

  1. List-style-type: Listedeki elemanların marker (işaretleme) türünü belirler. Bunlar sıralı ve sırasız listeler için farklıdır.
  • Sırasız Listeler
List-style-typeDescription
DiscDolu çember
Circleİçi boş çember ( o )
SquareKare
  • Sıralı Listeler
List-style-typeDescription
Decimal1, 2, 3, 4, 5, 6…
decimal-leading-zero01, 02, 03…
lower-romani, ii, iii, iv, v…
upper-romanI, II, III, IV, V…
lower-alphaa, b, c, d, e…
upper-alphaA, B, C, D, E…
initialVarsayılan değere ayarlanır.
inheritÖzelliği parent elementten alır.

Sıralı listelerde stil tipleri çok daha fazla. Ben en çok kullanılanları ekledim. Eğer sizler için gerekirse kısa bir araştırma ile istediğiniz tipe ulaşabilirsiniz.

  1. List-style-position: Bu da listenin konumunu belirtir. inside ve outside. Inside değeri listeyi daha içerde yazmamızı sağlar.
  2. List-style-image: Listenin elemanları işaretleyicisi olarak bir resim ayarlar. url() yada none değerleri verilir.
  3. List-style: özelliğiyle ise listenin tipi, pozisyonu ve resmini yani üç özelliği tek satırda yazabilmemizi sağlar. Bu temiz kod yazma açısından güzel bir özelliktir. Syntax ı aşağıdaki gibidir.

 list-style: <list-style-type> || <list-style-position> || <list-style-image>;

    <ul style="background:#faebd7">
      <li>Home</li>
      <li>Products
        <ul style="list-style:decimal-leading-zero inside none;
                   background: #8A2BE2">
            <li>Laptop</li>
            <li>Phone</li>
            <li>Tablet</li>
        </ul>
      </li>
      <li>Gallery</li>
      <li>About Us</li>
      <li>Contact Us</li>
     </ul>

Verdiğimiz inside özelliği sayesinde products listesi daha içeride yazıldı.

HTML-CSS derslerinde listeleri detaylı bir şekilde gördük. Umarım faydası olmuştur. Hadi şimdi menü uygulamamıza  bakabiliriz…

<style>
        body {
            margin: 0;
            padding: 0;
        }
        .menu {
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: tomato;

            display: flex;
            align-items: center;
            justify-content: center;
            font: 16px Arial;
        }
        li {
            padding: 20px 60px;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
</style>
    <div>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>

Çıktısı aşağıdaki gibi olacaktır. Basit bir menü  oluşturmak için margin, padding ve display özelliklerini kullandık. Gelecek derslerde CSS’e başlangıç seviyesinden başlayarak detaylı bir şekilde bu özellikleri ele alacağız.

Desinggo.com da HTML5-Listeler dersimizin  sonuna geldik.  Bu derste listeler ve listelerin özelliklerini anlatmaya çalıştık. Umarım faydası olmuştur. Sizin için faydalı linkleri aşağıya bırakıyorum. Ders hakkında olumlu olumsuz bütün görüşlerinizi bekliyorum. Eklemek istediğiniz bilgiler varsa paylaşalım arkadaşlar. Hepimize güzel kodlamalar… Gelecek derste görüşmek üzere…

İsmail Koç

Web & Grafik Tasarımcısı, Mühendis, Yerel Rehber, Google Developers 2019

Bir cevap yazın

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

Başa dön tuşu