Université De Tunis El Manar

Faculté des Sciences De Tunis

Fondement du Web

Niveau : 1ère année

Licence Fondamentale en Sciences
de l’Informatique
Cours 4 : les liens

1
 Plan du cours

 INTRODUCTION

 LES LIENS INTERNES

 LES LIENS EXTERNES

2
 Les Liens hypertextes
 Les liens permettent de construire un hypertexte et peuvent
être de différents types:

externes: un pointeur du document mène vers un autre

document

internes: un pointeur renvoie à une section du même

document

 Un lien se définit par la balise <a> suivi du paramètre

HREF="URL" qui définit l'adresse du document vers lequel
le lien conduit.

3
 Les Liens hypertextes - Liens externes (1/6)
Ce type de lien permet de pointer vers un document référencé par une
adresse URL ou par un chemin relatif. Ce document peut être un document
HTML ou tout autre type de fichier. (sons, images, etc.). Il faut distinguer
entre une:
adresse absolue (on indique le chemin pour parvenir à la page cible en
entier)
adresse relative (on indique le chemin depuis la page courante)

4
Les Liens hypertextes - Liens externes (2/6)
@dressage et accès à une page HTML avec le HREF
Deux types d’adresses :
 Adresse absolue : L'adresse d'un fichier se compose du nom du serveur, et du
chemin jusqu'au fichier, et du nom du fichier avec son extension. Pour un lien pointant
sur un fichier qui se trouve sur un autre serveur on écrira ce que l'on appelle une adresse
absolue, l'adresse en entier avec aussi le protocole.
Exemple: l'adresse absolu du fichier exemple est :
http://www.courfw.com/lienhypertexte/liens_relatifs.htm. Le lien sur cette page en
donnant l'adresse absolue sera :
<a href=" http://www.courfw.com/lienhypertexte/liens_relatifs.htm "> exemple
lien relatif</a>
 Adresse relative : Si le fichier "pointé" se trouve sur le même serveur on peut soit
