Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Création d'un site web en xhtml et css

Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.Compatible XHTML. Cliquer pour en savoir plus sur les compatibilités.Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Par niko (Nicolas Coevoet), le 09 février 2006

Dans un premier temps, nous oublierons complétement la partie visuel, pour se concentrer sur la structure de la page xhtml.

Déclaration Xml

On part du principe, que l'on veut faire un site en xhtml-strict, normalement, choisir le xhtml-strict selon les normes oblige de servir le document sous la forme xhtml+xml, mais ie ne permet pas de lire ce type de document, donc nous partirons du principe que la page sera servi sous la forme classique text/html.

Nous utiliserons donc la dtd suivante :

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

Elle spécifie que la page utilise le modéle xhtml-strict.

Un autre point important est la déclaration xml, qui spécifie en xml, l'encodage de la page, rajouter cette déclaration fait passer ie en mode quirk, chose à éviter pour éviter des problèmes de mise en page par la suite :

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Donc, nous omettrons cette déclaration xml et spécifierons la langue et l'encodage juste après :

 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Notez bien que nous servons la page en text/html et spécifions l'encodage du document en même temps.

Structure

Comme vous la savez surement, en simplifiant, une page html est hierarchisée de cette manière :

 <html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
 </html>

Donc, nous allons faire de même :

 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
 </head>
 <body>
 </body>
 </html>

Il est temps de construire sémantiquement notre document, pour cela connaitre la signification de chaque balise html est primordial.

On va partir du postulat, que la structure d'un site web, c'est un élément en haut de page, un menu, le contenu et un pied de page, on pourra donc créer 4 blocs principaux :

 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
 </head>
 <body>
   <div id="entete"></div>
   <div id="menu"></div>
   <div id="contenu"></div>
   <div id="pied"></div>
 </body>
 </html>

Jusqu'à là, il n'y a aucune sémantique, car les éléments de type div et span n'ont aucune valeur sémantique. J'utilise des id, les id sont uniques, il ne peut y avoir qu'une seule id par page, à la différence des class, que l'on peut utiliser autant qu'on veut.

Que peut-il être intérressant d'avoir en entête ? Le titre du site. Qu'est ce qu'un menu ? souvent une liste de liens. Le contenu ? souvent le titre d'un article, suivi de son contenu. Le pied de page ? quelques liens …

On reprends donc notre code précédent.

 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
 </head>
 <body>
   <div id="entete">
    <h1>
     <img src="" alt="Le titre de mon site"/>
    </h1>
   </div>
   <div id="menu">
    <ul>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
    </ul>
   </div>
   <div id="contenu">
    <h2>Le titre de mon article</h2>
    <p>Le contenu de mon article</p>
   </div>
   <div id="pied">
    <ul>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
    </ul>
   </div>
 </body>
 </html>

On peut déja voir ce que cela donne.

Et faire quelques remarques :

  • Je vois que dans “entete”, il n'y a qu'un seul élement, donc pourquoi utiliser un bloc supplémentaire pour l'encadrer ? De plus, je n'aurais qu'un seul élément h1, donc pourquoi lui donner un identifiant unique ( id ).
  • Le lien vers l'image n'est pas bon. Or, étant donné que j'ai mis un texte alternatif dans le alt, celui-ci sera utilisé à la place de celle-çi.
  • Je n'ai pas de sous-rubrique dans le menu pour l'instant.

On corrige donc, en fonction de ces remarques :

 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
 </head>
 <body>
   <h1>
     <img src="" alt="Le titre de mon site"/>
   </h1>
   <div id="menu">
    <h3>rubrique 1</h3>
    <ul>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
    </ul>
    <h3>rubrique 2</h3>
    <ul>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
    </ul>
   </div>
   <div id="contenu">
    <h2>Le titre de mon article</h2>
    <p>Le contenu de mon article</p>
   </div>
   <div id="pied">
    <ul>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
    </ul>
   </div>
 </body>
 </html>

Notez que j'ai utilisé h3 pour définir les titres des rubriques, car je pars du principe que le titre de l'article ( le contenu ) est plus important que ceux des rubriques.

Application d'un style

On commence à avoir quelque chose d'intérressant. La structure est bonne, il est donc temps de passer à l'habillage visuel de cette page, pour cela, nous allons ajouter un lien vers un fichier css plutôt que de l'écrire directement dans la page :

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 </head>

Plutôt que :

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
  <style type="text/css">
   <!--
 
    -->
  </style>
 </head>

Car cela évite de recharger à chaque fois l'ensemble des éléments de style, et permet de mettre à jour tout les pages d'un seul coup en changeant le contenu du fichier css.

Les css sont beaucoups plus complexes à appréhender que le html, qui reste somme toute, trés simple à apprendre. Complexe pourquoi ? parce qu'il existe énormement de propriétés, énormément de manière de séléctionner un élément. Le principal problème étant le fait que le rendu sera trés différent selon le navigateur utilisé, et qu'il faudra composer avec cela.

L'intéret principal de créer un site en xhtml + css, c'est de séparer le contenu (xhtml) et sa structure sémantique, de sa présentation (css). On y gagne en temps de mise à jour (toutes les pages changent d'un coup), en légéreté du code, en lisibilité, et en accessibilité ( nous y reviendrons ).

Editons donc notre fichier style.css, commençons par spécifier la police qui sera utilisée dans tout le document, sa taille, la couleur de fond et du texte, par défaut. Pour cela, on sélectionne body et on lui donne les informations qui nous intérresse.

 body {
  font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
  color:black;
  font-size:1em;
  background-color:#cccccc;
 }

Quelques petites remarques, font-family spécifie la police qui sera utilisée, si Trebuchet MS n'est pas présente sur le systéme d'exploitation, Bitstream Vera Sans sera utilisée, etc …

On remarque aussi que j'ai spécifié font-size en unité em, mais qu'est ce donc ? Mettre la police en unité em, permet de laisser à l'internaute le choix de la taille de sa police, ainsi celle-ci s'adaptera aux préférences de l'utilisateur, chose primordiale pour l'accessibilité du site.

Em est la hauteur d'un M majuscule, donc si je met 0.8 em, on obtiendra 80% de la taille du texte par défaut. Notez qu'il existe aussi ex, qui représente la largeur d'un X.

On regarde ce que donne l'exemple. On sait que par défaut l'élement body a une marge, on va donc l'enlever.

 body {
  font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
  color:black;
  font-size:1em;
  background-color:#cccccc;
  margin:0;
 }

Nous aimerions que l'ensemble de notre page soit centrée horizontalement. Pour cela, nous allons rajouter une balise dans le code html, qui englobera l'ensemble.

 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ma première page en xhtml-strict</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 </head>
 <body>
   <div id="total">
    <h1>
      <img src="" alt="Le titre de mon site"/>
    </h1>
    <div id="menu">
     <h3>rubrique 1</h3>
     <ul>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
     </ul>
     <h3>rubrique 2</h3>
     <ul>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
     </ul>
    </div>
    <div id="contenu">
     <h2>Le titre de mon article</h2>
     <p>Le contenu de mon article</p>
    </div>
    <div id="pied">
     <ul>
      <li><a href="#" title="">lien</a></li>
      <li><a href="#" title="">lien</a></li>
     </ul>
    </div>
   </div>
 </body>
 </html>

La spécification du w3c, dit que pour centrer un élément de type bloc ( comme div ), il faut mettre margin-left:auto;margin-right:auto;, mais ie n'est pas capable de comprendre cela, text-align:center; est utilisé pour centrer le texte, dans la spécification, or ie, centre tout type d'élement avec, qu'à cela ne tienne :

 body {
  font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
  color:black;
  font-size:1em;
  background-color:#cccccc;
  margin:0;
 }
 
 #total {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
 }

Nous avons donc tout nos éléments centrés, mais comme nous n'avons spécifié aucune largeur à notre bloc total ( notez que nous avons utiliser # pour pouvoir séléctionner le bloc qui a cet id ), c'est pas génial. On part du principe que il faut que le site passe sans probléme sur un écran avec une résolution de 800*600.

Il faut prendre en compte la présence éventuelle d'une barre de défilement à gauche, donc il ne nous reste plus qu'approximativement 780 px, et que l'on ne veut pas que tout soit collé aux bords du navigateur, donc on enleve encore 20px.

On va rajouter une bordure, pour bien voir la taille du bloc total.

 body {
  font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
  color:black;
  font-size:1em;
  background-color:#cccccc;
  margin:0;
 }
 
 #total {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:760px;
  border:1px solid black;
  margin-top:1em;
  margin-bottom:1em;
  background-color:#efefef;
 }

On visionne le résultat.

J'ai rajouté une marge en haut et en bas, pour éviter d'avoir la bordure du haut et bas, collé au navigateur. Le probléme maintenant, c'est que les textes à l'interieur sont eux aussi centrés.

On va donc remettre les bonnes valeurs pour l'ensemble de nos éléments. En les séléctionnant tous en même temps :

 h1, #menu, #contenu, #pied {
  text-align:left;
 }

