Outils de rédaction des Guides de Trophées

[Administrateur]

Outils de rédaction

• I - Présentation
  
  II - Touches de la manette
  
  • A) Touche
    B) Touche
    C) Touche
    D) Touche
    E) Touche
    F) Touche
    G) Touche
    H) Touche
    I) Touche
    J) Touche
    K) Touche
    L) Touche
    M) Touche
    N) Touche
    P) Touche
    P) Touche
    Q) Touche
    R) Touche
    S) Touche
    T) Touche
  III - Trophées et online
  
  • A) Trophée ou
    B) Trophée ou
    C) Trophée ou
    D) Trophée ou
    E) Trophée ou
  IV - Mise en page du texte
  
  • A) Mettre un texte en gras
    B) Mettre un texte en italique
    C) Souligner un texte
    D) Barrer un texte
    E) Centrer un texte
    F) Justifier un texte
    G) Changer la taille d'un texte
    H) Changer la couleur d'un texte
  V - Spoiler
  
  • A) Spoiler sans note
    B) Spoiler avec note
  VI - Image
  
  • A) Image sans redimensionnement
    B) Image avec redimensionnement
    C) Upload d'une image
  VII - Vidéo
  
  • A) Youtube
    B) Dailymotion
  VIII - Balises Troph et Ancre
  
  • A) Balise Troph
    B) Balise Ancre
  IX - Url
  
  • A) Lien url sans renommage
    B) Lien url avec renommage
  X - Liste
  
  • A) Liste sans numérotation
    B) Liste sans numérotation avec puce
    C) Liste avec numérotation numérique
    D) Liste avec numérotation alphabétique
  XI - Tableau
  
  • A) Tableau sans contour
    B) Tableau avec contour

____________________________________________________________________________

• • I - Présentation

Ce sujet a pour vocation de vous expliciter le fonctionnement des différentes balises que vous serez amené à utiliser lors de la création ou de la mise à jour d'un guide. Vous trouverez pour chaque balise un exemple du code à utiliser ainsi que le résultat associé au code donné. Vous pourrez récupérer directement le code fourni en cliquant sur le lien "TOUT SÉLECTIONNER" et vous n'aurez plus qu'à le modifier suivant vos besoins. À noter que dans un souci de clarté et de mise en page, tous les résultats affichés dans le topic ont été centrés. Cependant, seul le code lié à la balise décrite est affiché.

• • II - Touches de la manette

• A) Touche

Code	Résultat
Code : Tout sélectionner (bas)	a a

• B) Touche

Code	Résultat
Code : Tout sélectionner (gauche)	a a

• C) Touche

Code	Résultat
Code : Tout sélectionner (droite)	a a

• D) Touche

Code	Résultat
Code : Tout sélectionner (haut)	a a

• E) Touche

Code	Résultat
Code : Tout sélectionner (stickG)	a a

• F) Touche

Code	Résultat
Code : Tout sélectionner (L3)	a a

• G) Touche

Code	Résultat
Code : Tout sélectionner (L1)	a a

• H) Touche

Code	Résultat
Code : Tout sélectionner (L2)	a a

• I) Touche

Code	Résultat
Code : Tout sélectionner (select)	a a

• J) Touche

Code	Résultat
Code : Tout sélectionner (ps)	a a

• K) Touche

Code	Résultat
Code : Tout sélectionner (start)	a a

• L) Touche

Code	Résultat
Code : Tout sélectionner (stickD)	a a

• M) Touche

Code	Résultat
Code : Tout sélectionner (R3)	a a

• N) Touche

Code	Résultat
Code : Tout sélectionner (croix)	a a

• O) Touche

Code	Résultat
Code : Tout sélectionner (carre)	a a

• P) Touche

Code	Résultat
Code : Tout sélectionner (rond)	a a

• Q) Touche

Code	Résultat
Code : Tout sélectionner (triangle)	a a

• R) Touche

Code	Résultat
Code : Tout sélectionner (R1)	a a

• S) Touche

Code	Résultat
Code : Tout sélectionner (R2)	a a

• T) Touche

Code	Résultat
Code : Tout sélectionner (move)	a a

• • III - Trophées et online

• A) Trophée ou

Code	Résultat
Code : Tout sélectionner (Bronze)	a a
Code : Tout sélectionner [img]http://www.static.psthc.fr/Bronze.png[/img]

