Médiaforma

All posts tagged footer

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à utiliser les balises <div> pour créer des blocs indépendants les uns des autres. Nous allons maintenant utiliser trois balises <div> pour créer une page Web comportant un bandeau supérieur, une zone centrale et un pied de page.

Le code HTML est très simple. Après avoir fait référence à la feuille de styles styles7.css via une balise <link>, trois balises <div> sont définies les unes à la suite des autres. Pour les différentier, nous affectons un identifiant unique à chacune d’entre elles : bandeau, contenu et pied. Pour ne pas laisser les balises <div> vides, nous y ajoutons un peu de texte.

Si vous vous demandez d’où vient le texte de la balise d’identifiant contenu, j’ai simplement fait un copier-coller depuis le site http://lipsum.com :

Passons à la feuille de styles. Vous vous en doutez, elle contient les styles relatifs aux identifiants bandeau, contenu et pied. Ici, nous nous contentons de définir la largeur, la hauteur et la couleur d’arrière-plan de chaque élément :

Les codes de couleur hexadécimaux ont été créés sur le site http://www.code-couleur.com/.

Affichons la page div2.html dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à mettre en place un bandeau supérieur, un menu latéral et un pied de page en utilisant des balises <div>. Dans cette rubrique, je vais vous montrer comment arriver au même résultat en utilisant de nouvelles balises HTML5 :

Le document HTML contient cinq nouvelles balises :

  • <header> pour l’en-tête ;
  • <nav> pour le menu ;
  • <aside> pour une zone secondaire flottante ;
  • <article> pour la zone de contenu ;
  • <footer> pour le bas de page.

Rien de bien extraordinaire dans ce code, si ce n’est quelques balises dont le nom est quelque peu inhabituel. Vous vous en doutez certainement, le gros du travail va se faire dans la feuille de styles.

  • La ligne 1 indique que les balises header, nav, article, section, footer et aside se comporteront comme des blocs. Cette ligne n’est pas obligatoire. Cependant, elle assure la compatibilité du code HTML avec des navigateurs peu ou pas compatible avec la version 5 du langage.
  • La ligne 2 définit la couleur de la balise header, c’est-à-dire de l’en-tête.
  • Les lignes 3 à 8 définissent le comportement de la balise <nav>. Cette balise flottera à gauche de la fenêtre, elle occupera 20% de la largeur de la fenêtre et aura une couleur spécifique.
  • Les lignes 9 à 13 définissent le comportement de la balise <article>. Cette balise occupera 80% de la largeur de la fenêtre et aura une couleur spécifique.
  • Les lignes 15 à 20 définissent le comportement de la balise <aside>. Cette balise flottera à droite de la fenêtre, elle occupera 20% de la largeur de la fenêtre et aura une couleur spécifique.
  • Enfin, la ligne 21 définit la couleur de la balise <footer>, c’est-à-dire du bas de page.

Il ne reste plus qu’à exécuter le code HTML dans un navigateur quelconque. Ici par exemple, dans Google Chrome :