Formation HTML5

Leçon 1 • HTML5 vs. les versions antérieures d'HTML

Compare HTML5 avec HTML 4 et XHTML pour clarifier ce qui a changé et pourquoi. Définit 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 toute la création de contenu HTML ultérieure dans le comportement réel du navigateur.

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

Guide les étudiants dans l'installation d'un éditeur de code et des outils de développement du navigateur. Garantit que chaque étudiant 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. Évite 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 les éléments header, nav, main, article, section, aside et footer. Les étudiants restructurent un document plat en une disposition sémantiquement significative.

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

Explique les éléments ol, ul, li, dl, dt et dd et quand utiliser chaque type. Renforce le choix sémantique par rapport à la préférence visuelle.

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

Couvre les éléments h1–h6, p, br et hr et leur impact sur le plan du document. Relie une hiérarchie de titres correcte à l'accessibilité et aux résultats SEO.

Leçon 1 • Hyperliens et fondamentaux des URL

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

Leçon 2 • Images et techniques adaptatives

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

Leçon 3 • Figures et légendes

Enseigne les éléments figure et figcaption pour associer des images à du texte descriptif. Renforce le regroupement sémantique introduit 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 repli source et l'élément track pour les sous-titres. Les étudiants intègrent des médias accessibles avec la prise en charge de plusieurs formats.

Leçon 1 • Fondamentaux de la structure du tableau

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 les 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 de tableau accessible

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

Leçon 1 • Étiquettes, ensembles de champs et accessibilité

Enseigne les éléments label, fieldset, legend et aria-describedby pour les formulaires accessibles. Garantit que chaque contrôle est associé par programme à son étiquette.

Leçon 2 • Structure et soumission du formulaire

Couvre les attributs form, action, method et enctype et la manière 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 de base

Présente les saisies text, password, email, number, checkbox, radio et select. Les étudiants 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 tirent parti de l'interface utilisateur native du navigateur pour réduire les besoins en JavaScript personnalisé.

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

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

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

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

Leçon 3 • 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 les attributs tabindex, le piégeage du focus et les liens de navigation d'évitement pour les utilisateurs du clavier. Les étudiants vérifient l'opérabilité complète au clavier des composants interactifs.

Leçon 1 • API de géolocalisation

Couvre les fonctions getCurrentPosition, watchPosition et la gestion des erreurs pour les données de localisation. Les étudiants construisent une fonctionnalité qui affiche les coordonnées de l'utilisateur 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 programmatique. Les étudiants dessinent des formes, du texte et des images à l'aide de méthodes de contexte JavaScript.

Leçon 3 • API History et navigation monopage

Couvre les fonctions pushState, replaceState et l'événement popstate pour la gestion des URL. Les étudiants mettent à jour l'URL du navigateur sans recharger complètement 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 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 du format, la compression et les formats de nouvelle génération comme WebP et AVIF. Les étudiants réduisent la charge 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 appliquent des mesures d'atténuation au niveau HTML pour sécuriser une application 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 de la page. Les étudiants réorganisent les ressources du document pour minimiser le blocage du rendu.

Leçon 4 • Fondamentaux du SEO via HTML

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