Génération du site web de l'ULB - format xml

sommaire

index

marquer

Où placer et que peut contenir un élément <section> ?

On peut utiliser l'élément <section>:

parmi les éléments d'informations (là où un bloc peut être utilisé);
au sein d'une table des matières;
au sein d'une liste;
au sein d'un tableau;
dans le texte d'un paragraphe ou d'un titre.

Parmi les éléments d'informations

Un élément <section> peut être utilisé en tant qu'élement d'information dans une page (dans <page>, <zone>, <bloc>, <td> dans un tableau, etc.).

Cet élément contiendra tous les élements d'information que vous voulez rendre optionnels. Si la condition donnée par l'attribut options est vérifiée, alors ces éléments d'information seront affichés. Dans le cas contraire, ils seront cachés.

Dans cet exemple, une table des matières est affichée permettant un choix entre trois catégories: étudiant, personnel et extérieur. Ce choix active, via un lien hypertexte, l'une des trois options etud, perso et ext (ces trois options sont mutuellement exclusives: quand l'une est activée, les deux autres sont désactivées).

Ces options sont utilisées pour afficher trois sections, placées dans une <zone>. Ces trois sections pourront donc contenir tout ce qui est accepté dans une <zone>. Dans ce cas-ci, un bloc d'information différent sera affiché pour chaque option.

Exemple

					
<zone id="droite">
   <toc>
      ...
   </toc>
   
   <section options="etud">
      <bloc style="voile">
          <titre3>Informations pour les étudiants</titre3>
          <p>Cher(e) étudiant(e),</p>
      </bloc>
   </section>
   <section options="perso">
      <bloc style="voile">
          <titre3>Informations pour le personnel</titre3>
          <p>Cher(e) collègue(e),</p>
      </bloc>
   </section>
   <section options="ext">
      <bloc style="voile">
          <titre3>Informations pour les extérieurs</titre3>
          <p>Cher visiteur,</p>
      </bloc>
   </section>
</zone>

Vous êtes:

étudiant

personnel

extérieur

Dans cet autre exemple, c'est un nuage de tag qui est utilisé pour sélectionner une des quatre options e1, e2, e3 ou e4 (également mutuellement exclusives). L'activation des options se fait via des liens hypertextes utilisés dans le nuage de tags. Ces quatre options permettent d'afficher une actualité provenant de plusieurs catégories différentes de Babelbox.

Le nuage de tags et les sections sont placés dans un <bloc>, les sections pourront donc contenir tout ce qu'un bloc peut contenir (ici des <valves>).

Remarquez que la première section est affichée lorque e1 et active, mais également lorsque aucune des trois options n'est actives (grâce à options="e1|!e1,!e2,!e3,!e4").

Exemple

<bloc style="class6" bords="arrondis">
   <nuage style="class1" bords-haut="arrondis">
      ...
   </nuage>
   
   <section options="e1|!e1,!e2,!e3,!e4">
      <valves maximum="1" style="class1+titre" bords-bas="arrondis">
         <titre><titre3>Informations à la Une</titre3></titre>
         <source-babelbox box="1" type="actualités" catégories="Enseignement"/>
      </valves>	
   </section>
   <section options="e2">
      <valves maximum="1" style="class1+titre" bords-bas="arrondis">
         <titre><titre3>Informations concernant les enseignements à l'ULB</titre3></titre>
         <source-babelbox box="1" type="actualités" catégories="Enseignement"/>
      </valves>	
   </section>
   <section options="e3">
      <valves maximum="1" style="class1+titre" bords-bas="arrondis">
         <titre><titre3>Informations concernant la recherche à l'ULB</titre3></titre>
         <source-babelbox box="1" type="actualités" catégories="Recherche"/>
      </valves>	
   </section>
   <section options="e4">
      <valves maximum="1" style="class1+titre" bords-bas="arrondis">
         <titre><titre3>Informations concernant la culture à l'ULB</titre3></titre>
         <source-babelbox box="1" type="actualités" catégories="Vie culturelle"/>
      </valves>	
   </section>
</bloc>

Enseignements Recherche Une Culture

Au sein d'une table des matières

L'élément <section> peut être utilisé au sein d'une table des matières, dans un élément <toc>. Dans ce cas, il ne pourra contenir que ce qui est autorisé dans une table des matières.

Dans cet exemple, si l'option o1 n'est pas activée, seuls les titres de niveau 1 et 2 sont affichés (<page-titre2/>). Si elle est activée, les titres de niveau 1, 2 et 3 seront affichés (<page-titre3/>).

Exemple

<toc>
   <section options="!o1">
      <page-titre2/>
   </section>
   <section options="o1">
      <page-titre3/>
   </section> 
   
   <hr séparateur="colorDots3"/>

   <section options="!o1">
      <toc2 cible="inverser:o1">plus</toc2>
   </section>
   <section options="o1">
      <toc2 cible="inverser:o1">moins</toc2>
   </section>
