Insérer des images
Maintenant que vous savez comment placer du texte et le mettre en forme dans un page web, voici le moment d'ajouter des images.
|
<HTML>
<HEAD> <TITLE>Images</TITLE> </HEAD> <BODY> Voici une première image sans attribut particulier : <BR> <CENTER><IMG src="image1.gif"></CENTER> <BR><BR> une image avec un bord de taille 3 : <BR> <CENTER><IMG src="image2.gif" border=3></CENTER> <BR><BR> Il est souvent utile de préciser la taille de l'image pour que le navigateur connaîsse la taille de l'emplacement à réserver : <BR> <CENTER><IMG src="image3.gif" border=0 width=88 height=31></CENTER> <BR><BR> Si l'image n'est pas trouvée par le navigateur (99% du temps à cause d'un chemin d'accès incorrect), on affichera un petit message à coté de la croix rouge qui signale que l'image est manquante. Ce texte sera également affiché si on laisse la souris sur l'image pendant quelques secondes. <BR> <CENTER><IMG src="image4.gif" border=0 width=88 height=31 alt="Logo CDS"></CENTER> </BODY> </HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Voici une première image sans attribut particulier :
une image avec un bord de taille 3 :
Il est souvent utile de préciser la taille de l'image pour que le navigateur connaîsse la taille de l'emplacement à réserver :
Si l'image n'est pas trouvée par le navigateur (99% du temps à cause d'un chemin d'accès incorrect), on affichera un petit message à coté de la croix rouge qui signale que l'image est manquante. Ce texte sera également affiché si on laisse la souris sur l'image pendant quelques secondes.
Vous pouvez maintenant enregistrer la page et visualiser le résultat dans votre navigateur.
Explications des nouvelles balises utilisées :
- <img> : insère une image dans votre page. Il faut préciser le chemin (ou adresse) de l'image à ajouter au moyen de l'attribut "src" (obligatoire !). Il n'y a pas de balise de fin !
Les attributs "width" et "height" permettent respectivement de spécifier la largeur et la hauteur de l'image en nombre de pixels.
L'attribut "border" désigne la taille du bord à afficher autour de l'image (par défaut : 0).
Et enfin "alt" (comme alternative) permet de préciser un texte qui sera affiche si l'image n'est pas trouvée (=> croix rouge) ou bien si vous laissez votre souris dessus.
Quelques remarques :
- Ce dernier attribut "alt" est très important pour le référencement de votre site ! (mais nous en reparlerons plus tard...). Il vaut donc mieux ne pas le négliger et l'utiliser dans chacune de vos balises <IMG>.
- Si vos images ne s'affichent pas (une croix rouge les remplace), c'est certainement une erreur dans le chemin d'accès vers le fichier image. Vérifier bien le nom du fichier, le nom du répertoire,... Il arrive également que les certains édtiteurs HTML vous insèrent des chemins du style c:/mes documents/..., les images s'afficheront donc en local (chez vous) mais par sur le web. C'est normal vu que ce chemin n'existe pas sur la machine où se trouve vos pages web. Il faudrat donc modifier ces chemins par des chemins relatifs.
- Pour mettre une image comme fond d'écran, il faut utiliser l'attribut "background" de la balise <BODY>. Il veut toujours mieux utiliser un fond d'écran fixe (pas une image animée).
| Précédent : Les chemins d'accès | Suivant : Liens hypertextes |
| Retour au sommaire | |
