A l'abordage des CSS

Auteur : Bnmaster
Créé le : 10/03/2009
Modifié le : 06/08/2009

[intro]

Voilà déjà deux chapitres que nous ne faisons que parler du XHTML. Vous connaissez désormais la structure d'une page Web, la structure des balises XHTML et la signification d'une grande partie de ces balises. En théorie, en me lisant, vous devriez vous dire :

Bon, en gros t'es en train de me dire que je connais l'XHTML et que je n'ai plus grand chose à apprendre... pourtant, si je regarde les pages que j'arrive à créer, ce n'est franchement pas brillant !

Hé oui, par exemple, vous pouvez créer un site sur les plantes carnivores très facilement en utilisant une structure du genre :

Code :

<!DOCTYPE html PUBLIC "-//W3 //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" >

   <head>

       <title>Titre du site</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

   </head>

   <body>

        <h1 id="haut">Titre du site</h1>

           <p>Slogan du site</p>



        <h2>Menu</h2>

          <a href="" title="">Lien n°1</a> | 

          <a href="" title="">Lien n°2</a> | 

          <a href="" title="">Lien n°2</a>



        <h2>Titre n°1</h2>

          <p>Paragraphe n°1</p>



        <h2>Titre n°2</h2>

          <p>Paragraphe n°2</p>



<p>Copyright - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>

   </body>

</html>

Voir le résultat

Il ne vous reste plus qu'à remplir le site avec le contenu que vous voulez :

Code :

<!DOCTYPE html PUBLIC "-//W3 //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" >

   <head>

       <title>Les plantes caaarnivores</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

   </head>

   <body>

        <h1 id="haut">Les plantes caaarnivores</h1>

           <p>Parce que la nature aussi est cruelle</p>



        <h2>Menu</h2>

          <a href="accueil.html" title="Accueil de Caaarnivores">Accueil</a> | 

          <a href="lexique.html" title="Lexique sur les plantes carnivores">Lexique</a> | 

          <a href="livreOr.html" title="Livre d'or pour laisser vos impressions">Livre d'or</a>



        <h2>Mais pourquoi caaarnivores ?</h2>

          <p>Non pas à nous, Éternel, non pas à nous, mais à ton nom donne gloire, a cause de ta bonté, à cause de ta fidélité ! Pourquoi les nations diraient-elles : où donc est leur Dieu ? Notre Dieu est au ciel, il fait tout ce qu'il veut. Leurs idoles sont de l'argent et de l'or, elles sont l'ouvrage de la main des hommes. Elles ont une bouche et ne parlent point, elles ont des yeux et ne voient point, elles ont des oreilles et n'entendent point, elles ont un nez et ne sentent point, elles ont des mains et ne touchent point, des pieds et ne marchent point, elles ne produisent aucun son dans leur gosier. Ils leur ressemblent, ceux qui les fabriquent, tous ceux qui se confient en elles. Israël, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Maison d'Aaron, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Vous qui craignez l'Éternel, confiez-vous en l'Éternel ! Il est leur secours et leur bouclier. L'Éternel se souvient de nous : il bénira, il bénira la maison d'Israël, il bénira la maison d'Aaron, il bénira ceux qui craignent l'Éternel, les petits et les grands ; l'Éternel vous multipliera ses faveurs, a vous et à vos enfants. Soyez bénis par l'Éternel, qui a fait les cieux et la terre ! Les cieux sont les cieux de l'Éternel, mais il a donné la terre aux fils de l'homme. Ce ne sont pas les morts qui célèbrent l'Éternel, ce n'est aucun de ceux qui descendent dans le lieu du silence ; mais nous, nous bénirons l'Éternel, dès maintenant et à jamais. Louez l'Éternel !</p>



        <h2>Je peux participer ?</h2>

          <p>Louez l'Éternel, car il est bon, car sa miséricorde dure à toujours ! Louez le Dieu des Dieux, car sa miséricorde dure à toujours ! Louez le Seigneur des seigneurs, car sa miséricorde dure à toujours ! Celui qui seul fait de grands prodiges, car sa miséricorde dure à toujours ! Celui qui a fait les cieux avec intelligence, car sa miséricorde dure à toujours ! Celui qui a étendu la terre sur les eaux, car sa miséricorde dure à toujours ! Celui qui a fait les grands luminaires, car sa miséricorde dure à toujours ! Le soleil pour présider au jour, car sa miséricorde dure à toujours ! La lune et les étoiles pour présider à la nuit, car sa miséricorde dure à toujours ! Celui qui frappa les Égyptiens dans leurs premiers-nés, car sa miséricorde dure à toujours ! Et fit sortir Israël du milieu d'eux, car sa miséricorde dure à toujours ! A main forte et à bras étendu, car sa miséricorde dure à toujours ! Celui qui coupa en deux la mer Rouge, car sa miséricorde dure à toujours ! Qui fit passer Israël au milieu d'elle, car sa miséricorde dure à toujours ! Et précipita Pharaon et son armée dans la mer Rouge, car sa miséricorde dure à toujours ! Celui qui conduisit son peuple dans le désert, car sa miséricorde dure à toujours ! Celui qui frappa de grands rois, car sa miséricorde dure à toujours ! Qui tua des rois puissants, car sa miséricorde dure à toujours ! Sihon, roi des Amoréens, car sa miséricorde dure à toujours ! Et Og, roi de Basan, car sa miséricorde dure à toujours ! Et donna leur pays en héritage, car sa miséricorde dure à toujours ! En héritage à Israël, son serviteur, car sa miséricorde dure à toujours ! Celui qui se souvint de nous quand nous étions humiliés, car sa miséricorde dure à toujours ! Et nous délivra de nos oppresseurs, car sa miséricorde dure à toujours ! Celui qui donne la nourriture à toute chair, car sa miséricorde dure à toujours ! Louez le Dieu des cieux, car sa miséricorde dure à toujours !</p>



<p>Copyright Caaarnivore - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>

   </body>

</html>

Voir le résultat

Mais c'est tout. Pourtant, tout est là... mais vous voudriez aussi pouvoir ordonner le texte, l'aligner à tel endroit, ajouter de la couleur ou des images de fond, que sais-je encore... Ce qui vous manque c'est la mise en page, le design. Ce qui vous manque, c'est le CSS :D

[media]document/atelier/css.mp3[/media]
Une petite ode aux CSS pour se mettre dans l'ambiance.
Par di13774n73

[/intro][fin]Et voilà, vous venez enfin de découvrir ce qu'était le CSS. Bientôt vous n'allez plus pouvoir vous en passer :) A partir de maintenant tout va aller très vite, on va faire plusieurs chapitres en ne s'intéressant qu'au CSS et seulement après je vous apprendrai de nouvelles choses en XHTML !

Quand je dit : tout va aller très vite, je ne parlais pas de l'écriture des prochains chapitres hein ^^ ça, ça reste comme avant :p

[/fin]

La Bnbox !

Atelier Webmaster - Cours XHTML/CSS

A l'abordage des CSS