Aide:Accueil

De Omnis Bibliotheca
Aller à :navigation, rechercher




Le wiki Omnis Bibliotheca est basé sur l'outil Mediawiki. Cet outil simplifie l'édition des documentations et met en forme les textes par une syntaxe spécifique. Vous trouverez ci-dessous une aide à l'écriture Mediawiki.

Vous trouverez d'autres tutoriaux sur l'écriture Mediawiki sur le wiki dédié.


Les Bases de l'Écriture

  • Mettre en gras :
'''votre texte'''
  • Mettre en italique :
''votre texte''
  • Souligner :
<u>votre texte</u>
  • décaler le texte à droite
:votre texte
::votre texte plus à droite
:::votre texte encore plus à droite
  • Centrer :
<center>votre texte</center>
  • Justifier à droite :
<div align="right">votre texte</div>
  • Sous-Titre de niveau 2 :
== votre texte ==
  • Sous-Titre de niveau 3 :
=== votre texte ===
  • Sous-Titre de niveau 4 :
==== votre texte ====
  • Séparer par une ligne horizontale :
----
  • Ajouter une url externe (lien vers un site Web) :
[http://www.cantico.fr Site officiel de la société Cantico]
  • Faire une liste à puces :
* votre texte
* votre texte suite
  • Faire une liste numérotée :
# votre texte
# votre texte suite
  • Faire un retour à la ligne :
texte<br />
texte suivant
  • Séparer 2 textes par un paragraphe : ajoutez 2 retours chariots entre les textes
texte

texte suite 
  • Texte préformaté (équivalant à la balise PRE en HTML : le texte gardera sa mise en forme (retours chariots, espaces...)) :
un espace en début de ligne crée un texte préformaté
  • Pour ignorer l'interprétation d'un texte par le moteur de MediaWiki :
<no wiki>Texte</no wiki> (sans l'espace entre ''no'' et ''wiki'')
  • Pour ignorer l'interprétation d'un texte par le moteur de MediaWiki et passer un code d'un langage de programmation :
<source lang="php">Texte</source>
  • Pour créer une référence :
 <ref>texte</ref>   ne pas oublier de rajouter <references/> au niveau des sources en bas
  • Pour créer des références multiples :
 <ref name="XY">texte</ref>   et toutes les fois suivantes où on veux appeler la même ref : <ref name="XY" />


Les Images

  • Insérer une image :
[[Fichier:Exemple.jpg]]
  • Centrer une image :
[[Fichier:Exemple.jpg|center]]
  • Justifier une image à gauche :
[[Fichier:Exemple.jpg|left]]
  • justifier une image à droite :
[[Fichier:Exemple.jpg|right]]
  • Modifier la taille d'une image pour l'adapter dans la largeur maximale donnée en pixels, sans restreindre sa hauteur (100 pixels de largeur par exemple) :
[[Fichier:Exemple.jpg|100px]]
  • Modifier la taille d'une image pour l'adapter à une hauteur maximale donnée en pixels, sans restreindre sa largeur (100 pixels de hauteur par exemple) :
[[Fichier:Exemple.jpg|x100px]]
  • Insérer un aperçu d'une image avec un texte explicatif en dessous :
[[Fichier:Exemple.jpg|thumb|Texte explicatif]]
  • Associer à l'image une redirection vers un lien externe :
[[Fichier:Exemple.jpg|link=Lien externe]]
  • Les différentes fonctions de justification, de modification de la taille et d'aperçu peuvent toutes être utilisé en même temps. :
[[Fichier:Exemple.jpg|100px|right|thumb|Texte explicatif|link=Lien externe]]

Ces quelques commandes sont celles de bases pour afficher une seule image, mais ils y en a bien d'autres, permettant notamment d'afficher toute une galerie d'images. Vous trouverez ici toutes les variables qui peuvent être utilisés (avec des exemples) : https://www.mediawiki.org/wiki/Help:Images/fr


Gérer la Navigation Entre les Pages

  • Créer une nouvelle page sur le wiki :

2 façon de faire : cliquer sur un lien rouge au sein d'une page vous amènera directement vers la page de création ; ou bien vous pouvez taper le nom de la page dans la barre de recherche du wiki et lancez la recherche, il vous proposera alors de créer la page inexistante. Vous trouverez ici la liste des pages les plus demandées.

  • Ajouter un lien vers une page existante du wiki :
[[nom de la page]]
Remarque : Vous pouvez créer une nouvelle page en ajoutant cette syntaxe à votre page courante. Après enregistrement, vous pourrez cliquer sur le lien pour éditer la nouvelle page !
Remarque 2 : La première lettre d’un lien n’est pas sensible à la casse, c’est à dire qu’écrire [[Termagant]] ou [[termagant]], c'est pareil. Par contre les autres lettres sont, elles, sensibles à la casse : écrire [[sœur de bataille]] au lieu de [[Sœur de Bataille]] ne fonctionnera pas.
  • Afficher un texte de lien différent :
[[nom de la page|texte visible]]
Le | permet de faire une séparation entre le lien de la page (à gauche) et le texte affiché (à droite)
  • Faire un lien vers un sous titre spécifique sur une page :
[[nom de la page#nom sous titre|texte visible]]
  • Ajouter des lettres au lien :
[[nom de la page]]avecdeslettresenplus
Vous pouvez ajouter des lettres immédiatement derrière les crochets, celles-ci s'ajouteront au mot faisant le lien. Par exemple, écrire [[Démon]]iaque vous emmènera sur la page des Démons, pas besoin d'écrire [[Démon|Démoniaque]].
  • Pour associer une catégorie à un article (une catégorie est une page d'entrée listant des articles de la même catégorie), ajoutez ce qui suit à la fin du contenu de l'article :
[[Catégorie:Ma catégorie]]
  • Ajouter un lien vers une page catégorie et que celui-ci soit visible :
[[:Catégorie:Ma catégorie]]
Attention ! Si vous oubliez le : devant le Catégorie, le moteur du wiki le considérera comme une commande d’association, et cela aura pour double conséquences de lier la page en question à la catégorie utilisé, et le lien ne sera pas visible une fois la modification enregistrée.


Insérer des Tableaux

Voilà tout un programme. Des tableaux peuvent être créés dans les pages wiki, mais c'est tout un art et des tonnes de variables entrent en jeu. Le balisage des tableaux complique souvent l'édition des pages, mais une fois maîtrisés, ceux-ci permettent d'améliorer grandement la mise en page. Si néanmoins vous voulez créer un tableau, pour faire simple :

{|    début de tableau, obligatoire
|-    Ligne de tableau, optionnel sur la première ligne, le moteur de wiki pose par défaut la première ligne
|     cellule données de tableau, correspond à une case
|}    Fin de tableau, obligatoire

Voilà la base d'un tableau.

Après, il y a les attributs, et là ça devient plus complexe. Notez que tout ce qui est ici est totalement optionnel et ne sert qu'à la mise en page.

  • class="simpleTable" : va créer un tableau avec des lignes de 1px
  • colspan="X" et rowspan="Y" : permettent de créer des case comprenant plusieurs case en longueur (pour le colspan) ou en hauteur (pour le rowspan)
  • style="XXXX" : c'est ici que l'on rentre tout les truc qui vont faire en sorte que le tableau (si placé tout en haut) ou la case (si placé avant la | ) va avoir des attributs, comme la taille, la couleur du fond ou de l'écriture, le texte en haut en bas à droite à gauche au centre, la taille et la couleur des bordures, et pour finir là ou le tableau va se trouver sur la page (au centre, à droite ou à gauche), ainsi que la marge qui va être laissé entre le texte et le tableau. Chaque attribut DOIT être séparé par un ;

Vous trouverez ici toutes les variables qui peuvent être utilisés (avec des exemples) : https://www.mediawiki.org/wiki/Help:Tables/fr

HTML

Le langage HTML permet de décrire le contenu d'une page web en général. Le code wiki d'une page sera au final transformer en code HTML par le serveur, mais il est possible d'écrire directement de l'HTML dans une page wiki.

  • Le code HTML s'écrit par balises qui vont s'imbriquer les unes dans les autres.
  • Chaque balise définit la nature du contenu. Quelques exemples :
    • <p>...</p> : paragraphe
    • <a>...</a> : un lien internet
    • <table>...</table> : une table
    • <ul>...</ul> : une liste
    • <li>...</li> : un élément d'une liste
    • <div>...</div> : un conteneur générique en bloc (prend par défaut toute la largeur de son contenant)
    • <span>...</span> : un conteneur générique en ligne ( prend juste la place nécessaire)
  • A chaque balise on peut définir des attributs. Les attributs sont divers, mais chacun défini une informations associé à la balise en question. Par exemple, l'attribut href permet de définir l'adresse d'un lien d'une balise <a>. Nous verrons plus loin que les attributs style et class permettront d'associer des règles CSS au contenu HTML.

Exemple:


<div>
   <p>Mon premier paragraphe.</p>
   <p>Deuxième paragrapge.</p>
   <p>Voici quelques liens 
      <ul>
         <li><a href="https://omnis-bibliotheca.com/">lien vers l'Omnis Bibliotheca<a></li>
         <li><a href="https://bibliotheque-imperiale.com/">lien vers la Bibliothèque Impériale<a></li>
      </ul>
   </p>
</div>

N.B: Il est possible d'intégrer du code HTML directement dans une page wiki. Dans l'exemple ci-dessus, le code HTML a été indenté (aéré) pour plus de lisibilité, cependant dans une page wiki il ne faudra pas mettre d'espaces vides en début de ligne, car cela a une signification bien précise dans la syntaxe wiki, ce qui emêchera le code HTML d'être reconnu comem tel.

CSS

Le CSS permet de définir des règles d'affichage du contenu HTML. C'est au navigateur web de procéder au rendu graphique (d'où le problème entre les différents navigateurs qui ont parfois des comportement un peu différents sur certaines règles CSS).

  • Le code HTML peut intégrer lui-même directement du code CSS à appliquer pour une balise, via l'attibut style.
  • Une autre manière (plus structurée) d'appliquer du CSS, c'est de définir des règles CSS. Chaque règle commence par indiquer sa cible dans le HTML, puis le code CSS à lui appliquer. Dans un wiki, les Admins du site peuvent définir des règles CSS du site dans une page consacré : MediaWiki:Common.css.
    • Une manière d'invoquer des règles CSS depuis le HTML, est de définir un ou plusieurs nom de classe via l'attribut class. Ces nom de classe pourront être utiliser pour définir les cibles des règles CSS.


N.B: Il existe l'extension wiki Extension:CSS à installer sur le serveur d'un wiki, permettant de définir des règles CSS directement dans la page d'un wiki, sans passer par la page MediaWiki:Common.css.


Exemples d'Utilisation du HTML et CSS

Table simple

Voici un exemple de codage d'une table simple.

En-tête 1 En-tête 2 En-tête 3
A1 A2 A3
B1 B2 B3
C1 C2 C3


Code wiki

Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr

{|
|-
! En-tête 1 !! En-tête 2 !! En-tête 3
|-
| A1 || A2 || A3
|-
| B1 || B2 || B3
|-
| C1 || C2 || C3
|}


Code HTML équivalent


<table>
    <tr>
        <th> En-tête 1 </th>
        <th> En-tête 2 </th>
        <th> En-tête 3 </th>
    </tr>
    <tr>
        <td> A1 </td>
        <td> A2 </td>
        <td> A3 </td>
    </tr>
    <tr>
        <td> B1 </td>
        <td> B2 </td>
        <td> B3 </td>
    </tr>
    <tr>
        <td> C1 </td>
        <td> C2 </td>
        <td> C3 </td>
    </tr>
</table>


Table avec code CSS

Voici un exemple de codage d'une table avec code CSS.

En-tête 1 En-tête 2 En-tête 3
A1 A2 A3
B1 B2 B3
C1 C2 C3


Code wiki avec code CSS

Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr

{| style="background: white; color: blue; text-align: center; width: 350px; border: 4px solid green;"
|-
! En-tête 1 !! En-tête 2 !! En-tête 3
|- 
| A1 || A2 || A3
|- style="font-style: italic; color: green;"
| B1 || B2 || B3
|- style="font-weight: bold; color: red;"
| style="background: lightgrey;" | C1
| style="background: grey;" | C2
| style="background: teal;" | C3
|}


Code HTML équivalent avec code CSS


<table style="background: white; color: blue; text-align: center; width: 350px; border: 4px solid green;">
    <tr>
        <th> En-tête 1 </th>
        <th> En-tête 2 </th>
        <th> En-tête 3 </th>
    </tr>
    <tr>
        <td> A1 </td>
        <td> A2 </td>
        <td> A3 </td>
    </tr>
    <tr style="font-style: italic; color: green;">
        <td> B1 </td>
        <td> B2 </td>
        <td> B3 </td>
    </tr>
    <tr style="font-weight: bold; color: red;">
        <td style="background: lightgrey;"> C1 </td>
        <td style="background: grey;"> C2 </td>
        <td style="background: teal;"> C3 </td>
    </tr>
</table>


Table avec classe associée

Voici un exemple de codage d'une table à laquelle il a été associé la classe "simpleTable".

Ce qui n'apparait pas ici, c'est qu'il existe des règles CSS existant sur le site qui s'appliquent à toute

de classe "simpleTable".
En-tête 1 En-tête 2 En-tête 3
A1 A2 A3
B1 B2 B3
C1 C2 C3


Code wiki avec classe associée

Documentation : https://www.mediawiki.org/wiki/Help:Tables/fr

{| class="simpleTable"
|-
! En-tête 1 !! En-tête 2 !! En-tête 3
|-
| A1 || A2 || A3
|-
| B1 || B2 || B3
|-
| C1 || C2 || C3
|}


Code HTML équivalent avec classe associée


<table class="simpleTable">
    <tr>
        <th> En-tête 1 </th>
        <th> En-tête 2 </th>
        <th> En-tête 3 </th>
    </tr>
    <tr>
        <td> A1 </td>
        <td> A2 </td>
        <td> A3 </td>
    </tr>
    <tr>
        <td> B1 </td>
        <td> B2 </td>
        <td> B3 </td>
    </tr>
    <tr>
        <td> C1 </td>
        <td> C2 </td>
        <td> C3 </td>
    </tr>
</table>


Règles CSS des tables de classe "simpleTable"

Voici les règles CSS définit sur le serveur du wiki.


table.simpleTable {
    background-color: #f8f9fa;
    color: #222;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
}

table.simpleTable > tr > th {
    background-color: #eaecf0;
    text-align: center;
}
table.simpleTable > tr > th,
table.simpleTable > tr > td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}

Sources