Aller à : Navigation, Rechercher

Sommaire 1 LES BASES 1.1 Démarrer une nouvelle page 1.2 Commandes utiles 1.3 Mise en page texte 1.3.1 Les paragraphes, passage à la ligne... 1.3.2 Afficher du code 1.3.3 Afficher une exemple 1.3.4 Mettre texte en gras, italique 1.3.4.1 Gras 1.3.4.2 Italique 1.3.5 Alignement de texte 1.3.6 Changer la couleur du texte 1.3.6.1 Code à insérer 1.3.6.2 Les differents couleurs 1.4 Hiérarchie des titres 1.4.1 Titre niveau Un 1.4.2 Titre niveau deux 1.4.3 Titre niveau trois 1.4.4 Titre niveau quatre 1.5 Liens 1.5.1 Les liens vers une page du Wiki 1.5.1.1 Vers une page : 1.5.1.2 Vers une page d'utilsateur : 1.5.2 Les liens vers une page extèrieur au Wiki 1.6 Les images 1.6.1 Envoyer vos images 1.6.2 Inclure une image 1.7 Animations Flash 1.7.1 Méthode simple : 2 MISE EN FORME AVANCEE 2.1 Les Tableaux 2.1.1 Tableau à une ligne 2.1.2 Tableau à deux ou plusieurs lignes 2.1.3 Mise en forme de tableaux 2.1.4 Attribut d'un tableau 2.1.5 Attribut de cellule 2.1.6 Attribut d'une ligne 2.1.7 Les differents attributs 2.1.7.1 L'attribut "border" 2.1.7.2 L'attribut "width" 2.2 Positionnement 2.3 Les images 2.3.1 Légende 2.3.2 Taille 2.3.3 Position sur la Page 2.3.4 Texte superposé à une Image 2.3.5 Création d'une galerie d'images 2.4 Flash, options avancées 2.4.1 Le syntaxe à utiliser : 2.4.2 Options possibles : 2.5 Les catégories 2.5.1 Créer un lien vers une catégorie 2.5.2 Placer un article dans une catégorie 2.5.3 Créer une sous-catégorie 2.6 Les Modèles

LES BASES

Démarrer une nouvelle page

C'est assez simple, dans la barre d'adresses de votre navigateur, vous entrez l'adresse du wiki Geekeden :

http://wiki.geekeden.com/index.php/

Puis vous ajoutez le nom de votre page, par exemple je vais appeler la page : "Page de test numéro 1"

http://wiki.geekeden.com/index.php/Page de test numéro 1

Vous pouvez ensuite cliquer sur le bouton "modifier" en haut de cette page.

Commandes utiles

---- : une ligne horizontale

exemple :

---

~~~~ : une signature longue

exemple : Richard 2 juillet 2007 à 18:29 (CEST)

~~~  : une signature courte

exemple : Richard

Mise en page texte

Les paragraphes, passage à la ligne...

Vous allez sans doûte remarquer que le wiki ne vas pas toujours à la ligne.

En effet, sauter une ligne fait passer à la ligne, et sauter deux lignes fait sauter une ligne, commencer un nouveau paragraphe.

Afficher du code

Pour éviter qu'un commande HTML ou tout autre code soit interpreté et affiché autrement que du code, il vous suffit de entourer le code par :

<nowiki>Votre texte ici</nowiki>

par exemple :

 ''Texte italique''

Sans le <nowiki> donne ceci : Texte italique

Afficher une exemple

Pour afficher les exemples tels que j'ai fait depuis le début de l'aide il suffit de commencer la ligne en question par une espace.

