1227 lines
38 KiB
XML
1227 lines
38 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!DOCTYPE html
|
||
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
||
"tuteurs://DTD/tml.dtd">
|
||
<html>
|
||
<head>
|
||
<title>Tutoriel</title>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Tutoriel XHTML : les bases</h1>
|
||
|
||
|
||
<h2>Introduction</h2>
|
||
|
||
<p>
|
||
Le langage <abbr title="eXtended HyperText Mark-Up
|
||
Language">XHTML</abbr> est un langage de formatage de texte adapté à la
|
||
conception de pages web.
|
||
</p>
|
||
|
||
<p> Ce n'est pas un langage de programmation, mais un langage de mise en
|
||
forme de données : une page Web décrit une structure statique, tandis
|
||
qu'un programme est un processus dynamique. Vous n'avez aucunement
|
||
besoin d'avoir des bases de programmation pour écrire du XHTML !
|
||
</p>
|
||
|
||
<p>
|
||
Pour vous le présenter, un peu de généalogie facilitera les choses,
|
||
notamment pour expliquer la différence entre HTML et XHTML.
|
||
</p>
|
||
|
||
<h3>Généalogie du XHTML</h3>
|
||
<p>
|
||
La famille du XHTML est une famille nombreuse, et elle n'a pas fini de
|
||
s'étendre ! L'aïeul s'appelle SGML ; il eut deux enfants, le
|
||
HTML puis le XML. Le XML eut à son tour un enfant, qui s'appelle XHTML
|
||
et ressemble comme deux gouttes d'eau à son oncle HTML.
|
||
</p>
|
||
|
||
<p>
|
||
Le <abbr title="Standard Generalized Markup Language">SGML</abbr> est un
|
||
méta-langage : il permet de définir des langages balisés. Le <abbr
|
||
title="HyperText Markup Language">HTML</abbr> est l'un de ces langages
|
||
balisés, fondé en particulier sur la notion de <em>lien hypertexte</em>,
|
||
qui permet de naviguer confortablement d'une page à une autre.</p>
|
||
|
||
<p>
|
||
Le HTML a très vite remporté un grand succès. Mais il a aussi rencontré
|
||
certaines limites. En particulier, il n'est pas extensible. Aussi a-t-il
|
||
reçu un petit frère, le langage <abbr title="eXtensible Mark-up
|
||
Language">XML</abbr>, précisément fondé sur la notion
|
||
d'extensibilité ; comme le SGML, le XML est un méta-langage.</p>
|
||
|
||
<p> Le problème, c'est que le HTML n'était pas compatible avec le
|
||
XML ; c'est pourquoi l'on a conçu le langage <abbr
|
||
title="eXtensible HyperText Markup Language">XHTML</abbr>, qui est
|
||
dérivé du XML, mais conserve les principes fondamentaux du HTML, dont il
|
||
hérite également de nombreuses spécificités.
|
||
</p>
|
||
|
||
<p> La norme du XHTML est définie par le W3C, qui encourage les
|
||
concepteurs de pages web à passer du HTML au XHTML. L'avantage du XHTML
|
||
sur le HTML est son <em>extensibilité</em>, qui lui vient du langage
|
||
XML. C'est pourquoi <strong>nous vous recommandons très fortement de
|
||
préférer le XHTML au HTML</strong>. Le site des tuteurs observe
|
||
scrupuleusement les spécifications de ce langage. À terme, le HTML est
|
||
appelé à disparaître.
|
||
</p>
|
||
|
||
<h3>Structure logique d'un document</h3>
|
||
|
||
<p> Le XHTML définit la <strong>structure logique</strong> d'un
|
||
document, permettant ensuite à un navigateur (Firefox, Mozilla,
|
||
Netscape, Opera, Internet Explorer, etc.) de rendre visuellement (mais
|
||
aussi auditivement ou tactilement, pour les non-voyants) le
|
||
document. </p>
|
||
|
||
<p> Pour des raisons évidentes d'interopérabilité, le XHTML possède une
|
||
norme, rédigée par le World Wide Web Consortium (<abbr>W3C</abbr>), qui
|
||
regroupe des acteurs majeurs du Web comme Microsoft, MacroMedia (qui
|
||
produit Flash), Apple, AOL, etc. Nous en sommes actuellement à la norme
|
||
<a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>.
|
||
</p>
|
||
|
||
|
||
<p>
|
||
<strong>L'élément de base d'un site est la page</strong>. C'est un
|
||
fichier dont l'extension est normalement <code>.html</code> (ou
|
||
<code>.htm</code> si votre système d'exploitation vous impose cette
|
||
limitation) et qui contient du code XHTML.
|
||
</p>
|
||
|
||
|
||
<p> <strong>Le XHTML ne s'occupe que de définir la structure logique de
|
||
votre document</strong>. Pour l'aspect visuel (mise en page, couleurs,
|
||
fontes, etc.), c'est le domaine des feuilles de style, dont le <a
|
||
href="css.html">tutoriel</a> est en cours de rédaction. </p>
|
||
|
||
<h2>Principes fondamentaux</h2>
|
||
|
||
<h3><a name="voc">Les balises</a></h3>
|
||
|
||
<p>
|
||
Le XHTML utilise des <strong>balises</strong> (aussi appelées
|
||
« éléments ») pour distinguer les éléments logiques de la
|
||
page.</p>
|
||
|
||
<p> Toute balise doit être ouverte (sans quoi elle n'existe pas,
|
||
évidemment) ; et <strong>toutes les balises doivent également être
|
||
fermées</strong>.</p>
|
||
|
||
<div class="encadre">
|
||
<p>L'obligation de fermer chaque balise est l'une des principales
|
||
différences entre le HTML et le XHTML ; c'est une caractéristique
|
||
que le XHTML hérite du XML. </p> </div>
|
||
|
||
<p>Une balise se présente sous la forme <tagada>, avec un < et
|
||
un >.</p>
|
||
|
||
<p> Les balises se referment avec </tagada>, / étant l'élément
|
||
fermant. Certaines balises se ferment à l'intérieur (et à la fin)
|
||
d'elles-mêmes. Dans ce cas, la barre tranversale doit être placée juste
|
||
avant le > final. Exemple : <br />.
|
||
</p>
|
||
|
||
<p>
|
||
Un jeu de balises présente donc obligatoirement l'une des deux formes
|
||
suivantes :
|
||
</p>
|
||
|
||
<pre>
|
||
<tagada> quelque chose </tagada>
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
ou bien :
|
||
</p>
|
||
<pre>
|
||
<tagada />
|
||
</pre>
|
||
|
||
<p> Il n'existe aucune autre forme possible. </p>
|
||
|
||
|
||
<h3>Les attributs</h3>
|
||
|
||
<p>Les balises acceptent parfois des options, qu'on appelle des
|
||
<strong>attributs</strong> : dans <tagada type="plouf" />, tagada
|
||
est l'élément, <code>type</code> l'attribut, et « plouf » la
|
||
valeur de l'attribut.
|
||
</p>
|
||
|
||
<h3>Casse</h3>
|
||
|
||
<p>
|
||
En XHTML, <strong>on écrit les éléments et les attributs en
|
||
minuscules</strong>.
|
||
</p>
|
||
|
||
<div class="encadre">
|
||
<p>
|
||
L'écriture des balises en minuscules est, là encore, un héritage du
|
||
XML ; en HTML, on recommandait d'écrire les éléments en majuscules
|
||
et les attributs en minuscules.
|
||
</p>
|
||
</div>
|
||
|
||
<h3>Commentaires</h3>
|
||
|
||
<p>Les commentaires s'insèrent entre <!-- et -->. Attention, à
|
||
l'intérieur de commentaires, il vaut mieux ne pas utiliser de doubles
|
||
tirets (--). On ne peut pas placer de commentaires à l'intérieur d'un
|
||
élément.
|
||
</p>
|
||
|
||
<h3>Syntaxe générale</h3>
|
||
|
||
<div class="encadre">
|
||
<p><strong>Toutes</strong> les balises doivent être refermées.</p>
|
||
</div>
|
||
|
||
<p>Toute partie de la page doit être contenue dans (au moins) une
|
||
balise. </p>
|
||
|
||
<p>Les balises doivent être ouvertes et refermées <em>dans
|
||
l'ordre</em>. Faites spécialement attention dans le cadre de balises
|
||
imbriquées.
|
||
</p>
|
||
|
||
<p>
|
||
Il ne faut donc pas écrire :
|
||
</p>
|
||
|
||
<pre>
|
||
<p> Je vous préviens tout de suite, c'est <em>non.</p></em>
|
||
</pre>
|
||
|
||
<p class="continue">mais :</p>
|
||
|
||
<pre>
|
||
<p> Je vous préviens tout de suite, c'est <em>non.</em> </p>
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Il faut refermer la balise <em> avant <p>, car on l'a ouverte
|
||
après. C'est le principe des poupées russes.
|
||
</p>
|
||
|
||
|
||
<h3>Astuce de conception</h3>
|
||
<p>
|
||
Quand un texte s'étoffe, il devient très vite difficile de se rappeler
|
||
dans l'ordre toutes les balises que l'on a ouvertes, ou de tout relire
|
||
pour être sûr de ne pas en avoir oublié. Comment être sûr que l'on
|
||
emboîte bien les poupées russes ?</p>
|
||
|
||
<p> Voici une astuce. Écrivez <em>dans l'ordre</em> : </p>
|
||
|
||
<ol>
|
||
<li> à gauche, la balise ouvrante ;</li>
|
||
<li> à droite, la balise fermante qui lui correspond ;</li>
|
||
<li> au milieu, le texte à insérer entre les deux balises.</li>
|
||
</ol>
|
||
|
||
<p>Ainsi, vous serez sûr de ne
|
||
jamais commettre d'erreur dans l'ordre de vos balises.
|
||
</p>
|
||
|
||
<p> Exemple :
|
||
Je mets les balises :
|
||
</p>
|
||
<pre>
|
||
<p> </p>
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
et je les remplis :
|
||
</p>
|
||
<pre>
|
||
<p>Je vous préviens tout de suite, c'est <p>
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
et je mets les balises :
|
||
</p>
|
||
<pre>
|
||
<p>Je vous préviens tout de suite, c'est <em> </em> </p>
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
et je les remplis :
|
||
</p>
|
||
<pre>
|
||
<p>Je vous préviens tout de suite, c'est <em>non.</em> </p>
|
||
</pre>
|
||
|
||
<p>
|
||
Fabuleux, non ? N'est-ce pas ridiculement simple ?
|
||
</p>
|
||
|
||
|
||
<h3><a name="entities">Caractères spéciaux : entités XHTML et Unicode</a></h3>
|
||
|
||
<p>
|
||
Vous avez parfois besoin de caractères spéciaux, que l'on ne peut pas
|
||
saisir trivialement au clavier. Pour cela, le XHTML a défini des
|
||
<dfn>entités</dfn>, qui par convention représentent ces caractères. Par
|
||
exemple, le symbole euro (€) est <code>&euro;</code>, le e dans
|
||
l'o (œ) s'écrit <code>&oelig;</code>.
|
||
</p>
|
||
|
||
<p>
|
||
En plus de ces entités XHTML (dont vous pouvez trouver la <a
|
||
href="http://www.madore.org/~david/computers/unicode/htmlent.html">liste</a>
|
||
chez David Madore), vous disposez des entités Unicode. <a
|
||
href="http://www.unicode.org/">Unicode</a> est une convention dont le
|
||
but est de représenter tous les langages du monde. Ainsi, vous écrirez
|
||
correctement le nom du compositeur Antonín Dvořák en utilisant
|
||
l'entité Unicode du r caron, à savoir &#345; (ř).
|
||
</p>
|
||
|
||
<h2>Le squelette d'une page</h2>
|
||
|
||
<p>Toute page XHTML est contenue entre deux balises <html>
|
||
(c'est-à-dire entre <html> et </html>).</p>
|
||
|
||
<div class="encadre">
|
||
<p>
|
||
Remarque : les balises s'appellent bien <html> et non
|
||
<xhtml> : c'est un héritage, vous vous en doutez, du HTML.
|
||
</p>
|
||
</div>
|
||
|
||
|
||
<h3>Le DTD</h3>
|
||
|
||
<p>
|
||
Toute page XHTML doit commencer par les éléments suivants :
|
||
</p>
|
||
|
||
<ul>
|
||
<!--
|
||
<li> comme le XHTML est un dérivé du XML, il doit commencer par une
|
||
<strong>déclaration XML</strong> (ce n'est pas obligatoire, mais
|
||
très fortement conseillé, et ça ne coûte rien) :
|
||
<pre>
|
||
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||
</pre>
|
||
</li>
|
||
-->
|
||
|
||
<li> votre document doit déclarer son <strong><i
|
||
lang="en">Document Type Definition</i></strong> (<abbr>DTD</abbr>), qui
|
||
précise au navigateur quelle version de XHTML vous utilisez :
|
||
<pre>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
</pre>
|
||
</li>
|
||
|
||
<li> ensuite, vous devez déclarer l'<strong>espace de noms XML</strong>
|
||
(XMLNS) :
|
||
<pre>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
</pre>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<p class="continue">
|
||
Il existe d'autres DTD, par exemple celui pour les cadres (<i
|
||
lang="en">frames</i>), mais souvenez-vous qu'utiliser les
|
||
cadres n'est pas une bonne idée ; cf. l'excellent article
|
||
« <a href="http://openweb.eu.org/articles/finir_cadres/">Pour en
|
||
finir avec les cadres</a> » sur le site de l'<a
|
||
href="http://openweb.eu.org/">OpenWeb Group</a>.
|
||
</p>
|
||
|
||
<p class="continue">
|
||
Pour l'instant, notre page-squelette ressemble donc à ceci :
|
||
</p>
|
||
|
||
<pre>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
||
<!-- Ce sont des commentaires. Ils sont complètement ignorés par
|
||
<!-- les navigateurs. Sinon, ici se trouve normalement le corps de
|
||
<!-- votre page. -->
|
||
|
||
</html>
|
||
</pre>
|
||
|
||
|
||
|
||
|
||
<h3>Les en-têtes</h3>
|
||
|
||
<p>Le rôle des en-têtes dans une page XHTML (comme dans un courrier
|
||
électronique) est de donner des méta-informations plus ou moins
|
||
importantes.</p>
|
||
|
||
<p> Par exemple, l'identité de l'auteur, le titre de la page,
|
||
l'encodage, la langue utilisée, etc. Les en-têtes sont déclarées à
|
||
l'intérieur de l'élément <head> (logique, non ?),
|
||
c'est-à-dire entre les balises <head> et </head>.
|
||
</p>
|
||
|
||
<h4>Le titre</h4>
|
||
|
||
<p>La plus importante des en-têtes est... le titre de la page. Dans un
|
||
navigateur graphique (Internet Explorer, Mozilla, etc.) il est affiché
|
||
dans la barre de titre. Il est également utilisé par les moteurs de
|
||
recherche. Un bon titre est informatif (évitez les jeux de mots nazes)
|
||
tout en restant relativement court. Il se déclare dans l'élément
|
||
<title> qui est <em>obligatoire</em>.</p>
|
||
|
||
<p> Ainsi, Jean-Paul Sartre pourra utiliser comme titre de sa page
|
||
d'accueil :
|
||
</p>
|
||
|
||
<pre>
|
||
<title> Page Web de Jean-Paul Sartre </title>
|
||
</pre>
|
||
|
||
|
||
|
||
<h4>Les balises <meta></h4>
|
||
|
||
<p>
|
||
Elles sont facultatives, mais importantes à la fois pour le navigateur
|
||
qui a des renseignements sur la manière dont afficher la page, et pour
|
||
les moteurs de recherche, qui s'en servent pour indexer vos
|
||
pages. Nous vous en présentons quelques-unes.
|
||
</p>
|
||
|
||
|
||
<h5>Auteur de la page</h5>
|
||
|
||
<pre>
|
||
<meta name="author" content="Jean-Paul Sartre" />
|
||
</pre>
|
||
|
||
<p class="continue">Vous pouvez déclarer plusieurs auteurs en séparant
|
||
les noms par des virgules.</p>
|
||
|
||
<h5>Encodage de la page</h5>
|
||
|
||
<pre><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> </pre>
|
||
|
||
<p class="continue">Ceci déclare que votre page est du (X)HTML (là
|
||
encore, il s'agit d'un héritage...) et que l'encodage est l'iso-8859-1
|
||
(alias iso-latin-1), l'encodage standard pour l'Europe occidentale. La
|
||
déclaration de l'encodage est importante pour le navigateur.</p>
|
||
|
||
<h5>Langue de la page</h5>
|
||
|
||
<pre><meta http-equiv="Content-Language" content="fr" /></pre>
|
||
|
||
<p class="continue">Quelques codes utiles : <code>fr</code> pour
|
||
le français, <code>en</code> pour l'anglais, <code>de</code> pour
|
||
l'allemand, <code>es</code> pour l'espagnol, <code>it</code> pour
|
||
l'italien, <code>ru</code> pour le russe. Déclarer la langue utilisée
|
||
est utile pour les synthétiseurs vocaux des navigateurs pour aveugles
|
||
(qui en déduisent comment prononcer) comme pour les navigateurs
|
||
standards qui peuvent en déduire, par exemple, s'il faut utiliser des
|
||
guillemets anglo-saxons ("") ou français (« »).</p>
|
||
|
||
<h5>Mots clefs</h5>
|
||
|
||
<pre>
|
||
<meta name="keywords" lang="fr" content="Philosophie, existentialisme,
|
||
littérature engagée" />
|
||
</pre>
|
||
|
||
<p>Cette balise <code>meta</code> est utilisée par certains moteurs de
|
||
recherche pour indexer les pages. Ne mettez que les mots-clefs les
|
||
plus significatifs, les moteurs n'aiment pas les listes trop
|
||
longues. Notez au passage que vous pouvez tout à fait passer à la
|
||
ligne.</p>
|
||
|
||
<h3>Le corps de la page</h3>
|
||
|
||
<p>
|
||
Voilà, on en a fini avec les en-têtes (on n'oublie pas le
|
||
</head> à la fin). On passe au cœur de votre page : ce que
|
||
le lecteur va voir <em>via</em> son navigateur.
|
||
</p>
|
||
|
||
<p>Le corps de la page est contenu entre balises <body>. Comment
|
||
le remplir ? Vous le verrez dans les lignes suivantes.</p>
|
||
|
||
<div class="encadre">
|
||
<p>
|
||
<strong>Important</strong> : pour tous les éléments de <body> il
|
||
y a une distinction importante entre les balises dites « <i
|
||
lang="en">block level</i> » et les balises « <i lang="en">inline
|
||
level</i> ».</p>
|
||
|
||
<p> Les <i lang="en">block level</i> sont par exemple des
|
||
paragraphes, des titres, etc. Ils forment des
|
||
« blocs ». Typiquement, ils comprennent une ou plusieurs
|
||
phrases. </p>
|
||
|
||
<p> Les éléments <i lang="en">inline</i> sont plutôt de la mise en
|
||
forme, ils s'appliquent à l'intérieur des blocs. C'est le cas des
|
||
balises qui mettent en valeur le texte, qui le renforcent. Typiquement,
|
||
on les trouve à l'intérieur d'une phrase.</p>
|
||
|
||
<p> La distinction peut vous paraître confuse mais vous comprendrez
|
||
mieux ensuite. Vous pouvez regarder par exemple la différence entre <a
|
||
href="#quote">citation <i lang="en">inline</i> et bloc</a>. </p> </div>
|
||
|
||
<h3>Squelette entier</h3>
|
||
|
||
<p> Vous pouvez le copier-coller pour servir de modèle à vos pages
|
||
Web.</p>
|
||
|
||
<pre>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
||
<head>
|
||
<title><!-- insérer le titre --></title>
|
||
<meta name="author" content="<!-- Insérer votre nom -->" />
|
||
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
|
||
<meta http-equiv="Content-Language" content="fr" />
|
||
<meta name="keywords" lang="fr" content="<!-- Insérer les mots-clefs de votre page-->" />
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Ici c'est le corps de la page -->
|
||
|
||
</body>
|
||
</html>
|
||
</pre>
|
||
|
||
|
||
<h2>Hiérarchiser</h2>
|
||
|
||
<p>Maintenant, il s'agit de remplir un peu votre page. Pour cela, il
|
||
faut réfléchir un peu avant et la structurer au moyen de titres
|
||
hiérarchisés. En effet, dès que la page dépasse les « vous êtes bien
|
||
sur la page de Toto », les informations ont besoin d'être
|
||
hiérarchisées pour être lisibles. Imaginez cette page sans le moindre
|
||
titre !
|
||
</p>
|
||
|
||
<p>Si vous avez fait du <a
|
||
href="&url.tuteurs;logiciels/latex/">LaTeX</a>, vous connaissez ce
|
||
genre de chose (<code>\chapter{}</code>, <code>\section{}</code>,
|
||
<code>\subsection{}</code>...). Idem pour Word avec son système de
|
||
Titre 1, Titre 2, etc.</p>
|
||
|
||
<p> En XHTML, c'est aussi simple : <h1>,
|
||
<h2>, <h3>... Ça va comme ça jusqu'à <h6>, ce qui
|
||
vous laisse pas mal de marge pour structurer votre
|
||
document. Traditionnellement, <h1> est réservé au titre de la
|
||
page (qui peut être, ou pas, le même que le <title>, à vous de
|
||
voir).
|
||
</p>
|
||
|
||
<pre>
|
||
<h1>Logique transcendantale</h1>
|
||
<!-- ... -->
|
||
<h2>Analytique transcendantale</h2>
|
||
<!-- ... -->
|
||
<h3>Analytique des principes</h3>
|
||
<!-- ... -->
|
||
<h4>Système de tous les principes de l'entendement pur</h4>
|
||
<!-- ... -->
|
||
<h5>Représentation systématique de tous les principes synthétiques</h5>
|
||
<!-- ... -->
|
||
<h6>Les postulats de la pensée empirique en général</h6>
|
||
<!-- ... -->
|
||
<h6>Réfutation de l'idéalisme</h6>
|
||
<!-- ... -->
|
||
<h2>Dialectique transcendantale</h2>
|
||
</pre>
|
||
|
||
<h2>Mettre en forme</h2>
|
||
|
||
<p>
|
||
On en arrive au cœur du problème : mettre en forme le
|
||
texte.
|
||
</p>
|
||
|
||
<h3>Paragraphes et sauts de ligne</h3>
|
||
|
||
<p>
|
||
La plus grande partie d'un texte, habituellement, c'est... du
|
||
texte. Des paragraphes de texte. En XHTML, les paragraphes sont
|
||
délimités par des <p> (et </p>, évidemment). Avec la
|
||
plupart des navigateurs, les paragraphes sont rendus à la manière
|
||
anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a
|
||
généralement une espace entre deux paragraphes.
|
||
</p>
|
||
|
||
<p>
|
||
Pour aller simplement à la ligne, utilisez l'élément <br />.
|
||
</p>
|
||
|
||
|
||
<h3><a name="quote">Citations</a></h3>
|
||
|
||
<p>
|
||
Vous pouvez citer au niveau <i lang="en">inline</i>, soit en utilisant
|
||
directement des guillemets, soit en utilisant l'élément <q>
|
||
(pour <i lang="en">quote</i>) :
|
||
</p>
|
||
|
||
<pre>
|
||
<q>Delenda Carthago</q>, comme disait le grand Caton...
|
||
</pre>
|
||
|
||
|
||
<p class="continue"> Au passage, Internet Explorer ignore purement et
|
||
simplement l'élément <q>, donc mieux vaut utiliser directement
|
||
les guillemets.
|
||
</p>
|
||
|
||
<p>Au niveau bloc, c'est l'élément <blockquote> qu'il vous
|
||
faut :
|
||
</p>
|
||
|
||
<pre>
|
||
<p>Charles-Marie de La Condamine est un savant et explorateur
|
||
français, né à Paris en 1701. Il est admis à à l'Académie française en
|
||
1760. Il écrit à ce sujet :</p>
|
||
|
||
<blockquote>
|
||
<p>
|
||
La Condamine est aujourd'hui<br />
|
||
Reçu dans la troupe immortelle<br />
|
||
Il est bien sourd, tant mieux pour lui,<br />
|
||
Mais non muet, tant pis pour elle.<br />
|
||
</p>
|
||
</blockquote>
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
<blockquote> est généralement rendu par un bloc indenté à droite
|
||
et à gauche :
|
||
</p>
|
||
|
||
<blockquote>
|
||
<p class="continue">
|
||
La Condamine est aujourd'hui<br />
|
||
Reçu dans la troupe immortelle<br />
|
||
Il est bien sourd, tant mieux pour lui,<br />
|
||
Mais non muet, tant pis pour elle.
|
||
</p>
|
||
</blockquote>
|
||
|
||
<h3>Styles de texte</h3>
|
||
|
||
<h4>Gras et italique</h4>
|
||
|
||
<p>
|
||
Le XHTML ne se soucie pas du rendu visuel. Pour lui, le gras et
|
||
l'italique n'existent pas à proprement parler. Mais il sait mettre en
|
||
valeur du texte.</p>
|
||
|
||
<p> <strong> est utilisé pour renforcer un membre
|
||
de phrase, insister sur son importance. Il est donc souvent rendu par
|
||
du <strong>gras</strong> par les navigateurs.</p>
|
||
|
||
<p> <em> (pour <i lang="en">emphasize</i>) sert également à mettre
|
||
en relief un membre de phrase. Il est plus faible que <strong>. Il
|
||
est généralement rendu par de l'<i lang="en">italique</i>.</p>
|
||
|
||
<p>
|
||
Selon les règles typographiques habituelles, un mot, une citation en
|
||
langue étrangère non francisée doit être mis en italique. Il ne s'agit
|
||
pas ici de mettre en valeur, mais d'une convention typographique. Dans
|
||
ce cas, vous devez utiliser l'élément <i>. Vous pouvez indiquer
|
||
de quelle langue il s'agit en utilisant l'attribut
|
||
<code>lang</code>. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
Selon le goût italien, les pâtes doivent être cuites <i lang="it"> al dente </i>.
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Ce qui donne :
|
||
</p>
|
||
|
||
<pre>
|
||
Selon le goût italien, les pâtes doivent être cuites <i lang="it">al dente</i>.
|
||
</pre>
|
||
|
||
<h4>Définitions</h4>
|
||
|
||
<p>
|
||
Le XHTML vous permet de structurer encore davantage vos documents,
|
||
essentiellement les documents techniques. <dfn> (pour <i
|
||
lang="en">define</i>) sert à indiquer un mot dont on va donner la
|
||
définition, une fois pour le reste du document. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
<p>On dit qu'un morphisme de schémas est <dfn>étale</dfn>
|
||
lorsqu'il est à la fois lisse et non ramifié. En fait, il suffit pour cela
|
||
qu'il soit à la fois <em>plat</em> et non ramifié.</p> </pre>
|
||
|
||
<h4>Titres (films, livres, etc.)</h4>
|
||
|
||
<p>
|
||
C'est <cite> qu'il faut utiliser pour les citations de titres de
|
||
livres, de films, etc. L'élément <cite> est usuellement rendu par
|
||
de l'italique. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
Le film <cite lang="it">Morte a Venezia</cite> de Luchino
|
||
Visconti est une adaptation de la nouvelle <cite lang="de">Der Tod
|
||
in Venedig</cite> de Thomas Mann.
|
||
</pre>
|
||
|
||
<h4>Code informatique</h4>
|
||
|
||
<p>
|
||
<code> (que vous reverrez dans la section du <a href="#pre">texte
|
||
préformaté</a>) est également un style de texte qui sert à démarquer
|
||
un extrait de code informatique du texte normal. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
La ligne <code>#include &lt;stdio.h&gt;</code>
|
||
demande au compilateur d'inclure dans le programme certaines
|
||
informations sur la bibliothèque standard d'entrées-sorties.
|
||
</pre>
|
||
|
||
<h4>Sigles et acronymes</h4>
|
||
|
||
<p>
|
||
Les sigles peuvent être indiqués par un élément <abbr>, et les
|
||
acronymes (sigles prononçables, comme ONU, OTAN, etc.) par
|
||
l'élément... <acronym>. Ces éléments sont
|
||
intéressants surtout si on utilise leur attribut <code>title</code> :
|
||
certains navigateurs peuvent alors afficher le contenu de
|
||
<code>title</code> dans une bulle d'aide. Démonstration :
|
||
|
||
</p>
|
||
|
||
<pre>
|
||
L'<acronym lang="en" title="United Nations Special
|
||
Commission">UNSCOM</acronym> a été créée pour assister
|
||
l'<abbr lang="en" title="International Atomic Energy
|
||
Agency">IAEA</abbr> en Iraq.
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Les bons navigateurs (<a href="http://www.mozilla.org/">Mozilla</a> ou <a
|
||
href="http://www.mozilla.org/products/firefox/">FireFox</a> par exemple) affichent le
|
||
contenu du <code>title</code> sous la forme d'une bulle d'aide (<i
|
||
lang="en">tooltip</i> en anglais) quand vous laissez le curseur dessus. Faites le
|
||
test :
|
||
</p>
|
||
|
||
<pre>
|
||
L'<acronym lang="en" title="United Nations Special Commission">UNSCOM</acronym> a été créée pour assister l'<abbr lang="en" title="International Atomic Energy Agency">IAEA</abbr> en Iraq.
|
||
</pre>
|
||
|
||
|
||
<h3>Listes</h3>
|
||
|
||
<p> Il y a trois sortes de listes possibles en XHTML : </p>
|
||
|
||
<ul>
|
||
<li> les listes numérotées ; </li>
|
||
<li> les listes non numérotées ; </li>
|
||
<li> les listes de définitions (lexiques).</li>
|
||
</ul>
|
||
|
||
<p> Toutes les listes sont des éléments blocs.</p>
|
||
|
||
<h4>Listes non numérotées</h4>
|
||
|
||
<p>Elles sont aussi dites « listes à puces » car souvent les
|
||
navigateurs affichent des puces devant chaque entrée de
|
||
liste. <ul> et </ul> (pour <i lang="en">Unordered
|
||
Lists</i>) marquent le début et la fin d'une liste, <li> et
|
||
</li> le début et la fin d'une entrée de liste.</p>
|
||
|
||
<p> En exemple, voici quelques armes de Goldorak : </p>
|
||
|
||
<pre>
|
||
<ul>
|
||
<li> mégavolts</li>
|
||
<li> cornofulgure</li>
|
||
<li> astéro-hache</li>
|
||
</ul>
|
||
</pre>
|
||
|
||
<p class="continue">Ce qui donne :</p>
|
||
|
||
<ul>
|
||
<li> mégavolts</li>
|
||
<li> cornofulgure</li>
|
||
<li> astéro-hache</li>
|
||
</ul>
|
||
|
||
<h4>Listes numérotées</h4>
|
||
|
||
<p>Même principe, avec <ol> (<i lang="en">Ordered Lists</i>) à
|
||
la place de <ul>. La numérotation se fera par défaut en chiffres
|
||
arabes (1, 2, 3...). Vous pouvez changer le type de numérotation, en
|
||
chiffres romains ou en caractères alphabétiques (a, b, c...) grâce à
|
||
l'attribut <code>type</code> :
|
||
</p>
|
||
|
||
<pre>
|
||
<ol type="i">
|
||
<li> mégavolts</li>
|
||
<li> cornofulgure</li>
|
||
<li> astéro-hache</li>
|
||
</ol>
|
||
</pre>
|
||
|
||
<p class="continue">Ce qui donne :</p>
|
||
|
||
<ol style="list-style-type: lower-roman;">
|
||
<li> mégavolts</li>
|
||
<li> cornofulgure</li>
|
||
<li> astéro-hache</li>
|
||
</ol>
|
||
|
||
<p>Pour changer de numérotations, changez la valeur de
|
||
<code>type</code> : I pour les chiffres romains majuscules, a pour les
|
||
caractères alphabétiques minuscules, A pour les majuscules.</p>
|
||
|
||
<h4>Lexiques</h4>
|
||
|
||
<p>
|
||
On utilise l'élément <dl> (<i lang="en">Definition list</i>). À
|
||
l'intérieur de l'élément <dl>, <dt> (pour <i
|
||
lang="em">definition term</i>) est une entrée du lexique, et <dd>
|
||
(pour <i lang="em">definition definition</i>...) la définition associée
|
||
à cette entrée. Admettons que vous fassiez un lexique du folklore
|
||
normalien.
|
||
</p>
|
||
|
||
<pre>
|
||
<dl>
|
||
|
||
<dt>Amazon</dt>
|
||
<dd>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</dd>
|
||
|
||
<dt>Fun machine</dt>
|
||
<dd>L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les
|
||
doigts ou à tuer le temps en attendant de jouer à l'Amazon.</dd>
|
||
|
||
</dl>
|
||
</pre>
|
||
|
||
<p class="continue">Ce qui donne :</p>
|
||
|
||
<dl>
|
||
<dt>Amazon</dt>
|
||
<dd>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</dd>
|
||
<dt>Fun machine</dt>
|
||
<dd>L'autre flipper, qui ne sert comme son nom l'indique qu'à se
|
||
dérouiller les doigts ou à tuer le temps en attendant de jouer à
|
||
l'Amazon.</dd>
|
||
</dl>
|
||
|
||
<h3><a name="pre">Texte préformaté</a></h3>
|
||
|
||
<p>On utilise l'élément <pre> pour du texte préformaté au niveau
|
||
bloc. Différences avec du texte normal : les navigateurs respectent
|
||
toutes les espaces que vous avez indiqués et ils utilisent généralement
|
||
une fonte à espacement fixe. Le texte préformaté peut être utilisé pour
|
||
mettre en page un poème, par exemple, ou plus prosaïquement, du code
|
||
informatique. </p>
|
||
|
||
<p> Attention toutefois, <pre> n'est pas l'environnement
|
||
<code>verbatim</code> de LaTeX : le code XHTML y est interprété. Dans
|
||
cette documentation, par exemple, on a recours aux <a
|
||
href="#entities">entités</a> pour représenter <, > et &.
|
||
</p>
|
||
|
||
<p class="continue">Par exemple, si je veux afficher un programme conçu
|
||
en langage C, je dois insérer dans la page HTML le code
|
||
suivant :</p>
|
||
|
||
<pre>
|
||
<pre>
|
||
#include &lt;stdio.h&gt;
|
||
|
||
int main(void)
|
||
{
|
||
printf("Hello, world!\n");
|
||
return 0;
|
||
}
|
||
</pre>
|
||
</pre>
|
||
|
||
<p class="continue">Cela sera affiché de la façon suivante :</p>
|
||
|
||
<pre>
|
||
#include <stdio.h>
|
||
|
||
int main(void)
|
||
{
|
||
printf("Hello, world!\n");
|
||
return 0;
|
||
}
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
(pour ceux qui ne connaissent pas le langage C, vous pouvez
|
||
exécuter ce programme en recopiant ces lignes dans un fichier
|
||
<code>hello.c</code> ; ensuite, tapez <code>gcc hello.c</code> puis
|
||
<code>./a.out</code> et regardez le résultat).
|
||
</p>
|
||
|
||
<p>Pour citer du code en <i lang="en">inline</i>, utilisez la bien-nommée
|
||
balise <code>.
|
||
</p>
|
||
|
||
<h2>Images</h2>
|
||
|
||
<p>
|
||
On se sert de l'élément <img /> (pour <i lang="en">image</i>, bien
|
||
sûr) et de ses attributs. Le principal attribut est
|
||
<code>src</code> : il permet de spécifier l'adresse où aller
|
||
chercher l'image. Ainsi, quand on écrit son fichier
|
||
<code>~/www/index.html</code> pour inclure une image située dans son
|
||
répertoire <code>~/www/images/</code>, on écrira :</p>
|
||
|
||
<pre>
|
||
<img src="images/monimage.jpg" />
|
||
</pre>
|
||
|
||
<p class="continue">On peut aussi indiquer une adresse
|
||
<em>absolue</em> quand l'image n'est pas sur votre compte, par
|
||
exemple :</p>
|
||
|
||
<pre>
|
||
<img src="http://www.eleves.ens.fr/tuteurs/icones/note.png" />
|
||
</pre>
|
||
|
||
<p>Il est obligatoire d'indiquer une description de votre image, en
|
||
guise de texte alternatif pour les navigateurs texte, ou si pour une
|
||
raison quelconque l'image ne peut pas être téléchargée ; le texte
|
||
alternatif sert, en particulier, pour les non-voyants qui disposent de
|
||
logiciels pour lire du texte à haute voix, mais n'ont rien pour décrire
|
||
des images. Ce texte doit être court et informatif. On l'indique avec
|
||
l'attribut <code>alt</code> :
|
||
</p>
|
||
|
||
<pre>
|
||
<img src="images/pouf.jpg" alt="Photo de moi et mon chien Pouf en vacances" />
|
||
</pre>
|
||
|
||
<p class="continue">Si l'image ne joue aucun rôle sémantique
|
||
(c'est-à-dire si elle n'est là que pour décorer), on indique
|
||
<code>alt=""</code>.</p>
|
||
|
||
<p>Les formats les plus couramment utilisés pour le Web sont le JPEG,
|
||
en <code>.jpg</code> et le GIF, en <code>.gif</code>
|
||
— utiliser de préférence le format PNG, GIF n'étant pas
|
||
libre, et moins bon techniquement. JPEG est un format qui est plus
|
||
adapté aux photos, GIF ou PNG sont plus adaptés aux logos et de
|
||
manière générale aux images ayant peu de couleurs.
|
||
</p>
|
||
|
||
|
||
<h2>Tableaux</h2>
|
||
|
||
<p>
|
||
Les tableaux sont décrits par l'élément <table>. C'est l'un des
|
||
chapitres les plus complexes du XHTML : les possibilités sont très
|
||
nombreuses.
|
||
</p>
|
||
|
||
<h3>Un tableau simple</h3>
|
||
|
||
<p><table> définit l'ensemble du tableau. À l'intérieur, il faut décrire
|
||
les lignes du tableau et ses cellules. L'élément <tr> décrit les lignes,
|
||
et <td> les cellules. On déclare dans l'ordre <table>, puis
|
||
<tr> et enfin <td>.
|
||
</p>
|
||
|
||
<pre>
|
||
<table>
|
||
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
|
||
<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
|
||
<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
|
||
</table>
|
||
</pre>
|
||
|
||
<p class="continue">Ce qui donne :</p>
|
||
|
||
<table>
|
||
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
|
||
<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
|
||
<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
|
||
</table>
|
||
|
||
<p class="continue">Pas très croquignolet, hein ?</p>
|
||
|
||
<h3>Un tableau plus évolué</h3>
|
||
|
||
<p>
|
||
On peut déjà commencer par donner un titre à ce tableau, grâce à
|
||
l'élément <caption>. Le titre du tableau se place au début du
|
||
tableau, avant la première ligne (avant le premier <tr>) mais dans
|
||
le tableau tout de même (donc après la déclaration de <table>).
|
||
</p>
|
||
|
||
<p class="continue">
|
||
On veut également différencier des méta-cellules, qui donnent des
|
||
informations sur le contenu des cellules de données, des cellules de
|
||
données à proprement parler. Les cellules de données, c'est bien sûr
|
||
<td>, et les méta-cellules, c'est l'élément <th> (le H
|
||
étant pour <i lang="en">header</i>, en-tête) qui s'en charge.
|
||
</p>
|
||
|
||
<p class="continue">
|
||
On peut aussi, pour rendre le tableau un peu plus esthétique, et plus lisible (6
|
||
cellules ça va, mais quand vous en aurez 42...), lui donner une bordure. On
|
||
utilise pour cela l'attribut border à qui on spécifie une épaisseur en nombre de
|
||
pixels. Généralement, border=1 suffit amplement à ce que vous voulez faire
|
||
(délimiter mieux les cellules).
|
||
</p>
|
||
|
||
<pre>
|
||
<table border=1>
|
||
<caption>Ceci est un tableau</caption>
|
||
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
|
||
<tr><td> Cellule 1 </td><td> Cellule 2</td></tr>
|
||
<tr><td> Cellule 3 </td><td> Cellule 4</td></tr>
|
||
<tr><td> Cellule 5 </td><td> Cellule 6</td></tr>
|
||
</table>
|
||
</pre>
|
||
|
||
<p class="continue">Donc :</p>
|
||
|
||
<table border="1px">
|
||
<caption>Ceci est un tableau</caption>
|
||
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
|
||
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
|
||
<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
|
||
<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
|
||
</table>
|
||
|
||
|
||
<h2><a name="liens">Liens</a></h2>
|
||
|
||
<p>Le meilleur pour la fin, les liens ! Ce qui fait d'une page Web une
|
||
vraie page hypertexte (le HT de XHTML) et pas un bête document. Les
|
||
liens se décrivent avec l'élément <a> (qui est, bien sûr, <i
|
||
lang="en">inline</i>), suivi d'attributs.
|
||
</p>
|
||
|
||
<h3>Lien simple</h3>
|
||
|
||
<p>Le lien de base utilise l'attribut href :</p>
|
||
|
||
<pre>
|
||
Retourner au <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.
|
||
</pre>
|
||
|
||
<p class="continue">donne ainsi :</p>
|
||
|
||
<pre>
|
||
Retourner au <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.
|
||
</pre>
|
||
|
||
<p>On peut utiliser des liens absolus, comme celui ci-dessus, qui
|
||
donne l'ensemble de l'URL, mais aussi des liens relatifs, qui sont
|
||
relatifs à l'arborescence de votre site. Admettons que vous ayez dans
|
||
votre répertoire <code>~/www/</code> un répertoire <code>stage</code>
|
||
qui contient, entre autres, le fichier <code>rapport.html</code>. Pour
|
||
faire un lien dessus, depuis la page d'accueil, ça donnera :
|
||
</p>
|
||
|
||
<pre>
|
||
Mon <a href="stage/rapport.html">rapport de stage</a>
|
||
parle du lien entre les nombres <var>p</var>-adiques et les phases de
|
||
la lune. </pre>
|
||
|
||
<h3>Ancres</h3>
|
||
|
||
<p>Une ancre sert à faire un lien <em>local</em>, c'est-à-dire vers un
|
||
endroit précis du document. C'est particulièrement utile pour faire
|
||
une table des matières avec des liens qui pointent vers les titres, ou
|
||
encore pour faire des références croisées dans un document.
|
||
</p>
|
||
|
||
<p>
|
||
On commence par définir les ancres, c'est-à-dire les endroits vers
|
||
lesquels on veut pointer. On utilise l'attribut <code>name</code> de
|
||
l'élément <a> :
|
||
</p>
|
||
|
||
<pre>
|
||
Les <a name="olm">Olmèques</a> ont véritablement
|
||
existé. C'est la première des grandes civilisations précolombiennes...
|
||
</pre>
|
||
|
||
<p class="continue">Quand vous lisez le document avec un navigateur,
|
||
l'ancre est invisible. Pour choisir le nom de l'ancre, vous avez à
|
||
votre disposition tous les caractères alphanumériques, et mêmes les
|
||
caractères accentués. Veuillez seulement à ne pas utiliser deux fois
|
||
la même ancre au sein du document.</p>
|
||
|
||
<p>Pour faire le lien vers cette ancre, on utilise toujours l'attribut
|
||
<code>href</code>, mais en modifiant la syntaxe avec un
|
||
<code>#</code> :</p>
|
||
|
||
<pre>
|
||
Esteban, Zia et Tao rencontrent alors les Olmèques, une peuplade
|
||
extra-terrestre (voir ici la <a href="#olm">véritable histoire
|
||
du peuple olmèque</a>.
|
||
</pre>
|
||
|
||
<p class="continue">Vous pouvez positionner un lien vers cette ancre
|
||
même depuis un autre fichier :</p>
|
||
|
||
<pre>
|
||
Voir <a href="citesdor.html#olm">l'histoire des Olmèques</a>.
|
||
</pre>
|
||
|
||
<h3>Liens spéciaux</h3>
|
||
|
||
<p>
|
||
Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien, on
|
||
vous envoie un courrier électronique. On utilise toujours l'élément
|
||
<a> et son attribut <code>href</code>. Seulement, le protocole du
|
||
lien change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez
|
||
aussi utiliser le protocole <code>mailto</code>, qui est le protocole
|
||
des courriers électroniques.
|
||
</p>
|
||
|
||
<pre>
|
||
Écrivez-moi : <a href="mailto:mon.adresse@ens.fr">mon.adresse@ens.fr</a>
|
||
</pre>
|
||
|
||
<p class="continue">Quand un lecteur suivra ce lien, son navigateur
|
||
lui proposera de vous envoyer un mail.</p>
|
||
|
||
<div class="attention">Donner une adresse « en clair » sur son site
|
||
est une excellente manière de recevoir du spam. Mieux vaut utiliser un
|
||
encodage très simple, à base d'entités, qui vous permettra de damer le
|
||
pion aux robots collecteurs d'adresses.
|
||
</div>
|
||
|
||
<p>
|
||
Les <a href="#entities">entités</a> dont vous avez besoin en l'espèce
|
||
sont <code>&#64;</code> pour une arobase (@) ou encore
|
||
<code>&#46;</code> pour un point (.) et <code>&#45;</code>
|
||
pour un tiret (-). Ce qui donne :
|
||
</p>
|
||
|
||
<pre>
|
||
Mon adresse : <a href="mailto:jean&#45;paul&#46;sartre@ens.fr">jean&#45;paul&#46;sartre&#64;ens&#46;fr</a>
|
||
</pre>
|
||
|
||
<p>Complètement illisible, on est bien d'accord ? C'est ce que verra
|
||
le robot collecteur d'adresses. En revanche, un lecteur normal passant
|
||
par un navigateur verra ceci :
|
||
</p>
|
||
|
||
<pre>
|
||
Mon adresse : <a href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
|
||
</pre>
|
||
|
||
<p>Vous pouvez utiliser ce système avec d'autres protocoles, celui des
|
||
news (<code>news:</code>) pour que le navigateur affiche (s'il en est
|
||
capable) le message dont vous avez donné le message-ID, ou le FTP...
|
||
</p>
|
||
|
||
<h2>Le validateur du W3C</h2>
|
||
|
||
<p>
|
||
Vous avez fini de taper votre première page XHTML. Vous vous êtes bien
|
||
relu. Il vous reste une dernière étape : passer cette page au
|
||
validateur XHTML. Il vous permettra de voir si vous avez bien refermé
|
||
toutes vos balises dans l'ordre qu'il faut, par exemple.
|
||
</p>
|
||
|
||
<h3>Validation</h3>
|
||
|
||
<p>
|
||
Il vous suffit d'aller dire coucou au <a
|
||
href="http://validator.w3.org/">validateur du W3C</a> et de lui indiquer
|
||
l'URL de votre page XHTML, ou encore de lui indiquer le chemin du
|
||
fichier sur votre disque dur. Vous saurez tout de suite si votre code
|
||
est bon ou s'il reste quelques corrections à faire...
|
||
</p>
|
||
|
||
<div class="attention">
|
||
<strong>Attention</strong> : le validateur ne vérifie que la
|
||
correction <em>formelle</em> de votre code. En clair, il peut vous
|
||
dire que votre fichier est <em>syntaxiquement</em> correct, mais pas
|
||
s'il est <em>sémantiquement</em> correct.
|
||
</div>
|
||
|
||
<p>
|
||
Si le code de votre page n'est pas correct, le validateur vous
|
||
l'indiquera, en vous précisant quelles sont les lignes incriminées dans
|
||
votre fichier XHTML, et la nature de l'erreur. En suivant ces
|
||
instructions, vous pourrez corriger votre code.
|
||
</p>
|
||
|
||
<h3>Le label</h3>
|
||
|
||
<p>
|
||
Quand vous aurez une page impeccable, ce qui est loin d'être difficile à
|
||
obtenir (et qui est très gratifiant, vous verrez), le validateur vous
|
||
permettra d'insérer dans votre page le code suivant :
|
||
</p>
|
||
|
||
<pre>
|
||
<p>
|
||
<a href="http://validator.w3.org/check?uri=referer">
|
||
<img src="http://www.w3.org/Icons/valid-xhtml10"
|
||
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
|
||
</p>
|
||
</pre>
|
||
|
||
<p> Il peut être très utile de suivre ce conseil. Vous aurez ainsi dans
|
||
votre page le logo suivant : <br />
|
||
|
||
<img src="http://www.w3.org/Icons/valid-xhtml10"
|
||
alt="Valid XHTML 1.0!" height="31" width="88" />
|
||
</p>
|
||
|
||
<p class="continue">
|
||
ce qui présente les avantages suivants :
|
||
</p>
|
||
|
||
<ul>
|
||
<li> vos lecteurs peuvent voir que vous respectez les normes et les
|
||
promouvez ;</li>
|
||
<li> en cliquant dessus, vous pouvez vérifier en un clin d'œil la
|
||
conformité de votre page aux normes, et corriger très rapidement tout
|
||
écart. </li>
|
||
</ul>
|
||
|
||
|
||
<h3>Pourquoi respecter les normes ?</h3>
|
||
|
||
<p>
|
||
Nous vous rappelons que les respect des normes n'est pas seulement une
|
||
affaire de pédanterie, mais avant tout d'accessibilité. Pour en savoir
|
||
plus sur le calvaire des pages non conformes à la norme pour les
|
||
personnes handicapées, vous pouvez aller voir le site <a
|
||
href="http://www.accessiweb.org/">AccessiWeb</a>.
|
||
</p>
|
||
|
||
<div class="metainformation">Auteurs : Marie-Lan Nguyen (HTML),
|
||
Baptiste Mélès (XHTML). Dernière
|
||
modification : <date value="$Date: 2007-07-17 10:02:41 $" />.</div>
|
||
|
||
</body>
|
||
</html>
|