Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:liens [2023/03/19 17:44] – [Lien externe] jcheron
+++ web:html:liens [2023/03/19 21:17] (Version actuelle) – jcheron
@@ Ligne 1: / Ligne 1: @@
-====== HTML - Liens ======
+====== Liens ======
 La balise **a** permet de créer des liens hypertextes. Il s'agit d'une balise inline non orpheline (elle peut avoir du contenu).
+<WRAP info>
+**Bonnes pratiques :**
+  * Ne pas faire de lien [[#|Cliquer ici]], mais exprimer avec précision ce que va ouvrir le lien [[#|Visiter Slamwiki 2.0]]
+  * Préciser le type de document associé s'il n'est pas en HTML
+  * Spécifier toujours un **title**, pour informer avant de cliquer
+</WRAP>
 ===== Exemple =====
@@ Ligne 37: / Ligne 44: @@
 </sxh>
-==== Lien absolu ====
+=== URL relative ===
+Une URL relative exprime la position de la ressource par rapport à l'emplacement actuel, elle commencera par ''./'', ou par un emplacement non précédé du ''/'' :
+Ces 2 liens pointe vers le même document, si l'adresse actuelle est **<nowiki>https://monsite.com/index</nowiki>**\\
+L'adresse du lien sera **<nowiki>https://monsite.com/index/docs/home</nowiki>**
+<sxh html;gutter:false>
+<a href="docs/home">Documents</a>
+<a href="./docs/home">Documents</a>
+</sxh>
+== Avec parcours ==
+Il est possible d'effectuer un parcours pour exprimer une URL relative :
+Si par exemple, il faut retourner au dossier parent pour atteindre le dossier docs :
+<sxh html;gutter:false>
+<a href="../docs/home">Documents</a>
+<a href="./../docs/home">Documents</a>
+</sxh>
+==== Vers fragment ====
+Il est possible d'utiliser un fragment, sur une URL interne, ou externe, qu'elle soit absolue ou relative, pour atteindre directement une partie du document marquée par un identifiant :
+<sxh html;gutter:false>
+<a href="#contact">Contact</a>
+</sxh>
+<sxh html;gutter:false>
+<h2 id="contact">Pour nous contacter</h2>
+</sxh>
+===== Target =====
+L'attribut **target** permet de spécifier la fenêtre qui sera la cible du lien :
+<sxh html;gutter:false>
+<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
+</sxh>
+^_blank	| Ouvre le lien dans un nouvel onglet |
+^_self	| Ouvre le lien dans la frame active (par défaut) |
+^_parent | Ouvre le lien dans la frame parent |
+^_top | Ouvre le lien vers le body de la fenêtre active |
+^name | Ouvre le lien dans une cible nommée (déjà ouverte précédemment |
+===== Assitance =====
+Apporter des informations d'assistance en renseignant l'attribut **title** qui fait apparaître une infobulle au survol de la souris :
+<sxh html;gutter:false>
+<a href="https://www.google.com" title="Aller vers Google">Google</a>
+</sxh>
+===== Download =====
+Utiliser l'attribut **download** pour préciser qu'il s'agit d'un lien de téléchargement :
+<sxh html;gutter:false>
+<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
+   download="firefox-latest-64bit-installer.exe">
+  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
+</a>
+</sxh>
+<WRAP info>
+L'attribut download a un double intérêt :
+  * Celui de forcer le téléchargement, pour les types de fichiers qui auraient pu s'afficher dans le navigateur (pdf par exemple)
+  * De permettre de renommer côté client le fichier téléchargé
+</WRAP>
+===== rel =====
+Il permet de spécifier le lien qui lie votre site au destinataire du lien :
+<sxh html;gutter:false>
+<a href="https://slamwiki2.kobject.net" rel="nofollow">Slamwiki 2.0</a>
+</sxh>
+^Valeur ^Signification ^
+^nofollow | Indique aux moteurs de ne pas suivre ce lien pour le référencement. |
+^alternate| Le lien pointe vers une version alternative de ce document. |
+^ugc | Le lien a été produit par une action utilisateur (commentaire par exemple). |
+===== tel et mailto =====
+Il est possible de faire un lien vers une adresse mail :
+Le préfix **mailto:** provoque l'ouverture du client de messagerie.
+<sxh html;gutter:false>
+<a href="mailto:user@kobject.net">user@kobject.net</a>
+</sxh>
+Ou vers un numéro de téléphone :
+Permet d'appeler directemetn le numéro, sur un support qui le supporte :
+<sxh html;gutter:false>
+<a href="tel:0606060606">Appelez-moi</a>
+</sxh>