HTML
Adımlar ve pişirme tablosu
Adımları sıralı liste, pişirme süresi/sıcaklığını tablo olarak eklersin.
ol ile sıralı adımlar
Pişirme adımlarının sırası önemlidir. Bu yüzden <ol> (ordered list) etiketini kullanırsın. Tarayıcı adımları otomatik numaralandırır.
Her adım bir <li> içine yazılır. Örnek:
<ol>
<li>Yumurta ve şekeri çırpın.</li>
<li>Fırına verin.</li>
</ol>
Adımların başına numara yazmana gerek yoktur.
table ile pişirme tablosu
Pişirme tablosu için <table> etiketini kullanırsın. Tablo satırlardan <tr> ve hücrelerden oluşur. Başlık hücresi <th>, veri hücresi <td> ile yazılır.
<caption> tablonun başlığını, <thead> başlık satırını, <tbody> ise veri satırlarını gruplandırır. Bu ayrım tabloyu okunabilir ve erişilebilir yapar; ekran okuyucular için de faydalıdır.
Uygulama Adımları ve pişirme tablosunu ekle
Önceki dersin çözümünü al. <body>'ye bir h2 (Hazırlanışı) ve ol ekle; ol içine en az 3 li koy. Ardından başka bir h2 (Pişirme Tablosu) ve bir table ekle; tabloda caption, thead (içinde th) ve tbody (içinde td) bulunsun.
Örnek çözümü göster
Body'ye h2 + ol, sonra h2 + table ekle. table içine caption, thead (th) ve tbody (td) 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>
<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>
<!-- kek fotoğrafı ve kapanış notu ekle -->
</body>
</html>
Kendini test et
-
Hangisi bir tablo veri hücresi etiketidir?
Cevabı göster
<td> — Doğru. <td> (table data) bir veri hücresidir. <th> ise başlık hücresidir.
-
Tablo hücresini tamamla
<td>____</td>
Cevabı göster
<td>180°C</td>
-
Tablo etiketini rolüyle eşleştir
- <table>
- Tablo kabı
- <tr>
- Satır
- <th>
- Başlık hücresi
- <td>
- Veri hücresi
- <caption>
- Tablo başlığı
Sıradaki ders: Proje sonu - Tarif sayfası
