Ajout du tutorial HTML et un index général.
This commit is contained in:
mlnguyen
parent
eb9645be43
commit
c8c63c8368
2 changed files with 1005 additions and 0 deletions
817
internet/web/html/bases.tml
Normal file
817
internet/web/html/bases.tml
Normal file
|
|
@ -0,0 +1,817 @@
|
|||
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||||
<!DOCTYPE html
|
||||
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
||||
"tuteurs://DTD/tml.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Bases</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Tutorial HTML : les bases</h1>
|
||||
|
||||
|
||||
<h2>Principes généraux</h2>
|
||||
|
||||
<p>
|
||||
Le HTML est le langage des pages Web. Ce n'est pas un langage de
|
||||
programmation, mais plutôt un langage de mise en forme de données. Une
|
||||
page Web décrit une structure statique, tandis qu'un programme est un
|
||||
processus dynamique. « HTML » se prononce H-T-M-L, mais vous pouvez
|
||||
aussi dire « chteumeuleu » :-)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le HTML sert à définir la structure logique d'un document, permettant
|
||||
ensuite à un navigateur (Internet Explorer, Netscape, Mozilla, Opera,
|
||||
etc.) de rendre visuellement le document. Pour des raisons évidentes
|
||||
de compatibilité, le HTML possède une norme, rédigée par le World Wide
|
||||
Web Consortium. Nous en sommes actuellement à <a
|
||||
href="http://www.w3.org/TR/html4/">HTML 4</a>.
|
||||
</p>
|
||||
|
||||
<div class="attention">Le HTML normalement ne s'occupe que de définir
|
||||
la structure logique de votre document. Pour le reste (aspect visuel
|
||||
agréable : couleurs, tailles des fontes, etc.), c'est le domaine des
|
||||
feuilles de style, dont le tutorial va venir.
|
||||
</div>
|
||||
|
||||
<p>L'élément de base d'un site est la page. C'est un fichier dont
|
||||
l'extension est normalement <code>.html</code> (ou <code>.htm</code>
|
||||
si votre système d'exploitation vous impose cette limitation) et qui
|
||||
contient du code HTML.
|
||||
</p>
|
||||
|
||||
<h3>Vocabulaire : éléments, attributs</h3>
|
||||
|
||||
<p>
|
||||
Le HTML utilise des balises (aussi appelées « éléments ») pour
|
||||
distinguer les éléments logiques de la page. Toute balise est de forme
|
||||
<TAGADA>, avec un < et un >. Les balises se referment avec
|
||||
</TAGADA>, / étant l'élément fermant. Les balises acceptent
|
||||
parfois des options, qu'on appelle des « attributs » : dans
|
||||
<TAGADA TYPE="plouf">, TAGADA est l'élément, TYPE l'attribut, et
|
||||
« plouf » la valeur de l'attribut.
|
||||
</p>
|
||||
|
||||
<h3>Casse</h3>
|
||||
|
||||
<p>
|
||||
Les balises HTML peuvent s'écrire aussi bien en majuscules qu'en
|
||||
minuscules. Pour des raisons de lisibilité, certains préfèrent les
|
||||
majuscules. C'est ce que nous utiliserons ici. Attention néanmoins,
|
||||
le XHTML, une forme avancée de langage de description, n'utilise que
|
||||
les minuscules. Peut-être préférerez-vous en prendre dès aujourd'hui
|
||||
l'habitude.
|
||||
</p>
|
||||
|
||||
<h3>Commentaires</h3>
|
||||
|
||||
<p>Les commentaires s'insèrent entre <!-- et -->. Attention, à
|
||||
l'intérieur de commentaires, il vaut mieux ne pas utiliser de doubles
|
||||
tirets (--). On ne peut pas placer de commentaires à l'intérieur d'un
|
||||
élément.
|
||||
</p>
|
||||
|
||||
<h3>Syntaxe générale</h3>
|
||||
|
||||
<div class="attention">Sauf rares exceptions, toute balise ouverte
|
||||
doit être refermée. Toute partie de la page doit être contenue dans
|
||||
une balise.</div>
|
||||
|
||||
<p>Les balises doivent être ouvertes et refermées dans l'ordre. Faites
|
||||
spécialement attention dans le cadre de balises imbriquées. Ainsi,
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<p>Je vous préviens tout de suite, c'est <em>non.</p></em>
|
||||
</pre>
|
||||
|
||||
<p class="continue">n'est pas syntaxiquement correct. Il faut refermer
|
||||
<em> avant <p>.</p>
|
||||
|
||||
|
||||
<h3><a name="entities">Entités HTML et Unicode</a></h3>
|
||||
|
||||
<p>
|
||||
Vous avez parfois besoin de cracatères spéciaux, qui ne peuvent pas
|
||||
être (du moins facilement) saisis directement au clavier. Pour cela,
|
||||
le HTML a défini des <em>entités</em>, qui par convention représentent
|
||||
ces caractères. Par exemple, le symbole euro (€) est
|
||||
&euro;. En plus de ces entités HTML (dont vous pouvez trouver la
|
||||
<a
|
||||
href="http://www.eleves.ens.fr:8080/home/madore/computers/unicode/htmlent.html">liste</a>
|
||||
chez David Madore), vous disposez des entités Unicode. <a
|
||||
href="http://www.unicode.org">Unicode</a> est une convention dont le
|
||||
but est de représenter tous les langages du monde. Ainsi, vous écrirez
|
||||
correctement le nom du compositeur Antonín Dvořák en utilisant
|
||||
l'entité Unicode du r caron, à savoir &#345; (ř).
|
||||
</p>
|
||||
|
||||
<h2>Le squelette d'une page</h2>
|
||||
|
||||
<p>Toute page HTML est contenue entre deux balises <HTML>.</p>
|
||||
|
||||
<h3>Le DTD</h3>
|
||||
|
||||
<p>
|
||||
Toute page HTML doit commencer par la déclaration du DTD (<em
|
||||
lang="en">Document Type Definition</em>), qui précise au navigateur
|
||||
quelle version de HTML vous utilisez.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le DTD le plus fréquent à l'heure actuelle est celui du HTML 4
|
||||
transitionnel (le « transitionnel » veut dire que vous utiliserez des
|
||||
éléments considérés comme obsolètes mais qui sont encore
|
||||
supportés) :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
</pre>
|
||||
|
||||
<p class="continue">Il existe d'autres DTD, tel que celui pour les
|
||||
pages utilisant des <em lang="en">frames</em> (alias « cadres ») :</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
|
||||
"http://www.w3.org/TR/html4/frameset.dtd">
|
||||
</pre>
|
||||
|
||||
<p class="continue">
|
||||
Pour l'instant, notre page-squelette ressemble donc à ceci :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<HTML>
|
||||
|
||||
<!-- Ce sont des commentaires. Ils sont complètement ignorés par
|
||||
<!-- les navigateurs. Sinon, ici se trouve normalement le corps de
|
||||
<!-- votre page. -->
|
||||
|
||||
</HTML>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>Les en-têtes</h3>
|
||||
|
||||
<p>Le rôle des en-têtes dans une page HTML (comme dans un courrier
|
||||
électronique) est de donner des méta-informations plus ou moins
|
||||
importantes. 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 ?).
|
||||
</p>
|
||||
|
||||
<h4>Le titre</h4>
|
||||
|
||||
<p>La plus importante des en-têtes est... le titre de la page. Dans un
|
||||
navigateur graphique (Internet Explorer, Mozilla, etc.) il est affiché
|
||||
dans la barre de titre. Il est également utilisé par les moteurs de
|
||||
recherche. Un bon titre est informatif (évitez les jeux de mots nazes)
|
||||
tout en restant relativement court. Il se déclare dans l'élément
|
||||
<TITLE> qui est <em>obligatoire</em>. Ainsi, Jean-Paul Sartre
|
||||
pourra utiliser comme titre de sa page d'accueil :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<TITLE>Page Web de Jean-Paul Sartre</TITLE>
|
||||
</pre>
|
||||
|
||||
<h4>Les balises META</h4>
|
||||
|
||||
<p>
|
||||
Elles sont facultatives, mais importantes à la fois pour le navigateur
|
||||
qui a des renseignements sur la manière dont afficher la page, et pour
|
||||
les moteurs de recherche, qui s'en servent pour indexer vos
|
||||
pages. Nous vous en présentons quelques-unes.
|
||||
</p>
|
||||
|
||||
<div class="attention">Les balises <code>META</code> sont parmi les
|
||||
rares balises qui peuvent ne pas être refermées.</div>
|
||||
|
||||
<h5>Auteur de la page</h5>
|
||||
|
||||
<pre>
|
||||
<META NAME="author" CONTENT="Jean-Paul Sartre">
|
||||
</pre>
|
||||
|
||||
<p class="continue">Vous pouvez déclarer plusieurs auteurs en séparant
|
||||
les noms par des virgules.</p>
|
||||
|
||||
<h5>Encodage de la page</h5>
|
||||
|
||||
<pre><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"> </pre>
|
||||
|
||||
<p class="continue">Ceci déclare que votre page est du HTML et que
|
||||
l'encodage est l'iso-8859-1 (alias iso-latin-1), l'encodage standard
|
||||
pour l'Europe occidentale. La déclaration de l'encodage est importante
|
||||
pour le navigateur.</p>
|
||||
|
||||
<h5>Langue de la page</h5>
|
||||
|
||||
<pre><META HTTP-EQUIV="Content-Language" CONTENT="fr"></pre>
|
||||
|
||||
<p class="continue">Quelques codes utiles : <code>fr</code> pour
|
||||
le français, <code>en</code> pour l'anglais, <code>de</code> pour
|
||||
l'allemand, <code>es</code> pour l'espagnol, <code>it</code> pour
|
||||
l'italien, <code>ru</code> pour le russe. Déclarer la langue utilisée
|
||||
est utile pour les synthétiseurs vocaux des navigateurs pour aveugles
|
||||
(qui en déduisent comment prononcer) comme pour les navigateurs
|
||||
standards qui peuvent en déduire, par exemple, s'il faut utiliser des
|
||||
guillemets anglo-saxons ("") ou français (« »).</p>
|
||||
|
||||
<h5>Mots clefs</h5>
|
||||
|
||||
<pre>
|
||||
<META NAME="keywords" LANG="fr" CONTENT="Philosophie, existentialisme,
|
||||
littérature engagée">
|
||||
</pre>
|
||||
|
||||
<p>Cette balise <code>META</code> est utilisée par certains moteurs de
|
||||
recherche pour indexer les pages. Ne mettez que les mots-clefs les
|
||||
plus significatifs, les moteurs n'aiment pas les listes trop
|
||||
longues. Notez au passage que vous pouvez tout à fait passer à la
|
||||
ligne.</p>
|
||||
|
||||
<h3>Le corps de la page</h3>
|
||||
|
||||
<p>
|
||||
Voilà, on en a fini avec les en-têtes (on n'oublie pas le
|
||||
</HEAD> à la fin). On passe au cœur de votre page : ce que
|
||||
le lecteur va voir <em>via</em> son navigateur.
|
||||
</p>
|
||||
|
||||
<p>Le corps de la page est contenu entre balises <BODY>. Comment
|
||||
le remplir ? Vous le verrez dans les lignes suivantes.</p>
|
||||
|
||||
<div class="encadre">Pour tous les éléments de <BODY> il y a une
|
||||
distinction importante entre les balises dites « <em>block
|
||||
level</em> » et les balises « <em>inline level</em> ». Les <em>block
|
||||
level</em> sont par exemple des paragraphes, des titres, etc. Ils
|
||||
forment des blocs, quoi. Les éléments <em>inline</em> sont plutôt de
|
||||
la mise en forme, ils s'appliquent à l'intérieur des blocs. C'est le
|
||||
cas des balises qui mettent en valeur le texte, qui le renforcent. La
|
||||
distinction peut vous paraître confuse mais vous comprendrez mieux
|
||||
ensuite. Vous pouvez regarder par exemple la différence entre <a
|
||||
href="#quote">citation <em>inline</em> et bloc</a>.
|
||||
</div>
|
||||
|
||||
<h3>Squelette entier</h3>
|
||||
|
||||
<p>
|
||||
Vous pouvez le copier-coller pour servir de modèle à vos pages Web.</p>
|
||||
|
||||
<pre>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE><!-- insérer le titre --></TITLE>
|
||||
<META NAME="author" CONTENT="<!-- Insérer votre nom -->">
|
||||
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
|
||||
<META HTTP-EQUIV="Content-Language" CONTENT="fr">
|
||||
<META NAME="keywords" LANG="fr" CONTENT="<!-- Insérer les mots-clefs de votre page-->">
|
||||
</HEAD>
|
||||
|
||||
<BODY>
|
||||
|
||||
<!-- Ici c'est le corps de la page -->
|
||||
|
||||
</BODY>
|
||||
</HTML>
|
||||
</pre>
|
||||
|
||||
<h2>Hiérarchiser</h2>
|
||||
|
||||
<p>Maintenant, il s'agit de remplir un peu votre page. Pour cela, il
|
||||
faut réfléchir un peu avant et la structurer au moyen de titres
|
||||
hiérarchisés. En effet, dès que la page dépasse les « vous êtes bien
|
||||
sur la page de Toto », les informations ont besoin d'être
|
||||
hiérarchisées pour être lisibles. Imaginez cette page sans le moindre
|
||||
titre !
|
||||
</p>
|
||||
|
||||
<p>Si vous avez fait du LaTeX, vous connaissez ce genre de chose
|
||||
(\chapter{}, \section{}, \subsection{}...). Idem pour MS Word avec son
|
||||
système de Titre 1, Titre 2, etc. En HTML, c'est aussi simple :
|
||||
<H1>, <H2>, <H3>... Ça va comme ça jusqu'à
|
||||
<H6>, ce qui vous laisse pas mal de marge pour structurer votre
|
||||
document. Traditionnellement, <h1> est réservé au titre de la
|
||||
page (qui peut être, ou pas, le même que le <TITLE>, à vous de
|
||||
voir).
|
||||
</p>
|
||||
|
||||
<h2>Mettre en forme</h2>
|
||||
|
||||
<p>
|
||||
On en arrive au cœur du problème : mettre en forme le
|
||||
texte.
|
||||
</p>
|
||||
|
||||
<h3>Paragraphes et sauts de ligne</h3>
|
||||
|
||||
<p>
|
||||
La plus grande partie d'un texte, habituellement, c'est... du
|
||||
texte. Des paragraphes de texte. En HTML, les paragraphes sont
|
||||
délimités par des <P> (et </P>, évidemment). Avec la
|
||||
plupart des navigateurs, les paragraphes sont rendus à la manière
|
||||
anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a
|
||||
généralement un espace entre deux paragraphes.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Pour simplement aller à la ligne, utilisez l'élément <BR>, l'un
|
||||
des rares à ne pas devoir être refermé.
|
||||
</p>
|
||||
|
||||
<h3><a name="quote">Citations</a></h3>
|
||||
|
||||
<p>
|
||||
Vous pouvez citer au niveau <em>inline</em>, soit en utilisant
|
||||
directement des guillemets, soit en utilisant l'élément <Q>
|
||||
(pour <em>quote</em>) :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<Q>Delenda Carthago</Q>, comme disait le grand Caton...
|
||||
</pre>
|
||||
|
||||
|
||||
<p class="continue"> Au passage, Internet Explorer ignore purement et
|
||||
simplement l'élément <Q>, donc mieux vaut utiliser directement
|
||||
les guillemets.
|
||||
</p>
|
||||
|
||||
<p>Au niveau bloc, c'est l'élément <BLOCKQUOTE> qu'il vous
|
||||
faut :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<P>Charles-Marie de La Condamine est un savant et explorateur
|
||||
français, né à Paris en 1701. Il est admis à à l'Académie française en
|
||||
1760. Il écrit à ce sujet :</P>
|
||||
|
||||
<BLOCKQUOTE>
|
||||
<P>
|
||||
La Condamine est aujourd'hui<BR>
|
||||
Reçu dans la troupe immortelle<BR>
|
||||
Il est bien sourd, tant mieux pour lui,<BR>
|
||||
Mais non muet, tant pis pour elle.<BR>
|
||||
</P>
|
||||
</BLOCKQUOTE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">
|
||||
<BLOCKQUOTE> est généralement rendu par un bloc indenté à droite
|
||||
et à gauche :
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
La Condamine est aujourd'hui<br />
|
||||
Reçu dans la troupe immortelle<br />
|
||||
Il est bien sourd, tant mieux pour lui,<br />
|
||||
Mais non muet, tant pis pour elle.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<h3>Styles de texte</h3>
|
||||
|
||||
<h4>Gras et italique</h4>
|
||||
|
||||
<p>
|
||||
Le HTML ne se soucie pas du rendu visuel. Pour lui, le gras et
|
||||
l'italique n'existent pas à proprement parler. Mais il sait mettre en
|
||||
valeur du texte. <STRONG> est utilisé pour renforcer un membre
|
||||
de phrase, insister sur son importance. Il est donc souvent rendu par
|
||||
du <strong>gras</strong> par les navigateurs. <EM> (pour
|
||||
<em>emphasize</em>) sert également à mettre en relief un membre de
|
||||
phrase. Il est plus faible que <STRONG>. Il est généralement
|
||||
rendu par de l'<em>italique</em>.</p>
|
||||
|
||||
<h4>Autres styles</h4>
|
||||
|
||||
<p>
|
||||
Le HTML vous permet de structurer encore davantage vos documents,
|
||||
essentiellement les documents techniques. Il existe par exemple les
|
||||
éléments DFN (pour <i lang="en">define</i>) pour les définitions, CITE
|
||||
pour les citations de titres de livres, de films, etc. CODE (que vous
|
||||
verrez dans la section du <a href="#pre">texte préformaté</a> est
|
||||
également un style de texte.
|
||||
</p>
|
||||
|
||||
<h3>Listes</h3>
|
||||
|
||||
<p>
|
||||
Il y a 3 sortes de listes possibles en HTML. Les listes numérotées,
|
||||
les listes non numérotées et les listes de définitions
|
||||
(lexiques). Toutes les listes sont des éléments blocs.
|
||||
</p>
|
||||
|
||||
<h4>Listes non numérotées</h4>
|
||||
|
||||
<p>Elles sont aussi dites « listes à puces » car souvent les
|
||||
navigateurs affichent des puces devant chaque entrée de
|
||||
liste. <UL> et </UL> (pour <i lang="en">Unordered
|
||||
Lists</i>) marquent le début et la fin d'une liste, <LI> et
|
||||
</LI> le début et la fin d'une entrée de liste. Exemple,
|
||||
quelques armes de Goldorak </p>
|
||||
|
||||
<pre>
|
||||
<UL>
|
||||
<LI> mégavolts</LI>
|
||||
<LI> cornofulgure</LI>
|
||||
<LI> astéro-hache</LI>
|
||||
</UL>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<ul>
|
||||
<li> mégavolts</li>
|
||||
<li> cornofulgure</li>
|
||||
<li> astéro-hache</li>
|
||||
</ul>
|
||||
|
||||
<h4>Listes numérotées</h4>
|
||||
|
||||
<p>Même principe, avec <OL> (<i lang="en">Ordered Lists</i>) à
|
||||
la place de <UL>. La numérotation se fera par défaut en chiffres
|
||||
arabes (1, 2, 3...). Vous pouvez changer le type de numérotation, en
|
||||
chiffres romains ou en caractères alphabétiques (a, b, c...) grâce à
|
||||
l'attribut TYPE :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<OL TYPE="i">
|
||||
<LI> mégavolts</LI>
|
||||
<LI> cornofulgure</LI>
|
||||
<LI> astéro-hache</LI>
|
||||
</OL>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<ol style="list-style-type: lower-roman;">
|
||||
<li> mégavolts</li>
|
||||
<li> cornofulgure</li>
|
||||
<li> astéro-hache</li>
|
||||
</ol>
|
||||
|
||||
<p>Pour changer de numérotations, changez la valeur de TYPE : I
|
||||
pour les chiffres romains majuscules, a pour les caractères
|
||||
alphabétiques minuscules, A pour les majuscules.</p>
|
||||
|
||||
<h4>Lexiques</h4>
|
||||
|
||||
<p>
|
||||
On utilise l'élément DL (<i lang="en">Definition list</i>). À
|
||||
l'intérieur de l'élément DL, DT (pour <i lang="em">definition
|
||||
term</i>) est une entrée du lexique, et DD (pour <i
|
||||
lang="em">definition definition</i>...) la définition associée à cette
|
||||
entrée. Admettons que vous fassiez un lexique du folklore normalien.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<DL>
|
||||
|
||||
<DT>Amazon</DT>
|
||||
<DD>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</DD>
|
||||
|
||||
<DT>Fun machine</DT>
|
||||
<DD>L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les
|
||||
doigts ou à tuer le temps en attendant de jouer à l'Amazon.</DD>
|
||||
|
||||
</DL>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<dl>
|
||||
<dt>Amazon</dt>
|
||||
<dd>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</dd>
|
||||
<dt>Fun machine</dt>
|
||||
<dd>L'autre flipper, qui ne sert comme son nom l'indique qu'à se
|
||||
dérouiller les doigts ou à tuer le temps en attendant de jouer à
|
||||
l'Amazon.</dd>
|
||||
</dl>
|
||||
|
||||
<h3>Texte préformaté</h3>
|
||||
|
||||
<p>On utilise l'élément <PRE> pour du texte préformaté au niveau
|
||||
bloc. Différences avec du texte normal : les navigateurs
|
||||
respectent toutes les espaces que vous avez indiqués et ils utilisent
|
||||
généralement une fonte à espacement fixe. Le texte préformaté peut
|
||||
être utilisé pour mettre en page un poème, par exemple, ou plus
|
||||
prosaïquement, du code informatique. Attention toutefois, PRE n'est
|
||||
pas l'environnement <code>verbatim</code> de LaTeX : le code HTML
|
||||
y est interprété. Dans cette documentation, par exemple, on a recours
|
||||
aux <a href="#entities">entités</a> pour représenter <, > et
|
||||
&.
|
||||
</p>
|
||||
|
||||
<p class="continue">Prenons un exemple bien connu de ceux qui
|
||||
connaissent (pour les littéraires, recopiez ça dans un fichier
|
||||
<code>hello.c</code>, faites <code>gcc hello.c</code> puis
|
||||
<code>./a.out</code> et regardez) :</p>
|
||||
|
||||
<pre>
|
||||
<PRE>
|
||||
main()
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
}
|
||||
</PRE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">sera rendu par :</p>
|
||||
|
||||
<pre>
|
||||
main()
|
||||
{
|
||||
printf("Hello, world!\n");
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>Pour citer du code en <em>inline</em>, utilisez la bien-nommée
|
||||
balise <CODE>
|
||||
</p>
|
||||
|
||||
<h2>Images</h2>
|
||||
|
||||
<p>
|
||||
On se sert de l'élément <IMG> (pour <em>image</em>, bien sûr) et
|
||||
de ses attributs. Cet élément n'a pas besoin d'être refermé. Le plus
|
||||
important est SRC : il permet de spécifier l'adresse où aller chercher
|
||||
l'image. Ainsi, quand on écrit son fichier
|
||||
<code>~/www/index.html</code> pour inclure une image située dans son
|
||||
répertoire <code>~/www/images/</code>, on écrira :</p>
|
||||
|
||||
<pre>
|
||||
<IMG SRC="images/monimage.jpg">
|
||||
</pre>
|
||||
|
||||
<p class="continue">On peut aussi indiquer une adresse
|
||||
<em>absolue</em> quand l'image n'est pas sur votre compte, par
|
||||
exemple :</p>
|
||||
|
||||
<pre>
|
||||
<IMG SRC="http://www.eleves.ens.fr/tuteurs/icones/note.png">
|
||||
</pre>
|
||||
|
||||
<p>Il est obligatoire d'indiquer une description de votre image, en
|
||||
guise de texte alternatif pour les navigateurs texte, ou si pour une
|
||||
raison quelconque l'image ne peut pas être téléchargée. Ce texte doit
|
||||
être court et informatif. On l'indique avec l'attribut ALT :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<IMG SRC="images/pouf.jpg" ALT="Photo de moi et mon chien Pouf en vacances">
|
||||
</pre>
|
||||
|
||||
<p class="continue">Si l'image ne joue aucun rôle sémantique (elle est
|
||||
là uniquement pour décorer, on indique <code>ALT=""</code>.</p>
|
||||
|
||||
<p>Les formats les plus couramment utilisés pour le Web sont le JPEG,
|
||||
en <code>.jpg</code> et le GIF, en <code>.gif</code>
|
||||
— utiliser de préférence le format PNG, GIF n'étant pas
|
||||
libre, et moins bon techniquement. JPEG est un format qui est plus
|
||||
adapté aux photos, GIF ou PNG sont plus adaptés aux logos et de
|
||||
manière générale aux images ayant peu de couleurs.
|
||||
</p>
|
||||
|
||||
|
||||
<h2>Tableaux</h2>
|
||||
|
||||
<p>
|
||||
Les tableaux sont décrits par l'élément <TABLE>. C'est l'un des chapitres
|
||||
les plus complexes du HTML : les possibilités sont très nombreuses.
|
||||
</p>
|
||||
|
||||
<h3>Un tableau simple</h3>
|
||||
|
||||
<p><TABLE> définit l'ensemble du tableau. À l'intérieur, il faut décrire
|
||||
les lignes du tableau et ses cellules. L'élément <TH> décrit les lignes,
|
||||
et <TD> les cellules. On déclare dans l'ordre <TABLE>, puis
|
||||
<TH> et enfin <TD>.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<TABLE>
|
||||
<TR><TD> Cellule 1 </TD><TD> Cellule 2 </TD></TR>
|
||||
<TR><TD> Cellule 3 </TD><TD> Cellule 4 </TD></TR>
|
||||
<TR><TD> Cellule 5 </TD><TD> Cellule 6 </TD></TR>
|
||||
</TABLE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Ce qui donne :</p>
|
||||
|
||||
<table>
|
||||
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
|
||||
<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
|
||||
<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
|
||||
</table>
|
||||
|
||||
<p class="continue">Pas très croquignolet, hein ?</p>
|
||||
|
||||
<h3>Un tableau plus évolué</h3>
|
||||
|
||||
<p>
|
||||
On peut déjà commencer par donner un titre à ce tableau, grâce à l'élément
|
||||
CAPTION. Le titre du tableau se place soit au début du tableau, avant la
|
||||
première ligne (avant le premier <TR>) mais dans le tableau tout de même
|
||||
(donc après la déclaration de <TABLE>).
|
||||
</p>
|
||||
|
||||
<p class="continue">
|
||||
On veut également différencier des méta-cellules, qui donnent des
|
||||
informations sur le contenu des cellules de données, des cellules de
|
||||
données à proprement parler. Les cellules de données, c'est bien sûr
|
||||
<TD>, et les méta-cellules, c'est l'élément <TH> (le H
|
||||
étant pour <i lang="en">header</i>, en-tête) qui s'en charge.
|
||||
</p>
|
||||
|
||||
<p class="continue">
|
||||
On peut aussi, pour rendre le tableau un peu plus esthétique, et plus lisible (6
|
||||
cellules ça va, mais quand vous en aurez 42...), lui donner une bordure. On
|
||||
utilise pour cela l'attribut BORDER à qui on spécifie une épaisseur en nombre de
|
||||
pixels. Généralement, BORDER=1 suffit amplement à ce que vous voulez faire
|
||||
(délimiter mieux les cellules).
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<TABLE BORDER=1>
|
||||
<CAPTION>Ceci est un tableau</CAPTION>
|
||||
<TR><TD> Colonne 1 </TD><TD> Colonne 2</TD></TR>
|
||||
<TR><TD> Cellule 1 </TD><TD> Cellule 2</TD></TR>
|
||||
<TR><TD> Cellule 3 </TD><TD> Cellule 4</TD></TR>
|
||||
<TR><TD> Cellule 5 </TD><TD> Cellule 6</TD></TR>
|
||||
</TABLE>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Donc :</p>
|
||||
|
||||
<table border="1px">
|
||||
<caption>Ceci est un tableau</caption>
|
||||
<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
|
||||
<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
|
||||
<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
|
||||
<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
|
||||
</table>
|
||||
|
||||
|
||||
<h2>Liens</h2>
|
||||
|
||||
<p>Le meilleur pour la fin, les liens ! Ce qui fait d'une page
|
||||
Web une vraie page hypertexte (le H de HTML) et pas d'un bête
|
||||
document. Les liens se décrivent avec l'élément A (qui est, bien sûr,
|
||||
<em>inline</em>), suivi d'attributs.
|
||||
</p>
|
||||
|
||||
<h3>Lien simple</h3>
|
||||
|
||||
<p>Le lien de base utilise l'attribut HREF :</p>
|
||||
|
||||
<pre>
|
||||
Retourner au <A HREF="http://www.eleves.ens.fr/">serveur des élèves</A>.
|
||||
</pre>
|
||||
|
||||
<p class="continue">donne ainsi :</p>
|
||||
|
||||
<pre>
|
||||
Retourner au <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.
|
||||
</pre>
|
||||
|
||||
<p>On peut utiliser des liens absolus, comme celui ci-dessus, qui
|
||||
donne l'ensemble de l'URL, mais aussi des liens relatifs, qui sont
|
||||
relatifs à l'arborescence de votre site. Admettons que vous ayez dans
|
||||
voter répertoire <code>~/www/</code> un répertoire <code>stage</code>
|
||||
qui contient, entre autres, le fichier <code>rapport.html</code>. Pour
|
||||
faire un lien dessus, depuis la page d'accueil, ça donnera :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Mon <A HREF="stage/rapport.html">rapport de stage</A> parle du lien
|
||||
entre les nombres p-adiques et les phases de la lune.
|
||||
</pre>
|
||||
|
||||
<h3>Ancres</h3>
|
||||
|
||||
<p>Une ancre sert à faire un lien <em>local</em>, c'est-à-dire vers un
|
||||
endroit précis du document. C'est particulièrement utile pour faire
|
||||
une table des matières avec des liens qui pointent vers les titres, ou
|
||||
encore pour faire des cross-références dans un document.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
On commence par définir les ancres, c'est-à-dire les endroits vers
|
||||
lesquels on veut pointer. On utilise l'attribut NAME de l'élément
|
||||
A :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Les <A NAME="olm">Olmèques</A> ont véritablement existé. C'est la première
|
||||
des grandes civilisations précolombiennes...
|
||||
</pre>
|
||||
|
||||
<p class="continue">Quand vous lisez le document avec un navigateur,
|
||||
l'ancre est invisible. Pour choisir le nom de l'ancre, vous avez à
|
||||
votre disposition tous les caractères alphanumériques, et mêmes les
|
||||
caractères accentués. Veuillez seulement à ne pas utiliser deux fois
|
||||
la même ancre au sein du document.</p>
|
||||
|
||||
<p>Pour faire le lien vers cette ancre, on utilise toujours l'attribut
|
||||
HREF, mais en modifiant la syntaxe avec un <code>#</code> :</p>
|
||||
|
||||
<pre>
|
||||
Esteban, Zia et Tao rencontrent alors les Olmèques, une peuplade extra-terrestre
|
||||
(voir ici la <A HREF="#olm">véritable histoire du peuple
|
||||
olmèque</A>.
|
||||
</pre>
|
||||
|
||||
<p class="continue">Vous pouvez positionner un lien vers cette ancre
|
||||
même depuis un autre fichier :</p>
|
||||
|
||||
<pre>
|
||||
Voir <A HREF="citesdor.html#olm">l'histoire des Olmèques</A>.
|
||||
</pre>
|
||||
|
||||
<h3>Liens spéciaux</h3>
|
||||
|
||||
<p>
|
||||
Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien,
|
||||
on vous envoie un courrier électronique. On utilise toujours l'élément
|
||||
A et son attribut HREF. Seulement, le protocole du lien
|
||||
change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez
|
||||
aussi utiliser le protocole mailto, qui est le protocole des courriers
|
||||
électroniques.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Écrivez-moi : <A HREF="mailto:mon.adresse@ens.fr">mon.adresse@ens.fr</A>
|
||||
</pre>
|
||||
|
||||
<p class="continue">Quand un lecteur suivra ce lien, son navigateur
|
||||
lui proposera de vous envoyer un mail.</p>
|
||||
|
||||
<div class="attention">Donner une adresse « en clair » sur son site
|
||||
est une excellente manière de recevoir du spam. Mieux vaut utiliser un
|
||||
encodage très simple, à base d'entités, qui vous permettra de damer le
|
||||
pion aux robots collecteurs d'adresses.
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Les <a href="#entities">entités</a> dont vous avez besoin en l'espèce
|
||||
sont <code>&#64;</code> pour une arobase (@) ou encore
|
||||
<code>&#46;</code> pour un point (.) et <code>&#45;</code>
|
||||
pour un tiret (-). Ce qui donne :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Mon adresse : <a href="mailto:jean&#45;paul&#46;sartre@ens.fr">jean&#45;paul&#46;sartre&#64;ens&#46;fr</a>
|
||||
</pre>
|
||||
|
||||
<p>Complètement illisible, on est bien d'accord ? C'est ce que verra
|
||||
le robot collecteur d'adresses. En revanche, un lecteur normal passant
|
||||
par un navigateur verra ceci :
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Mon adresse : <a href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
|
||||
</pre>
|
||||
|
||||
<p>Vous pouvez utiliser ce système avec d'autres protocoles, celui des
|
||||
news (<code>news</code>) pour que le navigateur affiche (s'il en est
|
||||
capable) le message dont vous avez donné le message-ID, ou le FTP...
|
||||
</p>
|
||||
|
||||
<h2>Et pour la fin</h2>
|
||||
|
||||
<p>
|
||||
Vous avez fini de taper votre première page HTML. Vous vous êtes bien
|
||||
6~relus. Il vous reste une dernière étape : passer cette page au
|
||||
validateur HTML. Il vous permettra de voir si vous avez bien refermé
|
||||
toutes vos balises dans l'ordre qu'il faut, par exemple. Il vous
|
||||
donnera aussi une garantie sur le fait que votre HTML sera lisible par
|
||||
tous les navigateurs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Il vous suffit d'aller dire coucou au <a
|
||||
href="http://validator.w3.org/">validateur du W3C</a> et de lui
|
||||
indiquer l'URL de votre page HTML, ou encore de lui indiquer le chemin
|
||||
du fichier sur votre disque dur. Vous saurez tout de suite si votre
|
||||
code est bon ou s'il reste quelques corrections à faire...
|
||||
</p>
|
||||
|
||||
<div class="metainformation">Auteur : Marie-Lan Nguyen. Dernière
|
||||
modification : 2003-05-15.</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
188
internet/web/html/index.tml
Normal file
188
internet/web/html/index.tml
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||||
<!DOCTYPE html
|
||||
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
||||
"tuteurs://DTD/tml.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Apprendre le HTML</h1>
|
||||
|
||||
<p>Si vous êtes pressé, vous pouvez aller directement lire notre <a
|
||||
href="bases.html">Tutorial HTML</a>. Pour des questions plus avancées,
|
||||
vous pouvez poser vos questions sur forum, dans le groupe
|
||||
<code>informatique.html</code>. Pour savoir comment lire forum,
|
||||
cf. nos pages <a href="&url.tuteurs;internet/forum/">Forum</a>.
|
||||
</p>
|
||||
|
||||
<h2>Qu'est-ce ?</h2>
|
||||
|
||||
<p>
|
||||
Le HTML (<em>HyperText Mark-up Language</em>) est le langage des pages
|
||||
Web. Il a été créé en 1992, et son développement a été pris en charge
|
||||
par le <a href="http://www.w3.org">W3C</a> (World Wide Web
|
||||
Consortium). À l'heure actuelle, nous en sommes à <a
|
||||
href="http://www.w3.org/TR/REC-html40/">HTML 4.01</a> qui remonte à
|
||||
fin 1999.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
La structure de base du HTML, ce sont les balises (<em
|
||||
lang="en">tags</em>) en anglais) qui définissent les éléments de la
|
||||
page Web qu'ils entourent. Voici un exemple de balise :
|
||||
</p>
|
||||
|
||||
<pre><title>Les chevaliers-paysans du lac de Paladru</title></pre>
|
||||
|
||||
<p class="continue">
|
||||
qui définit le titre d'une la page Web. Notez que les balises vont par
|
||||
paire, avec une ouvrante (<title>) et une fermante, différenciée
|
||||
par un / (</title>). Autre exemple :</p>
|
||||
|
||||
<pre><strong>Important</strong> : votre tiers provisionnel est dû pour le <dm>15 mai</em>.</pre>
|
||||
|
||||
<p class="continue">
|
||||
La balise <strong> indique que l'élément qu'elle renferme doit
|
||||
être renforcé. La plupart des navigateurs rendent ceci en mettant
|
||||
le(s) mot(s) en gras. La balise <em> (pour <em
|
||||
lang="en">emphasize</em>) indique que l'élément doit être mis en
|
||||
valeur, ce qui est généralement traduit par des italiques.</p>
|
||||
|
||||
<p>
|
||||
Le HTML peut être directement écrit avec un simple éditeur de texte
|
||||
(solution de loin préférable) ou avec des éditeurs compliqués WYSIWYG
|
||||
(<em lang="en">What You See Is What You Get</em>). C'est un langage
|
||||
facile à apprendre, à la portée du premier venu. Évidemment, plus vous
|
||||
voulez faire des choses tape-à-l'œil, plus c'est compliqué.
|
||||
</p>
|
||||
|
||||
<h2>Fond vs. forme</h2>
|
||||
|
||||
<p>
|
||||
Le principe de base du HTML est qu'il se préoccupe davantage du
|
||||
<em>contenu</em> que du <em>rendu visuel</em>. Si vous avez fait un
|
||||
peu de LaTeX, cette manière de travailler devrait vous être
|
||||
familière. Les « styles » de MS Word s'en approchent également. Vous
|
||||
définissez des titres, des éléments importants, des citations, des
|
||||
liens. Tout le côté décoratif (savoir si la police de caractères fera
|
||||
telle ou telle taille, si votre texte sera en rouge ou bleu, etc.) est
|
||||
normalement dévolu aux <a href="http://www.w3.org/Style/CSS/">feuilles
|
||||
de style</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Rappelez-vous bien que, de toute façon, les différents navigateurs (MS
|
||||
Internet Explorer, Netscape, Mozilla, Opera, lynx...) affichent de
|
||||
manière <em>différente</em> une même page : chacun a sa propre
|
||||
interprétation des normes, et ce qui marche chez l'un peut ne pas
|
||||
marcher chez l'autre. Vérifiez donc que votre site marche bien avec
|
||||
plusieurs navigateurs. Rappelez-vous aussi que beaucoup de gens
|
||||
naviguent encore sur le Web avec des machines plus très jeunes et des
|
||||
connexions modem 56k (au bureau, par exemple). Si vous mettez des
|
||||
choses sur le Web, c'est pour être lu, alors pensez à vos lecteurs qui
|
||||
ne veulent pas se taper trois plombes d'intro Flash ou trois tonnes
|
||||
d'applets Java.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Enfin, selon l'art. 2-3 de la charte d'utilisation des moyens
|
||||
informatiques de l'ENS (que vous avez signée en obtenant votre compte
|
||||
sur clipper) :
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
L'utilisation des moyens informatiques est limitée à des activités de
|
||||
recherche et d'enseignement, de développements techniques, de
|
||||
transferts de technologies, de diffusion d'informations scientifiques,
|
||||
techniques et culturelles, d'expérimentation de nouveaux services
|
||||
présentant un caractère d'innovation technique, mais également toute
|
||||
activité administrative ou de gestion découlant ou accompagnant ces
|
||||
activités.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
En théorie, votre page Web doit contenir votre mémoire de maîtrise,
|
||||
votre rapport de stage long, ce genre de choses. C'est seulement par
|
||||
tolérance que vous pouvez aussi y mettre vos photos de vacances. Vous
|
||||
n'êtes pas censés mettre des animations JavaScript, du Flash et des
|
||||
mp3 en boucle partout !
|
||||
</p>
|
||||
|
||||
<h2>Comment apprendre ?</h2>
|
||||
|
||||
<p>Plusieurs solutions existent, et vous pouvez les mélanger. Dans
|
||||
l'ordre d'apprentissage, nous vous conseillons de :</p>
|
||||
|
||||
<ul>
|
||||
<li> <strong>lire le <a href="bases.html">tutorial</a> des
|
||||
tuteurs</strong>. Il vous permettra de faire des pages simples et
|
||||
sobres. Même si vous voulez vous lancer dans quelque chose de
|
||||
compliqué, ou si vous avez décidé d'utiliser un éditeur WYSIWYG,
|
||||
lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non ?</li>
|
||||
|
||||
<li> <strong>regarder le code source d'autres pages</strong>, en
|
||||
commençant par des pages simples. Avec Mozilla, vous avez accès au
|
||||
code source en tapant <code>Ctrl-U</code>. C'est le plus souvent par
|
||||
l'imitation d'autres pages qu'on apprend.</li>
|
||||
|
||||
<li> <strong>lire les spécifications du W3C</strong>. À lire, celle du
|
||||
<a href="http://www.w3.org/TR/html4/">HTML 4.01</a>, puis celle de <a
|
||||
href="http://www.w3.org/TR/REC-CSS2/">CSS2</a>. Elles sont bien plus
|
||||
lisibles qu'il n'y paraît, mais c'est vrai que ce n'est pas le
|
||||
meilleurs moyen pour débuter.</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Liens</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
<li> le <a href="http://www.w3.org/">site Web du W3C</a> sur lequel
|
||||
plus précisément vous trouverez :
|
||||
<ul>
|
||||
|
||||
<li> la spécification de HTML 4.01, la version actuelle du HTML
|
||||
: en <a href="http://www.w3.org/TR/html4/">anglais</a> (seule
|
||||
version normative), ou la <a
|
||||
href="http://www.la-grange.net/w3c/html4.01/cover.html">traduction
|
||||
française</a></li>
|
||||
|
||||
<li> un <a href="http://validator.w3.org/">validateur HTML</a>,
|
||||
<strong>indispensable</strong> pour vérifier la correction de votre
|
||||
code</li>
|
||||
|
||||
<li> la spécification de CSS2, le langage des feuilles de style :
|
||||
en <a href="http://www.w3.org/TR/REC-CSS2/">anglais</a> (seule version
|
||||
normative) ou <a
|
||||
href="http://www.yoyodesign.org/doc/w3c/css2/cover.html">traduction
|
||||
française</a>.</li>
|
||||
|
||||
<li> un <a
|
||||
href="http://jigsaw.w3.org/css-validator/validator-uri.html">validateur
|
||||
CSS</a></li>
|
||||
<li> un <a href="http://validator.w3.org/checklink">vérificateur de liens</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li> la <a
|
||||
href="http://www.eleves.ens.fr:8080/home/madore/computers/unicode/htmlent.html">liste
|
||||
des entités HTML</a> chez David Madore, les entités sont des
|
||||
caractères spéciaux prédéfinis (pour taper le symbole € par
|
||||
exemple)</li>
|
||||
<li> la <a href="http://www.unicode.org/">page Web du Standard
|
||||
Unicode</a>, dont le but est de représenter tous les langages de la
|
||||
Terre, de l'anglais au japonais en passant par les hiéroglyphes</li>
|
||||
</ul>
|
||||
|
||||
<div class="metainformation">Auteur : Marie-Lan Nguyen. Dernière
|
||||
modification : 2003-05-14</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- LocalWords: title strong em emphasize
|
||||
-->
|
||||
Loading…
Reference in a new issue