| Accueil | table XHTML-CSS | index XHTML-CSS | précédent | suivant |

Les liens - 5 (lien vers une marque)

On peut accéder à un endroit déterminé d'une page en y plaçant une marque ou signet (appelé anchor dans la documentation du W3C). Une marque prend la forme :

<a id="marque"></a>

Le nom de la marque doit commencer par une lettre et ne comprendre que des lettres (majuscules et minuscules non accentuées), des chiffres et les caractères tiret et souligné (marque12, Marque-12, marque_12 sont des noms valides; 12marque, 12_marque, abonnés, ne le sont pas). La marque doit être placée dans une boite et ne doit pas apparaître au niveau <body>.

Le lien qui renvoie vers la marque prend la forme :

<a href="#marque">renvoi vers une marque de la même page</a>
<a href="autrepage.html#marque">renvoi vers une marque d'une autre page</a>

Si la ligne marquée est suivie d'un texte suffisamment long, elle s'affichera en haut de l'écran, sinon, elle remontera le plus haut possible sur l'écran. Dans l'exemple ci-dessous, nous avons utilisé un conteneur <div> de 500 pixels de hauteur pour permettre à la ligne marquée d'atteindre le haut de l'écran.


/* Fichier Style33.css */

body
{
background-color : rgb(245,235,204);
}

/* conteneur des textes*/
#conteneur
{
position : absolute;
left : 6cm;
top : 1.5cm;
padding : 20px;
width : 400px;
text-align : justify;
background-color : rgb(255,255,255);
font-family : Verdana;
font-size : 9pt;
color : rgb(0,0,0);
line-height : 150%;
}

h2
{
font-size : 14pt;
text-align : center;
}

h3
{
margin-top : 30px;
font-size : 12pt;
color : rgb(150,0,0);
margin-bottom : -10px;
}

h4
{
color : rgb(150,0,0);
margin-bottom : 5px;
font-size : 11pt;
}

.pageNo
{
font-size : 9pt;
color : rgb(0,0,150);
text-align : center;
}

.longdiv
{
height : 500px;
}

/* style par défaut des liens */
a:link {color : rgb(150,0,0); font-weight : bold; font-style : normal; text-decoration : none; }
a:visited {color : rgb(0,150,0); font-weight : bold; font-style : normal; text-decoration : none;}
a:hover {color : rgb(0,0,200); text-decoration : underline}
a:active {color : rgb(150,0,0); font-weight : bold; font-style : normal; text-decoration : none;}

Première page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple033</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Style33.css" />

</head>

<body>

<div id="conteneur">

<h2>Titre du document</h2>

<h3>Table des matières</h3>
<p>
<a href="#par1">Paragraphe 1</a><br/>
<a href="#par2">Paragraphe 2</a><br/>
<a href="#par3">Paragraphe 3</a><br/>
<a href="page034.html#par4">Paragraphe 4</a><br/>
<a href="page034.html#par5">Paragraphe 5</a><br/>
<a href="page034.html#par6">Paragraphe 6</a><br/>
</p>

Texte d'introduction, texte d'introduction, texte d'introduction
Texte d'introduction, texte d'introduction, texte d'introduction
Texte d'introduction, texte d'introduction, texte d'introduction
Texte d'introduction, texte d'introduction, texte d'introduction
Texte d'introduction, texte d'introduction, texte d'introduction


<h4><a id="par1"></a>Paragraphe 1 :</h4>
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe

<h4><a id="par2"></a>Paragraphe 2 :</h4>
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe

<h4><a id="par3"></a>Paragraphe 3 :</h4>
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe

<p class="pageNo">- page 1 -</p>

<div class="longdiv">
</div>

</div>

</body>

</html>

Deuxième page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple034</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Style33.css" />

</head>

<body>

<div id="conteneur">

<h4><a id="par4"></a>Paragraphe 4 :</h4>
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe

<h4><a id="par5"></a>Paragraphe 5 :</h4>
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe

<h4><a id="par6"></a>Paragraphe 6 :</h4>
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe
Texte du paragraphe, texte du paragraphe, texte du paragraphe

<p class="pageNo">- page 2 -</p>

<div class="longdiv">
</div>

</div>

</body>

</html>


Afficher cette page




suivant