Brève présentation du langage HTML


Version : 1.0
Date de la dernière modification : 18 juillet 1996
Auteur : Michel Loyer


Ce document n'est qu'une brève présentation du langage HTML (Hyper Text Markup Language). Cela implique que toutes les notions de ce langage ne sont pas présentées et que celles qui le sont ne le sont pas de façon exhaustive.

Ce document a pour simple but de permettre aux personnes ne connaissant pas ce langage de pouvoir écrire leurs premiers documents.

Je remercie Pierre Weis pour ses suggestions.

N'hésitez pas à me faire vos remarques.

Michel Loyer


Le plan



Quelques définitions


Si vous êtes en train de lire ce document, c'est que vous souhaitez écrire des documents qui seront accessibles sur le WWW (Word Wide Web), en abrégé le web, en français (au moins au Canada) la toile.

En simplifiant, le web est constitué par l'ensemble des documents que l'on peut accéder sur les ordinateurs connectés sur l'internet, le réseau des réseaux.

Ces documents peuvent eux-même faire des références à d'autres documents à l'aide de liens hypertextes qui permettent d'un simple clic souris d'accéder à ces autres documents.

Pour que cela marche, il faut :

Ce que l'on peut sommairement, décrire ainsi:

Ce que nous avons appelé "le nom et l'adresse" d'un document s'appelle techniquement une URL (Uniform Resource Locator). L'URL d'un document le localise sans ambiguïté en fournissant, en particulier, le nom du serveur sur lequel se trouve ce document et le nom de ce document sur le serveur.

Le dialogue entre les machines sur le réseau sont régis par des conventions précises qu'on appelle les protocoles réseaux.
Le protocole HTTP (HyperText Transfer Protocol) est le protocole qu'utilisent le navigateur et le serveur pour échanger les documents HTML. Il ne faut pas le confondre avec le langage HTML qui sert à écrire les documents hypertextes.

Les navigateurs les plus connus sont Mosaic et Netscape, sans oublier MMM développé à l'INRIA Rocquencourt dans le projet Cristal.


Quelques caractéristiques du langage HTML



La notion d'URL


La localisation d'un document sur le Web se fait par une technique de nommage appelée URL.
Une URL a, généralement, la forme suivante : protocole://serveur[:port]/répertoire/fichier

Le protocole indique le service réseau utilisé pour accéder au document. Le plus fréquemment, ce sera:

Le serveur indique le nom de la machine à laquelle sera transmise la requête.

Le port est un élément facultatif qui apparaît dans certaines URLs lorsque le protocole n'a pas été installé de façon standard sur le serveur.

La dernière partie de l'URL est en général de la forme répertoire/fichier et permet de préciser la localisation du document recherché.

Le nom du fichier se termine par un suffixe qui indique le type du document, ce qui permet au navigateur de savoir comment l'afficher. Par exemple, ".html" (ou ".htm") désigne un fichier écrit en HTML, ".gif" désigne une image écrite au format GIF, ".ps" désigne un fichier au format PostScript, etc ...


La structure générale d'un document HTML


Voici un document minimaliste mais ... complet :

<HTML>
   <HEAD>
     <TITLE>  Titre de la page. </TITLE>
   </HEAD>
   <BODY>
    Contenu de la page.
   </BODY>
</HTML>

On voit qu'un document HTML se divise en deux parties:

l'en-tête (<HEAD> ... </HEAD>)
Il doit comprendre un titre (pas trop long) qui sera utilisé dans les signets (bookmarks) pour désigner le document.
Attention : l'en-tête n'étant pas forcément visualisé, pensez à éventuellement reprendre le titre dans le corps du document.
le corps (<BODY> ... </BODY>)
Il contient le document structuré. Toutes les indications de mises en page ou directives que nous verrons ultérieurement sont à placer dans le corps du document.

Un conseil :
Bien que ce ne soit nullement obligatoire, prenez l'habitude d'écrire les directives en majuscules.


Les premiers éléments de mise en page


Lorsque vous rédigez un document HTML, les retours à la ligne et les lignes blanches que vous introduisez ne sont pas pris en compte lors de la visualisation du document. Pour structurer votre document, vous devez utiliser des directives spécifiques.

Paragraphe

Pour créer un paragraphe, il suffit de précéder le texte qui le compose de la directive <P>.

Exemple :

source HTML

