Leçon #4 · Les Liens

  Il est très rare de trouver des pages Web sur Internet qui ne contiennent aucun lien. Ce genre de page serait peu vivante et ne permettrait aucune interaction avec le lecteur.

  Cette leçon est assez courte mais très importante, si on ne veux pas mettre tous les documents sur une même page.

4.1 -  Définition :   Un lien nous permet de cliquer sur une image ou sur une petite phrase, normalement d'une autre couleur, pour visiter un autre site, une autre page ou un autre paragraphe. Il y a deux genres de liens, externe et interne.

4.2 -  Démarrage :   Exécuter le logiciel "CODExpert" (Démarrer, Programmes, CODExpert Html et CODExpert 1.32). à l'invite dans la petite boîte, choisir "Nouveau document", puis avec l'aide du menu, choisir "Fichier" et puis "Nouveau". Maintenant il faut entrer le "Titre de la page :", taper "Liens de ...(Votre Nom)". (N.B. Plus tard quand vous aurez à redémarrer CODExpert, il faudra sélectionner "Ouvrir Document" et puis cliquer deux fois sur le fichier qui apparaîtra dans la petite fenêtre.)

4.3 -  Lien externe (Texte) :  Utilisons un lien vers Artisan2k pour un meilleur exemple. Il y deux façons de le faire, la première est la plus simple dont voici :  Artisan2k.  Si vous cliquez sur ce lien, vous serez dirigé vers la page principale de Artisan2k.

Format : <a href="url">Lien visible</a>
Exemple : <a href="http://www.artisan2k.com">Artisan2k</a>

4.4 -  Lien externe (IMG et Texte):  La deuxième façon comprend une image associée au texte. L'image est surtout utilisée pour amplifier la vision du lien.

  Voici ci-dessous le produit fini et les codes nécessaire pour accomplir la tâche. ATTENTION, si vous cliquez sur le bouton suivant, vous serez redirigé vers la page d'accueil.

On peut aussi y ajouter du texte

  Voici les codes utilisés pour l'exemple ci-haut, une fois cette exemple maîtrisée vous n'aurez aucun problème à créer les vôtres.

  <center>
  <font face="arial" size="1">
  <a href="http://www.artisan2k.com">
  <img src="images/artisan2k_88x31_a1.gif" border="0" width="75" height="35"
  alt="Logo de : Artisan2k.com - L'informatique sur Internet en francais.">
  <br> On peut aussi y ajouter du texte
  </a>
  </font>
  </center>

1. <center>
     Pour centrer le tout.

2. <font face="arial" size="1">
     Grandeur de la police pour le texte "On peut aussi y ajouter du texte" sous le bouton.

3. <a href="url">Lien visible au lecteur (un lien simple ou une image et un lien)</a>
   <a href="http://www.artisan2k.com"> <IMG ici si requise> <br> On peut aussi y ajouter du texte</a>

4. <img src="Chemin de l'image .gif ou .jpg" border="x" width="x" height="x" alt="Le commentaire qui sera visible quand le pointeur de la souris passera sur le bouton ou la bannière.">

• <img src="images/artisan2k_88x31_a1.gif"
• border="0"
• width="75"
• height="35"
• alt="Logo de : Artisan2k.com - L'informatique sur Internet en francais.">

5. </a>  Pour terminer le lien.
   <a href="url">Lien visible au lecteur</a>

6. </font="  Pour terminer la police du lien visible.
   <font face="arial" size="1">

7. </center>  Pour terminer le centrer.

* Notez que vous pouvez utiliser cet exemple à l'intérieur d'un tableau en y ajoutant les codes requis. Il y a des moments ou un tableau contenant plusieurs liens peut vous être très utile.

4.5 -  Lien interne :  L'information pour ce genre de lien peut parfois être difficile à trouver. Par contre, la méthode est simple et très intéressante à utiliser. La navigation à l'intérieur d'une longue page devient alors un jeu d'enfant.

  amusons-nous maintenant avec le petit menu suivant. Par exemple, si l'on clique sur le premier article "4.1 Définition" on se retrouve alors à la section "4.1" (souligné). D'ailleurs, c'est la première ligne de la page. Si l'on clique sur ce lien "4.1" on se retrouve au menu. allez-y, essayez les autres.

  Voici les codes utilisés pour ces liens internes.

• Débutons avec le premier paragraphe de la section "4.5". Notez que s'en est de même pour les autres sections.

<p><a name="45"></a><a href="#index"><b>4.5-</b></a><b> Lien interne :</b>  L'information pour ce genre de lien peut parfois être difficile à trouver. Par contre, la méthode est simple et très intéressante à utiliser. La navigation à l'intérieur d'une longue page devient alors un jeu d'enfant.</p> 

<a name="45"></a>  Voici tout simplement l'adresse du premier paragraphe de la section 4.5.

<a href="#index"><b>4.5 -</b></a>  Voici l'adresse de retour au menu.

• Voici l'adresse du menu. Cette adresse doit se trouver au début du menu.
  <a name="index">Menu</a>

• Ces prochains codes composent le menu à l'intérieur d'un tableau. Vous remarquerez que les liens contiennent tous des carrés "#". Cela fonctionne un peu comme un pointeur, quand on clique sur une sélection on pointe vers l'adresse désirée. Si l'on voit un lien sans carré, cela veut donc dire que c'est l'adresse de l'article

  <table border="3" align="center" width="170" cellspacing="0" cellpadding="0" bgcolor="#ffff00">
   <tr>
    <td>
     <a href="#41">4.1 Définition</a><br>
     <a href="#42">4.2 Démarrage</a><br>
     <a href="#43">4.3 Lien externe (Texte)</a><br>
     <a href="#44">4.4 Lien externe (IMG et Texte)</a><br>
     <a href="#45">4.5 Lien interne</a><br>
    </td>
   </tr>
  </table>
  

4.6 - Mailto : Maintenant je vous présente un autre genre de lien qui se doit d'être utilisé dans votre page Web, à moins que vous ne vouliez pas avoir de courriel de qui que ce soit. Voici donc un exemple ainsi que ses codes:

<center>
<p>
<a href="mailto:webmestre@artisan2k.com">Artisan2k.com 
<img src="images/courriel.gif" border="0" width="32" height="32"
alt="Cliquez ici pour faire parvenir votre courriel à Artisan2k.com. Merci.">
</a>
</p>
</center>

  Remarquez que le mailto: et l'adresse de courriel doivent être d'un bloc (sans espace). Pour ce qui en est de l'image associée au lien, voir la section 4.6.
  <a href="mailto:webmestre@artisan2k.com"</a>

4.7 - Voilà ! avec tous ces nouveaux outils dont vous disposez jusqu'à maintenant, vous êtes près pour l'ajout de liens à votre première Page Web. N'oubliez surtout pas de vous amusez quand vous travailler sur la construction de votre page Web. Ce n'est rien de difficile, il faut tout simplement pratiquer, pratiquer et pratiquer.

  Écrivez-moi un mot pour me donner vos commentaires sur ces premières leçons, ou si vous avez besoin d'aide supplémentaire.

4.8 -  Allons-y :  Maintenant que l'on sait comment créer des liens, passons à la  Leçon 5