Mini-projet HTML — site personnel
Auparavant, le résumé cartographiait votre boîte HTML et pointait ici comme étape de pratique. Cette leçon n’est pas une autre carte de compétences. C’est un brief de construction : planifiez trois pages, partagez une coquille de navigation, remplissez du vrai contenu, et prouvez le site avec une courte table d’acceptation.
Pourquoi un mini-projet maintenant
Réponse directe
1) Créez au moins trois fichiers : index.html, about.html, contact.html. 2) Réutilisez les mêmes landmarks header/nav/footer avec des liens qui fonctionnent. 3) Intro réelle en accueil, courte histoire en à propos, formulaire nom/email/message labellisé en contact. 4) Une image informative avec alt utile plus liste de skills ou petit tableau. 5) Tabulez au clavier ; corrigez labels manquants et liens cassés. 6) Cochez chaque ligne d’acceptation avant de dire « terminé ».
📊 Acceptance criteria
| Item | Done when |
|---|---|
| Shared nav | Same landmark links work on every page |
| Semantics | header, nav, main, and footer on each page |
| Home & about | Real paragraphs — not placeholder lorem forever |
| Media | At least one informative image with useful alt |
| Data | A skills list or a small facts table |
| Form | Labeled name, email, message + a real submit button |
| Quality | Keyboard tab order makes sense; no unlabeled controls |
Planifiez avant de taper
Esquissez d’abord : nom du site, but des trois pages, quelle photo, quelles compétences/faits. Décidez du dossier — les trois HTML ensemble pour des liens relatifs simples. Nommez personne/marque une fois pour h1 et title cohérents.
Coquille partagée — commencez ici
Copiez header/nav dans chaque page ; ne changez que le main. Les href relatifs doivent matcher les noms de fichiers. Plus tard un vrai button type=submit — ne simulez pas l’envoi avec un div vide.
<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>
Lire la coquille
- header+nav+main+footer donnent des landmarks clairs
- aria-label sur nav aide s’il y a une seconde nav
- Les liens relatifs lient les trois fichiers
- Répétez la coquille ; ne changez que main
- Mettez un title court sur chaque page
- Le résumé listait les habitudes — ici elles s’appliquent ensemble
Starter du formulaire de contact
La page contact est où les compétences formulaire rencontrent le projet. Associez chaque contrôle à un label visible. Incluez name pour un backend futur. Un vrai submit dans le balisage même sans envoi serveur encore.
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>
Ordre de construction qui marche
- Dupliquez la coquille en trois fichiers ; corrigez la nav jusqu’à ce que tout joigne. 2. Écrivez l’intro accueil et l’histoire à propos (+ liste/tableau). 3. Une photo dans images/ avec src et alt précis. 4. Collez le formulaire ; confirmez labels, names et submit. 5. Ouvrez les trois pages ; rétrécissez ; tabulez jusqu’au submit. 6. Cochez les lignes d’acceptation — CSS léger ensuite.
Erreurs faciles sur ce projet
- Copier la nav une fois puis n’éditer qu’une page jusqu’à ce que les liens divergent
- Champs contact avec placeholder seulement sans label
- Tableau de mise en page pour toute la page au lieu de landmarks
- alt vide sur une photo porteuse de sens
- Laisser du lorem et dire « terminé »
- Oublier l’habitude du résumé : structure et labels d’abord
Résumé
- Cette session est un build pratique de site personnel, pas une autre carte de cours
- Trois pages partagent header/nav/main/footer avec des liens relatifs qui marchent
- Combinez médias, liste ou tableau, et formulaire labellisé
- La table d’acceptation est votre définition de terminé
- Vérifiez au clavier avant de polir avec CSS
- Les sujets optionnels suivants (SVG…) sont des extras — livrez d’abord ce site
Rappel court
Si vous bloquez, revenez à la table d’acceptation — pas à mémoriser de nouveaux tags. Le but est de pratiquer la combinaison des compétences du cours dans un petit site ouvrable dans le navigateur.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut