Etape une: les choses importantes ou non à savoir.

1) HTML, CSS? WHAT?!
Beaucoup de gens me disent "j'apprends à coder du HTML!" Oui oui, un peu, mais le html n'est rien comparé au css, car sans css, le html ne servirait à rien, mais vice versa; et c'est pourquoi on apprend toujours les deux en même temps!

Le html signifique "HyperText Markup Langage", mais ce n'est pas très important, il faut juste savoir que les balises que l'on pose sont du html, contrairement au css, qui vient "raffiner" cette dernière.
Le css, lui, signifie "Cascade Style Sheet", pour ceux qui ont un forum, le css, c'est la feuille de style, que l'on peut trouver dans le panneau d'administration. Vous vous dites sûrement "Kôa?! On va apprendre tout ça avec ces { et } ou encore _?!" rassurez vous, ce n'est qu'une façon parmi tant d'autres de l'utiliser, mais ici, on va le travailler autrement! ;)

Code:

[<div ](style="width:400px;height:500px;")[>]

Code parenthèse *briques*: crochet = html | parenthèses = css


Vous voyez? Ce qui a entre parenthèse c'est le css, c'est le style, c'est ce qui donne une apparence au codage. Entre crochets, le html, c'est ... Ce sont les balises. Mais on approfondira tout ça plus tard avec les différentes balises, ne vous inquiétez pas! ~

2) Je m'emmêler les pinceaux avec toute cette ponctuation!

Oui, le html et css sont très ... Disons que si vous oublier ne serait-ce qu'un ";", votre code n'apparaîtra pas, ou prendra votre signature avec... Mais c'est assez simple, finalement!
Les < et > servent à "encadrer" un balise, par exemple:

Code:

<div></div>

Le / sert à fermer la balise, dans la balise fermante ... Sisi! '3'

Les =  et " servent pour le css!

Code:

<div style="font-family:cursive;"></div>

Donc, le mot "style", c'est là que commence le css, et le = l'ouvre, si vous voulez. Tout le css sera mis entre " , et puis vous refermez le css également pas ça, puis vous refermez complètement la balise pas un >

Les : et ; serrent également dans le css, les ; servent à séparer les différentes balises du css, oui oui, y a pleins de balises! %)

Code:

 <div style="font-family:cursive;font-size:13px;"></div>

Vous voyez? font-family:cursive et font-size:13px sont séparés pas un ; , il doit aussi y en avoir un à la fin! Les : , eux, servent à "définir", si je puis dire! '3' font-family, c'est la police, alors on met font-family:cursive; pour dire que la police sera cursive! Tandis que font-size signifie la grandeur des lettres, alors on mettre font-size:13px (car c'est toujours en pixel= px), et donc, les mots seront de taille de 13px! :) Il faut savoir que vous pouvez mettre des espaces dans vos codes, mais que ce n'est pas obligatoire (sauf parfois), mais n'en mettez jamais entre la taille et ses pixels! Si vous mettez font-size:13 px dans votre code, ça ne fonctionnera pas, donc il est plus simple de ne jamais mettre d'espace, sauf exception.


3) Span, div? Késako?!

Les span et les div sont les deux balises (qui en comprennent d'autres) générales, celles qu'on utilise tout le temps! Il est préférable de les différencier de cette façon: utiliser les "span" pour les textes (titres, etc.) et les "div" pour les blocs, ainsi, on ne s'emmêle pas les pinceaux! C'était une partie assez facile de ce premier post du cours, mais on ne va pas s'attarder trop là dessus, en tous cas, pas maintenant! ;P