Différences

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

--- web:html:liens [2023/03/18 21:09] – 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).
-===== Exemple =====
+<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 =====
+Utilisation de la balise **a** :
 <sxh html;gutter:false>
 <a href="https://www.google.com">Google</a>
 </sxh>
+La balise **a** peut avoir des enfants :
+<sxh html;gutter:false>
+<a href="https://www.google.com">
+    <img src="/assets/img/google.png" alt="Google image"/>
+    <span>Google</span>
+</a>
+</sxh>
+===== href =====
+href permet de désigner la cible du lien.
+==== Liens externes ====
+Il doit spécifier une url complète, commençant par le protocole :
+<sxh html;gutter:false>
+<a href="https://example.com">Website</a>
+</sxh>
+==== Liens internes ====
+=== URL absolue ===
+Une URL absolue fait référence à la racine du serveur Web et commence par ''/'' :
+<sxh html;gutter:false>
+<a href="/index/home">Accueil</a>
+</sxh>
+=== 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>