All rights reserved.
Cette liste des questions les plus fréquemment posées est tenue à jour par WDG et a été mise à jour pour la dernière fois le 15 Juillet 2000. (La présente traduction date de Janvier 2001). Elle peut être trouvée aux adresses suivantes :
La traduction en hollandais de ce document est disponible également :
La présente traduction française se trouve sur :
Si vous souhaitez contribuez à cette FAQ, merci d'envoyer un message à <darin@htmlhelp.com>. Toutes les personnes qui ont participé à cette FAQ sont listés à la fin.
N'hésitez pas àcontacter le traducteur pour signaler une imprécision, une erreur de traduction, une faute de français que vous pourrez trouver dans ce document : <cedrik.rousseau@insa-rouen.fr>
4 . Hyperliens
Utiliser une balise ancre. L'attribut HREF spécifie l'URL du document que vous voulez lier. L'exemple suivant lie le texte "FAQ Création HTML" à l'URL <URL: http://asi.insa-rouen.fr/FAQ/>.
<A HREF="http://asi.insa-rouen.fr/FAQ/">FAQ Création HTML</A>
Pour plus d'information sur les liens et sur la balise ancre, voir : http://www.htmlhelp.com/reference/html40/special/a.html
D'abord, identifier la destination du lien avec une ancre nommée (une ancre qui utilise l'attribut NAME). Par exemple:
<H2><A NAME="section2">Section 2: Après le UN, voilà
le DEUX</A></H2>
Ensuite, lier à l'ancre nommée. L'adresse de l'ancre nommée est l'URL du document avec un dièse "#" et le nom de l'ancre accollé. Par exemple, ailleurs dans le même document vous pouvez utiliser :
<A HREF="#section2">Sauter à la Section 2</A>
De même, dans un autre document vous utiliserez :
<A HREF="leschiffres.html#section2">Aller directement à
la Section 2 de ma thèse sur les chiffres.</A>
<A TARGET="_blank" HREF=...> ouvre une nouvelle fenêtre
sans nom.
<A TARGET="surgissante" HREF=...> ouvre une nouvelle fenêtre
nommée "surgissante", en supposant qu'aucune fenêtre
ni qu'aucun cadre de ce nom n'existe déjà.
Il faut savoir que les liens qui ouvrent de nouvelles fenêtre peuvent être agaçant pour vos lecteurs si ils ne sont pas justifiés (du point de vue du lecteur).
Avec HTML, il n'y a pas moyen de contrôler la taille (ni même aucune
autre chose) d'une nouvelle fenêtre. Cependant, en JavaScript, vous pouvez
spécifier de tels détails en utilisant la fonction window.open().
Commencer avec un lien ordinaire HTML (comme ceux décris en réponse à la question précédente). Puis utilisez l'attribut ONCLICK pour ouvrir une fenêtre avec l'apparence désirée pour les utilisateurs ayant JavaScript activé. L'exemple suivant produit une nouvelle fenêtre nommée "bondissante" de 300 pixels par 150.
<A HREF="lababalle.html" TARGET="bondissante" ONCLICK="window.open('lababalle.html',
'bondissante', 'width=300,height=150'); return false">Voir la balle</A>
Utilisé de cette manière, JavaScript peut spécifier une nouvelle fenêtre avec l'apparence désirée, sans bloquer l'accès quand JavaScript n'est pas supporté ou désactivé.
En plus des paramètres height et width (qui
prennent un nombre de pixel comme valeur), le troisième argument pour
window.open() peut inclure les paramètres booléens
(qui prennent "yes" ou "no" comme valeur) suivants
: directories (répertoires), location (adresse), menubar (barre de menu),
resizable (redimensionnable), scrollbars (barres de déroulement), status
(barre d'informations), and toolbar (barre d'outil). Ces paramètres booléens
contrôlent la présence des décorations de fenêtres
correspondantes.
Le mieux est d'utiliser un petit formulaire :
<FORM ACTION="[Je saute à cette adresse]" METHOD=GET>
<INPUT TYPE=submit VALUE="Je suis le texte du bouton">
</FORM>
Si vous voulez aligner les boutons les uns à coté des autres, vous devez les mettre dans un tableau à une ligne, avec chaque bouton dans une cellule séparée. (comme pour les prisonniers dangereux:).
Il faut savoir qu'il ya un risque que les moteurs de recherche ne trouvent pas les documents cibles, à moins qu'un lien normal existe ailleurs sur la page. (Vous pouvez éventuellement faire des liens invisibles en utilisant une encre invisible).
Un bouton sauter-sur-une-autre-page peut également être codé en JavaScript, mais cet exemple, en HTML standard, marche pour tous les navigateurs.
C'est impossible à faire avec HTML. Revenir en arrière signifier aller à l'adresse précedente de votre historique. Vous pouvez créer un lien vers l'adresse spécifiée dans l'en-tête HTTP Referer (disponible dans la variable d'environnement HTTP_REFERER dans les scripts CGI), mais cela crée un lien en avant vers une nouvelle adresse dans votre historique. De plus, certains clients n'envoie jamais l'en-tête Referer (qui est optionnel).
Vous pouvez utiliser la fonction JavaScript history.back() pour
créer un bouton retour. Naturellement, ceci ne marche que lorsque JavaScript
est installé et activé.
Pour des explications plus détaillées, veuillez vous tourner vers la page "Simulating the back button" sur <URL:http://www.foad.org/~abigail/HTML/Misc/back_button.html>.
De plus, il faut se rappeler que le bouton retour est l'outil de navigation le plus utilisé après l'hyper-lien. Vos lecteurs connaissent donc certainement comme utiliser le bouton retour de leur navigateur. Et ceux qui ne savent seront d'autant plus confus devant des pages imitant ces mêmes fonctions de façons différentes.
C'est impossible à faire en HTML. Cependant, Internet Explorer 4 et
suivant supporte l'extension de fonction JavaScript window.external.AddFavorite()
qui ouvre une fenêtre de dialogue "Ajouter aux Favoris".
L'exemple suivant évite de créer un bouton qui ne marcherait pas
pour ceux qui n'utilisent pas Internet Explorer :
<script type="text/javascript"><!--
function addf() {
window.external.AddFavorite('http://www.insa-rouen.fr/',
'Institut National des Sciences Appliquées de Rouen'); }
if(document.all) {
document.write('<input type="button" onclick="addf()"'+
' value="Ajouter le site de l'Insa de Rouen aux favoris">'); }
//--></script>Il ne faut pas oublier que les utilisateurs qui savent utiliser les favoris savent aussi créer le marque-page indépendemment. De la même façon, ceux qui ne savent pas utiliser les favoris ne sauront sans doute pas utiliser la marque que vous créez pour eux. Donc peut-être que ce genre de bouton n'est pas indispensable à un site de qualité...
C'est impossible à faire en HTML. Cependant, quelques navigateurs comprennent
la fonction JavaScript window.print(), qui ouvre une fenêtre
de dialogue "Impression". L'exemple suivant évite de créer
un bouton qui ne marcherait pas pour ceux qui n'ont pas un navigateur compatible
:
<script type="text/javascript"><!--
if (window.print) {
document.write('<input type="button" onclick="window.print()"'+
' value="Imprimer cette page">'); }
//--></script>Malgré tout, il ne faut pas oublier que les utilisateurs qui ont une imprimante savent aussi comment utiliser la fonction imprimer de leur navigateur. Et ceux qui ne savent pas seront d'autant plus perdus devant des pages qui imitent cette fonction de façons différentes.
Vous devez utiliser un lien mailto, par exemple :
Envoyer moi un couriel (email) à
<A HREF="mailto:cedrikrousseau@voila.fr"> cedrikrousseau@voila.fr </A>.
Prenez garde qu'une adresse publiée ainsi sur le Web, s'expose à recevoir de la pollution publicitaire.
Il faut également prendre en compte que ce genre de lien ne fonctionne que pour les gens qui utilisent un logiciel de lecture de courrier et qui utilisent leur propre ordinateur. De nombreuses personnes utilisent une boîte aux lettres gratuite sur le Web qui ne peut être invoquée au moyen d'un lien.
Il n'y pas de façon sûre de faire ça. Les diverses méthodes qu'on peut rencontrer ne sont pas efficaces sur tous les couples de navigateur Web et de logiciel de lecture de courrier electronique (ni même sur les couples les plus courants), et la plupart d'entre eux ont un gros problème : en cas d'échec, le courrier sera perdu!
La seule façon efficace à 100 pour cent de forcer l'utilisateur à envoyer un courrier avec un objet précis est de créer un formulaire CGI qui sera capable de vous envoyer le courrier avec le champ objet désiré. Cependant, vous ne pouvez qu'espérer que l'utilisateur entre son adresse email correctement...
Voici quelques autres façons d'aborder le problème :
<A HREF="mailto:moi@compagnie.fr" TITLE="A propos de la
page Web sur les ours polaires aquatiques">. La majorité
des navigateurs ignoreront l'attribut TITLE, mais quelques navigateurs
l'utiliseront comme objet pour le courrier. Au moins, tous les navigateurs
enverront le courrier.
<A HREF="mailto:moi@compagnie.fr?subject=Les%20ours%20polaires">,
qui mettra "Les ours polaires" (l'espace doit être codé
%20) dans le champ sujet avec la plupart des navigateurs actuels. Plus de
détails sur cette RFC se trouve par exemple sur <URL:http://info.internet.isi.edu/in-notes/rfc/files/rfc2368.txt>.
Utiliser simplement l'image comme contenu d'un lien, de cette façon :
<A HREF="ours_marins.html"><IMG SRC "ours_aquatique.jpg".></A>
Utiliser l'attribut BORDER="0" dans la balise <IMG>.
Par exemple :
<A HREF="ourson_de_mer.html"><IMG SRC="petit_ours_plongeur.gif"
ALT="Photo d'un bébé ours dans l'eau salée." BORDER="0"></A>
Il faut utiliser une carte d'image (image map). Les cartes définies du coté client ne requierent pas de traitement de la part du serveur, donc le temps de réponse est plus rapide. Les cartes définies du coté serveur cachent la définition des liens aux yeux du navigateur, et permettent aux quelques navigateurs préhistoriques compatibles seulement avec ce genre de carte de fonctionner quand même.
Les détails de configuration des cartes définies du coté serveur varient suivant les serveurs. Veuillez vous reporter à la documentation de votre serveur Web.
Mais il est sans doute plus aisée d'utiliser HTML pour définir
une carte d'une image coté-client. La balise MAP définie
une carte individuelle et la balise AREA définie les zones
spécifiquement liées à l'intérieur de cette carte.
L'attribut USEMAP du marqueur IMG associe une carte
à une image précise. Une explication détaillée (avec
des exemples) est disponible sur : <http://www.htmlhelp.com/reference/html40/special/map.html>.
Une leçon se trouve sur <http://ppewww.ph.gla.ac.uk/~flavell/www/imgmaptut.html>.
Il est possible de demander à son navigateur de ne pas souligner les liens. Il suffit d'aller trifouiller dans les options!
Si vous souhaiter empêcher les liens de votre page d'être soulignés quand les visiteurs les voient, alors ce n'est pas possible en HTML. Mais c'est faisable en utilisant une feuille de style (CSS). Définisser par exemple :
a:link, a:visited, a:active {text-decoration: none}
Ceci se définie avec CSS. Dans votre feuille de style, définissez quelque chose comme :
a:link {color: blue; background: white}
a:visited {color: purple; background: white}
a:active {color: red; background: white}
a.foo:link {color: yellow; background: black}
a.foo:visited {color: white; background: black}
a.foo:active {color: red; background: black}
Utiliser alors CLASS="foo" pour identifier les liens de votre
seconde couleur dans le code HTML :
<A CLASS="foo" HREF=...>...</A>
Dans votre feuille de style, utiliser la pseudo classe hover pour
spécifier une apparence différente pour les liens quand le curseur
passe dessus. Par exemple :
A:link { color: blue ; background: white }
A:visited { color: purple ; background: white }
A:hover { color: red ; background: white }
(Note pour les questions 4.14, 4.15 et 4.16 : des liens pour en apprendre plus sur les CSS et les feuilles de style sont disponible au tout premier chapitre de cette FAQ. Vous pouvez notamment consulter WDG's Guide to Cascading Style Sheets <URL:http://www.htmlhelp.com/reference/css/>)
Il y a de grandes chances que vous ayez oublié de fermer la balise à la fin de l'attribut HREF. Ou alors vous avez peut-être utiliser un caractère ">" quelque part à l'intérieur de la balise. Bien que ce soit autorisé, plusieurs vieux navigateurs penseront que la balise se terminent là, affichant ainsi le reste comme texte standard.
Ceci arrive surtout si vous utilisez des marqueurs de commentaires pour mettre du texte en remarque. (Voir la réponse à "Comment inclure des commentaires en HTML?"). Bien que la syntaxe correcte soit <!-- ... --> (sans aucune occurence de "--" dans le commentaire), certains navigateurs peu finaud penseront que le commentaire finit au premier ">" qu'ils voient.
Les validateurs vous montreront les erreurs de syntaxe dans vos marqueurs, mais les vérifieurs tels que Weblint ou HTMLcheck trouveront en plus où vous pourriez provoque des bugs connus des navigateurs. Par exemple, certaines versions de Netscape sont réputées avoir des problèmes avec les liens vers des ancres nommées quand les ancres sont à l'intérieur d'un tableau qui utilise l'attribut ALIGN. Voir aussi la réponse à "Comment vérifier les erreur éventuelles?".
Une autre possiblité est que votre logiciel de création Web ait utilisé des URL vers des fichiers locaux. (par exemple, file:C:\baignade\ours.html). Si c'est le cas, vous devrez alors les remplacer avec des adresses relatives (i.e. , ours.html)
Y'a t'il des caractères spéciaux du style espace, '#' ou '?' dans votre nom de fichier? Les espaces ne sont pas autorisés dans les URL. Si vous encodez l'espace en le remplaçant par %20, votre lien marchera.
Vous pouvez encoder n'importe quel caractère dans une adresse avec le caractère '%' suivi de deux chiffres hexadécimaux correspondant au code ASCII. (Les chiffres hexa A à F peuvent être minuscules ou majuscules). D'après les spécifications, seuls les caractères alphanumériques et les caractères - _ . ! * ' ( et ) n'ont jamais besoin d'être encodés.
Vous devez donc encoder tous les autres caractères quand ils apparaissent dans une adresse, sauf quand ils sont utilisés exprès. Par exemple, les scripts CGI récupèrent des arguments en les délimitant avec '?' et '&'. Ces délimiteurs ne doivent pas être encodés. En revanche, les '&' qui sont du contenu doivent absolumment être encodés en "%26"
Notez par ailleurs, que les '&' utilisés dans le document HTML doivent être encodés en "&".
Pour récapituler, imaginons que vous souhaitez faire un lien vers un moteur de recherche avec "Black&Decker" comme thème et que vous voulez uniquement les réponses en français. La balise devrait ressembler à ça :
<A HREF="http://www.moteurderecherche.com/form.cgi?recherche=Black%26Decker&langage=fr">
Pour les détails techniques voir <URL:http://www.w3.org/Addressing/>
Pour des rajouts ou des oublis dans cette FAQ, merci de contacter <darin@htmlhelp.com> (en anglais) ou <cedrik.rousseau@insa-rouen.fr> (en français)
Toutes les informations ici présentes ont été compilées à l'origine par les membres du Web Design Group, principalement Arnoud "Galactus" Engelfriet, John Pozadzides, et Darin McGrew. La traduction hollandaise de cette FAQ a été réalisée par Rijk van Geijtenbeek, tandis que la traduction française à été faite par Cédrik Rousseau dans le cadre de l'UV traduction de FAQ du département ASI de l'INSA Rouen.
Des compléments ont été apportés par Boris Ammerlaan, Martin Atkins, Lori Atwater, Alex Bell, Stan Brown, Roger Carbol, Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Peter Evans, Alan Flavell, Rijk van Geijtenbeek, Lucie Gelinas, Bjoern Hoehrmann, Tina Marie Holmboe, Cliff Howard, Thomas Jespersen, Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien, Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl, Doug Sheppard, Sue Sims, Toby Speight, Warren Steel, Ian Storms, Peter Thomson, Daniel Tobias, and Diane Wilson.
Merci tout le monde
Home, Reference, FAQs, Tools, Design, Feature Article, BBS, Links
Copyright © 1996-1999. All rights reserved.