AccueilAccueil  PortailPortail  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  
Passez une annonce ici en nous contactant. [Kai McCutcheon, Aiken Barker]

Partagez | 
 

 Un peu de mise en page.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Personnage Inactif

Nombre de messages : 74
Double compte : Tintergreydon

Personnage
Âge: 21 ans
Clan: Créature
Région: Nomade

MessageSujet: Un peu de mise en page.   Jeu 26 Mai - 15:30

Comme maman Steam se fait un peu chier, elle a décidé de partager un peu ses connaissances du BBCode, HTML et CSS pour votre plus grand plaisir. Elle aurait bien balancé du javaScript avec, mais il semble que forumactif ait désactivé cette option.

C'est kwa le BBCode?
Le BBCode c'est ces balises bizarres avec des mots encapsulés dans des [][/] qui permettent d'égayer un peu vos messages en passant le texte en gras, en italique, en couleur, d'afficher des images, des URL... il faut savoir que ces balises ne sont qu'une traduction de l'HTML et que, par conséquent, on peut faire la même chose avec des balises HTML (qui elles entourent les mots de <>). Vous pouvez même faire plus de choses avec l'HTML mais attention, il faut décocher l'option "désactiver le HTML" dans votre profil/message pour que le code soit interprété correctement.

Les balises basiques en BBCode
Pour mettre du texte en gras:
Code:
[b][/b]
Pour mettre du texte en italique:
Code:
[i][/i]
Pour souligner du texte:
Code:
[u][/u]
Pour barrer du texte:
Code:
[strike][/strike]
Il existe d'autres balises notamment pour afficher du texte défilant :
Code:
[scroll][/scroll] et [updown][/updown]
Mais vous pouvez découvrir tout cela en testant les boutons étranges situés au-dessus de la division de texte, celle où vous saisissez vos messages.

Alignement du texte
On peut faire à peu près tout et n'importe quoi avec du texte, le centrer, le justifier, ajouter une/plusieurs marge(s)...

En BBCode, on utilisera les balises suivantes pour changer l'alignement du texte :
Code:
[center]Mon texte est centré[/center]
[left]Mon texte est aligné à gauche[/left]
[right]Mon texte est aligné à droite[/right]
[justify]Mon texte est justifié[/justify]
La balise préférée de maman Steam étant bien sûr la balise justifiée, qui aligne tout comme dans un beau bouquin avec des vraies pages.

L'équivalent HTML maintenant:
Code:
<div style="text-align:center">Mon texte est centré</div>
<div style="text-align:left">Mon texte est aligné à gauche</div>
<div style="text-align:right">Mon texte est aligné à droite</div>
<div style="text-align:justify">Mon texte est justifié</div>
Pour aligner tout votre message, vous devrez enfermer le texte complet dans l'une des balises précédentes.

Ajout de marges
Si vous voulez ajouter une marge à votre message, il existe plusieurs techniques plus ou moins esthétiques. Par exemple, on peut tricher (bouh !) en utilisant une balise BBCode, la balise de listage. Cette balise est normalement faite pour faire une liste à puce, où chaque élément est décalé sur la droite, ce qui nous donne donc un alinéa sur tout le texte, comme ci-dessous:
    Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.

L'équivalent en BBCode est (sans la couleur):
Code:
[list] Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.[/ list]
Note: Si vous choisissez cette méthode mais que vous cliquez sur le bouton "list" en haut, il vous ajoutera une puce symbolisée par la balise [*]. Vous pouvez l'enlever si vous ne voulez pas afficher le gros point noir.

Maman Steam préfère lorsqu'il y a une marge des deux côtés du texte, alors elle utilise une méthode barbare avec les tableaux, ou les divisions, la seconde option étant plus simple je vous épargnerai le bidouillage. Donc, pour avoir ça en HTML:

Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.


On utilise le code suivant:

Code:
<div style="margin-left:30px; margin-right:30px;"> Trem World est un monde se situant bien loin dans notre système solaire. La magie et ce que nous considérons comme des légendes font partie de l’ordre des choses sur ces terres que se partages humains, elfes et créatures. Les premiers se divisent en plusieurs clans peut souder entre eux : Si la guerre opposant les Ensorceleurs de Demensia au Mages d’Obscaraes vient de cesser, les deux plus grand clans de Trem continues de se détester et il arrive même trop peut rarement que cette haine fasse encore des victimes. Pendant ce temps, les elfes occupent le titre de Gardiens en redoutables guerriers capables de maîtriser une magie restreinte de type élémentaires. Quand au créatures, dragons, sirènes, fées et autre harpies, ils décident de se préoccuper ou non des humains et des elfes.</div>
Vous remarquerez le mot-clef "margin" qui indique le décalage de toute la division, "left" et "right" qui indiquent de quel côté décaler le texte et les chiffres qui représentent la valeur du décalage. Ici on décale le texte des deux côtés de 30 pixels. Vous pouvez modifier cette valeur pour diminuer/augmenter la marge ou utiliser des pourcentages. Vous pouvez aussi ajouter une marge en haut et en bas du message en ajoutant un "margin-top" et un "margin-bottom", dans ce cas n'oubliez pas les ";" qui séparent chacune de ces indications. Si vous assignez deux fois une valeur à un même mot-clef, seule la dernière valeur sera prise en compte.


