Tutoriel HTML - sommaire

Tutoriel HTML5 - chapitre introductif

HTML est incontournable en matière de développement web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python, vous avez besoin de solides notions en HTML (et CSS). Le serveur doit générer du HTML !

Le présent tuto rappelle dans les premiers 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).
On ne disposait que de la balise générique DIV pour structurer la page.

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)

Applications et animations HTML5 & CSS3

Ci-dessous une application en ligne et une animation réalisées en combinant HTML, CSS et JavaScript.

Application en ligne : la boite à couleurs

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

Une animation en ligne

Toujours pas de script mais seulement du HTM & CSS.

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

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

Désormais les choses sont claires : le code CSS gère le style de la page web tandis que le code HTML gère la structure et la sémantique de la page web. Seules subsistent quelques balises de mise en forme : b,u,i,s

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 sémantiques en particulier les balises pour structure la page et éviter le recours aux 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 une 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 qui 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
• La norme 5 a déprécié certaines balises et certains attributs.

Mais la norme HTML 5 au sens large, c'est aussi un enrichissement notable de son langage de programmation (le JavaScript) avec de nouvelles API proposées opar 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 d'un tuto dédié : 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