AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Messages : 151
Date d'inscription : 24/06/2010
MessageSujet: 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:
    Texte sans puce

  • Texte avec puce

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

_________________


VOUS ÊTES SURVEILLÉS


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Messages : 151
Date d'inscription : 24/06/2010
MessageSujet: 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
White



Pour 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

_________________


VOUS ÊTES SURVEILLÉS


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Messages : 151
Date d'inscription : 24/06/2010
MessageSujet: 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

_________________


VOUS ÊTES SURVEILLÉS




Dernière édition par Book of Shadows le Mer 5 Jan - 3:00, édité 4 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Messages : 151
Date d'inscription : 24/06/2010
MessageSujet: Re: HTML   Sam 18 Déc - 17:30

► les backgrounds


Ici = url du background : http://obsession27.free.fr/divers/fonds/pa.png

Notez que vous pouvez changer la couleur du cadre en changeant son code.
Vous pouvez faire pareil pour la couleur du texte.

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

_________________


VOUS ÊTES SURVEILLÉS




Dernière édition par Book of Shadows le Mer 5 Jan - 3:02, édité 3 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Messages : 151
Date d'inscription : 24/06/2010
MessageSujet: Re: HTML   Sam 18 Déc - 17:30

► les textes



TEXTE
Code:
<blink>TEXTE</blink>

TEXTE
Code:
<marquee behavior="scroll">TEXTE</marquee>

TEXTE
Code:
<marquee direction="right">TEXTE</marquee>

TEXTE
Code:
<marquee behavior="alternate">TEXTE</marquee>


Tutoriel par © softbreath

_________________


VOUS ÊTES SURVEILLÉS




Dernière édition par Book of Shadows le Mer 5 Jan - 3:02, édité 3 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Messages : 151
Date d'inscription : 24/06/2010
MessageSujet: 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:
       







      Nom du lien & avatar


      Spoiler:
       
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és
Histoire 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>

feat célébrité
crédit ©
    Nom & prénoms • l i n k
    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.
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>

« NOM DU LIEN »

UC





© softbreath

_________________


VOUS ÊTES SURVEILLÉS


Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé
MessageSujet: Re: HTML   

Revenir en haut Aller en bas
 

HTML

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

+
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
The Charmed Ones :: Le Livre des Ombres :: Dominus Trinus :: Aide & FAQ-
Sauter vers: