Chapitres : 
01 - Introduction :
Le contexte qui entoure XHTML
Un langage naît toujours dans un contexte particulier et il est généralement l'expression d'un besoin qui s'est fait ressentir à un moment donné. XHTML n'est pas une exception et j'ajouterai même que l'on ne peut pas comprendre l'intêret de ce langage de balisage sans connaître les enjeux de son existence.
Un langage de balisage
Avant d'aller plus loin, vous devez comprende une notion simple mais souvent oubliée, même par les initiés. XHTML est un langage de balisage. Cela signifie que la structure d'un document XHTML est créée à l'aide de balises. Ces balises, aussi appelées éléments, délimitent une fraction du document XHTML et se présentent comme suit :
<html xmlns="http://www.w3.org/1999/xhtml">(...)</html>
On peut remarquer dans cet exemple qu'une balise peut contenir trois types d'informations :
- Un nom de balise : 'html'.
- Une liste d'attributs : La liste des attributs ne contient qu'une entrée, il s'agit de l'attribut 'xmlns' dont la valeur est 'http://www.w3.org/1999/xhtml'.
- Une chaîne de caractèrees qui peut être de deux types : CDATA ou PCDATA qui vaut ici '(...)'. Chaque élément accepte l'un de ces deux types de données. La différence est que la première ne contient pas d'autre balises (son contenu ne sera donc pas interprété par le parseur ), la seconde, au contraire en contient (et sera donc parsée). Pour des raisons pratiques, nous appelleront simplement ces chaînes de caratères le contenu des balises.
Comme vous pouvez le constater, un élément est ouvert par une balise de ce type : <element> (balise ouvrante) et il est fermé par une balise de ce type </element> (balise fermante) qui, ensembles, délimitent le contenu. Le nom de l'élément est dans chacune de ces balises, par contre, seule la balise ouvrante accepte des attributs. Il arrive parfois qu'une balise soit ouvrante et fermante à la fois, dans ce cas, elle se note comme suit : <element />. Le contenu est donc nul pour ce genre de balise.
Dans l'exemple, ci-dessous, 'element1' est un élément parent de 'element2'. Autrement dit 'element2' est un élément enfant de 'element1'.
<element1><element2>(...)</element2>(...)</element1>
Lorsqu'une balise contient d'autres balises, des règles simples s'appliquent. Tout d'abord, un élément peut avoir plusieurs enfants, mais ne peut avoir qu'un parent direct. De plus, un élément ouvert à l'intérieur d'un autre doit obligatoirement être refermé avant la fermeture de son élément parent. Autrement dit, les balises ne doivent pas être imbriquées comme ceci :
<element1><element2></element1></element2>
Enfin, il existe une hièrarchie qui oblige certaines balises à contenir obligatoirement une balise d'un type donné. Ainsi, la balise <html> doit obligatoirement contenir les balises <head> et <body> et uniquement celles-cis.
Cela peut paraître compliqué mais c'est ce qu'il faut savoir pour bien comprendre la suite de ce tutoriel.
02 - Avant XHTML :
Avant XHTML, le web existait déjà . On utilisait donc un autre langage pour créer des sites Internet. Ce langage est HTML. Il est même encore utilisé par de nombreux webmasters.
HTML est aussi un langage de balisage qui a été très utile pour le développement d'Internet. Pourquoi le remplacer ? Car il a vite montré ses limites. En effet, à une époque où Internet évoluait du jour au lendemain, les balises HTML normalisées par le W3C ont été détournées par les éditeurs des navigateurs les plus connus à l'époque (Netscape et Internet Explorer). Ainsi, chaque navigateur avait ses propres balises propriétaires et un site qui fonctionnait sur Netscape ne fonctionnait pas forcément avec Internet Explorer et vice-versa.
La vocation du web de devenir un espace de libre échange de l'information était donc en péril car pour qu'il se réalise, encore fallait-il échanger des informations de même nature pour bien se comprendre. En fait, ce problème a été résolu par de nouvelles versions d'HTML. Cependant, les mauvaises habitudes se sont transmises tel un virus de la pire espèce (que j'ai moi-même contracté) et rares sont les développeurs qui ont créé des sites conformes aux standards à cette époque. De plus, la tendance permissive du HTML a plutôt encouragé les mauvaises habitudes des webmestres.
Une question légitime vous vient sans doute à l'esprit. Pourquoi XHTML a-t-il réussi là où tous ont échoué ?
03 - Pourquoi passer à XHTML :
Le XHTML est un langage hybride entre le XML et le HTML. Il ne s'agit, en fait, que d'une reformulation de HTML pour le rendre compatible avec XML. Jusqu'ici, rien de plus que chez le HTML...
C'est en fait, la rigueur du langage XML, dont a hérité le XHTML qui le rend si attractif. En effet, des notions de valorisation sémantique, de dissociation de la forme et du fond et d'accessibilité existait déjà avec le HTML. XML a apporté de la structure à HTML ce qui permet de le rendre beaucoup plus facile à analyser pour les ordinateurs. XHTML est ce que tout langage devrait être structuré, rigoureux et sensible à la casse.
Mais la rigeur du langage n'induit pas qu'il est immuable. On peut personnaliser le XHTML et même inventer ses propres balises.
Quelle différence avec le HTML me direz-vous ! Eh bien, toujours la même ! La rigeur ! En effet, cette création de nouvelle balise est permise, mais selon une méthode standardisée (les DTD) et héritée de XML. Bref, le compromis parfait.
04 - Les principes indissociables :
Le passage à XHTML ne serait rien si plusieurs principes novateurs qui ont révolutionné le développement de sites Internet et acceléré leur mise aux normes n'étaient pas respectés.
La dissociation de la forme et du fond du document :
Vers les années 90 on a vu apparaître des logiciels de création de site Internet (Front Page, Dreamweaver etc...). Ces éditeurs ont vite évolué vers une version WYSIWYG ce qui signifie, ce que vous voyez est ce que vous obtiendrez. Ces versions permettent de créer un site Internet visuellement.
Le problème de ce mode de création est qu'il ne permet pas de faire la différence entre le contenu à proprement parler et la forme, l'apparence du site. Tant et si bien que les textes, l'essentiel de l'information, s'en trouvaient désordonnés, voire incompréhensibles pour un moteur de recherche. De plus, ces éditeurs ont eu pour conséquence de dévaloriser le métier de webmaster, laissant croire que n'importe qui, sans connaissances du HTML, pouvait créer un site Internet.
Même si cela nécessite un temps d'adaptation, il est relativement aisé d'obtenir le même affichage en créant une page en XHTML qu'en HTML classique avec un éditeur WYSIWYG.
Les standards proposent de créer l'apparence d'un document indépendamment du contenu. Dès lors, les templates ne sont plus vraiment nécessaires et on peut proposer des designs alternatifs complètement différents pour un même site sans avoir à modifier la source XHTML du document.
C'est cela la dissociation de la forme et du fond. On considère, et à raison, que le contenu ne doit pas dépendre de la forme ce qui se traduit par une meilleure structure des données.
La valorisation sémantique du contenu :
Cette dissociation s'est aussi accompagnée de la suppression de certaines balises de mise en forme qui ne donnaient pas de sens sémantique au contenu. A ces dernières, on a préféré les balises qui permettent de donner un vrai sens aux contenus et de les valoriser au maximum.
Ainsi, les moteurs de recherche, tout comme les visiteurs ont beaucoup moins de problèmes de compréhension des documents mis en ligne.
L'accessibilité des sites Internet :
Pour nombre de développeurs, l'accessibilité est un terme assez abstrait, mais pour nombre d'utilisateurs, c'est, malheureusement, une réalité de tous les jours. Il faut savoir que les personnes non-voyantes peuvent utiliser des navigateurs vocaux et que la moindre incohérence dans votre document peut leur faire perdre un temps précieux de compréhension.
La tendance à façonner les pages d'une manière visuelle avec les éditeurs WYSIWYG a été une entrave totale à l'accessibilité d'Internet aux personnes non-voyantes. En effet, comment quelqu'un qui n'a jamais vu peut se faire une représentation visuelle d'un site Internet afin de comprendre son contenu ?
Il est bien plus logique de créer une page Internet, selon son contenu, puis, de l'agrémenter d'effets de style de façon indépendante. C'est le rôle que jouent les CSS avec XHTML. Ainsi, en retirant la feuille de style, on réduit le document à sa plus simple expression tout en le gardant compréhensible, ce qui n'est pas le cas d'une page archaïque qui lorsque que l'on retire certaines balises de présentation se retrouve désordonnée, incohérente et dénuée de sens. C'est vers cette notion d'accessibilité que nous vous orienterons grâce à ce tutoriel.
05 - Penser XHTML :
Pour entreprendre la rédaction d'un document XHTML, la première chose à faire, c'est se mettre en condition. Dans le cas contraire, vous seriez obligé de vous y reprendre à plusieurs fois.
Avant de parler de design, pensez au contenu. Que doit contenir mon document ? De quels types de données s'agit t-il ? Qu'est-ce qui est le plus important, qu'est-ce qui l'est moins ? Les réponses vous viendront naturellement et les balises XHTML répondront à vos besoins. Tant que votre document n'est pas terminé, ne pensez pas au design, ce n'est qu'une fois votre code définitivement fixé que vous pourrez vous pencher sur son allure graphique.
06 - Les normes liées à XHTML :
Même si elles ne sont pas l'objet de ce tutoriel, il fallait dire quelques mots au sujet des technologies qui accompagnent XHTML. Parmi elles, les feuilles de styles CSS qui permettent de positionner les différents éléments d'un site Internet et de les mettre en forme. Les CSS jouent un rôle prédominant dans la dissociation de la forme et du contenu.
On peut aussi citer le DOM qui signifie modèle objet de document. C'est une interface programmatique (API>) qui permet de manipuler les différents éléments d'une page web grâce à des objets, propriétés et méthodes standardisés. Couplé à ECMAScript (la version standardisée de Javascript), il permet de gérer tout l'aspect évènementiel d'un document.
D'autres standards pointent leur nez tous les jours, mais on peut aussi citer les flux RSS et le XML.
07 - Un document XHTML :
Un document XHTML doit tout d'abord être déclaré en tant que tel, pour cela, il éxiste une formule toute faîte qu'il suffit de copier/coller :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ensuite, il suffit d'ouvrir la première balise, la balise 'html'. Elle ne peut contenir que deux types de balises, la balise 'head' appelée entête du document et la balise 'body' appellée corps du document. Comme leurs noms l'indiquent, l'entête contient toutes les données relatives au document comme, par exemple, le titre (élément 'title') et le corps contient le contenu de la page à proprement parler, ce qui sera visible par le visiteur du site.
Pour suivre la logique d'un document XHTML, je vous présenterai l'entête du document en premier lieu, puis le corps. Je définirai les types de donnée qu'il peuvent contenir pour ensuite présenter les balises appropriées à ces données...
07/01 - L'entête :
L'entête du document contient toutes les données nécessaires à son affichage dans le navigateur ainsi qu'à son indexation par les moteurs de recherche.
07/02 - Le titre :
Le titre s'affiche dans le navigateur. Il permet, notamment, aux visiteurs de pouvoir passer d'une fenêtre à l'autre de son navigateur tout en sachant à quels documents elles correspondent.
C'est pour cela que votre titre doit être évocateur du contenu du document. Par exemple, pour ce tutoriel, le titre rappelle que vous êtes sur le site d'Elitwork et plus précisémment, sur la page consacrée au tutoriel XHTML. Un titre s'écrit avec la balise <title> :
<title>Webinnov : Tutoriel XHTML</title>
07/03 - Les références externes :
Elles sont utilisées afin d'indiquer qu'un autre document est lié au document en cours. Cela peut être un script, une feuille de style ou encore un icône.
Pour faire référence à un script, il faut utiliser la balise <script>. Voici un exemple tout droit sorti du code source de ce tutoriel.
<script type="text/javascript src=javascript/webinnov.js"></script>
La balise <link> permet de faire référence à de nombreux types de documents, mais les principaux sont les feuilles de style et le 'favicon' un icône qui s'affiche lorsqu'on le met dans les favoris de son navigateur. L'exemple suivant crée un lien vers deux feuilles de style, une pour l'affichage dans le navigateur et une pour l'impression éventuelle du document :
<link href="../Style.css" rel="stylesheet" type="text/css" />
Cet exemple permet de proposer une icône pour les favoris du navigateur valide XHTML.
<link rel="icon" type="image/png" href="../images/mafavicon.png" />
07/04 - Les méta-données :
Il s'agit de données qui permettent d'indexer le document de façon rapide sans le lire entièrement. Cela se fait grâce à la balise <meta> :
<meta name="keywords" content="webinnov,tutoriels, XHTML, standard, internet, site, création" />
Dans l'exemple ci-dessus, je donne les mots-clés sur lesquels je souhaite être référencé pour une recherche. L'attribut 'name' est le nom de la méta-donnée et 'content' son contenu.
Malheureusement, c'est encore l'anarchie quand à la nomenclature de ces méta-données. Il existe des standards, mais ils ne sont pas forcément reconnus. A vous de vous faire votre propre idée sur ce domaine. Personellement, je n'utilise que 'keywords' et 'description' car ils sont utilisés par de nombreux annuaire (qui préremplissent les formulaires de soumission) et certains moteurs affichent la description.
07/05 - Le corps du document :
Il s'agit de la partie visible du document XHTML. Pour des raisons de simplicité, je l'étendrai à un document en général.
Un document en XHTML fait généralement partie d'un tout que l'on appelle communément site Internet. De ce fait, certains aspects le différencient d'un document unique dans lequel seul le contenu est pris en compte.
En général, le corps d'un document XHTML est composé de quatre parties différentes. Une entête (à ne pas confondre avec l'entête réservée au navigateur), un menu, un contenu et un pied de page.
L'entête :
Celle-ci est destinée à conserver une certaine continuité du site Internet, aussi bien visuellement, que structurellement. Elle est commune à tous les documents du site.
Le menu :
Un site Internet est un ensemble de documents. Le menu les rassemble et permet d'accèder à chacun d'entre eux. Un document sans menu ne peut pas faire partie d'un site.
Le contenu :
C'est le centre du document. Le contenu donne au document son interêt pour le visiteur. Il fait que voir ce document en particulier, à l'intérieur du site, a un interêt. C'est pourquoi, je vous conseille d'éviter les pages ne contenant qu'une phrase banale sans interêt réèl.
Le pied de page :
Il joue un rôle similaire à l'entête, conservant l'unicité du site. Il fait souvent office de menu d'information, un menu que l'on ne visite qu'une seule fois et qui contient des informations d'ordre légal, accessoire etc.
Les types de données :
Les données que je présente ci-après font partie du corps du document, la partie visible par le visiteur.
XHTML - Source : http://www.elitwork.com/
 |
 |
 |