éditer

Structurer la page web (partie 1)

Pour la création de notre site web nous allons utiliser le xhtml et les css, pourquoi ne pas utiliser du html classique ? et bien parce que le xhtml est une évolution du html et qu'il faudra bien y passer un jour ou l'autre, alors autant commencer tout de suite et prendre de bonnes habitudes de plus vous allez voir que le xhtml et les css sont vraiment très simple à utiliser, peut être même plus simple que le html classique.

Peut être le savez vous déjà mais une page web est un document texte tout bête, comprenant le texte de votre page bien sûr mais aussi des balises qui vont permettent d'ordonner votre texte.. des balises c'est quoi ça ? je n'en ai jamais vu sur les pages web ! et oui en effet les balises ne s'affichent pas dans le navigateur web, elles sont interprétées par le navigateur, une balise est généralement un mot placé entre les caractères < et > les balises web fonctionnent la plupart du temps par paire : une balise ouvrante et une balise fermante on trouve aussi parfois des attributs dans la balise ouvrante, la balise fermante par contre se reconnaît au caractère / placé à l'intérieur exemple :

<body>
</body>

Dans cet exemple on peut voir une balise body ouvrante suivi d'une balise body fermante, on verra par la suite que certaine balise ne fonctionnent pas par paire, ce sont des balises qui ne sont pas conçu pour contenir du texte.

Une page web va contenir de nombreuses balises qui vont permettre au navigateur web de savoir comment il doit gérer l'information, ainsi un document xhtml commence ainsi :

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr" lang="fr">
<head>
  <title>Le titre de la page</title>
  <link rel="stylesheet" href="style.css" type="text/css" title="defaut" />
</head>

<body>
</body>

</html>

Tout ça semble complexe, mais c'est en fait très simple on va décortiquer tout ça.. d'abord la première ligne :

<?xml version="1.0" encoding="iso-8859-1"?>

Le xhtml étant un mélange du html et du xml (un autre système que nous n'aborderons pas ici) il faut donc indiquer au navigateur (par le biais d'une balise xml) le type d'encodage que nous allons utiliser dans notre page web, c'est à dire le jeu de caractère, puisque nous allons faire une page web en français on utilise le jeu de caractère français définit par le code : iso-8859-1 on le retrouve donc comme attribut dans la balise xml, cette ligne est très importante donc on n'oublie pas de la mettre au début de toutes nos page web.

Ensuite viens le doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Cette ligne aussi est très importante elle va indiquer au navigateur quel jeu de balises web nous utilisons, comme on réalise notre page en xhtml on indique le doctype qui correspond au xhtml, notez que cette balise est en majuscule, c'est à ma connaissance la seule balise que l'on peut écrire en majuscule, on va maintenant passer à une balise ouvrante que l'on refermera à la toute fin de notre document, cette balise c'est la balise html :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

La balise html comprend quelques attributs hérité du xml et qui vont indiquer le langage utilisé dans la page web, ici le français, puis on divise en deux le document web, pour commencer une partie head :

<head>
  <title>Le titre de la page</title>
  <link rel="stylesheet" href="style.css" type="text/css" title="defaut" />
</head>

La partie head va comprendre tout ce qui ne s'affiche pas dans la fenêtre du navigateur web, c'est à dire le titre qui va s'afficher dans la barre de titre de la fenêtre du navigateur, mais aussi les informations comme la feuille de style et les scripts utilisés par la page, ici vous pouvez voir que l'on utilise la balise title pour définir le titre de la page, et on utilise la balise link pour indiquer que l'on va utiliser la feuille de style style.css ensuite vient la partie qui va contenir le corps de notre page web :

<body>
</body>

C'est entre ces balises body que l'on va placer tout ce qui doit être affiché dans la page du navigateur web, enfin on ferme le document en utilisant la balise html fermante :

</html>

Rien de bien sorcier dans tout ça..

Structurer la page web (Partie 2)

