Leçon n°9 - Insertion d'une image

Leçon n°9

Insérer une image

Nous allons voir comment insérer une image dans notre tableau. Le code sera valable à chaque fois que vous aurez besoin de mettre une image en html. Le code pour mettre une image est : <img src="image.typeimage"> ou <img src="adresseimage.com">

Nous allons décortiquer ce code :

• Img src -> cela indique que nous insérons une image à cet endroit sur notre page
• nomimage -> vous mettez le nom de votre image
• typeimage -> ceci indique si votre image est en format .jpg , .png , .gif
• adresseimage.com-> adresse de votre image que vous aurez hébergée chez un hébergeur d'image

Attention : Pour afficher une image sur une page html, il faut que celle-ci se trouve toujours à proximiter de votre page html. Le mieux sera de l'héberger sur le net.

Voyons ce que cela donne sur notre page html :

Aperçu du navigateur :

Attention : Selon le type de l'image vous pouvez avoir un cadre autour de votre image, pour faire disparaitre celui-ci voici comment écrire votre code :

<img src="image.jpg" border="0">

Astuce : Vous avez réalisé une magnifique création, mais hélas elle et trop grande, pas la peine de la refaire vous avez juste à la redimensionner via le code. Soit en largeur, soit en hauteur, soit les deux :

<img src="nomdevotreimage.jpg" border="0" width="200">

<img src="nomdevotreimage.jpg" border="0" height="200">

<img src="nomdevotreimage.jpg" border="0" width="200"  height="200">

Lorsque vous indiquez uniquement une des mesures, l'ajustement de l'image se fait automatiquement

Voilà comment faire apparaitre vos images.