Cours sur le langage HTML organisé par
Frédéric Jacquenod

II.4 Comment insérer une image au texte ?

Vous devez utiliser la balise <IMG SRC="./Images/...">. Cette balise peut être agrémentée d'options de positionnement.
Les images doivent être au format gif, jpg ou xbm.


<IMG SRC="./Images/applecom.gif">


Afin de positionner le texte par rapport à l'image vous pouvez ajouter à la balise, les options d'alignement
exercice10



• ALIGN=TOP|MIDDLE|BOTTOM|LEFT|RIGHT
  
  <IMG ALIGN=TOP SRC="./Images/..."> la flèche est au dessus du texte
  
  <IMG ALIGN=MIDDLE SRC="./Images/..."> la flèche est au milieu du texte
  
  <IMG ALIGN=BOTTOM SRC="./Images/..."> la flèche est en dessous du texte
  
  <IMG ALIGN=LEFT SRC="./Images/...">
  Le texte va encadrer la flèche
  Cette dernière est centrée à gauche
  
  <IMG ALIGN=RIGHT SRC="./Images/...">
  Le texte va encadrer la flèche
  Cette dernière est centrée à droite
  exercice11
  
  
  
• VSPACE
  
  Cette option permet de définir l'espace vertical que vous allez mettre entre l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
  Dans cet exemple le texte précédent au dessus de l'image est plus éloigné que l'exemple sans VSPACE.

  <IMG VSPACE=40 SRC="./Images/applecom.gif">

  
  
• HSPACE
  
  Cette option permet de définir l'espace horizontal que vous allez mettre entre l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
  Dans cet exemple le texte et la flèche sont plus éloignés de l'image que dans l'exemple sans HSPACE.

  <IMG HSPACE=40 SRC="./Images/applecom.gif">

  
  exercice12
  
  
• WIDTH et HEIGHT
  
  Ces options permettent de redéfinir la taille de l'image.
  Attention : Si vous augmentez la taille, l'image perdra de sa qualité

  <IMG WIDTH=30 HEIGHT=30 SRC="./Images/applecom.gif">

  
  exercice13
  
  
• BORDER
  
  Cette option permet de faire un cadre autour de l'image plus ou moins large.
  

  <IMG BORDER=1 SRC="./Images/applecom.gif">
  <IMG BORDER=10 SRC="./Images/applecom.gif">

• ALT
  
  ALT est une option de la balise IMG qui permet d'afficher un petit texte explicatif au moment o˜ la souris passe sur l'image.
  <IMG SRC=fleche.gif ALT="La fleche">
  exercice14
  
  
  
• Remarques
  
  Parfois ces options ne suffisent pas, ne vous donnent pas entière satisfaction, dans ce cas vous devez utiliser un tableau et positionner chaque élément dans une cellule séparée, l'alignement sera souvent meilleur.
  Vous avez deux possibilités pour insérer une image :
  
  • L'image est sur votre compte
  • L'image est sur un autre site
  Le premier cas utilise de l'espace disque mais très peu de ressource réseau à l'inverse du deuxième cas. Mais attention dans le deuxième cas, si le site distant n'est plus accessible ou si le chemin d'accès vers l'image a été modifié vous vous trouverez avec un ralentissement conséquent lors du chargement de la page et d'une icÙne comme celle-ci.
  Attention au copyright.

Frédéric Jacquenod