Rappel sur les URL
A noter d'une version francisée du terme URL existe : adresse réticulaire...
Liens absolus
Un lien absolu, c'est l'adresse complète pour accéder à un document. Cette adresse comprend généralement plusieurs éléments :
-
Le protocole :
http:// -
L'adresse du site :
www.lesite.com -
Le chemin de la ressource sur le serveur :
/dossier/fichier.ext
<!-- liens absolue --> http://studio.jacksay.com/tutoriels
Liens relatif
Un lien relatif est (comme son nom l'indique) relatif à un chemin de référence (généralement le fichier où se trouve le lien).
<!-- liens relative --> lien/vers/mon/fichier.html
La balise base permet de redéfinir le chemin de référence pour les liens relatifs présents dans le document. Cependant cette balise est rarement utilisée.
Vous verrez également cette syntaxe qui produit le même effet, l'expression ./ reviens à dire (là où je suis) :
<!-- liens relative --> ./lien/vers/mon/fichier.html
Si besoin, les liens relatifs permettent de remonter dans une arborescence en utilisant ../
<!-- dossier parent --> ../chemin/vers/mon/fichier.html
Si vous avez besoin de remonter de plusieurs niveaux dans l'arborescence, il vous suffit de cumuler les ../
<!-- remonte de 2 dossiers en arrière --> ../../puis/remonte/fichier.html
Enfin, le / permet de pointer vers la racine du site.
<!-- Racine du site --> /index.html
Cette notation est plutôt répandue dans les sites PHP car le / remonte dans le document root du serveur (Vulgairement appellé la racine du site).
Les liens morts
Ce terme est utilisé pour désigner un lien qui pointe vers une ressource inaccessible (le requète retourne généralement une erreur 404 Not Fount).
la balise A
Pour faire des liens dans une page web, on utilise la balise A.
Tout ce qui se trouve dans cette balise deviendra "cliquable", que cela soit du texte, des images, ou un contenu complet...
L'attribut HREF
Pour Hypertext REFerence.
Liens vers le document à charger dans la fenêtre du navigateur
<!-- Exemple de lien --> <a href="http://studio.jacksay.com">Studio Jacksay</a>
http://www.la-grange.net/w3c/html4.01/struct/links.html : Norme pour la balise A
L'attribut TITLE
L'attribut title permet de donner des informations sur la cible du lien (affichage d'une info-bulle).
<!-- Exemple de lien --> <a href="http://studio.jacksay.com" title="Tutoriels pour webmasters">Studio Jacksay</a>
http://www.la-grange.net/w3c/html4.01/struct/global.html#adef-title : Norme pour l'utilisation de title
L'attribut REL
Relation entretenue entre le document et le lien
<!-- Exemple de lien --> <a href="http://studio.jacksay.com" title="Tutoriels pour webmasters" rel="external">Studio Jacksay</a>
Cet attribut est souvent utilisé par les webmasters pour identifier les liens sortants rel="external", cet attribut sera utilisé pour la mise en forme CSS.
http://www.la-grange.net/w3c/html4.01/types.html#type-links : Les types de liens
L'attribut TARGET
Définit où le liens va s'afficher (par defaut dans la fenêtre en court). Ce sujet est polémique donc voici un lien qui traite amplement du sujet :
La valeur par defaut est _self qui ouvre le lien dans la fenêtre courante, la valeur _blank est également utilisée pour ouvrir une nouvelle fenêtre
La valeur _blank n'est pas standard XHTML 1.0 strict
http://www.ultra-fluide.com/ressources/xhtml/target.htm : Article sur l'attribut target (aborde à la fois le côté technique et politique du problème)
Les Ancres
Les ancres sont utilisées pour faciliter la navigation au sein d'un document qui comporte une quantité de texte importante (avec des barres de défilement). Il sont pratique pour la navigation au sein d'une page (Sommaire, note de bas de page, retour en haut de la page, etc...)
Vous trouverez un très bonne exemple de l'utilisation des ancres sur le site wikipédia.
Créer une ancre nommée
Il existe 2 façons pour créer des ancres nommées, soit en renseignant un attribut ID avec pour valeur un nom d'ancre de son choix (caractères ASCII sans espaces) :
<!-- avec l'attribut id --> <h1 id="partie1">Partie 1</h1>
Soit en créant une balise A avec un attribut NAME ayant pour valeur le nom de l'ancre(caractères ASCII sans espaces)
<!-- ou avec l'attribut name de la balise A (recommandée pour IE) --> <a name="partie1" /> <h1>partie 1</h1>
Cette dernière méthode, même si elle est parfaitement fonctionnelle sera délaissée au profit de la première. Plus classe.
Lien vers une ancre nommée
C'est un lien classique avec le nom de l'ancre précédé d'un dièse #
<!-- lien vers une ancre nommée --> <a href="#partie1">Lien vers la partie 1</a>
On peut également faire des liens vers une ancre située dans un autre document :
<!-- lien vers une ancre nommée dans une autre page --> <a href="autrepage.html#monAncre">Lien vers la partie 1</a>
Lien mailto
Utilisation
La balise A permet également de faire des liens Mail (ça n'envoi pas d'email attention). Lorque l'utilisateur va cliquer sur le lien, le logiciel de messagerie de l'utilisateur va s'ouvrir sur un mail préremplis avec l'adresse mail renseigné
<!-- lien maito --> <a href="mailto:studio@jacksay.com">Me contacter</a> <!-- lien maito : sujet préremplis --> <a href="mailto:studio@jacksay.com?subject=Contact depuis le site">Me contacter</a>
Recommandations
Le lien mailto est cependant peu voir plus utilisé, les raisons sont diverses et malheureusement justifiées :
- L'internaute n'est pas forcement sur son ordinateur personnel, par conséquent aucun logiciel de messagerie n'est configuré dessus.
- L'internaute n'utilise pas de logiciel de messagerie mais à recourt à une inteface web pour consulter sa messagerie (Gmail, yahoo, MSN, etc...). Cette pratique est très répandue.
- Les robots de spam qui "snif" les page web aime beaucoup les liens mailto pour alimenter les bases de données des spameurs
Donc pour le cas des pages de contact, il sera préférable d'utiliser des formulaires (qui impliquent un script de traitement côté serveur), ou d'écrire l'email directement de cette façon : studio[at]jacksay[dot]com
Ressources complémentaires
http://www.siteduzero.com/tutoriel-3-13502-creer-des-liens.html : Un tutoriel complet (et très bien fait) sur la création de liens