Passage en douceur du HTML au XHTML/CSS.
Se débarrasser des Balises et attributs de balises inutiles
Passer directement du langage HTML au XHTML peut s'avérer une chose relativement difficile sans la maîtrise préalable des styles CSS. Or, très souvent, le spécialiste du HTML qui possède une confiance absolue dans le positionnement des éléments de présentation à l'aide de tableau rechigne à confier cette fonction à sa feuille de style. C'est pourquoi je préconise, au départ, une méthode douce qui permettra de tranferer, progressivement et méthodiquement, les commandes de présentation du fichier HTML au fichier CSS. Une fois que vous produirez des fichiers HTML avec des balises dépourvus d'information de style telle que la couleur ou la taille d'une police de charactère, vous vous rendrez compte que produire des documents valides en HTML, comme en XHTML, c'est du gâteau.
1. Occupons-nous du corps d'abord
A la racine de votre document HTML, après la fameuse balise <HTML>, se trouve la balise <BODY>. C'est la mère de tous les élèments qui seront afficher dans la fenêtre de votre navigateur. Autrement dit, toutes les balises contenues entre <BODY> et </BODY> hériteront des styles définis pour la balise BODY.
Dans les document HTML il n'est pas rare de trouver ceci :
Exemple 1 :
<BODY BGCOLOR=FFFFFF LINK=0000FF ALINK=000000 VLINK=0000FF MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">
Cela est tout a fait valable si vous n'avez aucune intention d'utiliser des styles CSS mais si vous utilisez quelques styles, pourquoi ne pas en attribuer à la balise BODY et pour vos liens ?
Vous pouvez définir une couleur de fond et supprimer les marge du BODY, grâce au CSS de cette manière :
body { background-color:#FFFFFF;
margin:0;
padding:0;
}
En ce qui concerne la couleur des liens, il vous suffit de définir un style pour la balise A, ce qui donne :
a{color:#000000;}
a:hover{color:#0000FF;}
En écrivant ces styles vous décharger <BODY> de ces éléments de présentation, l'exemple 1 devient donc ceci :
<BODY>
Mais on peut faire encore plus. La plupart des feuilles de style que je produis pour la réalisation de sites internet commencent par une définition de style pour la balise body qui ressemble à ceci :
exemple 2 :
body {
font-family: Georgia, "Times New Roman", Times, serif; /* police */
font-size: 0.8em; /* taille de la police */
color:#000000; /* couleur de la police */
background-color: #ECE9D8; /* couleur de fond*/
padding: 0; /* suppression des marges du navigateur */
margin:0; /* suppresionn des marges du navigateur */
}
Vous remarquerez que je défini une police ainsi qu'une taille et une couleur de police. Ce style, comme il est défini pour ma balise <BODY> sera hérité par l'ensemble des balises de mon document HTML situé entre <BODY> et </BODY>. De ce fait, je n'aurais plus jamais à écrire la moindre balise <FONT> dans mon document.
Supossons que pour une raison ou pour une autre, je souhaite appliquer à un paragraphe particulier un style différent, par exemple, le texte en rouge et une taille plus grande. Dans ce cas, je crée une classe dans mon fichier CSS, je l'appelle, par exemple, TexteRouge.
.TexteRouge {
font-size: 1.2 em;
color: #FF0000;
}
Dans mon fichier HTML j'applique ce style au paragraphe concerné de cette manière :
<p class="TexteRouge"> ....... </p>
... ce qui m'évite d'écrire la balise <FONT> qui, par ailleurs, est une balise déclassée qui produira toujours un message d'erreur lorsque vous tenterez de faire valider votre document.
En conclusion de cet article, si vous utilisez des styles CSS pour la réalisation de vos pages, vous devriez cesser d'écrire des attributs dans la balise <BODY> et vous devriez cesser d'utiliser la balise <FONT>.
A propos de la validation des Document : Que ce soit en HTML ou en XHTML/CSS le fait de faire valider les documents que vous produisez vous assure qu'ils seront "visibles" dans le plus grand nombre de supports de navigation. A l'heure actuelle, 90% des documents publiés sur le Web sont de documents non-valides. Vous pouvez donc penser que la validation n'a pas beaucoup d'importance. D'ailleurs les premiers à produire des documents non-valides sont les Web Agency. Néanmoins, vous devez également savoir, surtout si vous travaillez pour ces agences, que des lois sont votées, aussi bien aux Etats-Unis qu'en Europe, pour obliger les sites intitutionnels à respecter les règles d'accéssibilité sur le Web. Mais ça aussi c'est peut-être une autre histoire.