HTML - Liens texte

Une page Web peut contenir divers liens qui vous mènent directement à d'autres pages et même à des parties spécifiques d'une page donnée. Ces liens sont appelés hyperliens.

Les hyperliens permettent aux visiteurs de naviguer entre les sites Web en cliquant sur des mots, des phrases et des images. Ainsi, vous pouvez créer des hyperliens en utilisant du texte ou des images disponibles sur une page Web.

Note- Je vous recommande de suivre un court tutoriel sur la compréhension de l'URL

Lier des documents

Un lien est spécifié à l'aide de la balise HTML <a>. Cette balise s'appelleanchor taget tout ce qui se trouve entre la balise d'ouverture <a> et la balise de fermeture </a> fait partie du lien et un utilisateur peut cliquer sur cette partie pour accéder au document lié. Voici la syntaxe simple pour utiliser la balise <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

Exemple

Essayons de suivre l'exemple des liens http://www.tutorialspoint.com sur votre page -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

Cela produira le résultat suivant, où vous pourrez cliquer sur le lien généré pour accéder à la page d'accueil de Tutorials Point (dans cet exemple).

L'attribut cible

Nous avons utilisé targetattribut dans notre exemple précédent. Cet attribut est utilisé pour spécifier l'emplacement où le document lié est ouvert. Voici les options possibles -

Sr.Non Option et description
1

_blank

Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet.
2

_self

Ouvre le document lié dans le même cadre.
3

_parent

Ouvre le document lié dans le cadre parent.
4

_top

Ouvre le document lié dans le corps entier de la fenêtre.
5

targetframe

Ouvre le document lié dans un cadre cible nommé .

Exemple

Essayez l'exemple suivant pour comprendre la différence de base entre quelques options données pour l'attribut cible.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

Cela produira le résultat suivant, où vous pouvez cliquer sur différents liens pour comprendre la différence entre les différentes options données pour l'attribut cible.

Utilisation du chemin de base

Lorsque vous liez des documents HTML liés au même site Web, il n'est pas nécessaire de fournir une URL complète pour chaque lien. Vous pouvez vous en débarrasser si vous utilisez<base>balise dans l'en-tête de votre document HTML. Cette balise est utilisée pour donner un chemin de base pour tous les liens. Ainsi, votre navigateur concaténera le chemin relatif donné vers ce chemin de base et créera une URL complète.

Exemple

L'exemple suivant utilise la balise <base> pour spécifier l'URL de base et plus tard, nous pouvons utiliser le chemin relatif vers tous les liens au lieu de donner une URL complète pour chaque lien.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

Cela produira le résultat suivant, où vous pourrez cliquer sur le lien généré HTML Tutorial pour accéder au didacticiel HTML.

L'URL <a href = "/html/index.htm" maintenant donnée est considérée comme <ahref = "http://www.tutorialspoint.com/html/index.htm"

Lien vers une section de page

Vous pouvez créer un lien vers une section particulière d'une page Web donnée en utilisant nameattribut. Il s'agit d'un processus en deux étapes.

Note- L' attribut name est obsolète en HTML5. N'utilisez pas cet attribut. Utilisez plutôt l'attribut id et title .

Créez d'abord un lien vers l'endroit où vous souhaitez accéder dans une page Web et nommez-le en utilisant la balise <a ...> comme suit -

<h1>HTML Text Links <a name = "top"></a></h1>

La deuxième étape consiste à créer un lien hypertexte pour lier le document et l'endroit où vous souhaitez atteindre -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Cela produira le lien suivant, où vous pourrez cliquer sur le lien généré Go to the Top pour atteindre le haut du didacticiel HTML Text Link.

Go to the Top

Définition des couleurs des liens

Vous pouvez définir les couleurs de vos liens, liens actifs et liens visités en utilisant link, alink et vlink attributs de la balise <body>.

Exemple

Enregistrez ce qui suit dans test.htm et ouvrez-le dans n'importe quel navigateur Web pour voir comment link, alink et vlink les attributs fonctionnent.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

Cela produira le résultat suivant. Vérifiez simplement la couleur du lien avant de cliquer dessus, vérifiez ensuite sa couleur lorsque vous l'activez et lorsque le lien a été visité.

Liens de téléchargement

Vous pouvez créer un lien texte pour rendre vos fichiers PDF, DOC ou ZIP téléchargeables. C'est très simple; il vous suffit de donner l'URL complète du fichier téléchargeable comme suit -

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

Cela produira le lien suivant et sera utilisé pour télécharger un fichier.

Boîte de dialogue de téléchargement de fichier

Parfois, il est souhaitable que vous souhaitiez donner une option où un utilisateur cliquera sur un lien et il fera apparaître une boîte de "Téléchargement de fichier" à l'utilisateur au lieu d'afficher le contenu réel. Ceci est très simple et peut être réalisé en utilisant un en-tête HTTP dans votre réponse HTTP.

Par exemple, si vous voulez créer un Filename fichier téléchargeable à partir d'un lien donné alors sa syntaxe sera la suivante.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Note- Pour plus de détails sur les programmes PERL CGI, passez par le tutoriel PERL et CGI .