ALL HTML - Liens hypertextes

retour

Liens hypertextes

Article publié le mardi 16 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « HTML »

Attributs de <a>

La balise <a> permet d'établir un lien hypertexte (l'essence même du Web), à l'intérieur même de votre document vers un autre document, ou encore vers l'extérieur (vers un autre site Web). Ses attributs principaux sont :
- href : Permet d'indiquer la source du document (relative ou absolue)
- target : Permet de définir la source d'un cadre comme document (dans la cas d'une frame)
- style : Permet de spécifier une feuille de style
- title : Permet de spécifier une description du lien (identique à l'attribut ALT pour une image et uniquement avec Internet Explorer)

Liens internes (même page)

Exemple : <a href="page.html">Page</a>

Les liens internes permettent de se déplacer à l'intérieur d'un fichier HTML, sans que le visiteur soit obligé de faire "scroller" la fenêtre. Le visiteur va donc cliquer sur un lien et il sera amené vers l'ancre. Pour cela deux étapes sont nécessaires : Définir la cible d'un lien (l'ancre) et associer ce même lien à cette ancre.

Définir la cible d'un lien (l'ancre)

Exemple : <a name="top"></a>

Il n'est pas nécessaire, dans ce cas précis, de mettre un texte ou une image, entre les balises d'ouverture et de fermeture (le nom ne doit pas contenir ni d'espaces, ni d'accents, ni de caractères spéciaux).

Associer un lien à une ancre

Exemple : <a href="#top">top</a>

Liens internes (pages différentes)

a ) Lien vers une page située sans le même répertoire

Exemple :
<a href="nom.htm">Cliquez ici</a>

b ) Lien dans un répertoire différent

Exemple :
<a href="sujet/nom.htm">Cliquez ici</a>

c ) Lien dans un même répertoire et vers une ancre d'une autre page

Exemple :
<a href="nom.htm#top">Cliquez ici</a>

d ) Lien dans un répertoire différent et vers une ancre d'une autre page

Exemple :
<a href="sujet/nom.htm#top">Cliquez ici</a>

Liens externes

Les liens externes commencent comme les autres liens, c'est à dire avec la balise <a href="...."> Par contre suivant le protocole, le reste de la syntaxe varie.

a ) Lien externe vers un site http

Exemple :
<a href="http://www.allhtml.com">Découvrez ALL HTML</a>

b ) Lien externe vers un serveur FTP

Exemple :
<a href="ftp://ftp.allhtml.com">FTP ALL HTML</a>

c ) Lien externe vers un serveur de news (Attention pour que ce lien soit valide il faut que le visiteur soit abonné à ce serveur de news)

Exemple :
<a href="news:news.site">Serveur de news</a>

Note : Avec un lien externe vous pouvez également proposer un fichier (.exe ou .zip) en téléchargement

Exemple :
<a href="util.exe">Cliquez ici pour télécharger le fichier</a>

Lien e-mail

Vous pouvez créer un lien e-mail pour que la messagerie paramètrée par défaut du visiteur se lance automatiquement. Attention tout de même : ce lien ne marche pas avec les premières versions de Netscape et d'I.Explorer. Il possède plusieurs attributs dont : ?subject= pour définir un sujet (ou objet) automatiquement, ce qui est très pratique pour trier votre courrier par le biais de votre logiciel classique.

a ) Lien e-mail sans sujet

Exemple :
<a href="mailto:nom@provider.com">nom@provider.com</a>

b ) Lien e-mail avec sujet (ici "renseignement")

Exemple :
<a href="mailto:nom@provider.com?subject=renseignement">nom@provider.com</a>

c ) Lien e-mail avec sujet, et texte dans le corps du message

Exemple :
<a href="mailto:nom@provider.com?subject=renseignement&body=Votre message">nom@provider.com</a>

d ) Lien e-mail avec sujet, envoyé à 2 personnes (dont une en CC)

Exemple :
<a href="mailto:nom@provider.com?cc=nom2@provider2.com&subject=renseignement">nom@provider.com</a>

e ) Lien e-mail avec 2 personnes (dont une en CCI ou BCC)

Exemple :
<a href="mailto:nom@provider.com?bcc=nom2@provider2.com&subject=renseignement">nom@provider.com</a>

Récapitulatif

Note : La balise de fermeture </a> est bien entendu obligatoire.

<table border="1" bordercolor="#330033" cellpadding="3" cellspacing="1" width="489"><tbody><tr><td align="center" bgcolor="#6699cc">Liens </td><td align="center" bgcolor="#6699cc">Exemples </td></tr><tr><td>Lien interne départ (même page) </td><td><a href="#top"> </td></tr><tr><td>Lien interne arrivée (même page)</td><td><a name="top"> </td></tr><tr><td>Lien interne (page différente)</td><td><a href="index2.htm"></td></tr><tr><td>Lien externe </td><td><a href="http://www.allhtml.com"></td></tr><tr><td>Lien e-mail</td><td><a href="mailto:webmaster@allhtml.com"></td></tr><tr><td>Lien vers news</td><td><a href="news:news.multimania.com"></td></tr><tr><td>Lien vers serveur ftp</td><td><a href="ftp://ftp.multimania.com"></td></tr><tr><td>Lien vers serveur gopher</td><td><a href="gopher://gopher.site.com"> </td></tr><tr><td>Lien vers Telnet </td><td><a href="telnet://bbs.gateway.com"> </td></tr><tr><td>Lien vers serveur Wais</td><td><a href="wais://wais.base.com"></td></tr></tbody></table>

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le jeudi 22 février 2007 à 09 h 34 par sat: Bonjour,

Je viens de consulter la page "liens". Je constate un ebizarrerie pour un cas qui n'est pas considéré, c'est-à-dire en cumulant le lien internet et externe, à savoir:

ancre : <a name="monancre"> dans le fichier "mon fichier.htm"

appel : <a href="monfichier.htm/#monancre">

Ça fonctionne sur mon pc, mais en ligne le lien ne fonctionne pas. Sans doute y a-t-il une erreur de syntaxe qui passe en local et pas sur le serveur (?)

Sat
Commentaire publié le mardi 27 février 2007 à 14 h 28 par jarodender: Ça fonctionne sur mon pc, mais en ligne le lien ne fonctionne pas. Sans doute y a-t-il une erreur de syntaxe qui passe en local et pas sur le serveur (?)

non pas de différence, par contre il ne faut pas mettre d'espace dans un nom de fichier, cela évite pas mal de problèmes.
Commentaire publié le mercredi 16 janvier 2008 à 13 h 24 par troggy: Je pense que les marqueurs internes ( #lien) ne fonctionnent pas avec IE7 il y a une astuce ou pas?
Commentaire publié le vendredi 08 août 2008 à 12 h 31 par jtouitou: Bonjour,
normal que ton code ne marche pas: tu as mis une barre en trop. Il fallait mettre dièse juste après htm et supprimer le slash.
avant <a href="monfichier.htm/#monancre">
après <a href="monfichier.htm#monancre">

Sinon moi aussi j'ai eu un problème sur IE6: on ne peut pas placer les ancres n'importe où.
Je voulais mettre des ancres comme dans les FAQ où on a une liste de questions avec des liens vers la réponse.
J'avais un tableau pour chaque réponse et je mettais l'ancre entre <table> et <tbody>. Ca ne marchait pas, j'ai placé l'ancre avant <table> et ça s'est mis à fonctionner.
Commentaire publié le vendredi 28 novembre 2008 à 15 h 53 par Jeff45: Bonjour,

Je suis passé sur une page humoristique et j'aurais voulu prendre l'exemple de cette page pour la placer sur mon blogue (comme billet puisqu'on ne peut pas créer une page html différente).

Mais je me suis rendu compte en cliquant sur le lien (qui donne le «punch») que la photo-punch est situé beaucoup plus bas sur la MÊME PAGE. Voici les liens qui les différencie:

- /http://www.chezmaya.com/txt/05/ceinture.htm (sans le punch)

- /http://www.chezmaya.com/txt/05/ceinture.htm#Bonne%20journée%20! (avec l'image-punch)

Vous comprenez le problème ?

Puis-je le faire sur une page de mon blogue ? Ou dois-je créer une page html différente sur un serveur différent et pointer cette page à partir de l'url affiché sur mon blogue

Une réponse serait souhaitée dans les plus brefs délais. Merci encore...