On va passer à la pratique et créer notre première page web, pour commencer lancer Web Notepad, par défaut Web Notepad ouvre une page vierge avec les balises <HTML> et </HTML>, c'est pô bien d'abord on doit toujours écrire les balises en minuscules et ensuite il manque toutes les balises vues juste avant, mais Web Notepad n'est pas parfait et on va faire avec, effacez le contenu de cette page par défaut et à la place tapez ceci :

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr" lang="fr">
<head>
  <title>Le titre de la page</title>
  <link rel="stylesheet" href="style.css" type="text/css" title="defaut" />
</head>

<body>
</body>

</html>

Vous aurez peut être remarquez que c'est notre exemple vue dans la page précédente, notez que Web Notepad met en couleur les balises ce qui est bien pratique pour relire le code.

On dispose maintenant d'une base pour notre page web, il reste à la remplir avec du contenu ordonné avec des balises, comme tout le contenu doit être entre les balises <body> et </body> c'est entre ces balises que l'on va écrire, pour nous faciliter la future mise en page on va diviser notre document en plusieurs blocs, pour ce faire on utilise les balises <div> et </div>, on commence par définir un bloc qui va contenir tout notre contenu mais pour différencier les divers blocs que l'on va créer on va les nommer avec un attribut particulier id="", on va le nommer notre bloc global ce qui donne :

<body>
   <div id="global">
   </div>
</body>

Remarquez que j'ai décalé vers la droite les nouvelles entrées, cela permet de faciliter la relecture du code, c'est une bonne habitude à prendre, dans le bloc nommé "global" on va placer 5 autres blocs les uns en dessous des autres ce qui va nous permettre de séparer les 5 principales partie de la page à savoir : l'en-tête, le menu horizontal, le corps de la page, le menu vertical et enfin le pied de page ce qui nous donne :

<body>
   <div id="global">
      <div id="entete">
          </div>
      <div id="menuhorizontal">
          </div>
      <div id="corps">
          </div>
      <div id="menuvertical">
          </div>
      <div id="pieddepage">
          </div>
   </div>
</body>

Le titre du site

Dans ces blocs on va placer le contenu qui convient, pour commencer l'en-tête... l'en-tête du site doit contenir le titre du site, en xhtml les titres sont définit avec une série de balises allant de <h1> et </h1> jusqu'à <h6> et </h6> c'est à dire qu'il y à 6 niveaux de titre et comme il faut ordonner les informations de la page on va les utiliser dans l'ordre. Le titre du site étant le plus important de la page on va le définir avec les balises <h1> et </h1> ce qui nous donne :

<body>
   <div id="global">
      <div id="entete">
         <h1>Le titre du site</h1>
          </div>

      <div id="menuhorizontal">
          </div>

      <div id="corps">
          </div>

      <div id="menuvertical">
          </div>

      <div id="pieddepage">
          </div>
   </div>
</body>

Voilà vous venez de définir le titre de votre site, c'est pô dur n'est-ce pas ? alors on continue..

Le menu horizontal

Le menu horizontal est un menu et en xhtml les menus sont ordonnés en liste, on va donc voir le principe de la liste en xhtml afin de faire notre menu, il existe plusieurs type de liste on va se préoccuper que de la liste simple car c'est celle qui va nous servir, pour faire cette liste on à besoin de 2 types de balises, les balises <ul> et </ul> qui définissent l'ensemble de la liste et les balises <li> et </li> qui définissent chaque ligne de la liste, voici ce que ça donne :

<ul>
   <li>Premiere ligne de la liste</li>
   <li>Seconde ligne de la liste</li>
   <li>Troisième ligne de la liste</li>
   <li>Quatrième ligne de la liste</li>
</ul>

Bon là on à une liste de mots classique mais nous on veux une liste de liens car notre menu est composé de liens hypertexte.. alors comment on fait un lien en xhtml et bien exactement comme en html c'est à dire ainsi :

<a href="fichier.htm">Texte du lien</a>

pas trop difficile à faire un lien ? on remarque l'attribut href="" qui permet d'indiquer le nom du fichier à ouvrir lorsque le lien est cliqué par l'internaute, mais là on va ajouter un truc à notre lien, on va lui ajouter un attribut supplémentaire qui va nous permettre par la suite de le mettre en forme indépendamment des autres liens de la page, on utilise donc l'attribut class="" qui permet d'indiquer que la balise appartient à une classe particulière que l'on définira plus tard dans la feuille de style, pour notre menu horizontal on regroupe tout ça ce qui nous donne :

