Copyright © 2001-2007
Yves MARCOUX; dernière
modification de cette page: 2007-09-18.Cette création est mise à disposition sous un contrat Creative Commons
Copyright © 2001-2007
Yves MARCOUX; dernière
modification de cette page: 2007-09-18.
Cette création est mise
à disposition sous un
contrat Creative
Commons
Université de Montréal - EBSI - Yves MARCOUX
Forme générale d’un lien hypertextuel
Les Uniform Resource Locators (URL)
Description de chaque composant
La casse des lettres importe-t-elle?
Peut-on utiliser des lettres accentuées et d’autres caractères spéciaux dans un URL?
Pour des points d’arrivée précis: les ancres
Notes à propos du protocole file:
Autre usage des URL: images imbriquées
Une image dans un lien? Pourquoi pas, mais attention!
Les liens hypertextuels sont de l’essence même du langage HTML (HyperText Markup Language); en effet, deux lettres sur quatre de l’acronyme indiquent qu’il s’agit d’un langage de description d’hypertextes, lesquels se distinguent de textes ordinaires essentiellement par la présence de liens hypertextuels.
Le présent texte s’adresse à des lecteurs ayant déjà une certaine connaissance du langage HTML. Il faut savoir ce que sont une balise, un élément HTML, un attribut. Il faut également comprendre la structure hiérarchique de dossiers et de sous-dossiers des systèmes de fichiers courants (par exemple, celui des systèmes d’exploitation Windows) et savoir ce qu’est un « chemin d’accès ».
Le présent texte est rédigé en fonction des règles de codage spécifiques au langage XHTML 1.0 Strict. Avec quelques ajustements mineurs (essentiellement, la casse des lettres et la forme exacte des éléments vides), il peut cependant s’appliquer à toutes les versions du langage HTML.
Avant d’entrer dans le vif du sujet, un point terminologique. Faut-il parler de lien hypertexte, de lien hypertextuel, de lien hypermédia, ou encore simplement de lien? Pour nous, « lien hypertexte », « lien hypertextuel » et « lien hypermédia » sont synonymes. Nous préférons « lien hypertextuel » dans le présent texte, parce que le mécanisme des liens en HTML est surtout (bien que non exclusivement) pensé pour joindre entre eux des éléments d’information de nature textuelle (mots, phrases, paragraphes, etc.).
Dans le texte source d’un document (ou page, ou fichier) HTML, un lien hypertextuel a la forme générale suivante:
<a href="[identification du point d’arrivée du lien]">Texte cliquable</a>
Le contenu de l’élément <a> (ce qui est compris entre les balises <a href="..."> et </a>) correspond à la partie visible du lien, pour les utilisateurs
qui consultent le document à l’aide d’un navigateur Web, alors que
l’attribut href identifie la « destination » du lien dans
Internet.
Visuellement, dans un navigateur, l’exemple ci-dessus apparaît ainsi:
Notez que le point d’arrivée du lien (l’attribut href) n’affecte pas ce qui est visible par les utilisateurs dans un
navigateur. Ainsi, l’exemple ci-dessus apparaîtra toujours de la
même façon, peu importe ce que l’on met comme [identification du point d’arrivée du lien].
Un lien peut survenir dans le cours d’un texte, comme dans l’exemple suivant:
Je vous propose un lien: <a href="[identification du point d’arrivée du lien]">Cliquez ici</a>, si vous voulez le suivre.
Cet exemple apparaît dans un navigateur comme suit:
Je vous propose un lien: Cliquez ici, si vous voulez le suivre.
Lorsque, dans son navigateur, un utilisateur clique sur le
Texte cliquable d’un lien, le navigateur
« suit » ou « parcourt » le lien,
en amenant l’utilisateur à la destination, dans Internet, correspondant
à l’attribut href du lien (l’[identification du point d’arrivée du lien]).
Les exemples HTML donnés ci-dessus ne sont évidemment pas
utilisables directement tels quels; en effet, il faudrait d’abord remplacer la
chaîne « [identification du point d’arrivée du lien] » par l’identification valide d’une
« destination » dans Internet. Voici un exemple
pleinement fonctionnel:
Je vous propose un lien: <a href="http://www.w3.org">Cliquez ici</a>, si vous voulez le suivre.
Le lien dans cet exemple mène au site www.w3.org, du World Wide Web Consortium (W3C). Voici comment cet exemple
apparaît dans un navigateur (essayez le lien si vous voulez, puis cliquez
sur le bouton « Retour » de votre navigateur pour revenir
au présent texte):
Je vous propose un lien: Cliquez ici, si vous voulez le suivre.
Évidemment, il serait plus convivial pour les utilisateurs d’indentifier la destination du lien dans le texte cliquable:
Je vous propose un lien: <a href="http://www.w3.org">Le site du W3C</a>.
Cet extrait apparaît comme suit dans le navigateur:
Je vous propose un lien: Le site du W3C.
Notez qu’il n’est habituellement pas nécessaire, de nos jours, d’accompagner les liens hypertextuels d’une invitation à « Cliquer ici » ou à « Cliquer sur le lien »; en effet, les internautes sont aujourd’hui assez expérimentés pour reconnaître sans aide un lien hypertextuel et savent qu’ils doivent cliquer sur celui-ci pour le suivre.
Une « destination » Internet est en général une ressource d’information accessible sur Internet, ou encore un point précis à l’intérieur d’une ressource. Le dernier exemple donné ci-dessus identifie la page d’accueil d’un serveur comme destination. C’est un des cas les plus simples. Cependant, plusieurs autres types de destination existent.
L’identification des différentes destinations possibles dans Internet revêt actuellement une importance tellement grande (qui dépasse d’ailleurs le langage HTML), qu’elle possède son propre langage normalisé. C’est le langage des Uniform Resource Locators, ou URL. Ce langage permet d’attribuer à n’importe quelle destination dans Internet une identification, ou adresse, qui l’identifie sans équivoque. L’« URL d’une destination », c’est l’identification de cette destination dans le langage des URL.
Dans l’attribut href d’un lien HTML, c’est en fait par son URL que l’on identifie le point
d’arrivée, ou la destination, du lien. Ainsi, dans le dernier exemple
donné ci-dessus, http://www.w3.org est l’URL de la page d’accueil du serveur www.w3.org.
Le langage des URL dans sa forme complète est assez complexe et nous n’en voyons ci-après qu’un sous-ensemble, couvrant malgré tout les cas les plus courants. Notons au passage que le langage des URL est lui-même un sous-ensemble du langage plus général des Uniform Resource Identifiers, ou URI, qui est lui-même un sous-ensemble du langage des Internationalized Resource Identifiers, ou IRI. Pour plus de détails, le lecteur intéressé peut consulter le <http://www.w3.org/Addressing/> et le <http://www.ietf.org/rfc/rfc3987.txt>.
La forme générale des URL que nous couvrons dans le
présent texte est constituée de six composants,
présentés ci-après [entre crochets]:
[protocole:][//serveur][/][chemin/][fichier][#ancre]
Voici un exemple (fictif) d’URL et sa décomposition:
http://www.ebsi.org/blt6052/a2003/docstruc.html#ex3
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
/ |
[chemin/] |
blt6052/a2003/ |
[fichier] |
docstruc.html |
[#ancre] |
#ex3 |
Dans cet exemple, tous les composants sont présents, mais en réalité, ils peuvent tous être omis dans certaines circonstances. Nous verrons quelques-unes des règles qui régissent l’omission des différents composants.
N.B.: Cette section est plutôt aride. Si le lecteur le désire, il peut passer immédiatement à la section suivante puis aux exemples et ne consulter la présente section que comme référence.
Voici une description de chaque composant de notre forme générale d’URL:
[protocole:]Ce composant indique le protocole informatique qui doit être
utilisé pour accéder à la destination, suivi d’un
deux-points « : ». Pour les destinations sur le Web, le protocole est
habituellement http:, qui signifie HyperText Transfer Protocol. Dans un lien
hypertextuel en HTML, si ce composant est omis, le navigateur utilise le
protocole qu’il vient d’utiliser pour accéder au fichier HTML contenant
le lien (donc, habituellement, http:).
Voici quelques protocoles parmi les plus courants:
http: |
HyperText Transfer Protocol |
https: |
HTTP sécure |
ftp: |
File Transfer Protocol; permet de communiquer avec un serveur FTP |
gopher: |
Permet de communiquer avec un serveur Gopher |
file: |
Permet d’accéder à un fichier sur l’ordinateur local (celui sur lequel tourne le navigateur Web utilisé) |
mailto: |
Permet d’envoyer un courriel (exemple: mailto:adresse.courriel@service.com) |
telnet: |
Permet d’établir une session de travail interactif avec un serveur acceptant les connexions Telnet |
La valeur du composant [protocole:] affecte la forme générale admissible pour le reste de
l’URL. Les règles que nous présentons ci-après ne sont
valables que pour les protocoles http:, https: et ftp:.
[//serveur]Ce composant donne l’adresse Internet (symbolique ou
numérique) du serveur contenant la destination,
précédée de deux barres obliques. Pour une adresse
symbolique, ce composant aura le plus souvent la forme //machine.domaine.suffixe, par exemple //www.umontreal.ca. Pour une adresse numérique, il aura une forme du genre //132.204.2.154.
Un deux-points suivi d’un « numéro de
port » suit parfois l’adresse proprement dite du serveur. Exemple: //www.umontreal.ca:8080. Un numéro de port permet de rejoindre un logiciel
spécifique sur le serveur (typiquement, une version test d’un serveur
Web).
Dans un lien hypertextuel en HTML, si le composant [//serveur] est omis, le navigateur utilise l’adresse du serveur (et, le cas
échéant, le numéro de port) qu’il vient de contacter pour
accéder au fichier HTML contenant le lien.
[/]Ce composant, lorsque présent, est constitué d’un seul
caractère: la barre oblique simple « / ». Ce composant est obligatoire si l’URL comporte un
composant [//serveur]; cependant, les URL de la forme [protocole:][//serveur] sont aussi acceptables, par exemple http://www.w3.org.
Les URL dans lesquels le composant [/] est présent, de même que les URL de la forme [protocole:][//serveur] (ex.: http://www.w3.org), sont qualifiés d’absolus. Tous les autres URL sont
dits relatifs.
[chemin/]Ce composant (ou son absence) identifie le dossier contenant la
destination. Lorsque présent, il contient un chemin d’accès
relatif, suivi d’une barre oblique simple « / ». Ce chemin d’accès doit être
interprété relativement à un « dossier de
référence », dont l’identité varie selon que
l’URL est absolu ou relatif (voir la description du composant [/]). Pour un URL absolu, le « dossier de
référence » est le dossier racine du serveur
identifié par le composant [//serveur] (ou par son absence); pour un URL relatif, situé dans un lien
hypertextuel en HTML, le « dossier de
référence » est le dossier d’où a
été récupéré le fichier HTML contenant le
lien.
Notons que le dossier racine d’un serveur Web est défini par
les gestionnaires du serveur lors de son installation et n’est pas
nécessairement la racine du système de fichiers de l’ordinateur
sur lequel tourne le serveur. Dans nos exemples ci-après, nous
référerons à ce dossier racine avec la notation (racine).
Le composant [chemin/] peut contenir un chemin hiérarchique à plus d’un niveau;
dans ce cas, les branches successives du chemin sont séparées par
une barre oblique simple « / ». Par exemple: rapports/ontario/2001/mars/. Notons que la barre oblique simple joue ici un rôle similaire
à la barre oblique inverse « \ » utilisée dans les chemins d’accès sur les
systèmes d’exploitation Windows. C’est cependant bel et bien la barre
oblique simple « / » qui doit être utilisée dans un URL, et ce,
même si le serveur sur lequel se situe la ressource identifiée par
l’URL tourne sous un système d’exploitation Windows.
Comme d’habitude dans les chemins d’accès, la pseudo-branche
« .. » signifie « remonter d’un niveau dans la
hiérarchie des dossiers ». Par exemple, en supposant que le
dossier de référence soit (racine)/rapports/ontario/, alors le chemin ../quebec/2002/ désignera le dossier (racine)/rapports/quebec/2002/. D’autres exemples seront donnés plus loin.
Si le composant [fichier] est omis, alors la barre oblique finale du chemin peut être
omise; ex.: http://w3.org/standards/REC.
Si l’URL est absolu et que le composant [chemin/] est omis, alors la destination est située dans le dossier racine
du serveur identifié par le composant [//serveur] (ou par son absence).
Si, dans un lien hypertextuel en HTML, l’URL est relatif et que le
composant [chemin/] en est omis, alors la destination est située dans le dossier
d’où a été récupéré le fichier HTML
contenant le lien.
[fichier]Ce composant donne le nom de fichier de la destination, y compris
son extension, à l’intérieur du dossier identifié par le
composant [chemin/] (ou par son absence).
Exemples: rapport.html, article.htm, projet.pdf.
Lorsque ce composant est omis, le serveur utilisera comme nom de
fichier le nom par défaut défini par les gestionnaires du serveur
lors de son installation. Ce nom de fichier par défaut est souvent (mais
pas toujours) index.html, index.htm, defaut.html, defaut.htm, default.html, ou default.htm.
Le fichier dont le nom correspond au nom de fichier par défaut est implicitement considéré comme la « page d’accueil » d’un dossier. Dans le dossier racine d’un serveur, ce fichier est implicitement considéré comme la page d’accueil du serveur.
[#ancre]Dans le cas où la destination identifiée par les
autres composants de l’URL est un fichier HTML, il est possible d’utiliser le
composant [#ancre] pour identifier un point d’arrivée précis à
l’intérieur du fichier. Ce point d’arrivée doit cependant avoir
été marqué explicitement dans le fichier par son auteur.
Nous reviendrons sur cette possibilité un peu plus loin.
Dans la boîte « Adresse » d’un navigateur
Web, on ne peut taper que des URL absolus. Cependant, dans un lien hypertextuel
en HTML, l’attribut href peut contenir tant un URL relatif qu’un URL absolu. Dans le premier
cas, on parle d’un lien relatif et, dans le second cas, d’un lien absolu.
Les liens relatifs sont intéressants parce qu’ils permettent de construire des sites Web « relocalisables », c’est-à-dire que l’on peut changer de serveur ou de dossier sans avoir à modifier les fichiers-sources HTML. En effet, il suffit de déplacer en bloc l’ensemble des dossiers et fichiers d’un site pour que l’intégrité des liens relatifs entre les fichiers soit préservée.
Pour les fins des exemples ci-dessous, supposons que la structure
hiérarchique des dossiers sur un serveur Web (fictif) appelé www.ebsi.org soit comme suit:
Supposons de plus que les fichiers contenus des différents dossiers soient comme suit:
- Dossier (racine):
- index.html
- Dossier (racine)/articles/:
- index.html
- landry.htm
- picard.html
- Dossier (racine)/rapports/2001/:
- gagnon.htm
- index.html
- Dossier (racine)/rapports/2002/:
- index.html
- landry.pdf
Supposons finalement que le serveur ait été
configuré, à l’installation, avec index.html comme nom de fichier par défaut.
La première série d’exemples présente des URL absolus, que l’on pourrait taper dans la boîte « Adresse » d’un navigateur Web. Le but est de trouver à quel fichier réfère chaque URL.
http://www.ebsi.org
Identifions d’abord les composants de l’URL et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
(absent) |
[chemin/] |
(absent) |
[fichier] |
(absent) |
[#ancre] |
(absent) |
Comme les composants [/], [chemin/] et [fichier] sont tous absents, c’est au fichier index.html (le nom de fichier par défaut) du dossier racine du serveur que
l’URL réfère (autrement dit, la page d’accueil du
serveur).
http://www.ebsi.org/index.html
Identifions d’abord les composants de l’URL et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
/ |
[chemin/] |
(absent) |
[fichier] |
index.html |
[#ancre] |
(absent) |
Comme dans l’exemple précédent, c’est au fichier index.html du dossier racine du serveur que l’URL réfère.
http://www.ebsi.org/rapports/2001/gagnon.htm
Identifions d’abord les composants de l’URL et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
/ |
[chemin/] |
rapports/2001/ |
[fichier] |
gagnon.htm |
[#ancre] |
(absent) |
C’est cette fois au fichier gagnon.htm du dossier (racine)/rapports/2001/ que l’URL réfère.
La deuxième série d’exemples présente des liens absolus. Le but est d’identifier la destination de chaque lien.
<a href="http://www.ebsi.org/articles/picard.html">...</a>
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
/ |
[chemin/] |
articles/ |
[fichier] |
picard.html |
[#ancre] |
(absent) |
C’est donc le fichier picard.html du dossier (racine)/articles/ qui est la destination du lien.
<a href="http://www.ebsi.org/articles">...</a>
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
/ |
[chemin/] |
articles |
[fichier] |
(absent) |
[#ancre] |
(absent) |
Notons ici que la barre oblique finale du composant [chemin/] est omise, ce qui est possible puisque le composant [fichier] est omis. C’est donc le fichier index.html du dossier (racine)/articles/ qui est la destination du lien.
<a href="/rapports/2001/">...</a>, situé dans n’importe quel fichier HTML sur le serveur www.ebsi.org
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
(absent) |
[//serveur] |
(absent) |
[/] |
/ |
[chemin/] |
rapports/2001/ |
[fichier] |
(absent) |
[#ancre] |
(absent) |
Cet exemple illustre le cas d’un URL absolu dans lequel le composant
[//serveur] est omis. L’URL est bien absolu, puisque le composant [/] est présent.
Comme le composant [protocole:] est absent, la destination sera récupérée en
utilisant le même protocole que celui ayant été
utilisé pour récupérer le fichier HTML contenant le lien.
En ce qui nous concerne, ce pourrait être le protocole http:, https: ou ftp:.
Comme le composant [//serveur] est lui aussi omis, la destination sera récupérée
du même serveur que celui d’où le fichier HTML contenant le lien a
été récupéré, c’est-à-dire, par
hypothèse, le serveur www.ebsi.org.
Comme l’URL est absolu, c’est le dossier racine du serveur qui sera
utilisé comme dossier de référence pour interpréter
le chemin rapports/2001/.
Comme le composant [fichier] est omis, c’est le nom de fichier par défaut du serveur qui sera
utilisé, c’est-à-dire, par hypothèse, index.html.
La destination du lien est donc le fichier index.html du dossier (racine)/rapports/2001/ sur le serveur www.ebsi.org.
La troisième série d’exemples présente des liens relatifs. Le but est encore ici d’identifier la destination de chaque lien. Comme un lien relatif est interprété en fonction de l’emplacement du fichier qui le contient, il nous faut ici non seulement donner le texte source du lien, mais également préciser dans quel fichier HTML il est situé.
<a href="landry.pdf">...</a>, situé dans le fichier (racine)/rapports/2002/index.html
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
(absent) |
[//serveur] |
(absent) |
[/] |
(absent) |
[chemin/] |
(absent) |
[fichier] |
landry.pdf |
[#ancre] |
(absent) |
C’est le fichier landry.pdf du dossier (racine)/rapports/2002/ (le dossier du fichier contenant le lien) qui est la destination du
lien.
<a href="../2001/">...</a>, situé dans le fichier (racine)/rapports/2002/index.html
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
(absent) |
[//serveur] |
(absent) |
[/] |
(absent) |
[chemin/] |
../2001/ |
[fichier] |
(absent) |
[#ancre] |
(absent) |
C’est le fichier index.html (le nom de fichier par défaut) du dossier (racine)/rapports/2001/ qui est la destination du lien. En effet, la pseudo-branche .. nous fait remonter d’un niveau par rapport au dossier (racine)/rapports/2002/ (donc, nous amène à (racine)/rapports/) puis nous redescendons par la branche 2001.
<a href="articles/landry.htm">...</a>, situé dans le fichier index.html du dossier racine
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
(absent) |
[//serveur] |
(absent) |
[/] |
(absent) |
[chemin/] |
articles/ |
[fichier] |
landry.htm |
[#ancre] |
(absent) |
C’est le fichier landry.htm du dossier (racine)/articles/ qui est la destination du lien.
En général, la casse des lettres (le fait qu’elles soient
majuscules ou minuscules) n’importe pas dans un URL. Cependant, lorsqu’une
destination réside sur un serveur tournant sous un système
d’exploitation de la famille Unix, alors la casse des lettres est significative
dans les composants [chemin/] et [fichier] de l’URL utilisée pour l’identifier.
Si on ne sait pas sous quel système d’exploitation un serveur
tourne, alors il vaut mieux respecter la casse des lettres en écrivant
ou transcrivant les URL qui pointent à ce serveur (au moins les
composants [chemin/] et [fichier]).
Rigoureusement parlant, non. Il existe certaines conventions permettant de « coder » des caractères spéciaux dans un URL, mais ce sujet dépasse la portée du présent texte.
Une règle simple et qui fonctionne est d’éviter d’utiliser des lettres avec signes diacritiques et des caractères spéciaux dans le nom des dossiers et de fichiers que l’on compte publier sur le Web.
Lorsque l’on crée un fichier HTML, il est possible de le
préparer de telle sorte que les liens hypertextuels qui pointent vers
lui puissent désigner un point d’arrivée précis à
l’intérieur du fichier, et non seulement le début du fichier. En
fait, n’importe quel élément HTML dans le fichier peut servir de
point d’arrivée de liens hypertextuels; il suffit de placer dans sa
balise de début un attribut id, dont la valeur permettra d’identifier l’élément comme
point d’arrivée d’un lien.
Par exemple, supposons qu’on veuille faire un lien directement vers la bibliographie d’un article écrit en HTML. Supposons que la bibliographie débute ainsi:
<h2>Bibliographie</h2>
Il suffit d’ajouter dans la balise de début <h2> un attribut id, auquel on donne comme valeur un identifiant quelconque (mais unique
à l’intérieur du document), par exemple:
<h2 id="bib">Bibliographie</h2>
Une fois cet ajout fait et le fichier sauvergardé, n’importe quel
URL pointant vers ce fichier peut être modifié pour pointer
directement vers l’élément identifié "bib", en ajoutant au bout de l’URL un composant [#ancre], lequel a toujours la forme:
#identifiant
soit, dans notre cas:
#bib
Ainsi, si le fichier est atteignable par l’URL (relatif) article.htm, alors l’URL:
article.htm#bib
pointera maintenant à l’élément identifié "bib" à l’intérieur du fichier.
Le lien suivant contient un URL avec ancre:
<a href="http://www.ebsi.org/articles/picard.html#bib">...</a>
On suppose que le fichier (racine)/articles/picard.html contient quelque-part un élément identifié par
l’attribut id="bib".
Identifions d’abord les composants de l’URL contenu dans l’attribut href du lien et leur valeur:
| Composant | Valeur |
|---|---|
[protocole:] |
http: |
[//serveur] |
//www.ebsi.org |
[/] |
/ |
[chemin/] |
articles/ |
[fichier] |
picard.html |
[#ancre] |
#bib |
C’est l’élément HTML indentifié "bib" dans le fichier picard.html du dossier (racine)/articles/ qui est la destination du lien.
Un cas particulier de lien avec ancre est celui où le composant [#ancre] est le seul présent dans l’URL. Un tel lien (forcément
relatif) s’appelle un lien interne et réfère à un
élément identifié à l’intérieur du
même fichier.
Par exemple, supposons que le fichier (racine)/articles/picard.html contient quelque-part l’élément suivant:
<h2 id="bib">Bibliographie</h2>
Alors, le lien suivant:
<a href="#bib">...</a>
où qu’il soit à l’intérieur du fichier (racine)/articles/picard.html, pointera à l’élément identifié "bib" dans ce même fichier.
file:Tel que mentionné précédemment, la forme d’URL
présentée dans le présent texte n’inclut pas le protocole file:. Cependant, il est utile de connaître certaines
possibilités de ce protocole.
Il est possible d’ouvrir un fichier HTML du poste de travail local dans
un navigateur Web en utilisant le protocole file: dans la boîte « Adresse » du navigateur. La
forme générale est:
file:[chemin-d’accès-local]
par exemple:
file:C:\Tempo\fichier.html
En fait, avec la plupart des navigateurs, on peut même omettre le
protocole (file:), et simplement taper un chemin d’accès local dans la
boîte « Adresse ». Le fait de doubler-cliquer sur
un fichier HTML local dans l’explorateur Windows ou le poste de travail a le
même effet que de l’ouvrir avec le protocole file: dans la boîte « Adresse » du
navigateur.
L’intérêt d’ouvrir un fichier HTML local dans le navigateur
est double: d’abord, cela permet de visualiser le fichier tel qu’il se
présente dans un navigateur, ensuite cela permet de vérifier les
liens relatifs (avec ou sans ancre) contenus dans le fichier. En effet, le
protocole file: est ainsi fait que les liens relatifs se résolvent
correctement.
Important: La publication de tout type de contenu sur le Web soulève des questions de droit d’auteur. Ceci est particulièrement vrai des images. Il incombe au créateur et au gestionnaire d’un site d’être au fait de ces questions. Le présent texte ne touche pas ces questions. Le lecteur devra consulter d’autres ressources pour connaître toutes les règles applicables à la publication de contenu sur le Web (par exemple, le <http://www.utsystem.edu/OGC/intellectualproperty/image.htm> et le <http://marcoux.ebsi.umontreal.ca/enseign/6052/images.htm>).
En plus de servir pour les liens hypertextuels, les URL ont plusieurs autres usages en HTML. L’un d’eux est l’imbrication d’images dans une page Web.
Les images sont des fichiers séparés des fichiers HTML. Il
s’agit de fichiers dans un des formats d’images courants, par exemple GIF, JPEG
ou PNG. Pour imbriquer une image dans une page HTML, il suffit
d’insérer, à l’endroit où on désire que l’image
apparaisse, un élément (vide) <img /> avec un attribut src donnant l’URL de l’image à inclure. (La balise <img /> est une balise auto-fermante; elle n’a pas
besoin de balise de fin correspondante.)
Ainsi, par exemple, le fragment de texte source HTML suivant
entraînera l’inclusion de l’image cola.jpg (située dans le même dossier que le fichier HTML):
<img src="cola.jpg" />
Cet exemple fonctionne avec la plupart des navigateurs, mais il n’est
pas valide selon le XHTML 1.0 Strict. En effet, ce langage exige
que l’on donne à l’élément <img /> un autre attribut, alt, dont la valeur doit être un court texte descriptif de l’image,
qui apparaîtra en infobulle à la navigation et sera
apprécié par les internautes naviguant en mode texte. Ainsi,
l’exemple précédent, pour être valide, pourrait être
comme suit:
<img src="cola.jpg" alt="Photo de mon koala" />
Il est possible d’inclure une image imbriquée dans le texte d’un
lien (c’est-à-dire entre les balises <a href="..."> et </a>). Résultat? L’image imbriquée devient cliquable, tout
comme le reste du texte, s’il y en a.
Exemple:
<a href="http://www.koalas.org/"><img src="cola.jpg" alt="Photo de mon koala" /></a>
Cet exemple donne le résultat suivant en navigateur:
Comme une image cliquable est difficile à distinguer d’une image normale en navigateur, il est important d’utiliser une image qui incite l’utilisateur à cliquer, ou encore d’accompagner l’image d’un texte invitant directement ou indirectement l’internaute à cliquer.
Ainsi, l’exemple précédent gagnerait probablement à être reformulé en quelque chose comme:
Cliquez sur l’image pour en savoir plus sur les koalas:
Certaines images (en général, de format GIF ou PNG) se présentent comme des « icônes » ou des « boutons », que les internautes identifient facilement comme des éléments cliquables. De telles images constituent en elles-mêmes des incitations à cliquer, et n’ont donc pas à faire l’objet d’une invitation textuelle séparée. L’image suivante en est un exemple; elle évoque l’idée d’une page d’accueil (en anglais, home page):
L’emplacement d’une image joue également un rôle dans le fait d’être reconnaissable comme cliquable sans plus ample invitation. Ainsi, l’image précédente, localisée dans le bas d’une page Web, sera beaucoup plus facilement identifiée comme cliquable qu’au beau milieu d’une page, comme ci-dessus.
Le choix et l’usage judicieux des images dans une page Web n’est qu’un des facteurs qui influencent son utilisabilité (la facilité avec laquelle on réussit à bien utiliser la page). L’ergonomie est la discipline qui s’intéresse (entre autres) aux liens entre les aspects visuels d’une page Web et son utilisabilité. La conception professionnelle ou à grande échelle de pages Web devrait toujours s’accompagner d’une préoccupation ergonomique.
Il existe de nombreuses ressources d’information sur l’ergonomie des pages Web (dont quelques-unes sont répertoriées au <https://www.ebsi.umontreal.ca/ressources-services/ressources-pedagogiques/sites-exploration-internet/#guide>; nous conseillons en particulier les textes de Jakob Nielsen). Notre but dans le présent texte n’était que de mentionner l’existence de cette discipline.
