Vous êtes sur la page 1sur 6

Institut Suprieur des tudes Technologiques de Bja

Dpartement Technologies de linformatique


Matire : Programmation 1 Niveau : TI1.1

A.U. 2017-2018, Semestre 1 Enseignante : Mme Mouna Badis

Chapitre 3 : Les liens hypertextes en HTML

Html est un langage hypertexte qui permet en cliquant sur un mot, gnralement soulign (ou une
image) de vous transporter :

- Vers un autre endroit du document.


- Vers un autre fichier Html situ sur votre ordinateur.
- Vers un autre fichier Html sur un ordinateur distant

Syntaxe : <a href = "URL"> texte_du_lien </a>

- URL est ladresse URL du site Web qui saffichera une fois on clique sur le lien.
- Le texte du lien est la partie visible sue page HTML
- Si la page en question se trouve sur le Web, cette URL doit commencer par http:// .
Autrement le navigateur va la chercher sur la machine locale.

1- Lien un document sur un ordinateur distant


Pour crer un lien vers une page qui se trouve dans un ordinateur distant, nous devons spcifier son
URL.

Exemple :

<a href="http://www.mes.tn">
Site de la ministre de lenseignement suprieur
</a>

Affichage :

Site de la ministre de lenseignement suprieur

Mme Mouna Badis Page 1 / 6


Chapitre 3 : Liens hypertextes en HTML

2- Lien un document sur le mme ordinateur (lien local)


a) Si le document cible et le document source se trouvent dans le mme dossier

Supposons que vous ayez 2 pages HTML qui se C :


trouvent dans le mme dossier sur votre disque
dur : source.html cible.html
- C:\source.html
- C:\cible.html

Vous voulez faire un lien de source.html vers cible.html. Comme les fichiers se trouvent dans
le mme dossier il suffira d'crire juste dans lattribut href = "cible.html " .
Pour faire un lien de source.html vers cible.html :
<a href="cible.html"> Lien vers page cible.html </a>

b) Si le document cible et le document source ne se trouvent dans le mme dossier

- Si votre fichier cible.html se trouve dans un sous-dossier, par exemple :


c:\mon_dossier\sous_dossier\cible.html . Et le fichier source.html se trouve dans
c:\mon_dossier\source.html ..
o Il faudra crire le nom du dossier d'abord "sous_dossier/cible.html".
o S'il y a plusieurs sous-dossiers, il suffit de les crire la suite :
"sous_dossier1/sous_dossier2/cible.html"
- Si votre fichier cible.html se trouve dans un dossier parent, par exemple dans c:\cible.html
alors l, pour remonter d'un dossier il faudra crire "../cible.html".
- Si aucun des cas prcdents ne se prsente, alors, la valeur de lattribut HREF doit faire
apparatre le chemin daccs au rpertoire vis. Par exemple, si le fichier cible.html se trouve
sous C:/mon_site/sous_dossier/cible.html . Pour ajouter un lien de source.html vers
cible.html, il faudra crire :
<a href="file:/// C:/mon_site/sous_dossier/cible.html ">
Lien vers cible.html
</a>

Mme Mouna Badis Page 2 / 6


Chapitre 3 : Liens hypertextes en HTML

Remarques :

La rgle est dutiliser la barre oblique ( / ) pour sparer les niveaux de rpertoires.
Les espaces blancs ne sont pas accepts dans les noms de fichiers.
Ne pas utiliser de lettres accentues dans les noms de fichiers ou de rpertoire
La plupart des serveurs Web font la diffrence entre les lettres minuscules et majuscules

Exemple :

Soit la hirarchie de dossiers et de fichiers suivante :

page1.html

dossier1 page2.html

mon_site
dossier3 page4.html
dossier2
page3.html
index.html

Liens de la page index.html vers tous les autres fichiers html


<!DOCTYPE html>
<html>
<body>

<h1>index.html </h1>

<a href="page1.html">Lien vers page1.html </a> <br>


<a href="dossier1/page2.html">Lien vers page2.html </a> <br>
<a href="dossier2/page3.html">Lien vers page3.html </a> <br>
<a href="dossier2/dossier3/page4.html">Lien vers page4.html </a>
<br>

