Comment faire un lien en html

Un lien HTML, ou lien hypertexte, c’est un texte sur lequel on clique et qui a pour conséquence de vous amener sur une autre page de votre propre site web ou sur un autre. On peut même aller plus loin et faire des liens qui permettent de se rendre à un endroit précis d’une page. Il y a même des techniques qui permettent, quand vous cliquez sur un lien, d’ouvrir un nouvelle onglet pour vous rendre sur l’autre page désirée. Dans cette partie nous allons voir comment faire un lien en html.

Comment faire des liens en HTML

Un lien en HTML se compose de la balise <a> … </a>, ou il faudra renseigner un attribut « href » pour indiquer la destination du lien ainsi que le texte du lien cliquable.

Voici un exemple de lien basique: <a href=“autre-page.html”> texte du lien </a>.

Dans l’exemple ci-dessus, l’attribut href vous indique la destination du lien, ici « autre-page.html » mais cela aurait pu être « google.fr ». Si vous cliquez sur ce lien il vous amènera sur la page « autre-page.html ». De plus le texte contenu entre la balise <a>, en l’occurrence « texte du lien », sera visible sur la page web et seulement lui. Un lien en html est visuellement différent du contenu de la page. On verra plus tard avec le langage CSS comment changer son apparence.

comment faire un lien en HTML

Je vous invite à reproduire ce même code HTML dans votre éditeur de texte, à l’enregistrer dans un fichier avec l’extension .html puis double-cliquer sur ce fichier. Vous devez avoir un rendu similaire au mien, cependant quand vous cliquez sur le lien vous vous apercevez que le lien vous amène sur cette page:

problème de lien html

En réalité votre page n’existe pas, du moins pas encore, on va la créer dans pas longtemps croyez moi. Dans un serveur bien réel et bien configuré sur le web vous pouvez aussi avoir une page similaire qui vous stipule quasi la même chose, mais avec un code d’erreur 404. Cela signifie en fait que votre page est introuvable, comme ici. Maintenant nous allons faire un lien en HTML qui nous amène sur une page d’un site « existant ».

Faire un lien html vers un autre site web avec des liens absolus

Et bien pour le coup vous allez être déçu tellement cette action est simple. On reprend la même structure d’un lien basique, comme cela: <a href=″lien.html″> texte du lien </a>.

On remplace la valeur de l’attribut href  par l’adresse du site et/ou de la page désirée. Dans le jargon web on dit souvent qu’un lien pointe vers une chose (adresse, page, élément d’une page …), ne soyez pas surpris quand vous entendrez ce terme, d’ailleurs je l’emploierai dans la suite de ce tuto. On peut aussi parler de la « cible » du lien.

Je vous propose d’essayer de coder deux liens, l’un qui pointe sur vers le moteur de recherche « Google.fr » et un autre qui vous amène sur la page des tutoriels sur le site Manipovore. Un indice, l’adresse en question est « https://manipovore.com/les-tutoriels/ ».

Voici en image le résultat:

comment faire un lien absolu en html

Rien de bien compliqué. Petite précision sur les adresses contenus dans les attributs href, on parle ici d’URL ( Uniform Resource Locator ). C’est un élément de langage pour désigner une adresse web. Retenez l’URL d’un site et/ou d’une page = son adresse.

Aussi, vous devez savoir que le « https:// » est un protocole web (sécurisé) mais qu’ils existent d’autres comme « http:// » ou « ftp:// », etc…

Ces liens sont appelés liens absolus quand on indique l’adresse (URL) complète. On parle de liens relatifs quand ces liens ne renseignent pas de protocole web, ce qui est particulièrement utilisés dans les liens entre les pages d’un même site.

  • « https://manipovore.com/dossier/page-1.html » ⇐ lien absolu
  • « /dossier/page-1.html » ⇐ lien relatif (applicable dans un même site web)

Créer un lien vers une autre page de son site avec des liens relatifs

Il est utile de faire des « liens externes » mais primordial de savoir faire des « liens internes ». Nous venons de voir comment créer des liens vers d’autres site web et nous allons voir dans cette sous-partie comment créer des liens HTML entre les pages d’un même site.

Pour cela nous allons travailler dans un même dossier et créer deux fichiers que nous appellerons sobrement page-1.html et page-2.html:

lien relatif html

Je veux faire un lien de la page-1 vers la page-2, une idée ?

 

Il faut simplement indiquer dans la l’attribut « href » le nom du fichier ciblé. Je vous invite à copier le code suivant dans les fichiers respectifs:

page-1.html

page-2.html

Pour faire un lien entre les pages d’un même site il suffit de renseigner le nom du fichier ( qui doit se trouver dans le même dossier ) dans l’attribut href.

Dans le cas où vous devez faire un lien vers une page qui se trouve ailleurs, dans un dossier par exemple, il faudra modifier un peu le lien relatif. Prenons un cas concret où on doit faire un lien de la page-1 vers la page-2 qui se trouve dans le dossier niveau-1:

lien html vers page dans un dossier

Dans cette situation le lien de la page-1 vers la page-2 va être comme ceci:

