PortailAccueilRechercherS'enregistrerConnexion
Partagez
Aller à la page : 1, 2  Suivant
 

 BBCode, HTLM & autres trucs pour faire une jolie fiche

Voir le sujet précédent Voir le sujet suivant Aller en bas 

 
Nywth
   
    Féminin
   Nombre de messages  :  3865
   Âge  :  27
   Date d'inscription  :  12/07/2011
    
                         
Nywth  /  Ex-Ombre passée du côté encore plus obscur.


Vous souhaitez réaliser une fiche originale, mais vous ne savez pas comment faire ? Ne vous inquiétez pas, on s’occupe de vous.
----------------------------------------------------------------------------------------------------------
Introduction basique

Utiliser le BBC Code (ou le HTLM), c’est très simple. Le BBC code sert à mettre en valeur certaines parties de votre texte en valeur (par exemple en modifiant la couleur ou en le mettant en italique). Pour l’utiliser, il faut juste retenir une chose : les balises doivent être fermées fonctionner correctement. L’endroit où vous les fermez va délimiter la section de votre texte qui sera affecté par les balises. Si vous utilisez deux balises sur un même texte, vous devez fermer la deuxième avant la première.

Code:
Imaginons que vous souhaitiez mettre votre texte en gras et en italique.
La balise pour le gras est la suivante : [b][/b]
La balise pour l’italique est la suivante : [i][/i]
Les balises doivent être fermées et placées dans le bon ordre.
Ce qui donne donc, de manière correcte : [b][i]Exemple[/i][/b]
Citation :
Exemple

Note : Certaines des balises montrées dans ce tutoriel sont également disponibles lorsque vous écrivez un message, sous la forme d’icône (au dessus de la zone de saisie de texte). Pour les utiliser, il suffit d’encadrer le texte et de cliquer sur l’icône.

Note bis :
Comme Nyjée est pas très douée, elle a mis certains code en HTLM, et d'autres en BBC Code. Ne vous inquiétez pas, les deux se différencient très facilement : Les codes HTLM sont entre <>, les BBC codes entre []. Faire sa fiche en BBC code ou en HTLM ne change fondamentalement rien, mais le HTLM est utilisable à peu près partout.
Il faut jusqte que vous vérifiez que vous avez activé l'option : '' Toujours autoriser le HTLM'' Dans mon profil > préférences.

Mise en forme du texte


Mettre en gras :
Code:
[b]Texte[/b]
Citation :
Texte

Mettre en italique :
Code:
[i]Texte[/i]
Citation :
Texte

Souligner :
Code:
[u]Texte[/u]
Citation :
Texte

Rayer :
Code:
[strike]Texte[/strike]
Citation :
Texte

Changer la taille de l'écriture
Code:
[size=18]Texte[/size]
A la place du 18, vous pouvez mettre n'importe quel nombre compris entre 1 et 30. Sachant que plus le nombre est petit, plus la taille est petite.
Citation :
Texte

Changer la couleur :

