Pour arriver à une très grande diversité de mise en forme grâce aux feuilles de style CCS, HTML donne la possibilité d’attribuer à n’importe quel élément une ou plusieurs classes ainsi qu’un identifiant unique, ce dernier étant bien pratique lorsque l’on veut le manipuler via du javascript
Le logiciel BaseDeFiches et son format XML de stockage des données offrent un mécanisme équivalent : tous les éléments XML qui définissent du texte peuvent posséder un attribut indiquant la ou les classes et un attribut définissant son identifiant
Concrètement, classes et identifiants ne vont pas être employés au quotidien par les utilisateurs et ils vont surtout servir si le gestionnaire de la base fait un effort de personnalisation (via des modèles XSLT) ou si la base est valorisée sous la forme d’un site Web
La définition des classes est laissée à la charge du gestionaire de la base en fonction de ses besoins Cependant, une série de classes prédéfinies sont proposées dans le modèle par défaut Ces classes servent principalement à changer la couleur du texte et sont rappelées dans ce tableau Ce sont ces classes qui serviront dans les exemples
Ceci est une phrase en rouge avec du texte vert
| Nom de la classe | Conséquence à l’affichage |
|---|---|
| R | colorie le texte en rouge |
| G | colorie le texte en vert |
| B | colorie le texte en bleu |
| C | colorie le texte en bleu clair (Cyan) |
| Y | colorie le texte en jaune |
| M | colorie le texte en magenta |
| OL | Transforme une liste en liste numérotée |
| CB | propriété CSS clear: both utilisée pour qu’un paragraphe ne « s’écoule » pas autour d’une image placée avant lui |
| CL | Équivalent de clear: left; |
| CR | Équivalent de clear: right; |
| TAR | text-align: right; Alignement à droite (uniquement pour les paragraphes) |
| TAC | text-align: center; Alignement au centre (uniquement pour les paragraphes) |
| TAL | text-align: left; Alignement à gauche (uniquement pour les paragraphes) |
| TAJ | text-align: justify; Alignement justifié (uniquement pour les paragraphes) |
Au niveau de la saisie, la définition se fait en indiquant la ou les classes suivies éventuellement de l’identifiant précédé d’un point d’exclamation « ! » , le tout entre crochets Classes et identifiant ne doivent être constitué que des caractères alphanumériques non accenturés, les caractères - et _ sont les seuls autorisés en plus de l’espace qui séparent les noms de classes On le voit l’identifiant est un cas particulier des classes, c’est pourquoi on ne parlera plus que de classes seules par la suite (en outre le modèle par défaut n’offre pas d’exemple d’utilisation d’un identifiant)
[R]: attribue la classe R
[R!test]: attribue la classe R et l'identifiant test
[!test]: attribue l'identifiant test
[classe1 R classe3!id]: attribue les classes classe1, R et classe2 et l'identifiant id
Exemple de définition de classe
Pour attribuer une classe à un paragraphe, il faut commencer la ligne par la définition de la classe avant même tout caractère identifiant le paragraphe
[R]Paragraphe en rouge
[G]><VIC : citation en vert
[B]###Intertitre en bleu
[Y]<VIC : attribution d’interlocuteur en jaune
Ce qui donne le résultat suivant :
Paragraphe en rouge
citation en vert
VIC : attribution d’interlocuteur en jaune
Intertitre en bleu
Pour les zones spéciales, la définition de classe s’insère comme pour les paragraphes, avant la suite des trois caractères délimiteurs de la zone Il est également possible de définir une classe pour le numéro et la légende en précédant n= et l= par la définition de la classe
Pour les zones de code, il est possible de préciser une classe pour chaque ligne de code en commençant la ligne par la définition de classes
Pour les tableaux, il est possible de préciser une classe pour chaque cellule en commençant celle-ci par la définition de classe Il est également possible de définir une classe pour une ligne entière en insérant avant les lignes des cellules une ligne avec uniquement la définition de la classe
Mis à part le numéro et la légende, il n’y a pas de définition de classe possible à l’intérieur d’une zone d’insertion d’image
[R]===
[M]n=Tableau 1
[C]l=Exemple de couleur
Cellule en rouge (couleur du tableau)
[G]cellule en vert définie au niveau de la cellule
[B]
Ligne en bleu
idem
===
[M]+++
Zone de codes
entièrement en magenta
sauf cette ligne en bleu
et cette ligne en vert
++++
+++script
function test() {
[B] var test = true;
}
+++++++++++
exemples de zones spéciales
Ce qui donne :
| Cellule en rouge (couleur du tableau) | cellule en vert définie au niveau de la cellule |
| Ligne en bleu | idem |
Zone de codes
entièrement en magenta
sauf cette ligne en bleu
et cette ligne en vert
function test() {
var test = true;
}
Le cas des listes
Le cas des listes est un plus compliqué si l’on veut avoir une gestion très fine des classes En effet, le début d’une liste se signale simplement en commençant par un tiret Cependant, lorsque l’on tape « - début de liste » , on crèe en réalité trois éléments imbriqués <ul><li><p> Or chacun est susceptible de diposer de sa propre définition de classe Il faut alors respecter la syntaxe suivante :
La définition de classe de l’élément <ul> se fait avant le tiret
La définition de classe de l’élément <li> se fait après le tiret
La définition de classe de l’élément <p> se fait après celle de l’élément <li>, si celui n’a pas de classe, il faut le préciser par un double crochet vide []
La classe OL donné à un élément <ul> permet de transformer cette liste en liste numérotée Cette fonction est propre au modèle par défaut
[R]- Liste par défaut en rouge
-[G] cet élément est entièrement en vert
_ y compris les paragraphes suivant
_ comme le montre ce paragraphe
-[][G] ici seule la première ligne est en vert
_ la suite est en rouge
- ici la première ligne est en rouge
[G]_ et c’est la deuxième ligne qui est seulement en vert
_ (effectivement)
-[M][C] Enfin, cette première ligne est en bleu ciel
_ alors que le reste
_ est en magenta
[G]_ sauf la dernière
-[OL]- Ici on inclut
--[G] une liste numérotée
__ avec toujours les mêmes possibilités
[M]__ de couleur
Ce qui donne la liste suivante :
Liste par défaut en rouge
cet élément est entièrement en vert
y compris les paragraphes suivant
comme le montre ce paragraphe
ici seule la première ligne est en vert
la suite est en rouge
ici la première ligne est en rouge
et c’est la deuxième ligne qui est seulement en vert
(effectivement)
Enfin, cette première ligne est en bleu ciel
alors que le reste
est en magenta
sauf la dernière
Ici on inclut
une liste numérotée
avec toujours les mêmes possibilités
de couleur
Nous sommes évidemment ici dans un cas extrême.
Les classes au niveau des caractères
Il est possible d’attribuer des classes (voir des identifiants) à des éléments de mise en forme de caractères en insérant un bloc comprenant la classe à la fin de la série de blocs.
Cette phrase normale propose un [y[ABC][Acronyme bleu clair][C]], une [r[référence en vert][][][G]], des [z[R][caractères en rouge]].
Exemple
Cette phrase normale propose un ABC, une référence en vert, des caractères en rouge
Notez dans le cas de la référence … les deux couples de crochets vides avant la définition de la classe. En effet la définition de classe est toujours en dernière position, après les attributs optionnels et rappelons-le dans le cas de la référence, il y a deux attributs optionnels : une URL et la langue de l’URL.
Une seule exception : pour l’élément « soulignement quelconque » (lettre z) le bloc de la classe se situe en premier, avant le texte. En effet, la raison d’être de cet élément est justement d’attribuer une classe spécifique à un suite de caractères. Si cette classe n’est pas défine, l’élément n’a aucun intérêt.
[z[B][zone en bleu]]
Ce qui donne :
zone en bleu
Classes prédifinies
La mise en forme au niveau des caractères proposent des classes prédifinies (en fait, ce sont pas des classes prédifinies mais des sous-types, cependant au niveau du code HTML cela revient au même). Ces classes prédifinies sont disponibles pour les initiales c, d, k, r, s et v. Elles se signalent par l’ajout d’une deuxième lettre après la première initiale et avant premier bloc entre crochets.
Ces classes prédifinies correspondent à des objets informatiques précis.
| initiale | signification | classe HTML correspondante |
|---|---|---|
| c | Classe d’objet informatique, interface | CLS |
| k | Mot-clé réservé (par exemple, true) | KEY |
| m | Méthode, fonction | MTD |
| p | Chemin | PTH |
| r | Ressource (par exemple le nom d’un fichier) | RSC |
| s | Chaîne de caractères, valeur constante | STG |
| u | Élément d’interface | UI |
| x | Élément XML | XML |
Définition d'un élément XML : [dx[<balise>]]
Exemple
ce qui donne :
Définition d’un élément XML : <balise>