cette image du "Grand M". Mathématiques pour le WWW :
Texte + images = Multimédia
Multimédia + WWW = HyperMédia Global
Compris ?
Après cette leçon, vous pourrez :
Voyons comment vous pouvez, en HTML, inclure des images comme le "Grand M" dans une page web...
Une image "incluse" est une image qui s'affiche au milieu du texte d'une page WWW, comme cette image du "Grand M".
Le code HTML pour le tag image incluse est :
<img src="nom_de_fichier.gif">
où nom_de_fichier.gif est le nom d'un fichier GIF présent dans le méme répertoire/dossier que votre document HTML. Par "incluse", nous entendons que le navigateur va afficher cette image dans le texte.
Regardez comment le texte suit immédiatement le "Grand M" ci-dessus. Comment faire si on veut que le "Grand M" soit tout seul sur une ligne ? Pour forcer l'image à apparaître sur une ligne à part,
insérez simplement un tag paragraphe avant le tag image :
<p> <img src="nom_de_fichier.gif">
Grâce à un attribut dans le tag <img...>, vous pouvez également contrôler comment le texte adjacent s'aligne avec l'image. L'attribut align, ajouté dans le tag <img>, produit les effets suivants :
 |
|
pour Maricopa Community
Colleges situés dans la Vallée du Soleil, ville de Phoenix, Arizona. Nos plaques minéralogiques indiquent que nous sommes dans l'état du Grand Canyon...
|
|
|
pour Maricopa Community
Colleges situés dans la Vallée du Soleil, ville de Phoenix, Arizona. Nos plaques minéralogiques indiquent que nous sommes dans l'état du Grand Canyon...
|
|
|
pour Maricopa Community
Colleges situés dans la Vallée du Soleil, ville de Phoenix, Arizona. Nos plaques minéralogiques indiquent que nous sommes dans l'état du Grand Canyon...
|
Notez comment le texte s'aligne seulement pour la première ligne... (réduisez ou augmentez la taille de votre fenêtre de navigateur WWW pour voir ce qui se passe.) Avec le HTML 2.0, vous ne pouvez pas avoir de texte adjacent à une image. Dans une leçon ultérieure, nous verrons un moyen d'aligner du texte pour qu'il entoure complètement une image.
Note : Si vous n'avez pas le document de la leçon précédente, téléchargez une copie maintenant. Vous aurez aussi besoin de l'image GIF disponible dans le Studio d'Images de la Leçon 7.
Dans cet exercice, vous allez ajouter une image de volcan pour l'introduction de votre leçon.
<img src="lava.gif">Ce code HTML insèrera, tout en haut de votre page, l'image de volcan que vous avez téléchargée dans la précédente leçon.
En plaçant l'image, vous vous êtes peut-être demandés pourquoi nous n'avions pas besoin du tag <p> aprés l'image. C'est parce que le texte qui la suit est un titre. Un navigateur web insère toujours une césure de paragraphe avant et après un tag <h1,h2,h3...>.
Si vos pages web sont vues par des internautes utilisant un navigateur n'affichant que du texte (comme lynx), ils ne pourront voir aucune des images incluses. Il arrive également parfois que des utilisateurs désactivent le chargement des images dans leur navigateur pour accélérer le temps de chargement des pages lors de connexions lentes sur certains réseaux. Un attribut du tag <img ...> vous permet de substituer une ligne descriptive de texte à la place d'une image.
Dans ce cas, un internaute avec un navigateur texte verra un petit encart et le haut de la page de notre leçon ressemblera à :
|
[IMAGE]
Web Volcan
Dans cette leçon, vous vous servirez d'Internet pour rechercher
de l'information sur les volcans et rÈdiger un rapport de vos rÈsultats.
-----------------------------------------------------------------
Dans cette Leçon...
|
Cela indiquera à l'internaute qu'il y a une image insérée en haut de cette page. Vous pourriez modifier le tag <img> afin de remplacer l'encart par une ligne de texte. Par exemple, dans notre leçon, nous pourrions ajouter "Une Leçon sur le : " en modifiant le tag <img> de cette façon :
<img alt="Une Leçon sur le : " src="lava.gif">
L'attribut alt="..." remplace l'encart par une ligne de texte afin que, dans un navigateur texte (ou quand le chargement des images est désactivé), cela s'afficherait de la manière suivante :
|
Une Leçon Sur Le
Web Volcan
Dans cette leçon, vous vous servirez d'Internet pour rechercher
de l'information sur les volcans et rÈdiger un rapport de vos rÈsultats.
-----------------------------------------------------------------
Dans cette Leçon...
|
Modifiez maintenant le tag <img> qui affiche l'image du volcan dans votre fichier HTML.
Une autre option que l'on peut vouloir inclure dans ses tags <img...> consiste en deux attributs qui donnent les dimensions de l'image en pixels. Pourquoi ? Normalement, votre navigateur doit déterminer ces informations en lisant l'image ; le chargement de votre page peut être acceléré si vous spécifiez ces chiffres dans votre code HTML.
Le format pour inclure cette option est :
<img src="nom_de_fichier.gif" width=X height=Y>où X est la largeur de l'image et Y sa hauteur en pixels.
D'habitude, vous pouvez utiliser un programme ou un utilitaire graphique pour déterminer ces nombres. Un autre moyen de trouver les dimensions d'une image est de la charger dans votre navigateur -- vous pourrez peut-être faire glisser et déposer l'icône de l'image dans la fenêtre de votre navigateur -- et les hauteur et largeur seront affichées dans la barre de titre de la fenêtre.
Pour notre exemple dans cette leçon, l'image lava.gif fait 300 pixels de large et 259 pixels de haut. Vous devriez reprendre votre fichier volc.html et le modifier comme suit :
<img alt="Une Leçon sur le :" src="lava.gif" width=300 height=259>
NOTE: l'ordre des attributs à l'intérieur du tag <img> n'a pas d'importance.
On nous demande souvent si on peut modifier la taille d'une image en changeant ses dimensions initiales. La réponse est oui mais les résultats peuvent être inattendus. Si vous entrez des chiffres plus grands (pour agrandir l'image), le résultat risque de donner une image un peu "massive". Ca peut parfois donner un effet intéressant sur des images avec de grandes zones de couleur pleine. Jetez un oeil sur notre exemple De Petit Vers Grand. Si vous utilisez des chiffres plus petits (pour rétrécir une image), le résultat pourra être déformé. De toute façon, l'image dans sa taille réelle doit quand même être téléchargée ; vous ne gagnerez donc pas de temps en termes de chargement de l'image. Tout redimensionnement d'une image demande du "travail" supplémentaire à votre navigateur pour recalculer la présentation de votre page.
Faites l'expérience et voyez par vous-même. Nous pouvons peut-être nous tromper !
Vous pouvez également spécifier la taille d'une image incluse en pourcentage de la taille de votre fenêtre de navigateur, afin que l'image se redimensionne automatiquement quand l'utilisateur augmente ou réduit la taille de sa fenêtre de navigateur. Regardez notre exemple Echelle de Pourcentage. Caveat Emptor ! Ca peut ne pas marcher sur tous les navigateurs !
Vous voudrez peut-être comparer votre document avec l'exemple pour cette section. Si votre document est différent de l'exemple, vérifiez comment vous avez entré le tag image dans votre éditeur de texte. Assurez-vous que vous avez bien suivi les instructions de la section Placer une Image Incluse dans Votre Document HTML de cette leçon.
Si vous voyez une icône d'image avec un point d'interrogation :
|
bla bla bla bla bla bla bla bla bla bla bla bla
|
vérifiez d'abord que le fichier HTML et l'image sont bien dans le même dossier/répertoire. Ensuite, assurez-vous que le nom de fichier que vous avez tapé dans le tag <img... > est bien identique au nom du fichier image.
NOTE: Certains systèmes (UNIX) différencient majusculet et minuscules dans les noms de fichiers. Cela veut dire que le fichier "lava.GIF" n'est PAS le même que "lava.gif". D'autres ordinateurs (Macintosh) les considèrent comme le même fichier. Même si votre ordinateur ne fait pas la différence entre les majuscules et les minuscules, nous vous suggérons de respecter les conventions de nommage pour les fichiers en HTML et d'utiliser des minuscules (un grand nombre de serveurs WWW fonctionnent sous UNIX).
Ajoutez une image incluse dans votre page web en utilisant un fichier GIF stocké sur votre ordinateur ou que vous avez téléchargé depuis Internet.
Créez des liens vers d'autres documents et fichiers que vous avez créés ou sur Internet.
Ecrire le HTML : Leçon 7a : Images Incluses
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut7a.html