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.
À 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.
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.
À retenir
On appelle ça un lien absolu car il indique une adresse complète.
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>Le titre de ma page< /title>
< link rel="stylesheet" type="text/css" href="styles.css" >
< /head>
< body>
< h1> Destinations < /h1>
< ul>
< li> Hawaï < /li>
< li> Chypre < /li>
< li> Mongolie < /li>
< /ul>
< /body>
< /html>
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>
À 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 autre que celui de la page courante (par exemple un dossier nommé contenu), il faudra préciser le chemin pour accéder à cette 2ème page:
<a href="contenu/page2.html">Page 2< /a>
On peut s'affranchir du nom du dossier et le remplacer par deux points consécutifs .. qui indiquent au navigateur qu'il doit "remonter" d'un dossier dans l'arborescence pour trouver le document recherché. Cela permet de pouvoir changer des noms de dossiers sans casser des liens, c'est donc une pratique à favoriser.
<a href="../page2.html">Page 2< /a>
Vous allez ajouter une 2ème page à votre site mesvoyages.ch créé dans le chapitre précédent. Le but est d’ajouter une page permettant aux visiteurs de contacter l’agence de voyage.
Commencez par créer un nouveau fichier .html nommé contact.html et déposez-le dans le même dossier que la page principale voyages.html.
Copiez le code suivant dans le fichier contact.html:
< !DOCTYPE html>
< html lang="fr">
< head>
< meta charset="utf-8">
< title>Le titre de ma page< /title>
< link rel="stylesheet" type="text/css" href="styles.css">
< /head>
< body>
<h1>Contacth1>
<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:mesvoyages@gmail.com">mesvoyages@gmail.coma>li>
<li>Telephone: 0791234567li>
ul>
< /body>
< /html>
Ajoutez un lien relatif depuis la page principale voyages.html vers la page contact.html. Ajoutez également un lien dans l’autre sens.
Absolu ou relatif ?
Parmi les liens suivants, lesquels sont relatifs ?
< a href=”chats.html”>Chats< /a>
< a href=”https://www.google.com”>Google< /a>
< a href=”mon_site/contenu/pages/page3.html”>Page 3< /a>
< a href=”https://www.codeur.com/page2/”>Page 2< /a>
Chemin relatif
Vous avez des fichiers organisés de la manière suivante:
Vous êtes dans la page index.html, quel code permet de faire un lien vers page1.html ?
< a href=”page1.html”>Page 1< /a>
< a href=”dossier1/page1.html”>Page 1< /a>
< a href=”../dossier1/page1.html”>Page 1< /a>
< a href=”dossier2/page1.html”>Page 1< /a>
Vous êtes dans la page page1.html, quel code permet de faire un lien vers page2.html ?
< a href=”page2.html”>Page 2< /a>
< a href=”dossier2/page2.html”>Page 2< /a>
< a href=”../dossier2/page2.html”>Page 2< /a>
< a href=”../page2.html”>Page 2< /a>
Information
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>
Accédez à Moodle
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 au lieu d’un texte.
Voici un exemple:
<a href="https://mdlgb.ch/"><img src="https://pbs.twimg.com/profile_images/1125713968637579265/L4HJ0qyd_200x200.png">< /a>
Vous vous lancez dans la photographie. Vous avez besoin d’un site où les potentiels clients pourraient vous contacter pour vos services.
Vous décidez alors de lancer votre site: photostyle.ch.
Créez un nouveau dossier de travail nommé photographie.
Ecrivez la page d’accueil du site dans un fichier nommé index.html.
Vous êtes libre sur le contenu mais la page principale doit contenir les éléments suivants:
Le titre “Photostyle” 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:
La page contact.html contient:
Un titre “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.
Déposez le dossier compressé sur Moodle à l’endroit prévu.