826 lines
No EOL
27 KiB
XML
826 lines
No EOL
27 KiB
XML
<?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, <code>type</code>
|
||
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 questions de lisibilité, le W3C conseille
|
||
d'écrire les éléments en majuscule, les attributs en minuscule. C'est
|
||
ce que nous ferons 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 class="continue">
|
||
La Condamine est aujourd'hui<br />
|
||
Reçu dans la troupe immortelle<br />
|
||
Il est bien sourd, tant mieux pour lui,<br />
|
||
Mais non muet, tant pis pour elle.
|
||
</p>
|
||
</blockquote>
|
||
|
||
<h3>Styles de texte</h3>
|
||
|
||
<h4>Gras et italique</h4>
|
||
|
||
<p>
|
||
Le 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. DFN (pour <i
|
||
lang="en">define</i>) sert à indiquer un mot dont on va donner la
|
||
définition, une fois pour le reste du document. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
<P>On dit qu'un morphisme de schémas est <DFN>étale</DFN>
|
||
lorsqu'il est à la fois lisse et non ramifié. En fait, il suffit pour cela
|
||
qu'il soit à la fois <EM>plat</EM> et non ramifié.</p> </pre>
|
||
|
||
<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é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é. L'attribut plus important est <code>src</code> : il permet de
|
||
spécifier l'adresse où aller chercher l'image. Ainsi, quand on écrit
|
||
son fichier <code>~/www/index.html</code> pour inclure une image
|
||
située dans son répertoire <code>~/www/images/</code>, on écrira :</p>
|
||
|
||
<pre>
|
||
<IMG src="images/monimage.jpg">
|
||
</pre>
|
||
|
||
<p class="continue">On peut aussi indiquer une adresse
|
||
<em>absolue</em> quand l'image n'est pas sur votre compte, par
|
||
exemple :</p>
|
||
|
||
<pre>
|
||
<IMG src="http://www.eleves.ens.fr/tuteurs/icones/note.png">
|
||
</pre>
|
||
|
||
<p>Il est obligatoire d'indiquer une description de votre image, en
|
||
guise de texte alternatif pour les navigateurs texte, ou si pour une
|
||
raison quelconque l'image ne peut pas être téléchargée. 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 <var>p</var>-adiques et les phases de
|
||
la lune. </pre>
|
||
|
||
<h3>Ancres</h3>
|
||
|
||
<p>Une ancre sert à faire un lien <em>local</em>, c'est-à-dire vers un
|
||
endroit précis du document. C'est particulièrement utile pour faire
|
||
une table des matières avec des liens qui pointent vers les titres, ou
|
||
encore pour faire des 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 : <date value="$Date: 2003-06-11 16:26:18 $" />.</div>
|
||
|
||
</body>
|
||
</html> |