Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Les liens.

Les liens

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Introduction

Un document hypertexte contient des liens vers d'autres documents. (On y accède en cliquant dessus). Ce terme : hypertexte est souvent associé aux fichiers d'aide et documents qui sont liés entre eux.
Les documents hypermédias ressemblent aux documents hypertextes. La différence est qu'ils contiennent en plus des images, des vidéos et du son. On peut par exemple se servir d'une image comme lien.
Un lien est composé de deux parties. La première partie que vous voyez sur la page web est appelée ancre. La seconde est celle qui indique au navigateur ce qu'il doit faire si vous cliquez sur ce lien et est appelée référence URL. Lorsque vous cliquez sur l'ancre d'un lien, le navigateur charge le fichier ou document donnés par la référence URL correspondant au lien.

Les ancres

On peut compter deux types d'ancres différentes : texte ou graphique.

Ancre texte : est constituée d'un mot ou groupe de mots. La plupart du temps, elle est soulignée et dans une couleur différente du texte de la page. Cette apparence est gérée par l'auteur et l'utilisateur.
Vous pouvez observer de nombreuses ancres texte sur cette page : en haut (chat et forum), à gauche (News, C++, HTML, etc...) et en bas (à propos, contact, etc...)
Une ancre texte utilise la balise <a> (voir plus loin).

Voici deux petits exemples :

Source	Résultat
`<a href="http://www.prog-info.org/">Prog-info</a> <a href="index.htm">Sommaire</a>`	Prog-info Sommaire

