Mesdemoiselles, Messieurs ; un nouvel Event est disponible juste là ! N'hésitez pas, inscrivez vous ~
Le Deal du moment :
Display Star Wars Unlimited Ombres de la Galaxie : ...
Voir le deal

Partagez
 

 [Tuto] Codage pour les Noobs ~ Ksss!

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Débile en Chef

Clary Fairchild
I am
Clary Fairchild

× Messages : 1302
× Age : 28


Inventaire
Inventaire ~ :
Maîtrise de ses compétences ~:
[Tuto] Codage pour les Noobs ~ Ksss! Left_bar_bleue12/20[Tuto] Codage pour les Noobs ~ Ksss! Empty_bar_bleue  (12/20)

[Tuto] Codage pour les Noobs ~ Ksss! Empty
MessageSujet: [Tuto] Codage pour les Noobs ~ Ksss!   [Tuto] Codage pour les Noobs ~ Ksss! EmptyDim 16 Juin - 20:18

Alors donc. Vu qu'on me pose la question, & que je me doute que certaines personnes ne sont pas bien habituées aux codages, je vous propose un petit cours accéléré, ou plutôt un petit tuto. J'y détaillerais, les choses les plus simples que vous pouvez faire à vos codages pour les adapter à vous, & ainsi avoir de jolie réponses à vos RPs, des signatures stylées, mais aussi pour faire vos fiches de liens, et vous aider avec les formulaires de présentations.

Avant toute chose, ne cherchez pas vraiment à comprendre les codes qui vont son donnés. Comme vous l'aurez constater, ce que vous mettez dans votre fenêtre de post de ne ressemble à première vu qu'à un amas de truc incompréhensible. Pas d’inquiétude, c'est magique. Lorsque vous utilisez un codage Html, utilisez souvent la prévisualisation. Ça aide. Commencez en haut, étape par étape pour ne pas risquer de supprimer un élément qui pourrait tout fiche par terre.

1 - Mini bases. (Ajout de cadres, de fond de cadres, et de textes décorés.)

2 - Modification de codages > Images.

3 - Modification de codages > Les Textes.

4 - Modification de codages > Taille.
Revenir en haut Aller en bas

Débile en Chef

Clary Fairchild
I am
Clary Fairchild

× Messages : 1302
× Age : 28


Inventaire
Inventaire ~ :
Maîtrise de ses compétences ~:
[Tuto] Codage pour les Noobs ~ Ksss! Left_bar_bleue12/20[Tuto] Codage pour les Noobs ~ Ksss! Empty_bar_bleue  (12/20)

[Tuto] Codage pour les Noobs ~ Ksss! Empty
MessageSujet: Re: [Tuto] Codage pour les Noobs ~ Ksss!   [Tuto] Codage pour les Noobs ~ Ksss! EmptyDim 16 Juin - 20:19

1 - Mini bases.

Vouloir avoir de jolis posts, c'est bien. C'est agréable pour ceux qui vous lisent, pour vous peut être aussi...sauf que bien évidemment, ça se fait pas comme. Alors certes, Clary est super gentille, elle vous à mis à disposition, des trucs et des machins, à copier/coller dans vos posts. C'est cool, hein ? Ouais, sauf que c'est possible qu'en voyant les énormes pavés de charabia que ça donne, vous êtes pris d'une énorme flemme ... alors moi, là, toujours moi en fait, je vous propose des petites choses, toutes simples, pour agrémenter vos posts, sans en faire trop. Des codes, tout petits, tout simple, à la base des plus gros.

Tout d'abord, pour un titre, par exemple. On peux faire un truc comme ça ; 


BLABLA en Haut ...
BLABLA en Bas ...



Code:
<DIV style="TEXT-ALIGN: center" align=center><FONT face=Georgia size=9><blockquote>
[color=darkred]BLABLA en Haut ...[/color]
[color=black]BLABLA en Bas ...[/color]</FONT></SPAN><BR></DIV>

