1
Introduction
- Les différences entre HTML et CSS.
- Les apports du HTML5 et du CSS3.
- Outils de développement.
Travaux pratiques
Mise en place de notre des outils de développement.
2
Principales balises HTML
- Structure d’un document HTML : <doctype>, <html>, <head>, <body>.
- Notions de balises et attributs.
- Les balises d’en-tête : <title> et <meta>.
- Les liaisons CSS et Javascript : <link> et <script>.
- Les balises textuelles : titres, paragraphes, citations, et accentuations avec <strong>, <em>, <mark>.
- Les liens : <a>.
- Les images : <img>, <figure>, <figcaption>.
- Les listes : <ul> et <ol>.
- Les tableaux : <table>, <tr>, <th>, <td>.
- Les balises génériques <div> et <span>
- Les balises sémantiques <nav>, <section>, <article>, <aside>, <header> et <footer>.
- Principales recommandations pour l’accessibilité selon les références WCAG/RGAA : attributs alt, scope…
Travaux pratiques
Tests des balises dans le cadre d’une création de page simple (CV en ligne, page de vente, ou autre).
3
Ajouter des médias
- Les iframes.
- Les vidéos.
- L’audio.
- Veiller à l’accessibilité des médias (compatibilité, sous-titres, navigation clavier…).
Travaux pratiques
Tests de ces balises dans le contexte du travail pratique précédent.
4
Principaux sélecteurs et propriétés CSSP
- Les règle CSS.
- Les sélecteurs.
- Les pseudo-classes.
- Définir des couleurs.
- Les propriétés liées aux fonds.
- Les propriétés communes : dimensions, bordures, marges internes et externes.
- Les propriétés liées aux textes : couleur, alignement, police, soulignement, gras, taille.
- Les unités px, em, rem, vw, vh.
- Améliorations diverses : ombres, dégradés, texte multi-colonnes, coins arrondis…
Travaux pratiques
Tests des sélecteurs et propriétés dans le contexte du travail pratique précédent.
5
Positionnements CSS
- Le positionnement statique.
- La propriété display.
- Le positionnement relatif.
- Le positionnement absolu.
- Le positionnement fixe.
- Les propriétés float et clear.
- Le positionnement flexbox.
- Le positionnement grid layout.
Travaux pratiques
Test des différents positionnements.
Intégration d’une mini-maquette ou d’un schéma afin de les transformer en site comprenant 2 colonnes, un logo, un menu, et du contenu simple. Utilisation des différents positionnements vus y parvenir. Amélioration de l’aspect avec les autres propriétés CSS vues précédemment.
6
Introduction au Responsive Design
- Les dimensionnements par unités flexibles.
- La notion de viewport.
- Les mediaqueries.
- Alternative : la notion de grille CSS.
Travaux pratiques
Amélioration de l’exercice pratique précédent pour que le site s’adapte aux diverses tailles d’écrans.
Démonstration de l’utilisation de la grille CSS de bootstrap.
7
Formulaires
- Les formulaires et leurs champs : <form>, <input>, <textarea>, <select>, <option>.
- Les labels, et leurs liaisons aux champs.
- Les apports du HTML5 pour les formulaires : nouveaux champs, types d’inputs, et attributs.
- La vérification de formulaire avec HTML, via types et attributs.
- Le paramétrage d’envoi du formulaire : méthodes GET et POST, attribut action.
- Principales recommandations HTML liées à la sécurité (OWASP, ANSSI) : méthode adéquate, type password, attribut pattern…
- Principales recommandations HTML pour l’accessibilité selon les références WCAG/RGAA : lecteurs d’écrans, labels, attributs aria, regroupement des boutons radio et checkbox dans des <fieldset> avec <legend>…
Travaux pratiques
Amélioration de l’exercice pratique précédent en intégrant un formulaire de contact.
8
Animations CSS 3
- Transformations (rotations, translation, changement d’échelle, déformation).
- Transitions.
- Animations.
- Limiter les animations (prefers-reduced-motion).
Travaux pratiques
Tests des transformations, transitions, et animations.
9
La certification ENI
- Modalités et déroulement de l’examen.
- Conseils personnalisés.
3j
- 21h00 
Télécharger le programme
Partager cette formation