La formation HTML 5 et CSS 3 - Création de pages Web vous apprendra à créer des pages web basées sur HTML5 et CSS3.

A l'issue de cette formation, vous serez capable de :

• Décrire la structuration d'une page HTML 5
• Ajouter des styles CSS aux éléments d'une page
• Utiliser les blocs et les tableaux
• Créer des formulaires avec Web Forms 2
• Tester les nouveautés HTML 5 et CSS 3
• Exploiter les "media queries" pour s'adapter aux tailles d'écran
• Expliquer la philosophie des framemorks HTML / CSS pour le développement responsive.

Jour 1 - Matin

Les terminaux

• Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution
• Périphériques, OS, navigateurs
• Le marché mobile et parts de marché
• Standards HTML 5, CSS 3 (API, sélecteurs...)

Structure d'une page

• Tags principaux
• Tags de mise en page et de style
• Les éléments et leurs placements

Exemple de travaux pratiques (à titre indicatif)

• Création d'une page Web simple

Balises structurantes

• Blocs div et span
• Listes
• Tableaux
• iFrames

Jour 1 - Après-midi

Web Forms 2

• Champs de saisie
• Listes déroulantes
• Bouton Radio
• Champ Date
• Placeholder
• Slider
• Validation automatique

HTML 5

• Balises sémantiques
• Audio et vidéo

Jour 2 - Matin

Styles CSS

• Syntaxe des sélecteurs CSS
• Pseudo-sélecteurs
• Principales propriétés CSS
• Règles CSS
• Frameworks CSS

Structure des éléments

• Le modèle de boîte
• Eléments "block" et "inline"
• La propriété display
• Padding, marges et bordures

Positionnement

• La notion de flux
• Positionnement

Jour 2 - Après-midi

CSS 3

Le modèle Flexbox

Grid Layout

Jour 3 - Matin

Présentation des "media queries"

• Adaptation des CSS aux caractéristiques du terminal
• Règles conditionnelles (orientation, device-width...)
• JavaScript et les anciens navigateurs
• Réglage complémentaire de rendu visuel (viewport)

Principes de grilles fluides, fixes

• Conception classique versus conception selon une grille
• Importance des blocs, approche contenu / contenant
• Unités de mesure (%, em, px), mode Retina
• Eviter les débordements et les points de rupture

Jour 3 - Après-midi

Frameworks et librairies responsives

• Détecter les ressources avec "Modernizr"
• Librairies de substitution (less, CSS 3 PIE...)
• Frameworks Tailwind, Bulma, Materialize, Bootstrap, Foundation, Skeleton

Les fondamentaux de l'accessibilité numérique

• Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) : définition d'un site Web "accessible"
• Les outils dédiés
• Bonnes pratiques de construction HTML des pages
• La sémantique des éléments
• Les attributs fondamentaux pour l'accessibilité

Certification

• L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
• La durée moyenne est de 1h00