HTML5 / CSS3

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

HTML5 Jour 1 et 2

Le matériel et les logiciels Jour 1

• Ressources nécessaires
• Un éditeur de code
• Les navigateurs

Introduction Jour 1

• Les différentes versions du HTML
• Les standards du web
• Compatibilité avec les navigateurs

Structure de base d'un document HTML Jour 1

• Le doctype
• La balise HTML
• Définition de l'encodage
• La balise head
  • Les balises meta
  • La balise title
  • Insertion de CSS
• La balise body

La sémantique Jour 1

• Qu'est-ce que la sémantique ?
• Concept

Mieux structurer ses pages Jour 1

• header
• nav
• section
• article
• main
• aside
• footer

Mettre en forme du texte Jour 1

• Le formatage du texte : gras, italique, soulignement, mise en évidence …
• Les balises d'entêtes
• Les listes ordonnées
• Les listes non ordonnées
• Les listes de définition
• Les abréviations
• Les espaces insécables, les sauts de ligne ...
• Les paragraphes

Les tableaux Jour 1

• Insertions de tableaux
• Insertion, suppression de lignes et colonnes
• Fusionner des lignes et colonnes
• Fractionner des lignes et colonnes
• caption, col, colgroup, scope

Les liens hypertexte Jour 1

• Création de lien hypertexte sur du texte
• Création de lien hypertexte sur des images
• Création de lien vers messagerie
• Les attributs

Les images Jour 1

• Les formats d'images du web
• Les nouveaux formats
• Les contraintes liées aux images
• Insertion d'images
• Les attributs : alt, width, height ...
• figure, figcaption

Autres élements graphiques Jour 2

• Canvas
• SVG

Les médias Jour 2

• Insertion de vidéos
• Les formats vidéos
• Les sous-titres
• Insertion de sons
• Les formats audio
• Utilisation d'iframe (Youtube, Google maps ...)

Les formulaires Jour 2

• La balise form
• Méthode POST ou GET
• Les champs de texte
• Les zones de texte
• Les listes déroulantes
• Les boutons radio
• Les cases à cocher
• Les boutons
• Les attributs
• Les bonnes pratiques en matière de sécurité
• Les balises utiles pour l'accessibilité : labels, aria, legend, fielset ...s

L'accessibilité Jour 2

• Pourquoi rendre un site accessible ?
• Les bonnes pratiques en HTML pour l'accessibilité
• RGAA et WCAG
• Tester son site avec unlecteur d'écran comme NVDA

Les base du référencement / SEO Jour 2

• Les balises à ne pas négliger
• La structure des pages
• La qualité du contenu

CSS Jour 3 et 4

Norme actuelle et tendance du CSS Jour 3

• Evolution du CSS
• Compatibilité dans les navigateurs

Ou placer votre code ?

• Dans une feuille de style externe
• Dans un document
• Dans un style intégré
• Avantages et inconvénients des différentes méthodes

Mettre en forme à l'aide de CSS Jour 3

• Principe des styles
• Créer des règles de style
• Bonnes pratiques pour structurer le CSS

Les sélecteurs CSS Jour 3

• Les sélecteurs de type
• Les sélecteurs de classe
• Les sélecteurs d'identifiant
• Le sélecteur universel
• Les sélecteurs d'attribut
• Les combinateurs
• Les pseudo-classes
• Les pseudo-éléments

Les bases du CSS Jour 3

• La gestion du texte, polices, couleur, taille, mise en évidence ...
• Les arrière-plans
• Les blocs
• Les boites
• Les unités : em, rem, vh, vw, px
• Les bordures
• Les listes
• Le positionnement (absolu, relatif, fixe ...)

Le CSS3 Jour 4

• Les couleurs(RGB, RGBA), les dégradés, l'opacité
• Les arrière-plans multiples, ajustement au conteneur
• Les ombres et effets d'ombres
• Les bordures et les coins arrondis
• Utilisation de polices personnalisées
• Les transformations
• Les transitions
• Les animations

Gestion des colonnes Jour 4

• Ancienne méthode : float
• Les méthodes récentes : grid, column, flex
• Les avantages et inconvénients, la compatibilité avec les navigateurs

Responsive Web Design (RWD) Jour 4

• Adaptation aux périphériques
• Les media Queries
• Les frameworks: Bootstrap, foundation, Materialize