Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

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

HTML 5 : une évolution majeure du langage HTML

HTML & CSS sont incontournables en matière de programmation web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python les templates seront encodés en HTML et votre site web aura forcément une ou plusieurs feuilles de style codées en CSS.

HTML 5 (HyperText Markup Language version 5) est la dernière révision majeure du HTML. Cette version a été finalisée en 2014. Il faut noter en parallèle la formidable évolution du CSS avec de nombreuses nouvelles propriétés.
Désormais les choses sont claires : le HTML ne s'occupe que du contenu et le CSS gère la mise en forme. Cependant les balises B,I,S, U (gras, italique, barré, souligné) sont encore admises.

Le présent tuto rappelle dans quelques chapitres ce qu'était le HTML version 4 et ses limites. Il était alors impossible de manipuler les fichiers audio et vidéo en HTML (obligation d'utiliser Flash), seul l'affichage du site sur un seul type d'écran était possible, etc.
Les débutants en HTML ont intérêt à lire les pages "révisions HTML4" dans ce tuto car ce qui y est écrit est toujours valide pour la version 5.
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 programmation web (HTML,CSS & PHP)

L'implémentation de HTML5 & CSS3 par les navigateurs est progressive.
L’usage de nouveaux éléments/attributs HTML5 non reconnus par votre navigateur ne bloquera pas l'affichage de la page mais adoptera un mode dégradé. Par exemple, si le navigateur ne connait pas le type "email" pour les INPUT, le champ affiché sera de type "text".

HTML 5 : une liste impressionnante d'innovations et de simplifications

Mais la norme HTML 5 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.
Compte tenu de son importance, l'API Canvas fait l'objet de son propre tutoriel dans mon site : API Canvas pour dessiner dans une page
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 non implémentées par les navigateurs mais qui peuvent s'avérer fort utiles, pour ne pas "réinventer la roue". La plupart sont proposées par Google.

Des API tierces qui peuvent être utiles

Une application HTML5 & CSS3 : la boite à couleurs

Composez de belles couleurs grâce à cette application. Cette application communique aussi le code RGBA de la couleur que vous avez composée.
Vous pourrez argumenter dans vos feuilles de style, les propriétés CSS backgroud-color, color, border-color avec ce code RGBA.

Grâce à cette application vous pouvez composer une couleur et obtenir le code RGBA correspondant.

Déplacer les quatre curseurs pour composer une couleur personnalisée !

La couleur correspondante :

Ci-dessus le code RGBA de la couleur produite (à utiliser comme valeur des propriétés background, color, border-color, etc.)

Le code se résume à un formulaire HTML utilisant de nouveaux types de la balise INPUT et un script jQuery.
Le code correspondant à cette application

Une animation HTML5 & CSS3

HTML5 & CSS3 sont deux langages indissociables de la programmation web ! Il est difficile d'envisager l'emploi de l'un sans l'autre.

Ci-dessous une animation réalisée uniquement en HTML & CSS (pas de script).

Mon site comprend bien sûr un tutoriel CSS3 : Tuto CSS3