Les liens
- L'élément <a>
- Les attributs obligatoires
- Les attributs optionnels
- Les liens internes
- Un lien sur une image
- Lien email
- Lien sur une ressource
L'élément <a>
Les liens hypertextes sont introduites dans le documents par l'utilisation de l'élément <a>.
C'est un élément de type en ligne.
Exemple :
<a href="http://fr.wikipedia.org">Site de Wikipédia</a>
Les attributs obligatoires
Les attributs obligatoires sont :
- href : Spécifie l'adresse du lien.
- Pour une ancre : id ou name : Peut spécifier en l'absence de l'attribut href que l'élément <a> n'est plus un lien mais une cible de lien interne, appelée ancre.
Pour les liens dits externes, c'est-à-dire pointant hors du document en cours, la valeur de l'attribut href est une URL que l'on peut associer à l'une des 3 catégories suivantes :
- Les liens par http
- Les liens en absolu
L'adresse indiquée commence par le signe /, correspondant au dossier racine. L'adresse indiquée est le chemin absolu vers la ressource. L'utilisation de liens en absolu est à proscrire (si un site se retouve par la suite dans un sous-dossier d'un autre site, les liens en absolu seraient "brisés", car ils ne correspondraient plus). - Les liens en relatif
L'adresse indiquée est le chemin vers un autre fichier en partant de l'endroit où se trouve le document HTML. C'est un chemin relatif.
Si les fichiers sont dans un même dossier, l'adresse correspond au nom du fichier.
Si le fichier de destination est dans un sous-dossier, on indique le nom du sous-dossier puis le caractère / puis le nom du fichier.
Si le fichier de destination est dans un autre dossier autre qu'un sous-dossier, on doit utiliser deux points ".." suivi du caractère / pour indiquer que l'on remonte dans l'arborescence, puis à partir du parent commun on redescend dans l'arborescence jusqu'au fichier de destination).
En combinant ces 3 commandes, il est possible de pointer vers tout fichier compris dans une même arborescence.
Exemple :
<a href="http://fr.wikipedia.org">Site de Wikipédia</a>
<a href="/recherche/index.html">Recherche</a>
<a href="index.html">Accueil</a>
<a href="resources/documents.html">Documents</a>
<a href="../recherche/index.html">Recherche</a>
<a href="../../communication/contact/index.html">Contact</a>
Les attributs optionnels
Les attributs optionnels sont :
- hreflang : Indique la langue utilisée par la ressource désignée par le lien.
- title : Donne des informations sur le lien (c'est un attribut commun à tous les éléments dont l'utilisation est répandue dans une certaine mesure avec cet élément)
Exemple :
<a href="http://www.w3.org/" hreflang="en" title="Site du du World Wide Web Consortium">W3C</a>
L'attribut déprécié, utilisable en DTD Transitional est :
- href : _blank (la cible sera une nouvelle fenêtre du navigateur), _parent,_self, [Nom de la Frame] (la cible sera la frame qui porte le nom qui sera désigné).
L'utilisation du target="_blank" est très répandue, surtout pour les liens pointant vers un autre site.
Exemple :
<a href="http://fr.wikipedia.org/" target="_blank">Site de Wikipédia</a>
Les liens internes
Il est possible de placer des liens internes c'est-à-dire vers l'intérieur d'une page, en pointant vers des éléments pourvus de l'attribut renseigné id ou en utilisant des ancres.
La valeur de href du lien est alors introduit par le signe dièse #.
En ne spécifiant comme valeur de destination de lien interne que le signe dièse #, celui-ci pointe vers le haut de page.
L'ancre est spécifiée par un élément <a> associé à l'attribut name ou id. Elle est invisble dans le rendu graphique de la page.
Exemple :
<a href="#bas_de_page">Bas de page</a> <p>[...]</p> <a id="bas_de_page"></a> <p>Copyright</p> <p><a href="#" >Haut de page</a></p>
Ou en utilsant l'attribut id d'un élément :
<a href="#bas_de_page">Bas de page</a> <p>[...]</p> <p id="bas_de_page">Bas de page</p> <p><a href="#" >Haut de page</a></p>
Un lien sur une image
Il est possible de faire un lien sur une image en l'insérant simplement dans un élément <a>
<a href="http://www.google.fr"><img src="img/google.gif" alt="Google" /></a>
Lien email
Un lien peut également permettre d'envoyer un message électronique vers une adresse email spécifiée dans href grâce à l'introduction mailto:.
<a href="mailto:jaime_le_spam@dupont.com">M'écrire</a>
Lien sur une ressource
Un lien peut pointer directement sur une ressource (image, fichier pdf, image tif, fichier Flash, vidéo, fichier zip...).
<a href="img/tbl.jpg">Photo de Tim Berners-Lee</a>
