HTML5 et CSS3

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

• 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

• 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».

• 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

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

• 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
• 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...

• 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

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