Leçon 9 : Les imagesEst-ce qu'il ne serait pas formidable d'avoir une photo de l'acteur et légende musicale David Hasselhoff en plein milieu de la page ?
Ça sonne comme un défi ...Peut-être, mais en réalité c'est très facile à faire. Il vous faut seulement un élément :
Exemple 1 : 
Ce qui donne dans le navigateur :
Tout ce dont vous avez besoin est d'abord de dire au navigateur que vous voulez insérer une image (
img) puis de lui dire où elle se trouve (
src, abréviation de « source »). Vous voyez ?
Remarquez que l'élément
img est ouvert et fermé avec la même balise. Comme la balise
, il n'est pas associé à un morceau de texte.
Le nom « david.jpg » est celui du fichier d'image à insérer 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 insérer dans vos pages :
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Les images GIF conviennent habituellement mieux pour les graphiques et les dessins, et les images JPEG pour les photographies. Deux raisons à cela : premièrement les images GIF se composent seulement de 256 couleurs, tandis que les images JPEG en contiennent des millions, et deuxièmement, le format GIF est mieux adapté pour comprimer des images simples que le format JPEG optimisé 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'expérience vous l'a sans doute montré, les pages inutilement « lourdes » peuvent être très gênante pour l'utilisateur.
Traditionnellement, les formats GIF et JPEG ont été les deux types d'images dominants, mais récemment, le format PNG est devenu de plus en plus populaire (principalement aux dépends du format GIF).
Le format PNG format représente de beaucoup de points de vue le meilleur des deux formats JPEG et GIF : des millions de couleurs et une compression efficace.
Où trouver des images ?Pour fabriquer vos propres images, il vous faut un programme d'édition d'images.
Un programme de création d'image est l'un des outils essentiels pour créer de jolis sites Web.
Malheureusement, aucun bon programme d'édition d'images n'est fourni avec Windows ou d'autres systèmes d'exploitation. Il faudrait donc envisager d'investir dans l'un des trois meilleurs logiciels d'édition d'images actuellement sur le marché, à savoir « Paint Shop Pro », « PhotoShop » ou « Macromedia Fireworks ».
Quoi qu'il en soit, comme annoncé précédemment, il ne sera pas nécessaire d'acheter des logiciels coûteux pour finir ce tutoriel. Pour l'instant, vous pouvez télécharger l'excellent logiciel d'édition d'images «
Irfan View », un gratuiciel (N.d.T. freeware) qui ne coûte donc rien.
Ou vous pouvez juste emprunter des images à d'autres sites en les téléchargeant. Mais faites attention à ce que le téléchargement des images n'enfreigne pas de droits d'auteur. Par contre, il est toujours utile de savoir télécharger des images, et voici comment :
- Cliquez sur le bouton de droite après avoir placé le pointeur sur une image, quelle que soit l'image sur Internet ;
- Sélectionnez « Sauvegarder l'image sous ... » dans le menu qui apparaît ;
- Sélectionnez un emplacement sur votre ordinateur pour l'image et appuyez « Sauvegarder ».
Faites-le avec l'image suivante et sauvegardez-la sur votre ordinateur au même emplacement que vos documents HTML. (Remarquez que le logo est sauvegardé comme fichier PNG : logows-nation.gif :
Vous pouvez maintenant insérer l'image dans l'une de vos pages. Essayez vous-même.
C'est tout ce que je dois savoir pour les images ?Il y a d'autres choses à connaître concernant les images.
D'abord vous pouvez aisément insérer des images situées dans d'autres dossiers, ou même situées sur d'autres sites Web :
Exemple 2 :
Exemple 3 :
Deuxièmement, les images peuvent être des liens :
Exemple 4 :
Ce qui donnera dans le navigateur (cliquez sur l'image) :
Y a t-il d'autres attributs à connaître ?Vous aurez toujours besoin d'utiliser l'attribut
src, qui indique au navigateur où l'image se trouve. Hormis cela, beaucoup d'autres attributs peuvent être utiles pour insérer des images.
L'attribt
alt sert à fournir une description de remplacement de l'image si, pour une raison ou pour une autre, l'image n'était pas affichée à l'utilisateur. C'est particulièrement important pour les utilisateurs aveugles, ou si la page se charge très lentement. Donc, toujours utiliser l'attribut
alt :
Exemple 5 :
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 à offrir une description de remplacement pour l'image. L'attribut
alt ne devrait pas servir à créer des messages contextuels spéciaux pour les utilisateurs car les utilisateurs aveugles entendront le message sans savoir ce que l'image représente.
L'attribut
title peut servir pour décrire brièvement l'image :
Exemple 6 :
Ce qui donne dans le navigateur :
Si vous placez le curseur sur l'image sans cliquer, vous verrez apparaître le texte « Apprenez HTML avec HTML.net » comme message contextuel.
Deux autres attributs importants sont
width et
height :
Exemple 7 :
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 utilisées pour fixer ces dimensions sont en pixels. Le pixel est l'unité de mesure de la résolution des écrans. (Les résolutions d'écrans les plus courantes sont de 800 x 600 et 1024 x 768 pixels). Au contraire des centimètres, les pixels sont des unités de mesure relatives qui dépendent de la résolution de l'écran. Pour une résolution d'écran élevé, 25 pixels peuvent correspondre à l'écran à 1 centimètre, tandis que sur un écran de basse résolution à 1,5 cm.
Si on ne fixe pas sa largeur et sa hauteur, l'image sera insérée dans sa dimension réelle. Mais on peut manipuler ses dimensions avec
width et
height :
Exemple 8 :
Ce qui donne dans le navigateur :
Par contre, il vaut mieux garder à l'esprit que le poids réel en kilo-octets du fichier d'image reste le même, et qu'il faudra autant de temps pour charger l'image, quoiqu'elle apparaisse plus petite à l'écran. Ainsi
vous ne devriez jamais réduire la dimension de l'image avec les attributs width et height. Il faudrait plutôt toujours redimensionner les images avec un logiciel d'édition d'images afin de rendre ses pages plus légères et plus rapides.
Ceci dit, c'est toujours une bonne idée d'utiliser les attributs
width et
height car le navigateur pourra déterminer 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 David Hasselhoff et les images.
by sh@d
Sujet: Tutoriel HTML-partie 9 
Dim 18 Nov 2007, 5:01 pm
tu c que g du faire les 9 partie du tuto en meme temps , à force d'ecrire g du melanger les choses la preuve c que les 8 partie restante sont ts du html 
,
page en langage html. Ce n'est pas fameux, mais nous< IMG SRC="../PICT/yc03c.gif" align=bottom > allons travailler dessus pour améliorer tout ça. 
