|
Frosty nous propose cette introduction aux normes du W3C.
Le site Tout JavaScript.com est né bien avant l'apparition de ces normes. Cela représenterait un travail colossal de tout reprendre.
En revanche pour les développements nouveaux, il est fortement recommandé d'utiliser les normes du W3C :)
1. Objectifs
- Standardiser la description de documents
(langage XHTML
et technologie CSS)
-
Rendre les documents consultables quelque soit le navigateur utilisé :
- Courant
- MSIE, Mozilla, Opera, Netscape...
- Ancien
- IE 4.0 et
NS 4.7 par exemple.
- Spécifique
- Synthétiseur vocal, plage braille (pour les aveugles et malvoyants)...
-
Séparer le contenu (XHTML) de la présentation
(CSS). Ceci permet de faciliter les développements
et la maintenance des sites ou applications web : plus besoin d'utiliser de tableaux ou d'images transparentes
pour effectuer la mise en page, ce qui allège énormément le code.
2. Le XHTML
Vous connaissez le HTML ? Alors il n'y a qu'un pas à franchir pour coder vos pages web en XHTML.
Cependant, il vous faudra peut-être changer certaines habitudes.
Voici un résumé des principaux changements par
rapport au HTML :
-
Chaque page web doit commencer par un prologue XML
suivi d'un en-tête DTD. Pas de panique, il suffit de copier-coller ceci :
<?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" xml:lang="fr">
<!-- votre code XHTML ici //-->
</html>
-
Ecrire toutes les balises et attributs en minuscules :
<div>Contenu du calque</div>
-
Mettre les valeurs d'attributs entre guillemets :
<div class="ma_classe">Contenu du calque</div>
-
Fermer chaque balise ouverte (syntaxe XML) :
<li>Un element de liste</li>
<br />
-
Ne pas oublier les attributs obligatoires (même s'ils sont vides) :
<img src="repertoire/image_importante.gif" alt="quelquechose d'important" />
<img src="repertoire/image_insignifiante.gif" alt="" />
-
Inversement, ne pas utiliser d'attributs et balises obsolètes tels :
align="center"
bgcolor="#FF0000"
<font>...</font>
<center>...</center>
Lors de la rédaction de sa page web, plus besoin de se soucier de la mise en forme ;
on peut se concentrer sur le contenu.
On peut très bien écrire un menu comme ceci, sans utiliser le moindre tableau :
<ul id="menu">
<li><a href="#">Partie 1</a></li>
<li><a href="#">Partie 2</a></li>
<li><a href="#">Partie 3</a></li>
</ul>
Pour s'assurer que son document est aux normes, utiliser le Validateur W3C.
3. Les CSS pour la mise en forme
Grâce aux normes CSS1 et CSS2, il est possible de donner l'aspect graphique de son choix à une page web,
indépendamment de son contenu. Plus besoin de sauter des lignes ou d'utiliser les tableaux pour obtenir
le résultat souhaité.
Voici deux exemples de présentation avec le menu de tout à l'heure :
* { font-size:12px; font-family:Verdana; text-align:center; }
ul#menu { width:150px; margin:10px auto 10px auto; padding:10px;
border:#AAC solid 2px; list-style-type:none; background:#DDF; }
ul#menu a { display:block; width:130px; margin:5px auto 5px auto;
padding:5px; text-decoration:none; color:black; font-weight:bold;
border:#BBD dashed 1px; background:#CCE; }
ul#menu a:hover { background:#FCFCFF; border:#55A solid 1px; color:#88A; }
Copie d'écran du résultat : 
* { font-size:12px; font-family:Verdana; text-align:center; }
ul#menu { width:460px; height:35px; margin:10px auto 10px auto;
padding:10px; border:#866 solid 2px; list-style-type:none;
background:#A88; }
ul#menu li { float:left; }
ul#menu a { display:block; width:130px; margin:5px; padding:5px; text-decoration:none;
color:#FDD; font-weight:bold; border:#B99 solid 1px; background:#CAA; }
ul#menu a:hover { background:#FFFCFC; border:#A55 solid 1px; color:#A88; }
Copie d'écran du résultat : 
Il est donc tout à fait possible de changer compètement l'aspect visuel souhaité, tout en conservant le même
code XHTML. De plus, on peut aisément définir une feuille de style pour les écrans classiques, une autre pour
les PDA, une autre pour l'impression du document... Pour cela, on utilise l'attribut media lors
de l'inclusion de la feuille de style. Pour un PDA, cela donne :
<link rel="stylesheet" type="text/css" href="menu2.css" media="handheld" />
Le Validateur W3C permet également de s'assurer que ses
feuilles de style sont aux normes.
4. Strict, Transitional, Frameset
Il existe en effet trois types de documents XHTML.
- Strict
- Il faut respecter rigoureusement la syntaxe XHTML (résumée dans la partie 2.)
- Transitional
- Accepte encore les balises et attributs obsolètes,
afin de pouvoir mettre progressivement ses pages aux normes.
- Frameset
- Permet de déclarer un jeu de cadres. Ne pas oublier d'utiliser ceci :
<noframe>
Il est fortement recommandé d'écrire ses pages suivant la norme "strict", ce qui permettra un accès universel à leur contenu.
Cependant, vous constaterez que de nombreuses fonctionnalités (cadres, attributs d'alignement) ne sont plus utilisables avec
cette norme. En effet, aujourd'hui certaines fonctionnalités apportent plus d'inconvénients que d'avantages.
Par exemple, les cadres (ou frames/iframes) :
- Ne permettent pas d'indexation correcte par les moteurs de recherche
- Rendent l'impression hasardeuse (tout le monde ne sait pas qu'il faut
cliquer dans un cadre pour que son contenu soit imprimé)
- Rendent la navigation difficile avec des navigateurs spécifiques pour les aveugles et malvoyants
- Ne permettent pas de séparer complètement présentation et contenu
- Empêchent de mettre facilement dans les favoris une page appartenant à un jeu de cadres
- ...
D'autant plus qu'il est devenu simple d'afficher un menu, un en-tête et un pied de page sur tout un site grâce
à des langages de programmation tels PHP ou ASP, ou les templates de Dreamweaver.
5. Aller plus loin
- De nombreux articles très intéressants sont à lire sur OpenWeb
- Un très bel exemple de séparation contenu/présentation sur CSS Zen Garden
- Bien entendu, toutes les références se trouvent sur le site du W3C, ainsi que le validateur.
| 
