:: 24-fr :: Forum 24 heures chrono :: - [Tutoriel]Mettre en forme vos posts

Voir le sujet précédent :: Voir le sujet suivant

Auteur

Message

GP_@lex
Vice-président(e)

Inscrit le: 01 Mar 2007
Messages: 1102
Localisation: Sexe : Homme Age : 22 ans

Posté le: Ven 31 Aoû 2007 - 21:40 Sujet du message: [Tutoriel]Mettre en forme vos posts

Allez cette fois je vais essayer de voir avec vous comment mettre en forme vos posts pour les rendre agréable a lire Wink

!!

METTRE EN FORME VOS POSTS

La première chose est de vous familiariser (même si tout le monde sait faire ) avec les boutons de mise en forme qui se trouve juste au dessus de la zone de texte :

Avant de commencer sachez qu'une mise en forme (gras, italique, souligné, Couleur, taille...) peut être appliquée au texte séléctionné :

- Séléctionner le passage auquel vous voulez appliquer la mis en forme
- Choississez par exemple l'icone B (Gras) ou i(Italique); elle sera alors appliquée automatiquement au texte quand vous enverrez votre message sur le forum.

Vous pouvez aussi appliquer une mise en forme manuellement :

- 1 - GRAS

Code:

[b]24-fr[/b]

donnera le texte entre les deux balises en gras:

24-fr

- 2 - ITALIQUE

Code:

[i]24-fr[/i]

donnera le texte entre les deux balises en italique:

24-fr

- 3 - SOULIGNE

Code:

[u]24-fr[/u]

donnera le texte entre les deux balises souligné:

24-fr

- 4 - LA COULEUR

Code:

[color=red]24-fr c'est cool !![/color]

Code:

