Convertir Une Page Existante /
Première Etape
Première étape : Guérir l'élément body
La première chose à réparer est l'élément body. Dans le balisage original, il comprenait un nombre impressionnant d'attributs hérités de l'HTML 4 et attributs propriétaires. Le dernier inclut marginheight, marginwidth et l'attribut background sur l'élément td. Puis il y a les attributs valides mais non nécessaires comme align, valign, bgcolor et ainsi de suite.
<body marginwidth="4" marginheight="4" topmargin="4" leftmargin="4" rightmargin="4" link="#990000" vlink="#990099" text="#000000">
Nous pouvons remplacer chacun de ces attributs par un équivalent CSS. marginheight et marginwidth peuvent être remplacés par une simple déclaration de marge (margin) et le texte et les couleurs des liens sont faciles à recréer.
<html>
<head>
<title>Travel Guide....</title>
<style type="text/css">
body {margin: 4px; color: black; background: white;}
a:link {color: #990000;}
a:visited {color: #990099;}
</style>
A ce stade encore peu de gain parce que la saisie de ces éléments requiert
plus de saisie que les attributs de body. Patience !
Etablissement de Styles Communs
Nous alons fixer une politique de style globale pour tous les tableaux et cellules de tables dans le document.
- D'abord tous les tableaux n'ont pas les mêmes réglages pour les attributs de cellpadding et cellspacing. Nous établirons un style global qui règle le padding des cellules du tableau à 0 et nous soucierons des exceptions plus tard. Dans la même veine, presque chaque table est réglée avec une largeur (width) de 100%, de telle façon que nous pouvons recréer cela dans la CSS.
- Notons que tout le texte sur la page est en fonte sans-serif, mais chaque cellule n'utilise pas la même fonte sans-serif. Quelques éléments appellent de l'Arial et la plupart des éléments en rouge appellent du Verdana en premier. Comme pour le padding de cellule, nous écrirons une règle pour couvrir la majorité et nous soucierons des exceptions plus tard.
body {margin: 4px; color: black; background: white;}
table {width: 100%; margin: 0;}
table td {padding: 0; border-width: 0; vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;}
a:link {color: #990000;}
Nous avons aussi réglé toutes les cellules de tableaux pour avoir une bordure égale à zéro (ce qui signifie pas de bordure du tout) et pour aligner leurs contenus avec le sommet de la cellule.
Avec ces quelques déclarations, nous avons ainsi remplacé touts les attributs valign, border, et cellspacing du vieux document. De la même manière la déclaration font-family remplace au moins 49 éléments font éliminés du balisage.
Nous pouvons voir les résultats dans la figure 1.4.
Encore très laid convenons-en mais il y a encore beaucoup de style à venir !
Maintenant RestauronsLaBannière...
|