7. Ajoutons un lien vers Poképédia

C’est bien, nous avons beaucoup avancé sur notre Pokédex, mais il n’y a pas assez d’informations pour un vrai fan de Pokémons ! Nous n’allons pas en rajouter pour l’instant, mais il serait bien de mettre un lien vers Poképédia (le Wikipédia des pokémons) pour en savoir plus.

Vous ne savez peut-être pas ce qu’est un lien. Un lien, aussi appelé hyperlien ou lien hypertexte, est un bout de texte qui nous dirige vers une autre page quand on clique dessus. Par exemple, cliquez sur le lien ci-dessous, vous allez être redirigé vers une autre page : Pikachu

Comme presque tout en HTML, un lien est représenté par une balise. Cette fois-ci c’est la balise “a”, mais elle est un peu spéciale.

C’est une balise “inline”, c’est à dire qu’on est obligé de l’intégrer dans une autre balise, par exemple un “p” :

<p>Voici <a>un lien</a></p>

Dans cette situation, on a un paragraphe qui contient les mots “Voici un lien”. Mais “un lien” est entouré par une balise “a”. C’est donc sur cette partie qu’il faudra cliquer pour accéder à l’adresse du lien.

Mais quelle “adresse du lien”, on a pas précisé dans le code là où il doit nous rediriger ?

Exactement, et c’est là qu’on va aborder une nouvelle notion : les attributs. En effet, le lien à besoin de savoir sur quelle page il va envoyer le visiteur. On va alors placer l’attribut comme ça :

 <a href="https://www.alexandria-library.co/">La biblihotèque d'Alexandrie</a>

Comme vous pouvez le remarquer, cela ressemble beaucoup à cette syntaxe :

<meta charset="utf-8">

C’est normal, puisqu’il s’agit aussi d’un attribut. Un attribut va définir une information de la balise. Chaque balise a une certaine quantité d’attributs, qui définissent chacun quelque chose de particulier. Pour la balise “a”, l’attribut “href” représente l’adresse vers laquelle va pointer le lien. La valeur de cette attribut est toujours entre double-quotes (guillemets anglais), après le signe = qui sépare le nom de l’attribut et sa valeur.

Maintenant, nous pouvons mettre un petit lien “en savoir plus” à côté de nos Pokémons, qui redirige vers Poképédia :

Comme d’habitude, si vous n’avez pas réussi, ou que vous voulez vérifier que vous avez bien fait comme il faut, vous pouvez aller voir sur GitHub le code qui correspond à cette étape. Je crois que maintenant, nous avons une page assez complète. Il est temps de vérifier qu’elle est en ordre avec le W3C Validator que nous découvrirons dans la prochaine étape