HTML et CSS

HTML / CSS >
Eléments de contenu >
Liens

Liens

Le H et le T de HTML signifient "HyperText". Ce terme traduit la possibilité, familière aujourd'hui mais révolutionnaire en son temps, de relier un document à d'autres ressources grâce à des liens hypertextes . C'est la raison d'être première du HTML.

On crée un lien en utilisant la balise <a>

. Cette balise admet un attribut href dont la valeur est l'URL de la ressource visée.

Par exemple, créez à partir du fichier 'nouveau.html' deux nouveaux fichiers HTML "texte1.html" et "texte2.html", puis écrire dans le corps de texte1.html:

<a href="texte2.html"> mon premier lien </a>
Ce lien ne fonctionnera que si les deux fichiers texte1.html et texte2.html sont dans le même dossier sur la même machine.

Si la ressource visée est plus lointaine, on doit récupérer son URL : le meilleur moyen pour obtenir l'URL d'une page Web est de l'ouvrir dans un navigateur et de copier son URL depuis la barre d'adresse.

Sur les réseaux sociaux, l'URL d'une ressource (article, image, video...) est ce que le site vous fournit quand vous demandez à "partager" cette ressource.

Essayez de créer un lien vers cette page (oui, celle-ci même).

Un lien peut désigner n'importe quel type de ressource : selon le cas, le navigateur pourra tenter de l'ouvrir lui-même, proposer son ouverture avec un autre programme, ou proposer de le télécharger et de l'enregistrer localement.

Un attribut intéressant de la balise <a> est target, "cible" : si l'attribut "target" a la valeur "_blank", le lien s'ouvrira automatiquement dans un nouvel onglet.
<a href="texte2.html" target="_blank" > mon premier lien </a>
Un lien peut conduire vers l'emplacement d'un élément HTML particulier à l'intérieur d'une page HTML. On doit pour cela attribuer un identifiant (id) à cet élément, puis ajouter cet identifiant, précédé de #, à la valeur de l'attribut "href" du lien.
Par exemple ce lien conduit au titre de ce texte "Liens". Le code du lien est
<a href="#titre">ce lien</a>
L'identifiant 'titre' a été ajouté à l'élément HTML contenant le titre en ajoutant id="titre" dans sa balise ouvrante:
<h3 id="titre">Liens  </h3>

Cet autre lien ouvrira la seconde page de ce cours dans un nouvel onglet, en conduisant directement au bas de la page, où se trouve l'élément dont l'identifiant est "cible". Le code est

<a href="premier_essai.html#cible" target="_blank" autre lien </a>

Complétez le lien vers cette page précédemment créé pour qu'il conduise au titre de ce texte (identifiant 'titre').
On peut également créer une destination à l'intérieur d'un document avec une balise <a> vide. Exemple :
<a id="cible"></a>

 

 
Licence Creative Commons
licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé
Auteur : Nathalie Bonnin
Professeur de Physique, Chimie, Informatique au lycée La Martinière Monplaisir (Lyon 8ème)
Contact :
nathalie.bonnin (chez) scientillula.net
Licence Creative Commons
La totalité du contenu du site Scientillula.net appartient à Nathalie Bonnin et est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé