HTML est le langage par excellence de l’internet. En effet, n’importe quelle page présente sur
la toile est écrite grâce à l’HTML.

HTML, ça veut dire : Hyper Text Markup Language. En français, langage hypertexte marqué,
ou à balises.



Tout d’abord, il convient de remettre chaque chose à sa place. Non, HTML n’est pas un langage
de programmation. C’est un langage, d’accord, mais qui sert à décrire la structure d’un
document: comment sera placée cette image, comment sera écrit ce texte …

Un document HTML, c’est un peu comme un fichier RTF (Rich Text File). Vous savez, ce
sont les documents passe partout, lisibles avec n’importe quel traitement de texte récent…

Et bien c’est pareil! Faites un test. Prenez votre traitement de texte favori (Word, WordPro,
WordPerfect ou tout simplement le WordPad fourni avec Windows) et écrivez Ceci est un texte
en caractère gras. Enregistrez ce document au format RTF, puis réouvrez-le avec un éditeur de
texte simple, style NOTEPAD.

Haaaaaa! Cette fois le texte n’est plus du tout mis en forme et il y a des {, des } et des \ partout!

Pas de panique. Voyons cela d’un peu plus près.

En cherchant bien, on arrive à voir que notre texte, le Ceci est un texte a survecu. Comme
le but n’est pas de vous expliquer le RTF mais le HTML, nous allons faire bref. À part le
Ceci est un texte, tout le reste sert à décrire comment le document sera présenté. On
remarque la mention de fonttbl, pour écrire en gras, ainsi que le nom de la
police utilisée. Chez moi, c’est Times New Roman.



HTML, c’est la même chose. Il y a d’une part le texte, l’ensemble des données à afficher et
d’autre part les indications permettant de le placer, le formater.

Par bonheur, l’HTML est bien moins confus que le RTF. Si vous voulez avoir vite fait un aperçu
du HTML, vous pouvez cliquer dans le menu ‘Affichage\Source’ si vous utilisez Internet Explorer.



Mais vous allez me dire, « Pourquoi apprendre HTML puisque je peux créer des documents HTML aussi
facilement que des documents RTF avec Word ? »

• Déjà parce que plus un fichier est gros, plus il mettra du temps à s’afficher. Or, les WYSISWYG
  ne se gênent pas pour encombrer inutilement le code HTML du document créé avec des balises inutiles.
  




• Ensuite, un document HTML est lu grâce à un navigateur. Et là, contrairement à l’RTF où la
  mise en page sera respectée à la lettre (à de très rares exceptions), suivant que le lecteur
  de vos pages utilise Internet Explorer, Netscape Navigator, Amaya, Opéra …, le résultat
  pourra être spectaculairement différent d’un navigateur à l’autre. Vous pouvez d’ailleur
  vous en rendre compte selon que vous lisiez ces pages avec Netscape Navigator ou Microsoft
  Internet Explorer (le deuxième convient mieux apparement…).
  




• Enfin, certains effets de style recherchés seront impossible à générer avec des logiciels comme
  Front Page ou AolPress pour ne citer que les plus connus.
  

Concernant ce manque de rigeur des navigateurs, je pense (ce n’est pas de la pub,
juste une impression personnelle) que Microsoft Internet Explorer est le plus fidèle. On
pourra placer Netscape Navigator en seconde position, bien que toutes les rêgles des feuilles
de styles ne soient pas toutes reconnues par celui-ci.

L’organisme qui est censé unifier tout cela s’appelle le W3C (pour World Wide Web
Consortium). Pour l’instant, on en est à la 4^ème version de HTML, d’où le nom,
HTML 4. En fait, la dernière révision (à ma connaissance) date de décembre 1999. L’adresse
de cette association est http://www.w3.org.

Pour faire de l’HTML, le NOTEPAD suffit. Mais on peut utiliser ce qu’on appelle un éditeur de
balises.

1. Squelette d’un document
2. Exemple d’emploi d’une balise

Comme vous le savez, dans un document HTML, il existe les données et ce qui sert à les mettre
en place.

Ce qui sert à positionner les données s’appelle des balises. Une balise se distingue
ainsi: elle est entre < et >. Il en existe de deux types :

• Les marqueurs : ils ne sont constitués que d’une seule balise.


• Les conteneurs : ils sont constitués d’une balise de départ et d’une balise de fin.
  La balise de fin est constituée d’un slash (/).

Squelette d’un document

Quoiqu’il arrive, un document doit être constitué au minimum de 3 balises de type
conteneur que nous allons détailler. Voici le squelette :

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Vous remarquez que la première balise est <HTML>. Elle débute à la première ligne
(<HTML>) et termine à la dernière ligne du fichier (</HTML>).
Elle sert juste à délimiter l’ensemble du document HTML. C’est à dire que toutes les informations
devront être écrites entre la balise <HTML> et la balise </HTML>.
On peut comparer cette balise à la page d’un document écrit.

La deuxième balise est <HEAD>. C’est dans son contenu (entre <HEAD>
et </HEAD>) que devront être stockées les informations d’en-tête. On
peut comparer les informations d’en-tête au paratexte d’un document écrit. Mais nous détaillerons
cela plus tard.

La troisième et dernière balise est <BODY>. C’est à l’intérieur de celle-ci (entre <BODY>
et </BODY>) que se trouve tout le document: le texte, les images. On peut comparer <BODY>
au texte d’un document écrit.