• B) Trophée ou

Code	Résultat
Code : Tout sélectionner (Argent)	a a
Code : Tout sélectionner [img]http://www.static.psthc.fr/Argent.png[/img]

• C) Trophée ou

Code	Résultat
Code : Tout sélectionner (Or)	a a
Code : Tout sélectionner [img]http://www.static.psthc.fr/Or.png[/img]

• D) Trophée ou

Code	Résultat
Code : Tout sélectionner (Platine)	a a
Code : Tout sélectionner [img]http://www.static.psthc.fr/Platine.png[/img]

• E) Trophée ou

Code	Résultat
Code : Tout sélectionner (online)	a a
Code : Tout sélectionner [img]http://www.static.psthc.fr/ico_online.png[/img]

• • IV - Mise en forme du texte

• A) Mettre un texte en gras

Code	Résultat
Code : Tout sélectionner [b]Texte à mettre en gras[/b]	Texte à mettre en gras

• B) Mettre un texte en italique

Code	Résultat
Code : Tout sélectionner [i]Texte à mettre en italique[/i]	Texte à mettre en italique

• C) Souligner un texte

Code	Résultat
Code : Tout sélectionner [u]Texte à souligner[/u]	Texte à souligner

• D) Barrer un texte

Code	Résultat
Code : Tout sélectionner [barre]Texte à barrer[/barre]	Texte à barrer

• E) Centrer un texte

Code	Résultat
Code : Tout sélectionner [center]Texte à centrer[/center]	Texte à centrer

• F) Justifier un texte

Code	Résultat
Code : Tout sélectionner [justify]Texte à justifier : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui id ornare arcu odio ut sem. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. Vel pretium lectus quam id leo in vitae.[/justify]	Texte à justifier : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui id ornare arcu odio ut sem. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. Vel pretium lectus quam id leo in vitae.

• G) Changer la taille d'un texte

La valeur du paramètre de la balise <size> permet de définir la taille et est comprise entre 1 et 200. La valeur utilisée par défaut est 100.

Code	Résultat
Code : Tout sélectionner [size=150]Texte dont la taille va être modifiée[/size]	Texte dont la taille va être modifiée

• H) Changer la couleur d'un texte

Il y a deux possibilités pour changer la couleur d'un texte. La différence provient du paramètre à passer dans la balise <color>. Le premier exemple utilise le code hexadécimal de la couleur (cf http://www.code-couleur.com/ pour accéder à la palette des différentes couleurs) précédé du caractère #. Le second exemple utilise le nom anglais de la couleur.

Code	Résultat
Code : Tout sélectionner [color=#FF0000]Texte en rouge avec le code hexadécimal[/color]	Texte en rouge avec le code hexadécimal
Code : Tout sélectionner [color=yellow]Texte en jaune avec le nom anglais de la couleur[/color]	Texte en jaune avec le nom anglais de la couleur

• • V - Spoiler

• A) Spoiler sans note

Code	Résultat
Code : Tout sélectionner [spoiler=]Contenu du spoiler[/spoiler]	Spoiler : : Contenu du spoiler

• B) Spoiler avec note

Code	Résultat
Code : Tout sélectionner [spoiler=Note du spoiler]Contenu du spoiler[/spoiler]	Spoiler : Note du spoiler : Contenu du spoiler

• • VI - Image

• A) Image sans redimensionnement

Code :

Code : Tout sélectionner

[img]http://www.img1.psthc.fr/uploads/1401726540.png[/img]

Résultat :

• B) Image avec redimensionnement

Le redimensionnement d'une image se fera via les paramètres de la balise <rimg>. Le premier paramètre correspond à la largeur alors que le second correspond à la hauteur. Lorsque vous redimensionnez une image, gardez en tête de conserver les ratios entre la larguer et la hauteur pour éviter d'avoir une image déformée.

Code :

Code : Tout sélectionner

[rimg=300,75]http://www.img1.psthc.fr/uploads/1401726540.png[/rimg]

Résultat :

• C) Upload d'une image

