Formation HTML5 / CSS3

Créer et mettre en forme des pages web

Durée

21H

Modalités

100% à distance

Public

Professionnels engagés dans la création et gestion de contenus web

Prix

2290€

Certification professionnelle inscrite au Répertoire Specifique – RS 6245 :

“HTML5 et CSS3 : Créer et mettre en forme des pages Web”

Formation certifiante éligible au CPF
Formation proposée en e-learning
Durée de référence de la formation : 21h
Prix TTC : 2290€

Objectifs de la formation :

Concevoir des formulaires web modernes en exploitant les fonctionnalités avancées de Web Forms 2, tout en intégrant des pratiques d’accessibilité : association explicite entre champs et étiquettes, compatibilité avec l’auto-complétion et optimisation pour les utilisateurs en situation de handicap.
Comprendre les bases des frameworks HTML/CSS orientés design responsive, en analysant leur impact sur l’accessibilité et en sélectionnant les outils les mieux adaptés à la création de mises en page inclusives et adaptables.
Améliorer l’apparence et l’ergonomie des interfaces web grâce aux feuilles de style CSS, en mettant l’accent sur la lisibilité, l’accessibilité cognitive et visuelle pour tous les types d’utilisateurs.
Organiser le contenu d’une page web selon les standards HTML5, en utilisant les balises sémantiques appropriées pour structurer l’information de manière claire et faciliter l’accès aux lecteurs d’écran et autres aides techniques.
Créer des tableaux et des blocs de contenu accessibles, en garantissant une structuration logique des titres, descriptions et alternatives textuelles pour les éléments visuels.
Explorer les nouveautés HTML5 et CSS3, en apprenant à utiliser les outils de vérification d’accessibilité (lecteurs d’écran, validateurs de conformité) pour s’assurer de la compatibilité universelle des contenus développés.
Développer des interfaces responsives grâce aux media queries, en concevant des pages web capables de s’adapter aux divers appareils et aux besoins spécifiques des utilisateurs, dans une démarche de design inclusif.

Public :

Cette formation est destinée aux professionnels ou futurs professionnels engagés dans la création et la gestion de contenus web : développeurs front-end, full-stack, administrateurs de sites sous CMS (WordPress, Joomla, Drupal) ou toute personne souhaitant développer ou consolider ses compétences en structuration HTML et en mise en forme CSS, dans le but de concevoir des interfaces web accessibles et adaptées aux standards actuels.

Public en situation de handicap : merci de nous contacter afin d’étudier ensemble les possibilités d’adaptation.

Prérequis :

Un ordinateur portable et un accès internet.

Type :

Formation à distance.

Durée :

21 heures

Prix :

Le prix de cette formation est de 2290 €

Sanction :

Une attestation de réussite vous sera délivrée à la fin de votre formation.

La formation prépare à la certification ENI HTML/CSS, qui constitue la sanction officielle du parcours.

Méthodes pédagogiques :

Apprentissage par l’action : chaque session alterne apports théoriques, mises en situation pratiques et études de cas pour favoriser une montée en compétences progressive et opérationnelle.
Projet de formation : construction pas à pas d’un mini-site professionnel, servant de support concret pour expérimenter les concepts abordés.
Encadrement interactif à distance : la formation est organisée par e-learning.
Accompagnement continu :
- Test de positionnement en début de parcours
- Évaluations intermédiaires par exercices pratiques
- Projet final pour valider la maîtrise opérationnelle
- Suivi personnalisé tout au long de la formation
- Évaluation de satisfaction et analyse de l’impact immédiat après la formation.

Modalités et délais d’accès :

Préparation à l’entrée en formation : entretien préalable et recueil des besoins via un questionnaire pour garantir l’adéquation du programme.
Formalisation de l’inscription : envoi d’un devis ou d’une convention avec le détail du programme. Le démarrage est possible dans un délai maximum de 14 jours après validation.
Documents remis avant la formation :
- Convocation officielle précisant les modalités pratiques
- Guide d’accueil présentant le règlement intérieur et l’organisation pédagogique.

Programme de la formation

Module 1 : Premiers pas avec HTML5