Vous remarquez que les balises <HEAD> et <BODY> sont emboîtées
dans la balise <HTML>. Ne vous inquiétez pas, les balises sont très souvent
imbriquées les unes dans les autres.

Exemple d’emploi d’une balise

Par exemple, pour indiquer le titre du document, celui qui est écrit dans la barre de titre de
votre navigateur, il faut utiliser la balise <TITLE> qui est du type conteneur.

Cette balise doit être placée dans la section d’en-tête du document, c’est à dire entre
<HEAD> et </HEAD> :

<HTML>

<HEAD>

<TITLE>Ceci est le titre de la page</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Cliquez-ici pour voir le résultat



Pour tester cet exemple, effectuez un copier/coller jusque dans votre éditeur de balises ou
NOTEPAD, puis enregistrez le fichier en donnant pour extension .htm ou .html, ces
deux extensions étant valides.

Il est recommandé d’écrire les noms de fichiers en minuscule. De plus, suivant le système
du service qui héberge vos pages, les noms de fichiers doivent parfois se soumettre à plusieurs
conventions, comme par exemple, 8 lettres maximum. Référez-vous à votre ‘hébergeur’ pour de
plus amples informations

Une fois le fichier dûment nommé, tapez son chemin dans la barre adresse de votre navigateur.
Il vous faudra peut-être rajouter ‘file:///’ devant le chemin et convertir les ‘\‘
en ‘/‘ en cas d’échec.

Vous remarquez alors que le titre voulu s’affiche dans la barre de titre de la fenêtre.

Concernant les noms des fichiers, il faut veiller à toujours avoir un fichier nommé index.htm
ou index.html dans chaque répertoire que vous crérez pour votre site.

Si un visiteur tape dans sa barre d’outils l’adresse d’un de vos répertoires, et que par malheur,
aucun fichier index ne se trouve à l’intérieur, la liste de tous les fichiers du
répertoire apparaitra, ce qui est rarement l’effet recherché.

1. L’espace « incassable »

Pour afficher du texte, rien de plus simple. Il suffit de l’écrire dans le corps du document,
c’est à dire dans le conteneur <BODY>, entre <BODY> et </BODY> :

<HTML>

<HEAD>

<TITLE>Ancien testament – Genèse</TITLE>

</HEAD>

<BODY>

Voici les origines du ciel et de la terre, quand il furent créés. Lorsque l’Eternel

Dieu fit la terre et le ciel.

Il n’y avait encore aucun arbustre de la campagne sur la terre, et aucune herbe de

la campagne ne germait encore: car l’Eternel Dieu n’avait pas fait pleuvoir sur la

terre, et il n’y avait point d’homme pour cultiver le sol.

Mais une vapeur s’éleva de la terre et arrosa toute la surface du sol.

L’Eternel Dieu forma l’homme de la poussière du sol; il insuffla dans ses narines

un souffle vital, et l’homme devint être vivant.

ANCIEN TESTAMENT GENÈSE

</BODY>

</HTML>

Voici le résultat :



Voici les origines du ciel et de la terre, quand il furent créés. Lorsque l’Eternel Dieu fit
la terre et le ciel.
Il n’y avait encore aucun arbustre de la campagne sur la terre, et aucune herbe de la
campagne ne germait encore: car l’Eternel Dieu n’avait pas fait pleuvoir sur la terre, et il
n’y avait point d’homme pour cultiver le sol.
Mais une vapeur s’éleva de la terre et arrosa toute la surface du sol.
L’Eternel Dieu forma l’homme de la poussière du sol; il insuffla dans ses narines un souffle
vital, et l’homme devint être vivant.
ANCIEN TESTAMENT GENÈSE



Qu’observez-vous? Et oui, les sauts de lignes ne sont pas respectés, ainsi que les espaces :
on peut en mettre 5, cela aura le même effet que 1.

Pour forcer le retour à la ligne, nous allons utiliser une balise de type marqueur : <BR>.
<BR> (pour Break Row) provoque un retour à la ligne ainsi qu’un retour
chariot. Notre exemple modifié sera donc :

<HTML>

<HEAD>

<TITLE>Ancien testament – Genèse</TITLE>

</HEAD>

<BODY>

Voici les origines du ciel et de la terre, quand il furent créés. Lorsque l’Eternel

Dieu fit la terre et le ciel.<BR>

Il n’y avait encore aucun arbustre de la campagne sur la terre, et aucune herbe de

la campagne ne germait encore: car l’Eternel Dieu n’avait pas fait pleuvoir sur la

terre, et il n’y avait point d’homme pour cultiver le sol.<BR>

Mais une vapeur s’éleva de la terre et arrosa toute la surface du sol.<BR>

L’Eternel Dieu forma l’homme de la poussière du sol; il insuffla dans ses narines

un souffle vital, et l’homme devint être vivant.<BR>

ANCIEN TESTAMENT GENÈSE

</BODY>

</HTML>

Et cette fois-ci, les sauts de lignes sont respectés :



Voici les origines du ciel et de la terre, quand il furent créés. Lorsque l’Eternel Dieu fit
la terre et le ciel.

Il n’y avait encore aucun arbustre de la campagne sur la terre, et aucune herbe de la
campagne ne germait encore: car l’Eternel Dieu n’avait pas fait pleuvoir sur la terre, et il
n’y avait point d’homme pour cultiver le sol.

Mais une vapeur s’éleva de la terre et arrosa toute la surface du sol.

L’Eternel Dieu forma l’homme de la poussière du sol; il insuffla dans ses narines un souffle
vital, et l’homme devint être vivant.

