Formation HTML5 / CSS3

Toutes les pages d'un site web reposent sur deux langages : le HTML, qui structure le contenu, et le CSS, qui en gère la présentation. Cette formation vous apprend à les utiliser avec les méthodes actuelles pour réaliser des pages claires, agréables à lire sur ordinateur comme sur mobile, et accessibles à tous. Programme personnalisable selon vos besoins.

Famille Web / Digital
Programme en PDF Télécharger

Informations pratiques

Programme de formation
Personnalisation:
Le programme peut être modifié en fonction de vos besoins et de vos objectifs sur le contenu, la durée, les modalités, les moyens pédagogiques et techniques.

Les outils et la structure d'une page HTML Jour 1 - matin
- Comment fonctionne une page web : navigateur, serveur, HTML, CSS et JavaScript
- Les standards du web et la compatibilité des navigateurs (MDN, Can I use)
- L'environnement de travail
  - Visual Studio Code : extensions utiles, Emmet, serveur local
  - Les outils de développement du navigateur (inspecteur)
- Le squelette d'un document HTML
  - Le doctype et la balise html (attribut lang)
  - La balise head : encodage, viewport, title, meta description
  - La balise body
La sémantique HTML5 Jour 1 - matin
- Pourquoi donner du sens à ses pages : accessibilité, référencement, maintenance
- Les balises de structure : header, nav, main, section, article, aside, footer
- Les titres h1 à h6 et le plan du document
- Quand utiliser div et span
- Atelier : structurer la page d'accueil d'un site vitrine
Mettre en forme le texte et créer des liens Jour 1 - après-midi
- Paragraphes, sauts de ligne et espaces insécables
- Mise en valeur : strong, em, mark, abbr, code, blockquote
- Les listes ordonnées, non ordonnées et de définition
- Les liens hypertexte
  - Liens relatifs, absolus et ancres internes
  - Liens vers une messagerie ou un numéro de téléphone
  - Liens sur des images, ouverture dans un nouvel onglet (target, rel)
Les images Jour 1 - après-midi
- Les formats d'images du web : JPEG, PNG, SVG, WebP, AVIF
- Insérer une image : src, alt, width, height
- Légender une image : figure et figcaption
- Images adaptatives : picture, srcset et sizes
- Optimiser le poids des images et le chargement différé (lazy loading)
Les tableaux et les éléments interactifs natifs Jour 2 - matin
- Créer un tableau de données
  - Lignes, colonnes et cellules : table, tr, th, td
  - Structure : caption, thead, tbody, tfoot, scope
  - Fusionner des cellules : colspan et rowspan
- Les blocs dépliables : details et summary
- Les fenêtres modales natives : dialog
Les médias et les contenus intégrés Jour 2 - matin
- Insérer une vidéo : formats, contrôles, sous-titres (track)
- Insérer un son : formats et contrôles
- Intégrer un contenu externe avec iframe (YouTube, Google Maps) et ses précautions
- Les images vectorielles SVG intégrées dans la page
- Présentation de canvas
Les formulaires Jour 2 - après-midi
- La balise form : action, méthodes GET et POST
- Les champs : texte, e-mail, téléphone, nombre, date, couleur, fichier
- Zones de texte, listes déroulantes, listes de suggestions (datalist)
- Boutons radio, cases à cocher et boutons
- Organiser le formulaire : label, fieldset et legend
- La validation native : required, pattern, min et max, autocomplete
- Les bonnes pratiques de sécurité : HTTPS, validation côté serveur, protection contre le spam
L'accessibilité et les bases du référencement (SEO) Jour 2 - après-midi
- Rendre son site accessible
  - Pourquoi et pour qui : le cadre RGAA et les règles WCAG
  - Les bonnes pratiques HTML : alternatives textuelles, labels, contrastes, navigation au clavier
  - Utiliser ARIA uniquement quand c'est nécessaire
  - Tester avec un lecteur d'écran (NVDA) et des outils d'audit (Lighthouse, WAVE)
- Les bases du référencement naturel
  - Les balises à ne pas négliger : title, meta description, titres
  - La structure des pages et la qualité du contenu
Les fondamentaux du CSS Jour 3 - matin
- Évolution du CSS et compatibilité des navigateurs
- Où placer son code : feuille externe, balise style, style intégré
- Écrire une règle : sélecteur, propriété, valeur
- Les commentaires et les bonnes pratiques d'écriture
- Atelier : donner un premier style à la page d'accueil
Les sélecteurs, la cascade et la spécificité Jour 3 - matin
- Sélecteurs de type, de classe, d'identifiant, universel et d'attribut
- Les combinateurs : descendant, enfant, frère
- Les pseudo-classes : :hover, :focus-visible, :nth-child, :not, :is, :has
- Les pseudo-éléments : ::before et ::after
- L'héritage, la cascade et le calcul de la spécificité
Organiser et factoriser son CSS Jour 3 - matin
- Les variables CSS (propriétés personnalisées) pour couleurs et espacements
- L'imbrication native des règles (CSS nesting)
- Une feuille de style de base (reset) et la convention de nommage BEM
- Structurer ses fichiers CSS
Le modèle de boîte et la typographie Jour 3 - après-midi
- Le modèle de boîte
  - Contenu, padding, bordure et marge
  - box-sizing, fusion des marges, débordements (overflow)
  - Les types d'affichage : block, inline, inline-block
- Les unités
  - Absolues et relatives : px, em, rem, %, vh, vw, dvh
  - Dimensionnement fluide avec min(), max() et clamp()
