Inserer un lien hypertexte (Links) dans une page Web

Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer :
* vers un autre endroit du document
* vers un fichier HTML situé à un emplacement différent sur le serveur qui héberge la page ou sur un autr serveur

Somaire

Créer des liens dans une page web

HTML & CSS

On distingue 2 types de liens :

• Les liens internes à votre site : normalement, votre site comportera plusieurs pages HTML .
Si vous voulez faire un lien d'une page à une autre c'est à dire un lien 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-cible.html" ou "dossier/page-cible.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 de tout à l'heur sous le nom "essai2.html".
Maintenant vous avez 2 pages XHTML 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 de essai.html (Source) vers essai2.html. (Cible)
C'est simple, comme les fichiers se trouvent dans le même dossier il suffira d'écrire juste "cible.html" !
Si votre fichier cible.html se trouve dans un sous-dossier que je nomme ici dossier, par exemple :
c:\monsite\dossier\cible.html
Il faudra écrire le nom du dossier d'abord "dossier/cible.html". S'il y a plusieurs sous-dossiers, il suffit de les écrire à la suite :
"dossier1/dossier2/cible.html"

Lien vers une autre page :

Nous avons 2 pages : source.html et cible.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

					
	<h1>source.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=""

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 c'est à dire l'adresse de la page cible.

Un lien vers un autre Site :

Code : HTML

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

Un lien vers une page d'un autre site :

Code : HTML

						
	<p> visitez cette page  	
	<a href=" http://apprendre-creer-sites.net/livre.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

					
	<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 XHTML.
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="cible.html#ancre">

Ce lien vous amènera sur la page cible.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

Par carabde 10 mars 2014

chapitre précédent chapitre suivant