Bon, vous savez créer une page, maintenant il faudrait savoir quoi y mettre ^^. Nous allons commencer par quelque chose de simple : créer un simple cadre.
Un rectangle
Les bases
Pour commencer, nous allons apprendre à définir la taille du rectangle.
{|style="width: 33%"
|}
NOTE: voyez que la ligne commence par un {| et se finit par un |} Ceci est obligatoire pour ouvrir et fermer le modèle. Il vous faudra toujours ceci et n'oubliez de mettre le |} à la ligne.
Remarquez également que tout ce qui vient après style= est entouré de ". Cela est également obligatoire.
Votre rectangle prendra 33% de la page en longueur. Vous pouvez mettre 100% et il prendra toujours une longueur totale. Vous pouvez également mettre un nombre suivi de px à la place des pourcentages. Par exemple:
|}
Votre rectangle prendra 350px (ou pixels) en longueur.
Un peu de couleurs
Vous pouvez également mettre un arrière-fond à votre rectangle. Regardez ici pour les codes des couleurs (copiez-collez les nombres et les lettres à droite de la couleur qui vous intéresse).
Donc, pour un fond rouge, tapez:
{|style="width: 33%; background: #FF0000"
|}
NOTE: Il faut ; entre les différentes parties de style.
Cela fera:
| Ceci |
Une bordure
Vous pouvez également mettre une bordure autour d'un rectangle. Pour choisir la couleur des bordures, regardez le début de la section Un peu de couleurs.
Donc, pour une bordure verte, tapez:
{|style="width: 33%; background: #FF0000; border: 2px solid #008000"
|}
Il vous faut définir le nombre de px pour la bordure (la grosseur), le style et la couleur.
NOTE: Il existe d'autres classes pour border. Voir ici.
cela fera:
| Ceci |
Placer le modèle
Pour placer le modèle à gauche ou à gauche dans une page, vous pouvez rajouter dans style:
float: right (pour aller à droite) float: left (pout aller à gauche)
Les choses en parenthèses ne sont pas à rajouter. (J'espère que vous vous en doutiez ^^)
NOTE: le modèle sera d'office à gauche mais cela pourrait être pratique de forcer la mise à gauche dans certains cas.
Donc, par exemple, nous mettons notre rectangle à droite:
| Ceci |