/
index.md
69 lines (45 loc) · 5.06 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
---
title: "Testez vos compétences : les liens"
slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
l10n:
sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
---
{{learnsidebar}}
L'objectif de ce test de compétences est d'évaluer si vous comprenez comment [mettre en place des liens hypertextes en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks).
> **Note :** Vous pouvez essayer les solutions dans les éditeurs interactifs ci-dessous. Cependant, il peut être utile de télécharger le code et d'utiliser un outil en ligne tel que [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches.
>
> Si vous bloquez, demandez-nous de l'aide via un de [nos canaux de communication](/fr/docs/MDN/Community/Communication_channels).
## Tâche 1
Dans cette tâche, nous vous demandons de nous aider à remplir les liens de notre page d'information sur les baleines :
- Le premier lien doit renvoyer à une page appelée `whales.html`, qui se trouve dans le même répertoire que la page actuelle.
- Nous aimerions également que vous lui donniez une infobulle qui indique à la personne visitant la page que celle-ci contient des informations sur les baleines bleues et les cachalots.
- Le deuxième lien doit être transformé en un lien sur lequel vous pouvez cliquer pour ouvrir un e-mail dans l'application de messagerie par défaut de l'utilisateur·ice, le destinataire étant « whales\@example.com ».
- Vous obtiendrez un point bonus si vous faites en sorte que l'objet de l'e-mail devienne automatiquement « Question sur les baleines ».
> **Note :** Les deux liens de l'exemple ont l'attribut `target="_blank"` défini. Ce n'est pas la meilleure pratique, mais nous l'avons fait ici pour que les liens ne s'ouvrent pas dans l'`<iframe>` intégrée, pour éviter ainsi d'effacer votre travail par inadvertance !
Essayez de mettre à jour le code en direct ci-dessous pour recréer l'exemple terminé :
{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}
> **Remarque :**
>
> [Télécharger les éléments de départ de cette tâche](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/links/links1-download.html) pour travailler dans votre propre éditeur ou dans un éditeur en ligne.
## Tâche 2
Dans cette tâche, nous voulons que vous remplissiez les quatre liens de manière à ce qu'ils renvoient aux endroits appropriés :
- Le premier lien doit renvoyer à une image appelée `blue-whale.jpg`, qui se trouve dans un répertoire appelé `blue` à l'intérieur du répertoire actuel.
- Le deuxième lien renvoie à une image appelée `narwhal.jpg`, qui se trouve dans un répertoire appelé `narwhal`, situé un niveau au-dessus du répertoire actuel.
- Le troisième lien doit renvoyer à la recherche d'images Google au Royaume-Uni. L'URL de base est `https://www.google.co.uk`, et la recherche d'images se trouve dans un sous-répertoire appelé `imghp`.
- Le quatrième lien doit renvoyer au paragraphe situé tout en bas de la page actuelle. Son identifiant est `bottom`.
> **Note :** Les trois premiers liens de l'exemple ont l'attribut `target="_blank"` défini. Ce n'est pas la meilleure pratique, mais nous l'avons fait ici pour que les liens ne s'ouvrent pas dans l'`<iframe>` intégrée, pour éviter ainsi d'effacer votre travail par inadvertance !
Essayez de mettre à jour le code en direct ci-dessous pour recréer l'exemple terminé :
{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 800)}}
> **Remarque :**
>
> [Télécharger les éléments de départ de cette tâche](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/links/links2-download.html) pour travailler dans votre propre éditeur ou dans un éditeur en ligne.
## Tâche 3
Les liens suivants renvoient à une page d'information sur les Narvals, à une adresse électronique d'assistance et à un fichier PDF d'une taille de 4 Mo. Dans le cadre de cette tâche, nous souhaitons que :
- Prenez les paragraphes existants dont le texte de lien est mal rédigé et réécrivez-les de manière à ce qu'ils contiennent un bon texte de lien.
- Ajoutez un avertissement à tous les liens qui en ont besoin.
> **Note :** Le premier et le troisième liens de l'exemple ont l'attribut `target="_blank"` défini. Ce n'est pas la meilleure pratique, mais nous l'avons fait ici pour que les liens ne s'ouvrent pas dans l'`<iframe>` intégrée, pour éviter ainsi d'effacer votre travail par inadvertance !
Essayez de mettre à jour le code en direct ci-dessous pour recréer l'exemple terminé :
{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}
> **Remarque :**
>
> [Télécharger les éléments de départ de cette tâche](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/links/links3-download.html) pour travailler dans votre propre éditeur ou dans un éditeur en ligne.