Style

2.10.1. But

Les liens servent à ouvrir une autre page Internet.

2.10.2. Définition d'un lien interne

On place d'abord des repères aux endroits voulus par la balise <a> avec l'attribut name="...".
Puis on se porte sur ces liens avec la balise <a> avec l'attribut href="#..."
En haut de la présente page vous verrez définis des liens internes vers les différents chapitres. Regardez le code employé!

2.10.3. Définition d'un lien externe

La balise <a> avec l'attribut href définit un lien.
La valeur de l'attribut href est l'URI de la page appelée, le domaine de validité de la balise <a> est le texte qu'il faut cliquer sur l'écran pour appeler la page visée:

Placez une page html quelconque, p.ex. appelée page.html dans le même répertoire où vous placez l'essai suivant:

.......
<a href="http://www.meine-mathe.de">Lien vers une page (externe) de Maths utile</a><br />
<a href="./page.html">Lien vers une page (interne) appelée page.html placée dans le même répertoire que la présente page.</a><br />
.......

2.10.4. Fenêtre-cible

L'attribut target définit la fenêtre-cible: La valeur _self ouvre la page dans la fenêtre où nous sommes (défaut), la valeur _blankdans une nouvelle fenêtre:

.......
<a href="http://www.meine-mathe.de" >Lien vers une page (externe) de Maths utile qui sera ouverte par défaut dans cette fenêtre</a><br />
<a href="http://www.meine-mathe.de" target="_self">Lien vers une page (externe) de Maths utile qui sera ouverte dans cette fenêtre</a><br />
<a href="http://www.meine-mathe.de" target="_blank>Lien vers une page (externe) de Maths utile qui sera ouverte dans une nouvellefenêtre</a><br />
.......

2.10.5. Propriétés CSS

Les propriétés CSS reprises dans l'exemple suivant vous montrent comment vous pouvez changer l'aspect du lien selon que le curseur est dessus ou non, selon qu'il a été visité ou non, selon que c'est le lien actif ou non:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<style type="text/css">
a:link{color:blue;}
a:visited{color:red;}
a:hover{text-decoration:none;color:green;background-color:cyan}
a:active{color:black;}
</style>
</head>
<body>
<a href="http://www.meine-mathe.de/">Mes Maths</a><br>
<a href="http://www.lhce.lu/Chimie/">Ma Chimie</a><br>
</body>
</html>

Remarque:text-decoration:none; produit ici un texte non souligné

2.10.6. Votre propre site Internet

Dans les exercices suivants, on vous demande de construire des sites Internet constitués de plusieurs pages reliées entre elles par des liens. Le code donné comme exemple est destiné à vous mettre sur la bonne voie, la décoration par les propriétés CSS ainsi que les références vers les différentes pages de votre site ainsi que les références de retour vers la page d'accueil sont à faire par vous-même.

1ère variante:

Deux blocs superposés sur chaque page du site, en haut un bloc pour les références, en bas le bloc pour le contenu.

....
<div style="text-align:center;background-color:yellow">
----Ici les références vers les pages du site---
</div>
<div style="text-align:center"><br /><br />
-----Ici le contenu de la page d'accueil-----
</div> ....

2e variante:

Deux blocs juxtaposés sur chaque page du site, à gauche un bloc pour les références, à droite un bloc pour le contenu. Sur la première page, en haut de la page, un bloc supplémentaire pour le titre.

....
<div style="position:absolute; top:10px; height:50px; left:20px; width:850px; text-align:center;background-color:green">
-Ici le titre-
</div>
<div style="position:absolute; top:70px; height:500px; left:20px; width:140px; text-align:right;background-color:yellow">
-Ici les références vers les pages du site-
</div>
<div style="position:absolute; top:70px; height:500px; left:170px; width:700px; text-align:center; background-color:cornflowerblue">
-Ici le contenu de la page d'accueil-
</div>
....

Cours