Html liens lien et suite

accueil > Cours > HTML > Html liens lien et suite

Cours / tutoriel écrit le 17-06-2010 par sky

1) Qu'est-ce que faire un lien ?
C'est permettre de naviguer ! On réalise des hypermots ou des hyperimages, c'est à dire des objets qui réagissent avec la souris le plus souvent, pour atteindre d'autres objets. C'est la base de la navigation.

Un lien se fait oblgatoirement entre deux objets : celui qui envoie et celui qui reçoit.On place le lien dans le fichier qui envoie.
Au début limitez vous à des fichiers dans un même dossier, et réalisez des liens entre eux.

Deux types de liens dominent la navigation :
- Relatifs et locaux pour lier vos pages. (C'est le lien le plus fréquent)
- Absolus et globaux pour lier des sites.

Il faut connaître aussi :
- les liens vers un point précis d'une page : ancre.
- les liens vers une adresse e-mail.
- les liens relatifs.
- les liens vers des fichiers (téléchargement).



2) Lier vos pages locales
C'est permettre d'atteindre un autre fichier dans un même dossier, sur une même machine.Pour des documents placés dans un autre dossier, voyez liens relatifs.

a) On réalise d'abord le fichier cible
Faites très attention à l'archivage. Notez bien le chemin du dossier et le nom du fichier.

b) Dans le fichier source, on réalise le lien vers ce fichier cible :
Pour cela, on marque un texte, ou bien une image, avec le tag <a> et l'attribut href : <a href="fichier.htm"> Texte de l'hyper lien vers le document </a>

Exemple : <a href="adam.htm">Voir Adam</a>



3) Lier des sites. Liens absolus
C'est atteindre un document ou une adresse à l'aide du chemin complet et de son nom.

a) Il faut connaître tous les éléments :
- Le type de protocole http:// ou ftp://... et pour des références locales : file://
- Le nom de l'ordinateur pour des liens locaux sur le serveur .
- Le chemin complet ainsi que le nom de fichier.

b) On confie le tout à l'attribut href du tag <a> :
Syntaxe : <a href="Protocole Serveur Chemin Fichier"> Texte du lien</a>
Exemple : <a href="http://perso.wanadoo.fr/chatinais/index.htm">Site Web chenu</a>



4) Lien relatifs
C'est atteindre un fichier situé dans un autre dossier, sur la même machine.

a) On réalise l'arborescence.
Il est très important d'archiver ses documents de façon structurée.

b) On indique le chemin par rapport au document utilisé
Syntaxe : <a href="../chemin/fichier>Texte hyper lien </a> (remonte d'un niveau et chemin/descend).

Exemple : Avec l'arborescence ci-contre, nous sommes dans le document "relatif.htm" du dossier "lien". Pour atteindre le document "index.htm" il faut remonter d'un niveau, ce qui s'écrit ../ en HTML. D'où le lien relatif suivant :

<a href="../index.htm">Index</a>

Il est possible de remonter de plusieurs niveaux :

<a href="../../courhtml/index.htm"</a>donne le même résultat !



5) Lien vers une adresse e-mail
C'est atteindre un internaute en lui envoyant un message
On utilise le tag <a> avec l'attribut href :

Adresse : <a href="mailto:E-mail de l'internaute"> Contacter TOTO</a>
Exemple : <a href="mailto:[email protected]"> Contacter l'auteur</a>

Si votre configuration est bonne, votre logiciel de messagerie doit s'ouvrir avec l'adresse du destinataire! Magique ?
Plus fort encore...en plus de l' ouverture de la messagerie avec le destinataire, on peut contraindre l'objet du message :

<a href="mailto:E-mail de l'internaute ?sujet_du_message" >Contacter TOTO</a>
Ex : <a href="mailto:[email protected]?subject=lecteur du cours">Ecrire à l'auteur</a>



6) Lien vers une ancre
C'est permettre d'atteindre un endroit précis dans une page.

1) On marque d'abord la cible avec une ancre en utilisant le atg : <a> et l'attribut name.
Syntaxe : <a name="Ancre1"> Texte qui sera ciblé.</a>
Le texte cible est compris entre <a> et </a>.
Le conteneur <a name="Ancre1>Texte qui sera ciblé.</a> est placé à l'endroit que l'on veut atteindre.

2) On réalise le lien vers cette cible :
Pour cela, on marque un texte ou une image avec le tag <a> et l'attribut href :
Syntaxe : <a href="#Ancre1"> Texte de l'hyperlien vers une ancre</a>

3) On peut placer une ancre dans un autre document :
<a href ="Chemin/NomDeFichier.htm#AncreCible">Texte de l'hyperlien</a>
Ex : <a href=../alphabet.htm#lettre_H">Atteindre H</a>



7) Lien avec des images
C'est rendre une image réactive. En cliquant dessus l'utilisateur ira vers ce que vous déciderez .
On utilise le tag <a> avec son attribut href pour le lien et <img src=...> pour l'image :

Syntaxe : <a href="fichier_cible.htm"><img src=fichier_image.gif ou .jpg"> </a>
Ex : <a href="cibleimgtm"><img src="imageligif"></a>

Note : On met l'image à la place de l'hypermot.
Pour ôter le cadre et garder le lien : <img src="imageli.gif" border="0">
Faire des zones sensibles dans une image : <MAP>



8) Couleur des liens
Il y a 3 états pour un lien : non visité, activé, visité. Chaque état peut être coloriser .
Attention "link" est, soit un marqueur <link>, soit un attribut de <body link="....">.

1) Lien non visité : par défaut c'est souvent bleu.
<body link="blue"> colorie les hypermots avant visite en bleu.
Il est possible d'utiliserle code hexadécimal : <body link="#0000FF">

2) Lien activé :
<body alink="red"> colorie les hypermots en rouge pendant le clic.
Il est possible d'utiliser le code hexadécimal : <body alink="#FF0000">

3) Lien visité : par défaut c'est souvent violet .
<body vlink="green"> colorie les hypermots des liens visités en vert .
Il est possible d'utiliser le code hexadécimal : <body vlink="#00FF00">

4) Exemple :
<body link="#0000ff" alink="#ff0000" vlink="#005500">




9) Lien avec un bouton
On utilise un formulaire

Ex :



10) Lien vers la page précédente
Le navigateur mémorise votre parcours. Il est donc possible de revenir.

Revenir avec un hypermot :
Syntaxe : <a href="#" onClick="window.history.go (-1)"> retour </a>
Revenir avec un bouton :

Syntaxe :
<form>
<input type="button" value="Retour" onClick="window.history.go (-1) ">
</form>

Remarque : Ce lien existe sur les navigateurs. Ce sont les célèbres boutons ci-contre :
<a herf="#" onClick="window.history.go (-1)"><img src="histnet.gif"> </a>

---

Commentaires