Bonjour à vous. Comme vous le savez (ou peut-être pas) forumactif permet aux utilisateurs d'utiliser le HTML ce langage qui permet de faire de belles choses.
Tout d'abord pour pouvoir utiliser le HTML, il faut activer l'option dans votre profil:
"Toujours autoriser le HTML" qui se trouve dans
"préférences".
Maintenant on va pouvoir commencer.
Les Bases Fondamentales.
1.Aussi bête que cela puisse paraitre toute balise doit être fermée (comme les portes). Un exemple:
- Code:
-
<div style="border: 1px solid #000000;background-color:#006699">Une balise ouverte doit être fermée. Un </div> permet de la fermer.
Vous pouvez voir qu'après le div et le style se trouvent un = et des " après le égal et avant le >
Ce qui se trouve entre ces guillemets sont toutes les informations qui mettrons en forme votre code, aussi il ne faut pas oublier de les mettre car sinon ce dit code ne marchera pas et croyez moi c'est fréquent de les oublier (et ça donne des migraines T.T)
2.Les balises sont comme des boîtes. Tout ce qui se trouve entre deux balises est concerné par les informations que le codeur a voulu apporter. J'explique, dans mon code ci-dessus se trouvent les informations border qui indique le style des bordures, background-color qui indique la couleur du fond de la 'case'. Donc selon les informations que j'ai donné à ma balise tout ce qui se trouve avant la fermeture de cette dite balise sera dans un cadre noir au fond bleu. Voici ce que ça donne en copiant/collant le code ci-dessus.
- Citation :
Une balise ouverte doit être fermée. Un
permet de la fermer.
3.On peut regrouper un très grand nombre d'informations dans les balises "span" ou "div" mais ces informations devrons obligatoirement être séparées d'un point virgule sinon bah ça marche pas.
Avoir la div et la span attitude.
Utiliser une balise « div style="..." » ou « span style="..." » revient exactement au même sauf que le rendu ne sera pas le même. Oui c'est un peu brouillon voilà pourquoi je m'explique.
Mais avant un petit exemple:
- Code:
-
<div style="border: 1px solid #000000;background-color:#006699">J'utilise une DIV</div>
- Code:
-
<span style="border: 1px solid #000000;background-color:#006699">J'utilise un SPAN</span>
Voilà, les informations ne sont pas différente, mais pourtant:
- Citation :
J'utilise une DIV
J'utilise un SPAN
vous remarquez que la div est plus générale: si vous ne précisez pas les dimensions ça risque de "déborder", pas très utile dans un texte où l'on ne veut que changer un mot.
Voilà pourquoi le span existe. Le span s'ajuste au contenu de la balise alors que la div, sauf si indiqué contraire, prendra toute la longueur de la page.
1.Les Bordures
Voilà, après tout ce blabla on passe aux choses sérieuses ! Les bordures ! Tout un art :3
Tout d'abord les bordures sont définies par l'information
border.
Ce border contient plusieurs autres informations qui ne sont pas séparées par les points virgules sinon ça marche pas.
Il y a le style de la bordure: solid, dashed, dotted et double
L'épaisseur de la bordure qui est un nombre suivit de
pxEnsuite il y a sa couleur. vous pouvez utiliser le nom de cette couleur comme dark ou bien le code hexacimal. C'est ça: #code de la couleur; exemple: #000000 qui donnera un noir.
Voilà un exemple concret de comment est l'information:
- Code:
-
border: (nombre)px (solid/dashed/dotted/double/groove/ridge/inset/outset) (couleur);
Et voici une image des différents type de bordure:
Il est aussi tout à fait possible de faire un cadre avec plusieurs bordures différentes. Compliqué vous allez me dire. Et non, le code est juste un peu plus long et se présentera sous cette forme:
- Code:
-
border-top: Xpx TYPE BORDURE #XXXXXX; border-bottom: Xpx TYPE BORDURE #XXXXXX; border-left: Xpx TYPE BORDURE #XXXXXX; border-right: Xpx TYPE BORDURE #XXXXXX;
Une explication: Border-top, border-bottom, border-left, border-right désignent l'endroit où sera le trait de la bordure, top étant le haut, bottom le bas, left la gauche et right la droite.
Le reste de l'information contenu après ne change pas de ce que nous avons vu plus haut.
Voici un exemple:
- Citation :
C'est pas beau je sais ^^'