Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

HTML5 : une révolution

Les débutants en HTML doivent lire les pages "révisions HTML4" dans ce tuto.
Pour les visiteurs complètement ignorants en HTML & CSS, je leur conseille de visiter d'abord le tuto (dans le même site) : débuter en HTML & CSS

HTML5 : une liste impressionnante d'innovations et de simplifications

Mais la norme HTML5 c'est aussi un enrichissement notable de son langage de programmation (le JavaScript) avec de nouvelles API proposées par le W3C (W3C : instance internationale de normalisation de la programmation web).
Citons entre autres : Canvas, geolocation, Webstorage, Drag & drop, etc. Ces API sont donc implémentées par les versions récentes des différents navigateurs.

Dans le cadre de ce tuto j'évoque aussi certaines API JavaScript non implémentées (ne faisant pas partie de la norme) mais qui peuvent s'avérer utiles pour ne pas "réinventer la roue" ...

Compte tenu de son importance, l'API Canvas (dessin matriciel cette fois) fait l'objet de son propre tutoriel.
Le langage SVG constitue aussi un tuto distinct.

Applications et animations HTML5

Avec peu ou prou de HTML, un peu de CSS (version 3) voire un zest de JavaScript, on peut réaliser de belles applications ou animations en ligne.

Exemple d'animation

Sur un smartphone, orientez en mode "paysage" sinon dézoomage de la page.

Le code HTML

Le code HTML est donc d'une simplicité étonnante.
Notez cependant que chaque élément IMG a l'attribut class et l'attribut id ...
Ici c'est le code CSS qui détermine l'animation.

Le code CSS

Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste parfaitement à la taille de la boîte.
Le modèle d'animation repose les propriétés top, left, height appliquées aux "sprites". Les fondeurs se déplacent du coin bas gauche vers le coin haut droit et leur taille diminue afin de créer un effet de perspective alors qu'il s'agit d'une zone 2D ...

Une application HTML5 : la boite aux couleurs

Composez de belles couleurs pour vos sites ; vous récupérez le code RGBA correspondant dans un champ en lecture seule.
Vous pourrez argumenter les propriétés CSS backgroud-color, color, border-color avec ce code proposé par l'application.

Grâce à cette application vous pouvez déterminer une couleur et récupérer le code RGBA correspondant !

Déplacer les quatre curseurs jusqu'à ce que vous ayez trouvé la bonne couleur

La couleur correspondante :

Ci-dessus le code RGBA de la couleur produite (à utiliser comme valeur des propriétés CSS background ou color !)

Code correspondant à cette application