La structuration logique
Un document peut être décrit comme une collection d'objets comportant des objets de plus haut niveau composés d'objets plus primitifs. Les relations entre ces objets représentent les relations logiques entre les composants du document. Par exemple [...] un livre est divisé en chapitres, chaque chapitre en sections, sous-sections, paragraphes, etc. Une telle organisation documentaire est appelée représentation de document structuré.
(traduit depuis la préface de (André et al., 1989))
Définition : Structuration logique (ou structuration documentaire)
On appelle structuration logique d'un contenu une inscription explicitant la structure de ce contenu en fonction de son organisation et des attributs intrinsèques qui le caractérisent plutôt qu'en fonction de propriétés de présentation sur un support.
Synonyme : structuration documentaire
Définition : Document abstrait (ou document structuré)
Un document décrit par sa structure logique est appelé document abstrait, on parle aussi de document structuré logiquement (et souvent simplement de document structuré).
Exemple :
<exercice>
<enonce> Soit un triangle rectangle disposant d'un angle de 30 degrés. </enonce>
<question> Donner la valeur des autres angles du triangle. </question>
<indice> La somme des angles d'un triangle est égale à 180 degrés. </indice>
<solution> 90 et 60 degrés. </solution>
</exercice>
Définition : Structuration physique (ou mise en forme)
On appelle structuration physique ou mise en forme d'un contenu une inscription décrivant la façon dont ce contenu doit être présenté sur un support donné.
Définition : Document formaté
Un document décrit par sa structure physique est appelé document formaté, c'est en général également ce dont on parle quand on parle simplement de document (au sens d'information organisée pour être lisible par un humain).
Exemple :
Fondamental :
Il est possible de calculer une ou plusieurs structurations physiques pour une même structuration logique.
Il est possible de calculer d'autant plus de structurations physiques que la structuration logique est indépendante de ses supports de présentation.
Exercice
Soit le texte suivant correspondant au journal en cours de rédaction Le Fil.
Le Fil
Actu
Exams annulés
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit eros, consectetur et tortor quis, iaculis molestie elit. In sed finibus purus, ut scelerisque nulla.
Nam hendrerit luctus purus blandit imperdiet. In viverra, justo vel vulputate mattis, tellus libero laoreet dolor, eu luctus augue elit vestibulum quam. Nulla ut massa iaculis, euismod leo sed, consectetur sapien. Nunc sollicitudin libero hendrerit vehicula congue.
Fresque du climat
Nulla porttitor, massa non luctus consectetur, eros neque accumsan metus, a commodo nulla eros sed nibh. Sed in eros sed lacus scelerisque convallis. Aliquam in ultrices diam. Morbi id leo in sem porta euismod. Maecenas purus justo, egestas ut felis sit amet, tincidunt lobortis tellus.
Praesent pellentesque scelerisque tristique.
BOP
TODO
Jeux
TODO
Crédits : BDE — Licence Creative Commons BY-SA
Créer une page HTML en structurant le contenu à l'aide des balises div, h1, h2 et h3 et p, en vue d'obtenir le résultat ci-après.
On ajoutera un <div id="header"> pour le titre principal et un <div id="footer"> en pied de page pour les crédits.
<html lang="fr">
<head>
...
</head>
<body>
<div id="header">
<h1>...</h1>
</div>
<div id="menu">
<ul>
...
</ul>
</div>
<div id="content">
<h2>Actu</h2>
<div id="post1">
...
</div>
<div id="post2">
...
</div>
</div>
...
<div id="footer">
...
</div>
</body>
</html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le Fil, le journal des étudiant·es de l'UTC</title>
</head>
<body>
<div id="header">
<h1>Le Fil</h1>
</div>
<div id="menu">
<ul>
<li><a href="#actu">Actu</a></li>
<li><a href="#BOP">BOP</a></li>
<li><a href="#Jeux">Jeux</a></li>
</ul>
</div>
<div class="content" id="actu">
<h2>Actu</h2>
<div class="post">
<h3>Exams annulés</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit eros, consectetur et tortor quis, iaculis molestie elit. In sed finibus purus, ut scelerisque nulla.</p>
<p>Nam hendrerit luctus purus blandit imperdiet. In viverra, justo vel vulputate mattis, tellus libero laoreet dolor, eu luctus augue elit vestibulum quam. Nulla ut massa iaculis, euismod leo sed, consectetur sapien. Nunc sollicitudin libero hendrerit vehicula congue.</p>
</div>
<div class="post">
<h3>Fresque du climat</h3>
<p>Nulla porttitor, massa non luctus consectetur, eros neque accumsan metus, a commodo nulla eros sed nibh. Sed in eros sed lacus scelerisque convallis. Aliquam in ultrices diam. Morbi id leo in sem porta euismod. Maecenas purus justo, egestas ut felis sit amet, tincidunt lobortis tellus.</p>
<p>Praesent pellentesque scelerisque tristique.</p>
</div>
</div>
<div class="content" id="bop">
<h2>BOP</h2>
<p>TODO</p>
</div>
<div class="content" id="jeux">
<h2>Jeux</h2>
<p>TODO</p>
</div>
<div id="footer">
<p>Crédits : BDE — Licence Creative Commons BY-SA</p>
</div>
</body>
</html>
Sections en HTML5
Présentation des balises de section
Ci-dessous les principales balises de section introduites par HTML5 :
<section>Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
<nav>Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
<article>Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
<aside>Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header>Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
<footer>Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).
Source : http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html.
L'intérêt des balises de section par rapport à HTML4
Avec HTML5, certains navigateurs peuvent :
adapter l'affichage du contenu selon le support (mobile ou non) ;
générer automatiquement une table des matières du document avec sauts rapides.
Ensuite, les technologies d'assistance (personnes aveugles...) peuvent délivrer un contenu adapté à son rôle dans le document (titre, paragraphe...).
Enfin, les moteurs d'indexation améliorent l'accessibilité des pages bien structurées.
Valider un fichier HTML
Fondamental :
Les fichiers HTML que l'on écrit et que l'on met en ligne doivent respecter les standard du W3C.
Rappel : Utiliser un éditeur colorisant
Méthode : Afficher la source
Les navigateurs web proposent une fonction permettant d'afficher la source HTML de la page que l'on consulte.
Sous Firefox : Clic droit puis View Page Source (ou ajouter view-source: devant n'importe quelle URL).
Exemple :
<html lang="fr">
<head>
<!-- Primary Meta Tags --><meta charset="utf-8">
[...]
<!-- Page Title --><title>Gauthier Roussilhe</title>
[...]
</head>
<body>
<header class="header">
<h1 class="site-title"><a href="../index.html">Gauthier Roussilhe</a></h1>
[...]
</header>
[...]
view-source:https://gauthierroussilhe.com/post/paradoxes-enjeux.html (extraits)
Méthode : W3C Markup Validation Service
Le W3C propose un service permettant de valider le code HTML d'une page en ligne ou locale : https://validator.w3.org/
