Naruto no Sousaku
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilDernières imagesS'enregistrerConnexion
Le Deal du moment : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €

Partagez
 

 ~ Parenthèse sur le codage rp ~

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Invité
Invité
MessageSujet: ~ Parenthèse sur le codage rp ~   ~ Parenthèse sur le codage rp ~ EmptyJeu 19 Juil - 8:11

Aller une petite explication rapide pour ceux qui voudraient la base du codage, je suis pas une bonne prof >> soyez indulgent >>


ALors, le codage marche par paire et famille, je m'explique:

- Toute balise ouverte doit être obligatoirement fermé, sinon bug: une balise = [**] ou <**> ou <**= "**"> pour ouvrir et [/**] ou ou

- Les familles: Texte ou bordure ou fond ou tableau.

Si tu commences une famille, elle doit se finir avant d'en entamé une autre, pourquoi? Parce que une même balise peut contenir plusieurs famille, si tu l'éparpille, le code ne la prend plus en compte ou la compte dans la famille où elle s'est calé. Je m'explique, tu peux commencer par n'importe quelle famille dans la balise
qui sera fermé par
, cela n'a pas qu’importance tant que tu suis la zone texte puis bordure, puis fond, cela dans n'importe quel ordre il n'y a pas de priorité, autre chose tout n'a pas besoin d'y être, la balise peut contenir qu'une ou plusieurs famille de ton choix.

Exemple:
Code:
<div style="famille bordure; famille text; famille fond">

Chaque partie de la famille d'où être séparé par le > ; < mais certain s'enchaine sans, c'est souvent le cas pour les tailles ou les couleurs pour les textes et bordures.

Exemple:

Le mieux pour le texte étant tout de m^me de rajouté les code bien que plus long >
texte

Code:
<div style="background-image: url(URL_de_image); background-repeat: repeat; background-position: center center; ect.."> texte </div>

Ensuite sachant ça, le fond peut-être disposé de plusieurs façon, en répétition, fixe, aligné, ect, sa taille maximale est défini par le tableau en général, si vous n'imposez pas de hauteur, elle se répétera en suivant la longueur du texte, vous pouvez aussi limité cette longueur avec une taille, mais attention à pensé à rajouté "overflow:auto;" dans votre code pour faire apparaitre une barre défilante automatique, sinon garde au texte qui part dans tout les sens XD

Donc reprenons,
Je veux un fond d'une largueur de 600px, je dois donc connaître le code des hauteurs et largueurs, bon plus largueur:

height: xx; = Hauteur de ma page, je peux remplacer xx par une taille en px (exemple 1OOpx) ou en poursentage (100%) ou mettre en auto.

width : xx; = Largeur et même principe que la hauteur, pour un beau code, la largueur est souvent indispensable.

Maintenant que j'ai mon fond et ma largueur (base de tout codage), je vais commencer à former ma première famille, la plus simple, le fond, je choisis un fond couleur, mon code débute toujours par la balise mère, le
et se ferme par
:

Texte


Code:
<div style="background-color: white; width : 600px;"> Texte </div>

Attention à ne pas oublier les points virgule entre chaque bout de code et surtout bien ouvrir et fermer les guillemets ou le code aura un bug!!

Bon, maintenant, j'ai un fond blanc qui se répète autant que mon texte et ne dépasse pas 600 de large, de plus il est collé à gauche uu", pour ça facile, je rajoute avant lui le code
Wink

Texte

Code:
<center><div style="background-color: white; width : 600px;"> Texte </div></center>

Qu'on oublie pas de fermer !! Et voilà mon code est au milieu tout beau, oui enfin presque uu"


C'est bien beau mon fond mais il fait pitié un peu tout seul comme ça >>
Je veux lui mettre une bordure! On enchaîne donc avec la famille suivante, celle du contour!

Pour une bordure 2 choix !! une seule et unique identique au quatre, à savoir, haut bas, gauche droite, ou une série pour chaque côté Wink l'avantage de la série, je peux jouer sur les formes et couleurs de mon contour Smile

un contour simple: border-style: xx; = qui signifie type de bordure là encore, y en a beaucoup @_@ je sais pas si je me souviens de toute uu":
dashed = pointillés larges
dotted = petits pointillés
double = double lignes
groove ou hidden ou inset ou outset ou ridge = forme une bordure de relief, je me souviens plus qui fait quoi (je l'utilise rarement XD)
solid = ligne simple

ou alors, je choisis chaque côté:

border-bottom: > Bas
border-left: > gauche
border-right: > droite
border-top: > Haut

pour les deux cas cette règle s'applique, je met en une fois, la taille, le type et la couleur avant le ";", dans l'ordre que je veux sauf 1 er cas de la bordure unique où le type va en premier ^^
Exemple:

Cas 1: border-style: solid 4px white;
Cas 2: border-bottom: White 4px double;

J'ai encore 2 choix!! Et oui! Bordure droite ou arrondis ! Droite y a rien à faire, mais pour un arrondi, je rajoute le code suivant à la fin du codage de la balise
border-radius: 20px 20px 30px 30px;">

Le 2 premier (20 et 20) donne l'arrondi d'en haut, les autres du bas ^^

Donc j'ai choisis ma bordure, je la rajoute à mon fond, comme j'aime me faire chier, j'ai choisi l'option 2 >> et je veux des bords arrondis >< mais de petits arrondis eh eh Cool:

Texte

Code:
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; border-radius: 10px 10px 10px 10px;"> Texte </div></center>

Et voilà !!! Là surprise, si on essaye on découvre des bords de types et taille différentes Wink

Bon bon je tape mon texte et là je vais m'apercevoir d'un détail fâcheux >< Mes lettre collent ma bordure @_@ ou est fixé au milieu à cause de mon center du début ><
No panic ! Les padding sont là pour ça Cool
Ce code merveilleux *o* défini l'espacement entre votre texte et le bord Cool, il est conseillé de le placé à la fin avec le radius des bordures x)

padding: 10px 10px 10px 10px; + on replace le texte avec les balises du fow Wink
Dans l'ordre : haut, droite, bas, gauche

donc :

Texte


Code:
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; border-radius: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;"> Texte </div></center>


Je peux m'arrêter là où aussi rajouter une famille texte, pour le moment mieux vaut déjà apprendre cette base, puisque le texte et modifiable via le css code du fow ^^


Dernière édition par Miyu no Oni le Jeu 19 Juil - 14:24, édité 1 fois
Revenir en haut Aller en bas
Genin de Konoha
Genin de Konoha
Messages : 41

Feuille de personnage
Renommée: 1
Mission: 0
Ryos: 0
Uchiha Sosuno
Uchiha Sosuno
MessageSujet: Re: ~ Parenthèse sur le codage rp ~   ~ Parenthèse sur le codage rp ~ EmptyJeu 19 Juil - 8:31

Merci pour ce fameux tutoriel Very Happy depuis le temps que j'en cherchais un ! <3
Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: ~ Parenthèse sur le codage rp ~   ~ Parenthèse sur le codage rp ~ EmptyJeu 19 Juil - 9:31


~ Parenthèse sur le codage rp ~ 120719113754979037
-----------------------------------------------
Get Up! by Mac Miller on Grooveshark







Merci beaucoup, j'ai fait ça Surprised
Revenir en haut Aller en bas
Invité
Invité
MessageSujet: Re: ~ Parenthèse sur le codage rp ~   ~ Parenthèse sur le codage rp ~ EmptyJeu 19 Juil - 14:11

Alors on a appris la base -base du codage, on l'a complète un peu avec une famille supplémentaire qui allège pas mal notre zone écrite, la famille Texte donc x)

Là encore, beaucoup de possibilité, je vous donne celle que je connais <<

Là encore, on commence par le début bien que l'ordre des codes ne soient pas très important tant que la famille se suit, je vous décris les différents code, la famille se place à la suite de celle du fond et des bords, je vous conseille tout de même de garder les padding et les border-radius à la fin du codage, plus facile pour les modifs ^^

Le texte donc, en premier lieu, choisir l'emplacement dit "de base" c'est à dire celui par défaut de votre texte, bien sûr, vous pourrez toujours modifier des morceaux de votre texte avec vos balises de bases du fow, ça marche quand même ^^

je rappel, le code ne marche que dans la balise mère


Pour définir l'emplacement du texte on utilise ce code:

text-align: xx; > on peut remplacer xx par plusieurs choix:

Justify = le texte fera une longueur bien propre en réglant les espaces.
center = le texte sera centré
Right = le texte sera aligné à droite
Left = le texte sera aligné à gauche

J'ai une préférence pour le justify qui laisse un fini parfait <3
On oubli toujours pas le ";" à la fin du code sinon le suivant l'emportera avec lui et aucun des deux ne sera lu sur votre page ^^

Donc exemple:

Code:
<div style="text-align: justify; ">
pour reprendre tout neuf ou comme avant :

Texte


Code:
 <center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; border-radius: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;"> Texte </div></center>

Pour imposer la couleur de base rien de plus simple:

Color: XX, xx remplacer par une couleur ^^

Texte


Code:
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; color: red; 12xp; border-radius: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;"> Texte </div></center>

Ainsi, la mise en forme du texte, bien sûr pas obliger de tous les mettre, ils sont facultatif libre à vous de les trier, le mieux et de les mettre dans un nouveau code mère à la suite du premier, plus simple pour modifier:

Texte


font-family: xx > xx = Famille de police = exemple Verdana, Arial, Georgia, ect...
Attention les noms avec espaces comme "Trebuchet MS" doivent être mis dans des guillemets.

font-size: xx > xx = Taille de votre police de caractère = X xp exemple 12px (taille standard)

font-style: xx > xx = type de texte, exemple: Gras, italic, oblique...

Voilà les trois bases à nouveau attention à suivre la famille texte, pas n'importe où, à la suite et toujours le ";" ^^
ATTENTION: Toujours mettre color: XX la couleur quoi à la fin, sinon gares aux bugs <<

Exemple:

Texte


Code:
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: justify;  font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>

Si on s'en sent le courage, on peut rajouter d'autre fantaisie:

text-decoration: xx; > xx remplacer par :

underline (souligner
overline (ligne au dessus)
line through (barrer)
blink (clignoter)

Toujours dans la famille texte et avant "color" Ok? ^^



Bon bon, le texte fini on passe à mieux x)

Certain on peut être remarqué des codages avec différent niveau, je m'explique les niveaux ce sont différentes balises mères qui se suivent, oui on peut faire ça à certaine condition :/

On reprend notre exemple et on lui fait un chapeau facilement ^^

Comment? simple, on C/C le code (que la partie div sauf si vous ne voulez pas qu'il soit centré) et le rajoute à la suite sauf qu'on oubli pas de fermer la balise hein Wink

Mais bon on va pas tout garder hein ><

déja je définis le chapeau que je veux, sa taille, son fond, s'il rejoint mon cadre ou non, garde le même principe ou non ou encore s'il contient ou pas du texte, pas de texte? Déjà supprimer toute la famille texte, pas de fond la famille fond pas de bordure la famille bordure, easy x)

Faisons un essaie, je vais faire un chapeau séparé du texte j'utilise
qui fait sauter une ligne ^^:


Titre


Texte


Code:
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: justify;  font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Titre </div><br>
<div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: justify;  font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>

Mouais bof >> Après je peux toujours modif sa largueur, police, bordure ect x)

Titre


Texte


Trouvez ce qui a changé tout seul >< là vous êtes pro >>

Code:
<center><div style="background-color: white; width : 400px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: center;  font-family: Arial; font-size: 34px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Titre </div><br>
<div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: justify;  font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>

Bon bon, pas mal, tentons de les attacher finalement, je supprime
et l'espace avec le
:

Titre
Texte


Code:
<center><div style="background-color: white; width : 400px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: center;  font-family: Arial; font-size: 34px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Titre </div><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: justify;  font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>

Oyé Oo C'est là où on est content d'avoir choisi de traiter la bordure coté par coté Cool
Pour une fusion parfaite, je surprime la bordure du bas du premier code mère, vous devez vous rappeler lequel non? eh eh x) Oubliez pas le radius non plus là encore vous savez lequel modif. ^^

Titre
Texte


Code:
<center><div style="background-color: white; width : 400px; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: center;  font-family: Arial; font-size: 34px; font-style: italic; color: red; border-radius: 10px 10px 0px 0px; padding: 10px 10px 10px 10px;"> Titre </div><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid;  text-align: justify;  font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>

Même principe pour en bas ou en rajouter plusieurs, là encore tout se modifie fond color ou image ect.

La suite plus tard ^^
Revenir en haut Aller en bas
Contenu sponsorisé
MessageSujet: Re: ~ Parenthèse sur le codage rp ~   ~ Parenthèse sur le codage rp ~ Empty

Revenir en haut Aller en bas
 

~ Parenthèse sur le codage rp ~

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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Naruto no Sousaku :: FLOOD :: NNS-News :: NNS-Académie-