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 | <gras>Texte en gras</gras>
|
Mettre en italique
Code : zCode | <italique>Texte en italique</italique>
|
Souligner le texte
Code : zCode | <souligne>Texte souligné</souligne>
|
Barrer le texte
Code : zCode | <barre>Texte barré</barre>
|
Liste à puces
Code : zCode | <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 | <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 :
- 1 : 1, 2, 3...
- I : I, II, III......
- i : i, ii, iii
- A : A, B, C...
- a : a, b, c...
Citations
Code : zCode | <citation lien="http://www.siteduzero.com" nom="Auteur de la citation">Texte cité avec un lien vers l'auteur.</citation>
|
| <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
.
Images
Code : zCode | <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.
Vidéos
Il est possible d'insérer des vidéos issues de Youtube ou de Dailymotion. Pour cela, indiquez tout simplement l'adresse où se trouve la vidéo Youtube ou Dailymotion que vous souhaitez insérer.
Code : zCode | <video>http://www.youtube.com/watch?v=ErxmSzjKAvA</video>
<video>http://www.dailymotion.com/video/xbghi4_crash-test-des-emballages-du-livre_tech</video>
|
Un attribut
largeur est disponible et vous permet de modifier la taille de votre vidéo. La largeur est exprimée en pixels. Par exemple, pour une vidéo de taille 700 pixels :
Code : zCode | <video largeur="700">http://www.dailymotion.com/video/xbghi4_crash-test-des-emballages-du-livre_tech</video>
|
Liens
Il y a 3 façons de faire un lien :
Code : zCode | http://www.siteduzero.com
<lien url="http://www.siteduzero.com">Cliquez ici</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 | <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>
|
Un attribut doc permet de faire un lien vers la doc PHP ou la doc du C :
Code : zCode | <lien url="empty" doc="php">empty()</lien>
<lien url="printf" doc="c">printf()</lien>
|
E-mails
2 façons de taper une adresse e-mail :
Code : zCode | <email nom="batman@gothamcity.com">Envoyez-moi un mail !</email>
<email>batman@gothamcity.com</email>
|
Texte secret
Code : zCode | <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 !
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 | <secret cache="1">Vous savez quoi ? [...] Son beau-frère, Jean-Luc, l'a aidé à cacher le corps dans la grange. </secret>
|
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 | <information>Message informatif</information>
|
Message informatif
Avertissement
Code : zCode | <attention>Avertissement</attention>
|
Avertissement
Erreur
Code : zCode | <erreur>Message d'erreur</erreur>
|
Message d'erreur
Question
Code : zCode | <question>Question</question>
|
Question
Balises zCode accessibles via les listes déroulantes
Code
Code : zCode | <code>Code source</ code>
|
)
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
Voici par exemple comment on colorerait un code PHP :
Code : zCode | <code type="php"><?php echo 'Bonjour les Zér0s !'; ?></ code>
|
Notez que pour colorer un code PHP, il faut obligatoirement placer le tag "<?php" au début du 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" :
- titre : permet d'indiquer un titre au code qui sera affiché au-dessus
- url : permet de transformer le titre en url pour faire un lien vers une page qui se rapporte au code
- debut : permet de commencer la numérotation des lignes à partir du nombre indiqué.
- surligne : permet de surligner certaines lignes pour les mettre en évidence. Utilisez surligne="20, 28" pour surligner les lignes 20 et 28. Vous pouvez aussi surligner une plage de lignes : surligne="20-28" surlignera toutes les lignes de 20 à 28.
Exemple avec tous les attributs utilisés :
Résultat :
Code : PHP - Exemple 1.5500
501
502
503
504
505
506
507 | <?php
if ($direBonjour)
{
echo "Salut !";
appelFonction();
echo "Au revoir !";
}
?>
|
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 | 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 | <math>\int x^n\,dx = \frac{x^{n+1}}{n+1} + C\qquad\mbox{ si }n \ne -1</math>
|
Résultat :
Position
Code : zCode | <position valeur="centre">Texte centré</position>
|
La balise position peut prendre les valeurs suivantes :
- justifie
- gauche
- centre
- droite
Flottant
Code : zCode | <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 :
Taille
Code : zCode | <taille valeur="gros">Gros texte</taille>
|
La balise "taille" peut prendre les valeurs suivantes :
- ttpetit : Très très petit
- tpetit : Très petit
- petit : Petit
- gros : Gros
- tgros : Très gros
- ttgros : Très très gros
Couleur
Code : zCode | <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 flemme extrême
Police
Code : zCode | <police nom="arial">Texte en arial</police>
|
Cette balise peut prendre les valeurs suivantes :
- arial
- times
- courrier
- impact
- geneva
- optima
Titres
Code : zCode | <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.
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 :
| Titre | Titre |
|---|
| 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 | <tableau>
<ligne>
<cellule>25</cellule>
<cellule fusion_lig="2">abcd</cellule>
</ligne>
<ligne>
<cellule>36</cellule>
</ligne>
</tableau>
|
Résultat :
Enfin, il est possible de donner un titre au tableau à l'aide de la balise "
legende" :
Code : zCode | <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 |
Balises zCode devant être écrites "à la main"
Acronymes
Code : zCode | <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.
Indice & Exposant
Code : zCode
Ce qui donnera :
2
5
Code : zCode
Ce qui donnera :
5
9
Ces balises sont surtout utiles lorsqu'on parle de puissances, ou d'atomes. Elles sont disponibles en XHTML via les balises <sub> et <sup>
.
Les raccourcis clavier
Code : zCode
ou
Code : zCode | <touche>A</touche> + <touche>B</touche>
|
Le résultat donne respectivement les visuels suivants :
A + B ou
A +
B.
Cette balise permet d'illustrer plus facilement les raccourcis clavier, ce qui peut s'avérer très pratique dans les tutoriels.
Bien utiliser le zCode
).
GAIGHER
.
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook