Le HTML Accueil Récapitulatif 1.Introduction 2.Le texte 3.Liens hypertextes 4.Images 5.Tableaux
3. Les liens hypertextes
Cliquez ici pour télécharger ce chapitre, ce qui vous permettra de le consulter sans être connecté.

1. Introduction
2. Le choix du dossier
3. Lien vers un e-mail
3. Lien interne à la page (ancre)

Introduction.

Les liens hypertextes sont la caractéristique du HTML, ils sont indispensables à la navigation entre les pages.

L'instruction de création de lien est <A HREF=""> pour marquer le début de création de lien (où il faut mettre entre les guillemets le nom de la page) et </A> pour indiquer la fin de lien.
Imaginons que vous voulez créer un lien vers un fichier .htm nommé page2.htm, qui se trouve dans le même dossier que le fichier .htm où va être créé le lien.

Code source de l'exemple donné ci-dessus.
Source (à enregistrer en .htm) Aperçu
<HTML>
<HEAD><TITLE>Premier test de lien</TITLE></HEAD>
<BODY>

Cliquez <A HREF="page2.htm">ici</A> pour accéder à la 2ème page.

</BODY>
</HTML>
Vous remarquez alors dans cet exemple que le mot ici, placé entre le <A HREF="page2.htm"> et le </A> crée un lien vers page2.htm


Remarques :
  • Vous pouvez tout à fait créer un lien vers un fichier dont le type est autre que .htm (.zip, etc ...). Il apparaîtra alors, que ce soit sous Internet Explorer ou Netscape, une fenêtre de téléchargement.
  • Vous pouvez aussi insérer un <FONT SIZE="" COLOR=""> pour votre lien. Il faudra alors mettre cette instruction après l'instruction <A HREF=""> et refermer par </FONT> avant </A>.

    Lorsque le fichier vers lequel vous faites un lien se trouve dans un sous dossier par rapport à votre document .htm qui crée le lien, il faudra alors l'indiquer.
    Prenons un exemple. Votre fichier .htm (appelons le page1.htm) est dans le dossier C:\Windows\Bureau\Siteweb\ et le dossier du fichier (disons page2.htm) vers lequel vous voulez créer un lien est C:\Windows\Bureau\Siteweb\dossier\ . Pour mieux comprendre, regardez le schéma ci-contre.

    Le code sera alors : 
    <HTML>
<HEAD>
	<TITLE>Test d'un lien vers un fichier situé dans un sous-dossier</TITLE>
</HEAD>
<BODY>

Cliquez <A HREF="dossier/page2.htm">ici</A> pour accéder à la 2ème page.

</BODY>
</HTML>
    Vous remarquez alors qu'on indique le nom du sous-dossier suivi d'un / (et non d'un \ : attention, c'est souvent source d'erreur !).
    Le décalage du TITLE est normal, j'ai mis une tabulation afin qu'il soit plus en valeur. Le HTML ne prend pas en compte les tabulations, nous le reverrons plus tard.


    Imaginons maintenant qu'à partir de page2.htm, vous voulez faire un lien vers page1.htm, qui se trouve dans le dossier parent (cf schéma ci-contre).


    Le code source sera alors : 
    <HTML>
<HEAD>
	<TITLE>Test d'un lien vers un fichier situé dans le dossier parent</TITLE>
</HEAD>
<BODY>

Cliquez <A HREF="../page1.htm">ici</A> pour accéder à la 1ère page.

</BODY>
</HTML>
    Vous remarquez alors que le dossier parent est indiqué par ../

    Attention !
    Dans le chemin d'accès de votre <A HREF="">, jamais on ne doit voir apparaître C:, etc... En effet, une fois que votre site sera envoyé sur un serveur, C: n'existera plus !

  • Il est également possible de faire un lien vers une adresse e-mail. Lorsque l'utilisateur cliquera sur ce lien, son logiciel de messagerie s'ouvrira (Outlook par exemple), sans qu'il ait à taper l'adresse du destinataire.
    Il suffit de faire un lien précédé de mailto: .
    Par exemple, pour faire un lien vers l'e-mail login@domaine.com , le lien à faire sera :
    <A HREF="mailto:login@domaine.com">Cliquez ici pour envoyer un e-mail</A>
    Il est même possible de préciser à l'avance l'objet du message. Exemple :
    Créer un lien vers l'adresse e-mail login@domaine.com avec comme sujet Bonjour.
    Source (à enregistrer en .htm) Aperçu
    <HTML>
    <HEAD><TITLE>Lien vers un e-mail</TITLE></HEAD>
    <BODY BGCOLOR="#FFFFCC">

    Envoyer un <A HREF="mailto:login@domaine.com?subject=Bonjour">e-mail</A>.

    </BODY>
    </HTML>

    Puis en cliquant sur ici :


  • Liens internes à la page :

    Les liens internes à la page permettent de ce rendre rapidement à un endroit précis d'une page (longue en général).
    Il faut alors créer ce qu'on appelle une ancre avec l'instruction <A NAME=""> où l'on choisit le nom de cette ancre entre les guillemets.
    Après, dans la même page, il est possible de faire un lien vers l'endroit où est située cette ancre en faisant comme suit : <A HREF="#nom de l'ancre">texte</A>.
    C'est ainsi qu'est fait le sommaire situé en haut de cette page.