HTML5 – Balises essentielles : LIENS

LEÇON

Anchor (hyperlink ou hyperlien) : <a>

C'est ce qui met le "hyper" dans notre hypertexte. La balise <a> est la balise pour créer un hyperlien. Sans hyperlien le World Wide Web n'existerait pas.

  • L'attribut href permet de spécifier la cible du lien.
  • L'attribut target permet de spécifier où ouvrir la cible (onglet courant ou un autre).
  • Le contenu de l'élément - c'est à dire ce qui se trouve entre la balise d'ouverture <a> et la balise de fermeture </a> - si c'est du texte, c'est le texte visible/cliquable du lien.
  • Remarque : Le contenu de l'élément peut-être également une image (ou texte + image, ou plusieurs images, ou text + plusieurs images, etc) - on verra ça plus tard.

Exemples :

<a href="http://www.studio-m.fr/">
  Visiter le site de Studio-M
</a>

<a href="http://www.studio-m.fr/" target="_blank">
  Visiter le site de Studio-M dans un nouvel onglet
</a>

 

Nouvel onglet : target="_blank"

On inclut cet attribut avec cette valeur si on veut que la page (ou contenu) cible s'ouvre dans un nouvel onglet (voir l'exemple ci-dessus).

 

Liens relatifs et absolus

IMPORTANT :

  • Un lien relatif contient pour cible une adresse relative à l'adresse de la page actuelle.
  • Un lien absolu contient pour cible une adresse qui est indépendant de l'adresse de la page actuelle.

Voici quelques exemples pour comprendre...

 

Lien relatif vers un fichier dans le même dossier (adresse internet)

Si l'adresse de ma page est http://www.monsite.fr/docs/page1.html et le code de ma page est le suivant :

<a href="page2.html">
  Ceci est un lien relatif
</a>

...alors le lien est relatif. De plus, il n'y a pas de chemin devant le fichier (voir l'attribut href). Donc le navigateur attend trouver page2.html dans le même dossier que la page actuelle et donc de pouvoir ouvrir cette page : http://www.monsite.fr/docs/page2.html

 

Lien relatif vers un fichier dans le même dossier (adresse locale)

Si j'ai un fichier page1.html qui est présent sur la machine locale dans le dossier C:\mon-dossier\docs (alors l'adresse dans le navigateur de ma page sera file:///c:/mon-dossier/docs/page1.html ) et si le code de ma page est le suivant :

<a href="page2.html">
  Ceci est un lien relatif
</a>

...alors le lien est toujours relatif et il n'y a toujours pas de chemin devant le fichier. Donc le navigateur attend trouver page2.html dans le même dossier que la page actuelle et donc de pouvoir ouvrir cette page : file:///c:/mon-dossier/docs/page2.html qui veut dire que le dossier C:\mon-dossier\docs devrait contenir (en plus du fichier page1.html) un fichier nommé page2.html.

 

Lien relatif vers un fichier dans un sous-dossier

Si l'adresse de ma page est http://www.monsite.fr/docs/page1.html et le code de ma page est le suivant :

<a href="autre/page2.html">
  Ceci est un lien relatif
</a>

...alors le lien est toujours relatif. Mais cette fois-ci il y a un chemin devant le fichier. Ce chemin doit être compris relatif au dossier dans lequel se trouve la page actuel. Donc le navigateur attend trouver page2.html dans un sous-dossier nommé "autre" et donc de pouvoir ouvrir cette page : http://www.monsite.fr/docs/autre/page2.html

 

Lien relatif vers un fichier dans un dossier parallèle

Si l'adresse de ma page est http://www.monsite.fr/pierre/page1.html et le code de ma page est le suivant :

<a href="../paul/page2.html">
  Ceci est un lien relatif
</a>

...alors le lien est toujours relatif. Cette fois-ci le chemin devant le fichier contient deux points. Ce chemin doit être toujours compris relatif au dossier dans lequel se trouve la page actuel - les deux point indiquent qu'il faut remonter dans la hiérarchie des dossiers. Donc le navigateur attend trouver page2.html dans un dossier nommé "paul" qui se trouve dans le dossier parent de "pierre" et donc de pouvoir ouvrir cette page : http://www.monsite.fr/paul/page2.html

 

Lien absolu (adresse internet)

Si le code de ma page est le suivant :

<a href="http://www.monsite.fr/docs/page2.html">
  Ceci est un lien absolu
</a>

...alors le lien est absolu : le navigateur n'a pas besoin de prendre en compte l'adresse de la page actuelle pour trouver le document cible. Tout ce qu'il faut savoir pour trouver le document cible est déjà inclut dans l'adresse spécifiée dans l'attribut href.

 

Lien absolu (adresse locale) - ATTENTION

Si le code de ma page est le suivant :

<a href="file:///c:/mon-dossier/docs/page2.html">
  Ceci est un lien absolu
</a>

...alors le lien est absolu MAIS si cette adresse est valide sur une machine elle n'est pas forcement sur une autre.

 

!! TRÈS IMPORTANT !! RÈGLE D'OR POUR LES EVALUATIONS !!

Quand on doit rendre ses fichiers à l'enseignant à la fin d'une évaluation pratique en classe, il faut :

  • NE JAMAIS UTILISER :
    • des LIENS ABSOLUS avec une ADRESSE LOCALE
  • TOUJOURS UTILISER :
    • des LIENS RELATIFS, ou
    • des LIENS ABSOLUS avec une ADRESSE INTERNET
  • dans le cas de l'utilisation des liens relatifs :
    • TOUJOURS FOURNIR au professeur TOUS LES FICHIERS référencés par ses pages
    • TOUJOURS FOURNIR ces fichiers DANS LA BONNE STRUCTURE pour que les chemins relatifs fonctionnent correctement

 

 

L'attribut download

Nouveau dans HTML5 : l'attribut download provoque le téléchargement (au lieu de l'affichage) d'un contenu.

Exemple :

<a href="http://www.monsite.fr/gallery/monimage.jpg" download>
  Cliquer ici pour télécharger la photo
</a>

 

En savoir plus / Référence

 


EXERCICES

  1. Dans un éditeur de texte, créer un nouveau document HTML minimaliste à partir du squelette HTML
  2. Après chaque étape ci-dessous, ouvrir la page dans un navigateur pour regarder l'affichage
  3. Incorporer un lien relatif vers un fichier html dans le même dossier et faire en sorte que la page cible existe et s'affiche correctement
  4. Incorporer un lien relatif vers un fichier html dans un sous-dossier et faire en sorte que la page cible existe et s'affiche correctement
  5. Incorporer un lien relatif vers un fichier html dans un dossier ailleurs dans la hiérarchie des dossiers (utiliser un chemin avec deux points pour remonter la structure des dossiers) et faire en sorte que la page cible existe et s'affiche correctement
  6. Incorporer un lien absolu avec une adresse internet (un lien vers un site internet avec une adresse web http://www.studio-m.fr/ par exemple)
  7. Incorporer un lien absolu avec une adresse locale et faire en sorte que la page cible existe et s'affiche correctement