Etape 2 : structuration de la page at Accessibilité-web.com - Formation open-source sur l’accessibilité Web

Etape 2 : structuration de la page

Le 28 septembre 2006 par stephane.trupheme

Durant cette seconde étape, nous allons concevoir la structure XHTML de la page d’accueil et de la page intérieure.

1. Le squelette de page HTML :

L’utilisation d’un “!DOCTYPE” est déterminant pour l’accessibilité.

En HTML 4.01 Strict, ce DOCTYPE s’écrira :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

En XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

NB : La norme utilisée pour la formation est “XHTML Strict”. Pour en savoir plus sur les “!DOCTYPE”, leur utilisation et leur utilité, vous pouvez consulter le site Web du W3C.

Squelette HTML :

[…DOCTYPE…]
<html>
  <head>
    <title>Titre</title>
  </head>
    <body>[…]</body>
</html>

2. Structuration du corps de page « BODY »

A) Création des blocs de la page d’accueil

Conteneur principal -> DIV wrapper
- Conteneur de l’entête -> DIV header
  - Subdivision « navigation haute » -> DIV upperNavigation
  - Subdivision « navigation rapide » -> DIV fastNavigation
- Conteneur de la navigation principale -> DIV primaryNavigation
- Conteneur principal
- Page d’accueil -> DIV content de classe « home »
  - Bloc gauche -> DIV homeLeft
  - Bloc central -> DIV homeMiddle
  - Bloc droit -> DIV homeRight
  - Bloc bas -> DIV homeBottom
- Conteneur du pied de page -> DIV footer
- Conteneur des icônes -> DIV colophon

Apport des blocs (page d’accueil)

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Ratatouille &amp; Compagnie - Accueil</title>
  </head>
  <body>
  <div id="wrapper">
    <div id="header">
      <div id="upperNavigation"></div>
      <div id="fastNavigation"></div>
    </div>
    <div id="primaryNavigation"></div>
    <div id="content" class="home">
      <div id="homeLeft"></div>
        <div id="homeMiddle"></div>
        <div id="homeRight"></div>
        <div id="homeBottom"></div>
      </div>
      <div id="footer"></div>
      <div id="colophon"></div>
    </div>
</body>
</html>

B) Création des blocs de la page intérieure

Conteneur principal -> DIV wrapper
- Conteneur de l’entête -> DIV header
  - Subdivision « navigation haute » -> DIV upperNavigation
  - Subdivision « navigation rapide » -> DIV fastNavigation
- Conteneur de la navigation principale -> DIV primaryNavigation
- Conteneur principal
- Page intérieure -> DIV main
  - Conteneur de la navigation secondaire -> DIV secondaryNavigation
  - Conteneur de barre de navigation -> DIV breadcrumb
  - Conteneur de contenu -> DIV content
- Conteneur du pied de page -> DIV footer
- Coneneur des icônes -> DIV colophon

Apport des blocs (page intérieure)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Ratatouille &amp; Compagnie - Page int&eacute;rieure</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
      <div id="upperNavigation"></div>
      <div id="fastNavigation"></div>
      </div>
      <div id="primaryNavigation"></div>
      <div id="main">
        <div id="secondaryNavigation"></div>
        <div id="breadcrumb">breadcrumb</div>
        <div id="content"></div>
      </div>
      <div id="footer"></div>
      <div id="colophon"></div>
    </div>
  </body>
</html>

3. Créaton des listes à puces :

Les listes à puces vont permettre d’afficher des éléments de type “liste”. Elles ne peuvent pas être utilisées seules, mais doivent être encapsulées dans un DIV afin de les positionner sur la page. Elles n’ont pas besoin d’être nommées, car elles sont encapsulées chacune dans un DIV identifié.

Pour le bloc bas de la page d’accueil, la relation d’ordre impose l’utilisation d’une liste numérotée.

Entête
- Liste de « navigation haute »
- Liste de « navigation rapide »
Liste de navigation principale
Liste de pied de page
Liste de colophon

Zone de contenu (page d’accueil)
- Deux listes à puce (bloc gauche et bloc central)
- Une liste numérotée (bloc bas)

Liste de navigation secondaire (page intérieure)

A) Apport des listes (page d’accueil)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Ratatouille &amp; Compagnie - Accueil</title>
  <meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1"/>

</head>
<body>
  <div id="wrapper">
    <div id="header">
      <div id="upperNavigation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="fastNavigation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
      <div id="primaryNavigation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="content" class="home">
        <div id="homeLeft">
          <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
          </ul></div>
        <div id="homeMiddle">
          <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
          </ul>
        </div>
        <div id="homeRight"></div>
        <div id="homeBottom">
          <ol>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
          </ol>
        </div>
      </div>
      <div id="footer">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="colophon">
       <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>

B) Apport des listes (page intérieure)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Ratatouille &amp; Compagnie – Page intérieure</title>
  <meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1"/>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <div id="upperNavigation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="fastNavigation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
      <div id="primaryNavigation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="main ">
        <div id="secondaryNavigation">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div id="content"></div>
      </div>
      <div id="footer">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="colophon">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>

4. Validation du code :

Il convient maintenant de s’assurer que le code créé soit valide. Il suffit pour cela d’utiliser le validateur du W3C en copiant/collant le code dans le champ prévu à cet effet (”Validate by Direct Imput”) : http://validator.w3.org/

(7 votes, note : 3.71 sur 5)

Loading ...

Tags : div, doctype, listes à puces, sémantique, ul, validation du code, w3c, xhtml.

Bookmarkez cet article :

Imprimer cette page Recommander cet article !

0 Réponses to “Etape 2 : structuration de la page”

Flux RSS pour cet article Lien Trackback

Pas de commentaires

Laisser un commentaire

Les Etapes de la Formation

Tags
accessibilité accessiweb balises xhtml charset css div doctype flux html formation iso 8859 1 listes à puces open source sémantique standards ul utf8 validation du code w3c wai xhtml

Commentaires Récents
- Chris: Bonjour, Je remarque que le tutoriel " tatatouille et Cie" date de décembre 2007. Va t-il y avoir la suite ?...
- Clement: Sympa, mais il manque l'étape 4 avec l'ajout des images dans le site maintenant ....

Lectures

Sondage
Ce blog vous paraît-il :
- Très utile
- Utile
- Peu utile
- Inutile
Voir les résultats
Loading ...

$Accessibilité-Web.com : Formation open-source sur l\’accessibilité Web$

Recherche