Insertion d'images

1 - La balise  d'insertion d'images <img>

La balise <IMG> indique au browser qu'il faut afficher une image. Cette balise s'utilise toujours avec l'attribut SRC (source) qui permet de donner l'adresse de l'image à lire. Cette adresse aura le même format qu'une adresse A HREF="" et pourra donc être soit relative, soit fixe. En principe, l'image résidera toujours sur le même serveur que celui du document HTML, mais il est possible de charger une image depuis un autre serveur, pour autant que celui-ci soit accessible. Notons quand même que cette balise ne possède pas d'équivalent de fin. Nous n'aurons donc jamais de balise </img> La syntaxe est :

<img src="destination de l′image ">

Exemple : pour afficher l'image située à l'adresse : https://www.tresfacile.net/images/android.png  on doit insérer le code :

<img src="http://www.tresfacile.net/images/android.png">

Ce qui donne  :

 

android os

.

2 - Les attributs de la balise <img>

 

Les attributs width et height

Les attributs width et height permettent de redimensionner l'image à une taille spécifiée par exemple si on veut redimensionner l'image de façon quelle soit affichée à une taille de 150 x 150 pixels on doit donc utiliser le code suivant :

<img src="http://www.tresfacile.net/images/android.png" width="150" height="150">

Ce qui va donner à l'écran :

android os

 

L'attribut align

L'attribut align permet d'aligner l'image à droite, à gauche... par exemple si on souhaite que l'image soit alignée à droite et redimensionnée à  64 x 64 pixels on doit utiliser le code suivant :

<img src="http://www.tresfacile.net/images/android.png" width="150" height="150" align="right">

Ce qui vas donner à l'écran :

 

android os

 

 

 

L'attribut border

L'attribut border permet de spécifier les bordures de l'image si on veut par exemple que l'image soit entourée d'une bordure on utilise le code suivant en donnant à la variable border une valeur numérique 1. 2, 3, ... ou 0 si on ne souhaite attribuer aucune bordure !

Exemple : border=1

<img src="http://www.tresfacile.net/images/android.png" width="150" height="150" border=1>

ce qui donne :

android os

 

3 - Tutoriel vidéo

 

 

4 - Tester votre propre code

 

 

 

...

1 thought on “Insertion d'images

Leave a Reply

Your email address will not be published. Required fields are marked *