Le HTML 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 » :-)
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 d'interopérabilité, le HTML possède une norme, rédigée par le World Wide Web Consortium (W3C), qui regroupe des acteurs majeurs du Web comme Microsoft, MacroMedia (qui produit Flash), Apple, AOL, etc. Nous en sommes actuellement à HTML 4.1.
L'élément de base d'un site est la page. C'est un fichier dont
l'extension est normalement .html (ou .htm
si votre système d'exploitation vous impose cette limitation) et qui
contient du code HTML.
Le HTML utilise des balises (aussi appelées
« éléments ») pour distinguer les éléments logiques de la page. Toute
balise est de forme <TAGADA>, avec un < et un >. Les
balises se referment avec </TAGADA>, / étant l'élément
fermant. Les balises acceptent parfois des options, qu'on appelle des
attributs : dans <TAGADA type="plouf">,
TAGADA est l'élément, type l'attribut, et « plouf » la
valeur de l'attribut.
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.
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.
Les balises doivent être ouvertes et refermées dans l'ordre. Faites spécialement attention dans le cadre de balises imbriquées.
<P>Je vous préviens tout de suite, c'est <EM>non.</P></EM>
Ceci n'est pas syntaxiquement correct. Il faut refermer <em> avant <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 entités, qui par convention
représentent ces caractères. Par exemple, le symbole euro (€) est
€, le e dans l'o (œ) s'écrit
œ.
En plus de ces entités HTML (dont vous pouvez trouver la liste chez David Madore), vous disposez des entités Unicode. Unicode 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 ř (ř).
Toute page HTML est contenue entre deux balises <HTML>.
Toute page HTML doit commencer par la déclaration du Document Type Definition (DTD), qui précise au navigateur quelle version de HTML vous utilisez.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Il existe d'autres DTD, par exemple celui pour les frames (cadres), mais souvenez-vous qu'utiliser les frames n'est pas une bonne idée, cf. l'excellent article « Pour en finir avec les cadres » sur le site de l'OpenWeb Group.
Pour l'instant, notre page-squelette ressemble donc à ceci :
<!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>
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 ?).
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 obligatoire. Ainsi, Jean-Paul Sartre pourra utiliser comme titre de sa page d'accueil :
<TITLE>Page Web de Jean-Paul Sartre</TITLE>
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.
META sont parmi
les rares balises qui peuvent ne pas être refermées.<META name="author" content="Jean-Paul Sartre">
Vous pouvez déclarer plusieurs auteurs en séparant les noms par des virgules.
<META http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
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.
<META http-equiv="Content-Language" content="fr">
Quelques codes utiles : fr pour
le français, en pour l'anglais, de pour
l'allemand, es pour l'espagnol, it pour
l'italien, ru 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 (« »).
<META name="keywords" lang="fr" content="Philosophie, existentialisme, littérature engagée">
Cette balise META 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.
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 via son navigateur.
Le corps de la page est contenu entre balises <BODY>. Comment le remplir ? Vous le verrez dans les lignes suivantes.
Vous pouvez le copier-coller pour servir de modèle à vos pages Web.
<!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>
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 !
Si vous avez fait du LaTeX, vous connaissez ce
genre de chose (\chapter{}, \section{},
\subsection{}...). 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).
On en arrive au cœur du problème : mettre en forme le texte.
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.
Pour simplement aller à la ligne, utilisez l'élément <BR>, l'un des rares à ne pas devoir être refermé.
Vous pouvez citer au niveau inline, soit en utilisant directement des guillemets, soit en utilisant l'élément <Q> (pour quote) :
<Q>Delenda Carthago</Q>, comme disait le grand Caton...
Au passage, Internet Explorer ignore purement et simplement l'élément <Q>, donc mieux vaut utiliser directement les guillemets.
Au niveau bloc, c'est l'élément <BLOCKQUOTE> qu'il vous faut :
<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>
<BLOCKQUOTE> est généralement rendu par un bloc indenté à droite et à gauche :
La Condamine est aujourd'hui
Reçu dans la troupe immortelle
Il est bien sourd, tant mieux pour lui,
Mais non muet, tant pis pour elle.
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 gras par les navigateurs. <EM> (pour emphasize) sert également à mettre en relief un membre de phrase. Il est plus faible que <STRONG>. Il est généralement rendu par de l'italique.
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
lang. Exemple :
Selon le goût italien, les pâtes doivent être cuites <I lang="it">al dente</I>.
Ce qui donne :
Selon le goût italien, les pâtes doivent être cuites al dente.
Le HTML vous permet de structurer encore davantage vos documents, essentiellement les documents techniques. DFN (pour define) sert à indiquer un mot dont on va donner la définition, une fois pour le reste du document. Exemple :
<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>
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 :
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.
CODE (que vous reverrez dans la section du texte préformaté) est également un style de texte qui sert à démarquer un extrait de code informatique du texte normal. Exemple :
La ligne <CODE>#include <stdio.h></CODE> demande au compilateur d'inclure dans le programme certaines informations sur la bibliothèque standard d'entrées-sorties.
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 title : certains
navigateurs peuvent alors afficher le contenu de title dans une bulle
d'aide. Démonstration :
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.
Les bons navigateurs (Mozilla ou FireFox par exemple) affichent le
contenu du title sous la forme d'une bulle d'aide (tooltip en anglais) quand vous laissez le curseur dessus. Faites le
test :
L'UNSCOM a été créée pour assister l'IAEA en Iraq.
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.
Elles sont aussi dites « listes à puces » car souvent les navigateurs affichent des puces devant chaque entrée de liste. <UL> et </UL> (pour Unordered Lists) 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
<UL> <LI> mégavolts</LI> <LI> cornofulgure</LI> <LI> astéro-hache</LI> </UL>
Ce qui donne :
Même principe, avec <OL> (Ordered Lists) à 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 :
<OL type="i"> <LI> mégavolts</LI> <LI> cornofulgure</LI> <LI> astéro-hache</LI> </OL>
Ce qui donne :
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.
On utilise l'élément DL (Definition list). À l'intérieur de l'élément DL, DT (pour definition term) est une entrée du lexique, et DD (pour definition definition...) la définition associée à cette entrée. Admettons que vous fassiez un lexique du folklore normalien.
<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>
Ce qui donne :
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 verbatim de LaTeX : le code HTML
y est interprété. Dans cette documentation, par exemple, on a recours
aux entités pour représenter <, > et
&.
Prenons un exemple, un programme très simple en
langage C (pour les littéraires, recopiez ça dans un fichier
hello.c, faites gcc hello.c puis
./a.out et regardez) :
<PRE>
#include <stdio.h>
int main()
{
printf("Hello, world!\n");
}
</PRE>
sera rendu par :
#include <stdio.h>
int main()
{
printf("Hello, world!\n");
}
Pour citer du code en inline, utilisez la bien-nommée balise <CODE>
On se sert de l'élément <IMG> (pour image, bien sûr) et
de ses attributs. Cet élément n'a pas besoin d'être
refermé. L'attribut plus important est src : il permet de
spécifier l'adresse où aller chercher l'image. Ainsi, quand on écrit
son fichier ~/www/index.html pour inclure une image
située dans son répertoire ~/www/images/, on écrira :
<IMG src="images/monimage.jpg">
On peut aussi indiquer une adresse absolue quand l'image n'est pas sur votre compte, par exemple :
<IMG src="http://www.eleves.ens.fr/tuteurs/icones/note.png">
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 :
<IMG src="images/pouf.jpg" alt="Photo de moi et mon chien Pouf en vacances">
Si l'image ne joue aucun rôle sémantique (elle est
là uniquement pour décorer, on indique alt="").
Les formats les plus couramment utilisés pour le Web sont le JPEG,
en .jpg et le GIF, en .gif
— 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.
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.
<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>.
<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>
Ce qui donne :
| Cellule 1 | Cellule 2 |
| Cellule 3 | Cellule 4 |
| Cellule 5 | Cellule 6 |
Pas très croquignolet, hein ?
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>).
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 header, en-tête) qui s'en charge.
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).
<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>
Donc :
| Colonne gauche | Colonne droite |
|---|---|
| Cellule 1 | Cellule 2 |
| Cellule 3 | Cellule 4 |
| Cellule 5 | Cellule 6 |
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, inline), suivi d'attributs.
Le lien de base utilise l'attribut href :
Retourner au <A href="http://www.eleves.ens.fr/">serveur des élèves</A>.
donne ainsi :
Retourner au serveur des élèves.
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 ~/www/ un répertoire stage
qui contient, entre autres, le fichier rapport.html. Pour
faire un lien dessus, depuis la page d'accueil, ça donnera :
Mon <a href="stage/rapport.html">rapport de stage</a> parle du lien entre les nombres p-adiques et les phases de la lune.
Une ancre sert à faire un lien local, 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.
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 :
Les <A name="olm">Olmèques</A> ont véritablement existé. C'est la première des grandes civilisations précolombiennes...
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.
Pour faire le lien vers cette ancre, on utilise toujours l'attribut
HREF, mais en modifiant la syntaxe avec un # :
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>.
Vous pouvez positionner un lien vers cette ancre même depuis un autre fichier :
Voir <A href="citesdor.html#olm">l'histoire des Olmèques</A>.
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.
Écrivez-moi : <a href="mailto:mon.adresse@ens.fr">mon.adresse@ens.fr</a>
Quand un lecteur suivra ce lien, son navigateur lui proposera de vous envoyer un mail.
Les entités dont vous avez besoin en l'espèce
sont @ pour une arobase (@) ou encore
. pour un point (.) et -
pour un tiret (-). Ce qui donne :
Mon adresse : <A href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
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 :
Mon adresse : <A href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
Vous pouvez utiliser ce système avec d'autres protocoles, celui des
news (news:) pour que le navigateur affiche (s'il en est
capable) le message dont vous avez donné le message-ID, ou le FTP...
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.
Il vous suffit d'aller dire coucou au validateur du W3C 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...