[Tutoriel] Le HTML

I) Faire des colonnes

Voici le code à utiliser :

Code:

<table><td> Colonne 1 </td>
<td> Colonne 2 </td></table>

Vous pouvez rajouter plus de td pour ajouter plus de colonne.

Application : Illustrer joliment son RP avec une image.

Code:

<table><td>[img]lien image[/img]</td>
<td>  Titre
Le texte </td></table>

Exemples:

Pour l'exemple 3, si vous souhaitez obtenir ca :

Exemple 3.5:

Il faut couper la seconde colonne avec les balises de fin de colonne et de tableau :"/td" "/table" quand le texte atteint la fin de l'image.
Donc, utiliser ce code:

Code:

<table><td>[img]lien image[/img]</td>
<td>  Titre
Le texte </td></table>La suite du texte

(Tuto du Forum d'Arcane)

II) Faire des cadres

1) Les Bases

Voici le code à utiliser :

Code:

<div style="border-radius: 10px; border: 3px solid #000000; padding-bottom:2px; padding-left: 2px; padding-right: 2px; padding-top: -20px;">

    </div>

Analysons ce code :

border-radius : permet de régler l'angle des coins. (Peut aller jusqu'à 200px)
border: 3px= règle l'épaisseur du cadre.
#000000 : ça c'est le code de la couleur du cadre (c'est du noir)
solid : C'est le style de la ligne de cadre. Il en existe plusieurs:


Spoiler:

Pour le reste c'est l'espacement entre le texte et le cadre, ni touchez pas c'est parfait réglé comme ça !

Voici ce que ce code nous donne :

Bordure de 3px, couleur #000000
Angle 10px

Bordure de 1px, couleur #006666
Angle 1px

2) Régler la Largeur

Pour régler la largeur du cadre, deux solutions :

-ajouter dans le code width: X % (X étant une valeur entre 1 et 100) (d’ailleurs évitez de mettre 100, mettez plutôt 95% sinon ça déborde un peu de la fenêtre d'écriture)
Ou
- ajouter width: Xpx (X étant une valeur)

L'ajouter dans le code comme ceci :

Code:

<div style="width: 20%; border-radius: 10px; border: 3px solid #000000; padding-bottom:2px; padding-left: 2px; padding-right: 2px; padding-top: -20px;">

    </div>

Ce qui nous donne :

Test. Le cadre fait 20% de la fenêtre.

Test. Le cadre fait 100px de largeur (width: 100px).

3) Ajouter une couleur de fond ou une image

a) Une couleur de fond

Je ne connais le code pour régler la couleur de fond que quand on a réglé la largeur. Ajoutez après la largeur "background-color:" puis un code de couleur, ici je vais prendre blanc, #ffffff.

Code:

<div style="width: 20%; background-color: #ffffff; border-radius: 10px; border: 3px solid #000000; padding-bottom:2px; padding-left: 2px; padding-right: 2px; padding-top: -20px;">
    </div>

Fond de cadre blanc

b) Une image de fond

Pour mettre une image de fond, il suffit de mettre "background-image:url(' ')" un peu partout où vous voulez (j'ai pas testé tous les endroits XD)

Code:

<div style="background-image:url('METTEZ ICI L'URL DE VOTRE IMAGE'); ">

</div>

teste

On peu aussi y ajouter un cadre:

Code:

<div style="background-image:url('METTEZ ICI L'URL DE VOTRE IMAGE'); border-radius: 10px; border: 3px solid #000000">

</div>

Teste

Et combiner le tout avec la largeur du cadre:

Code:

<div style="background-image:url('METTEZ ICI L'URL DE VOTRE IMAGE'); border-radius: 10px; border: 3px solid #000000; width: 35px">

</div>

Teste

Il suffit juste d'ajouter l'élément que l'on veut, séparé du précédent avec un point virgule et d'un espace:

Citation :

"border: 3px; width: 35px"

4) Centrer un cadre

Pour centrer un carde, il suffit d'ajouter les balises

Code:

"<center>" et "</center>"

et d’inséré entre tous les codes que l'on veut mettre.

Exemple:
Je veux centrer ceci:

Teste

Et bien je rajoute ça:

Code:

<center><div style="background-image:url('http://static.freepik.com/photos-libre/resume-de-fond-degrade-bleu-rouge_21019279.jpg'); border-radius: 10px; border: 3px solid #000000; width: 35px">Teste

</div></center>

et voilà le résultat:

Teste

5) Changer les propriétés du texte

A l'intérieur du cadre vous pouvez modifier les propriétés du texte comme dans n'importe quelle autre situation, vous pouvez centrer le texte, le mettre en gras ... Assurez vous bien que les modification que vous voulez faire soit contenu à l'intérieur du cadre, si vous mettez des balises [b] (gras) avant "div style" il risque d'y avoir des bugs ![code]

(Tuto d'Arcane modifié par moi)

III) Embellir nos présentations encore plus

J'ai remarqué, en regardant les chroniques d'Emma, que je pouvais en dire plus pour costumizer nos beaux petits cadres et présentations.

1) Insérer un texte (ou une image) dans la ligne du cadre

Voici le code:

Code:

