Introduction au WikiTexte

Les entrées de texte, que ce soit pour la rédaction d'un post sur un forum, la rédaction d'un article ou la rédaction d'une dissertation, se font avec un code de type wikiTexte. Les possibilités de balisage sont différentes selon le type de contenu entré. Les canevas d'entrée de texte proposent les boutons correspondant à toutes les balises possibles selon les entrées. Mais une fois connues, et c'est l’intérêt du wikiTexte, il est plus aisé d'entrer les balises au clavier.

Qu'est-ce que le wikiTexte?sommaire

Le format wikiTexte n'est pas spécifique au site Wikipédia. C'est un mode de balisage léger, qui permet la mise en forme d'un texte à l'aide de caractères ajoutés à ce dernier, qui seront interprétés par le moteur informatique.

Pourquoi l'utilisation du wikiTexte?sommaire

Le wikiTexte permet une prise en main simple et pratique, par l'utilisateur, de la mise en forme de son texte, pour un rendu qui sera au final un code html1. Les principes sont rapidement assimilables. L'entrée des caractères de syntaxe se fait rapidement au clavier. Le texte brut est facilement lisible selon la hiérarchie que doit lui donner sa mise en forme.

Le wikiTexte est par ailleurs bien connu des utilisateurs de wikipédia. Notre code est un peu différent et un peu moins étoffé que celui de wikiPédia.

Les modes d'entréessommaire

Dans les canevas d'entrées de texte il y a trois possibilités d'entré des balises :

• Du moment que l'on connait les balises et les règles, on peut les rentrer directement au clavier. Pour la plupart des balises c'est le mode d'entrée le plus simple.
• Chaque possibilité de balisage est représentée en tête du canevas, par un bouton. Le bouton introduit la balise souhaitée à l'endroit où se trouve le curseur. Pour appliquer la balise à une portion de texte déjà écrite, on peut sélectionner ce texte puis appuyer sur le bouton. Le texte se retrouve alors encadré correctement par la balise. Cette possibilité n'est pratique que pour les balises de règle simple.
• La plupart des possibilités connaissent aussi un raccourci clavier avec la touche Alt. Ce raccourci est rappelé au survol des bouton. La fonction d'insertion des balises est la même que pour le bouton, elle fonctionne également en ayant sélectionné une portion du texte.

La prévisualisation.sommaire

Le dernier bouton dans l'éditeur de texte permets une prévisualisation du texte rendu. Il n'y a pas de bouton de commande, il faut cliquer le bouton. La prévisualisation apparait directement sous le cadre d'entrée de texte.

Les règles admises selon les entrées de textesommaire

Les post sur les forumsommaire

Les règles admises sont :

• L'italique
• les caractères gras
• les retours à la ligne forcés
• les paragraphes
• les listes
• les liste ordonnées
• les citations
• les liens hypertextes.
• le code informatique.

Les dissertationssommaire

Les règles admises sont :

• L'italique
• les caractères gras
• les titres
• les retours à la ligne forcés
• les paragraphes
• les listes
• les listes ordonnées
• les tableaux
• les lignes de séparation horizontales
• les notes de renvoi en pied de page
• la mise en forme préformatée
• le code informatique
• les citations
• les ancres
• les liens hypertexte
• les images de vitrine et à l'intérieur du texte.

Préambule pour les règlessommaire

Pour ceux qui ne sont pas coutumier du code de balisage, il n'est pas inutile de se figurer ce qu'est le code html qui est le format universel d'affichage des données sur internet.

C'est un format dans lequel les données sont encapsulées. Les balises d'encapsulage se présentent ainsi : <typeDeBalise > Données </typeDeBalise>. Il y a donc une balise de fermeture et une balise d'ouverture qui déterminent les données contenues dans cette capsule. Maintenant ces données peuvent être constituées elles mêmes de balises et de capsules fermées.

Les données sont ainsi hierarchisées, mais l'on comprends aussi que deux capsules ne peuvent pas se chevaucher ainsi les code <baliseA> ....<baliseB>....</balise>..</baliseB> est systématiquement mal interprété.

Le code wiki simplifie lui énormément le travail de marquage des balises. Les balises au lieu d'être fastidieuses à entrer, le sont plus facilement que sur un traitement de texte de bureau. Pour beaucoup l'encadrement n'est plus requis, mais un simple saut à la ligne. Par exemple : une ligne commençant par :le caractère ! suivie d'un retour à la ligne donnera un titre.

Échappementsommaire

