Forum Info PC Forum Info PC est un forum informatique. Vous y trouverez des espaces de support, d’astuces et de tutoriels, de discussions... 2012-04-25T13:18:48+00:00 /feed.php?f=106&t=495&mode 2012-04-25T13:18:48+00:00 2012-04-25T13:18:48+00:00 /viewtopic.php?t=495&p=1901#p1901 <![CDATA[Re: HTML5 - La balise <footer>]]>
Image
Tutoriel validé !
Votre tutoriel a été validé par darky.

Statistiques: Posté par darky — Mer 25 Avr 2012 13:18

]]> 2011-07-10T14:36:47+00:00 2011-07-10T14:36:47+00:00 /viewtopic.php?t=495&p=1900#p1900 <![CDATA[HTML5 - La balise <footer>]]>
HTML5 - La balise <footer>



Sommaire

  1. Introduction
  2. Tutoriel


I- Introduction

Bonjour à toutes et à tous.

Dans ce tutoriel, nous allons voir comment utiliser la nouvelle balise <footer> </footer> de l’HTML5.

Informations :

  • Difficulté : Facile
  • Image


II- Tutoriel

La balise HTML5 <footer> </footer> représente le pied d’une page Web ou celui d’une section. Avant l’arrivée de cette balise HTML5, vous utilisiez en HTML4 l’élément <div> avec souvent les attributs id="footer" ou id="pied".

Pour exemple, en HTML4 vous écriviez ceci, pour définir l’en-tête de votre page Web :

html Code: Tout sélectionner
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.                 <title>Page HTML 5</title>
  6.         </head>
  7.         <body>
  8.             <!-- Debut: En-tête de la page Web -->
  9.             <div id="header">
  10.                     <h1><a href="index.html">Mon site</a></h1>
  11.             </div>
  12.             <!-- Fin: En-tête de la page Web -->
  13.             <!-- Debut: Pied de la page Web -->
  14.             <div id="footer">
  15.                     <p>Mon Site &copy; Tous droits réservés</p>
  16.             </div>
  17.             <!-- Fin: Pied de la page Web -->
  18.         </body>
  19. </html>


En HTML5 vous allez écrire :

html Code: Tout sélectionner
  1. <!DOCTYPE HTML>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>Page HTML 5</title>
  6.         </head>
  7.  
  8.         <body>
  9.                 <!-- Debut: En-tête de la page Web -->
  10.                 <header>
  11.                         <h1><a href="index.html">Mon site</a></h1>
  12.                 </header>
  13.                 <!-- Fin: En-tête de la page Web -->
  14.                 <!-- Debut: Pied de la page Web -->
  15.                 <footer>
  16.       ��                 <p>Mon Site &copy; Tous droits réservés</p>
  17.                 </footer>
  18.                 <!-- Fin: Pied de la page Web -->
  19.         </body>
  20. </html>


La balise <footer> peut aussi définir le pied d’une section.

Exemple avec la balise <section> :

html Code: Tout sélectionner
  1. <section>
  2.     <header>
  3.         <h1>La balise Header</h1>
  4.         <p>Présentation de la balise Header.</p>
  5.     </header>
  6.     <p>Bonjour à toutes et à tous.<br/>Dans ce tutoriel, nous allons voir comment utiliser la nouvelle balise footer de l’HTML5. [...]</p>
  7.     <footer>
  8.         <p>Ecrit par darky.</p>
  9.     </footer>
  10. </section>


Exemple avec la balise <article> :

html Code: Tout sélectionner
  1. <article>
  2.     <header>
  3.         <h1>La balise Header</h1>
  4.     </header>
  5.     <p>Bonjour à toutes et à tous.<br/>Dans ce tutoriel, nous allons voir comment utiliser la nouvelle balise footer de l’HTML5. [...]</p>
  6.     <footer>
  7.         <p>Ecrit par darky.</p>
  8.     </footer>
  9. </article>


Cette nouvelle balise a donc pour but de mieux hiérarchiser vos pages Web, comme c’est la cas pour la balise <header>.

Voici ensuite les attributs liés à l’élément footer :

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title


darky.

Statistiques: Posté par darky — Dim 10 Juil 2011 14:36

]]>