Lier des pages en HTML

Le lien est simplement défini comme un texte cliquable, il permet donc de passer d'une page à une autre chaque fois que ce texte a été cliqué. Vous donnez le lien vers n’importe quel élément comme une page, une image ou un site Web pour passer d’une page à une autre. Le lien HTML utilise balise avec l'attribut href qui a un chemin et que nous voulons réellement sauter. Tout lien inclus dans le code HTML est affiché par défaut en bleu. Si ce lien a déjà été visité par l'utilisateur précédemment, il sera affiché en violet. Nous pouvons également changer la couleur de ce lien en utilisant CSS. Dans cette rubrique, nous allons découvrir la liaison de pages en HTML.

Syntaxe des pages de liaison en HTML

Voyons comment la liaison des pages peut être effectuée en utilisant HTML comme suit :

Syntaxe :

<a href="url"> Text_Content </a>

Dans la syntaxe ci-dessus, la balise d'ancrage permet de définir et d'ouvrir une nouvelle page ou un nouveau document ciblé à l'aide d'un attribut défini comme le lien cible.

Cela fonctionne exactement comme le chemin de fichier absolu, comme nous l'avons vu précédemment dans le contenu du chemin de fichier HTML.

Syntaxe :

<a href="url"></a<strong>>

Nous pouvons également ouvrir une page ou une partie particulière du site Web en définissant le chemin simple de ce contenu en utilisant la même syntaxe.

Si nous devons ouvrir une page spécifique, alors c'est également possible en utilisant le chemin de fichier relatif comme

Syntaxe :

<a href="page_name.html"></a>

Nous pouvons faire encore une chose intéressante en utilisant un lien HTML, car nous pouvons ouvrir une fenêtre de navigateur vide ou ouvrir notre page Web dans une nouvelle fenêtre en utilisant la syntaxe.

Syntaxe :

<a href="Browser's _URL" target="_blank"></a>

Si nous voulons ouvrir notre page Web dans la fenêtre parent, alors c'est également possible en utilisant la syntaxe suivante :

Syntaxe :

<a href="path" target="_parent"> </a>

Comment lier la page en utilisant le HTML ?

Comme précédemment, nous avons vu comment lier des pages Web, des images et d'autres documents en utilisant une balise d'ancrage avec un attribut href, c'est-à-dire en définissant à la fois le chemin du fichier comme Absolu et Relatif.

Nous savons également comment gérer les cibles du lien pour effectuer des fonctionnalités telles que l'ouverture de nouvelles fenêtres vierges, l'ouverture de la page Web dans la fenêtre parent, l'ouverture de la page dans la fenêtre automatique comme par défaut, nous l'utilisons, l'ouverture du document. dans une fenêtre de navigateur complète en utilisant l'attribut _top et bien d'autres choses.

Lien pour créer un marque-page

Voyons comment créer des ancres de favoris à l'aide du lien en HTML. Ces fonctionnalités fonctionnent comme un signet pour notre page Web ; chaque fois que nous voulons trouver quelque chose à partir de données de pages volumineuses, il suffit de définir un texte ou un document comme lien pour accéder directement à cet emplacement ciblé.

. Ceci est comme indiqué ci-dessous :

Exemple :

<a href="#home"> Homepage </a>
<h4 id="home"> Home </a>
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>

On peut également ouvrir directement une section particulière à partir d'une autre page en définissant simplement l'URL de cette page dans la balise d'ancrage avec l'attribut href ; c'est le suivant :

Exemple :

<a href="Demo.html #contactus"> Contact US </a>

Lien pour télécharger le document

Grâce aux liens en HTML, nous pouvons également créer des liens qui nous aident à télécharger des documents. Cela revient à définir le texte sous forme de lien et ajoute simplement le chemin du fichier de destination sous forme d'URL. Ainsi, chaque fois que nous cliquons sur ce lien, les documents ou la page Web connectés sont automatiquement téléchargés. Nous pouvons donc télécharger des types de fichiers comme PDF, zip, jpg, etc.

Exemple :

<a href="downloads/demo.pdf"> This will download file in PDF format </a>
<a href="downloads/brochures.zip"> This will download file in zip
Format </a>
<a href="downloads/dinjo.jpg"> This will download file as a Image</a>

Image en tant que lien HTML : Une autre fonctionnalité d'un lien HTML est de considérer l'image comme un lien dans un document HTML ; cela peut être défini comme suit :

Exemple :

<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>

Bouton comme lien : on peut également définir un bouton comme lien en HTML ; de plus, nous devons y ajouter du code javascript. Ainsi, chaque fois qu'un événement de clic se produit, la page liée s'ouvre.

Exemples de pages de liaison en HTML

Voici les exemples suivants mentionnés ci-dessous

Exemple n°1

Dans cet exemple, nous ajoutons un simple lien HTML à un lien vers le site Web, et un autre est une page Web stockée localement dans notre système.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>
</body>
</html>

Sortie :

Pour le premier lien, cela ouvrira le site

Pour le deuxième lien, cela ouvrira une page Web stockée sur le système local

Exemple n°2

C'est l'exemple disant que nous utilisons le lien pour ouvrir la page Web dans un nouvel onglet chaque fois que nous cliquons et l'image comme lien pour ouvrir un nouveau document.

Code :

<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2>HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<a href="Webpage%20Design%20HTML.html">
<img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>

Sortie :

The first link to open another page in the new target window:

Image as a link to open another webpage:

Example #3

In this example, we are using Button as a link.

Code:

<!DOCTYPE html>
<html>
<body>
<h4>Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>
</body>
</html>

Output:

Whenever we are going to click on the button, it will work as a link to open another page:

Conclusion

Finally, linking pages in HTML can be done by using tag with a href attribute. This element is useful in various features to create a bookmark, open the document in the target blank tab, the same thing in parent tab, self tab, create the image as a link, and create a button as a link and many more others.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!