Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par défaut, en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus.
Je vous propose d'essayer de coder le lien qui amène vers le Site Wikipedia, comme à la figure suivante.
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène vers Wikipedia, situé à l'adresse https://fr.wikipedia.org/wiki/Montagne :
Code : HTML
<a href="https://fr.wikipedia.org/wiki/Montagne">En savoir plus sur la montagne ?</a> |
Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment reproduire l'exemple de la figure précédente :
Code : HTML
<h1>La montagne</h1> <h2>Chez moi</h2> <p> <a href="https://fr.wikipedia.org/wiki/Montagne">En savoir plus sur la montagne ?</a> </p> <p>J'aime la <strong>montagne</strong> et ma <mark>Vallée</mark>. <br /> La Maurienne, on y est bien. </p> |
Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà ouvert la page, le lien s'affiche en violet.
Nous verrons comment changer cette apparence lorsque nous étudierons le CSS.
Si vous voulez faire un lien vers un autre site, il suffit donc de copier son adresse (on parle d'URL) en http://. Notez que certains liens commencent parfois par https:// (sites sécurisés) ou d'autres préfixes (ftp://,…).
Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme : http://www.site.com/?data=15&name=mateo21, vous devrez remplacer tous les « & » par « & » dans votre lien comme ceci : http://www.site.com/?data=15&name=mateo21.
Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une page web correctement construite en HTML5.
Les liens que nous venons de voir sont appelés liens absolus car on indique l'adresse complète. Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être utile pour faire des liens entre les pages de notre site.
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide facilement