- Le texte
  - Police, taille, graisse, interlignage, alignement, décoration
  - Les polices personnalisées : @font-face, polices variables, font-display
Couleurs, arrière-plans et effets visuels Jour 3 - après-midi
- Les couleurs : hexadécimal, RGB, HSL et transparence
- Les arrière-plans : images, répétition, taille, positionnement, arrière-plans multiples
- Les dégradés linéaires et radiaux
- Bordures, coins arrondis et ombres (box-shadow, text-shadow)
- Les filtres et l'opacité
Le positionnement Jour 3 - après-midi
- Le flux normal des éléments
- Les positions relative, absolue, fixe et sticky
- La superposition avec z-index
- Atelier : en-tête fixe et bouton flottant
Flexbox : la mise en page en ligne ou en colonne Jour 4 - matin
- Principe : conteneur, éléments et axes
- Direction, retour à la ligne et espacement (gap)
- Alignement : justify-content, align-items, align-self
- Dimensionnement des éléments : flex-grow, flex-shrink, flex-basis
- Cas pratiques : barre de navigation, cartes alignées, centrage parfait
CSS Grid : la mise en page en grille Jour 4 - matin
- Définir des colonnes et des lignes : grid-template, fr, repeat, minmax
- Placer les éléments : lignes de grille et zones nommées (grid-template-areas)
- Grilles adaptatives avec auto-fit et auto-fill
- Choisir entre Flexbox et Grid
- L'ancienne méthode float : la reconnaître dans un code existant
- Atelier : mise en page complète d'une page avec Grid et Flexbox
Le responsive web design Jour 4 - après-midi
- L'approche mobile first et la balise viewport
- Les media queries : largeur, orientation, préférences de l'utilisateur (mode sombre, animations réduites)
- Les container queries : adapter un composant à son conteneur
- Images et typographie adaptatives
- Un menu de navigation adaptatif
- Panorama des frameworks CSS (Bootstrap, Tailwind) : quand les utiliser
Transformations, transitions et animations Jour 4 - après-midi
- Les transformations : translate, rotate, scale
- Les transitions : durée, courbe, effets au survol
- Les animations : @keyframes et propriétés d'animation
- Animer avec performance et respecter les préférences d'animation réduite
Projet de synthèse et bonnes pratiques Jour 4 - après-midi
- Réalisation guidée d'une page complète, responsive et accessible
- Valider son code (validateur W3C) et auditer sa page (Lighthouse)
- Déboguer avec les outils de développement du navigateur
- Publier sa page : organisation des fichiers et mise en ligne
- Questions / réponses et synthèse de la formation
Formation ajoutée le 01/01/2015, mise à jour le 18/10/2026
Pour qui ?

Prérequis
Connaissances de base de l'environnement Windows, Mac ou Linux.

Public
Développeurs front-end, webmasters, ou novices souhaitant découvrir les langages HTML5 et CSS3.
Objectifs, moyens, modalités, sanction, adaptation PSH
Objectifs :

Créer des pages web avec HTML5, les mettre en forme à l'aide du CSS3, les rendre accessibles et responsives.

Moyens pédagogiques :

Un PC par personne, le formateur diffuse son écran sur un vidéo-projecteur ou télévision grand écran
Un groupe de maximum 5 personnes en inter-entreprise.
En distanciel : Utilisation de Zoom ou Teams avec partage d'écran, chat, audio et vidéo en temps réel.
Exposé théorique, suivi d'une mise en pratique.

Moyens pour suivre l’exécution de l’action :
- La présence du stagiaire est vérifiée par le formateur à l'aide d'une feuille de présence signée par demi-journées
Moyens pour en apprécier les résultats :
- A la fin de la formation, le stagiaire complète une évaluation à chaud (Permettant d'évaluer la qualité de la prestation)
- Puis, il complète avec le formateur une évaluation des acquis (Permettant de déterminer les points acquis, non acquis ou en cours d'acquisition)
- Quelques mois après la formation, le donneur d'ordre complète une évaluation à froid (Permettant de s'assurer que la formation a pu être mise en pratique)
Sanction de la formation :
- A la fin de la formation le stagiaire reçoit une attestation de formation reprenant l’intitulé de la formation, les dates et le nombre d’heures réalisées.
Délai d'accès :

En intra-entreprise : En fonction de vos disponibilités et celles de nos formateurs.
En inter-entreprise : En fonction des sessions que nous avons programmé, consultable en cliquant ici

Profil formateur :
Formateurs passionnés et expérimentés intervenant en milieu professionnel en tant qu'intégrateur et développeur.

Adaptation aux personnes en situation de handicap :
Nous nous engageons à favoriser l’accessibilité du public en situation de handicap, en fonction de leurs besoins et/ou difficultés, en adaptant :
- La durée de la formation
- Le programme et son déroulement
- Les moyens pédagogiques et techniques
- Les supports pédagogiques

Ces formations adaptées sont proposées en individuel ou collectif (Pour public à besoins similaires).
Afin de trouver la meilleure solution, nous nous appuyons de partenaires, évoluant dans le domaine du handicap.
Personne à contacter / personne en charge de l'accueil et de l'accès des personnes en situation de handicap :

Lambert Christophe
03 59 25 10 15
[email protected]
Evaluation, avis ...

Evaluation : Aucune note pour cette formation entre 2024 et 2026 .
Comment financer ma formation ?

Vous ne savez pas comment financer votre formation ?. Vous êtes salarié, travailleur non salarié (TNS), commerçant, artisan, profession libérale. Suivez le guide...

Trouver mon financement