Tutoriel HTML - sommaire

La balise A : le "couteau suisse" de HTML

Le champ d'application de cet élément est très vaste. HTML5 introduit un nouvel attribut : download qui permet de télécharger une ressource externe.
Le seul attribut obligatoire de cette balise est href : chemin vers une ressource (interne ou externe)
Un autre attribut utile est target qui permet d'ouvrir la ressource dans une nouvelle fenêtre.
La balise A permet aussi de créer des liens vers des "ancres" (ancre : élément HTML disposant de l'attribut ID).

Attention l'élément A est nativement de type inline.
C'est une balise double donc elle peut contenir une balise simple.
La balise A n'est pas autofermante ; </a> est obligatoire !

Attention vous ne pouvez pas utiliser la balise A pour certains liens :
• pour lier à la page avec une feuille de style externe : utilisez la balise LINK
• pour lier la page avec une feuille de script externe : utilisez la balise SCRIPT

Exemples d'utilisation de la balise A

Une utilisation à bannir désormais

Technique qui date des origines du JavaScript est qui désormais fortement déconseillée.
Pour appeler une fonction JS : utilisez un élément BUTTON.

Poursuivons en évoquant les utilisations traditionnelles de l'élément A.

Hyperlien vers une ressource externe

Exemple :

SNCF : horaires et tarifs

Le code correspondant : <p><a href ="https://www.sncf.com" >SNCF : horaires et tarifs</a>

Hyperlien vers une ressource externe affichée dans un nouvel onglet

Exemple :

De plus le lien apparait sous forme d'une image.

Le code correspondant : <p><a href ="https://www.viamichelin.fr" target ="_blank"> <img src ="../images/michelin.png " alt ="Michelin itinéraires" class ="gauche" title ="cliquez sur l'image" /> </a>

Pour qu'un lien apparaisse sous forme d'une image, il suffit d'insérer la balise IMG dans la balise double A.

Lien pour écrire un mail

Exemple :

adresser mail à : coronavirus19ATgmail.com

Le code correspondant : <p><a href ="mailto: coronavirus19@gmail.com" >adresser mail à : coronavirus19ATgmail.com</a>

Cette technique pose problème pour les internautes utilisant un webmail comme justement Gmail (pas de logiciel de messagerie installé sur leur ordinateur).

Télécharger un fichier automatiquement

Exemple :

Télécharger le pdf

Le code correspondant : <p><a href ="https://darchevillepatrick.info/documents_fede/arbre_filiation_vierge.pdf" download ="arbre.pdf" > Télécharger le pdf</a>

Donc la nouveauté introduite par HTML5 est l'attribut download : non seulement le document est ouvert mais il est téléchargé.

Lien vers une ancre dans la page courante

Exemple :

Retour haut de page

Le code correspondant : <p><a href ="#corps" >Retour haut de page </a>

Lien vers une ancre dans une autre page

La page ciblée apparait dans un nouvel onglet grâce à l'attribut target.

Exemple :

Insertion de caractères spéciaux

Le code correspondant : <p><a href ="html5.php#corps" target ="_blank">Insertion de caractères spéciaux</a>

Je suppose que la page cible est dans le même dossier que celle contenant le lien.

Balises A et astuces

Afficher une image via la balise A

On peut utiliser la balise A pour afficher une image (et seulement l'image) dans un nouvel onglet.

Cliquez pour afficher une image

Le code correspondant : <p><a href ="../images/anglais.jpg" target ="_blank" >Cliquez pour afficher une image</a>

la valeur de l'attribut href est le chemin vers une image ...

Miniature cliquable

Si une image est très lourde, il faut mieux afficher par défaut une miniature de cette image.
Si clic sur la miniature alors affichage de la grande image dans un autre onglet.
Il n'est pas nécessaire d'utiliser JavaScript pour réaliser cette animation ; simplement du HTML.

Le code correspondant : <p><a href ="../images/aravis_grand.jpg" target ="_blank"> <img src ="../images/aravis_petit.jpg" title ="cliquez sur la miniature pour agrandir" > </a>

Par défaut c'est l'image "aravis_petit.jpg" qui s'affiche.
Sur clic affichage de "aravis_grand.jpg" dans une nouvelle fenêtre.

Notez la syntaxe, la valeur de l'attribut href est un chemin vers une image.