La première méthode consiste à utiliser une couleur prédéfinie par le forum : darkred ; red ; orange ; brown ; yellow ; green ; olive ; cyan ; blue ; darkblue ; indigo ; violet ; white ; black. Il faut alors utiliser le code suivant, en choisissant l'une des couleurs de la liste :
Code:
[color=green]Texte[/color]
Citation :
Texte
La deuxième méthode utilise le même code, mais, au lieu d'ajouter le nom de la couleur, il faut ajouter son code hexadécimal (code qui permet de définir la couleur - vous trouverez une liste des codes ici)
Code:
[color=#FF0000]Texte[/color]
Citation :
Texte

Changer la police :
Pour changer la police, il faut utiliser le code suivant, et y ajouter l'une des polices prédéfinies sur le forum : Arial ; Arial Black ; Comic sans MS ; Courrier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana
Code:
[font=Georgia]Texte[/font]
Citation :
Texte
L'autre solution consiste à écrire votre texte avec une autre police sur Word, ou un générateur de styles (plus fiable), et à le coller. Si vous avez de la chance, votre mise en forme reste. Si vous avez de la chance.
Citation :
тєχтє


Centrer le texte :
Code:

[center]Texte[/center]
Citation :

Texte

Aligner à gauche le texte :
Code:
[left]Texte[/left]
Citation :
Texte

Aligner à droite le texte :
Code:
[right]Texte[/right]
Citation :
Texte

Justifier le texte :
Code:
[justify]Texte[/justify]
Citation :
Texte


Insérer des éléments extérieurs


Insérer une image :
Code:
[img]le-code-de-votre-image[/img]

Insérer un lien :
Code:
[url]Adresse URL de votre lien[/url]
OU [url=Adresse URL de votre lien]Titre de votre lien[/url]

Insérer une image cliquable:
Code:
[url=votre-url][img]le-code-de-votre-image[/img][/url]


Insérer un tableau

Pour insérer un tableau et pouvoir le personnifier au maximun, il faut utiliser le code :

Code:
<TABLE>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :
Case n°1Case n°2
Case n°3Case n°4
(Si vous ne voyez pas les traits du tableau, c'est normal, pour le moment, ne vous inquiétez pas)
Ceci est le code de base. Il fonctionne d'une manière très simple : TABLE et TBODY sont les balises qui délimitent votre tableau, TR marque une nouvelle ligne de votre tableau et TD une nouvelle case sur cette ligne. Les balises sont fermées après chaque case. Vous pouvez ainsi multiplier les lignes et les colonnes à votre guise.

Ensuite, vous pouvez rajouter des éléments pour embellir votre tableau.

Mettre un fond

Pour mettre un fond à votre tableau, nous allons agir sur la partie du code TABLE.
Pour l'exemple, je choisis de mettre cette image en fond, ou un fond blanc (code ''FFFFFF'')

Pour rajouter un fond avec une couleur unie,
Il faut rajouter le code bgcolor="FFFFFF" à la balise table
Ici, avec la couleur choisie, ça donne :
Code:
 <table bgcolor="FFFFFF">
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :

Case n°1Case n°2
Case n°3Case n°4
La couleur est modifiable à l'infini ; il suffit de rentrer un code hexadécimal différent pour la changer, à la place de FFFFFF. Liste des codes hexadécimaux ici.

Pour rajouter un fond avec une image
Il faut rajouter le code background="http://wolpeper.com/ciel-ete-vendee.JPG" à la balise table
Ici, avec l'image choisie, ça donne :
Code:
<table background="http://wolpeper.com/ciel-ete-vendee.JPG">
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :
Case n°1Case n°2
Case n°3Case n°4
L'image est modifiable à l'infini ; pour la changer, il suffit de rentrer l'adresse URL d'une autre image.

Note : Il est ainsi possible de modifier la couleur d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Code à l'intérieur du tableau :
Code:

<TR><TD bgcolor="FFFFFF">Case n°1</TD><TD>Case n°2</TD></TR>

Définir une bordure

Pour définir une bordure, il faut rajouter un code dans l'entête ''TABLE''.
Vous pouvez utiliser trois codes : cellspacing définit l'espace entre les différentes bordures du tableau;
border définit la largeur de la bordure ;
bordercolor définit la couleur de cette bordure.
Code:
<TABLE cellspacing=5 ; border=2 ; bordercolor=E6FE30>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :
Case n°1Case n°2
Case n°3Case n°4
(La bordure extérieure en relief est normale)

Régler la largeur et la hauteur du tableau

Pour régler la hauteur et la largeur du tableau, il faut utiliser les codes Width et Height. Leur valeur peut se régler de deux manières différentes : en % (% par rapport à la page), ou en pixel, sachant que la largeur du forum est légèrement inférieure à 700 pixel.
Il sont ajoutés au code TABLE.
Code:
<TABLE width=600px ; height=200px>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :
Case n°1Case n°2
Case n°3Case n°4
Note : Il est ainsi possible de modifier la taille d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Code à l'intérieur du tableau :
Code:

<TR><TD width=100px ; height=100px>Case n°1</TD><TD>Case n°2</TD></TR>

Choisir l'alignement à l'intérieur du tableau

Pour régler l'alignement à l'intérieur du tableau, il faut ajouter dans la partie TABLE plusieurs codes :
Valign=top(centré en haut), middle(centré au milieu) ou bottom (centré en bas) définit l'alignement vertical à l'intérieur des cellules.
Align=left(gauche) ou right(droite) ou center(centrer) ou justify(justify) pour régler l'alignement horizontal du texte. En revanche, il faut l'ajouter dans les cellules TR ou TD ; l'ajouter dans la partie TABLE reviendrait à définir son alignement face à la page.

Code:
<TABLE valign=middle ; border=1>
<TBODY>
<TR><TD align=center>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :


     Case n°1      

Case n°2
Case n°3Case n°4
Note : Il est ainsi possible de modifier l'alignement d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Code à l'intérieur du tableau :
Code:

<TR><TD valign=middle>Case n°1</TD><TD>Case n°2</TD></TR>

Donner un titre à son tableau

Pour donner un titre à son tableau, il faut insérer une balise CAPTION entre la balise TABLE et la balise TBODY.
Code:
<TABLE border=1>
<CAPTION>Légende</CAPTION>
<TBODY>
<TR><TD>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD><TD>Case n°4</TD></TR>
</TBODY></TABLE>

Citation :
Légende
Case n°1Case n°2
Case n°3Case n°4

Fusionner des cellules

Deux codes, Rowspan et colspan, insérés dans la balise TD concernée, permettent respectivement que la cellule s'étende sur plusieurs lignes ou colonne (le numéro correspond au nombre de cellule sur lesquelles doit s'établir la cellule courante, 1 étant le numéro de la cellule elle-même)
Code:
<TABLE border=1>
<TBODY>
<TR><TD rowspan=2>Case n°1</TD><TD>Case n°2</TD></TR>
<TR><TD>Case n°3</TD></TR>
</TBODY></TABLE>

Citation :
Case n°1Case n°2
Case n°3

Divers

Pour finir, les codes de mise en page de texte sont applicables à l'écriture du tableau ; chaque fois que vous additionnez plusieurs balises dans une seule balise (TABLE, ou autre), elles doivent être séparées par des ;

Code:
<TABLE border=2 ; bordercolor=FFFFFF>


Dernière édition par Nyjée le Ven 8 Juin 2012 - 21:47, édité 10 fois
 
Nywth
   
    Féminin
   Nombre de messages  :  3865
   Âge  :  27
   Date d'inscription  :  12/07/2011
    
                         
Nywth  /  Ex-Ombre passée du côté encore plus obscur.


MISE A JOUR DU 30/05/12 :

J'ai rajouté les premières balises simples et le fonctionnement d'un tableau (à savoir comment mettre un fond). D'autres codes sont prévus pour bientôt Wink Si vous souhaitez que je poste un code en priorité, faites-le moi savoir, je vous ferais ça le plus vite possible.
 
Nywth
   
    Féminin
   Nombre de messages  :  3865
   Âge  :  27
   Date d'inscription  :  12/07/2011
    
                         
Nywth  /  Ex-Ombre passée du côté encore plus obscur.


MISE A JOUR DU 08/06/12 :

J'ai rajouté toutes les balises complémentaires pour un tableau de ma connaissance (et il ne doit pas en exister beaucoup d'autres...). Pour la prochaine mise à jour, il me reste à dire comment créer des listes, un défilement vertical, un fond et quelques effets de texte.
Si vous avez des codes qu'il me manque > MP Smile
 