<body>
   <div id="global">
      <div id="entete">
         <h1>Le titre du site</h1>
          </div>

      <div id="menuhorizontal">
             <ul>
                <li><a href="fichier1.htm">Texte du lien 1</a></li>
                <li><a href="fichier2.htm">Texte du lien 2</a></li>
                <li><a href="fichier3.htm">Texte du lien 3</a></li>
                <li><a href="fichier4.htm">Texte du lien 4</a></li>
             </ul>
          </div>

      <div id="corps">
          </div>

      <div id="menuvertical">
          </div>

      <div id="pieddepage">
          </div>
   </div>
</body>

Voilà pour notre menu, évidement vous pouvez ajouter des lignes au besoin, maintenant passons au corps de notre page web, on va y mettre du texte en paragraphe et des titres.

Le corps du site

On commence par un titre, on à déjà utilisé les balises <h1> et </h1> pour le titre du site donc on va utiliser les <h2> et </h2> et pour les paragraphes on utilise les balises <p> et </p> ensuite pour faciliter la mise en page prochaine on ajoute un attribut class="" aux balises des paragraphes on va les nommer "texte", ce qui nous donne :

<body>
   <div id="global">
      <div id="entete">
         <h1>Le titre du site</h1>
          </div>

      <div id="menuhorizontal">
             <ul>
                <li><a href="fichier1.htm">Texte du lien 1</a></li>
                <li><a href="fichier2.htm">Texte du lien 2</a></li>
                <li><a href="fichier3.htm">Texte du lien 3</a></li>
                <li><a href="fichier4.htm">Texte du lien 4</a></li>
             </ul>
          </div>

      <div id="corps">
        <h2>Titre du paragraphe</h2>
        <p class="texte">Voici le texte du premier paragraphe de mon premier
        site web en xhtml et css.</p>
          </div>

      <div id="menuvertical">
          </div>

      <div id="pieddepage">
          </div>
   </div>
</body>

Plutôt simple à faire..

Le menu vertical

on passe au menu vertical de notre site, comme c'est encore un menu on utilise encore une liste et comme on souhaite faire quelque chose de propre on va utiliser 3 listes avec à chaque fois un titre, pour le titre on va utiliser les balises <h3> et </h3> voilà ce que ça donne :

<body>
   <div id="global">
      <div id="entete">
         <h1>Le titre du site</h1>
          </div>

      <div id="menuhorizontal">
             <ul>
                <li><a href="fichier1.htm">Texte du lien 1</a></li>
                <li><a href="fichier2.htm">Texte du lien 2</a></li>
                <li><a href="fichier3.htm">Texte du lien 3</a></li>
                <li><a href="fichier4.htm">Texte du lien 4</a></li>
             </ul>
          </div>

      <div id="corps">
        <h2>Titre du paragraphe</h2>
        <p class="texte">Voici le texte du premier paragraphe de mon premier
        site web en xhtml et css.</p>
          </div>

      <div id="menuvertical">
        <h3>Rubrique 1</h3>
        <ul>
           <li><a href="fichierA.htm" class="lienmenuvertical">Lien 1</a></li>
           <li><a href="fichierB.htm" class="lienmenuvertical">Lien 2</a></li>
           <li><a href="fichierC.htm" class="lienmenuvertical">Lien 3</a></li>
           <li><a href="fichierD.htm" class="lienmenuvertical">Lien 4</a></li>
        </ul>
        <h3>Rubrique 2</h3>
        <ul>
           <li><a href="fichierE.htm" class="lienmenuvertical">Lien 5</a></li>
           <li><a href="fichierF.htm" class="lienmenuvertical">Lien 6</a></li>
           <li><a href="fichierG.htm" class="lienmenuvertical">Lien 7</a></li>
           <li><a href="fichierH.htm" class="lienmenuvertical">Lien 8</a></li>
        </ul>
        <h3>Rubrique 3</h3>
        <ul>
           <li><a href="fichierI.htm" class="lienmenuvertical">Lien 9</a></li>
           <li><a href="fichierJ.htm" class="lienmenuvertical">Lien 10</a></li>
           <li><a href="fichierK.htm" class="lienmenuvertical">Lien 11</a></li>
           <li><a href="fichierL.htm" class="lienmenuvertical">Lien 12</a></li>
        </ul>
          </div>

      <div id="pieddepage">
          </div>
   </div>