</body>
</html>

Mme Mouna Badis Page 3 / 6


Chapitre 3 : Liens hypertextes en HTML

Liens de la page2.html vers tous les autres fichiers html


<!DOCTYPE html>
<html>
<body>

<h1>page2.html </h1>

<a href="../page1.html">Lien vers page1.html </a> <br>


<a href="../index.html">Lien vers index.html </a> <br>
<a href="../dossier2/page3.html">Lien vers page3.html </a> <br>
<a href="../dossier2/dossier3/page4.html">Lien vers page4.html
</a> <br>

</body>
</html>
Liens de la page3.html vers tous les autres fichiers html
<!DOCTYPE html>
<html>
<body>

<h1>page3.html </h1>

<a href="../page1.html">Lien vers page1.html </a> <br>


<a href="../index.html">Lien vers index.html </a> <br>
<a href="../dossier1/page2.html">Lien vers page2.html </a> <br>
<a href="dossier3/page4.html">Lien vers page4.html </a> <br>

</body>
</html>
Liens de la page4.html vers tous les autres fichiers html
<!DOCTYPE html>
<html>
<body>

<h1>page4.html </h1>

<a href="../../page1.html">Lien vers page1.html </a> <br>


<a href="../../index.html">Lien vers index.html </a> <br>
<a href="../../dossier1/page2.html">Lien vers page2.html </a> <br>
<a href="../page3.html">Lien vers page3.html </a> <br>

</body>
</html>

3- L'attribut target
Cet attribut prcise o le document li sera ouvert.

Mme Mouna Badis Page 4 / 6


Chapitre 3 : Liens hypertextes en HTML

Valeur de target Description


_blank Ouvre le document li dans une nouvelle fentre ou onglet
_self Ouvre le document li dans la mme fentre o il a t cliqu (par dfaut)
_parent Ouvre le document li dans le cadre parent
_top Ouvre le document li dans le corps entier de la fentre
framename Ouvre le document li dans un cadre donn

4- Lien vers une adresse E-mail (Pour envoyer un message)


Syntaxe : <a href="MAILTO:email_correspondant"> texte </a>

Exemple : Pour adresser un message lectronique

<a href="MAILTO:toto@titi.fr"> Ecrivez-moi !!</a>

5- L'attribut download
Nouveau dans HTML5 : l'attribut download provoque le tlchargement (au lieu de l'affichage) d'un
contenu. Exemple :

<a href="image1.bmp" download > tlcharger cette image </a>

6- Lien vers un endroit prcis dun document : les signets


Des liens peuvent aussi pointer vers un endroit prcis du mme document ou d'un autre fichier.

Point d'ancrage <A id="***">...</A> Ceci est une


cible
Lien vers une ancre dans la mme page <A HREF="#***">...</A> Lien vers la cible
*** dans la mme page
Lien vers une ancre dans une autre page : <A HREF="URL#***">...</A> Lien vers la
cible *** dans une autre page
Exemple :

- Crer une page1.html contenant 2 paragraphes et deux liens permettant de sauter du


paragraphe1 au paragraphe 2 et inversement.

Mme Mouna Badis Page 5 / 6


Chapitre 3 : Liens hypertextes en HTML

- Crer une page2.html contenant :


o Un paragraphe
o Un lien vers page1.html
o Un lien pour tlcharger page1.html
o Un lien vers le deuxime paragraphe de page1.html

Rponse :

Fichier page1.html
<!DOCTYPE html>
<html>
<body>

<h1>page1.html </h1>

<a href="#p2">Allez vers le deuxime paragraphe </a>


<a id="p1"></a>
<p>Premier paragraphe </p>

<a id="p2"></a>
<p>Deuxime paragraphe </p>
<a href="#p1">Allez vers le premier paragraphe </a>

</body>
</html>
Fichier page2.html
<!DOCTYPE html>
<html>
<body>

<h1>page2.html </h1>

<p>Troisime paragraphe </p>


<a href="page1.html">Allez vers page1.html </a>
<a href="page1.html" download>Tlcharger page1.html </a>
<a href="page1.html#p2">Allez vers paragraphe 2 de page1.html </a>

</body>
</html

Mme Mouna Badis Page 6 / 6