Tutoriel HTML - introduction
Objet de ce tuto
Les débutants en HTML doivent lire les pages "révisions HTML4" dans ce tuto.
Les internautes ignorants en HTML & CSS doivent visiter - dans le même site - le tuto intitulé :
débuter en HTML & CSS
- 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 nouvelle balise double : SVG. On peut donc dessiner directement dans une page : dessin vectoriel.
Mais la norme HTML5 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 (ne faisant pas partie de la norme) 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 : service de traduction en ligne
Compte tenu de son importance, l'API Canvas (dessin matriciel cette fois) fait l'objet de son propre tutoriel.
Le langage SVG constitue aussi un tuto distinct.
Dans les deux cas consultez le sommaire général ("mes tutoriels sur la programmation") en haut de page.
Applications et animations HTML5
Avec peu ou prou de HTML, un peu de CSS (version 3) voire un zest de JavaScript, on peut réaliser de belles applications ou animations HTML5.
Exemple d'animation (celle de la page d'accueil de mon site)
Animation masquée sur un mobile.
Le code HTML
Le code HTML est consternant de simplicité.
Notez cependant que chaque élément IMG a l'attribut class et l'attribut id ...
Ici c'est le code CSS qui importe.
Le code CSS
#container2 {width : 100% ; height :500px ;
background-image :url(../images/paysage_hiver3.jpg) ;
background-size : cover ; border :1px solid black ;
position : relative ; perspective : 800px ;
perspective-origine : top right; }
.fondeur {position:absolute ; left : 0px ; height : 100px; }
#fondeur1 {top : 380px ;}
#fondeur2 {top : 400px ; }
@keyframes deplacer
{
from{ transform : translateX(0px) translateY(0px) translateZ(0px) ;}
to{transform : translateX(1100px) translateY(-150px) translateZ(-600px) ;}
}
#fondeur1 {animation : deplacer 16s 0s infinite linear ; }
#fondeur2 {animation : deplacer 14s 2s infinite linear ; }
Cette animation est responsive : la zone s'adapte à la taille de la fenêtre.
Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste parfaitement à la taille de la boîte.
Il s'agit d'une boite 3D puisque l'axe Z est défini avec les propriétés perspective & perspective-origine.
Le modèle d'animation repose sur des transformations et plus précisément des translations.
Vous ne comprenez rien au code CSS, visitez dans le même site, le tuto sur CSS :
Une application HTML5 : 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.
Le code correspondant
Cette application est reprise dans le dernier chapitre de ce tuto.