Toutes les bonnes choses vont par trois: interaction de HTML, CSS et JavaScript

Lorsque je dis à mes enfants que je leur ai déjà expliqué une centaine de fois qu’ils doivent ranger leur chambre, il s’agit bien évidemment d’une exagération. Cependant, quand j’affirme avoir déjà expliqué une centaine de fois le lien entre HTML, CSS et JavaScript, je n’exagère en rien. Vous trouverez ici une autre version de mes explications sous la forme d’un article de blog.

Trois technologies

Les trois technologies HTML, CSS et JavaScript peuvent être représentées de façon schématique sous la forme d’un triangle :

Chacune de ces trois technologies remplit des fonctions bien précises et a sa propre syntaxe. Chacune représente une langue à part entière.

HTML > On meuble la pièce

HTML remplit la fonction la plus élémentaire : le document qui doit s’afficher – généralement un site web – est créé en HTML et est enregistré sous la forme d’un fichier .html. En principe, HTML répond à la question “Qu’est-ce que j’aimerais avoir sur mon site ?”.

HTML met à disposition les éléments de la page, définit leur type et la structure ainsi que leur agencement logique. HTML n’est pas un langage de programmation, mais un langage de balisage, comme l’indique l’abréviation Hypertext Markup Language.

Une analogie : l’achat des meubles

Imaginez-vous une pièce. Cette pièce représenterait la totalité de notre document HTML. Il me resterait à dresser une liste des meubles, comme suit :

<pièce>
	<meubles>
		<lit />
		<chaise />
		<armoire />
	</meubles>
</pièce>

Je réponds à la question “Quels sont les meubles dans la pièce ?”

Il est également possible de représenter à merveille la structure logique des autres objets :

<pièce>
	<meubles>
		<lit>
			<housse>
				<coussin />
			</housse>
		</lit>
		<chaise />
		<armoire />
	</meubles>
</pièce>

Il est même possible d’indiquer certaines propriétés (logiques !) des objets :

<pièce>
	<meubles>
		<lit>
			<housse>
				<coussin />
			</housse>
		</lit>
		<pattes-chaise="4" />
		<armoire />
	</meubles>
</pièce>

La suite du blog vous explique exactement ce que sont les propriétés logiques (contrairement aux propriétés physiques).

CSS > Le style: travailler sur l’apparence

CSS signifie Cascading Style Sheets et répond à la question “A quoi ressemblent les éléments ?”

CSS ne me permet pas non plus vraiment de faire de la programmation – bon, les transitions sont fluides – et je suis limité à faire de la description. Je décris l’apparence de chaque élément et la façon dont, ensemble, ces éléments constituent une mise en page. Contrairement à HTML, qui ne se charge que du formatage logique, CSS assure le formatage physique.

Notre analogie : la conception des meubles

Notre pièce contient déjà des meubles divers: un lit avec un coussin recouvert d’une housse, une table et une chaise avec quatre pattes. La définition avec CSS de la couleur de la housse ressemblera à la chose suivante :

housse-coussin {
	couleur: rouge;
}

La taille ne pose aucun problème non plus :

housse-coussin {
	couleur: rouge;
        largeur: 100cm;
        longueur: 80cm;
}

Et si je veux que mon coussin soit en plumes, j’utilise le code CSS suivant :

coussin {
	matière-remplissage: plumes;
}

Les propriétés CSS ne sont en aucun cas des propriétés physiques des éléments, à savoir celles qui définissent ce à quoi les éléments doivent ressembler en termes d’apparence, de position, de visibilité, etc. Pour reprendre l’exemple de l’”ameublement” de la pièce:

chambre {
	couleur-papier-peint: jaune-clair;
	disposition-des-meubles: mur-gauche;
}

Je suis sûr qu’Ingvar Kamprad s’amuserait comme un fou avec CSS…

JavaScript > Dynamique et programmation

Avec HTML et CSS, les sites web restent statiques. Impossible de réaliser une simple addition telle que 1 + 1. Si je veux modifier les éléments ou leur apparence, c’est là que JavaScript intervient. La question qu’il conviendrait de poser ici serait: “En quoi les éléments ou leur apparence doivent-ils changer ?”

Etant donné que JavaScript me permet de modifier aussi bien les propriétés de HTML que celles de CSS, je peux modifier aussi bien le contenu et la structure que l’apparence et la présentation de ma page. Il me suffit de préciser le moment auquel cette modification doit avoir lieu.

A titre de comparaison

Si je souhaite que la couleur de ma housse change dès que quelqu’un la touche (avec la souris ?), j’écris alors le code JavaScript suivant :

housse.coussin.touchée = modification () {

sa.couleur = "vert-clair";

}

C’est simple, non?

Mise en interaction

Le code entier de notre pièce ressemblerait alors à ceci :

<chambre>
	<grundsätzliches>
		<titel>Alex Hobbyraum</titel>
		<style>
			zimmer {
				tapeten-farbe: hellgelb;
				möbel-anordnung: an-linker-wand;
				}

			kissenbezug {
				farbe: rot;
				breite: 100cm;
				länge: 80cm;
				}

			kissen {
				füllung-material: daunen;
				}
		</style>

		<script>
			kissen.bezug.wirdBerührt = etwasZuTun () {
				seine.farbe = "hellgrün";
			}
		</script>

	</grundsätzliches>
	<einrichtung>
		<bett>
			<kissenbezug>
				<kissen />
			</kissenbezug>
		</bett>
		<stuhl beine="4" />
		<schrank />
	</einrichtung>
</zimmer>

Pourquoi est-il important de comprendre l’interaction ?

Souvent, les gens viennent me voir et me disent plus ou moins : “Alex, notre site (!) est vraiment bien fait ! Pourquoi n’est-il pas mieux référencé dans Google !?”

Mettons les choses au clair ! Google est “aveugle”, comme un lecteur d’écran. Il se moque de savoir si un site a un arrière-plan vert ou jaune. Un moteur de recherche et les appareils de lecture pour aveugles s’intéressent bien plus au contenu et à la structure logique qu’à l’apparence. HTML est plus important que CSS et JavaScript. En revanche, les clients et les utilisateurs d’un site web attachent plus d’importance à l’esthétique, à une belle présentation et à des gadgets dynamiques. Dans ce cas de figure, CSS et JavaScript sont plus important que HTML.

A mon avis, une conception de site intelligente se démarque par un bon équilibre entre ces trois technologies, aussi bien d’un point de vue syntaxique que conceptionnel. C’est parfois la raison pour laquelle les graphistes et les programmateurs ne sont pas forcément de bons concepteurs.