Vous êtes sur la page 1sur 5

Exercices HTML

www.rahmouni.ma

Liens hypertextes
Thme
Connatre les techniques d'tablissement de liens hypertextes pointant vers une autre page HTML, voire un endroit prcis l'intrieur d'une page. Usage d'URL de diffrents types (http, mailto, ftp, news, telnet...) Pour la ralisation de "boutons", voir les exercices "Images inline" et "Boutons".

Balises

Lien : <A HREF="URL{#cible}" {TITLE="description"} {ACCESSKEY="car."} >hypertexte</A> o si le nom de la cible #cible est omis, le renvoi s'effectuera au dbut du document point par l'URL o 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) o l'attribut TITLE="description" fait apparatre ( partir de Mozilla 1, Netscape 6, IE 5) le texte descriptif spcifi relatif au lien sous forme de "tooltip" jaune lorsque le curseur survole le lien (mouseover) o l'attribut ACCESSKEY="car." permet d'activer le lien par le raccourci-clavier <alt-car.> (testez ces deux liens : lien1 (<alt-1>) et lien2 (<alt2>) ) Cible l'intrieur d'une page (ancre, label) : <A
NAME="nom_cible">

Dans bloc <HEAD>...</HEAD> : <BASE HREF="URL" {TARGET="target name"}> Cette balise permet de spcifier l'URL de base pour tous les URLs-relatifs du document (spcifis par des HREF= etSRC=). En l'absence de cette balise, l'URL de base est celui de la page courante.

Exercices HTML

www.rahmouni.ma

Exercice
Reprenez la page HTML cre lors du premier exercice et ralisezy les complments dcrits ci-dessous :
Etape Ajoutez au dbut de la page (juste sous le titre de premier niveau "Jules Ducommun") une table des matires hypertexte de ce genre pointant vers des "cibles" que l'on mettra en place au point suivant de l'exercice : 1. Mes coordonnes 2. Mon curriculum vitae 3. Mes hobbies

Mettez en place les "cibles" (des liens crs au point prcdent) juste avant les titres de chapitre, puis testez que vos renvois hypertextes de table des matires fonctionnent

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 prfrs 3

Le site Webdowww.webdo.ch Le serveur FTP anonyme mirroir de SWITCHftp://sunsite.cnlab-switch.ch/mirror La bibliothque de l'ETHZtelnet://ethics.ethz.ch

Exercices HTML

www.rahmouni.ma

Puis modifiez votre pied de page comme ci-dessous de faon que si l'on clique sur votre nom cela gnre 4 automatiquement la rdaction d'un E-mail votre attention avec le sujet "Feed-back Home-page" :

Exercices HTML

www.rahmouni.ma

Solution
Etape Ajoutez au dbut de la page (juste sous le titre de premier niveau "Jules Ducommun") une table des matires hypertexte de ce genre pointant vers des "cibles" que l'on mettra en 1 place au point suivant de l'exercice : 4. Mes coordonnes 5. Mon curriculum vitae 6. Mes hobbies Solution

<OL> <LI><A HREF="#coord">Mes coordonnes</A> <LI><A HREF="#curric">Mon curriculum vitae</A> <LI><A HREF="#hobbies">Mes hobbies</A> </OL>

Juste avant <H2>Mes Mettez en place les "cibles" (des coordonnes</H2> placez : liens crs au point prcdent) <A NAME="coord"> juste avant les titres de Juste avant <H2>Mon curriculum chapitre, vitae</H2> placez : 2 puis testez que vos renvois hypertextes de table des matires fonctionnent 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 prfrs 3
<A NAME="curric">

Juste avant <H2>Mes hobbies</H2> placez :


<A NAME="hobbies">

Le site Webdowww.webdo.ch Le serveur FTP anonyme mirroir de SWITCHftp://sunsite.cn lab-switch.ch/mirror La bibliothque de l'ETHZtelnet://ethics.et hz.ch

<HR WIDTH="60%"> <H2>Mes sites prfrs</H2> <UL> <LI>Le site Webdo <A HREF="http://www.webdo.ch">www.webdo.ch< /A> <LI>Le serveur FTP anonyme mirroir de SWITCH <A HREF="ftp://sunsite.cnlabswitch.ch/mirror"> ftp://sunsite.cnlabswitch.ch/mirror</A> <LI>La bibliothque de l'ETHZ <A HREF="telnet://ethics.ethz.ch"> telnet://ethics.ethz.ch</A> </UL>

<HR><I>

Exercices HTML
Puis modifiez votre pied de page comme ci-dessous de faon que si l'on clique sur votre nom cela gnre automatiquement la rdaction d'un E-mail votre attention avec le sujet "Feed-back Homepage" :

www.rahmouni.ma
<A HREF="mailto:Jules.Ducommun@epfl.ch?Subj ect= Feed-back Home-page">Jules Ducommun</A> / rvision 2.5.99 </I>