ࡱ > * - ' ( ) m bjbj 8r x x c t " " " " a# r $ l ?% 8 c c c c c c c $ 'f h B 4c 9 w% a# a# w% w% 4c " " mc i? i? i? w% " " c i? w% c i? i? n Ja b " pKSP M; ^ Rb b c 0 c rb i > i @ b b D i b $ w% w% i? w% w% w% w% w% 4c 4c i? w% w% w% c w% w% w% w% i w% w% w% w% w% w% w% w% w% :
Langage XHTML
Sommaire
TOC \o "1-3" \u Le contexte qui entoure XHTML PAGEREF _Toc328180111 \h 3
Un langage nat toujours dans un contexte particulier et il est gnralement l'expression d'un besoin qui s'est fait ressentir un moment donn. XHTML n'est pas une exception et j'ajouterai mme que l'on ne peut pas comprendre l'intret de ce langage de balisage sans connatre les enjeux de son existence. PAGEREF _Toc328180112 \h 3
Un document XHTML PAGEREF _Toc328180113 \h 7
Un document XHTML doit tout d'abord tre dclar en tant que tel, pour cela, il existe une formule toute faite qu'il suffit de copier/coller: PAGEREF _Toc328180114 \h 7
Les listes PAGEREF _Toc328180115 \h 16
Les tableaux PAGEREF _Toc328180116 \h 17
Les liens PAGEREF _Toc328180117 \h 20
Les images PAGEREF _Toc328180118 \h 22
Les objets PAGEREF _Toc328180119 \h 23
Les scripts PAGEREF _Toc328180120 \h 25
Les formulaires PAGEREF _Toc328180121 \h 25
Les lments propres au design PAGEREF _Toc328180122 \h 28
Les ressources indispensables la cration de site internet PAGEREF _Toc328180123 \h 29
Le contexte qui entoure XHTML
Un langage nat toujours dans un contexte particulier et il est gnralement l'expression d'un besoin qui s'est fait ressentir un moment donn. XHTML n'est pas une exception et j'ajouterai mme que l'on ne peut pas comprendre l'intret de ce langage de balisage sans connatre les enjeux de son existence.
Un langage de balisage
Avant d'aller plus loin, vous devez comprende une notion simple mais souvent oublie, mme par les initis. XHTML est un langage de balisage. Cela signifie que la structure d'un document XHTML est cre l'aide de balises. Ces balises, aussi appeles lments, dlimitent une fraction du document XHTML et se prsentent comme suit:
(...)
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 entre, il s'agit de l'attribut 'xmlns' dont la valeur est 'http://www.w3.org/1999/xhtml'.
Une chane de caractrees qui peut tre de deux types:CDATAouPCDATAqui vaut ici '(...)'. Chaque lment accepte l'un de ces deux types de donnes. La diffrence est que la premire ne contient pas d'autre balises (son contenu ne sera donc pas interprt par le parseurXML), la seconde, au contraire en contient (et sera donc parse). Pour des raisons pratiques, nous appelleront simplement ces chanes de caratres le contenu des balises.
Comme vous pouvez le constater, un lment est ouvert par une balise de ce type: (balise ouvrante) et il est ferm par une balise de ce type (balise fermante) qui, ensemble, dlimitent le contenu. Le nom de l'lment 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: . Le contenu est donc nul pour ce genre de balise.
Dans l'exemple, ci-dessous, 'element1' est un lment parent de 'element2'. Autrement dit 'element2' est un lment enfant de 'element1'.
(...)(...) (...)
Lorsqu'une balise contient d'autres balises, des rgles simples s'appliquent. Tout d'abord, un lment peut avoir plusieurs enfants, mais ne peut avoir qu'un parent direct. De plus, un lment ouvert l'intrieur d'un autre doit obligatoirement tre referm avant la fermeture de son lment parent. Autrement dit, les balises ne doivent pas tre imbriques comme ceci:
Enfin, il existe une hirarchie qui oblige certaines balises contenir obligatoirement une balise d'un type donn. Ainsi, la balise
doit obligatoirement contenir des balises- et uniquement celles-cis.
Cela est trs simple malgr un abord peu vident. Il faut absolument savoir ces bases pour bien comprendre la suite de ce tutoriel et pour bien utiliser XHTML.
Avant XHTML
Avant XHTML, le web existait dj . On utilisait donc un autre langage pour crer des sites Internet. Ce langage estHTML. Il est mme encore utilis par de nombreuxwebmestres.
HTML est aussi un langage de balisage qui a t trs utile pour le dveloppement 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 normalises par leW3Cont t dtournes par les diteurs des navigateurs les plus connus l'poque (Netscape et Internet Explorer). Ainsi, chaque navigateur avait ses propres balises propritaires et un site qui fonctionnait sur Netscape ne fonctionnait pas forcment avec Internet Explorer et vice-versa.
La vocation du web de devenir un espace de libre change de l'information tait donc en pril car pour qu'il se ralise, encore fallait-il changer des informations de mme nature pour bien se comprendre. En fait, ce problme a t rsolu par de nouvelles versions d'HTML. Cependant, les mauvaises habitudes se sont transmises tel un virus de la pire espce (que j'ai moi-mme contract) et rares sont les dveloppeurs qui ont cr des sites conformes aux standards cette poque. De plus, la tendance permissive du HTML a plutt encourag les mauvaises habitudes des webmestres.
Une question lgitime vous vient sans doute l'esprit. Pourquoi XHTML a-t-il russi l o tous ont chou?
Pourquoi passer XHTML
LeXHTMLest 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 hrit le XHTML qui le rend si attractif. En effet, des notions de valorisation smantique, de dissociation de la forme et du fond et d'accessibilit existaient dj 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 peutpersonnaliser le XHTMLet mme inventer ses propres balises.
Quelle diffrence avec le HTML me direz-vous! Eh bien, toujours la mme! La rigeur! En effet, cette cration de nouvelle balise est permise, mais selon une mthode standardise (lesDTD) et hrite de XML. Bref, le compromis parfait.
Les principes indissociables
Le passage XHTML ne serait rien si plusieurs principes novateurs qui ont rvolutionn le dveloppement de sites Internet et accelr leur mise aux normes n'taient pas respects.
La dissociation de la forme et du fond du document.
Vers les annes 90 on a vu apparatre des logiciels de cration de site Internet (Front Page, Dreamweaver etc...). Ces diteurs ont vite volu vers une versionWYSIWYGce qui signifie, ce que vous voyez est ce que vous obtiendrez. Ces versions permettent de crer un site Internet visuellement.
Le problme de ce mode de cration est qu'il ne permet pas de faire la diffrence 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 dsordonns, voire incomprhensibles pour un moteur de recherche. De plus, ces diteurs ont eu pour consquence de dvaloriser le mtier dewebmaster, laissant croire que n'importe qui, sans connaissances du HTML, pouvait crer un site Internet.
Mme si cela ncessite un temps d'adaptation, il est relativement ais d'obtenir le mme affichage en crant une page en XHTML qu'en HTML classique avec un diteur WYSIWYG.
Les standards proposent de crer l'apparence d'un document indpendamment du contenu. Ds lors, les templates ne sont plus vraiment ncessaires et on peut proposer des designs alternatifs compltement diffrents pour un mme site sans avoir modifier la source XHTML du document.
C'est cela la dissociation de la forme et du fond. On considre, et raison, que le contenu ne doit pas dpendre de la forme ce qui se traduit par une meilleure structure des donnes.
La valorisation smantique du contenu.
Cette dissociation s'est aussi accompagne de la suppression de certaines balises de mise en forme qui ne donnaient pas de sens smantique au contenu. A ces dernires, on a prfr 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 problmes de comprhension des documents mis en ligne.
L'accessibilit des sites Internet.
Pour nombre de dveloppeurs, l'accessibilit est un terme assez abstrait, mais pour nombre d'utilisateurs, c'est, malheureusement, une ralit de tous les jours. Il faut savoir que les personnes non-voyantes peuvent utiliser des navigateurs vocaux et que la moindre incohrence dans votre document peut leur faire perdre un temps prcieux de comprhension.
La tendance faonner les pages d'une manire 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 reprsentation visuelle d'un site Internet afin de comprendre son contenu?
Il est bien plus logique de crer une page Internet, selon son contenu, puis, de l'agrmenter d'effets de style de faon indpendante. C'est le rle que jouent lesCSSavec XHTML. Ainsi, en retirant la feuille de style, on rduit le document sa plus simple expression tout en le gardant comprhensible, ce qui n'est pas le cas d'une page archaque qui lorsque que l'on retire certaines balises de prsentation se retrouve dsordonne, incohrente et dnue de sens. C'est vers cette notion d'accessibilit que nous vous orienterons grce ce tutoriel.
Penser XHTML
Pour entreprendre la rdaction d'un document XHTML, la premire 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 donnes s'agit t-il? Qu'est-ce qui est le plus important, qu'est-ce qui l'est moins? Les rponses vous viendront naturellement et les balises XHTML rpondront vos besoins. Tant que votre document n'est pas termin, ne pensez pas au design, ce n'est qu'une fois votre code dfinitivement fix que vous pourrez vous pencher sur son allure graphique.
Les normes lies XHTML
Mme 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 HYPERLINK "http://www.mammouthland.net/cours/css/css_de_base.php" \o "En savoir plus sur les CSS" feuilles de styles CSSqui permettent de positionner les diffrents lments d'un site Internet et de les mettre en forme. Les CSS jouent un rle prdominant dans la dissociation de la forme et du contenu.
On peut aussi citer leDOMqui signifie modle objet de document. C'est une interface programmatique (API) qui permet de manipuler les diffrents lments d'une page web grce des objets, proprits et mthodes standardiss. Coupl ECMAScript (la version standardise de Javascript), il permet de grer tout l'aspect vnementiel d'un document.
D'autres standards pointent leur nez tous les jours, mais on peut aussi citer les fluxRSSet le XML.
Un document XHTML
Un document XHTML doit tout d'abord tre dclar en tant que tel, pour cela, il existe une formule toute faite qu'il suffit de copier/coller:
Ensuite, il suffit d'ouvrir la premire balise, la balise 'html'. Elle ne peut contenir que deux types de balises, la balise 'head' appele entte du document et la balise 'body' appelle corps du document. Comme leurs noms l'indiquent, l'entte contient toutes les donnes relatives au document comme, par exemple, le titre (lment '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 prsenterai l'entte du document en premier lieu, puis le corps. Je dfinirai les types de donnes qu'il peuvent contenir pour ensuite prsenter les balises appropries ces donnes...
L'entte
L'entte du document contient toutes les donnes ncessaires son affichage dans le navigateur ainsi qu' son indexation par les moteurs de recherche. Pour la crer on utilise la balise.
Le titre
Le titre s'affiche dans le navigateur. Il permet, notamment, aux visiteurs de pouvoir passer d'une fentre 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 prcismment, sur la page consacre au tutoriel XHTML. Un titre s'crit avec la balise:
Elitwork: Tutoriel XHTML
Les rfrences externes
Elles sont utilises 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 icne.
Pour faire rfrence un script, il faut utiliser la balise
Les formulaires
Les formulaires sont trs important en XHTML car ils permettent aux visiteurs d'intragir avec le document. Ils servent collecter des informations qui seront ensuite renvoyes vers le serveur pour tre traites. Il peut s'agir d'une recherche ou encore d'un formulaire de contact.
Une chose importante quand on cre un formulaire, c'est de bien penser l'usage que l'on veut en faire. Un formulaire doit tre comprhensible et ordonn pour tre utilisable.
HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "creaform" \o "Aller la rubrique: Cration du formulaire" Cration du formulaire( HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "form" \o "Informations sur la balise: form" form, HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "fieldset" \o "Informations sur la balise: fieldset" fieldset, HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "legend" \o "Informations sur la balise: legend" legend, HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "label" \o "Informations sur la balise: label" label)
HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "input" \o "Aller la rubrique: Les champs " Les champs
HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "formtext" \o "Aller la rubrique: Les zones de texte" Les zones de texte( HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "textarea" \o "Informations sur la balise: textarea" textarea)
HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "formlist" \o "Aller la rubrique: Les listes de choix" Les listes de choix( HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "select" \o "Informations sur la balise: select" select, HYPERLINK "http://www.elitwork.com/xhtml_tutoriel.html" \l "option" \o "Informations sur la balise: option" option)
La cration du formulaire
Voici les rflexes adopter lorsque l'on cre un formulaire.
La balise