Vainqueur de l’affrontement avec le XML au début des années 2000, le langage HTML a vu son organisation bouleversée. Son domaine se retrouve réduit à l’organisation des données sur un périphérique de sortie. En général, le HTML est utilisé pour afficher un site internet sur votre téléphone ou ordinateur.
Historiquement, il embarquait des consignes, les balises, pour indiquer la mise en forme. La plus simple est le paragraphe, <p>, qui indique un texte simple. Celui-ci peut être précédé de titres, <h1>, et de sous-titres à différents niveaux (de <h2> à <h6>). D’autres consignes font apparaître le texte entouré sous forme de listes, <li>, ordonnées, <ol> ou non, <ul>.
Le souci, c’est qu’avec des consignes pareilles, les mises en formes possibles sont peu nombreuses. On ne fait qu’aligner du texte au kilomètre. Pour un peu plus de mise en forme, il faut créer un tableau, <table>, en gérant la taille de ses lignes, <tr>, et de ses cellules, <td>. Une autre solution était de définir des cadres <frame> indépendants.
Avec ces outils, la mise en page commence à se structurer mais pas l’apparence de l’information. Des balises de mise en forme ont été créées pour afficher en gras, <b> (bold en anglais), en italique, <i> ou souligné, <u> (underlined). Mais à ce rythme, les balises devraient se multiplier à l’infinie pour répondre aux besoins des clients.
Alors la première solution a été d’ajouter des attributs pour modifier l’interprétation des balises. Ainsi l’attribut bgcolor permet de modifier la couleur de fond d’un élément. Border permet de définir une bordure autour de l’élément. Le code HTML <p bgcolor=”#E6FFE6” border=”1”><b> Ceci est un paragraphe !!!</b></p> apparaissait ainsi :
| Ceci est un paragraphe !!! |
La problématique n’est plus la multiplication des balises mais la multiplication des attributs possibles dans une balise, simplement pour mettre en forme le texte. Les balises se retrouvent rallongées et l’information est moins visible dans le document HTML. Il faudrait externaliser le style dans un autre langage qui le définit.
C’est de cette idée simple que sont apparues les feuilles de style. On parle de CSS (Cascading style sheet). Il s’agit de documents qui décrivent l’apparence des éléments HTML. Dans l’entête, <head>, le document HTML indique le lien vers la feuille de style, <link rel=”stylesheet” href=”maFeuilleDeStyle.css”>.
Ainsi, le document HTML ne contient que l’information. Sa mise en page et celle de tous ses éléments est portée dans le document CSS. Le travail ainsi découpé, la page HTML est très simple même si sa mise en forme est riche et complexe. L’artiste est maître du rendu sans avoir à déranger ses collègues développeurs de sites.
La syntaxe du langage CSS est aussi facile. On définit un sélecteur qui contient des éléments de styles : la couleur, la taille, les marges, le mouvement d’éléments comme une police de caractère, un tableau, un paragraphe, …
Un sélecteur peut être une balise, une classe ou un identifiant :
- une balise, vous connaissez : <p>
- une classe, ‘.’, est une valeur dans l’attribut class : <p class=”maClasse”>
- un identifiant, ‘#’, est une valeur dans l’attribut id, utilisé en principe de manière unique dans un document HTML : <p id=”id1”>
Les informations dans la feuille sont ordonnées, suivant une syntaxe simple. Le sélecteur est suivi d’une accolade. Les éléments sont distingués suivant la logique propriété : valeur et séparés par une virgule.
L’exemple précédent devient :
- <p> Ceci est un paragraphe !!!</p>, pour la partie HTML.
- p { background-color: #e6ffe6 ; border: solid black ; font-weight: bold; }, pour la CSS.
Le rendu est le même mais les développeurs n’ont plus à répondre aux questions artistiques de leur donneur d’ordre. Ils renvoient le problème à l’artiste de la boîte. Quand on connaît la complexité du domaine artistique, la conception de sites devient ainsi simple et efficace.