AMELIORATION
D'UNE PAGE WEB

Mise en situation

A l'époque où le CSS n'existait pas encore, la présentation des pages HTML s'effectuait à l'aide d'attributs de balise. Puis le CSS apparut, permettant de séparer la présentation du contenu. Ainsi la présentation, définie pour une ou plusieurs pages, se modifie, se perfectionne aisément.

Aujourd'hui, les attributs de balise pour la présentation tombent en désuétude. On évite, autant que possible, de placer un style au sein même d'une balise.

Cet exercice consiste à mettre à jour une page HTML :

Hypothèses et données

On propose la page HTML ci-dessous.

Etude demandée

  1. La page HTML inclut du code en CSS. Mettre en évidence ce 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>). Remplacer les balises <i><u> par une balise <span>.

Page HTML

<!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>