<P>
Voici le texte du premier paragraphe. Voici le texte du premier paragraphe.
Voici le texte du premier paragraphe. Voici le texte du premier paragraphe.
Voici le texte du premier paragraphe. Voici le texte du premier paragraphe.
<P>
Voici le texte du second  paragraphe. Voici le texte du second  paragraphe.
Voici le texte du second  paragraphe. Voici le texte du second  paragraphe.
Voici le texte du second  paragraphe. Voici le texte du second  paragraphe.

Voici le texte du second  paragraphe. Voici le texte du second  paragraphe.
Voici le texte du second  paragraphe.

résultat

Voici le texte du premier paragraphe. Voici le texte du premier paragraphe. Voici le texte du premier paragraphe. Voici le texte du premier paragraphe. Voici le texte du premier paragraphe. Voici le texte du premier paragraphe.

Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe. Voici le texte du second paragraphe.

Retour à la ligne

Dans un paragraphe, vous pouvez imposer un retour à la ligne en utilisant la directive <BR>.

Exemple :

source HTML

Après cette première phrase, 
je force un retour ligne. <BR> Cette seconde phrase commence en tête
d'une ligne.

résultat

Après cette première phrase, je force un retour ligne.
Cette seconde phrase commence en tête d'une ligne.

Ligne de séparation

Vous pouvez introduire une ligne de séparation en plaçant la directive <HR>.

Exemple :

source HTML

Ce texte est au-dessus d'une ligne de séparation
<HR>
Ce texte est au-dessous d'une ligne de séparation

résultat

Ce texte est au-dessus d'une ligne de séparation


Ce texte est au-dessous d'une ligne de séparation

Titre

Vous pouvez utiliser des titres de différentes grosseurs. Il existe 6 niveaux de titres possibles :

Exemple :

source HTML

<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>

résultat

titre de niveau 1

titre de niveau 2

titre de niveau 3

titre de niveau 4

titre de niveau 5
titre de niveau 6

Style

L'utilisation de différents styles de polices de caractères permet de varier la présentation d'un texte. En HTML, on peut utiliser des styles logiques où le nom du style indique la nature du fragment de texte à écrire dans ce style ou des styles physiques où le nom du style indique explicitement le style de police que l'on souhaite voir utiliser.

Voici les principaux styles utilisés :

Attention: la correspondance que vous constatez peut-être entre styles logiques et styles physiques n'est pas garantie. Cela dépend du navigateur.

Liste non numérotée

Vous pouvez également structurer un document à l'aide de listes. La forme la plus usuelle est la liste non numérotée que l'on encadre entre les directives <UL> et </UL>. Chaque élement de la liste est précédé d'une directive <LI>.

Exemple :

source HTML

<UL>
   <LI> le monde minéral
   <LI> le monde végetal
   <LI> le monde animal
</UL>

résultat

Un élément de liste peut contenir une autre liste :

Exemple :

source HTML

<UL>
   <LI> le monde minéral
   <LI> le monde végetal
   <LI> le monde animal, subdivisé en
        <UL>
         <LI> de l'air
         <LI> de la terre
         <LI> de l'eau
        </UL>
</UL>

résultat

Autres listes

liste numérotée (<OL> ... </OL>)

Exemple :

source HTML

      <OL>
         <LI> médaille d'or
         <LI> médaille d'argent
         <LI> médaille de bronze
      </OL>

résultat

  1. médaille d'or
  2. médaille d'argent
  3. médaille de bronze

liste de définitions (<DL> ... </DL>)

Exemple :

source HTML

       <DL>
          <DT> paragraphe
              <DD> un paragraphe est constitué ...
          <DT> liste 
              <DD> une liste est constituée ... 
       </DL>

résultat

paragraphe
un paragraphe est constitué ...
liste
une liste est constituée ...

Dans une telle liste, chaque élement de la liste comprend :


Mettre des liens hypertextes


Les éléments d'HTML présentés jusqu'à présent ne permettent pas de référencer d'autres documents, ce qui est l'intérêt majeur de HTML. Ces références à d'autres documents se font à l'aide de liens hypertextes .

La portion de texte associée à un lien doit être comprise entre les directives <A HREF="URL"> et </A> qui définissent ce qu'on appelle une ancre.

Il suffira alors de cliquer sur cette portion de texte pour automatiquement avoir accès au nouveau document associé à ce lien, document dont l'URL est donnée à la suite du mot-clé HREF (Hypertext REFerence).

Exemple :

source HTML

Vous pouvez accéder à une présentation de 
l'<A HREF="http://www.inria.fr/">INRIA</A>.

résultat

Vous pouvez accéder à une présentation de l'INRIA.

Attention : N'oubliez pas de mettre l'URL entre " ... "

