Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Officiels > Site du Zér0 > Lecture du tutoriel

Bien utiliser le zCode

Avatar
 Auteur : M@teo21
Créé : le 31/10/2005 01:48:23
Modifié : le 26/09/2007 21:25:45
Noter et commenter ce tutoriel
Imprimer ce tutoriel
Le zCode (abréviation de "Zér0-Code") est le langage inventé par le Site du Zér0 pour la rédaction de messages sur le site.

Le zCode est utilisé à chaque fois qu'on peut écrire du texte :

Bref, si vous êtes membre du Site du Zér0, vous serez forcément amenés à vous en servir ! :)

Ce tutoriel est là pour vous présenter le zCode et toutes les possibilités qu'il offre, afin que vous puissiez en tirer le maximum. En clair, c'est quelque chose que tout Zér0 qui se respecte devrait lire au moins une fois ^^
Sommaire du chapitre :

Présentation du zCode

Le zCode peut être vu comme une évolution du célèbre bbCode, dont je vais vous parler maintenant. :)

Le langage bbCode



Beaucoup d'entre vous connaissent sûrement le bbCode, très utilisé sur les forums sur Internet. C'est une sorte de "mini-langage-html" inventé par les forums phpBB, un des systèmes de forums les plus populaires du web.
Peu à peu, ce langage a gagné du succès, et les autres forums ont réutilisé le même langage.

Un exemple de bbCode :

Code : Autre
1
2
3

[b]Ce texte est en gras[/b]

[color=red][i]Rouge et italique[/i][/color]


Cependant, ce langage a 2 principaux défauts :

Nous avons donc choisi de créer notre propre code sur le Site du Zér0 afin de faciliter la rédaction des messages sur le site, et de proposer plus de possibilités aux visiteurs.

Le langage zCode



Généralités



Voici, en quelques points, comment fonctionne le zCode :


Ordre de fermeture des balises



Une seule règle très importante à connaître quand vous utilisez le zCode : vous devez fermer les balises dans le même ordre que vous les avez ouvertes.

Voici un exemple d'erreur à ne pas faire :

Code : Zcode
1
<gras><italique >Texte en gras et italique</gras></italique>


Voici maintenant la bonne façon de faire :

Code : Zcode
1
<gras><italique>Texte en gras et italique</italique></gras>


Voilà à peu près tout ce qu'il faut savoir sur le fonctionnement général du zCode. C'est pas bien compliqué ^^

La zForm

Ce qu'on appelle la zForm, c'est en fait le formulaire où vous rédigez vos messages en zCode.

Voici à quoi ressemble une zForm :

Image utilisateur
La zForm


C'est un formulaire un peu particulier :


Au fur et à mesure que vous tapez du texte, vous pouvez donc voir à quoi ressemblera le résultat final ! :D

Notez que l'aperçu en temps réel fonctionne sur tous les navigateurs, mais certaines limitations du navigateur Internet Explorer font que l'aperçu ne suivra pas la position de votre curseur.
Ce n'est pas bien grave. Ceci dit, si vous voulez tirer pleinement partie de la zForm, nous vous suggérons d'essayer avec un autre navigateur, tel Mozilla Firefox


Gardez à l'esprit que l'aperçu temps réel n'est qu'un aperçu. Il vous donne une idée de ce à quoi ressemblera votre message une fois envoyé, mais il ne peut pas vous donner un aperçu "final". Comme cela est fait en temps réel, nous avons dû limiter en effet la quantité de balises parsées. Ne vous étonnez donc pas si, parfois, l'aperçu ne fonctionne pas correctement.
Le principal est que vous ayez une idée du résultat final ;)

Utilisez les boutons du zCode !



En haut de la zForm, vous avez un nombre importants de boutons. Ceux-ci vous permettent d'utiliser du zCode sans avoir à le connaître par c?ur (ce qui est pratique quand on y pense ^^ ).

Il suffit en fait de cliquer sur ces boutons pour insérer le zCode correspondant. Il y a 2 façons de faire :


Par ailleurs, il y a juste en-dessous de nombreuses listes déroulantes qui vous permettent d'ajouter plusieurs autres balises zCode (position, police, couleur...)

Les smilies



Sur la gauche de la zForm, vous trouverez plusieurs smilies que vous pouvez insérer dans votre message. Il vous suffit de cliquer sur le smiley qui vous intéresse.

