Le texte n'a pas le monopole "hyper"... augmentez la polyvalence de vos pages web en créant des images qui se comportent comme des hyperliens (essayez de cliquer sur le cube !).
Le texte n'a pas le monopole "hyper"... augmentez la polyvalence de vos pages web en créant des images qui se comportent comme des hyperliens (essayez de cliquer sur le cube !).
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas le document de la leçon précédente, téléchargez une copie maintenant.
Dans les précédentes leçons, vous avez appris (du moins, espérons-le) à créer de l'hypertexte, du texte dans vos documents, connectant un internaute à de l'information similaire. Vous pouvez également utiliser des images incluses (voir la Leçon 7a) de manière "hyper". Vous vous souvenez peut-être que, dans une précédente leçon, nous avons relié du texte dans une page de notre Web Volcan, index.html, vers une seconde page, msh.html, décrivant le Mont St. Helens. Maintenant, dans cette dernière page, nous voulons ajouter un bouton qui, quand on cliquera dessus, ramènera l'internaute à la page de la leçon principale.
Le moyen de faire cela est de mettre les tags HTML des images incluses à l'intérieur de la partie hypertexte d'un tag ancre :
<a href="fichierX.html"> <img src="graphique.gif"> Aller au Document X</a>
Dans votre page web, ce code HTML affichera une image incluse ainsi que le texte Aller au Document X. Les deux se comporteront comme des hyperliens ; que vous cliquiez sur le texte ou sur l'image indiquera à votre navigateur web d'aller au fichier HTML fichierX.html. L'image seule peut également être un hyperlien. Sur le World Wide Web, un "HyperGraphique" est généralement entouré par un cadre coloré de la même couleur que l'hypertexte de votre page web, afin que vous sachiez que ce lien est "actif".
NOTE : Dans la majorité des navigateurs d'aujourd'hui, vous pouvez modifier la couleur de l'hypertexte et certaines pages ont même supprimé l'affichage du cadre autour des liens HyperGraphiques. Généralement, vous pouvez reconnaître un hyperlien dans une page web si vous voyez un changement dans l'apparence du pointeur de la souris quand il passe sur une telle région appelée "hot" ("chaude" en anglais). Le curseur, d'habitude en forme de flèche, se transforme en main quand il passe sur un lien actif.
Du point de vue conceptuel, quand vous utilisez des HyperGraphiques, nous vous recommandons d'ajouter un lien texte, ou d'utiliser l'attribut ALT= dans le tag <IMG...>, pour le cas où l'internaute aurait désactivé le chargement des images.
Maintenant, nous allons créer un bouton "hyper" graphique. Tout d'abord, vous devez récupérer une copie d'un bouton flèche dans le Studio d'Images de la Leçon 8e.
Vous devriez maintenant avoir une copie du fichier image quelque part dans votre ordinateur (Placez-la dans le dossier/répertoire pictures de votre espace de travail).
Ensuite, ajoutez le code HTML pour activer ce bouton :
<hr> <a href="index.html#usa"> <img src="../pictures/left.gif"> Retour au <i>Web Volcan</i></a>
Note : Le tag d'image incluse (<img...>) est entièrement à l'intérieur de l'ancre entre le > qui marque la fin de l'URL et le </a> qui marque la fin de l'hypertexte. Notez également l'utilisation du tag <i> dans l'hypertexte pour mettre en valeur le titre de la leçon. Enfin, nous avons utilisé le tag <hr> pour insérer une barre horizontale ou une ligne au-dessus du bouton (pour plus d'informations sur ce tag, voir la leçon 4).
Nous vous avons déjà mis en garde contre l'utilisation de grosses images incluses dans vos pages web car les internautes risquaient d'avoir à attendre longtemps le chargement de telles images sur leurs ordinateurs. Un moyen de contourner ce problème est de créer des copies miniatures de votre graphique, ou des "onglets" qui seront affichés comme des images incluses. Puis, en utilisant les mêmes étapes que ci-dessus, vous pouvez transformer ces "onglets" en hyperliens connectant aux images originales. De cette façon, les grosses images ne sont téléchargées QUE si l'utilisateur le décide.
D'abord, vous devez récupérer une copie des deux fichiers images dans le Studio d'Images de la Leçon 8e (ces fichiers doivent être stockés dans le dossier/répertoire pictures de votre espace de travail).
Ensuite, créez le lien onglet dans votre fichier texte principal :
Ce sismographe mesure les tremblements de terre représentant des
forces volcaniques souterraines et peut aider à prévoir des
évènements futurs.
Il se trouve sur un plateau appelé "Table Volcanique"
formé par une énorme éruption il y a 600.000 ans.
<p>
<a href="../pictures/seismo.jpg">
<img src="../pictures/stamp.gif" ALT="lien vers l'image réelle"
WIDTH="62" HEIGHT="85">
-- [image réelle, 55 Ko] --
</a>
L'image incluse, stamp.gif se comporte comme un hyperlien vers une image plus grande, seismo.jpg. Quand un utilisateur clique, ou sur "l'onglet", ou sur le texte "-- [image réelle, 55 Ko] --", son navigateur web affiche la grande image dans une nouvelle page.
Notez l'utilisation des dimensions de l'image stamp.gif dans le tag <img...>, ainsi que de l'attribut ALT=....
Dans notre lien hypertexte, nous fournissons l'information sur la taille de l'image, soit 55 Ko. Ainsi, vous laissez à l'internaute le choix de télécharger une image de cette taille... Si le lien connecte à quelque chose qui fait 1.6 Mo, l''utilisateur que vous êtes appreciera sûrement de le savoir avant d'essayer de voir un si gros fichier.
Comparez votre page web avec un exemple du document-type. Si votre page web est différente de l'exemple, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Quelques-une des erreurs les plus courantes sont des différences dans l'orthographe des noms de fichiers et du code HTML des ancres ou le fait de ne pas avoir les fichiers images dans le même répertoire que les fichiers HTML. Si vous voyez une icône d'image brisée :
 |
|
bla bla bla bla bla bla bla bla bla bla bla bla
|
ça signifie généralement que le code HTML ne correspond pas au fichier indiqué dans le tag <img>, ou que l'image n'est pas au format GIF ou JPEG.
Essayez d'ajouter des boutons qui relient deux pages web entre elles. Dans une leçon ultérieure, nous verrons comment supprimer le "cadre" autour d'un hypergraphique.
Utilisez le tag pré-format pour créer une table de texte dans votre leçon Volcan.
Ecrire le HTML : Leçon 8e : HyperGraphiques
©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/tut8e.html