</toc>

Remarquez également, après la ligne de séparation <hr>, comment deux autres sections font apparaître/disparaître des éléments <toc2> pour afficher les liens "plus" et "moins" utilisés pour inverser l'option (il existe une autre manière plus simple et élégante).

Ce qui donne:

Au sein d'une liste

L'élément <section> peut être utilisé au sein d'une liste, dans un élément <liste>. Dans ce cas, il ne pourra contenir que ce qui est autorisé dans une liste.

Dans cet exemple, une entrée sera ajoutée dans la liste si vous êtes membre du personnel, une autre si vous êtes étudiant.

Exemple

<p>Vous êtes:</p>
...
<liste séparateur="colorDots2">
   <p>Pour tout le monde</p>
   <section options="personnel">
      <p>Pour le personnel</p>
   </section>
   <section options="etudiant">
      <p>Pour les étudiants</p>
   </section>
   <p>Pour tout le monde à nouveau</p>
</liste>

Vous êtes:

Pour tout le monde

Pour tout le monde à nouveau

Il est à noter que si la liste utilise une numérotation, celle-ci s'adaptera en fonction des éléments réellement affichés.

Exemple

<p>Vous êtes:</p>
...
<liste séparateur="colorDots3" numérotation="I.">
   <p>Pour tout le monde</p>
   <section options="personnel2">
      <p>Pour le personnel</p>
   </section>
   <section options="etudiant2">
      <p>Pour les étudiants</p>
   </section>
   <p>Pour tout le monde à nouveau</p>
</liste>

Vous êtes:

I.	Pour tout le monde

II.	Pour le personnel

III.	Pour les étudiants

IV.	Pour tout le monde à nouveau

Au sein d'un tableau

L'élément <section> peut être utilisé au sein d'un tableau, dans un élément <table> ou dans un élément <tr>.

Utilisé dans <table>, il sert à insérer des lignes entières dans le tableau. Dans ce cas, il ne pourra contenir que des éléments <tr>.

Utilisé dans <tr>, il sert à insérer des cellules <td> dans la ligne du tableau (définie par le <tr>). Dans ce cas, il ne pourra contenir que des éléments <td>.

Dans ce dernier cas, si les conditions pour afficher la section ne sont pas réunies, les cellules seront quand même affichées, mais avec un contenu vide afin de ne pas trop perturber la mise en page du tableau.

Dans cet exemple, une ligne sera ajoutée dans la tableau si vous êtes membre du personnel, une autre si vous êtes étudiant. La dernière ligne contiendra deux cellules, dont le contenu ne sera visible que si vous êtes membre du personnel et/ou étudiant.

Exemple

<table>
   <tr><td nombre-colonnes="2"><p>Pour tout le monde</p></td></tr>
   <section options="personnel3">
      <tr><td nombre-colonnes="2"><p>Pour le personnel</p></td></tr>
   </section>
   <section options="etudiant3">
      <tr><td nombre-colonnes="2"><p>Pour les étudiants</p></td></tr>
   </section>
   <tr><td nombre-colonnes="2"><p>Pour tout le monde à nouveau</p></td></tr>
   <tr>
      <section options="personnel3">
         <td><p>personnel</p></td>
      </section>
      <section options="etudiant3">
         <td><p>etudiant</p></td>
      </section>
   </tr>
</table>

Vous êtes:

Pour tout le monde
Pour le personnel
Pour les étudiants
Pour tout le monde à nouveau
personnel	etudiant

Au sein d'un texte

Un élément <section> peut être utilisé en tant qu'élement d'information dans un texte, comme dans un titre ou un paragraphe, ainsi que dans tous les sous-éléments autorisés dans le texte en question (<b>, <i>, <sup>, <a>, etc.).

Cet élément contient à son tour tout ce qui est autorisé dans le texte à cet endroit-là.

Dans cet exemple, le contenu du paragraphe est modifié si vous êtes membre du patgs, du corps scientifique ou du corps académique.

Exemple

<p>Veuillez contacter le responsable 
   <section options="patgs">du patgs.</section>
   <section options="corsi">du corps scientifique.</section>
   <section options="acad">du corps académique.</section>
   <section options="!patgs,!corsi,!acad">(<i>faites votre choix ci-dessus</i>).</section>
</p>

Vous êtes membre du:

Veuillez contacter le responsable du patgs.du corps scientifique.du corps académique.(faites votre choix ci-dessus).

Dans cet exemple, c'est le texte d'un élément <toc2> qui est modifié, afin de faire apparaître le texte "plus" ou "moins" en fonction d'une option.

Exemple

<toc>
   ...
   <toc2 cible="inverser:o1">
      <section options="o1">moins</section>
      <section options="!o1">plus</section>
   </toc2>
</toc>

sommaire

index

page précédente

page suivante

English	中文	Page d'accueil	Contacts	Plan des campus
					pages annuaire