Introduction au système de codage HTML pour la création de pages World Wide Web

Le langage HTML ("hypertext markup language") est simple, souple et efficace. Une vingtaine de types de jalons différents suffit pour créer une belle page avec titre, en-têtes, paragraphes, texte centré - non centré - mis en retrait, tables, images et liens hypertextuels. Le document suivant est à lire en relation avec le fichier codé en html qui le génère à l'écran (voir "View" -> "Document Source" dans votre navigateur).

Table des matières

1. Un document HTML a une tête et un corps
2. Les attributs: la couleur de fond
3. Les en-têtes
4. Les paragraphes
5. Les retours à la ligne
6. Le gras et l'italique
7. Le centrage
8. La mise en retrait
9. Présentation d'items par numéros ou ronds

10. Défense de chevaucher!
11. Texte non-proportionnel et texte non mis en forme par HTML
12. ENFIN, LES ACCENTS!
13. D'autres unités SGML: perluette, plus grand que, moins grand que
14. Tables
15. Les images
16. Les liens
17. Pour aller plus loin: un manuel HTML en anglais en ligne

1. Un document HTML a une tête et un corps

Un document WWW (= "html") contient une tête (= "head") et un corps (= "body"); le document est contenu tout entier entre les jalons "<html>" et "</html>" (le premier ouvre; le second ferme avec "/"). De la même manière, la tête est entourée des jalons "<head>" et "</head>" et le corps des jalons "<body>" et "</body>". À l'intérieur de la tête, on peut mettre un titre ("<title>...</title>"), qui paraîtra tout en haut de l'écran du navigateur (Regardez maintenant!).

2. Les attributs: la couleur de fond

Certains jalons peuvent avoir un attribut, comme, par exemple, <body> auquel a été ajouté dans ce document l'attribut "bgcolor" (= "background colour") et la valeur "#E6E8FA", qui est composé de trois chiffres hexadécimaux (E6, E8, FA) définissant les niveaux des couleurs rouge, vert et bleu (= "RGB colours"), ce qui permet 16 x 16 x 16 couleurs différentes. La couleur choisie ici est un bleu pâle.

3. Les en-têtes

Un texte peut être divisé en sections au moyen d'en-têtes (= "headers") de taille variable. En haut de cette page il y a un en-tête de niveau 1, le plus important, délimité par les jalons <h1> et </h1>. L'en-tête au début de ce paragraphe est de niveau 2. Il y a encore un niveau 3, qui donne des caractères un peu plus grands que les caractères de ce paragraphe, et un niveau 4 dont la taille des caractères est la même que celle des caractères de ce paragraphe. L'en-tête est séparé du texte qui le précède et le suit par un double interligne; les caractères qu'il contient sont en gras.

4. Les paragraphes

Les paragraphes sont séparés par le jalon <p>, qui crée un double interligne et fait commencer le paragraphe au début de la ligne.

Voici le deuxième paragraphe de cette section sur les paragraphes.

5. Les retours à la ligne

Pour revenir au début de la ligne sans créer de double interligne
on utilise le jalon <br> (= "line break"), comme ici.

6. Le gras et l'italique

Une séquence de texte qui doit apparaître en gras est entouré de <b>...</b>; une séquence en italique est entouré de <i>...</i>.

7. Le centrage

Une ligne ou une série de lignes
est centrée au moyen des jalons <center>...</center>.

8. La mise en retrait

On peut aussi faire une mise en retrait double au moyen de <ul><ul>...</ul></ul> ou <ol><ol>...</ol></ol>, et ainsi de suite.

9. Présentation d'items par numéros ou ronds

Le jalon <li>

utilisé tout seul crée un rond;

utilisé après <ul> crée un rond;

utilisé après <ol> crée un numéro d'ordre.

10. Défense de chevaucher!

Les jalons qui ont deux parties -- un début et une fin -- ne doivent pas se chevaucher. Par exemple, <b><i>...</b></i> est incorrect, <b><i>...</i></b> est correct.

11. Texte non-proportionnel et texte non mis en forme par HTML

On peut utiliser le jalon <tt>...</tt> (= "typewriter text") pour que le texte qu'il entoure s'affiche dans le navigateur en caractères non- proportionnels; c'est ce qui a été fait ici pour la repésentation des jalons.

Le    jalon   <pre>...</pre> (= "preformatted") a
    pour effet    de   respecter   la mise en    forme
(ou la   "non    mise en   forme" !  ) du texte
                     qu'il entoure    .

Sans ce jalon, le texte précédent sera mis en forme par HTML:

Le jalon <pre>...</pre> (= "preformatted") a pour effet de respecter la mise en forme (ou la "non mise en forme" ! ) du texte qu'il entoure .

