Accueil du site

[Plan du site] Vous êtes ici :: Robotix ~ Accueil ~ Les tutoriels ~ Robotix ~ Mettre en forme ses textes : le Rcode

Mettre en forme ses textes : le Rcode
Avatar de : robocop
  • Auteur : robocop
  • Date de création : le 01/06/08 à 10h11
  • Dernière modification : le 12/06/10 à 09h42
  • 0 exercice
5
commentaires Réagir


Si vous êtes membre sur robotix, vous avez déjà sûrement du rencontrer des balises de mises en forme, comme <gras> pour mettre en gras un texte.
Et bien sans le savoir, vous venez d'utiliser le Rcode, le langage de mise en forme de tous les messages sur robotix.

Je vais dans cette page vous montrez le fonctionnement du Rcode, et tenter d'énumérer toutes les balises à travers cette documentation.

Sommaire :


  1. 1. Introduction au Rcode
  2. 2. Tout ce que le Rcode sait faire !

Introduction au Rcode



Le Rcode est un langage qui suit la logique de l'XML, c'est à dire que chaque balise commence par < et se termine par >.
Toutes les balises vont par paire : si on ouvre une balise, on doit la refermer.
Par exemple, pour mettre son texte en gras, il faut taper :
Code Rcode
  1. <gras>Votre texte en gras</gras>

On a bien ouvert la balise <gras >, mis notre texte, puis on l'a refermé.

Appliquer plusieurs balises à un texte



Il est bien entendu possible d'appliquer plusieurs balises à un texte, pour le mettre en gras et en italique par exemple.
Il faut fermer les balises dans l'ordre inverse duquel on les a ouvertes.
Par exemple, pour mettre un texte en gras et en italique, on peut taper :
Code Rcode
  1. <italique><gras>Texte</gras></italique>

Ou encore
Code Rcode
  1. <italique><gras>Texte</gras></italique>

Mais certainement pas :
Code Rcode
  1. <gras><italique>Texte</gras></italique>

En effet, ici, on a ouvert en premier la balise <gras >, mais on ne l'a pas refermée en dernière : le code ne fonctionnera pas !

Des balises plus complexes, les attributs



Certaines balises fonctionnent différemment, puisqu'elles prennent en compte une ou des valeurs supplémentaires, les attributs.
Rassurez-vous, ce n'est absolument pas sorcier, et vous allez comprendre tout de suite l'utilité du procédé.
La balise couleur est une balise à attribut : il faut lui préciser la couleur à laquelle vous voulez que le message s'affiche.

Par exemple, pour mettre votre texte en vert foncé, il faudra taper :
Code Rcode
  1. <couleur nom="vertf">Votre texte</couleur>


Et voilà, si vous avez compris cela, vous avez compris la façon dont fonctionne le Rcode.

Mais comment je le sais moi que pour mettre le texte en vert foncé, il faut inscrire "vertf" ?


Et bien c'est là qu'intervient la boite de mise en forme !
La boite de mise en forme contient divers boutons qui entourent votre zone de texte :
boite a outils du rcode


Si vous avez le javascript activé, il vous suffit de cliquer sur le bouton correspondant à l'action choisie, et le Rcode est directement généré et ajouté à la zone de texte !

Mais cela pose encore un petit problème : la boite à outils ne connait pas toutes les possibilités qu'offre le Rcode !
Seule la partie suivante liste toutes les balises, tout ce que peut faire le rcode !
Donc, pour réaliser quelques choses de technique, nous vous recommandons de recourir à cette partie ;) .

Tout ce que le Rcode sait faire !



Les balises de bases


Mettre un texte en gras
Code Rcode
  1. <gras>Votre texte</gras>

Souligner votre texte
Code Rcode
  1. <souligne>Votre texte</souligne>

Mettre un texte en italique
Code Rcode
  1. <italique>Votre texte</italique>

Barrer votre texte
Code Rcode
  1. <barre>Votre texte</barre>


Les titres, une histoire de sémantique...



Pour mettre en forme vos messages, rien de tels que de les structurer en parties, et de donner un titre à chaque partie et sous partie.
C'est le rôle des balises titre1 et titre2.
Ex :

