|
 ntroduction
au Extensible Hypertext Markup Language
Le
XHTML 1.0 est la dernière recommandation du W3C, ce nouveau standard
défini le 26 janvier 2000 par le World Wide Web Consortium est
avant tout une façon de présenter un document XML tous en gardant
le HTML conventionnel. Donc transitoire entre le HTML 4.01 et
le XML 1.0. Grande surprise, il n'y aura pas de HTML 5.0! La différence
est avant tout le " DOCTYPE " ou le DTD " Document Type Definition
" qui permet de définir le HTML contenu dans votre document XML,
exactement comme un document XSL. Convertir vos pages HTML 4.01
en XHTML 1.0 n'entraîne aucun problème de compatibilité notable
avec les navigateurs actuel, et il convient bien sûr à tous dans
la mesure ou vos pages seront conforme aux prochaines recommandations.
Le XHTML est selon moi la meilleure façon de suivre efficacement
le développement des standards Web sans trop souffrir le martyre.
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
|
