HTML5 & CSS3, maîtriser la création de ses pages Web

Programmes de HTML5 & CSS3, maîtriser la création de ses pages Web

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 Render 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 contenus : 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 formulaires : 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> 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 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ère communs et concepts partagés.
• Les Framework spécialisés composants.
• Les Framework spécialisés mobiles.

SVG, IMAGE VECTORIELLE ET RESPONSIVE

• La syntaxe SVG.
• Support et intégration des images SVG dans le documents.
• SVG et polices de caractères.
• Optimisation de SVG.
• Animation des graphiques SVG.
• Bibliothèque pour la création de graphiques SVG (SVG.js, Velocity, Raphael..