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