Pourquoi identifier les zones principales ?
Nous allons maintenant identifier les principales parties de notre document, en vue de les positionner comme il faut sur la page finale. On pourra ainsi positionner le titre et son paragraphe de commentaire de façon simple et précise.
On remarque par exemple que le contenu de la page laisse un espace à gauche tout le long de la page pour afficher un menu. De plus, le pied de page est centré sur toute la largeur de la page. Enfin, le titre est détaché lui aussi du contenu du texte.
Quelles zones identifier ?
Dans notre page nous avons 4 zones à définir (celles citées ci-dessus) :
- En-tête
- Elle contient le titre h1 et son sous titre. Cette zone peut ne pas être créée si le titre est seul à être positionné. En effet un titre h1 est de type bloc : on peut lui assigner une largeur, une hauteur... et le positionner correctement
- On identifie cette zone par les balises div, elle aura pour identifiant "header"
- Zone de navigation
- Cette zone pourrait ne pas être créée, mais on se garde la possibilité de mettre d'autres choses dedans
- On l'identifie par une div nommée "menu"
- Zone de contenu
- C'est la zone principale qui contient tout le texte de la page, ainsi que les formulaires dans notre cas.
- On l'identifie par une div nommée "contenu"
- Pied de page
- Cette zone contient le texte de copyright
- On l'identifie par une div nommée "footer"
Exercice
Identifiez les 4 zones dans votre document XHTML en utilisant des div dont les identifiants seront hreader, contenu, menu et footer.
Validez votre page
Ajoutez des règles CSS à votre fichier pour faire ressortir les différentes parties
- Ajoutez une bordure : règle border:1px solid black;
- Ajoutez une marge : margin:1px;
Les règles vous seront expliquées plus tard.
Résultat final.
Session 2 : Résultat de l'exercice
