Accueil
Mes tutoriels sur la programmation

Tutoriel HTML - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

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

Nouveautés apportées par la version 5 de HTML sont très nombreuses.

Mais HTML5 c'est aussi un enrichissement notable de son langage de programmation (le JavaScript) avec de nouvelles API proprosées par le W3C Canvas, API geolocation, Web storage, etc. Ces API sont implémentées par les navigateurs récents.

Dans le cadre de ce tuto j'évoque aussi certaines API JavaScript non implémentées mais qui peuvent s'avérer utiles pour ne pas "réinventer la roue" ...

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.

Exempe d'animation (celle de la page d'accueil de mon site)

Le code HTML

<div id ="container2"> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1"/> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div>

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 : Tutoriel CSS -version 3

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.

Grâce à cette application vous pouvez composer une couleur et voir le code RGBA correspondant.

Déplacer les quatre curseurs jusqu'à ce que vous ayez trouvé la bonne couleur

La couleur correspondante :

Le code RGBA de cette couleur :

Le code correspondant

Cette application est reprise dans le dernier chapitre de ce tuto.