HTML: bases =)

J'ai déjà vu pas mal de questions sur le HTML, comment faire ceci cela, donc je vais essayer de récapituler ici. Après, vous pourrez modifier votre RP par exemple

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:

Code:

<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
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:

Code:

<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é:

Code:

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

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

Balise image:

Code:

<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!

Code:

<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 (10 à l'air pas mal)

Balise table
Pour créer un tableau!

Code:

<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:

Code:

<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.

Pour ceux qui auraient mal compris:

colspan sur 4 colonnes
cellule 1 de ligne 2	cellule 2 de ligne 2	cellule 3 de ligne 2	rowspan sur 2 lignes
colspan sur 3 colonnes

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.

Code:

<br />

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

Code:

<hr />

barre de séparation horizontale!

Code:

<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.

Code:

héhé! Là, tu comprends? >< "il est bê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...

Code:

é = é
&eagrave; = è
à = à
ê = ê
> = >
&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!


Allez, maintenant je veux que des belles descriptions

PAs mal Arki c'est un bon tuto pour les bases et vraiment il y a tout se qu'il faut c'est vraiment bien fais
Il manque juste des exemples donc pourquoi ne pas crée une page html avec justement tous les exemples ? juste pour qu'ils aient une idée

Pourquoi pas!
Je vais faire ça

EDIT: Ok, j'ai rajouté quelques trucs que j'avais oubliés (comme les liens ) et mis un lien tout en bas vers une page pas-belle ou y'a tout ce que j'ai dit dans le tuto

HANNNN Quand j'ai poser la question pour savoir si un blaierau était intelligent, ca ne m'étonne pas que tu es dit oui Arkhi x)

Merci Arkhi, je savais tout appart les textes défilant et les tableaux !

Merci merci merci !!! *calme*

^^

Euh... je suppose que ce que t'appelles fond d'écran c'est image d'arrière plan =p
En fait y'a mieux que ca... ^^
Normalement sur un site faut mettre ca dans le css.. mais la on peut pas!
Donc on fait un div:

Code:

<div style = "background-image: url('adresse de l'image');">page</div>
ou
<div style = "background-color: une couleur de fond;">page</div>

Donc on ouvre le div tout au début et on le ferme tout à la fin!
Plus simple qu'un tableau non?

J'en étais sur !

*a sauvé l'honneur blaireau*
badger honor
l'honneur blaireau

lol j'avoue que avant je me poser des questions sur les blaireaux :cyclops:

Le blaireau maintenant respecté sera

Euh... je suppose que ce que t'appelles fond d'écran c'est image d'arrière plan =p
En fait y'a mieux que ca... ^^
Normalement sur un site faut mettre ca dans le css.. mais la on peut pas!
Donc on fait un div:

Code:

page ou page

Donc on ouvre le div tout au début et on le ferme tout à la fin!
Plus simple qu'un tableau non?

Pourquoi utilisé des div quand on a pas besoin ?

ça aide merci invité

IE ne reconnaît pas la balise < center>
Il faut mettre du CSS pour que ça soit reconnu par tous les navigateurs mais on ne peut pas faire usage de CSS sur les descriptions de SO ^^
Donc pas possible.

(sinon, à titre informatif et sans page CSS à côté, c'est la balise

Code:

<span style="text-align:center;">Texte</span>

si c'est à l'intérieur d'un paragraphe ou

Code:

<div style="text-align:center;">Texte</div>

si c'est un titre ou un paragraphe entier)

Euh... j'utilise IE, et les images que je centre avec un < center> sont centrées =o


Fait un retour à la ligne après ton < tr / >

Bug du code x(

< tr / >
< center >< img src= "" >< br />
< tr / >

Oui c'est avec IE6 que c'est pas compatible me semble... les versions au dessus c'est bon