Leçon 7 : Les liens,

les listes et les

médias dans une
page HTML

UVCI
APR-2102-2-L4

DIABATE Nagbégna, ©2017 Université Virtuelle

de Côte d'Ivoire (UVCI) - tous droits réservés

novembre 2017
1.0
 Table des
matières

I - Objectifs 3

II - Section 1 : Les liens 4

1. 1. Lien vers un autre site ............................................................................................................. 4

2. 2. Les liens internes en HTML ..................................................................................................... 4

3. 3. L'attribut target ("cible") ........................................................................................................ 5

4. 4. Les ancres ................................................................................................................................. 5

III - Exercice 6

IV - Section 2 : Les Listes 8

1. 1. Liste non ordonnée ou liste à puce ........................................................................................... 8

2. 2. Liste ordonnée .......................................................................................................................... 8

3. Exercice ......................................................................................................................................... 9

V - Travaux Pratiques 6 10

1. Utilisation des liens et des listes dans notre site web ................................................................. 10

VI - Section 3 : Les médias 11

1. 1. Les images .............................................................................................................................. 11

2. 2. Les animations flash ............................................................................................................... 11

3. 3. Les éléments audio et vidéo .................................................................................................... 12

VII - Travaux Pratiques 7 13

1. Insertion d'images, de son, de vidéos et d'animation flash dans notre site web ......................... 13

2. 2. Création d'animation flash avec swishmax et insertion dans notre site ................................. 13

VIII - Exercice 14

IX - Solutions des exercices 16

 Objectifs

À la fin de cette leçon, vous serez capable de :

comprendre le fonctionnement des liens entre les différentes pages ;
comprendre et pouvoir créer des menus de navigation ; et
gérer et intégrer des listes dans une page.
intégrer une image dans une page ;
intégrer une animation flash, une vidéo, un son dans une page HTML ; et
maîtriser la manipulation des liens vers les dossiers et les fichiers de médias dans une page HTML.

3
 Section 1 : Les liens

Section 1 : Les liens

I
HTML (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous
permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter :
vers un autre fichier HTML situé sur votre ordinateur ;
vers un autre ordinateur situé sur le Web ;
vers un autre endroit du document .
Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des
documents HTML.
La syntaxe de ces liens entre plusieurs pages, est simple mais entraînera de nombreux commentaires
: <a href="URL ou adresse">...</a>
Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut,
en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
Pour créer des liens en HTML, on utilise <a> accompagné de son attribut href (hypertext
reference) qui va prendre comme valeur la cible du lien. La cible d'un lien est tout simplement
l'adresse de la page de destination du lien.
Il faut distinguer deux grands types de liens: les liens permettant de se déplacer d'une page vers une
autre à travers un même site et les liens permettant de se rendre sur d'autres sites. On appellera ce
premier type de liens des liens internes tandis que le second type va correspondre aux liens externes.
Dans les deux cas, seule la façon dont on va construire la valeur de l'attribut href va changer.

1. 1. Lien vers un autre site

Les liens externes vont être des liens ramenant vers des pages d'autres sites ou les autres sites
eux-mêmes.
Pour créer un lien externe, on va devoir indiquer l' URL complète de destination du lien.
1 <h1>Les liens</h1>
2 <p>Cliquez sur <a href="http://uvci.edu.ci">Campus UVCI </a>pour aller sur
les ressources pédagogiques.</p>

Le texte situé entre les balises ouvrante et fermante de notre élément a correspond au texte cliquable
et également à la seule partie visible du lien pour l'utilisateur. Dans notre cas, cela correspond à «
Campus UVCI ».
Vous remarquez par ailleurs que le texte, lorsque l'on visualise notre page web dans un navigateur,
est en bleu et est souligné pour indiquer que l'on peut cliquer dessus.

2. 2. Les liens internes en HTML

Les liens internes vont être des liens ramenant vers d'autres pages au sein d'un même site.
Dans ce cas, nous allons renseigner une valeur relative pour notre attribut href.
On dit que la valeur est relative car on va devoir indiquer l'adresse de la page de destination
relativement à l'adresse de la page de départ (c'est-à-dire celle à partir de laquelle on fait notre lien).
En effet, vous devez savoir qu'un site n'est qu'un ensemble de fichiers liés entre eux. Ces fichiers
peuvent être placés dans des dossiers différents.
Pour créer des liens internes, il faut donc distinguer trois cas :

1.

4
 Section 1 : Les liens

1. Le cas où la page de départ et celle de destination sont dans le même dossier ;

