Archives de catégorie Création Site Web

Protégé : Création d’un espace membre

Cette publication est protégée par un mot de passe. Pour la voir, veuillez saisir votre mot de passe ci-dessous :

Tutoriel HTML : Lien hypertexte

exemple de lien « http://www.espaceinformatique.net« 

Liens hypertexte en HTML

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

Qu’est ce que le HTML ?

<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

pdf

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.
titleAffiche 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.espaceinformatique.net " title="Conseil Laurent Delaporte">Conseil Laurent Delaporte</a>

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?subject=informations">M'envoyer en email en ajoutant le sujet</a

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

https://yari-demos.prod.mdn.mozit.cloud/fr/docs/Web/HTML/Element/a/_sample_.Cr%C3%A9er_un_lien_vers_une_URL_absolue.html

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

https://yari-demos.prod.mdn.mozit.cloud/fr/docs/Web/HTML/Element/a/_sample_.Cr%C3%A9er_des_liens_vers_des_URL_relatives.html

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, comme web.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()
);
Résultat

Secured By miniOrange