Programmation en HTML

   

chapitre 3

 

Le lien Hypertexte :

     
   


Ce qui est agréable sur le Web, c'est la possibilité de circuler entre les différentes pages.
cette circulation s'effectue à l'aide de liens hypertextes, contenus dans les documents eux-mêmes. Grâce à ces liens, la personne qui consulte des données n'a aucun besoin de connaître l'adresse d'un site Web, pas plus que les URL (Uniform Ressource Locator) des fichiers qu'il contient. Pour rendre leur présence explicite, les clients WEB (navigateurs) leur associent une couleur particulière et/ou une mise en forme telle que par exemple le soulignement.

Couleur des liens

La définition des couleurs des liens se fait en associant des attributs au marqueur <body> (que nous avons vu au chapitre 3, "La page HTML"). Les couleurs sont attribuées à l'aide de codes hexadécimaux.

  • text
      sert à définir la couleur du texte par défaut.
      Par exemple : <body text="#000000">
     
  • link
      sert à définir la couleur des liens.
      Par exemple : <body link="#0033FF">
     
  • vlink
      sert à définir la couleur des liens déjà visités.
      Par exemple : <body vlink="#A100A1">
     
  • alink

      sert à définir la couleur d'un lien en cours de sélection.
      Par exemple : <body alink="#FF0000">

Le tag <body> devient
<body text="#000000" link="#0033FF" vlink="#A100A1" alink="#FF0000">

Lien avec une page d'un autre site

Pour insérer un lien, il faut indiquer une référence (URL) et un élément, texte ou image, visible à l'écran sur lequel on doit cliquer pour y accéder. Voici un exemple de code pour obtenir un lien :

<a href="ex_page1.htm">une page toute simple</a>

Le lien apparaît alors en couleur contrastée et souligné dans le navigateur et donne: une page toute simple.

Les liens peuvent diriger le navigateur vers des sites HTTP, FTP, MAILTO... (vous pouvez en effet, lier un élément avec une boîte aux lettres, un transfert...). Pour créer un lien, il s'agit tout simplement de définir le type de document dans la commande A HREF comme dans l'exemple qui suit :

<a href="http://www.moreaux.nom.fr">Venez sur mon site</a>

Ce qui aura pour résultat :

Venez sur mon site

Remarquez que lorsque vous survolez avec votre souris le lien hypertexte, (la souris devient une main), vous pouvez lire sur la barre d'état (en bas de la fenêtre de votre navigateur) l'adresse du lien auquel il se réfère.

 

Lien avec une page sur le même site

Le code :
    <a href="page.html">Voici mon lien sur une autre page !!!</a>

donne tout simplement accès à une page HTML située au même niveau hiérarchique que la page actuellement ouverte sur le serveur (la page appelée se situe dans le même dossier que la page contenant le lien).

 
 Lien avec une page sur le même site, mais dans un autre dossier

Le code :

    <a href="dossier_b/page_n.html">Voici mon lien sur une page d'un autre dossier!!!</a>
donne accès à une page HTML située à un autre niveau hiérarchique que la page actuellement ouverte sur le même serveur (la page appelée se situe dans le dossier "b" ).
Liens sur une même page (les ancres ou sections)
    La commande a name enregistre une encre à l'intérieur d'un document HTML. On peut ensuite référer directement à ce point précis avec une commande a href. Dès que vous cliquerez sur le lien visant une ancre, le navigateur ira se positionner directement sur la ligne de texte où aura été placée l'encre. La commande peut se taper directement comme ceci :
<a name="nom_de_l_ancre"></a>

ce qui indique au navigateur où se trouve la section (l'ancre) visée. Pour se rendre à cet endroit, il faut taper la référence comme ceci : 

<a name="couleur"></a>

et le lien hypertexte

<a href="hypertexte.htm#couleur">Couleur des liens</a>
ou plus simplement
<a href="#couleur">Couleur des liens</a>

Pour essayer cette commande, cliquez sur le lien Couleur des liens et vous devriez vous rendre à la section concernée de cette page.




Les liens a name fonctionnent aussi d'un document HTML à un autre. Ainsi, après avoir identifié les sections d'un document avec <a name="generalites"></a>, il s'agit de taper la commande complète

<a href="caracteres.htm#generalites">Caractères(Généralités)</a>

Ainsi, le lien indique d'abord le nom du fichier HTML dans lequel il faut se rendre et ensuite le nom de la section à l'intérieur de ce fichier. Le nom du fichier et l'ancre sont séprarés par un dièse ( # ).

Exemple : " Caractères (Généralités) ".

 
Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia