Vérifier et terminer le site HTML et CSS
Objectif de la leçon
Contrôler les trois pages finies avec une méthode reproductible, comparer les fichiers à la correction complète et préparer la suite PHP sans prétendre avoir un formulaire déjà fonctionnel côté serveur.
Explications
Le résultat à vérifier
Vous terminez le site commencé dans le cours HTML, pas un nouveau projet. Cette leçon n’introduit aucune nouvelle propriété CSS. La correction rassemble les trois documents et styles.css pour permettre une comparaison précise.
Gardez vos textes personnalisés et votre propre ordinateur.jpg lorsqu’ils remplissent le même rôle. La correction reprend les formulations du cours HTML pour servir de référence commune.
1. Vérifier les fichiers et leurs liaisons
Le dossier mon-premier-site contient index.html, apropos.html, contact.html, ordinateur.jpg et styles.css. Chaque page possède une seule liaison vers la feuille et une seule déclaration de viewport. Les title restent distincts.
Les liens Accueil, À propos et Contact doivent fonctionner depuis chaque page. Un chemin incorrect ne se corrige pas avec CSS : vérifiez le nom réel du fichier.
2. Vérifier l’accueil par son plan HTML
Retrouvez Accueil, puis Ce que j’ai appris, Mes notes de progression, Mon espace de travail et Les pages de mon site. Les deux articles restent Ma première page complète puis Mon formulaire de contact.
Le div de grille ne doit contenir que ces deux articles. L’image conserve son alt adapté. Le tableau conserve la légende Rôle des trois pages principales et les relations d’en-têtes Page, Fichier et Rôle.
Sans la feuille CSS, cette organisation doit encore avoir du sens. Aucun texte essentiel ne doit exister uniquement dans une décoration CSS.
3. Vérifier le formulaire dans son ordre
Retrouvez le nom, l’e-mail, le téléphone facultatif, la préférence de contact, le message, la copie et le bouton Envoyer le message. Les IDs et les correspondances for/id restent ceux du cours HTML.
Testez les contraintes HTML avec des valeurs fictives : champ obligatoire vide, e-mail de forme incorrecte, sélection des radios et activation de copie. Utilisez Tab, Maj + Tab, les flèches pour le groupe radio et Espace pour la case selon le fonctionnement du navigateur.
Le téléphone est toujours facultatif dans le HTML fourni. Le choix Par téléphone ne rend pas magiquement ce champ obligatoire par CSS. Cette règle conditionnelle et le traitement des données seront des sujets PHP ; nous ne modifions pas silencieusement la logique du formulaire dans un cours de présentation.
4. Vérifier des conditions d’affichage différentes
Contrôlez les trois pages sur une grande largeur et à 320 pixels CSS. Testez le zoom à 200% et 400%, puis le texte agrandi à 200%. Les notes peuvent s’empiler et le menu devenir vertical ; aucune information ne doit être perdue.
Vérifiez aussi les adaptations d’espacement du texte : une hauteur de ligne d’au moins 1,5 fois la taille, un espace après les paragraphes d’au moins 2 fois cette taille, un espacement des lettres de 0,12 fois et des mots de 0,16 fois. Ce sont des conditions de contrôle de la robustesse, pas une obligation d’imposer toutes ces valeurs dans le design par défaut.
Observez particulièrement la longue légende du formulaire, les noms de fichiers du tableau et les contours de focus. Un seul débordement doit conduire à chercher l’élément en cause, pas à masquer toute la zone.
5. Diagnostiquer sans modifier au hasard
Pour une règle qui semble absente, vérifiez le fichier chargé, le sélecteur et la classe HTML. Pour une mauvaise valeur, examinez les déclarations concurrentes et la cascade. Pour un dépassement, examinez la largeur, le minimum, les bordures et le contenu.
L’inspecteur du navigateur permet de consulter les règles appliquées et les valeurs calculées. Un validateur HTML ou CSS aide à repérer des erreurs de syntaxe, mais ne remplace ni un parcours clavier ni une vérification de compréhension avec une technologie d’assistance.
Après une correction, retestez les trois pages : la feuille est partagée.
6. Ce que vous avez terminé
Vous avez conservé le contenu HTML et ajouté une présentation partagée, lisible et adaptable. Le menu utilise Flexbox ; les deux notes utilisent Grid ; le tableau et le formulaire gardent leur structure propre.
La présence de ces techniques ne suffit pas à revendiquer une conformité absolue ou une certification d’accessibilité. Les résultats doivent être vérifiés sur les contenus et environnements réellement utilisés.
Vous pouvez maintenant poursuivre le parcours avec PHP en réutilisant contact.html et les noms de données déjà préparés. Aucun nouveau petit site n’est nécessaire.
Référence technique, pour approfondir
W3C — Espacement du texte
Exemple commenté
Trois vérifications attendues sur le projet terminé :
Accueil
Les deux notes peuvent passer de deux colonnes à une seule, sans modifier leurs titres ni leur ordre.
À propos
Le paragraphe de présentation utilise la même typographie et le même cadre de lecture que l’accueil.
Contact
Les quatre saisies s’adaptent à leur conteneur ; les radios et copie gardent leur taille native ; tous les contrôles restent nommés et repérables au clavier.
Exercice à réaliser
Étape 1
Comparez les liaisons CSS, les title et les meta viewport des trois documents avec la correction. Gardez vos contenus personnalisés pertinents.
Étape 2
Parcourez les titres, les liens, l’image et le tableau de l’accueil. Vérifiez l’ordre du contenu, pas seulement le dessin des colonnes.
Étape 3
Parcourez Contact au clavier, contrôlez les labels et testez uniquement des données fictives. Ne supposez aucun envoi d’e-mail.
Étape 4
Effectuez les tests de petite largeur, de zoom, d’agrandissement et d’espacement du texte décrits dans la leçon. Notez page, élément, problème et correction pour tout échec.
Étape 5
Retirez les essais restants et expliquez, avec vos propres mots, le rôle de la feuille partagée, de Flexbox, de Grid et de la media query. Le cours CSS s’arrête ici.
Correction et résultat attendu
Correction de référence du même site
Ces fichiers reprennent les corrections du cours HTML. Les textes, liens, niveaux de titres, données du tableau et contrôles du formulaire ont été conservés. Les changements HTML de ce cours sont les classes expliquées, le div autour des deux notes, le link vers styles.css et la meta viewport.
Cette référence sert à comparer votre projet, pas à effacer vos textes personnalisés. Pour chaque différence, retrouvez la leçon qui explique la modification.
styles.css
styles.css
/* Modèle de boîte */
* {
box-sizing: border-box;
}
/* Base commune */
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #1f2937;
background-color: #ffffff;
margin: 0;
padding: 1rem;
overflow-wrap: anywhere;
}
header, main, footer {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
/* Nom du site */
.nom-site {
color: #163b65;
background-color: #eff6ff;
font-weight: bold;
margin: 0;
padding: 1rem;
}
/* Navigation commune */
.navigation-principale {
display: flex;
gap: 1rem;
justify-content: flex-start;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
flex-direction: column;
}
.navigation-principale a {
display: block;
padding: 0.5rem;
}
/* Couleur et espacements des titres */
h1, h2, h3 {
color: #163b65;
margin-top: 0;
margin-bottom: 0.75rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
/* Introductions */
.introduction {
color: #374151;
}
section {
margin-bottom: 2rem;
}
/* Les deux notes de progression */
.grille-notes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.note-progression {
background-color: #f1f5f9;
padding: 1rem;
margin-bottom: 0;
border: 0.125rem solid #64748b;
min-width: 0;
}
/* Image du site */
img {
max-width: 100%;
height: auto;
}
/* Tableau des pages */
table {
border-collapse: collapse;
width: 100%;
}
caption {
font-weight: bold;
text-align: left;
}
th, td {
border: 0.0625rem solid #64748b;
padding: 0.5rem;
text-align: left;
}
/* Typographie des contrôles */
input, textarea, button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* Formulaire de contact */
.formulaire-contact {
width: 100%;
max-width: 40rem;
}
.libelle-champ {
display: block;
margin-bottom: 0.5rem;
}
.champ-texte {
width: 100%;
max-width: 100%;
padding: 0.75rem;
border: 0.125rem solid #64748b;
color: #1f2937;
background-color: #ffffff;
}
fieldset {
min-width: 0;
border: 0.125rem solid #64748b;
padding: 1rem;
}
legend {
max-width: 100%;
font-weight: bold;
}
textarea {
min-height: 8rem;
resize: vertical;
}
button {
padding: 0.75rem;
border: 0.125rem solid #163b65;
color: #ffffff;
background-color: #163b65;
}
button:hover {
background-color: #1f2937;
}
/* Liens */
a {
color: #163b65;
text-decoration: underline;
}
a:hover {
text-decoration-thickness: 0.15em;
}
/* Focus : base visible */
a:focus, input:focus, textarea:focus, button:focus {
outline: 0.1875rem solid #163b65;
outline-offset: 0.1875rem;
}
/* Focus : renforcement */
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
outline-width: 0.25rem;
}
/* Pied de page */
footer {
margin-top: 2rem;
border-top: 0.125rem solid #64748b;
padding-top: 1rem;
}
/* Adaptation de la navigation */
@media (min-width: 40rem) {
.navigation-principale {
flex-direction: row;
align-items: center;
}
}
index.html
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accueil - Mon premier site HTML</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<p class="nom-site">Mon premier site HTML</p>
<nav>
<ul class="navigation-principale">
<li><a href="index.html">Accueil</a></li>
<li><a href="apropos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Accueil</h1>
<p class="introduction">Bienvenue sur le site que je construis pendant mon apprentissage de HTML.</p>
<section>
<h2>Ce que j’ai appris</h2>
<ul>
<li>Créer un document HTML complet</li>
<li>Organiser les titres et les paragraphes</li>
<li>Créer des liens et ajouter des images</li>
<li>Utiliser des éléments sémantiques</li>
<li>Construire des tableaux et des formulaires accessibles</li>
</ul>
</section>
<section>
<h2>Mes notes de progression</h2>
<div class="grille-notes">
<article class="note-progression">
<h3>Ma première page complète</h3>
<p>J’ai appris à structurer une page avec header, nav, main, section et footer.</p>
</article>
<article class="note-progression">
<h3>Mon formulaire de contact</h3>
<p>J’ai appris à associer les labels aux champs et à choisir un type de saisie adapté.</p>
</article>
</div>
</section>
<section>
<h2>Mon espace de travail</h2>
<p>J’utilise un ordinateur et un éditeur de texte pour écrire mes fichiers HTML.</p>
<img alt="Ordinateur portable ouvert sur un éditeur de code" src="ordinateur.jpg">
</section>
<section>
<h2>Les pages de mon site</h2>
<p>Le site contient actuellement trois pages principales.</p>
<table>
<caption>Rôle des trois pages principales</caption>
<thead>
<tr>
<th scope="col">Page</th>
<th scope="col">Fichier</th>
<th scope="col">Rôle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Accueil</th>
<td>index.html</td>
<td>Présenter le site</td>
</tr>
<tr>
<th scope="row">À propos</th>
<td>apropos.html</td>
<td>Présenter le projet</td>
</tr>
<tr>
<th scope="row">Contact</th>
<td>contact.html</td>
<td>Permettre la prise de contact</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>Site créé pour apprendre HTML.</p>
</footer>
</body>
</html>
apropos.html
apropos.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>À propos - Mon premier site HTML</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<p class="nom-site">Mon premier site HTML</p>
<nav>
<ul class="navigation-principale">
<li><a href="index.html">Accueil</a></li>
<li><a href="apropos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>À propos</h1>
<p class="introduction">Ce site me permet de pratiquer progressivement les bases de HTML.</p>
</main>
<footer>
<p>Site créé pour apprendre HTML.</p>
</footer>
</body>
</html>
contact.html
contact.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Contact - Mon premier site HTML</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<p class="nom-site">Mon premier site HTML</p>
<nav>
<ul class="navigation-principale">
<li><a href="index.html">Accueil</a></li>
<li><a href="apropos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Contact</h1>
<p class="introduction">Utilisez le formulaire ci-dessous pour rédiger un message.</p>
<form class="formulaire-contact">
<p>
<label class="libelle-champ" for="nom">Votre nom (obligatoire)</label>
<input autocomplete="name" class="champ-texte" id="nom" name="nom" required="" type="text"/>
</p>
<p>
<label class="libelle-champ" for="email">Votre adresse e-mail (obligatoire)</label>
<input autocomplete="email" class="champ-texte" id="email" name="email" required="" type="email"/>
</p>
<p>
<label class="libelle-champ" for="telephone">Votre numéro de téléphone (facultatif)</label>
<input autocomplete="tel" class="champ-texte" id="telephone" name="telephone" type="tel"/>
</p>
<fieldset>
<legend>Comment préférez-vous être contacté ? (obligatoire)</legend>
<p>
<input id="contact-email" name="contact-prefere" required="" type="radio" value="email"/>
<label for="contact-email">Par e-mail</label>
</p>
<p>
<input id="contact-telephone" name="contact-prefere" type="radio" value="telephone"/>
<label for="contact-telephone">Par téléphone</label>
</p>
</fieldset>
<p>
<label class="libelle-champ" for="message">Votre message (obligatoire)</label>
<textarea class="champ-texte" id="message" name="message" required=""></textarea>
</p>
<p>
<input id="copie" name="copie" type="checkbox" value="oui"/>
<label for="copie">Recevoir une copie de mon message</label>
</p>
<p>
<button type="submit">Envoyer le message</button>
</p>
</form>
</main>
<footer>
<p>Site créé pour apprendre HTML.</p>
</footer>
</body>
</html>
Image et formulaire
Conservez votre ordinateur.jpg dans le dossier. L’image elle-même n’est pas fabriquée par ce code ; son alternative doit correspondre à votre ressource.
Le formulaire garde la structure HTML étudiée. Sans action et method explicites, la soumission native utilise par défaut la page courante et la méthode GET ; elle n’envoie pas un message par e-mail. N’y saisissez pas de données personnelles pendant les essais. Le traitement, la validation serveur et les dépendances entre choix de téléphone et numéro renseigné seront traités dans le cours PHP.
Le cours CSS est terminé : vous avez mis en forme le projet HTML existant, sans le remplacer par un autre site.
À retenir
Le projet HTML a été conservé et mis en forme leçon après leçon. Les trois pages partagent styles.css. La vérification finale porte sur les contenus, le tableau, le formulaire, le clavier et l’adaptation de l’affichage. Le traitement réel des données appartient à la suite PHP.
Seuil de réussite, en pourcentage : 100 %. QCM obligatoire pour terminer le cours.