Il est utile de préciser aussi la possibilité "d'échapper" un caractère. Comme certain caractère, deviennent, selon leur agencement, interprété comme des balises de mise en forme, ils ne sont plus affichés. Dés lors, s'il nous prend l'envie d'afficher ces balises, mais pour les faire apparaître tels quelles, et non pas comme mise en forme il faut les échapper. L'échappement se fait avec le caractère \ (Ctrl + Alt + 8) avant la balise. Notons que cet échappement ne doit être fait que pour la balise. Ainsi le caractère ' tout seul n'a pas besoin d'être échappé. Par contre le double caractère '' ne peut être écrit et apparaître sans être interprété, que avec le caractère d'échappement. C'est-à-dire qu'il a été écrit : \''

Descriptif des règlessommaire

Italiquesommaire

Les textes en italiques sont encadrés par les balises identiques '' et '', soit deux apostrophes (touche 4). Le raccourci clavier et Alt + I.

 Voici un ''exemple'' 

, donne : Voici un exemple.

Grassommaire

Les textes en gras sont encadrés par les balises identiques __ et __ soit, deux tirés (touche 8). Le raccourci clavier est Alt + B.

 Voici un __exemple__ 

, donne : Voici un exemple.

Paragraphesommaire

Un paragraphe est créé après chaque titre. Pour créer un nouveau paragraphe, il faut faire un retour clavier à la ligne deux fois. Pour séparer un texte en deux paragraphes il faut donc laisser un espace d'une ligne vide entre les deux portions de texte. Notons que un simple retour à la ligne dans le texte brut ne sera pas retranscrit dans la mise en forme. Si donc vous allez simplement à la ligne pour écrire la suite du texte, ce retour à la ligne ne sera pris en compte, et le texte sera dans la continuité du premier, sur la même ligne. Il y a un bouton prévu pour introduire la séparation, mais on comprend qu'il suffit d'appuyer deux fois sur la touche entrée.

Retour à la lignesommaire

Le simple retour à la ligne n'est pas pris en compte. Si l'on veut introduire un retour à la ligne forcé, il faut donc introduire une balise de séparation : %%%. Notons bien qu'il faut avoir une raison particulière pour introduire cette balise. Le format d'édition du site étant la séparation en paragraphes avec le double retour à la ligne, la plupart du temps, cette balise doit être évitée. L'une des raison peut être l'introduction d'un retour à la ligne dans une note de pied de page. le raccourci clavier est Alt + R.

Listesommaire

On peut avoir besoin de faire des listes. La méthode est très simple : il suffit de commencer une ligne avec un petit tiret : - . pour faire suivre les éléments d'une liste il faut commencer chaque ligne avec le même tiret ainsi le format :

-entrée un
-entrée deux
-entrée trois

donnera :

• entrée un
• entrée deux
• entrée trois

Si l'on veut poser une sous-liste dans une entrée, on rajoute un tiret supplémentaire, et ceci indéfiniment :

-entrée un
--sous entrée un
--sous entrée deux
-entrée deux
--sous entrée deux.un
--- sous-sous entrée deux.un.un
-entrée trois

donne :

• entrée un
  • sous entrée un
  • sous entrée deux
• entrée deux
  • sous entrée deux.un
    • sous-sous entrée deux.un.un
• entrée trois

Liste ordonnéesommaire

Le principe de la liste ordonnée est le même exactement que la liste. Le caractère de code est # (ctrl+alt+3)

#entrée un
#entrée deux
#entrée trois

donne :

1. entrée un
2. entrée deux
3. entrée trois

Tableausommaire

On peut faire des tableau des la manière suivante :

== Lettre	==Minuscule	==Alphabet	==KeyCode	==Couleur
==A	=a	=1	=65	=Noir	
==E	=e	=5	=69	=Blanc
==I	=i	=9	=73	=Rouge
==U	=u	=21	=85	=Vert
==0	=o	=15	=79	=Bleu

donne :

Une ligne de tableau commence par le caractère = ou le double caractère ==. En suite chaque case est séparée par un espace de tabulation suivi d'un = : tab + =. On peut mettre plusieurs espaces de tabulation avant le =, si l'on veut organiser graphiquement le tableau pour le rendre semblable au rendu, mais ce n'est pas nécessaire. Toutes les cases commençant par un double = seront des cases de type titre.

Lien hypertextesommaire

