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 repartent avec une configuration locale fonctionnelle prête pour la programmation pratique.

Leçon 2 • Comment fonctionne le Web

Couvre la communication client-serveur, les navigateurs et les bases du 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 le 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 connexes. 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 appliquent à 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 une 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 charset, viewport, description et author. Les étudiants configurent les métadonnées minimales requises pour chaque page qu'ils publient.

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

Présente les balises meta Open Graph et Twitter Card pour des aperçus sociaux enrichis. Les étudiants configurent des métadonnées qui contrôlent l'apparence des pages lors du partage.

Leçon 3 • Liaison de 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 à l'aide de rel et href.

Leçon 1 • Intégration 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 significatif.

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 introduits au chapitre 2.

Leçon 3 • Hyperliens avec l'élément ancre (a)

Couvre l'élément a, les attributs href, target et rel pour les liens internes et externes. Les étudiants implémentent la navigation entre les pages et vers des 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 le 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, etc. 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 implémentent des choix groupés avec les attributs name et value corrects.

Leçon 3 • Étiquettes, ensembles de champs et formulaires accessibles

Enseigne label, fieldset et legend pour associer les contrôles à des descriptions. Les étudiants construisent des formulaires entièrement utilisables au clavier et par un 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 point 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 cartographient une mise en page de page complète avec des régions de point de repère appropriées.

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

Explique comment les éléments sémantiques communiquent le sens aux navigateurs, aux moteurs de recherche et aux technologies d'assistance. Motive le passage d'un balisage riche en div à 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 en ligne précis. 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

Fait la distinction entre article, section et div pour le regroupement de contenu connexe. Les étudiants appliquent l'élément correct selon que le contenu est autonome ou thématique.

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

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

Leçon 2 • 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 inter-navigateurs.

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

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