Formation HTML5 et CSS

Programme de formation

Introduction

• JavaScript, images, les feuilles de style en cascade CSS : la structuration d'un document HTML
• Avantages du HTML5
• Les bons outils pour bien développer
• Le mode Testing pour rendre le projet compatible de manière optimale .
• Syntaxe XML et DTD (structuration, commentaires)
• Les tableaux et formulaires
• Paragraphes, liens, titres en HTML
• Le protocole HTTP. Le DOM
• Exercice : Création d’une simple page web

La structuration

• Les balises indispensables
• Le référencement : Avantages des balises structurantes 
• Les imbrications
• Les éléments  header  et  footer , nav ,  aside ,  section ,  article, application de la conformité
• Exercices : Réalisation d’un projet web en HTML5 

HTML : Les balises récentes

• Les attributs et balises à ne plus utiliser
• Les attributs : area, button, a, fieldset, iframe
• Les microformats
• Range, autofocus, placeholder, menu et les formulaires
• Canvas contre SVG
• Les formats multimédias. Gestion du son et des animations avec les balises du HTML5
• Exercices : codage d'un petit lecteur audio, video fonctionnel et multimédia .
• Gestion text-overflow, wrap-option, white-space-treatment...
• Les effets text-fill-color, text-shadow...
• RGB et RGBA. Opacity.
• Appliquer une belle mise en forme aux éléments textuels
• Exercices : Application de couleurs. Gestion multi-colonnes.

Image vectorielle et responsive: SVG

• SVG.js
• Velocity
• Raphael
• SVG
• Images : intégration et support
• Polices de caractères
• Optimisation, animation de SVG
• Exercices : Création d'un élément multimédia basé sur la vectorisation .

CSS3 : Les sélecteurs

• Les règles et les sélecteurs
• Sélecteurs nth-child(even), target, ~, d'enfant unique only-child
• Media Queries
• Exercices : Sélectionner des éléments d'une page HTML5 // CSS3

Les boîtes et les fonds

• Border-radius
• Box-shadow : les ombres
• Les fonds multiples
• Translations, rotations, homothéties : transformation basiques
• Les transitions et les animations
• Exercices : Gestion des Animations, des effets de transition et des arrondis dans une application

Grid Layout et flexbox

• Fonctionnnement d’une "Grid"
• Mise en page avec un système de bloc et positionnement sur la page
• Taille écran de l'utilisateur et lien avec le code
• Gestion de l’affichage en fonction des tailles d’écran
• Occupation de l'espace
• Centrage d’un bloc 
• Exercices : Création d’un site sur base flexbox et responsive design

Les Framework CSS

• Éléments communs des frameworks
• Bootstrap
• Exercices : Réalisation d’une page web full responsive avec Bootstrap

JavaScript - jQuery

• Structures de contrôle
• Objets
• Tableaux
• Fonctions et passage de paramètres

jQuery

• Sélecteurs
• Utilisation dans des formulaires

Intégration PHP 

• Base de l'intégration