Suivez-nous sur X
|
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z,
ALL
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
A propos d'Obligement
|
|
David Brunet
|
|
|
|
En pratique : HTML - La navigation dans les documents (liens hypertexte)
(Article écrit par Jean-François Richard - août 2009)
|
|
Aujourd'hui, nous allons aborder le sujet des hyperliens dans tous les sens avec les ancres et les liens.
La navigation dans les documents
Les liens hypertexte
Les liens hypertexte sont le concept ayant révolutionné les technologies clients-serveurs en permettant aux internautes de
naviguer d'un document à un autre à l'aide d'un simple clic. Nous allons approfondir l'étude des balises de liens au sein du
langage HTML. C'est un élément essentiel et indispensable à la bonne compréhension de HTML et des concepts liés à Internet.
Il existe plusieurs types de liens hypertexte :
- Soit internes à des documents (notion d'ancre interne), cela permet d'avoir un affichage rapide de la section nous intéressant.
- Soit dans un document extérieur à celui qui est en cours de visualisation (notion d'URL et d'ancre externe).
- Soit dans un document extérieur, mais sans lien avec une section précise du document (notion de liens et d'URL, sans ancre).
Voici le code source de la page "Lien hypertexte" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Lien hypertexte</title>
</head>
<body>
<p>
// on crée une ancre
<a name="ancre1">Ancre1 dans la page</a><br>
Le lien le plus simple
<a href="accueil.html">Lien hypertexte vers la page d'accueil sans ancre</a>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
Le lien vers une URL hors du site:
<a href="http://www.ibm.com">Lien hypertexte vers le site d'IBM</a>
<br>
Voici différents exemples d'attributs utilisés sur des liens:
<br>
Ancre et liens
<a href="#ancre1">Lien hypertexte vers l'ancre1 présente dans cette page</a><br>
<a href="accueil.html#ancre2">Lien hypertexte vers la page d'accueil au niveau de l'ancre2</a>
</body>
</html>
|
Remarque : le " " est une instruction représentant un espace insécable (c'est-à-dire un blanc quel que soit le navigateur).
La balise lien (mal nommée ancre) "<a>" peut se définir grâce à deux types d'attributs changeant sa fonction :
- C'est un pointeur vers un autre document (ou une autre partie du document en cours de visualisation) avec l'utilisation de
l'attribut "href".
- Si <a href="url">, alors la balise lien sélectionnée entraînera l'internaute vers la page pointée dans l'url.
- Si <a href="url#nom_ancre"> affiche la page pointée par l'url au niveau de la section ayant la balise <a name="nom_ancre">.
Cela peut être très intéressant à utiliser pour aider l'internaute dans sa navigation. C'est une cible d'un pointeur avec
l'utilisation de l'attribut "name".
- Si <a name="nom_ancre">, alors la balise lien n'est pas sélectionnable, elle devient une cible pointée par le biais d'un
lien avec le nom_ancre précisé dans l'url.
Image 4 : haut de la page
Image 5 : bas de la page
Les liens internes
Pour un lien interne à une page (similaire à un raccourci).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Lien hypertexte</title>
</head>
<body>
<a name="ancre1.html">Ancre1 dans le document</a>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
<a href="test#ancre1.html">Lien hypertexte</a>
</body>
</html>
|
Les liens externes
Pour un lien pointant vers un point précis d'une page HTML autre que le document en cours de visualisation.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Lien hypertexte vers une ancre d'une autre page</title>
</head>
<body>
<a href="test2#ancre2.html">Lien hypertexte</a>
</body>
</html>
|
Une ancre n'est ni plus ni moins qu'une étiquette permettant le repérage d'un point précis dans une page HTML.
Une ancre est définie par l'élément A avec l'attribut "name" dans lequel la valeur est le nom que l'on veut donner à l'étiquette
(ou à l'ancre).
Pour indiquer un lien vers cette ancre, on utilise la commande de lien hypertexte commune et précédemment vue avec au niveau de
l'URL un "#" devant le nom de l'ancre.
Ainsi pour un document interne à la page on utilise la syntaxe suivante :
<a href="#nom_de_l'ancre">Lien interne dans notre page Web</a>
|
Ainsi pour un document externe à la page en cours de visualisation, on utilise la syntaxe suivante :
<a href="URL#nom_de_l'ancre">Lien externe à notre page Web</a>
|
Exercice : faire des exemples des différents types de liens et d'ancres.
Dans les liens hypertexte, nous pouvons aussi spécifier une adresse HTML (URL) externe au site que nous visitons.
Par exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>Lien hypertexte vers une URL</title>
</head>
<body>
<a href="http://www.ibm.com">Lien hypertexte vers le site d'IBM</a>
Voici un autre lien vers le site de Denis Diderot Paris 7
<a href="http://www.diderotp7.jussieu.fr">Lien hypertexte vers le site de l'Université Denis Diderot Paris 7</a>
</body>
</html>
|
Il existe d'autres types de liens, les liens vers des FTP, vers des nouvelles Usenet, des adresses électroniques, etc.
En voici un condensé :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
<title>liens divers</title>
</head>
<body>
<a href="ftp://ftp.exemple.net">Lien vers le FTP de exemple.net</a>
Voici un autre lien vers l'adresse électronique de quelqu'un !
<a href="mailto:adresse@electronique">Écrivez-moi</a>
</body>
</html>
<table summary="" bgcolor="#c0c0c0" border=1 width=100%>
<tr><td><font color="#000000"><pre>
|
Les URL FTP
Les URL FTP permettent d'accéder à des documents depuis un serveur FTP.
Elles ont le format type suivant :
ftp://utilisateur:mot-de-passe@serveur:port/chemin;type=codetype
FTP est un service nécessitant une authentification, il demande donc un nom d'utilisateur et un mot de passe.
Il existe des accès restreints au serveur FTP par le biais des connexions anonymes (nom d'utilisateur : anonymous, et mot de passe :
anonymous). Ainsi les personnes connectées sous un accès anonyme, auront accès à une portion limitée des documents du serveur.
Dans le cadre des sites à vocation communautaire, par exemple les sites d'organisation (.org) ayant des documents représentant
de gros volume (par exemple plusieurs DVD), alors les accès anonymes sont intéressants pour y récupérer ces gros répertoires.
Enfin, dans certains cas, si vous accéder à un site de FTP sans y avoir saisi un nom d'utilisateur et un mot de passe, le serveur
vous met par défaut dans une connexion anonyme, s'il est configuré pour.
Attention : quand vous vous connectez à un serveur FTP, si vous voulez faire un lien pour y accéder plus facilement, ou le
mettre à disposition sur un site Web, ne jamais taper l'URL FTP avec le mot de passe. C'est le meilleur moyen pour que des internautes
peu scrupuleux récupèrent votre mot de passe, ainsi que votre nom d'utilisateur. Ils peuvent alors le diffuser ou en abuser.
Le port utilisé par défaut pour les serveurs FTP est le port 21.
Le codetype est binaire par défaut, d indique la recherche de répertoire, a pour des fichiers ASCII et "i" pour des transferts binaires.
Exemple d'URL FTP :
ftp://www.b2m.jussieu.fr/enseignement/modules
Cette URL FTP récupère sur le serveur FTP de BTTR un fichier de description des modules de l'année dans le sous-répertoire enseignement.
ftp://toto@b2m.jussieu.fr/bourses;type=a
Récupération sur le serveur par l'utilisateur "toto" sans passage de mot de passe (il lui sera demandé lors de la connexion au
serveur), pour obtenir de sa requête un fichier des bourses de type ASCII.
ftp://toto:mdp@b2m.jussieu.fr/RD12;type=d
Ici, toto accède directement au répertoire des 12e rencontres doctorales pour y consulter tous les documents à sa disposition.
L'URL mailto
L'URL mailto force la transmission d'un courrier électronique vers un destinataire saisi dans cet URL.
Son format général est le suivant :
mailto:adresse_électronique_du_destinataire
L'adresse du destinataire est toute adresse valide ayant la syntaxe :
nom_d_utilisateur@nom_du_serveur
En résumé : les liens hypertexte permettent aux internautes de mieux naviguer au sein de vos sites et orientent souvent
les choix des personnes, vous pouvez ainsi créer de vrais scénarios pour vos sites. Ils sont assez rapidement maîtrisés, mais
nécessitent d'être toujours exact, car les liens morts sur les sites sont la bête noire des internautes.
Astuce : vérifiez bien tous vos liens si vous faites une mise à jour annuelle de vos sites.
Soutenez le travail de l'auteur
|
|
|
