Est-ce qu'il ne serait pas formidable d'avoir une photo de bill en plein milieu de la page ?
Peut-etre, mais en realite c'est tres facile a faire. Il vous faut seulement un element :
Exemple 1 :
<img src="http://info-concept.net/image/bill.jpg" alt="bill" />
Ce qui donne dans le navigateur :
Tout ce dont vous avez besoin est d'abord de dire au navigateur que vous voulez inserer une image (img) puis
de lui dire ou elle se trouve (src, abreviation de source ). Vous voyez ?
Remarquez que l'element img est ouvert et ferme avec la meme balise. Comme la balise <br />,
il n'est pas associe a un morceau de texte.
Le nom bill.jpg est celui du fichier d'image a inserer dans la page, et .jpg est le type de fichier de l'image. Tout comme l'extension .htm indique qu'il s'agit d'un document HTML, .jpg indique au navigateur que ce fichier est une image. Il existe trois sortes de types de fichier d'image que vous pouvez inserer dans vos pages :
Les images GIF conviennent habituellement mieux pour les graphiques et les dessins, et les images JPEG pour les photographies. Deux raisons a cela : premierement les images GIF se composent seulement de 256 couleurs, tandis que les images JPEG en contiennent des millions, et deuxiemement, le format GIF est mieux adapte pour comprimer des images simples que le format JPEG optimise pour des images plus complexes. Meilleure la compression, plus petit le poids du fichier d'image, et plus rapide le chargement de la page. Comme l'experience vous l'a sans doute montre, les pages inutilement lourdes peuvent etre tres genante pour l'utilisateur.
Traditionnellement, les formats GIF et JPEG ont ete les deux types d'images dominants, mais recemment, le format PNG est devenu de plus en plus populaire (principalement aux depends du format GIF). Le format PNG format represente de beaucoup de points de vue le meilleur des deux formats JPEG et GIF : des millions de couleurs et une compression efficace.
Pour fabriquer vos propres images, il vous faut un programme d'edition d'images. Un programme de creation d'image est l'un des outils essentiels pour creer de jolis sites Web.
Malheureusement, aucun bon programme d'edition d'images n'est fourni avec Windows ou d'autres systemes d'exploitation. Il faudrait donc envisager d'investir dans l'un des trois meilleurs logiciels d'edition d'images actuellement sur le marche, a savoir Paint Shop Pro , PhotoShop ou Macromedia Fireworks .
Quoi qu'il en soit, comme annonce precedemment, il ne sera pas necessaire d'acheter des logiciels couteux pour finir ce tutoriel. Pour l'instant, vous pouvez telecharger l'excellent logiciel d'edition d'images Irfan View , un gratuiciel (N.d.T. freeware) qui ne coute donc rien.
Ou vous pouvez juste emprunter des images a d'autres sites en les telechargeant. Mais faites attention a ce que le telechargement des images n'enfreigne pas de droits d'auteur. Par contre, il est toujours utile de savoir telecharger des images, et voici comment :
Faites-le avec l'image suivante et sauvegardez-la sur votre ordinateur au meme emplacement que vos documents HTML. (Remarquez que le logo est sauvegarde comme fichier PNG : logo.png) :
Vous pouvez maintenant inserer l'image dans l'une de vos pages. Essayez vous-meme.
Il y a d'autres choses a connaitre concernant les images.
D'abord vous pouvez aisement inserer des images situees dans d'autres dossiers, ou meme situees sur d'autres sites Web :
Exemple 2 :
<img src="http://info-concept.net/image/images/logo.png">
Exemple 3 :
<img src="http://info-concept.net/image/http://www.html.net/logo.png">
Deuxiemement, les images peuvent etre des liens :
Exemple 4 :
<a href="http://www.html.net">
<img src="http://info-concept.net/image/logo.png"></a>
Ce qui donnera dans le navigateur (cliquez sur l'image) :
Vous aurez toujours besoin d'utiliser l'attribut src, qui indique au navigateur ou l'image se trouve. Hormis cela,
beaucoup d'autres attributs peuvent etre utiles pour inserer des images.
L'attribt alt sert a fournir une description de remplacement de l'image si, pour une raison ou pour une autre,
l'image n'etait pas affichee a l'utilisateur. C'est particulierement important pour les utilisateurs aveugles, ou si la page
se charge tres lentement. Donc, toujours utiliser l'attribut alt :
Exemple 5 :
<img src="http://info-concept.net/image/logo.gif" alt="Le logo de HTML.net">
Certains navigateurs affichent le texte de l'attribut alt sous forme d'un petit dialogue contextuel lorsque l'utilisateur
place le curseur sur l'image. Veuillez noter que l'utilisation de l'attribut alt vise a offrir une description de remplacement
pour l'image. L'attribut alt ne devrait pas servir a creer des messages contextuels speciaux pour les utilisateurs car
les utilisateurs aveugles entendront le message sans savoir ce que l'image represente.
L'attribut title peut servir pour decrire brievement l'image :
Exemple 6 :
<img src="http://info-concept.net/image/logo.gif" title="Apprenez HTML avec HTML.net">
Ce qui donne dans le navigateur :
Si vous placez le curseur sur l'image sans cliquer, vous verrez apparaitre le texte Apprenez HTML avec HTML.net comme message contextuel.
Deux autres attributs importants sont width et height :
Exemple 7 :
<img src="http://info-concept.net/image/logo.png" width="141" height="32">
Ce qui donne dans le navigateur :
On peut utiliser les attributs width et height pour fixer la largeur et la hauteur d'une image.
Les valeurs utilisees pour fixer ces dimensions sont en pixels. Le pixel est l'unite de mesure de la resolution des ecrans.
(Les resolutions d'ecrans les plus courantes sont de 800 x 600 et 1024 x 768 pixels). Au contraire des centimetres, les pixels sont
des unites de mesure relatives qui dependent de la resolution de l'ecran. Pour une resolution d'ecran eleve, 25 pixels peuvent
correspondre a l'ecran a 1 centimetre, tandis que sur un ecran de basse resolution a 1,5 cm.
Si on ne fixe pas sa largeur et sa hauteur, l'image sera inseree dans sa dimension reelle. Mais on peut manipuler ses dimensions
avec width et height :
Exemple 8 :
<img src="http://info-concept.net/image/logo.gif" width="32" height="32">
Ce qui donne dans le navigateur :
Par contre, il vaut mieux garder a l'esprit que le poids reel en kilo-octets du fichier d'image reste le meme, et qu'il faudra
autant de temps pour charger l'image, quoiqu'elle apparaisse plus petite a l'ecran. Ainsi vous ne devriez jamais reduire la dimension
de l'image avec les attributs width et height. Il faudrait plutot toujours redimensionner les images avec
un logiciel d'edition d'images afin de rendre ses pages plus legeres et plus rapides.
Ceci dit, c'est toujours une bonne idee d'utiliser les attributs width et height car le navigateur pourra
determiner l'occupation de l'image dans la page avant son chargement complet. Cela permet au navigateur une mise en page harmonieuse
et plus rapide.
Il suffit ici avec bill et les images.