HTML Ders 4 · Listeler ve Basit Menü Yapısı

1. Neleri Öğreneceksin?

Sırasız liste (<ul>) oluşturmayı,
Sıralı liste (<ol>) oluşturmayı,
<li> etiketi ile liste maddeleri eklemeyi,
İç içe listelerle alt maddeler yapmayı,
<ul> + <li> + <a> kullanarak basit bir menü kurmayı öğreneceksin.

2. Sırasız Listeler: <ul> ve <li>

Sırasız listelerde maddeler numaralı değildir; genelde nokta veya küçük simgelerle gösterilir. HTML’de sırasız liste oluşturmak için <ul> (unordered list) ve <li> (list item) etiketlerini kullanırız.

<ul>
  <li>Kitap okumak</li>
  <li>Bisiklete binmek</li>
  <li>Web tasarımı öğrenmek</li>
</ul>

Kitap okumak
Bisiklete binmek
Web tasarımı öğrenmek

Her bir maddeyi mutlaka ayrı bir <li> etiketi içine yazmalısın. <ul> etiketi listenin başladığı ve bittiği yeri belirtir.

3. Sıralı Listeler: <ol> ve <li>

Sıralı listelerde maddeler numaralı olarak görünür. HTML’de sıralı liste oluşturmak için <ol> (ordered list) ve yine <li> etiketlerini kullanırız.

<ol>
  <li>Bilgisayarı aç</li>
  <li>VS Code'u çalıştır</li>
  <li>Proje klasörünü aç</li>
  <li>index.html dosyasını düzenle</li>
</ol>

Bilgisayarı aç
VS Code'u çalıştır
Proje klasörünü aç
index.html dosyasını düzenle

Sıralı liste, özellikle adım adım yapılacak işlemleri göstermek için çok kullanışlıdır.

4. İç İçe Listeler: Alt Maddeler Yapmak

Bazı maddelerin altında alt başlıklar göstermek isteyebilirsin. Bu durumda bir <li> etiketinin içine yeni bir <ul> veya <ol> yerleştirerek iç içe liste oluşturabilirsin.

<ul>
  <li>HTML Dersleri
    <ul>
      <li>Ders 1 – VS Code ve İlk Sayfa</li>
      <li>Ders 2 – Başlıklar ve Paragraflar</li>
      <li>Ders 3 – Linkler ve Görseller</li>
    </ul>
  </li>
  <li>Python Dersleri</li>
</ul>

HTML Dersleri
- Ders 1 – VS Code ve İlk Sayfa
- Ders 2 – Başlıklar ve Paragraflar
- Ders 3 – Linkler ve Görseller
Python Dersleri

💡 İpucu: İç içe listeler kullanırken kodunun okunabilir olması için satır başlarını ve boşlukları düzenli bırakmaya dikkat et.

5. Basit Menü Yapısı: <ul> + <li> + <a>

Birçok web sitesindeki menüler aslında basit bir listeden oluşur. <ul> içinde <li> maddeleri, her maddenin içinde de birer <a> (link) etiketi kullanılır.

<ul>
  <li><a href="index.html">Ana Sayfa</a></li>
  <li><a href="html-dersler.html">HTML Dersleri</a></li>
  <li><a href="projeler.html">Projeler</a></li>
  <li><a href="iletisim.html">İletişim</a></li>
</ul>

İleride CSS ile bu listeyi yatay menüye dönüştürebilir, renkler ve efektler ekleyebilirsin. Bu derste sadece HTML yapısını öğrenmen yeterli.

6. Mini Görev – Günlük Plan ve Menü

Şimdi listelerle kendi sayfanı düzenleyeceksin. Aşağıdaki adımları uygula:

index.html dosyana git veya yeni bir dosya oluştur: gunluk-plan.html.
Sayfanın en üstüne bir <h1> başlığı yaz: “Bugünkü Planım” gibi.
Altına bir <ol> listesi ekleyip gün içinde yapacağın en az 4 madde yaz (örneğin: ders çalışmak, spor yapmak, kitap okumak...).
Sayfanın başka bir bölümünde <h2> başlığı altında “Favori Sitelerim” yaz ve altında bir <ul> listesi ile sevdiğin siteleri ekle. Her madde bir <a> linki olsun.
Sayfanın en üstüne veya en altına basit bir menü ekle: Ana Sayfa, HTML Dersleri, İletişim gibi maddelerden oluşan bir <ul> menü tasarla.
Dosyayı kaydedip tarayıcıda görüntüle. Listelerin görünümünü kontrol et.

Hazırladığın sayfanın ekran görüntüsünü alıp öğretmeninle paylaşabilirsin. Bir sonraki derste bu yapıyı tablolarla daha da zenginleştireceğiz.

Ders 4 Görev / Quiz Linki