Bienvenue sur Ludtyvia, à vos risques et périls.
 
AccueilAccueil  FAQFAQ  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | .
 

 Quelques bases de codage pour les débutants

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

avatar
Gaïa


PROFIL►PORTRAIT :
► ARRIVÉ LE : 31/03/2012
RPG

MessageSujet: Quelques bases de codage pour les débutants   Dim 1 Nov - 17:59



Le codage

Bon alors à la suite de nombreuses demandes, nous avons décidé de vous faire un sujet pour vous expliquer les bases du codage. Je vais tout présenter même les trucs lambda.

I. Codage de l'écriture:

Changer la police du texte:
Code:
[font=Nom de la police souhaité]Ecrire ici le texte apparent[/font]

Exemple avec la police Comic Sans MS :
Ecrire ici le texte apparent

Voici un site ou est répertorié toutes les polices possibles: Ici
Changer la taille:
Code:
[size=Taille souhaité]Ecrire ici.[/size]

Exemple avec une taille de 18:
Ecrire ici.

Mettre en gras, italique ou souligné:
Code:
[b]gras[/b] [i]italique[/i] [u]souligné[/u]

Exemple:
gras italique souligné

Changer la couleur de l'écriture:
Code:
[color=couleur1]Ecrire ici.[/color]
A la place de couleur1 il faut entrer le nom ou le code de la couleur désirer
Exemple avec du rouge:
Ecrire ici.

Quelques exemples de couleur:
 


Mettre une ombre à un texte:
Code:
<div style="text-shadow: valeur1 valeur2 valeur3 couleur1 ;">Ecrire ici.</div>

Les valeurs 1,2 et 3 peuvent etre n'importe quelle valeur numérique mais doivent être suivi des lettres px pour pixel (sans espace entre le nombre et les lettres). La couleur1 fonctionne comme pour changer la couleur du texte. La valeur 1, si elle est positive, indique le décalage à droite de l'ombre, elle peut aussi indiquer le décalage à gauche, il suffit de mettre des valeurs négatives. De la même manière, la valeur 2 indique le décalage en bas si elle est positive ou le décalage en haut si elle est négative. La valeur 3 indique l'étendu du dégradé de l'ombre, une des conséquence de son augmentation est l'éclaircissement de l'ombre. Attention la valeur 3 ne peut qu'être positive. (NDA: Mon texte est ecrit avec un effets d'ombres indigo avec les valeurs 0px 0px 4px)

Exemple:
Code:
<div style="text-shadow: 1px 1px 1px red ;">Valeur1=1px; Valeur2=1px; Valeur3=1px</div>
Valeur1=1px; Valeur2=1px; Valeur3=1px

Valeur1=4px; Valeur2=1px; Valeur3=1px

Valeur1=1px; Valeur2=4px; Valeur3=1px

Valeur1=1px; Valeur2=1px; Valeur3=4px


Espacer les lettres d'un texte:
Code:
<div style="letter-spacing:Valeur1;">Ecrire ici</div>

La valeur 1 est positive comme tout à l'heure suivi de px sans espace. Elle indique l'espacement entre les lettre du texte.

Exemple:
Espacement de 1

Espacement de 2

Espacement de 4

Espacement de 8


II.Créer un cadre, insérer une image, un liens, une vidéo:

Créer un cadre:
Code:
<div style="center; background-color: couleur1; border-radius: valeur1; border: valeur2 solid Couleur2;padding:valeur3 valeur4 valeur5 valeur6; box-shadow: valeur7 valeur8 valeur9 couleur3 ; margin: valeur10 valeur11 valeur12 valeur13">Mettre ici le contenue du cadre.</div>

