|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Les
attributs de la balise <a>
Les
liens internes ( même page ) : les ancres
Les
liens internes ( pages différentes )
Les
liens externes
Les
liens E-mail
Tableau
récapitulatif des différents liens |
|
1.
Les attributs de la balise <a>
La balise <a> permet d'établir un lien hypertexte
à l'intérieur même de votre document, vers un autre fichier
HTML ou encore vers l'extérieur, c'est à dire vers un
autre site Web.
Il s'agit là de l'essence même de l'Internet.
Nous verrons qu'il est possible d'établir un lien hypertexte
à partir d'un ou de plusieurs mots mais également à
partir d'images.
Les liens hypertextes sont créés à l'aide de
la balise <a> qui signifie "Anchor"
( ancrage ).
La balise ancrage débute toujours avec <a> puis
elle est suivie de l'attribut principal HREF , c'est à
dire du nom du fichier ou de l'URL vers laquelle vous voulez créer
le lien.
Après avoir refermé la commande ancrage initiale, vous saisissez le
texte qui devra apparaître sous forme de lien hypertexte et vous clôturez
la balise avec </a>
Voici un petit exemple :
<A HREF="fichier_exemple.htm">Cliquez
ici !!</A>
Nous avons créés un lien depuis la page liens.htm où
nous sommes actuellement vers la page fichier_exemple.htm,
qui se trouve dans le même dossier que le fichier liens.htm (ce qui
explique que l'on saisisse uniquement le nom du fichier dans l'attribut
HREF.
démonstration : Cliquez
ici !!
Notez que normalement les liens hypertextes sont reconnaissables à
leurs soulignements même si ce n'est pas systématique.
|
| |
 |
| |
L'attribut TARGET:
Cet attribut permet de renseigner la source d'un cadre (frame) comme
document.
Ex : Vous avez un jeu de cadre composé de deux frames
.
Vous donner le nom "menu" à votre frame gauche et
vous nommez la frame principale, "centre".
Voici, à travers un petit graphique ce que cela représente
:
Si vous souhaitez mettre un lien dans le menu de gauche, vous devez
spécifier le nom de la frame de destination, dans l'exemple,
TARGET="centre".
<A HREF="frame_centrale.htm"
TARGET="centre"><A>
|
|
| |
| Nous aborderons plus en détails les
autres propriétés de l'attribut TARGET à
travers l'étude des "Frames" où Cadres en
Français.
Vous l'avez peut être observé à travers l'exploration
de certains sites : quand vous cliquez sur un lien, la page est
remplacée par le site en question ! Ce qui serait beaucoup
mieux, vous en conviendrez, ce serait que les sites s'ouvrent dans
une autre fenêtre du navigateur afin de garder votre liste
de liens accessibles.
Pour que vos sites s'ouvrent dans une nouvelle fenêtre, il
vous faut ajouter une nouvelle propriété dans l'attribut
TARGET.
Le code pour l'ouverture d'un lien dans une nouvelle fenêtre
sera :
<A HREF="fichier_exemple.htm
TARGET="_blank">Cliquez
ici !!</A>
Le simple ajout de TARGET="_blank" (blank = page
vierge en français) a indiqué au navigateur qu'il
devait ouvrir le lien indiqué dans une cible nommée
"_blank", c'est à dire une nouvelle fenêtre
du navigateur.
Attention : devant le mot blank il s'agit d'un "underscore"
et non d'un simple tiret !!
Nouvelle démonstration avec ouverture dans une nouvelle fenêtre: Cliquez
ici !!
|
| |
|
| |
Il existe deux types de liens internes :
- Les liens qui permettent de se déplacer à l'intérieur
de la même page HTML, sans que le visiteur ne soit obliger
d'utiliser la barre de défilement ce qui est contraignant
surtout lorsque les pages sont volumineuses
- Les liens internes qui pointent vers d'autres fichiers situés
ou non dans des répertoires différents.
2. Les liens
internes (ancres) :
Les ancres permettent aux visiteurs de vos pages de se déplacer
à l'intérieur d'une même page sans pour autant
avoir à utiliser les barres de défilements verticales.
Le visiteur va donc cliquer sur un lien qui l'amènera à
l'endroit où a été positionnée l'ancre.
Il faut pour cela réaliser deux étapes :
- Définir la cible du lien, c'est à dire
l'ancre.
Il vous suffit de donner un nom à votre ancre, à
l'intérieur d'une balise liens hypertextes <A></A>.
Exemple : <A name="table"></A>
Cette balise indique juste au navigateur l'endroit où se
trouve l'ancre. Il s'agit d'une balise invisible.
Attention au nom de votre ancre : celui-ci ne doit ni contenir
d'espaces, ni de caractères spéciaux ou accentués.
- Associer un lien à une ancre.
Dans votre liens hypertexte, vous indiquez le nom de l'ancre.
Exemple : <A HREF="#table">Retour
à la table des matières</A>
Vous pouvez tester en cliquant sur ce lien : Retour
à la table des matières
|
| |
|
| |
|
3. Les liens
internes ( page différente ) :
Il existe plusieurs types de liens internes vers des pages différentes
:
- Liens vers une page située dans le même
répertoire
Exemple :<AHREF="nom_de_fichier.htm">Cliquez
ici</A>
Aucun problème dans cet exemple, il suffit de saisir le
nom du fichier cible;
Attention : n'oubliez jamais les " " entre le
nom de votre fichier et n'insérer jamais d'espace ni de
caractères spéciaux ou accentués.
- Liens vers une page située dans un répertoire
différent :
Exemple : <A HREF="introduction/nom_de_fichier.htm">Cliquez
ici</A>
Le fichier cible se situe dans le dossier "introduction";
le fichier source où vous avez insérez votre lien
se situe lui un niveau en dessous.
Dans notre exemple, le fichier source avec le lien s'intitule
"index.htm".
Illustration graphique : 
Si par contre, on souhaite réaliser l'inverse, c'est à
dire insérer un lien dans la page "nom_de_fichier.htm
qui pointe vers la page "index.htm", on écrira
alors :
<A HREF="../index.htm">Cliquez
ici</A>
Les " ../ " signifie que l'on remonte d'un niveau
dans l'arborescence de vos répertoire
|
| |
|
| |
- Liens dans un même répertoire et vers
une ancre d'une autre page :
Exemple : <A HREF="contact.htm#top">Cliquez
ici</A>
Dans cet exemple, on a défini une ancre, nommée
"top" à l'intérieur du fichier "contact.htm".
Depuis quel(s) fichier(s) peut-on insérer le lien
mentionné ci-dessus ?
Cochez la bonne réponse et cliquez sur le bouton "Vérifiez"
:
- Liens dans un répertoire différent et
vers une ancre d'une autre page :
Cas pratique :
Vous souhaitez insérer un lien dans la page " music.htm
" vers le fichier " loisirs.htm " et au
niveau de l'ancre, nommée " mp3 ".
Par rapport à l'arborescence ci-dessus, cochez la bonne
réponse parmi ces différentes possibilités
:
|
| |
|
| |
|
4. Les liens
externes
Les liens externes possèdent la même syntaxe que les
liens internes, c'est à dire qu'ils sont inclus dans la balise
<A HREF="..."></A>.
La seule différence réside dans le fait que les liens
sont rédigés en absolu, c'est à dire
avec une adresse complète.
Selon le protocole utilisé, ces adresses absolues diffèrent
:
|
| |
|
| |
|
5. Les liens
E-mail
Vous pouvez créer un lien e-mail pour que la messagerie paramétrée
par défaut du client se lance automatiquement.
Plusieurs type de liens e-mail sont paramétrables :
- Lien e-mail simple, sans sujet :
<A HREF="mailto:nom@provider.fr">Contactez-moi</A>.
A l'intérieur de la balise <A
HREF="">, vous indiquez votre
adresse e-mail.
- Lien e-mail avec sujet :
Si vous souhaitez recevoir votre message
avec le champ sujet ( subject )
prérenseigné, vous pouvez
utiliser l'attribut ?subject= :
<A HREF="mailto:nom@provider.fr?subject=demande
d'information">Contactez-moi</A>.
- Lien e-mail avec sujet et corps du
message :
Vous pouvez, en plus du sujet, ajouter
du texte dans le corps du message afin
qu'une partie de texte apparaisse systématiquement
dans les messages que vous recevez.
<A HREF="mailto:nom@provider.fr?
subject=demande d'information&
BODY=Voici les
critiques concernant votre site : ">
Contactez-moi</A>.
- Lien e-mail envoyé à deux personnes,
dont une en copie (cc) ou en copie cachée
(cci ou bcc) :
<A HREF="mailto:nom@provider.fr?cc=nom2@provider.fr">
Contactez-moi</A>.
<A HREF="mailto:nom@provider.fr?bcc=nom2@provider.fr">
Contactez-moi</A>.
|
| |
|
| |
|
6. Tableau
récapitulatif des liens :
| LiensExemples |
| Ancres |
Liens internes départ
(même page) |
<A href="#haut"> |
| Liens internes arrivée
(même page) |
<A name="haut"> |
 |
| Liens
internes |
vers une page différente |
<A href="index.htm"> |
| vers une page et un
dossier différents |
<A href="intro/index.htm> |
|
| Liens externes |
Liens vers un serveur
HTTP |
<A href="http://www.clubic.com"> |
| Liens vers un serveur
FTP |
<A href="ftp://ftp.microsoft.fr"> |
|
Liens
E-mail |
Liens externes e-mail |
<A href="mailto:nom@provider.fr"> |
| Liens externes e-mail
avec sujet |
<A href="mailto:nom@provider.fr?
subject=bonjour"> |
|
|
|
|
|
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
