HTML lien

Les liens sont présents dans toutes les pages Web. C'est ce qui fait l'essence même d'une page Web. Ils permettent aux utilisateurs de cliquer pour naviguer d'une page à un autre, vers un autre site, ou simplement de déplacer dans la même page

Un lien peut être un texte ou une image sur lequel l'utilisateur peut cliquer

Syntaxe

En HTML, les liens sont définis avec la balise <a>

<!-- syntaxe générale d'un lien -->
<a href="url">Lien</a>

<!-- Exemple --> 
<a href="http://www.hei.fr">Visitez notre site de l'école</a>
		

• L'attribut href spécifie l'adresse de destination (http://www.hei.fr)
• Le texte du lien est la partie visible (Visitez notre site de l'école).
• En cliquant sur le texte du lien, vous naviguez à l'adresse indiquée.

Remarque : Le texte du lien n'est pas forcément du texte. Il peut être une image HTML ou tout autre élément HTML.

Lien local

L'exemple ci-dessus utilise une URL absolue (Une adresse Web complète).

Un lien local (lien vers le même site web) est spécifié avec une URL relative (sans http: //...).

<!-- lien vers une page du même site web -->
<a href="commentaire.php">Les commentaires en HTML</a>

<!-- autre lien vers le même site web, mais dans une autre arborescence (architecture) -->
<a href="../architecture/sitestatique.php">Les sites statiques</a>
		

L'attribut cible d'un lien (TARGET)

L'attribut cible spécifie où ouvrir le document lié.

Cet exemple ouvre le document lié dans une nouvelle fenêtre de navigateur ou dans un nouvel onglet (spécification propre au navigateur)

<a href="http://www.hei.fr" target="_blank">Visitez notre site de l'école</a>

Valeur de TARGET :

• _blank ouvre le document lié dans une nouvelle fenêtre ou onglet
• _self ouvre le document lié dans le même cadre (paramètre par défaut)
• _parent ouvre le document lié dans le cadre parent
• _top ouvre le document lié dans le corps entier de la fenêtre
• frameName ouvre le document lié dans un cadre nommé

Image en tant que lien

<a href="http://www.hei.fr"><img src="LOGO_HEI.jpg" alt="HEI" style="width:50px;border:0" /></a>

Remarque : Ici avec l'attribut style, il est possible de fixer la largeur de l'image à 50px. La valeur "border:0" est ajoutée pour empêcher IE9 (et versions antérieures) d'afficher une bordure autour de l'image.

Création d'un signet

Les signets HTML sont utilisés pour permettre aux utilisateurs de naviguer à des parties spécifiques d'une page Web. Ils sont pratiques si le site possède des pages avec des longs contenus.

Pour faire un signet, vous devez d'abord créer le signet, puis ajouter un lien vers ce signet. Lorsque le lien est cliqué, la page défile à l'emplacement du signet.

Tout d'abord, créer un signet avec l'attribut id:

<h2 id="astuces">Les astuces</h2>

Ajoutez ensuite un lien vers ce signet (les astuces) à partir de la même page:

<a href="#astuces">Allez voir les astuces...</a>

Ajoutez ensuite un lien vers ce signet (les astuces) à partir d'une autre page:

<a href="complement.html#astuces">Allez voir les astuces...</a>