Actualites  Archives
 Inscription | Plan du site | 7  visiteurs actifs  
  
     A la Une
  Actualités
  Dossiers
  Coin Technique
  Agenda des salons
  Annonces Web
  Référencement

     Diagnostic
  Popularité Site Web
  Positionnement Moteur
  WebPage Alerte
  Positionnement Google

     Archives
  Sélection
  Expérience qui parle
  Internet quotidien
  Tous les dossiers

     Services
  Hébergement
  Communiqués de Presse
  Contenu éditorial
  Webmastering

     Contact
  Nous contacter
  La protection des données personnelles

     Technique
  Merise

     Login
   
    
Inscription

Mot de passe oublié?

   Sondage
Les points que vous souhaitez voir traiter à l'avenir ?
5%Actualité
28%Documentation
53%Exemples de sources
3%Liste de liens
11%Revue logiciels

   Sondage
Vous vous intéressez plutôt à
77%Programmation
11%Système
8%Logiciel
5%Matériel

   Sondage
votre niveau technique ?
15%Amateur
46%Débutant
32%Professionnel
7%Expert

     Rechercher
    
   

 Coin Technique


Il est temps de passer au XHTML 1.0

Introduction 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 :

  1. 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">
  2. 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">
  3. 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

 Imprimer Donner votre avis

 
 

Sam-Mag - Un site du réseau ACORUS 1996-2007
© Copyright ACORUS All rights reserved.- Mentions légales

Ce site respecte la loi Informatique et Libertés. Pour en savoir plus sur la protection des données personnelles, cliquez

 
Webmaster