2009-09-20 12:34:28 +02:00
<?xml version="1.0" encoding="UTF-8"?>
2003-05-15 12:41:40 +02:00
<!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>
2009-09-20 12:27:14 +02:00
<h1>Tutoriel XHTML
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
2009-09-20 12:27:14 +02:00
Language">XHTML</abbr> est un langage de formatage de texte adapté à la
2005-05-20 01:24:36 +02:00
conception de pages web.
</p>
<p> Ce n'est pas un langage de programmation, mais un langage de mise en
2009-09-20 12:27:14 +02:00
forme de données
2005-05-20 01:24:36 +02:00
qu'un programme est un processus dynamique. Vous n'avez aucunement
2009-09-20 12:27:14 +02:00
besoin d'avoir des bases de programmation pour écrire du XHTML
2003-05-15 12:41:40 +02:00
</p>
<p>
2009-09-20 12:27:14 +02:00
Pour vous le présenter, un peu de généalogie facilitera les choses,
notamment pour expliquer la différence entre HTML et XHTML.
2005-05-20 01:24:36 +02:00
</p>
2009-09-20 12:27:14 +02:00
<h3>Généalogie du XHTML</h3>
2005-05-20 01:24:36 +02:00
<p>
La famille du XHTML est une famille nombreuse, et elle n'a pas fini de
2009-09-20 12:27:14 +02:00
s'étendre
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.
2005-05-20 01:24:36 +02:00
</p>
<p>
Le <abbr title="Standard Generalized Markup Language">SGML</abbr> est un
2009-09-20 12:27:14 +02:00
méta-langage
2005-05-20 01:24:36 +02:00
title="HyperText Markup Language">HTML</abbr> est l'un de ces langages
2009-09-20 12:27:14 +02:00
balisés, fondé en particulier sur la notion de <em>lien hypertexte</em>,
qui permet de naviguer confortablement d'une page à une autre.</p>
2005-05-20 01:24:36 +02:00
<p>
2009-09-20 12:27:14 +02:00
Le HTML a très vite remporté un grand succès. Mais il a aussi rencontré
2005-05-20 01:24:36 +02:00
certaines limites. En particulier, il n'est pas extensible. Aussi a-t-il
2009-09-20 12:27:14 +02:00
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é
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p> Le problème, c'est que le HTML n'était pas compatible avec le
XML
2005-05-20 01:24:36 +02:00
title="eXtensible HyperText Markup Language">XHTML</abbr>, qui est
2009-09-20 12:27:14 +02:00
dérivé du XML, mais conserve les principes fondamentaux du HTML, dont il
hérite également de nombreuses spécificités.
2005-05-20 01:24:36 +02:00
</p>
2009-09-20 12:27:14 +02:00
<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.
2005-05-20 01:24:36 +02:00
</p>
<h3>Structure logique d'un document</h3>
2009-09-20 12:27:14 +02:00
<p> Le XHTML définit la <strong>structure logique</strong> d'un
document, permettant ensuite à un navigateur (Firefox, Mozilla,
2005-05-20 01:24:36 +02:00
Netscape, Opera, Internet Explorer, etc.) de rendre visuellement (mais
aussi auditivement ou tactilement, pour les non-voyants) le
document. </p>
2009-09-20 12:27:14 +02:00
<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
2005-05-20 01:24:36 +02:00
regroupe des acteurs majeurs du Web comme Microsoft, MacroMedia (qui
2009-09-20 12:27:14 +02:00
produit Flash), Apple, AOL, etc. Nous en sommes actuellement à la norme
<a href="http://www.w3.org/TR/xhtml1/">XHTML
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>
2009-09-20 12:27:14 +02:00
<strong>L'élément de base d'un site est la page</strong>. C'est un
2005-05-20 01:24:36 +02:00
fichier dont l'extension est normalement <code>.html</code> (ou
2009-09-20 12:27:14 +02:00
<code>.htm</code> si votre système d'exploitation vous impose cette
2005-05-20 01:24:36 +02:00
limitation) et qui contient du code XHTML.
2003-05-15 12:41:40 +02:00
</p>
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p> <strong>Le XHTML ne s'occupe que de définir la structure logique de
2005-05-20 01:24:36 +02:00
votre document</strong>. Pour l'aspect visuel (mise en page, couleurs,
fontes, etc.), c'est le domaine des feuilles de style, dont le <a
2009-09-20 12:27:14 +02:00
href="css.html">tutoriel</a> est en cours de rédaction. </p>
2005-05-20 01:24:36 +02:00
<h2>Principes fondamentaux</h2>
<h3><a name="voc">Les balises</a></h3>
2003-05-15 12:41:40 +02:00
<p>
2009-09-20 12:27:14 +02:00
Le XHTML utilise des <strong>balises</strong> (aussi appelées
«
2005-05-20 01:24:36 +02:00
page.</p>
2009-09-20 12:27:14 +02:00
<p> Toute balise doit être ouverte (sans quoi elle n'existe pas,
évidemment)
fermées</strong>.</p>
2005-05-20 01:24:36 +02:00
<div class="encadre">
<p>L'obligation de fermer chaque balise est l'une des principales
2009-09-20 12:27:14 +02:00
différences entre le HTML et le XHTML
que le XHTML hérite du XML. </p> </div>
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p>Une balise se présente sous la forme <tagada>, avec un < et
2005-05-20 01:24:36 +02:00
un >.</p>
2009-09-20 12:27:14 +02:00
<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
2005-05-20 01:24:36 +02:00
</p>
<p>
2009-09-20 12:27:14 +02:00
Un jeu de balises présente donc obligatoirement l'une des deux formes
suivantes
2005-05-20 01:24:36 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<tagada>
2005-05-20 01:24:36 +02:00
</pre>
<p class="continue">
2009-09-20 12:27:14 +02:00
ou bien
2005-05-20 01:24:36 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<tagada
2005-05-20 01:24:36 +02:00
</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
2009-09-20 12:27:14 +02:00
<strong>attributs</strong>
est l'élément, <code>type</code> l'attribut, et «
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>
2009-09-20 12:27:14 +02:00
En XHTML, <strong>on écrit les éléments et les attributs en
2005-05-20 01:24:36 +02:00
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>
2009-09-20 12:27:14 +02:00
L'écriture des balises en minuscules est, là encore, un héritage du
XML
2005-05-20 01:24:36 +02:00
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>
2009-09-20 12:27:14 +02:00
<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.
2003-05-15 12:41:40 +02:00
</p>
2009-09-20 12:27:14 +02:00
<h3>Syntaxe générale</h3>
2003-05-15 12:41:40 +02:00
2004-02-20 14:26:19 +01:00
<div class="encadre">
2009-09-20 12:27:14 +02:00
<p><strong>Toutes</strong> les balises doivent être refermées.</p>
2004-02-20 14:26:19 +01:00
</div>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<p>Toute partie de la page doit être contenue dans (au moins) une
2005-05-20 01:24:36 +02:00
balise. </p>
2009-09-20 12:27:14 +02:00
<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.
2003-05-15 12:41:40 +02:00
</p>
2005-05-20 01:24:36 +02:00
<p>
2009-09-20 12:27:14 +02:00
Il ne faut donc pas écrire
2005-05-20 01:24:36 +02:00
</p>
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +02:00
<p> Je vous préviens tout de suite, c'est <em>non.</p></em>
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p class="continue">mais
2005-05-20 01:24:36 +02:00
<pre>
2009-09-20 12:27:14 +02:00
<p> Je vous préviens tout de suite, c'est <em>non.</em> </p>
2005-05-20 01:24:36 +02:00
</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
2009-09-20 12:27:14 +02:00
après. C'est le principe des poupées russes.
2005-05-20 01:24:36 +02:00
</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>
2009-09-20 12:27:14 +02:00
Quand un texte s'étoffe, il devient très vite difficile de se rappeler
2005-05-20 01:24:36 +02:00
dans l'ordre toutes les balises que l'on a ouvertes, ou de tout relire
2009-09-20 12:27:14 +02:00
pour être sûr de ne pas en avoir oublié. Comment être sûr que l'on
emboîte bien les poupées russes
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p> Voici une astuce. Écrivez <em>dans l'ordre</em>
2005-05-20 01:24:36 +02:00
<ol>
2009-09-20 12:27:14 +02:00
<li> à gauche, la balise ouvrante
<li> à droite, la balise fermante qui lui correspond
<li> au milieu, le texte à insérer entre les deux balises.</li>
2005-05-20 01:24:36 +02:00
</ol>
2009-09-20 12:27:14 +02:00
<p>Ainsi, vous serez sûr de ne
2005-05-20 01:24:36 +02:00
jamais commettre d'erreur dans l'ordre de vos balises.
</p>
2009-09-20 12:27:14 +02:00
<p> Exemple
Je mets les balises
2005-05-20 01:24:36 +02:00
</p>
<pre>
<p> </p>
</pre>
<p class="continue">
2009-09-20 12:27:14 +02:00
et je les remplis
2005-05-20 01:24:36 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<p>Je vous préviens tout de suite, c'est <p>
2005-05-20 01:24:36 +02:00
</pre>
<p class="continue">
2009-09-20 12:27:14 +02:00
et je mets les balises
2005-05-20 01:24:36 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<p>Je vous préviens tout de suite, c'est <em> </em> </p>
2005-05-20 01:24:36 +02:00
</pre>
<p class="continue">
2009-09-20 12:27:14 +02:00
et je les remplis
2005-05-20 01:24:36 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<p>Je vous préviens tout de suite, c'est <em>non.</em> </p>
2005-05-20 01:24:36 +02:00
</pre>
<p>
2009-09-20 12:27:14 +02:00
Fabuleux, non
2005-05-20 01:24:36 +02:00
</p>
2009-09-20 12:27:14 +02:00
<h3><a name="entities">Caractères spéciaux
2005-05-20 01:24:36 +02:00
<p>
2009-09-20 12:27:14 +02:00
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
2005-05-20 01:24:36 +02:00
exemple, le symbole euro (€) est <code>&euro;</code>, le e dans
2009-09-20 12:27:14 +02:00
l'o (œ) s'écrit <code>&oelig;</code>.
2004-02-20 14:26:19 +01:00
</p>
<p>
2009-09-20 12:27:14 +02:00
En plus de ces entité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>
2009-09-20 12:27:14 +02:00
chez David Madore), vous disposez des entités Unicode. <a
2003-06-17 01:46:32 +02:00
href="http://www.unicode.org/">Unicode</a> est une convention dont le
2009-09-20 12:27:14 +02:00
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; (ř).
2003-05-15 12:41:40 +02:00
</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>
2009-09-20 12:27:14 +02:00
(c'est-à-dire entre <html> et </html>).</p>
2005-05-20 01:24:36 +02:00
<div class="encadre">
<p>
2009-09-20 12:27:14 +02:00
Remarque
<xhtml>
2005-05-20 01:24:36 +02:00
</p>
</div>
2003-05-15 12:41:40 +02:00
<h3>Le DTD</h3>
<p>
2009-09-20 12:27:14 +02:00
Toute page XHTML doit commencer par les élé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
<!--
2009-09-20 12:27:14 +02:00
<li> comme le XHTML est un dérivé du XML, il doit commencer par une
<strong>déclaration
très fortement conseillé, et ça ne coûte rien)
2005-05-20 01:24:36 +02:00
<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
2009-09-20 12:27:14 +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
2009-09-20 12:27:14 +02:00
pré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
2009-09-20 12:27:14 +02:00
<li> ensuite, vous devez déclarer l'<strong>espace de noms XML</strong>
(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
2009-09-20 12:27:14 +02:00
cadres n'est pas une bonne idée
« <a href="http://openweb.eu.org/articles/finir_cadres/">Pour en
finir avec les cadres</a> » sur le site de l'<a
2005-05-20 01:24:36 +02:00
href="http://openweb.eu.org/">OpenWeb Group</a>.
2004-02-20 14:26:19 +01:00
</p>
<p class="continue">
2009-09-20 12:27:14 +02:00
Pour l'instant, notre page-squelette ressemble donc à ceci
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
2009-09-20 12:27:14 +02:00
<!-- Ce sont des commentaires. Ils sont complètement ignoré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
2009-09-20 12:27:14 +02:00
<h3>Les en-têtes</h3>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<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
2005-05-20 01:24:36 +02:00
importantes.</p>
2009-09-20 12:27:14 +02:00
<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>.
2003-05-15 12:41:40 +02:00
</p>
<h4>Le titre</h4>
2009-09-20 12:27:14 +02:00
<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
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
2009-09-20 12:27:14 +02:00
d'accueil
2003-05-15 12:41:40 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<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>
2009-09-20 12:27:14 +02:00
Elles sont facultatives, mais importantes à la fois pour le navigateur
qui a des renseignements sur la manière dont afficher la page, et pour
2003-05-15 12:41:40 +02:00
les moteurs de recherche, qui s'en servent pour indexer vos
2009-09-20 12:27:14 +02:00
pages. Nous vous en présentons quelques-unes.
2003-05-15 12:41:40 +02:00
</p>
<h5>Auteur de la page</h5>
<pre>
2009-09-20 12:27:14 +02:00
<meta name="author" content="Jean-Paul Sartre"
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p class="continue">Vous pouvez déclarer plusieurs auteurs en séparant
2003-05-15 12:41:40 +02:00
les noms par des virgules.</p>
<h5>Encodage de la page</h5>
2009-09-20 12:27:14 +02:00
<pre><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +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
2005-05-20 01:24:36 +02:00
(alias iso-latin-1), l'encodage standard pour l'Europe occidentale. La
2009-09-20 12:27:14 +02:00
déclaration de l'encodage est importante pour le navigateur.</p>
2003-05-15 12:41:40 +02:00
<h5>Langue de la page</h5>
2009-09-20 12:27:14 +02:00
<pre><meta http-equiv="Content-Language" content="fr"
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<p class="continue">Quelques codes utiles
le français, <code>en</code> pour l'anglais, <code>de</code> pour
2003-05-15 12:41:40 +02:00
l'allemand, <code>es</code> pour l'espagnol, <code>it</code> pour
2009-09-20 12:27:14 +02:00
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>
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,
2009-09-20 12:27:14 +02:00
littérature engagée"
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p>Cette balise <code>meta</code> est utilisé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
2009-09-20 12:27:14 +02:00
longues. Notez au passage que vous pouvez tout à fait passer à la
2003-05-15 12:41:40 +02:00
ligne.</p>
<h3>Le corps de la page</h3>
<p>
2009-09-20 12:27:14 +02:00
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
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
2009-09-20 12:27:14 +02:00
le remplir
2003-05-15 12:41:40 +02:00
2004-02-20 14:26:19 +01:00
<div class="encadre">
2005-05-20 01:24:36 +02:00
<p>
2009-09-20 12:27:14 +02:00
<strong>Important</strong>
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>
2005-05-20 01:24:36 +02:00
<p> Les <i lang="en">block level</i> sont par exemple des
paragraphes, des titres, etc. Ils forment des
2009-09-20 12:27:14 +02:00
«
2005-05-20 01:24:36 +02:00
phrases. </p>
2009-09-20 12:27:14 +02:00
<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
2005-05-20 01:24:36 +02:00
balises qui mettent en valeur le texte, qui le renforcent. Typiquement,
2009-09-20 12:27:14 +02:00
on les trouve à l'intérieur d'une phrase.</p>
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p> La distinction peut vous paraître confuse mais vous comprendrez
mieux ensuite. Vous pouvez regarder par exemple la différence entre <a
2005-05-20 01:24:36 +02:00
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>
2009-09-20 12:27:14 +02:00
<p> Vous pouvez le copier-coller pour servir de modèle à vos pages
2005-05-20 01:24:36 +02:00
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>
2009-09-20 12:27:14 +02:00
<title><!-- insérer le titre --></title>
<meta name="author" content="<!-- Insérer votre nom -->" />
2005-05-20 01:24:36 +02:00
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
2009-09-20 12:27:14 +02:00
<meta name="keywords" lang="fr" content="<!-- Insérer les mots-clefs de votre page-->" />
2005-05-20 01:24:36 +02:00
</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
2009-09-20 12:27:14 +02:00
<h2>Hiérarchiser</h2>
2003-05-15 12:41:40 +02:00
<p>Maintenant, il s'agit de remplir un peu votre page. Pour cela, il
2009-09-20 12:27:14 +02:00
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 «
sur la page de Toto
hiérarchisées pour être lisibles. Imaginez cette page sans le moindre
titre
2003-05-15 12:41:40 +02:00
</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>,
2009-09-20 12:27:14 +02:00
<code>\subsection{}</code>...). Idem pour Word avec son système de
Titre
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p> En XHTML, c'est aussi simple
<h2>, <h3>... Ça va comme ça jusqu'à <h6>, ce qui
2004-02-20 14:26:19 +01:00
vous laisse pas mal de marge pour structurer votre
2009-09-20 12:27:14 +02:00
document. Traditionnellement, <h1> est réservé au titre de la
page (qui peut être, ou pas, le même que le <title>, à 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>
<!-- ... -->
2009-09-20 12:27:14 +02:00
<h4>Système de tous les principes de l'entendement pur</h4>
2005-05-20 01:24:36 +02:00
<!-- ... -->
2009-09-20 12:27:14 +02:00
<h5>Représentation systématique de tous les principes synthétiques</h5>
2005-05-20 01:24:36 +02:00
<!-- ... -->
2009-09-20 12:27:14 +02:00
<h6>Les postulats de la pensée empirique en général</h6>
2005-05-20 01:24:36 +02:00
<!-- ... -->
2009-09-20 12:27:14 +02:00
<h6>Réfutation de l'idéalisme</h6>
2005-05-20 01:24:36 +02:00
<!-- ... -->
<h2>Dialectique transcendantale</h2>
</pre>
2003-05-15 12:41:40 +02:00
<h2>Mettre en forme</h2>
<p>
2009-09-20 12:27:14 +02:00
On en arrive au cœur du problème
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
2009-09-20 12:27:14 +02:00
délimités par des <p> (et </p>, évidemment). Avec la
plupart des navigateurs, les paragraphes sont rendus à la manière
anglo-saxonne
généralement une espace entre deux paragraphes.
2003-05-15 12:41:40 +02:00
</p>
<p>
2009-09-20 12:27:14 +02:00
Pour aller simplement à la ligne, utilisez l'élé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
2009-09-20 12:27:14 +02:00
directement des guillemets, soit en utilisant l'élément <q>
(pour <i lang="en">quote</i>)
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
2009-09-20 12:27:14 +02:00
simplement l'élément <q>, donc mieux vaut utiliser directement
2003-05-15 12:41:40 +02:00
les guillemets.
</p>
2009-09-20 12:27:14 +02:00
<p>Au niveau bloc, c'est l'élément <blockquote> qu'il vous
faut
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
2009-09-20 12:27:14 +02:00
français, né à Paris en 1701. Il est admis à à l'Académie française en
1760. Il écrit à ce sujet
2005-05-20 01:24:36 +02:00
<blockquote>
<p>
2009-09-20 12:27:14 +02:00
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
2005-05-20 01:24:36 +02:00
</p>
</blockquote>
2003-05-15 12:41:40 +02:00
</pre>
<p class="continue">
2009-09-20 12:27:14 +02:00
<blockquote> est généralement rendu par un bloc indenté à droite
et à gauche
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 />
2009-09-20 12:27:14 +02:00
Reçu dans la troupe immortelle<br />
2003-05-15 12:41:40 +02:00
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
2009-09-20 12:27:14 +02:00
l'italique n'existent pas à proprement parler. Mais il sait mettre en
2005-05-20 01:24:36 +02:00
valeur du texte.</p>
2009-09-20 12:27:14 +02:00
<p> <strong> est utilisé 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>
2009-09-20 12:27:14 +02:00
<p> <em> (pour <i lang="en">emphasize</i>) sert également à mettre
2005-05-20 01:24:36 +02:00
en relief un membre de phrase. Il est plus faible que <strong>. Il
2009-09-20 12:27:14 +02:00
est généralement rendu par de l'<i lang="en">italique</i>.</p>
2004-02-20 14:26:19 +01:00
<p>
2009-09-20 12:27:14 +02:00
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
2004-02-20 14:26:19 +01:00
pas ici de mettre en valeur, mais d'une convention typographique. Dans
2009-09-20 12:27:14 +02:00
ce cas, vous devez utiliser l'élément <i>. Vous pouvez indiquer
2004-02-20 14:26:19 +01:00
de quelle langue il s'agit en utilisant l'attribut
2009-09-20 12:27:14 +02:00
<code>lang</code>. Exemple
2004-02-20 14:26:19 +01:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
Selon le goût italien, les pâtes doivent être cuites <i lang="it">
2004-02-20 14:26:19 +01:00
</pre>
<p class="continue">
2009-09-20 12:27:14 +02:00
Ce qui donne
2004-02-20 14:26:19 +01:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
Selon le goût italien, les pâtes doivent être cuites <i lang="it">al dente</i>.
2004-02-20 14:26:19 +01:00
</pre>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02: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
2009-09-20 12:27:14 +02:00
lang="en">define</i>) sert à indiquer un mot dont on va donner la
définition, une fois pour le reste du document. Exemple
2003-05-15 16:50:28 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
<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>
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
2009-09-20 12:27:14 +02:00
livres, de films, etc. L'élément <cite> est usuellement rendu par
de l'italique. Exemple
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
2009-09-20 12:27:14 +02:00
préformaté</a>) est également un style de texte qui sert à démarquer
un extrait de code informatique du texte normal. Exemple
2004-02-20 14:26:19 +01:00
</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
2009-09-20 12:27:14 +02:00
informations sur la bibliothèque standard d'entrées-sorties.
2004-02-20 14:26:19 +01:00
</pre>
<h4>Sigles et acronymes</h4>
<p>
2009-09-20 12:27:14 +02:00
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>
2005-05-20 01:24:36 +02:00
certains navigateurs peuvent alors afficher le contenu de
2009-09-20 12:27:14 +02:00
<code>title</code> dans une bulle d'aide. Démonstration
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
2009-09-20 12:27:14 +02:00
Commission">UNSCOM</acronym> a été créée pour assister
2005-05-20 01:24:36 +02:00
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
2009-09-20 12:27:14 +02:00
test
2004-02-20 14:26:19 +01:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
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.
2004-02-20 14:26:19 +01:00
</pre>
2003-05-15 12:41:40 +02:00
<h3>Listes</h3>
2009-09-20 12:27:14 +02:00
<p> Il y a trois sortes de listes possibles en XHTML
2005-05-20 01:24:36 +02:00
<ul>
2009-09-20 12:27:14 +02:00
<li> les listes numérotées
<li> les listes non numérotées
<li> les listes de définitions (lexiques).</li>
2005-05-20 01:24:36 +02:00
</ul>
2009-09-20 12:27:14 +02:00
<p> Toutes les listes sont des éléments blocs.</p>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<h4>Listes non numérotées</h4>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<p>Elles sont aussi dites «
navigateurs affichent des puces devant chaque entrée de
2005-05-20 01:24:36 +02:00
liste. <ul> et </ul> (pour <i lang="en">Unordered
2009-09-20 12:27:14 +02:00
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>
2005-05-20 01:24:36 +02:00
2009-09-20 12:27:14 +02:00
<p> En exemple, voici quelques armes de Goldorak
2003-05-15 12:41:40 +02:00
<pre>
2005-05-20 01:24:36 +02:00
<ul>
2009-09-20 12:27:14 +02:00
<li> mégavolts</li>
2005-05-20 01:24:36 +02:00
<li> cornofulgure</li>
2009-09-20 12:27:14 +02:00
<li> astéro-hache</li>
2005-05-20 01:24:36 +02:00
</ul>
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p class="continue">Ce qui donne
2003-05-15 12:41:40 +02:00
<ul>
2009-09-20 12:27:14 +02:00
<li> mégavolts</li>
2003-05-15 12:41:40 +02:00
<li> cornofulgure</li>
2009-09-20 12:27:14 +02:00
<li> astéro-hache</li>
2003-05-15 12:41:40 +02:00
</ul>
2009-09-20 12:27:14 +02:00
<h4>Listes numérotées</h4>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<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>
2003-05-15 12:41:40 +02:00
</p>
<pre>
2005-05-20 01:24:36 +02:00
<ol type="i">
2009-09-20 12:27:14 +02:00
<li> mégavolts</li>
2005-05-20 01:24:36 +02:00
<li> cornofulgure</li>
2009-09-20 12:27:14 +02:00
<li> astéro-hache</li>
2005-05-20 01:24:36 +02:00
</ol>
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p class="continue">Ce qui donne
2003-05-15 12:41:40 +02:00
<ol style="list-style-type: lower-roman;">
2009-09-20 12:27:14 +02:00
<li> mégavolts</li>
2003-05-15 12:41:40 +02:00
<li> cornofulgure</li>
2009-09-20 12:27:14 +02:00
<li> astéro-hache</li>
2003-05-15 12:41:40 +02:00
</ol>
2009-09-20 12:27:14 +02:00
<p>Pour changer de numérotations, changez la valeur de
<code>type</code>
caractères alphabétiques minuscules, A pour les majuscules.</p>
2003-05-15 12:41:40 +02:00
<h4>Lexiques</h4>
<p>
2009-09-20 12:27:14 +02:00
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
2005-05-20 01:24:36 +02:00
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>
2009-09-20 12:27:14 +02:00
<dd>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</dd>
2003-05-15 12:41:40 +02:00
2005-05-20 01:24:36 +02:00
<dt>Fun machine</dt>
2009-09-20 12:27:14 +02:00
<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>
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>
2009-09-20 12:27:14 +02:00
<p class="continue">Ce qui donne
2003-05-15 12:41:40 +02:00
<dl>
<dt>Amazon</dt>
2009-09-20 12:27:14 +02:00
<dd>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</dd>
2003-05-15 12:41:40 +02:00
<dt>Fun machine</dt>
2009-09-20 12:27:14 +02:00
<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 à
2003-05-15 12:41:40 +02:00
l'Amazon.</dd>
</dl>
2009-09-20 12:27:14 +02:00
<h3><a name="pre">Texte préformaté</a></h3>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<p>On utilise l'élément <pre> pour du texte préformaté au niveau
bloc. Différences avec du texte normal
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
2005-05-20 01:24:36 +02:00
informatique. </p>
<p> Attention toutefois, <pre> n'est pas l'environnement
2009-09-20 12:27:14 +02:00
<code>verbatim</code> de LaTeX
2005-05-20 01:24:36 +02:00
cette documentation, par exemple, on a recours aux <a
2009-09-20 12:27:14 +02:00
href="#entities">entités</a> pour représenter <, > et &.
2003-05-15 12:41:40 +02:00
</p>
2009-09-20 12:27:14 +02:00
<p class="continue">Par exemple, si je veux afficher un programme conçu
en langage
suivant
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>
2009-09-20 12:27:14 +02:00
<p class="continue">Cela sera affiché de la façon suivante
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">
2009-09-20 12:27:14 +02:00
(pour ceux qui ne connaissent pas le langage
exécuter ce programme en recopiant ces lignes dans un fichier
<code>hello.c</code>
<code>./a.out</code> et regardez le résultat).
2005-05-20 01:24:36 +02:00
</p>
2009-09-20 12:27:14 +02:00
<p>Pour citer du code en <i lang="en">inline</i>, utilisez la bien-nommée
2005-05-20 01:24:36 +02:00
balise <code>.
2003-05-15 12:41:40 +02:00
</p>
<h2>Images</h2>
<p>
2009-09-20 12:27:14 +02:00
On se sert de l'élément <img
sûr) et de ses attributs. Le principal attribut est
<code>src</code>
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
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +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
2009-09-20 12:27:14 +02:00
exemple
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +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
2009-09-20 12:27:14 +02:00
raison quelconque l'image ne peut pas être téléchargée
2005-05-20 01:24:36 +02:00
alternatif sert, en particulier, pour les non-voyants qui disposent de
2009-09-20 12:27:14 +02:00
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>
2003-05-15 12:41:40 +02:00
</p>
<pre>
2009-09-20 12:27:14 +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>
2009-09-20 12:27:14 +02:00
<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
2005-05-20 01:24:36 +02:00
<code>alt=""</code>.</p>
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<p>Les formats les plus couramment utilisés pour le Web sont le JPEG,
2003-05-15 12:41:40 +02:00
en <code>.jpg</code> et le GIF, en <code>.gif</code>
2009-09-20 12:27:14 +02:00
—
2003-05-15 12:41:40 +02:00
libre, et moins bon techniquement. JPEG est un format qui est plus
2009-09-20 12:27:14 +02:00
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.
2003-05-15 12:41:40 +02:00
</p>
<h2>Tableaux</h2>
<p>
2009-09-20 12:27:14 +02:00
Les tableaux sont décrits par l'élément <table>. C'est l'un des
chapitres les plus complexes du XHTML
2005-05-20 01:24:36 +02:00
nombreuses.
2003-05-15 12:41:40 +02:00
</p>
<h3>Un tableau simple</h3>
2009-09-20 12:27:14 +02:00
<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
2005-05-20 01:24:36 +02:00
<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>
2009-09-20 12:27:14 +02:00
<p class="continue">Ce qui donne
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>
2009-09-20 12:27:14 +02:00
<p class="continue">Pas très croquignolet, hein
2003-05-15 12:41:40 +02:00
2009-09-20 12:27:14 +02:00
<h3>Un tableau plus évolué</h3>
2003-05-15 12:41:40 +02:00
<p>
2009-09-20 12:27:14 +02:00
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>).
2003-05-15 12:41:40 +02:00
</p>
<p class="continue">
2009-09-20 12:27:14 +02:00
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.
2003-05-15 12:41:40 +02:00
</p>
<p class="continue">
2009-09-20 12:27:14 +02:00
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).
2003-05-15 12:41:40 +02:00
</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>
2009-09-20 12:27:14 +02:00
<p class="continue">Donc
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
2009-09-20 12:27:14 +02:00
<p>Le meilleur pour la fin, les liens
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
2005-05-20 01:24:36 +02:00
lang="en">inline</i>), suivi d'attributs.
2003-05-15 12:41:40 +02:00
</p>
<h3>Lien simple</h3>
2009-09-20 12:27:14 +02:00
<p>Le lien de base utilise l'attribut href
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +02:00
Retourner au <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p class="continue">donne ainsi
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +02:00
Retourner au <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.
2003-05-15 12:41:40 +02:00
</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
2009-09-20 12:27:14 +02:00
relatifs à l'arborescence de votre site. Admettons que vous ayez dans
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
2009-09-20 12:27:14 +02:00
faire un lien dessus, depuis la page d'accueil, ça donnera
2003-05-15 12:41:40 +02:00
</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>
2009-09-20 12:27:14 +02:00
<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.
2003-05-15 12:41:40 +02:00
</p>
<p>
2009-09-20 12:27:14 +02:00
On commence par définir les ancres, c'est-à-dire les endroits vers
2005-05-20 01:24:36 +02:00
lesquels on veut pointer. On utilise l'attribut <code>name</code> de
2009-09-20 12:27:14 +02:00
l'élément <a>
2003-05-15 12:41:40 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
Les <a name="olm">Olmèques</a> ont véritablement
existé. C'est la première des grandes civilisations précolombiennes...
2003-05-15 12:41:40 +02:00
</pre>
<p class="continue">Quand vous lisez le document avec un navigateur,
2009-09-20 12:27:14 +02:00
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>
2003-05-15 12:41:40 +02:00
<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
2009-09-20 12:27:14 +02:00
<code>#</code>
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +02:00
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>.
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
2009-09-20 12:27:14 +02:00
même depuis un autre fichier
2003-05-15 12:41:40 +02:00
<pre>
2009-09-20 12:27:14 +02:00
Voir <a href="citesdor.html#olm">l'histoire des Olmèques</a>.
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<h3>Liens spéciaux</h3>
2003-05-15 12:41:40 +02:00
<p>
2009-09-20 12:27:14 +02:00
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
2005-05-20 01:24:36 +02:00
<a> et son attribut <code>href</code>. Seulement, le protocole du
2009-09-20 12:27:14 +02:00
lien change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez
2005-05-20 01:24:36 +02:00
aussi utiliser le protocole <code>mailto</code>, qui est le protocole
2009-09-20 12:27:14 +02:00
des courriers électroniques.
2003-05-15 12:41:40 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
Écrivez-moi
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>
2009-09-20 12:27:14 +02:00
<div class="attention">Donner une adresse «
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
2003-05-15 12:41:40 +02:00
pion aux robots collecteurs d'adresses.
</div>
<p>
2009-09-20 12:27:14 +02:00
Les <a href="#entities">entités</a> dont vous avez besoin en l'espèce
2003-05-15 12:41:40 +02:00
sont <code>&#64;</code> pour une arobase (@) ou encore
<code>&#46;</code> pour un point (.) et <code>&#45;</code>
2009-09-20 12:27:14 +02:00
pour un tiret (-). Ce qui donne
2003-05-15 12:41:40 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
Mon adresse
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p>Complètement illisible, on est bien d'accord
2003-05-15 12:41:40 +02:00
le robot collecteur d'adresses. En revanche, un lecteur normal passant
2009-09-20 12:27:14 +02:00
par un navigateur verra ceci
2003-05-15 12:41:40 +02:00
</p>
<pre>
2009-09-20 12:27:14 +02:00
Mon adresse
2003-05-15 12:41:40 +02:00
</pre>
2009-09-20 12:27:14 +02:00
<p>Vous pouvez utiliser ce systè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
2009-09-20 12:27:14 +02:00
capable) le message dont vous avez donné le message-ID, ou le FTP...
2003-05-15 12:41:40 +02:00
</p>
2005-05-20 09:00:49 +02:00
<h2>Le validateur du W3C</h2>
2003-05-15 12:41:40 +02:00
<p>
2009-09-20 12:27:14 +02:00
Vous avez fini de taper votre première page XHTML. Vous vous êtes bien
relu. Il vous reste une dernière étape
validateur XHTML. Il vous permettra de voir si vous avez bien refermé
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
2009-09-20 12:27:14 +02:00
est bon ou s'il reste quelques corrections à faire...
2003-05-15 12:41:40 +02:00
</p>
2004-02-20 14:26:19 +01:00
<div class="attention">
2009-09-20 12:27:14 +02:00
<strong>Attention</strong>
2004-02-20 14:26:19 +01:00
correction <em>formelle</em> de votre code. En clair, il peut vous
dire que votre fichier est <em>syntaxiquement</em> correct, mais pas
2009-09-20 12:27:14 +02:00
s'il est <em>sémantiquement</em> correct.
2004-02-20 14:26:19 +01:00
</div>
2005-05-20 09:00:49 +02:00
<p>
Si le code de votre page n'est pas correct, le validateur vous
2009-09-20 12:27:14 +02:00
l'indiquera, en vous précisant quelles sont les lignes incriminées dans
2005-05-20 09:00:49 +02:00
votre fichier XHTML, et la nature de l'erreur. En suivant ces
instructions, vous pourrez corriger votre code.
</p>
<h3>Le label</h3>
<p>
2009-09-20 12:27:14 +02:00
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
2005-05-20 09:00:49 +02:00
</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>
2009-09-20 12:27:14 +02:00
<p> Il peut être très utile de suivre ce conseil. Vous aurez ainsi dans
votre page le logo suivant
2005-05-20 09:00:49 +02:00
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" />
</p>
<p class="continue">
2009-09-20 12:27:14 +02:00
ce qui présente les avantages suivants
2005-05-20 09:00:49 +02:00
</p>
<ul>
<li> vos lecteurs peuvent voir que vous respectez les normes et les
2009-09-20 12:27:14 +02:00
promouvez
<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>
2005-05-20 09:00:49 +02:00
</ul>
2009-09-20 12:27:14 +02:00
<h3>Pourquoi respecter les normes
2005-05-20 09:00:49 +02:00
<p>
Nous vous rappelons que les respect des normes n'est pas seulement une
2009-09-20 12:27:14 +02:00
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
2005-05-20 09:00:49 +02:00
href="http://www.accessiweb.org/">AccessiWeb</a>.
</p>
2009-09-20 12:27:14 +02:00
<div class="metainformation">Auteurs
2009-09-27 22:00:55 +02:00
Baptiste Mélès (XHTML). <date value="from git" /></div>
2003-05-15 12:41:40 +02:00
</body>
2003-06-17 01:46:32 +02:00
</html>
