SELFHTML: HTML/XHTML / Liens (Links) / Définir et mettre en forme des liens

	Définir et mettre en forme des liens
	Généralités sur les liens Exemples de liens Mettre en forme l'aspect des liens avec les CSS Fixer la fenêtre cible pour les liens

Généralités sur les liens

Les liens sont une partie essentielle de tout projet hypertexte et constitue la plus value "intelligente" du World Wide Web.

Avec les liens vous structurez votre projet. Si vous prévoyez par exemple un fichier HTML avec une page d'accueil pour le projet et différents fichiers pour les pages de thèmes, vous avez besoin dans la page d'accueil de liens menant à toutes les pages de thèmes et dans chaque page de thème d'un lien de retour à la page d'accueil. Ce n'est que comme cela qu'une collection de fichiers en vrac devient un projet hypertexte avec une page d'accueil. Dans des projets plus complexes comme la présente documentation vous trouvez aussi des liens avec une signification déterminée. - liens à des niveaux inférieur ou supérieur, pour feuilleter, liens pour changer entre des exemples d'affichage et des descriptions, des liens croisés à d'autres adresses WWW etc.

Tous les liens en HTML ont la même construction. La syntaxe en est simplifiée mais cela présente aussi des inconvénients: Il n'existe pas de liens pour des tâches déterminées. Entre-temps il y a bien des attributs pour de telles choses mais dans la pratique c'est à vous de décider comment vous bâtirez par exemple des liens de façon à ce que l'utilisateur voie clairement s'il s'agit d'un lien de retour à la page d'accueil, d'un lien croisé à un thème apparenté ou d'un lien à une toute autre adresse WWW.

Dans tous les cas il est important de choisir pour le lien un texte explicite.
retour (où donc ?)est mauvais.
retour à la page d'accueil (ah oui!) est meilleur.

Les liens attirent aussitôt l'attention de l'utilisateur sur eux. Si vous notez des liens en plein milieu du texte, vous devez proposer des mots décrivant le contenu comme texte de lien pas de mots vides de sens.
Pour plus d'informations cliquez ici est mauvais (de quoi s'agit-il "ici" en fait?)
Vous pouvez obtenir des renseignements complémentaires (ah oui!) est bon

Pour des projets plus compliqués vous devez réfléchir comment permettre à l'utilisateur d'accéder intuitivement à la quantité de liens de signification différente. Un moyen astucieux est de placer un petit symbole graphique devant le lien comme c'est le cas dans la présente documentation (voir aussi incorporer des graphiques). Grâce à des symboles explicites vous signalez aussitôt à l'utilisateur de quel genre de lien il s'agit. Les symboles graphiques ne doivent cependant pas être plus haut que le texte courant - normalement environ 10-12 pixels. Même les Graphiques en tant que liens contribuent aussi souvent à une meilleure identification du lien.

Trop peu de liens, rendent la navigation dans un projet difficile et démontre le peu de créativité du concepteur du projet. Trop de liens égarent l'utilisateur et peuvent lui donner "l'impression d'être "perdu dans l'hyperespace" - ce qui ne donne pas non plus une bonne impression sur le concepteur du projet. Pour cette raison mettez tous les liens nécessaires à une navigation confortable et pensez aussi aux liens croisés ainsi qu'à des liens judicieux à d'autres adresses WWW. N'exagérez cependant pas la technique des liens croisés.

Exemples de liens

Tous les liens en HTML ont une structure uniforme que la destination du lien soit dans le même fichier, dans un autre fichier du même projet, à une adresse WWW quelconque ou à un fichier quelconque d'un autre type sur Internet ou local sur l'ordinateur.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Une petite collection de liens</h1>