Dernière édition par Steam Girl le Jeu 26 Mai - 15:32, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://drakhaan.deviantart.com/
avatar
Personnage Inactif

Nombre de messages : 74
Double compte : Tintergreydon

Personnage
Âge: 21 ans
Clan: Créature
Région: Nomade

MessageSujet: Re: Un peu de mise en page.   Jeu 26 Mai - 15:30

Les fioritures qui servent à rien
L'avantage du CSS, c'est que vous pouvez faire à peu près tout et n'importe quoi, et à peu près n'importe comment. Je vais lister ci-dessous les balises qui peuvent vous être utiles pour donner de la gueule à vos messages, en montrant, comme auparavant, l'équivalent en BBCode et en CSS (s'il existe).

Vous pouvez changer la police du texte. Évidement, cela implique que vous connaissiez le nom de la police et que l'utilisateur l'ait installée sur sa machine. Quand vous cliquez sur le bouton [A] (au-dessus de la zone de saisie des messages) Forumactif vous propose les polices de base, qui sont normalement affichables par tous les forumeurs.

On utilisera les balises:
Code:
[font=NOM_DE_LA_POLICE]Mon texte en Comic Sans Ms[/font]
<span style="font-family:'NOM_DE_LA_POLICE'">Mon texte en Comic Sans Ms</span>
De la même manière, vous pouvez changer la taille du texte. Cette taille peut prendre différentes valeurs, généralement on utilise une taille en pixels, sinon en pourcentage.

Code:
[size=18]Mon texte en grand[/size]
<span style="font-size:18px">Mon texte en grand</span>
C'est tout ce qui me vient à l'esprit pour le BBCode. Mais le CSS offre bien d'autres possibilités...

Mon texte en majuscules: on utilisera "font-variant" avec le mot-clef "small-caps". Il y a d'autres manières de procéder, avec des rendus différents, mais c'est ma préférée. Ce qui nous donne en code:
Code:
<span style="font-variant:small-caps">Mon texte en majuscules</span>

Mon texte encadré: vous pouvez encadrer le texte, ce qui peut être utile pour un titre. Pour cela on utilise "border" en précisant la taille de la bordure (ici 1px, vous pouvez aussi utiliser un mot-clef: thin par exemple) et son type (solid pour un trait, dotted pour des points et dashed pour des pointillés). Vous pouvez aussi ajouter une couleur (en hexa, rvb ou avec un mot-clef comme pour la couleur du texte). Dans l'exemple j'ai utilisé le code suivant (notez l'utilisation d'un padding qui décale le texte pour que la bordure ne soit pas collée aux lettres) :
Code:
<span style="border:1px solid; padding:3px;">Mon texte encadré</span>

Mon texte souligné en pointillé: en fait, j'utilise juste un "border" mais en précisant le mot "bottom" pour n'afficher que le bord du dessous du texte.
Code:
<span style="border-bottom: 1px dotted">Mon texte souligné en pointillé</span>

Mon texte espacé: on utilise "letter-spacing" suivi d'une valeur en pixels ou en pourcentage. J'ai la flemme d'essayer mais "word-spacing" doit marcher aussi, pour espacer les mots et non les lettres.
Code:
<span style="letter-spacing:10px">Mon texte espacé</span>

Mon texte clignotant : on utilise "text-decoration" avec le mot-clef "blink". A noter que "text-decoration" peut servir à d'autre chose comme souligner, barrer du texte, etc.
Code:
<span style="text-decoration:blink">Mon texte clignotant</span>

Mon texte surligné : On ajoute un fond au texte avec "background-color" en précisant une couleur en hexa (comme pour la couleur du texte vous pouvez utiliser un mot-clef ou un code rvb). Il est aussi possible d'ajouter une image, mais je vais pas m'attarder là-dessus. Pour l'exemple j'ai écrit :
Code:
<span style="background-color:#000">Mon texte surligné</span>