Par exemple (séléctionnez le texte avec la souris pour voir qu'il y a une espace) :

 test

donnes ceci :

test

Mettre texte en gras, italique

Gras

Pour mettre un texte en gras on l'entour de trois signes ' Par exemple :

'''Texte en Gras'''

donne ceci : Texte en Gras

Italique

Pour mettre un texte en gras on l'entour de deux signes ' Par exemple :

''Texte en italique''

donne ceci : Texte en italique

Alignement de texte

On peut aligner son texte à gauche, à droite ou encore le justifier (conseillé)

Pour cela il faut placer ce code avant le début du texte :

<div align="justify">

et ceci après son texte :

</div>

Pour aligner à gauche :

<div align="left">Texte à aligner</div>

Pour aligner à droite :

<div align="right">Texte à aligner</div>

Pour justifier :

<div align="justify">Texte à aligner</div>

Changer la couleur du texte

Code à insérer

Pour changer la couleur d'un texte, il faut l'entourer de balieses Span:

<span style="color:#660000;">Votre texte</span>

Ce qui donne: Votre texte

Les differents couleurs

Vous pouvez simplement écrire la couleur en anglais, comme ce qui suit :

<span style="color:red;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:blue;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:yellow;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:green;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:grey;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:brown;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:purple;">Votre texte</span>

Ce qui donne: Votre texte

<span style="color:orange;">Votre texte</span>

Ce qui donne: Votre texte

Ou encore spécifier leur couleur html que vous pouvez obtenir avec votre logiciel d'édition d'images préferé.

Comme :

<span style="color:#CCCCCC;">Votre texte</span>

Ce qui donne: Votre texte

Ou encore :

<span style="color:#CC00BB;">Votre texte</span>

Ce qui donne: Votre texte

Hiérarchie des titres

Utiliser la hiérarchie des titres permet d'avoir une organisation claire et aussi de créer un sommaire de façon automatique.

Titre niveau Un

c'est assez simple, un titre de niveau 1 est entouré par un signe "=" comme par exemple ici :

= Titre 1 =

Titre niveau deux

un titre de niveau deux en a deux :

== Titre 1.1 ==

Titre niveau trois

et un titre de niveau trois en a trois :

=== Titre 1.1.1 ===

Titre niveau quatre

et un titre de niveau quatre en a quatre :

==== Titre 1.1.1.1 ====

Pour tester je vous conseille de créer une nouvelle page et d'expérimenter ! :)

Liens

Il existe deux sortes de liens.

Les liens vers une page du Wiki

Vers une page :

Voici le code pour faire un lien vers une autre page du wiki :

[[titre du lien]]

Le code ci dessus donne : titre du lien

Vous pouvez remplacer "titre du lien" par n'importe quel texte. Si la page http://wiki.geekeden.com/index.php/titre du lien n'existe pas lorsqu'on cliquera dessus la première fois il proposer de créer la page.

Vers une page d'utilsateur :

Il faut utiliser le code suivant :

[[Utilisateur:Richard|Richard]]

Ce qui donne : Richard

Ce code permet de spécifier le texte qui s'affiche. On peut remplacer le deuxième nom d'utilisateur par ce qu'on veut.

Par exemple :

[[Utilisateur:Richard|Richard coeur de Lion]]

Ce qui donne : Richard coeur de Lion

De même il existe un raccourçi :

[[Utilisateur:Richard|]]

qui affiche la même chose que [[Utilisateur:Richard|Richard]]

Soit : Richard

Les liens vers une page extèrieur au Wiki

Voici comment créer un lien vers un site extérieur :

[http://www.example.com titre du lien]

on remplace "http://www.example.com" par l'adresse du lien et "titre du lien" par le texte qui s'affichera.

Par exemple :

[http://www.geekeden.com Visitez le forum Geek Eden !]

donne : Visitez le forum Geek Eden !

Si parcontre vous préferez que le lien s'affiche au lieu d'avoir du texte, il suffit de ne pas mettre de marquage.

Par exemple :

http://www.geekeden.com

donne : http://www.geekeden.com

Les images

Envoyer vos images

Pour éviter d'avoir des problèmes d'hébergeurs anonyme, les wiki ne permettent pas d'office d'héberger des images hébergés ailleurs. C'est pour cela que dans la boîte à outils (à gauche, en bas) vous avez l'option "importer une image ou un son".

Vous avez le choix entre parcourir votre ordinateur ou entrer directement le lien du fichier à envoyer. Ensuite vous devez choisir le nom de votre fichier, vous pouvez choisir ce que vous voulez et ne pas oublier de spécifier l'extension : .jpeg, .gif etc...

Vous pouvez entrer une discription pour que l'on puisse reconnaitre votre fichier puis vous cliquez sur "envoyer le fichier". Si quelqu'un a déjà enregistré un fichier du même nom il vous demander de changer le nom de votre fichier.

Inclure une image

Le code est assez simple : [[Image:Exemple.jpg]] Vous avez juste à remplacer "Exemple.jpg" par le nom que vous avez choisi pour votre fichier

Par exemple, j'ai envoyé un fichier que j'ai nommé test.jpg

voici le code :

[[Image:test.jpg]]

et voici le résultat :

Image:Test.jpg

test de texte pour voir s'il occupe toute la ligne ou pas - test de texte pour voir s'il occupe toute la ligne ou pas - test de texte pour voir s'il occupe toute la ligne ou pas -

Animations Flash

Méthode simple :

Voici comment insérer une animation flash :

D'abord de la même manière que pour les images ci dessus vous envoyez votre fichier .swf sur le serveur.

Ensuite vous utilisez le code suivant :

<flash>file=votrefichier.swf|width=100px|height=80px</flash>

Vous remplacez votrefichier.swf, par le nom du fixhier que vous avez choisi, 100px par la largeur de votre animation et 80px par la hauteur !

(Options avancées dans la mise en forme avancé )

MISE EN FORME AVANCEE

Les Tableaux

Je vais vous présenter les tableaux avec le code wiki, il est aussi possible d'avoir le même résultat directement avec du code html, avis a webmasters !

Tableau à une ligne

Code pour simple tableau : Soit :

{| border = "1"
|gauche || droite || tableau en cours !
|}

Soit :

{| border = "1"
|gauche 
|droite
|tableau en cours !
|}

Les deux sont pareils à vous de choisir lequel vous trouvez le plus simple !

Le premier code :

gauche

droite

tableau en cours !

Le deuxième :

gauche

droite

tableau en cours !

On n'est pas obligé de spécifier border = "1" si on ne veut pas voir la bordure.

ce qui donne :

Soit :

{|
|gauche || droite || tableau en cours !
|}

Soit :

{|
|gauche 
|droite
|tableau en cours !
|}

Donc cela donne sans les bordures:

gauche

droite

tableau en cours !

Tableau à deux ou plusieurs lignes

Il suffit de séparer les lignes avec :

|-

Remarque : On peut mettre autant de tirets que l'on veut, mais un seul suffit.

code :

{| border = "1"
|gauche || droite || tableau en cours !
|-
|bas gauche || bas droite || bas tableau en cours !
|}

Resultat:

gauche	droite	tableau en cours !
bas gauche	bas droite	bas tableau en cours !

code :

{| border = "1"
|haut gauche ||haut droite ||haut tableau en cours !
|-
|milieu gauche ||milieu droite ||milieu tableau en cours !
|-
|bas gauche ||bas droite ||bas tableau en cours !
|}

Donne :

haut gauche	haut droite	haut tableau en cours !
milieu gauche	milieu droite	milieu tableau en cours !
bas gauche	bas droite	bas tableau en cours !

Mise en forme de tableaux

Il existe plusieurs attributs qu'on peut appliquer aux tableaux, les personnes connaissant un peu de HTML les reconnaitront.

Attribut d'un tableau

Comme nous avons vu avec l'exemple border les attributs d'un tableau son facile à paramétrer. Les differents attributs d'un tableau se mettent après {| séparés d'une espace comme ceci :

{| border = "1"
|gauche || droite || tableau en cours !
|-
|bas gauche || bas droite || bas tableau en cours !
|}

ou encore

{| border = "2" style="background-color:red"
|gauche || droite || tableau en cours !
|-
|bas gauche || bas droite || bas tableau en cours !
|}

ce qui donne :

gauche	droite	tableau en cours !
bas gauche	bas droite	bas tableau en cours !

Attribut de cellule

Les paramètres d'une cellule se présentent de la manière suivante :

|paramètres|cellule1

On remplace "paramètres" par tous les paramétres séparés d'une espace

Exemple :

{| border="5" width = "100%"
| width="20%" bgcolor="blue" style="color:green"|gauche 20%
| width="30%" bgcolor="red" align="center" |milieu 30%
| width="50%" bgcolor="green" align="right"  |droite 50%
|}

gauche 20%

milieu 30%

droite 50%

Attribut d'une ligne

En cours

Les differents attributs

L'attribut "border"

Nous avons déjà vu l'attribut :

border = "1"

Cet attribut signifie que l'épaisseur de la bordure est de 1pixel, on peut la remplacer par tout valeur supérieur ou égale à zéro, sachant que zéro est la valeur par défaut, donc il n'est pas nécessaire de spécifier border si on ne veut pas de bordure

L'attribut "width"

L'attribut width permet de spécifier la largeur du tableau ou de la célule qu'il caractérise.

on peut avoir par exemple :

width = "100%"

Pour qu'un tableau occupe toute la largeur de la page

En effet, le code suivant :

{| border = "5" width = "100%"
|gauche
|droite
|}

donne ceci :

gauche

droite

La valeur de width peut être soit en pourcentage comme nous venons de voir soit en pixels comme dans l'example suivant :

{| border = "2" width = "400px"
|gauche
|droite
|}

gauche

droite

Positionnement

En cours...

Les images

Légende

La légende peut contenir du code wiki, des liens, etc. Elle se trouve après la dernière barre verticale dans le lien.

[[Image:BlasonGeek.jpg|Notre Blason]]

Image:BlasonGeek.jpg

L'aspect de la légende peut varier :

• Sans cadre, la légende apparaît dans une info-bulle lorsque la souris passe sur l'image, si aucune légende n'est donnée, l'info-bulle affiche le nom du fichier.

[[Image:BlasonGeek.jpg]]

Image:BlasonGeek.jpg

• Avec un cadre ou une vignette, la légende si elle existe apparaît sous l'image.

[[image:BlasonGeek.jpg|left|frame|Notre Blason]]

Les liens externes sont autorisés dans la légende, mais uniquement dans la forme sans crochets (écrit en toutes lettres). Si l'URL complète est trop longue et ne s'affiche pas correctement, le lien marche tout de même.

Taille

Sans précision, l'image s'affichera en pleine taille.

[[Image:BlasonGeek.jpg]]

Image:BlasonGeek.jpg

Il est toutefois possible de préciser la taille affichée, par deux moyens : soit explicitement par la taille en pixels:

[[Image:BlasonGeek.jpg|50px|]]

Image:BlasonGeek.jpg

[[Image:BlasonGeek.jpg|100px|]]

Image:BlasonGeek.jpg

[[Image:BlasonGeek.jpg|300px|]]

Image:BlasonGeek.jpg

Le chiffre avant px donne la largeur de l'image en pixels, la hauteur est redimensionneée automatiquement de manière à conserver l'aspect de l'image.

soit en affichant une vignette:

[[Image:BlasonGeek.jpg|thumb|50px|]]

Si aucune taille n'est précisée, la taille sera celle choisie par l'utilisateur dans ses préférences.

Position sur la Page

Par défaut, une image est placée dans la suite du texte, ou à droite s'il s'agit d'une vignette. Il est possible de contrôler la position avec les options left, right, center ou none. Ces options contrôlent aussi l'adaptation du texte autour de l'image.

Image à gauche

L'option left place l'image à gauche. Le texte qui suit est flottant à droite de l'image.

[[image:BlasonGeek.jpg|left|]]

Bla bla bla bla bla bla bla

Si une seconde image est placée immédiatement après, elle se trouve juste à droite de la première.

S'il y a du texte entre les deux images, alors la deuxième image est en bas à droite de la première, sous le texte.

Bla bla bla bla bla bla bla

Image à droite

L'option right place l'image à droite. Le texte qui suit flotte à sa gauche.

[[image:BlasonGeek.jpg|right|]]

Bla bla bla bla bla bla bla

Par contre, si une autre image suit, elle est placée à droite à nouveau, sous la première.

Image au centre

Avec l'option center, l'image est centrée et le texte recommence en-dessous de l'image :

[[image:BlasonGeek.jpg|center|]]

Texte avant l'image Texte avant l'image Texte avant l'image Texte avant l'image Texte avant l'image Texte avant l'image Texte après l'image Texte après l'image Texte après l'image Texte après l'image Texte après l'image Texte après l'image

Cadre

L'option frame (ou framed) permet d'ajouter un cadre à l'image. Dans ce cas la légende s'affiche en-dessous de l'image. Le cadre est automatiquement ajouté par l'option "thumb".

[[image:BlasonGeek.jpg|center|50px|frame||[[Aide:Contenu|Blason GeekEden]]]]

Alignement du texte

Pour que le texte occupe de nouveau toute la largeur après une image, il faut insérer le code <br style="clear:both;">. Ceci empêche le texte qui suit de flotter.

Texte superposé à une Image

Il est possible de superposer du texte, des liens et des images à une image, ce qui peut être utile pour les cartes par exemple. Il faut alors utiliser utiliser la balise HTML "div" :

<div style="position: relative">[[Image:France.jpg]]
<div style="position: absolute; left: 190px; top: 75px">[http://www.avremesnil.com Avremesnil]</div>
<div style="position: absolute; left: 200px; top: 140px">Notre Admin<br>est par ici</div>
<div style="position: absolute; left: 270px; top: 450px">[[Image:TiMino.gif|30px|]]</div>
</div>

Création d'une galerie d'images

La balise gallery est un moyen rapide de montrer des vignettes sur quatre colonnes. Il suffit d'entrer le nom de l'image et une éventuelle légende, sans crochets. Si une entrée contient autre chose qu'une image, rien ne s'affiche. Exemple :

<gallery>
Ma Galerie d'Avatars
Image:AvatarBeru.gif|pour moi-même d'abord !
Image:Avatar Bond.gif
Image:Avatar Halloween.gif
Image:Avatar Aura4.gif|et pour tous mes ami(e)s du Forum
Image:Claudeavatar.gif
Image:Avatar droopy.gif
Image:Avatar Guepard.gif
Image:Avatar Guepard2.gif
Image:Avatar KenoH.jpg
Image:Avatar Patto.gif
D'autres images viendront bientôt compléter cette galerie
</gallery>

Ma Galerie d'Avatars	AvatarBeru.gif pour moi-même d'abord !	Avatar Bond.gif	Avatar Halloween.gif
Avatar Aura4.gif et pour tous mes ami(e)s du Forum	Claudeavatar.gif	Avatar droopy.gif	Avatar Guepard.gif
Avatar Guepard2.gif	Avatar KenoH.jpg	Avatar Patto.gif	D'autres images viendront bientôt compléter cette galerie

Flash, options avancées

Le syntaxe à utiliser :

<flash>file=nomdufichier.swf|attribute=valeur|...</flash>

Options possibles :

• • width=px ou % (Modifier la largeur de l'objet)
  • height=px ou % (Modifier la hauteur de l'objet)
  • play=true/false (Démarrer la lecture de l'animations dés le chargement ou attendre sur la première image, defaut:true (vrai))
  • loop=true/false (Lecture en boucle, defaut:true (vrai))
  • devicefont=true/false (changer la police utilisé par l'animation)
  • bgcolor=#?????? (? -> Couleur hexadécimale: 1-9, A-F)
  • scale=showall/noborder/exactfit (Ajuster automatiquement les dimensions)
  • menu=true/false (Montrer (true) ou Cacher (false) les menus du clique droit sur l'animation)
  • align (alignement de l'animation (left, right, center ou justify)
  • salign
  • base
  • wmode
  • SeamlessTabbing
  • flashvars=?var1=value1&var2=value2 (communiquer des variables à l'animation)
  • name (spécifique à l'objet)
  • id (embed-specific)
  • movie (spécifique à l'objet)
  • src (spécifique à l'objet)

Les catégories

Les catégories servent à répertorier automatiquement tous les articles du wiki. Vous devez choisir au moins une catégorie pour votre article !

Vous commencez par rédiger votre article, ensuite vous décidez dans quel catégorie(s) il pourrait se mettre. Par exemple le tutoriel de William : Capture d'écran avec The Gimp je l'ai mis dans : Catégorie:Tutoriaux Ubuntu, dans Catégorie:Tutoriaux graphisme et dans Catégorie:Tutoriaux The Gimp comme son tutoriel explique à la fois comment faire une copie d'écran sous Ubuntu et comment utiliser The Gimp pour faire une copie d'écran.

Créer un lien vers une catégorie

On utilise le code suivant :

[[:Catégorie:Nom de la catégorie|Texte affiché]]

ce qui donne : Texte affiché

Placer un article dans une catégorie

On insère le texte suivant en haut de l'article :

[[Catégorie:Nom de la catégorie]]

Créer une sous-catégorie

Il suffit d'ajouter le texte suivant à la sous catégorie :

[[Catégorie:Nom de la catégorie contenant la sous catégorie]]

Remarque : Pour que chaque article soit dans la catégorie plus dans son ou ses sous catégories on doit assigner plusieurs catégories au même article

Par exemple : Pour mon tutoriel sur File Zilla , j'ai assigné la Catégorie : Tutoriels informatique, ainsi que Tutoriels Windows XP et Tutoriels Windows Vista. Vous pouvez voir en bas de chaque page à quels catégories appartiennent chaque article.

{{ Nom du modèle }}