Formation HTML

Leçon 1 • Configuration de votre environnement de développement

Guide l'installation d'un éditeur de code et des outils de développement du navigateur. Les étudiants disposeront d'une configuration locale opérationnelle prête pour le codage pratique.

Leçon 2 • Fonctionnement du Web

Couvre la communication client-serveur, les navigateurs et les bases du protocole HTTP. Fournit le contexte expliquant pourquoi la structure HTML est importante dans la diffusion Web.

Leçon 3 • Ce qu'est le HTML et ce qu'il fait

Définit le HTML comme un langage de balisage et explique sa relation avec le CSS et JavaScript. Ancre les étudiants dans la responsabilité spécifique du HTML : la structure du contenu.

Leçon 1 • Titres, paragraphes et éléments de texte

Couvre h1–h6, p, br, hr, strong, em et les éléments en ligne associés. Les étudiants structurent un contenu textuel lisible avec des choix sémantiques corrects.

Leçon 2 • Balises, éléments et attributs

Explique les balises ouvrantes et fermantes, les éléments auto-fermants et la syntaxe des attributs. Construit le modèle mental que les étudiants appliqueront à chaque élément tout au long du cours.

Leçon 3 • Listes : ordonnées, non ordonnées et de description

Enseigne les éléments ul, ol, li, dl, dt et dd avec un imbrication correcte. Les étudiants choisissent le type de liste approprié en fonction du sens du contenu.

Leçon 1 • Balises Meta essentielles

Couvre les balises meta pour le jeu de caractères, le viewport, la description et l'auteur. Les étudiants configurent les métadonnées minimales requises pour chaque page qu'ils publient.

Leçon 2 • Métadonnées Open Graph et sociales

Présente les balises meta Open Graph et Twitter Card pour des aperçus sociaux riches. Les étudiants configurent les métadonnées qui contrôlent l'apparence des pages lorsqu'elles sont partagées.

Leçon 3 • Lien vers les ressources externes

Enseigne l'élément link pour les feuilles de style, les icônes et le préchargement des ressources. Les étudiants connectent correctement les fichiers CSS et les favicons en utilisant rel et href.

Leçon 1 • Incorporation d'images

Enseigne l'élément img, les attributs src, alt, width et height. Les étudiants intègrent des images accessibles avec des chemins corrects et un texte alternatif pertinent.

Leçon 2 • Figures et légendes

Présente figure et figcaption pour regrouper sémantiquement les images avec un texte descriptif. Renforce les principes HTML sémantiques présentés au chapitre 2.

Leçon 3 • Hyperliens avec l'élément Anchor

Couvre l'élément a, les attributs href, target et rel pour les liens internes et externes. Les étudiants mettent en œuvre la navigation entre les pages et vers les sites externes.

Leçon 1 • Tableaux accessibles et sémantiques

Applique les rôles ARIA et les modèles de résumé pour améliorer l'accessibilité des tableaux. Renforce le principe selon lequel la structure HTML communique du sens à tous les utilisateurs.

Leçon 2 • Fusion de lignes et de colonnes

Enseigne les attributs colspan et rowspan pour les dispositions de données complexes. Les étudiants fusionnent des cellules sans briser la structure du tableau ni l'accessibilité.

Leçon 3 • Structure de base d'un tableau

Présente les éléments table, tr, td et th pour créer des lignes et des colonnes. Les étudiants construisent un tableau de données simple à partir de zéro.

Leçon 1 • Types de saisie et contrôles de texte

Enseigne les types de saisie text, email, password, number, date et autres. Les étudiants sélectionnent le type correct pour déclencher les claviers et la validation appropriés.

Leçon 2 • Contrôles de sélection : cases à cocher, boutons radio et listes déroulantes

Couvre les éléments checkbox, radio, select, option et optgroup. Les étudiants mettent en œuvre des choix groupés avec des attributs name et value corrects.

Leçon 3 • Étiquettes, fieldsets et formulaires accessibles

Enseigne label, fieldset et legend pour associer les contrôles à des descriptions. Les étudiants construisent des formulaires entièrement utilisables avec le clavier et le lecteur d'écran.

Leçon 4 • Validation de formulaire HTML5

Couvre les attributs required, pattern, min, max et minlength pour la validation côté client. Les étudiants réduisent les soumissions invalides sans écrire de JavaScript.

Leçon 1 • Éléments de repère au niveau de la page

Couvre les éléments header, nav, main, aside, footer et section ainsi que leur utilisation correcte. Les étudiants mappent une mise en page de page complète aux zones de repère appropriées.

Leçon 2 • Pourquoi la sémantique est importante

Explique comment les éléments sémantiques communiquent du sens aux navigateurs, aux moteurs de recherche et aux technologies d'assistance. Motive la transition d'un balisage riche en divs à un balisage sémantique.

Leçon 3 • Éléments sémantiques en ligne

Enseigne time, mark, abbr, cite, code, kbd et samp pour un sens précis en ligne. Les étudiants annotent le contenu avec des éléments qui transmettent une intention sémantique spécifique.

Leçon 4 • Article, section et regroupement de contenu

Distingue article, section et div pour regrouper le contenu connexe. Les étudiants appliquent l'élément correct en fonction du caractère autonome ou thématique du contenu.

Leçon 1 • Accessibilité clavier et gestion du focus

Enseigne tabindex, l'ordre du focus et les liens de navigation rapide. Les étudiants vérifient que tous les éléments interactifs sont accessibles et utilisables sans souris.

Leçon 2 • Principes fondamentaux de l'accessibilité Web

Présente les principes WCAG : perceptible, utilisable, compréhensible et robuste. Les étudiants identifient les décisions HTML qui affectent directement chaque principe d'accessibilité.

Leçon 3 • Validation HTML et correction d'erreurs

Utilise le validateur W3C et les outils de développement du navigateur pour trouver et corriger les erreurs de balisage. Les étudiants développent une habitude de validation qui prévient les problèmes de rendu entre navigateurs.

Leçon 4 • Normes de codage HTML et maintenabilité

Établit des règles de formatage, de dénomination et de commentaire cohérentes. Les étudiants écrivent un HTML que les coéquipiers peuvent lire, maintenir et étendre en toute confiance.