Cours de HTML

Les hyperliens

Les liens hypertextes sont des éléments d'une page HTML qui permettent aux internautes de naviguer vers une URL lorsque l'on clique dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web les unes aux autres. En général, ils sont soulignés et d'une couleur différentes que le texte ordinaire, ils changent de couleur lorsqu'ils sont survolés.

 Les hyperliens permettent de naviguer

• du document vers un autre emplacement de la même page
• du document vers une autre page du site
• du document vers un autre site

On utilise la balise <a href>...</a> :

<a href="URL"> lien vers URL </a>

Lien vers un site extérieur

Un lien externe est un lien vers une page pointée par son URL.

<a href="http://www.google.fr"> lien vers google </a>

Et le résultat dans la page donne ceci : lien vers google

Lien vers un serveur ftp

On peut également effectuer des liens vers un serveur ftp, de la manière suivante :
<a href="ftp://ftp.jussieu.fr/">serveur de Jussieu </a>

Lien vers un serveur de news

On peut également effectuer des liens vers un serveur ftp, de la manière suivante :
<a href="news://news.site">Serveur de news</a>

Lien local

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le fichier cible.

<a href="file:///D:/maPage.pdf">ma page </a>

Lien Absolu, lien relatif

Avant d'aller plus loin, pour comprendre le principe des liens il faut comprendre comment est construit un site Web. Le site est constitué de pages, de documents. Ces pages et ces documents sont rassemblés dans différents dossiers ou répertoires. La page d'ouverture s'appelle toujours index.html.Tout le site s'articule autour de cette page. L'image suivante présente un mini site avec un index, et des pages rassemblées dans un dossier qui contient deux sous-dossiers et un sous-sous-dossier:

Lien relatif

Un lien peut être créé de façon relative, en repérant le fichier cible par rapport au fichier source. Si je suis sur la page index et que je vais chercher le fichier "maPage.html" situé dans le sous-dossier03, son lien s'écrira:
<a href="dossier01/sousDossier01/soussousDossier01/maPage.html"> texte </a>

Mais si je suis sur maPage.html et que je veux remonter vers l'index, je vais remonter dans l'arborescence et pour chaque dossier que je remonte, j'écris : ../ Je vais donc écrire ce chemin de cette manière :
<a href="../../../index.html"> texte </a>

Lien absolu

Un lien absolu permet d'attendre le document à l'aide du chemin complet et de son nom. Voici un exemple de lien absolu sur un fichier local :

<a href="file:///lecteur:/répertoire/index.html"> ... </a>

Voici un autre exemple de lien absolu vers mon site par exemple pour revenir sur la page d'introduction :

<a href="http://courshtml.jacquenod.net/basehtml.html">

Les ancres

Il est également possible de créer une ancre dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les signets ou ancres se définissent grâce à l'attribut id. La syntaxe est la suivante :
<a id="ancre"> ... </balise>

L'appel d'un signet se fait de la manière suivante :
<a href="#ancre"> ... </a>

L'utilisateur peut se déplacer dans la même page ou bien aller à un endroit précis vers une autre page :
<a href="url/lapage.html#ancre"> ... </a>

L'attribut name était auparavant employé pour les ancres, il n'est plus d'usage en XHTML, en effet l'attribut id précise qu'il est unique.

Liens vers un courriel

Vous pouvez créer un lien e-mail pour que la messagerie paramètrée par défaut du visiteur se lance automatiquement.
<a href="mailto:nom@provider.com">

Lien e-mail avec sujet

Voici un exemple :
<a href="mailto:nom@provider.com?subject=renseignement">contact</a>

Lien e-mail avec sujet, et texte dans le corps du message

Exemple :
<a href="mailto: nom@provider.com?subject=renseignement&body=Votre message">exemple</a>

Lien e-mail avec sujet, envoyé à 2 personnes (dont une en CC)

Exemple :
<a href="mailto: nom@provider.com?cc=nomb@provider.com&subject=renseignement">exemple</a>

Ajouter un titre

On peut ajouter un titre à son lien avec l'attribut title. Ainsi en survolant le lien, une bulle d'aide s'affichera:
<a href="http://www.google.fr" title="je cherche, je trouve ">

Attention

On n'emploie plus les attributs target dans la balise <a>. Pour rappel :
target="_blank", permettait d'ouvrir le document appelé dans une nouvelle page par exemple
On ne peut plus ouvrir un lien vers une nouvelle page, ceci afin de ne pas gêner la navigation du visiteur et particulièrement des mals-voyants.
C'est au visiteur de décider lui-même s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien (fonctionne sur IE et Mozilla), ou encore mieux : Ctrl + Clic (pour ouvrir dans un nouvel onglet dans Mozilla).
On peut ouvrir une nouvelle page grâce à du javascript, nous le verrons dans un chapitre plus tard.