HTML – Les liens
- HTML – Introduction à l’HTML
- HTML – Structure d’un document HTML
- HTML – Le texte
- HTML – Mise en forme sommaire du texte
- HTML – Les titres et sous-titres
- HTML – Les attributs
- HTML – Le texte préformaté
- HTML – Les commentaires
- HTML – Les entités de caractère
- HTML – Les liens
- HTML – Les images
- HTML – Les listes
- HTML – Tableaux
- HTML – Les cadres (FRAMES)
- HTML – Les formulaires
- HTML – Les méta-informations et le réferencement
- HTML – Formatage poussé du texte
- HTML – Les feuilles de style
- HTML – Les couleurs
- HTML – Les images réactives
- HTML – Le son
- HTML – Et le reste…
- HTML – Les objets
La principale technologie de la toile repose sur les liens. Un lien, c’est la parcelle du document
sur laquelle vous cliquez et qui vous mêne à un endroit bien précis. Lorque vous cliquez sur les
petites flêches en bas de cette page par exemple.
Un lien est constitué de la balise <A> de type conteneur :
<HTML>
<HEAD>
<TITLE>Les liens</TITLE>
</HEAD><BODY>
<A href= »http://www.cybwarrior.com/langages/images/bromelfe.jpg »>Cliquez-ici
pour voir le Warrior !</A>
</BODY>
</HTML>
Et voici l’affichage classique d’un lien, sans feuilles de style :
Cliquez-ici pour voir le Warrior !
Normalement, le lien est ouvert dans la même fenêtre. Ici, j’ai jugé utile de l’ouvrir dans une
nouvelle fenêtre.
Les attributs
href
Vous remarquez qu’on a utilisé l’attribut href. Cet attribut spécifie l’URL (Uniform
Resource Locator) du document à afficher. Ici, c’est une image. Mais on aurrait tout aussi
bien pu spécifier l’URL d’un fichier ZIP, d’une vidéo MPEG ou tout simplement d’un autre document
HTML.
target
L’attribut target (cible) sert à déterminer l’endroit où sera ouvert le document
précisé par l’URL. On s’en sert surtout dans un site composé de cadres, comme celui-ci. Vu que
les cadres n’ont pas encore été étudiés, nous ne rentrerons pas plus dans le détail.
Sachez seulement que cet attribut contient le nom de l’endroit où ouvrir le lien.
accesskey
accesskey permet d’associer une touche d’accés (un racourci clavier) à un lien. En théorie,
si le lecteur de la page appuie sur la touche spécifié, le lien s’ouvira. En pratique, seul Internet
Explorer semble le reconnaître. Et encore, il faut maintenir la touche ALT enfoncé pendant l’appui
sur la touche. Mais qui dit appui sur la touche ALT, dit activation de la barre de menu du navigateur!
Ce qui fait que si la touche normalement associée au lien figure comme mnémonique dans la barre,
le menu va s’ouvir à la place du lien.
Exemple :
<A href= »http://www.cybwarrior.com » accesskey= »I »>Appuyez sur ALT + I pour
vous placer sur ce lien</A>
Résultat (uniquement sous Internet Explorer) :
Appuyez sur ALT + I pour vous placer sur ce lien
tabindex
Cet attribut fixe l’ordre de défilement des liens lors de l’appui sur la touche TAB. En effet,
vous aurez certainement remarqué au cours de vos longs surfs que l’appui sur TAB permet de se
déplacer de liens en liens.
Si tabindex n’est pas spécifié, c’est l’ordre d’apparition qui est adopté.
Mais bon, la encore, seul Internet Explorer est capable d’utiliser cet attribut…
Voici tout de même un exemple :
<A href= »http://www.cybwarrior.com/langages/images/bromelfe.jpg » tabindex=2>Le
Guerrier (deuxième lien avec TAB)</A><BR>
<A href= »http://www.cybwarrior.com/langages/images/pirate.gif » tabindex=1>Le Pirate
(premier lien avec TAB)</A>
Et ici, un résultat :
Le Guerrier (deuxième lien avec TAB)
Le Pirate (premier lien avec TAB)
La syntaxe d’un lien
Il faut savoir qu’un lien est tout d’abord composé d’un protocole :
- http:// débute l’URL d’un document HTML, d’une image…
- mailto: permet d’ouvrir la messagerie du lecteur.
- ftp:// est utiliser pour accéder à un serveur de transfert de fichiers.
- file:/// sert à chercher un fichier sur sa propre machine, sans pour autant être
connecté à l’Internet. - news: permet d’accéder aux news de l’Usenet.
Ensuite, il faut faire la distinction entre les URL absolues ou relatives. Une URL absolue, c’est
lorsque vous indiquez la totalité de l’adresse du lien. Par exemple :
<A href= »http://www.cybwarrior.com/langages/images/bromelfe.jpg »>Cliquez-ici
pour voir le Warrior !</A>
Avec une URL relative, on donne l’adresse d’un lien présent sur le même disque que la page appelante.
En fait, on fait comme sous DOS. Imaginez que vous êtes dans le répertoire
C:\Program Files.Pour pouvoir lancer le jeu
Winmine.exe de cet emplacement, vous avez deux solutions :- Ecrire
C:\Windows\Winmine.exe(comparable à l’URL absolue) - Ecrire
..\Windows\Winmine.exe(comparable à l’URL relative)
Et bien c’est pareil. Les deux liens ci-dessous ont donc le même effet :
<A href= »http://www.cybwarrior.com/langages/images/pirate.gif »>Pirate absolu</A>
<A href= »langages/images/pirate.gif »>Pirate relatif</A>
En théorie, une URL absolu est beaucoup plus longue à se charger. On enploiera donc le plus possible
des URL relatives.
Une troisième et dernière syntaxe des liens concerne les liens dans la même page. Vous pouvez
trouver ce type de lien sur certaines de ces pages.
Un lien tel que celui-ci est composé de deux choses :
- Le lien qui va aller à la partie du document concernée.
- Le lien qui va marquer la partie du document.
Pour marquer une partie d’un document, on utilise la balise
<A> avec l’attribut name.Cette attribut va contenir le nom de la partie du document.
Maintenant, pour aller à cette partie du document, on utilise un lien tout ce qu’il y a de plus
classique. La seule différence se trouve dans l’URL. Pour faire comprendre au navigateur qu’il
ne s’agit pas d’un autre document mais d’un lien se trouvant dans la page, il faut faire précéder le
nom de la partie du document du caractère # (dièse).
Voici un exemple :
<A name= »Sommaire »>Sommaire</A><BR>
<BR>
<A href= »#Un »>Partie 1</A><BR>
<A href= »#Deux »>Partie 2</A><BR>
<A href= »#Trois »>Partie 3</A><BR>
<BR>
<BR>
<BR>
<A name= »Un »>Ceci est la partie 1 de ce document</A><BR>
<A name= »Deux »>Ceci est la partie 2 de ce document</A><BR>
<A name= »Trois »>Ceci est la partie 3 de ce document</A><BR>
<BR>
<A href= »#Sommaire »>Retour au sommaire</A>
Et voici le résultat :
Sommaire
Partie 1
Partie 2
Partie 3
Ceci est la partie 1 de ce document
Ceci est la partie 2 de ce document
Ceci est la partie 3 de ce document
Retour au sommaire
Mais on peut marquer un paragraphe avec autre chose que la balise
<A>. C’est la qu’intervientl’attribut commun id détaillé précedemment. Voici le code HTML qui a été employé pour le
titre de cette page que vous lisez :
<H2 id= »Titre »>Les liens</H2>
Et voici le code du lien ci-dessous :
<A href= »#Titre »>Aller en haut de la page</A>
Vous l’aurez compris, cliquer sur ce lien aurra pour effet de retourner en haut de cette page.
Aller en haut de la page
Categories: HTML
Français