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 ![]() |
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 1 gras soulignéTitre 2 grasTitre 3 gras |
Grosseurs de police
[----Petit texte de niveau -4----] |
Petit texte de niveau -4 |
'''[+++Gros texte de niveau +3 gras+++]''' |
Gros texte de niveau +3 gras |
Formats de caractère
Caractères '''gras''' |
Caractères gras |
Couleurs de texte
%black%noir%% |
noir |
%bgvert%caractères noir sur fond vert%% |
caractères noir sur fond vert |
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:\\ |
Les sauts de ligne simples se font en insérant deux barres obliques inversées à la fin de la ligne comme ceci: |
%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.=] [@ sur '''plusieurs lignes''', au moyen du [+crochet+] et de l'arobase (@). |
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: |
Deux types de lignes existent. La ligne mince: et la ligne épaisse: |
Listes
*Premier item d'une liste non ordonnée |
|
#Premier item d'une liste ordonnée |
|
#%item value=1%Réinitialisation de la liste |
|
*%list bold%Début d'une liste en caractères gras non numérotée |
|
#%list bold%Début d'une liste en caractères gras numérotée\\ ##%alpha normal%Premier sous-item de la liste #Deuxième item de la liste\\ |
|
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 |
Hyperlien
![]()
: 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
![]() |
Une image 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... |
%width=60px%Attach:Support/image.gif%% |
Vous pouvez redimensionner l'image avec le paramètre width=... |
Image centrée... |
Image centrée... ![]() |
%rfloat%Attach:Support/image.gif%% |
![]() 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. |
%lframe%Attach:Support/image.gif%% |
![]() 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.-] |
![]() 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".-] |
![]() 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.-]%% |
![]() 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.. |
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 |
| ||||||||||||
|| border=0 width=350px class=zebra align=center |
|
Titres | Grosseurs de polices | Formats des caractères | Couleurs des caractères | Paragraphes
Listes | Hyperliens | Images et Documents | Boîtes | Tables