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.
