Proje: Çok sayfalı site iskeleti

HTML kursu · Orta seviye · Ders 58/67

5 derslik projenin genel bakışı: tutarlı landmark'lı site iskeleti.

Proje: Çok sayfalı site iskeleti

Bu 5 derslik projede Peynir Dergisi adlı çok sayfalı bir dergi sitesinin iskeletini kuracaksın. Her derste siteye bir parça ekleyecek, son derste header, main, aside ve footer'ı birbirine bağlı tam bir iskelet elinde olacak.

Projede şunları kullanacaksın:

Anlamsal iskelet: header, nav, main, section, article, aside, footer
address ile iletişim bilgisi
form, label, input ve textarea ile iletişim formu
Bağlantıları sayfalar arası yönlendirme
Yorumlarla yapıyı belgeleme

Hazırsan başlayalım.

Belge iskeletini hatırla

Her sayfa aynı temel iskeletle başlar:

<!DOCTYPE html> ile belge türü bildirilir
<html lang="..."> kök etiket ve dil
<head> içinde charset, viewport ve <title>
<body> tüm görünen içerik burada

Bu projede her sayfa bu iskeleti kullanır; lang değeri sayfadan sayfaya değişmez.

Uygulama Peynir Dergisi ana sayfasının temel iskeletini yaz

Boş belge iskeletini yaz: <!DOCTYPE html>, <html lang="tr">, <head> içinde charset, viewport ve <title>Peynir Dergisi</title>, boş <body>.

Örnek çözümü göster

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peynir Dergisi</title>
  </head>
  <body>
  </body>
</html>

Kendini test et

Çok sayfalı bir sitede her sayfada aynı olması gerekenler hangileridir?
- Yalnızca h1 başlığı
- Header, nav ve footer
- main içindeki tüm içerik
- Sayfaya özel başlık
Cevabı göster

Header, nav ve footer — Doğru. Header, nav ve footer her sayfada tekrar eder; böylece ziyaretçi site içinde kaybolmaz.
Belge türü bildirisini tamamla
```
<!____ html>
```
Cevabı göster
```
<!DOCTYPE html>
```
Landmark etiketini göreviyle eşleştir

header

Site üstü ve logo
main

Ana içerik
footer

Alt bilgi
nav

Gezinme bağlantıları

Proje: Çok sayfalı site iskeleti