Les Liens Et Ancres

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Les Liens Et Ancres

Temps d'étude : 30 min.

Niveau : Facile.

Tags : Les Liens Et Ancres

Fichier(s) utile(s) pour ce cours : /

Les liens de navigation

Ce qui fait la richesse du web, c'est aussi les liens que l'on peut y trouver, on peut se promener de page en page ou de site en site très facilement avec les liens hypertext !

Nous allons créer deux nouveaux fichiers : lien1.html et lien2.css
Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/lien1.html et /HtmlCss/09-Lien/lien2.html

Voici le contenu de lien1.html :

lien1.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page 1</title>
				<link rel="stylesheet" href="lien1.css">
			</head>
			<body>
			
				<h1>Voici la page n°1</h1>
				<a href="lien2.html"> cliquez ici pour vous rendre sur la page 2 </a><br><!-- lien vers une page intérieur -->
				<a href="http://www.tf1.fr/news" title="Se rendre sur le site">TF1 actualités</a> le site officiel de TF1 <br> <!-- lien vers une page extérieur et title permet d'obtenir une description -->
				<a href="http://www.google.com/" target="_blank">Google</a> le célébre moteur de recherche<br> <!-- target="_blank" pour ouverture dans un nouvel onglet -->
				<a href="cv.doc"> Télécharger mon CV </a><br> <!-- pour le téléchargement de document -->
				<a href="cv.pdf"> Voir mon CV </a><br> <!-- pour l'ouverture d'un fichier pdf -->
				<a href="http://www.lepoint.fr/"><img src="image.png"></a><br> <!-- Lien sur une image -->
				<a href="" onClick="window.print()">Imprimer la page</a>
				
			</body>
		</html>

Décryptons le code Html du fichier lien1.html.

La balise a permet de créer un lien hypertext et l'attribut href permet de définir la destination du lien.

Comment faire un lien ?

<a href="lien2.html"> cliquez ici pour vous rendre sur la page 2 </a>

Ce lien permet de vous emmener sur le fichier qui se nomme lien2.html (attention, l'orthographe doit être bonne et les deux fichiers doivent se trouver dans le même dossier).

<a href="http://www.tf1.fr/news" title="Se rendre sur le site">TF1 actualités</a> le site officiel de TF1

Ce lien permet de vous emmener sur le site de TF1 et vous verrez apparaitre une info bulle (title) lors du survol sur le lien avec votre souris.

Un lien ouvrant un nouvel onglet

<a href="http://www.google.com/" target="_blank">Google</a> le célébre moteur de recherche

Ce lien permet de vous emmener sur le site de Google sans vous faire quitter la page en cours. La page de destination s'ouvrira dans un nouvel onglet (target=_blank). Si vous faites pointer des liens vers des sites éxtérieurs sur votre propre site, l'utilisation de cet attribut est pratique pour ne pas perdre votre trafic (les visiteurs ne perdront pas la navigation de votre site en cliquant dessus).

Un lien proposant un téléchargement

<a href="cv.doc"> Télécharger mon CV </a>

Ce lien permet de proposer le téléchargement d'un fichier (à condition de créer le fichier cv.doc et de l'enregistrer dans le même dossier).

<a href="cv.pdf"> Voir mon CV </a>

