Tout vient à point pour qui sait attendre. J’avais promis une série d’articles pour découvrir les CSS mais entre-temps je me suis trouvé un travail de Pénélope qui m’a pris pas mal de temps. Me revoici. Attention, c’est parti !

On fait le ménage

Pour ceux qui ont suivi les tutoriels de l’abc depuis le début :

Si vous avez suivi toutes les étapes, vous devriez avoir sur votre ordinateur, dans le dossier mon_blog :

Vous avez dû également les transférer sur votre hébergement, le fichier test.html étant accessible sur http://mon-domaine/test.html et la feuille de style sur http://mon-domaine/style.css.

N’hésitez pas à relire, voire à refaire les exercices de ces deux tutoriels, puis on va faire un peu de ménage dans tout ça : supprimez les deux fichiers qui se trouvent sur votre hébergement, remettez-les dans leur état initial des tutoriels sur votre ordinateur, déplacez test.html à l’intérieur du répertoire jeux-css.

Pour ceux qui arrivent aujourd’hui

Lisez et suivez les deux tutoriels Ma première page web et Un peu de déco sur ma page de test afin de bien comprendre les notions qui y sont abordées puis… supprimez-les de votre hébergement et remettez ceux de votre ordinateur dans leur état initial des tutoriels comme viennent de le faire les copains ci-dessus.

Pour tout le monde

A cet instant, vous devriez tous avoir :

  • sur votre hébergement : rien (enfin rien qui concerne cette série d’articles !)
  • sur votre ordinateur un répertoire jeux-css contenant les fichiers test.html et style.css

Ouf ! On peut continuer.

Modification du fichier test.html

À l’aide de votre éditeur de texte, ouvrez le fichier test.html et complétez-le afin qu’il présente le contenu suivant (ou copiez celui ci-dessous et collez-le à la place du code actuel) :

<!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>Ma page de test</title>
     <meta name="description" content="Ceci est mon premier essai de page web." />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="Content-Language" content="fr" />
</head>
<body>
<div id="page">
     
     <div id="top">
          <h1>Ma page de test</h1>
     </div>

     <div id="wrapper">
          <p>Je suis vraiment trop forte !</p>
          <p>J'ai réussi à :</p>
          <ul>
               <li>Créer un dossier sur mon ordinateur.</li>
               <li>Installer des logiciels.</li>
               <li>Ouvrir un compte chez un hébergeur.</li>
               <li>M'abonner au <a href="http://abc.dotaddict.org/">blog de l'abc dotclear</a>.</li>
               <li>Créer la page que vous lisez et la mettre au bon endroit.</li>
         </ul>
     </div>

     <div id="footer">
          <p>Cette page a été réalisée dans le cadre de la <a href="http://abc.dotaddict.org/category/Premiers-pas-avec-les-CSS">série d'apprentissage des CSS</a> du blog de l'abc dotclear.</p>
     </div>

</div>
</body>
</html>

Qu’avons-nous fait ?

Nous avons créé trois « boîtes » pour ranger le contenu de notre page (plus une boîte globale) et avons donné des identifiants à ces boîtes. L’ouverture d’une boîte se fait par l’ajout de la balise html <div> et sa fermeture par la balise </div>. L’identifiant (purement arbitraire) se donne dans un attribut id="identifiant_de_la_boite" de la balise ouvrante.

Ici nous avons donc :

  • la boîte "page" qui contient tout le contenu de la page ;
  • la boîte "top" qui en contient l’entête ;
  • la boîte "wrapper" pour le contenu du corps de la page ;
  • la boîte "footer" pour le pied de page.

Notez que chaque boîte ouverte doit être fermée[1] et qu’à chaque <div> devra donc correspondre une </div>.

Le schéma de l’imbrication des boîtes que nous venons d’installer est celui-ci :

Structure de la page de test

À noter : la présentation du code elle-même doit refléter ces imbrications, cela la rend beaucoup plus lisible si on doit y revenir pour y effectuer de nouvelles modifications. C’est pourquoi vous remarquerez que j’ai « indenté » le code.

À quoi ça sert ?

Ça sert à plein de choses concernant le placement et la présentation des éléments. Pour l’exercice d’aujourd’hui, cela va nous permettre de coloriser séparément chaque fond de boîte et de présenter différemment un paragraphe d’une boîte et un paragraphe d’une autre boîte. Suivez le guide :

