Deuxième édition : 01/02/2003. Mise à jour le 10/02/2003.
Nous allons voir ensemble comment rendre un site existant conforme aux standards, en prenant une page non conforme, et en la transformant pour obtenir une page respectant les standards et ainsi apprendre concrètement l'intérêt de ce développement. Vous aurez à la fin, j'espère, oublié toutes vos mauvaises vieilles habitudes de codage.
Dans ce tutoriel, des techniques de développement avec des feuilles de styles CSS sont utilisées.
Il se peut qu'il y ait d'autres techniques CSS, plus optimisées que celles décrites ici
(en matière de positionnement notamment) pour faire la même chose, voir mieux.
Mais le but principal de ce tutoriel est de montrer les alternatives aux méthodes "anciennes" de
construction de page (méthodes qui ne permettent pas d'avoir un site léger, accessible etc..).
J'ai pris comme exemple la page "présentation" du site d'un ami. Ce site est malheureusement un peu à l'abandon. Il a été réalisé début 2001, époque où très peu de gens avaient conscience de l'intérêt des standards (moi y compris ;).
Voici comment est construite la page actuelle :
Je vous conseille de regarder le code source de cette page pour bien comprendre la suite de ce tutoriel.
Ce qu'il faut savoir avant tout, c'est que si l'on choisit de respecter les standards, on choisit alors
d'abandonner le support des vieux navigateurs tel que NS4 et IE4 qui ne sont pas conformes
(et pour cause, ils ont été développés avant l'établissement définitif des standards). Il est toujours
possible d'avoir des pages valides qui s'affichent à peu près bien dans ces vieux navigateurs, mais cela
veut dire que l'on sera obligé de faire des concessions : continuer à utiliser certaines
balises hors de leur contexte ( comme table pour structurer une page au lieu de div ), ce qui n'est pas le
but de ce tutoriel, bien au contraire. Le nombre de personnes utilisant ces navigateurs étant en chute libre, il n'y a plus trop
d'intérêt à passer du temps à faire en sorte que l'apparence du site soit identique sur ces navigateurs.
De toute façon le site sera au pire, "visible" sur ceux-ci.
Les pages conformes doivent inclure en début de page une balise <!DOCTYPE> spécifiant
la norme utilisée : HTML 4.01,
XHTML 1.0, XHTML 1.1 etc...
Choisissons le XHTML 1.0 strict. Il permet une vrai séparation de la structure du document
avec la présentation (l'apparence). Il n'y a d'ailleurs plus, dans cette version "strict",
les balises font, center et autres attributs bgcolor...
Il nous permet donc de prendre dès maintenant de bonnes habitudes pour le développement des pages,
ce qui nous sera utile à l'avenir lorsque ce standard évoluera.
Nous allons lors de la construction de la page enlever d'abord tout ce qui est obsolète en XHTML, à savoir tout ce qui concerne les éléments de présentation, qui sont dorénavant à définir dans les feuilles de style
bgcolor, color, size...)font, center par exemple)Nous allons également remplacer des balises par d'autres qui représentent mieux la nature du contenu. En effet, comme on nous l'explique dans la rubrique XHTML, il est important de respecter la sémantique des balises, pour avoir un document qui soit accessible et compréhensible, quel que soit le navigateur utilisé.
Par exemple, la liste des éléments du menu (items) est placée actuellement dans un tableau :
l'utilisation des balises ul et li, destinées à afficher une liste justement, est plus adéquate.
Nous allons voir alors que ce nettoyage va contribuer à rendre le code source plus clair, plus léger,
plus lisible (on aura respecté la sémantique des balises) et donc plus facilement maintenable
sans pour autant modifier l'apparence grâce à l'utilisation des feuilles de styles !
Et surtout, la page sera affichée de façon "optimisée" sur TOUS les navigateurs, y compris les navigateurs texte.
Nous allons appliquer toutes les règles de passage du HTML classique au XHTML, largement décrites dans un autre document sur ce site.
On prendra donc bien soin, en particulier :
alt pour la balise img par exempleNous avons choisi le XHTML 1.0 strict : il faut le spécifier dans le code source par ces balises :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<html>
Pour inclure une feuille de style, on utilise la balise link. Il est possible d'en inclure
plusieurs qui seront utilisées par le navigateur en fonction
du media utilisé. Cela permet de rendre le site plus accessible. On pourra par exemple faire :
Pour cela, il faut indiquer un attribut media avec
une des valeurs disponibles.
Il est également possible de faire plusieurs feuilles de style pour faire plusieurs présentations différentes.
En effet, certains navigateurs comme Mozilla permettent de choisir la feuille de style que le site propose
parmi celles indiquées dans les balises <link type="alternate stylesheet" ...>.
On remarquera dans tous les cas qu'il ne sera pas nécessaire de toucher au code HTML pour que
ce site soit optimisé selon le media et selon les préférences de l'internaute : juste une feuille de style à faire
pour chaque cas.
Dans ce tutoriel, nous nous contenterons de ne faire qu'une seule feuille de style, pour les écrans normaux : media="screen"
La balise body contient plein d'attributs qui n'ont plus lieu d'être : bgcolor, leftmargin etc.
Remplaçons-les par les styles CSS équivalents :
body {
background-color : #ffffff; /* couleur de fond */
background-image: url('pix/fond_nav.jpg'); /* image de fond */
margin:0; /* suppression de toutes les marges */
padding:0;
}
En observant la majorité des feuilles de styles déjà définies, elles utilisent la même fonte.
Indiquons-la une fois pour toute avec le selecteur générique * (qui permet d'indiquer des styles communs à tous les éléments html).
* {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
Celle-ci est constituée de 2 colonnes : une pour le menu, l'autre pour le contenu principal. Nous allons utiliser 2 divs plutôt qu'un tableau avec 2 colonnes. Le code source est ainsi plus clair :
<div id="menu">
mon menu...
</div>
<div id="contenu">
mon contenu...
</div>
Nous avons également un logo. Nous n'allons pas l'inclure dans la div menu car il n'a pas
les mêmes attributs de style pour le positionnement comme on le verra plus tard. Nous allons donc
le mettre dans une div ayant pour id logo :
<div id="logo">
<a href="index.php3"><img src="pix/logo.gif" alt="Diplomaniac" /></a>
</div>
Il faut maintenant positionner toutes ces divs sur la page.
Occupons-nous du logo. On va lui mettre une position absolue, tout en haut à gauche dans la page.
#logo {
position: absolute;
left:0;
top:0;
}
Profitons-en pour supprimer la bordure du lien autour de l'image
#logo img {
border:0;
}
Occupons-nous maintenant de nos deux divs. Nous allons rendre la div menu flottante (attribut CSS float): elle s'affichera
au-dessus de la div contenu. On indique qu'elle sera à gauche, avec une taille de 150px.
#menu {
float: left;
width: 150px;
}
Il ne faut pas oublier le logo positionné en absolu en haut à gauche. On va donc spécifier que le contenu de la div s'affichera 100px plus bas que le bord haut de la div. Et on rajoute également un décalage sur la gauche.
#menu {
padding-top : 100px;
padding-left:5px;
}
Pour ce qui est de la div contenu, nous n'avons pas de positionnement particulier à faire. On va simplement indiquer une marge à gauche pour que son contenu ne soit pas en dessous du menu, et des marges internes pour être fidèle à la mise en page originale :
#contenu {
padding-top : 50px;
padding-left:10px;
padding-right: 30px;
margin-left:150px;
}
Dans la page originale, les tableaux sont largements utilisés pour chaque titre de menu et les listes d'item de menu. Nous pouvons nous passer de ces tableaux pour un code plus clair et plus simple.
En HTML, il y a des balises spécifiques pour les titres : h1, h2 etc...
Utilisons-les alors !
Notre code HTML devient donc :
<h1>Le site</h1>
...
<h1>Diplomacy </h1>
...
<h1>Suivre une partie </h1>
...
Le style par défaut de la balise h1 ne correspond pas à ce que l'on veut : dans la page originale,
les titres sont définis avec la balise b et la balise font qui fait appel à la feuille de style titrenav.
Redéfinissons tout ça dans cette feuille de style :
#menu h1 {
color : #6D62FF;
font-size: 12px;
font-weight: bold;
}
Pour chaque menu, il y a une liste d'éléments de menu. Là encore, plutôt que d'utiliser des tableaux,
utilisons les balises qui sont faites pour afficher une liste : ul et li.
<h1>Le site</h1>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Historique</a></li>
</ul>
...
Nous allons maintenant attribuer un style à ces listes. La puce utilisée dans la page originale est une image.
Nous allons donc spécifier une image pour les listes grâce à l'attribut CSS list-style-image :
list-style-image: url('pix/puce_bleue.gif');Certains navigateurs non conformes ne reconnaissent pas cet attribut. Il n'afficheront pas l'image. Il va donc falloir prendre en compte ceci : définir une puce classique de forme carrée (puisque c'est la forme de la puce image), et définir sa couleur : bleue.
Pour définir la forme de la puce, on utilise le style list-style-type. La grosseur de la puce
ne sera pas forcement la même que dans l'image mais qu'importe, on ne va pas chipoter pour une différence
de 2-3 pixels de coté.
list-style-type: square ; On va par contre avoir un petit souci pour la couleur de la puce. Il n'est pas possible de définir une couleur
différente de celle du texte dans li. Or, le texte doit être blanc. Pour résoudre le problème, il faut
indiquer une couleur bleue pour li, et mettre le texte dans des span en redéfinissant la couleur (en blanc).
#menu li {
color : #6D62FF;
}
#menu li span {
color : white;
}
Et le code HTML devient :
<h1>Suivre une partie</h1>
<ul>
<li><span>Waterloo</span>
....
</ul>
img dans les listes ?img).
Par défaut, les éléments d'une liste sont indentés. Nous ne voulons pas d'indentation : utilisons alors
le style padding-left pour la changer. La valeur 0 ne permet pas de voir la puce. Nous allons donc mettre
la valeur 15px.
Par défault, IE, pour la balise ul, met une marge différente de 0. Il va donc falloir la mettre à 0
si on ne veux pas d'indentation sur IE (cette valeur étant à 0 pour les navigateurs conformes, cela n'a donc pas
d'influence sur ceux-ci).
N'oublions pas de spécifier la couleur des liens.
#menu ul {
list-style-image: url('pix/puce_bleue.gif');
list-style-type: square ;
margin-left:0px;
padding-left: 15px;
}
#menu li {
color : #6D62FF;
}
#menu li span {
color: white;
}
#menu li a {
color: white;
}
#menu li a:hover {
color:#F6E7CA;
}
On s'aperçoit que les espacements entre les titres et les items de menu ne correspondent pas à la présentation originale.
On va y remédier en réduisant la marge du bas de la balise h1 (margin-bottom)
et celle du haut de ul (margin-top).
Finalement, nos feuilles de styles pour le menu sont :
#menu h1 {
color : #6D62FF;
font-size: 12px;
font-weight: bold;
margin-bottom:3px;
}
#menu ul {
list-style-image: url('pix/puce_bleue.gif');
list-style-type: square ;
margin-left:0px;
margin-top:0px;
padding-left: 15px;
}
#menu li {
color : #6D62FF;
}
#menu li span {
color: white;
}
#menu li a {
color: white;
}
#menu li a:hover {
color:#F6E7CA;
}
Le contenu de la page sur laquelle on travaille n'est pas d'une présentation compliquée et utilise peu d'éléments de présentation obsolètes. Tant mieux. Nous allons tout de même faire quelques améliorations pour le rendre conforme et mieux structuré.
La couleur de texte est bleue. Nous allons donc rajouter un style dans #contenu plutôt que de réutiliser la balise
font :
#contenu{
color : #211884;
}
Attaquons-nous ensuite au titre. Pour celui-ci, il y a une balise font obsolète, ainsi qu'une balise p.
Comme pour les menus, remplaçons-les par la balise de titre h1 et modifions son style pour
que le titre ait la même taille et soit aligné à droite:
#contenu h1 {
font-size : 18px;
text-align: right;
}
Il y a une balise hr avec un attribut size, obsolète. On va donc supprimer cet attribut et indiquer
dans une feuille de style une hauteur de 3px pour cette balise :
#contenu hr {
height: 3px;
}
Pour le reste du texte, nous allons faire un petit nettoyage :
<br> par des <p> quand c'est nécessairealign des balises p existantes (ne servent à rien et sont obsolètes).
N'oublions pas dans l'ancienne feuille de style, les styles pour les liens dans le texte (.texte a:link, .texte a ..).
Nous allons donc les reprendre :
#contenu a:link { color: #211884; }
#contenu a { color: #211884; }
#contenu a:hover { color: black; }
Reste le problème des images.
Supprimons tout d'abord les attributs border (obsolètes) des balises img et supprimons le tableau.
Pour leur position, nous allons faire au plus simple : les inclure dans une div pour laquelle nous allons mettre
l'attribut text-align : center
<div class="photos">
<img src="pix/new_box.jpg" alt="La boîte" /><br/>
<img src="pix/new_board.jpg" alt="Le plateau" />
<img src="pix/new_units.gif" alt="Les unités" />
</div>
#contenu .photos {
text-align:center;
}
Il ne reste plus qu'à supprimer tous les autres vieux styles qui ne servent plus à rien.
Il y a un petit pied de page qui contient l'image de l'outil de statistique XiTi (Normalement, il y a
un script javascript qui génère cette image et permet de stater la page : je l'ai enlevé pour ne pas stater cette copie !).
Nous allons la mettre dans une div.
<div id="pied">
<img src="pix/hit.xiti.gif" alt="xiti" />
</div>
Centrons cette image, et mettons des marges :
#pied{
margin-left:250px;
margin-top:20px;
text-align:center;
}
Nous voilà maintenant avec une page conforme. Elle a subi une grosse cure d'amaigrissement : une diminution plus de 40% (feuille de style comprise) ! Ce qui n'est vraiment pas négligable pour le téléchargement et la charge du serveur. Quand on regarde le code source final, on se rend compte également, qu'effectivement, il est beaucoup plus lisible et clair.
Vous pouvez aussi vérifier sur tous les navigateurs récents : elle s'affiche quasiment à l'identique. Il peut y avoir quelques décalages de positionnement ou des espaces différents mais ce n'est pas vraiment ce qu'il y a de plus important (je vous laisse régler ces petits détails par vous même ;-) ).
Car le plus important, c'est que la page soit accessible à tout le monde, sur tout les navigateurs. N'est ce pas l'objectif du web ?
Respecter les standards, c'est respecter la philosophie du web !
Merci à tous les relecteurs d'avoir corrigé mes fautes d'orthographe et d'expression, en particulier Franck, Gerald, les membres du collectif OpenWeb... ;-)