Une dernière chose, très pratique pour compléter un long guide, ce sont les balises référentielles. Elles permettent de sauter facilement jusqu’à la ligne de texte qui nous intéresse. Leur utilisation est très simple : il suffit de placer la première balise qui contient le lien de la page html à laquelle vous souhaitez accéder et le nom de votre référence sur les différentes catégories d’une liste, par exemple, et de terminer en plaçant la balise avec le nom de référence à l’endroit voulu.
Exemple :
-Le post sur les BBcode juste au-dessus.
Pour ce faire, j’ai utilisé ces balises :
Code:
 <a href="http://trem-world.justforum.net/t624-un-peu-de-mise-en-page-tuto #BBcode">Le post sur les BBcode juste au-dessus.</a>
Suivi de :
Code:
 <a name="BBcode"></a>
À l’endroit où je voulais atterrir !


Dernière édition par Steam Girl le Jeu 26 Mai - 15:55, édité 2 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://drakhaan.deviantart.com/
avatar
Personnage Inactif

Nombre de messages : 74
Double compte : Tintergreydon

Personnage
Âge: 21 ans
Clan: Créature
Région: Nomade

MessageSujet: Re: Un peu de mise en page.   Jeu 26 Mai - 15:31

Les tableaux
Les tableaux, ça n'a rien de compliqué une fois que c'est clair dans votre tête, même si à première vue on pensera souvent "OH PUTAIN C'TE BORDEL". Je vais aller au plus simple: le code ne sera pas toujours très rigoureux mais on s'en fou, l'objectif c'est que ça claque à l'écran. Résumé: un tableau contient des lignes. Une ligne contient une à plusieurs cellules. Il est possible de fusionner deux cellules ou plus entre elles, horizontalement ou verticalement. Il est possible de fixer une taille au tableau et aux cellules.

Voilà le tableau dit "de base" :

Ligne 1/Cellule 1L1/C2
L2/C1L2/C2

Et le code associé :
Code:
[table border="1px" width="300px"][tr][td]Ligne 1/Cellule 1[/td][td]L1/C2[/td][/tr][tr][td]L2/C1[/td][td]L2/C2[/td][/tr][/table]
Comme vous pouvez le constater, un tableau est représenté par une balise "table", il comprend plusieurs lignes (ici deux), les balises "tr". Les lignes ont dans l'exemple chacune deux cellules, les balises "td". Vous pouvez ajouter autant de cellules et de lignes que vous le désirez mais attention, s'il n'y a pas le même nombre de cellules dans chaque ligne, vous obtiendrez un tableau déformé comme ci-dessous :

Ligne 1/Cellule 1L1/C2
L2/C1
Pour y remédier, il faut fusionner les cellules à l'aide des mot-clefs "rowspan" (fusion verticale) et "colspan" (fusion horizontale). Il faut les ajouter dans la cellule (balise "td") que vous voulez élargir, en précisant de combien de cellules. Par exemple pour élargir la cellule L2/C1 d'une cellule horizontalement on écrira :