ANCIEN TESTAMENT GENÈSE

L’espace « incassable »

Si on veut maintenir le nombre désiré d’espace dans un texte, on doit faire intervenir un élement
spécial, qui n’est pas une balise : le &nbsp;. Si on décortique chaque lettre, sa donne
no breaking space. On clair, à chaque fois que le navigateur rencontrera
ce terme, il laissera un espace, qu’il le veuille ou non :

<HTML>

<HEAD>

<TITLE>L’esapce « incassable »</TITLE>

</HEAD>

<BODY>

Laissons 10 espaces entre ceci&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;et cela

</BODY>

</HTML>

Ce qui nous donne :



Laissons 10 espaces entre ceci          et cela

1. La balise <I> (Italique)
2. La balise <B> (Caractères Gras)
3. La balise <U> (Soulignement)
4. La balise <STRIKE> (Barré)
5. La balise <SUP> (Exposant)
6. La balise <SUB> (Indice)
7. La balise <BIG> (caractères plus gros)
8. La balise <CITE> (courte citation)
9. La balise <CODE> (code de programme)
10. La balise <DFN> (définition)
11. La balise <EM> (insistance)
12. La balise <KBD> (texte à saisir)
13. La balise <SAMP> (exemple)
14. La balise <SMALL> (caractères plus petits)
15. La balise <STRONG> (marquer du texte)
16. La balise <TT> (machine à écrire)
17. La balise <VAR> (variable)

Comme dans un traitement de texte classique, on peut mettre le texte en italique, en
caractères gras, souligné, barré, en ^exposant ou
en _indice grâce à la balise de type conteneur appropriée.

La balise <I> (Italique)

Pour écrire en italique, on utilise la balise de type conteneur <I>, comme italic.
Le texte doit être placé entre <I> et </I>.

<HTML>

<HEAD>

<TITLE>Ecrire en italique</TITLE>

</HEAD>

<BODY>

<I>Ceci est un texte écrit en italique</I>

</BODY>

</HTML>

La balise <B> (Caractères Gras)

Pour écrire en cractères gras, on utilise la balise de type conteneur <B>, comme bold.
Le texte doit être placé entre <B> et </B>.

<HTML>

<HEAD>

<TITLE>Ecrire en cractères gras</TITLE>

</HEAD>

<BODY>

<B>Ceci est un texte écrit en cractères gras</B>

</BODY>

</HTML>

La balise <U> (Soulignement)

Pour souligner, on utilise la balise de type conteneur <U>, comme underline.
Le texte doit être placé entre <U> et </U>.

<HTML>

<HEAD>

<TITLE>Souligner</TITLE>

</HEAD>

<BODY>

<U>Ceci est un texte souligné</U>

</BODY>

</HTML>

La balise <STRIKE> (Barré)

Pour barrer du texte, on utilise la balise de type conteneur <STRIKE>, comme strike .
Le texte doit être placé entre <STRIKE> et </STRIKE>.

<HTML>

<HEAD>

<TITLE>Barrer du texte</TITLE>

</HEAD>

<BODY>

<STRIKE>Ceci est un texte barré</STRIKE>

</BODY>

</HTML>

La balise <SUP> (Exposant)

Pour écrire du texte en exposant, on utilise la balise de type conteneur <SUP>.
Le texte doit être placé entre <SUP> et </SUP>.

<HTML>

<HEAD>

<TITLE>Ecrire du texte en exposant</TITLE>

</HEAD>

<BODY>

<SUP>Ceci est un texte écrit en exposant</SUP>

</BODY>

</HTML>

La balise <SUB> (Indice)

Pour écrire du texte en indice, on utilise la balise de type conteneur <SUB>.
Le texte doit être placé entre <SUB> et </SUB>.

<HTML>

<HEAD>

<TITLE>Ecrire du texte en indice</TITLE>

</HEAD>

<BODY>

<SUB>Ceci est un texte écrit en indice</SUB>

</BODY>

</HTML>

La balise <BIG> (caractères plus gros)

La balise de type conteneur <BIG> permet d’écrire du texte plus gros que le reste du
texte.

<HTML>

<HEAD>

<TITLE>Ecrire du texte plus gros</TITLE>

</HEAD>

<BODY>

<BIG>Gros</BIG> est plus <BIG>gros</BIG> que le reste du texte

</BODY>

</HTML>

Résultat :

Gros est plus gros que le reste du texte

La balise <CITE> (courte citation)

<CITE> (du type conteneur) permet d’écrire une courte citation.

<HTML>

<HEAD>

<TITLE>Ecrire une courte citation</TITLE>

</HEAD>

<BODY>

<CITE>Jusqu’où irez-vous ?</CITE>

</BODY>

</HTML>

Résultat :

Jusqu’où irez-vous ?

La balise <CODE> (code de programme)

Cette balise (du type conteneur), est utilisée pour afficher du texte provenant d’un programme
(parfois utilisé dans ces pages).

<HTML>

<HEAD>

<TITLE>Du code</TITLE>

</HEAD>

<BODY>

<CODE>PRINT « Hello Warrior ! »</CODE>

</BODY>

</HTML>

Résultat :

PRINT « Hello Warrior »

La balise <DFN> (définition)

Pour écrire une définition, on utilise la balise du type conteneur <DFN>.

<HTML>

<HEAD>

<TITLE>Une Définition</TITLE>

</HEAD>

<BODY>

<DFN>GUERRIER : Personne qui fait la guerre; combattant, soldat</DFN>

</BODY>

