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 et c'est une balise double.
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 alors la balise LINK
• pour lier la page avec une feuille de script externe ; utilisez alors la balise SCRIPT

Exemples d'utilisation de la balise 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 à l'intérieur de 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 la page 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.

Utiliser l'attribut accesskey

Le lien peut alors être activé par l'appui simultané de la touche Alt et de la lettre indiquée comme valeur de l'attribut accesskey.

Alt+z pour activer le lien (Chrome) Alt+shift+z (Firefox)

Le code correspondant : <a href ="https://www.viamichelin.fr" target ="_blank" accesskey ="z"> Alt+z pour activer le lien (OU Alt + shift + z) </a>

Attention il y a en fait deux raccourcis clavier selon que vous utilisez le navigateur Chrome ou Firefox.

Redirection automatique vers une autre URL

Si vous voulez programmer une redirection automatique au bout de quelques secondes utiliser la balise meta http-equiv ="Refresh" ...

Exemple

Imaginons qu'au bout de 20 secondes il y ait redirection vers une autre page de ce site.

Le code correspondant serait :

<meta http-equiv="refresh" content="20;url=html6.php#corps" />

Autre utilité de cette balise

La balise meta http-equiv ="Refresh" ... permet aussi un rafraichissement de la page toutes les n secondes.

Exemple

Heure mise à jour toutes les 5 secondes !

L'heure est : 19:29:31

Le code correspondant

Un script PHP pour évaluer l'heure ; script réexécuté toutes les 5 secondes, à chaque rechargment de la page.