Name: HTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
Rating: 4.5 (2 reviews)

Insertion de liens pour lier les pages

Par essence même, le Web est constitué de liens hypertextes : les pages sont reliées par des liens hypertextes. Et le HTML contient bien le mot hypertexte dans son abréviation, il correspond au H de HyperText Markup Language.

Vous allez pouvoir lier des pages entre elles, d’un site à l’autre, mais aussi au sein d’une même page de votre site. Vous insérerez des liens vers des adresses de messagerie, vers des réseaux sociaux et pour télécharger des fichiers par exemple.

Enfin, notez que les liens sont des éléments de type en ligne (inline).

La structure des liens

L’insertion d’un lien se fait avec l’élément <a> (a pour anchor en anglais). Cet élément possède plusieurs attributs :

href est indispensable, il permet d’indiquer l’URL à atteindre.
hreflang peut spécifier la langue de la cible. Les valeurs peuvent être par exemple en, it, es…
rel permet d’indiquer le type de relation du lien qui est établi.
target donne le contexte d’ouverture du lien dans le navigateur.

A minima, nous avons cette structure :

<a href="inscription.html">Inscrivez-vous</a>

Nous avons :

La balise d’ouverture <a>.
La référence du lien, href, est ici une page du même site, inscription.html.
Le contenu du lien est Inscrivez-vous. Cela correspond au texte sur lequel les visiteurs devront cliquer pour activer le lien.
La balise de fermeture </a>.

Les liens vers des pages

Les liens que vous allez insérer auront plusieurs destinations possibles. Ils peuvent cibler une page de votre site ou une page d’un autre site. Dans le premier cas, l’URL pourra être relative, dans le second, l’URL devra être absolue.

Une URL relative se crée par rapport à la page qui contient le lien. Voici quelques exemples :

La page ciblée se trouve dans le même dossier que la page contenant le lien : <a href="inscription.html">Inscrivez-vous</a>.
La page ciblée se trouve dans un sous-dossier par rapport à la page contenant le lien : <a href="utilisateurs/inscription.html">Inscrivez-vous</a>.
La page ciblée se trouve dans un dossier parent par rapport à la page contenant le lien : <a href="../inscription.html">Inscrivez-vous</a>.

Une URL absolue se crée en indiquant l’adresse complète de la page :

<a href="http://www.le-site.fr/voyages/ venise.html">Venise</a>.

Les liens internes

Lorsque vous avez un long document, il peut être très utile pour les visiteurs de créer des liens internes à la page, de sorte à pouvoir se déplacer facilement et rapidement dans cette même page.

La première étape consiste à identifier, avec l’attribut id, les éléments HTML qui devront être ciblés par les liens.

Imaginons un long document comportant trois parties : Introduction, Résultats et Conclusion. Les titres de ces trois parties seront placés dans un élément <h2>. Nous aurons donc cette structure :

<!DOCTYPE HTML> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Ma page web</title> 
</head> 
<body> 
   <h1>Rapport</h1> 
   <h2 id="introduction">Introduction</h2> 
   <p>Donec id elit non mi porta gravida...</p> 
   <h2 id="resultats">Résultats</h2> 
   <p>Lorem ipsum dolor sit amet, consectetur...</p> 
   <h2 id="conclusion">Conclusion</h2> 
   <p>Integer posuere erat a ante venenatis...</p> 
</body> 
</html>

La deuxième étape consiste à...

Le contexte d’ouverture du lien

Lorsque vous créez un lien, vous pouvez spécifier le contexte d’ouverture de la cible avec l’attribut target. Cet attribut accepte quatre valeurs :

_blank : la cible s’ouvre dans une nouvelle fenêtre ou un nouvel onglet.
_parent : la cible s’ouvre dans l’élément parent de la cible. Cela est utile lorsque vous gérez des divisions d’écran avec l’élément <iframe>.
_self : la cible s’ouvre dans la même fenêtre que le lien. Il n’y a donc pas de changement de contexte, c’est le contexte par défaut.
_top : la cible s’ouvre dans le parent le plus élevé dans la hiérarchie des fenêtres.

Les relations des liens