Ancre graphique : ressemble à une ancre texte mais au lieu de cliquer sur un texte, vous cliquez sur une image qui peut avoir ou non une bordure (attribut border="nombre" pour l'image) d'une certaine couleur. Ces ancres peuvent être utilisées comme des listes à puces, des icônes utilisées souvent pour les menus, les publicités (sponsors qui payent pour voir apparaître leur publicité).

Voici quelques exemples :

Source	Résultat
`<img src="carre.gif"><a href="news.htm"> News</a> <a href="tutorials.htm"><img src="tutorials.gif"></a>`	News
`<a href="http://www.prog-info.org/"><img src="logo.gif"></a>`

Les références URL

L'autre partie du lien est la référence URL, c'est à dire l'adresse de la page web chargée par le navigateur lorsqu'on clique dessus. Cette référence peut être relative ou absolue.

Référence relative : est une référence URL à un fichier se trouvant sur le même ordinateur. L'URL est relative à l'ordinateur et au répertoire à partir desquels le navigateur a chargé la première page. Si votre navigateur charge une page à http://www.monsite.com/docs/, par exemple, une référence à /opengl aurait l'URL : http://www.monsite.com/docs/opengl.
Il faut faire attention à la présence de la balise <base> car dans ce cas, les références relatives fonctionnent différemment. Les références relatives, sont toujours relatives à l'URL fournie par cette balise et non par rapport à la page.

Exemple :

<base href="http://www.monhebergeur.com/monsite/">

            <a href="index.htm">

Quel que soit l'endroit où se trouve la page contenant ces éléments, le lien sera toujours :
http://www.monhebergeur.com/monsite/index.htm
Cette méthode est très pratique, vous avez moins de caractères à taper dans la balise, vous pouvez déplacer les fichiers vers un autre répertoire facilement sur le serveur sans avoir à modifier tous les liens des pages concernées. Attention, cette balise <base>, sert de référence pour la balise <a>, <img> et d'autres.

Référence absolue : spécifie l'ordinateur, le répertoire et le fichier exact. Ces références sont nécessaires pour lier des pages web se trouvant sur d'autres ordinateurs.

Se lier aux fichiers

Ce n'est pas difficile d'ajouter des liens sur vos pages web : il faut dire au navigateur quel élément représente l'ancre et donner l'adresse du document à laquelle vous vous liez.
La balise utilisé est <a>.
L'attribut nécessaire est href, il spécifie l'adresse à laquelle vous voulez vous lier.
<a href="URL"> Ancre </a>
La balise <a> est un conteneur, il faut donc une balise de fermeture qui indique où l'ancre se termine. URL est bien sûr le document auquel vous voulez vous lier.

Exemple :

Source	Résultat
`Si vous souhaitez me contacter, <a href="http://www.prog-info.org/contact.htm">cliquez-ici</a>.`	Si vous souhaitez me contacter, cliquez-ici.

Vous pouvez, à la place du texte mettre aussi bien une image : <a href="http://www.prog-info.org/accueil.htm"><img src="logo.gif"></a><br>Cliquez sur l'image pour entrer.

Astuce : Sur certains navigateurs, lorsque l'utilisateur maintient pendant un certain temps la souris sur le lien, le navigateur affiche le contenu de l'attribut title de la balise <a> dans une petite fenêtre contextuelle.

Exemple :

Source	Résultat
`Voici un <a href="http://www.prog-info.org/" title="Description"> lien</a> avec l'attribut title.`	Voici un lien avec l'attribut title.

Fixer la fenêtre cible

Lorsque vous créez un lien, par défaut, le contenu de la page ciblé sera ouvert dans cette même fenêtre. Vous pouvez, grâce à l'attribut target spécifier dans quelle fenêtre s'ouvrira la cible du lien. Ceci est très intéressant lorsque vous voulez faire un lien vers un autre site web : vous pouvez décider de l'afficher dans une nouvelle fenêtre. Pour cet attribut, vous pouvez mettre le nom que vous voulez ou un des 4 suivants :
- "_blank" : charge le contenu assigné à ce nom dans une nouvelle fenêtre sans nom.
- "_self" : charge le contenue dans la fenêtre courante.
- "_parent"
- "_top"

Exemple :

Source	Résultat
`<a href="http://www.google.fr/" target="_blank">Rechercher sur Google</a> <a href="http://www.ovh.org/" target="hebergement">Hébergement de votre site web</a>`	Recherche sur Google Hébergement de votre site web

Les liens internes

Vous pouvez créer des liens vers des fichiers html mais aussi à l'intérieur d'un même document grâce à des ancres. On peut par exemple, mettre une table des matières en haut d'une page et lier chaque entrée à sa section correspondante.
Deux étapes sont nécessaires pour réaliser ce lien :
- Créer une ancre dans la page html indiquant l'endroit où vous liez. Si vous voulez fournir un lien vers le haut de votre page, vous devez créer une ancre tout en haut et lui donner un nom avec l'attribut name. Cette ancre a un nom car ainsi vous pourrez vous y référer lorsque vous créerez votre lien. L'attribut href n'est donc pas définit. Vous devez toujours utiliser les balises d'ouverture et de fermeture <a>, mais le navigateur ne met pas en surbrillance ce qui se trouve à l'intérieur (n'est pas employé en temps que lien). C'est pour ce la que vous n'êtes pas obligé de mettre du texte entre les deux balises.

Exemple :

Source	Résultat
`<a name="Top">Top</a> <a name="Bas"></a>`	Top

- Il faut maintenant créer un lien. La notation pour ce genre de lien est un peu spéciale. En fait, dans l'attribut href de votre lien, vous devez écrire le signe dièse(#) suivi du nom de l'ancre. Ce signe permet d'indiquer au navigateur que c'est un lien interne. Dès que l'utilisateur clique sur le lien, le haut de la page s'aligne avec l'endroit où vous avez placé votre ancre.

Exemple :

Source	Résultat
`<a href="#Top">Va à l'ancre Top</a> <a href="#Bas">Va à l'ancre Bas</a>`	Va à l'ancre Top Va à l'ancre Bas

Remarque : On peut ajouter à la plupart des éléments ayant l'attribut id comme les headers :
<h2 id="paragraphe3">Les images</h2>
<a href="paragraphe3">Cliquez ici pour aller directement à la rubrique images</a>

Fichiers, contenu associé à un module externe

Lorsque l'utilisateur clique sur un lien vers un autre type de document, le navigateur va dans un premier temps charger le fichier puis l'afficher dans sa fenêtre. Ce qui est le cas par exemple pour les fichiers GIF, JPG. En utilisant des plug-ins (modules externes), vous pouvez afficher le fichier dans la fenêtre du navigateur. Par contre, si le navigateur ne peut pas gérer le fichier, il est chargé. Un programme pourra ensuite exécuter ce fichier. Exemple : fichiers AVI et ZIP.

Créer un lien vers un email

Envoyer un e-mail se fait très souvent sur internet. Si vous souhaitez que les gens vous contactent par exemple, pour donner leur avis sur un sujet, vous aurez besoin de créer un lien e-mail vers votre adresse. La création d'un tel lien est similaire à la création d'un lien vers une page. La différence est qu'au lieu d'utiliser le protocole http vous allez utiliser mailto et que vous spécifiez une adresse e-mail au lieu d'une url.
Lorsque l'utilisateur clique sur ce lien, le navigateur ouvre une interface e-mail pour l'utilisateur. En général, le navigateur exécute un programme e-mail de base comme Outlook Express ou Thunderbird.

Exemple :

Source	Résultat
`<a href="mailto:moi@domaine.com">Envoyez-moi un e-mail </a>`	Envoyez-moi un e-mail

Créer un lien vers les forums de discussion

UseNet (UseNet-fr) désigne l'ensemble des forums de discussion fr*. Faire un lien vers un ou plusieurs forums de discussions peut-être un avantage pour votre site web. Pour créer un tel lien, au lieu d'utiliser http: et l'url, vous utilisez news: et le nom de la newsgroup. La manière dont le lien vers les forums est géré dépend du navigateur web utilisé. Si vous utilisez Internet Explorer, ce sera Outlook Express qui sera lancé par défaut.

Exemple :

Source	Résultat
`<a href="news:fr.comp.lang.c++">forum de discussion sur le langage C++</a>`	forum de discussion sur le langage C++

Rendre le ftp dispo sur votre site

Le FTP(File Transfert protocole) permet aux utilisateurs de transférer des fichiers sur leur ordinateur depuis le site FTP (un autre ordinateur). Les sociétés diffusant des logiciels utilisent souvent cela. En ce qui concerne le lien, au lieu de mettre http:, il faut mettre ftp:. Cependant il faut s'assurer que le site spécifié accepte les connexions anonymes. Si le nom du fichier n'est pas précisé dans l'url, le navigateur liste le contenu du répertoire.

Exemple :

Source	Résultat
`<a href="ftp://ftp.monsite.com/demo/">Cliquez ici pour accéder au ftp</a>`	Cliquez ici pour accéder au ftp

Accéder aux ordinateurs à distance (Telnet)

Accéder à d'autres ordinateurs n'est pas nouveau sur le web. Cet accès a toujours existé avec un programme UNIX : Telnet permettant à un individu de se connecter à une machine à distance. Pour créer ce genre de lien, vous devez bien sûr utiliser telnet: au lieu de http:.
Les navigateurs ne comprennent pas les activités de Telnet (problème d'affichage de la session à distance, interprétation des saisies). Si vous mettez un tel lien, proposez un lien vers un client Telnet.

Exemple :

Source	Résultat
`<a href="telnet://telnet.monsite.com">Cliquez ici</a>`	Cliquez ici

Récapitulatif

Liens vers	Ce qu'il faut utiliser	Un exemple
Page Web E-mail Newsgroup FTP Gopher WAIS Telnet	http://nomdusite/ mailto:nom@domain.ext news:nomdugroupe ftp://nomdusite/ gopher://nomdusite/ wais://nomdusite/ telnet://nomdusite/	http://www.prog-info.org/ mailto:contact@monsite.com news:news.newusers.questions ftp://ftp.monsite.com/ gopher://gopher.monsite.com/ wais://wais.monsite.com/ telnet://bbs.monsite.com/