Leçon 8: Insertion des liens et des images dans un document web
Leçon 8:Insertion des liens et des images
Compétences visées :
- Insérer un lien vers une autre page, un autre site et une ancre ;
- Insérer une image et un son ;
- Insérer une bulle d‘aide ;
- Insérer un lien pour envoyer un mail ;
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 ce chapitre, nous présenterons comment insérer un lien, une image, un son audio dans une page web.
I. INSERTION DES LIENS
Un lien est un texte ou une image sur lequel on clique pour se rendre sur une autre page. Pour faire un lien, la balise utilisée est très simple: <a>……</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 souligné) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
-
Un lien vers un autre site
La syntaxe d‘insertion d‘un lien vers un autre site est la suivante :
Où adresse URL désigne l‘adresse URL du site vers lequel on souhaite diriger le visiteur et texte du lien, le texte qui sera affiché pour représenter le lien.
2. Lien vers une autre page du site
L'organisation classique, 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 :
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.
b. Une des pages est dans un sous dossier
Le chemin d‘accès est
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/page.html‘‘> 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
3. Lien vers une ancre
Une ancre est une sorte de point de repère qu‘on place dans des pages web étendues.
En effet, si une page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse passer directement à la partie qui l'intéresse.
Pour créer une ancre,
- Lien vers une ancre de la même page
- Lien vers une ancre située dans une autre page
L'idée, c'est de faire un lien qui ouvre une nouvelle page et qui amène directement à une ancre située plus bas sur cette page. En pratique, il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.
4. Lien qui affiche une infobulle au survol
On peut utiliser l'attribut ‗‘title‘‘ qui affiche une bulle d'aide lorsqu'on pointe sur le lien.
La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien. On a la syntaxe suivante :
Exemple
<a href=http://www.lybide.cm title=‘‘Site du lycée bilingue de Deido‘‘> Site du LYBIDE </a>
- Lien pour envoyer un mail
Si on désire que les visiteurs d‘un site web puissent envoyer un mail au propriétaire, on doit utiliser des liens de type "mailto". Rien ne change au niveau de la balise, on doit simplement modifier la valeur de l'attribut href comme ceci :
Exemple : on désire insérer un lien qui permet d‘envoyer un mail à l‘adresse suivante
youmbich@yahoo.com, l‘instruction est la suivante :
<a href=‘‘mailto :jibacyrille@yahoo.fr‘‘> Envoyez un mail </a>
5. Un lien pour télécharger un fichier
Pour insérer un lien qui permet au visiteur du site de télécharger un fichier, il faut
Indiquer le nom du fichier à télécharger et en précisant son extension. On a la syntaxe <a
href=‘‘nom_fichier‘‘> Texte du lien </a>. Il est à noter que le fichier doit se trouver dans le dossier du site web en question.
Exemple : soit à insérer un lien pour le téléchargement du fichier footballeurs.doc
<a href=‘‘footballeurs.doc‘‘> Télécharger la liste des footballeurs </a>
II. INSERTION DES IMAGES
1. Insérer une image
La balise permettant d‘insérer une image dans une page web est <IMG >. 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.
La syntaxe est
Exemple : soit à insérer l‘image promo2010.jpg dans une page web, l‘instruction est la suivante
<p>voici une photo des éleves de la 1e d2 <br />
<img src="promo2010.jpg" alt=" message alternatif" /></p>
2. Ajouter une infobulle
<p>voici une photo des etudiants de la promotion arc en ciel <br />
<img src="promo2010.jpg" alt="etudiants de la promotion 2010title=‘‘technopedagogues du DITE de l‘ENS‘‘ /></p>
Les images doivent se trouver à l'intérieur d'un paragraphe (<p></p>).
Éviter les caractères accentués, les espaces et les majuscules dans les noms de
fichiers, dossiers et images. 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. Insertion du son
SRC : il permet d'indiquer où se trouve le son audio que l'on veut insérer
controls : pour ajouter les boutons "Lecture", "Pause" et la barre de défilement
width : pour modifier la largeur de l'outil de lecture audio.
loop : la musique sera jouée en boucle.
autoplay : la musique sera jouée dès le chargement de la page.
preload : indique si la musique
EXERCICE 1 :
1. Définir les termes liens, ancre.
2. Donner la balise qui permet d‘insérer un lien. Citer deux attributs de cette balise et donner leurs fonctionnalités.
3. Donner la balise qui permet d‘insérer une image dans un page web. Citer trois attributs de cette balise et donner leurs fonctionnalités.
4. Donner la balise qui permet d‘insérer un son audio dans un page web. Citer trois attributs de cette balise et donner leurs fonctionnalités.
5. Peut-on insérer une vidéo dans une page web ? Si oui à l‘aide de quelle balise ?
EXERCICE 2 :
Que font les instructions suivantes :
1. <img src= ‗‘fleur.png‘‘ alt=‘‘une rose‘‘ />
2. <a href="mailto:nancy.gmail.com"> envoyer moi un message </a>
3. <a href=‘‘cameroun.pdf> télécharger l‘histoire du Cameroun </a>
4. <a href="http://www.yahoo.fr"> yahoo france </a>
5. <img src="premiere.jpg" alt="Eleves de la premiere D2"
title=‘‘ Eleves de la premiere D2 lybide‘‘ />
EXRECICE 3 :
1) Votre page "source.html" se trouve dans le répertoire "c:\site\source.html", et ma page ‗‘cible.html‘‘ se trouve dans "c:\site\documents\travaux\cible.html". Lequel de ces liens est le bon ?
(i) <a href="documents/travaux/cible.html">
(ii) <a href="site/documents/travaux/cible.html">
(iii) <a href="cible.html">
Inscrivez-vous au site
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 30 autres membres