La définition des liens se fait en HTML via l'élément a. Avant de vous montrer son utilisation, voici quelques conseils généraux sur les hyperliens. Réfléchissez absolument à de bons textes d'ancrage. Un simple retour n'est généralement utile à personne. (En effet, si un visiteur provient d'une page externe, il ne sait en général pas ce que signifie retour). Essayez d'utiliser des textes d'ancrage descriptifs.
Les hyperliens suivent toujours le même principe en HTML.
<a href="videos.html">Vidéos actuelles</a>
L'élément a se voit attribuer l'attribut href. Cet attribut href attend en retour la cible du lien. Dans l'exemple précédent, le lien pointait vers le fichier videos.html. Celui-ci se trouve dans le même répertoire que le fichier HTML dans lequel le lien a été défini.
Pour définir les liens hypertextes, les mêmes règles s'appliquent que pour l'insertion d'images.
Vous n'êtes pas limités à définir des liens internes au projet. Il est également possible de définir des liens hypertextes vers des fichiers et des domaines externes.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Le texte compris entre les balises <a> et </a> est finalement le texte d'ancrage. Par défaut, ce texte est souligné par les navigateurs.
Spécifier la fenêtre cible
Lorsque vous cliquez sur un lien hypertexte, la cible s'ouvre dans la fenêtre actuelle du navigateur. C'est généralement parfaitement correct. Cependant, il peut arriver que vous ayez défini un lien vers un domaine externe. Si un visiteur clique sur ce lien, la cible doit s'ouvrir dans une nouvelle fenêtre ou un nouvel onglet. L'avantage de cette option : Votre site web reste ouvert en arrière-plan.
Cependant, vous ne devriez pas ouvrir chaque lien de votre page dans une fenêtre externe, car cela agace rapidement les visiteurs.
En utilisant l'attribut target de l'élément a, vous pouvez définir la fenêtre cible dans laquelle la cible doit s'ouvrir. HTML propose initialement trois valeurs standard pour target.
• _blank – La cible s'ouvre dans une nouvelle fenêtre du navigateur.
• _self – Ouvre la cible dans la fenêtre du navigateur actuelle.
• _parent – Permet de sortir du cadre. (Notez que les cadres ne sont pas pris en charge par HTML5. D'ailleurs, cette technique ne devrait plus être utilisée aujourd'hui, car il existe de meilleures alternatives. Si vous voulez en savoir plus sur les cadres, vous en trouverez sur la page http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Également utilisé en relation avec les cadres. Vous pouvez ainsi ouvrir la cible en dehors de l'ensemble des cadres.
Voici un exemple d'utilisation de l'attribut target :
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Dans ce cas, la cible http://www.psd-tutorials.de serait ouverte dans une nouvelle fenêtre/onglet. Vous obtiendrez le même effet en utilisant un nom fantaisiste tel que halligalli à la place du nom réservé _blank. Cependant, si vous utilisez l'attribut target, je vous recommande vraiment d'utiliser un des noms réservés.
Définir la base des liens
Vous pouvez définir dans la section head du fichier HTML une base de lien. Cette base de lien garantit que toutes les cibles s'ouvrent dans une certaine fenêtre du navigateur. Cela peut être particulièrement intéressant en relation avec les cadres.
Cependant, la pratique a son intérêt lorsque vous souhaitez par exemple que tous les liens s'ouvrent dans une nouvelle fenêtre en utilisant _blank. Imaginez une liste de liens. Si vous souhaitez que chaque cible s'ouvre toujours dans une nouvelle fenêtre, cela ressemblerait à ceci :
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Vous devriez donc attribuer un attribut target à chaque définition a.
Comme vous pouvez le constater, ce n'est pas très efficace. Et cela deviendra encore moins efficace si, par exemple, dans quelques mois, vous décidez de ne pas ouvrir les cibles dans une nouvelle fenêtre. Vous devrez alors ajuster les attributs target de tous les liens. Vous pouvez éviter cela grâce à ladite base de fenêtres cibles. Celle-ci est définie via l'élément base à l'intérieur de l'élément head. L'élément base se voit attribuer l'attribut target avec la valeur souhaitée. Voici un exemple de ce à quoi cela pourrait ressembler :
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Das vous économise beaucoup de travail de frappe.
Définition d'ancre
Vous avez déjà vu comment définir des liens hypertexte vers d'autres fichiers. Il est également possible de définir des ancres à l'intérieur d'un fichier HTML. Ensuite, vous pouvez créer des liens vers ces ancres. Cela peut être utile par exemple sur des pages longues. Ainsi, vous pouvez définir une table des matières au début du document, permettant aux visiteurs de se rendre aux parties qui les intéressent sans avoir à faire défiler la fenêtre du navigateur.
Les ancres sont créées avec l'élément a. Cependant, les définitions d'ancre sont attribuées non pas à l'attribut href, mais à l'attribut name.
<a name="seitenanfang">Contenu</a> <a name="kapitel1">Contenu Chapitre 1</a> <p>Ici suit beaucoup de texte.</p> <a name="kapitel2">Contenu Chapitre 2</a> <p>Ici suit beaucoup de texte.</p>
Vous pouvez choisir librement les noms des ancres. Je vous recommande cependant de les choisir le plus court possible, d'utiliser uniquement des minuscules et de ne pas utiliser de caractères spéciaux.
Pour faire référence à une ancre, vous définissez un lien hypertexte normal, comme cela a été montré au début de ce tutoriel.
<a href="#seitenanfang">Retour en haut de la page</a>
L'attribut href reçoit comme valeur le nom de l'ancre. Il est cependant crucial que le nom de l'ancre soit précédé d'un dièse.
Vous pouvez également définir des liens vers des ancres à travers les fichiers. Dans l'exemple suivant, je pars du principe qu'il existe un fichier news.htm qui se trouve dans le même répertoire que le fichier HTML principal. À l'intérieur de news.htm, l'ancre seitenanfang a été définie. Pour y faire référence, un dièse est indiqué après le nom du fichier cible (news.htm). Ensuite, le nom de l'ancre suit.
<a href="news.htm#seitenanfang">Retour en haut de la page</a>
Vous pouvez donc facilement créer des liens vers des ancres dans n'importe quel fichier.