Vous avez un grand choix de smilies. Voici quelques exemples :
:) :D ;) :p :lol: :euh: :( :o :colere: o_O ^^ :-°

Mais ce n'est pas tout ! Juste au-dessus de la liste des smilies, il y a un lien "Autres smilies".
Si vous cliquez dessus, une nouvelle fenêtre va apparaître avec encore plus de smilies à insérer ! Ce sont des smilies utilisés plus rarement, mais vous trouverez sûrement l'occasion de vous en servir ;)

Voici quelques-uns de ces smilies :
:magicien: :colere: :diable: :ange: :ninja: Image utilisateur :pirate: :zorro: :honte: :soleil: :waw:

Les membres peuvent nous proposer de nouveaux smilies s'ils le désirent, à condition qu'ils respectent la même "apparence" que ceux que nous utilisons.

Au passage, merci à Venom qui les a créés spécialement pour nous :)

Les zUploads



Sous les smilies, vous trouverez 2 liens. Le premier ouvre le Mode d'emploi du zCode, que vous êtes en train de lire.
Le second est particulièrement intéressant. Appelé Envoi d'images, il ouvre une fenêtre spéciale que l'on appelle les zUploads (on aime bien les trucs qui commencent par "z" sur ce site :lol: )

Le module des zUploads vous permet d'envoyer des images depuis votre disque vers le Site du Zér0. Voici à quoi ressemble une fenêtre de zUploads :

Image utilisateur
Les zUploads



Vous remarquerez en haut que vous avez 2 moyens d'envoyer une image sur le Site du Zér0 :


Dessous, vous avez la liste des images déjà uploadées sous forme de miniatures. Pour chaque image, vous pouvez :


Vous serez surtout intéressés par les boutons d'insertion du zCode, et de redimensionnement de l'image.
Utilisez le redimensionnement d'image pour diminuer les dimensions de l'image si elle est trop grande pour être affichée sur le site, mais aussi pour réduire le poids de l'image. En effet, vous ne pouvez pas envoyer autant d'images que vous le voulez : il y a un quota maximum d'upload pour chaque dossier ! :p

Les balises du zCode

Nous allons maintenant passer en revue toutes les balises zCode qui existent.

Comme je vous l'ai dit plus haut, je vous recommande d'utiliser les boutons en haut pour insérer automatiquement des balises zCode. Cependant, il est pratique de connaître le nom des balises si vous voulez les écrire "à la main". D'ailleurs, certaines balises ne sont pas accessibles en cliquant sur les boutons, il faut obligatoirement taper le zCode correspondant à la main ;)

Balises zCode accessibles via les boutons



Mettre en gras



Code : Zcode
1
<gras>Texte en gras</gras>


Mettre en italique



Code : Zcode
1
<italique>Texte en italique</italique>


Souligner le texte



Code : Zcode
1
<souligne>Texte souligné</souligne>


Barrer le texte



Code : Zcode
1
<barre>Texte barré</barre>


Liste à puces



Code : Zcode
1
2
3
4
5
<liste>
<puce>Puce 1</puce>
<puce>Puce 2</puce>
<puce>Puce 3</puce>
</liste>


Notez qu'il est possible de faire des listes à puces numérotées en ajoutant un attribut à la balise "liste".
Voici une liste à puces numérotée "1, 2, 3..." :

Code : Zcode
1
2
3
4
5
<liste type="1">
<puce>Puce 1</puce>
<puce>Puce 2</puce>
<puce>Puce 3</puce>
</liste>


Ici nous avons mis l'attribut type="1", mais il faut savoir que vous pouvez mettre différentes valeurs :




Citations



Code : Zcode
1
<citation lien="http://www.siteduzero.com" nom="Auteur de la citation">Texte cité avec un lien vers l'auteur.</citation>

Code : Zcode
1
<citation rid="X">Ou X est l'id du message à citer</citation>

Cet attribut est maintenant par défaut lorsqu'on choisit de citer un message par le bouton Image utilisateur.

Images



Code : Zcode
1
<image legende="Texte si l'image n'est pas disponible">http://www.site.com/image.jpg</image>

L'attribut legende permet d'afficher un texte descriptif de l'image.

Liens



Il y a 3 façons de faire un lien :

Code : Zcode
1
2
3
Cliquez ici
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>


Vous pouvez également créer des liens spéciaux pointant soit vers Google, soit vers Wikipédia. Un attribut langue peut être spécifié si la recherche ne se fait pas en français :

Code : Zcode
1
2
3
4
<lien type="wikipedia" url="Toto">voir Toto sur la Wikipedia</lien>
<lien type="wikipedia" url="Toto" langue="en">voir Toto sur la Wikipédia anglaise</lien>
<lien type="google" url="Toto">rechercher Toto avec Google.fr</lien>
<lien type="google" url="Toto" langue="en">rechercher Toto avec Google.com</lien>


Résultat :



E-mails



2 façons de taper une adresse e-mail :

