vendredi 16 novembre 2012

Comment gérer et afficher les images en HTML

Une page web avec du texte, c'est bien. Du texte formaté, c'est mieux ! 
Et avec des images, c'est encore mieux...

L'image s'insère dans le <body> avec la balise <img src="mon_image.jpg"> 
Exemple :


<html>

<body>
<b>J'écris du texte et lorsque je le désire, j'insère une première image</b>
<img src="mon_image.jpg">
et ici j'insère une deuxième image
<img src="mon_autre_image.gif">
</body>
</html>


Bien sûr, je peux spécifier les propriétés de mon image (hauteur, largeur, bordure...).

<img src="golf.jpg"  height="100" width="130" border="4">

L'image peut aussi contenir un message :
<img src="golf.jpg" alt="ceci est un message alternatif">

Laissez votre curseur reposer sur l'image...

L'image comme le texte peut être centrée :
<center><img src="golf.jpg"></center>



On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux ! On peut aussi "jongler" avec le texte et l'image pour obtenir des effets semblables à ceux qu'on trouve dans les journaux !


Cet effet s'obtient avec <img src="golf.gif" align="left" vspace="5" hspace="10"> pour l'image et <div align="justify"> </div> pour le texte qui entoure l'image.
La balise <hspace=""> fixe l'espace Horizontal vide entre l'image et le texte, tandis que <vspace=""> détermine l'espace Vertical.

La balise align="" détermine ici l'alignement de l'image qui peut être align="right", align="left".

La position du texte est commandée par <div align="">, avec possiblité comme pour l'image d'avoir align="left", align="justify" ou encore align="right".





Aucun commentaire:

Enregistrer un commentaire