Leçon 18 : L’insertion des images, liens et listes dans une page web
Compétence : l’apprenant devra utiliser des balises précises pour insérer des liens
hypertextes, des images et des listes.
Exemple d’action
- Insérer des images dans une page web ;
- Lier deux pages web ;
- Utiliser les balises de liste.
Situation problème : Belinga vient de concevoir deux pages web. Il souhaite les embellir et
lier les deux. Il ne sait pas quoi faire et vous appelle pour l’aider.
1- Que doit-il faire pour lier les deux ?
2- Comment peut-il embellir ses pages web ?
INTRODUCTION
Un site web est constitué de plusieurs pages et il est indispensable de pouvoir naviguer
à travers toutes ces pages. HTML est un langage hypertexte qui permet en cliquant sur un
mot, une expression (généralement souligné) ou une image, de se transporter vers un autre
endroit du document, vers un autre fichier Html situé sur l‘ordinateur local, vers un autre
ordinateur situé sur le Web. Les liens hypertexte permettent de surfer de page en page et
constituent l‘essence même des documents HTML. Une image peut également constituer un
lien. Dans cette leçon, nous présenterons comment insérer un lien, une image, un son audio
ou vidéo dans une page web.
I. DEFINITIONS
Lien HyperText : référence permettant d’atteindre une page web ou un autre site.
II. TYPES DE LIEN HYPERTEXTES
Il existe deux types de lien hypertexte
1) Lien relatif : lien qui pointe vers un autre site web.
2) Lien absolu ou interne : lien qui pointe vers une page web du même site web.
III. INSERTION DES LIENS
Pour faire un lien, la balise utilisée est très simple:
<a href= ‘’chemin d’accès>Texte du lien</a>
.
Il faut cependant lui ajouter l‘attribut Href pour indiquer vers quelle page on souhaite se
rendre. 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 un curseur en forme de main apparaît lorsqu'on pointe dessus.
1. Lien vers une autre page du site
L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper
l'ensemble des éléments de celui-ci (fichiers html, images, ...) dans un même répertoire. Mais
ceci n‘est pas toujours le cas.
La syntaxe d‘insertion d‘un lien vers une autre page du site est la suivante :
<a Href= ‘‘chemin d‘accès ‘‘> Texte du lien </a>
Le chemin d‘accès dépend selon que les pages se trouvent dans le même dossier ou
non.
a) Les pages sont dans le même dossier
Le chemin d‘accès est simplement le nom de la page.
<a Href=‘‘[Link]‘‘> texte </a>
b) Une des pages est dans un sous dossier
Le chemin d‘accès est
<a Href=‘‘nom-sous-dossier/[Link]‘‘> texte </a>
.
Si la page se trouve dans un autre dossier du sous dossier alors le chemin d‘accès
devient :
<a href=‘‘nom-sous-dossier/nom-autre-dossier/[Link]‘‘> texte </a>
Il faut donc dans ce cas spécifier à chaque fois le chemin d‘accès absolu au fichier
HTML.
c) Une des pages est dans un dossier parent
Le chemin d‘accès est
<a href=‘‘.. /[Link]‘‘> texte </a>.
IV. INSERTION DES IMAGES
1. Les différents formats d‘images
Une image peut être enregistrée dans plusieurs formats différents. Le poids (en Ko,
voire en Mo) et la qualité de l'image sera plus ou moins nette selon le format choisi.
Certains formats sont plus adaptés que d'autres selon l'image (photo, dessin, image
animée...) et de même certains sont plus adaptés pour le net que d‘autres.
On distingue pour :
a) Une photo
utilisez un JPEG. N'importe quel graphique avec peu de couleurs (moins de
256) ;
utilisez un PNG 8bits, ou éventuellement un GIF. N'importe quel graphique
avec beaucoup de couleurs ;
utilisez un PNG 24 bits.
b) Une image animée utilisez un GIF animé.
2. Insérer une image
La balise permettant d‘insérer une image dans une page web est :
<img src= ‘’chemin d’accès à l’image’’ Alt=’’Texte alternatif’’ />.
C‘est une balise non fermante c'est-à-dire qu‘on n‘a pas besoin de l‘écrire en deux
exemplaires comme la plupart des balises utilisées jusqu'ici.
La balise doit être accompagnée de 2 attributs obligatoires :
SRC : signifie "source". Il permet d'indiquer où se trouve l'image que l'on veut
insérer.
ALT : cela signifie "texte alternatif". On doit toujours indiquer un texte
alternatif à l'image, c'est-à-dire un texte court qui décrit ce que contient l'image.
REMRQUES :
1. Les images doivent se trouver à l'intérieur d'un paragraphe (<p></p>).
2. Éviter les caractères accentués, les espaces et les majuscules dans les noms de fichiers,
dossiers et images.
3. Il faut toujours s‘assurer que l‘image est dans le même dossier ou dans un sous dossier
du dossier qui contient les pages web.
3. Ajouter une info bulle
L'attribut qui permet d‘afficher une bulle d'aide est le même que pour les liens : il
s'agit de title. Cet attribut est facultatif (contrairement à alt).
Exemple : soit à insérer l‘image [Link] dans une page web, on a
l‘instruction :
<p>voici une photo des élèves de la promotion 2020<br/>
<img src="[Link]" alt="élèves de la promotion 2020" title=‘‘eleves de la 1ere‘‘
/></p>
V- LES BALISES DE LISTE (« li », « ul » et « ol »)
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations.
Nous allons découvrir ici deux types de listes :
Les listes non ordonnées ou listes à puces ;
Les listes ordonnées ou listes numérotées ou encore énumérations.
a) Liste non ordonnée
Une liste non ordonnée ressemble à ceci :
Fraises
Framboises
Cerises
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a
pas de « premier » ni de «dernier »).
Créer une liste non ordonnée est très simple. Il suffit d'utiliser la balise <ul>que l'on
referme un peu plus loin avec </ul>.
Code : HTML
<ul>……</ul>
On va écrire chacun des éléments de la liste entre deux balises <li>…</li> .
Chacune de ces balises doit se trouver entre <ul>et </ul>. Vous allez comprendre de suite
avec cet exemple :
Code : HTML Résultat :
<ul> Bananes
<li>Bananes</li> Mangues
<li>Mangues</li> Oranges
<li>Oranges</li>
</ul>
<ul>…</ul>délimite toute la liste ;
<li>…</li>délimite un élément de la liste (une puce).
Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas
limités à trois éléments.
b) Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer « ul »… « /ul » par « ol »… « /ol ».
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises « li »… « /li »
pour délimiter les éléments.
L'ordre dans lequel vous placez les éléments de la liste est important. Le premier
« li »… « /li » sera l'élément n° 1, le second sera le n°2, etc…
Conclusion
Dans une page web, on peut se déplacer d’une page vers une autre grâce aux liens
hypertexte. On peut insérer des images pour embellir la page web, des listes pour énumérer.
