Intégration 2 : constuire le html

Une fois que le thème graphique a été construit (peu importe le logiciel), et qu’une série d’annotations pratiques ont été faites, on peut passer à la première étape de l’intégration : la construction d’un page html adaptée aux besoins du thème.

Précédent | 17/20 | Suivant

Identification des éléments nécessaires

Nous prenons ici pour exemple un site assez classique dans sa structure que voici avec ses éléments identifiés :

Après avoir identifié les différents blocs comme dans l’image ci-dessus, on peut en déduire une structure html en adoptant quelques règles simples :
- les blocs d’information sont listés dans le html du haut de la page vers le bas de la page, car c’est dans ce sens que sera affichée la page par le navigateur
- la sidebar est autant que possible écrite sous le contenu principal pour lui donner un ordre prioritaire. Il s’agit d’une règle de bonne pratique, pas une obligation.

On va placer du contenu fictif dans cette page. Une fois que l’on construira le thème avec Wordpress, le contenu factice sera remplacé par les "templates tags" qui nourriront la page avec le contenu provenant de la base de données.

Wrapper, header

Une fois ces éléments identifiés, on peut démarrer une page html. Pour cet exemple encore, on choisira une norme XHTML 1 transitionnel. On démarre avec Smultron (ou Fraise) comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>

Une feuille de style est directement associée, avec pour nom style.css.

On va englober l’ensemble du code dans un div portant l’id "wrapper". C’est un habitude d’intégrateur : le wrapper permet de limiter la largeur de l’ensemble de la page, ou de centrer la page facilement.

<div id="wrapper">
  <div id="header">
     <h1><a href="./">Nom du site</a></h1>
  </div>

</div>

On place à l’intérieur le header, pour y placer le nom du site dans la balise h1. H1 désigne le titre principal du site, je préfère y placer personnellement le titre d’un article, mais il se trouve qu’y mettre le nom du site est un comportement standard de Wordpress. Je m’y plie donc.

Navigation

Selon les cas, on placera la barre de navigation (si elle existe) dans le header ou sous le header. Dans le cas présent, on peut la placer dans le header, on obtient donc ceci :

<div id="wrapper">
  <div id="header">
     <h1><a href="./">Nom du site</a></h1>
     <div id="site-navigation">
     <ul>
     <li><a href="./">Home</a></li>
     <li><a href="./">Work</a></li>
     <li><a href="./">Me</a></li>
     <li><a href="./">Journal</a></li>
     <li><a href="./">Let's talk</a></li>
     </ul>
     </div>
  </div>

</div>

Si le menu de navigation comporte deux niveaux, on aura une deuxième liste (ul + li) à l’intérieur des "li" du premier niveau.

Un élément non-standard

Ce layout comporte un élément assez inhabituel, un titre de section que nous avons appelé "page-header". Ajoutons le entre la navigation et le main, là ou il apparait dans la page :

<div id="page-header">Work</div>

Main

On trouve dans la partie principale de cette page trois choses : un diaporama (que l’on réduira à une image pour cette démo), un texte principal et de l’information secondaire. On codera comme suit :

<div id="main">
<img id="image-principale" src="bigimage.jpg" />
<div id="texte">
<h2 class="case-title">Down With Webster</h2>
<p class="ingress">A website I designed while freelancing in September/October 2009 for the upcoming band from Canada, Down With Webster, that recently signed with Motown/Universal in USA.
</p>

<p>The site itself works as a more personal communication tool for the band members and includes a blog, twitter and flickr feed and the opportunity for their fans to comment on their blog posts.
</p>
</div>

<div id="information">
<h4>Responsibilities</h4>
<p>Design</p>
<h4>Timeframe</h4>
<p>September 2009 &mdash; October 2009</p>
</div>

</div>

Le titre de l’article est placé dans un h2, les sous-titres dans des h4. Pour le reste, on a un div "texte" contenant une série de paragraphes.

Sidebar
Comme annoncé, la sidebar arrive après le main, bien que dans le sens de lecture gauche-droite, elle soit placée avant. Il s’agit d’une liste contenue dans un div, chaque li contenant une image, un titre en h4 contenant un lien et un texte en un seul paragraphe. Nous avons ajouté un "clearer", inutile sémantiquement, mais qui sera utile pour la mise en page. Une entorse aux recommandations du W3C, donc.

<div id="sidebar">
<ul id="work_list">
        <li class="current">
        <img src="fichiers/work-thumb.png">
        <h4>Down With Webster</h4>
        <p>Website designed for Down With Webster while freelancing for 45royale, Inc.</p>
        <div class="clearer"></div>
        </li>
                       
        <li>
        <a href="/portfolio/dokus/"><img src="fichiers/lite_port_____.png"> </a>
        <h4><a href="/portfolio/dokus/">Dokus</a></h4>
        <p>Web application for small business with invoicing, task and project management. </p>
        <div class="clearer"></div>
        </li>
                       
        <li>
        <a href="/portfolio/kompani-linge/"><img src="fichiers/thumb-port.png"></a>
        <h4><a href="/portfolio/kompani-linge/">Kompani Linge</a></h4>
        <p>A different production agency with love for theater and drama and an intention of creating good art, peace and change.</p>
        </li>
                       
        <li>
        <a href="/portfolio/noko-jeans/"><img src="fichiers/thumb-port.png">
        </a><h4><a href="/portfolio/noko-jeans/">Noko Jeans</a></h4>
        <p>Noko Jeans is jeans from North Korea.</p>
        </li>
                       
        <li>
        <a href="/portfolio/ic-finance/"><img src="fichiers/thumb-port.png">
        </a><h4><a href="/portfolio/ic-finance/">IC-Finance</a></h4>
        <p>IC-Finance offers accounting through simple web applications.</p>
        </li>       
</ul>

</div>

Footer

Un footer termine assez classiquement la page :

<div id="footer">
<p id="footer-copy">&copy; 2009 </p>

<p id="footer-contact"><a href="http://www.twitter.com" title="Stalk me on Twitter!">Twitter</a> &mdash; <a href="/about/" title="About me">About me</a> &mdash; <a href="/contact/" title="Let's talk">Contact</a></p>

<p id="quote">I'm not here just to deliver, I'm here to impress.</p>
</div>

Voilà

Le code est maintenant terminé. Analysé par Firebug sur Firefow, ça donne ça :

La page html complète peut être téléchargée ci-joint. On peut maintenant passer au codage de la CSS dans l’article suivant.

Forum

  • Intégration 2 : constuire le html par debutant , 7 juillet 2011

    Bonsoir, juste une petite question car je débute :
    Pourquoi cette fameuse sidebar est codée après le main ?? Je ne suis pas sûr de tout comprendre là..

  • Intégration 2 : constuire le html par Stéphane Noel , 27 novembre 2011

    Parce que le contenu doit être placé avant les contenus contextuels. Pour des raisons de "bonne pratique". La légende dit que c’est meilleur pour le référencement. C’est du coup un réflexe. Chaque codeur est souverain sur son code du moment que celui-ci reste sémantique, par ailleurs.