2. Le cas où la page de destination est dans un sous-dossier par rapport à la page de départ ;
3. Le cas où la page de destination est dans un dossier parent par rapport à la page de départ.
Pour illustrer ces cas, nous allons utiliser des cas pratiques d'arboressence dans le prochain TP. Mais
avant cela, il convient de noter ces trois (3) règles pratiques :
Pour créer un lien vers un autre fichier situé dans un même dossier, il suffit de préciser le
nom du fichier en valeur de l'attribut href.
Pour créer un lien vers un fichier situé dans un dossier parent, il faudra écrire « ../ » puis le
nom du fichier en valeur de l'attribut href.
Pour créer un lien vers un fichier situé dans un sous-dossier, il faudra préciser le nom du
sous-dossier et le nom du fichier, séparés par un slash (/), en valeur de l'attribut href.

3. 3. L'attribut target ("cible")

Souvent, vous voudrez que le lien s'ouvre dans un nouvel onglet ou une nouvelle fenêtre afin que le
visiteur ne perde pas la page de votre site.
L'attribut target va permettre de choisir où doit s'ouvrir la page de destination. En pratique, on
utilise très souvent la valeur « _blank » qui spécifie que la nouvelle page doit s'ouvrir dans un nouvel
onglet ou dans une nouvelle fenêtre selon le navigateur utilisé par vos visiteurs. Sinon, la page
courante est remplacée par la page destination si l'attribut target n'est pas spécifié.

4. 4. Les ancres
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles
sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le
visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce
peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers
cette ancre. Par exemple :
1 <h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un
dièse (#) suivi du nom de l'ancre. Exemple :
1 <a href="#mon_ancre">Aller vers l'ancre</a>

Normalement, si un visiteur clique sur le lien, cela l'amènera plus bas dans la même page (à condition
que la page comporte suffisamment de texte pour que les barres de défilement se déplacent
automatiquement).

Méthode
Maintenant que vous en savez beaucoup sur les liens, faites vous mêmes des recherches sur les ancres
positionnés sur une page externe et les liens de téléchargement de fichiers en HTML (avant même
que faire le quiz).

5
 Exercice
II
[Solution n°1 p 16]

Exercice
1) Comment s'appelle la fonctionnalité qui permet de passer d'un point à un autre dans une même
page, d'une page à une autre ou d'un site à un autre ?
Une référence absolue

un lien implicite

un lien hypertexte

Exercice
2) <a href="http://www.uvci.edu.ci>UVCI</a> est-il un lien relatif ou absolu ?
C'est une question piège : on n'utilise pas href, mais url

Absolu

Relatif

Exercice
3) Que fait ce code : <a href="informatique.html#langage_c"> ?
Il envoie à l'ancre langage_c de la page informatique.html

Il envoie à la page informatique.html#langage_c

Il envoie à l'ancre #Langage_C de la page informatique.html

Exercice
4) A quoi sert l'attribut id utilisé dans le cadres des liens hypertextes ?
A faire une bulle d'aide sur le lien

A rien

A faire une ancre

6
Exercice
5) Que fait ce code : <a href="#informatique"> ?
Il envoie à l'ancre informatique de la page en cours (1)

Il envoie à la page informatique.html

Piège ! Cette écriture est incorrecte.

7
 Section 2 : Les Listes

Section 2 : Les Listes

III
1. 1. Liste non ordonnée ou liste à puce
Elles sont introduites par la balise <ul>...</ul>.
Les éléments de la liste sont énumérés par la balise <li>....</li>.
Exemple :
1 <h1>Les module informatiques</h1>
2 <ul>
3 <li>Algorithmes</li>
4 <li>langage C</li>
5 <li>Développement Web</li>
6 </ul>

2. 2. Liste ordonnée
Elles sont introduites par la balise <ol>...</ol>.
Les éléments de la liste sont énumérés par la balise <li>....</li>.
Exemple :
1 <ol type="Type">
2 <li>Texte 1</li>
3 <li>Texte 2</li>
4 </ol>

Valeurs données à "Type"

a = liste alphabétique minuscules,
A = alphabétique majuscules,
i = chiffres romains minuscules,
I = chiffres romains majuscules.
NB : Sans spécification de type, le type par défaut est une numérotation simple.

8
 Section 2 : Les Listes

3. Exercice
[Solution n°2 p 17]

Exercice
1) La balise <li>.... </li> peut-elle être employée toute seule ?
Oui

Non

Exercice
2) Une balise <li> </li> peut contenir une autre balise <ul> </ul>
Vrai

Faux

Exercice
3) Quelle balise introduit une liste numérotée ?
<ln>

<ol>

<listnum>

<h1>

Exercice
4) Quel type de puces numérotées obtient-on avec le code suivant :
1 <ol type="a"> <li>Texte 1</li> <li>Texte 2</li></ol>

a,b,c,d,e,....

A,B,C,D,E,....

1,2,3,4,5,.....

i,ii,iiii,....

