Tutoriel de codage

Sujet: Tutoriel de codage 23.02.15 23:01

Introduction

Afin de se faire une petite présentation assez simple de RP comme cette structure [ + ], je vais vous donnez quelques outils qui pourraient, un jour, vous servir. Bon, d’accord, ça va vous servir maintenant. Dans ce tutoriel, on utilisera du HTLM -le codage de page- mélangé avec du CSS -la mise en page-.

Pour faire la structure de votre message, vous devrez ouvrir et fermer une balise. Le mieux, c'est de créer les balises les uns après les autres en sautant une ligne à chaque fois. Qu'est-ce qu'une balise ? C'est tout simplement l'un de ses codes : < div > ; < br / > ; < span > < /span >

div sert à créer un bloc pouvant sauter une ligne.
br / est un saut à la ligne.
span permet de faire un changement sans saut de ligne.

Sujet: Re: Tutoriel de codage 23.02.15 23:33

1ere étape : Le fond

Pour commencer, on va créer un premier bloc qui servira de fond à votre message. Donc :

Code:: <div></div>

Avec cette première baliste, on va lui mettre les informations CSS les plus importants, comme les marges, la largeur de votre réponse, un cadre, la couleur de police, le style d'écriture, etc. … Cela évitera d'un côté d'avoir à tout répéter 36 fois la même chose. Alors, ce qui vous sera utile en général :

margin: XXpx; - la marge extérieure
padding: XXpx; - la marge intérieure
width: XXpx; - la largeur
background: #COULEUR url(LienImageFond); - le fond
border : XXpx solid* #COULEUR; - le cadre
* Il y a en trait continue comme en petit point etc. ... mais on verra plus tard. Ici, solid signifie « trait en continu ».

color: #COULEUR; - Couleur de la police
font-family: police1, police2; - la police d'écriture
font-size : XXpx; - la taille de la police
font-weight: 100, 200, bold, normal; - le gras de vos textes

Il en a d'autres aussi utile et la liste est longue, mais on va s'occuper exceptionnellement du strict minimum.

Afin d'installé ses quelques données CSS grace à cette formule : style="..." qui s'installe de cette façon :

Code:: <div style="..."></div>

1. Ce qui touche le fond :

On va ajouté une largeur de 500, une marge intérieur de 30, un cadre fin noir dans un fond blanc.

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF;"></div>

Ceci est un codage assez simple. Si vous désirez faire comme dans mon exemple, il suffit de remplacer ses données :

padding:20px; => padding:20px 0px;
Note : La marge est de 20 pour le haut et le bas, mais nul pour ce qui est de droite et gauche.

border: 1px solid #000; => border-left:8px solid #d0cfcb;
Note : Le cadre se fait uniquement à gauche.

background:#FFF; => background:#FFF url(http://subtlepatterns.com/patterns/snow.png);
Note : Le fond est blanc, mais laisse apparaitre une image de fond.

2. Et le texte :

Ici, on notera ce qui sera utiliser à 80% de votre réponse que ce soit pour la couleur général, la police, etc. ... Ce qui est à savoir, c'est qu'on n'est pas forcement obliger de tout changer, si la police d'écriture du forum est Arial, par exemple, n'allez pas mettre Arial, le forum le fait déjà pour vous.

Alors, on reprend notre création :

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF;"></div>

On va installer une police d'écriture grise avec une police de 12.

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF; color:#CCC; font-size:12px;"></div>

Voila, vous avez le fond général !

Normalement, il n'est pas encore visible, car il n'y a rien d'écrit à l'intérieur. C'est tout à fait normal. Ce qui est à savoir, c'est ce que tout ce qu'on vient d'écrire dans cette partie, l'ordre prédéfinit. Vous pouvez commencer par la police, le fond, la bordure, par exemple. Tout ce qui compte, c'est qu'au final, vous devrez vous y retrouver dès que le code fera 15 mètres -J’exagère, mais on pourrait le croire à la fin.

Sujet: Re: Tutoriel de codage 24.02.15 0:14

2ème étape : Le Titre

Bien, à présent que vous aurait, peut-être une belle présentation, on va mettre un titre. Là, on verra enfin ce qu'on a déjà fait avant.

Afin d'installer le titre, on va intégrer un bloc dans un autre, comme dans une poupée russe. Pour cela, on reprend notre code et on installe notre nouveau bloc et informer ce qu'il contient en majuscule. Je n'ai plus besoin de vous dire comment faire :

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF; color:#CCC; font-size:12px;"><div>TITRE DU RP/Sujet</div></div>

Pourquoi, je vous demande en majuscule ? Car avec tous ses informations que vous aurez installer, il vous sera plus facile à retrouver avec les grosses lettres que les petites. C'est une petite Astuce. Vous pouvez aussi, faire une suite de AAAAAAAAAAAAAAAAAAAAAAA ; et bien d'autres astuces.