</HTML>

Résultat :

GUERRIER : Personne qui fait la guerre; combattant, soldat

La balise <EM> (insistance)

<EM> (du type conteneur) permet d’insister sur du texte.

<HTML>

<HEAD>

<TITLE>Insister sur du texte</TITLE>

</HEAD>

<BODY>

<EM>Insistance</EM>

</BODY>

</HTML>

Résultat :

Insistance

La balise <KBD> (texte à saisir)

<KBD> (type conteneur) est utilisé pour afficher du texte à saisir par le lecteur.

<HTML>

<HEAD>

<TITLE>Du texte à saisir</TITLE>

</HEAD>

<BODY>

Saisissez le texte suivant : <KBD>Du texte à saisir</KBD>

</BODY>

</HTML>

Résultat :

Saisissez le texte suivant : Du texte à saisir

La balise <SAMP> (exemple)

Pour afficher des programmes ou des sorties de programme, on peut utiliser la balise de type
conteneur <SAMP>.

<HTML>

<HEAD>

<TITLE>Un exemple</TITLE>

</HEAD>

<BODY>

<SAMP>PRINT « Hello Warrior »</SAMP>

</BODY>

</HTML>

Résultat :

PRINT « Hello Warrior »

La balise <SMALL> (caractères plus petits)

La balise de type conteneur <SMALL> permet d’écrire du texte plus petit que le reste du
texte.

<HTML>

<HEAD>

<TITLE>Ecrire du texte plus petit</TITLE>

</HEAD>

<BODY>

<SMALL>Petit</SMALL> est plus <SMALL>petit</SMALL> que le reste du texte

</BODY>

</HTML>

Résultat :

Petit est plus petit que le reste du texte

La balise <STRONG> (marquer du texte)

<STRONG> (du type conteneur) permet de marquer du texte.

<HTML>

<HEAD>

<TITLE>Marquer du texte</TITLE>

</HEAD>

<BODY>

<STRONG>Marquer</STRONG>

</BODY>

</HTML>

Résultat :

Marquer

La balise <TT> (machine à écrire)

La balise du type conteneur <TT> est utilisée pour du texte comme une machine à écrire.

<HTML>

<HEAD>

<TITLE>La machine à écrire selon la balise TT</TITLE>

</HEAD>

<BODY>

<TT>Voici du texte écrit à la machine à écrire</TT>

</BODY>

</HTML>

Résultat :

Voici du texte écrit à la machine à écrire

La balise <VAR> (variable)

La balise <VAR> du type conteneur est utilisée pour afficher une variable à utiliser
dans un programme ou un script.

<HTML>

<HEAD>

<TITLE>Une variable avec la balise VAR</TITLE>

</HEAD>

<BODY>

<VAR>Var1</VAR>

</BODY>

</HTML>

Résultat :

Var1

Les titres que nous allons détailler ne seront pas affichés comme la balise <TITLE> dans la barre
de titre du navigateur.

Ce sont ceux qui seront affichés dans la fenêtre, sur votre page. Par exemple, le titre de
cette page est Les titres et sous-titres.

Il existe 6 niveaux de titres différents, le 1 étant le plus gros et le 6 le plus petit.

Pour écrire un titre on utilise la balise de type conteneur <H1>, <H2>,
<H3>, <H4>, <H5> ou <H6> selon le titre que l’on veut
utiliser.

Exemple d’utilisation :

<HTML>

<HEAD>

<TITLE>Les titres et sous-titres</TITLE>

</HEAD>

<BODY>

<H1>TITRE DE NIVEAU 1</H1>

<H2>TITRE DE NIVEAU 2</H2>

<H3>TITRE DE NIVEAU 3</H3>

<H4>TITRE DE NIVEAU 4</H4>

<H5>TITRE DE NIVEAU 5</H5>

<H6>TITRE DE NIVEAU 6</H6>

</BODY>

</HTML>

Et voici les différents titres :

TITRE DE NIVEAU 1

TITRE DE NIVEAU 2

TITRE DE NIVEAU 3

TITRE DE NIVEAU 4

TITRE DE NIVEAU 5

TITRE DE NIVEAU 6

1. Les attributs communs
2. Attributs de la balise <BODY>
   1. BGCOLOR
   2. TEXT
   3. BACKGROUND
   4. LINK, ALINK, VLINK
3. Attributs des balise <H1>, <H2>…

Chaque balise HTML, quel soit du type marqueur ou conteneur, peut recevoir ce qu’on appel un
attribut.

Un attribut, c’est en quelque sortes une propriété. Et comme toute propriété, on peut leur
affecter une valeur.

Pour affecter une valeur à un attribut, on utilise le signe = (égal).

Cela donne attribut=valeur, avec pour attribut le nom de l’attribut et pour
valeur, la valeur que l’on souhaite lui affecter.

Selon le type d’attribut, la valeur peut être soit du texte, soit numérique, soit un des deux,
soit un peu des deux, soit ne pas avoir de valeur du tout et se suffir à lui même.

Les attributs communs

Ce sont des attributs que toutes les balises HTML (sauf exception, bien sur) peuvent
recevoir. Ainsi, on a dans l’ordre alphabétique :

• class : Cette argument contient le nom d’une classe qui a été définie à
  l’aide de feuilles de styles.


• dir : Il indique dans quel sens doivent être écrit les mots (gauche-doite,
  droite-gauche).


• id : Il définit un identificateur, un peu ce que l’on appelle une étiquette
  dans les langages de programmation. Cette identificateur servira notament pour les liens.


