Séparer le fond de la forme : c’est le leitmotiv qui doit accompagner tout producteur de contenu !!!
Au fil de son développement, et contrairement aux principes initiateurs, le langage HTML s’est encombré (parfois sous la pression d’éditeurs de logiciels aux tendances un peu hégémoniques…) de balises et d’attributs de mise en forme. Cela s’est réalisé dans l’euphorie du développement d’un média qui serait devenu unique et universel : la consultation d’informations au travers d’un ordinateur connecté au réseau
Déjà, même si l’on en reste à ce seul « véhicule » le postulat est erroné, tous les ordinateurs du monde ne sont pas égaux devant l’internet
- Ils ne disposent pas tous des mêmes polices et/ou jeux de caractères
- Ils ne savent pas, non plus, tous lire les mêmes jeux de couleurs
- La taille et la définition de l’écran ne sont pas identiques
- Ils n’utilisent pas tous le même type de navigateur
- …
On comprend bien, en fonction de ces éléments, qu’il serait illusoire de vouloir construire un fichier unique et dont l’image graphique serait reçue partout également
Enfin, et surtout, nous assistons à une multiplication des modes de diffusion de l’information vers des récepteurs de formats différents : téléphones mobiles, télévision, synthèse vocale …
L’adoption d’un format d’édition indépendant de la forme est donc pour le responsable de projet web une question de pérennité et l’assurance que son contenu pourra s’adapter « facilement » aux nouveaux modes diffusion … même ceux que nous ne connaissons pas encore.
Qu’est-ce qu’une feuille de style ? :
C’est un fichier indépendant du document HTML qui, pour chaque balise structurante (les titres, les sous titres, les paragraphes …) définit les attributs de mise en forme (police, couleur, taille, espacement …).
Ce fichier porte généralement une extension .css (cascading style sheet)
Voici un exemple de feuille de style :
Attention !!! il n’est pas exhaustif, il ne reprend que la mise en forme de quelques balises utilisées dans notre document exemple <body> <h1> <h2> <p>, et n’utilise pas tous les attributs de mise en forme existants.
body {
font-family:verdana, sans-serif;
background-color:yellow;
margin:15px;
}
h1 {
font-family:verdana, sans-serif;
font-size:150%;
color:gray;
background-color:white;
text-align:center;
}
h2 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
font-style:italic;
background-color:transparent;
text-align:center;
}
p {
font-family:verdana, sans-serif;
font-size:100%;
color:red;
text-align:justify;
background-color:transparent;
margin-left:0px;
margin-right:0px;
}
Pour que le navigateur puisse associer notre page HTML exemple à la feuille de style il faut y rajouter une balise d’entête qui assure le lien :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Language" content="fr" />
<meta name="description" content="page d'exemple html sans feuille de style" />
<meta name="keywords" content="exemple html,formation html" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style1.css" type="text/css" />
<title>page de test html sans feuille de style</title></head>
<body>
<h1>voici le titre de premier niveau</h1>
<h2>ici le premier sous titre de niveau 2</h2>
<p>voila un simple paragraphe </p>
<p>et un second dans lequel est imbriqué un lien hypertexte vers <a href= »http://www.3w3t.com/ » title= »ce lien revient à l’accueil »> l’accueil du site 3w3t </a></p>
<p>et ici une image du drapeau français
<img src= »fr.gif » alt= »voila le drapeau de la france il est bleu blanc rouge » title= »voila le drapeau de la france il est bleu blanc rouge » /></p>
<h2>ici le second sous titre de niveau 2</h2>
<p>exemple de tableau</p>
<table summary= »ce tableau ne contient pas de données interessantes, c’est un exemple »>
<tr>
<th>titre de la colonne 1</th>
<th>titre de la colonne 2</th>
<th>titre de la colonne 3</th>
</tr>
<tr>
<td>valeur de la ligne 1 colonne 1</td>
<td>valeur de la ligne 1 colonne 2</td>
<td>valeur de la ligne 1 colonne 3</td>
</tr>
<tr>
<td>valeur de la ligne 2 colonne 1</td>
<td>valeur de la ligne 2 colonne 2</td>
<td>valeur de la ligne 2 colonne 3</td>
</tr>
</table>
</body>
</html>
Lorsque un internaute charge cette page avec son navigateur il voit ceci
On ne peut pas dire qu’elle soit très jolie … mais vous aurez compris que sans changer quoi que que ce soit dans le document HTML de base (hors le rajout de la balise <link…>) nous avons pu spécifier une couleur de fond, une taille, une police, et une couleur spécifique pour les titres de premier niveau…
Parmi les avantages de l’utilisation de la feuille de style externe :
- Pour le webmaster chargé du design du site il devient « facile » de changer toutes les caractéristiques graphiques en modifiant le seul fichier CSS sans toucher aux pages de données HTML
- Différentes feuilles de style peuvent être créées pour adapter le contenu au récepteur,(ou mieux : des variantes au sein de la même feuille de style) on peut citer :
une feuille de style adaptée à l’impression de la page HTML sur imprimante
une feuille de style adaptée à la visualisation sur un écran « réduit » (téléphone mobile, assistant personnel…)
…
Tout cela sans changer une seule ligne de code dans le document structuré de base HTML ou XHTML
Publier un commentaire