- Pourquoi cette norme ?
- Syntaxe
- Exemples
- Mise en forme logique
- Feuilles de style
- Accessibilité
Pourquoi cette norme ?
Le XHTML (eXtended Hyper Text Markup Language), c'est
du HTML respectant la syntaxe XML !
Le XML (eXtended Markup Language) étant un nouveau language de description
du contenu des documents sur Internet. Très rigoureux dans sa syntaxe ce language
se répend très vite auprès du monde professionel car il permet
d'échanger les données issues de dataware house (gigantesques bases de données).
Le HTML est très utilisé mais est aussi - revers de la médaille - très mal utilisé.
C'est la conséquence directe de la permissivité des navigateurs web qui ont
été de plus en plus flexibles face aux erreurs de syntaxe contenues dans les pages.
Le XHTML n'est que du HTML (les mêmes balises avec les mêmes attributs) ni plus,
ni moins : c'est exactement le même langage ! La seule différence du XHTML
avec son jumeau HTML est que sa syntaxe ne souffre d'aucune souplesse.
Pourquoi alors avoir créé le XHTML si c'est pareil à du HTML ?
Pour habituer les webdesigners à la rigidité syntaxique du XML qui
va bientôt détroner le HTML.
Syntaxe
La grammaire du XHTML répond à certaines règles :
Les noms des balises et des attributs sont en minuscules.
On écrit : <p> et plus <P>. Les valeurs des attributs sont entre doubles quotes.
On écrit : <p align="center"> et plus <p align=center>. Tout attribut doit impérativement avoir une valeur.
On écrit : <table border="1"> et plus <table border>. Toute balise ouvrante doit être refermée.
On écrit : <p>blabla</p>
et plus <p>blabla. Toutes les balises sont ouvrantes.
On écrit : <br /> et plus <br>
ou encore : <hr width="50%" /> et plus <HR WIDTH=50%>. Les balises doivent être correctement imbriquées.
On écrit : <p><i>blabla</i></p>
et pas <p><i>blabla</p></i>.
Tout document qui se conforme strictement à ces règles sera dit bien formé.
Exemples
On va étudier quelques exemples pour bien se familiariser avec cette nouvelle
écriture du HTML qu'est le XHTML.
Images
La balise IMG suivante :
<IMG SRC="logo.gif" WIDTH=161 HEIGHT=68>
devient : <img src="logo.gif" width="161" height="68" alt="logo" />.
Liens
La balise A suivante :
<A HREF=/pages/default.html>cliquez là</A>
devient : <a href="/pages/default.html">cliquez là</a>.
Tableaux
Le tableau suivant :
<TABLE BORDER WIDTH=100 HEIGHT=100>
<TR><TD><FONT SIZE=+2><I>Le CyberZoïde Qui Frétille</TD></TR>
<TR><TD><IMG SRC="../images/index.gif"></TD></TR>
</TABLE>
devient :
<table border="1" width="100" height="100">
<tr><td><font size="+2"><i>Le CyberZoïde Qui Frétille</i></font></td></tr>
<tr><td><img src="../images/index.gif" alt="index" /></td></tr>
</table>
Mise en forme logique
Le XML étant un système de balise du contenu, les mises en forme qu'il opère sont purement logiques.
Ainsi avec le XML, on ne se préoccupe que de la structure logique du document.
Pour la mise en forme (caractères, couleurs, marges...), on utilisera les feuilles de styles.
De même, en XHTML, il est recommandé d'abandonner les balises de mise en forme physique comme
<i> (italic pour mettre en italique) au profit des balises de mise en forme logique
comme <em> (emphase pour mettre en valeur).
Liste des balises de mise en forme logique
| Balise | Description | Exemple |
|---|
<cite> | pour effectuer une citation | essai |
<code> | pour encadrer du code | essai |
<dfn> | pour introduire une sous-définition | essai |
<em> | pour mettre en valeur | essai |
<kbd> | pour indiquer une commande de l'utilisateur | essai |
<samp> | pour afficher une chaîne de caractère de manière littérale | essai |
<strong> | pour faire ressortir du texte | essai |
<var> | pour indiquer une variable | essai |
Liste des balises de mise en forme physique
| Balise | Description | Exemple |
|---|
<i> | pour mettre en italique | essai |
<b> | pour mettre en gras | essai |
<u> | pour souligner | essai |
<small> | pour diminuer la taille des caractères | essai |
<big> | pour augmenter la taille des caractères | essai |
<sub> | pour mettre en indice | essai |
<sup> | pour mettre en exposant | essai |
<tt> | pour mettre police de chasse fixe | essai |
<s> | pour barrer | essai |
<strike> | idem | essai |
Feuilles de styles
L'idéal est d'abandonner toute balise de mise en forme pour n'utiliser que les deux balises
suivantes : span et div.
Ainsi, fini les font, p, center et autres aberrations !
Evidemment, ceux deux balises devront être associées à des feuilles de style pour
pouvoir mettre en forme vos pages.
Exemple : <div style="font-familly:verdana,arial;font-weight:bold;color:red;">
ou mieux : <div class="erreur">.
Note : span s'utilise localement pour un plusieurs mots
alors que div s'applique à un bloc (car effectue un saut de ligne avant et après).
Exemple :
<div class="paragraphe">
Un paragraphe entier, avec beaucoup de lignes.
Et des passages <span class="important">dans d'autres styles</span>.
</div>
Accessibilité
La norme HTML 4 rend obligatoire l'attribut ALT (texte alternatif)
de la balise IMG (image). En effet, c'est ce texte qui est affiché en
lieu et place de l'image si celle-ci ne peut être affiché (absente, navigateur
incompatible, navigateur non voyant). Lors du survol de la souris sur l'image,
ce texte est affiché en info-bulle.
Pour ce ceux qui ne peuvent pas voir vos images aient connaissance du sens
que portent vos images, pensez bien à mettre l'attribut ALT.
Le texte de votre attribut ALT doit être le plus concis possible.
Pour les images ne portant pas de sens, comme par exemple les
puces de liste, il faut donner à ALT une chaîne vide pour valeur.
|
Exemple :
<img src="images/etats.jpg" alt="Les états de la matière : solide, liquide et gazeux." />
|
|
| 