Code : Zcode
1
2
<email nom="batman@gothamcity.com">Envoyez-moi un mail !</email>
<email>batman@gothamcity.com</email>


Texte secret



Code : Zcode
1
<secret>Ce message est top secret !</secret>


Utilisez la balise "secret" pour diffuser des informations qui ne doivent pas être vues lors de la lecture de votre message. Pour afficher le message caché, il faudra que le visiteur clique sur la zone marquée "Secret".
Cette balise est particulièrement utile si vous voulez cacher la correction d'un TP par exemple (pour ne pas divulguer la réponse de suite), ou encore au cours d'une discussion sur une série télévisée pour diffuser des "spoilers" (rumeurs). Petit exemple :

Secret (cliquez pour afficher)
Vous savez quoi ? Il paraît que le héros de l'histoire meurt à la fin ! :p


Comme vous le voyez, les champs d'application sont larges ^^

Vous pouvez aussi ajouter un attribut cache valant 1 à la balise "secret". Ainsi, la zone cachée est réduite en hauteur pour ne pas prendre trop de place. Cet attribut est à utiliser pour insérer un contenu facultatif, que le lecteur n'est pas obligé de lire :)

Code : Zcode
1
<secret cache="1">Vous savez quoi ? [...] Son beau-frère, Jean-Luc, l'a aidé à cacher le corps dans la grange. </secret>


Secret (cliquez pour afficher)
Vous savez quoi ? Il paraît que le tueur est le type que personne ne soupçonnait !
Il a tué la fille avec un couteau, dans la cuisine, à 3 heures du matin.
Mais en il n'était pas tout seul. Son beau-frère, Jean-Luc, l'a aidé à cacher le corps dans la grange.



Information



Code : Zcode
1
<information>Message informatif</information>

Message informatif


Avertissement



Code : Zcode
1
<attention>Avertissement</attention>

Avertissement


Erreur



Code : Zcode
1
<erreur>Message d'erreur</erreur>

Message d'erreur


Question



Code : Zcode
1
<question>Question</question>

Question



Balises zCode accessibles via les listes déroulantes



Code



Code : Zcode
1
<code>Code source</ code>

Notez qu'il n'y a pas d'espace entre le / et "code", cette erreur est volontaire car sinon je ne pourrais pas vous montrer la balise (la raison est simple, si vous réfléchissez un peu vous comprendrez :-° )

La balise "code" permet d'insérer un code source dans votre message ou votre tutoriel.
Cette balise peut ne pas prendre d'arguments (comme l'exemple qu'on vient de voir). Dans ce cas, le code ne sera pas coloré syntaxiquement.

Si vous indiquez un argument à la balise "code" (en sélectionnant un langage dans la liste déroulante), alors votre code source sera coloré syntaxiquement de manière adaptée au langage que vous aurez choisi.

Le zCode peut colorer syntaxiquement plus d'une quarantaine de langages ! Il y a (entre autres) le xHTML, CSS, PHP, Javascript, XML, SQL, ASP, C, C++, C#, Java, Python, Pascal, Delphi, VB, Darkbasic, Ocaml, Lisp (et j'en passe). Il est même possible de colorer le langage zCode si vous voulez le présenter dans un de vos messages :D

Voici par exemple comment on colorerait un code PHP :

Code : Zcode
1
<code type="php"><?php echo 'Bonjour les Zér0s !'; ?></ code>


Ca c'est le code minimal, mais vous pouvez rajouter un grand nombre d'attributs à la balise pour profiter de certaines fonctionnalités. Voici la liste des attributs qui fonctionnent sur la balise "code" :



Exemple avec tous les attributs utilisés :

Image utilisateur


Résultat :

Code : PHP - Exemple 1.5
500
501
502
503
504
505
506
507
<?php
if ($direBonjour)
{
    echo "Salut !";
    appelFonction();
    echo "Au revoir !";
}
?>



Position



Code : Zcode
1
<position valeur="centre">Texte centré</position>


La balise position peut prendre les valeurs suivantes :


Flottant



Code : Zcode
1
<flottant valeur="gauche">  <image>http://www.site.com/image.jpg</image></flottant>Le texte qui suit entoure l'image flottante


Cette balise peut prendre les valeurs suivantes :

Le langage CSS permet de créer des éléments flottants dans une page web. Tout ce qui se trouvera entre les balises "flottant" sera aligné à gauche ou à droite (selon votre choix). Le texte qui suivra l'élément flottant l'"entourera". Cela vous permet de réaliser une présentation sympathique assez facilement.
Voici par exemple une image mise en flottant, regardez comment le texte l'entoure :

Image utilisateur


Taille



Code : Zcode
1
<taille valeur="gros">Gros texte</taille>

La balise "taille" peut prendre les valeurs suivantes :



Couleur



Code : Zcode
1
<couleur nom="rose">Vive le rose Barbie</couleur>

Cette balise peut prendre... beaucoup de valeurs. Je ne vous fais pas la liste des couleurs, je suis soudainement pris d'une flême extrême :p

Police



Code : Zcode
1
<police nom="arial">Texte en arial</police>

Cette balise peut prendre les valeurs suivantes :


Sémantique



Code : Zcode
1
<titre1>Mon titre</titre1>

Utilisez les balises sémantiques "titre1" et "titre2" pour structurer vos messages et tutoriels de manière claire et ordonnée.


Balises zCode devant être écrites "à la main"



Acronymes



Code : Zcode
1
<acronyme valeur="Cascading Style Sheets">CSS</acronyme>

La balise "acronyme" permet d'indiquer la définition d'acronymes, c'est-à-dire les abréviations telles que N.A.S.A., G.I.G.N, C.I.A. etc.
Il suffit de passer le curseur de la souris sur l'acronyme pour voir apparaître la définition.

Tableaux



Code : Zcode
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<tableau>
    <ligne>
        <entete>Titre</entete>
        <entete>Titre</entete>
    </ligne>
    <ligne>
        <cellule>Blabla</cellule>
        <cellule>Blibli</cellule>
    </ligne>
    <ligne>
        <cellule>Blablou</cellule>
        <cellule>Blobla</cellule>
    </ligne>
</tableau>


Résultat :

TitreTitre
Blabla Blibli
Blablou Blobla



Vous pouvez aussi utiliser les attributs fusion_lig et fusion_col (correspondant respectivement à rowspan et colspan pour ceux qui connaissent le xHTML ;) ). Ils permettent de fusionner des lignes et colonnes.
Vous devez indiquer comme valeur le nombre de lignes ou colonnes à fusionner. Exemple :

Code : Zcode
1
2
3
4
5
6
7
8
9
<tableau>
    <ligne>
        <cellule>25</cellule>
        <cellule fusion_lig="2">abcd</cellule>
    </ligne>
    <ligne>
        <cellule>36</cellule>
    </ligne>
</tableau>


Résultat :

25 abcd
36


Enfin, il est possible de donner un titre au tableau à l'aide de la balise "legende" :

Code : Zcode
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<tableau>
    <legende>Evolution économique</legende>
    <ligne>
        <cellule>25</cellule>
        <cellule>abcd</cellule>
    </ligne>
    <ligne>
        <cellule>36</cellule>
        <cellule>efgh</cellule>
    </ligne>
</tableau>


Résultat :

Evolution économique
25 abcd
36 efgh


Indice & Exposant



Code : Zcode
1
2<indice>5</indice>

Ce qui donnera :
25

Code : Zcode
1
5<exposant>9</exposant>

Ce qui donnera :
59

Ces balises sont surtout utiles lorsqu'on parle de puissances, ou d'atomes. Elles sont disponibles en XHTML via les balises <sub> et <sup> ;) .

Minicode



Si vous devez écrire un court morceau de code et que vous ne voulez pas ouvrir de grosse balise de code, utilisez la balise minicode. Elle affiche un code source coloré sur la même ligne.

Code : Zcode
1
Pour insérer une image, utilisez la balise <minicode type="html"><img src="image.jpg" alt="Mon image" /></minicode> et hop, l'image s'affichera !


Résultat :

Pour insérer une image, utilisez la balise <img src="image.jpg" alt="Mon image" /> et hop, l'image s'affichera !

Mathématiques



La balise math permet d'insérer des formules mathématiques écrites en TeX :

Code : Zcode
1
<math>\int x^n\,dx =  \frac{x^{n+1}}{n+1} + C\qquad\mbox{ si }n \ne -1</math>


Résultat :

\int x^n\,dx = \frac{x^{n+1}}{n+1} + C\qquad\mbox{ si }n \ne -1
Cette documentation du zCode est maintenue à jour au fur et à mesure de l'évolution du langage.
Comme vous pouvez le voir, nous avons fait en sorte de vous proposer un grand nombre de balises possibles, ce qui fait que vous pouvez faire presque tout ce que vous voulez avec.
(en fait on est en train de plancher sur la balise <cafe></cafe> qui fait le café toute seule. On vous tient au courant quand elle est prête :D )

Nous avons porté une grande attention à la réalisation du zCode. Nous avons passé une part importante du développement du Site du Zér0 dessus, et nous espérons que vous saurez en faire bon usage dans vos tutoriels, vos messages, vos MP etc. :)
Auteur : M@teo21
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 74 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0639s (0.0529s)