Cette section est une aide à la rédaction ``à la main'' de petits documents HTML comme les pages d'accueil de serveurs W3 ... Sa lecture ne dispense pas de consulter le Draft Internet rédigé par Tim Berners-Lee. Enfin, comme indiqué en conclusion, il est conseillé d'utiliser un filtre de conversion pour produire des documents HTML conséquents.
Introduction
Titre de document
La commande BASE
Les entêtes
Les paragraphes
Le saut de ligne
Le trait horizontal
Les caractères accentués
La mise en forme des caractères
Les caractères spéciaux
Les liens vers d'autres documents
Les images dans le texte
Les listes
Les parties de texte pré-formaté
Exemple
HyperText Markup Language
(HTML) est le langage utilisé pour la
diffusion de documents par les serveurs WWW. Il s'agit d'un ensemble
simple de commandes de formatage de documents, la présente documentation
est une présentation rapide de la plupart d'entre elles.
Les différentes commandes de HTML utilisent une syntaxe qui rappelle celle de LaTeX. On entre dans un environnement en le citant borné par les caractères < et >, on le quitte en le nommant précédé d'un caractère / comme dans l'exemple suivant :
<TItlE> Commande donnant le titre d'un document </Title>
Il est important de noter que les commandes HTML ne sont pas sensibles aux caractères minuscules ou majuscules (comme le démontre l'exemple ci-dessus) et qu'un fichier contenant un document rédigé en HTML doit être suffixé par .html ou .HTML.
Un document est composé d'une en-tête et d'un corps. L'en-tête comporte des informations générales sur le document. Le corps contient le texte du document ainsi que les commandes de formatage.
L'en-tête d'un document est délimité par la commande <HEAD>.
Tous les documents HTML doivent comporter un titre qui apparaît généralement dans une fenêtre séparée du reste du document (ceci dépend du client WWW utilisé). La commande pour donner le titre d'un document est <TITLE>, elle s'utilise comme dans l'exemple suivant :
<TITLE> La rédaction de documents en HTML </TITLE>
La commande <BASE> indique l'URL de référence qui sera utilisé pour compléter tous les URLs relatifs dans un document. Ainsi, le même document sera encore utilisable même s'il est déplacé (par exemple, sur un autre serveur). La syntaxe est la suivante :
<BASE HREF=``URL''>
Par exemple, si un document contient la commande :
<BASE HREF="http://web.urec.fr/">
et contient par ailleurs un URL relatif :
<A HREF="/docs/www/www.html>"
l'URL complet utilisé par le client W3 sera :
"http://web.urec.fr/docs/www/www.html"
Si la commande BASE n'est pas utilisée, le défaut est l'URL du serveur sur lequel se trouve le document.
Le corps d'un document est délimité par la commande <BODY>.
Il n'existe pas en HTML de découpage d'un texte en sections, sous-sections ... comme dans d'autres langages de formatage de documents. On peut toutefois séparer les parties d'un texte par des en-têtes, en précisant des tailles de polices différentes. Pour celles-ci on peut se créer à la main un environnement proche des sections, sous-sections habituelles. Il existe 6 niveaux d'en-têtes utilisant des polices grasses de tailles décroissantes, la commande de création d'en-tête est <Hn> (n étant compris entre 1 et 6). Les exemples suivants créent des en-têtes de tailles différentes :
<H1> entête de document </H1> <H2> entête de chapitre </H2> <H3> entête de section </H3> <H4> entête de sous-section </H4>
Les espaces, tabulations, retours chariot n'ont pas de signification en HTML. Pour séparer les paragraphes d'un document on utilise la commande <P> (fin de paragraphe) comme dans l'exemple suivant :
Bonjour les petits amis, ceci est interprété comme un paragraphe par un client WWW. <P>
Il est possible de forcer la césure d'une ligne en utilisant la commande <br> comme dans l'exemple suivant :
On peut légèrement intervenir sur le formatage <br> d'une phrase en forçant des césures.
Un trait horizontal occupant la largeur de la fenêtre de visualisation peut être tracé en utilisant la commande <HR> comme dans l'exemple suivant :
<HR> Un texte peut être placé entre deux lignes horizontales <HR>
HTML utilise le jeu de caractères ISO Latin-1 (codé sur 8 bits) ainsi que son sous ensemble ASCII (codé sur 7 bits). Dans la codification sur 7 bits, la représentation des caractères nationaux est assurée par des séquences d'échappement qui s'utilisent de la façon suivante :
À pour À
à pour à
Ç pour Ç
...
Une liste complète de ces séquences est accessible ici.
En attendant des éditeurs HTML simples et conviviaux, et pour éviter de saisir de telles séquences fastidieuses, il est possible d'effectuer la saisie des caractères nationaux en ISO Latin 1 (8 bits), des procédures de conversions assurant la traduction en HTML (utilisant les caractères d'échappement).
Une procédure de traduction est accessible ici .
La mise en forme des caractères est réalisée par des commandes de style. On distingue deux types de style :
Les caractères <, >, et & étant interprétés par HTML, des séquences d'échappement sont prévues dès lors qu'ils doivent apparaître sans interprétation. Ces séquences d'échappement sont les suivantes :
< pour <
> pour >
& pour &
HTML offre la possibilité de créer des liens vers d'autres documents. La localisation des documents liés n'a pas d'importance, HTML sachant résoudre les URL. Les liens sont présentés à l'utilisateur (par les clients WWW) sous forme de mots soulignés, en vidéo inversée, colorés ... ce sont les prises hypertextes généralement appelées ancres. Les différentes possibilités pour créer des liens hypertextes sont les suivantes :
<A HREF="URL"> ancre </A>
Par exemple, pour créer un lien vers un document présentant Gopher (disponible sur le serveur WWW du CRI de l'université de Rennes 1) il conviendrait d'écrire :
<A
HREF="http://www.univ-rennes1.fr/doc-html/gopher/gopher.html">
documentation sur Gopher</A>
<A HREF="nom de fichier"> ancre </A>
nom de fichier doit bien sūr être un chemin relatif ou absolu dans l'espace accessible au serveur WWW correspondant.
<A NAME="etiquette"> pour définir le point de branchement.
<A HREF="nom de fichier#etiquette"> ancre </A>
pour effectuer le lien.
HTML permet l'insertion d'images dans un texte. Celles-ci peuvent apparaître dans le corps du texte mais également servir d'ancres. Pour l'instant les formats d'images supportés (du moins par les clients de la famille Mosaic) sont les suivants :
Une documentation sur le format GIF est ici .
La commande <IMG> permet d'insérer des images dans le texte, sa syntaxe est la suivante :
<IMG SRC="URL"> pour insérer une image distante ou
<IMG SRC="nom de fichier local"> pour insérer une image locale.
Ici aussi nom de fichier local doit être un chemin relatif ou absolu dans l'espace accessible au serveur WWW correspondant.
Certains clients WWW ignorent cette commande (les clients fonctionnant en mode ligne notamment).
La commande pour entrer dans un environnement de type liste est <UL>, on en sort par </UL>. Chaque élément de la liste est préfixé par la commande <LI> comme dans l'exemple suivant :
Les solutions sont les suivantes : <UL> <LI> la première ; <LI> la deuxième ; <LI> la troisième ; </UL>
Il existe également un environnement de type liste numérotée, la commande de mise en oeuvre est <OL> terminé par </OL>.
Il est possible d'emboîter les environnements de type liste comme ci-dessous :
Les solutions sont les suivantes : <UL> <LI> la première comportant deux variantes : <OL> <LI> la solution 1 A ; <LI> la solution 1 B. </OL> <LI> la deuxième ; <LI> la troisième ; </UL>
Lorsqu'un document pré-formaté doit être inclus dans un document HTML, on le borne par les commandes <PRE> et </PRE>. De cette façon les espacements, tabulations et retours chariot conservent leur sens initial comme dans l'exemple suivant :
<PRE> drwxr-xr-x 2 dagorn cicb 1536 Feb 07 14:02 redachtml/ -rw-r--r-- 1 dagorn cicb 1768 Feb 07 14:01 redachtml.aux -rw-r--r-- 1 dagorn cicb 13880 Feb 07 14:01 redachtml.dvi -rw-r--r-- 1 dagorn cicb 2032 Feb 07 14:01 redachtml.log -rw-r--r-- 1 dagorn cicb 26540 Feb 07 14:01 redachtml.ps -rw-r--r-- 1 dagorn cicb 12561 Feb 07 14:11 redachtml.tex </PRE>
Attention, si une partie de texte pré-formaté contient des commandes HTML, elles seront interprétées.
<HEAD> <TItle>Exemple de document HTML</TITLE> </HEAD> <BODY> <H1>Entête de niveau 1</H1> Exemple de <A HREF="#fin du document">lien</A></BR> Exemple de <I>changement</I> de style de <B>caractères</B> <H2>Entête de niveau 2</H2> Liste non numérotée : <UL> <LI> item 1 <LI> item 2 </UL> <H3>Ent&ête de niveau 3</H3> Liste numérotée : <OL> <LI> item 1 <LI> item 2 </OL> <H4>Entête de niveau 4</H4> liste descriptive : <DL> <DT>terme 1 <DD>description du terme 1 <DT>terme 2 <DD>description du terme 2 </DL> <H5>Entête de niveau 5</H5> Listes emboitées : <OL> <LI> item 1 <LI> item 2 <UL> <LI> item 1 <LI> item 2 </UL> <LI> item3 </OL><H6>Entête de niveau 6</H6> <A NAME="fin du document">ancre</A> </BODY>
Vous pouvez voir le résultat de cet exemple.
La `` rédaction de documents en HTML '' n'est pas franchement à conseiller, dans la majeure partie des cas il convient d'utiliser un convertisseur d'un texte en LaTeX (cf. section 5.4.1), Frame ... vers HTML.
Cette présentation est inspirée par les documents suivants :