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 :
<?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>
<div>Contenu du calque</div>
<div class="ma_classe">Contenu du calque</div>
<li>Un element de liste</li> <br />
<img src="repertoire/image_importante.gif" alt="quelquechose d'important" /> <img src="repertoire/image_insignifiante.gif" alt="" />
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.
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.
Il existe en effet trois types de documents XHTML.
<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) :
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.
En savoir plus