Si vous étiez comme moi un programmeur d'expérience avant de voir un
code HTML, votre réaction n'a t'elle pas été de vous demander " mais
qu'est-ce que c'est que ce langage ! ". La première chose qui frappe
c'est qu'un navigateur ignore tout simplement ce qu'il ne reconnaît pas.
Il peut même estimer et réagir, en fonction de différente situation. Chose
inhabituelle pour les programmeurs et quel mauvais pli à prendre pour les
nouveaux. Le poids des navigateurs est le prix à payer pour cette technologie,
20Mo, 30Mo… Le XHTML palis à cette lacune en instaurant des règles de programmation
beaucoup plus stricte.
Imaginez un secrétaire donnant un document que le patron doit corriger
avant d'autoriser ! Cette nouvelle recommandation nous ramène à la base.
Le principe est simple, plus strict, il faut dire ce qu'il y a à dire dans
l'art et dans l'ordre des choses. Plusieurs règles à suivre mais un code
remmené à sa plus simple expression.
Le secret c'est le fichier DTD. Je ne m'éterniserai pas sur ce
fichier car le W3C recommande fortement d'utiliser les DTDs installés sur
leur propre serveur. Vous n'avez donc qu'une référence à ajouter sans même
connaître le contenu de ce fichier. Mais c'est toujours pratique, question
d'avoir un coup d'œil d'ensemble sur les balises et attributs disponibles!
Le type de document ou le DTD " Document Type Definition " est un fichier
qui contient une collection de déclaration XML, les " namespaces " qui
définissent la structure, les éléments et les attributs utilisés dans le
document. Un " namespaces " ou " espace de nom ", identifie une
balise décrivant un objet particulier. Voici un exemple d'un document DTD
transitionnel, il s'agit du " namespaces " de la balise <body> :
<!ELEMENT body %Flow;>
<!ATTLIST body
%attrs;
onload %Script; #IMPLIED
onunload %Script; #IMPLIED
background %URI; #IMPLIED
bgcolor %Color; #IMPLIED
text %Color; #IMPLIED
link %Color; #IMPLIED
vlink %Color; #IMPLIED
alink %Color; #IMPLIED
>
Il y a trois fichiers DTD, pour l'instant :
- Strict : Toutes les balises doivent être définies dans un " namespaces
" du DTD. Fait à noter, plusieurs balises HTML 4.01 ne sont plus reconnues,
comme <center> par exemple.
XHTML-1.0-Strict : http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Transitional : La grande majorité des balises HTML 4.01 sont disponibles
et vous pouvez utiliser des balises qui ne sont pas définit dans le DTD.
XHTML-1.0-Transitional : http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Frameset : Parce que c'est une méta structure, le W3C à décidé de retirer
ce format du standard XHTML et d'en faire une déclaration propre aux pages
avec cadre " frameset "
XHTML-1.0-Frameset : http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Voilà pour l'identification de votre document. Maintenant il faut que
son contenu respecte les règles. Les règles qui vont faire en sorte que
votre code HTML respecte les nouvelles normes. Le navigateur ne s'en portera
que mieux et le programmeur rassuré ;-0.
1. Vous devez utiliser les balises du HTML 4.01. Pour plus d'information
sur les spécifications, les balises et les arguments du HTML 4.01, voir
: "Index
of Elements" et "Index
of Attributes".
2. Le XML étant sensible aux majuscules/minuscules, toutes les
balises du XHTML doivent être en minuscule.
3. Toujours pour respecter les normes du XML, toutes les balises
doivent être fermées <li>...</li>, <td>...</td>
etc.. Remarquer que les balises qui n'affectent pas un bloc, comme un saut
de ligne ou une images, doivent aussi être fermées directement dans son
ouverture.
Mauvais
<p>bonjour
<p>le monde...
Bon
<p>Bonjour</p>
<p>le monde...</p>
Mauvais
Bonjour<br>
Le monde...<br>
Bon
Bonjour<br />
le monde<br />
Mauvais
<img src="logo.png" alt="logo">
Bon
<img src="logo.png" alt="logo" />
L'utilisation d'une seconde balise doit être la norme : <br></br>
mais les navigateurs pourraient être confus, c'est pourquoi <br />
est conseillé. Pour les balises méta c'est la même chose:
<meta http-equiv="content-language" content="fr-ca" />
4. Les images doivent avoir un texte alternatif. Même les tables
ou tableaux doivent avec un texte, le summary.
Mauvais
<table width="100%" border="0">
<tr><td>
<img src="logo.png" />
</td></tr>
</table>
Bon
<table width="100%" border="0" summary="Mon logo">
<tr><td>
<img src="logo.png" alt="logo" />
</td></tr>
</table>
5. Tous les attributs doivent avoir un argument et être entre
guillemets.
Mauvais
<img src=logo.png alt="">
Bon
<img src="logo.png" alt="logo" />
Un attribut qui n'a pas d'expression ou une constante:
Mauvais
<option name="nom" selected>
Bon
<option name="nom" selected="selected">
Mauvais
<textarea name="text" rows="10" cols="50" readonly>
Bon
<textarea name="text" rows="10" cols="50" readonly="readonly">
6. La structure ne permet plus les imbrications illogiques comme
:
<b><i>a test</b></i>
mais plutôt
<b><i>Texte</i></b>
7. L'ordre est aussi important, ainsi une balise méta ne peut
se retrouver à l'intérieur du " body ". Un en-tête H2 ne peut être à l'intérieur
d'une H1 ou même Un H1 ne peut être après un H2.
8. En terminant, il faut prendre l'habitude d'indiquer l'attribut
" ID " déjà utilisé par le DHTML. Par exemple, cette balise pour
indiquer l'ancre d'un hyperlien dans une même page. Noter que cette balise
ne peut plus se retrouver dans le vide en haut d'une page par exemple,
elle doit être dans un bloc, un paragraphe ou une table etc.
<a id="identificateur" name="identificateur ">Ancre</a>
9. Les scripts
Attention au script. Les éléments de script et de style sont déclarés comment
ayant des contenus #PCDATA. En conséquence, les symboles " < " et " & "
seront interprétés comme s'ils étaient le premier caractère d'une balise,
l'ouverture d'une balise quoi, et des items comme " < " et " &
" seront reconnus en tant que références par le processeur XML aux symboles
" " et " & " respectivement. En créant une section recouvrant ces éléments
de script ou de style qui soit une section marquée CDATA, évite
l'interprétation de ces éléments.
<script>
<![CDATA[
... Script ...
]]>
</script>
Une alternative est de déclarer les éléments de script et de style dans
un fichier externe.
Vous pouvez maintenant créer votre premier document XHTML
Suite : Votre
première page XHTML 1.0
XHTML 1.0 (W3C) : http://www.w3.org/TR/xhtml1/
Lire la 2ème Partie
>>
Django Blais
Directeur de Recherche et Développement
http://www.trucsweb.com
Tous droits réservés - Reproduction même
partielle interdite sans autorisation préalable
|