AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | .
 

 Tuto codage - BBcode & html

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Cute little bastard Messages : 297
Date d'inscription : 30/04/2013

Carte d'identité
Âge: 26 ans
Pokémon:
ADN&Attaques:
avatar
Clive Marshall
MessageSujet: Tuto codage - BBcode & html   Mar 30 Juil - 18:33


Tutoriel de codage
BBcode & html <3


Je pense que ça peut être utile à pas mal de monde de connaitre quelques bases de codage BBcode & html. En gros, ça sert à quoi ? Eh bien ça sert à embellir vos posts en y ajoutant des effets de textes, des cadres, des fonds, des encadrements, des tableaux, ect...
Ça peut servir pour présenter un RP dans le cadre d'un forum RP, ça peut servir à présenter quelque chose dans le cadre d'un forum de discussion. Bref, ça sert toujours, et on est bien content de savoir s'en servir un minimum pour pouvoir faire de la belle mise en page.
Les codes dont je vais vous parler sont plutôt basiques, mais n'hésitez pas à les combiner entre eux pour obtenir des choses plus travaillées et abouties. Bien entendu, vérifiez que le html et le BBcode sont activés lorsque vous postez votre message, sinon, ça va vous bousiller votre mise en page.

À savoir : sur une page html pure (création de page internet à partir de rien, ou presque), vous ne pouvez pas utiliser de BBcode. Ce code là ne sera pas lu, ni interprété par votre navigateur. En revanche, sur un forum, lorsque vous postez un message, vous pouvez combiner les deux formes d'écriture sans problèmes.
Sachez aussi que sur une page uniquement html, les sauts à la ligne ne servent à rien car ils ne seront pas pris en compte par votre navigateur (vous pouvez sauter 30 lignes que ça ne changerait rien du tout)

Bon, tout ceci étant dit, passons aux codes ~


Je ne vais pas vous parler des effets BBcode que l'on peut obtenir en cliquant sur les boutons de votre éditeur de message, vous êtes assez grands pour voir ce que ça fait, et quel genre de balise ça vous inscrit dans votre éditeur de texte ~
En revanche, je peux vous dire qu'il est plus agréable de lire un pavé écrit en "justifié", donc n'hésitez pas à utiliser ce joli bouton.

En ce qui concerne les couleurs, vous pouvez utiliser soit le nom de la couleur (vous trouvez facilement des listes de couleurs BBcode sur le net) soit utiliser un code héxadécimal (vous trouvez aussi des listes ou des "générateurs" de code sur le net). Globalement, votre code doit ressembler à ça (version BBcode) :

Code:
[color=black]VOTRE TEXTE[/color]
[color=#ffffff]VOTRE TEXTE[/color]

Ou à ça (version html)

Code:
<span style="color:black">VOTRE TEXTE</span>
<div style="color:#ffffff">VOTRE TEXTE</div>

Super, vous savez mettre de la couleur à votre texte ! Mais vous voulez aussi en background ? Pour cela on va appliquer une balise html comme suit :

Code:
<span style="background-color:#fffff">VOTRE TEXTE</span>

Ce qui donnera ceci : VOTRE TEXTE
Il suffit de changer le code héxadécimal pour avoir la couleur de background désiré. Vous pouvez aussi mettre une image en fond. Pour ceci, au lieu du "background-color", vous allez utiliser la balise "background-image:url('url de votre image')"

Code:
<span style="background-image:url('url de votre image')">VOTRE TEXTE</span>

Ce qui donnera donc : VOTRE TEXTE (Je suis d'accord, on ne voit pas mon image, mais y'en a une x'3)

Nan, c'est pas un background coloré que je veux, finalement, c'est un encadrement .3.
Qu'à cela ne tienne, il vous suffit d'employer la balise "border", et voilà comment faire :

Code:
<span style="border:1px solid; padding:3px;">VOTRE TEXTE</span>

et ça donnera : VOTRE TEXTE On est d'accord, c'est pas super esthétique, comme ça. Que je vous explique comment fonctionne la balise pour que vous puissiez la personnaliser : le 1px est l'épaisseur en pixel de votre ligne, il vous suffit de changer le chiffre devant. Le solid veut dire que votre ligne sera continue, vous pouvez le remplacer par dotted ou dashed (vous n'avez qu'à essayer pour voir ce que ça donne. Si vous voulez changer la couleur de votre encadrement, il vous suffit de rajouter une couleur héxadécimal à cet endroit : 'border:1px #ffffff solid'.

Ok, maintenant, vous ne voulez pas un cadre qui fasse le tour complet (vous êtes embêtants, hein ?), mais juste le dessus, le côté, le bas, ou l'autre côté. On reprend notre balise border, mais on va lui attribuer un copain : left (gauche), right (droite), bottom (bas) ou top (haut), de cette manière :

Code:
<span style="border-top: 2px solid">VOTRE TEXTE</span>

Ce qui donnera : VOTRE TEXTE. Vous pouvez les combiner, bien sur, comme sur cet exemple :

Code:
<span style="border-top: 2px solid; border-left: 2px solid">VOTRE TEXTE</span>

VOTRE TEXTE. Comme vous pouvez le voir, dans ma span, entre les "...", j'ai séparé mes deux balises 'border' par un point virgule (Wink Il est important de se souvenir qu'en html, chaque nouvelle balise doit être absolument séparée de la précédente avec un ; sans quoi, le code ne sera pas pris en compte :'3

Je vais terminer avec un dernier code qui peut être sympa : un fond qui encadre une zone complète de texte, avec largeur et hauteur personnalisable (un peu comme dans le bloc dans lequel mon message est écrit :'3)
Il faut commencer par ouvrir une div, puis d'y inscrire les paramètre que l'on souhaite lui appliquer : height (hauteur en pixel), width (largeur en pixel), background( color ou image), border (si vous voulez lui appliquer des bordures), ect...
Voilà un exemple (c'est moche, mais c'est pour donner une idée ~ ):



Je suis un superbe bloc de texte qui ne sert strictement à rien ~
Blablabla :3


Code:
<div style="width: 270px; height: 150px; background-image: url(http://i34.servimg.com/u/f34/11/34/38/41/textur11.png); border-right: 3px solid #332326; border-left: 3px solid #332326; padding: 5px;color:#ffffff">
[justify][font=Georgia]
Je suis un superbe bloc de texte qui ne sert strictement à rien ~
Blablabla :3[/font][/justify]
</div>

Alors, si on analyse ce que j'ai fait : '


Ce tuto est terminé, voilà donc pour les bases utiles ou pas du BBcode & html. Si vous avez un soucis, ou si vous voulez savoir comment obtenir tel ou tel effet, n'hésitez pas à me demander sur ce topic. Vous pouvez aussi me montrer vos codes pour voir ce qui ne va pas dedans.

Bref, voilà, en éspérant que ça aura quand même été utile à certains :3


Tutorial by Clive Marshall
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pkmn-resumption.forumactif.org
 

Tuto codage - BBcode & html

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Codage pour présenter un rp
» tuto haradrim, opération désert
» [TUTO] Faire des socles
» [TUTO] Cratères
» [TUTO] Amazones ( et oui ! Vous avez bien lu ! )

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Pokemon Resumption :: Annexes :: ► • • C r e a t i v e :: Graphisme & codage-