Accueil

Traduction

Tutoriel HTML - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 !

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 :

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

Exemple :

Michelin itinéraires

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

Le code correspondant :

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 :

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 :

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 :

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 :

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 :

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 :

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.