La syntaxe du lien hypertexte est : [[ Texte de lien | adresse URL ]] . La fonction appelée par le bouton de lien ou la touche Alt + K, fait apparaitre une boîte de dialogue où l'on peut rentrer l'adresse. Elle est utilisée correctement en présélectionnant avec le curseur, le texte dont on va faire un lien. Sinon il faudra rentrer ce texte par la suite avant la première séparation de la barre :|.

Barre séparativesommaire

On peut introduire une barre de séparation horizontale avec la balise : ====, qui donne :

Note de pied de pagesommaire

Les notes sont encadrées par les balises $$ et $$. Tout le texte ainsi encadré sera renvoyé en pied de page, tandis qu'un numéro de renvoi est introduit à l'endroit où était écrite la note. Les notes doivent donc être écrites à même le texte à l'endroit où doit apparaitre le numéro de renvoi. La numérotation est calculée par la machine il n'y a pas à l'établir. Donc :

Ceci est un exemple$$Les exemples sont très utiles pour la compréhension$$

donne : Ceci est un exemple2. Il est important de préciser qu'il ne doit y avoir aucun retour à la ligne, même simple, entre les deux balises de note, auquel cas, la note ne fonctionnerait pas. Pour une note étendue qui nécessiterai une séparation visuelle en paragraphes il faut utiliser la balise %%% qui doit permettre le saut à la ligne.

Citationsommaire

Pour mettre en avant une citation on commence la ligne par le caractère : '>' . Cela créer un encart hors du texte. Si à l'intérieur de la citation on veut mettre plusieurs paragraphes on fait une nouvelle ligne commençant par le caractère '>'. On peut donner le nom de l'auteur, ou l’œuvre, en faisant une ligne commençant par '>>'. Exemples

>Heureux les pauvre de cœur!
>>Jesus Christ

ou
>>Sagesse populaire
>C'est en forgeant que l'on devient forgeron.

donnera :

Heureux les pauvre de cœur!

Jesus Christ

ou

Sagesse populaire

C'est en forgeant que l'on devient forgeron.

Ancre et lien d'ancresommaire

En Html les ancre et lien d'ancre sont des balises de lien hypertexte. Ces balises pointent sur une partie de la page au lieu de pointer sur une autre page. Un lien d'ancre, pointant vers une ancre a donc la même syntaxe qu'un lien hypertexte, à la différence que le pointage de l'ancre est donné après le caractère # : [[ Texte de lien | #identifiant1 ]]. Ce pointage est un identifiant déterminé par l'utilisateur, le tout étant de donner le même identifiant à l'ancre. L'ancre se note ainsi : ~~identifiant1~~. L'ancre est donc introduite sur la partie du texte à pointer par le lien, elle ne sera pas visible, mais un clic sur le lien d'ancre fera défiler la page jusqu'à elle.

Images et Images de vitrine.sommaire

Pour introduire des images dans un texte il faut les avoir téléchargées sur le site. Ceci est décrit dans un autre tutoriel, ainsi que la manière de transférer la référence dans une zone de texte.