Sous titre 2



Pour les utiliser, voici le rcode à utiliser :
Code Rcode
  1.  
  2. <titre2>Sous titre 2</titre2>
  3.  


Les images et les liens



Pour mettre une image sur robotix, il est conseillé de l'uploader sur nos serveurs.
Ce n'est pas obligatoire pour les messages sur le forum par exemple, mais c'est primordial pour les tutoriels, le dicobot, les schémas électroniques, ou encore les news.

Pour uploader une image, ça se passe ici, et vous pouvez retrouver ce lien à chaque fois que vous tapez un message, dans la boite à outils, à gauche de la zone de texte ;) .

Pour insérer une image, on utilise la balise image :
Code Rcode
  1.  <image legende="Légende de l'image">Url de l'image</image>

L'attribut légende est facultatif. Par exemple, si l'url de votre image est http://www.monsite.com/image.jpg, le code doit être :
Code Rcode
  1.  <image>http://www.monsite.com/image.jpg</image>

Ce qui peut donner (en fonction de l'image bien sur :p ) :
Image utilisateur

Les liens s'effectuent avec la balise <lien > (étonnant :D )
Cette balise prend comme paramètre un attribut, url, qui doit préciser le lien.
Ex :
Code Rcode
  1. <lien url="http://www.robotix.fr">Robotix</lien>

Ce qui affichera : Robotix

Note : si vous tapez directement une adresse pure, elle sera automatiquement transformée en lien.
Ex : http://www.robotix.fr

asimov.jpg


Il est bien entendu possible de combiner les liens et les images, ce qui permet de faire des miniatures : vous affichez la petite image en faisant un lien vers la deuxième :
Code Rcode
  1. <lien url="http://www.monsite.com/grand-image.jpg"><image legende="asimov.jpg">http://www.monsite.com/petit-image.jpg</image></lien>


Essayer de cliquer sur l'image de gauche pour voir !
Ce système est automatiquement pris en charge par le système d'upload d'image de robotix ;) .








Couleur, taille du texte, police, et blocs d'information



Couleur du texte
Comme nous venons de le voir plus haut, pour changer la couleur d'un texte, la syntaxe est la suivante :
Code Rcode
  1. <couleur nom="rose">Et voilà du rose Barbie ! </couleur>

Ce qui aura le bonheur d'afficher aux visiteurs :
Et voilà du rose Barbie ! A utiliser avec modération bien entendu :| .
Police du texte
Si vous désirez utiliser une police particulière pour votre texte, vous pouvez le faire de cette façon :
Code Rcode
  1. <police nom="impact">Votre texte</police>

Voilà toutes les valeurs que peut prendre l'attribut nom de la balise police :

Les blocs d'information
Les blocs d'informations permettent de mettre en valeur un texte, une question, une information par exemple.
Il en existe quatre : le bloc erreur, le bloc attention, le bloc information et le bloc question :
Code Rcode
  1. <erreur>Erreur ! </erreur>
  2. <attention>Attention ! </attention>
  3. <question>Des question ?</question>
  4. <information>Ceci est une information</information>

Rendu :
Ceci est une information


Les citations et la balise secret



Les citations
Pour citer un texte, il est recommendé d'utiliser la balise citation :
Citation de : Ceasar
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis neque ac nibh. In hendrerit nisi. Nam interdum, nunc ut consequat dictum, pede leo porttitor lacus, condimentum hendrerit orci lorem at odio. Nam consectetuer lobortis elit. Fusce dolor justo, fringilla et, luctus at, mattis ut, nisi. Morbi pellentesque lectus nec nisi gravida ornare. Nam imperdiet tempor erat. Fusce eget nunc. Proin consequat. Fusce sed eros. Phasellus sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi posuere aliquam sem. Curabitur nibh elit, consequat nec, gravida nec, tristique vitae, erat. Quisque consectetuer tincidunt magna.

Code XML
  1. <citation auteur="Auteur">Texte</citation>

Note : l'attribut auteur est faculatatif.

La balise secret
Pour cacher un trop long texte facultatif, ou pour ne pas donner directement la réponse à un exercice, vous pouvez utiliser la balise secret :
Code Rcode
  1. <secret>Il parait qu'un robot a commis un nouveau crime ! </secret>