</body>

Le pied de page

Enfin on arrive au pied de page, la encore rien de compliqué, on utilise juste des balises de paragraphe avec un attribut class="" pour la prochaine mise en page ce qui nous donne :

<body>
   <div id="global">
      <div id="entete">
         <h1>Le titre du site</h1>
          </div>

      <div id="menuhorizontal">
             <ul>
                <li><a href="fichier1.htm">Texte du lien 1</a></li>
                <li><a href="fichier2.htm">Texte du lien 2</a></li>
                <li><a href="fichier3.htm">Texte du lien 3</a></li>
                <li><a href="fichier4.htm">Texte du lien 4</a></li>
             </ul>
          </div>

      <div id="corps">
        <h2>Titre du paragraphe</h2>
        <p class="texte">Voici le texte du premier paragraphe de mon premier
        site web en xhtml et css.</p>
          </div>

      <div id="menuvertical">
        <h3>Rubrique 1</h3>
        <ul>
           <li><a href="fichierA.htm" class="lienmenuvertical">Lien 1</a></li>
           <li><a href="fichierB.htm" class="lienmenuvertical">Lien 2</a></li>
           <li><a href="fichierC.htm" class="lienmenuvertical">Lien 3</a></li>
           <li><a href="fichierD.htm" class="lienmenuvertical">Lien 4</a></li>
        </ul>
        <h3>Rubrique 2</h3>
        <ul>
           <li><a href="fichierE.htm" class="lienmenuvertical">Lien 5</a></li>
           <li><a href="fichierF.htm" class="lienmenuvertical">Lien 6</a></li>
           <li><a href="fichierG.htm" class="lienmenuvertical">Lien 7</a></li>
           <li><a href="fichierH.htm" class="lienmenuvertical">Lien 8</a></li>
        </ul>
        <h3>Rubrique 3</h3>
        <ul>
           <li><a href="fichierI.htm" class="lienmenuvertical">Lien 9</a></li>
           <li><a href="fichierJ.htm" class="lienmenuvertical">Lien 10</a></li>
           <li><a href="fichierK.htm" class="lienmenuvertical">Lien 11</a></li>
           <li><a href="fichierL.htm" class="lienmenuvertical">Lien 12</a></li>
        </ul>
          </div>

      <div id="pieddepage">
         <p class="textepieddepage">Ici le copyright</p>
          </div>
   </div>
</body>

Voilà on à terminé la partie xhtml on va maintenant passer à la feuille de style c'est à dire au fichier style.css

La feuille de style c'est quoi ?

Une feuille de style c'est un fichier texte qui va regrouper des règles de mise en page, c'est à dire que l'on va définir dans ce fichier comment doivent se comporter les différentes balises xhtml que l'on à utilisé dans notre page web, pour redéfinir une balise on procède de cette manière :

nomdelabalise {
        caracteristique: info ;
        caracteristique: info ;
        caracteristique: info ;
        }

On peux aussi redéfinir les attributs id="" de la page web pour cela on procède de cette manière :

#nomduid {
        caracteristique: info ;
        caracteristique: info ;
        caracteristique: info ;
        }

Enfin on peux redéfinir les attribut class="" de la page web on procède alors de cette manière :

.nomdelaclass {
        caracteristique: info ;
        caracteristique: info ;
        caracteristique: info ;
        }

toutes ces règles sont placées les unes à la suite des autres dans la feuille de style, de nombreuse caractéristique existe, permettant d'influer sur de nombreux paramètres des balises, on va en voir quelques-unes unes et vous verrez que c'est vraiment très simple à utiliser...

Les balises html et body

