Comment créer des liens sur une page web

Sur internet les liens dits « hypertextes » sont partout. Il s’agit de phrases ou de mots sur lesquels vous pouvez cliquer pour naviguer d’une page internet à une autre. Savoir créer des liens hypertextes est une étape incontournable lorsque l’on souhaite créer son site internet.

Les liens hypertexte apparaissent généralement en couleur ou surligner. Lorsque vous passez votre curseur pardessus, celui-ci change de forme pour vous indiquer que vous pouvez cliquer dessus. En cliquant, votre navigateur charge une nouvelle page. Vous pouvez ainsi passer d’une page web à une autre, d’un site à un autre, ou encore visualiser une image ou télécharger un fichier. Nous allons toutes les méthodes existantes pour créer ces fameux liens.

L’adresse web ou URL

Chaque page internet possède une adresse web qui lui est propre. Cette adresse est aussi appelée URL(Uniform Resource Locator). Elle commence par HTTP (Hypertext Transert Prococol) suivi du nom de domaine, et si nécessaire du nom de la page. Cette adresse est toujours en minuscules, elle ne comporte ni accent, ni espace.

L’adresse URL de cette page est : http://webdi.fr/article/5-Comment-creer-des-liens-hypertextes.html

Créer des liens hypertextes

Un lien hypertexte simple redirigera votre navigateur vers une autre URL. Pour le créer, on utilise toujours les balises <a> et </a>, qui permettent d’encadrer la phrase qui sera cliquable. Pour renseigner l’adresse URL de destination, on ajoute l’attribut href (Hypertexte REFerence) de la manière suivante :

Lien vers un autre site

Pour créer un lien vers un autre site, par exemple Google.fr, il suffit de mettre l’URL complète du site dans l’attribut href. On obtient donc la ligne de code suivante :

Résultat: Visitez Google

En cliquant sur le texte, “Visitez Google”, vous serez automatiquement redirigé sur la page d’accueil du site Google.fr.

Lien une page web

Voyons maintenant comment créer un lien vers une autre page d'un même site. Imaginons que votre page web a pour nom « page2.html » et que l’URL complète de la page soit «http://www.mondomaine.fr/page2.html»
Le code du lien vers cette page sera :

Astuce pour simplifier vos liens

Lorsque les liens se situent sur un même nom de domaine et dans un même dossier, la synthase des liens peut être simplifiée.
Par exemple, si votre lien se situe sur la page1 qui a pour URL: «http://www.mondomaine.fr/page1.html» et que vous souhaitez faire un lien vers la page2 qui se situe dans le même dossier, son URL est donc « http://www.mondomaine.fr/page2.html ». Dans ce cas, vous pouvez simplifier le code du lien en l’écrivant ainsi:

En cliquant sur le lien, vous serez redirigé automatiquement vers l’URL: http://www.mondomaine.fr/page2.html.

Ouvrir un lien dans un nouvel onglet

Quand vous faîtes un lien vers autre site, vous pouvez avoir envie que le lien s’ouvre sur un nouvel onglet. Pour cela il suffit d’ajouter target="_blank" à la balise du lien. Le code pour ouvrir l'adresse de Google.fr sur un autre onlget est le suivant

Résultat: Ouvrir Google.fr dans un nouvel onlget

Créer des liens à l’intérieur d’une même page

Il est possible de créer des liens renvoyant à différents endroits d’une même page. Par exemple, si votre page est très longue, en cliquant sur un lien le visiteur sera renvoyé vers un paragraphe précis. On appelle cela des liens vers des ancres.

Définir une ancre

Pour indiquer l’endroit où sera repositionnée la fenêtre, il faut définir dans le code ce que l’on appelle une ancre. On utilise pour cela la balise div id. Plusieurs ancres peuvent être placées sur une même page. Chaque ancre a un nom unique. Choisissons de nommer une ancre findepage, la ligne de code de notre ancre sera :

Lien vers l'ancre

Une fois le nom de l’ancre choisit et la ligne de code placée dans le document. Nous pouvons ajouter un lien vers cette ancre. Pour cela, on utilise toujours la balise a avec l’attribut href. Mais à la place de l’URL, on écrit le nom de l’ancre précédé du caractère #. Cela nous donne #findepage.

Resultat: Aller en fin de page

Une ancre nommée findepage a été placée à la fin du document. Testez le lien vers l'ancre en cliquant sur "Allez en fin de page".

Astuce: Lien vers le haut de votre page

Pour revenir vers le haut de votre page, il n’est pas nécessaire de placer une ancre en haut du document. Dans un lien, vous pouvez simplement indiquer # pour l’URL sans nom d’ancre et cela repositionnera la fenêtre tout en haut de la page. Voici le code :

Résultat: Aller vers le haut de la page