Annuaire › Code ouvert
Code publié par son auteur, en lecture seule. « Copier dans mon espace » crée un nouveau site à vous (non publié) que vous pouvez modifier librement.
index.html · 14.9 Ko
<!DOCTYPE html>
<!--
=====================================================================
index.html : site du restaurant « Le Vanillier » (Antalaha)
=====================================================================
Rôle : page unique, découpée en sections reliées par des « ancres »
(liens du type href="#menu" qui défilent jusqu'à l'élément id="menu").
Fichiers liés :
- css/variables.css : couleurs, espacements (variables CSS)
- css/style.css : toutes les règles de mise en forme
- medias/*.svg : illustrations locales (aucune image distante)
Aucun JavaScript : tout fonctionne en HTML + CSS purs (FAQ comprise).
Restaurant et personnes fictifs : site d'exemple.
-->
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Vanillier, restaurant à Antalaha</title>
<meta name="description" content="Le Vanillier, restaurant à Antalaha : cuisine de la côte nord-est, menu, horaires et réservation.">
<!-- ORDRE IMPORTANT : variables.css d'abord, car style.css les utilise.
Une variable doit être connue du navigateur avant d'être lue. -->
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Lien d'évitement : atteignable avec Tab, il saute la navigation. -->
<a class="cache-visuel" href="#menu">Aller directement au menu</a>
<!-- ============ EN-TÊTE + NAVIGATION ============ -->
<header class="entete">
<div class="conteneur">
<a class="logo" href="#accueil">Le Vanillier</a>
<!-- <nav> : un groupe de liens de navigation principal.
aria-label distingue cette navigation si la page en avait plusieurs. -->
<nav class="navigation" aria-label="Navigation principale">
<ul>
<!-- Chaque href="#xxx" pointe vers l'id d'une section plus bas. -->
<li><a href="#menu">Menu</a></li>
<li><a href="#horaires">Horaires</a></li>
<li><a href="#galerie">Galerie</a></li>
<li><a href="#reservation">Réserver</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- ============ BANDEAU D'ACCUEIL ============
L'image de fond est dans le CSS (.accueil) : c'est une image de
décoration, donc pas besoin de texte alternatif. -->
<section class="accueil" id="accueil" aria-labelledby="titre-accueil">
<div class="conteneur">
<h1 id="titre-accueil">Le Vanillier</h1>
<p>Une cuisine de la côte nord-est, parfumée à la vanille d'Antalaha,
face à la baie.</p>
<a class="bouton" href="#reservation">Réserver une table</a>
</div>
</section>
<!-- ============ MENU ============ -->
<section class="section" id="menu" aria-labelledby="titre-menu">
<div class="conteneur">
<h2 id="titre-menu">Notre menu</h2>
<p class="intro">Produits locaux, pêche du jour. Prix en ariary (Ar).</p>
<div class="menu-grille">
<!-- Une catégorie = un <article> avec son titre h3.
Les plats sont dans un <dl> (liste de description) :
<dt> = le terme (le plat), <dd> = ses détails. -->
<article class="categorie">
<h3>Entrées</h3>
<dl class="plats">
<div class="plat">
<!-- Un <div> est autorisé DANS un <dl> pour grouper un
terme et ses descriptions : pratique pour la grille CSS. -->
<dt>Salade de cœurs de palmier</dt>
<dd class="description">Vinaigrette au citron vert et gingembre.</dd>
<dd class="prix">8 000 Ar</dd>
</div>
<div class="plat">
<dt>Samosas au poisson</dt>
<dd class="description">Trois pièces, sauce pimentée douce.</dd>
<dd class="prix">7 000 Ar</dd>
</div>
<div class="plat">
<dt>Soupe de crevettes</dt>
<dd class="description">Lait de coco et citronnelle.</dd>
<dd class="prix">9 000 Ar</dd>
</div>
</dl>
</article>
<article class="categorie">
<h3>Plats</h3>
<dl class="plats">
<div class="plat">
<dt>Poisson grillé à la vanille</dt>
<dd class="description">Pêche du jour, riz parfumé, légumes.</dd>
<dd class="prix">22 000 Ar</dd>
</div>
<div class="plat">
<dt>Romazava de zébu</dt>
<dd class="description">Le ragoût aux brèdes, plat national.</dd>
<dd class="prix">18 000 Ar</dd>
</div>
<div class="plat">
<dt>Poulet au coco</dt>
<dd class="description">Mijoté lentement, accompagné de riz.</dd>
<dd class="prix">17 000 Ar</dd>
</div>
<div class="plat">
<dt>Assiette végétarienne</dt>
<dd class="description">Légumes du marché, ravitoto et haricots.</dd>
<dd class="prix">14 000 Ar</dd>
</div>
</dl>
</article>
<article class="categorie">
<h3>Desserts</h3>
<dl class="plats">
<div class="plat">
<dt>Crème brûlée à la vanille</dt>
<dd class="description">Gousses de vanille d'Antalaha.</dd>
<dd class="prix">8 000 Ar</dd>
</div>
<div class="plat">
<dt>Banane flambée</dt>
<dd class="description">Au rhum arrangé, boule de glace coco.</dd>
<dd class="prix">7 500 Ar</dd>
</div>
<div class="plat">
<dt>Salade de fruits de saison</dt>
<dd class="description">Litchis, mangue, ananas selon l'arrivage.</dd>
<dd class="prix">6 000 Ar</dd>
</div>
</dl>
</article>
</div>
</div>
</section>
<!-- ============ HORAIRES (tableau) ============ -->
<section class="section section--alt" id="horaires" aria-labelledby="titre-horaires">
<div class="conteneur">
<h2 id="titre-horaires">Horaires d'ouverture</h2>
<div class="tableau-conteneur">
<table>
<!-- <caption> : le titre du tableau, lu par les lecteurs d'écran. -->
<caption>Heures d'ouverture de la semaine</caption>
<thead>
<tr>
<!-- scope="col" : la cellule d'en-tête décrit la COLONNE. -->
<th scope="col">Jour</th>
<th scope="col">Midi</th>
<th scope="col">Soir</th>
</tr>
</thead>
<tbody>
<tr>
<!-- scope="row" : la cellule d'en-tête décrit la LIGNE. -->
<th scope="row">Lundi</th>
<td colspan="2">Fermé</td>
<!-- colspan="2" : cette cellule occupe deux colonnes. -->
</tr>
<tr>
<th scope="row">Mardi au jeudi</th>
<td>11 h 30 – 14 h 30</td>
<td>18 h 30 – 21 h 30</td>
</tr>
<tr>
<th scope="row">Vendredi et samedi</th>
<td>11 h 30 – 14 h 30</td>
<td>18 h 30 – 22 h 30</td>
</tr>
<tr>
<th scope="row">Dimanche</th>
<td>11 h 30 – 15 h 30</td>
<td>Fermé</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ============ GALERIE ============ -->
<section class="section" id="galerie" aria-labelledby="titre-galerie">
<div class="conteneur">
<h2 id="titre-galerie">Galerie</h2>
<p class="intro">Le cadre, les produits, la région.</p>
<div class="galerie">
<!-- <figure> = image + légende <figcaption>.
width/height : les dimensions d'origine (16:9). Elles
permettent au navigateur de réserver la place avant le
chargement. loading="lazy" : l'image se charge seulement
quand on s'en approche (économie de données mobiles). -->
<figure>
<img src="medias/antalaha-baie-aube-paysage.svg" width="1600" height="900" loading="lazy"
alt="La baie d'Antalaha à l'aube, avec des pirogues sur l'eau calme">
<figcaption>La baie à l'aube, d'où arrive le poisson du matin.</figcaption>
</figure>
<figure>
<img src="medias/antalaha-vanille-paysage.svg" width="1600" height="900" loading="lazy"
alt="Gousses et fleurs de vanille sur un fond vert clair">
<figcaption>La vanille, star de nos desserts.</figcaption>
</figure>
<figure>
<img src="medias/antalaha-plage-palmiers-paysage.svg" width="1600" height="900" loading="lazy"
alt="Une plage de sable bordée de palmiers">
<figcaption>La plage, à deux pas de la terrasse.</figcaption>
</figure>
<figure>
<img src="medias/antalaha-ville-collines-paysage.svg" width="1600" height="900" loading="lazy"
alt="La ville d'Antalaha, ses maisons et ses collines au bord de la baie">
<figcaption>Antalaha, ville et collines.</figcaption>
</figure>
</div>
</div>
</section>
<!-- ============ RÉSERVATION ============ -->
<section class="section section--alt" id="reservation" aria-labelledby="titre-reservation">
<div class="conteneur">
<h2 id="titre-reservation">Réserver une table</h2>
<!--
IMPORTANT : CE FORMULAIRE NE S'ENVOIE NULLE PART.
Un vrai site enverrait les données à un serveur, grâce à
l'attribut action="https://.../reservation" et à un programme
côté serveur qui les enregistre. Ici, le site est « statique » :
il n'y a pas de serveur pour les recevoir, et le bac à sable du
portail bloque de toute façon l'envoi de formulaires.
Donc appuyer sur « Réserver » ne fait rien d'utile : c'est
volontaire, le but est d'apprendre à CONSTRUIRE le formulaire.
Ce que vous voyez ici est pourtant réel et fonctionne sans
serveur : les types de champs (date, heure, nombre), la
validation du navigateur (required, min, max) et les étiquettes.
action="#" = « renvoie vers cette même page ».
-->
<form class="formulaire" action="#" method="get">
<p class="message">Formulaire de démonstration : aucune réservation n'est réellement envoyée.</p>
<!-- Chaque champ : un <label> relié au champ par for="..." = id="...".
Cliquer sur l'étiquette place le curseur dans le champ, et
les lecteurs d'écran annoncent l'étiquette. -->
<div class="champ">
<label for="nom">Nom et prénom</label>
<!-- autocomplete="name" : le navigateur peut proposer la saisie.
required : le champ ne peut pas rester vide. -->
<input type="text" id="nom" name="nom" autocomplete="name" required>
</div>
<div class="champ">
<label for="tel">Téléphone</label>
<!-- type="tel" : clavier numérique sur téléphone. -->
<input type="tel" id="tel" name="tel" autocomplete="tel" placeholder="034 00 000 00" required>
</div>
<div class="ligne">
<div class="champ">
<label for="date">Date</label>
<!-- type="date" : le navigateur affiche un calendrier. -->
<input type="date" id="date" name="date" required>
</div>
<div class="champ">
<label for="heure">Heure</label>
<!-- step="900" : par pas de 900 secondes = 15 minutes. -->
<input type="time" id="heure" name="heure" min="11:30" max="21:30" step="900" required>
</div>
</div>
<div class="ligne">
<div class="champ">
<label for="personnes">Nombre de personnes</label>
<input type="number" id="personnes" name="personnes" min="1" max="12" value="2" required>
</div>
<div class="champ">
<label for="lieu">Emplacement</label>
<!-- <select> : liste déroulante. -->
<select id="lieu" name="lieu">
<option value="salle">En salle</option>
<option value="terrasse">Sur la terrasse</option>
</select>
</div>
</div>
<div class="champ">
<label for="remarques">Remarques (facultatif)</label>
<textarea id="remarques" name="remarques" rows="3"></textarea>
<p class="aide">Allergies, anniversaire, chaise haute...</p>
</div>
<!-- type="submit" : déclenche la validation puis l'envoi. -->
<button class="bouton" type="submit">Réserver</button>
</form>
</div>
</section>
<!-- ============ FAQ ============ -->
<section class="section faq" id="faq" aria-labelledby="titre-faq">
<div class="conteneur">
<h2 id="titre-faq">Questions fréquentes</h2>
<!-- <details> / <summary> : un panneau qui se déplie au clic,
SANS JavaScript. Le navigateur gère l'ouverture, et le
clavier (Entrée / Espace) fonctionne aussi.
Ajoutez l'attribut « open » à <details> pour l'ouvrir
au départ. -->
<details>
<summary>Faut-il réserver ?</summary>
<p>Ce n'est pas obligatoire, mais c'est conseillé le week-end et pour les groupes de plus de six personnes.</p>
</details>
<details>
<summary>Avez-vous des plats végétariens ?</summary>
<p>Oui : une assiette végétarienne est toujours au menu, et nous pouvons adapter d'autres plats.</p>
</details>
<details>
<summary>Peut-on payer par mobile money ?</summary>
<p>Oui, nous acceptons les espèces et les principaux paiements par mobile money.</p>
</details>
<details>
<summary>Y a-t-il un accès pour les personnes à mobilité réduite ?</summary>
<p>La salle est de plain-pied. Prévenez-nous à la réservation pour préparer la meilleure table.</p>
</details>
</div>
</section>
</main>
<!-- ============ PIED DE PAGE ============ -->
<footer class="pied">
<div class="conteneur">
<p>Le Vanillier, front de mer, Antalaha. Téléphone : <a href="tel:+261340000001">034 00 000 01</a></p>
<p>Site d'exemple pour apprendre le HTML et le CSS. Établissement fictif.</p>
<p>Illustrations libres de droits de la médiathèque du Portail Antalaha.</p>
</div>
</footer>
</body>
</html>