Les Liens

Introduction

L’ancrage est un élément HTML permettant d’envoyer le visiteur vers une nouvelle page ou à un point de celle-ci.

L’ancrage (ou le lien) sera représenté par la balise <a>, on peut associer avec cet élément n’importe quel contenu :

du texte
des images
...

l’attribut href permet de renseigner la cible de l’ancre

On distingue deux type d’ancrages, l’ancrage interne et l’ancrage externe

L’Ancrage Interne
Il permet de naviguer à l’intérieur d’une page pour ce faire, on encadre la cible par des balises <a> suivi de l’attribut name.
<div id="TEST">Ici le point à atteindre</div>
Plus haut dans la page, on créer un texte référence et on renseigne l’attribut href avec le nom de l’ancre à laquelle elle fait référence précédé d’un #.
<a href="#TEST">CLIQUEZ ICI</a>
L’Ancrage Externe
Les ancres externes sont des liens qui mènent soit à une autre page du site, soit à une page d’un autre site.

Attribut HREF (Hypertext REFerence)

C'est un attribut obligatoire, il determine la destination du lien.

Il peut s'agir d'une adresse d'un site

<a href="https://www.nomdusite.fr">Mon site</a>

Il peut s'agir d'une page

<a href="/dossier/nom_du_ficiher">Mon site</a>

L'attribut target

Cet attribut associé aux liens <a/> va indiquer au navigateur la façon d'éxecuter le lien

Il était surtout utiliser pour les structures en frameset.

"_blank"	ouvre le lien dans un nouvel onglet
"_self"	ouvre le lien dans le même onglet (valeur par défaut)
"_parent"	ouvre le lien dans le cadre parent (frameset)
"_top"	ouvre le lien dans une nouvelle fenêtre du navigateur

<a href="mapage.html" target="_blank">Ma page</a>

Atrribut accesskey

Utile pour les personnes handicapées (malvoyantes). Il leur permet d'activer un lien sur l'appui de la touche ctrl et la lettre passée en paramètre

<a href="https://www.nomdusite.fr" accesskey="A">Mon site</a>

L’Ancrage et le Mailing (SMTP)

Lorsqu’un utilisateur visite le site, on peut lui donner la possibilité de transmettre un mail au créateur du site. On utilise, pour ce faire, la fonction mailto :

<a href = "mailto: mail@adresse.com">Send Email</a>

Cette fonction activera la messagerie de l’utilisateur On peut renseigner l’objet du mail ainsi que le corps du document Il est possible d’envoyer des mails à plusieurs adresses Ou d’envoyer le mail avec une copie Cette fonctionnalité est aujourd’hui désuète, aujourd’hui les développeurs préfèrent appeler une fonctionnalité serveur afin de ne pas dépendre des boîtes mail de l’utilisateur

Activer le JavaScript

On peut transformer un lien qui par défaut mène l’utilisateur d’une page à l’autre, en composant d’appel JavaScript on utilise pour ce faire la fonction javascript :

Par exemple Emettre une alerte

<a href="javascript:alert(‘ceci est une alerte’) ; ">Déclencher une alerte</a>

Déclencher l’impression

<a href="javascript:window.print() ; ">Imprimer</a>

Créer une popup

<a href="javascript:window.open(‘http://le_nom_du_site.fr’) ">Ouvrir</a>

Cette fonctionnalité est aujourd’hui, un peu désuète. Les développeurs préfèreront redéfinir l’évènement click en JavaScript pour plus de sécurité et afin d’optimiser le référencement du site.

Complément d’informations : Les Protocoles

On a vu précédemment le protocole SMTP permettant de transférer des mails, il existe de nombreux autres protocoles. Un Protocole est un système permettant à deux ordinateurs de communiquer et diffère selon le type de données échangées. Voici une liste non-exhaustive de protocole

HTTP	HyperTextual Transfert Protocol	Il a été conçu pour communiquer entre les navigateurs web et les serveurs web
HTTPS	HyperTextual Transfert Protocol Secured
SMTP	Simple Mail Transfer Protocol	utilisé pour transférer le courrier électronique (courriel) vers les serveurs de messagerie électronique.
FTP	File Transfer Protocol	Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du réseau
RTSP	Real Time Streaming Protocol	Il permet de contrôler un serveur de média à distance

Attributs utiles

href (obligatoire pour un lien) — destination du lien.
target — _self (par défaut), _blank (nouvel onglet), _parent, _top.
rel — relation entre la page et la ressource (nofollow, noopener, noreferrer, external...).
title — texte supplémentaire (tooltip). Ne remplace pas un texte d'ancre explicite.
download — suggère le téléchargement d'une ressource locale.
accesskey — raccourci clavier (à utiliser avec parcimonie).

Bonnes pratiques

Utiliser rel="noopener noreferrer" avec target="_blank".
Vérifier régulièrement les liens (liens morts vs redirections).
Préférer des liens descriptifs pour l'accessibilité et le référencement.
Éviter javascript: dans href — attacher des gestionnaires click via JavaScript si nécessaire.