Exercice
5) Le code
1 <ul type="a"> <li>Texte 1<li>Texte 2</li></ul>

est-il correcte ?
Oui

Non

9
 Travaux Pratiques 6

Travaux Pratiques 6
IV
1. Utilisation des liens et des listes dans notre site web
Simulation
Durée de la Vidéo : 15 minutes
Temps nécessaire pour le T.P : 35 minutes
La vidéo de ce TP est également disponible sur YouTube : https://youtu.be/2Q5Ql59VmvA

10
 Section 3 : Les médias

Section 3 : Les médias

V
1. 1. Les images
Les formats de fichier d'image reconnus par la plupart des navigateurs sont GIF, JPEG et PNG.
En HTML, l'image ne fait pas partie du document. Le navigateur va la chercher à l'adresse indiquée.
Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un
fichier HTML ne modifie en rien sa taille.
De ce fait, on pourra dire qu'en réalité, l'image n'est pas intégrée à la page HTML mais en plutôt
liée à cette dernière. Pour lier une image à une page HTML, on utilise la balise ou l'élément <img
/> dont la syntaxe de base est :
<img src="url_de_l_image" alt="Texte remplaçant l'image" title="Texte à afficher">
De plus on peut spécifier les dimensions d'affichage de l'image en ajoutant d'autres attributs à la
balise <img /> :
<img src="url_de_l_image" alt="Texte remplaçant l'image" title="Texte à afficher" width
="Largeur_en_pixels" height="Hauteur_en_pixels">
Comment afficher des images sur une page web?
Les principaux attributs de la balise IMG sont les suivants :
src: Indique l'emplacement de l'image (il est obligatoire)
alt: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
title: Permet d'afficher une infobulle lors du survol de l'image par le curseur.
width: Permet de spécifier la largeur de l'image en pixels.
height: Permet de spécifier la hauteur de l'image en pixels.
Ces deux exemples illustrent les cas de liaison d'image a une feuille HTML. Cependant, il faut avoir
fait le TP suivant avant de vous lancer dans les Quiz.
1 <img src="images/image-camp.jpg" alt="Photo de mon compement" class=
"imagecompement">
2 <img src="images/image-camp.jpg" alt="Photo de mon compement" class="imageMoimême"
width="512" height="260">

2. 2. Les animations flash

On peut insérer un animation flash dans une page HTML de façon un peu similaire à une image avec
la balise <object>. Cette balise à une utilisation un peu complexe car chaque logiciel de conception
flash propose sa propre syntaxe. La balise la plus simpliste est proposée dans l'exemple ci-dessous :
1 <object type="application/x-shockwave-flash" data="fichier.swf" width="550" height
="400">
2 <param name="movie" value="fichier.swf" /> <!-- source du fichier swf -->
3 </object>

mais vous trouverez une explication plus détaillée a l'adresse

http://www.as3-lessentielsouslamain.fr/fonctions_basiques/insertion_swf_dans_html.php du site de
flash consacré à son langage Actionscript 3.0

11
 Section 3 : Les médias

3. 3. Les éléments audio et vidéo

La balise <embed /> permet d' « embarquer » (intégrer) dans une page HTML du contenu
multimédia audio et/ou vidéo. Son utilisation est simple mais le type de média doit être indiqué dans
le code.
Pour insérer un son , voici un exemple :
1 <embed height="60" type="audio/midi" width="144" src="son_audio.mp3" volume="60"
loop="false" autostart="false" />

Pour insérer une vidéo , voici un exemple basique :

1 <embed src="example.mpeg" autostart="false" height="30" width="144" />

Cette balise utilise plusieurs attributs selon qu'il s'agisse d'une vidéo ou d'un son mp3 :
autostart - définit si le fichier démarrera automatiquement après que la page soit chargée. Peut
avoir la valeur true ou false
hidden - définit si les boutons sont cachés ou non. Peut avoir la valeur true ou false.
volume - peut avoir n'importe quelle valeur de 0 à 100
loop - définit si le fichier sera rejoué après qu'il soit fini. Peut avoir la valeur true ou false.
playcount - cela défini combien de fois le fichier sera rejoué. Par exemple playcount="2"
signifie qu'il sera rejoué deux fois et après il s'arrêtera.

Remarque : Le balise <audio> et <video>

Dans son évolution, HTML propose dans sa dernière version, les balises <audio> et <video> pour
gérer l'intégration des vidéos et du son. Cependant, attention à leur utilisation car elles pourraient ne
pas être supportés par certains navigateurs à ce jour.
Aussi, certains sites d'hébergement de contenu multimédia de type vidéo ou streaming proposent des
scripts d'intégration de leur contenu dans les pages HTML. C'est le cas par exemple de YouTube,
Daylimotion, etc. L'utilisation du contenu à partir de ces sites est recommandé car nous épargne
d'avoir à gérer le codage et le streaming de nos vidéos.

