Code:

<link href="https://fonts.googleapis.com/css?family=Oswald|Righteous&display=swap" rel="stylesheet">

--> Alors ça c'est la balise qui rajoute un element externe. le « stylesheet » c'est pour indiquer ça rajoute un style. en l'occurence la c'est une police. Pour les rajouter il faut aller sur google font et en selectionner une (en cliquant sur le +) puis la, tu prends le code qui s'affiche

comme la:

Code:

<center>

C'est la balise pour centrer. C'est souvent nécessaire d'en mettre une avant les gros blocs de DIV, parce que sinon ils se retrouvent automatiquement à gauche.

comme la:

Code:

<div style="background:#EDEDED;width:450px;border:black 1px solid;text-align:justify;font-family:arial;font-size:12px;padding:5px;color:black;">

On attaque le plus important du cadre. Alors la je le mets en HTML brut, j'en viendrais aux class, et au CSS plus tard ! On va prendre point par point.

DIV ça signifie division de document. En gros c'est ce qui nous permet de creer un élement dans un post (ou sur un site ou quoi). Tu peux en avoir plusieurs, dont certains dans les autres, mais il faut penser à toujours refermer ton div. Il commence par " < d i v = " style :le style"> " et finit par < /d i v > "

En utilisant le =style on lui montre qu'on va chercher un style, qu'on lui donne de suite aprés.

La en l'occurence :

Code:

background:#EDEDED;

Ça correspond  à la couleur de fond. Tu peux le remplacer par la couleur de ton choix, en hexadécimal, ou alors avec le nom de la couleur (en enlevant le #). Tu peux aussi le remplacer par une image, en utilisant la balise suivante  

Code:

background-image:url(https://66.media.tumblr.com/41f2c98d75d817413abaa91453b1de30/0a054616b15019f2-9f/s500x750/da936ef16ebe4dc0aab7371d58b5556f7223b2e3.gifv)

la aussi tu peux mettre l'image de ton choix. Je parlerais des images plus bas.

Code:

width:450px;

C'est la taille en largeur. Tu peux aussi modifier la hauteur, mais pour un post de RP ou quoi, c'est souvent embetant, vu que tu sais pas trop d'avance la taille que ça va faire. Les tailles sont toujours en PIXEL donc en px.

Code:

border:black 1px solid;

C'est le code pour la bordure. La on a une bordure fine et noire, solide. Mais elle pourrait être dentelée, ou trés épaisse, et de la couleur de notre choix. Peu importe l'ordre dans le quel tu les mets, il faut toujours mettre ces trois indications : la couleur + la taille + le type.









( je t'avoue je vois pas trop la difference dans les dernieres mais bon)

Code:

text-align:justify;

Pour justifier le texte. C'est necessaire vu qu'on utilise une balise CENTER pour encadrer le DIV.

Code:

font-family:arial;

La typo utilisée dans l'ensemble du texte. Tu peux mettre ce que tu veux, mais si tu utilises une police non conventionnelle, il faut la recuperer avant sur google font.

Code:

font-size:12px;

La taille de la police. Tu peux mettre ce que tu veux. Pour un codage de RP avec un texte normal c'est 12 normalement.

Code:

color:black;

La couleur du texte dans l'ensemble du message. Tu vois la j'utilise juste le nom, mais j'aurais pu remplacer par #000000

Code:

padding:5px;

Le padding fait une marge " interieure" pour eviter que les textes ou les elements soient trop collés sur les bords.  Tu peux le mettre de la taille que tu veux !

exemple:

    L'IMAGE ET LE TITRE

Code:

<center><div style="background-size:100%; background-image:url(https://66.media.tumblr.com/41f2c98d75d817413abaa91453b1de30/0a054616b15019f2-9f/s500x750/da936ef16ebe4dc0aab7371d58b5556f7223b2e3.gifv);width:320px;height: 102px; background-size: 100%;"></div><div style="font-family: 'Righteous', cursive;font-size:20px;color:crimson;padding:10px;width:300px;background:blue;"> Po popipo papipou papaya </div></center>

Bon, on entoure le tout d'un  CENTER parce que ça ne fait pas la largeur du premier cadre. Du coup nouveau cadre -> nouveau center.

Code:

<div style="background-size:100%; background-image:url(https://66.media.tumblr.com/41f2c98d75d817413abaa91453b1de30/0a054616b15019f2-9f/s500x750/da936ef16ebe4dc0aab7371d58b5556f7223b2e3.gifv);width:320px;height: 102px; background-size: 100%;"></div>

La c'est l'insertion de l'image. Je viendrais + en detail sur les images. Mais le fait de mettre une image en BACKGROUND permet de ne pas la déformer tout en la mettant quand même à la taille de ton choix. C'est necessaire de mettre une LARGEUR (width) et une HAUTEUR (height). Ainsi que mettre le

Code:

background-size:100%

qui permet que l'image ne soit pas déformée. Parfois il faut modifier le pourcentage. Il n'y'a pas de methode miracle,c 'est vraiment en faisant que tu vois.

Code:

<div style="font-family: 'Righteous', cursive;font-size:20px;color:crimson;padding:10px;width:300px;background:blue;"> Po popipo papipou papaya </div>

Code:

font-family: 'Righteous', cursive;

-> cette partie la  renvoie à la police qu'on a recuperé sur google font tout à l'heure ! Quand tu prends une typo la bas, t'as toujours cette ligne à mettre. Le nom de la police est toujours entouré d'apostrophes.

Pour le reste, j'ai expliqué les balises plus haut !