Bienvenue jeune padawan dans le merveilleux monde des codes! Je serai ton humble professeur, mais saches que comme toi, j'ai encore beaucoup à apprendre. C'est la beauté des codes : il y a toujours quelque chose à découvrir! Les codes sont à mon sens une forme d'écriture qui permet d'épancher sa créativité. Ils peuvent être source de frustration, d'impatience même, mais au final, lorsqu'on a bien compris, il y a toujours de quoi être fier d'avoir su faire parler sa petite voix intérieure au-travers les codes. Il s'agit un peu d'un processus ressemblant à l'apprentissage d'une langue, avec ses règles qu'il faut respecter. Je vous encourage à lire ce tutoriel en entier afin de ne rien manquer, et n'hésitez surtout pas à me poser des questions, j'y répondrai au meilleur de ma connaissance. Ce tutoriel est le premier que je ferai et rassemble les notions les plus basiques mais ne vous inquiétez pas, nous verrons bientôt quelque chose d'un peu plus substantiel!

Avant de commencer, j'aimerais vous familiariser avec la règle la plus importante en code :
- TOUJOURS fermer ses balises.
Fermer ses balises est absolument essentiel à la réussite de tout code. Si on ouvre une balise, il faut automatiquement penser à la fermer. 99% des erreurs de code que j'ai rencontrées étaient à cause de balises non fermées! Aussi fou que cela puisse paraître, c'est tout à fait vrai. Les balises s'aiment de tout leur coeur et ne peuvent pas fonctionner sans leur tendre moitié. Si votre code ne marche pas, vous devriez regarder ceci en premier avant toute chose!

Maintenant que ceci est clair, parlons un peu de code. Sur les forums, nous pouvons utiliser deux types de codes : le BBCode (la presque totalité d'entre vous vous en servez déjà) et les codes HTML. Voici un exemple concret de ce que sont l'un et l'autre :
BBCode:

Code:

[b]Nous aimons les codes![/b]

HTML:

Code:

<b>Nous aimons les codes!</b>

On dirait bien qu'il n'y a pas une grande différence... et ici vous avez raison. Seulement l'HTML permet une infinité de possibilités que je n'ai pas fini d'explorer. Nous allons ensemble les découvrir si vous le voulez bien. Sachez avant toute chose que les codes BBCode et HTML ne s'aiment pas beaucoup et qu'il faudrait le mélanger le moins possible. Souvent le BBCode fait buguer le code HTML et c'est la belle kata. À utiliser avec prudence donc!

Pour avoir accès au code HTML, il faut le rendre disponible dans son profil. Vous le trouverez dans votre profil et vous n'aurez qu'à cocher «Toujours autoriser le HTML» dans la rubrique «Préférences». Si vous ne voyez toujours pas les codes, pas de panique! Cliquez sur «Répondre» puis «Options» qui se trouve sous le champ où on peut écrire. C'est probablement que «Désactiver l'HTML» est coché. Aussi, faites basculer le mode d'édition (en haut à droite du champ d'écriture, dans la deuxième rangée) pour voir les codes et non le résultat, parce que ce dernier mode est un tueur sans scrupule de vos codes. Maintenant que c'est fait, passons aux choses sérieuses!

CHAPITRE 1 - Le div et le span
Le code HTML utilise plusieurs sortes de balises pour fonctionner et nous vendre du rêve, mais les plus courantes sont le div et le span. Ces balises nous ouvrent la porte à toutes sortes de possibilités. Pour ajouter de la couleur, faire des formes, etc. il faut donner des ordres à notre code, et pour cela, il faut apprendre sa langue! Je vous présente donc vos deux plus grands alliés à l'avenir:

• Div : Le div, quel merveilleux ami. Div entoure le code, il est en quelque sorte le code du paragraphe. Il permet de faire un cadre autour de vos messages, d'organiser et de structurer vos messages. On le rencontre comme suit :

Code:

<div>Hello les amis</div>

Vous verrez si vous essayez ce code et que vous utilisez la fonction «prévisualiser» que vous ne verrez que «Hello les amis» comme si vous n'aviez inscrit aucun code. C'est normal! Vous n'avez donné aucun ordre à votre code et il est pour le moment (on pourrait dire ainsi) nu comme un ver! Nous verrons plus tard comment lui offrir des propriétés qui vont changer l'allure de vos posts.

• Span : Le span est quant à lui la balise qui plie votre écriture à votre volonté. Grâce à span, vous pourrez changer la police, mettre en gras, changer la grosseur de votre texte, etc. Sky's the limit! Voici à quoi il ressemble :

Code:

<span>C'est bon les avocats</span>

Ici, c'est la même chose! Votre code est encore nu, il ne sait pas encore ce qu'il doit faire.

Remarquez que les balises sont conjointes et viennent entourer les paroles. De la même façon, les codes se superposent.

Code:

<div><span>Bonjour les amis!</span></div>

Le div entoure notre span la grande majorité du temps car il est le code qui va organiser votre texte, former le paragraphe. Il existe bien sûr des exceptions, mais cela ne nous concerne pas pour le moment!

NOTION A - MON ALLIÉ, LE SPAN
La première notion que nous allons apprendre dans ce tutoriel est comment manier le span. Nous avons vu de quoi il s'agissait et de quoi il a l'air, et maintenant nous allons apprendre comment lui donner des ordres!

Code:

<span style="color: blue;">Ceci est la couleur bleue</span>

Ceci qui donne :
Ceci est la couleur bleue
Magique n'est-ce pas? J'ai changé la couleur de mon code pour le faire devenir bleu. Remarquez ici quelques éléments. Le span n'est plus seul dans sa balise! Pour le plier à notre volonté, il s'appelle maintenant «span style». Ce mot «style» nous indique que nous allons faire des changements à notre code et tout ce qui se trouve entre «"» est l'énumération de ces changements. Ici, nous lui avons dit : code, la couleur est bleue. Lorsque nous demandons au code de faire un changement pour nous, nous devons lui dire deux choses : la catégorie de changement (dans notre code ci-dessus c'est le mot «color») ainsi que la nature du changement (dans notre code ci-dessus c'est le mot «blue» qui signifie «bleu» en anglais). Les deux sont toujours séparés par un «:» et suivis d'un «;» c'est très important! Sans ces éléments, vous ne pourrez pas faire fonctionner votre code! Vous aurez peut-être remarqué aussi que contrairement à la première balise, la deuxième n'a pas changé. Il est toujours notre bon vieux span avec sa «/». Sachez que la deuxième balise ne change jamais. Il ne faut pas y toucher, mais encore moins l'oublier. N'oubliez pas la règle numéro un! Toujours fermer ses balises.
Changer la couleur est donc relativement simple comme vous pouvez le voir. Il suffit d'inscrire ce code et d'écrire la couleur. Vous pouvez aussi utiliser un générateur de couleur qui vous permet d'aller chercher une couleur très précise. Je vous file le lien comme je vous aime bien allons ;) : http://www.code-couleur.com/. Pour utiliser ces couleurs, vous pourrez changer le nom «blue» par «#4057A4» par exemple! Amusez-vous à essayer des couleurs, en utilisant toujours l'option «prévisualiser» pour voir de quoi ça a l'air. Je vous conseille d'ailleurs d'utiliser cette option à outrance pour voir physiquement ce que vous faites en code!

Voici une liste de propriétés que vous pourrez utiliser pour modifier vos span. Elle est très loin d'être exhaustive, nous verrons tout d'abord la base!

• Taille de la police : Catégorie de changement= font-size
Exemples de nature de changement =  5px , 10px , 15px
Tout ce qui concerne la taille de quelque chose dans un code se mesure en pixels. Attention, vos chiffres doivent être collés à «px»! Si vous voulez tester, vous pouvez utiliser Word, le résultat est le même. La grandeur de police 12 = 12 pixels!

• Police du texte : Catégorie de changement = font-family
Exemples de nature de changement = times new roman , courrier new , arial ... etc. etc.

• Alignement du texte : Catégorie de changement : text-align
Exemples de nature de changement = justify, left, right

• Largeur du texte : Catégorie de changement : width
Exemples de nature du changement : 100px, 300px ou encore 80% , 50% (les pourcentages sont le pourcentage de la largeur de votre page ou de votre div! Parfois plus simple à utiliser)

• Longueur du texte : Catégorie de changement : height
Exemples de nature du changement : 100px, 300px ou encore 80% , 50% (les pourcentages sont le pourcentage de la largeur de votre page ou de votre div! Parfois plus simple à utiliser)

• Espaces entre les lettres : Catégorie de changement : letter-spacing
Exemples de nature du changement : 1px , 2px , 5px

• Bordure : Catégorie de changement : border (border-left, border-right, border-top, border-bottom pour ceux qui veulent une bordure juste sur un côté par exemple.
Exemple de nature du changement : 1px solid black , 2px dotted #4057A4
Le code de bordure demande une nature plus complexe. On doit dire au code à la fois la longueur de notre bordure (de haut en bas donc pour que ce soit clair pour une bordure horizontale), si elle est pleine ou en pointillés, et de quelle couleur elle est!

• Style de la police : Catégorie de changement : font-style
Exemples de nature du changement : italic, bold

Voici seulement quelques exemples de changements que nous pouvons faire à notre span! Voici maintenant à quoi cela ressemble dans un vrai code :

Code:

<span style="color: #4057A4; border-bottom: 2px dotted #4057A4; font-family: courrier new; font-style: italic;">Ceci est la couleur bleue</span>

Ce qui donne ceci:
Ceci est la couleur bleue

Vous avez vu? On énumère les priorités que nous voulons donner à notre code et pouf, par magie, elles s'opèrent!

EXERCICES
Bah quoi, vous pensiez que tout ceci serait facile? Non non, il est temps de bosser! Je vais vous demander de construire un code par vous-même selon ce que nous venons d'apprendre avec le span!
1- Le premier exercice sera de me faire un texte de la couleur de votre choix (mais il doit y en avoir une!), de taille 14, avec un espacement entre les lettres de 8 pixels et une bordure solide de 3px sur un seul côté de votre choix!
2- Pour le deuxième exercice, faites-vous plaisir, éclatez-vous avec votre span!

/!\ Les codes qui sont ici sont les miens, tout comme ce tutoriel. À ne pas reproduire s'il vous plaît ou poster sur d'autres forums sans ma permission écrite!

N'hésitez pas à poser des questions ou à émettre des commentaires pour améliorer ce tutoriel! Bien sûr il s'agit de la première étape, nous verrons des trucs plus avancés le moment venu ;)