La syntaxe d'une image dans le texte est :((image:identifiant de l'image|position de l'image|largeur|un commentaire éventuel)). La syntaxe d'une image de vitrine est : ((vitrine:identifiant de l'image|un commentaire)). L'image de vitrine est l'image qui apparait au sommet de l'article écrit, elle apparait aussi dans les menus présentant les articles. On peut donc la considérer comme l'image d'appel de l'article. Les fonctions d'ajout d'image font apparaitre de toute façon des boîtes de dialogue proposant les champs à remplir. Il est préférable de ne pas remplir le premier champs : identifiant de l'image soit même. Sélectionnez une image sur votre palette d'image avant de lancer la fonction d'ajout d'image. Lancez ensuite la fonction qui remplira automatiquement ce champs à partir des données de l'image sélectionnée. Par la suite n'essayez pas de modifier ce champs. Les autres champs sont facilement compréhensibles et peuvent être modifier facilement :

La position de l'image est choisie avec une lettre parmi la liste suivante

• D pour droite : l'image apparaitra sur la droite de la page et le texte continuera dans l'espace restant (float : right)
• G pour gauche : l'image apparaitra sur la gauche et le texte continuera dans l'espace restant (float : left)
• C pour le centrage : l'image apparaitra seule au centre et le texte sautera l'espace de l'image.
• I pour inline soit dans la ligne : l'image apparait centrée au milieu de la ligne. Cette option est prévue pour faire apparaitre des petites images, faite pour se lire dans le texte. Par exemple si l'on voulait faire apparaitre une ligne de hiéroglyphes ou autres caractères dont ont aurait chargé l'image. Utilisée autrement elle troublera la mise en page.

Pour les trois premières options, il est préférable d'introduire l'image entre deux paragraphe et non pas au milieu d'un paragraphe. L'option par défaut sera le centrage

On peut rentrer la largeur de l'image, en pixels, que l'on désir faire apparaître. Le CSS3prévoit une hauteur maximale de l'image. Les images apparaissent toujours avec une proportion fixe entre la hauteur et la largeur, qui est celle du fichier chargé. Aussi, une seule dimension est demandée pour fixer les dimensions de l'image, et c'est donc la largeur. Par défaut l'image apparaitra avec les dimensions du fichier, dans la mesure de la limite de hauteur.

Le dernier champs est le commentaire que l'on souhaite éventuellement faire apparaitre en dessous de l'image. Dans l'option d'affichage 'I' le commentaire n'apparait pas.

L'image de vitrine n'a qu'un seul champs en plus de la référence de l'image, c'est le commentaire.

L'image de vitrine apparait dans un format unique, sur une bande relativement étroite et saturant la largeur du cadre. La proportion de l'image n'est pas changée, mais l'image est coupée. Le cadrage de cette découpe est axé verticalement centre de l'image. Actuellement il n'est pas possible de choisir modifier ce cadrage. Dans la plupart des images ce cadrage sera pertinent mais si vous avez une image de proportion verticale il faut vérifier qu'il fonctionne. Par exemple pour le portrait d'un personnage en pied, il faut s'assurer que la tête est verticalement au centre de l'image.

Texte préformatésommaire

Il est possible d'écrire un texte préformaté. C'est-à-dire que le texte apparaîtra avec la disposition qu'il a dans la zone de texte. Cette option n'est pas forcément très utile. Elle permet d'échapper des balisage. C'est ainsi que certains exemples sont montrés dans ce tutoriel. elle permet aussi d'écrire des poèmes comme Apollinaire. Les balises à l'intérieur de la zone préformatée ne sont pas prises en compte et sont rendues telles qu'elles: les deux balises <pr> et </pr> doivent encadrer la zone de texte. Mais attention, rien ne doit précéder <pr> sur sa ligne, et rien ne doit suivre </pr> sur sa ligne.

<pr>
Voici
	un
		Texte
			__Préformaté__

donnera :

Voici
	un
		Texte
			__Préformaté__

Codesommaire

Il est possible de formater un texte pour qu'il apparaisse comme du code informatique, mais cette fonctionnalité n'apparaitra que dans la section "programmation". C'est donc un formatage à l'attention des personnes désireuses de participer à l'élaboration de ce site.

Le code peut être en inline ou en bloc à part. La syntaxe est : '@?langage@@code?@', ou le langage est à choisir parmi la liste : php,javascript,sql,markup,java,css,clike. Si le langage n'est pas spécifié, ou si il n'appartient pas à cette liste, le formatage par defaut sera clike.

Si vous voulez faire un bloc de code il faut démarrer la ligne avec la balise : '@?langage@@'. Il est préférable de mettre la première ligne de code sur cette même ligne à la suite de la balise, de manière à ne pas avoir une ligne vide au début. De même pour la balise de fin '?@' est mieux placée à la fin de la dernière ligne. Si vous faite une citation de code inline, bien sûr ne sautez pas de ligne au milieu du code. Exemple :

@?php@@$hw = "\nHello World";
echo $hw;?@

En mode inline on peut omettre la balise de séparation '@@', le surlignage se fera selon le mode clike. Mais en mode bloc il ne faut pas omettre la balise, le bloc ne sera pas calculé.

vous pouvez démarrer un bloc de code en ne faisant qu'un seul saut à la ligne après un paragraphe ou quoique ce soit d'autre, mais pas un autre bloc de code. Ne collez pas deux bloc de code, faitez au moins deux sauts à la ligne.

Notez que dans la preview, le surlignage du code n'est pas calculé 4. De même le surlignage ne sera pas calculé si le code apparait dans une page hors de la section programmation. Pour ne pas faire apparaitre de disgracieuses lignes vides au début ou à la fin du code, il faut mettre la première ligne juste à la suite du tag de démarrage, sans saut de ligne, et à mettre le tag de fin à la fin de la dernière ligne. Lorsque l'on encadre le texte de code et que l'on lance la commande de code avec le bouton approprié, ou Alt + O, le tag est entré correctement pour ne pas faire de ligne vide.

Notessommaire

Raphaël Urbain le 11 octobre 2014