Comment créer un lien hypertexte
Un lien hypertexte c’est quoi ?
Lorsque vous voyez un mot ou un groupe de mots soulignés dans une page web, ça signifie généralement qu’ils sont cliquables et qu’ils mènent vers quelque chose.
Par exemple un article, un site, un fichier à télécharger, une image…
Dans la vidéo ci-dessous, je vous explique tout ça en détail.
Liens cités dans la vidéo :
Lien hypertexte interne ou externe
Il faut déjà faire une distinction entre un lien hypertexte interne et un lien hypertexte externe.
Les liens INTERNES vous mènent vers une page ou un contenu qui appartient au site sur lequel vous vous trouvez.
Par exemple, vous êtes sur une page A d’un site, et sur cette page un lien vous mène vers une page B du même site.
Tandis que les liens EXTERNES vous mènent vers une page ou un contenu d’un autre site.
Si vous êtes sur la page d’un site A, le lien vous mène vers une page ou un contenu d’un site B.
Vous avez peut-être déjà remarqué que lorsque vous cliquez sur un lien, ça vous ouvre parfois un nouvel onglet de votre navigateur dans lequel s’affiche le contenu correspondant.
Ça, c’est parce que la personne qui a créé ce lien l’a volontairement paramétré de cette façon-là.
Et nous allons voir tout à l’heure comment vous pouvez le faire, vous aussi.
Mais on va commencer par les bases : comment créer un lien hypertexte ?
Il y a deux façons de procéder : vous pouvez le faire en HTML, qui est le langage Internet que votre navigateur sait interpréter.
Oui, c’est un tout petit peu de code, mais c’est tellement simple que vous pouvez apprendre le faire, même si vous n’y connaissez rien !
Et la seconde façon de créer un lien hypertexte est même encore plus simple si vous utilisez un CMS comme WordPress.
1- Créer un lien hypertexte en HTML
Vous savez peut-être que c’est un langage qui fonctionne avec des balises.
En gros, le principe, c’est que quelque chose, un texte par exemple, compris entre deux balises HTML héritera des propriétés inhérentes à ces balises.
Pour créer un lien hypertexte en HTML, le seul impératif c’est de pouvoir intervenir sur le code HTML d’une page de votre site.
Ça peut se faire avec 2 logiciels gratuits comme Notepad sur PC pour éditer le contenu de la page HTML et Filezilla pour ensuite la publier sur votre site.
Si j’écris le texte « COUCOU » sans la moindre balise, il apparaît comme ça :
Coucou
Et si je veux le mettre en italique, je mets ce mot entre les balises <i> et </i>, comme ceci :
<i>coucou</i>
Le mot apparaît maintenant en italique :
Coucou
Pour créer un lien, c’est pareil, mais avec la balise <a>
Sauf qu’à elle seule, elle ne suffit pas pour créer un lien.
Il faut pour cela lui assigner une adresse de référence avec l’instruction « href » pour que le lien mène quelque part, comme ceci avec le site de Wikipédia :
<a href="http://wikipedia.org">Coucou</a>
Le mot « coucou », qui est entre les balises, devient donc un lien hypertexte menant au site Wikipedia.org.
Maintenant, imaginons que vous souhaitiez que le site s’affiche dans un nouvel onglet. Pourquoi ? Parce que vous voulez peut-être que votre visiteur puisse visiter le lien que vous lui proposez, mais sans quitter votre site à vous. Ça peut être utile surtout quand le lien proposé est un lien EXTERNE et mène donc vers un autre site que le vôtre.
Dans ce cas, il suffit d’ajouter une instruction de cible, « target », dans la balise , BLANK signifiant « nouvel onglet », et cela s’écrit comme ceci :
<a href="http://wikipedia.org" target="_blank">Coucou</a>
Dans ce cas, le lien mènera au site de Wikipédia, mais dans un nouvel onglet du navigateur.
Alors bien sûr, l’adresse peut être celle d’une page d’un site, autre que la page d’accueil.
Auquel cas, il suffit d’indiquer le chemin complet jusqu’à cette page, comme ceci :
<a href="http://fr.wikipedia.org/wiki/vache" target="_blank">Coucou</a>
Ainsi, le lien pointe directement sur la page « vache » de Wikipedia, sans passer par la case ACCUEIL DU SITE.
Et si vous souhaitez que le lien pointe, non pas vers une page Internet mais vers un contenu, ce n’est pas plus compliqué.
Par exemple, admettons que je veuille que mon texte pointe vers une image, je tape : Cliquez ici pour voir ma photo.
On va remplaçer l’adresse du site que j’avais mis tout à l’heure par le chemin qui mène jusqu’au fichier, comme ceci par exemple :
<a href="http://web-tutos.com/demo/singe.jpg">Cliquez ici pour voir ma photo</a>
Bien entendu, ça sous-entend dans ce cas que vous avez placé votre fichier au bon endroit sur votre site.
Dans mon cas, le fichier « singe.jpg » est dans le dossier « demo » de mon site.
Si je veux donner accès au téléchargement d’un fichier PDF, je mettrai le lien vers le fichier en question comme ceci :
<a href="http://web-tutos.com/demo/notice.pdf">Cliquez ici pour télécharger ma notice</a>
Le fichier PDF s’affiche dans le navigateur et pour le télécharger je n’ai qu’à cliquer sur la petite icône correspondante en haut à droite :
Et s’il s’agit d’un fichier compressé, par exemple un .zip qui contiendrait un certain nombre de fichiers, la méthode est la même :
<a href="http://web-tutos.com/demo/playlist.zip">Cliquez ici pour télécharger mon ZIP</a>
Dans ce cas, comme le navigateur ne peut pas afficher le contenu de ce type de fichier, il lancera automatiquement son téléchargement :
2- Créer un lien hypertexte dans WordPress
Si vous utilisez un CMS comme WordPress, créer des liens hypertexte est encore plus simple.
Là je suis dans l’édition d’un article d’un blog conçu sous WordPress.
Vous voyez que l’interface est très similaire à celle d’un traitement de texte :
Ici, j’ai inscrit 5 phrases :
Cliquez pour aller sur Wikipedia
Cliquez pour aller sur mon autre article
Cliquez pour voir ma photo
Cliquez pour télécharger mon pdf
Cliquez pour télécharger mon fichier zippé
Pour assigner un lien, je sélectionne ma phrase. Ensuite je clique sur la petite chaîne qui symbolise le lien. Dans la fenêtre qui s’affiche, je mets l’adresse internet de Wikipedia et je valide. Hop, mon lien est créé.
Et si je veux que le lien s’ouvre dans un nouvel onglet, je clique sur la petite roue…
…et je coche « ouvrir dans un nouvel onglet ». C’est aussi simple que ça !
Ensuite pour mettre un lien vers un autre article de mon site, WordPress les liste, ce qui simplifie les choses. Je sélectionne et je clique sur valider.
Pour afficher une image, je sélectionne ma phrase, j’inscris le chemin qui mène à l’image et je valide.
Pour télécharger un PDF, même chose :
Idem pour télécharger un .ZIP :
Vous voyez c’est pas très compliqué, surtout si vous utilisez WordPress !
Partagez cet article auprès de vos amis !