Code:
[table border="1px" width="300px"][tr][td]Ligne 1/Cellule 1[/td][td]L1/C2[/td][/tr][tr][td colspan="2"]L2/C1[/td][/tr][/table]
Ligne 1/Cellule 1L1/C2
L2/C1
Pour une fois, le code HTML est exactement le même (remplacez juste les [] par <>). Dans sa grande mansuétude, Forumactif met à disposition un bouton "Insérez un tableau" (toujours dans la barre d'édition de message) qui vous évitera le casse tête du débutant. Mais avec l'explication ci-dessus, j'espère que vous comprendrez mieux le code généré.

Taille des tableaux
Dans les exemples ci-dessus, j'ai mis une taille fixe au tableau qui dans le cas contraire prend la largeur du texte. C'est possible soit en ajoutant un paramètre "width" au tableau comme dans l'exemple, soit en ajoutant un style comme dans le tuto précédent. Par exemple pour que votre tableau prenne la largeur du message on écrira :
Code:
[table border=1 style="width:100%;"]...[/table]
Ce qui donnera :
Cellule 1Cellule 2
Pour qu'il prenne la moitié de la largeur du message, ce sera :
Code:
[table border=1 style="width:50%;"]...[/table]
Ce qui donnera :
Cellule 1Cellule 2
...et là, c'est la panique, le tableau n'est pas centréééé.

Pour centrer un tableau, il suffit d'ajouter une marge automatique de chaque côté du tableau en utilisant le paramètre "margin" vu précédemment.
Code:
[table border=1 style="margin-left:auto; margin-right:auto;"]...[/table]
Cellule 1Cellule 2
Évidemment vous pouvez déterminer la longueur du tableau avec le paramètre "height". Vous pouvez aussi, en plaçant les paramètres dans une balise td, modifier la taille d'une cellule. Si je veux que la première colonne de mon tableau fasse presque toute la page et laisser une cellule riquiqui sur le côté, j'écrirai le code suivant :
Code:
[table width=100% border=1][tr][td style="width:95%"]Cellule 1[/td][td style="width:5%"]C2[/td][/tr][/table]
Cellule 1C2
Important: pour la taille des cellules d'un tableau, il suffit de paramétrer celles de la première ligne pour que les suivantes prennent la même largeur. Si je mets une largeur de 50px à la première cellule du tableau, toutes les cellules de cette colonne feront 50px. Donc dans l'exemple précédent, si je rajoute une ligne toute bête (sans préciser la taille) j'obtiendrai le tableau suivant :

Cellule 1C2
Cellule 1'C2'

Et voilaa fin du guide, j’espère qu’il vous aura aidé à appréhender un peu mieux les mystères de l’HTML et du BBcode Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://drakhaan.deviantart.com/
avatar
Personnage Inactif

Nombre de messages : 74
Double compte : Tintergreydon

Personnage
Âge: 21 ans
Clan: Créature
Région: Nomade

MessageSujet: Re: Un peu de mise en page.   Jeu 26 Mai - 18:32

Han han j'ai oublié de parler d'une chose sympathique à faire Very Happy quand on met :
table border=0 au lieu de table border=1
il n'y a pas de bordures. Ce qui nous permettra de mettre en page un texte comme une page de journal. Exemple :

A ce jour, il y a eu pas moins de 36 générations de rois Tremiens, dont 34 fonctionnant par couples. Cela représente tout de même quelques longues années. C’est sous les règnes de ces rois que fut construite Trem tel que nous la connaissons, car avant, la région se divisait en petite tribus incapables de bâtir de solides constructions tant elles étaient barbares et individualistes.

Les premiers rois ont été baptisés « Rois Injustes » par les livres d’histoires, pour la seule raison qu’ils ne régnaient pas par couples.
C’était l’époque de la famine et aucun sortilège ne pouvait y faire quoi que se soit. Un dragon - si ça en était bien un - déchu et pris de folie, avait ruiné les récoltes, rendu la terre presque stérile et tué une belle poignée d’habitants, sans compté les courageux l’ayant affrontés par la suite, pour tenter de la tuer.

Les deux premiers souverains, furent le rois Augustin et son fils et successeur, Amédée Feïrreiha, ils étaient des Mages Noirs, les plus riches et instruits de la futur Obscaraes, qu’ils commencèrent à bâtir alors que les Ensorceleurs vivaient dans l’anarchie. Augustin était avide de pouvoir et assez manipulateur que pour avoir réussis à s’auto proclamer « Rois », mais il avait été généreux envers son peuple et inspirait le respect. Il avait profité de la famine pour s’en faire aimer, en leur offrant de quoi survivre.
Le rois Amédée, lui, était celui qui avait baptisé « Obscaraes ». Il avait entrepris de nombreux travaux pour l’amélioration de la ville. Mais il n’inspira pas le même respect que son père. Il mourut jeune d’une maladie orpheline qu’aucun chaman n’avait réussit à soigner.

Obscaraes resta deux ans sans rois, Augustin toujours en vie, mais se disant trop vieux et affaiblit que pour régner. La lignée Feïrreiha allait mourir avec lui.
La légende dit qu’au même moment, dans le village qui allait devenir le centre de Demensia, également victime de la famine dite « Du Dragon », un puissant Ensorceleur fut désigné pour pourfendre la bête démoniaque. De sa seul initiative, il décida de s’allier avec un Mage de même niveau que lui. Ils arrivèrent à vaincre le dragon et sous les encouragements du roi Augustin, en s’associant, ils devinrent les premiers véritable rois de Trem : Naresuan Mordred, rois des Ensorceleurs et Davyd Ivanovna, rois des Mages.

Naresuan et Davyd, ainsi que, par la suite, leurs descendants firent construire et instaurèrent des lois et une justice. Ils tentèrent tant bien que mal de montrer l’exemple, mais les hostilités entre Ensorceleurs et Mages persistaient.
Et, de nombreuses années plus tard, en 6520 (année sur Trem World), c’est la guerre.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://drakhaan.deviantart.com/

Contenu sponsorisé


MessageSujet: Re: Un peu de mise en page.   

Revenir en haut Aller en bas
 

Un peu de mise en page.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

-
» J'ai besoin d'aide pour faire de jolie mise en page...
» Tutoriel Mise en Page Twitter
» Libre service de codes (mises en page RP)
» Formulaire de présentation d'un personnage inventé
» Mise en page pour poste RP... By Kara.
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Trem World :: Inscrivez vous avant de partir à l'aventure ! :: Aide & Boîte à Idées :: Tutoriels-