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 par leur multiplication
• 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 donc 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.
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.

• 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

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.

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

Le code pour réaliser cette animation se résume à :
• dessiner via HTML une boite (un simple DIV) et y inclure deux gif animés
• via la feuille de style interne (dans la page web) réaliser un "keyframes" (modèle d'animation CSS3) puis deux règles de style basées sur la nouvelle propriété "animation"

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