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>
|
|
|
|
|
|
<title>Bases</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<h1>Tutorial HTML<4D>: les bases</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Principes g<>n<EFBFBD>raux</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML est le langage des pages Web. Ce n'est pas un langage de
|
|
|
|
|
|
programmation, mais plut<75>t un langage de mise en forme de donn<6E>es. Une
|
|
|
|
|
|
page Web d<>crit une structure statique, tandis qu'un programme est un
|
|
|
|
|
|
processus dynamique. <20><>HTML<4D><4C> se prononce H-T-M-L, mais vous pouvez
|
|
|
|
|
|
aussi dire <20><>chteumeuleu<65><75> :-)
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML sert <20> d<>finir la structure logique d'un document, permettant
|
|
|
|
|
|
ensuite <20> un navigateur (Internet Explorer, Netscape, Mozilla, Opera,
|
|
|
|
|
|
etc.) de rendre visuellement le document. Pour des raisons <20>videntes
|
|
|
|
|
|
de compatibilit<69>, le HTML poss<73>de une norme, r<>dig<69>e par le World Wide
|
|
|
|
|
|
Web Consortium. Nous en sommes actuellement <20> <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<EFBFBD>able<EFBFBD>: couleurs, tailles des fontes, etc.), c'est le domaine des
|
|
|
|
|
|
feuilles de style, dont le tutorial va venir.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<p>L'<27>l<EFBFBD>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<73>me d'exploitation vous impose cette limitation) et qui
|
|
|
|
|
|
contient du code HTML.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Vocabulaire<72>: <20>l<EFBFBD>ments, attributs</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML utilise des balises (aussi appel<65>es <20><><EFBFBD>l<EFBFBD>ments<74><73>) pour
|
|
|
|
|
|
distinguer les <20>l<EFBFBD>ments logiques de la page. Toute balise est de forme
|
|
|
|
|
|
<TAGADA>, avec un < et un >. Les balises se referment avec
|
|
|
|
|
|
</TAGADA>, / <20>tant l'<27>l<EFBFBD>ment fermant. Les balises acceptent
|
|
|
|
|
|
parfois des options, qu'on appelle des <20><>attributs<74><73> : dans
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<TAGADA type="plouf">, TAGADA est l'<27>l<EFBFBD>ment, <code>type</code>
|
|
|
|
|
|
l'attribut, et <20><>plouf<75><66> la valeur de l'attribut.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Casse</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Les balises HTML peuvent s'<27>crire aussi bien en majuscules qu'en
|
2003-06-11 18:26:18 +02:00
|
|
|
|
minuscules. Pour des questions de lisibilit<69>, le W3C conseille
|
|
|
|
|
|
d'<27>crire les <20>l<EFBFBD>ments en majuscule, les attributs en minuscule. C'est
|
|
|
|
|
|
ce que nous ferons ici. Attention n<>anmoins, le XHTML, une forme
|
|
|
|
|
|
avanc<EFBFBD>e de langage de description, n'utilise que les
|
|
|
|
|
|
minuscules. Peut-<2D>tre pr<70>f<EFBFBD>rerez-vous en prendre d<>s aujourd'hui
|
2003-05-15 12:41:40 +02:00
|
|
|
|
l'habitude.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
|
|
tirets (--). On ne peut pas placer de commentaires <20> l'int<6E>rieur d'un
|
|
|
|
|
|
<EFBFBD>l<EFBFBD>ment.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Syntaxe g<>n<EFBFBD>rale</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="attention">Sauf rares exceptions, toute balise ouverte
|
|
|
|
|
|
doit <20>tre referm<72>e. Toute partie de la page doit <20>tre contenue dans
|
|
|
|
|
|
une balise.</div>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Les balises doivent <20>tre ouvertes et referm<72>es dans l'ordre. Faites
|
|
|
|
|
|
sp<EFBFBD>cialement attention dans le cadre de balises imbriqu<71>es. Ainsi,
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">n'est pas syntaxiquement correct. Il faut refermer
|
|
|
|
|
|
<em> avant <p>.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3><a name="entities">Entit<69>s HTML et Unicode</a></h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Vous avez parfois besoin de cracat<61>res sp<73>ciaux, qui ne peuvent pas
|
|
|
|
|
|
<EFBFBD>tre (du moins facilement) saisis directement au clavier. Pour cela,
|
|
|
|
|
|
le HTML a d<>fini des <em>entit<69>s</em>, qui par convention repr<70>sentent
|
|
|
|
|
|
ces caract<63>res. Par exemple, le symbole euro (€) est
|
|
|
|
|
|
&euro;. En plus de ces entit<69>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<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>
|
|
|
|
|
|
|
|
|
|
|
|
<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<70>cise au navigateur
|
|
|
|
|
|
quelle version de HTML vous utilisez.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le DTD le plus fr<66>quent <20> l'heure actuelle est celui du HTML 4
|
|
|
|
|
|
transitionnel (le <20><>transitionnel<65><6C> veut dire que vous utiliserez des
|
|
|
|
|
|
<EFBFBD>l<EFBFBD>ments consid<69>r<EFBFBD>s comme obsol<6F>tes mais qui sont encore
|
|
|
|
|
|
support<EFBFBD>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 <20><>cadres<65><73>)<29>:</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 <20> 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<70>tement ignor<6F>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
|
|
|
|
|
|
<EFBFBD>lectronique) est de donner des m<>ta-informations plus ou moins
|
|
|
|
|
|
importantes. Par exemple, l'identit<69> de l'auteur, le titre de la page,
|
|
|
|
|
|
l'encodage, la langue utilis<69>e, etc. Les en-t<>tes sont d<>clar<61>es <20>
|
|
|
|
|
|
l'int<6E>rieur de l'<27>l<EFBFBD>ment <HEAD> (logique, non <20>?).
|
|
|
|
|
|
</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
|
|
|
|
|
|
<TITLE> qui est <em>obligatoire</em>. Ainsi, Jean-Paul Sartre
|
|
|
|
|
|
pourra utiliser comme titre de sa page d'accueil<69>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<TITLE>Page Web de Jean-Paul Sartre</TITLE>
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Les balises META</h4>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="attention">Les balises <code>META</code> sont parmi les
|
|
|
|
|
|
rares balises qui peuvent ne pas <20>tre referm<72>es.</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Auteur de la page</h5>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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>
|
|
|
|
|
|
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<pre><META http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> </pre>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<pre><META http-equiv="Content-Language" content="fr"></pre>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p class="continue">Quelques codes utiles : <code>fr</code> pour
|
|
|
|
|
|
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
|
|
|
|
|
|
guillemets anglo-saxons ("") ou fran<61>ais (<28><><EFBFBD>).</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h5>Mots clefs</h5>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<META name="keywords" lang="fr" content="Philosophie, existentialisme,
|
2003-05-15 12:41:40 +02:00
|
|
|
|
litt<EFBFBD>rature engag<61>e">
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Cette balise <code>META</code> est utilis<69>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 <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
|
|
|
|
|
|
</HEAD> <20> la fin). On passe au cœur de votre page<67>: 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<69>? Vous le verrez dans les lignes suivantes.</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="encadre">Pour tous les <20>l<EFBFBD>ments de <BODY> il y a une
|
|
|
|
|
|
distinction importante entre les balises dites <20><><em>block
|
|
|
|
|
|
level</em><3E><> et les balises <20><><em>inline level</em><3E><>. Les <em>block
|
|
|
|
|
|
level</em> sont par exemple des paragraphes, des titres, etc. Ils
|
|
|
|
|
|
forment des blocs, quoi. Les <20>l<EFBFBD>ments <em>inline</em> 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. 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 <em>inline</em> et bloc</a>.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Squelette entier</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Vous pouvez le copier-coller pour servir de mod<6F>le <20> 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<6E>rer le titre --></TITLE>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<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-->">
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</HEAD>
|
|
|
|
|
|
|
|
|
|
|
|
<BODY>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Ici c'est le corps de la page -->
|
|
|
|
|
|
|
|
|
|
|
|
</BODY>
|
|
|
|
|
|
</HTML>
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Si vous avez fait du LaTeX, vous connaissez ce genre de chose
|
|
|
|
|
|
(\chapter{}, \section{}, \subsection{}...). Idem pour MS<4D>Word avec son
|
|
|
|
|
|
syst<EFBFBD>me de Titre<72>1, Titre<72>2, etc. En HTML, c'est aussi simple :
|
|
|
|
|
|
<H1>, <H2>, <H3>... <20>a va comme <20>a jusqu'<27>
|
|
|
|
|
|
<H6>, ce qui vous laisse pas mal de marge pour structurer votre
|
|
|
|
|
|
document. Traditionnellement, <h1> est r<>serv<72> au titre de la
|
|
|
|
|
|
page (qui peut <20>tre, ou pas, le m<>me que le <TITLE>, <20> vous de
|
|
|
|
|
|
voir).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Mettre en forme</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
On en arrive au cœur du probl<62>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<EFBFBD>limit<EFBFBD>s par des <P> (et </P>, <20>videmment). Avec la
|
|
|
|
|
|
plupart des navigateurs, les paragraphes sont rendus <20> la mani<6E>re
|
|
|
|
|
|
anglo-saxonne : alignement sur la gauche, pas d'alin<69>a. Il y a
|
|
|
|
|
|
g<EFBFBD>n<EFBFBD>ralement un espace entre deux paragraphes.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour simplement aller <20> la ligne, utilisez l'<27>l<EFBFBD>ment <BR>, l'un
|
|
|
|
|
|
des rares <20> ne pas devoir <20>tre referm<72>.
|
|
|
|
|
|
</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'<27>l<EFBFBD>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'<27>l<EFBFBD>ment <Q>, donc mieux vaut utiliser directement
|
|
|
|
|
|
les guillemets.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Au niveau bloc, c'est l'<27>l<EFBFBD>ment <BLOCKQUOTE> qu'il vous
|
|
|
|
|
|
faut :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<P>Charles-Marie de La Condamine est un savant et explorateur
|
|
|
|
|
|
fran<EFBFBD>ais, n<> <20> Paris en 1701. Il est admis <20> <20> l'Acad<61>mie fran<61>aise en
|
|
|
|
|
|
1760. Il <20>crit <20> ce sujet :</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>
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
<BLOCKQUOTE> est g<>n<EFBFBD>ralement rendu par un bloc indent<6E> <20> droite
|
|
|
|
|
|
et <20> gauche :
|
|
|
|
|
|
</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>
|
|
|
|
|
|
Le HTML ne se soucie pas du rendu visuel. Pour lui, le gras et
|
|
|
|
|
|
l'italique n'existent pas <20> proprement parler. Mais il sait mettre en
|
|
|
|
|
|
valeur du texte. <STRONG> est utilis<69> 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 <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'<em>italique</em>.</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Autres styles</h4>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML vous permet de structurer encore davantage vos documents,
|
2003-05-15 16:50:28 +02:00
|
|
|
|
essentiellement les documents techniques. DFN (pour <i
|
|
|
|
|
|
lang="en">define</i>) sert <20> indiquer un mot dont on va donner la
|
|
|
|
|
|
d<EFBFBD>finition, une fois pour le reste du document. Exemple :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<P>On dit qu'un morphisme de sch<63>mas est <DFN><3B>tale</DFN>
|
|
|
|
|
|
lorsqu'il est <20> la fois lisse et non ramifi<66>. En fait, il suffit pour cela
|
|
|
|
|
|
qu'il soit <20> la fois <EM>plat</EM> et non ramifi<66>.</p> </pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
C'est CITE qu'il faut utiliser pour les citations de titres de
|
|
|
|
|
|
livres, de films, etc. CODE (que vous verrez dans la section du <a
|
|
|
|
|
|
href="#pre">texte pr<70>format<61></a>) est <20>galement un style de texte.
|
2003-05-15 12:41:40 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Listes</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Il y a 3 sortes de listes possibles en HTML. Les listes num<75>rot<6F>es,
|
|
|
|
|
|
les listes non num<75>rot<6F>es et les listes de d<>finitions
|
|
|
|
|
|
(lexiques). Toutes les listes sont des <20>l<EFBFBD>ments blocs.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
|
|
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. Exemple,
|
|
|
|
|
|
quelques armes de Goldorak </p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
<UL>
|
|
|
|
|
|
<LI> m<>gavolts</LI>
|
|
|
|
|
|
<LI> cornofulgure</LI>
|
|
|
|
|
|
<LI> ast<73>ro-hache</LI>
|
|
|
|
|
|
</UL>
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">Ce qui donne :</p>
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li> m<>gavolts</li>
|
|
|
|
|
|
<li> cornofulgure</li>
|
|
|
|
|
|
<li> ast<73>ro-hache</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Listes num<75>rot<6F>es</h4>
|
|
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
|
|
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>
|
|
|
|
|
|
l'attribut TYPE :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<OL type="i">
|
2003-05-15 12:41:40 +02:00
|
|
|
|
<LI> m<>gavolts</LI>
|
|
|
|
|
|
<LI> cornofulgure</LI>
|
|
|
|
|
|
<LI> ast<73>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<73>ro-hache</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
|
|
<p>Pour changer de num<75>rotations, changez la valeur de TYPE : I
|
|
|
|
|
|
pour les chiffres romains majuscules, a pour les caract<63>res
|
|
|
|
|
|
alphab<EFBFBD>tiques minuscules, A pour les majuscules.</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h4>Lexiques</h4>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
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 <20> cette
|
|
|
|
|
|
entr<EFBFBD>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<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<>rouiller les
|
|
|
|
|
|
doigts ou <20> tuer le temps en attendant de jouer <20> 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<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
|
|
|
|
|
|
|
|
|
|
<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 : les navigateurs
|
|
|
|
|
|
respectent toutes les espaces que vous avez indiqu<71>s et ils utilisent
|
|
|
|
|
|
g<EFBFBD>n<EFBFBD>ralement une fonte <20> espacement fixe. Le texte pr<70>format<61> peut
|
|
|
|
|
|
<EFBFBD>tre utilis<69> pour mettre en page un po<70>me, par exemple, ou plus
|
|
|
|
|
|
prosa<EFBFBD>quement, du code informatique. Attention toutefois, PRE n'est
|
|
|
|
|
|
pas l'environnement <code>verbatim</code> de LaTeX : le code HTML
|
|
|
|
|
|
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
|
|
|
|
|
|
&.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">Prenons un exemple bien connu de ceux qui
|
|
|
|
|
|
connaissent (pour les litt<74>raires, recopiez <20>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<6D>e
|
|
|
|
|
|
balise <CODE>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Images</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
On se sert de l'<27>l<EFBFBD>ment <IMG> (pour <em>image</em>, bien s<>r) et
|
2003-06-11 18:26:18 +02:00
|
|
|
|
de ses attributs. Cet <20>l<EFBFBD>ment n'a pas besoin d'<27>tre
|
|
|
|
|
|
referm<EFBFBD>. L'attribut plus important est <code>src</code><3E>: il permet de
|
|
|
|
|
|
sp<EFBFBD>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<EFBFBD>e dans son r<>pertoire <code>~/www/images/</code>, on <20>crira<72>:</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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
|
|
|
|
|
|
exemple :</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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
|
|
|
|
|
|
raison quelconque l'image ne peut pas <20>tre t<>l<EFBFBD>charg<72>e. Ce texte doit
|
|
|
|
|
|
<EFBFBD>tre court et informatif. On l'indique avec l'attribut ALT :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="continue">Si l'image ne joue aucun r<>le s<>mantique (elle est
|
2003-06-11 18:26:18 +02:00
|
|
|
|
l<EFBFBD> uniquement 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>
|
|
|
|
|
|
— utiliser de pr<70>f<EFBFBD>rence le format PNG, GIF n'<27>tant pas
|
|
|
|
|
|
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>
|
|
|
|
|
|
Les tableaux sont d<>crits par l'<27>l<EFBFBD>ment <TABLE>. C'est l'un des chapitres
|
|
|
|
|
|
les plus complexes du HTML<4D>: les possibilit<69>s sont tr<74>s nombreuses.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Un tableau simple</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<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 <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<74>s croquignolet, hein<69>?</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Un tableau plus <20>volu<6C></h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
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 soit au d<>but du tableau, avant la
|
|
|
|
|
|
premi<EFBFBD>re ligne (avant le premier <TR>) mais dans le tableau tout de m<>me
|
|
|
|
|
|
(donc apr<70>s la d<>claration de <TABLE>).
|
|
|
|
|
|
</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
|
|
|
|
|
|
<TD>, et les m<>ta-cellules, c'est l'<27>l<EFBFBD>ment <TH> (le H
|
|
|
|
|
|
<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>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<TABLE border=1>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
<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'<27>l<EFBFBD>ment A (qui est, bien s<>r,
|
|
|
|
|
|
<em>inline</em>), suivi d'attributs.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Lien simple</h3>
|
|
|
|
|
|
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<p>Le lien de base utilise l'attribut href :</p>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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
|
|
|
|
|
|
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, <20>a donnera<72>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
Mon <A href="stage/rapport.html">rapport de stage</A>
|
|
|
|
|
|
parle du lien entre les nombres <var>p</var>-adiques et les phases de
|
|
|
|
|
|
la lune. </pre>
|
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
|
|
|
|
|
|
encore pour faire des cross-r<>f<EFBFBD>rences dans un document.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
On commence par d<>finir les ancres, c'est-<2D>-dire les endroits vers
|
|
|
|
|
|
lesquels on veut pointer. On utilise l'attribut NAME de l'<27>l<EFBFBD>ment
|
|
|
|
|
|
A :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
Les <A name="olm">Olm<6C>ques</A> ont v<>ritablement exist<73>. C'est la premi<6D>re
|
2003-05-15 12:41:40 +02:00
|
|
|
|
des grandes civilisations pr<70>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 <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
|
|
|
|
|
|
HREF, mais en modifiant la syntaxe avec un <code>#</code> :</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
Esteban, Zia et Tao rencontrent alors les Olm<6C>ques, une peuplade
|
|
|
|
|
|
extra-terrestre (voir ici la <A href="#olm">v<>ritable histoire
|
|
|
|
|
|
du peuple olm<6C>que</A>. </pre>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
<p class="continue">Vous pouvez positionner un lien vers cette ancre
|
|
|
|
|
|
m<EFBFBD>me depuis un autre fichier :</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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>
|
|
|
|
|
|
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
|
2003-06-11 18:26:18 +02:00
|
|
|
|
A et son attribut href. Seulement, le protocole du lien
|
2003-05-15 12:41:40 +02:00
|
|
|
|
change. Auparavant c'<27>taient des liens HTTP (Web). Mais vous pouvez
|
|
|
|
|
|
aussi utiliser le protocole mailto, qui est le protocole des courriers
|
|
|
|
|
|
<EFBFBD>lectroniques.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +02:00
|
|
|
|
<EFBFBD>crivez-moi : <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>
|
|
|
|
|
|
pour un tiret (-). Ce qui donne :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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
|
|
|
|
|
|
par un navigateur verra ceci :
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
2003-06-11 18:26:18 +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
|
|
|
|
|
|
news (<code>news</code>) pour que le navigateur affiche (s'il en est
|
|
|
|
|
|
capable) le message dont vous avez donn<6E> le message-ID, ou le FTP...
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Et pour la fin</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Vous avez fini de taper votre premi<6D>re page HTML. Vous vous <20>tes bien
|
|
|
|
|
|
6~relus. Il vous reste une derni<6E>re <20>tape<70>: passer cette page au
|
|
|
|
|
|
validateur HTML. Il vous permettra de voir si vous avez bien referm<72>
|
|
|
|
|
|
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 <20> faire...
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="metainformation">Auteur : Marie-Lan Nguyen. Derni<6E>re
|
2003-06-17 01:46:32 +02:00
|
|
|
|
modification : <date value="$Date: 2003-06-16 23:46:37 $" />.</div>
|
2003-05-15 12:41:40 +02:00
|
|
|
|
|
|
|
|
|
|
</body>
|
2003-06-17 01:46:32 +02:00
|
|
|
|
</html>
|
