HTML5, structuration documentaire

Algorithme Outline HTML5

Le but de cet exercice est de se familiariser avec l'algorithme Outline HTML5 et d'en comprendre les mécanismes de base.

On dispose du squelette HTML5 suivant :

1
<!DOCTYPE html>
2
<html>
3
<head>
4
   <title>HTML5</title>
5
   <meta charset="utf-8">
6
</head>
7
<body>
8
</body>
9
</html>

Visualiser le sectionnement généré par l'algorithme Outline HTML5 en utilisant l'un des deux outils suivants :

Pour l'instant, il n'y a qu'une section ("1. Document" ou 1. "Untitled section") créée par l'élément <body>.

Question

Générer un code HTML dans l'élément body pour parvenir au sectionnement suivant :

  1. Instruments à cordes

    1. Violon

    2. Piano

    3. Harpe

  2. Instruments à vent

    1. Haut-bois

    2. Cor

Dans un premier temps, on utilisera seulement des balises de titre pour ce faire : h1 ... h6.

Indice

Rappel : une balise de titre non première de sa section de niveau inférieur à la précédente ouvre une sous-section implicite.

Solution
1
<h1>Instruments à cordes</h1>
2
   <h2>Violon</h2>
3
   <h2>Piano</h2>
4
   <h2>Harpe</h2>
5
<h1>Instruments à vent</h1>
6
   <h2>Haut-bois</h2>
7
   <h2>Cor</h2>

Question

On remarque que notre document n'a plus de racine unique dans son plan, mais deux sections au niveau supérieur.

Comment expliquer la construction de ce plan ?

Indice

Ne pas oublier que la première balise de titre dans une section en définit le titre.

Indice

Relire le comportement implicite d'ouverture/fermeture de sections par les balises de titre.

Solution

La première balise h1 est la première balise de titre de l'élément body, elle en définit donc le titre sans ouvrir de section.

L'élément body est la section reliée aux instruments à cordes, avec un titre explicite (premier h1).

Le premier h2 a ouvert une sous-section.

Le deuxième h2 a fermé la section précédente et ouvert une nouvelle sous section. Idem pour le troisième h2.

Le deuxième h1 a fermé la section du troisième h2 et ouvre une nouvelle section du niveau supérieur à celle-ci, soit du même niveau que l'élément body.

Question

Utiliser les balises de section HTML5 pour obtenir le plan suivant de manière purement explicite, puis en mixant explicite/implicite ;

  1. Instruments

    1. Instruments à cordes

      1. Violon

      2. Piano

      3. Harpe

    2. Instruments à vent

      1. Haut-bois

      2. Cor

Solution

Purement explicite

1
<body>
2
<h1>Instruments</h1>
3
4
<section>
5
<h1>Instruments à cordes</h1>
6
   <section>
7
      <h1>Violon</h1>
8
   </section>
9
   <section>
10
      <h1>Piano</h1>
11
   </section>
12
   <section>
13
      <h1>Harpe</h1>
14
   </section>
15
</section>
16
17
<section>
18
<h1>Instruments à vent</h1>
19
   <section>
20
      <h1>Haut-bois</h1>
21
   </section>
22
   <section>
23
      <h1>Cor</h1>
24
   </section>
25
</section>
26
</body>
Combinaison explicite/implicite
1
<body>
2
<h1>Instruments</h1>
3
4
<section>
5
<h2>Instruments à cordes</h2>
6
   <h3>Violon</h3>
7
   <h3>Piano</h3>
8
   <h3>Harpe</h3>
9
</section>
10
11
<section>
12
<h2>Instruments à vent</h2>
13
   <h3>Haut-bois</h3>
14
   <h3>Cor</h3>
15
</section>
16
</body>
Remarque
Le rang des balises de titre utilisé est purement arbitraire, tant que le garde la hiérarchie relative des éléments entre eux.
Question
Grâce à l'algorithme Outline HTML5, les transclusions sont facilitées car le plan du document est dynamiquement calculé selon le plan de chaque section.
On dispose du fichier instruments.html XHTML5 suivant :
1
<?xml-stylesheet type="text/xsl" href="instruments.xsl"?>
2
<!DOCTYPE html>
3
<html>
4
  
5
  <head>
6
    <meta charset="utf-8"/>
7
  </head>
8
  
9
  <body>
10
    <h1>Instruments</h1>
11
    
12
    <section>
13
      <h2>Instruments à cordes</h2>
14
      <h3>Violon</h3>
15
      <h3>Piano</h3>
16
      <h3>Harpe</h3>
17
    </section>
18
    
19
    <section>
20
      <h2>Instruments à vent</h2>
21
      <h3>Haut-bois</h3>
22
      <h3>Cor</h3>
23
    </section>
24
    
25
    <div class="transclusion" id="instruments-percussions" data-url="percu.xml"></div>
26
  </body>
27
</html>
Le document percus.html suivant :
1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<section>
4
    <h1>Percussions</h1>
5
    <h2>Tambour</h2>
6
    <h2>Triangle</h2>
7
    <h2>Claves</h2>
8
</section>
Compléter le fichier instruments.xsl donné ci-dessous pour faire la transclusion du fichier percus.html dans le fichier instruments.html. Observer l'Outline généré en regard des rangs des balises de titre utilisés. Conclure.
1
<?xml version="1.0" encoding="UTF-8"?>
2
3
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
4
  
5
  <xsl:character-map name="doctype">
6
    <xsl:output-character character="&lt;" string="&lt;"/>
7
    <xsl:output-character character="&gt;" string="&gt;"/>
8
  </xsl:character-map>
9
  
10
  <xsl:output
11
    method="xml"
12
    encoding="utf-8"
13
    indent="yes"
14
    omit-xml-declaration="yes"
15
    use-character-maps="doctype"
16
  />
17
  
18
  <!-- Transformation identité -->
19
  <xsl:template match="@*|node()">
20
    <xsl:copy>
21
      <xsl:apply-templates select="@*|node()"/>
22
    </xsl:copy>
23
  </xsl:template>
24
  
25
  <!-- Génération du DOCTYPE -->
26
  <xsl:template match="html">
27
    <xsl:text>&lt;!DOCTYPE html&gt;
28
    </xsl:text>
29
    <xsl:element name="html">
30
      <xsl:apply-templates select="@*|node()"/>
31
    </xsl:element>
32
  </xsl:template>
33
  
34
  <!-- Pas de processing instruction -->
35
  <xsl:template priority="1" match="processing-instruction()" />
36
  
37
</xsl:stylesheet>
Solution
1
<xsl:template match="div[@class='transclusion' and @id='instruments-percussions']">
2
    <xsl:copy-of select="document('percus.html')"></xsl:copy-of>
3
</xsl:template>
Fichier HTML5 en sortie :
1
<!DOCTYPE html>
2
  <html>
3
  
4
  <head>
5
      <meta charset="utf-8"/>
6
  </head>
7
  
8
  <body>
9
      <h1>Instruments</h1>
10
    
11
      <section>
12
         <h2>Instruments à cordes</h2>
13
         <h3>Violon</h3>
14
         <h3>Piano</h3>
15
         <h3>Harpe</h3>
16
      </section>
17
    
18
      <section>
19
         <h2>Instruments à vent</h2>
20
         <h3>Haut-bois</h3>
21
         <h3>Cor</h3>
22
      </section>
23
    
24
      <section>
25
         <h1>Percussions</h1>
26
         <h2>Tambour</h2>
27
         <h2>Triangle</h2>
28
         <h2>Claves</h2>
29
      </section>
30
  </body>
31
</html>
32
Plan obtenu :
  1. Instruments
    1. Instruments à cordes
      1. Violon
      2. Piano
      3. Harpe
    2. Instruments à vent
      1. Haut-bois
      2. Cor
    3. Percussions
      1. Tambour
      2. Triangle
      3. Claves
Conclusion : Le fait que l'on utilise des balises h1 et h2 dans le fichier percus.html ne perturbe pas la bonne génération du plan du document.
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer
								Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC)
								Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)