Les balises <a> et </a>
Les ancrages ou liens hypertextes sont des éléments d’une page html qui permettent de lier le lien (un texte, une image, un menu…) à un élément (une page, une ancre, une popup, un document, une image…). Le lien est généralement activé lorsque l’on clique dessus.
Avec du texte les ancrages sont généralement soulignés (si aucun style ne l’empêche).
Les balises <a> et </a> permettent de définir un lien hypertexte vers un document en spécifiant l’url de ce document au niveau de l’attribut href.
La page définie par le lien hypertexte s’affiche dans la page courante si l’attribut target n’est pas spécifié.
Il n’est pas possible de croiser ou d’insérer deux balises <a> et </a> l’une dans l’autre.
La balise <a> peut également définir des ancres au sein d’un document accessible depuis d’autre balise <a>.
Les liens hypertextes permettent de naviguer
- vers un autre endroit du document
- vers un fichier html situé à un emplacement différent sur la machine qui héberge la page
- vers une autre machine
Ses attributs spécifiques
- href : document cible ouvert lors du clic sur le lien
- hreflang : language du document
- target : indique dans quelle page s’ouvre le document
- title : texte affiché au survol du lien
L’attribut href
L’attribut principal des ancrages est href.
Il s’écrit sous la forme :
<a href="adresse ou url"> … </a>Lien externe
Il crée un lien vers une page dont on spécifie l’url
Par exemple:
<a href="http://www.web-ncy.com">Le site</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. Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le fichier cible est « index.html » situé dans le répertoire parent, son lien s’écrira :
<a href="../index.html"> … </a>Un lien peut aussi mentionner une adresse absolue, en écrivant l’adresse du fichier cible de façon locale :
/!\ ne fonctionnera pas de la manière souhaiter sur un serveur web /!\
<a href="file:///lecteur:/répertoire/index.html"> … </a>L’attribut target
target= »_blank » >>> ouvre dans une nouvelle fenêtre,
target= »_parent » >>> dans un agencement de cadre, ouvre dans le cadre supérieur,
target= »_self » >>> dans un agencement de cadre, ouvre dans le cadre contenant le lien,
target= »_top » >>> dans un agencement de cadre, ouvre le lien dans la page courante.
<a href="http://www.web-ncy.com" target="_blank">Le site</a>Résultat >>> Le site
target= »VotreCible »>>> dans un agencement de cadre, ouvre dans le cadre qui porte le nom VotreCible si ce cadre n’existe pas, ouvre dans une nouvelle fenêtre.
Lien vers le haut de la page
Pour une lien de retour vers le haut de la page vous pouvez saisir en bas de vos pages le code suivant :
<a href="#" target="_blank">Retour en haut de la page</a>Résultat >>> Retour en haut de la page
Ce lien est direct, voir un peu trop brut.
Pour permettre à la page de défiler doucement vers le haut, vous pouvez ajouter une règle CSS à votre page :
html {scroll-behavior:smooth;}
/!\ attention cette règle n’est pas supportée par tous les navigateurs – elle n’aura aucun effet avec les navigateurs plus anciens /!\