L’attribut rel permet de spécifier le type de relation du lien. Notez que l’on retrouve cet attribut dans l’élément <link> que nous avons vu précédemment. Le W3C propose un certain nombre de valeurs possibles pour l’attribut rel, mais il laisse la possibilité aux développeurs d’utiliser leurs propres valeurs. C’est donc un système ouvert.

Voici des valeurs utilisables :

alternate indique que le lien cible une version alternative au document.
archives précise que le document ciblé est une archive.
author permet d’indiquer le nom de l’auteur du document.
first signale que le document ciblé est le premier d’une série.
last indique que le document ciblé est le dernier d’une série.
prev signale que le document ciblé est le document précédant du document courant.
next permet d’indiquer que le document ciblé est le document suivant du document courant.
nofollow précise que le lien n’est pas approuvé par l’auteur. Cette valeur créée par Google indique, en principe, que l’indexation ne doit pas tenir compte des liens présents dans cette page ciblée.

Les liens vers les messageries

Il est très courant d’utiliser un lien vers une adresse mail pour établir un contact entre le visiteur et les responsables d’un site. Lorsque le visiteur cliquera sur le lien, son application de messagerie s’ouvrira avec l’indication de l’adresse mail déjà renseignée.

Pour cela, il suffit d’indiquer dans l’attribut href le préfixe mailto: suivi par l’adresse mail souhaitée. Voici cette syntaxe :

<p><a href="mailto:jean@dupond.org">Contactez-moi</a></p>

À l’heure de la prédominance des réseaux sociaux, il est tout à fait possible de créer des liens vers vos comptes sur ces plateformes.

La syntaxe est très similaire à ce que nous avons précédemment vu :

Lien vers Twitter : <a href="https://twitter.com/mon-compte">.
Lien vers Facebook : <a href="https://facebook.com/mon-compte">.
Lien vers LinkedIn : <a href="https://fr.linkedin.com/in/mon-compte">.

Les liens de téléchargement

Malgré l’importance grandissante des sites de partage de fichiers, les fameuses box, vous pouvez parfaitement proposer à vos visiteurs de télécharger un fichier par l’intermédiaire d’un lien.

Pour ce faire, indiquez tout simplement le nom complet du fichier dans l’attribut href, sans omettre son extension. Voici un exemple :

<p>Téléchargez le fichier <a href="programme.pdf">PDF du programme</a>.</p>

Dans cet exemple, il s’agit d’un fichier PDF. Si l’ordinateur du visiteur possède un logiciel pour ouvrir ce type de document, il s’ouvrira. Si aucun logiciel n’est disponible, le navigateur proposera de télécharger le fichier.

Des liens en image

Dans tous les exemples que nous avons étudiés précédemment, les liens étaient textuels. C’est-à-dire que les visiteurs devaient cliquer sur le texte placé comme contenu de l’élément <a>. Mais vous pouvez parfaitement utiliser des images.

Voici un exemple de l’utilisation d’une image pour créer un lien :

<p><a href="aide.html"><img src="aide.png"></a></p>

La structure est très simple :

Le lien <a> utilise l’attribut href pour indiquer l’URL ciblée.
Le contenu du lien <a> est une image <img> qui possède son attribut src pour indiquer la source de l’image.

La mise en forme initiale

Voici la mise en forme initiale des liens hypertextes. Nous avons quatre états à notre disposition :

a:link : cela correspond aux liens non visités. Voici les règles CSS initiales :

a:link{  
  color: (internal value);  
  text-decoration: underline;  
  cursor: auto;  
}

La valeur (internal value) correspond aux paramètres des navigateurs.

a:visited : cela correspond aux liens déjà visités. Voici les règles CSS initiales :

a:visited{  
  color: (internal value); 
  text-decoration: underline; 
  cursor: auto;  
}

a:link:active : cela correspond aux liens non visités, sur lesquels le visiteur clique. Voici les règles CSS initiales :

a:link:active{  
  color: (internal value);  
}

a:visited:active : cela correspond aux liens déjà visités, sur lesquels le visiteur clique. Voici les règles CSS initiales :

a:visited:active{  
  color: (internal value);  
}