A présent, il nous reste plus qu'à nous faire une jolie présentation. Et comme, je suis gentille, je vous donne quelques éléments en plus qui vous permettra d’arranger votre texte :

text-align: left right ou justify; - l'alignement du texte
font-variant: small-caps; - Mettre en petite majuscule
letter-spacing: XXpt 0.Xcm ; - espace entre les lettres

Pour notre création, on va ajouter:
- Une marge au dessus grace à marge-top : 60;
- Alignement texte : centre.
- Couleur d'écriture : bleu.
- type de police : time, times new roman.
- Taille de la police : 30.
- Extra texte : en gras / petite majuscule / un espace entre les lettres de 0.3cm.

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF; color:#CCC; font-size:12px;"><div style="margin-top:60px; color:#3ec5f6; font-family:time, times new roman; font-size: 30px; font-weight: bold; font-variant: small-caps; letter-spacing:0.3cm; text-align:center;">Titre du RP/Sujet</div></div>

Voila un aperçu de notre travail :

Titre du RP/Sujet

Sujet: Re: Tutoriel de codage 24.02.15 12:05

3ème étape : Votre message

Voici la partie central et la plus importante de votre création : le message. C'est assez simple. Ce que vous avez apprit à faire plus haut, on le reproduira ici aussi. A la seule différence, on choisira un texte assez simple.

Dans votre création, il suffit de l'intégrer à la suite de votre titre. Comme de cette façon :

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF; color:#CCC; font-size:12px;"><div style="margin-top:60px; color:#3ec5f6; font-family:time, times new roman; font-size: 30px; font-weight: bold; font-variant: small-caps; letter-spacing:0.3cm; text-align:center;">Titre du RP/Sujet</div><div>/* Nouveau BLOC, ici ! *</div></div>

Ici, on va créer une marge extérieur afin d'avoir notre texte bien centrer. Comme c'est plus agréable d'avoir un texte bien droit, on mettra le tout en justifier. Puis, on installera également ce petit plus :

line-height:XXpx; - la hauteur des lignes.
* La hauteur des ligne permet de rapprocher vos lignes des uns par rapport aux autres. La hauteur peut aller d'un chiffre inferrieur à votre police, de 2 jusqu'à X en supérieur ou égale à la police. C'est à vous de juger ce qu'il conviendrait à votre texte.

Ajout dans votre création :
- Marge extérieur de 6 en haut et en bas.
- Marge de 50 à droite et à gauche.
En code simplifier ça donne ceci = marge: Horizontalpx Verticalpx;
- Un alignement de texte justifier.
- Une hauteur de ligne 12 pour une police de 12.

Code:: <div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF; color:#CCC; font-size:12px;"><div style="margin-top:60px; color:#3ec5f6; font-family:time, times new roman; font-size: 30px; font-weight: bold; font-variant: small-caps; letter-spacing:0.3cm; text-align:center;">Titre du RP/Sujet</div><div style="margin:6px 50px; line-height:12px; text-align:justify;">* Nouveau bloc ici ! *
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.</div></div>

Titre du RP/Sujet

* Nouveau bloc ici ! *
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.

Sujet: Re: Tutoriel de codage 24.02.15 14:30

4ème étape : Votre Crédit

Et bien maintenant que votre création simpliste à été fait. Il faut informer tout le forum avec fierté que cette création vient de vous. Et surtout vous aller pouvoir cranée en disant : Je sais faire du codage, les amis. Je suis le maitre du codage. Mouahahaha ! Bon, d'accord.

Bon d'accord, je vous donne le système. Enfin, je veux plutôt dire qu'il suffit d'aller plus haut et de refaire la même manipulation. C'est à dire, ajouter un bloc, mettre la forme graphique [CSS] de votre texte et c'est bon. Je choisis toujours quelque chose de simple, assez distrait sous le message. Parfois, si le message n'est pas dans un bloc avec un fond, j'ajoute une ligne au dessus grâce à border-top.

Voici un petit exemple :

-Marge extérieure afin d'apporter une certaine égalité avec le message
- Marge intérieure général afin d'éviter que le crédit touche la bordure
- une bordure en haut.
- J'ai mit le texte dans une police de 10, pour qu'elle soit bien visible en majuscule avec espacement des lettres et des mots que vous pouvez utiliser grâce à ce code : word-spacing:XXpt; .
A noter que j'ai mit un alignement au centre.

Titre du RP/Sujet

* Nouveau bloc ici ! *
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.

Layout by moi

