Inserer un lien html dans une page Web

Ajouter un lien html dans une page web

Pour inserer un lien html dans une page web en utilise la balise ancre
</a></a>

La balise </a> doit obligatoirement prendre deux attributs qui sont:
* l'attribut href qui donne l'adresse de la page sible
* l'attribut title qui donne le texte à afficher lors du survole de la sourie

Syntaxe de lien HTML

Le code HTML pour un lien est simple. Il ressemble à ceci :

<a href="url">Texte du lien</a>

L'attribut href spécifie la destination d'un lien html c'est à dire l'adresse de la page cible.

On distingue 2 types de liens html:

• 1 . Les liens internes à votre site : normalement, votre site comportera plusieurs pages HTML .
Si vous voulez faire un lien d'une page vers une autre c'est à dire un lien html qui lie deux pages de votre site, vous ferez ce qu'on appelle des liens relatifs.
Un lien relatif est assez court, par exemple: "page-essai2.html" ou "dossier/page-essai2.html".

• Les liens vers d'autres sites : ce sont par exemple des liens vers "http://www.site.com", ou vers une page précise (par exemple "http://www.site.com/page.html").
Ce sont des liens absolus et, contrairement aux liens relatifs, ils commencent par "http://".

Je vais maintenant vous demander de créer une page Web en utilisant les connaissances acquises dans les chapitres précédents.
Enregistrer cette page dans le dossier mon_site que nous avons créé dans le chapitre présédent sous la nom par exemple "essai2.html".
Maintenant vous avez 2 pages html qui se trouvent dans le même dossier sur votre disque dur :
c:\monsite\essai.html
c:\monsite\essai2.html

Les liens internes à son site

Vous voulez faire un lien html de la page essai.html (Source) vers la page essai2.html. (Cible)
evidement le code du lien sera écrit dans la page essai.html
4 cas possible pour écrire le code du lien html:

1. Lien html entre deux fichiers du même dossier

Les deux fichiers se trouvent dans le même dossier il suffira d'écrire dans href juste "essai2.html" !
Comme suit :

<a href="essai2.html" title="texte descriptif du lien"> texte du lien</a>

2. Lien html vers une page dans un sous dossier

Si votre fichier essai2.html se trouve dans un sous-dossier que je nomme ici dossier, par exemple :
c:\monsite\dossier\essai2.html
le lien html sera comme suit :

<a href="dossier/essai2.html" title="texte descriptif du lien"> texte du lien</a>

Il faudra écrire le nom du dossier d'abord "dossier/essai2.html". S'il y a plusieurs sous-dossiers, il suffit de les écrire à la suite :
"dossier1/dossier2/essai2.html"

3. lien vers une page dans un dossier parent

Si la page source se trouve dans un sous dossier et la page cible se trouve dans le dossier parent le lien html sera comme suit :

<a href="../essai2.html" title="texte descriptif du lien"> texte du lien</a>

4. Lien entre deux pages dans deux dossier

Si la page cible et la page source se trouvent chacune dans un dossier différents, le lien sera comme suit :

<a href="../dossier/essai2.html" title="texte descriptif du lien"> texte du lien</a>

ici le dossier est celui où se trouve la page cible

D’autre cas peuvent se présenter, mais si vous avez compris le principe des cas cités ci-dessus , il est facile de trouver comment faire le lien html

Lien vers une autre page :

Nous avons 2 pages : essai.html et essai2.html dans le même dossier monsite.
essai.html contient un lien vers essai2.html, et les 2 pages se trouvent dans le même dossier. Voici comment nous allons faire :
Code : HTML

Exemple :      Copier le code

<h1>essai.html</h1>	
<p>Nous somme ici sur essai.html<br />	
Nous Souhaitons visiter essai2.html <a href="essai2.html">le fichier essai2.html</a> ?
</p>

Vous mettez le texte du lien entre les balises <a> et </a>
et vous indiquez l'adresse de la page dans l'attribut href=""

Un lien vers une page d'un autre site :

Code : HTML

Exemple :      Copier le code

<p> Je connais un site super c'est :  	
<a href=" https://www.oujood.com">Site apprendre le HTML</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup  </p>

Code : HTML

Exemple :      Copier le code

	
<p> visitez cette page  	
<a href=" https://www.oujood.com.net/index.php">Des livres intéréssants</a><br />	
N'hésitez pas ça vaut <em>vraiment</em> le coup  	
</p>

Un lien pour envoyer un mail

Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous pouvez utiliser des liens "mailto".
Vous devez simplement modifier la valeur de l'attribut href comme ceci :
href="mailto:votrenom@hotmail.com"    par exemple.
Commencer le lien par "mailto:" puis écrire l'adresse e-mail où on peut vous contacter :

Code : HTML

Exemple :      Copier le code

<h2>Me contacter</h2>	
<p>Pour me contacter, <a href="mailto:carabd@hotmail.com">Envoyer un mail </a> !</p>

Un lien vers une ancre

Une ancre, c'est un point de repère que vous pouvez mettre dans vos grosses pages html.
Si votre page est très grande il peut être utile de faire un lien amenant plus bas ou plus haut dans la même page pour amener le visiteur directement à une partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère, n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre, ce qui va servir ensuite pour faire le lien vers cette ancre.
Par exemple :
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera vers le lieu oú est placé votre ancre dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).

Lien vers une ancre située dans une autre page

L'idée, c'est de faire un lien qui ouvre une autre page et qui amène directement à une ancre située plus bas sur cette page.
C'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.
Par exemple :

<a href="essai2.html#ancre">
Ce lien vous amènera sur la page essai2.html, directement au niveau de l'ancre appelé "ancre"</a>.

Par défaut, les liens s'affiche comme suit dans tous les navigateurs :
Un lien non visité est souligné et de couleur bleu
Un lien visité est soulignée et de couleur violet
Un lien actif est soulignée et de couleur rouge

chapitre précédent     chapitre suivant