Ce lien ouvre un document PDF directement dans la page web (à condition de créer le fichier cv.pdf et de l'enregistrer dans le même dossier).

<a href="cv.pdf" download> Télécharger mon CV </a>

L'attribut donwload introduit directement à l'intérieur du lien <a> permet de proposer le téléchargement afin que le fichier soit enregistrer par l'internaute.

Un lien sur une image

<a href="http://www.lepoint.fr/"><img src="image.png"></a>

Ce lien ouvre permet de naviguer ailleurs en cliquant sur une image (et non pas du texte).

Un lien pour imprimer la page

<a href="" onClick="window.print()">Imprimer la page</a>

Ce lien permet de proposer l'impression de la page.

Exercice : Créer un lien retour

Objectif de l'exercice : essayer de faire un lien retour de la page lien2.html vers la page lien1.html !

Correction :
Voici le contenu de lien2.html :

lien2.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Ma Page 1</title>
				<link rel="stylesheet" href="lien2.css">
			</head>
			<body>
			
				<a href="lien1.html"> cliquez ici pour vous rendre sur la page 1 </a>
				
			</body>
		</html>

Le Résultat

Les Ancres

En plus des liens permettant la navigation d'une page web vers une autre, nous pouvons également créer des liens internes permettant de nous déplacer à l'intérieur d'une même page lorsque les contenus sont denses.

Les ancres sont particulièrement utiles sur les sites web intégrant beaucoup de contenu (comme wikipedia), cela permet de se déplacer rapidement d'une partie à une autre.

Nous allons créer un nouveau fichier : ancre.html
Ce nouveau fichier sera placé dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/ancre.html

Voyons un exemple ensemble :

ancre.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mes Ancres</title>
				<link rel="stylesheet" href="ancre.css">
			</head>
			<body>
			
			<h1>Sommaire</h1>
			<a href="#sport">Sport</a><br>
			<a href="#politique">Politique</a><br>
			<a href="#culture">Culture</a><br>
			<hr>
			<h2 id="sport">Sport</h2>
			<p>	
				Article sur le sport
				<!-- Prévoir de copier/coller 100 ligne de texte ! -->
			</p>
			<hr>
			<h2 id="politique">Politique</h2>
			<p>	
				Article sur la Politique
				<!-- Prévoir de copier/coller 100 ligne de texte ! -->
			</p>
			<hr>
			<h2 id="culture">Culture</h2>
			<p>	
				Article sur la Culture
				<!-- Prévoir de copier/coller 100 ligne de texte ! -->
			</p>
				
			</body>
		</html>

Il est impératif que vous ajoutiez du texte dans ce fichier pour voir la valeur ajoutée des ancres, cela est estimable uniquement lorsque la page web possède une scrollbar
Décryptons le code Html du fichier ancre.html.

Comment faire une ancre html ?

Comme vous le savez, la balise a permet de créer un lien hypertext et l'attribut href permet de définir la destination du lien.

Dans notre cas, nous allons inscrire un dieze # pour préciser que nous ne souhaitons pas sortir de la page actuel et que nous voulons nous rendre sur le point d'ancrage nommé "sport".
Voici l'ancre :

Sport

Le point d'ancrage se déclare avec un id (comme pour les id css).
Voici le point d'ancrage :

Sport

Dans notre cas, notre point d'ancrage se fait sur une balise h2, mais cela aurait pu se faire sur un autre élément à condition d'y ajouter l'id sport.

Attention
pour qu'une ancre fonctionne, il faut donner le même nom à votre ancre qu'à votre point d'ancrage.
Le Html est sensible à la casse, il faudra relier "#politique" à "politique" et non pas "#politique" à "Politique".

Exercice : En bas de page, faites un lien "retour en haut de page" !

Correction :

ancre.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mes Ancres</title>
				<link rel="stylesheet" href="ancre.css">
			</head>
			<body>
			
			<h1 id="sommaire">Sommaire</h1>
			<a href="#sport">Sport</a><br>
			<a href="#politique">Politique</a><br>
			<a href="#culture">Culture</a><br>
			<hr>
			<h2 id="sport">Sport</h2>
			<p>	
				Article sur le sport
				<!-- Prévoir de copier/coller 100 ligne de texte ! -->
			</p>
			<hr>
			<h2 id="politique">Politique</h2>
			<p>	
				Article sur la Politique
				<!-- Prévoir de copier/coller 100 ligne de texte ! -->
			</p>
			<hr>
			<h2 id="culture">Culture</h2>
			<p>	
				Article sur la Culture
				<!-- Prévoir de copier/coller 100 ligne de texte ! -->
			</p>
			
			<a href="#sommaire">Remonter en haut de page</a>
				
			</body>
		</html>

Le Résultat
explications Html / Css

Allez au chapitre suivant : 15. Menu De Navigation