Cela affichera :
Secret (cliquez pour afficher)
Il parait qu'un robot a commis un nouveau crime !


Les listes à puces



Les listes à puces permettent de lister des éléments (si si, je vous jure :p ).
Elles fonctionnent avec la balise liste qui "déclare" la liste, et avec la balise puce, qui déclare chaque entrée :
Code Rcode
  1. <liste>
  2. <puce>Entrée 1</puce>
  3. <puce>Entrée 2</puce>
  4. <puce>Entrée 3</puce>
  5. </liste>


Il est également possible de mettre des puces dans des puces !

Code Rcode
  1. <liste>
  2. <puce>Entrée 1
  3. <liste>
  4. <puce>Sous-entrée 1</puce>
  5. <puce>Sous-entrée 2</puce>
  6. <puce>Sous-entrée 3</puce>
  7. </liste>
  8. </puce>
  9. <puce>Entrée 2 :
  10. <liste>
  11. <puce>Sous-entrée 1</puce>
  12. <puce>Sous-entrée 2</puce>
  13. <puce>Sous-entrée 3</puce>
  14. </liste>
  15. </puce>
  16. <puce>Entrée 3</puce>
  17. </liste>

Sympa, non :) ?

Le code source



Si vous désirer poster dans vos messages du code source, la balise code est la pour ça.
Exemple :
Code C
  1. void Rot_droite(void)  
  2.    {  
  3.          motD_1=0;  
  4.          motD_2=1;  
  5.                                            
  6.    }  
  7.  
  8. void Rot_gauche(void)  
  9.     {  
  10.          motG_1=0;  
  11.          motG_2=1;                      
  12.     }  

Comme vous le voyer, le code source est automatiquement colorié, et c'est beaucoup plus agréable pour le lecteur.
Voici comment colorier votre code :
Code Rcode
  1. <code type="c" >Votre code ici</ code>

Bien entendu, il ne faut pas mettre d'espaces dans les balise code ;) .

Il existe une multitude de langages de programmation !
Vos pouvez les trouver tous la liste déroulante Code de la boite d'outils.

Il est également possible de surligner certaines lignes pour les mettre en valeur :
Code PHP
  1. <?php
  2. $variable = 'Bienvenue sur ';
  3. $variable.='Robotix';
  4. echo $variable;
  5. ?>

Il suffit d'indiquer les lignes que vous voulez voir surligner grâce à l'attribut lignes :
Code Rcode
  1. <code type="php" lignes="2, 4" >
  2. </code >


Les flottements, ou comment organiser ses textes et images



Je ne sais pas si vous avez vu quand j'ai parlé de la balise <image >, la deuxième photo du grand Asimov était placée à la gauche du texte !
Cela est possbile grâce à la balise <flottant> :
Code Rcode
  1. <flottant valeur="droite"><gras><couleur nom="bleu">Du texte à doite</couleur></gras></flottant>
  2. Du texte normal

Voila le resultat : le texte en flottant (bleu) se retrouve à droite du texte normal, et sur la même ligne !
Citation
Du texte à doite

Du texte normal


Note : La balise flottant prend comme valeurs d'attribut droite et gauche.
C'est extrêment pratique pour les images : on peut de cette façon mettre du texte et une image à coté.

Les tableaux



Pour représenter des données tabulaires, rien de mieux qu'un tableau :tare: .
Titre colonne 1 Titre colonne 2
Contenu cellule 1 Contenu cellule 2
Contenu cellule 3 Contenu cellule 4

Voici le code de base d'un tableau :
Code Rcode
  1.  
  2. <tableau>
  3. <ligne>
  4. <entete>Titre colonne 1</entete>
  5. <entete>Titre colonne 2</entete>
  6. </ligne>
  7. <ligne>
  8. <cellule>Contenu cellule 1</cellule>
  9. <cellule>Contenu cellule 2</cellule>
  10. </ligne>
  11. <ligne>
  12. <cellule>Contenu cellule 3</cellule>
  13. <cellule>Contenu cellule 4</cellule>
  14. </ligne>
  15. </tableau>