Modification du fichier style.css

À l’aide de votre éditeur de texte, ouvrez le fichier style.css placé dans le répertoire jeux-css de votre ordinateur et modifiez-le afin qu’il présente le contenu suivant (ou copiez ce qui est ici et collez-le à la place du contenu actuel) :

body {
  background-color: #fffff0;
  font-family: georgia, "times new roman", serif;
  }
#page {
  background-color: #EDF1F8;
  padding: 20px;
  }
#top {
  background-color: #4D6280;
  padding-top: 20px;
  padding-bottom: 40px;
  }
#wrapper {
  background-color: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  }
#footer {
  background-color: #90AED5;
  padding-top: 6px;
  padding-bottom: 6px;
  }
h1 {
  font-family: helvetica, arial, sans-serif;
  font-size: 180%;
  text-align: center;
  font-weight: normal;
  color: #ffffff;
  }
#wrapper p {
  margin-left: 60px;
  text-indent: 30px;
  }
#footer p {
  font-family: helvetica, arial, sans-serif;
  text-align: center;
  }
ul {
  margin-left: 90px;
  }
a {
	color: #cd3333;
  }

Qu’avons-nous fait ?

Nous avons fixé des règles de présentation pour les différents éléments de la page. Je liste ici les différentes propriétés utilisées dans cette feuille de style et leur signification. Nous y reviendrons en détail dans les prochains articles.

Pour ce qui concerne les couleurs
  • background-color : couleur de fond
  • color : couleur des caractères

(Note : Pour choisir votre couleur et connaître son code hexadécimal vous pouvez vous servir de Colormixers par exemple.)

Pour ce qui concerne les caractères
  • font-family : fonte (ou police) des caractères
  • font-size : taille des caractères

(Note : Pour choisir vos caractères vous pouvez vous servir de Typetester par exemple.)

Pour ce qui concerne les marges
  • padding : marge intérieure. On peut spécifier padding-top, padding-right, padding-bottom, padding-left pour appliquer une marge intérieure uniquement en haut, à droite, en bas ou à gauche ;
  • margin : marge extérieure. On peut spécifier margin-top, margin-right, margin-bottom, margin-left pour appliquer une marge extérieure uniquement en haut, à droite, en bas ou à gauche ;

Mais revenons à nos moutons et voyons à quoi nous a servi la construction de notre page en différentes boîtes. Nous avons pu :

  • Coloriser les fonds de chaque boîte, différencier leurs marges intérieures ou extérieures
  • Appliquer des règles différentes pour les paragraphes du contenu (grâce à la règle du #wrapper p {}) et du pied de page (#footer p {}), ce que le code de notre premier exercice ne permettait pas.

Notez à cette occasion que les éléments p de la boîte ayant pour identifiant wrapper s’écrit en langage CSS #wrapper p. C’est une syntaxe à bien intégrer car elle est primordiale dans l’écriture des feuilles de style.

D’ailleurs, à votre avis quelle règle devrions-nous ajouter pour que les liens du pied de page (et seulement eux) soient blancs, hum ?

On envoie tout ça en ligne

À l’aide de votre client FTP préféré, envoyez tout le répertoire jeux-css et son contenu au même niveau (ce qui veut dire à côté, vous vous souvenez ?) que le répertoire dotclear.

Avec votre navigateur, rendez-vous sur l’adresse http://example.com/jeux-css/test.html (en remplaçant évidemment example.com par votre véritable nom de domaine).

Vous y êtes ?

Oh ! Quelle déception ! Votre page affiche un contenu tout nu qui ressemble à ça au lieu de ceci !

Hé hé, c’est que nous avons oublié quelque chose de très important pour que notre page sache où trouver les règles de présentation. Et comme je suis perverse, je vous interpelloge : relisez le premier tutoriel et dites-nous donc ce que nous avons oublié ?

Résultat final

À la fin de cette étape, notre page de test aura cette allure-là :

Résultat final en fin de l'article #CSS 2

Pas d’affolement : toutes ces notions nouvelles seront revues au fil des prochaines semaines !

Notes

[1] C’est d’ailleurs le cas pour toute balise html (sinon ça fuit !)