logo UsualSoft   Skip Navigation Links
Accueil
Références
Formations
TutorielsExpand Tutoriels
Liens téléchargements

Contact : cgruchet@hotmail.com - Tél: 06 22 82 90 55
Microsoft Certified Professional
Cours : HTML

Les images

Gilles Chamillard
Fiche n°5
Retour   Suiote

 

I) L'insertion d'une image

a) Les types d'images

Les images représentent l'élément indispensable d'une présentation atractive d'une page. Le contenu graphique d'un site personnalise le message et attire le visiteur. Il existe trois formats de fichiers graphiques disponibles en HTML :

GIF

JPG

PNG

Transparence Qualité photographique Qualité photographique
Entrelacement Apparition progressive Entrelacement-Transparence
Dimension limitée du fichier Compression avec + couleurs Dimension fichier comparable à Gif
Peu de couleurs 16,7 millions de couleurs 16,7 millions de couleurs
Animation   Inaccessible actuellement
Graphics Interchange Format Joint Photographic Experts Group Portable Network Graphics

Remarques :
PNG est un format de fichier qui à terme se substituera au format GIF. Le format GIF conçu par Compuserve (maintenant possédé par America On Line) utilise l'algorithme de compression LZW lui-même breveté par la société Unisys en 1985. Au jour d'aujourd'hui (mois de septembre 1999) cette société se "réveille" et tente ni plus ni moins de faire payer (cher) aux sites Web l'utilisation en ligne de toutes les images GIF !

Le format PNG, d'autre part, a été développé par un comité Internet expressément pour être un brevet-libre.

b) L'insertion d'une image

La balise <IMG>. Elle n'a pas de balise fermante et possède un attribut obligatoire : la source de l'image par SRC.

 

Exemple : 

<IMG src="Image.jpg">

N'oubliez-pas que vous pouvez utiliser une image en fond de page par l'attribut background de la balise <BODY>. Préférez dans ce cas une petite image, le navigateur "remplissant" la page en répétant le motif (plus de rapidité dans le chargement).

 

II) Les modifications de l'image

>a) Les attributs indispensables

  • Les attributs height et width (hauteur et largeur en pixels). En spécifiant ces attributs, l'affichage de l'image sera accéléré car le navigateur se sert des ces paramètres lors du chargement de celle-ci. Sans ces informations, le navigateur charge l'image dans son intégralité, calcule ses dimensions, la place sur la page et passe ensuite au reste... ce qui peut prendre un certain temps en cas de nombreuses images !
  • L'attribut border. Il définit l'existence et l'épaisseur d'un cadre à l'image.
  • Les attributs hspace et vspace (en pixels). Ils déterminent l'espace qui sera laissé autour de l'image.

 

Exemple : 

<IMG src="ie_static.gif" height="123" width="112" border=1 >

b) Le placement du texte

Le placement du texte par rapport à l'image se détermine avec la balise <IMG> et son attribut align (valeurs possibles : top, bottom, middle, left, right). Il permet de choisir le type d'alignement de l'image avec le texte qui l'accompagne (valeur par défaut align = bottom, texte aligné avec le bas de l'image).

 

Exemple : 

<IMG src="ie_static.gif" height="123" width="112" border=1 align=middle>

Texte placé au  milieu de l'image
Retour haut Retour vers le haut de la page Suiote