Comprendre la structure d’une page HTML : repérage des éléments essentiels comme <!DOCTYPE> et <body>, et compréhension de leur fonction dans la construction d’une page web organisée.
Maîtriser les balises de structuration : utilisation des éléments <meta>, <title>, et <head>, indispensables pour optimiser le document, renforcer son accessibilité et améliorer son référencement naturel.
Appréhender les balises fondamentales du HTML5 : création de titres, paragraphes, liens hypertextes, insertion d’images, listes, tableaux, en respectant une logique de balisage sémantique rigoureuse.
Utiliser les balises génériques de manière réfléchie : emploi raisonné des <div> et <span>, uniquement lorsque les balises sémantiques standard ne suffisent pas.
Intégrer des contenus riches dans les pages web selon les standards HTML5 : manipulation d’éléments comme les images (<img> avec attribut alt), paragraphes (<p>), listes ordonnées (<ol>) ou non ordonnées (<ul>), ainsi que tableaux structurés (<table>, <thead>, <tbody>, <th>, <td>, <tr>).
Appliquer dès la conception les bonnes pratiques d’accessibilité :
- Choisir des contrastes de couleurs adaptés pour améliorer la lisibilité ;
- Utiliser des unités de mesure flexibles (%, em, rem) pour s’adapter aux réglages des utilisateurs ;
- Mettre en œuvre des balises spécifiques pour faciliter l’interprétation par les technologies d’assistance.

Consolider les connaissances à travers des cas pratiques : exercices dirigés et applications concrètes pour ancrer durablement les compétences acquises.

Module 2 : Styliser une page web avec CSS

Découverte des sélecteurs CSS : apprendre à cibler précisément les éléments HTML grâce aux sélecteurs de balises, de classes, d’identifiants ou encore d’attributs, afin d’appliquer des styles spécifiques.
Maîtrise des propriétés CSS essentielles : modifier les couleurs, choisir et personnaliser les polices, définir les bordures, configurer les arrière-plans, et ajuster les éléments visuels pour enrichir l’apparence du site.
Concevoir un design accessible et inclusif grâce à l’utilisation combinée du HTML et du CSS :
- Structurer logiquement les contenus avec des titres hiérarchisés pour améliorer la navigation ;
- Associer des descriptions alternatives (alt) aux images pour les rendre accessibles aux lecteurs d’écran ;
- Préparer une version adaptée à l’impression via une feuille de style spécifique, pensée notamment pour les utilisateurs daltoniens ;
- Ajouter des sous-titres aux contenus vidéo afin de garantir l’accessibilité pour les personnes sourdes ou malentendantes ;
- Veiller à offrir un contraste suffisant entre les textes et les arrière-plans pour une meilleure lisibilité ;
- Utiliser des unités de mesure adaptatives (em, %) pour permettre aux utilisateurs de personnaliser la taille des contenus ;
- Privilégier l’emploi de balises sémantiques pour améliorer la compatibilité avec les dispositifs d’assistance.
Mises en pratique guidées : réalisation d’exercices encadrés et d’ateliers concrets pour appliquer immédiatement les compétences acquises et progresser efficacement.

Module 3 : Mise en page dynamique et avancée avec CSS3

Approfondir les techniques de mise en page : maîtriser les propriétés avancées de CSS telles que les positionnements (relative, absolute, fixed), la gestion des flux avec float, ainsi que l’organisation de contenus avec les systèmes modernes Flexbox et Grid Layout.
Animer et enrichir l’expérience utilisateur : intégrer des animations et transitions CSS pour dynamiser l’interface et créer des effets visuels interactifs.
Personnaliser la typographie : affiner l’apparence des textes en jouant sur la taille des caractères, l’interlignage, l’espacement et l’alignement pour obtenir un rendu professionnel et lisible.
Analyser et découper une maquette graphique : identifier les zones fonctionnelles, regrouper les éléments dans des conteneurs logiques, et construire une mise en page structurée à l’aide de Flexbox et Grid.
Mises en pratique encadrées : ateliers d’application concrète pour renforcer les compétences en stylisation et mise en page avancée.

Module 4 : Conception responsive et accessibilité mobile

Créer des interfaces flexibles : concevoir des mises en page fluides et adaptatives en utilisant des unités relatives (%, em, rem, vw, vh), afin d’assurer une expérience utilisateur optimale sur tous les types d’appareils.
Utiliser les media queries : apprendre à détecter les caractéristiques des écrans (taille, orientation, résolution) pour ajuster dynamiquement l’affichage sur smartphones, tablettes et ordinateurs.
Intégrer les bases de l’ergonomie mobile accessible :