En fait, la page-1 se situe à la « racine » (répertoire de base, niveau 0) contrairement à la page-2 qui est dans un dossier contenu dans le répertoire parent. Pour accéder à des éléments qui ne sont pas directement à la racine il faut alors renseigner le « chemin » à parcourir.

A l’inverse, pour faire un lien de la page-2 vers la page-1 on doit faire le chemin inverse et revenir à la racine, où se trouve la page-1. Pour cela il faut indiquer dans le lien que la page se trouve « un niveau » plus bas, comme ceci:

Si il y a plusieurs dossiers on fait:

Et si on doit revenir à la racine de ce même dossier pour accéder à la page-1:

On rajoute ../ par dossier (niveau) à parcourir pour revenir à la racine.

Hum, je commence à vous sentir perplexe, voici une illustration qui vous aidera à y voir plus clair:

lien entre les pages web

Dans cette illustration, le dossier parent « racine / » contient toute votre architecture (dossiers et fichiers). Pour faire un lien vers une page interne il faut donc savoir deux choses, où on se trouve et vers où on veut aller.

Vous retrouverez une structure un peu similaire, plus tard, dans votre propre serveur web. Oui, un peu, parce qu’en fait vous n’aurez jamais vos pages dans 36 endroits différents, elles seront regroupés dans un répertoire (ou un peu plus suivant le besoin).

Créer un lien vers un endroit précis d’une page, l’ancre

Il se peut qu’un jour vous aillez besoin de faire des liens qui vous amène vers un endroit précis de la page mais en restant sur celle-ci sans en changer. Cela peut servir par exemple dans le cas d’un sommaire en tête de page que vous avez mis en place pour permettre à vos lecteurs d’accéder directement à un contenu précis. Surtout si votre page est très longue. Ce type lien est une ancre et comme un lien basique en HTML il se base sur la même structure.

En revanche, pour que le lien pointe sur la même page et sur un élément en particulier il va falloir lui indiquer. Pour cela on va commencer par mettre un repère:

Ici, j’ai utilisé un attribut sur la balise de titre <h2>, il s’agit d’un id et c’est un peu comme le nom unique de l’élément, l’identifiant. Il peut être utilisé avec n’importe quel balise, par contre la valeur de l’attribut id doit être unique et il ne peut pas y avoir deux même id dans une page web.

Ensuite, pour se rendre sur cette ancre il suffit de faire un lien en renseignant dans l’attribut href un dièse # suivi du nom de l’id:

Comme il faut beaucoup de texte pour se rendre compte de l’impact de ce lien je vous propose de copier le code ci-dessous dans votre éditeur de texte et de remplacer les balises de paragraphe « beaucoup de texte » par vraiment beaucoup beaucoup de texte. Hésitez pas à user des balises <br /> pour sauter des lignes, même si le code n’est pas très beau, c’est juste dans l’optique de vous rendre compte de l’usage des ancres en HTML.

Si vous ne remarquez aucun changement quand vous cliquez sur le lien s’est que vous devez ajouter plus de texte.

Lien vers une ancre dans une autre page

Il est aussi possible de faire un lien vers une autre page et cibler un élément particulier de cette page marqué par une ancre. Il suffit tout simplement de renseigner le lien de la page en question et de rajouter le nom de l’ancre, un exemple:

Les liens et les attributs target et title

Pour clore ce chapitre sur les liens, j’aimerai vous parler des attributs target et title avant de passer dans la partie suivante.

L’infobulle

On peut aider le visiteur à avoir plus d’information sur un lien avec une infobulle. Le but de cette infobulle va être d’ajouter un renseignement supplémentaire quand l’utilisateur va passer sa souris sur le lien, comme ceci:

infobulle sur un lien html avec attribut title

Cet attribut « title » est à rajouter dans la balise <a>:

Forcer l’ouverture d’une nouvelle fenêtre ou onglet

Pour garder un visiteur sur son site, on peut mettre en place un lien qui déclenche l’ouverture d’un nouvelle onglet ou nouvelle fenêtre. Cela peut être utile quand le lien pointe vers une page d’information et que le visiteur doit rester sur la page principale. Il peut ainsi garder l’onglet de la page principale, ouvrir la page d’information dans un nouvelle onglet en cliquant sur le lien et jongler entre les deux.

Par défaut un lien est configuré pour s’ouvrir dans un même onglet, la même fenêtre où l’on se trouve. Pour déclencher une ouverture d’un autre onglet ou d’une nouvelle fenêtre quand on clique sur un lien, il faut utiliser l’attribut « target », voyez par vous même:

Nous avons l’attribut target= »_blank » qui permet d’ouvrir le lien dans une nouvelle fenêtre ou onglet, mais sachez qu’il est quand même déconseillé d’utiliser cette technique à outrance car le visiteur peut choisir lui même d’ouvrir ce lien comme il le souhaite, notamment en faisant un clique droit de la souris sur le lien et choisir de l’ouvrir autrement.

Cette technique peut être utilisée seulement si cela ajoute vraiment un plus pour la navigation.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *