Leçon 5 : les Images

I - Introduction

HTML permet l'insertion d'images, degraphiques dans un document.
Suivant leur format, ces insertions sont soit géréesdirectement par le client Web soit par un visionneur spécialiséadéquat au format de l'image et appelé par l'utilisateur.
Pour l'insertion de graphiques, d'images, il ne faut pas oublierque la transmission de données non textuelles ralentit considérablementla vitesse de transmission d'un document. En conséquence, ilfaudra commencer par présenter les images dans un format réduit,quitte à donner accès à l'image complète par un lien (techniquedes liens vue plus tard).

II - Images de format natifen HTML

De lui-même, le butineur Html peutafficher des images aux format suivants :

gif_[1] de Compuserve
jpg_[2] selon "format JPEG"

Pour les autre formats, il doit faireappel des programmes spécialisés, des visionneurs.
exemple : Paintbrush pour le format BMP

insertion d'une image

Il faut distinguer deux type d'usage desimages dans un document :

• à titre décoratif, en fond d'écran (vu plus tard )
• à titre informatif, illustratif, le marqueur est <img>. C'est un marqueur unaire.

Les attributs de <img>

- 1 - localisation du fichier image contenant l'image à afficher

src="URL du fichier"
attention : importance de l'extension du nom de fichier qui permet au butineur de décider du visionneur adéquat.
ex: src ="image.jpg" (pas de chemin d'accès si le fichier est dans le répertoire du document)
voici l' image de 166k

ATTENTION : le traitement des attributs suivants n'est pas stabilisé ; l'affichage risque donc d'être différent suivant le butineur à la consultation. Il faut donc rester modeste ou bien annoncer clairement le consulteur visé.

 

- 2 - situation de l'image dans la ligne courante par rapport à la position du curseur à l'appel de l'image

align =

• top :   ligne de img haut de l'image
• middle :   ligne de img milieu de l'image
• bottom :   ligne de img bas de l'image (par défaut) remarque : un seul attribut align par marqeur img
  

Cette image vous montre que le texte peut prendre
diverses positions par rapport à une image Ici curseur en haut

Cette image vous montre que le texte peut prendre
diverses positions par rapport à une image Ici curseur au milieu

Cette image vous montre que le texte peut prendre
diverses positions par rapport à une image Ici curseur en bas

 

- 3 - définition de l'espace autour de l'image

• HSPACE = espacement horizontal de chaque côté de l'image (en pixels)
• VSPACE = espacement vertical en haut et en bas de l'image (en pixels)

espace hori.=0

espace hori.=10

espace hori.=20

espace hori.=30

espace vert.=0

espace vert.=10
espace vert.=20

espace vert.=30

- 4 - contournement de l'image par le texte

La combinaison des attributs ALIGN, HSPACE et VSPACE permet de faire contourner l'image par le texte.

• align=
  • left   :   image cadrée gauche
  • rigth :   image cadrée a droite
    

Cette image vous montre que le texte peut prendre diverses positions par rapport à une image

Ici image cadrée à gauche
Que pensez-vous de ces couleurs ?
aaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccc

Cette image vous montre que le texte peut prendre
diverses positions par rapport à une image
Ici image cadrée à droite

- 5 - définition de la taille de l'emplacement occupé par l'image

•  
• width=   hauteur(en pixels / en pourcentage)
• height=   largeur(en pixels / en pourcentage)

exemple avec taille:
merou.jpg (166 ko) avec un espace réduit à 150 pixels Larg. x 100 p Haut.

- 6 - encadrement de l'image

• border=épaisseur de l'encadrement (en pixels)

Voici l'image avec bordure.

 

- 7 - écriture d'un texte alternatif pour client sans visonneur ou ayant désactivé l'affichage des images. De plus ce texte est affiché lors d'un chargement des images après le texte ; il est donc utile d'indiquer le nom et la taille du fichier pour que le lecteur puisse décider d'atterndre ou non le chargement.

• alt="texte d'annonce et de remplacement"
• Quand la fenêtre du butineur affiche cette partie du texte, réaffichez la page par le bouton "recharger" et observez l'emplacement de l'image.

III - Images de formatquelconque

appel d'image de format sans consulteurcorrespondant intégré

• image bmp de paintbrush appelée par marqueur <IMG>
• 
  
  
• image jpg appelée par un lien href

[1] GIF : Graphic InterchangeFormat
[2] JPEG : Joint Photographic Expert Group