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
| 
Webmaster
�Imprimer
�Donner votre avis