écrire l'adresse absolue soit l'adresse relative. Une adresse relative est une adresse plus
courte, on l'utilise lorsque le fichier visé se trouve soit par exemple dans le même
répertoire que le fichier que vous faites, ou quelques répertoires au-dessus ou en-
dessous dans l'arborescence du serveur.
Les Liens hypertextes - Liens externes (3/6)
Exemple d’@dressage et accès à une page HTML avec
le HREF
Si le fichier source et le fichier associé au lien (qu’on nommera
« lien.html » se trouvait dans le même répertoire alors l'adresse de ce
fichier-ci serait simplement son nom
htmllien.html. un lien entre votre fichier et celui-ci donnerait:
<a href=« lien.html"> lien sur les connaissances de base</a>
Si le fichier associé se trouve dans un sous répertoire ou un répertoire
situé à un niveau plus bas de la hiérarchie :
Les Liens hypertextes - Liens externes (4/6)
Si le fichier source et le fichier associé au lien (qu’on nommera
« Un.html » se trouvait plus haut dans la hiérarchie que le fichier source
« deux.html » nous devons utiliser le « ../ » pour signifier au navigateur
qu’il doit remonter dans la hiérarchie.
 Les Liens hypertextes - Liens externes (5/6)

Avantages de l'adressage relatif

 Dans un site Web, le fait d'exprimer les liens de manière relative et
non absolue facilite la gestion de ce site. Effectivement, mettre en
ligne un site ainsi conçu ou encore changer le site d'adresse sera
similaire à un simple copier-coller. Pourquoi?
 Tout d'abord, sachez que les chemins absolus sont plus difficiles à
gérer: en cas de déplacement du site ou encore changement de nom,
il faut modifier toutes les URL. De plus, une URL est beaucoup
moins lisible qu'un chemin relatif car elle est plus longue.
 Ensuite, lors d'un transfert de fichiers sur le serveur de l'hébergeur, il
faudrait, en cas d'adressage absolu, modifier toutes les URL puisque
le site se trouvera dans un dossier dans un autre espace mémoire.

8
 Les Liens hypertextes - Liens externes (6/6)
Le texte ou l'image qui sont insérés entre les balises de début et
de fin sont les parties actives du lien ("mots_sensibles" ci-
dessous) et déclencheront le chargement du document lorsqu'on
clique dessus.

Exemples:
<A HREF="adresse"> mots_sensibles </A>

<A HREF="http://tecfa.unige.ch/welcome.html">Cliquez ici pour aller à

TECFA</A>

<A HREF="http://tecfa.unige.ch/welcome.html"><img src = "adresse/

de/l/image.gif"></A>
9
 Les Liens hypertextes - Liens internes (1/4)
Les liens internes permettent de construire des tables de matières et des
renvois à l'intérieur d'un texte. Un lien interne pointe vers une ancre, c'est à
dire un endroit à l'intérieur d'un document défini par un nom. Il faut définir
deux choses pour un lien interne.
L'ancre interne

<A NAME="nom_de_l'ancre"></A>
Exemple : <A NAME="bas_de_la_page"></A>
Le lien vers l'ancre : Le lien proprement dit se définit avec la balise <a>
suivi de :
<A HREF="#nom">mots_sensibles</A>
Exemple : <A HREF="#bas_de_la_page">Aller en bas</A>
10
 Les Liens hypertextes - Liens internes (2/4)

Exemple : Liens internes et tables de matières.

....
<a href="#partie1">Première Partie</a>
<a href="#partie2">Deuxième Partie</a>
...
<a name="partie1"></a>
...
<h1><a name="partie2">Partie 2</a></h1>
...

11
 Les Liens hypertextes - Liens internes (3/4)
Il est également possible d'utiliser les ancres dans les liens externes. Il faut
alors spécifier l'ancre vers laquelle pointe le lien en ajoutant #nom à la fin de
l'URL.
Exemple : Ancres et liens externes
<a href = "http://tecfa.unige.ch/cours/exemple.html#partie2">Deuxième
Partie</a>

Et dans le document exemple.html on trouve la définition de l'ancre suivante:

<a name="partie2"> </a>

12
 Les Liens hypertextes - Liens internes (4/4)

 Définition dans une page : attribut id

Exemple : <h1 id="menu">Menu</h1>
 Référence depuis la même page
Exemple : <a href="#menu">Aller au menu</a>
 Référence depuis une autre page
Exemple :
<a href="page.hmtl#menu">Retour au menu</a>

13
 Liens externes vers d'autres
protocoles/services Internet (1/3)
Liens pour l'envoi d'un message e-mail et la lecture d'un newsgroup: Un tel
lien lance automatiquement l'application de messagerie électronique en
incluant le nom du destinataire.
Exemple : Exemple de lien pour l'envoi d'e-mail
<a href="mailto:contact@gmail.com">Envoyez moi un message</a>
Exemple : Exemple d'un lien vers une adresse e-mail avec un sujet par
défaut
<a href=" mailto:contact@gmail.com?subject=Sujet du mail">Ecrivez-
moi</a>

14
 Liens externes vers d'autres
protocoles/services Internet (2/3)

Exemple : Exemple d'un lien vers une adresse e-mail avec un sujet et un corps
par défaut
<a href="mailto:contact@gmail.com? subject=Sujet du mail&body =Corps du
mail"> Ecrivez-moi</a>
Exemple : Exemple d'un lien vers plusieurs adresses e-mail
<a href="mailto:dest1@yahoo.com;dest2@yahoo.com"> Ecrivez-nous </a>
Exemple : Exemple d'un lien vers une adresse e-mail et une autre en copie
<a href="mailto:dest1@yahoo.com?cc=dest2@yahoo.com">Ecrivez-nous</a>

15
 Liens externes vers d'autres
protocoles/services Internet (3/3)
Liens pour le téléchargement d'un fichier: Ce type de lien est utilisé pour
donner accès à un dialogue de téléchargement de fichier. Le protocole
indiqué dans l'URL est le protocole de transfert de fichiers ftp.
Exemple : Exemple de lien pour le téléchargement de fichiers
<a href="ftp://tecfa.unige.ch/pub/software/"> Liste des logiciels
disponibles</a>

16
 Caractères spéciaux (1/2)

17
 Caractères spéciaux (2/2)

18
 Les listes
Elles servent, comme leur nom l'indique, à créer une liste d’items, plus
précisément à les énumérer, comme dans le cas d'un sommaire par exemple.
On distingue trois types de listes différents, chacun prévu pour un usage
bien précis :
Les listes non ordonnées, ou à puces.

Les listes ordonnées.

Les listes de définitions.

19
 Les listes – Non ordonnées
Elles sont démarquées par la balise <ul> et chacun des items est entouré de
la balise <li> :
Exemple :
<p>Ma liste de courses :</p>
<ul>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ul>

20
 Les listes – Non ordonnées
On va pouvoir jouer sur le design des puces à l'aide de trois types différents.
On renseigne le type des puces avec l'attribut type de la balise <ul>.
Les types sont :

disc (par défaut)

circle

square
Exemple :
<p>Ma liste de courses :</p>
<ul type="square">
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
21
</ul>
 Les listes – ordonnées
Elles sont introduites par la balise <ol> et chacun des items est encadré par
la balise <li> :
Exemple :
<p>Ma liste de courses :</p>
<ol>
<li>Champignons</li>
<li>Avocat</li>
<li>Dentifrice</li>
<li>Céréales</li>
</ol>

22
 Les listes – ordonnées
Les différents types de numérotation: On renseigne le type de
numérotation avec l'attribut type de la balise <ol>.
Les types sont :

1 : Numérotation par les chiffres (par défaut). <ol type="1" >

I : Numérotation par les chiffres romains.

i : Numérotation par les chiffres romains minuscules.

A : Numérotation par les lettres de l'alphabet.

a : Numérotation par les lettres de l'alphabet minuscules.

23
 Les listes – ordonnées

Modifier le début de la numérotation: Il est tout à fait possible, pour une

raison ou une autre, de modifier le numéro de départ par lequel va
s'incrémenter la numérotation. Pour cela, il suffit de préciser une valeur à
l'attribut start de la balise <ol>. Cette valeur doit dans tous les cas être
numérique : <ol type="I" start="8" >

24
 Les listes – de définitions
Elles sont délimitées par la balise <dl> qui comprend une liste de termes à
définir représentés par la balise <dt> qui peuvent avoir une ou plusieurs
définitions elles-mêmes encadrées par la balise <dd> (une pour chaque
définition).
Exemple :
<dl>
<dt>Informatique</dt>
<dd>Traitement automatique et rationnel de l’information
par ordinateur.</dd>
<dt>Puce</dt>
<dd>Insecte de très petite taille se déplaçant par
sauts.</dd>
<dd>Marché où l'on vend des objets d'occasion.</dd>
</dl>
25
 Les listes – Imbrication

L'imbrication des listes permet une présentation claire et détaillée d'un

menu ou d'un sommaire par exemple. On peut imbriquer les listes non
ordonnées et ordonnées sans distinction et même les mélanger.

26
 Les listes – Imbrication
Exemple :
<ol type="I">
<li>La genèse</li>
<li>La vie
<ol type="A">
<li>L'enfance</li>
<li>L'adolescence</li>
<li>Le passage à l'âge adulte
<ul type="square">
<li>Le jeune adulte</li>
<li>La crise de la quarantaine</li>
</ul>
</li>
<li>La vieillesse</li>
</ol>
</li>
<li>La mort</li>
27
</ol>
Exercice