Listeler

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Bir liste öğelerin birbiriyle ilişkisinin işaretidir. Alışveriş ürünleri için sıranın önemi yoktur; ul uygundur. Kurulum veya yemek tarifi gibi adımlarda sıra değişirse anlam bozulabilir; ol kullan. Nokta veya numaranın görünümünü daha sonra CSS ile değiştirebilirsin; HTML seçimini görünüşe göre değil anlama göre yap.

Her öğe li ile yazılır. Alt liste ekleyeceksen onu ilgili li öğesinin içine koy; doğrudan dıştaki listeye metin veya rastgele paragraflar yerleştirme. Girinti, hangi alt öğenin hangi ana maddeye ait olduğunu görmene yardımcı olur. Derinlik arttıkça kullanıcı için de gereksiz karmaşa oluşabileceğini unutma.

Uzun bir anlatımı listeye çevirmek her zaman daha iyi değildir. Birbirine paralel görevleri kısa maddelerle yaz, açıklamaları gerekirse maddenin içinde tut. İşlemden önce gereken malzemeler ile işlemin adımlarını ayrı listelere bölmek, yeni başlayan birinin hazırlık ile uygulamayı ayırmasını sağlar.

İlk örneği oku ve dene

<h3>Alışveriş listesi</h3>
<ul>
  <li>Ekmek</li>
  <li>Süt</li>
</ul>

<h3>Tarif adımları</h3>
<ol>
  <li>Suyu kaynat</li>
  <li>Makarnayı ekle</li>
</ol>

Noktalarla işaretlenmiş bir alışveriş listesi ve 1, 2 diye numaralanmış tarif adımları görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. ul sırası önemli olmayan öğeleri gruplar.
2. ol öğelere anlamlı bir sıra verir; numarayı elle yazmak gerekmez.
3. li kapanmadan açılan alt ul o maddeye bağlanır.
4. Liste başlığı liste dışında uygun bir h2 veya h3 ile verilir.

<h2>Çalışma sıram</h2>
<ol>
  <li>Konuyu oku.</li>
  <li>Örneği dene.
    <ul><li>Bir değeri değiştir.</li><li>Sonucu not et.</li></ul>
  </li>
  <li>Kendi çözümünü yaz.</li>
</ol>

Üç numaralı ana adım; ikinci adım altında iki madde.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Üç ürünlü bir alışveriş listesi yaz.
2. Aynı ürünleri satın alma önceliğine göre numaralı bir listeye çevir.
3. İkinci ürüne iki alt açıklama ekle; HTML ağacında bu açıklamaların hangi li içinde olduğunu bul.

<h2>Hazırlık</h2>
<ul><li>Editör</li><li>Tarayıcı</li></ul>
<h2>Uygulama</h2>
<ol><li>Dosyayı aç.</li><li>Kaydet.</li><li>Yenile.</li></ol>

Hazırlık için iki maddeli, uygulama için üç adımlı liste.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Numaraları metne elle eklemek sıralamayı değiştirdiğinde tutarsızlık yaratır; ol kendi numarasını üretir.
2. Alt ul öğesini li dışına koymak belge yapısını bozar; tarayıcı düzeltse bile kaynağı düzelt.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Kurulum adımlarında ol neden ul’den daha uygun olabilir?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.