Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment insérer des liens dans HTML.
accès rapide
- La démo
- Qu’est ce qu’un lien hypertexte
- Un lien vers un autre site
- Un lien vers une autre page du même site
- Un lien vers une ancre
- Un lien pour envoyer un mail
- Un lien pour télécharger un fichier
- Quiz de ce tuto
La démo
mettre ici la vidéo de la démonstration
Qu’est ce qu’un lien hypertexte ?
Les liens hypertexte permettent de naviguer en passant de pages en pages. Ils peuvent pointer vers un autre site web, vers d’autres pages de votre site ou pointer vers un endroit précis d’une même page.
Pour créer un lien hypertexte en HTML5, nous pouvons utiliser la balise<a> . Elle se referme en utilisant la balise </a>.
Un lien vers un autre site
Pour se diriger vers une page d’un autre site,nous pouvons ajouter un attribut « href » dans la balise <a>.
Ci-dessous un exemple que redirige vers le site de google en cliquant sur le lien « Faire une recherche »:
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web </title>
</head>
<body>
<a href="http://www.google.fr">Faire une recherche</a>
</body>
</html>
En cliquant sur le lien , on est redirigé vers le site google
Un lien vers une autre page du même site
Cas 1 : Deux pages situées dans un même dossier
Si les deux fichiers html sont situés dans le même dossier, il suffit d’écrire comme cible du lien le nom du fichier vers lequel on veut amener.
Par exemple, si nous sommes sur la page1 (page1.html) et que nous souhaitons faire un lien vers la page 2 (page2.html), nous pourrons l’écrire comme dans l’exemple suivant:
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web</title>
<meta charset="utf-8" />
</head>
<body>
<a href="page2.html">Cliquer ici pour passer à la page 2</a>
</body>
</html>Cas 2 : Deux pages situées dans des dossier différents :
Si nous sommes sur la page1 (page1.html) et que nous souhaitons faire un lien vers la page 2 (page2.html) situé dans le dossier nommé « Files », nous pourrons l’écrire comme dans l’exemple suivant:
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web</title>
<meta charset="utf-8" />
</head>
<body>
<a href="Files/page2.html">Cliquer ici pour passer à la page 2</a>
</body>
</html>Lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu’elles sont très longues.
Parfois, il peut être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l’intéresse.
Pour créer une ancre, il suffit de rajouter l’attribut id à l’élément qu’on veut pointer. Ce peut être n’importe quelle balise, un titre par exemple.
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="cours">cours web </h2>
<!-- Référence depuis la même page: nom de l’ancre précédé par # -->
<a href="#cours"> visualiser le cours web </a>
<!-- Référence depuis une autre page-->
<a href="page.html#cours"> visualiser le cours web </a>
</body>
</html>Lien pour envoyer un mail
Pour envoyer un mail en cliquant sur un lien , l’attribut href de la balise <a> doit commencer par le préfixe mailto: suivi de l’adresse e-mail de destination :
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web</title>
<meta charset="utf-8" />
</head>
<body>
<a href="mailto:destination@gmail.com">Envoyez-moi un message !</a>
</body>
</html>Lien pour télécharger un fichier
Pour le téléchargement d’un fichier à partir d’un lien, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger
<!DOCTYPE html>
<html>
<head>
<title>Ma page Web</title>
<meta charset="utf-8" />
</head>
<body>
<a href="monfichier.zip">Télécharger le fichier</a>
</body>
</html>
Dans cette partie , nous avons appris comment insérer des médias dans HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer à ajouter des éléments pour la mise en forme du texte à notre fichier HTML.