AMELIORATION
D'UNE PAGE WEB

Mise en situation

A l'époque où le CSS n'existait pas encore, la présentation des pages en HTML se faisait à l'aide d'attributs de balise. Puis le CSS est apparu, permettant de séparer le contenu de la présentation. Les avantanges sont multiples : Il est aisé de modifier une présentation, laquelle peut être définie pour un ensemble de pages.

Aujourd'hui, les attributs de balise pour la présentation sont quasiment abandonnés. On évite, autant que possible, de définir un style au sein même d'une balise. L'objectif de l'activité est de mettre à jour un code en HTML :

Hypothèses et données

On propose le code en HTML et CSS ci-dessous.

Travail demandé

  1. Du code en CSS est inséré dans le code en HTML. Mettre en évidence le code en CSS en le surlignant.
  2. Corriger le code au niveau des lignes 10, 13, 21 (ou 24), 31, 38 et 43 pour le rendre valide.
  3. Traduire tout ce qui concerne la présentation de la page par du code en CSS, placé entre les balises <style> et </style> (elles-mêmes placées entre les balises <head> et </head>). Les balises <i><u> seront remplacées par une balise <span>.

Code en HTML et CSS

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Exercice</title>
  <style>
    body { background-color: #88bb99; }
  </style>
<head>

<body>
  <h1><b>Test d'une page en HTML et CSS</b></h1>
    
  <div id="partie1">
    <h2>Mes tâches</h2>
    <table bgcolor="#dd5599">
      <tr id="T" class="impair" style="font-style: italic;">
        <td>Travailler</td>
      </tr>
      <tr id="M" class="pair">
        <td>Marcher</td>
      </tr>
      <tr id="M" class="impair" style="font-style: italic;">
        <td>Manger</td>
      </tr>
      <tr id="D" class="pair">
        <td>Dormir</td>
      </tr>
    </table>
      
  <div id="partie2">
    <h2>L'informatique</h2>
    <p id="P1" style="text-decoration: underline;">
      L'informatique est un domaine d'activité scientifique,
      technique et industriel concernant le traitement de
      l'information par ordinateur
    <p/>
    <a id="L1" href="https://fr.wikipedia.org/wiki/Informatique">
      Lien vers wikipedia
    </a>
    <p id="P2" style="font-size: 1.5em;">
      Wikipédia, <i><u>projet d’encyclopédie collective</i></u>
      en ligne, universelle, multilingue, fonctionne sur le
      principe du wiki.
    </p>
  </div>
    
</body>

</html>