exemple de lien “http://www.“espaceinformatique.net
Qu-est ce qu’un lien hypertexte ?
Un hyperlien, ou lien hypertexte, ou lien web, ou simplement lien, est une référence dans un système hypertexte permettant de passer automatiquement d’un document consulté à un document lié. Les hyperliens sont notamment utilisés dans le World Wide Web pour permettre le passage d’une page Web à une autre à l’aide d’un clic.
Liens vers une page qui se trouve dans votre répertoire
Exemple de lien pointant à la racine de votre répertoire
<a href="index.php" title="Qu'est ce que le HTML">Qu'est ce que le HTML ?</a>
Exemple d’arborescence
dossier_racine
index.html
contact.html (Pour revenir à la page index.html <a href="index.html" title="Accueil">Accueil</a>)
css
images
medias
telechargements
listing-des-pdf.html (Pour revenir à la page index.html
<a href="../../index.html" title="Accueil">Accueil</a>)
telechargements.html (Pour revenir à la page index.html <a href="../index.html" title="Accueil">Accueil</a>)
../ : je remonte d’un rang dans l’arborescence.
../../ : je remonte de 2 rangs dans l’arborescence.
../../../ : je remonte de 3 rangs dans l’arborescence etc …
Les principaux attributs des liens hypertextes
| href: | Le chemin vers la page à lier. |
| title | Affiche une info bulle sur le lien |
| target | _blank : Ouverture de la page cible dans une nouvelle fenêtre _parent : Ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur) _self : (Valeur par défaut) Ouverture de la page cible dans le cadre d’appel _top : Ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET) |
Liens vers une url
Exemple
<a href="http://www. " title="Conseil Laurent Delaporte">Conseil Laurent Delaporte</a>espaceinformatique.net
Un lien qui s’ouvre dans une nouvelle fenêtre
Exemple
<a href="http://www.espaceinformatique.net" title="Conseil Laurent Delaporte" target="_blank">Conseil Laurent Delaporte</a>
Liens vers messagerie
Exemple
Contactez moi par email en cliquant qur ce lien
<a href="mailto:contact@espaceinformatique.net">Contactez moi par email en cliquant sur ce lien</a>
Ajouter le sujet de l’email
M’envoyer en email en ajoutant le sujet<a href="mailto:contact@espaceinformatique.net
Ancres
Une ancre permet d’envoyer à un niveau précis dans une page HTML
Les exemples que vous allez souvent retouver “Haut de page”, “Bas de page”
Exemple
Cliquez ici pour revenir en haut de la page<a href="liens-hypertexte-html.php#ancre1" title="Revenir au début de cette page">Cliquez ici pour revenir en haut de la page</a>
Exemples
Créer un lien vers une URL absolue
HTML
<a href="https://www.mozilla.com">
Mozilla
</a>
Résultat
Créer des liens vers des URL relatives
HTML
<a href="//example.com">URL relative au schéma</a>
<a href="/fr/docs/Web/HTML">URL relative à l'origine</a>
<a href="./p">URL relative au répertoire</a>
Résultat
Créer un lien vers un élément de la même page
<!-- <a> élément liens vers la section ci-dessous -->
<p><a href="#section_further_down">
Passez à la rubrique ci-dessous
</a></p>
<!-- Rubrique à relier -->
<h2 id="section_further_down">Section plus bas</h2>
Note : Vous pouvez utiliser href="#top" ou le fragment vide (href="#") pour créer un lien vers le haut de la page actuelle, comme défini dans la spécification HTML.
Créer un lien avec une adresse électronique
Pour créer des liens qui s’ouvrent dans le programme de messagerie de l’utilisateur, pour lui permettre d’envoyer un nouveau message, utilisez le schéma mailto: :
<a href="mailto:nowhere@mozilla.org">Envoyer un courriel nulle part</a>
Pour plus de détails sur les URL mailto:, comme l’inclusion d’un sujet ou d’un corps de message, voir Liens de courrier électronique ou RFC 6068.
Créer un lien avec les numéros de téléphone
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
tel: le comportement du lien varie en fonction des capacités du périphérique :
- Les appareils cellulaires composent automatiquement le numéro.
- La plupart des systèmes d’exploitation disposent de programmes permettant de passer des appels, comme Skype ou FaceTime.
- Les sites web peuvent passer des appels téléphoniques avec
registerProtocolHandler, commeweb.skype.com. - Les autres comportements comprennent l’enregistrement du numéro dans les contacts, ou l’envoi du numéro à un autre appareil.
Voir RFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d’autres détails sur le schéma URL tel:.
Utilisation de l’attribut de téléchargement pour enregistrer un <canvas> au format PNG.
Pour enregistrer le contenu d’un élément <canvas> sous forme d’image, vous pouvez créer un lien avec un attribut download et les données du canvas sous forme d’une URL data: :
Exemple d’application de peinture avec lien de sauvegarde
HTML
<p>
Peignez en maintenant le bouton de la souris enfoncé et en le déplaçant.
<a href="" download="my_painting.png">Télécharger ma peinture</a>
</p>
<canvas width="300" height="300"></canvas>
CSS
html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
JavaScript
var canvas = document.querySelector('canvas'),
c = canvas.getContext('2d');
c.fillStyle = 'hotpink';
function draw(x, y) {
if (isDrawing) {
c.beginPath();
c.arc(x, y, 10, 0, Math.PI*2);
c.closePath();
c.fill();
}
}
canvas.addEventListener('mousemove', event =>
draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () => isDrawing = true);
canvas.addEventListener('mouseup', () => isDrawing = false);
document.querySelector('a').addEventListener('click', event =>
event.target.href = canvas.toDataURL()
);
À propos de l’auteur