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-05-06T13:49:01+02:00 /feed.php?f=106&t=497&mode 2012-05-06T13:49:01+02:00 2012-05-06T13:49:01+02:00 /viewtopic.php?t=497&p=1914#p1914 <![CDATA[Re: HTML5 - La balise <section>]]>
Image
Tutoriel validé !
Votre tutoriel a été validé par darky.

Statistiques: Posté par darky — Dim 6 Mai 2012 13:49

]]> 2011-07-10T17:49:15+02:00 2011-07-10T17:49:15+02:00 /viewtopic.php?t=497&p=1913#p1913 <![CDATA[HTML5 - La balise <section>]]>
HTML5 - La balise <section>



Sommaire

  1. Introduction
  2. Tutoriel


I- Introduction

Bonjour à toutes et à tous.

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

Informations :

  • Difficulté : Facile
  • Image


II- Tutoriel

La balise HTML5 <section> </section> permet de définir les différentes sections (zones) d’une page Web (ex: en-tête, corps, news, articles, tutoriaux, pied, menu...). Cet élément va donc grouper les éléments d’une page Web, de façon thématique. Cependant cet élément ne sert pas à structurer la présentation d’une page Web, il définit juste des zones.

Exemple :

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.         <body>
  8.         <!-- Debut: En-tête de la page Web -->
  9.         <header>
  10.                 <h1><a href="index.html">Mon site</a></h1>
  11.         </header>
  12.         <!-- Fin: En-tête de la page Web -->
  13.         <!-- Debut: Corps de la page Web -->
  14.         <div class="corps">
  15.             <section>
  16.                 <h2>Actualités</h2>
  17.                 <p>Toute l’actualité du site.</p>
  18.             </section>
  19.             <section>
  20.                 <h2>Présentation</h2>
  21.                 <p>Présentation du site.</p>
  22.             </section>
  23.             <section>
  24.                 <h2>Nos services</h2>
  25.                 <p>Tous les services que nous vous proposons.</p>
  26.             </section>
  27.         </div>
  28.         <!-- Fin: Corps de la page Web -->
  29.         <!-- Debut: Pied de la page Web -->
  30.         <footer>
  31.                 <p>Mon Site &copy; Tous droits réservés</p>
  32.         </footer>
  33.         <!-- Fin: Pied de la page Web -->
  34.         </body>
  35. </html>


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

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


darky.

Statistiques: Posté par darky — Dim 10 Juil 2011 17:49

]]>