Les bases du HTML

En HTML, on utilise souvent des blocs ( sous le nom de div & span ). Les div sont plus " grosses " que les span, qui sont " petits " par rapport aux div.

on va faire un exemple simple pour que tu voies la différence :

Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.

Code:

<center><div style="width:500px; background:#f4f4f4; border-left:7px solid #D14754;text-align:justify; padding:15px;">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</div></center>

Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.

Code:

<center><span style="width:500px; background;#f4f4f4; border-left:7px solid #D14754; text-align:justify; padding:15px;">Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.</span></center>

( pour l'instant, ne te pose pas de questions concernant le contenu des blocs, j'te l'expliquerai plus tard )

Comme tu peux le voir, bien que ce soit le même contenu, la div gère + de choses que le span, qui semble avoir sauté certains trucs, comme le justify pour le texte ou encore, la taille du bloc ( pour la div, elle était de 500 pixels en plus de 15 pixel de marges ). Pour ça, j'te conseille fortement d'utiliser les div pour les gros blocs puisqu'elle les gère mieux, et les span pour les petits blocs, comme le texte ( les titres par exemple ) et ce type de choses.

Mais le truc le plus important que tu dois retenir là-dedans, c'est ce qui va suivre : la création de tableaux. Ce truc, c'est le manitou des manitou en codage, j'l'utilise très régulièrement dans mes templates, etc. ( surtout que pour avoir une belle mise en forme toussa, c'est important )

pour le créer, déjà, on va utiliser le " table " que tu dois avoir déjà vu très souvent, donc ça va donner :

Code:

<table></table>

mais c'est pas simplement composé de ça, sinon ça donnerait que dal, tu vois le genre ? il faut rajouter une colonne et une ligne pour donner une cellule ( captain obvious, re-merci ), qui seront représentés par tr et td pour donner respectivement une ligne et une colonne.
Ce qui a pour résultat :

Code:

<table><tr><td></td></tr></table>

UN TABLEAU. OUI. sauf que tu verras pas grand chose. rien que du blanc. xD pour pouvoir visualiser ton tableau, tu vas lui ajouter des bordures. Et comment on dit bord en anglais ? bah border of course. Donc :

Code:

<table border="1"><tr><td></td></tr></table>

Après, ça sera à toi de déterminer l'apparence de ton tableau, mais tu dois obligatoirement écrire ENTRE les deux td. Si tu veux rajouter une seconde cellule, après le premier td que tu as fermé, tu en rajoutes un autre, donc ça donnera :

Code:

<table border="1"><tr><td>je suis un pingouin</td><td>non-constipé</td></tr></table>