Proje: Tarif sayfası

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

5 derslik projenin genel bakışı: listeler ve tablolarla bir tarif sayfası.

Proje: Tarif sayfası

Bu 5 derslik projede bir Çikolatalı Kek tarifi sayfası yapacaksın. Her derste sayfaya bir parça ekleyecek, son derste tam bir tarif sayfası elinde olacak.

Projede şunları kullanacaksın:

Belge iskeleti (DOCTYPE, html, head, body)
meta charset, viewport, title, lang
h1 başlığı ve paragraflar
strong ve em ile vurgu
Sırasız malzeme listesi (ul, li)
Sıralı adımlar (ol, li)
Pişirme tablosu (table, thead, tbody)

Hazırsan başlayalım.

Proje yol haritası

Projeyi adım adım şöyle kuracağız:

İskelet: Belge iskeletini ve head bölümünü yaz.
Başlık ve özet: h1 ile tarif adını, p ile özeti ekle.
Malzemeler: ul ve li ile malzeme listesini yaz.
Adımlar ve tablo: ol ile adımları, table ile pişirme tablosunu ekle.
Sonuç: figure ve hr ile sayfayı tamamla.

Her dersin başındaki kod önceki dersin çözümünü içerir; sen yeni parçayı eklersin.

Uygulama Boş belge iskeletini yaz

Projeye boş bir HTML belge iskeletiyle başla. İçinde <!DOCTYPE html>, <html>, <head> ve <body> bulunsun. <html>'e lang="tr", <head> içine meta charset=utf-8, viewport ve title (içeriği Çikolatalı Kek) ekle.

Örnek çözümü göster

Boş bir HTML belge iskeleti yaz. head içine charset, viewport ve title ekle.
Ö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>
    <!-- tarif başlığı ve özet ekle -->
  </body>
</html>

Kendini test et

Proje gruplarında dersler nasıl ilerler?
- Her ders önceki çözümü alır, yeni bir parça ekler
- Her ders sıfırdan başlar
- Dersler birbirinden bağımsızdır
- Yalnızca son ders kod içerir
Cevabı göster

Her ders önceki çözümü alır, yeni bir parça ekler — Doğru. Her ders önceki dersin çözümünün üzerine yeni bir parça ekler; böylece tarif sayfası adım adım büyür.
DOCTYPE bildirimini tamamla
```
<!DOCTYPE ____>
```
Cevabı göster
```
<!DOCTYPE html>
```
İskelet bileşenini rolüyle eşleştir

<head>

Üst veriler ve başlık
<body>

Görünür içerik
<html>

Belge kökü
<title>

Sekme başlığı

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

Proje: Tarif sayfası