Les liens.

Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.

Les liens.

Les liens permettent de « naviguer » à l'intérieur comme à l'extérieur de votre site et ont exactement les mêmes fonctions que les liens contenus dans les menus. Par défaut les liens sont bleus et soulignés. Les images-lien sont entourés d'un cadre bleu.

La validité des liens est importante. Assurez-vous toujours que vos liens redirigent bien vos visiteurs vers la bonne page. Si vous avez des liens vers l'extérieur de votre site, vérifié régulièrement qu’ils soient toujours valides. Un petit truc, créer une page avec ses liens et faite vos tests. De cette façon vous ne serez pas obliger de parcourir toutes les pages de votre site, mais simplement cette page pour faire votre vérification.

Rendez-vous à cette adresse http://www.verification-des-liens.com/ pour une vérification de vos liens sans efforts.

Un lien simple.

Un lien simple permet de naviguer d'une page à l'autre à l'intérieur de votre site. Le lien est suivi d'un titre (title ang.) qui affichera, un commentaire au survol de la souris et est obligatoire.

1

<a href="page-de-destination.html" title="titre du lien">Texte du lien.</a>

Explications.

• a href="page_destination.html" - Est le lien vers une autre page.
• title="Titre du lien" - Est un commentaire au survol de la souris.
• Texte du lien - Peut être un mot ou un ensemble de mots.

Remarquez qu'il n'y a ni majuscule, ni accent et ni espace vide après href, la destination du lien. Habituez-vous parce que c'est ainsi que vous devez indiquer tous vos liens, que ce soit les liens vers une autre page, une image ou une vidéo. Ce qui implique que la source soit elle aussi écrite de à cette façon.

Lien externe

Si votre lien dirige votre visiteur vers un autre site, écrivez plutôt votre lien ainsi ou la fonction onclick permet de conserver l'onglet de votre site :

1

<a href="http://www.site-extérieur.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien vers un site extérieur">Texte du lien.</a>

Si le lien extérieur tend vers une page dans une autre langue que le français, disons l'anglais :

1

<a href="http://www.site-extérieur.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien vers un site extérieur" hreflang="en" >Texte du lien. 1</a>

Une ancre.

Un lien peut aussi tendre vers un endroit précis de la même page ou d'une autre page. Nous dirons dans ce cas que ce lien pointe vers une ancre. Pour ce faire, il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre et du titre (il ne doit pas y avoir d'espace entre les mots dans le titre).

Vous pouvez insérer une ancre n’importe où dans la page de destination ou dans la même page. Remplacer id-de-lancre par un mot. Il ne doit avoir qu'un seul id ayant le même nom par page et le name doit être le même que id.

L'ancre.

1

<a href="#" id="id-de-lancre" name="nom-de-lancre"></a>

Le lien vers un endroit précis d'une autre page.

1

<a href="page-de-destination.html#id-de-lancre-ici" title="ancre-ici">Aller à l'ancre</a>

Le lien vers un endroit précis de la même page.

1

<a href="#id-de-lancre-ici" title="ancre-ici">Aller à l'ancre</a>

Un lien vers le haut de la page.

1

<a onclick="window.scrollTo(0,0); return false" href="#">Retour en haut</a>

Le CSS.

Grâce au CSS vous pouvez changer l'aspect d'un lien de façon à ce que les visiteurs n'est aucune difficulté à reconnaître les liens insérés dans le texte tout en conservant l'esthétisme de la page.

Par exemple, si le lien se trouve dans le conteneur « corps » vous pouvez choisir :

1
2
3
4

#corps a {
color:#036;
text-decoration:none
}

Pour changer, les valeurs au survol de la souris :

1
2
3
4
5

#corps a:hover {
color:#fff;
text-decoration:underline;
Background-color:#036
}

Pour changer les couleurs d'un lien déjà visité :

1
2
3
4

#corps a:visited {
color:#777;
text-decoration:none
}

Une image cliquable.

