Formation HTML5

Leçon 1 • HTML5 par rapport aux 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 restituent les pages Web

Explique le cycle requête-réponse et la construction du DOM. Ancre tout le balisage HTML ultérieur 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

Aborde les références de caractères nommés et numériques pour les symboles et les caractères réservés. Évite les erreurs de rendu courantes causées 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 mise en page 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

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

Leçon 1 • Fondamentaux des hyperliens et des URL

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

Leçon 2 • Images et techniques adaptatives

Aborde les éléments img, alt text, srcset, sizes et picture. Les étudiants mettent en œuvre des schémas 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 secours 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 des tableaux

Aborde 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 des tableaux au comportement des technologies d'assistance.

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

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

Leçon 2 • Structure du formulaire et soumission

Aborde les attributs form, action, method et enctype ainsi que 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 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 HTML5 et sélecteurs

Explore les types de saisie date, time, color, range, file et search. Les étudiants exploitent 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

Aborde les attributs role, aria-label, aria-labelledby, aria-hidden et les régions live. Les étudiants ajoutent ARIA uniquement lorsque 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 — ainsi que leurs implications pratiques. Considère l'accessibilité comme une exigence de conception, et non une considération secondaire.

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 de clavier. Les étudiants vérifient l'opérabilité complète au clavier des composants interactifs.

Leçon 1 • API de géolocalisation

Aborde les méthodes 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 des méthodes du contexte JavaScript.

Leçon 3 • API History et navigation monopage

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

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

Enseigne les attributs draggable, et les événements 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

Aborde la sélection de format, la compression et les formats de nouvelle génération comme WebP et AVIF. Les étudiants réduisent le poids 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 un exemple d'application.

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 référencement via HTML

Aborde 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é dans les moteurs de recherche et les réseaux sociaux.