|
|
 |
 |
 |
|
 |
|
 |
|
|
|
|
|
 La
balise IMG
Les
formats à utiliser sur le web
Les
principaux attributs de la balise IMG
Exercice
pratique |
|
1.
La balise <IMG>
La balise <IMG> est très importante pour la manipulation
des images. On peut lui associer de nombreux attributs.
La première particularité de cette balise est
qu'elle ne se referme pas.
Dans sa forme la plus simple, elle est composée de deux éléments
:
- <IMG> La
balise image elle même : elle signale au navigateur
la nécessité de charger une image.
- SRC Cet
attribut signifie source de l'image. Il indique le
nom du fichier graphique que vous voulez placer dans la
balise ainsi que son emplacement.
Exemple : <IMG
SRC="nom_de_mon_image.gif"> |
| |
 |
| |
2. Les formats
à utiliser sur le web
Un des éléments les plus importants à considérer
lorsque vous construisez vos pages web est le poids en koctets
de celles-ci mais égalemment le poids de vos images.
En effet, plus vos images auront un poids important, et plus
le temps de téléchargement de ces images sera
long et pénible pour les internautes.
Il est donc impératif d'utiliser des formats d'images
qui utilise un taux de compression élevé.
Les deux formats d'image les plus courants sur le web sont les
formats GIF (.gif) et JPEG/JPG (.jpeg ou .jpg).
|
128 couleurs
-
8 Ko |
64 couleurs
-
6 Ko |
16 couleurs
-
4 Ko |
8 couleurs
-
3 Ko |
|
 |
 |
 |
 |
|
| |
|
| |
- Le format JPEG ( Joint
Photographics Experts Group )
Ce format est beaucoup plus compressé que le format
GIF mais il ne bénéficie pas de cette
structure en couche décrite plus haut.
Le format JPEG utilise des couleurs 24 bits ( millions
de couleurs ) et est idéal pour afficher des visuels
très nets, de façon très réaliste.
Ce format ne permet pas la transparence mais il gère
beaucoup plus de 256 couleurs.
Le taux de compression d'une image peut être déterminé
entre 1 et 99%.
Exemples d'images compressées :
|
Taux de 10% -
8 Ko |
Taux de 30% -
5 Ko |
Taux de 60% -
3 Ko |
Taux de90% -
2 Ko |
|
 |
 |
 |
 |
|
| |
| Accessoirement, il existe égalemment
le format PNG même si celui-ci est encopre très
peu utilisé. Ce format permet d'afficher un nombre de
couleurs très important comme le format JPEG tout en permettant
la transparence des fichiers. |
| |
|
| |
3. Les principaux
attributs de la balise <IMG>
- L'attribut SRC
:
Cet attribut permet de spécifier l'URL complète
( chemin ) du fichier.
Ex : <IMG SRC="nom_de_fichier.gif">
"nom_de_fichier" doit bien sûr être
remplacé par le nom de votre image et son extension
(.gif ou .jpeg)
Si votre fichier se trouve dans un autre répertoire
que votre page HTML, par exemple dans un répertoire
"images", cela donne :
<IMG SRC="images/nom_de_fichier.gif">
Attention, comme sous UNIX, on utilise le slash ( /
).
Si par contre, votre image se situe deux répertoires
plus haut que votre fichier HTML dans un dossier nommé
"images", on écrira :
<IMG SRC="../../images/nom_de_fichier.gif">
Enfin, il est possible, bien que déconseillé,
de charger une image sur un autre site; il vous faut pour
cela l'adresse complète du serveur.
<IMG SRC="http://www.free.fr/imV4/mst_freelogo.gif">
Si vous saisissez cette adresse dans votre navigateur, vous
apercevrez l'image ci-dessous :
|
|
- L'attribut WIDTH et HEIGHT
Précisez la taille de l'image au navigateur :
En spécifiant la taille de l'image au navigateur, celui-ci
charge plus rapidement votre page, en effet il n'a pas à
la recalculer, de plus si jamais le visiteur a désactivé
le chargement des images, la mise en page ne sera pas perturbée.
Ces dimensions correspondent à la taille en pixels
de l'image.
Exple : <IMG
SRC="img/planet.jpg"
WIDTH="128" HEIGHT="97">
Ainsi, l'image est chargée avec une largeur ( width
) de 128 pixels et une hauteur ( height )de 97 pixels.
Vous pouvez agrandir ou rétrécir l'image en
modifiant les attributs WIDTH et HEIGHT mais
attention, l'image ne sera pas chargée plus rapidement
si vous diminuez sa hauteur ou sa largeur ( ou les deux
), bien au contraire.
- L'attribut ALT
Cet attribut permet de fournir un texte de rechange à votre
image si le navigateur n'affiche pas l'image.
Deux avantages :
- Si le visiteur désactive le chargement des images, il
pourra quand même deviner le sens des images.
- Vous pouvez par ce biais fournir une légende à une image
lorsque le pointeur de la souris passe au-dessus de cette
image.
Exple : <IMG
SRC="planet.jpg"
WIDTH="128" HEIGHT="97"
ALT="La planète
Saturne !">
|
|
| |
- L'attribut BORDER
En spécifiant une valeur à l'attribut BORDER
de 1 à x, vous insérer une bordure à
votre image.
Cet attribut est utile lorsque vous assignez un lien hypertexte
à une image; en effet, une bordure bleue disgratieuse vient
automatiquement se positionner autour de l'image.
En donnant la valeur 0 à l'attribut BORDER, labordure
disparait.
- HSPACE et VSPACE
Avec les attributs HSPACE=x et VSPACE=x, (x
étant un nombre de pixels) vous pouvez fixer un espace
vertical et horizontal autour de votre image.
Exemple : <IMG SRC="city.gif"
WIDTH="178" HEIGHT="174"
HSPACE="25" VSPACE="45">
|
|
| |
|
|
Les différentes
valeurs de l'attribut ALIGN pour la balise IMG
|
| ALIGN="middle"
( texte au milieu ) |
ALIGN="left"
( aligne l'objet sélectionné sur la marge
gauche et place le texte qui l'entoure à sa droite) |
 San
Francisco |
La
ville de San Francisco est située sur la côte de
Californie, environ 640 km au nord de Los Angeles. Elle est
située au bord d'une grande baie qui forme un vaste port
naturel partiellement abrité par la chaîne montagneuse
côtière. |
| ALIGN="bottom"
( texte en bas ) |
ALIGN="right"
(aligne l'objet sélectionné sur la marge
droite et place le texte qui l'entoure à sa gauche
) |
| San
Francisco |
La
ville de San Francisco est située sur la côte de
Californie, environ 640 km au nord de Los Angeles. Elle est
située au bord d'une grande baie qui forme un vaste port
naturel partiellement abrité par la chaîne montagneuse
côtière. |
| ALIGN="top"
( texte en haut ) |
ALIGN="baseline"
(aligne la ligne de base du teste sur le bas de l'objet
sélectionné) |
| San
Francisco |
 San
Francisco - Golden Bridge |
| ALIGN="absbottom"
( texte en bas absolu ) |
ALIGN="toptext"
( aligne l'objet sélectionné sur le haut
du caractère le plus élevé de la
ligne du texte ) |
| San
Francisco |
 San
Francisco |
| ALIGN="absmiddle"
( texte au milieu absolu ) |
| San
Francisco |
|
| |
|
| |
4. Exercices
pratiques
Essayez de reconstituer le code HTML de l'exemple ci-dessous
:
Pour cela, vous pouvez utiliser les images de votre choix ou
bien celles que j'ai moi même choisi.
( Clic droit sur l'image et "enregistrer l'image sous"
).
Pour le texte vous pouvez saisir le celui de votre choix.
Pour reproduire les effets de l'exemple, vous devez utiliser
les attributs ALIGN, VSPACE, HSPACE, ALT
etc...
En cliquant sur le bouton ci-dessous, vous pourrez visualiser
le résultat à atteindre :
|
|
|
| |
   |
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
