CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Malzeme listesi

HTML kursu · Başlangıç · Ders 49/68

Malzemeleri sırasız liste olarak yazıp miktarları vurgularsın.

ul ve li ile malzeme listesi

Malzemeler sırası önemli olmayan bir listedir. Bu yüzden <ul> (unordered list) etiketini kullanırsın. Tarayıcı her öğenin başına nokta koyar.

Her malzeme bir <li> (list item) içine yazılır. Örnek:

<ul>
  <li>3 adet yumurta</li>
  <li>1 su bardağı şeker</li>
</ul>

Miktarları <strong> ile vurgulamak okumayı kolaylaştırır.

Miktarları strong ile vurgula

Malzeme listesinde miktarları <strong> ile önemli yapmak, okurun gözüne çarpar. Örnek:

<li><strong>3 adet</strong> yumurta</li>

Böylece miktar ile malzeme adı görsel olarak ayrılır. Tarifte tutarlılık önemli: her malzemede aynı düzeni kullan. Okur listeyi hızlıca tarayabilir ve miktarı tek bakışta görebilir.

Uygulama Malzeme listesini ekle

Önceki dersin çözümünü al. <body>'ye bir h2 (içeriği Malzemeler) ve bir ul ekle. ul içine en az 4 li koy; her birinde miktarı strong ile vurgula.

Örnek çözümü göster 
Body'ye h2 ve ul ekle. ul içine li öğeleri koy.
Örnek çözüm:
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Çikolatalı Kek</title>
  </head>
  <body>
    <h1>Çikolatalı Kek</h1>
    <p>Yoğun ve <strong>kakaolu</strong> bir kek tarifi. Yaklaşık <em>8 dilim</em> için 50 dakika.</p>
    <h2>Malzemeler</h2>
    <ul>
      <li><strong>3 adet</strong> yumurta</li>
      <li><strong>1 su bardağı</strong> toz şeker</li>
      <li><strong>1 su bardağı</strong> süt</li>
      <li><strong>2 çorba kaşığı</strong> kakao</li>
      <li><strong>1 paket</strong> kabartma tozu</li>
      <li><strong>2 su bardağı</strong> un</li>
    </ul>
    <!-- adımlar ve pişirme tablosu ekle -->
  </body>
</html>

Kendini test et

  1. Sırası önemli olmayan malzeme listesi için hangi etiket kullanılır?

    • <ol>
    • <table>
    • <ul>
    • <dl>
    Cevabı göster

    <ul> — Doğru. <ul> sırasız listeyi belirtir; malzemelerin sırası önemli değildir.

  2. Malzeme miktarını tamamla

    <li><strong>____</strong> yumurta</li>
    Cevabı göster 
    <li><strong>3 adet</strong> yumurta</li>

  3. Liste etiketini anlamıyla eşleştir

    <ul>
    Sırasız liste
    <ol>
    Sıralı liste
    <li>
    Liste öğesi
    <dl>
    Açıklama listesi

Başlangıç bölümündeki tüm dersler

1 Belge temelleri

  1. HTML nedir?
  2. Belge iskeleti
  3. Head ve meta etiketleri
  4. Başlık ve dil
  5. Yorumlar ve okunabilirlik
  6. Özet - İlk HTML sayfam

2 Metin içeriği

  1. Başlıklar: h1–h6
  2. Paragraflar
  3. Satır sonu ve yatay çizgi
  4. Vurgu ve önemli metin
  5. Alıntı ve kaynak
  6. Özet - Makale sayfası

3 Proje: Hakkımda sayfası

  1. Proje: Hakkımda sayfası
  2. İskelet ve başlık
  3. Tanıtım metni
  4. Vurgu ve ayrım
  5. Proje sonu - Hakkımda

4 Bağlantılar ve gezinme

  1. Çapa bağlantıları
  2. Mutlak ve göreli URL'ler
  3. Sayfa içi bağlantılar
  4. Bağlantı hedefleri
  5. E-posta ve telefon bağlantıları
  6. Özet - Gezinme menüsü

5 Listeler

  1. Sırasız listeler
  2. Sıralı listeler
  3. Açıklama listeleri
  4. İç içe listeler
  5. Liste öğelerinde bağlantı
  6. Özet - İçindekiler tablosu

6 Proje: Kartvizit sayfası

  1. Proje: Kartvizit sayfası
  2. İsim ve unvan
  3. İletişim listesi
  4. Beceriler ve bağlantılar
  5. Proje sonu - Kartvizit

7 Görseller ve medya

  1. Görsel ekleme
  2. Görsel boyutları
  3. Figure ve figcaption
  4. Ses ve video
  5. Alternatif kaynaklar
  6. Özet - Medya galerisi

8 Tablolara giriş

  1. Tablo iskeleti
  2. Başlık hücreleri
  3. Tablo bölümleri
  4. Başlık ve caption
  5. Hücre birleştirme
  6. Özet - Ders programı tablosu

9 Proje: Tarif sayfası

  1. Proje: Tarif sayfası
  2. Tarif başlığı ve özet
  3. Malzeme listesi
  4. Adımlar ve pişirme tablosu
  5. Proje sonu - Tarif sayfası

10 Formlara giriş

  1. Form iskeleti
  2. Etiketli input
  3. Input türleri
  4. Textarea ve button
  5. Seçim alanları
  6. Özet - Geri bildirim formu

11 Anlamsal etiketlere giriş

  1. Anlamsal etiketler neden önemli
  2. Header ve footer
  3. Nav ve main
  4. Article ve section
  5. Aside ve address
  6. Özet - Anlamsal blog iskeleti

12 Başlangıç finali

  1. Meydan okuma - Belge iskeleti
  2. Meydan okuma - Metin ve bağlantılar
  3. Meydan okuma - Listeler ve tablolar
  4. Meydan okuma - Form ve anlamsal yapı
  5. Meydan okuma - Başlangıç projesi