Vous pourrez utiliser le site d'hébergement que vous souhaitez pour ainsi pouvoir insérer vos propres images. Sachez que PSTHC dispose également de son propre hébergeur. Pour y accéder, voici le lien : http://www.psthc.fr/upimage.php. Cet hébergeur n'accepte pas les fichiers de plus de 2 Mo et il ne gère pas la transparence. Il créera à partir de votre fichier un lien permettant d'afficher l'image uploadée, à l'aide de la balise <img>. Pour récupérer ce lien, vous n'aurez qu'à sélectionner votre image grâce au bouton "Parcourir" et à cliquer sur le bouton "Envoyer". Le lien sera disponible dès que l'upload sera terminé.

Dans le cas où l'une des dimensions de votre image est supérieure à 600 x 400 pixel, l'hébergeur créera automatiquement une image redimensionnée ainsi qu'un lien permettant d'afficher l'image uploadée en taille réelle en cliquant dessus. Dans ce cas, pour afficher directement l'image dans sa taille réelle (dans le cas d'une bannière par exemple), il suffira de retirer le "s" qui apparaît à la fin du nom de l'image.

Merci d'utiliser uniquement cet hébergeur pour la création de guides et de tests
afin de ne pas surcharger inutilement nos serveurs.

• • VII - Vidéo

• A) Youtube

Code :

Code : Tout sélectionner

[youtube]https://www.youtube.com/watch?v=uavI3XY4HhY[/youtube]

Résultat :

• B) Dailymotion

Code :

Code : Tout sélectionner

[dailymotion] ... [/dailymotion]

• • VIII - Trophées et Ancre

Les balises <ancre> et <troph> sont complémentaires dans la mesure où la première crée un signet dans la page, et la seconde crée un renvoi vers ce signet. Dans l'immense majorité des cas, à la rédaction d'un guide, vous n'aurez pas besoin d'utiliser la balise <ancre>. Les signets des descriptions des trophées sont automatiquement crées, vous n'aurez donc qu'à gérer la balise <troph> pour renvoyer aux descriptions de trophées.

• A) Balise Troph

La balise <troph> permet de créer un lien vers n'importe quel endroit du message. Le nom du lien n'a pas importance si ce n'est d'avoir un nom significatif pour indiquer l'endroit où il redirige. Par contre, il faudra être attentif au numéro passé en paramètre de la balise pour éviter les conflits, c'est-à-dire pour éviter que le lien ne pointe sur le mauvais signet. Lors de la création d'un guide, chaque trophée possède automatiquement un signet. Le code à copier pour y renvoyer est directement écrit dans le générateur, au dessus dudit trophée. Dans le cas du doute, vous n'aurez qu'à le copier-coller.
Si vous voulez créer vous-même d'autres signets, prévoyez dans ce cas de commencer votre numérotation avec un numéro assez grand (par exemple 200) pour être à l'abri du moindre problème.

Code :

Code : Tout sélectionner

[troph=99999]Lien vers un endroit défini du message, ici dans le paragraphe suivant[/troph]

Résultat :

Lien vers un endroit défini du message, ici dans le paragraphe suivant

• B) Balise Ancre

La balise <ancre> est donc la balise complémentaire de la balise <troph>. En effet, comme vu précédemment, la balise <troph> permet de créer un lien vers un signet. La balise <ancre> permet de définir la position du signet, c'est-à-dire l'endroit où le lien vous redirigera. Dans la majorité des cas de création d'un guide, ne vous souciez pas de cette balise.

Code :

Code : Tout sélectionner

[ancre]trophee99999[/ancre]Remarquez bien que la balise <ancre> n'apparaît pas à l'écran, mais vous serez bien redirigé à cet endroit.

Résultat :

Remarquez bien que la balise <ancre> n'apparaît pas à l'écran, mais vous serez bien redirigé à cet endroit.

• • IX - Url

• A) Lien url sans renommage

Code	Résultat
Code : Tout sélectionner [url]http://www.psthc.fr/[/url]	http://www.psthc.fr/

• B) Lien url avec renommage

Code	Résultat
Code : Tout sélectionner [url=http://www.psthc.fr/]Lien vers la page d'accueil du site de psthc[/url]	Lien vers la page d'accueil du site de psthc

• • X - Liste

• A) Liste sans numérotation

Code	Résultat
Code : Tout sélectionner [list]Ligne 1 Ligne 2 Ligne 3 etc...[/list]	Ligne 1 Ligne 2 Ligne 3 etc...

• B) Liste sans numérotation avec puce

Code	Résultat
Code : Tout sélectionner [list][*]Ligne 1 [*]Ligne 2 [*]Ligne 3 [*]etc...[/list]	Ligne 1 Ligne 2 Ligne 3 etc...

• C) Liste avec numérotation numérique

Code	Résultat
Code : Tout sélectionner [list=1][*]Ligne 1 [*]Ligne 2 [*]Ligne 3 [*]etc...[/list]	Ligne 1 Ligne 2 Ligne 3 etc...

• D) Liste avec numérotation alphabétique

Code	Résultat
Code : Tout sélectionner [list=A][*]Ligne 1 [*]Ligne 2 [*]Ligne 3 [*]etc...[/list]	Ligne 1 Ligne 2 Ligne 3 etc...

• • XI - Tableau

• A) Tableau sans contour

Avant de vous donner le code et le résultat liés aux tableaux, il est préférable de s'attarder un peu sur les différentes balises que vous serez amené à utiliser dans le cadre de la création/modification d'un tableau.

La balise <table> : Il s'agit de l'ossature de votre tableau. Tout le code associé aux lignes, aux colonnes et aux données sera à insérer à l'intérieur de cette balise <table>.

La balise <tr> : Il s'agit de la balise liée à une ligne de votre tableau. Vous pouvez ajouter autant de lignes que vous voulez mais les balises <tr> ne doivent pas se chevaucher. Une ligne peut contenir 1 ou plusieurs colonnes. Dans le cas où votre tableau contient une seule colonne, il est conseillé de privilégier l'emploi de la balise <list>.

la balise <td> : Il s'agit de la balise liée à une colonne de votre tableau. Comme indiqué précédemment, il peut y avoir 1 ou plusieurs colonnes dans une ligne. Cependant, faites attention à ne pas faire se chevaucher les balises <td>. C'est à l'intérieur des balises <td> que vous devrez insérer les données que vous souhaitez afficher dans votre tableau.

Code :

Code : Tout sélectionner

[table][tr][td]Ligne 1 Colonne 1[/td][td]Ligne 1 Colonne 2[/td][/tr][tr][td]Ligne 2 Colonne 1[/td][td]Ligne 2 Colonne 2[/td][/tr][/table]

Résultat :

Ligne 1 Colonne 1	Ligne 1 Colonne 2
Ligne 2 Colonne 1	Ligne 2 Colonne 2

• B) Tableau avec contour

Rassurez-vous si vous avez compris comment fonctionne les différentes balises liées à l'utilisation du tableau, vous n'aurez aucune difficulté à rajouter un contour à n'importe quel tableau. L'utilisation des balise <tr> et <td> reste strictement identique. Le seul changement se situe au niveau de la balise <table> qui peut accepter deux paramètres et qui s'écrira sous la forme <table=X,Y>. Le premier paramètre correspond à l'épaisseur du contour avec 1 comme contour le plus fin. Plus vous augmenterez la valeur de ce premier paramètre et plus le contour sera épais. À noter que si vous mettez 0 comme valeur, cela reviendra à utiliser la balise <table> sans paramètre et donc sans contour. Pour le deuxième paramètre, aucune incidence sur la tableau peu importe la valeur saisie. Mettez donc la valeur 1 par défaut.

Code (2 exemples) :

Code : Tout sélectionner

[table=3,1][tr][td]Ligne 1 Colonne 1[/td][td]Ligne 1 Colonne 2[/td][/tr][tr][td]Ligne 2 Colonne 1[/td][td]Ligne 2 Colonne 2[/td][/tr][/table]

[table=8,1][tr][td]Ligne 1 Colonne 1[/td][td]Ligne 1 Colonne 2[/td][/tr][tr][td]Ligne 2 Colonne 1[/td][td]Ligne 2 Colonne 2[/td][/tr][/table]

Résultat (2 exemples) :

Ligne 1 Colonne 1	Ligne 1 Colonne 2
Ligne 2 Colonne 1	Ligne 2 Colonne 2

Ligne 1 Colonne 1	Ligne 1 Colonne 2
Ligne 2 Colonne 1	Ligne 2 Colonne 2

[Administrateur]

Si vous avez des questions, remarques ou autres suggestions concernant ces règles de Rédaction, merci de les poster sur la FAQ dédiée.

[Chibimoko77]

Édition du 20/05/2016

Refonte intégrale des outils de rédaction.