Apprendre le langage HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre le langage HTML (HyperText Markup Language) Niveau recommandé pour le cours de Apprendre le langage HTML (HyperText Markup Language) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 11: Exercice - Présentation d'une page HTML à l'aide des tableaux

Toutes les pages
Vous vous souvenez de l'exercice de la page 9? Alors, on va le modifier légèrement en faisant appel aux tableaux.

Enoncé

On souhaite créer une page Web qui ressemble à ceci:

Exercice

Cet exercice permet de mettre en pratique les balises que nous avons vu jusqu'ici.
N'attendez pas à ce que le design soit épatant! En effet, il reste encore du chemin à faire avant de réussir une page Web parfait avec un design agréable.
Webmaser © 2015
Je vous donne des indices:
  • La police utilisée est "verdana", sauf pour les liens qui ont la police par défaut.
  • Le code de la couleur utilisée pour le titre est #003569.
  • L'image de la bannière mesure 100% de la page, si vous voulez la même rendez vous au lien: http://www.chiny.me/images/arr_bannp.png.
  • Le menu est structuré sous forme de liste.
  • Le code de la couleur d'arrière plan du menu est #EEEEEE
  • Le code de la couleur d'arrière plan du bas de page est #FF6600

Solution

<html>
   <head>
      <title>Mon code amélioré</title>
   </head>
   <body>
      <table border="0" width="100%" cellspacing="4" cellpadding="0">
         <tr>
            <td colspan="2">
               <img src="images/arr_bannp.png" width="100%">
            </td>
         </tr>
         <tr>
            <td width="30%" valign="top" bgcolor="#EEEEEE" height="200">
               <ul>
                  <li><a href="accueil.html">Accueil</a></li>
                  <li><a href="presentation.html">Présentation</a></li>
                  <li><a href="activites.html">Activités</a></li>
                  <li><a href="contact.html">Contact</a></li>
               </ul>
            </td>
            <td width="70%" valign="top">
               <h2>
                  <font face="verdana" color="#003569">
                     Exercice
                  </font>
               </h2>
               <font face="verdana" size="2">
                  Cet exercice permet de mettre en pratique les balises que nous avons vu jusqu'ici.<br>
             N'attendez pas à ce que le design soit épatant! En effet,
             il reste encore du chemin à faire avant de réussir une page Web parfait avec un design <b>agréable</b>.
          </font>
            </td>
         </tr>
         <tr>
            <td colspan="2" align="center" height="40" bgcolor="#EE6600">
               <font color="#FFFFFF"><font face="verdana" size="1">
                  Webmaser &copy; 2015
               </font>
            </td>
         </tr>
      </table>
   </body>
</html>