Pour commencer ouvrez un nouveau document vierge dans Web Notepad et effacez les balises HTML et /HTML ajoutées par défaut, dans la feuille de style on n'utilise pas de balise de mise en page car ce n'est pas un document destiné à être affiché, on va redéfinir les balises html et body comme on va leur donner les même caractéristiques on va les grouper ce qui nous donne :

html, body {
        }

On va retirer les marges par défaut de la page web, il existe deux types de marges, une marge externe que l'on nomme margin et une marge interne que l'on nomme padding, on va leur spécifier des valeurs de 0 pixels ce qui va nous donner :

html, body {
        margin: 0px ;
        padding: 0px ;
        }

Ensuite on va définir la police de caractère utilisée dans la page web, on va utiliser la fonte verdana, on va aussi spécifier une taille de 9 point par defaut ce qui donne :

html, body {
        margin: 0px ;
        padding: 0px ;
        font-family: verdana, arial, sans-serif ;
        font-size: 9pt ;
        }

Comme l'on souhaite centrer le site sur la page on va ajouter une caractéristique qui va centrer tout le texte dans la page :

html, body {
        margin: 0px ;
        padding: 0px ;
        font-family: verdana, arial, sans-serif ;
        font-size: 9pt ;
        text-align: center ;
        }

Maintenant on définit la couleur de fond de la page et la couleur du texte de la page ce qui donne :

html, body {
        margin: 0px ;
        padding: 0px ;
        font-family: verdana, arial, sans-serif ;
        font-size: 9pt ;
        text-align: center ;
        background-color: #ffffff ;
        color: #000000 ;
        }

Voilà vous venez de redéfinir la balise html et la balise body, enregistrez le fichier sous le nom style.css et placez le dans le même dossier que index.htm

Le bloc global

On continu, il y a pas mal de style à faire, passons au bloc "global" que l'on a définit tout au début de notre page web, souvenez vous ce bloc contient l'ensemble de notre site, on va lui donner une largeur fixe de 760 pixels, ainsi le site pourra être affiché sur des écran en 800 x 600 pour spécifier la largeur on utilise la caractéristique width ce qui donne :

#global {
        width: 760px ;
        }

Ce bloc global on va le centrer dans la page en utilisanr les marge de droite et de gauche de cette manière :

#global {
        width: 760px ;
        margin-right: auto ;
        margin-left: auto ;
        }

Ainsi la marge de gauche et la marge de droite vont s'ajuster automatiquement et placer le bloc toujours au centre horizontalement. Pour le détacher du haut de la page on va ajouter un marge en haut de 10 pixels et pour laisser un peu de place en bas ou ajoute une marge de 15 pixels, on va aussi indiquer que le texte dans le bloc doit être aligné sur la gauche, enfin on donne une couleur de fond blanche et une bordure de couleur #369 et d'un pixel de large ce qui nous donne :

#global {
        width: 760px ;
        margin-right: auto ;
        margin-left: auto ;
        margin-top: 10px ;
        margin-bottom: 15px ;
        text-align: left ;
        background-color: #ffffff ;
        border: #336699 1px solid ;
        }

Et maintenant l'en-tête

On passe au bloc "entete" qui contient le titre de notre site, on va lui retirer les marges et lui donner une hauteur fixe de 130 pixels avec la caractéristique height ce qui nous donne :

#entete {
        height: 130px ;
        padding: 0px ;
        margin: 0px ;
        }

Voilà pour le bloc "entete" avant de passer à la suite voyons les caracteristiques que l'on à aborder :

  • width
    • Permet de spécifier une largeur à un bloc
  • height
    • Permet de spécifier une hauteur à un bloc
  • margin
    • Permet de définir la marge externe, on peux définir indépendamment les marges haut, bas, droite et gauche avec les caractéristiques margin-top, margin-bottom, margin-right et margin-left
  • padding
    • Permet de définir la marge interne, on peux définir indépendamment les marges haut, bas, droite et gauche avec les caractéristiques padding-top, padding-bottom, padding-right et padding-left
  • text-align
    • Permet de définir comment le texte est aligné (à gauche, à droite ou centrer)
  • background-color
    • Permet de définir la couleur de fond d'un bloc
  • color
    • Permet de définir la couleur du contenu d'un bloc
  • font-family
    • Permet de définir la police de caractère utilisé dans un bloc
  • font-size
    • Permet de spécifier la taille du texte dans un bloc
  • border
    • Permet de définir une bordure à un bloc en définissant sa couleur, sa taille et son style

