Aide HTML pour les "chat rooms"...

J'ai souvent passé mon temps sur CyberCafe21 ou Webwatch (DAD's Chat) à expliquer comment utiliser des codes HTML pour poster des messages en couleurs ou avec des effets spéciaux. À force d'expliquer souvent les mêmes choses, j'ai fini par garder une copie de mes explications pour ne pas devoir les retaper à chaque fois. Vu que chaque réponse entraînait de nouvelles questions (les gens sont curieux...), j'ai maintenant rassemblé toutes ces explications sur une page accessible à tous.

Ceci n'est pas un cours de HTML. Il s'agit juste d'une collection de trucs et astuces avec des exemples qu'il suffit de taper tels quels. Pour apprendre à se servir de HTML correctement, rien de tel qu'un bon bouquin de référence ou une petite introduction sur le web. Si tu es courageux(se) ou masochiste, tu peux aussi apprendre comme je l'ai fait, en lisant le document de référence qui définit HTML.

Une autre manière d'apprendre HTML est de regarder comment font les autres et de copier leurs codes. Pour cela, il suffit de regarder le code source de la page qui contient les effets qui t'intéressent.

Dorénavant, au lieu de poster des explications détaillées sur la manière de poster une image ou d'utiliser les couleurs, il me suffira de poster le message suivant :

Des explications pour poster des images ou des messages en gras, en italiques, en couleurs ou en clignotant sont disponibles sur cette page : http://www.gamers.org/~quinet/chat/.

Pour mettre les caractères en gras ou en italiques:
<B>Gras</B> et
<I>italique</I>, ou bien
<I><B>les deux à la fois</B></I>.

Pour embêter les gens avec des clignotements:
<BLINK>Voilą !</BLINK>

Pour écrire en grand et en couleurs :

<FONT SIZE=7 COLOR="#FF3399">Voilą !</FONT>

Tu trouveras une liste de codes de couleurs sur: http://www.habanero.com/hex/.

Pour écrire avec des caractères différents, tu peux bien sûr utiliser le gras et l'italique, mais aussi changer de police de caractères :

<FONT FACE="Arial, Helvetica">Exemple en Arial ou Helvetica</FONT>
<FONT FACE="Comic Sans MS, Helvetica">Exemple en Comic Sans MS</FONT>

Remarque: les polices telles que "Comic Sans MS" ou "Arial" ne sont disponibles que sous Windows 95 ou NT. Beaucoup de gens utilisent d'autres systèmes (MacOS, Linux, Solaris, etc.) et n'ont donc pas ces polices de caractères. C'est pourquoi il est utile d'inclure des alternatives telles que "Helvetica", "Courier" ou "Times" qui existent sur la plupart des systèmes.

Pour écrire un texte avec la première lettre un peu plus grande et de couleur différente, il suffit d'utiliser les codes <FONT> habituels pour la première lettre, et de faire de même pour le reste du texte :

<FONT SIZE=5 COLOR="#33FF99">E</FONT><FONT SIZE=3 COLOR="#FF9933">xemple...</FONT>

Résultat à l'écran: Exemple...

Le même principe peut être utilisé pour écrire avec un dégradé de couleurs, mais c'est assez long à taper et il vaut mieux préparer son code à l'avance ou écrire un programme qui fait ça automatiquement.

Remarque : Attention à ne pas laisser d'espace ou de retour à la ligne entre la première lettre et le reste du texte. Il peut y avoir des espaces à l'intérieur des tags HTML (entre < et >) mais pas entre deux tags, sinon ces espaces apparaîtront dans le texte et la première lettre sera séparée du reste.

Pour inclure une image :
<IMG SRC="http://www.gamers.org/~quinet/chat/aniflowe.gif" WIDTH=41 HEIGHT=37>
Cela donne ceci:

Remarque : WIDTH et HEIGHT donnent la taille exacte de l'image (en pixels) pour permettre au browser de réserver de la place pour une image dans la page avant même que l'image ne soit chargée. Il n'est pas indispensable d'inclure WIDTH et HEIGHT, mais il est conseillé de le faire afin de ne pas ralentir inutilement le chargement de la page chez les autres. Si les dimensions de l'image sont incluses, le reste de la page peut s'afficher même si le serveur sur lequel se trouve l'image est un peu lent. Sans les dimensions de l'image, le browser devra attendre avant d'afficher la page. Attention à ne pas se tromper dans les dimensions de l'image, sans quoi des effets bizarres peuvent se produire et certaines animations ne marcheront pas.

Remarques à propos des images : pour que les images puissent être lues par tout le monde, il est indispensable qu'elles se trouvent sur un serveur WWW et il faut donner leur adresse (dans <IMG SRC="...">) sous la forme "http://adresse.du.serveur/répertoires/image".

Autrement dit, il n'est pas possible de poster une image qui se trouve sur ton disque dur (à moins que ton ordinateur soit un serveur web). Si tu as déjà une homepage sur un serveur, le mieux est d'y transférer tes images, ce qui les rendra accessibles à d'autres. Sinon, tu ne pourras pas poster tes images personnelles, ce qui ne t'empêche quand même pas de poster des images faites par d'autres, et il y en a des milliers disponibles sur le réseau.

Pour connaître l'adresse (URL) d'une image qui t'intéresse sur une page web afin de pouvoir la reposter quand tu veux, il suffit de cliquer dessus avec le bouton droit de la souris. Un menu devrait apparaître avec plusieurs options, en fonction du programme que tu utilises. Une de ces options doit te permettre de copier l'adresse de l'image ou d'ouvrir l'image seule (dans ce dernier cas, l'adresse de l'image apparaîtra en haut de la fenêtre).

Quand on ouvre une image seule, ses dimensions apparaissent en général dans la barre de titre de la fenêtre. Il est utile de les noter pour les utiliser avec WIDTH et HEIGHT quand tu postes l'image.

Exemple de cadre simple sans bord, avec fond coloré :

<TABLE><TR><TD BGCOLOR="#660066">

Exemple de tableau

</TD></TR></TABLE>

Autre exemple pour faire des dégradés :

<TABLE CELLPADDING=3><TR><TD BGCOLOR="#FF0000">
<TABLE CELLPADDING=3><TR><TD BGCOLOR="#FF6600">
<TABLE CELLPADDING=3><TR><TD BGCOLOR="#FF9900">

Exemple de tableaux encastrées

</TD></TR></TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>

Pour un lien hypertexte:
<A HREF="http://www.gamers.org/~quinet/chat/">Cliquez ici</A>

Enfin, voici comment expliquer HTML à d'autres, en postant les tags HTML sans qu'ils ne soient modifiés. Le truc, c'est de taper les codes en remplaçant les < par < et les > par >, c'est-à-dire que pour obtenir <BLINK> il faut taper <BLINK>. Pour faire plus joli, on peut prendre une police de caractères fixes avec <CODE> et </CODE>.

Voici un exemple que j'ai inclus plus haut:

Pour embêter les gens avec des clignotements:
<BLINK>Voilą !</BLINK>

Et voici le code que j'ai tapé pour l'obtenir:

Pour embêter les gens avec des clignotements:<BR>
<CODE>&lt;BLINK&gt;</CODE><BLINK>Voilà !</BLINK><CODE>&lt;/BLINK&gt;</CODE>

Et si tu veux expliquer à d'autres comment taper < et >, saches que & peut s'écrire avec & (donc < s'écrit <). Simple, non ?

Après avoir lu ces quelques explications, tu peux maintenant jeter un coup d'oeil sur mes autres pages de trucs et astuces, qui contiennent quelques exemples plus élaborés et une petite collection d'images. Bon amusement...