3. Faire des liens¶
Ne serait-ce pas chouette de pouvoir ajouter plusieurs pages à nos sites web ? Même si les sites “one-page” (qui ne contiennent qu’une seule longue page) sont de plus en plus courants (exemple ici), la majorité des sites web contiennent une multitude de pages liées entre elles par des liens.
A retenir
Un lien hypertexte (ou hyperlien) est une référence placée dans le contenu d’un document éléctronique permettant de passer automatiquement à un autre document.
Exercice 1
Ouvrez Firefox, rendez-vous sur le site de votre choix et cherchez un lien hypertexte. Faites un clic droit sur le lien, puis cliquez sur “Inspecter”. Votre navigateur devrait alors ouvrir le code HTML de la page et pointer directement sur le code du lien. Lisez ce bout de code HTML pour découvrir quelle balise permet d’insérer un lien hypertexte.
Solution
Un lien hypertexte s’insert avec la balise <a> </a> (pour “anchor”, ancre en français).
L’attribut href suivi de = indique l’URL de redirection (par exemple l’url d’un autre site web). Il faut mettre des " " autour de l’URL.
Finalement, on écrit entre les 2 balises le texte du lien.
Exemple: <a href="https://mdlgb.ch/">Accédez à Moodle</a>
Exercice 2
Modifiez le code HTML suivant pour ajouter des liens hypertextes vers les pages wikipédia des différentes destinations de la liste.
Vous pouvez le faire directement sur w3schools.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page</title>
</head>
<body>
<h1>Destinations</h1>
<ul>
<li>Hawaï</li>
<li>Chypre</li>
<li>Mongolie</li>
</ul>
</body>
</html>
Solution
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ma page</title>
</head>
<body>
<h1>Destinations</h1>
<ul>
<li><a href="https://fr.wikipedia.org/wiki/Hawa%C3%AF">Hawaï</a></li>
<li><a href="https://fr.wikipedia.org/wiki/Chypre_(pays)">Chypre</a></li>
<li><a href="https://fr.wikipedia.org/wiki/Mongolie">Mongolie</a></li>
</ul>
</body>
</html>
Les liens absolus (vers d’autres sites)¶
Si vous voulez faire un lien vers un autre site existant en ligne, rien de plus simple, il suffit de copier l’URL du site et le coller entre "" à la suite de l’attribut href, comme ceci:
<a href="https://mdlgb.ch/">Accédez à Moodle</a>
A retenir
On appelle ça un lien absolu car il indique une adresse complète.
Les liens relatifs (entre vos pages)¶
En général, un site web contient un fichier .html par page.
Si vous voulez faire un lien vers une autre page de votre site, il suffit d’entrer le nom du fichier .html entre "" à la suite de l’attribut href, comme ceci:
<a href="page2.html">Page 2</a>
A retenir
On appelle ça un lien relatif car il indique où trouver un fichier HTML par rapport à l’emplacement de la page courante.
Attention, si votre 2ème page se trouve dans un dossier (par exemple un dossier nommé contenu), il vous faudra préciser le chemin pour accéder à cette 2ème page:
<a href="contenu/page2.html">Page 2</a>
Exercice 3
Nous allons ajouter une 2ème page à votre site de restaurant créé dans le chapitre précédent. Le but est d’ajouter une page permettant aux visiteurs de contacter le restaurant.
Commencez par créer un nouveau fichier .html nommé contact.html et déposez le dans le même dossier que la page principale restaurant.html.
Copiez le code suivant dans le fichier contact.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Contact</title>
</head>
<body>
<h1>Contact</h1>
<p>Pour tout renseigment, vous pouvez prendre contact avec notre
agence par les moyens suivants:</p>
<ul>
<!-- Il est aussi possible de créer un lien vers une adresse mail avec "mailto" -->
<li>Email: <a href="mailto:restaurant@gmail.com">restaurant@gmail.com</a></li>
<li>Telephone: 0791234567</li>
</ul>
</body>
</html>
Ajoutez un lien relatif depuis la page principale restaurant.html vers la page contact.html. Ajoutez également un lien dans l’autre sens.
Solution
<!-- Quelque part sur la page principale -->
<a href="contact.html">Contact</a>
<!-- Quelque part sur la page contact -->
<a href="restaurant.html">Accueil</a>
Remonter dans les dossiers parents
Dans un chemin relatif, utiliser .. permet de pointer vers le dossier parent (c’est à dire que cela permet de remonter dans la hiérarchie des fichiers).
Info
La convention veut que la page d’accueil d’un site porte le nom index.html. Il s’agit de la première page que voit un visiteur qui entre sur votre site et celle qui est en général référencée par les moteurs de recherche.
Ce n’est pas strictement obligatoire, mais recommandé.
Ouvrir le lien dans un nouvel onglet¶
Il peut être utile de configurer un lien pour que le navigateur du visiteur ouvre un nouvel onglet quand il clique dessus.
L’attribut target="_blank" permet justement de le faire:
<a href="https://mdlgb.ch/" target="_blank">Accédez à Moodle</a>
Une image cliquable¶
Il est tout à fait possible de transformer une image en lien. Pour ceci, il suffit de mettre une image entre les balises <a> </a> au lieu d’un texte.
Voici un exemple:
<a href="https://mdlgb.ch/"><img src="https://pbs.twimg.com/profile_images/1125713968637579265/L4HJ0qyd_400x400.png"></a>
Exercice récapitulatif 3¶
Exercice récapitulatif 3
Vous êtes un artiste peintre qui souhaite se faire connaître. Vous avez besoin d’un site où les amateurs d’art pourraient vous contacter pour acheter vos œuvres ou pour des commandes spéciales. Vous décidez alors de lancer votre propre site.
Créez un nouveau dossier de travail nommé ArtGallerie.
Écrivez la page d’accueil du site dans un fichier nommé index.html.
Vous êtes libre sur le contenu mais les différentes pages doivent contenir les éléments suivants :
La page principale index.html contient :
Le titre “ArtGallerie” qui doit apparaître dans l’onglet du navigateur.
Un titre principal avec votre nom.
Un petit paragraphe auto-biographique (vous pouvez inventer votre biographie).
Un lien vers une page
galerie.html.Un lien vers une page
contact.html.
La page galerie.html contient :
Un titre principal “Galerie”.
Quelques-unes de vos meilleures œuvres (trouvées sur Internet mais libres de droit) (au moins 3 œuvres).
Un lien pour retourner à l’accueil (
index.html).
La page contact.html contient :
Un titre principal “Contact”.
Une liste à puce avec votre adresse mail (fausse), un numéro de téléphone (faux) et un bouton “Contactez-moi” (à vous de chercher comment ajouter un bouton en html).
Un lien pour retourner à l’accueil (
index.html).
Compressez votre dossier ArtGallerie en ArtGallerie.zip (clic droit sur le dossier -> compresser).
Déposez le dossier compressé sur Moodle à l’endroit prévu.