Codes HTML

Date d'inscription : 22/11/2009 Messages : 103 Points de Maison : 1005 Age : 30

TUTO BY MEISSA

Pour agrémenter vos fiches de lien, éventuellement la présentation, vos RPs ou que sais-je encore. On a souvent besoin de HTML. Voici quelques codes. Vous pouvez les modifier pour en changer la taille, la couleur etc.

1. (dans le premier je détaille ce que vous pouvez modifier. Je ne le remet pas à chaque fois c'est globalement le même principe.)

Code:: <span style="font-size: 11px; line-height: normal"><div style="border: solid ; border-width:3px ; border-color:black; width: 540px; -moz-border-radius: 10px;padding:5px "><div style="margin:auto;text-align:center;width:100%"><DIV align=justify><br>texte texte texte texte texte texte </DIV><br></span></div></div>

donne

texte texte texte texte texte texte

Vous pouvez :
- changer la taille de l'écriture en augmentant ou baissant le chiffre dans font-size: 11px
- changer l'épaisseur du trait en baissant ou augmentant le chiffre dans border-width:3px
- changer l'apparence de ce trait en remplaçant solid dans border: solid par double, dotted, dashed, groove, ridge, inset etc.
- changer la couleur de la ligne en modifiant ceci border-color:black
- changer la largeur du cadre en augmentant ou baissant ce nombre : width: 540px
- supprimer l'arrondit en enlevant ceci -moz-border-radius: 10px ou l'augmenter ou le réduire en modifiant le nombre.

En ajoutant background-color:silver dans le code, vous pouvez ajouter une couleur de fond et si vous mettez la même que pour le bord, ce bord ne semble plus être là ce qui donne :

Code:: <span style="font-size: 11px; line-height: normal"><div style="background-color:silver; border: solid ; border-width:3px ; border-color:silver; width: 540px; -moz-border-radius: 10px;padding:5px "><div style="margin:auto;text-align:center;width:100%"><DIV align=justify><br>texte texte texte texte texte texte </DIV><br></span></div></div>

texte texte texte texte texte texte

Il est aussi possible de créer des effets en ne faisant apparaître que certains bords et pas les quatre. Pour ceci, on utilise ce bout de code : border-left: 10px solid black; dont on peut faire varier l'épaisseur et la couleur.
Ce qui donne :

Code:: <div style="background-color: silver; height: 50px; border-left: 10px solid black; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;-moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px"><table><tbody><tr><br> texte texte texte texte</tr></tbody></table></div>

texte texte texte texte

En modifiant ce chiffre : height: 50px; vous pouvez modifier la hauteur de votre boîte.

2.

Code:: <span style="font-size: 20px; line-height: normal;">[color=black]TEXTE[/color]</span><br><div style="background-color: chocolate; height: 2px;"></div><br><center><div style="width: 450px;"><span style="font-size: 11px; line-height: normal;"><br></span></div></center>

donne

TEXTE

3.

Code:: <div style="padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom:8px; height:120px; width:400px; overflow:auto; background-color:silver; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px;">
texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div>

texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

4.

Code:: <fieldset style="border: 2px solid chocolate; width: 500px;"><legend><span style="font-size: 20px; line-height: normal;">TITRE</span></legend>
<table><td>[img]http://img295.imageshack.us/img295/338/sanstitre7fk.png[/img]</td><td>[color=black]texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte[/color]</td></table>
</span></fieldset>

TITRE

texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

A noter que vous pouvez placer l'écriture à coté d'une icon comme là en mettant tout ce qui est entre

Code:: <table> et </table>

à la place du texte d'un autre de vos codes.