• style : Cette argument permet d’appliquer un style directement sur
  l’élement.


• title : À ne pas confondre avec la balise <TITLE>. Il affiche dans une infobulle
  le texte placé à sa suite. L’infobulle, c’est le petit texte qui s’affiche lorsque l’on
  reste un certain temps en stationnement au dessus d’un élement.

Ainsi, sur un titre de niveau 5, on peu par exemple utiliser l’attribut title pour afficher une
infobulle lorsque le lecteur de vos pages stationnera un temps plus ou moins long sur votre titre :

<HTML>

<HEAD>

<TITLE>Exemple d’utilisation d’un attribut commun</TITLE>

</HEAD>

<BODY>

<H5 title= »Ceci est une infobulle »>Placez votre souris sur ce titre pour

voir l’infobulle</H5>

</BODY>

</HTML>

Résultat :

Placez votre souris sur ce titre pour voir l’infobulle

Attributs de la balise <BODY>

BGCOLOR

L’attribut bgcolor fixe la couleur d’arrière plan de la page. Pour l’emploi des couleurs
se référer au chapitre correspondant. Exemple :

<HTML>

<HEAD>

<TITLE>L’attribut BGCOLOR dans BODY</TITLE>

</HEAD>

<BODY bgcolor=black>

</BODY>

</HTML>

Cliquez-ici pour voir le résultat

TEXT

text fixe la couleur du texte. Là aussi, reportez-vous au chapitre correspondant.

<HTML>

<HEAD>

<TITLE>L’attribut TEXT dans BODY</TITLE>

</HEAD>

<BODY bgcolor=black text=white>

Ceci est du texte blanc écrit sur un fond noir

</BODY>

</HTML>

Cliquez-ici pour voir le résultat

BACKGROUND

L’attribut background permet d’afficher une image en arrière plan. Il faut pour cela
indiquer l’URL de l’image correspondante. Reportez-vous au chapitre des images et des URL.

<HTML>

<HEAD>

<TITLE>L’attribut BACKGROUND dans BODY</TITLE>

</HEAD>

<BODY background= »http://pcwarrior.multimania.com/images/bromelfe.jpg »>

</BODY>

</HTML>

Cliquez-ici pour voir le résultat

LINK, ALINK, VLINK

link permet de fixer la couleur que l’on veut attribuer au liens de la page. L’attribut
alink fixe celle des liens actifs. vlink, se sont les liens visités.

<HTML>

<HEAD>

<TITLE>Les attributs LINK, ALINK et VLINK dans BODY</TITLE>

</HEAD>

<BODY link=red alink=blue vlink=black>

</BODY>

</HTML>

À noter que désormais, tout ces arguments de <BODY> peuvent être facilement remplacés par une
feuille de style.

Attributs des balise <H1>, <H2>…

Il n’existe qu’un seul et unique argument pour les titres et sous-titres (ormis les attributs
communs, bien sûr) : l’attribut align. Il définit l’alignement horizontal du titre. Il
peut prendre trois valeurs :

• left alignement du titre à gauche (option par défaut)


• center alignement du titre au centre


• right alignement à droite

Exemple :

<H3 align= »right »>Titre à droite</H3>

Résultat :

Titre à droite

1. Attributs de la balise PRE

Si jamais on veut vraiment écrire du texte en respectant la mise en page pré-établie, c’est à
dire en concervant les espaces et les sauts de lignes, il faut utiliser la balise du type
conteneur <PRE>.

<PRE> (pour preformated) permet en effet de réaliser une mise en page accéptable. Avant
HTML 4, on ne pouvait aligner convenablement des données dans un tableau qu’en l’utilisant.
De plus, cette balise applique une police à pas fixe, c’est à dire que la largeur du l et
la même que celle du X.

C’est d’ailleur cette balise que j’utilise pour écrire les exemples dans les cours. Voici un
exemple d’application :

<HTML>

<HEAD>

<TITLE>Exemple d’utilisation de la balise PRE</TITLE>

</HEAD>

<BODY>

<PRE>

————————————————————–

|  14ème étape du Tour de France 2000, Briançon-Courchevel   |

————————————————————–

| Etape:                                                     |

|                                                            |

|  1.  Marco Pantani (ITA, Mercatone Uno)      en 5 h 34′46″ |

|  2.  Jimenez       (ESP, Banesto)                  à 41″   |

|  3.  Heras         (ESP, Kelme-Costa Blanca)       à 50″   |

|  4.  Armstrong     (USA, US Postal)                  m.t   |

|  5.  Nardello      (ITA, Mapei-Quick Step)         à 1′    |

|  6.  Botero        (COL, Kelme-Costa Blanca)       à 1′9″  |

|  7.  Lelli         (ITA, Cofidis)                  à 2′17″ |

|  8.  Escartin      (COL, Kelme-Costa Blanca)       à 2′21″ |

|  9.  Moreau        (FRA, Festina)                    m.t   |

|  10. Virenque      (FRA, Polti)                      m.t   |

————————————————————–

</PRE>

</BODY>

</HTML>

Le résultat, vous l’aurrez deviné sera :

————————————————————–

|  14ème étape du Tour de France 2000, Briançon-Courchevel   |

————————————————————–

| Etape:                                                     |

|                                                            |

|  1.  Marco Pantani (ITA, Mercatone Uno)      en 5 h 34′46″ |

|  2.  Jimenez       (ESP, Banesto)                  à 41″   |

|  3.  Heras         (ESP, Kelme-Costa Blanca)       à 50″   |

