Un exemple de reconstruction de document HTML. Notes qui serviront pour la présentation prévue pour l'association Tuxbihan, Introduction aux CSS.

La structure d'une page du mémoire est simple : elle comporte le corps du texte et des notes. Je vais donc préciser cette structure en utilisant l'élément div :

<div id="corps">
</div>

<div id="note"> 
</div>

Le corps du texte porte un titre, se compose de paragraphes et de citations. Ces dernières sont de deux sortes : les citations courtes qui s'insèrent à l'intérieur d'un paragraphe, les citations longues qui sont présentées en dehors des paragraphes. Pour les premières, j'utilise l'élément q et pour les secondes, l'élément blockquote. J'utilise classiquement l'élément h1 pour le titre de la section et l'élément p pour les paragraphes. Extrait : 

<div id="corps">

<h1>Le titre de ma section</h1>

<p>Un paragraphe <q>avec une courte citation</q> tandis
qu'ici ma citation est plus longue :</p>

<blockquote>Une citation beaucoup plus longue mis en évidence en
dehors des paragraphes</blockquote>

</div>

Je souhaite ensuite préciser les références de mes citations en dehors du corps du texte. Pour marquer ce renvoi, je vais utiliser l'élément sup après chaque citation, avec un élément a qui précisera l'identifiant, la référence et le titre de la note. Les références sont regroupées dans le deuxième niveau de la page que j'ai défini par un élément div. Extrait  

<div id="corps">

<h2>Le titre de ma section</h2>

<p>Un paragraphe <q>avec une courte citation</q>
<sup><a id="1" href="#note1" title="Note 1">1</a>
</sup>tandis qu'ici ma citation est plus longue :</p>

<blockquote>Une citation beaucoup plus longue mis en évidence en
dehors des paragraphes</blockquote><sup><a id="2"
href="#note2" title="Note 2">1</a></sup>

</div>

<div id="notes">

<p><a id="note1" href="#1" title="Note 1">Titre du livre et
année de publication.</a></p>

<p><a id="note2" href="#2" title="Note 2">Titre du livre et
année de publication.</a></p>

</div>

On remarque que le titre du bloc notes (mouahahaha) est h2 pour marquer qu'il n'est pas du même niveau logique que le titre du bloc corps. Cela posera un problème par la suite que j'examinerais plus tard.

Que reste-t-il à faire ? Il va falloir prendre en compte le fait que certaines pages vont contenir des mots d'une autre langue que la définition des pages, notament des termes ou des références allemandes ou des termes grecs. Il va falloir examiner ensuite quelle est la meilleure manière de citer les références. Enfin, si la navigation à l'intérieur d'une page est règlée à travers le système de référence, il nous faut définir la navigation externe, c'est-à-dire la navigation entre les pages. Je laisse les deux premiers points pour plus tard et je vais décrire la conception de la barre de navigation en essayant de justifier mes choix.

La première chose que je veux faire, c'est utiliser une barre de navigation qui soit disponible, non seulement pour les pages du mémoire, mais pour tout le site. Pour ce faire, je vais utiliser l'élément link qui définie un lien indépendant du média utilisé. Contrairement à a, il apparaît nécessairement dans l'élément head. Extrait :

<link rel="Table des matières" href="index.html" />
<link rel="Suivant" href="chapitre1.html" />
<link rel="Prédédent" href="introduction.html" />

Deux problèmes non-résolus pour l'instant : quelle est la distinction entre rel et rev ? A-t-on le droit de franciser ces éléments ? Je passe pour l'instant.

L'avantage pour un navigateur comme Links, c'est que cette barre de navigation apparaît au début de la page, comme ceci :

Link: Table des matières
Link: Suivant
Link: Précédent

Je vais définir ensuite une autre barre de navigation, visible aussi cette fois-ci dans Mozilla, en ajoutant un bloc à ma page :

<div id="corps">
</div>

<div id="note"> 
</div>

<div id="navigation"> 

<p>
<a href="index.html">Table des matières</a>
<a href="introduction.html">précédent</a>
<a href="chapitre1.html">suivant</a>
</p> 

</div>

C'est tout pour aujourd'hui.