Leçon 8 : L'insertion d'images et de sons |
Quels formats d'image utiliser ?
Insérer des images dans un document HTML n'est pas très difficile, il
existe cependant des restrictions. Actuellement 2 formats d'images sont compatibles
avec tous les navigateurs, ces formats sont le GIF (87 et 89a) et le Jpeg.
Vos images devront donc être converties dans l'un de ces formats et porter
l'une des extensions suivantes : .GIF .JPEG .JPG et .JPE. Vous pouvez tenter d'incorporer
d'autres formats, mais vous limitez la consultation des pages au navigateur qui supporte
ce format (les navigateurs récents supportent le .PNG, .BMP etc...).
Le GIF est limité à 256 couleurs alors que le Jpeg permet l'affichage
jusqu'à 16 millions de couleurs et offre une meilleure compression (avec
perte de qualité). Le GIF a cependant des options intéressantes comme
la transparence que nous verrons plus loin.
Insérez des images
Pour insérer des images, nous allons utiliser l'instruction
<IMG> . Voici la syntaxe (partant du principe que
l'image est dans le même répertoire) :
<IMG SRC="nom_de_l'image.gif">
: Insertion d'une image GIF
<IMG SRC="nom_de_l'image.jpg">
: Insertion d'une image Jpeg
<IMG SRC="nom_de_l'image.gif" ALT="Image de maison">
: Insertion d'une image avec un texte explicatif (ALT signifie alternatif)
sur l'image si la personne a désactivé l'autochargement des images dans netscape 3, ou pour
les navigateurs plus récents donner un descriptif lorsque vous passez la souris au dessus de l'image.
L'instruction <IMG> supporte aussi
d'autres critères, voici quelques exemples :
left, right, top, texttop, middle, absmiddle, baseline,
bottom, absbottom.
Ces critères servent à aligner l'image par rapport à du texte.
Leur utilisation se fait de la manière suivante :
<IMG ALIGN="left" SRC="nom_de_l'image.gif">
: Insertion d'une image alignée à gauche
<IMG ALIGN="right" SRC="nom_de_l'image.gif">
: Insertion d'une image alignée à droite
<IMG ALIGN="top" SRC="nom_de_l'image.gif">
: Insertion d'une image alignée en haut
<IMG ALIGN="bottom" SRC="nom_de_l'image.gif">
: Insertion d'une image alignée en bas
- Etc.
Le texte peut être placé au milieu de l'image
<IMG SRC="pic.gif" ALIGN="MIDDLE"> comme ceci.
|
Le texte peut être placé au milieu de l'image
comme ceci.
|
Le texte peut être placé au bas de l'image
<IMG SRC="pic.gif" ALIGN="BOTTOM"> comme ceci.
|
Le texte peut être placé au bas de l'image
comme ceci.
|
Une image peut être placée au milieu de la page par
<CENTER><IMG SRC="pic.gif"></CENTER>
|
|
<IMG SRC="pic.gif" ALIGN="RIGHT">
Une image peut être placée à droite de la page comme ceci.
|
Une image peut être placée à droite
de la page comme ceci.
|
<IMG SRC="pic.gif" ALIGN="RIGHT" HSPACE="20">
Une image peut être placée à droite du texte comme ceci.
Cette fois-ci on choisit de créer un espace (calculé en pixels) entre le texte et
l'image avec HSPACE (HSPACE veut dire Horizontal Space, il existe aussi VSPACE pour Vertical Space).
|

Une image peut être placée à droite du texte comme ceci.
Cette fois-ci, on choisit l'espace qu'on veut avec HSPACE.
|
<IMG SRC="pic.gif" ALIGN="LEFT" HSPACE="10">
Une image peut être mise à gauche du texte comme ceci.
|
Une image peut être mise à gauche du texte comme ceci.
|
Une autre astuce consiste à jouer sur la taille d'une image. Pour agrandir ou
réduire une image , vous pouvez utiliser les instructions
<WIDTH="valeur"> et
<HEIGHT="valeur"> .
comme ici <IMG SRC="pic.gif" ALIGN="RIGHT"
HSPACE="40" WIDTH="80" HEIGHT="80">
|
|
Des effets bien plus saisissants peuvent être réalisés grâce aux tableaux en
insérant les textes et les images dans des cellules voisines (et en dissimulant la bordure du tableau).
Une autre astuce consiste à jouer sur la taille d'une image (les valeurs s'expriment en pixel).
Pour agrandir ou réduire une image en jouant sur leur hauteur ou largeur, vous pouvez utiliser
les instructions <WIDTH="valeur"> et
<HEIGHT="valeur"> . Voici la syntaxe :
<IMG WIDTH="165" HEIGHT="250" SCR="....">
A noter : Ne négliger pas les arguments
<WIDTH="valeur"> et
<HEIGHT="valeur"> car dans les pages complexes
elles permettent au navigateur de prévoir l'espace nécessaire à l'affichage des
images et donc d'afficher le contenu de la page (la partie textuelle) avant même que le navigateur
ait fini de charger toutes les images. Cela accélère donc la navigation. Pour finir,
l'argument BORDER="valeur" est aussi très
importante dans le cadre des liens hypertextes, BORDER="0"
permet en effet de supprimer le cadre autour d'une image lorsque celle-ci est un lien hypertexte (voir chapitre
sur les liens hypertextes).
Insérez du son et autres types de documents
L'insertion de son se fait grâce à l'instruction
<EMBED SRC="objet_à_insérer"> .
Les formats supportés sont par exemple les fichiers Wave, Sun Au, Aiff, MIDI
(format .WAV, .AU, .MID) mais aussi les fichiers VRML, AVI, QuickTime, MPEG video/audio, etc...
Les arguments de <EMBED SRC=""> sont
WIDTH, HEIGHT, BORDER, HSPACE, VSPACE. .
Pour les autres types de documents ( Word, Excel, Video...) la méthode normale est
d'insérer un lien vers le nom du fichier en prenant bien garde de conserver
l'extension traditionnelle dudit fichier ( .doc pour un fichier Word, .xls pour un document Excel...
Lors du click sur ce lien, le navigateur utilisera le programme externe adapté
à cette extension pour afficher le fichier. Cette méthode ne fonctionne
que dans l'environnement Windows et à la condition que le navigateur de
votre visiteur ait été convenablement paramétré.
Il convient donc d'éviter au maximum d'insérer ce type de liens car
vous limitez ainsi vos visiteurs à un seul environnement.
Sous Netscape, on trouvera ce paramétrage dans le menu Options/Préférences
Générales sous l'onglet Utilitaires (pour netscape 3), et dans
Edition/Préférences/Navigateur/Applications (pour netscape 4).
Depuis quelques années, commencent à apparaître des extensions aux navigateurs
("plug ins"), qui permettent la visualisation de formats standardisés fonctionnant
sur tous les environnements. Les plus répandus sont le format Adobe PDF, LiveAudio,
Macromedia Shockwave ou Macromedia Flash.
On résume : |
- Bien choisir son format d'image en fonction de ses besoins.
- BORDER="0" permet de supprimer l'effet de bordure autour d'une image dans un lien hypertexte.
- Ne pas oublier que tout le monde n'a pas forcément le bon plug-in d'installé
|
|