|  4.  Armstrong     (USA, US Postal)                  m.t   |

|  5.  Nardello      (ITA, Mapei-Quick Step)         à 1′    |

|  6.  Botero        (COL, Kelme-Costa Blanca)       à 1′9″  |

|  7.  Lelli         (ITA, Cofidis)                  à 2′17″ |

|  8.  Escartin      (COL, Kelme-Costa Blanca)       à 2′21″ |

|  9.  Moreau        (FRA, Festina)                    m.t   |

|  10. Virenque      (FRA, Polti)                      m.t   |

————————————————————–

Attributs de la balise PRE

Outre les attributs commun, la balise <PRE> posséde l’attribut width. Sa valeur est le
nombre de caractères de la largeur du bloc à afficher. Mais même dans les dernières version
d’HTML, les navigateurs semblaient l’ignorer. Son emploi est donc a déconseiller.

Que l’on qualifie HTML de langage de programmation ou pas, les commentaires existent pourtant
bel et bien.

Un commentaire, c’est quelque chose qui ne va pas apparaître dans le document (avec les scripts,
les feuilles de style et compagnie, ce n’est pas forcement vrai). On peut donc écrire ce que l’on
veut à l’intérieur de cette balise. On peut y mettre des informations propres à l’auteur et au
document, comme la date de création de la page, la dernière mise à jour… On peut aussi y mettre
pourquoi on a utiliser tel ou tel balise plutôt que celle-ci…

Un commentaire en HTML se présente ainsi :

<!– Ceci est un commentaire. Il ne sera donc pas affiché. –>

Un commentaire peut être sur une ou plusieurs lignes, ce qui est très utile pour que le navigateur
ignore une partie du document de façon temporaire, en raison d’essais concernant la présentation
par exemple. Si on avait repris l’exemple utilisé dans la partie consacrée au texte préformaté,
on aurrait pu passer les résultats de l’étape en commentaire très facilement :

<HTML>

<HEAD>

<TITLE>Les commentaires</TITLE>

</HEAD>

<BODY>

<PRE>

<!–

————————————————————–

|  14ème étape du Tour de France 2000, Briançon-Courchevel   |

————————————————————–

| Etape:                                                     |

|                                                            |

|  1.  Marco Pantani (ITA, Mercatone Uno)      en 5 h 34′46″ |

|  2.  Jimenez       (ESP, Banesto)                  à 41″   |

|  3.  Heras         (ESP, Kelme-Costa Blanca)       à 50″   |

|  4.  Armstrong     (USA, US Postal)                  m.t   |

|  5.  Nardello      (ITA, Mapei-Quick Step)         à 1′    |

|  6.  Botero        (COL, Kelme-Costa Blanca)       à 1′9″  |

|  7.  Lelli         (ITA, Cofidis)                  à 2′17″ |

|  8.  Escartin      (COL, Kelme-Costa Blanca)       à 2′21″ |

|  9.  Moreau        (FRA, Festina)                    m.t   |

|  10. Virenque      (FRA, Polti)                      m.t   |

————————————————————–

–>

</PRE>

</BODY>

</HTML>

Evidemment, rien ne serra affiché. Concernant les commentaires, il est conceillé d’éviter d’imbriquer
des commentaires les uns dans les autres. Si en toute logique, c’est possible, dans la pratique,
certains navigateurs risque d’interpréter le tout à leur sauce et d’afficher un résultat désastreux.
De la même façon, les tirets qui se suivent et les points d’exclamations fantaisistes sont à
utiliser avec modérations.

Par contre, les caractères accentués sont de mises (Ceci est une remarque anticipée concernant
ce qui va suivre).

