I. Faire un lien hypertext en HTML5
En utilisant le principe de balise imbriquée, on va donc « entourer » le lien avec les balises <a> et </a>.
1 |
<a>Ceci est un lien</a> |
Il est important de noter qu’un lien peut contenir plusieurs mots. Dans l’exemple ci-dessus, la phrase entière est un lien. Elle est donc cliquable.
Notre lien fonctionne, vous pouvez le tester pourtant il ne vous emmènera vers aucune page. Logique, nous ne lui avons donné aucune adresse. Pour indiquer une page ou un site vers le quel votre lien doit pointer on utilise un attribut.
Qu’est-ce qu’un attribut ? Un attribut est un élément qui permet de renseigner différentes informations à la balise auquel il appartient. Toutes les balises ont des attributs. Certains sont obsolètes, d’autres recommandés fortement.
Pour indiquer à notre balise <a> l’adresse du lien, on utilise l’attribut HREF.
1 |
<a href="http://www.google.fr">Faire une recherche</a> |
Dans l’exemple ci-dessus, si on clique sur le texte : « faire une recherche », on changera de page pour aller sur la page d’accueil de Google. Tout comme les balises, les attributs et leur valeurs n’apparaissent pas à l’écran. Elles servent uniquement aux navigateurs.
Pour faire un lien vers une page du même site, l’adresse peut-être écris entièrement ou de façon raccourcis. Par exemple, si nous sommes sur la page d’accueil (index.html) et que nous souhaitons faire un lien vers la page de contact (contact.html), nous pourrons l’écrire comme dans l’exemple suivant :
1 |
<a href="contact.html">Nous contacter</a> |
http://www.mon-site.fr/contact.html est l’adresse complete de la page. Mais lorsque nous sommes sur le même site, nous pouvons raccourcir l’adresse par : contact.html.
Attention, cela ne vaut que pour le cas ou la page est dans le même dossier que la page vers qui le lien se destine. Par défaut il sont à la racine du site web (tout en haut de la hiérarchie). Pour mieux comprendre, prenons l’exemple suivant : depuis votre page d’accueil vous souhaité faire un lien vers la page maxime.html qui se trouve dans le dossier PROFIL.
- L’adresse de la page d’accueil est donc : http://www.mon-site.fr/index.html
- L’adressse de la page de maxime est donc : http://www.mon-site.fr/PROFIL/maxime.html
Pour faire un lien vers une page du même site appartenant à un dossier (maxime.html), depuis une autre page (index.html) on écris le lien de la manière suivante :
1 |
Consulter le profil de <a href="PROFIL/maxime.html">Maxime</a> |
En cas de doute, mieux vaut écrire l’adresse complète :
1 |
Consulter le profil de <a href="http:www.mon-site.fr/PROFIL/maxime.html">Maxime |
Astuce : Pour positionner votre site web lors de requête sur les moteurs de recherches, ces derniers analyses vos pages des plusieurs façons. Parmi elles, figure l’importance des mot-clés. Il est donc préférable de glisser un maximum de mot-clés dans la page (sans en faire trop, google le verrais et vous pénaliserais …).
Pour un lien éfficace vers un site de jardinage par exemple, il est conseillé d’utiliser le deuxième exemple ci-dessous :
1 2 3 4 5 |
<!-- Mauvais lien --> <a href="http://www.mon-site.fr">Cliquez ici</a> <!-- Lien optimiser --> <a href="http://www.mon-site.fr">La boutique du jardinage</a> |
Il arrive parfois lors de la création d’un site web d’ajouter certains liens par avance mais dont on ne connait encore pas l’adresse. Par sécurité, on ajoute comme valeur le symbole # (dièse) à l’attribut HREF de la balise <a>.
1 |
<a href="#">Lien sans adresse</a> |
II. Les attributs de la balise <a>
Nous venons de voir que la balise <a> possède l’attribut HREF qui sert à indiquer l’adresse vers laquelle le lien doit pointer. Cette balise possède d’autre attribut fonctionnant de la même façon.
| Attribut | Valeur | Description |
|---|---|---|
| href | URL | Indiquez l’adresse de la page vers laquelle pointe le lien |
| hreflang | language_code | Indiquez la langue de la page vers laquelle pointe le lien |
| media New | media query | Indiquez le type de document vers laquelle pointe le lien. La valeur par défaut est : all |
| rel | alternate author bookmark external help license next nofollow noreferrer prefetch prev search sidebar tag |
Indiquez la relation entre le document actuel et celui vers lequel pointe le lien |
| target | _blank _parent _self _top framename |
Indiquez l’emplacement d’ouverture du lien |
| type New | mime_type | Indiquez le Type MIME du document vers lequel pointe le lien |
En se référant au tableau ci-dessus, si nous souhaitons ouvrir notre lien dans un nouvel onglet du navigateur, on utilisera donc l’attribut TARGET auquel on donnera la valeur _BLANK. Ce qui nous donnera :
1 |
<a href="http://www.mon-site.fr" target="_blank">Nouvel onglet</a> |
III. Lien vers une boite Mail
Vous aurez peut-être remarquez en cliquant sur certain lien, notamment une adresse mail, s’ouvrait votre client mail (Outlook, Thunderbird, Mail ….). Une fois ouvert, certain champs sont même deja renseigner (destinataire, sujet …).
Pour faire un lien qui ouvre le client mail, on utilise l’attribut HREF que vous connaissez deja. A la place de lui ajouter l’adresse d’une page ou d’un site, on écris MAILTO suivit de l’adresse mail du destinataire.
1 |
<a href="mailto:mon@adresse.fr">Ecrivez-moi</a> |
Pour indiquer le sujet , on ajoute SUBJECT à la fin de l’adresse mail en le reliant par le symbole ? (point d’interrogation). NE JAMAIS METTRE D’ESPACE DANS LE SUJET. On remplace les espaces par les symbole %20.
1 |
<a href="mailto:mon@adresse.fr?subject=Mon%20sujet">Ecrivez-moi</a> |
On peut éajouter un destinataire en copie ou en copie caché afin que personne ne le sache …
1 2 3 4 5 |
<!-- Destinataire en copie --> <a href="mailto:mon@adresse.fr?cc=autre@adresse.fr">Ecrivez-moi</a> <!-- Destinataire en copie caché --> <a href="mailto:mon@adresse.fr?bcc=autre@adresse.fr">Ecrivez-moi</a> |
Ecrire le corps du message (toujours sans espace – remplacé par %20)
1 |
<a href="mailto:mon@adresse.fr?body=bonjour%20cher%20client">Ecrivez-moi</a> |
Ou en combinant plusieurs champs : (on ajoute le symbole & entre les champs à définir)
1 |
<a href="mailto:mon@adresse.fr?subject=abonnement&cc=autre@adresse.fr">Ecrivez-moi</a> |
IV. Les ancres : liens interne à la page
En HTML 4.01, la balise <a> pouvait soit être un lien hypertexte soit un lien vers une ancre. En HTML5, cette balise sera uniquement un lien hypertexte, mais si elle n’a pas l’attribut href, elle reste un espace réservé pour un lien hypertexte.
HTML5 a quelques nouveaux attributs, et certains attributs HTML 4.01 ne sont pas pris en charge dans HTML5. (les attributs suivant ne sont plus supporté en HTML5 : charset, coords, name, rev, shape)