Intégrez vos oeuvres dans les pages HTML

Rien n'est plus simple grâce à la balise "<IMG>"... et si l'on tient compte de certaines règles élémentaires :

• L'image en question (traitée et préparée pour le Web) devra être au préalable stockée dans le répertoire "images" de votre site.
• Pas de fichiers images autres que ceux supportés pour le Web (GIF, JPEG, PNG).
• Indication d'adresses relatives quant il s'agira de donner l'adresse de l'image à l'attribut "SRC". Ce qui est d'ailleurs appliqué par les éditeurs wysiwyg sous condition que l'on ait tenu compte de la règle précédente... sinon gare aux adresses "ésotériques" qui ne fonctionneront que localement sur votre machine.
• Attention aux noms des fichiers : pas de majuscules, pas d'espaces, pas de caractères accentués... et pas de noms trop longs ou trop complexes (pas obligatoire mais tellement plus simple)... car ce qui peut fonctionner sur votre machine risque de ne pas être pris en compte sur le serveur web.
  

La balise <IMG>

On se servira de la balise "<IMG>" qui "appelle" un "objet de type image" à l'endroit où l'on positionne la balise dans le code source de la page web... Cette balise indique la source de l'image (grâce à l'attribut "SRC") et fournit des indications quant à sa mise en place, son allure et son comportement.
Cette balise est un marqueur HTML et ne comporte donc pas de balise fermante de type "</IMG>".

Nota : La balise <IMG> est toujours affectée de l'attribut SRC.

Principaux attributs de <IMG>

Les principaux attributs de "<IMG> sont : "SRC, ALT, ALIGN, WIDTH, HEIGHT, BORDER, HSPACE, VSPACE, USEMAP, ISMAP".

• SRC="URL" où URL est l'adresse (généralement relative) du fichier image contenant l'image à insérer dans la page.
  
  

  Le code HTML pour cette image : <IMG SRC="../images/coeur.gif" ALT="coeur" WIDTH="113" HEIGHT="104">

• ALT="texte" où texte correspond à ce qui sera affiché en lieu et place de l'image dans le cas où l'utilisateur a désactivé l'option images de son navigateur ou encore si son navigateur ne peut interpréter les images.
  Nota 1 : Sous Internet Explorer, ce texte apparaît également dans une info-bulle au passge de la souris sur l'image.
  Nota 2 : Ce texte peut également être utilisé pour passer des informations supplémentaires aux moteurs de recherche (sous forme de mots-clés).

• WIDTH="nombre" et HEIGHT="nombre" : largeur et hauteur de l'image (en pixels).
  Nota 1 : On peut affecter à ces attributs des valeurs différentes de celles des dimensions originales de l'image (effet de zoom) mais gare aux déformations...
  Nota 2 : Affecter systématiquement <IMG> des attributs WIDTH="valeur" et HEIGHT="valeur" accélère le délai d'interprétation du navigateur lors du traitement du code de l'image.
  
  Attention : Certains pourront être tentés de redimensionner leurs images dans les pages web grâce aux possibilités offertes par les éditeurs wysiwyg (les poignées de redimensionnement)... A bannir !!!...
  Si l'image (BITMAP) est agrandie, apparition des pixels et aliasing garanti. Si l'image est réduite, elle n'en "pésera" pas moins son poids d'origine car l'éditeur wysiwyg ne fait que changer les valeurs des attributs "WIDTH" et "HEIGHT" de la balise "<IMG>" dans la page web.
  Quant on veut redimensionner une image, on ouvre son logiciel graphique et on y retravaille l'image afin de créer un nouveau document qui sera ensuite intégré dans la page avec ses valeurs correspondantes de "WIDTH" et "HEIGHT".
  

• ALIGN="valeur_définie" où valeur_définie = "left" ou "right" ou "bottom" ou "middle" ou "top" : alignement de l'image par rapport à son environnement.
  left : l'image est alignée sur la marge de gauche et est entourée par le texte avoisinant.
  right : idem sur la marge de droite.
  bottom (valeur par défaut) : le bas de l'image est aligné avec le bas du texte avoisinant.
  top : le haut de l'image est aligné avec le haut du texte avoisinant.
  middle : le milieu de l'image est aligné avec la ligne de base du texte avoisinant.

• BORDER="nombre" : épaisseur (en pixels) de la bordure autour de l'image.
  Nota : Si l'image sert d'appel de lien, une bordure de la couleur par défaut des liens (généralement bleue) sera automatiquement générée. Pour éviter ce désagrément, préciser BORDER="0".
  
  
• HSPACE="nombre" et VSPACE="nombre" : espace horizontal et vertical (en pixels) ménagé autour de l'image.

• USEMAP="nom" : où nom=étiquette de balise <MAP> indiquant que l'image (ou son texte de remplacement) est une image réactive de type client-side.
  Nota : Le plus utilisé aujourd'hui.

• ISMAP : Indique que l'image (ou son texte de remplacement) est une image réactive de type server-side (et exploitée à ce titre par un script CGI placé sur le serveur).
  Nota : Obsolète puisque l'on ne sert pratiquement plus que d'images réactives type client-side.

Autres balises utiles

(...)

© 2000 - 2001 @michaudp : http://www.michaudp.net Accueil Images et Photos pour le Web : http://www.michaudp.net/aide/imgweb Auteur et Webmaster : Philippe Michaud   /   webmaster@michaudp.net Date de création : 24/09/2000 Dernière révision : 04/03/2001