![[ INRIA Rocquencourt ]](../icons/inria-rocq.gif){kind=icon}
est sur la ligne de texte.
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
Si vous en ê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 (Unique 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 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 rechercher.
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, ...
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:
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.
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.
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.
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
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
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.
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
Exemple :
source HTML
<OL>
<LI> médaille d'or
<LI> médaille d'argent
<LI> médaille de bronze
</OL>
résultat
Exemple :
source HTML
<DL>
<DT> paragraphe
<DD> un paragraphe est constitué ...
<DT> liste
<DD> une liste est constituée ...
</DL>
résultat
Dans une telle liste, chaque élement de la liste comprend :
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.
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"> <H2> La notion d'URL </H2> </A>
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>
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
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=MIDDLE ALT="[ INRIA Rocquencourt ]"> </A>
résultat
Pour accéder au serveur de Rocquencourt, cliquez sur le logo:
Un conseil :
On dit souvent qu'une image vaut 10 000 mots. Evitez 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 .
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 ":".
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.
Voici quelques conseils supplémentaires pour vous aider à préparer vos documents HTML :
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.