[color=#FF0000]24-fr c'est cool !![/color]

donnera le texte entre les deux balises en rouge :

24-fr c'est cool !!

- 5 - LES QUOTES

Les quotes servent nottament pour les citations et les spoilers.

Code:

[Quote] texte entre quote [/Quote]

donnera un texte encadré de points-tillés :

Citation:

texte entre quote

maintenant vous pouvez créer un spoiler avec le texte de couleur noir à l'intérieur pour ceux qui ne savent pas ce qu'est un spoiler voici une définition trouvé sur le net :

SPOILER :
Terme anglais venant de "to spoil", signifiant "gâcher". Un "spoiler" est une révélation susceptible de gâcher une surprise ou le plaisir de la découverte. Dans le cadre d'une série, la publication de la fin d'un épisode ou d'un épisode futur laissant plus la moindre place à la découverte sera considérée comme un "spoiler".Généralement, les "spoilers" sont signalés au lecteur afin qu'il puisse choisir de les lire ou non.

Donc pour ne pas gacher le plaisir au lecteur, enfin en tout cas ceux qui ne veulent pas lire vos révélations créez un spoiler.

Code:

[Quote] [color=black]Ceci est un spoiler[/color][/Quote]

ce qui donne (pour lire le spoiler séléctionnez le passage à l'intérieur des points-tillés, le fait que vous ne voyez rien ne veut pas dire qu'il n'y a rien c'est le but du jeu ma pauvre lucette - excusez moi je dérape - Laughing

) :

Citation:

Ceci est un spoiler

maintenant vous pouvez rajouter un nom par exemple comme pour les citations :

Code:

[Quote="moi GP_@lex pour un tuto sur la mise en forme"] texte entre quote [/Quote]

donnera ça :

moi GP_@lex pour un tuto sur la mise en forme a écrit:

texte entre quote

- 6 - CODE

Code sert justement a afficher une ligne de code comme dans tout les exemple que je vous met en ce moment!

ca donne ca :

Code:

- 7 - LES LISTES (non ordonnées)

Sert tout simplement a créer une liste.

Code:

[list]
[*]Pomme
[*]Poire
[*]Peche
[/list]

donnera une liste non ordonnée :

Pomme
Poire
Peche

- 8 - LA TAILLE

voici ce qui permet de change la taille de votre police.

Code:

[size="9"] LA taille est en 9 [/size]

Code:

[size="20"] LA taille est en 20 [/size]

donnera ça :

La taille est en 9

La taille est en 20

- 9 - LES LISTES (ordonnées)

Des listes encore comme dans l'exemple 7 mais avec une ordonnation des éléments.

Code:

[list=1]
[*]Pomme
[*]Poire
[*]Peche
[/list]

Code:

[list=a]
[*]Pomme
[*]Poire
[*]Peche
[/list]

donnera une liste ordonnée :

Pomme
Poire
Peche

Pomme
Poire
Peche

- 11 - +image

Vous envoie directement sur la page de imageshack.us pour inserer une image dans vos posts.

- CENTRER VOTRE TEXTE

pour center votre texte :

Code:

<center> mon texte est centré !</center>

donne :

mon texte est centré !

remarque : N'oubliez pas que le texte que vous aurez ecrit qui se trouvera avant la balise de debut center et après la balise de fin center ne sera pas centrer mais aligné à gauche. Il est aussi impossible de positionner un texte a droite a cause des restrictions de l'administrateur du site. Vous pouvez aussi utiliser cette methode pour centrer votre image.

- APPLIQUER PLUSIEURS MISE EN FORME

Imaginons par exemple que vous vouliez un texte en gras de couleur orange et de taille 15 !Vous séléctionnez le passage et appliquez les mises en forme grace aux icones ou bien vous pouvez le faire aussi manuellement :

Nous allons prendre le texte suivant et appliquer pas à pas toutes les mises en forme :

VIVE 24-fr

Mettons en gras le texte (voir ex 1) :

Code:

[b]
VIVE 24-fr
[/b]

ce qui nous donne :

VIVE 24-fr

Maintenant appliquons la couleur orange :

Code:

[b]
[color=orange]
VIVE 24-fr
[/color]
[/b]

ce qui nous donne :

VIVE 24-fr

remarque : Dans un souci de clarté veillez toujours a respecter l'odre des balises, par exemple la première balise ouverte (celle pour appliquer le mise en forme du texte en gras est aussi la dernière a être fermée!) C'est juste pour vous éviter de vous emmeler les pinceaux et d'être perdu au cas ou vous avez un problème Wink

!!!

et maintenant la taille :

Code:

[b]
[color=orange]
[size=15]
VIVE 24-fr
[/size]
[/color]
[/b]

ce qui nous donne :

VIVE 24-fr

MISE EN FORME DES IMAGES

Donc nous allons voir mantenant la mise en forme des images. Sachez tout d'abord que comme le texte, l'image une fois insérée dans votre post est par défaut alignée a gauche. elle peut aussi être centrée. La seule différence avec le texte c'est que l'image, elle, peut être alignée a droite.

- CENTRER UNE IMAGE

tout le monde sait insérer une image dans un post, normalement c'est sous la forme :

Code:

remarque : Dans src, indiquez l'adresse de l'image! Moi, je n'est rien mis donc c'est pour ça qu'aucune image ne s'affiche.

ce qui nous donne :

pour centrer l'image c'est comme le texte, utiliser la balise center :

Code:

ce qui nous donne une belle image centrée :

- ALIGNER UNE IMAGE A DROITE

pour aligner une image a droite, ajoutez l'attribut align dans la balise img. L'attribut doit être égal à "right". l'exemple vous parlera sans doute plus :

Code:

ce qui nous donne :

AFFICHER UNE INFO-BULLE A L'ARRET DE LA SOURIS SUR L'IMAGE

Voila un petit truc qui ne sert pas à grand chose mais je vais vous apprendre à le faire quand même, j'aime bien ! Donc une info-bulle est un petit texte qui s'affiche lorsque vous vous arrêtez sur l'image avec la souris, un exemple :

Ceci est une info-bulle

remarque : pour voir l'info-bulle restez sur l'image avec votre souris !!!

Donc pour faire une info-bulle, insérez dans la balise img l'attribut title avec le texte que vous voulez afficher comme valeur :

Code:

- COMBINER TEXTE, IMAGE ET MISE EN FORME.

Vous voyez en page d'accueil ou dans les news il y a le texte à gauche et la photo a droite.

un exemple :

VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!

Pour faire ça (Merci NicoX2 Wink

) insérer le lien de votre image en premier et ensuite votre texte comme ceci :

Code:

<img src="ici le lien de l'image" align="right"> VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!

Si vous voulez faire le contraire image à gauche et texte à droite :

Code:

<img src="ici le lien de l'image" align="left"> VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!

SI VOUS N'INSEREZ PAS cet attribut ca donne ça :

Code:

<img src="ici le lien de l'image"> VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!VIVE 24-fr !!!! C'est COOL !!!

- INSERER UNE VIDEO DANS VOS POSTS

Alors pour insérer une vidéo dans vosts :

1- Choississez un site comme youtube ou dailymotion (ou tout autre hebegeur vidéo)
2 - Choissiez la vidéo que vous voulez !
3 - Faites un copier/coller du lien commençant par :

Code:

je vous donne un exemple avec une vidéo de youtube :

Code:

ce qui donne :

- INSERER UNE MUSIQUE

Pour arriver à insérer de la musique c'est le parcours du combattant ne m'en voulez pas si ca marche pas Wink

!!!La musique doit déja être être sur internet, stockée par un hebergeur (un peu comme youtube pour les videos si vous voulez).

Donc pour cette exemple il s'agit d'un petit blues que j'ai fait!! Voici le code :

Code:

Pour utiliser ce code, vous devez changer le chemin de mon fichier musical par le votre !!Donc vous devez changer :
- La valeur de l'attribut "value" de la première balise param.
- La valeur de l'attribut "src" de la balise EMBED

et ca nous donne :

Voila j'éspère avoir été clair et que ce tuto vous servira, peut être que je le complèterai pour autre chose qui sait @ + Wink

!!!
_________________

«Ciel : lieu de délices que l'on dit être le Paradis et d'où nous arrivent aussi la pluie, la foudre, la grêle et les bombes.»

Dernière édition par GP_@lex le Ven 14 Sep 2007 - 14:06; édité 24 fois