<p>
<a href="http://www.tf1.fr/news/monde/">TF1 actualités</a> actualités<br>
<a href="http://www.presence-pc.com/">Présence PC actualités</a> actualités informatique<br>
<a href="http://fr.news.yahoo.com/
">actualités Yahoo </a> actualités<br>
<a href="http://www.france.diplomatie.fr/actual/"> actualités France-Diplomatie</a>actualités
</p>
<p>
<a href="/">Où cela peut-il bien mener?</a><br>
<a href="./">Et ceci?</a>
</p>

</body>
</html>

Explication:

Pour les liens en HTML existe le repère a (a = anchor = ancre). Pour que cet élément devienne un lien toutefois, l'attribut <a href= est nécessaire (href = hyper reference = référence hyper(texte)). Comme valeur pour l'attribut href attribuez la cible du lien que vous souhaitez. Comme contenu de l'élément a , à savoir entre <a> et </a>, notez le texte proposé à l'utilisateur comme lien (d'une autre couleur pour la plupart des navigateurs Web, la plupart du temps souligné).

Dans l'exemple ci-dessus, les quatre premiers liens mènent à d'autres offres sur la toile. Les deux derniers mènent à des cibles "locales". Pour comprendre la syntaxe des cibles de liens possibles, vous devez vous familiariser avec la page référencer en HTML.

Attention:

Le contenu de l'élément a, à savoir pour les liens le texte du lien, peut contenir autre chose que du texte pur. Vous pouvez noter dans le texte du lien également d'autres éléments incorporés. Vous pouvez également, entre autres, référencer un graphique à la place de texte, en faisant fonctionner des graphiques en tant que liens, ce qui est très fréquent dans la pratique de la création Web.

Mettre en forme l'aspect des liens avec les CSS

Si vous ne mentionnez rien d'autre, les liens seront représentés dans les couleurs par défaut du navigateur par exemple bleu pour les liens menant aux pages qui n'ont pas encore été visitées et violet pour les pages déjà visitées. Pour déterminer vos propres couleurs de liens globalement pour un fichier, vous pouvez utiliser les attributs décrits dans la partie traitant des couleurs pour le texte et les liens. En plus de cela, existe la possibilité de mettre en forme de façon personnalisée les liens à l'aide feuilles de style. Il est aussi possible entre autres d'empêcher le soulignement du texte de lien qui fait partie la plupart du temps des réglages par défaut.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
 a:link { text-decoration:none; font-weight:bold; color:#E00000; }
 a:visited { text-decoration:none; font-weight:bold; color:#800000; }
 a:hover { text-decoration:none; font-weight:bold; background-color:#FFFF00; }
 a:active { text-decoration:none; font-weight:bold; background-color:#CCFFFF; }
-->
</style>
<title>Texte du titre</title>
</head>
<body>

<h1>Une petite collection de liens</h1>

<p>
<a href="http://www.tf1.fr/news/monde/">TF1 Nouvelles du monde</a> actualités<br>
<a href="http://www.presence-pc.com/">Présence.com actualités</a> actualités informatiques<br>
<a href="http://fr.news.yahoo.com/
">Yahoo actualités France</a> actualités<br>
<a href="http://www.france.diplomatie.fr/actual/">actualités France-Diplomatie</a> actualités
</p>
<p>
<a href="/" style="color:green">Où cela peut-il bien mener?</a><br>
<a href="./" style="color:green">Et ceci?</a>
</p>

</body>
</html>

Explication:

L'exemple travaille abondamment avec les feuilles de style CSS. Pour cela est noté dans l'entête de fichier HTML un passage central distinct pour la définition de formats CSS (<style>...</style>). De plus amples renseignements à ce sujet dans le chapitre CSS dans la partie expliquant comment définir des formats globaux. Le souhait exprimé maintes fois par le créateur Web d'empêcher le soulignement du texte du lien peut être exaucé par la mention CSS text-decoration:none (text-decoration:underline activerait par ailleurs le réglage par défaut, à savoir le soulignement du texte du lien).Les autres définitions de format utilisées dans l'exemple sont font-weight:bold; (caractères gras) ainsi que des mentions sur la couleur (color:) et sur la couleur d'arrière-plan (background-color:). Les propriétés CSS correspondantes sont décrites dans les parties traitant du formatage de la police et des couleurs et images d'arrière plan.

Ce qui attire l'attention dans l'exemple ci-dessus, c'est que des formats CSS ont été définis pour quatre "types de liens" en tout. Avec a:link sont concernés les liens à des pages qui n'ont pas encore été visitées, avec a:visited les liens à des pages déjà visitées, avec a:hover des liens dont le texte est survolé par la souris de l'utilisateur, et avec a:active des liens qui sont cliqués ou en train de l'être. Plus de détails à ce sujet sont développés dans la partie sur :link, :visited, :hover, :active, :focus (pseudo formats pour les liens).

Les deux derniers liens de l'exemple ci-dessus sont formatés individuellement. Ils adoptent les formats CSS définis globalement mais reçoivent en outre une couleur de lien distincte. Pour ce faire, l'attribut style= a été noté dans le repère d'ouverture <a>.

Fixer la fenêtre cible pour les liens

Par défaut, tous les liens sont ouverts dans la fenêtre actuelle. À moins que vous n'ayez mentionné dans l'entête du fichier HTML une fenêtre cible de base et fixé quelque chose d'autre. Pour des liens distincts, vous pouvez décider indépendamment de cela si la cible du lien doit être affichée dans la fenêtre actuelle du navigateur, ou si une nouvelle fenêtre doit être ouverte à cet effet. Pour des liens à des offres Web extérieures il peut être par exemple judicieux d'ouvrir la cible du lien dans une nouvelle fenêtre. Ainsi l'utilisateur n'a pas besoin de quitter votre propre offre Web mais reçoit l'autre offre simplement affichée dans une autre fenêtre. La page de votre offre avec le lien reste conservée dans une fenêtre en arrière-plan.

Exemple:

Exemple d'affichage: aperçu (ceci ici est d'ailleurs un lien à une cible dans une nouvelle fenêtre!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>SELFHTML actuel</h1>
<p>
toujours mis à neuf: <a href="http://actuel.fr.selfhtml.org/" target="_blank">SELFHTML actuel</a>
</p>

</body>
</html>

Explication:

Grâce à l'attribut target= (target=cible) dans le repère d'ouverture <a> vous pouvez fixer une fenêtre cible pour le lien. Si vous voulez ouvrir le lien dans une nouvelle fenêtre, affectez à target la valeur _blank (sans oublier le tiret de soulignement qui précède!).

Les autres valeurs pouvant être affectées à target= sont:
_self, pour ouvrir le lien dans la fenêtre actuelle,
_parent, pour, avec des jeux de cadres (frames) imbriqués, fermer le jeu de cadres actuel,
_top, pour, avec des jeux de cadres (frames) imbriqués, fermer tous les jeux de cadres,
ainsi qu'un nom de fenêtre de votre choix, ayant été défini dans un jeu de cadres.
De plus amples renseignements sur les mentions en relation avec les cadres peuvent être trouvés dans la partie sur les liens à des cadres.

Attention:

L'attribut target n'est certes pas classé en cours d'abandon pourtant, pour le mettre en œuvre, vous devez utiliser la variante HTML "Transitional". La raison en est que cet attribut est conçu essentiellement pour les liens liés à l'utilisation de cadres et que les cadres (frames) ont une variante HTML distincte qui correspond d'après la classification à la variante "Transitional" (en bon français: ne correspond pas aux "dogmes").

Au lieu de target="_blank" vous pouvez aussi noter target="Youpi" ou quelque chose d'autre n'ayant pas de sens. Si aucune fenêtre de ce nom n'existe, les navigateurs Web ouvrent la cible du lien dans une nouvelle fenêtre du navigateur.


	Liens du projet internes au projet
	Tableaux et moyens non visuels

SELFHTML/Aides à la navigation

HTML/XHML

Liens (Links)