Remarquons toute la simplicité de la chose. C'est court, et tout ce que vous avez à modifier, c'est le texte, parfaitement repérable dans le code. Vous pouvez aussi modifier la couleur. Sois, comme ici en remplaçant après le "color=" par le nom de la couleur en anglais, soit il me semble en mettant un code couleur. (à tester.)

Ensuite, pour faire de jolies décorations de texte on à ça ; qui donne une ombre en fait.

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Code:
<div style="text-shadow: 3px 3px 4px black;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div>

Simplicité, on remplace juste le texte. On peux modifier la porter de l'ombre en modifiant les valeurs en pixel & aussi sa couleur.

Pour rester dans la décoration de texte ; on peux aussi espacer nos lettres. Pour des mini-titres, par exemple.

TEXTE TEXTE TEXTE


Code:
<div style="letter-spacing:4px;">TEXTE TEXTE TEXTE</div>

Toujours pareil pour modifier et on changeras l'espacement des lettres en modifiant la valeur en px, ici à 4.

Passons aux cadres.
Tout d'abord, un cadre tout simple ;

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Code:
<div style="center; border: 3px solid darkred;padding:12px;"> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div>

Puisqu'en terme de taille, rien n'est imposé, ce cadre là, va se mettre directement à la taille de vos posts, et ne déformera en rien le forum. on peux néamoins, ajuster sa taille à guise, en ajoutant après le ; qui se trouve après le 12px le code suivant > width:600px; Ici, je donne un exemple du même cadre réglé à 300px.

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Code:
<div style="center; border: 3px solid black;padding:12px;width:300px;"> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div>

On peux aussi modifier la largeur du trait de bordure qui est ici à 3. L'apparence de la bordure. Ici, l'apparence correspond dans le code au mot "solid" ; on peu avoir des cadres en pointillés, en remplaçant "solid" par "dashed".

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Code:
<div style="center; border: 1px dashed black;padding:12px;width:300px;"> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div>

Au dessus, nous avons donc un cadre, qui fait 300 pixels de largeur, dont la bordure est en pointillé en 1px.
On pourra aussi obtenir des cadres colorés à l'intérieur.

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Avec toujours les mêmes valeurs apparaissant, et modifiables. OU avec une image de fond comme suis.

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE


Code:
<div style="center; background-image: url('http://atelierdelavis.fr/gabarits/imgs/background.jpg'); -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 30px;-moz-border-radius-bottomright: 30px;  -moz-border-radius-bottomleft: 30px; border: 3px solid darkred;padding:12px;"> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div>

Pour changer de fond ici, on remplacera le lien vers celui-ci. (voir étape 2, au post suivant !)
Dernier exemple sympa pour vos cadres ;

VOTRE TITRE ICI
VOTRE TEXTE ICI


Code:
<fieldset style="border: 3px dashed black;"><legend style=" color: black; text-align: center: 20px; ; letter-spacing:4px; ">VOTRE TITRE ICI</legend>
VOTRE TEXTE ICI
</fieldset>
Revenir en haut Aller en bas

Débile en Chef

Clary Fairchild
I am
Clary Fairchild

× Messages : 1302
× Age : 28


Inventaire
Inventaire ~ :
Maîtrise de ses compétences ~:
[Tuto] Codage pour les Noobs ~ Ksss! Left_bar_bleue12/20[Tuto] Codage pour les Noobs ~ Ksss! Empty_bar_bleue  (12/20)

[Tuto] Codage pour les Noobs ~ Ksss! Empty
MessageSujet: Re: [Tuto] Codage pour les Noobs ~ Ksss!   [Tuto] Codage pour les Noobs ~ Ksss! EmptyDim 16 Juin - 20:29

2 - Modification de codages > Image.

Lorsque vous copiez un code, et que vous le visualisez, parfois, il arrive que pour décorer leur créateur ai insérer des images, sous forme de .gif / .jpg / .png par exemple. Pour les modifier, rien de plus simple. Vous allez devoir avant tout les repérer. En général elles sont la forme d'un code qui à cette allure ;

Code:
<img src="http://28.media.tumblr.com/tumblr_lqibfjlvYG1qkekmco1_500.gif"

