Introduction

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, voire 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).

Analyse de la page actuelle

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.

Voici comment est construite la page actuelle :

• un premier tableau de 2 colonnes, l'une pour la partie menu et logo, l'autre pour le contenu principal ;
• une petite feuille de style : le CSS n'est pas utilisé à son potentiel maximum ;
• il y a utilisation d'attributs et balises destinés à fixer l'apparence, qui sont obsolètes ;
• la page n'est conforme à aucune des normes et par la mauvaise utilisation des balises HTML, elle n'est pas accessible à tous les navigateurs.

Je vous conseille de regarder le code source de cette page pour bien comprendre la suite de ce tutoriel.

Choix pour la nouvelle page

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 NC4 et MSIE4 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.

Principales modifications

Séparation structure - présentation

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

1. les attributs de balises permettant de modifier l'apparence (bgcolor, color, size…) ;
2. les balises obsolètes (font, center par exemple).

Utilisation des bonnes balises

Nous allons également remplacer des balises par d'autres qui représentent mieux la nature du contenu. En effet, comme nous l'expliquons 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.

Mise en conformité avec la syntaxe du XHTML

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 :

• de fermer correctement toutes les balises ;
• de les écrire en minuscules ;
• d'encadrer les valeurs d'attributs par des guillemets ;
• mettre les attributs obligatoires (alt pour la balise img par exemple).

Construction de la nouvelle page

Entête du code source

Nous 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">
      

• la première indique qu'il s'agit d'un document XML ;
• la deuxième la DTD de ce document XML (lien vers la définition de la structure d'un document XHTML) ;
• suivie de la traditionnelle balise <html>.

Inclusion de la feuille de style

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 :

• une feuille de style pour affichage sur un écran normal ;
• une feuille de style pour affichage sur les petits écrans (ordinateurs de poche). Elle utilisera des images plus légères, voire aucune à cause des limites de ces appareils, et redéfiniera le positionnement des divs pour un meilleur affichage ;
• une feuille de style pour affichage sur les navigateurs braille ou spécifiques pour les mal-voyants (on choisira des couleurs plus contrastées, et des styles simples) ;
• etc.

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 usuels : media="screen"

les styles généraux

La balise body contient de nombreux 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;
}
    

Structure principale de la page

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. Donnons-lui 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 divmenu flottante (attribut CSS float) : elle s'affichera au-dessus de la divcontenu. 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 divcontenu, 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;
}
      

Barre de menu

Titres des menu

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 donc ! Notre code HTML devient alors :

<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 le tout dans notre feuille de style :

#menu h1 {
  color : #6D62FF;
  font-size: 12px;
  font-weight: bold;
}
        

items des menus

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="/articles/passer_aux_standards/#">Accueil</a></li>
  <li><a href="/articles/passer_aux_standards/#">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 ; 

Nous allons en revanche 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>
      

Pourquoi ne pas utiliser plutôt des balises img dans les listes ?

La puce est un élément de présentation. Comme tout élément de presentation, il faut le définir dans les CSS. De plus, si on décide de changer l'image de la puce, ou même de la supprimer et de la remplacer par des puces classiques, il n'y a que la feuille de style à modifier et pas toutes les pages où les menus seront affichés. On remarquera également une économie substantielle dans le poids des pages (pas de balises img).

Tout ceci permet une meilleure évolutivité et une meilleure lisibilité du code.

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éfaut MSIE, pour la balise ul, met une marge différente de 0. Il va donc falloir la mettre à 0 si on ne veut pas d'indentation sur MSIE (cette valeur étant à 0 pour les navigateurs conformes, cela n'a donc pas d'influence sur ceux-ci).

N'oublions pas enfin 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;
}
        

Fignolage des menus

On s'aperçoit que les espacements entre les titres et les items de menu ne correspondent pas à la présentation originale.

Nous allons 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;
}
      

Contenu principal de la page

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é.

Le texte est de couleur bleue. Nous allons donc ajouter 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. Supprimons donc cet attribut et indiquons 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 :

• remplacer les <br> par des <p> quand c'est nécessaire ;
• enlever les attributs align 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 bote" /><br/>
  <img src="pix/new_board.jpg" alt="Le plateau" />
  <img src="pix/new_units.gif" alt="Les units" />
</div>
      

#contenu .photos {
  text-align:center;
}
      

Il ne reste plus qu'à supprimer tous les autres vieux styles qui ne servent plus à rien.

Pied de page

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;
}
      

Conclusion

Nous voilà maintenant avec une page conforme. Elle a subi une grosse cure d'amaigrissement : une diminution de 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'il est effectivement beaucoup plus lisible et plus 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 tous les navigateurs. N'est ce pas l'objectif du web ?

Respecter les standards, c'est respecter la philosophie du web !

• copie de l'ancienne version de la page ;
• nouvelle version conforme de la page ;
• la nouvelle feuille de style ;
• le site original.