Introduction

• Les DTD et la syntaxe XML (structuration, commentaires).
• La structure d'un document HTML : images, feuilles de style CSS, JavaScript.
• La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires…
• Le modèle de document (DOM). Le protocole HTTP.
• Optimisation du chemin critique de rendu (critical rendering path).
• Topographie des concepts et apports du HTML5.
• Outils de développement HTML5.
• Test de compatibilité, méthode de détection HTML5.

Nouvelle structuration

• Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta...).
• Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>.
• Les catégories de contenu : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content.
• Intérêt des balises structurantes pour le référencement.
• Imbrication et type de contenu.

Les nouvelles balises HTML

• Les balises et attributs obsolètes.
• Les balises : <mark>, <meter>, <time>, <figure>, <picture>...
• Les extensions de balises HTML existantes.
• Les attributs : a, fieldset, iframe, area, button…
• Les microformats. Présentation et avantages sur le référencement.
• Les nouveaux champs et attributs de formulaire : range, autofocus, placeholder, menu…
• Les dessins : Canvas versus SVG.
• Les formats multimédias. Codecs et API Multimédia.
• Gestion vidéo et audio avec les nouvelles balises <audio> et <video> en HTML5.

Les sélecteurs CSS3

• Rappel sur la syntaxe : les sélecteurs, les règles.
• Sélecteurs de répétition nth-child(even), de cible target, de frère antérieur ~, d'enfant unique only-child.
• Media queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.

Les couleurs et la mise en forme du texte

• Rappel sur les déclarations RGB et RGBA.
• Les modèles HSL et HSLA.
• La propriété opacity.
• Support des polices distantes @font-face.
• Mise en forme du texte.
• Création d'un système d'icônes.
• Gestion des débordements par text-overflow.
• Gestion des enchaînements par wrap-option, white-space-treatment…
• Effets de couleur et d'ombre sur texte avec text-fill-color, text-shadow...
• Les modes multicolonnes avec column-count, column-width…

La mise en forme des boîtes et des fonds

• Les ombres avec box-shadow.
• Les coins arrondis avec border-radius...
• La gestion des fonds multiples.
• Les gradients de fond (-webkit-gradient).
• Les fonds ajustés aux conteneurs.
• Les transformations : translations, rotations, homothéties.
• Les animations : les animations, les transitions.

Grid layout

• Le principe de grilles "Grid".
• Réaliser une mise en page par bloc.
• Positionnement de chacun des blocs sur la page.
• Changement de la disposition et de la taille des blocs parents en fonction de la taille de l'écran de l'internaute.

Flexbox

• La fin des floats.
• Répartitions des sous-blocs dans le bloc parent.
• Ordre d'affichage des blocs.
• Occupation de l'espace mis à disposition par les parents.
• Centrer un bloc en hauteur en 2 lignes de code.
• Changement de la disposition et de la taille de ces blocs en fonction de la taille de l'écran de l'internaute.

Choisir un framework CSS

• L'offre communautaire. (Bootstrap, Material Design, Foundation).
• Critères communs et concepts partagés.
• Les frameworks spécialisés composants.
• Les frameworks spécialisés mobiles.

SVG, image vectorielle et responsive

• La syntaxe SVG.
• Support et intégration des images SVG dans le document.
• SVG et polices de caractères.
• Optimisation de SVG.
• Animation des graphiques SVG.
• Bibliothèques pour la création de graphiques SVG : SVG.js, Velocity, Raphaël...