L'image en elle même étant ce que l'on veux modifier, elle est en fait sous la forme d'un lien, vers elle même. Ici elle commence à http et se fini au .gif, son extension.
Pour modifier, c'est simple. On héberge son image sur un hébergeur (Moi j'utilise NoelShack, qui est tout simple.) où en prenant son lien directement sur Internet, comme ici, sur un Tumblr. On copie colle donc le lien vers notre image, et on remplace le lien déjà présent par le notre.
On prévisualise et normalement, l'image est en place.

(Néanmoins attention. Parfois un code est intégrer pour forcer l'image à adapter sa taille. Sinon, vous devrez adapter vous même, en règlent la taille de vos images.
Revenir en haut Aller en bas

Débile en Chef

Clary Fairchild
I am
Clary Fairchild

× Messages : 1302
× Age : 28


Inventaire
Inventaire ~ :
Maîtrise de ses compétences ~:
[Tuto] Codage pour les Noobs ~ Ksss! Left_bar_bleue12/20[Tuto] Codage pour les Noobs ~ Ksss! Empty_bar_bleue  (12/20)

[Tuto] Codage pour les Noobs ~ Ksss! Empty
MessageSujet: Re: [Tuto] Codage pour les Noobs ~ Ksss!   [Tuto] Codage pour les Noobs ~ Ksss! EmptyMar 18 Juin - 14:13

3 - Modification de codages > Les Textes.

Il s'agit là, de la partie la plus simple. > Remplacer les textes, dans un codage, par les votre, pour les présentations, par exemple. En général, je crois que remarquer que tout le monde y arrive assez bien...normal, en même temps. Je ne vais donc pas trop m'y attarder.

En général, lorsque vous prévisualisez vos codages, les zones de textes sont pré-remplis, soit pas un texte, ou par "Votre Texte ici." ou BLABLA. Bref. Il suffit de remplacer. De même pour les titres, les sous-titres.

Code:
<font face="TAHOMA">Description du lien Description du lien Description du lien Description du lien Description du lien
Revenir en haut Aller en bas

Débile en Chef

Clary Fairchild
I am
Clary Fairchild

× Messages : 1302
× Age : 28


Inventaire
Inventaire ~ :
Maîtrise de ses compétences ~:
[Tuto] Codage pour les Noobs ~ Ksss! Left_bar_bleue12/20[Tuto] Codage pour les Noobs ~ Ksss! Empty_bar_bleue  (12/20)

[Tuto] Codage pour les Noobs ~ Ksss! Empty
MessageSujet: Re: [Tuto] Codage pour les Noobs ~ Ksss!   [Tuto] Codage pour les Noobs ~ Ksss! EmptyMar 18 Juin - 14:17

4 - Modification de codages > Taille.

Mine de rien, la taille ça compte ! XD Plus précisément ici. Je profite donc, de cette explication, pour vous demander de les utiliser ! Vos cadres dans vos codages, sont parfois trop large, forçant le forum entier à repasser en largeur supérieur. Dans ces cas là, réduisez les, à un maximum de 600 !
Pour les réduire, c'est simple repérer ce qui ressemble à ça ;

Code:
<div style="width: 500px;

J'ai déjà expliquer le "width" précédement. Il correspond à une taille en largeur. Vous n'avez qu'à modifier les valeurs.
Revenir en haut Aller en bas


I am
Contenu sponsorisé



[Tuto] Codage pour les Noobs ~ Ksss! Empty
MessageSujet: Re: [Tuto] Codage pour les Noobs ~ Ksss!   [Tuto] Codage pour les Noobs ~ Ksss! Empty

Revenir en haut Aller en bas
 

[Tuto] Codage pour les Noobs ~ Ksss!

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Qui pour rp avec moi ??
» ~ Quelqu'un pour RP avec moi ?
» Formulaire pour demande de graphe
» Le lapin qui cherchait quelqu'un pour RP...
» [Code.] Exemples pour vos fiches.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Académie Fordham :: Batiment Administratif :: Aide & précisions.-