Aide aux Codes (In Progress)

Aide aux Codes

Tout d'abord, ce post sera en perpetuelle évolution. Les codes ne sont pas parfait : il y à souvent plusieurs façons différentes de faire la même chose. Ce qui change, c'est le degré optimal du code. Après, il y à les codes foireux qui plantent les pages.

Règle numéro 1 (La seule pour l'instant) :
Toujours fermer vos balises !
Par exemple, si je créé un

Code:

<table><tr><td>

, il faut qu'il soit fermé par

Code:

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

Chaque code contient les autres, et se forme une structure qui doit être logique. Surtout que Forum actif est basé sur des tableaux : il suffit d'oublier une balise pour que toute la page se déforme !




Les Tableaux

Les tableaux sont des carrés qui contiennent des cellules. En gros, des colonnes et des lignes.

La structure basique est la suivante :

Titre ! (Si besoin)

Ligne 1	Colonne 1	Colonne 2
Ligne 2	Colonne 1	Colonne 2

La structure codée donne ça :

Code:

<TABLE BORDER="1">
<CAPTION>Titre ! (Si besoin)</CAPTION>
<TR>
<TD>Ligne 1</TD>
<TD>Colonne 1</TD>
<TD>Colonne 2</TD>
</TR>
<TR>
<TD>Ligne 2</TD>
<TD>Colonne 1</TD>
<TD>Colonne 2</TD>
</TR>
</TABLE>

Toutefois, sur forum actif, vous verrez que votre tableau se situera plus bas que ce que vous souhaitiez. En effet, les sauts de ligne du codage (pour plus de clarté quand vous codez) sont interprétés par forumactif comme des sauts de ligne tout court ! Il faut donc les supprimer pour donner un code réduit, ou minified.

La structure codée finale donnera ça :

Code:

<TABLE BORDER="1"><CAPTION>Titre ! (Si besoin)</CAPTION><TR><TD>Ligne 1</TD><TD>Colonne 1</TD><TD>Colonne 2</TD></TR><TR><TD>Ligne 2</TD><TD>Colonne 1</TD><TD>Colonne 2</TD></TR></TABLE>

Du style !


1) Images :

Pour aligner vos images à gauche ou à droite de votre texte, il suffit de mettre le lien de votre image à la place de "lien", et de placer left ou right dans la partie align="left".

Code:

<img src="Lien" align="left">

Vous pourrez même ajouter une marge en haut et en bas grâce à vspace (vertical Space) ou une marge à droite et à gauche grace à hspace (Horizontal Space).

Cela se passe ainsi :

Code:

<img src="LIEN.jpg" align="left" vspace="10" hspace="10">

2) CSS :

Pour décorer vos textes, il suffit de mettre votre post entre deux div.

Code:

<div>VOTRE TEXTE</div>

Maintenant, on va y ajouter du CSS ! Le css permet de définir le style de votre texte.

Code:

<div style="VOTRE STYLE">VOTRE TEXTE</div>

Maintenant, il suffit de choisir les codes que vous souhaitez utiliser.

Code:

text-shadow : 2px 2px 4px #000; /* Met une ombre noire à votre texte */
background-color : #646464; /* Définit une couleur de fond, que vous devez choisir parmi toutes les couleur HEXADECIMALES (cherchez sur google) */
color : #646464; /* Définit la couleur de votre texte */

Etc...

Il y à tout un tas de textes à mettre entre les "" après style. A vous de faire des recherches ^^. Il ne faudra pas oublir le point virugle ";" après chaque style. Ce qui donnerait :

Code:

<div style="text-shadow : 2px 2px 4px #000; background-color : #646464; color : #646464;">VOTRE TEXTE</div>

UP !

Ajout de la balise d'Images souvent demandée !
Ajout des Ombres aux textes !