Alors! Attention on rentre dans le plus compliquer, il faut bien suivre, j'éspère que j'arriverais à être clair. On va faire tout ça dans l'odre dans lequel vous devez entrez les codes. La fontion center sert à centrer le cadre elle n'est pas obligatoire. Pour la couleur 1 c'est la couleur de remplissage du cadre. Cela fonctionne comme pour la couleur du texte. La valeur 1 donne une courbure aux angles, 0 les angles sont droits, plus le nombre est grand plus l'arrondi du cadre est prononcé. La valeur 2 agit sur l'épaisseur du trait, 0 pas de trait, plus le nombre est grand plus le trait est épais. Le solid sert simplement a faire apparaître le cadre sa suppression ou modification fait disparaître le cadre. La couleur 2 modifie la couleur du cadre en lui même. Les valeur 3, 4, 5 et 6 fonctionnent ensembles, toutes permettent de laisser un espace entre le contenue du cadre et le cadre en lui même. 3 correspond à la valeur de l'espace en haut, 4 de l'espace à droite, 5 de l'espace en bas et 6 de l'espace à gauche. Deux raccourcis sont possible, soit on supprime les valeurs 5 et 6 dans ce cas 3 correspond à l'espace en haut et en bas et 4 à l'espace à gauche et à droite. soit on supprime carrément les valeurs 4, 5 et 6 et dans ce cas 3 correspond à l'espace en haut, en bas, à droite et à gauche. Les valeurs 7, 8 et 9 ainsi que la couleur3 fonctionne exactement comme Text-shadow mais au lieu d'être l'ombre du texte, c'est l'ombre de l'encadrement. Les valeurs 10, 11, 12 et 13 fonctionne comme les valeur 3, 4, 5 et 6 mais ne corresponde pas à l'espace entre le contenue du cadre et le cadre mais à l'espace entre les éléments autours du cadre et le cadre.

Exemple:

couleur 1= white; valeur 1= 0px; valeur 2= 5px; couleur 2= black; valeur 3= 5px; valeur 4= 5px; valeur 5= 5px; valeur 6= 5px; valeur 7= 0px; valeur 8= 0px; valeur 9= 5px; couleur 3= darkblue; valeur 10= 10px; valeur 11= 10px; valeur 12= 20px; valeur 13=10px.

couleur 1= #ff9900; valeur 1= 5px; valeur 2= 1px; couleur 2= #00ccff; valeur 3= 10px; valeur 4= 20px; valeur 5= 10px; valeur 6= 20px; valeur 7= 3px; valeur 8= 6px; valeur 9= 10px; couleur 3= #ff0000; valeur 10= 30px; valeur 11= 30px; valeur 12= 30px; valeur 13=30px.

couleur 1= #33cccc; valeur 1= 50px; valeur 2= 30px; couleur 2= #ffff00; valeur 3= 30px; valeur 4= 30px; valeur 5= 30px; valeur 6= 30px; valeur 7= 15px; valeur 8= 20px; valeur 9= 30px; couleur 3= #009900; valeur 10= 0px; valeur 11= 50px; valeur 12= 6px; valeur 13=70px.

Insérer une image:
Code:
[img(valeur1,valeur2)]URL de l'image ici[/img]
La valeur 1 redimensionne l'image en largeur et la valeur 2 en longeur.

Exemple:


Insérer un lien:
Code:
[url=adresse du lien à inserer]Mettre ici ce que vous voulez faire apparaître sur la page et qui conduit au lien quand on clique dessus, si l'on ne met rien ici c'est l'adresse qui apparaît[/url]

Insérer une vidéo provenant de youtube:
Code:
[youtube]Référence de la vidéo[/youtube]
Les URL des vidéo youtube sont toutes construit de la même manière:
https : // www . youtube . com / watch?v = Référence de la vidéo

Et voilà je pense avoir fais le tour des principales options, si vous pensez que j'en ai oublié n'hésitez pas à poster un message pour me le dire.


_________________
Ainsi vit Gaïa, Maitresse du monde, Mère de vos mère et de votre passé, Créatrice de l'Univers, Lumière de la Terre. Ainsi vit Gaïa, pour vous guider en ce monde.
Revenir en haut Aller en bas
http://ludtyviarpg.forumgratuit.org
 

Quelques bases de codage pour les débutants

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

 Sujets similaires

-
» Le codage pour les nuls
» Petit scénario pour les débutants
» Codage pour le RP
» Guide pour les débutants
» La Politique pour les nuls (Ou GAVP II)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ludtyvia :: Bienvenue :: REGLEMENT ET CONTEXTE :: Explications-