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 cible dans une nouvelle fenêtre (nouvel onglet).
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 !

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

<a href ="javascript:nomfonctionJS()">Cliquez ici</a>
Cette technique qui date des origines du JavaScript est désormais fortement déconseillée.
Pour appeler une fonction JS créez plutôt une élément button avec de préférence le gestionnaire d'événements de JS. Ce qui donne le code HTML & JS suivant : <button id ="bouton10" >Cliquez icI</a> ... <script> ... document.getElementbyId("bouton10").onclick =function() { instructions de la fonction anonyme } ...

Tout le JS est centralisé à l'intérieur du conteneur SCRIPT.

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>

Lorsque la cible est un autre site il est préférable de l'afficher dans une nouvelle fenêtre comme dans l'exemple ci-dessous.

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 le conteneur 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.