Comment ajouter des liens?

Le lien peut être un mot, une image ou un bouton.

• les liens absolus (adresse internet)
• les liens relatifs (chemin vers la cible).

• créer un lien vers une page web (lien relatif ou absolu)
• créer un lien vers une ancre
• modifier l'apparence du lien en CSS

Lien vers une page web

Passez la souris sur pour afficher le code correspondant au chemin pour aller du mot-lien vers la page-cible. Ce code doit être écrit dans la page de départ.
Attention, l'affichage ne fonctionne bien qu'avec Safari et Google Chrome.

<a href="dossier-jaune/nom de la page.html"> mot lien </a>

<a href="dossier-jaune/dossier-rouge/nom de la page.html"> mot lien </a>

<a href="dossier-jaune/nom de la page.html"> mot lien </a>   ou
<a href="dossier-jaune/nom de la page.html" target=_blank>L'ajout de "target=_blank" oblige le lien à s'ouvrir dans une nouvelle fenêtre. mot lien </a>

<a href="dossier-jaune/dossier-rouge/nom de la page.html"> mot lien </a>  ou
<a href="dossier-jaune/dossier-rouge/nom de la page.html" target=_blank> mot lien </a>

<a href="nom de la page.html"> mot lien </a>

<a href="../dossier-jaune/nom de la page.html"> mot lien </a>

Codes:

<a href="nom de la page.html"> mot lien </a>   ou
<a href="nom de la page.html" target=_blank> mot lien </a>

<a href="../dossier-jaune/nom de la page.html"> mot lien </a>   ou
<a href="../dossier-jaune/nom de la page.html" target=_blank> mot lien </a>

<a href="../../dossier-bleu1/nom de la page.html"> mot lien </a>

<a href="http://www.nom du site.com"> mot lien </a>

Codes:

<a href="../../dossier-bleu1/nom de la page.html"> mot lien </a>  ou
<a href="../../dossier-bleu1/nom de la page.html" target=_blank> mot lien </a>

<a href="http://www.nom du site.com"> mot lien </a>  ou
<a href="http://www.nom du site.com" target=_blank> mot lien </a>

<a href="../../dossier-jaune2/dossier-rouge2/nom de la page.html"> 
mot lien </a>

Code:

<a href="../../dossier-jaune2/dossier-rouge2/nom de la page.html"> mot lien </a>

<a href="../../dossier-jaune2/dossier-rouge2/nom de la page.html" target=_blank>mot lien </a>

Lien vers une ancre

Une ancre est un lien précis entre un mot (ou une image) et un autre mot (ou une autre image).
La cible (= l'ancre) peut être dans la même page ou dans une page placée dans un autre dossier.
Pour voir les codes différents, passez la souris sur .

Créer le lien:
<a href="../dossier_rouge/nom de la page.html#mon_ancre"> Aller vers l'ancre </a>

Créer l'ancre:id="mon_ancre"
<img src=".../...png" id="mon ancre"/>
ou <h1 id="mon_ancre"> titre </h1>
ou <span id="mon_ancre"> mot </span> 

Créer le lien:
<a href="#mon_ancre"> Aller vers l'ancre </a>
ou: <a href="nom de la page.html#mon_ancre"> Aller vers l'ancre </a>

Créer l'ancre: id="mon_ancre"
<img src=".../...png" id="mon ancre"/>
ou <h1 id="mon_ancre"> titre </h1>
ou <span id="mon_ancre"> mot </span>

Codes:
Créer l'ancre:

id="mon_ancre"
<img src=".../...png" id="mon ancre"/>
ou <h1 id="mon_ancre"> titre </h1>
ou <span id="mon_ancre"> mot </span>

<a href="#mon_ancre"> Aller vers l'ancre </a>
  ou: <a href="nom de la page.html#mon_ancre"> Aller vers l'ancre </a>
ou <a href="../dossier_rouge/nom de la page.html#mon_ancre"> Aller vers l'ancre </a>

Modifier l'apparence du mot-lien en CSS

Par défaut, les mots-lien sont en bleu soulignés. Il est possible de changer l'apparence du mot-lien dans la partie CSS (supprimer le soulignement ou modifier la couleur).