Derniers tutoriels de développement web

Liens HTML


Les liens sont trouvés dans presque toutes les pages Web. Liens permettent aux utilisateurs de cliquer sur leur chemin de la page à la page.


HTML Liens Description de

un lien hypertexte, ou tout simplement un lien, est une référence aux données que le lecteur peut suivre directement en cliquant, en tapant ou en vol stationnaire.

Un lien hypertexte pointant vers un document entier ou à un élément spécifique dans un document. Hypertext est un texte avec des hyperliens. Le texte qui est lié est appelé à partir du texte d'ancrage.

Un système de logiciel qui est utilisé pour la visualisation et la création d'hypertexte est un système hypertexte, et de créer un lien hypertexte est un lien hypertexte (ou simplement un lien). Un utilisateur hyperliens dit pour naviguer ou parcourir l'hypertexte.


Liens HTML - Hyperliens

liens HTML sont des hyperliens.

Un lien hypertexte est un texte ou une image que vous pouvez cliquer sur, et sauter à un autre document.


Liens HTML - Syntaxe

En HTML, les liens sont définis avec le <a> tag:

<a href=" url "> link text </a>

Exemple

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Essayez vous - même »

Le href attribut spécifie l'adresse de destination (http://www.w3ii.com/html/default.html)

Le texte du lien est la partie visible (Visit our HTML tutorial) .

En cliquant sur le texte du lien, vous enverrez à l'adresse indiquée.

Le texte du lien ne doit pas être texte. Il peut être une image HTML ou tout autre élément HTML.

Sans slash sur les adresses des sous-dossiers, vous pouvez générer deux requêtes au serveur. De nombreux serveurs ajoutent automatiquement un slash à l'adresse, puis créer une nouvelle demande.


Liens locaux

L'exemple ci - dessus utilisé une URL absolue (A full web address) .

Un lien local (link to the same web site) est spécifié avec une URL relative (without http://www.... ) .

Exemple

<a href="html_images.asp">HTML Images</a>
Essayez vous - même »

Liens HTML - Couleurs

Lorsque vous déplacez la souris sur un lien, deux choses vont normalement se produire:

  • La flèche de la souris se transforme en une petite main
  • La couleur de l'élément de liaison va changer

Par défaut, un lien apparaîtra comme celui - ci (in all browsers) les (in all browsers) :

  • Un lien est unvisited bleu et souligné
  • Un lien est visité et violet souligné
  • Un lien actif est souligné et rouge

Vous pouvez modifier les couleurs par défaut, en utilisant des styles:

Exemple

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Essayez vous - même »

Liens HTML - La target Attribut

La target attribut indique où ouvrir le document lié.

Cet exemple ouvre le document lié dans une nouvelle fenêtre du navigateur ou dans un nouvel onglet:

Exemple

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Essayez vous - même »
Valeur cible La description
_blank Ouvre le document lié dans une nouvelle fenêtre ou onglet
_self Ouvre le document lié dans le même cadre que il a été cliqué (this is default) qui (this is default) par (this is default)
_parent Ouvre le document lié dans le cadre parent
_top Ouvre le document lié dans le corps entier de la fenêtre
framename Ouvre le document lié dans un cadre nommé

Si votre page Web est verrouillé dans un cadre, vous pouvez utiliser target="_top" pour sortir du cadre:

Exemple

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Essayez vous - même »

Liens HTML - image comme lien

Il est courant d'utiliser des images comme des liens:

Exemple

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Essayez vous - même »

border: 0 est ajouté pour empêcher IE9 (and earlier) d'afficher une bordure autour de l'image.


Liens HTML - Créer un signet

signets HTML sont utilisés pour permettre aux lecteurs de passer à des parties spécifiques d'une page Web.

Les signets sont pratiques si votre site a de longues pages.

Pour un signet, vous devez d'abord créer le signet, puis ajouter un lien vers elle.

Lorsque le lien est cliqué, la page défile à l'emplacement avec le signet.

Exemple

Tout d' abord, créer un signet avec l' id attribut:

<h2 id="tips">Useful Tips Section</h2>

Ensuite, ajoutez un lien vers le signet ("Useful Tips Section") , à partir de la même page:

<a href="#tips">Visit the Useful Tips Section</a>

Ou, ajouter un lien vers le signet ("Useful Tips Section") , d' une autre page:

Exemple

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Essayez vous - même »

Résumé du chapitre

  • Utilisez le code HTML <a> l'élément pour définir un lien
  • Utilisez le code HTML href attribut pour définir l'adresse du lien
  • Utilisez le code HTML target attribut pour définir où ouvrir le document lié
  • Utiliser le code HTML <img> élément (inside <a> ) d'utiliser une image en tant que lien
  • Utilisez le code HTML id attribut ( id=" value ") pour définir les signets dans une page
  • Utilisez le code HTML href attribut ( href="# value ") pour créer un lien vers le signet

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »


Lien HTML tags

Marque La description
<a> Définit un hyperlien