Testez vos compétences : les liens

L'objectif de ce test de compétences est d'évaluer si vous comprenez comment mettre en place des liens hypertextes en HTML.

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, jsFiddle, ou Glitch pour travailler sur les tâches.

Si vous bloquez, demandez-nous de l'aide via un de nos canaux de communication.

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é :

Télécharger les éléments de départ de cette tâche 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é :

Télécharger les éléments de départ de cette tâche 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é :

Télécharger les éléments de départ de cette tâche pour travailler dans votre propre éditeur ou dans un éditeur en ligne.