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.
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>
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 …
| 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) |
Exemple
<a href="http://www. " title="Conseil Laurent Delaporte">Conseil Laurent Delaporte</a>espaceinformatique.net
Exemple
<a href="http://www.espaceinformatique.net" title="Conseil Laurent Delaporte" target="_blank">Conseil Laurent Delaporte</a>
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>
M’envoyer en email en ajoutant le sujet<a href="mailto:contact@espaceinformatique.net
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>
<a href="https://www.mozilla.com">
Mozilla
</a>
<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>
<!-- <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.
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.
<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 :
registerProtocolHandler, comme web.skype.com.Voir RFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d’autres détails sur le schéma URL tel:.
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: :
<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>
html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
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()
);