Padi
   
    Masculin
   Nombre de messages  :  90
   Âge  :  124
   Localisation  :  Lausanne
   Pensée du jour  :  "Rembrandt a peint 700 toiles... dont 3000 sont encore en circulation.” Wilhelm Bode
   Date d'inscription  :  25/05/2014
    
                         
Padi  /  Pippin le Bref


très intéressant, mais je n'ai pas vu comment ajouter une marge à gauche et à droite. Comment faire pour cela? Merci d'avance.
http://patrickdim.canalblog.com/
 
avatar
   
    
                         
Invité  /  Invité


en utilisant ces balises  :

Code:
<blockquote>texte</blockquote>
 
Padi
   
    Masculin
   Nombre de messages  :  90
   Âge  :  124
   Localisation  :  Lausanne
   Pensée du jour  :  "Rembrandt a peint 700 toiles... dont 3000 sont encore en circulation.” Wilhelm Bode
   Date d'inscription  :  25/05/2014
    
                         
Padi  /  Pippin le Bref


Merci super ça marche même avec un spoiler.
Pour choisir la largeur de sa marge, on ajoute une valeur quelque part à
Code:
<blockquote>texte</blockquote>

 ?
http://patrickdim.canalblog.com/
 
avatar
   
    
                         
Invité  /  Invité






