Anasayfa
Forum
Hakkında
Ders 5: Listeler
Ders 5: Listeler
Neden?Listeler, ilişkili maddeleri okunabilir ve anlamlı biçimde gruplar.
Ne öğreneceğiz?
Bu derste Sırasız, sıralı ve açıklama listelerini öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşün. Ardından aşağıdaki örneği kendin yaz. Kodu kaydet, tarayıcıda aç ve küçük bir değişiklik yaparak sonucu gözlemle.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Sırasız, sıralı ve açıklama listelerini uygun durumlarda kullanabileceksiniz.
Sırasız liste için <ul>, her madde için <li> kullanılır:
PHP Kod:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Sıralı liste numaralı maddeler için uygundur:
PHP Kod:
<ol>
<li>Dosyayı oluştur.</li>
<li>Kodu yaz.</li>
<li>Tarayıcıda test et.</li>
</ol>
Listenin başlangıç numarasını veya sıralama yönünü değiştirebilirsiniz:
PHP Kod:
<ol start="3" reversed>
<li>Üçüncü adım</li>
<li>İkinci adım</li>
</ol>
Terim ve açıklama çiftleri için <dl>, <dt> ve <dd> kullanılır:
PHP Kod:
<dl>
<dt>HTML</dt>
<dd>Web sayfasının yapısını tanımlayan işaretleme dilidir.</dd>
<dt>CSS</dt>
<dd>Web sayfasının görünümünü düzenleyen stil dilidir.</dd>
</dl>
Listeler iç içe kullanılabilir:
PHP Kod:
<ul>
<li>Görünür yüz
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Arkaplan</li>
<ul>
<li>Python</li>
<li>Java</li>
<li>Node.js</li>
</ul>
</ul>