Le bloc menuhorizontal

On continu avec le bloc menuhorizontal qui contient notre premier menu on lui donne une hauteur de 20 pixels on centre le contenu, on définit une couleur de fond ainsi qu'une couleur de texte, on ajoute une bordure et on définit des marges ce qui nous donne :

#menuhorizontal {
        height: 20px ;
        padding: 0px ;
        padding-bottom: 4px ;
        margin-bottom: 15px ;
        margin-left: 4px ;
        margin-right: 4px ;
        text-align: center ;
        background-color: #F5F5F5 ;
        color: #336699 ;
        border: #336699 1px solid ;
        }

Rien de bien sorcier la dedans, comme le bloc menuhorizontal contient une liste souvenez vous, on va redéfinir les balise de cette liste pour qu'elle s'affiche horizontalement et non pas verticalement comme c'est le cas par defaut pour cela on va ajouter sous le style du menuhorizontal la redéfinition des balise de listes ainsi :

#menuhorizontal {
        height: 20px ;
        padding: 0px ;
        padding-bottom: 4px ;
        margin-bottom: 15px ;
        margin-left: 4px ;
        margin-right: 4px ;
        text-align: center ;
        background-color: #F5F5F5 ;
        color: #336699 ;
        border: #336699 1px solid ;
        }
#menuhorizontal ul li{
        margin-left: 4px ;
        font-size: 10pt;
        font-weight: bold;
        float:left;
        }

Qu'est-ce que l'on remarque, on a réutiliser le #menuhorizontal et on la fait suivre par les balises ul et li à redéfinir ainsi on redéfinit que les balises ul et li qui sont dans le bloc "menuhorizontal", on remarque aussi deux nouvelles caractéristique d'abord font-weight qui permet de placer le texte en gras et la caracteristique float permet de changer la façon dont s'aligne les différent bloc les un par rapport aux autres ici on indique que l'ont souhaite que chaque élément de la liste soit aligné en ligne sur la gauche.

Le bloc corps

On arrive au bloc corps qui contient le gros du contenu de notre page web on va lui spécifier une largeur de 555 pixels, on va le placer sur la droite à l'aide de la caractéristique float pour pouvoir laisser de la place à gauche pour notre menu vertical on va lui ajouter une marge de 4 pixel à droite pour ne pas le coller contre la bordure de droite et on lui ajoute une marge en bas pour laisser de l'espace sous le bloc, enfin on termine avec une couleur de fond et une bordure ce qui nous donne :

#corps {
        width: 555px ;
        margin-bottom: 10px ;
        margin-right: 4px ;
        background-color: #F5F5F5 ;
        float: right ;
        border: #336699 1px solid ;
        }

Le bloc menuvertical

Ce bloc contient notre menu vertical, il se place à gauche du bloc corps comme le bloc global fait 760 pixels et que le bloc corps prend 555 pixels on va faire spécifier une largeur de 185 pixels (je prend en compte les marge que l'on à ajouté), pour qu'il ne soit pas coller à la bordure de gauche on lui ajoute une marge de 4 pixels à gauche on définit la bordure, la couleur de fond et une marge en bas ce qui nous donne :

#menuvertical {
        width: 185px ;
        padding-bottom: 15px ;
        margin-left: 4px ;
        background-color: #F5F5F5 ;
        border: #336699 1px solid ;
        }

C'est pas trop difficile ? on passe au pied de page...

Le bloc pied de page

Là encore rien de compliqué on dimensionne, on place des marges on centre le texte on définit une bordure et une couleur de fond... par contre remarquez l'arrivé d'une nouvelle caractéristique "clear" qui va permettre d'annuler l'effet créer par la caractéristique float

#pieddepage {
        height: 18px ;
        padding: 0px ;
        margin-top: 5px ;
        margin-bottom: 5px ;
        margin-left: 4px ;
        margin-right: 4px ;
        text-align: center ;
        background-color: #F5F5F5 ;
        border: #336699 1px solid ;
        clear: both ;
        }