Une entité est le nom alloué à un caractère plus ou moins spécial, suceptible d’apparaître dans
un document HTML. En effet, le langage de référence sur la toile est l’english. Or, ces derniers
ne connaissent pas les caractères accentués et fatalement, ça pose problème. Ce qui fait que
ces même caractères doivent (normalement) êtres codés pour pouvoir être affichés covenablement
par n’importe quel navigateur, quel que soit la configuration de la machine de l’utilisateur. On peut coder
ces caractères avec le code ASCII correspondant (&#224; pour à, par exemple). Mais le texte deviendra
vite incompréhensible sans navigateur. C’est pourquoi on a créé les entitées qui ont un nom proche
du caractère. Voici un texte comportant pas mal d’accents :

Différence entre l’esprit de géométrie et l’esprit de finesse.

En l’un, les principes sont palpables, mais éloignés de l’usage commun; de sorte

qu’on a peine à tourner la tête de ce côté-là, manque d’habitude : mais pour peu

qu’on l’y tourne, on voit les principes à plein; et il faudrait avoir tout à fait

l’esprit faux pour mal raisonner sur des principes si gros qu’il est presque

impossible qu’ils échappent.

PASCAL Pensées

Et voici comment il devrait être, avec chaque caractère accentué remplacé par son entité :

Différence entre l’esprit de géométrie et l’esprit de finesse.

En l’un, les principes sont palpables, mais éloignés de l’usage

commun; de sorte qu’on a peine à tourner la tête de ce côté-

là, anque d’habitude : mais pour peu qu’on l’y tourne, on voit les principes

à plein; et il faudrait avoir tout à fait l’esprit faux pour mal

raisonner sur des principes si gros qu’il est presque impossible qu’ils

échappent.

PASCAL Pensées

Pour connaitre l’entités correspondante (ou le code), reportez-vous au tableau suivant :

Les entités de caractère

Caractère	Code	Entité	Caractère	Code	Entité
"	"	"	&	&	&
<	&#60;	&lt;	>	&#62;	&gt;
	&#160;	&nbsp;	¡	&#161;	&iexcl;
¢	&#162;	&cent;	£	&#163;	&pound;
¤	&#164;	&curren;	¥	&#165;	&yen;
¦	&#166;	&brvbar;	§	&#167;	&sect;
¨	&#168;	&uml;	©	&#169;	&copy;
ª	&#170;	&ordf;	«	&#171;	&laquo;
¬	&#172;	&not;	­	&#173;	&shy;
®	&#174;	&reg;	¯	&#175;	&macr;
°	&#176;	&deg;	±	&#177;	&plusmn;
²	&#178;	&sup2;	³	&#179;	&sup3;
´	&#180;	&acute;	µ	&#181;	&micro;
¶	&#182;	&para;	·	&#183;	&middot;
¸	&#184;	&cedil;	¹	&#185;	&sup1;
º	&#186;	&ordm;	»	&#187;	&raquo;
¼	&#188;	&frac14;	½	&#189;	&frac12;
¾	&#190;	&frac34;	¿	&#191;	&iquest;
À	&#192;	&Agrave;	Á	&#193;	&Aacute;
Â	&#194;	&Acirc;	Ã	&#195;	&Atlide;
Ä	&#196;	&Auml;	Å	&#197;	&Aring;
Æ	&#198;	&AElig;	Ç	&#199;	&Ccedil;
È	&#200;	&Egrave;	É	&#201;	&Eacute;
Ê	&#202;	&Ecirc;	Ë	&#203;	&Euml;
Ì	&#204;	&Igrave;	Í	&#205;	&Iacute;
Î	&#206;	&Icirc;	Ï	&#207;	&Iuml;
Ð	&#208;	&ETH;	Ñ	&#209;	&Ntlide;
Ò	&#210;	&Ograve;	Ó	&#211;	&Oacute;
Ô	&#212;	&Ocirc;	Õ	&#213;	&Otlide;
Ö	&#214;	&Ouml;	×	&#215;	&times;
Ø	&#216;	&Oslah;	Ù	&#217;	&Ugrave;
Ú	&#218;	&Uacute;	Û	&#219;	&Ucirc;
Ü	&#220;	&Uuml;	Ý	&#221;	&Yacute;
Þ	&#222;	&THORN;	ß	&#223;	&szlig;
à	&#224;	&agrave;	á	&#225;	&aacute;
â	&#226;	&acirc;	ã	&#227;	&atilde;
ä	&#228;	&auml;	å	&#229;	&aring;
æ	&#230;	&aelig;	ç	&#231;	&ccedil;
è	&#232;	&egrave;	é	&#233;	&eacute;
ê	&#234;	&ecirc;	ë	&#235;	&euml;
ì	&#236;	&igrave;	í	&#237;	&iacute;
î	&#238;	&icirc;	ï	&#239;	&iuml;
ð	&#240;	&eth;	ñ	&#241;	&ntilde;
ò	&#242;	&ograve;	ó	&#243;	&oacute;
ô	&#244;	&ocirc;	õ	&#245;	&otilde;
ö	&#246;	&ouml;	÷	&#247;	&divide;
ø	&#248;	&oslash;	ù	&#249;	&ugrave;
ú	&#250;	&uacute;	û	&#251;	&ucirc;
ü	&#252;	&uuml;	ý	&#253;	&yacute;
þ	&#254;	&thorn;	ÿ	&#255;	&yuml;
Œ	&#338;	&OElig;	œ	&#339;	&oelig;
•	&#8226;	&bull;	…	&#8230;	&hellip;
€	&#8364;	&euro;	™	&#8482;	&trade;

1. Les attributs
   1. href
   2. target
   3. accesskey
   4. tabindex
2. La syntaxe d’un lien

La principale technologie de la toile repose sur les liens. Un lien, c’est la parcelle du document
sur laquelle vous cliquez et qui vous mêne à un endroit bien précis. Lorque vous cliquez sur les
petites flêches en bas de cette page par exemple.

Un lien est constitué de la balise <A> de type conteneur :

<HTML>

<HEAD>

<TITLE>Les liens</TITLE>

</HEAD>

<BODY>

<A href= »http://www.cybwarrior.com/langages/images/bromelfe.jpg »>Cliquez-ici

pour voir le Warrior !</A>

</BODY>

</HTML>

Et voici l’affichage classique d’un lien, sans feuilles de style :

Cliquez-ici pour voir le Warrior !

Normalement, le lien est ouvert dans la même fenêtre. Ici, j’ai jugé utile de l’ouvrir dans une
nouvelle fenêtre.

Les attributs

href

Vous remarquez qu’on a utilisé l’attribut href. Cet attribut spécifie l’URL (Uniform
Resource Locator) du document à afficher. Ici, c’est une image. Mais on aurrait tout aussi
bien pu spécifier l’URL d’un fichier ZIP, d’une vidéo MPEG ou tout simplement d’un autre document
HTML.

target

L’attribut target (cible) sert à déterminer l’endroit où sera ouvert le document
précisé par l’URL. On s’en sert surtout dans un site composé de cadres, comme celui-ci. Vu que
les cadres n’ont pas encore été étudiés, nous ne rentrerons pas plus dans le détail.

Sachez seulement que cet attribut contient le nom de l’endroit où ouvrir le lien.

accesskey

accesskey permet d’associer une touche d’accés (un racourci clavier) à un lien. En théorie,
si le lecteur de la page appuie sur la touche spécifié, le lien s’ouvira. En pratique, seul Internet
Explorer semble le reconnaître. Et encore, il faut maintenir la touche ALT enfoncé pendant l’appui
sur la touche. Mais qui dit appui sur la touche ALT, dit activation de la barre de menu du navigateur!
Ce qui fait que si la touche normalement associée au lien figure comme mnémonique dans la barre,
le menu va s’ouvir à la place du lien.

Exemple :

<A href= »http://www.cybwarrior.com » accesskey= »I »>Appuyez sur ALT + I pour

vous placer sur ce lien</A>

Résultat (uniquement sous Internet Explorer) :

Appuyez sur ALT + I pour vous placer sur ce lien

tabindex

Cet attribut fixe l’ordre de défilement des liens lors de l’appui sur la touche TAB. En effet,
vous aurez certainement remarqué au cours de vos longs surfs que l’appui sur TAB permet de se
déplacer de liens en liens.

Si tabindex n’est pas spécifié, c’est l’ordre d’apparition qui est adopté.

Mais bon, la encore, seul Internet Explorer est capable d’utiliser cet attribut…

Voici tout de même un exemple :

<A href= »http://www.cybwarrior.com/langages/images/bromelfe.jpg » tabindex=2>Le

Guerrier (deuxième lien avec TAB)</A><BR>

<A href= »http://www.cybwarrior.com/langages/images/pirate.gif » tabindex=1>Le Pirate

(premier lien avec TAB)</A>

Et ici, un résultat :

Le Guerrier (deuxième lien avec TAB)

Le Pirate (premier lien avec TAB)

La syntaxe d’un lien

Il faut savoir qu’un lien est tout d’abord composé d’un protocole :

• http:// débute l’URL d’un document HTML, d’une image…


• mailto: permet d’ouvrir la messagerie du lecteur.


• ftp:// est utiliser pour accéder à un serveur de transfert de fichiers.


• file:/// sert à chercher un fichier sur sa propre machine, sans pour autant être
  connecté à l’Internet.


• news: permet d’accéder aux news de l’Usenet.

Ensuite, il faut faire la distinction entre les URL absolues ou relatives. Une URL absolue, c’est
lorsque vous indiquez la totalité de l’adresse du lien. Par exemple :

<A href= »http://www.cybwarrior.com/langages/images/bromelfe.jpg »>Cliquez-ici

pour voir le Warrior !</A>

Avec une URL relative, on donne l’adresse d’un lien présent sur le même disque que la page appelante.
En fait, on fait comme sous DOS. Imaginez que vous êtes dans le répertoire C:\Program Files.

Pour pouvoir lancer le jeu Winmine.exe de cet emplacement, vous avez deux solutions :

• Ecrire C:\Windows\Winmine.exe (comparable à l’URL absolue)


• Ecrire ..\Windows\Winmine.exe (comparable à l’URL relative)

Et bien c’est pareil. Les deux liens ci-dessous ont donc le même effet :

<A href= »http://www.cybwarrior.com/langages/images/pirate.gif »>Pirate absolu</A>

<A href= »langages/images/pirate.gif »>Pirate relatif</A>

En théorie, une URL absolu est beaucoup plus longue à se charger. On enploiera donc le plus possible
des URL relatives.



Une troisième et dernière syntaxe des liens concerne les liens dans la même page. Vous pouvez
trouver ce type de lien sur certaines de ces pages.

Un lien tel que celui-ci est composé de deux choses :

• Le lien qui va aller à la partie du document concernée.


• Le lien qui va marquer la partie du document.

Pour marquer une partie d’un document, on utilise la balise <A> avec l’attribut name.
Cette attribut va contenir le nom de la partie du document.

Maintenant, pour aller à cette partie du document, on utilise un lien tout ce qu’il y a de plus
classique. La seule différence se trouve dans l’URL. Pour faire comprendre au navigateur qu’il
ne s’agit pas d’un autre document mais d’un lien se trouvant dans la page, il faut faire précéder le
nom de la partie du document du caractère # (dièse).

Voici un exemple :

<A name= »Sommaire »>Sommaire</A><BR>

<BR>

<A href= »#Un »>Partie 1</A><BR>

<A href= »#Deux »>Partie 2</A><BR>

<A href= »#Trois »>Partie 3</A><BR>

<BR>

<BR>

<BR>

<A name= »Un »>Ceci est la partie 1 de ce document</A><BR>

<A name= »Deux »>Ceci est la partie 2 de ce document</A><BR>

<A name= »Trois »>Ceci est la partie 3 de ce document</A><BR>

<BR>

<A href= »#Sommaire »>Retour au sommaire</A>

Et voici le résultat :

Sommaire



Partie 1

Partie 2

Partie 3







Ceci est la partie 1 de ce document

Ceci est la partie 2 de ce document

Ceci est la partie 3 de ce document



Retour au sommaire

Mais on peut marquer un paragraphe avec autre chose que la balise <A>. C’est la qu’intervient
l’attribut commun id détaillé précedemment. Voici le code HTML qui a été employé pour le
titre de cette page que vous lisez :

<H2 id= »Titre »>Les liens</H2>

Et voici le code du lien ci-dessous :

<A href= »#Titre »>Aller en haut de la page</A>

Vous l’aurez compris, cliquer sur ce lien aurra pour effet de retourner en haut de cette page.

Aller en haut de la page