Lien texte HTML

Un lien HTML peut être un lien ou un hyperlien. Cela redirige vers une autre page, image ou site Web ; ça peut être n'importe quoi. Ils servent également à naviguer sur une même page pour une section particulière. Auparavant, ils restituaient des données et des documents simplement en cliquant dessus. Nous enveloppons notre document, nos images, notre URL ou nos données dans du texte. Selon les besoins, il peut également pointer vers un fichier, un objet ou quoi que ce soit sur la même page ou sur une page différente. Lorsque nous passons la souris sur le lien HTML, le curseur se transforme en une autre icône. Nous pouvons discuter de leur fonctionnement et de la manière de les créer dans la section suivante de notre article. Dans cette rubrique, nous allons découvrir les liens texte HTML.

Syntaxe du lien HTML

Nous pouvons créer notre premier lien HTML à partir de la syntaxe suivante ci-dessous. Nous utiliserons une balise, des attributs et des propriétés correspondantes différents dans la syntaxe donnée ci-dessous.

<a url>Link your corresponding text here</a>

Dans la syntaxe ci-dessus, nous utilisons la balise d'ancrage pour créer un lien html ou un hyperlien. Nous discuterons de cette balise d'ancrage en détail.

La balise d'ancrage est une balise à travers laquelle nous pouvons attacher ou lier notre texte, phrase ou mot pour créer un lien externe ou interne. En utilisant une balise d'ancrage ; nous créons une URL dans nos pages qui peut être utilisée pour naviguer vers n'importe quelle autre page, site Web ou dans la même section de la page.

En utilisant la balise d'ancrage, nous bénéficions de nombreux avantages mentionnés ci-dessous.

• Organiser : Cela aide à organiser nos données. Nous n'avons pas besoin de créer plusieurs pages Web ou de diviser nos données en morceaux à des fins de gestion ; nous pouvons facilement organiser nos données en un seul endroit.
• Pas de défilement : En utilisant le lien html ou les liens internes html, nous n'avons pas à nous soucier du défilement sur des pages très longues ; nous pouvons cliquer sur ce lien pour trouver la page de section souhaitée. Il est donc facile de trouver n'importe quelle donnée ou section sur la page.

Comment créer une balise d'ancrage ?

Comme vous pouvez le voir dans la syntaxe ci-dessus, nous avons utilisé tellement de choses là-bas maintenant ; nous verrons de plus près comment créer et comment cela fonctionne.

Il se compose de trois parties différentes (attribut) :

1. attribut href
2. attribut cible
3. attribut de nom

1. attribut href

L'attribut Href signifie référence hypertexte. Supposons que nous souhaitions créer un lien hypertexte, la première exigence est donc une adresse de document qui peut ressembler à n'importe quoi comme un autre site Web, un fichier tel qu'un PDF, etc.

Donc par exemple :

<a href="http://www.google.com">Google</a>

En cela, http://www.google.com est la valeur que nous attribuons à notre attribut href. Ainsi, chaque fois que nous cliquons sur Google, cela nous redirigera vers le lien de la page d'accueil de Google. L'attribut href contient donc l'adresse du document. Nous pouvons également mentionner notre propre lien HTML vers href.

Par exemple

<a href="demo.html">My page</a>

2. attribut cible

L'attribut target définit la manière dont le document s'ouvrira. Il en existe de nombreux types et nous pouvons les utiliser selon nos besoins.

• _parent : Il ouvre simplement le document joint dans le cadre parent.
• _blank : Il ouvre le document dans un nouvel onglet ou une nouvelle fenêtre.
• _top : Il ouvre le document joint dans la fenêtre complète.
• _self : Il ouvre le document dans la même fenêtre ou le même onglet dans lequel il est cliqué. Par défaut, cette cible est activée. Nous pouvons le modifier comme ci-dessous :

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

Ici target=”_blank” est la syntaxe pour l'utiliser.

3. attribut de nom

L'attribut name est utilisé pour sauter ou naviguer vers un point de la page ; cela peut être utile lorsque nous avons une page VRU importante avec autant de contenu. Cela permet d'économiser du temps et des résultats pour les utilisateurs sans faire défiler. Syntaxe ci-dessous :

<a name="to%20end"></a> or

En cela, on clique pour aller à la fin de la page sans scroller vers le bas.

<a href="#SomeSection">Section</a>

Ce navigateur identifiera la section, mais nous devons utiliser (#) avec l'attribut name.

<a href="otherpage.html#title">Link your text</a>

Par là, nous pouvons faire référence en interne au « titre » d’une autre page. Ici aussi, (#) doit être utilisé à la fin de l’adresse de la page.

Couleurs des liens HTML

Nous pouvons également fournir des couleurs à notre lien html. Par défaut, ils ont trois états pour la couleur des liens ; cela apparaîtra dans tous les navigateurs.

• Lien actif : Lorsque nous cliquons sur un lien, il devient un lien actif avec une couleur soulignée et rouge.
• Liens non visités : Les couleurs par défaut du navigateur standard pour les liens non visités sont le bleu et soulignées.
• Liens visités : Ceux-ci sont violets et soulignés.

Mais nous pouvons également fournir nos couleurs personnalisées pour créer un lien en utilisant la syntaxe ci-dessous. Nous pouvons suivre ce type différent pour donner de la couleur à notre lien. Mais nous utilisons ici du CSS en ligne ; vous pouvez également créer du CSS externe si vous le souhaitez.

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion – HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

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!