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 9: Exercice - Présentation d'une page HTML basique

Toutes les pages
Pour mettre en pratique ce que nous avons fait jusqu'ici, on va se dégourdir les doigts par un petit exercice de récapitulation.

Énoncé

On souhaite créer une page Web classique avec une bannière en haut, un menu horizontal juste en dessous, un grand titre et un texte. Et à la fin un bas de page qui contient le nom du créateur (une sorte de copyright).

Pour faire simple, je vous montre à quoi ça devrait ressembler:

Mon premier 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 parfaite 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 et le bas de page est #003569 (C'est la même couleur utilisée dans la majeur partie de ce site.)
  • L'image de la bannière mesure 100% de la page, si vous voulez la même, rendez vous au lien suivant: http://www.chiny.me/images/arr_bannp.png.
  • Le code de la couleur utilisée pour le texte du corps de la page est :#444444 (Il s'agit d'un gris foncé).

Pour tirer profit de l'exercice, n'utilisez qu'un éditeur texte. Si l'autocomplete de la syntaxe est activée, désactivez la.
Vaut mieux commettre des erreurs et apprendre que de se servir d'une syntaxe prête.

Solution

Notez qu'il n'existe pas qu'un seule méthode pour réussir l'exercice, il y'en a plusieurs, avec plus ou moins de balises. Ci après la solution que je propose:
<html>
   <head>
      <title>Mon permier exercice</title>
   </head>
   <body>
      <img src="images/arr_bannp.png" width="100%" title="Mon premier exercice">
      <div align="center">
         <a href="accueuil.html">Accueil</a> |
         <a href="presentation.html">Présentation</a> |
         <a href="activites.html">Activités</a> |
         <a href="contact.html">Contact</a>
      </div>
      <h1><font face="verdana" color="#003569">Mon premier exercice</font></h1>
      <font color="#444444" 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>
      <br>
      <div align="right"><font color="#003569" face="verdana" size="1">Webmaser &copy; 2015</font></div>
   </body>
</html>
Simple non? Si vous n'y arrivez pas vous pouvez relire les pages précédentes de ce cours et vous y arriverez haut la main. Courage!