Bonjour ! Ce sujet à pour but d'aider deux qui ne comprennent pas le code html/css, qui est utilisé absolument partout sur les forums. Ce petit mémo devrait vous expliquer rapidement les principales balises et vous permettre ainsi d'aborder les codes à utiliser sans trop de craintes.

(comme je dois écrire pas mal de balises, je dois utiliser le bb code, les truc entre crochets là, pour mettre en page, du coup on m'excusera la présentation qui n'est pas top ^^")


Alors, l'idée principale, c'est que les balises (les trucs entre < >) sont, en gros, des boites. <machin> l'ouvre, </machin> la referme, et on met des choses à l’intérieur. L'idée de la boite est importante étant donné qu'il faut toujours que les boites se ferment, et surtout, qu'elles s'imbriquent. Exemple :


Dans cette boite, on va donc mettre du contenu, généralement du texte et des images. Mais la boite, telle quelle, elle est moche, enfin elle a rien quoi, on la voit pas, elle a pas de taille, elle ne sert pas à grand-chose. On va donc passer à la partie la plus géniale : le css. En gros, ça veut dire « feuille de style » (si si, en anglais, je vous jure, 'fin bref !) et comme son nom l'indique, on va lui donner des informations de style. Alors là on a tout ! La taille, la couleur ou l'image de fond, les bords, comment sera le texte à l’intérieur, de quelle taille, de quelle police, s'il a une ombre, la hauteur entre les lignes, s'il sera centré ou au contraire bien justifié. C'est vraiment le css qui fait tout ce qu'il y a de beau dans un code.

Le style se présente sous deux formes :

-Soit : <balise style="information : truc ; information : truc ;">Contenu</balise>
-Soit : <balise class="mot">Contenu</balise>

Dans le premier cas, toutes les informations sont dedans, c'est assez long et généralement assez difficile à lire. Dans le deuxième cas, c'est beaucoup plus court et lisible. Et pourtant, ça revient au même. En fait, dans le cas des class, les informations de style sont enregistrés déjà quelque part sur le site. Comme ici, dans notre cas, les codes de présentation, chronologie et liens, toutes les informations de style sont enregistrés dans le panneau d'administration pour vous donner un code bien plus léger. Sans cela, la fiche de chronologie par exemple, elle passerait de ça :

Code:

<div class="chronocadre"><div class="chronoheader">Journal de bord</div>
<div class="chronomois">Mois</div>
<fieldset class="chronopetitcadre"><legend><div class="chronodate">date</div></legend><div class="chronotitre"><a href="#" target="_blank">Titre</a>
Avec : | Lieu : | En cours/Fini</div></fieldset>
</div>

A ça :

Code:

<div style="background-color:rgba(0,0,0,0.1); border:double 3px #66697c; width:90%; margin-left:5%; color:#888888; padding:5px; border-radius:2px;"><div style="text-align:center; color:#666666; margin:5px; padding-top:10px; padding-bottom:10px; background-image:url('http://i6.minus.com/jeraQEVHLU6zp_e.jpg'); font-size:18pt; border-bottom-left-radius:30px; border-bottom-right-radius:30px; border-top:3px #66697c solid; border-bottom:solid 2px #66697c; box-shadow:0px 0px 5px rgba(0,0,0,0.5);">Journal de bord</div>
<div style="width:60%; float:left; text-align:center; border-bottom:solid 1px #66697c; border-top:solid 2px #66697c; color:#666666; background-color:rgba(100,100,100,0.1); border-bottom-right-radius:20px; font-size:14pt; font-style:italic; padding-top:5px; padding-bottom:5px; margin-bottom:10px; margin-top:5px; margin-left:-5px;">Mois</div>
<fieldset style="text-align:left; width:90%; margin-left:5%; border:solid 1px #505050; padding:5px; margin-top:-15px; border-radius:2px; background-color:rgba(100,100,100,0.1); font-size:8pt;"><legend><div style="color:#777777; font-size:10pt; font-style:italic;">date</div></legend><div style="text-align:center; padding-bottom:2px; margin-top:-10px; font-size:9pt; text-shadow:2px 2px 3px rgba(0,0,0,0.5);"><a href="#" target="_blank">Titre</a>
Avec : | Lieu : | En cours/Fini</div></fieldset>
</div>

Magnifique... :') Et pourtant, vous pouvez tester, c'est exactement la même chose. C'est juste que pour ces codes, tout le style est enregistré sur le forum et quand on utilise un class, le nom à l’intérieur permet d'aller chercher l'information de style qui porte son nom.

Compris, les boites, le contenu, le style ? Et bien voilà, vous avez compris la logique globale du code !


<div> : la base de la base, c'est juste baaah... une boite. Sa principale particularité est qu'elle fait un retour à la ligne automatique quand on l'utilise.

<span> : très semblable à la div, juste un contenant vide, sauf qu'elle ne fait pas de retour à la ligne elle, on peut donc l'utiliser pour donner une information de style à l'interieur d'un texte sans que le bloc soit séparé du reste.

<img> : la balise image, une des très rares exemptions de balises qui n'ont pas de fermeture. Elle s'utilise ainsi : <img scr="adresse"/> avec comme adresse l'adresse toute simple de l'image, sans balise [img] ou autre. Après dans cette balise, on a tout à fait le droit d'ajouter un style ou un class pour lui donner des informations en plus, comme le forcer à avoir une certaine taille, lui mettre un cadre, une ombre ou n'importe quoi d'autre.

<br/> : puisqu'on est dans les exeptions, celle ci permet de faire un retour à la ligne, elle non plus n'a pas besoin d'être refermée. <br> tout court marche aussi.

<table> : celle ci est plus compliquée parce qu'elle entraîne d'autres balises avec elle. C'est un tableau, enfin, la base d'un tableau. En gros :
<table> ouverture du tableau
<tr> ouverture d'une ligne
<td> ouverture d'une colonne

Bon un dessin pour le clarifier.


C'est pour un tableau que toute l'importance de bien ouvrir et refermer ses balises prend tout son sens. Au final, ça se présente donc comme ça :

Code:

<table><tr><td>ligne 1 colonne 1</td>ligne 1 colonne 2<td></tr><tr><td>ligne 2 colonne 1</td><td>ligne 2 colonne 2</td></tr></table>

Avec toujours, bien sur, la possibilité d'ajouter des informations de style ou d'autres, comme le align="center" qui va indiquer que le tableau doit se centrer, width qui indiquera la largeur, cellspacing qui donne l'écart entre deux cellules, enfin bref, plein de choses.

<center> : permet simplement de centrer une zone

<a> : que j'allais oublier : la balise lien. Se présente sous forme <a href="lien">mot</a>, en lien, l'adresse vers laquelle le lien doit rediriger. A l’intérieur on peut aussi bien mettre un mot, une suite de mot, une image... Là aussi il faut juste mettre l'adresse, comme pour les images, et non un potentiel [ url ]. Et encore une fois, on peut lui ajouter un style si on veut changer l’apparence du lien, ne pas avoir de soulignement et autre.

Voila pour les principales ! Vous en savez à présent assez pour comprendre comment fonctionne un truc en code. Bien sur, si vous avez des questions plus ciblés, vous pouvez me le demander, la liste ici est loin d'être exhaustive !