Insertion des images dans une page Web

Insertion des images dans une page Web

Formation Affiliation Flash

Comment insérer une image dans une page (sites) Web. C'est l'objectif de ce chapitre.
Ce qui suit n'est pas un cours d'infographie mais simplement un panorama de ce qui est nécessaire à un cours HTML. Nous n'aborderons pas tous les formats d'images ni les moyens de les créer et les traiter.

Insertion des images :

Avant de commencer, je vous demande de créer un dossier sur votre disque dur.
Nommez le "mon site", dans ce dossier créez un sous-dossier nommez le "images".
Lorsque vous nommez un dossier, un fichier, une image ou une page html utilisez toujours des minuscules.
Dans le sous-dossier images placez une image de votre choix, vérifiez que son nom et son extension sont en minuscule,les nom ne doivent contenir ni espace ni caractère spéciaux( é è ê ä ç etc… ).
vous pouvez utiliser tirée ou sous tirée ("-" ou "_" )
Dans le dossier "mon site" placez votre page "essai.html" que vous avez créez au cours de ce cours.
A partir de ce moment enregistrez tous vos exercices et testes que vous allez faire dans ce dossier, un peu d'organisation ou quoi ?

Pour insérer une image dans une page Web, on doit choisir un format qui s'adapte le mieux avec le Web.
Les formats d'images que l'on utilise sur le Web sont :

JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos,Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" .
PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques. L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable.
GIF : c'est un vieux format, qui a été très utilisé.

Le format GIF est limité à 256 couleurs. Si je je vous parle du GIF, c'est qu'il conserve quand même un avantage que le PNG n'a pas : il peut être animé

Résume

les formats à adopter en fonction de l'image que vous avez :
• Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG ou PNG 24 bits.
• Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible, sinon utilisez un GIF.
• Une image animée : utilisez un GIF animé.
Revenons à notre code xhtml
Pour insérer une image, on utilise la balise <img />.
C'est une balise de type seule (comme <br />).
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

• src : il permet d'indiquer la source où se trouve l'image que l'on veut insérer.
Vous pouvez soit mettre :

1. un chemin en absolu (exemple : "http://www.site.com/image.png").
2. soit mettre le chemin en relatif (c'est le cas le plus souvent utilisé).
Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper :
src="images/mon_image.png"

• alt : qui signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (et ça arrive).
Si vous ne faites pas de texte alternatif, votre page ne sera plus une page XHTML valide et votre site sera détecté comme non conforme aux normes.
exemple d'insertion d'image :

Dans le code suivant remplacez le mot "mon_image" par le nom de l'image que vous voulez insérer, n'oubliez pas L'extension.(.jpeg , .gif , .png)
Insérez ce code dans le code de votre page Web, vous vous souvenez click droit sur l'icône de la page Web puis faite Edit with notepad++
Code : HTML

	<p>		
	Voici une image :<br />		
	<img src="images/image.jpg" alt="image de…" />	
	</p> 	
	<p>C'est très facile.	</p>
					

---

                       annuaire de france