Tutoriel HTML - sommaire

Tutoriel HTML5

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, les templates seront encodés en HTML. Un HTML éventuellement enrichi ...

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

Applications et animations HTML5 & CSS3

Une application : 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

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

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