HTML5 et CSS3

Durée du module / 3 jours

Objectif

Ce module de formation aborde les prochaines versions et spécifications des langages HTML et CSS. Ces révisions majeures permettront aux développeurs Web de développer des sites nouvelles générations.

Prérequis

Ce module de formation est un perfectionnement à la création de page en HTML 5 et CSS3.
Il nécessite une bonne connaissance du HTML et des feuilles de styles CSS.

Outil

 Editeur + Dreamweaver CS5.5 / CS6

Déroulé

Préambule

Bref historique des langages HTML/CSS.
HTML 5, CSS 3 : des langages dépoussiérés pour les sites web et adaptés aux nouveaux médias (périphériques mobiles)
Les principaux apports de ces nouvelles constructions, mais aussi leurs inconvénients (problème d'Internet Explorer, formats vidéos par exemple)
État des lieux avec les principaux navigateurs (compatibilité, reconnaissance des nouvelles syntaxes)

Nouveautés HTML 5

Des syntaxes simplifiées

Rédéfinition du comportement de certaines anciennes balises

Les nouvelles balises
- de structure (header, nav, section, footer, aside, etc)
- d'intégration de dessin et d'objets externes : canvas, audio, video

Les nouveaux types d'attributs disponibles
- pour les formulaires : email, url, date ...
- ainsi que pour la plupart des balises HTML traditionnelles
- les attributs personnalisés (data)

Nouveautés CSS 3

Des spécifications encore en travaux : l'utilisation des préfixes propriétaires.

L'extension des sélecteurs d'attributs
Les nouvelles propriétés de mise en forme : choix de polices, arrondis, ombres portées, dégradés de couleurs, ...
Les transitions et animations : éviter le recours au Javascript pour des effets simples.

Élargissement de la gamme des sélecteurs de pseudo-classes et pseudo-éléments.
Ces sélecteurs permettent de cibler la moindre partie d'un document, sans le surchager de balises HTML :
- only-child, nth-child, only-of-type, nth-of-type, first-of-type, ...

Gestion des éléments de formulaire via CSS : enabled, disabled, valid, required, optionnal

Évolution des CSS pour les appareils mobiles : les media-queries

Toutes ces nouveautés HTML 5/CSS 3 seront vues pendant la session au travers d'exercices pratiques.