Dans un document, on peut également référencer un autre document par une URL relative à la localisation du premier document en utilisant les techniques de nommage relatif usuelles d'Unix.

Exemple :

Le source suivant

Un autre document se trouve <A HREF="rep1/document.html"> ici </A>.

permet d'indiquer que document.html est dans le sous-répertoire rep1 du répertoire contenant le document courant.

Un conseil :
Entre documents situés sur un même serveur, utilisez de préférence des URLs relatives car cela est plus efficace. De plus, pour un document composé de plusieurs fichiers HTML, si vous utilisez des URLs relatives pour les liens entre ces fichiers, cela facilitera la maintenance de ces liens lors d'éventuels changements ultérieurs d'emplacement de ce document.


Mettre des marques


Lorsque l'on clique sur un lien référençant un document HTML, le document est visualisé à partir du début. On peut cependant vouloir avoir un lien vers une partie plus spécifique du document.

Ceci est possible à condition d'avoir mis dans ce document une marque à l'aide d'une ancre <A> contenant l'attribut NAME="nom-de-la-marque".

Pour avoir un lien sur une telle marque, il suffit, dans l'URL désignant le document, de faire suivre le nom du fichier par #nom-de-la-marque

Cela sert aussi à mettre des liens entre différentes sections d'un même document; il suffit alors de mettre le nom de la marque comme URL en omettant le nom du fichier.

Exemple :

Dans ce document, il a été mis la marque :

<A NAME="urls"></A>
<H2> La notion d'URL </H2>

On peut la référencer ainsi :

retour à la section "La notion d'URL"

en écrivant :

retour à la <A HREF="#urls">section "La notion d'URL"</A>


Insérer des images


Pour insérer des images dans les documents HTML, on utilise la directive <IMG>. Cette directive a plusieurs attributs :

Exemple :

source HTML

Le milieu de cette image <IMG SRC="icons/inria-rocq.gif" ALIGN=MIDDLE  ALT="[ INRIA Rocquencourt ]"> est  sur la ligne de  texte. 

résultat

Le milieu de cette image [ INRIA Rocquencourt ]   est sur la ligne de texte.

Comme un texte une image peut être cliquable.

Exemple :

source HTML

Pour accéder au serveur de Rocquencourt, cliquez sur le logo :
<A  HREF="http://www-rocq.inria.fr">
<IMG SRC="icons/inria-rocq.gif" ALIGN=BOTTOM ALT="[ INRIA Rocquencourt ]"> </A>

résultat

Pour accéder au serveur de Rocquencourt, cliquez sur le logo: [ INRIA Rocquencourt ]

Un conseil :
On dit souvent qu'une image vaut 10 000 mots. Evitez donc de mettre des dizaines de milliers de mots inutiles dans vos documents HTML qui ralentiront le chargement de ces documents par vos lecteurs :


Envoyer un courrier depuis un document


Dans un document, il est possible de mettre une zone cliquable qui ne soit pas un lien vers un document mais une invite pour le lecteur à envoyer un courrier.

On utilise pour cela une ancre avec un attribut HREF de la forme "mailto:adresse électronique"

Exemple :

source HTML :

N'hésitez pas à faire vos remarques 
<A HREF="mailto:Michel.Loyer@inria.fr"> en écrivant à l'auteur </A>.

résultat

N'hésitez pas à faire vos remarques en écrivant à l'auteur.


Visualiser un document local


Lorsque vous avez préparé un document HTML sur votre machine, vous pouvez le visualiser à l'aide de votre navigateur en le chargeant à l'aide d'une URL de la forme : file://nom-complet-du-fichier

file indique à votre navigateur que le document se trouve en local sur votre machine.

Attention : Sous Unix, le nom d'un fichier commençant par un "/", il faut trois "/" après le ":".


Les caractères spéciaux


Il existe en HTML trois caractères à usage spécial. Pour insérer un de ces caractères dans un document, il faut le remplacer par une chaîne de caractères :

Par ailleurs, il existe une série de codes permettant de saisir un grand nombre de caractères spéciaux comme ¼, £ ou ©.

Attention : N'oubliez pas le ";" à la fin du caractère spécial.


Derniers conseils


Voici quelques conseils supplémentaires pour vous aider à préparer vos documents HTML :


Pour en savoir plus


Comme prévu, ce document n'a pas épuisé toutes les possibilités du langage HTML.
Pour en savoir plus, vous pouvez vous reporter à :

et ... vous pouvez aussi vous inspirer des (bonnes) pages des autres.