Référence des balises pour l'édition des pages web du CEF

Comment faire sa page web
Pages de documentation

Introduction
Référence - Cette page.
FAQ - Répond aux questions les plus usuelles.
Normes d'édition - Ce qu'il ne faut pas faire sur le site web du CEF.
Documentation officielle  de PmWiki.

Cette page a pour objectif de fournir des exemples de formatages à copier-coller lors de l'édition de pages. Les codes (ce qu'on doit mettre dans une page en mode édition) sont sur fond vert et les résultats (ce qu'on voit une fois le code sauvegardé) suivent sur fond blanc. Mettez cette page dans vos favoris (bookmarks) afin de pouvoir vous y référer facilement.

Titres | Grosseurs de polices | Formats des caractères | Couleurs des caractères | Paragraphes
Listes | Hyperliens | Images et Documents | Boîtes | Tables

Titres

!!'''Titre 1 gras souligné'''
!!!'''Titre 2 gras'''
!!!!'''Titre 3 gras'''

Titre 1 gras souligné

Titre 2 gras

Titre 3 gras

Grosseurs de police

[----Petit texte de niveau -4----]
[---Petit texte de niveau -3---]
[--Petit texte de niveau -2--]
[-Petit texte de niveau -1-]
Texte normal niveau 0
[+Gros texte de niveau +1+]
[++Gros texte de niveau +2++]
[+++Gros texte de niveau +3+++]
[++++Gros texte de niveau +4++++]

Petit texte de niveau -4
Petit texte de niveau -3
Petit texte de niveau -2
Petit texte de niveau -1
Texte normal niveau 0
Gros texte de niveau +1
Gros texte de niveau +2
Gros texte de niveau +3
Gros texte de niveau +4

'''[+++Gros texte de niveau +3 gras+++]'''
'''[----Petit texte de niveau -3 gras----]'''

Gros texte de niveau +3 gras
Petit texte de niveau -3 gras

Formats de caractère

Caractères '''gras'''
Caractères ''italique''
Caractères '''''italique gras'''''
Caractères {+souligné+}
Caractères {-détruits-}
Caractères en '^exposant^'
Caractères en '^[-exposant plus petit-]^'
Caractères en '_indice_'
Caractères en '_[-indice plus petit-]_'

Caractères gras
Caractères italique
Caractères italique gras
Caractères souligné
Caractères détruits
Caractères en exposant
Caractères en exposant plus petit
Caractères en indice
Caractères en indice plus petit

Couleurs de texte

%black%noir%%
%white%blanc%%
%red%rouge%%
%yellow%jaune%%
%blue%bleu%%
%gray%gris%%
%silver%argent%%
%maroon%marron%%
%green%vert%%
%navy%bleu marine%%
%purple%pourpre%%
%color=#a2104f%couleur personalisée%% (code hexadecimal en minuscules)

noir
blanc
rouge
jaune
bleu
gris
argent
marron
vert
bleu marine
pourpre
couleur personalisée #a2104f

%bgvert%caractères noir sur fond vert%%
%bgjaune%caractères noir sur fond jaune%%
%bgrouge white%caractères blanc sur fond rouge%%

caractères noir sur fond vert
caractères noir sur fond jaune
caractères blanc sur fond rouge

Paragraphes

Les sauts de paragraphe se font en sautant une ligne comme ceci:

Même si vous insérez plusieurs sauts de ligne, une seule sera sautée.

Les sauts de paragraphe se font en sautant une ligne comme ceci:

Même si vous insérez plusieurs sauts de ligne, une seule sera sautée.

Les sauts de ligne simples se font en insérant deux barres obliques inversées à la fin de la ligne comme ceci:\\
Ligne suivant un saut de ligne

Les sauts de ligne simples se font en insérant deux barres obliques inversées à la fin de la ligne comme ceci:
Ligne suivant un saut de ligne

%center%Ce paragraphe est centré.%%

%right%Ce paragraphe est justifié à droite.%%

Ce paragraphe est centré.

Ce paragraphe est justifié à droite.

->Le texte peut être indenté avec un trait et un caractère plus grand comme au début de cette ligne

-->Ajouter des trait augmente l'indentation d'autant

Le texte peut être indenté avec un trait et un caractère plus grand comme au début de cette ligne.
Ajouter des traits augmente l'indentation.

[=Un '''crochet''' suivi du signe égal [+désactive l'effet des balises+]. Utile pour afficher des balises wiki dans une page.=]

[@
On peut aussi [[désactiver]] un bloc complet,

sur '''plusieurs lignes''',

au moyen du [+crochet+] et de l'arobase (@).
Ce texte s'affiche en vert par défaut.
@]

Un '''crochet''' suivi du signe égal [+désactive le formatage sur une ligne+]. Utile pour afficher des balises wiki dans une page.

 
On peut aussi [[désactiver]] un bloc complet,

sur '''plusieurs lignes''',

au moyen du [+crochet+] et de l'arobase (@). 
Ce texte s'affiche en vert par défaut.

Deux types de lignes existent. La ligne mince:
----
et la ligne épaisse:
====

Deux types de lignes existent. La ligne mince:


et la ligne épaisse:


Listes

*Premier item d'une liste non ordonnée
**Premier sous-item du premier item
*Deuxième item de la liste
**Premier sous-item du deuxième item
**Deuxième sous-item du deuxième item

  • Premier item d'une liste non ordonnée
    • Premier sous-item du premier item
  • Deuxième item de la liste
    • Premier sous-item du deuxième item
    • Deuxième sous-item du deuxième item

#Premier item d'une liste ordonnée
##Premier sous-item du premier item
#Deuxième item de la liste
##%ALPHA%Premier sous-item du deuxième item, numéroté avec des lettres majuscules
##Deuxième sous-item du deuxième item

  1. Premier item d'une liste ordonnée
    1. Premier sous-item du premier item
  2. Deuxième item de la liste
    1. Premier sous-item du deuxième item, numéroté avec des lettres majuscules
    2. Deuxième sous-item du deuxième item

#%item value=1%Réinitialisation de la liste
##%alpha%Premier sous-item du deuxième item, numéroté avec des lettres minuscules
##Deuxième sous-item du deuxième item
***Les listes ordonnées et les listes non ordonnées peuvent être mélangées
Le texte qui suit les deux barres obliques sera aligné.

  1. Réinitialisation de la liste
    1. Premier sous-item du deuxième item, numéroté avec des lettres minuscules
    2. Deuxième sous-item du deuxième item
      • Les listes ordonnées et les listes non ordonnées peuvent être mélangées
        Le texte qui suit les deux barres obliques sera aligné.

*%list bold%Début d'une liste en caractères gras non numérotée
*Deuxième item de la liste

  • Début d'une liste en caractères gras non numérotée
  • Deuxième item de la liste

#%list bold%Début d'une liste en caractères gras numérotée\\
%normal%Deuxième ligne avec texte normal

##%alpha normal%Premier sous-item de la liste

#Deuxième item de la liste\\
%normal%Deuxième ligne avec texte normal

  1. Début d'une liste en caractères gras numérotée
    Deuxième ligne avec texte normal
    1. Premier sous-item de la liste
  2. Deuxième item de la liste
    Deuxième ligne avec texte normal

Hyperliens

[[IntroductionEditionSite]]

[[IntroductionEditionSite| Avec texte différent]]

[[CEF.Accueil | Page d'un autre groupe]]

[[http://www.umontreal.ca/ | Hyperlien]] vers une page externe (Université de Montréal)

[[http://www.umontreal.ca]] (sans texte)

[[#NomDeLAncre]] : Ancre à l'intérieur d'une page où l'on veut créer un hyperlien. Une ancre est invisible.

[[#NomDeLAncre | Hyperlien]] vers l'ancre

[[CEF.Accueil#Historique | Hyperlien]] vers une ancre dans une autre page

IntroductionEditionSite

Avec texte différent

Page d'un autre groupe

Hyperlien  vers une page externe (Université de Montréal)


http://www.umontreal.ca  (sans texte)

: Ancre à l'intérieur d'une page où l'on veut créer un hyperlien. Une ancre est invisible.

Hyperlien vers l'ancre

Hyperlien vers une ancre dans une autre page

Images et documents

[[Attach:Intranet/ResumeduCentre.pdf | Hyperlien]]%% sur un document

Hyperlien  sur un document

Une image sur une ligne seule...
Attach:Support/image.gif
...s'affiche sur une ligne seule.

Une image sur une ligne seule...

...s'affiche sur une ligne seule.

Une image ajoutée dans le flot d'un texte... Attach:Support/image.gif ...s'insère dans le flot du texte.

Une image ajoutée dans le flot d'un texte... ...s'insère dans le flot du texte.

%width=60px%Attach:Support/image.gif%%

Vous pouvez redimensionner l'image avec le paramètre width=...

Image centrée...
%center%Attach:Support/image.gif%%

Image centrée...

%rfloat%Attach:Support/image.gif%%
Image flottante à droite laissant le texte l'entourer à gauche un peu comme dans les journaux.

Image flottante à droite laissant le texte l'entourer à gauche un peu comme dans les journaux.

%lfloat%Attach:Support/image.gif%%
Image flottante à gauche laissant le texte l'entourer à droite un peu comme dans les journaux.

Image flottante à gauche laissant le texte l'entourer à droite un peu comme dans les journaux.

%lframe%Attach:Support/image.gif%%
Boîte à image flottante à gauche. Le texte entoure ce type de boîte aussi...

Boîte à image flottante à gauche. Le texte entoure ce type de boîte aussi...

%lframe width=120px%Attach:Support/image.gif | [-Longue légende sur plusieurs lignes justifiée à gauche par défaut.-]
Boîte à image flottante à gauche avec légende. Notez le paramètre "width" appliqué au "div".


Longue légende sur plusieurs lignes justifiée à gauche par défaut.

Boîte à image flottante à gauche avec légende. Notez le paramètre "width" appliqué au "div".

%rframe width=120px center%Attach:Support/image.gif | [-Longue légende centrée sur plusieurs lignes avec "center".-]
Boîte à image flottante à droite avec légende. Notez le paramètre "width" appliqué au "div".


Longue légende centrée sur plusieurs lignes avec "center".

Boîte à image flottante à droite avec légende. Notez le paramètre "width" appliqué au "div".

%cframe width=120px%Attach:Support/image.gif | [-Longue légende sur plusieurs lignes centrée par défaut.-]%%
Boîte à image centrée avec légende. Le texte ne flotte pas autour d'une boîte centrée... Il est nécessaire de spécifier la largeur de la boîte avec width=XXpx où XX est la largeur de la boîte en pixel. N'oubliez pas le "px".


Longue légende sur plusieurs lignes centrée par défaut.

Boîte à image centrée avec légende. Le texte ne flotte pas autour d'une boîte centrée... Il est nécessaire de spécifier la largeur de la boîte avec width=XXpx où XX est la largeur de la boîte en pixel. N'oubliez pas le "px".

%rframe width=120px center newwin%[[http://www.cef-cfr.ca | Attach:Support/image.gif]]|[-Longue et légende centrée sur plusieurs lignes.-]%%
Boîte à image avec légende flottante à droite et hyperlien ouvrant dans nouvelle fenêtre..


Longue légende centrée sur plusieurs lignes.

Boîte à image avec légende flottante à droite et hyperlien ouvrant dans nouvelle fenêtre..

Boîtes

>>greybox<<
Boîte sur toute la largeur de la page avec fond GRIS, OMBRE et BORDURE ROUGE à gauche.

  • "greenbox" produit une boîte équivalente mais avec FOND VERT.
  • "redbox" produit une boîte équivalente mais avec FOND ROUGE et TEXTE BLANC. SANS BORDURE.
  • "yellowbox" produit une boîte équivalente mais avec FOND JAUNE et BORDURE NOIRE. SANS OMBRE.
  • "whitebox" produit une boîte équivalente mais avec FOND BLANC et BORDURE NOIRE. SANS OMBRE.

>><<

>>yellowbox center width=400px<<
Boîte de 400px centrée sur la page avec texte centré.
"center" et "width" fonctionnent avec tout les types de boîte.
>><<

>>greenboxnoborder<<
Boîte sur toute la largeur de la page avec fond VERT et SANS BORDURE.

  • "yellowboxnoborder" et "greyboxnoborder" produisent des boîtes équivalentes mais de couleurs JAUNE et GRISE.
  • "whiteboxnoborder" produit une boîte équivalente mais de couleurs BLANCHE à utiliser sur un fond d'une couleur non blanche.

>><<

>>rgreenbox width=400px<<
Boîte FLOTTANTE À DROITE de 400px avec fond de couleur VERTE et OMBRE et BORDURE ROUGE à gauche.

  • "rgreybox" produit une boîte équivalente mais GRISE et SANS BORDURE ROUGE.
  • "rredbox" produit une boîte équivalente mais ROUGE et SANS BORDURE ROUGE.

>><<

Flot normal
du texte
à gauche..


>>lgreybox width=400px<<
Boîte FLOTTANTE À GAUCHE de 400px avec fond GRIS et OMBRE. SANS BORDURE ROUGE.

  • "lgreenbox" produit une boîte équivalente mais VERTE et AVEC BORDURE ROUGE.

>><<

Flot normal
du texte
à droite...


>>rredbox width=200px center<<
Boîte FLOTTANTE À DROITE de 200px avec fond ROUGE, TEXTE BLANC CENTRÉ et OMBRE. SANS BORDURE ROUGE.
>><<

Flot normal
du texte
à gauche...


Tables

|| border=1 width=400px
||!Col1 alignée à gauche ||! Col2 centrée ||! Col3 alignée à droite||
||1 || 2 || 3||
||1 || fusion ||||

Col1 alignée à gaucheCol2 centréeCol3 alignée à droite
123
1fusion

|| border=0 width=350px class=zebra align=center
||%red%'''Col1 rouge gauche''' || %red%'''Col2 rouge centrée''' || %red%'''Col3 rouge droite'''||
||!1 || 2 || 3||
||!a || b || c||
||!1 || b || 3||

Col1 rouge gaucheCol2 rouge centréeCol3 rouge droite
123
abc
1b3

Titres | Grosseurs de polices | Formats des caractères | Couleurs des caractères | Paragraphes
Listes | Hyperliens | Images et Documents | Boîtes | Tables

********************************************************** *************************** FRQNT ************************ **********************************************************

Le CEF est un
regroupement stratégique du

********************************************************** *********************** Infolettre *********************** **********************************************************

Abonnez-vous à
l'Infolettre du CEF!

********************************************************** ********** Colloque Développement durable UQAC *********** **********************************************************

********************************************************** **************** Balcony Garden Project ****************** **********************************************************

********************************************************** ********* Mémoire CEF Changements Climatiques ************ **********************************************************

********************************************************** ***************** Pub - Symphonies_Boreales ****************** **********************************************************