PhpBB Lab Académie

Vous poursuivez le site Mon premier site HTML construit dans le cours précédent : index.html, apropos.html, contact.html et l’image ordinateur.jpg. Un seul fichier styles.css met progressivement les trois pages en forme.

Vous travaillez sur les vrais contenus du projet : les titres Accueil, À propos et Contact, la navigation, les deux notes de progression, l’image de l’espace de travail, le tableau des trois pages et le formulaire de contact. Chaque leçon indique ce qu’il faut conserver, ajouter ou remplacer, puis propose un exercice, sa correction et un QCM.

Les huit chapitres comprennent chacun trois leçons. Le cours se termine par la vérification du même site, pas par la création d’un autre projet. Les notions CSS enseignées servent la lisibilité, la mise en page et l’utilisation au clavier. Le formulaire reste sans traitement serveur ; ce traitement appartient au cours PHP suivant.

À la fin du cours, vous saurez relier une feuille CSS commune aux trois pages ; écrire des règles et cibler les éléments existants avec des classes ; construire une typographie lisible et vérifier les contrastes ; régler les espaces, les bordures et les dimensions ; comprendre l’héritage, la cascade et la spécificité dans les exemples du site.

Vous saurez aussi organiser la navigation avec Flexbox, disposer les deux notes de progression avec Grid, adapter ces composants sans changer l’ordre du document, écrire une media query et passer à une organisation mobile-first.

Vous terminerez en mettant en forme les champs du formulaire sans dénaturer les cases et boutons radio, en conservant un focus visible, puis en contrôlant les trois pages avec des petites largeurs, le zoom, des textes agrandis et la navigation au clavier.

Aucune connaissance préalable de CSS n’est nécessaire. Ayez terminé le cours Apprendre le HTML : créer et structurer ses premières pages web.

Reprenez son dossier mon-premier-site avec index.html, apropos.html, contact.html et votre image ordinateur.jpg. L’accueil contient Ce que j’ai appris, Mes notes de progression, Mon espace de travail et Les pages de mon site. La page Contact conserve le formulaire de la dernière correction HTML, avec ses labels, ses champs obligatoires, ses deux boutons radio et sa case de copie.

Vous connaissez déjà les éléments HTML employés. Les nouveaux attributs de classe, le conteneur div et la déclaration de viewport nécessaires à la mise en forme seront expliqués au moment de leur introduction.

Votre dossier mon-premier-site, un éditeur de texte ou de code et un navigateur suffisent. Nous créons un seul fichier styles.css dans le même dossier que les trois pages.

Conservez votre propre image ordinateur.jpg et son texte alternatif adapté. Aucun serveur, aucune bibliothèque CSS, aucun JavaScript et aucune base de données ne sont nécessaires.

Les corrections reprennent les formulations du cours HTML. Lorsque vous avez personnalisé un paragraphe ou choisi une autre image, gardez votre contenu : les opérations portent sur les éléments identifiés, pas sur un remplacement arbitraire des textes.