948 lines
31 KiB
XML
948 lines
31 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>Tutoriel</title>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Tutoriel HTML : les bases</h1>
|
||
|
||
|
||
<h2>Principes généraux</h2>
|
||
|
||
<p>
|
||
Le <abbr title="HyperText Mark-Up Language">HTML</abbr> est le langage
|
||
des pages Web. Ce n'est pas un langage de programmation, mais 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. Vous n'avez aucunement besoin d'avoir des bases de
|
||
programmation pour écrire du HTML ! « HTML » se prononce H-T-M-L, mais
|
||
vous pouvez aussi dire « chteumeuleu » :-)
|
||
</p>
|
||
|
||
<p>
|
||
Le HTML sert à définir la <strong>structure logique</strong> d'un
|
||
document, permettant ensuite à un navigateur (Internet Explorer,
|
||
Netscape, Mozilla, Opera, etc.) de rendre visuellement le
|
||
document. Pour des raisons évidentes d'interopérabilité, le HTML
|
||
possède une norme, rédigée par le World Wide Web Consortium
|
||
(<abbr>W3C</abbr>), qui regroupe des acteurs majeurs du Web comme
|
||
Microsoft, MacroMedia (qui produit Flash), Apple, AOL, etc. Nous en
|
||
sommes actuellement à <a href="http://www.w3.org/TR/html4/">HTML
|
||
4.1</a>.
|
||
</p>
|
||
|
||
<div class="attention"><strong>Attention</strong> : le HTML ne
|
||
s'occupe que de définir la structure logique de votre document. Pour
|
||
l'aspect visuel (mise en page, couleurs, fontes, etc.), c'est le
|
||
domaine des feuilles de style, dont le <a href="css.html">tutoriel</a>
|
||
est en cours de rédaction.
|
||
</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><a name="voc">Vocabulaire : éléments, attributs</a></h3>
|
||
|
||
<p>
|
||
Le HTML utilise des <strong>balises</strong> (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
|
||
<strong>attributs</strong> : 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.
|
||
</p>
|
||
|
||
<div class="encadre">
|
||
<strong>À noter</strong> : le <abbr title="eXtended HyperText
|
||
Mark-Up Language">XHTML</abbr>, une forme avancée de langage de
|
||
description qui est l'avenir du HTML, n'utilise que les
|
||
<em>minuscules</em>. Peut-être préférerez-vous en prendre dès
|
||
aujourd'hui l'habitude.
|
||
</div>
|
||
|
||
<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="encadre">
|
||
<strong>À noter</strong> : sauf rares exceptions, toute balise
|
||
ouverte doit être refermée. Toute partie de la page doit être contenue
|
||
dans une balise. En XHTML, <strong>toutes</strong> les balises doivent
|
||
être refermées, peut-être préférez-vous dès maintenant prendre de
|
||
bonnes habitudes.
|
||
</div>
|
||
|
||
<p>Les balises doivent être ouvertes et refermées <em>dans
|
||
l'ordre</em>. Faites spécialement attention dans le cadre de balises
|
||
imbriquées.
|
||
</p>
|
||
|
||
<pre>
|
||
<P>Je vous préviens tout de suite, c'est <EM>non.</P></EM>
|
||
</pre>
|
||
|
||
<p class="continue">Ceci n'est pas syntaxiquement correct. Il faut
|
||
refermer <em> avant <p>.</p>
|
||
|
||
|
||
<h3><a name="entities">Caractères spéciaux : 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 <dfn>entités</dfn>, qui par convention
|
||
représentent ces caractères. Par exemple, le symbole euro (€) est
|
||
<code>&euro;</code>, le e dans l'o (œ) s'écrit
|
||
<code>&oelig;</code>.
|
||
</p>
|
||
|
||
<p>
|
||
En plus de ces entités HTML (dont vous pouvez trouver la <a
|
||
href="http://www.madore.org/~david/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 <i
|
||
lang="en">Document Type Definition</i> (<abbr>DTD</abbr>), qui précise
|
||
au navigateur quelle version de HTML vous utilisez.
|
||
</p>
|
||
|
||
<ul>
|
||
|
||
<li> <strong>HTML 4 strict</strong>, qui respecte parfaitement la
|
||
distinction fond (HTML) / forme (CSS) :
|
||
|
||
<pre>
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
"http://www.w3.org/TR/html4/strict.dtd">
|
||
</pre>
|
||
</li>
|
||
|
||
<li> <strong>HTML 4 transitionnel</strong>, qui supporte encore des
|
||
attributs ou éléments obsolètes :
|
||
|
||
<pre>
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||
"http://www.w3.org/TR/html4/loose.dtd">
|
||
</pre>
|
||
</li>
|
||
</ul>
|
||
|
||
<p class="continue">
|
||
Il existe d'autres DTD, par exemple celui pour les <i
|
||
lang="en">frames</i> (cadres), mais souvenez-vous qu'utiliser les
|
||
frames n'est pas une bonne idée, cf. l'excellent article « <a
|
||
href="http://openweb.eu.org/articles/finir_cadres/">Pour en finir avec
|
||
les cadres</a> » sur le site de l'<a
|
||
href="http://openweb.eu.org/">OpenWeb Group</a>.
|
||
</p>
|
||
|
||
<p class="continue">
|
||
Pour l'instant, notre page-squelette ressemble donc à ceci :
|
||
</p>
|
||
|
||
<pre>
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
"http://www.w3.org/TR/html4/strict.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="encadre">
|
||
<strong>À noter</strong> : 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">
|
||
<strong>Important</strong> : pour tous les éléments de <BODY> il
|
||
y a une distinction importante entre les balises dites « <i
|
||
lang="en">block level</i> » et les balises « <i lang="en">inline
|
||
level</i> ». Les <i lang="en">block level</i> sont par exemple des
|
||
paragraphes, des titres, etc. Ils forment des blocs, quoi. Les
|
||
éléments <i lang="en">inline</i> sont plutôt de la mise en forme, ils
|
||
s'appliquent à l'intérieur des blocs. C'est le cas des 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 <i
|
||
lang="en">inline</i> 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//EN"
|
||
"http://www.w3.org/TR/html4/strict.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 <a
|
||
href="&url.tuteurs;logiciels/latex/">LaTeX</a>, vous connaissez ce
|
||
genre de chose (<code>\chapter{}</code>, <code>\section{}</code>,
|
||
<code>\subsection{}</code>...). Idem pour Word avec son systè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 <i lang="en">inline</i>, soit en utilisant
|
||
directement des guillemets, soit en utilisant l'élément <Q>
|
||
(pour <i lang="en">quote</i>) :
|
||
</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
|
||
<i lang="en">emphasize</i>) sert également à mettre en relief un membre de
|
||
phrase. Il est plus faible que <STRONG>. Il est généralement
|
||
rendu par de l'<i lang="en">italique</i>.</p>
|
||
|
||
<p>
|
||
Selon les règles typographiques habituelles, un mot, une citation en
|
||
langue étrangère non francisée doit être mis en italique. Il ne s'agit
|
||
pas ici de mettre en valeur, mais d'une convention typographique. Dans
|
||
ce cas, vous devez utiliser l'élément <I>. Vous pouvez indiquer
|
||
de quelle langue il s'agit en utilisant l'attribut
|
||
<code>lang</code>. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
Selon le goût italien, les pâtes doivent être cuites <I lang="it">al dente</I>.
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Ce qui donne :
|
||
</p>
|
||
|
||
<pre>
|
||
Selon le goût italien, les pâtes doivent être cuites <i lang="it">al dente</i>.
|
||
</pre>
|
||
|
||
<h4>Définitions</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>
|
||
|
||
<h4>Titres (films, livres, etc.)</h4>
|
||
|
||
<p>
|
||
C'est CITE qu'il faut utiliser pour les citations de titres de livres,
|
||
de films, etc. L'élément CITE est usuellement rendu par de
|
||
l'italique. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
Le film <CITE lang="it">Morte a Venezia</CITE> de Luchino Visconti est une
|
||
adaptation de la nouvelle <CITE lang="de">Der Tod in Venedig</CITE> de
|
||
Thomas Mann.
|
||
</pre>
|
||
|
||
<h4>Code informatique</h4>
|
||
|
||
<p>
|
||
CODE (que vous reverrez dans la section du <a href="#pre">texte
|
||
préformaté</a>) est également un style de texte qui sert à démarquer
|
||
un extrait de code informatique du texte normal. Exemple :
|
||
</p>
|
||
|
||
<pre>
|
||
La ligne <CODE>#include &lt;stdio.h&gt;</CODE> demande au compilateur
|
||
d'inclure dans le programme certaines informations sur la bibliothèque standard
|
||
d'entrées-sorties.
|
||
</pre>
|
||
|
||
<h4>Sigles et acronymes</h4>
|
||
|
||
<p>
|
||
Les sigles peuvent être indiqués par un élément ABBR, et les acronymes (sigles
|
||
prononçables, comme ONU, OTAN, etc.) par l'élément... ACRONYM. Ces éléments sont
|
||
intéressants surtout si on utilise leur attribut <code>title</code> : certains
|
||
navigateurs peuvent alors afficher le contenu de <code>title</code> dans une bulle
|
||
d'aide. Démonstration :
|
||
|
||
</p>
|
||
|
||
<pre>
|
||
L'<ACRONYM lang="en" title="United Nations Special
|
||
Commission">UNSCOM</ACRONYM> a été créée pour assister l'<ABBR lang="en"
|
||
title="International Atomic Energy Agency">IAEA</ABBR> en Iraq.
|
||
</pre>
|
||
|
||
<p class="continue">
|
||
Les bons navigateurs (<a href="http://www.mozilla.org/">Mozilla</a> ou <a
|
||
href="http://www.mozilla.org/products/firefox/">FireFox</a> par exemple) affichent le
|
||
contenu du <code>title</code> sous la forme d'une bulle d'aide (<i
|
||
lang="en">tooltip</i> en anglais) quand vous laissez le curseur dessus. Faites le
|
||
test :
|
||
</p>
|
||
|
||
<pre>
|
||
L'<acronym lang="en" title="United Nations Special Commission">UNSCOM</acronym> a été créée pour assister l'<abbr lang="en" title="International Atomic Energy Agency">IAEA</abbr> en Iraq.
|
||
</pre>
|
||
|
||
|
||
<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><a name="pre">Texte préformaté</a></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, un programme très simple en
|
||
langage C (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>
|
||
#include &lt;stdio.h&gt;
|
||
|
||
int main(void)
|
||
{
|
||
printf("Hello, world!\n");
|
||
return 0;
|
||
}
|
||
</PRE>
|
||
</pre>
|
||
|
||
<p class="continue">sera rendu par :</p>
|
||
|
||
<pre>
|
||
#include <stdio.h>
|
||
|
||
int main(void)
|
||
{
|
||
printf("Hello, world!\n");
|
||
return 0;
|
||
}
|
||
</pre>
|
||
|
||
<p>Pour citer du code en <i lang="en">inline</i>, utilisez la bien-nommée
|
||
balise <CODE>
|
||
</p>
|
||
|
||
<h2>Images</h2>
|
||
|
||
<p>
|
||
On se sert de l'élément <IMG> (pour <i lang="en">image</i>, 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 <TR> décrit les lignes,
|
||
et <TD> les cellules. On déclare dans l'ordre <TABLE>, puis
|
||
<TR> 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><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>
|
||
</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><a name="liens">Liens</a></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,
|
||
<i lang="en">inline</i>), 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
|
||
relu. 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.
|
||
</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="attention">
|
||
<strong>Attention</strong> : le validateur ne vérifie que la
|
||
correction <em>formelle</em> de votre code. En clair, il peut vous
|
||
dire que votre fichier est <em>syntaxiquement</em> correct, mais pas
|
||
s'il est <em>sémantiquement</em> correct.
|
||
</div>
|
||
|
||
<div class="metainformation">Auteur : Marie-Lan Nguyen. Dernière
|
||
modification : <date value="$Date: 2005-05-02 14:28:14 $" />.</div>
|
||
|
||
</body>
|
||
</html>
|