Menu • Contact • Formulaire de Réservation
(HTML5 – Sémantique – Logique de Projet Réel)
Bonjour chef digital ! 👨🍳💻
Aujourd’hui, pas question de dire « je connais les balises ».
Aujourd’hui, nous utilisons HTML assez bien pour ouvrir un restaurant.
Pas de HTML, pas de site.
Bon HTML, de vrais clients 😎
🧠 1. Avant de Commencer le Projet : Comment Faut-il Penser ?
La plus grande erreur des débutants est la suivante :
❌ « Quelle balise dois-je utiliser ? »
✅ « Que va faire l’utilisateur sur ce site ? »
Dans ce projet, l’utilisateur va :
- Entrer sur le site
- Reconnaître la marque
- Consulter le menu
- Faire une réservation
- Voir les informations de contact
📌 Nous écrivons le HTML selon ce parcours.
🧱 2. Squelette HTML5 – Pas de Base Solide, Pas d’Étages Supérieurs
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Lezzet Durağı - Restaurant and Cafe Website">
<meta name="keywords" content="restaurant, cafe, menu, reservation">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lezzet Durağı | Restaurant & Cafe</title>
</head>
<body>
</body>
</html>
🔍 Conseils Approfondis
lang="tr"→ Accessibilité + SEOmeta description→ Texte affiché dans les résultats Googlekeywords→ Ancien mais toujours utileviewport→ Le sauveur des utilisateurs mobiles 📱
🏠 3. Header – La Marque Entre en Scène 🎭
Header = l’enseigne du restaurant
Bonne enseigne → plus de clients 😄
<header>
<h1>🍕 Lezzet Durağı</h1>
<p>Là où la saveur et le plaisir se rencontrent</p>
<nav>
<ul>
<li><a href="#menu">Menu</a></li>
<li><a href="#reservation">Réservation</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
🧠 Détails Professionnels
- Les menus doivent être dans des listes (
ul) → structure sémantique <nav>est réservé à la navigation principale<h1>= nom de la marque (une seule fois !)
🎯 Règle SEO :
Même si la page est fermée, le <h1> doit rester en mémoire.
🍽️ 4. Section Menu – Gestion de la Faim 🤤
Le menu est la partie la plus critique du site.
Perds l’utilisateur ici… c’est fini.
<section id="menu">
<h2>🍽️ Notre Menu</h2>
<article>
<h3>🍔 Hamburger</h3>
<p>Steak grillé, cheddar, sauce spéciale</p>
<p><strong>120₺</strong></p>
</article>
<article>
<h3>🍕 Pizza</h3>
<p>Mozzarella, sauce tomate, basilic</p>
<p><strong>150₺</strong></p>
</article>
<article>
<h3>☕ Latte</h3>
<p>Café fraîchement moulu, mousse de lait</p>
<p><strong>60₺</strong></p>
</article>
</section>
🔥 Pourquoi <article> ?
Parce que :
- Chaque produit est un contenu indépendant
- Les moteurs de recherche adorent
- Peut être filtré avec JavaScript
📌 Astuce :
Pour des catégories futures, la structure <article> dans <section> est idéale.
📅 5. Formulaire de Réservation – HTML Montre ses Muscles 💪
Les formulaires HTML sont souvent sous-estimés, mais :
Formulaire HTML = mini backend 😎
<section id="reservation">
<h2>📅 Faire une Réservation</h2>
<form>
<label>
Nom et Prénom :
<input type="text" placeholder="Entrez votre nom" required>
</label><br><br>
<label>
Email :
<input type="email" placeholder="exemple@mail.com" required>
</label><br><br>
<label>
Date :
<input type="date" required>
</label><br><br>
<label>
Nombre de personnes :
<input type="number" min="1" max="20">
</label><br><br>
<button type="submit">Réserver</button>
</form>
</section>
🧠 Astuces de Maîtrise des Formulaires
type="email"→ validation automatiquerequired→ pas d’envoi videmin / max→ empêche les valeurs absurdeslabel→ accessibilité ⭐⭐⭐
📞 6. Contact – Zone de Confiance 🔐
Les gens font confiance aux marques qu’ils peuvent contacter.
<section id="contact">
<h2>📍 Contact</h2>
<address>
<p>📌 Istanbul / Kadıköy</p>
<p>📞 +90 555 123 45 67</p>
<p>📧 info@lezzetduragi.com</p>
</address>
</section>
🎯 Pourquoi <address> est Important ?
- Balise sémantique
- Les moteurs de recherche comprennent la localisation
- Donne un aspect professionnel
👋 7. Footer – La Signature du HTML ✍️
<footer>
<p>© 2025 Lezzet Durağı. Tous droits réservés.</p>
</footer>
Footer =
« Ce site est complet » 😄
🚀 8. Faire Monter le Projet en Niveau (Feuille de Route Secrète)
🟢 Débutant
- Structure HTML sémantique
- Formulaires de base
🔵 Intermédiaire
- Design avec CSS
- Menu responsive
🔴 Avancé
- Validation des réservations avec JavaScript
- Filtrage du menu
- Mode sombre 🌙
🎯 Mini Défi (Le Vrai Apprentissage Commence Ici !)
En utilisant la même structure, crée :
- ☕ Site de café
- 🍔 Fast-food
- 🌱 Restaurant vegan
- 🍰 Pâtisserie
📌 Règle :
Même structure HTML → contenu différent.
🧠 MOT FINAL
Si tu as réalisé ce projet en comprenant :
- Tu connais HTML ✅
- Tu penses de manière sémantique ✅
- Tu as un projet prêt pour ton portfolio ✅
🚀