12
 Travaux Pratiques 7

Travaux Pratiques 7
VI
1. Insertion d'images, de son, de vidéos et d'animation flash
dans notre site web
Durée de la Vidéo : 21 minutes
Temps nécessaire pour le T.P : 50 minutes
Avant de commencer ce T.P :
Téléchargez l’archive suivante, décompressez, copiez et collez son contenu dans notre répertoire de
travail C :\web.
fusionnez les dossiers si cela vous est demandé ; écrasez les fichiers de destination si cela vous est
demandé.
La suite du T. P est décrite dans la vidéo suivante. qui est aussi disponible sur YouTube à l'adresse :
https://youtu.be/72Rx8vdtqiE

2. 2. Création d'animation flash avec swishmax et insertion

dans notre site

13
 Exercice
VII
[Solution n°3 p 17]

Exercice
1) Quel attribut HTML permet d'indiquer où se trouve l'image à insérer ?
Title

src

alt

Exercice
2) Lequel de ces formats d'image n'est pas à utiliser sur Internet ?
png

bmp

jpeg

Exercice
3) Quel type de média est inséré par le code suivant :
1 <embed src="cours_UVCI.mpeg" autostart="false" height="30" width="144" />

?
Une vidéo

Un son audio

Une image

Exercice
4) Dans le code suivant :
1 <embed src="cours_UVCI.mpeg" autostart="yes" height="38" width="124" hidden=
"true" />

la lecture se lance-t-elle automatiquement au chargement de page?

Oui

Non

Ce code n'insère pas de vidéo

14
Exercice
5) La balise
1 <audio controls="controls"> <source src="music.mp3" type="audio/mp3" /> </audio>

est-elle correcte ? peut-elle marcher sous Internet Explorer 10 ?

Non cette balise n'est pas correcte en HTML

Oui cette balise est correcte mais ne pas fonctionner sous Internet Explorer 10

Cette balise est correcte et peut fonctionner correctement sous Internet Explorer 10

15
 Ressources annexes

Solutions des exercices

> Solution n°1 Exercice p. 6

Exercice
Une référence absolue

un lien implicite

un lien hypertexte

Ceci est la définition d'un lien hypertexte !

Exercice
C'est une question piège : on n'utilise pas href, mais url

Absolu

Relatif

Voir la définition du lien absolu dans le cours

Exercice
Il envoie à l'ancre langage_c de la page informatique.html

Il envoie à la page informatique.html#langage_c

Il envoie à l'ancre #Langage_C de la page informatique.html

Ceci revient a la définition de l'ancre sur une page externe pour laquelle je vous ai demandé de faire
des recherches.

Exercice
A faire une bulle d'aide sur le lien

A rien

A faire une ancre

Ceci renvoie à la définition des ancres

Exercice
Il envoie à l'ancre informatique de la page en cours (1)

16
 Solutions des exercices

Il envoie à la page informatique.html

Piège ! Cette écriture est incorrecte.

Question de définition des ancres

> Solution n°2 Exercice p. 9

Exercice
Oui

Non

Cette balise ne peut pas être employée seule, elle doit être encadrée par une balise de définition des
listes <ul>... </ul> ou <ol>...</ol>

Exercice
Vrai

Faux

Oui ceci est couramment utilisé dans le cadre des menus déroulant des sites.

Exercice
<ln>

<ol>

<listnum>

<h1>

Exercice
a,b,c,d,e,....

A,B,C,D,E,....

1,2,3,4,5,.....

i,ii,iiii,....

Voir définition des liste numérotées

Exercice
Oui

Non

La balise <li> de "Texte 1" n'est pas fermée.

> Solution n°3 Exercice p. 14

Exercice
Title

17
 Solutions des exercices

src

alt

"src"permet d'indiquer la source de l'image

Exercice
png

bmp

jpeg

le format BMP n'est pas adapté à l'utilisation sur le net

Exercice
Une vidéo

Un son audio

Une image

Dans le nom du fichier média cours_UVCI.mpeg, l'extension mpeg est une extension de vidéo. par
conséquent, ce média est une vidéo.

Exercice
Oui

Non

Ce code n'insère pas de vidéo

la directive autostart="yes" permet de démarrer automatiquement la lecture de la video.

Exercice
Non cette balise n'est pas correcte en HTML

Oui cette balise est correcte mais ne pas fonctionner sous Internet Explorer 10

Cette balise est correcte et peut fonctionner correctement sous Internet Explorer 10

Cette balise est correcte et est prise en compte en HTML et fonctionne bien avec Internet explorer
10 et version ultérieur.
Les liens en annexes ont détaillé cette information.

18