Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Nuage de tags: <nuage>

Un élément <nuage> permet de générer un nuage de tags, donnés par des éléments <tag>. Il s'agit de liens présentés de manière colorée et de façon aléatoire offrant l'avantage de ne pas devoir les structurer tout en donnant un air dynamique à une page.

Les éléments <tag> utilisent des liens hypertextes pour désigner la page à afficher lorsque l'utilisateur cliquera sur le lien. Ces éléments contiennent le texte à afficher dans le lien.

Le nuage se place généralement dans une petite colonne. C'est un bloc particulier, et donc toutes les possiblités de mise en page des blocs sont d'application.
Exemple
<nuage>
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

Style du nuage

Un élément <nuage> est considéré comme un bloc. Tous les attributs (style, bords et ses variantes, ajuster-hauteur...) définis pour les blocs peuvent être utilisés, ainsi que l'élément <titre>.

En voici quelques exemples:
Exemple
<nuage style="colorBar6" bords="arrondis">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

Exemple
<nuage style="colorBar6" bords="arrondis">
   <titre>
      <titre3>En savoir plus...</titre3>
   </titre>
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

Exemple
<nuage style="postit2">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

Style des tags

En outre, l'attribut style-tags permet de choisir le style d'affichage des tags du nuage. style-tags="couleur1" est la valeur par défaut.

Exemple
<nuage style-tags="couleur1">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

style-tags="monochrome1" utilise un dégradé de même couleur et des tailles variables.

Exemple
<nuage style-tags="monochrome1">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

Choix d'un style précis pour un tag

L'attribut style="x" où x est un nombre compris entre 0 et 9 permet de choisir le style d'un tag. Autrement, ce style est choisi de manière aléatoire (en s'assurant que le même style n'est pas utilisé deux fois consécutivement).

Exemple
<nuage ordre="liste">
   <tag style="0" docref="bloc">Blocs</tag>
   <tag style="1" docref="table">Tableaux</tag>
   <tag style="2" docref="toc">Tables des matières</tag>
   <tag style="3" docref="nuage">Nuage de tags</tag>
   <tag style="4" docref="image">Images</tag>
   <tag style="5" docref="zones">Zones</tag>
   <tag style="6" docref="paragraphes">Paragraphes</tag>
   <tag style="7" docref="news">Actualités</tag>
   <tag style="8" docref="titres">Titres</tag>
   <tag style="9" docref="liste">Liste à puces</tag>
   <tag style="0" docref="index">Index de mots-clés</tag>
   <tag style="1" docref="exemple">Exemples</tag>
   <tag style="2" docref="menu">Menus déroulants</tag>
</nuage>

Combinaison de style et de style-tags

Voici quelques exemples de combinaison de style et de style-tags:
Exemple
<nuage style="barre-menu" bords="arrondis" style-tags="monochrome1">
   ...
</nuage>
Exemple
<nuage style="colorBar2" style-tags="couleur1">
   ...
</nuage>
Exemple
<nuage style="voile" bords="arrondis" style-tags="couleur1">
      ...
</nuage>
Exemple
<nuage style="postit1" style-tags="monochrome1">
   ...
</nuage>
Exemple
<nuage style="voile-cadre2" bords="arrondis" style-tags="monochrome1">
   <titre>
      <titre2>En savoir plus...</titre2>
   </titre>
   ...
</nuage>

Ordre d'apparition des tags
Exemple
<nuage ordre="aléatoire">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

L'attribut ordre="alphabétique" permet d'afficher les tags dans un ordre alphabétique.

Exemple
<nuage ordre="alphabétique">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

L'attribut ordre="liste" permet d'afficher les tags dans l'ordre de leur définition.

Exemple
<nuage ordre="liste">
   <tag docref="bloc">Blocs</tag>
   <tag docref="table">Tableaux</tag>
   <tag docref="toc">Tables des matières</tag>
   <tag docref="nuage">Nuage de tags</tag>
   <tag docref="image">Images</tag>
   <tag docref="zones">Zones</tag>
   <tag docref="paragraphes">Paragraphes</tag>
   <tag docref="news">Actualités</tag>
   <tag docref="titres">Titres</tag>
   <tag docref="liste">Liste à puces</tag>
   <tag docref="index">Index de mots-clés</tag>
   <tag docref="exemple">Exemples</tag>
   <tag docref="menu">Menus déroulants</tag>
</nuage>

Alignement du nuage dans la page ou dans la colonne

L'attribut alignement="gauche" permet d'aligner le texte du nuage à gauche. C'est la valeur par défaut.

Exemple
<nuage alignement="gauche">
   ...
</nuage>

L'attribut alignement="gauche" permet d'aligner le texte du nuage à droite.

Exemple
<nuage alignement="droite">
    ...
</nuage>

L'attribut alignement="justifié" permet d'aligner le texte du nuage à gauche et à droite (justifié dans la page).

Exemple
<nuage alignement="justifié">
   ...
</nuage>

L'attribut alignement="centre" permet de centrer le texte du nuage dans la page.

Exemple
<nuage alignement="centre">
   ...
</nuage>
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique