(web.html3)=
# 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](https://mort-modern.losttype.com/)), la majorité des sites web contiennent une multitude de pages liées entre elles par des liens.
```{admonition} A retenir
:class: note
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.
```
````{admonition} Exercice 1
:class: note
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.
```{dropdown} Solution
Un lien hypertexte s'insert avec la balise ` ` (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: `Accédez à Moodle`
```
````
`````{admonition} Exercice 2
:class: note
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.
```{code-block} html
Ma page
Destinations
```
````{dropdown} Solution
```{code-block} html
Ma page
Destinations
```
````
`````
## 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:
```{code-block} html
Accédez à Moodle
```
```{admonition} A retenir
:class: note
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:
```{code-block} html
Page 2
```
```{admonition} A retenir
:class: note
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:
```{code-block} html
Page 2
```
`````{admonition} Exercice 3
:class: note
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`:
```{code-block} html
Contact
Contact
Pour tout renseigment, vous pouvez prendre contact avec notre
agence par les moyens suivants:
```
Ajoutez un lien relatif depuis la page principale `restaurant.html` vers la page `contact.html`. Ajoutez également un lien dans l'autre sens.
````{dropdown} Solution
```{code-block} html
Contact
Accueil
```
````
`````
```{question} Absolu ou relatif ?
Parmi les liens suivants, les quels sont relatifs ?
* {v}`Chats`
* {f}`Google`
* {v}`Page 3`
* {f}`Page 2`
```
```{admonition} Remonter dans les dossiers parents
:class: note
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).
```
````{question} Chemin relatif
Vous avez des fichiers organisés de la manière suivante:
```{image} ../media/organisation_dossiers.png
```
Vous êtes dans la page `index.html`, quel code permet de faire un lien vers `page1.html` ?
* {f}`Page 1`
* {v}`Page 1`
* {f}`Page 1`
* {f}`Page 1`
Vous êtes dans la page `page1.html`, quel code permet de faire un lien vers `page2.html` ?
* {f}`Page 2`
* {f}`Page 2`
* {v}`Page 2`
* {f}`Page 2`
````
```{admonition} Info
:class: hint
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:
```{code-block} html
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:
```{code-block} html
```
## Exercice récapitulatif 3
```{admonition} Exercice récapitulatif 3
:class: note
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.
```