Outil de l`Internet - LAMSADE - Université Paris

Université Paris Dauphine
Outils de l’Internet
DU1 MI2E
2011 - 2012
TP 3 : LES LIENS
1. La balise <a>
Le langage HTML permet la navigation sur le Web, à l'aide de liens hypertextes. Un lien est
affecté à un morceau de texte, une image...Un clic sur ce lien permet de charger une autre
page Web. Un lien est, par défaut, écrit en bleu souligné, puis en rouge foncé souligné
lorsque le site pointé par ce lien a déjà été visité.
La balise permettant de créer un lien hypertexte est la balise <a> …</a>. Cette balise
permet de créer un lien hypertexte, c'est-à-dire rendre une partie du texte active pour
permettre à l'utilisateur de cliquer dessus, et associer une adresse de destination où
l'utilisateur sera envoyé après son clic.
2. L'attribut href (obligatoire!!)
La valeur de l'attribut href de la balise <a> est une adresse de destination associée au lien
hypertexte. En effet, un lien hypertexte peut appeler une page Web disponible sur un site
distant, une page Web disponible en local sur votre disque, ou encore un endroit particulier
(position) d'un fichier HTML.
<a href="destination"> texte du lien </a>
Donnons un exemple où le lien est écrit à l'intérieur d'un fichier, appelé page1.htm, et ce
lien pointe vers un autre fichier page2.html.
1. Si page2.htm est une page Web d'un site distant: Dans ce cas destination doit
spécifier
l’adresse
complète
du
site
ou
de
la
page
Exemple: <a href = "http://www.dauphine.fr/page2.html">...</a>.
2. Si page2.htm est une page Web en local sur votre disque: la destination doit
spécifier le chemin complet à suivre pour atteindre ce fichier.
Exemple: <a href = "chemin/page2.htm">...</a>.
Comment spécifier le chemin?
On suppose que le fichier page1.htm est contenu dans le répertoire Rep (voir Figure).
1
Université Paris Dauphine
Outils de l’Internet
DU1 MI2E
2011 - 2012
1. Si page2.htm est dans le même répertoire Rep que page1.htm, seul son nom suffit <a
href = "page2.htm"> Vers page 2</a>.
2. Si page2.htm est contenu dans un sous-Répertoire SousRep1 de Rep, la destination
s'écrit: <a href = " SousRep1/page2.htm "> Vers page 2</a>.
3. Si page2.htm est contenu dans un sur-Répertoire SurRep2 de Rep, la destination
s'écrit: <a href = "../page2.htm "> Vers page 2</a> ( ../ permet de remonter d’un
niveau dans l’arborescence)
4. Si page2.htm est contenu dans le sur-Répertoire SurRep3 de Rep, la destination
s'écrit: <a href = "../../SurRep3/page2.html "> Vers page 2</a> (on remonte
l'arborescence de deux niveaux avant de rentrer dans le répertoire SousRep3).
3. Lien vers une position de page2.htm
Dans le cas d'un fichier très long, il peut être intéressant d'utiliser un lien pointant sur un
autre endroit du même fichier. Dans ce cas, cet endroit a dû être nommé à l'aide de l'attribut
name de la balise a.
Exemple: <a name= "nom de l’ancre"> élément de la page <a>
Pour faire référence à une ancre interne à la page, on donne dans href le nom attribué à
l'ancre avec l'attribut name précédé du symbole #
Exemple: <a href ="#haut"> haut de la page </a>
Pour faire référence à une ancre située dans une autre page page2.htm, on donne dans href
le nom du fichier (avec le chemin complet) suivi du nom attribué à l'ancre avec l'attribut
name précédé du symbole #.
Exemple: <a href = "chemin/page2.html#ancre">...</a>.
4. L'attribut Target
Cet attribut précise l'endroit où devra apparaître la page désignée par href. Il offre les
possibilités suivantes :
 target="_blank" : le document sera chargé dans une nouvelle fenêtre, créée pour la
circonstance.
 target="_self" : le document sera chargé dans la fenêtre même où se trouve l'appel
du lien. (comportement par défaut).
 target="_top" : le document sera chargé dans la fenêtre où se trouvait définie la
structure de cadre, ce qui la détruit automatiquement (à ce stade de votre étude, self
et top sont équivalents).
5. L’attribut Title
Cet attribut Il permet de proposer une info bulle explicative au lien
Exemple : <a href="page2.htm" title = "Lien vers page 2"> … </a>
2
Université Paris Dauphine
Outils de l’Internet
DU1 MI2E
2011 - 2012
6. Liens vers une adresse de ressource utilisant d'autres protocoles
6.1. Courrier électronique
L'utilisation de protocole mailto provoque l'ouverture de l'application correspondant au
courrier
lien e-mail sans sujet :
<a href=mailto:nom @dauphine.fr> … </a>
lien e-mail avec sujet :
<a href=mailto:[email protected]?subject=formation HTML > … </a>
lien e-mail avec sujet et texte dans le corps du message :
<a href="mailto:[email protected]?subject=HTML&body=blabla"> ... </a>
lien e-mail avec sujet, envoyé à deux personnes :
<a href="mailto:nom @[email protected]&subject=HTML"> ... </a>
6.2. Transfet de Fichiers
Deux façons pour télécharger de fichiers. Soit l’utilisation du protocole FTP qui provoque
l'ouverture d'une application FTP
Exemple : <a href="ftp://ftp.jussieu.fr"> … </a>
Soit de définir l’adresse du fichier comme destination. Pour un fichier FormationHTML
situé dans le même dossier, le code devient :
Exemple : <a href="FormationHTML.pdf"> Version pdf du cours HTML </a>
7. La couleur des liens
Bien qu’ils affectent les liens, les attributs pour modifier la couleurs des liens sont des
attributs de la balise <body>.
En Html, la couleur des liens est déterminée de façon uniforme pour l’ensemble du
document.
Les attributs pour changer la couleur sont :
 link="couleur"
couleur des liens hypertextes non visités
 alink="couleur"
couleur du lien activé par la souris
 vlink="couleur"
couleur des liens déjà visités
3
Université Paris Dauphine
DU1 MI2E
2011 - 2012
Outils de l’Internet
Exercice 3.1 : Liens internes
Créer un dossier Exo31 qui contient le fichier index.htm et deux dossiers "dossier1" et
"dossier2". Ces derniers contiennent respectivement les fichiers page1.htm, page2.htm et
page3.htm, comme ci-après :
index.htm
page1.htm
page2.htm
page3.htm
dossier1
dossier2
Dossier Exo31
Reproduisez les pages index.htm, page1.htm, page2.htm et page3.htm comme ci-dessous en
créant les liens internes suivants :
1. de la page page1.htm vers la page page2.htm et un lien de retour,
2. de la page page2.htm vers la page page3.htm,
3. de la page index.htm vers la page page3.htm et un lien de retour
index.htm
4
Université Paris Dauphine
Outils de l’Internet
page1.htm
page2.htm
page3.htm
5
DU1 MI2E
2011 - 2012
Université Paris Dauphine
Outils de l’Internet
DU1 MI2E
2011 - 2012
Exercice 3.2 : Liens externes
Effectuez un lien vers le moteur de recherche google et un autre lien vers votre adresse mail
comme ci-après :
Exercice 3.3 : Les Ancres
Créer une ancre dans un fichier page1.htm et une autre dans un fichier page2.htm. Ensuite,
ajouter dans le fichier page1.htm un lien interne vers ancre1 et un lien vers ancre2 du fichier
page2.htm
page1.htm
page2.htm
6
Université Paris Dauphine
Outils de l’Internet
DU1 MI2E
2011 - 2012
Exercice 3.4 : Info bulle, Target et couleur
Reproduisez la présentation ci-après en effectuant les liens suivants :
1. Un lien permettant l’ouverture de la page d’accueil de l’Université Paris Dauphine
dans une autre instance du navigateur
2. Un lien avec une info bulle explicative : « Bravo, ceci est une info-bulle »
3. Indiquer la couleur « orangered ou (FF4500) » comme couleur par défaut des liens
non visités, la couleur « goldenrod ou (DAA520) » pour les liens actifs, et la couleur
« springgreen ou (00FF7F) » pour les liens visités.
7