HTLM: les bases pour faire de belle description =D

I - Quelques balises

Le HTML est composé de balises...
Elle ont chacune une fonction précise, et on leur met des paramètres (facultatifs) pour qu'elles servent à quelque chose (bah ouais, une balise <img/ toute seule, pas très utile!)

Les balises de base:

Balise a:

Citation :

<a href="adresse du lien" target="_blank">Cliquez ici!</a>

Pour créer un lien!
Demande un seul paramètre, href="l'adresse" en http://www.monsite.com par exemple Very Happy
Le paramètre target="_blank" permet d'ouvrir le lien dans une nouvelle fenêtre, virez le donc si c'est pas utile.


Balise police:

Citation :

<font color="red" size="14" face="Arial">Votre texte</font>

On peut mettre plusieurs paramètres:

La couleur: color="une couleur". La couleur peut être red, green, yellow, blue... ou en hexa: #a2ff3a par exemple (la je sais pas ce que c'est j'ai mis au pif ^^)


La taille: size="une taille". La taille est exprimée en pixels. (14 c'est une taille moyenne =) )


La police: face="une police". Attention: si le visiteur de votre page n'a pas la police, il vera la npolice serif de base je crois. Donc mettre une police que tout le monde a! (Arial, Verdana, Comic Sans MS...)



Balises gras, italique et souligné:

Citation :

<b>texte gras</b>
<i>texte italique</i>
<u>texte souligné</u>

Pourquoi b, i et u? Pour bold, italic et underline Wink

Balise image:

Citation :

<img src="chemin de l'image" width="largeur" height="hauteur"/>

Encore deux paramètres:

La largeur: width="largeur" avec la largeur exprimée en pixels.


La hauteur: height="hauteur" avec la huteur exprimée en... j'vous dirai pas ^^



Balise marquee:
Pour faire défiler du texte!

Citation :

<marquee behavior="type" width="largeur" height="hauteur" direction="une direction" scrollamount="vitesse">Texte à faire défiler</marquee>

Sans aucun paramètre, il défilera vers la gauche à une vitesse moyenne.
On peut donc mettre:

Un type de défilement: behavior="type" avec, à la place de type, scroll pour faire défiler le texte en boucle, et alternate pour lui faire faire des aller-retours.


Hauteur/largeur: je vous dirai pas ^^


La direction: direction="une direction" avec à la place de "une direction", left, pour que le texte aille vers la gauche, right pour la droite, down pour le bas et top pour le haut.


La vitesse: scrollamount="vitesse". La, il faut simplement mettre un chiffre: essayez Wink (10 à l'air pas mal)



Balise table
Pour créer un tableau!

Citation :

<table border="épaisseur de bordure" width="largeur" cellspacing="espacement cellules" cellpadding="espacement entre cellules et texte" bgcolor="couleur de fond">
<tr>//ligne 1
<td>cellule 1 de ligne 1</td>
<td>cellule 2 de ligne 1</td>
//etc...
</tr>
<tr>//ligne 2
<td>cellule 1 de ligne 2</td>
<td>cellule 2 de ligne 2</td>
//...
</tr>
</table>

Bon je pense que c'est assez clair.
On déclare le tableau avec table (qu'on oublie pas de refermer!), puis chaque ligne avec tr et chaque cellule avec td.

Largeur: Devinez?!


Bordure: border="épaisseur" avec un chiffre pour épaisseur.


Espacement des cellules: cellspacing="espacement" avec un chiffre pour espacement!


Espacement entre cellules et texte: cellpadding="un chiffre". C'est en fait la marge autour du texte de chaque cellule.


Couleur de fond: bgcolor="une couleur". On peut mettre les couleurs comme pour le texte!


On peut aussi fusionner deux colonnes sur une ligne ou deux lignes sur une seule:

Citation :

<table border="2" cellspacing="2" cellpadding="1" width="80%">
<tr>//ligne 1
<td colspan="3">seule cellule de la ligne qui occupe toute la largeur (3 colonnes)</td>
</tr>
<tr>//ligne 2
<td>cellule 1 de ligne 2</td>
<td>cellule 2 de ligne 2</td>
<td>cellule 3 de ligne 2</td>
<td rowspan="2">Ligne qui occupe la hauteur de deux lignes</td>
//...
</tr>
</table>

PS : on peut aussi mettre des paramètres à td et tr!

Fusionner des colonnes: colspan="nombre" avec le nombre de colonnes à fusionner.


Fusionner des lignes: rowspan="nombre" avec le nombre de lignes à fusionner.


Balises paragraphe, retour à la ligne, barre horizontale et caractères spéciaux
Je mets tout ça en un parce que c'est pas très utile pour mettre dans sa description, mis à part paragraphe peut-être.

Citation :

<br />

retour à la ligne (y'a pas plus simple =) )

Citation :

<hr />

barre de séparation horizontale!

Citation :

<p>Un paragraphe</p><p>Un deuxième paragraphe</p>

Pour créer des paragraphes! Pratique: retour à la ligne automatique, et ça créé un espace entre les paragraphes.

Citation :

h&eacute;h&eacute;! L&agrave;, tu comprends? &gt;&lt; &quot;il est b&ecirc;te =)

Les caractères spéciaux: pas utiles pour votre RP sur SO, puisque c'est converti automatiquement! Mais en vrai HTML, il faut écrire ça...

Citation :

&eacute; = é
&eagrave; = è
&agrave; = à
&ecirc; = ê
&gt; = >
&lt; = <

Et j'en passe...

La liste complète ici: http://www.commentcamarche.net/html/htmlcarac.php3

Allez donc jeter un oeil ici et regardez la source de la page!


Voila ce tuto est finit et je tiens a remercié Arkhiall qui est le vrai créateur de ce tutorial