Tutoriel HTML - sommaire

Tutoriel HTML5 - chapitre introductif

HTML est incontournable en matière de développement web.
Les navigateurs ont tous implémenté la version 5 de HTML.

Même si vous développez avec des langages "côté serveur" (comme PHP ou Python) vous aurez besoin de solides notions en HTML.
Je rappelle que les fichiers PHP ou les templates HTML doivent retourner du code HTML au navigateur ; ces documents comprennent donc essentiellement du code HTML.

Les limites de HTML

HTML ne peut pas tout faire

HTML est destiné surtout à produire du texte dans une page web voire à y insérer des images, des liens hypertexte, des fichiers audio et vidéo, à proposer des formulaires pour une interaction avec le visiteur, etc.

La mise en forme d'un document HTML est confiée à CSS ; HTML ne gèrant que la structure et la sémantique.

Pour créer des dessins et animations pour le web : SVG

Si vous voulez produire des objets graphiques complexes (triangles, pentagones, croix, des chemins, etc.), vous devez recourir à un autre langage XML : SVG (Scalable Vector Graphics) : dessins vectoriels pour le web avec SVG

Ci-dessous un dessin vectoriel produit avec SVG :

Pour écrire des formules : MathML

Si vous désirez écrire des formules mathématiques, vous devez utiliser le format MathML : Le langage MathML

Les navigateurs récents ont implémenté SVG & MathML !

Depuis la norme HTML5 les pages web peuvent contenir du code SVG et MathML.

HTML n'est pas un langage de programmation

HTML est simplement un langage de balisage ; il ne propose de structures de contrôles (tests et boucles), de variables et tableaux.
La solution consiste donc à intégrer du code HTML dans un script JavaScript ou mieux encore dans une routine PHP (donc exécutée côté serveur). Le code JavaScript est toujours visible par l'internaute alors que ce dernier n'a pas accès au code PHP.

Vous trouverez dans mon site un tuto d'initiation à ces deux langages de programmation :
JavaScript - langage de programmation web côté client
PHP - langage de programmation web côté serveur

Contenu du présent tuto

Dans les premiers chapitres de ce tuto je rappelle ce qu'était le HTML version 4 qui présentait de nombreuses limites puis j'aborde dans une deuxième partie toutes les innovations de la norme HTML5 et dans une troisième partie j'évoque les API web.

Les débutants en HTML ont intérêt à lire les pages "révisions HTML4" de ce tuto. D'ailleurs tout ce qui est écrit est toujours valide dans 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 HTML & 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 tuto sur CSS3

HTML 5 : une liste impressionnante d'innovations

Désormais les choses sont "carrées" : le code CSS gère le style de la page tandis que le code HTML gère la structure et la sémantique de celle-ci ; 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 nouvelles balises sémantiques en particulier les éléments 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
• éléments AUDIO et VIDEO qui dispensent de recourir au lecteur Flash ...
• de nouveaux attributs de balise
• le code SVG peut désormais s'écrire directement dans le document HTML
• la spécification 5 a déprécié certaines balises et certains attributs

HTML au sens large, c'est aussi une amélioration notable de son langage de programmation : le JavaScript.
mon tuto sur JS

HTML au sens large c'est aussi de nouvelles API web. Citons entre autres : Canvas, geolocation, Webstorage, Drag & drop, etc.
Ces API implémentées par les navigateurs récents, sont présentées dans ce tuto.
Toujours dans ce tuto j'évoque aussi certaines API non implémentées par les navigateurs mais qui peuvent s'avérer fort utiles et qui sont faciles à installer.

Citons :
• 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