Messages : 151 Date d'inscription : 24/06/2010
| Sujet: HTML Sam 18 Déc - 17:29 | |
| Le Html n'est pas facile à travailler à première vue. Cependant, c'est plus facile que l'on peut le penser. Ce tutoriel a été créer pour vous aider un peu à mettre de la vie dans vos rp, dans vos fiches... Vous pourrez utiliser les codes qui vous seront donné. Commençons par le commencement, les bases. Pour centrer votre texte - Code:
-
[center]Texte ici[/center] Pour mettre votre texte à droite - Code:
-
[right]Texte ici[/right] Pour justifier votre texte - Code:
-
[justify]Texte ici[/justify] Pour mettre votre texte en italique - Code:
-
[i]Texte ici[/i] Pour mettre votre texte en gras - Code:
-
[b]Texte ici[/b] Pour barrer votre texte - Code:
-
[strike]Texte ici[/strike] Le "list", c'est pour faire une marge à gauche de votre texte afin d'amincir votre texte. Pour ajouter une puce, vous rajouter un astérix entre deux crochets. Aperçu: - Code:
-
[list]Texte ici[/list] [list][*]Texte ici[/list] Le "blockquote" sert à faire une marge à votre texte des deux côtés. C'est un peu comme le "list", mais des deux cotés. Il sert aussi à amincir le texte. Personnellement, j'utilise toujours le "blockquote", le "list" et le "justify" pour mes Rp. - Code:
-
<blockquote>Texte ici</blockquote> Pour grossir ou rapetisser votre texte {Notez que vous pouvez changer la grandeur à votre guise en modifiant le chiffre indiqué} - Code:
-
[size=16]Texte ici[/size]
Tutoriel par © softbreath |
|
Messages : 151 Date d'inscription : 24/06/2010
| Sujet: Re: HTML Sam 18 Déc - 17:29 | |
| Les couleurs, c'est quelque chose d'un peu embêtant, surtout que le choix que ForumActif nous donne est très limité. Voilà donc pourquoi je vous donne ici le nom de toutes les couleurs pour en mettre dans votre vie, si l'on veut ^^ Maroon DarkRed Brown FireBrick IndianRed Crimson Red OrangeRed Tomato Coral LightSalmon DarkSalmon Salmon LightCoral PaleVioletRed
Purple DarkMagenta DarkViolet DarkOrchid MediumOrchid Violet Plum Thistle
MediumVioletRed DeepPink Fushia HotPink LightPink Pink PeachPuff
Chocolate DarkGoldenRod DarkKhaki GoldenRod DarkOrange Orange SandyBrown BurlyWood Wheat Linen
Gold Yellow PaleGoldenRod
Navy MidnightBlue DarkBlue DarkSlateBlue MediumBlue SlateBlue LightSteelBlue AliceBlue
SteelBlue DodgerBlue CornFlowerBlue LightSkyBlue LightBlue PowderBlue
Teal DarkCyan CadetBlue LightSeaGreen DarkTurquoise MediumTurquoise PaleTurquoise
SeaGreen MediumSeaGreen DarkSeaGreen MediumAquamarine MediumSpringGreen SpringGreen PaleGreen LightGreen
Chartreuse GreenYellow YellowGreen
Lime LimeGreen ForestGreen DarkGreen DarkOliveGreen
DarkSlateGray DimGray Gray DarkGray Silver
Snow Ivory WhitePour mettre votre texte en couleur: - Code:
-
[color=nomdelacouleur]Texte ici[/color] Notez aussi qu'il existe d'autres codes de chiffres et/ou de lettres pour des couleurs. Voici une image que j'ai trouver sur Google qui contient une grande quantité de couleurs différentes. Le code reste le même sauf qu'au lieu de mettre le nom de la couleur, vous mettez un "#" suivit de la série de 6 chiffres et/ou lettres qui correspond à la couleur voulue. Cliquez sur l'image pour l'agrandir.
Tutoriel par © softbreath |
|
Messages : 151 Date d'inscription : 24/06/2010
| Sujet: Re: HTML Sam 18 Déc - 17:30 | |
| ► Les ombres et les glows Texte - Code:
-
<div style="text-shadow: 1px 1px 1px #898989;">Texte</div> Texte - Code:
-
<div style="text-shadow: 1px 1px 1px #000000;">Texte</div> Texte - Code:
-
<div style="text-shadow: 1px 1px 3px #F892D8;">Texte</div> Texte - Code:
-
<div style="text-shadow: 1px 1px 3px #1986E2;">Texte</div> Texte - Code:
-
<div style="text-shadow: 1px 1px 3px #E2D619;">Texte</div> Tutoriel par © softbreath
Dernière édition par Book of Shadows le Mer 5 Jan - 3:00, édité 4 fois |
|
Messages : 151 Date d'inscription : 24/06/2010
| Sujet: Re: HTML Sam 18 Déc - 17:30 | |
| ► les backgrounds NOTEZ QUE PLUS VOTRE TEXTE EST GRAND, PLUS LE BACKGROUND S'AGRANDIT! - Code:
-
<div style="color: #828282; font-family: Tahoma; -moz-border-radius: 10px 10px 10px 10px; border:solid 8px #D16347; text-align: center; background:url(http://obsession27.free.fr/divers/fonds/pa.png) repeat;">TEXTE</div> NOTEZ QUE PLUS VOTRE TEXTE EST GRAND, PLUS LE BACKGROUND S'AGRANDIT! - Code:
-
<div style="color: #1986E2; font-family: Tahoma; -moz-border-radius: 10px 10px 10px 10px; border:solid 8px #D16347; text-align: center; background:url(http://obsession27.free.fr/divers/fonds/pa.png) repeat;">TEXTE</div> NOTEZ QUE PLUS VOTRE TEXTE EST GRAND, PLUS LE BACKGROUND S'AGRANDIT! - Code:
-
<div style="color: #1986E2; font-family: Tahoma; -moz-border-radius: 10px 10px 10px 10px; border:solid 8px #86E219; text-align: center; background:url(http://obsession27.free.fr/divers/fonds/pa.png) repeat;">TEXTE</div> Tutoriel par © softbreath
Dernière édition par Book of Shadows le Mer 5 Jan - 3:02, édité 3 fois |
|
Messages : 151 Date d'inscription : 24/06/2010
| Sujet: Re: HTML Sam 18 Déc - 17:30 | |
| ► les textes - Code:
-
<blink>TEXTE</blink> - Code:
-
<marquee behavior="scroll">TEXTE</marquee> - Code:
-
<marquee direction="right">TEXTE</marquee> - Code:
-
<marquee behavior="alternate">TEXTE</marquee> Tutoriel par © softbreath
Dernière édition par Book of Shadows le Mer 5 Jan - 3:02, édité 3 fois |
|
Messages : 151 Date d'inscription : 24/06/2010
| Sujet: Re: HTML Sam 18 Déc - 17:31 | |
| ► premades Voici quelques premades. Ils ont soit été faits par moi ou bien par quelqu'un d'autre. Le crédit à l'intérieur est à obligatoirement laisser là. Il vous est complètement interdit de le redistribuer, de vous en attribuer les droits. Ceux dont le crédit appartient à softbreath peuvent être modifiés. Ce n'est pas le cas pour les autres. Merci de bien respecter ceci.
Nom du lien & avatar ♥
- Spoiler:
Description du lien
|
|
Nom du lien & avatar ♥
- Spoiler:
Description du lien
|
- Code:
-
[table border="0"][tr][td][img]IMAGE 1[/img] [img]IMAGE 2[/img] <div style="background-color: #060008; color: ffffff; width: 186px; -moz-border-radius: 10px; padding: 7px;"></div> Nom du lien & avatar [color=red]♥[/color]
<div style="background-color: #AEAEAE; color: ffffff; width: 186px; -moz-border-radius: 10px; padding: 7px;"></div> <div style="background-color: #060008; color: ffffff; width: 186px; -moz-border-radius: 10px; padding: 7px;">[spoiler][color=#ff688d][b]D[/b][/color]escription du lien [/spoiler]</div> [/td][td]
[/td][td][img]http://i25.servimg.com/u/f25/15/55/40/12/icones10.png[/img] [img]http://i25.servimg.com/u/f25/15/55/40/12/icones10.png[/img] <div style="background-color: #060008; color: ffffff; width: 186px; -moz-border-radius: 10px; padding: 7px;"></div> Nom du lien & avatar [color=red]♥[/color]
<div style="background-color: #AEAEAE; color: ffffff; width: 186px; -moz-border-radius: 10px; padding: 7px;"></div> <div style="background-color: #060008; color: ffffff; width: 186px; -moz-border-radius: 10px; padding: 7px;">[spoiler][color=#ff688d][b]D[/b][/color]escription du lien [/spoiler]</div>[/td][/tr][/table]
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH | Who is it ? «What is it ?» |
- Code:
-
<table cellpadding="3" cellspacing="0"><tr><td> <div style="background: #ffffff ;height:135px;width: 410px;;overflow:auto;border-left: 4px dashed #AEAE33;border-top: 1px solid #AEAE33;border-bottom: 1px solid #AEAE33;border-right: 4px dashed #AEAE33; -moz-border-radius:10px 10px 10px 10px">[justify]<blockquote>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH<blockquote>[/justify]</div></td><td><div style="background: #ffffff ;height:135px; width: 120px;border-left: 4px dashed#AEAE33;border-top: 1px solid #AEAE33;border-bottom: 1px solid #AEAE33;border-right: 4px dashed #AEAE33; -moz-border-radius: 10px 10px 10px 10px;"><div class="cadre">[size=9][center]<div style="text-shadow: 1px 1px 1px rgb(150, 150, 150);">Who is it ? «What is it ?»[/size] [img]http://i44.tinypic.com/2vnnaeq.png[/img][/center] </div></td></tr></table> | PRENOM NOM feat CélébritésHistoire de votre lien , comment ils se sont rencontré , pourquoi , en quoi consiste vos liens etc!
| - Code:
-
<center><center>[table][tr][td] <DIV style="background: #D0DBE4; width:100px; height: 100px; -moz-border-radius: 5% 5% 5% 5%; border:solid 4px white;">[center][img]http://i25.servimg.com/u/f25/15/55/40/12/icones10.png[/img][/center]</div> [/td][td]<DIV style="background: #F3D569; width:450px; height: 100px; -moz-border-radius: 0% 0% 1% 1%; border:solid 4px white; background:url('http://i50.tinypic.com/nwn7gk.jpg') repeat;"><div style="text-shadow: 1px 1px 1px grey;"><center>[color=black][size=18]PRENOM NOM[/size] [size=9]feat Célébrités[/size][/color]</div></center><center><DIV style="background:#F3D569;border:solid 2px white; width:400px; height: 65px;overflow:auto;"><div style="text-shadow: 1px 1px 1px grey;"><blockquote>[size=12][color=black][font=Trebuchet MS][justify]Histoire de votre lien , comment ils se sont rencontré , pourquoi , en quoi consiste vos liens etc! [/justify][/font][/color][/size]</blockquote> </div></div></center> </div> </DIV> [/td][/tr][/table]</center> - Code:
-
<blockquote><div style="text-align: right; padding-right: 12px; font-family: Georgia; font-size: 12px; -moz-border-radius: 0px 15px 0px 15px; background-color:#ffffff; color:#000000" ><blockquote>[table border="0"][tr][td][center][size=9]feat célébrité[/size]<div style="border:8px solid #cc9999;-moz-border-radius:10px;gainsboro; width: 100px; height: 100px;">[img]http://i25.servimg.com/u/f25/15/55/40/12/icones10.png[/img]</div>[size=9]crédit ©[/size][/center][/td][td][list][font=GARAMOND][color=#993366][size=18][b][font=Courier New]Nom & prénoms • l i n k[/font][/b][/size][/color][/font] <div style="width: 300px ;height: 90px;overflow:auto;">[justify][size=12]histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. histoire. [/size] [/justify][/list][/td][/tr][/table]</blockquote></div></blockquote>
|
|