Une image-cliquable est en fait un « bouton » sur lequel vous cliquez pour diriger le visiteur vers une autre page ou un autre endroit dans la même page. Ce lien-image doit être inséré dans un paragraphe. Si l'image n'est pas dans un paragraphe, vous devrez l'insérer entre <p> et </p>.

1

<p><a href="destination.html"><img src="dossier-image/mon-image.png" alt="Texte alternatif" title="titre de l'image" /></a></p>

Une image cliquable avec hover.

Vous pouvez aussi changer une image par une autre au survol de celle-ci. La meilleure méthode consiste à mettre les deux images sur le même calque et de simplement régler son positionnement.

Télécharger le calque.

Dans le XHTML

1

<a href="#nogo" title="Image hover" id="hover"><span>Image avec hover</span></a>

Dans le CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#hover{
display:block;
width:100px;
height:31px;
background:url(../images/hover.png) 0 0 no-repeat;
}

/* on décale l'image de bas en haut de 31px */
#hover:hover{
background-position:0 -31px; /* 0 est la valeur de x et -31px la valeur de y */
}

/* permet de cacher le texte du lien */
#hover span{
display:inline-block;
text-indent:-5000px;
}

Texte et image cliquable.

Vous pouvez aussi insérer une image avec un texte cliquable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="end-cont">
 <ul>
  <li>
   <a href="#nogo" title="">
    <img src="images/news-03.png" alt="Canada crushes St.Lucia" width="116" height="66"/>
    <span><strong>Canada crushes St.Lucia</strong>Canadian coach Stephen Hart didn't even...</span>
   </a>
  </li>
  <li>
   <a href="#nogo" title="">
    <img src="images/news-02.png" alt="Allegri confident" width="116" height="66" />
    <span><strong>Allegri confident</strong>AC Milan coach Massimiliano Allegri is confident striker...</span>
   </a>
  </li>
  <li class="no-border">
   <a href="#nogo" title="">
    <img src="images/news-01.png" alt="THE ASSOCIATED PRESS" width="116" height="66"/>
    <span><strong>THE ASSOCIATED PRESS</strong>Argentina-born forward Pablo Osvaldo said he has...</span>
   </a>
  </li>
 </ul>
</div>

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

#end-cont{
font-size:.8em;
width:975px;
height:115px;
margin:0 auto;
clear:both;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa
}

#end-cont ul{
overflow:hidden;
margin-top:20px;
list-style:none;
}

#end-cont li{
float:left;
width:33%;
border-right:1px solid #ccc;
}

#end-cont .no-border{
border-right:none
}

#end-cont a{
color:#fff;
overflow:hidden;
display:block;
padding:0 15px 0 25px;
text-decoration:none
}

#end-cont img{
float:left;
margin-right:10px;
border:5px solid #CCC;
}

#end-cont span{
display:block;
margin:3px 0 0 50px;
}

#end-cont strong{
display:block;
text-transform:uppercase;
}

Résultat attendu :

Lien de téléchargement.

Vous pouvez inviter un visiteur à télécharger une archive Winrar, une image et même un programme directement sur votre site.

Télécharger un fichier Winrar :

Si le lien est un texte vers l'archive Winrar.

1

<p class="telechargement"><a href="telechargement/exemple.rar" title="Télécharger l'archive Winrar."></a></p>

Si le lien est une image vers l'archive Winrar.

1

<p class="telechargement"><a href="telechargement/exemple.rar"><img src="images/icons/telecharge_on.png"; alt="Icône de téléchargement" title="Télécharger l'archive Winrar." /></a></p>

Utilisez la même procédure pour une image ou un document Pdf. Vous n'avez qu'à changer l'extension du fichier à télécharger. Par exemple pour une image en format « png » vous écrirez exemple.png ou pour un document « pdf », écrivez exemple.pdf etc. Il faut évidemment que l'extension du document d'origine soit au format spécifié dans le lien sinon vous aurez un message d'erreur.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca