HTML · Listeler — videolu atölye

Listeler

Sıralı ve sırasız bilgileri doğru liste yapısıyla sunmak.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

ul sırası önemli olmayan öğeleri gruplar. Kodun tamamı yazılı derste bulunur.

<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>

Beklenen sonucu oku

Liste başlığı liste dışında uygun bir h2 veya h3 ile verilir.

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

Bir değeri sen değiştir

Üç ürünlü bir alışveriş listesi yaz. Aynı ürünleri satın alma önceliğine göre numaralı bir listeye çevir.

Hata nereden gelir?

Numaraları metne elle eklemek sıralamayı değiştirdiğinde tutarsızlık yaratır; ol kendi numarasını üretir.

Kendi çözümünü kur

İkinci ürüne iki alt açıklama ekle; HTML ağacında bu açıklamaların hangi li içinde olduğunu bul. Alt listenin açılış ve kapanışını ana li kapanmadan önce yerleştir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<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>

Kendini kontrol et

Kurulum adımlarında ol neden ul’den daha uygun olabilir? Yanıt: Adımların sırası işlemin anlamının bir parçasıdır.

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