Wahou, on commence à voir l'intéret des css, plutôt que d'aller dans le code html et de respécifier cela pour chaque élement, là on fait tout d'un coup. Maintenant, on va s'occuper du h1, le titre du site.

 h1 {
  background-color:white;
 }

Aie, encore un élement qui a une marge par défaut. Amusons nous un peu :

 h1 {
  background-color:white;
  margin:0;
  padding-left:0.5em;
  color:#FF6600;
  font-size:0.9em;
  font-weight:normal;
  letter-spacing:0.25em;
  line-height:120px;
  border-bottom:1px solid black;
 }

J'aurais utilisé height au lieu de line-height, mais le texte aurait été collé en haut à gauche, car la taille de la ligne ne change pas, or dans le cas présent, mon texte est bien centré verticalement.

Maintenant on va attaquer la partie plus difficile en css, le positionnement, le plus difficile, car il faut composer avec les rendus différents des navigateurs.

Pour le moment, #menu et #contenu sont de type bloc (div), donc le menu s'affiche d'abord, puis ensuite le contenu, nous allons changer ce comportement, en enlevant du flux normal d'affichage ces 2 élements.

 #menu, #contenu {
  float:left;
 }

Aie. On a tout cassé, c'est le bordel. #menu et #contenu ayant été sorti du flux, #pied reprends la place de ceux-ci. Il faut donc lui dire de s'afficher uniquement aprés que #menu et #contenui aient terminé.

 #pied {
  clear:left;
 }

C'est bien mieux !

Amusons nous maintenant a bien positionner #menu et #contenu (n'oublions pas que nous avons 760px de largeur disponible).

Donc, si on rajoute 1 pixel de bordure, il faut bien le retrancher quelque part. Je part du principe que le contenu sera forcément plus important que le menu, aussi, je lui donne la bordure.

 #menu {
  width:200px;
 }
 #contenu {
  width:559px;
  border-left:1px solid black;
 }

Maintenant, nous allons styler entièrement le menu, comme nous l'avons vu précédement, certains éléments ont par défaut des marges, on va les enlever, et pour qu'on ne touche que les élements du menu, on va se servir de l'effet cascade des css :

 #menu h3 {
  margin:0;
  font-size:0.8em;
  color:#FF6600;
  background-color:#e0e0e0;
  padding:0.5em;
  padding-left:0.25em;
  letter-spacing:0.25em;
  font-weight:normal;
  border-bottom:1px solid black;
 }
 #menu ul {
  margin:0;
  padding:0;
  list-style-type:none;
  border-bottom:1px solid black;
 }
 #menu li {
  background-color:white;
  font-size:0.7em;
  margin-top:1px;
  margin-bottom:1px;
 }
 #menu li a {
  line-height:1.25em;
  color:black;
  padding-left:0.5em;
 }
 #menu li a:hover {
  color:white;
  background-color:#ff6600;
 }

Là, il y a quelque chose qui m'embete, j'aimerais que le fond gris des li passent entierement en orange, lorsque je survole le lien, pour cela, nous allons changer le comportement de a, qui pour l'instant est de type en-ligne, et le passer en bloc :

 #menu li a {
  line-height:1.25em;
  padding-left:0.5em;
  color:black;
  display:block;
 }

Si vous êtes sous ie, vous aurez la stupeur de découvrir que ie met un énorme espace entre chaque li.

C'est un bug ! Pour résoudre celui ci, dans le code source de votre page xhtml, au lieu d'écrire :

    <ul>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
     <li><a href="#" title="">lien</a></li>
    </ul>

Vous devrez écrire :

    <ul><li><a href="#" title="">lien</a></li><li><a href="#" title="">lien</a></li><li><a href="#" title="">lien</a></li><li><a href="#" title="">lien</a></li></ul>

C'est grave :D

Bon, tout les liens sont par défaut surligné, donc dans le fichier css, juste aprés body {} on va rajouter une régle qui supprime ce comportement.

 a {
  text-decoration:none;
 }

Rajoutons maintenant du texte dans notre contenu, et mettons pleins de type différents d'élements, histoire de les styler en même temps.

   <div id="contenu">
    <h2>Le titre de mon article</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices leo id diam. Curabitur ligula tellus, ultrices vel, feugiat eget, tincidunt eu, arcu. Nulla facilisi.  Vestibulum semper. Phasellus tristique mi in felis. Ut ligula. Integer nec mauris eu nulla aliquam posuere. Fusce scelerisque malesuada massa. Etiam at velit. Vestibulum venenatis risus ut ipsum. Duis sed lorem. Donec tristique scelerisque sapien.</p>
     <p><a href="#" title="">Suspendisse</a> varius quam quis magna. Nunc felis nulla, eleifend eget, vestibulum at, auctor eu, nisl. Nunc facilisis vehicula ante. Sed sit amet lacus. Vivamus molestie sem quis est. Etiam sagittis odio ac nulla. Praesent lectus dui, porta vel, semper sagittis, viverra vitae, lectus. In ante nibh, dignissim in, lobortis quis, pellentesque ac, erat. Ut ipsum est, viverra sit amet, congue eget, varius eu, dolor. Sed eros dolor, sagittis molestie, imperdiet eu, ultrices quis, eros. Proin a metus in arcu euismod mattis. Maecenas lacus. Duis eget velit ac dolor commodo egestas.</p>
     <ul><li>liste</li><li>liste</li><li><a href="#" title="">liste</a></li><li><ul><li>liste2</li><li><a href="#" title="">liste2</a></li></ul></li><li>liste</li></ul>
     <ol><li>liste</li><li>liste</li><li>liste</li><li><ul><li>liste2</li><li>liste2</li></ul></li><li>liste</li></ol>
     <blockquote>
       consectetuer adipiscing elit. Pellentesque ultrices leo id diam.
       <p>Praesent lectus dui, porta vel, semper sagittis, viverra vitae, lectus. In ante nibh, dignissim in, lobortis quis, pellentesque ac, erat. Ut ipsum est, viverra sit amet, congue eget, varius eu, dolor</p>
     </blockquote>
    </div>

Il y a bien d'autres balises disponibles, mais ça suffira ^^^ On reprend notre #contenu :

 #contenu {
  width:559px;
  border-left:1px solid black;
  background-color:white;
 }
 #contenu h2 {
  color:#FF6600;
  margin:0;
  border-bottom:1px dashed black;
  font-size:0.8em;
  padding:0.5em;
  padding-left:1em;
  letter-spacing:0.3em;
  font-weight:normal;
 }
 #contenu p {
  margin:0;
  padding:0.5em;
  padding-left:1em;
  padding-right:1em;
  font-size:0.7em;
 }
 #contenu ul,#contenu ol {
  list-style-type: none;
  margin:0;
  padding:0.5em;
  padding-left:2em;
  font-size:0.7em;
 }

On remarque un soucis avec les sous listes, en effet, la taille du texte étant en valeur relative, les sous listes font du 0.7em de 0.7em, il convient donc de corriger ce probléme, en donnant la même taille que l'élement parent.

 #contenu ul ul, #contenu ul ol, #contenu ol ol, #contenu ol ul {
  font-size:1em;
 }

On continue avec le blockquote, qui contient du texte en dehors d'un p.

 #contenu blockquote {
  margin:0;
  padding:0.5em;
  padding-left:1em;
  padding-right:1em;
  font-size:0.7em;
 }

On se retrouve avec le même probléme que précédement, la taille du texte du p contenu dans le blockquote prend la valeur de son parent. Il faut à nouveau réassigner la bonne taille, et enlever les padding à gauche et à droite ( sinon il reprend les padding de #contenu p )

 #contenu blockquote p{
  font-size:1em;
  padding-left:0;
  padding-right:0;
 }

Maintenant que vous avez compris les bases, je vous laisse terminer le #pied de page. :)

Explications supplémentaires

Quelques petites explications supplémentaires concernant les css, et les sélécteurs :

  • Pour chopper un élement de class vous pouvez faire .maClass{} ou p.maClass{} vous pouvez bien sur combiner tout ça : #contenu p.maClass {}
  • Avec de bons navigateurs vous avez accés a des sélécteurs bien plus puissants :
  • *img\[alt~=“Voir”\], séléctionne toutes les images qui ont dans leur attribut alt le mot Voir
  • *div>em, séléctionne les élements em dont le parent direct est div
  • *h2 + h3, séléctionne les élemens h2 et h3 qui se suivent au même niveau ( pas de notion de parent/enfant )
  • *\* séléctionne tout les élements de la page.
  • *li:hover, change les propriétés du li sur le l'évenement rollover.

Comme vous pouvez vous en douter, ie ne pourra pas dans la plupart des cas utiliser ces css… c'est d'ailleurs une des techniques qui est utilisée pour avoir dans la même feuille de style un affichage différents entre les navigateurs, ainsi :

 #toto {
  /*ici les informations que tout les navigateurs verront*/
 }
 html>body #toto {
  /*ici, on réassigne les bonnes valeurs, ie ne les voient pas*/
 }

Cela peut être trés utile en cas de probléme de positionnement par exemple.