HTML5, structuration documentaire

Afficher le planAfficher le plan

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 :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<!DOCTYPE html>
2
<html>
3
<head>
4
   <title>HTML5</title>
5
   <meta charset="utf-8">
6
</head>
7
<body>
8
</body>
9
</html>
<!DOCTYPE html>
<html>
<head>
   <title>HTML5</title>
   <meta charset="utf-8">
</head>
<body>
</body>
</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.

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 ?

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

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 :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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>
<?xml-stylesheet type="text/xsl" href="instruments.xsl"?>
<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8"/>
  </head>
  
  <body>
    <h1>Instruments</h1>
    
    <section>
      <h2>Instruments à cordes</h2>
      <h3>Violon</h3>
      <h3>Piano</h3>
      <h3>Harpe</h3>
    </section>
    
    <section>
      <h2>Instruments à vent</h2>
      <h3>Haut-bois</h3>
      <h3>Cor</h3>
    </section>
    
    <div class="transclusion" id="instruments-percussions" data-url="percu.xml"></div>
  </body>
</html>

Le document percus.html suivant :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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>
<?xml version="1.0" encoding="UTF-8"?>

<section>
    <h1>Percussions</h1>
    <h2>Tambour</h2>
    <h2>Triangle</h2>
    <h2>Claves</h2>
</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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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>
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  
  <xsl:character-map name="doctype">
    <xsl:output-character character="&lt;" string="&lt;"/>
    <xsl:output-character character="&gt;" string="&gt;"/>
  </xsl:character-map>
  
  <xsl:output
    method="xml"
    encoding="utf-8"
    indent="yes"
    omit-xml-declaration="yes"
    use-character-maps="doctype"
  />
  
  <!-- Transformation identité -->
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>
  
  <!-- Génération du DOCTYPE -->
  <xsl:template match="html">
    <xsl:text>&lt;!DOCTYPE html&gt;
    </xsl:text>
    <xsl:element name="html">
      <xsl:apply-templates select="@*|node()"/>
    </xsl:element>
  </xsl:template>
  
  <!-- Pas de processing instruction -->
  <xsl:template priority="1" match="processing-instruction()" />
  
</xsl:stylesheet>
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)