Astuce : Oui, mais voila. J'ai une création qui se met tout à gauche, mais pas au centre de mon post. Je fais comment pour qu'il soit au centre ? T'inquiètes pas, jeune apprentis. il existe la balise < center > ... < /center > Il suffit de la mettre avant ton premier < div > et après le dernier < / div>, comme ceci :

Code:: <center><div style="padding:20px; width:500px; border: 1px solid #000; background:#FFF; color:#CCC; font-size:12px;"><div style="margin-top:60px; color:#3ec5f6; font-family:time, times new roman; font-size: 30px; font-weight: bold; font-variant: small-caps; letter-spacing:0.3cm; text-align:center;">Titre du RP/Sujet</div><div style="margin:6px 50px; line-height:12px; text-align:justify;">* Nouveau bloc ici ! *
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.</div><div style="margin:0px 40px; padding-top: 5px; color:#CCC; border-top:1px solid #CCC; font-size:10px; font-variant:small-caps; letter-spacing:1.5pt; text-align:center; word-spacing:2pt;">Layout by moi</div></div></center>

Et là tout est centré. Et je vous dit : Félicitation !!!!!!!! Vous avez réussit un codage plus ou moins simple. Allez épater la galerie de vos création et bomber votre torse ou poitrine.

Sachez que cette création est basique et structurel. Vous pouvez par exemple : faire un fond et créer le cadre dans votre image graphique afin de jouer avec les marges. un peut comme ici [+]. On peut aussi installer une deuxième image de fond dans votre titre, comme ici [+]. Mettre son texte dans un cadre et bien d'autre. L'imagination humaine peut être retranscrit par le codage et il y a un miriade de façon de coder tant qu'on respecte les placements de balise et ses compagnons de route.

Vous êtes près ? A vos claviers. Près. Créer !

Sujet: Re: Tutoriel de codage 24.02.15 14:57

5ème étape : Problème qui peut survenir.

Oups ! J'ai un problème dans mon codage. Au secours ! Venez m'aider ! Mon texte est hors de ma création. T...T J'ai ma balise est qui est visible. >o< Et j'ai mon cadre qui rendre dans ma signature. ;o;

Pas de panique. Votre codage a un petit souci technique, mais pas de quoi s'alarmer.

1. Vous avez un < /div > de trop :

Il suffit de remontrer et d'observer son codage. Parfois, vous avez tout simplement un /div de trop. Ou alors, vous avez un div sans sont / à la fin.

A force de chercher, vous finissez par trouve ce qui cloche avec votre codage.

2. Vous avez un < div > qui est visible :

Regardez si par hasard, lors de votre prévisualisation, le style n'est pas attacher au div [ divstyle ] ou que vous n'avez pas oublier un guillemet style=marge:5px;" ou style="marge:5px >. Si le code n'est pas complet, la ligne est visible et c'est au centre de ce que vous prévisualisé que vous retrouverez l'erreur.

3. Mon cadre prend la signature :

Je ris. J'y ai eu droit, je vous l'assure. Donc, je peux rire, mais vous voyez que c'est une erreur qui peut survenir à n'importe qui. C'est juste que vous avez oublier d'ajouter un < /div > quelque part. Si ce n'est pas à la fin de votre création, c'est sûrement à la fin du titre, du message ou du message.

4. La fin de ma création sort de on cadre :

C'est tout le contraire du 3. VOus avez juste une < /div > de trop. Regarder là ou votre cadre s'arrête en prévisualisation. Retirez le < /div > de trop et assurer vous d'avoir le < /div > au bon endroit. Et c'est bon.

5. Un élément ne fonctionne pas :

Il se peut qu'un élément marge:5px; ne fonctionne pas. Pour cela, regardez ce qu'il ne va pas. Assurez vous d'avoir bien écrit l'élément marge au lieu de mage d'avoir les : et que le chiffre suit sont unité de mesure 0px et surtout qu'il se termine bien par ;.
Il y a aussi la répétition des code : color:#FFF; color:#000; Le codage prendra toujours le dernier code. Ici, si le texte était blanc, puis noir, il prendra par défaut noir. Et si on veut un texte blanc, retirer color:#000; C'est simple.

Petites astuces.

Si votre création a des proportions étranges, utiliser les bordures sur chaque balise < div > dans ce style : border:1px solid #000; - ou couleur opposer à votre création. Observez où se trouve le code, s'il y a quelque chose à changer ou pas. Puis, couper ce code et l'installer au prochain < div >. En changeant qu'un élément, vous finirez par trouver où ça cloche.

Forum actif considère les sauts de ligne dans entre les < /div > < div > comme des sauts de texte. Il suffit de coller cote à cote vos deux divs.

Et voila, si vous avez d'autre question. Envoyez moi par Mp, vos soucis ou remarques.