- Choisir des tailles de texte évolutives pour une lecture confortable ;
- Privilégier des marges et espacements suffisants pour simplifier la navigation tactile ;
- Positionner les boutons de manière intuitive pour une meilleure accessibilité ;
- Ajouter des textes alternatifs (alt) aux images ;
- S’assurer d’un contraste visuel adéquat pour les malvoyants ;
- Utiliser des polices sans empattement pour une meilleure lisibilité sur écran ;
- Respecter les normes HTML favorisant l’accessibilité par les aides techniques.
Exercices pratiques : ateliers d’adaptation des pages pour tester leur réactivité et accessibilité sur différents supports.

Module 5 : Créer des formulaires accessibles en HTML5

Structurer efficacement les formulaires : utiliser les balises dédiées (<input>, <textarea>, <select>, <button>) pour construire des interfaces de saisie intuitives et fonctionnelles.
Exploiter les attributs HTML5 spécifiques aux formulaires : intégrer des fonctionnalités comme required, placeholder, autofocus, type, et d’autres pour fluidifier l’expérience utilisateur.
Optimiser l’accessibilité et l’ergonomie des formulaires :

- Associer chaque champ à son étiquette (<label>) pour une compatibilité avec les lecteurs d’écran ;
- Créer des messages d’erreur clairs et visibles pour les personnes ayant une déficience visuelle ;
- Concevoir des boutons accessibles et bien positionnés pour les utilisateurs à mobilité réduite ;
- Préremplir certains champs afin de limiter les efforts de saisie pour les personnes en situation de handicap moteur ou cognitif ;
- Appliquer les standards d’accessibilité pour garantir une compatibilité avec les technologies d’assistance.
Sécuriser les formulaires selon les recommandations OWASP et ANSSI :
- Choisir les types de champs adaptés (type= »email », type= »password », etc.) ;
- Utiliser les attributs de validation (pattern, required, etc.) ;
- Appliquer les bonnes pratiques HTTP : méthode GET pour la récupération, POST pour l’envoi de données sensibles.
Conformité aux normes d’accessibilité (WCAG et RGAA) :
- Lier explicitement les champs et les étiquettes (<label>) ;
- Utiliser les attributs aria-* pour renforcer l’accessibilité ;
- Structurer les groupes de champs à l’aide de <fieldset> et <legend>.
Applications pratiques : exercices supervisés pour s’entraîner à concevoir des formulaires accessibles et sécurisés.

Module 6 : Intégrer du contenu multimédia de manière accessible

Ajouter des médias externes avec <iframe> : intégrer vidéos, cartes interactives et autres contenus embarqués directement dans une page HTML.
Gérer les médias audio et vidéo : insérer des éléments <audio> et <video> en respectant les bonnes pratiques :

- Ajouter sous-titres, transcriptions et commandes accessibles ;
- Configurer les attributs de contrôle pour une meilleure expérience utilisateur.
Configurer les lecteurs multimédias intégrés : paramétrer les iframes pour contrôler la lecture automatique, les options de répétition et l’activation des contrôles, afin d’optimiser l’interaction utilisateur.
Assurer l’accessibilité du contenu audiovisuel :
- Ajouter des légendes descriptives pour les images et vidéos ;
- Fournir des transcriptions pour les fichiers audio ;
- Intégrer des sous-titres synchronisés pour les vidéos destinées aux publics sourds ou malentendants ;
- Faciliter la navigation et l’interaction pour les utilisateurs à mobilité réduite grâce à des commandes simples et intuitives.
Créer des animations CSS3 accessibles :
- Utiliser la propriété animation, configurer keyframes, durée, délais et itérations ;
- Employer les pseudo-classes (:hover, :visited, :checked, :valid) pour ajouter de l’interactivité ;
- Mettre en œuvre des transformations CSS (translate, rotate, scale) pour enrichir les effets visuels ;
- Respecter les préférences utilisateurs via la media query @media (prefers-reduced-motion).
Applications pratiques : réalisation d’exercices pour tester l’intégration de contenus multimédias et valider leur accessibilité.