<fieldset style="border: 3px solid #8C6200;"><legend style=" color: #5A0000; text-align: center; letter-spacing:4px; ">TEXTE OU IMAGE A METTRE LA</legend>

</fieldset>

TEXTE OU IMAGE A METTRE LA

Code:

Pour mettre une image à la place du texte, il suffit de copier l'adresse de l'image et de la mettre entre les balises [img] et [/img]

Ce code est bien sûr pas inchangeable. On peut rajouter des éléments après le point virgule pour régler la largeur par exemple.

Mais intéressons nous à la partie "texte ou titre". Elle est ouverte par la balise "legend style" et fermée par la balise "/legend".

text-align: C'est comment le texte doit être positionné. Il existe trois paramètres: "left" (gauche); "right" (droite) et "center" (centre). Ils sont à positionner après les deux points.
letter-spacing: C'est l’écart entre deux lettres. Il suffit juste de modifier le nombre avant le "px".
color: C'est le code couleur.

2) S'amuser avec les titres

Voilà, nous pouvons aussi nous amuser à changer nos titres, les rendre plus fun.

a) Doubler le titre

C'est possible avec le code suivant:

Code:

<DIV style="TEXT-ALIGN: center"><FONT face=Georgia size=9>
[color=#8C6200]Test[/color]
[color=#5A0000]Test[/color]
</FONT></DIV>

Test
Test

Il faut bien sûr mettre DEUX (ou plus ^^) fois le même texte mais avec des couleurs différents ^^
On peut changer le style de police d'écriture en changeant après le "FONT face=", la taille aussi, après le "size=".

Le dédoublement de titre avec le cadre:

Test
Test

teste

b) Mettre une ombre

On peu aussi mettre une ombre à nos textes et titres. (qui ne sont pas visibles avec les navigateurs tel que Explorer)
L'élément à ajouter est: "text-shadow: (nombre)px (nombre)px (nombre)px couleur; "

Vous remarquez qu'il y a trois mesures à remplir. La première est le nombre de pixels de décalage à droite du texte. La seconde est le nombre de pixels de décalage en bas du texte. Le troisième, lui, est le nombre de pixels de "flou" de l'ombre.

test

magie magie ! On, peut aussi mettre des ombres au cadres ! Pour cela il suffit d'ajouter l'élément: "box-shadow: (nombre)px (nombre)px (nombre)px couleur;"

J'en conçois, c'est pas beau XD

Mixons avec nos cadres-titre-double:

Test
Test

Ouais, ça a la classe ;p (sauf l'ombre du cadre --')

Donc vous voyez que le HTML a beaucoup de possibilités d'utilisations.

3) Revenons à nos cadres

Il est possible de n'obtenir par exemple que les bordures droites et gauches et de passer les deux autres à la trappe. Pour cela, il existent de nombreux procédés. Je vais vous donner le moyen, pas le plus court j'en conviens, mais sûrement celui où l'on risque le moins de faire de belles bêtises.


border-left: (nombre)px (solid/dotted/dashed/double) couleur;
Donne une bordure à gauche.
border-right: (nombre)px (solid/dotted/dashed/double) couleur;
Donne une bordure à droite.
border-top: (nombre)px (solid/dotted/dashed/double) couleur;
Donne une bordure en haut.
border-bottom: (nombre)px (solid/dotted/dashed/double) couleur;
Donne une bordure en bas.

Ainsi, vous pouvez obtenir des rendus tels que :

Code:

<div style="border-right: 2px solid black; border-left: 2px solid black;">Texte ici</div>

Texte ici

Code:

<div style="border-top: 2px solid black; border-bottom: 2px solid black;">Texte ici</div>

Texte ici

Ainsi, vous pouvez vous rendre compte que, à partir du moment où vous décidez d'ignorer une, deux, ou trois bordures (le trait tracé en dessous des titres de mes parties est en fait un border-bottom sans aucune autre bordure), elles n'apparaissent pas. Aussi, vous pouvez utiliser ce procédé (qui n'est pas l'unique moyen d'y arriver, je le précise) afin d'obtenir des bordures d'une certaine taille, couleur, ou/et d'un certain style sur certaines bordures de votre cadre et pas sur d'autres. Par exemple, puisque l'on comprend toujours mieux de cette manière :

Code:

<div style="border-right: 2px dotted black; border-left: 2px dashed black; border-top: 4px double black; border-bottom: 5px solid gray">Texte ici.
Texte ici.
Texte ici. </div>

Texte ici.
Texte ici.
Texte ici.

... Ne me mordez pas, je sais que c'est hideux. Mais c'était vraiment pour que vous voyiez les nombreuses possibilités qui s'offrent à vous (non, je ne fais pas la promotion d'un aspirateur).

(PS: Cette dernière partie, sur les cadres, est prise du forum Schyzen)

4) Faire mumuse avec les pseudos des joueurs

Bon, voilà quelque chose de sympa. Vous voulez que le membre qui lise votre post y trouve son pseudo ? Rien de plus simple ! Il suffit d'insérer:

Code:

{USERNAME}

dans vos textes !

Alors ?
Alors ?

Tu trouves ça comment, Invité ? ^^