12. ENFIN, LES ACCENTS!

Une lettre accentuée est définie dans le langage HTML par ce qu'on appelle une entité SGML (= "Standardized General Markup Language", dont HTML est dérivé). Une entité SGML comprend un délimiteur initial "&" (perluette) et un délimiteur final ";" (point-virgule); après la perluette "&" on met la lettre suivie du nom de l'accent. Par exemple, "é" ("e" aigu) est représenté par l'entité SGML é; "É" ("E" aigu) est représenté par É. Pour ce qui intéresse le français, les noms des accents sont les suivants:

Cliquez ici pour voir une liste complète.

13. D'autres unités SGML: perluette, plus grand que, moins grand que

Comme les jalons HTML sont délimités par des crochets triangulaires (= plus grand que et moins grand que; en angl. "angle brackets") et que les entités SGML commencent par une perluette (en angl. "ampersand"), on doit utiliser des entités SGML pour faire paraître ces trois caractères dans le texte. C'est ce qui a été fait dans ce document. Ainsi:

Nom du caractère	Caractère	Entité SGML
Plus grand que "greater than"	>	>
Moins grand que "less than"	<	<
Perluette "ampersand"	&	&

Nom du caractère	Caractère	Entité SGML
Plus grand que "greater than"	>	>
Moins grand que "less than"	<	<
Perluette "ampersand"	&	&

14. Tables

Les tables sont très utiles pour présenter du texte ou des chiffres en rangées et colonnes. La section précédente sur les unités SGML finit par une table, donnée deux fois (cf. infra) pour la représentation textuelle de la perluette et des crochets triangulaires.

Cette table (<table>...</table>) contient quatre rangées ("rows") ou lignes (<tr>...</tr>) et trois colonnes. Le nombre de colonnes est déterminé par le nombre de cellules dans chaque ligne; chaque cellule commence par le jalon <td> ("table data") et contient normalement du texte ou des chiffres; comme il y a trois occurrences du jalon <td> dans chaque ligne du tableau, la table a trois colonnes.

Dans la table ci-dessus, le jalon <table> a l'attribut "cellpadding" avec ici la valeur "10", qui déterminent l'importance de l'espace qui entoure les données dans chaque cellule; la 2e version de la table, qui a été centrée, contient en plus l'attribut "border=1", qui fait afficher un cadre autour de la table et de chacune des cellules. Trois des lignes (<tr>) ont l'attribut "valign" (= "vertical alignment") et la valeur "top" qui indiquent que la première ligne de chaque cellule de la rangée doit être alignée verticalement en haut de la cellule; certaines cellules (<td>) ont l'attribut "align=center", ce qui a pour effet de centrer le contenu de la cellule. Les cellules de la première ligne paraissent en gras puisqu'elles ont été définies comme en-têtes (<th> = "table header").

15. Les images

Voici une petite image en format "gif" insérée à différents endroits de ce paragraphe.

Le jalon <img> (= "image") a l'attribut "src" (= "source") et la valeur "leaf.gif" qui est le nom de l'image. L'image gif a été créée avec un lecteur optique ("scanner").

16. Les liens

Dans ce document, la table des matières de ce document et les différentes sections en question sont reliées au moyen de liens ("links"). Un lien est créé par l'emploi du jalon <a> (= "anchor") et d'un attribut. Les deux principaux types d'attributs, ceux utilisés dans ce document, sont "href" (= "hypertextual reference"), qui représente le lieu de départ, et "name", qui détermine le lieu d'arrivée. L'attribut "href" a comme valeur le nom d'un autre fichier (voir le paragraphe suivant ou le renvoi ci-dessus au fichier sur les entités SGML) ou le nom d'un lieu d'arrivée dans le même document; c'est ce deuxième type qui est illustré ici dans les liens renvoyant de la table des matières aux différentes sections. L'attribut "name" du lieu d'arrivée a comme valeur un nom correspondant au nom donné comme valeur de l'attribut "href" du lieu de départ. C'est ce système qui est utilisé pour les notes de bas de page d'un document imprimé.

Ainsi, par exemple, à l'endroit de l'item "Le gras et l'italique" de la table des matières l'attribut-valeur "href="#gras"" (à noter la présence du préfixe "#") renvoie à une partie de ce document qui s'appelle "gras" (sans "#").

17. Pour aller plus loin: un manuel HTML en anglais en ligne

Un manuel beaucoup plus complet a été écrit, en anglais, par un membre de l'Université de Toronto, Ian Graham. Pour consulter la version en ligne cliquez ici.

© Russon Wooldridge, Département d'Études françaises, University of Toronto
Janvier-février 1997
Nota: les informations données ci-dessus sont toujours valables en septembre 2004, ce qui est bon signe !