"Ajoutez un élément TARGET à votre HREF"
ou
"Comment Créer des HyperLiens qui Mettent votre Site en Avant"
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Pour toutes les pages que nous avons créées jusqu'ici, nous avons écrit des documents ayant des hyperliens permettant de charger une nouvelle page web, remplaçant ainsi le contenu qui était affiché. Oui, un internaute pouvait retourner à sa page web en utilisant le bouton Précédent du navigateur ou les fonctions Aller à / Historique.
Mais il se peut aussi que vous vouliez créer un lien qui ferait apparaître le contenu dans une nouvelle fenêtre de navigateur en laissant intacte la fenêtre d'origine. Un exemple d'utilisation serait une première page contenant une liste de liens vers une cinquantaine de photos différentes ou de définitions dans un glossaire. Il pourrait être pratique de garder à l'écran la liste des liens afin que les utilisateurs puissent cliquer sur un lien, en voir le contenu et retourner facilement à la liste pour sélectionner un autre élément.
Ou bien la première page pourrait être une partie d'une leçon dans laquelle les étudiants doivent visiter 5 sites web différents et répondre à des questions -- il pourrait être utile de garder la première page à l'écran pour se souvenir du sujet.
Dans cette leçon, nous allons voir comment modifier le tag <a href=...> pour indiquer que le lien doit être chargé dans une nouvelle fenêtre de navigateur. Dans ce didacticiel, nous avons créé des nouvelles fenêtres avec notre navigateur web -- maintenant, nous allons apprendre à le faire avec du HTML.
Avant de commencer, nous devons considérer quelques questions. Si vos pages web ouvrent trop de fenêtres différentes, vous risquez d'embrouiller l'utilisateur. Il arrive également que, sur certains ordinateurs, la nouvelle fenêtre occulte complètement les autres, et vos utilisateurs ne verront peut-être même pas que c'est une nouvelle fenêtre. Utilisez donc cette fonctionnalité quand cela aide vraiment la présentation du votre contenu.
Le code HTML à utiliser pour créer une fenétre "TARGET" (cible) -- la fenêtre dans laquelle on affichera le contenu -- se présente comme suit :
<a href="un_url.html" target="nom_de_fenêtre">
où, comme nous le savons depuis les leçons précédentes, href indique l'URL, une adresse web ou une autre de vos propres pages web. Le nouvel attribut du tag est le nom après target=.
Nous pouvons choisir n'importe quel nom pour l'attribut target ; c'est une information interne au navigateur web. Voici ce qui se passe quand vous cliquez sur un lien comme :
<a href="http://www.mcli.dist.maricopa.edu/tut/commececi.html" target="didacticiel">
Votre navigateur se dit : "Hmmm. Je dois récupérer le HTML de l'URL http://www.mcli.dist.maricopa.edu/tut/commececi.html et le placer dans une fenêtre appelée didacticiel. Ahhh, cette fenêtre n'existe pas, je vais donc en créer une nouvelle."
NOTE : La première fois que vous essayez le lien, cela devrait afficher une nouvelle page web apparaissant dans une fenêtre devant cette leçon . Si vous fermez cette fenêtre et recliquez sur le lien ci-dessus, cela marchera de la même façon.
Essayez de nouveau, mais cette fois-ci, minimisez la nouvelle fenêtre, déplacez -là sur le côté ou activez simplement la fenêtre de la leçon en avant-plan. Dans la majorité des navigateurs web, si vous cliquez de nouveau sur le lien, cela rechargera la fenêtre mais ne l'amènera pas au premier plan. En fait, vous pouvez cliquer sur ce lien jusqu'à l'année prochaine et il semblera qu'il est inactif, alors qu'il est juste à l'arrière-plan.
Le nom que vous donnez à l'attribut target= est libre. Nous verrons plus tard qu'il y a 4 noms ayant une signification particulière :
Nous vous recommandons d'utiliser des noms de fenêtre courts mais parlants.
Nous allons maintenant utiliser ce nouveau code pour notre site volcan. Dans les leçons précédentes, la page que nous avons créée décrivant les Volcans aux Etats-Unis contenait une petite photo d'un sismographe qui, quand on cliquait dessus, reliait à une image plus grande. Nous allons maintenant modifier le HTML afin que la grande photo s'ouvre dans une nouvelle fenêtre de navigateur.
<a href="../pictures/seismo.jpg">et modifiez-les de la manière suivante :
<a href="../pictures/seismo.jpg" target="photo">
Maintenant, les deux liens de la petite image et des titres hypertexte devraient charger le gros fichier JPEG dans une nouvelle fenêtre.
Nous allons maintenant vous montrer comment définir l'attribut TARGET afin que le lien s'affiche obligatoirement en avant-plan... en utilisant le nom spécial de fenêtre "_blank" ("vide"). Le seul inconvénient avec cette méthode est que si vous avez 20 liens avec ce nom de fenêtre, il est possible d'étaler une seule page web dans 20 fenêtres différentes. Comme chaque fenêtre supplémentaire requiert de la mémoire, ça peut être une excellente recette pour planter votre ordinateur !
Mais regardons plutôt un exemple dans lequel on peut utiliser cette fonctionnalité. Dans notre site Web Volcan, la page de terminologie contient les images de différents types de volcans, chacune reliée vers un site web externe. Bien que les liens href soient écrits différemment car ils sont inclus dans le code de la carte d'image cliquable que nous avons créée (dans la leçon 23), on pourrait les modifier de la façon suivante :
<map name="volcmap">
<area shape="rect"
href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html"
target="_blank" coords="48,46,204,153">
<area shape="rect" href="explode.html"
target="_blank" coords="0,66,26,227">
<area shape="rect" href="height.html"
target="_blank" coords="95,283,378,309">
<area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"
target="_blank" coords="321,154,468,261">
<area shape="rect" href="http://stromboli.net/"
target="_blank" coords="172,155,318,274">
<area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/"
target="_blank" coords="36,155,168,276">
<area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/"
target="_blank" coords="90,3,343,123">
</map>
Si nous avions écrit notre code comme ceci, chaque hyperlien de la carte d'image chargerait le site choisi dans une nouvelle fenêtre de navigateur. Mais, comme nous avons une série de liens devant apparaître dans la même fenêtre cible, nous pouvons utiliser une balise différente pour écrire un code HTML qui fera la même chose :
<base target="nom_de_fenêtre">
indiquant que tous les liens hypertexte après ce tag seront ouverts dans la fenêtre spécifiée. Nous pouvons donc maintenant mettre à jour nos fichiers avec ce nouveau tag.
<font size=+2>Consultez chaque type en cliquant sur une image</font><br>ajoutez cette ligne :
<font size=-1>Chaque lien s'ouvrira dans sa propre fenêtre</font><br>Cela donne une information aux utilisateurs afin qu'ils comprennent ce qui se passe quand ils cliquent sur les liens.
<map name="volcmap">insérez ce code HTML :
<base target="_blank">
NOTE : Si vous cliquez sur un des hyperliens dans la carte d'image, les différents sites volcans devraient apparaître dans des nouvelles fenêtres, devant la leçon. Notez ce qui se passe si vous cliquez la partie appelée SURTSEYAN, laissez la nouvelle fenêtre ouverte, retournez à la première page et recliquez sur un autre lien -- vous avez maintenant deux fenêtres ouvertes avec le même URL !
Mais il reste encore un tout petit problème : sous notre carte image, nous avons d'autres liens hypertexte vers d'autres documents et sites web qui ne doivent pas se charger dans une nouvelle fenêtre ! Nous pouvons remédier à cette situation en utilisant un autre des noms spéciaux de fenêtre, "_self" qui veut dire : "charge le nouvel url/page dans la même fenêtre".
</map>ajoutez cette ligne :
<base target="_self">
NOTE : Cela annule le précédent tag <base target=..."> afin que tous les liens qui suivent se chargent dans la fenêtre actuelle du navigateur.
Comparez vos pages web avec cet exemple Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.
Revoyons les grandes lignes de cette leçon :
Dans votre propre page web, cherchez où il peut être intéressant d'ouvrir des nouvelles fenêtres. Essayez d'ajouter le tag TARGET=... à quelques-uns de vos liens. Cela semble-t-il logique à d'autres personnes ? Est-ce qu'elles comprennent ce qui se passe ?
Créez d'utiles ensembles de 'cadres' de pages web... découpant une seule page en morceaux.
Ecrire le HTML : Leçon 25 : Suivre les Fenêtres
©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/tut25.html