Les liens.
Un lien est un texte où une image vous permettant de « naviguer » d'une page à l'autre dans un même site où à l'extérieur de celui-ci et il peut être inséré n'importe ou dans une page. Par défaut les liens sont bleus et soulignés. Les boutons (images cliquables) sont entourés d'un cadre bleu. Vous pouvez cependant personnaliser l'apparence du texte et des images.
Un lien peut rediriger aussi vers un endroit précis d'une page. Dans ce cas nous parlons d'une ancre.
Un lien simple.
Un lien simple est un texte pouvant être cliqué. Ce texte peut être dans un menu, un paragraphe permet où être isolé n'importe ou sur une page. Dans la même chaine, l'élément <a> est suivit de title qui affichera un commentaire au survol de la souris. Un lien se termine obligatoirement par </a>.
Voici à quoi ressemble un lien simple.
1
|
<a href="page-de-destination.html" title="titre du lien">Texte du lien.</a>
|
Donnera :
Explications.
- a href="page-de-destination.html" - Est le chemin vers une autre page.
- title="Titre du lien" - Est un commentaire au survol de la souris.
- Texte du lien - Peut être un mot ou un ensemble de mots.
Remarquez qu'il n'y a ni majuscule, ni accent et ni espace vide après href, le chemin du lien. Habituez-vous parce que c'est ainsi que vous devez inséré tous vos liens,
que ce soit les liens vers une autre page, une image ou une vidéo. Ce qui implique que la source soit elle aussi écrite de à cette façon.
Lien externe
Si votre lien dirige votre visiteur vers un autre site, accompagner votre lien de la fonction onclick qui permet de conserver l'onglet de votre site dans le haut du navigateur :
1
|
<a href="http://www.lien-vers-un-autre-site.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien vers un autre site">Texte du lien</a>
|
Il arrive qu'un lien vers un site extérieur comporte des caractères spéciaux et que le teste échoue lors de la validation W3C. Dans ce cas, changez ses caractères spéciaux par sont entité HTML correspondante. Par
exemple & devient &. Refaites un test jusqu'à ce que tous les caractères soient remplacés. (Attention : Lorsque le test a échoué, W3C
vous dit que l'erreur vient du caractère suivant & qui est en cause alors que c'est l'esperluette qui provoque l'échec de la validation).
Si le lien extérieur tend vers une page dans une autre langue que le français, disons l'anglais :
1
|
<a href="http://www.lien-vers-un-autre-site.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien vers un autre site" hreflang="en" >Texte du lien</a>
|
Une ancre.
Un lien peut aussi tendre vers un endroit précis de la même page ou d'une autre page. Nous dirons dans ce cas que ce lien pointe vers une ancre. Pour ce faire, il suffit d'insérer un lien simple sur la page (premier exemple) puis d'insérer une ancre au-dessus de l'endroit précis où vous désirez que le visiteur se rende.
Lien simple vers une ancre dans la même page.
1
|
<a href="#ancre" title="titre du lien">Texte du lien.</a>
|
L'ancre.
1
|
<a href="#" id="ancre" name="ancre"></a>
|
Les mots "ancre" doivent être remplacés par l'identifiant le mieux adapter question de si retrouvé, mais le plus important est que le terme choisis comme identifiants ne doit pas être répété sur la même page. Le mot choisi ne doit pas comporter de majuscule, d'espace vide et ni d'accent.
Lien simple vers une ancre sur une autre page.
1
|
<a href="page-de-destination.html#ancre" title="titre du lien">Texte du lien.</a>
|
Vous insérez simplement l'ancre sur la page de destination comme nous l'avons vue plus haut.
Le CSS.
Grâce au CSS vous pouvez changer l'aspect d'un lien de façon à ce que les visiteurs n'aient aucune difficulté à reconnaître les liens insérés dans le texte tout en conservant l'esthétisme de la page.
Par exemple, si le lien se trouve dans le conteneur « corps » vous pouvez choisir :
1
2
3
4
|
.corps a {
color:#036;
text-decoration:none
}
|
Pour changer, les valeurs au survol de la souris :
1
2
3
4
5
|
.corps a:hover {
color:#fff;
text-decoration:underline;
Background-color:#036
}
|
Pour changer les couleurs d'un lien déjà visité :
1
2
3
4
|
.corps a:visited {
color:#777;
text-decoration:none
}
|
Un bouton.
Un bouton est une image sur laquelle vous pouvez cliquer pour rediriger le visiteur vers une autre page ou un autre endroit dans la même page.
1
|
<a href="destination.html" title="Titre de la page"><img src="chemin-de-limage.png" alt="Texte alternatif si l'image n'est pas affiché"/></a>
|
Remarquez que l'image remplace simplement le texte du lien.
Ajouter ce site à vos favoris
