02- Les liens

Semaine 2

2. Les liens

 

2.1 La balise <a>

La balise <a> est une balise standard permettant la création d’un lien, soit dans une même page, nous parlons alors d’un lien interne (ancre), soit vers une autre page du même site, nous parlons alors de liens locaux, ou de liens qui conduisent ailleurs sur le Web, nous parlons de liens externes au site en question. Il existe un quatrième type de lien, nous parlons d’un lien d’application qui déclenchera un programme comme celui du courriel de l’utilisateur.

Tous les liens permettent donc une navigation; c’est-à-dire, qu’il y a un point de départ et un point d’arrivé atteint avec le déclenchement du lien. On placera ce lien dans la page de départ, avec une adresse qui permettra de rejoindre la destination au clic de la souris.

 

2.2 Les attributs (de base) de la balise <a>

  • href : Contient l’URL du document cible.
  • title : Pour ajouter une info-bulle.
  • id="texte", où texte représente le nom de l’ancre désignée par le lien.

 

2.3 Les types de liens

 

A) Le lien interne : l’ancre

Sachant qu’il exite quatre types de liens possibles, on doit se pencher sur l’établissement de l’adresse URL, logeant dans l’attribut href, afin de comprendre comment chacun de ces types de liens fonctionnent.

Le premier type de lien est l’ancre. Ce lien conduit quelque part au sein de la même page, vers une destination qui n’est pas le nom d’un autre fichier, mais bien d’une ancre préalablement déclarée quelque part ailleurs dans cette même page. Le symbole diaise (# ) identifie le type de lien ancre.

Exemple 01:

<a href="#sujet23">Texte de l’hyperlien vers l’ancre du paragraphe contenant le sujet 23</a>

 

…plus loin dans la page...

<a  id="sujet23"> </a>

 

Pour qu’un lien soit dirigé quelque part au sein d’une autre page, alors vous devez écrire le code de la façon suivante:

Exemple :

<a href="lien.html#sujet23">Texte</a>

 

Donc, écrire le nom de la page .html suivi d’un # et le nom de l’ancre.

 

B) Le lien local

Le deuxième type de lien, celui qui conduit vers une autre page d’un même site.

 

Exemple – Adresse vers une autre page 

<a href="page.html">MonSite</a>

 

Exemple – Adresse vers ancre d’une autre page 

<a href="page.html#ancre">MonSite</a>

C) Le lien externe

Exemple – Adresse de site complète

Voici le code html :
<a href="http://www.freedomscientific.com/" title="site externe du fabriquant">Jaws par exemple</a>

Voici le résultat :
Jaws par exemple

 

D) Le lien d’application

Le lien d’application cherchera le démarrage d’une application sur le système de l’utilisateur. Le plus fréquemment utilisé est le lien mailto:, permettant le démarrage du courriel de l’utilisateur

Exemple – Lien d’application de courriel

<a href="mailto:malegault@cegepoutaouais.qc.ca">Contacter moi</a>

En plus de l’ouverture de la messagerie avec le destinataire, on peut également contraindre l’objet du message en utilisant la chaîne de requêre (QueryString). vous devez séparer chaque éléments par le symbole (&) et commencer la requête par le symbole (?)

  • suject pour définir l’objet du message
  • cc pour envoyer le message en copie conforme
  • bcc pour envoyer le message en copie conforme invisible
  • body pour inscrire un début de texte dans le corps du message

 

1.6 Quelques règles d’écriture du HTML

 

  1. Écrire les noms de balise en bas de casse (minuscules).
  2. Écrire les noms d’attribut en bas de casse (minuscules).
  3. Refermer toute balise ouvrante avec une balise de fin.
  4. Terminer toute balise vide avec une barre oblique précédée d’une espace (<img /> et non <img>).
  5. Encadrer les valeurs d’attribut de guillemets droits.
  6. Expliciter les valeurs d’attribut (<input … checked= »checked » /> et non <input … checked>).
  7. Remplacer l’identificateur partiel NAME par ID.
  8. Assortir toute image d’un attribut ALT, même de valeur nulle.