CSS/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>INF2005 : Exemple CSS</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="header">
      <div id="menu">
        <ul>
          <li><a href="index.html">Accueil</a>
          </li>
          <li><a href="contenu.html">Contenu</a>
          </li>
          <li><a href="materiel.html">Matériel</a>
          </li>
          <li><a href="mailto:berger.jacques@uqam.ca">Contact</a>
          </li>
        </ul>
      </div>

      <div id="logo">
        <h1>INF2005</h1>
        <h2>Programmation web</h2>
      </div>
    </div>

    <div id="page">
      <div id="sidebar">
        <ul>
          <li>
            <h2>Du texte...</h2>
            <p>En plus d'offrir une possibilité de réflexion et de
              correction de la grammaire du métalangage, les prototypes
              permettent de tester le matériel à générer afin de s'assurer qu'il
              est exempt d'erreurs et qu'il ne manque pas de fonctionnalités.</p></li>

          <li>
            <h2>Encore du texte...</h2>
            <p>Toujours plus de texte. On adore ça!!!</p>
            <p>Toujours plus de texte. On adore ça!!!</p></li>
        </ul>
      </div>

      <div id="content">
        <div class="post">
          <p class="meta">
            <span class="date">Mercredi, le 7 septembre 2011 18:00</span>
            Publié par <a href="mailto:berger.jacques@uqam.ca">Jack</a>
          </p>
          <h2 class="title">Exemple de post</h2>
          <div class="entry">
            <p>Il est toujours difficile de trouver du texte pertinent à
              écrire dans un exemple de page web. Heureusement pour nous, nous
              ne sommes pas les premières personnes à avoir ce problème. Il a
              été démontré, il y a fort longtemps, que les lecteurs sont plus
              intéressés par le contenu texte de l'exemple que par sa
              présentation. Donc, pour garder le lecteur intéressé à la
              présentation, on met du texte qui ressemble à du vrai texte mais
              qui n'est pas lisible par le lecteur. Ainsi est né Lorem Ipsum.</p>
            <p>
              On ajoute également un exemple de lien : <a
                href="http://www.lipsum.com/">Lorem ipsum</a>
            </p>
          </div>
          <div>
            <a href="article.html" class="links">Lire l'article au complet</a>
          </div>
        </div>

        <div id="footer">
          <p>
            Copyright &copy; 2011 Jacques Berger. Tous droits réservés. Design
            par <a href="http://www.freecsstemplates.org/">Free CSS
              Templates</a>.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>