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 · 7.2 Ko
<!DOCTYPE html>
<!--
=====================================================================
index.html : page de présentation d'un artisan vannier d'Antalaha
=====================================================================
Rôle : c'est l'UNIQUE page du site. Le navigateur lit ce fichier de
haut en bas et construit la page à partir des balises.
Fichiers liés :
- css/style.css : toute la mise en forme (couleurs, tailles...)
- medias/*.svg : les illustrations (images vectorielles locales)
Les noms (« Rivo », etc.) sont fictifs : c'est un exemple pédagogique.
-->
<!-- lang="fr" : indique la langue de la page. Les lecteurs d'écran
prononcent alors correctement le texte, et le navigateur propose
la bonne traduction/césure. -->
<html lang="fr">
<head>
<!-- Encodage UTF-8 : indispensable pour afficher les accents (é, è, ç...). -->
<meta charset="utf-8">
<!-- Viewport : sans cette ligne, un téléphone affiche la page comme un
grand écran « dézoomé ». Avec elle, la largeur de la page = la largeur
de l'écran : c'est la base du « mobile d'abord ». -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Le titre apparaît dans l'onglet du navigateur et dans les résultats
de recherche. -->
<title>Rivo, vannier à Antalaha</title>
<!-- Description courte, utilisée par les moteurs de recherche. -->
<meta name="description" content="Rivo, artisan vannier à Antalaha : paniers, chapeaux et nattes tressés à la main. Découvrez ses produits et contactez-le.">
<!-- Lien vers la feuille de style. Chemin RELATIF : « css/style.css »
signifie « le dossier css, à côté de ce fichier ». -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Lien d'évitement : invisible jusqu'à la touche Tab. Il permet aux
personnes qui naviguent au clavier de sauter directement au contenu. -->
<a class="lien-evitement" href="#contenu">Aller au contenu</a>
<!-- <header> : l'en-tête de la page (ici : le nom et la phrase d'accroche). -->
<header class="entete">
<h1>Rivo, vannier</h1>
<p class="accroche">Paniers, chapeaux et nattes tressés à la main, à Antalaha.</p>
</header>
<!-- <main> : le contenu principal, UNE seule fois par page. -->
<main id="contenu">
<!-- Section 1 : qui est l'artisan ? -->
<section class="section" aria-labelledby="titre-qui">
<!-- aria-labelledby relie la section à son titre : un lecteur d'écran
annonce « Qui suis-je ? » en entrant dans la section. -->
<h2 id="titre-qui">Qui suis-je ?</h2>
<!-- <figure> + <figcaption> : une image avec sa légende.
width/height : réservent la place avant le chargement, ce qui
évite que la page « saute ». Le CSS rendra l'image fluide.
alt : le texte lu à la place de l'image (jamais vide ici, car
l'image apporte de l'information). -->
<figure class="illustration">
<img src="medias/antalaha-ravenala-paysage.svg" width="1600" height="900"
alt="Des arbres du voyageur (ravenalas) aux grandes feuilles en éventail, devant le ciel d'Antalaha">
<figcaption>Les ravenalas, dont les feuilles servent à tresser.</figcaption>
</figure>
<p>Je m'appelle Rivo et je tresse des paniers depuis plus de vingt ans.
J'ai appris le métier auprès de ma grand-mère, dans un village près
d'Antalaha. Aujourd'hui, mon atelier se trouve à côté du marché.</p>
<p>Je travaille des fibres locales : feuilles de ravenala, raphia et
jonc. Chaque pièce est unique et demande de un à trois jours de travail.</p>
</section>
<!-- Section 2 : les produits. Une liste <ul> convient bien : ce sont
des éléments de même nature. -->
<section class="section" aria-labelledby="titre-produits">
<h2 id="titre-produits">Mes produits</h2>
<ul class="produits">
<!-- <article> : un bloc qui a du sens tout seul (une fiche produit). -->
<li>
<article class="fiche">
<h3>Panier de marché</h3>
<p>Solide et léger, avec deux anses. Idéal pour les courses.</p>
<!-- <strong> : met en valeur (importance), contrairement à <b>
qui ne fait que mettre en gras. -->
<p class="prix"><strong>15 000 Ar</strong></p>
</article>
</li>
<li>
<article class="fiche">
<h3>Chapeau de paille</h3>
<p>Tressé serré pour protéger du soleil, taille réglable.</p>
<p class="prix"><strong>8 000 Ar</strong></p>
</article>
</li>
<li>
<article class="fiche">
<h3>Natte de sol</h3>
<p>Grande natte colorée pour la maison ou la plage.</p>
<p class="prix"><strong>25 000 Ar</strong></p>
</article>
</li>
<li>
<article class="fiche">
<h3>Corbeille à vanille</h3>
<p>Petite corbeille à couvercle pour ranger vos gousses.</p>
<p class="prix"><strong>6 000 Ar</strong></p>
</article>
</li>
</ul>
<p class="note">Prix indicatifs en ariary (Ar). Commande sur mesure possible.</p>
</section>
<!-- Section 3 : contact. <address> est réservé aux coordonnées de
contact de l'auteur de la page. -->
<section class="section" aria-labelledby="titre-contact">
<h2 id="titre-contact">Me contacter</h2>
<figure class="illustration">
<img src="medias/antalaha-plage-palmiers-paysage.svg" width="1600" height="900"
loading="lazy"
alt="Plage de sable et palmiers à Antalaha">
<figcaption>L'atelier est à dix minutes à pied de la plage.</figcaption>
</figure>
<address class="contact">
<!-- Les icônes sont copiées EN LIGNE (<svg> dans la page) : ainsi
stroke="currentColor" prend la couleur du texte. Dans une
balise <img>, elles resteraient noires.
aria-hidden="true" : l'icône est décorative, le texte à côté
dit déjà tout. -->
<p>
<svg class="icone" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>
Atelier : rue du Marché, Antalaha
</p>
<p>
<svg class="icone" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>
<!-- href="tel:" : sur téléphone, un appui lance l'appel. -->
<a href="tel:+261340000000">034 00 000 00</a>
</p>
<p>Ouvert du lundi au samedi, de 7 h à 17 h.</p>
</address>
</section>
</main>
<!-- <footer> : le pied de page (mentions, crédits). -->
<footer class="pied">
<p>Site d'exemple pour apprendre le HTML et le CSS. Personnage fictif.</p>
<p>Illustrations libres de droits de la médiathèque du Portail Antalaha.</p>
</footer>
</body>
</html>