Non, tu peux rajouter autant de balises que tu veux pour faire varier la largeur. Comme ça :

Code:
<blockquote><blockquote>texte</blockquote></blockquote>


Je vais faire une recherche, je crois qu'il y a une autre manière de faire une marge.
 
avatar
   
    
                         
Invité  /  Invité



HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair HTLM & autres trucs pour fair




test            test                       juujj
           jj



 
Tit'Plume
   
    Féminin
   Nombre de messages  :  88
   Âge  :  24
   Localisation  :  Senlis, Picardie
   Pensée du jour  :  Des étoiles nous venons, aux étoiles nous retournons. La vie n'est qu'un périple dans l'inconnu.
   Date d'inscription  :  30/09/2014
    
                         
Tit'Plume  /  Pippin le Bref


J'ai pas bien compris comment on met de la couleur en fond de texte.


Dernière édition par Tit'Plume le Sam 18 Oct 2014 - 16:01, édité 1 fois
 
avatar
   
    
                         
Invité  /  Invité



Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc Entraide :: Fiches Techniques :: BBC Code, HTLM & autres truc


Avec ce code :
Code:
<div style="background-color :#d3f0c7">ton texte</div>

Pour les codes couleurs tu peux les trouver là par exemple : http://html-color-codes.info/Codes-couleur-HTML/
 
Padi
   
    Masculin
   Nombre de messages  :  90
   Âge  :  124
   Localisation  :  Lausanne
   Pensée du jour  :  "Rembrandt a peint 700 toiles... dont 3000 sont encore en circulation.” Wilhelm Bode
   Date d'inscription  :  25/05/2014
    
                         
Padi  /  Pippin le Bref


merci pour tes < blockquote > et ta recherche.
http://patrickdim.canalblog.com/
 
Elena.K
   
    Féminin
   Nombre de messages  :  254
   Âge  :  35
   Localisation  :  somewhere on the rainbow...
   Pensée du jour  :  Je me suis perdue et je me suis trouvée. Ici, ma seconde vie a commencé.
   Date d'inscription  :  16/08/2016
    
                         
Elena.K  /  Autostoppeur galactique


bonjour,

est-ce qu'il y a des balises pour les espaces entre les différents paragraphes dans un texte ou bien il faut faire manuellement ? J'ai beaucoup de petits paragraphes dans ma nouvelle pour faciliter la lecture.
C'est pour le concours de nouvelle, j'essaye de ménager Coline :mrgreen:

 
grenouille
   
    Féminin
   Nombre de messages  :  829
   Âge  :  61
   Localisation  :  Essonne et Creuse
   Date d'inscription  :  22/07/2017
    
                         
grenouille  /  Double assassiné dans la rue Morgue


Smile

Bonjour Elena.K

J'en ai tellement bavé avec les balises (encore merci Coline, pour tes conseils !), que les espaces entre paragraphes, je les ai fais manuellement... Le rendu est parfait !...

(en même temps, sur une nouvelle de maxi 3500 mots, ça doit pouvoir se faire, non ?)

A bientôt !

:bummies:
http://mjlf.eklablog.com/accueil-c30241512
 
Elena.K
   
    Féminin
   Nombre de messages  :  254
   Âge  :  35
   Localisation  :  somewhere on the rainbow...
   Pensée du jour  :  Je me suis perdue et je me suis trouvée. Ici, ma seconde vie a commencé.
   Date d'inscription  :  16/08/2016
    
                         
Elena.K  /  Autostoppeur galactique


merci de ta réponse ^^ Oui les espaces je les ai fait sur mon fichier pas de soucis. mais pour le concours de nouvelles, ce n'est pas moi qui vais la mettre sur le forum, c'est Coline, donc je cherchais un moyen de lui éviter des manips.
 
avatar
   
    
                         
Invité  /  Invité


Normalement, les sauts de lignes sont conservés sans balises, Elena, si c'est ça qui te soucie.
 

 BBCode, HTLM & autres trucs pour faire une jolie fiche

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum des Jeunes Écrivains :: Ressources :: Écritoire :: Fiches Techniques-