Voilà pour nos principaux blocs, on va maintenant passer à la redéfinition des autres balises que l'on à utilisé

La balise des paragraphes

Pour nos paragraphes on à utilisé la balise p on va maintenant mettre cette balise en forme, ensuite on s'occupera de la class="" que l'on à utilisé sur la balise p dans notre document xhtml, on va donc commencer par retirer les marges de la balise p et on va lui assigner une taille de police par défaut ce qui nous donne :

p {
        padding: 0px ;
        margin: 0px ;
        font-size: 0.85em ;
        }

vous pouvez voir que l'on à utilisé une valeur non pas en point mais en "em" pour spécifier la taille de la fonte, plusieurs formats sont possible pt, em, px, on s'occupe maintenant des classes que l'on a assigné à notre balise p, d'abord la classe pour le texte classique :

.texte {
        padding: 10px ;
        margin: 0px ;
        }

on a retiré les marges externe et pour délimiter les paragraphes on a ajouté une marge interne de 10 pixels, passons à la classe utilisée par le pied de page :

.textepieddepage {
        padding: 0px ;
        padding-top: 2px ;
        margin: 0px ;
        color: #369 ;
        }

on a donc retiré les marges puis on à ajouté une marge en haut de 2 pixels et enfin on à changé la couleur du texte, rien de nouveau jusqu'ici..

Les balises des listes

On a déjà redéfinit les balises pour la liste du menu horizontal mais les autres liste de la page ne sont pas mis en forme, on va donc le faire maintenant, on à donc 2 types de balise à revoir la balise ul et la balise li :

ul {
        list-style-type: none ;
        padding: 0px ;
        margin: 0px ;
        margin-top: 5px ;
        margin-left: 20px ;
        }
li {
        list-style-image : none ;
        padding-top: 0px ;
        margin-top: 0px ;
        color: #9D9D9D ;
        font-size: 0.85em ;
        }

Remarquez la caractéristique list-style-type qui permet de spécifier la puce qui doit s'afficher ou non devant chaque ligne de la liste ici on souhaite aucune puce donc on place cette caractéristique à none, pour le reste rien de complexe on retire des marges on en ajoute on choisi la taille du texte et sa couleur..

Les titres

On à utilisé 3 types de balises pour nos titre h1, h2 et h3 il faut maintenant les mettre en forme on commence par le titre du site donc la balise h1 :

h1 {
        padding: 0px ;
        padding-left: 15px ;
        padding-top: 25px ;
        margin: 0px ;
        font-size: 40pt ;
        font-weight: bold ;
        }

On retire des marges, on en ajoute, on change la taille du texte et on le met en gras, c'est simple non ? ensuite la balise h2 :

h2 {
        padding: 0px ;
        padding-left: 5px ;
        padding-right: 5px ;
        padding-bottom: 2px ;
        margin-left: 5px ;
        margin-right: 10px ;
        margin-bottom: 0px ;
        margin-top: 5px ;
        color: #336699 ;
        font-size: 12pt ;
        font-weight: bold ;
        border-bottom: #336699 2px solid ;
        }

La même chose les marges, la taille et la couleur du texte.. notez que l'on utiliser la caractéristique border-bottom pour faire une bordure sous le titre, notre titre est donc souligné par un trait de 2 pixels, enfin on passe à la balise h3 qui définit nos titre du menu vertical :

h3 {
        padding-left: 5px ;
        padding-right: 5px ;
        padding-bottom: 0px ;
        padding-top: 5px ;
        margin-left: 5px ;
        margin-right: 10px ;
        margin-bottom: 0px ;
        margin-top: 2px ;
        color: #336699 ;
        font-size: 12pt ;
        font-weight: bold ;
        border-bottom: #336699 2px solid ;
        }

Encore une fois la même chose cela en devient presque lassant, les marges, le texte, les couleurs la bordure... voilà sauvegardez votre feuille de style sous le nom style.css et placez là dans le même dossier que votre page index.htm

voici ce que l'on obtient : design simple puis en ajoutant des images et des couleurs on peut arrivé à cela : design simple avec image