Médiaforma

Mise en page HTML5

Print Friendly

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 :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply