Tutoriel HTML - sommaire

HTML 5 : une évolution majeure du langage HTML

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 en HTML 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

Les nouveautés apportées par la version 5 de HTML sont très nombreuses. Citons entre autres :
• simplification du codage en particulier du doctype
• syntaxe plus permissive que la norme XHTML
• apparition de balises structurantes qui évitent de recourir aux fameux div id = ... qui rendaient le code illisible ...
• une notable amélioration pour les formulaires : nouveaux types de champs, nouveaux attributs qui permettent de réaliser un véritable contrôle de saisie côté client sans devoir recourir au JavaScript
• balises AUDIO et VIDEO qui dispensent de recourir au lecteur Flash ...
• de nouveaux attributs de balise et en particulier l'attribut contenteditable mais surtout les attributs data-*. Et oui le développeur peut désormais créer ses propres attributs. Ces attributs personnalisés peuvent être ensuite utilisés par CSS et JavaScript
• le code SVG peut désormais être écrit directement dans une page à condition qu'il soit contenu dans la balise double : SVG. On peut donc dessiner directement dans une page : dessin vectoriel.

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. 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 par les navigateurs mais qui peuvent s'avérer utiles pour ne pas "réinventer la roue" ...

• Google maps et son alternative libre et collaborative : OpenStreetMap
• Google translate : pour installer un service de traduction dans une page
• Google Charts : pour produire de superbes graphiques interactifs dans une page

Sachez aussi qu'il est très simple de personnaliser le moteur de recherche Google afin de mettre à disposition des visiteurs une zone de recherche dans votre site.
Intégrer des services en ligne gratuits proposés par Google dans votre site

Compte tenu de son importance, l'API Canvas (dessin matriciel cette fois) fait l'objet de son propre tutoriel.
API Canvas pour dessiner dans une page

Applications et animations HTML5

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

Exemple d'animation

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

Exemple d'application HTML : 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.

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

Code correspondant à cette application