Proje sonu - Tarif sayfası
Tüm bölümleri birleştirip son tarif sayfasını yayınlanır hale getirirsin.
Son parçalar: figure ve hr
Tarif sayfasının temel parçaları hazır: başlık, özet, malzemeler, adımlar ve pişirme tablosu. Bu son derste sayfaya görsel bir parça ve ayraç ekleyeceğiz.
<figure> etiketi bir görüntüyü ve başlığını birlikte gruplandırır. <img> görüntüyü, <figcaption> ise başlığını yazar. <hr> bölümler arasına yatay çizgi çizer.
figure ile kek fotoğrafı
<figure> bir görüntüyü ve başlığını birlikte sunar. İçine <img> ve <figcaption> yerleştirirsin. Örnek:
<figure>
<img src="kek.jpg" alt="Kek">
<figcaption>Pişmiş kek</figcaption>
</figure><img> için src ve alt öznitelikleri zorunludur. <figcaption> görüntüyü kısa bir cümleyle açıklar ve tarayıcıda görüntünün altında görünür.
Uygulama Tarif sayfasını tamamla
Önceki dersin çözümünü al. <h1>'den sonra bir figure ekle; içine img (src ve alt ile) ve figcaption koy. Tablodan sonra bir hr ve p içinde small ile kısa bir kapanış notu ekle.
Örnek çözümü göster
h1'den sonra figure (img + figcaption) ekle. Tablodan sonra hr ve p içinde small 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>
<figure>
<img src="kek.jpg" alt="Çikolatalı kek dilimi" width="400" height="300">
<figcaption>Pişmiş kek dilimi</figcaption>
</figure>
<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>
<h2>Hazırlanışı</h2>
<ol>
<li>Yumurta ve şekeri çırpın.</li>
<li>Sütü ve eritilmiş tereyağını ekleyin.</li>
<li>Kakao, un ve kabartma tozunu eleyerek katın.</li>
<li>Önceden ısıtılmış fırına verin.</li>
</ol>
<h2>Pişirme Tablosu</h2>
<table>
<caption>Kek pişirme süreleri</caption>
<thead>
<tr>
<th scope="col">Aşama</th>
<th scope="col">Sıcaklık</th>
<th scope="col">Süre</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ön ısıtma</td>
<td>180°C</td>
<td>10 dk</td>
</tr>
<tr>
<td>Pişirme</td>
<td>180°C</td>
<td>30 dk</td>
</tr>
</tbody>
</table>
<hr>
<p><small>Afiyet olsun! Kürdan temiz çıkınca pişmiş demektir.</small></p>
</body>
</html>Kendini test et
-
Sayfaya yatay ayraç çizgisi eklemek için hangi etiket kullanılır?
- <hr>
- <br>
- <line>
- <divider>
Cevabı göster
<hr> — Doğru. <hr> (horizontal rule) sayfaya yatay çizgi ekler ve boş bir etikettir.
-
Yatay ayraç etiketini tamamla
<____>Cevabı göster
<hr> -
Görsel etiketi rolüyle eşleştir
- <hr>
- Yatay ayraç
- <figure>
- Şekil kabı
- <figcaption>
- Şekil başlığı
- <img>
- Görüntü