Menü • İletişim • Rezervasyon Formu
(HTML5 – Semantik – Gerçek Proje Mantığı)
Merhaba dijital şef! 👨🍳💻
Bugün “etiketleri biliyorum” demek yok.
Bugün HTML’yi bir restoran açacak kadar iyi kullanıyoruz.
HTML bilmiyorsan site yok
HTML’yi iyi biliyorsan müşteri var 😎
🧠 1. Projeye Başlamadan Önce: Nasıl Düşünmelisin?
Yeni başlayanların yaptığı en büyük hata şudur:
❌ “Hangi etiketi yazsam?”
✅ “Kullanıcı sitede ne yapacak?”
Bu projede kullanıcı:
- Siteye girer
- Markayı tanır
- Menüye bakar
- Rezervasyon yapar
- İletişim bilgisini görür
📌 HTML’yi bu akışa göre yazıyoruz.
🧱 2. HTML5 İskeleti – Sağlam Temel Olmazsa Üstüne Kat Çıkılmaz
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Lezzet Durağı - Restoran ve Kafe Web Sitesi">
<meta name="keywords" content="restoran, kafe, menü, rezervasyon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lezzet Durağı | Restoran & Kafe</title>
</head>
<body>
</body>
</html>
🔍 Derinlemesine İpuçları
lang="tr"→ Erişilebilirlik + SEOmeta description→ Google sonuçlarında görünen yazıkeywords→ Eski ama hâlâ faydalıviewport→ Mobil kullanıcıların kurtarıcısı 📱
🏠 3. Header – Markanın Sahneye Çıkışı 🎭
Header = restoranın tabelası
İyi tabela → içeri giren çok 😄
<header>
<h1>🍕 Lezzet Durağı</h1>
<p>Lezzetin ve keyfin buluştuğu yer</p>
<nav>
<ul>
<li><a href="#menu">Menü</a></li>
<li><a href="#reservation">Rezervasyon</a></li>
<li><a href="#contact">İletişim</a></li>
</ul>
</nav>
</header>
🧠 Profesyonel Detaylar
- Menü liste (
ul) içinde olmalı → semantik <nav>sadece ana gezinti için kullanılır<h1>= markanın adı (tek kullan!)
🎯 SEO kuralı:
Sayfayı kapatsan bile <h1> akılda kalmalı.
🍽️ 4. Menü Bölümü – Açlık Yönetimi 🤤
Menü, sitenin en kritik alanıdır.
Burada kullanıcıyı kaybedersen… geçmiş olsun.
<section id="menu">
<h2>🍽️ Menümüz</h2>
<article>
<h3>🍔 Hamburger</h3>
<p>Izgara köfte, cheddar peyniri, özel sos</p>
<p><strong>120₺</strong></p>
</article>
<article>
<h3>🍕 Pizza</h3>
<p>Mozzarella, domates sosu, fesleğen</p>
<p><strong>150₺</strong></p>
</article>
<article>
<h3>☕ Latte</h3>
<p>Taze çekilmiş kahve, süt köpüğü</p>
<p><strong>60₺</strong></p>
</article>
</section>
🔥 Neden <article>?
Çünkü:
- Her ürün bağımsız içerik
- Arama motorları sever
- JavaScript ile filtrelenebilir
📌 İpucu:
İleride kategori eklemek için <section> içinde <article> yapısı idealdir.
📅 5. Rezervasyon Formu – HTML’nin Güç Gösterisi 💪
HTML formlar küçümsenir ama:
HTML form = mini backend 😎
<section id="reservation">
<h2>📅 Rezervasyon Yap</h2>
<form>
<label>
Ad Soyad:
<input type="text" placeholder="Adınızı girin" required>
</label><br><br>
<label>
E-posta:
<input type="email" placeholder="ornek@mail.com" required>
</label><br><br>
<label>
Tarih:
<input type="date" required>
</label><br><br>
<label>
Kişi Sayısı:
<input type="number" min="1" max="20">
</label><br><br>
<button type="submit">Rezervasyon Yap</button>
</form>
</section>
🧠 Form Ustalık İpuçları
type="email"→ otomatik doğrulamarequired→ boş gönderim yokmin / max→ saçma veri engelilabel→ erişilebilirlik ⭐⭐⭐
📞 6. İletişim – Güven Alanı 🔐
İnsanlar ulaşabildiği markaya güvenir.
<section id="contact">
<h2>📍 İletişim</h2>
<address>
<p>📌 İstanbul / Kadıköy</p>
<p>📞 0555 123 45 67</p>
<p>📧 info@lezzetduragi.com</p>
</address>
</section>
🎯 <address> Neden Önemli?
- Anlamsal etiket
- Arama motorları konumu algılar
- Profesyonel görünüm sağlar
👋 7. Footer – HTML’nin İmzası ✍️
<footer>
<p>© 2025 Lezzet Durağı. Tüm hakları saklıdır.</p>
</footer>
Footer =
“Bu site yarım değil” demektir 😄
🚀 8. Projeyi Seviye Atlatalım (Gizli Yol Haritası)
🟢 Başlangıç
- HTML semantik yapı
- Temel formlar
🔵 Orta
- CSS ile tasarım
- Responsive menü
🔴 İleri
- JS ile rezervasyon kontrolü
- Menü filtreleme
- Dark mode 🌙
🎯 Mini Challenge (Gerçek Öğrenme Burada!)
Aynı yapıyı kullanarak:
- ☕ Kafe sitesi
- 🍔 Fast-food
- 🌱 Vegan restoran
- 🍰 Pastane
oluştur.
📌 Kural:
HTML yapısı aynı → içerik farklı.
🧠 SON SÖZ
Bu projeyi anlayarak yaptıysan:
- HTML biliyorsun ✅
- Semantik düşünüyorsun ✅
- Portfolio’ya koyacak projen var ✅
