 |
Liens hypertextes
Thème
Connaître les techniques d'établissement de liens hypertextes pointant vers une autre page HTML, voir à un endroit précis à l'intérieur d'une page. Usage d'URL de différents types (http, mailto, ftp, news, telnet...)
Pour la réalisation de "boutons", voir les exercices "Images inline et Boutons".
Balises
- Lien :
<a href="URL{#cible}" {title="description"} {target="name"} {accesskey="car."}>hypertexte</a>
- si le nom de la cible #cible est omis, le renvoi s'effectuera au début du document pointé par l'URL
- si l'URL est omis et qu'il n'y a qu'une cible #cible, il s'agit d'un lien intra-page (renvoyant quelque-part dans la page courante)
- l'attribut TITLE="description" fait apparaître (à partir de Mozilla 1, Netscape 6, IE 5) le texte descriptif spécifié relatif au lien sous forme de "tooltip" jaune lorsque le curseur survole le lien (mouseover)
- l'attribut TARGET="name" :
- target="name" ouvre la cible dans une fenêtre unique, nommée name.
- target="_blank" ouvre la cible dans une nouvelle fenêtre à chaque clic sur le lien, tout en conservant celle de base.
- Cible à l'intérieur d'une page (ancre, label) :
<a name="nom_cible"></a>
- Dans bloc <HEAD>...</HEAD> :
<base href="URL" {target="name"}>
Cette balise permet de spécifier l'URL de base pour tous les URLs-relatifs du document (spécifiés par des HREF= et SRC=).
En l'absence de cette balise, l'URL de base est celui de la page courante.
Exercice
Reprenez la page HTML créée lors du premier exercice et réalisez-y les compléments décrits ci-dessous :
| |
Etape |
Solution |
| 1 |
Ajoutez au début de la page (juste sous le titre de premier niveau "Jules Ducommun") une table des matières hypertexte de ce genre pointant vers des "cibles" que l'on mettra en place au point suivant de l'exercice :
- Mes coordonnées
- Mon curriculum vitae
- Mes hobbies
|
<ol>
<li><a href="#coord">Mes coordonnées</a></li>
<li><a href="#curric">Mon curriculum vitae</a></li>
<li><a href="#hobbies">Mes hobbies</a></li>
</ol>
|
| 2 |
Mettez en place les "cibles" (des liens créés au point précédent) juste avant les titres de chapitre,
puis testez que vos renvois hypertextes de table des matières fonctionnent
|
Juste avant <h2>Mes coordonnées</h2> placez :
<a name="coord">
Juste avant <h2>Mon curriculum vitae</h2> placez :
<a name="curric">
Juste avant <h2>Mes hobbies</h2> placez :
<a name="hobbies">
|
| 3 |
Ajoutez à votre page HTML le chapitre ci-dessous contenant des liens pointant vers des sites externes, puis testez que tous ces liens fonctionnent !
Mes sites préférés
|
<hr width="60%">
<h2>Mes sites préférés</h2>
<ul>
<li>Le site Webdo
<a href="http://www.webdo.ch">www.webdo.ch</a></li>
<li>Le serveur FTP anonyme mirroir de SWITCH
<a href="ftp://sunsite.cnlab-switch.ch/mirror">
ftp://sunsite.cnlab-switch.ch/mirror</a></li>
<li>La bibliothèque de l'ETHZ
<a href="telnet://ethics.ethz.ch">
telnet://ethics.ethz.ch</a></li>
</ul>
|
| 4 |
Puis modifiez votre pied de page comme ci-dessous de façon que si l'on clique sur votre nom cela génère automatiquement la rédaction d'un E-mail à votre attention avec le sujet "Feed-back Home-page" :
Jules Ducommun /
révision 2.5.99
|
<i>
<a href="mailto:Jules.Ducommun@epfl.ch?Subject=
Feed-back Home-page">Jules Ducommun</a> /
révision 2.5.99
</i>
|
|
|
[ 139933 ]
Vous êtes ici : 
0 Membre
Vous pouvez aider ce site à évoluer, en contribuant à son développement.
Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans 
