Formation HTML5

Leçon 1 • HTML5 par rapport aux versions antérieures du HTML

Compare le HTML5 avec le HTML 4 et le XHTML pour clarifier ce qui a changé et pourquoi. Établit les attentes concernant les règles de syntaxe modernes utilisées tout au long du cours.

Leçon 2 • Comment les navigateurs affichent les pages Web

Explique le cycle requête-réponse et la construction du DOM. Ancre tout le balisage HTML subséquent dans le comportement réel du navigateur.

Leçon 3 • Configuration d'un environnement de développement

Guide les étudiants et étudiantes dans l'installation d'un éditeur de code et des outils de développement du navigateur. Assure que chaque étudiant et étudiante dispose d'un espace de travail fonctionnel avant d'écrire du code.

Leçon 1 • Entités HTML et caractères spéciaux

Couvre les références de caractères nommées et numériques pour les symboles et les caractères réservés. Empêche les bogues d'affichage courants causés par des caractères non échappés.

Leçon 2 • Éléments de sectionnement et points de repère

Présente header, nav, main, article, section, aside et footer. Les étudiants et étudiantes restructurent un document plat en une mise en page sémantiquement significative.

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

Explique ol, ul, li, dl, dt et dd et quand utiliser chaque type. Renforce le choix sémantique plutôt que la préférence visuelle.

Leçon 4 • Titres, paragraphes et flux de texte

Couvre h1 à h6, p, br et hr et leur impact sur le plan du document. Relie la hiérarchie appropriée des titres aux résultats d'accessibilité et de référencement.

Leçon 1 • Hyperliens et principes de base des URL

Explique les URL absolues et relatives, les attributs d'ancre et les cibles de lien. Permet aux étudiants et étudiantes de relier correctement des sites multipages entre eux.

Leçon 2 • Images et techniques adaptatives

Couvre img, le texte alt, srcset, sizes et l'élément picture. Les étudiants et étudiantes mettent en œuvre des modèles de changement de résolution et de direction artistique.

Leçon 3 • Figures et légendes

Enseigne figure et figcaption pour associer des images à du texte descriptif. Renforce le regroupement sémantique présenté dans le chapitre précédent.

Leçon 4 • Intégration de l'audio et de la vidéo

Présente les éléments audio et vidéo, les solutions de rechange source et track pour les sous-titres. Les étudiants et étudiantes intègrent des médias accessibles avec la prise en charge de plusieurs formats.

Leçon 1 • Principes fondamentaux de la structure des tableaux

Couvre les éléments table, tr, th et td et leur ordre d'imbrication requis. Établit un balisage correct avant d'introduire les améliorations d'accessibilité.

Leçon 2 • Quand ne pas utiliser de tableaux

Clarifie l'utilisation abusive des tableaux pour la mise en page et ses conséquences sur l'accessibilité. Renforce la prise de décision sémantique établie dans les chapitres précédents.

Leçon 3 • Balisage accessible des tableaux

Présente les attributs scope, headers et id pour la compatibilité avec les lecteurs d'écran. Relie la sémantique des tableaux au comportement des technologies d'assistance.

Leçon 1 • Étiquettes, fieldsets et accessibilité

Enseigne label, fieldset, legend et aria-describedby pour des formulaires accessibles. Assure que chaque contrôle est associé par programmation à son étiquette.

Leçon 2 • Structure du formulaire et soumission

Couvre les attributs form, action, method et enctype et la façon dont les données sont envoyées. Fournit la base structurelle pour toutes les sections relatives aux formulaires.

Leçon 3 • Types de saisie et contrôles principaux

Présente les saisies text, password, email, number, checkbox, radio et select. Les étudiants et étudiantes construisent une variété de contrôles et comprennent leurs comportements par défaut.

Leçon 4 • Types de saisie et sélecteurs HTML5

Explore les types de saisie date, time, color, range, file et search. Les étudiants et étudiantes tirent parti de l'interface utilisateur native du navigateur pour réduire les besoins en JavaScript personnalisé.

Leçon 1 • Tests et audits d'accessibilité

Présente les outils automatisés, les tests manuels et les workflows de test avec les lecteurs d'écran. Les étudiants et étudiantes produisent un rapport d'audit d'accessibilité pour une page d'exemple.

Leçon 2 • Rôles, états et propriétés ARIA

Couvre role, aria-label, aria-labelledby, aria-hidden et les régions live. Les étudiants et étudiantes ajoutent ARIA uniquement là où la sémantique native est insuffisante.

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

Présente les principes WCAG — perceptible, utilisable, compréhensible et robuste — et leurs implications pratiques. Cadre l'accessibilité comme une exigence de conception, non comme une réflexion après coup.

Leçon 4 • Navigation au clavier et gestion du focus

Enseigne tabindex, le piégeage du focus et les liens de navigation d'évitement pour les utilisateurs et utilisatrices du clavier. Les étudiants et étudiantes vérifient l'opérabilité complète au clavier des composants interactifs.

Leçon 1 • API de géolocalisation

Couvre getCurrentPosition, watchPosition et la gestion des erreurs pour les données de localisation. Les étudiants et étudiantes créent une fonctionnalité qui affiche les coordonnées de l'utilisateur ou de l'utilisatrice sur demande.

Leçon 2 • Élément Canvas et dessin 2D

Présente l'élément canvas et son contexte de rendu 2D pour le dessin par programmation. Les étudiants et étudiantes dessinent des formes, du texte et des images à l'aide des méthodes de contexte JavaScript.

Leçon 3 • API History et navigation à page unique

Couvre pushState, replaceState et l'événement popstate pour la gestion des URL. Les étudiants et étudiantes mettent à jour l'URL du navigateur sans rechargement complet de la page.

Leçon 4 • API de glisser-déposer

Enseigne les événements draggable, dragstart, dragover et drop pour le glisser-déposer natif. Les étudiants et étudiantes construisent une liste triable en utilisant uniquement les événements de glisser-déposer HTML5.

Leçon 1 • Stratégies d'optimisation des images

Couvre la sélection de format, la compression et les formats de nouvelle génération comme WebP et AVIF. Les étudiants et étudiantes réduisent la charge utile des images tout en maintenant la qualité visuelle.

Leçon 2 • Considérations de sécurité en HTML

Identifie les vecteurs XSS, les intégrations iframe non sécurisées et les cibles de formulaire non sécurisées. Les étudiants et étudiantes appliquent des mesures d'atténuation au niveau du HTML pour renforcer une application d'exemple.

Leçon 3 • Chargement des ressources et chemin critique

Explique comment le placement des éléments script, link et meta affecte la vitesse de chargement des pages. Les étudiants et étudiantes réorganisent les ressources du document pour minimiser le blocage du rendu.

Leçon 4 • Principes de base du référencement grâce au HTML

Couvre les balises title, meta description, Open Graph et le balisage de données structurées. Les étudiants et étudiantes ajoutent des métadonnées qui améliorent la visibilité dans les moteurs de recherche et les médias sociaux.