Le code HTML
Voici un code HTML simple qui affiche une page contenant deux calques:
- un calque contenant les onglets identifiés par l'id "onglets"
- un calque qui contient le texte de la page indiqué par l'onglets
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <link rel="stylesheet" href="style/onglets.css" type="text/css" />
7 <title></title>
8 </head>
9
10 <body>
11 <div id="conteneur">
12 <div id="onglets">
13 <ul>
14 <li id="courant"><a href="page1.html">Onglet 1</a></li>
15 <li><a href="page2.html">Onglet 2</a></li>
16 <li><a href="page3.html">Onglet 3</a></li>
17 </ul>
18 </div>
19 <div id="texte">
20 texte que vous voulez mettre dans page1.html
21 </div>
22 </div>
23 </body>
24 </html>
page1.html
Commentaires sur le code:
- ligne 6: nous lions la page HTML à la feuille de style "onglets.css" située dans le répertoire "style"
- ligne 11: cette balise "div" sert de conteneur (d'où l'identifiant), grâce à ce calque nous pourrons placer précisément les calques "onglets" et "texte" (voir le CSS)
- ligne 12: nous avons une balise div identifiée par l'identifiant "onglet". C'est dans cette div que nous aurons nos onglets. (la balise div est fermée ligne 17)
- lignes 13 à 17: constitution de nos onglets. Il s'agit en fait d'une liste de type "lu", chaque balise "li" représente un onglet.
Dans chacune des balises "li" on doit avoir un lien (i.e. une balise de type "a"). - ligne 14: la balise "li" de cette ligne possède un attribut "id" dont la valeur est "courant". Cette identifiant nous permettera d'identifier l'onglet de la page en cours afin de lui donner un style différent.
- ligne 20: Ici le texte qui doit figurer lorsque l'on a cliqué sur l'onglet comportant l'identifiant "courant".
Cliquez ici si vous voulez voir l'affichage du fichier "page1.html" sans le lien avec la feuille de style (i.e. brut)
Voyons comment transformer les items de cette liste, en onglets, avec les feuilles de styles. Pour cela cliquez sur l'onglet "Feuille de style" ci-dessus.