### La balise a

La balise a permet de faire un lien hypertexte d'une ressource vers une autre ressource (le plus généralement d'une page Web vers une autre page Web).

Un lien a deux extrémités, appelées ancres (anchor - d'où le nom de la balise).

L'ancre de départ contient :

- une URL : la localisation physique de l'ancre d'arrivée (la cible vers laquelle pointe le lien)
- l'élément visuel marquant le lien (texte, images, etc)

L'ancre d'arrivée (la cible) est généralement une page Web (ou un endroit à l'intérieur d'une page) mais peut être n'importe quelle ressource Web (une image, une vidéo, un son, un programme, une animation, etc).

L'ancre de départ d'un lien aura la forme minimum suivante :

Ancre de départ

C'est la valeur de l'attribut `href` qui définit l'ancre d'arrivée du lien. La valeur de cet attribut doit être une URL valide (absolue ou relative, avec n'importe quel protocole supporté par le navigateur).

Par défaut, un lien dans une page est repéré par un changement de couleur et un soulignement du texte avec éventuellement le changement de la forme du curseur de la souris quand le lien est survolé.
Il y a 3 couleurs différentes pour signaler un lien. Ces couleurs varient selon l'état du lien :

- #0000EE pour un lien qui n'a jamais été visité (vu),
- #551A8B pour un lien qui a déjà été visité (vu),
- #EE0000 quand on active un lien : le moment où la souris est enfoncée quand on clique sur un lien,

Exemple : signalement visuel d'un lien
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Signalement visuel d'un lien</title> </head> <body> <p>Voilà un lien vers : <a href="http://www.bing.fr"> la page d'accueil de bing</a>.</p> <p>Si vous n'avez jamais visité le site, le lien apparaitra en bleu.</p> <p>Si vous avez déjà visité le site, le lien appraitra en violet.</p> <p>Pour voir la couleur d'un lien actif, cliquez sur le lien en laissant le bouton de la souris enfoncé.</p> </body> </html>

Remarque : la mise en forme des liens peut être modifiée par des règles de style CSS appliquée à l'élément a suivant son état (link, visited, active et hover)

Si du texte est majoritairement utilisé comme support des liens, des images peuvent aussi remplir ce rôle.

Exemple : une image comme support de lien
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Image lien</title> </head> <body> <p>Voilà un lien vers <a href="http://www.bing.fr"> <img src="logo_bing.png"></a> et un autre vers <a href="http://www.google.fr" target="_blank"> <img src="logo_google.png"></a>.</p> </body> </html>

Depuis HTML5, bien que a soit un élément en ligne il peut aussi contenir des éléments de bloc.

Un nouvel attribut, `download` est prévu pour le liens sur des ressources à télécharger. Avec cet attribut le navigateur pourra faire la distinction entre une ressource vers laquelle naviguer, et une ressource destinée à être téléchargée sur l'ordinateur client. L'attribut `download` n'a pas besoin forcément d'une valeur : elle est nécessaire uniquement si le nom par défaut proposé à l'utilisateur pour le stockage est différent du nom sur le serveur Web.

Exemple : lien download
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Lien download</title> </head> <body> <p>Téléchargez le sujet du <a href="../exemples/examen.pdf" download> prochain examen</a>. </p> <p>Téléchargez <a href="../exemples/photo.jpg" download="francois_piat.jpg">une photo</a>. </p> </body> </html>

### Ancre d'arrivée nommée

Un lien peut envoyer à un point précis situé dans la même page ou dans une autre page. Ce point s'appelle une ancre d'arrivée nommée.

Une ancre d'arrivée nommée permet au navigateur de se positionner autre part qu'au début d'une page quand elle est chargée et affichée. Elle permet aussi à l'utilisateur de se déplacer rapidement à l'intérieur d'une page longue. Les liens en haut à gauche de certaines pages de ce tutoriel sont des exemples de cette technique.

#### Ancre de départ

L'ancre de départ doit avoir une URL dans laquelle le nom de la ressources et le nom de la partie à atteindre sont séparés par le caractère `#` (dièse).

URL avec une ancre nommée
Exemple : lien sur un point dans une page du W3C
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Lien sur un point</title> </head> <body> Exemple de lien vers une ancre nommée dans <a href="http://www.w3.org/TR/2014/REC-html5-20141028/links.html#attr-hyperlink-href">la page du W3C</a> qui parle de l'attribut href. </body> </html>

#### Ancre d'arrivée

Une ancre d'arrivée nommée est réalisé en nommant n'importe quel élément de la page HTML avec un attribut `id` et sa valeur. Si on veut rester "sémantiquement correct", il convient d'utiliser un élément a auquel on ne donne pas d'attribut `href`.

L'élément servant d'ancre d'arrivée nommée n'a aucune signalisation particulière parmi le reste du texte. L'ancre marque tout simplement un endroit dans une page.

Exemple : ancre nommée dans une page
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Ancre nommée</title> </head> <body> <a href="#partie_1">Partie 1</a> <a href="#partie_2">Partie 2</a> <a href="#partie_3">Partie 3</a> <p>Pour que cet exemple soit représentatif, il faut que la page soit longue et que son affichage ne tienne pas dans la fenêtre du navigateur qui doit faire apparaitre une barre d'ascenseur vertical.</p> <a id="partie_1"><h3>Partie 1</h3></a> <p>C'est la première partie de cette page longue.</p> <p>L'ancre nommée est faite avec une balise a qui entoure un élément de titre h3.</p> <p>Notez l'utilisation de l'attribut name et l'absence d'attribut href</p> <p>Notez aussi que le nom de l'ancre ne contient pas le caractère # qui est à utiliser uniquement dans l'URL de l'ancre de départ. <p>Blablabla.</p><p>Blablabla.</p><p>Blablabla.</p> <h3 id="partie_2">Partie 2</h3> <p>C'est la deuxième partie de cette page longue.</p> <p>L'ancre nommée est faite avec une balise h3 qui a un attribut id pour son identification.</p> <p>Blablabla</p><p>Blablabla.</p><p>Blablabla.</p> <p>Blablabla.</p><p>Blablabla.</p> <h3 id="partie_3">Partie 3</h3> <p>C'est la troisième partie de cette page longue.</p> <p>Notez que dans l'ance de départ, si l'url est constituée uniquement par le nom de l'ancre d'arrivée, le signe # doit quand même être là.</p> <p>Blablabla</p><p>Blablabla.</p><p>Blablabla.</p> <p>Blablabla.</p><p>Blablabla.</p> </body> </html>

### Fenêtre d'affichage

Avec l'attribut `target` on peut préciser dans un lien la fenêtre (ou l'onglet) dans laquelle le document lié doit s'afficher.

cible d'affichage

Suivant la valeur donnée à l'attribut `target`, l'affichage du document lié ne se fera pas au même endroit. Si le nom donné comme valeur de l'attribut `target` est

- le mot clé `_blank` : la ressource liée est chargée et affichée dans une nouvelle fenêtre ou onglet.
- le mot clé `_parent` : la ressource liée est chargée et affichée dans la fenêtre conteneur du document en cours si il y en a une, sinon à la place du document en cours.
- le mot clé `_top` : la ressource liée est chargée et affichée dans la fenêtre conteneur la plus haute de la hiéarchie des conteneurs du document en cours si il y en a une, sinon à la place du document en cours.
- le mot clé `_self` : la ressource liée est chargée et affichée dans la fenêtre du document en cours. c'est la même chose que si'il n'y avait pas d'attribut `target` et c'est le fonctionnement par défaut des liens.

Si le nom donné comme valeur de l'attribut `target` est

- le nom d'un cadre (iframe) : la ressource liée est chargée et affichée dans ce cadre.
- le nom d'une fenêtre (ou onglet) déjà ouverte : la ressource liée sera chargée et affichée dans cette fenêtre (ou onglet).

Si le nom donné comme valeur de l'attribut `target` n'est aucun de ceux évoqué précédemment, une nouvelle fenêtre (ou onglet) du navigateur est ouverte et la ressource liée y est chargée et affichée.

Détails sur cette page du W3c.

### Liens vers d'autres pages - 1

Complétez le code HTML ci-dessous pour réaliser les liens vers les pages suivantes en utilisant des URLs relatives par rapport à la page `ici.html`.
aragorn.html (dans anneaux) boromir.html (dans anneaux) elrond.html (dans elfes). Le lien doit s'ouvrir dans un onglet appelé "elfe". frodon.html (dans lord_rings) gandalf.html (dans lord_rings). Faire pointer le lien sur l'ancre nommée "origine". gimli.html (dans lord_rings). Le lien doit s'ouvrir dans un nouvel onglet. gollum.html (dans lord_rings). Faire pointer le lien sur l'ancre nommée "atypique" et ouvrir un nouvel onglet. legolas.html (dans elfes). Le lien doit s'ouvrir dans un onglet appelé "elfe". | arborescence de l'exercice
Le support d'un lien est le nom du personnage vers lequel pointe le lien (exemple: Aragorn pour aragorn.html).

Code à compléter

Exercice : liens vers d'autres pages - 1
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liens</title> </head> <body> <p>Aragorn</p> <p>Boromir</p> <p>Elrond</p> <p>Frodon</p> <p>Gandalf</p> <p>Gimli</p> <p>Gollum</p> <p>Legolas</p> </body> </html>

Une solution possible

Exercice : liens vers d'autres pages - 1
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liens</title> </head> <body> <p><a href="../exemples/anneaux/aragorn.html">Aragorn</a></p> <p><a href="../exemples/anneaux/boromir.html">Boromir</a></p> <p><a href="../exemples/anneaux/elfes/elrond.html" target="elfe">Elrond</a></p> <p><a href="../exemples/lord_rings/frodon.html">Frodon</a></p> <p><a href="../exemples/lord_rings/gandalf.html#origine">Gandalf</a></p> <p><a href="../exemples/lord_rings/gimli.html" target="_blank">Gimli</a></p> <p><a href="../exemples/lord_rings/gollum.html#atypique" target="_blank">Gollum</a></p> <p><a href="../exemples/anneaux/elfes/legolas.html" target="elfe">Legolas</a></p> </body> </html>

### Liens vers d'autres pages - 2

Complétez le code HTML ci-dessous pour réaliser les liens demandés en utilisant des URLs relatives par rapport à la page `ici.html`. Le support des liens est une image.
aragorn.png (dans anneaux) boromir.png (dans anneaux) elrond.png (dans elfes) frodon.png (dans hobbits) gandalf.png (dans html02) gimli.png (dans images) gollum.png (dans hobbits) legolas.png (dans elfes) Toutes les pages HTML se trouvent dans le dossier `lord_rings`. Le nom de la page est le même que celui de l'image, sauf pour l'extension qui est `html` et pas `png`. | arborescence de l'exercice

L'intégration des image se fait avec la balise img et son attribut `src`. Pas la peine de donner les dimensions des images.

Code à compléter

Exercice : liens vers d'autres pages - 2
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liens</title> </head> <body> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> <img src="chemin/de/la/ressource"> </body> </html>

Une solution possible

Exercice : liens vers d'autres pages - 2
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liens</title> </head> <body> <a href="../exemples/lord_rings/aragorn.html"><img src="../exemples/anneaux/aragorn.png"></a> <a href="../exemples/lord_rings/boromir.html"><img src="../exemples/anneaux/boromir.png"></a> <a href="../exemples/lord_rings/elrond.html"><img src="../exemples/anneaux/elfes/elrond.png"></a> <a href="../exemples/lord_rings/frodon.html"><img src="images/hobbits/frodon.png"></a> <a href="../exemples/lord_rings/gandalf.html"><img src="gandalf.png"></a> <a href="../exemples/lord_rings/gimli.html"><img src="images/gimli.png"></a> <a href="../exemples/lord_rings/gollum.html"><img src="images/hobbits/gollum.png"></a> <a href="../exemples/lord_rings/legolas.html"><img src="../exemples/anneaux/elfes/legolas.png"></a> </body> </html>