HTML on Maxence Lagalle

Travaux pratiques CSS 3 : mettre en forme le mini-site

Wed, 28 Oct 2026 12:00:00 +0100

Suite des travaux pratiques : vous partez de la page HTML terminée à l’exercice 7 (voir le TP HTML) et vous la mettez en forme avec CSS, de la charte graphique jusqu’au responsive design, sans jamais perdre de vue l’accessibilité. Si vous n’avez pas terminé la première partie, vous pouvez repartir du fichier index.html de l’annexe en bas de page.

Travaux pratiques HTML 5 : le mini-site d'une ville

Wed, 28 Oct 2026 12:00:00 +0100

Cette page rassemble les exercices du chapitre HTML. Vous allez construire pas à pas une page d’accueil complète, en appliquant chaque notion du cours. Chaque exercice est suivi de son corrigé, à ouvrir seulement après avoir essayé.

Mode d’emploi pour apprendre seul

Ces exercices ont été conçus pour un stage de deux journées, mais ils se pratiquent très bien en autonomie, à raison d’environ une journée de travail pour chacune des deux parties (HTML puis CSS).

Accessibilité et CSS : approfondissements et boîte à outils

Tue, 21 Jul 2026 12:00:00 +0200

10.1. CSS et accessibilité

Le focus visible

Les utilisateurs au clavier repèrent leur position grâce au contour de focus que le navigateur dessine autour de l’élément actif. Le supprimer (outline: none) sans le remplacer rend le site inutilisable au clavier. Pour le personnaliser :

a:focus-visible,
button:focus-visible {
 outline: 3px solid #1f4e79;
 outline-offset: 2px;
}

Respecter les préférences de l’utilisateur

Deux media queries adaptent la page aux réglages du système d’exploitation :

/* Réduire les animations pour les personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
 * {
 animation: none;
 transition: none;
 }
}
 
/* Proposer un thème sombre */
@media (prefers-color-scheme: dark) {
 :root {
 --fond: #1a1a2e;
 --texte: #f0f0f0;
 }
}

Masquer sans exclure

display: none et visibility: hidden retirent un contenu de l’écran et des lecteurs d’écran. Pour un texte destiné aux seuls lecteurs d’écran (préciser le contexte d’un bouton-icône, par exemple), on utilise une classe utilitaire consacrée, dite « sr-only », qui masque visuellement sans retirer de l’arbre d’accessibilité :

Le web, les standards et l'accessibilité

Tue, 21 Jul 2026 12:00:00 +0200

1.1. Trois langages complémentaires

Une page web moderne repose sur trois langages aux rôles bien distincts :

HTML (HyperText Markup Language) décrit le contenu et sa structure : titres, paragraphes, images, liens, tableaux, formulaires…
CSS (Cascading Style Sheets) décrit la présentation : couleurs, polices, dimensions, positionnement des éléments.
JavaScript apporte l’interactivité : réaction aux actions de l’utilisateur, modification dynamique de la page. Il n’est pas traité dans cette formation.

Cette séparation des responsabilités est un principe fondamental : un document HTML doit rester compréhensible et utilisable même sans CSS ni JavaScript. C’est aussi la base de l’accessibilité et du référencement.

Tableaux et formulaires en HTML 5

Tue, 14 May 2024 18:00:00 +0100

Un tableau HTML sert à présenter des données tabulaires : des valeurs qui se lisent en croisant lignes et colonnes. Historiquement, les tableaux ont aussi été détournés pour faire de la mise en page ; cette pratique est aujourd’hui à proscrire absolument — c’est le rôle de CSS (Flexbox et Grid, chapitre 8).

4.1. Tableau simple

Un tableau est délimité par <table>. Chaque ligne est un <tr> (table row), qui contient des cellules de deux types : <th> (table header) pour les en-têtes et <td> (table data) pour les données. Une légende, fortement recommandée, s’ajoute avec <caption> en premier enfant de <table>.

Principales balises HTML 5

Thu, 09 May 2024 21:15:00 +0100

Le standard définit plus d’une centaine de balises, mais un petit sous-ensemble couvre l’immense majorité des besoins. Ce chapitre présente les balises usuelles, en dehors des tableaux et formulaires qui font l’objet des chapitres 4 et 5.

3.1. Titres et hiérarchie

Les balises <h1> à <h6> définissent six niveaux de titres. Elles structurent le document comme le ferait le plan d’un rapport :

une page contient en principe un seul <h1>, qui annonce son sujet principal ;
les niveaux s’enchaînent sans saut : un <h3> ne doit apparaître que sous un <h2> ;
on ne choisit jamais un niveau de titre pour sa taille d’affichage — c’est le rôle de CSS.

Syntaxe HTML 5 et structure sémantique d'une page web

Tue, 07 May 2024 11:30:00 +0100

2.1. Une syntaxe héritée de XML

La syntaxe de HTML 5 est héritée de celle de XML, avec quelques assouplissements. Un document est un arbre composé de nœuds, définis au moyen de balises :

balise ouvrante : <noeud> ;
balise fermante : </noeud> ;
balise vide (auto-fermante) : <noeud/> — en HTML 5, la barre oblique finale est facultative (<img> et <img/> sont équivalents).

Un nœud texte s’insère entre une balise ouvrante et une balise fermante. Les balises peuvent être complétées d’attributs, sous forme de paires clé/valeur, chaque attribut étant unique à l’échelle d’une balise :