Titre colonne 1 Titre colonne 2
Contenu cellule 1 Contenu cellule 2
Contenu cellule 3 Contenu cellule 4


Il est également possible de fusionner des cellules hozirontalement, grâce à l'attribut fusion_col qui prend comme valeur le nombre de colonne à fusionner :

Colonne fusionnée
Cellule 1 Cellule 2


Code Rcode
  1. <tableau>
  2.     <ligne>
  3.         <cellule fusion_col="2">Colonne fusionnée</cellule>
  4.     </ligne>
  5.     <ligne>
  6.         <cellule>Cellule 1 </cellule>
  7.         <cellule>Cellule 2</cellule>
  8.     </ligne>
  9. </tableau>


On peut de la même façon fusionner des lignes :
Cellule 1 Cellule 2 fusionnée
Cellule 3

Code Rcode
  1. <tableau>
  2.     <ligne>
  3.         <cellule>Cellule 1</cellule>
  4.         <cellule fusion_lig="2">Cellule 2 fusionnée</cellule>
  5.     </ligne>
  6.     <ligne>
  7.         <cellule>Cellule 3</cellule>
  8.     </ligne>
  9. </tableau>


Indice et exposant



Indice
Il est possible de mettre des caractères en indice : SO4
Code Rcode
  1. SO<indice>4</indice>

Exposant
La balise exposant marche de la même façon : (ex : 2nde)
Code Rcode
  1. 2<exposant>nde</exposant>

Les balises vidéo


Et oui !
Le rcode sait même afficher une vidéo youtube ou daylimotion :
Voir la vidéo sur Youtube

Utiliser ces balises demandent un certain apprentissage (rien de bien conséquant, rassurez-vous ;) ).
Tout d'abort, vous devez récupérer le lien de la vidéo.
Ici, c'est
http://fr.youtube.com/watch?v=dqGYRlRU1MI
http://www.dailymotion.com/fr/featured/video/x5zzz43_balbla
Or si on analyse ce lien, on voit qu'il contient le "code barre" de la vidéo :
http://fr.youtube.com/watch?v=dqGYRlRU1MI
http://www.dailymotion.com/fr/featured/video/x5zzz43_balbla
C'est ce code qui va nous interesser ici :
Code Rcode
  1. <youtube>dqGYRlRU1MI</youtube>

Il exite une balise qui fait exactement la même chose, mais avec la plateforme daylimotion :
Code Rcode
  1. <dailymotion>x5zzz43_balbla</dailymotion>


La balise math



Cette dernière balise du rcode permet d'inscrire des formules mathématiques dans vos textes :
S(f)(t)=a_{0}+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)}
Code Rcode
  1. <math>S(f)(t)=a_{0}+sum{n=1}{+infty}{a_{n} cos(n omega t)+b_{n} sin(n omega t)}</math>

delim{|}{{1/N} sum{n=1}{N}{gamma(u_n)} - 1/{2 pi} int{0}{2 pi}{gamma(t) dt}}{|} <= epsilon/3
Cette balise est une balise inline, c'est à dire quelle doit tenir sur une ligne.
Si vos formules tienent sur plusieurs lignes, ouvrez une nouvelle paire de balise math par ligne.

La documentation complète de toutes les balises du Rcode est disponible ici :
http://www.xm1math.n [...] /doc_fr/help_fr.html

Les commentaires



Il vous ai déjà arrivé que vouloir afficher une partie d'un texte après le lancement d'un tutoriel par exemple, ou de donner des indications à vos textes que seuls les personnes qui peuvent l'editer pourront voir ?

Utilisez les commentaires, un point obscur du Rcode :tare: !
Cette balise, placée devant une ligne la désactive totalement !
Elle ne sera plus visible. Il faut utiliser les caractères
Ce tutoriel ce termine ici.
Vous connaissez maintenant toutes les possibilités du rcode.
Servez-vous en à bon essiant, pour que la présentation de vos document sur robotix soit claire, érgonomique, structurée, et agréable à lire pour vos visiteurs :) .


© 2009 Robotix.fr - Tout droits réservés - Contact - Remonter - Nintendo - Feedburner