Dates

Autres Dates, nous contacter.

Durée

2 jours

1. Rappels

• Rappels sur les versions HTML(HTML 4, XHTML 1.x, XHTML 2).
• Les DTD : strict, transitional, frameset.
• Les différents composants d’un document HTML : titres, paragraphes, liens, tableaux, formulaires…
• Les commentaires.
• La structure composite d’un document HTML : images, feuilles de style CSS, JavaScript, Flash…
• Le modèle de document (DOM).
• Le protocole HTTP.
• Interaction client / serveur HTTP.
• Interprétation du HTML par le navigateur.
• Position des navigateurs face aux technologies HTML.

2. Introduction au HTML 5

• Les objectifs de HTML 5.
• Le WhatWG versus W3C.
• Les principaux concepts et apports.
• La  » roadmap  » de HTML 5.
• Quand utiliser HTML 5 ?
• Les différents composants : balises, formulaires, audio, vidéo, API, etc.
• Outils de développement HTML 5.
• Test de compatibilité, méthode de détection HTML 5.

3. Nouvelle structuration

• Les éléments traditionnels structurant un document HTML5 (doctype, html, head, body, meta …).
• L’élément <nav> et la mise en place d’informations de navigation internes au site.
• L’élément <section> et la mise en place de blocs de contenus.
• L’élément <article> et la mise en place de contenus indépendants du document.
• L’élément <aside> et la mise en place de blocs d’informations complétant un contenu principal.
• Les éléments <header> et <footer> et la mise en place de sections d’introduction et de conclusion d’un bloc.
• Les autres balises de structure.
• Les nouvelles catégories de contenus : Metadata content, Flow content, Sectioning content, Heading content.
• Les nouvelles catégories de contenus : Phrasing content, Embedded content, Interactive content.
• La validation des pages avec le valideur officiel du W3C.
• Intérêt de ses nouvelles balises de structure.
• Abandon de la notion de type « en ligne » et « bloc ».

4. Les nouvelles balises HTML

• Les balises et attributs obsolètes.
• Les images SVG pour le dessin vectoriel.
• Les canevas pour le dessin « bitmap ».
• Différence Canvas vs SVG.
• Les nouvelles balises : <mark>, <meter>, <time>, <figure>…
• Les extensions de balises HTML existantes.
• Les nouveaux attributs : a, fieldset, iframe, area, button…
• Les microformats. Présentation et avantages sur le référencement. Attributs itemprop=’nationality’ …
• Les formulaires. Les nouveaux types de la balise <input> (email, date, week,…).
• Les nouveaux champs de formulaires : range, autofocus, placeholder, menu…
• Le contrôle et la validation de formulaires.
• Les formats multimédias. Codecs et API Multimédia.
• Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML 5.

5. Les sélecteurs CSS 3

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

6. Les couleurs

• Rappel sur les déclarations rgb et rgba.
• Les modèles hsl et hsla.
• La propriété opacity.

7. La mise en forme du texte

• Support des polices distantes @font-face.
• Mise en forme du texte.
• 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…

8. La mise en forme des boîtes

• Les ombres avec box-shadow.
• Les coins arrondis avec border-radius…
• La mise en forme du fond
• Les fonds multiples.
• Les gradients de fond (-webkit-gradient).
• Les fonds ajustés aux conteneurs.

9. Les transformations

• Les transformations : translations, rotations, homothéties (-webkit-transform).
• Les animations : les animations, les transitions (?webkit-transition).