E-Mail formulaire HomePage

COMMENT ON FAIT UNE
JOLIE PAGE WEB!
FACILE, PAS CHER ET SANS SE CASSER LA TETE



Dernière mise à jour : 3 octobre 1998

QUEL EST MON PROPOS DANS CETTE PAGE?

Le problème avec les informaticiens, c'est que si vous leur demandez de vous expliquer le comment on fait les pages OUEB, ils commencent d'entrée à vous brouter menu avec des histoires de CGI, de formats d'affichage, les différentes versions du HTML, et vas-y que je te disserte doctement sur les subtiles différences entre le JAVA et le JAVASCRIPT. Pour ma part, j'estime que je JAVA est boeuf et doit aller à la poubelle (c'est le JAVA boeuf, qui va a la poubèèèèleuu...). On peut fort bien se débrouiller, ou en tout cas faire illusion, avec juste les quelques notions brièvement exposées plus bas.

En tout cas je vous rassure, je ne suis PAS(*) informaticien, je suis chimiste. La chimie est la science exacte et rigoureuse qui fait que quand on mélange deux produits, on en obtient un troisième, voire un quatrième, ou un changement de couleur, ou une élévation de température, ou une odeur à faire vomir un vautour enrhumé, ou une explosion (dans notre jargon, on dit que la réaction est "très exothermique"), ou tout à la fois, ou le plus souvent rien du tout, cela dépend de la température, de la pression, de l'humidité, de l'âge du chimiste, du signe astrologique de son canari, de la vétusté des locaux et de divers autres facteurs tout aussi incongrus. Bref, je ne suis pas du genre à m'encombrer de considérations fumeuses, et dans la présente méthode, seul comptera le résultat obtenu.

Je vous assure qu'après avoir lu, compris et expérimenté la présente page, et après l'avoir décortiquée, vous pourrez à bon droit faire le fier à bras devant un employeur en lui disant "Oui, Môssieur, je programme en HTML", vous emballerez sec au bureau en montrant vos créations, ta femme revient, tu gagnes au PMU, tu envoûtes tes ennemis etc...

Et le plus amusant, c'est que vous n'avez besoin d'AUCUNE connaissance préalable en programmation.

Cool non?


* Euh... finalement, comme la plupart des chimistes, je me suis mis au COBOL.

L'INDEX

Ce document est en trois parties, la partie facile (FINGERS IN THE NOZE) vous permettra de composer rapidement des pages sans prétention, mais bien faites quand même. Si vous aimez ça, vous pourrez toujours regarder les concepts expliqués dans HAÏ CARAMBA, qui sont plus ardus et pas indispensables, mais qu'il est bien agréable de savoir maîtriser le cas échéant. Puis un bref chapitre sera consacré au problême de l'hébergement et au transfert de vos fichiers, ainsi qu'a l'enregistrement de votre site sur les utilitaires dédiés à cet usage, bref, des CONSIDERATIONS BASSEMENTS MATERIELLES.

FINGERS IN THE NOZE

HAÏ, CARAMBA

CONSIDERATIONS BASSEMENT MATERIELLES

UN DERNIER CONSEIL

!!! NOUVEAU !!!

!!! FREE !!!


Quelques trucs et astuces pour bien convevoir votre page!
ICI

HTML? KEZAKO?

Mais au fait, ça veut dire quoi, le sigle HTML que j'ai glissé tout à l'heure?

Ça veut pas dire "Hardi, Tueur Mal Luné", ni "Hoy Ta Mère La tepu", ni "HyperText Markup Language", ni... ah merde, si, ça veut dire "HyperText Markup Language". Bon, on reprend.

Donc, HyperText Markup Language (hyper pour les amis), c'est en fait ce que nous allons étudier. Dans les grandes lignes, je vous rassure. C'est un langage de programmation(*) de pages où on peut glisser des liens hypertexte (d'où le nom). Et alors là vous me dites "oui, mais c'est quoi un lien hypertexte?". Bravo, y'en a deux qui suivent au fond.

Si vous avez déjà été faire un tour sur le web (on supposera que c'est le cas), vous avez sûrement vu des bouts de texte soulignés et écrits dans une autre couleur. Si vous cliquez dessus, vous avez noté qu'ils vous envoyaient ailleurs sur la même page, voire même sur une autre page. C'est ça des liens hypertextes. Par exemple, en cliquant ici, vous pouvez aller au fond de cette page (démerdez-vous pour revenir). Et en cliquant , vous pouvez dire un petit bonjour à Bill. Et ben mine de rien, ici et sont des liens hypertextes. Versteht? Sehr gut! Bientôt, jeune Jedi, toi aussi les liens hypertextes à faire tu apprendras, mais pour le moment, ne sous-estimons pas le pouvoir du côté obscur et commençons par le commencement.

(*) - Non, ce n'est pas un langage de programmation. Le HTML n'a pas de structures de controle (IF-THEN-ELSE, FOR X=...). Ne croyez donc pas bêtement toutes les conneries que j'écris.


AU COMMENCEMENT ETAIT LE VERBE.

Avant faire de l'hypertexte, on va commencer par s'assurer qu'on sait faire du texte normal. A cet effet, vous allez ouvrir un éditeur de texte quelconque (SimpleTexte sur mac, clipboard sous windows, asedit sur UNIX etc...), taper quelques lignes de texte grotesques (totor aime tutur, mon chat est velu...) et enregistrer votre prose sous le nom ESSAI1.HTM (PC DOS ou WINDOWS 3) ou essai1.html (autres systèmes). Si vous ignorez sous quel système d'exploitation vous vous trouvez, je ne peux pas grand chose pour vous. Une fois ceci fait, allez voir votre navigateur web (NETSCAPE, INTERNET EXPLORER...) et allez chercher une option qui doit s'appeler Ouvrir Fichier, ou Open File, ou quelque chose d'équivalent, et chargez votre fichier. Vous aurez alors la joie immense de constater que ÇA A MARCHÉ! Votre texte s'affiche bien dans la fenêtre idoine! Vous êtes content et vous pouvez mourir la conscience en paix, vous avez conçu une page web. Bon d'accord, avec ça, vous n'allez pas rentrer dans les cool sites de yahoo, mais c'est un début.

Notez que HTML prend les retour chariot pour des espaces, c'est à dire qu'il ne va pas à la ligne. Le seul moyen d'aller à la ligne c'est de mettre un <BR>. Si on sait pas ça, on est mal parti.

Deux remarques quand même. D'abord, cette page web ferait s'étrangler un puriste. Une VRAIE page web doit impérativement commencer par des <HEAD></HEAD> et des <TITLE></TITLE> et tout un tas de trucs aussi ésotériques, mais dont les gens de l'art pensent qu'ils sont indispensables. Curieusement, ça marche même sans.

Deuxièmement, on a utilisé un éditeur de texte standard. Mais il existe des éditeurs HTML, c'est à dire des programmes qui vous feront gagner ENORMEMENT de temps pour concevoir vos pages. Il en existe des piles, pour la plupart en shareware, que l'on peut télécharger sur le net. Deux adresses parmi mille : allez fouiller avec un programme de transfert de fichiers chez ftp.cict.fr, ou avec votre navigateur dans http://ftp.sunet.se/pub/, vous trouverez sûrement votre bonheur.


Z'Y VA, LES TAGS.

En HTML, les trucs écrits entre < > sont appelés tags. Ils ne sont pas affichés à l'écran mais donnent des directives à votre navigateur. Les tags vont toujours - disons, la plupart du temps - par deux, il y a le tag ouvrant et le tag fermant, et le tag ne s'applique qu'à ce qu'il y a entre les deux. Pas compris? Alors un exemple :

Un tag nommé B (pour Bold, gras), permet de passer une partie du texte en gras. Pour ce faire, le texte en question devra commencer par <B> et se terminer par </B>. Notez que ça marchera aussi en minuscules : <b> et </b>. Compris? Le résultat, le voilà. Vous observez que le tag fermant, ici </B>, ne se distingue du tag ouvrant que par une /. C'est une règle générale.

Voilà, vous pouvez maintenant tagger comme un fou sur vos pages, sans craindre de vous faire serrer par les keufs.


FAISONS CHIANT, PARTIE 1 : L'EN-TETE DE MA PAGE

L'en-tête, c'est tout ce qui est au début de la page et qui ne sert pas à grand chose a priori, puisque ça ne sera pas affiché. Cependant les informaticiens sont des gens traditionnalistes, donc si vous ne voulez pas passer pour un zozo, vous aurez à coeur de faire une en-tête carrée, selon les règles millénaires qui président à cet art.

Commencez par écrire au début <HTML>. C'est pour indiquer au navigateur qu'il a bien reçu une page en HTML. Des fois que quelqu'un aurait l'idée aussi sotte que grenue d'envoyer une page en BASIC ou en Javanais. Notez que HTML est un tag et qu'à la fin, il faudra donc le... FERMER! Y'en a deux qui suivent. Mais je m'en fous, j'ai les noms! Donc vous savez comment votre page va se terminer, par </HTML>.

Une fois cette formalité accomplie, on va signifier que l'on commence l'en-tête proprement dite, par un autre tag, nommé <HEAD>.

Puis, dans cette partie, on va mettre le titre de la page avec le tag <TITLE>. On inscrit alors le titre qu'on a choisi. Notez au passage qu'il ne faut pas confondre titre de la page et titre du fichier. Si vous avez un PC sans win95, votre titre de fichier ne pourra dépasser 8 caractères, alors que le titre de la page peut très bien prendre la forme <TITLE>CECI EST LE TITRE DE MA PAGE WEB, ET QUICONQUE AURA DES PROBLEMES AVEC CA DEVRA VENIR ME LE DIRE EN FACE, ENTRE HOMMES</TITLE>. Lorsque vous chargerez votre page avec votre navigateur, c'est ce titre qui s'affichera en haut. Essayez quand même de faire court.

C'est aussi dans cette région qu'on peut mettre les META, mais j'en parlerais plus tard. Pour l'instant, fermons ceci par un </HEAD> bien senti.

Et maintenant, ouvrons le corps du document, c'est à dire la partie principale, avec le tag <BODY>. Nous allons en profiter pour signaler que les tags peuvent avoir des paramètres. Ainsi, on peut se servir de BODY pour redéfinir les couleurs d'affichage par défaut. La commande <BODY BGCOLOR="#FFFFFF"> permet d'afficher sur un fond blanc (au lieu de gris par défaut). Mine de rien, ce petit truc permet de donner à vos pages un aspect un peu moins austère. Les couleurs ainsi définies sont au format RRVVBB, c'est à dire que les deux premiers chiffres hexadécimaux commandent le niveau de rouge, les suivants le vert et les derniers le bleu. Si vous ne maitrisez pas bien la théorie trichromique de la lumière ou les calculs en base 16, vous téléchargez un éditeur HTML, qui se chargera de tout cela pour vous. De la même manière, vous pouvez ajouter la variable TEXT="#RRVVBB", pour modifier la couleur du texte par défaut, LINK="#RRVVBB" pour la couleur des liens hypertextes, VLINK="#RRVVBB" pour les liens déja visités et ALINK="#RRVVBB" pour les liens actifs (qui ne le restent d'ailleurs qu'une demi-seconde, ce n'est donc pas très important). Dans le BODY, vous pouvez aussi mettre une commande qui chargera une image en fond de page. On y reviendra.

Pour clore ce chapitre, j'aimerais vous montrer à quoi ressemble l'en-tête de cette page que vous êtes en train de lire.

<HTML>
<HEAD>
<TITLE>DO IT YOURSELF</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000080" LINK="#FF0000" VLINK="#800000" ALINK="#00FF00">

Si vous comprenez tout ce que vous lisez, bravo, vous pouvez passer à la suite.


COMMENT ON FAIT LES TITRES

Ben en gros, y'a deux façons.

La plus simple est d'utiliser les titres prédéfinis, avec les tags <Hx>, où x est un nombre entre 1 et 6. Plus x est grand, plus le titre est petit. Par exemple, un texte situé entre les tags <H1> et </H1> sera un gros titre, entre <H4> et </H4> ce sera un titre plus petit. Pour mes titres de chapitre, j'ai utilisé le type 3.

Voici un titre H1

Voici un titre H2

Voici un titre H3

Voici un titre H4

Voici un titre H5
Et voici un titre H6

Compris? Mais peut-être cela ne vous suffira-t-il pas, si vous voulez un titre centré, ou à droite, ou dans une autre couleur, ou en italique, ou dans une autre taille, ou tout ceci ensemble, il faudra utiliser les tags de mise en forme.


LES PARAGRAPHES

Apparemment, les puristes tiennent à ce qu'un texte HTML soit mis sous forme de paragraphes. Pour ce faire on utilise le tag <P>, qui définit le début d'un paragraphe. Il en profite pour insérer une ligne vide. Le principal intérêt du tag P est à mon avis son paramètre ALIGN, qui permet de changer l'alignement du texte. Par défaut, il se colle à gauche, mais on peut le mettre à droite ou au centre, avec les options "left", "center" ou "rigth"

CODE EFFET
<P ALIGN="left">TEXTE</P>

TEXTE

<P ALIGN="center">TEXTE</P>

TEXTE

<P ALIGN="right">TEXTE</P>

TEXTE

Pour les browsers les plus récents (version 4), le paramètre "justify" est enfin supporté. Il permet au texte d'occuper toute la largeur de la fenêtre et d'éviter les effets de crénelage à droite. C'est tout de suite plus joli.

Voici un exemple de texte justifié. J'aurais aussi pu prendre un exemple de texte injustifié, mais j'ai préféré prendre un exemple de texte justifié. C'est comme ça, c'est la vie. Par exemple, une proclamation visant à l'extermination des papillons est un texte justifié, par contre la lettre me demandant de payer la redevance TV est totalement injustifiée, au vu des programmes offerts.




LE TAG A DEDE

Bien des gens l'ignorent, mais il est possible de faire en sorte que la première ligne d'un bloc de texte soit mis automatiquement en retrait, et ce en le mettant après le tag :

<DD>texte en question.

Exemple :

Je suis sale. Les poux me rongent. Les pourceaux, quand ils me regardent, vomissent. Les croûtes et les escarres de la lèpre ont écaillé ma peau, couverte de pus jaunâtre. Je ne connais pas l'eau des fleuves, ni la rosée des nuages. Sur ma nuque, comme sur un fumier, pousse un énorme champignon, aux pédoncules ombellifères. Je crois qu'il est temps que j'aille me laver.

Ce tag est injustement méconnu. Pourquoi? Parce qu'il marche avec netscape 3, mais pas avec internet explorer 3 (pour les versions plus récentes, j'ignore). C'est les boules hein? Eh, Bill, tu te réveilles?

Si vous voulez absolument mettre un début de paragraphe en retrait quel que soit le navigateur, il va falloir ruser. Voici comment on procède. Tout d'abord, il faut créer une image que vous intitulerez "rien.gif", par exemple. Cette image ne comportera qu'un (1) pixel. Donc elle sera au format 1x1. La couleur de ce pixel, vous la définirez transparente. Si vous ne pouvez pas (ou ne savez pas) faire un GIF transparent, faites le de la couleur du fond que vous avez choisi. Vous pouvez aussi vous servir du fichier rien.gif que j'utilise sur cette page, c'est cadeau. Puis, insérez en début de ligne <IMG SRC="rien.gif" HEIGHT="1" WIDTH="xxx">, où xxx est le nombre de pixels de votre décalage. Et le tour est joué! J'ai vérifié, ça marche sur IE 3.0! En plus, on peut moduler la longueur du décalage comme on en a besoin. C'est pas beau?

Alors le Petit Chaperon Rouge dit "Oh, mère-grand, comme vous avez de grands yeux!", et le loup lui répondit "C'est pour mieux te regarder mon enfant.". Et le Petit Chaperon Rouge dit "Oh, mère-grand, comme vous avez de grandes oreilles!", et le loup lui répondit "C'est pour mieux t'écouter mon enfant!". Alors le Petit Chaperon Rouge dit "Oh, mère-grand, comme vous avez une grande..." etc...


REMISE EN FORME POUR TEXTES TROP GRAS

Les tags de mise en forme fonctionnent tous de la même façon, c'est à dire qu'ils modifient le texte mis entre <TAG> et </TAG>.

Voici les tags simples

TAGEFFET
Btexte en gras
EMmise en valeur (en général italique)
STRONGautre type de gras (équivalent à B)
BLINK texte clignotant
Itexte italique
Usouligné (browsers récents)
TTcaractères à largeur fixe
STRIKEtexte barré
BIGtexte plus gros
SMALLtexte plus petit
SUBindice
SUPexposant
KBDstyle machine a écrire
BLOCKQUOTE
paragraphe mis en retrait
ADDRESS
pour mettre une adresse (internet ou autre). Aucun intérêt.
PRE
texte préformatté (très utile, essayez).

En fait beaucoup de ces tags sont inutiles, car les navigateurs WEB n'en tiennent pas compte. Il y en a d'autres, que je ne mets pas, faute de leur avoir trouvé un quelconque intérêt.


LE TAG "FONT", IL EST BIEN PRATIQUE

Le tag FONT présente l'intérêt de modifier la taille et la couleur du texte qui se trouve dedans, grâce aux variables COLOR et SIZE.

SIZE modifie la taille des caractères, soit de façon relative (c'est à dire par rapport à une taille de caractère par défaut, qui est apparemment 3), soit de façon absolue (et indépendante de la taille de base). Voici le tag FONT à l'oeuvre:

RELATIFEFFETABSOLUEFFET
-3texte1texte
-1texte2texte
+1texte3texte
+3texte4texte

Si vous avez trouvé cela assez confus, je vais vous embrouiller en vous disant qu'on peut modifier la taille de la fonte par défaut, avec le tag BASEFONT, qui s'utilise exactement de la même manière.

Mais vous n'avez pas besoin de tout cela pour écrire vos pages HTML, je garderais donc sur ce sujet un silence gêné et prudent.

On peut, pour les browsers récents (netscape 3), modifier la fonte utilisée avec l'option FACE. Ainsi le tag<FONT FACE="Arial">texte en arial</FONT> met le texte en fonte arial. Ben oui.

texte en arial

Pour une fois, Netscape et MSIE se sont entendus (si si) pour rendre standard sept fontes, qui sont donc Arial, Arial Black, Comic Sans MS, Courier New, Impact, Times New Roman (qui est la fonte par defaut), et Verdana. Si vous avez N 3.0 ou MSIE 2.0, ces fontes ont été installées a votre insu sur votre ordinateur. Si elles ne s'affichent pas, c'est que soit vous êtes un con et vous les avez effacées (comme moi...), soit vous avez un vieux navigateur et il vous en faut un autre de toute urgence, soit vous êtes gravement maudit par Shub-Niggurath, la chèvre noire des bois aux mille chevreaux. Certaines versions de MSIE font aussi les fontes Georgia et Trebuchet MS (allez les telecharger sur le site de microsoft, pour une fois que c'est gratos...).

Notons que si on appelle dans un FACE une fonte qui n'est pas installée dans l'ordinateur, elle s'affiche en police par défaut (Times New Roman en général), sauf si on a eu la bonne idée de spécifier des fontes "de remplacement", par exemple FACE="Verdana, Arial, Woolbats" affichera en verdana s'il y a, en arial sinon, et si arial n'est pas installée (vous seriez bien le premier), en woolbats. Et si woolbats n'est pas non plus, ben vous êtes bon pour vous taper du times machin.

Comme promis, on peut aussi modifier la couleur de la fonte, selon le même format que pour l'en-tête. Vous vous souvenez, c'était quelque chose du genre #RRVVBB.

Pour fixer les idées, le code HTML suivant:

<FONT FACE="Arial" SIZE="+1" COLOR="#FF5500">Ceci est mon texte</FONT>

aura pour effet d'écrire un texte un petit peu plus gros que la normale (+1), en caractères Arial, dans une couleur à dominante rouge, avec une pointe de vert. On essaie : Ceci est mon texte . C'est pas beau?

Eh, un truc! les tags FONT se recouvrent les uns les autres! quand on fait

<FONT COLOR="#FF0000">rouge<FONT SIZE="5">grandrouge</FONT>rouge<FONT COLOR="#0000FF">bleu</FONT>rouge</FONT>

on obtient : rougegrandrougerougebleurouge

Notez comme les <FONT> et </FONT> s'emboitent et notez l'effet produit. D'accord, dit comme ça, ça semble évident, mais un jour vous en aurez besoin, et vous vous creuserez la teté pendant des jours de dur labeur, et puis à la fin, au lever d'un petit matin blême, mal rasé, les yeux douloureux d'avoir tant galéré, solitaire devant votre écran comme un vieux loup de mer buriné par les embruns déchaînés, vous aurez alors l'illumination salvatrice et vous vous frapperez le front de tristesse en vous disant "Mais bon sang, Asp Explorer l'avait écrit dans son site, et moi, homme de peu de foi, je m'étais gaussé de son enseignement!" et alors vous serez pris de sanglots et de remords amers. Bien fait.


LE TAG HR

Le tag <HR> mis dans un document signale que l'on insère une "horizontal rule", c'est à dire une de ces barres que vous avez vues dans cette page pour séparer les chapitres. Je me bornerais à dire que HR jouit des paramètres HEIGHT et WIDTH, qui permettent d'en varier la taille. Ce simple petit artifice donne un aspect "pro" à vos page et ne coûte pas cher en ko, donc mon conseil est : USEZ ET ABUSEZ DES HR, DIEU VOUS LE RENDRA.


LES LIENS INTERNES

En vérité je vous le dis, il existe trois types de liens hypertextes.

Donc nous parlerons ici des liens internes à votre page. Pour ce faire, on usera du tag <A>, qui gère tous les liens, et on encadrera une partie du texte (la cible) par <A NAME="nom"> et </A>. Puis on crée le lien proprement dit, qui pointe vers cette cible, en entourant une partie de texte entre <A HREF="#nom"> et </A>. Notez que le nom du lien peut être quelconque, mais que pour la clarté du document, il vaut mieux qu'il ait un rapport avec ce dont il est question. Notez aussi le #, qui se met après HREF mais pas après NAME, sinon panpan cucul (votre navigateur vous éjecte).

En pratique, admettons que l'on veuille mettre un lien pointant vers le fond de cette page. On va donc aller au fond de la page, et encadrer une portion quelconque du texte entre <A NAME="fondpage"> et </A>, puis on revient ici et on encadre le texte qui fera lien, par exemple LIEN VERS LE BAS, entre <A HREF="#nom"> et </A>. IL EST ICI DE LA PLUS GRANDE IMPORTANCE DE FERMER LES TAGS!!

<A HREF="#fondpage">LIEN VERS LE BAS</A>
.
.
.
<A NAME="fondpage">FOND</A>

On essaie : LIEN VERS LE BAS

Normalement, une fois qu'on a fait ça une fois, on se sent plus intelligent. Notez au passage que le lien est souligné et mis en couleur automatiquement, vous n'avez rien à faire. Pratique.


LES LIENS VERS D'AUTRES PAGES DE VOTRE SITE

Je vous conseille tout d'abord de mettre tous les documents de votre site dans le MEME répertoire, ça vous épargnera de vous emmêler les pinceaux dans les arborescences multiples, redondantes et cyclothymiques.

Sinon le principe est le même que pour les liens internes, à part qu'il n'y a pas de NAME qui tienne, puisque la page-cible sera simplement désignée par son nom de fichier.

Supposons que vous vouliez mettre un lien vers une page intitulée PAGETEST.HTM (donc, sur PC), dans le même répertoire que celle sur laquelle vous écrivez, il vous faudra libeller le lien ainsi :

<A HREF="PAGETEST.HTM">texte de mon lien</A>

Peut-on imaginer plus simple? Allez on essaie : zou, c'est parti!


LIENS VERS D'AUTRES ORDINATEURS, L'ESPACE INFINI, LES AUTRES DIMENSIONS

Pour joindre une page située sur un autre ordinateur, c'est simple, après HREF, entre les guillemets, on met l'adresse du site en question. Exemple : pour renvoyer sur le site de la Maison Blanche, c'est :

<A HREF="http:/www.whitehouse.gov/">MON COPAIN BILL</A>

Vraiment, c'est d'une simplicité biblique.

Pour contacter les espaces infinis et les autres dimensions, c'est pas plus compliqué si vous avez un ordinateur positronique 1024 bits à 66GHz, 64To de disque dur et un modem a transfert quantique 14400 Gb/s (ou mieux). Ce genre de configuration restant pour l'instant assez confidentielle, on en reparlera dans deux siècles ou trois.

Notez pour finir que :

On peut aussi cibler un marqueur de type <A NAME="nommarque"> dans un autre fichier, en utilisant une syntaxe du genre <A HREF="nomfic.htm#nommarque">

Pour changer, on va faire un peu de javascript. Quand on pointe un lien avec la souris, l'adresse de ce lien apparaît en bas, dans la barre de votre browser web. Mais on peut changer ce texte pour mettre quelque chose de plus explicite, ou de plus marrant. Pour ce faire, on va ajouter deux lignes de javascript. Eh oui. Avant le BODY de votre page, rajoutez la chose suivante :

<SCRIPT LANGUAGE="JavaScript">
function setStatus(msg) {status = msg}
</SCRIPT>
Puis rédigez votre lien ainsi :
<a href="fichier.htm" onMouseOver="setStatus('texte de barre');return true">texte de lien</A>

Voici ce que ça donne : Regardez en bas avant de cliquer bêtement


LIENS VERS UN EMAIL

Si vous voulez que le lecteur de votre page puisse vous répondre, vous emploierez le lien ainsi fait :

<A HREF="mailto:xxxxxxx@xxxxxx.xx"></A>

où la succession de x représente votre Email.

Exemple : vous pouvez m'écrire en cliquant ici

Truc utile : vous pouvez proposer un sujet par defaut! Pour cela, il faut libeller le lien ainsi :

<A HREF="mailto:president@elysee.fr?subject=Felicitations, monsieur Chirac"></A>

Attention à ne pas mettre de guillemets autour du sujet voulu, et de bien mettre le point d'interrogation.


TE, ENTITE, SYNTHE

Comme HTML est boeuf, il ne comprend pas forcément tous les caractères. C'est à dire que les caractères anglosaxons il les affiche normalement, mais dès qu'on veut un é, ou un ¿, ou un Ø, il faut ruser. En effet, les navigateurs n'afficheront ces caractères que s'ils sont configurés dans la langue considérée, ce qui n'est pas forcément le cas. Ainsi dans cette page, il y a de nombreux accents. Si votre navigateur est configuré en français, ils s'affichent normalement. Mais sinon, vous obtenez n'importe quoi.

Si vous écrivez des pages a destination exclusive des francophones, pas de problème, ce chapitre ne vous est d'aucune utilité. Mais si vous souhaitez que des estrangers puissent la lire, il faut remplacer les caractères spéciaux par ce que l'on appelle des entités. Une entité commence par & et se termine par un ;. Ainsi pour afficher un accent aigu, vous devrez taper &eacute;. C'est long, c'est pas beau dans le code, et on doit mémoriser pas mal d'entités pour être à l'aise, ce qui est chiant, limite. Bref, mon conseil (je me répète non?) : PROCUREZ-VOUS UN EDITEUR HTML! En général, ils convertissent les caractères en entités (et inversement) d'un simple clic de souris.


UN PETIT GIF VAUT MIEUX QU'UN LONG DISCOURS

Peut-on vraiment, de nos jours, composer une page web sans mettre des images dedans? Certes non!

On va donc utiliser une commande (qui n'est pas un tag, donc elle ne se ferme pas) <IMG SRC="nom_image">, ou nom_image est... ben, le nom de l'image. Je suis fatigué tout d'un coup. Si l'image est dans votre répertoire, comme je vous y encourage, et s'appelle IMAGE1.GIF, vous devez inscrire :

<IMG SRC="IMAGE1.GIF">

C'est tout con. Notez que l'image peut être au format GIF ou au format jpeg (JPG pour les PC). Pour les autres formats, vous pouvez essayer, mais l'effet n'est pas garanti. Les images GIF sont plus rapides à afficher et sont souvent de meilleure qualité que les JPG, surtout pour les images faites de surfaces pleines et unies. L'image qui va me servir à illustrer ce chapitre est typique de ce qu'il faut mettre en GIF. Par contre le format JPG est très adapté au traitement des photo numérisées, et les fichiers générés sont beaucoup plus petits que les GIF, donc plus rapides à charger sur le net. Pour résumer, les boutons, petits mickeys et autres menu fretin dont vous agrémenterez vos oeuvres se sentiront mieux en GIF, et les grosses photos en JPG.

Elle s'affichera à gauche de l'écran, et si vous tapez un texte juste à coté, vous aurez quelque chose du genre caca. Voici pourquoi on peut aligner le texte par rapport à l'image, avec l'option ALIGN.

Les options ALIGN les plus utiles sont "left" et "right".

<IMG SRC="image1.gif" ALIGN="left">

XXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXX XXXXX


<IMG SRC="image1.gif" ALIGN="right">

XXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXX XXXXX


Si on met plusieurs images sans options ALIGN, elles se rangent gentiment à la queue leu-leu :

<IMG SRC="image1.gif"><IMG SRC="image1.gif"><IMG SRC="image1.gif"><IMG SRC="image1.gif">

On peut aussi les mettre dans des paragraphes centrés, ou alignés à droite!

<P ALIGN="center"><IMG SRC="image1.gif"><IMG SRC="image1.gif"><IMG SRC="image1.gif"></P>

Bref, on peut faire pas mal de choses. On peut aussi modifier la taille des images avec les paramètres WITDH et HEIGHT.

WIDTH="90" HEIGHT="95"

WIDTH="135" HEIGHT="142"

WIDTH="60" HEIGHT="130"

Un dernier mot avant de clore ce chapitre, on peut utiliser une image comme lien. Pour ce faire, on met l'image normalement, et on entoure le <IMG> par les tags <A HREF="machin"> et </A>. L'image est alors entourée de la couleur définie pour les liens. Pour enlever cette bordure, utilisez le paramètre BORDER=0. Vous pouvez aussi, si vous le souhaitez, augmenter la taille de la bordure avec une autre valeur que zéro.


Bon, ben mine de rien, vous en savez presque assez pour vous lancer dans la conception de pages qui n'auront pas l'air trop ridicules. Mais si vous voulez avoir l'air d'un dur, un vrai, un tatoué, et si vous avez de l'aspirine pas loin, on va passer à des choses plus sérieuses : les terribles TABLEAUX. Ah ah ah!


DES TABLEAUX DE MAITRE

C'est quoi un tableau? Ben, regardez juste au dessus, il y en a un énorme qui vous tend les bras. Un tableau HTML est une structure dans laquelle vous pourrez ranger des textes, voire des images, qui se mettront sagement en lignes et en colonnes.

Notez, je sais que je me répète, qu'il existe d'excellents éditeurs HTML qui vous faciliteront grandement la vie, surtout quand on aborde les tableaux!

Vous commencez à vous en douter, un tableau sera défini par un tag, nommé <TABLE>. Celui-là, il vaut mieux que vous le fermiez bien à la fin par un </TABLE>, sinon, gros problèmes en vue.

Puis déclarez la première ligne de votre tableau, avec le tag <TR>. Tout ce qui sera entre <TR> et </TR> constituera donc votre première ligne. Dans cette ligne, vous allez mettre des colonnes. Mettons que vous en vouliez trois, vous écrirez trois fois <TD></TD>. A chaque fois, le contenu du tag TD sera le contenu de la case correspondante. Si vous voulez deux lignes, il suffira de refaire une autre ligne similaire. Si on met dans chaque case le numéro de ligne et de colonne correspondant, on obtient :

<TABLE BORDER>
<TR> <TD>1 - 1</TD> <TD>2 - 1</TD> <TD>3 - 1</TD> </TR>
<TR> <TD>1 - 2</TD> <TD>2 - 2</TD> <TD>3 - 2</TD> </TR>
</TABLE>

Ce qui à la sortie nous donne :

1 - 1 2 - 1 3 - 1
1 - 2 2 - 2 3 - 2

C'est pas mignon? Bon, maintenant, on va mettre des titres en haut des colonnes et à gauche des lignes. On va donc créer une ligne et une colonne supplémentaires, employer la paire <TH> </TH> et mettre le titre dedans. Pour plus de clarté, les bordures des lignes et colonnes seront soulignées, par le paramètre BORDER placé dans le tag TABLE :

lundi mercredi vendredi
ligne 1 1 - 1 2 - 1 3 - 1
ligne 2 1 - 2 2 - 2 3 - 2

C'est mieux, mais on note que la colonne lundi est plus mince que les deux autres. C'est chiant. On va donc forcer la largeur des colonnes en mettant dans les <TH> un paramètre WIDTH (largeur), qui sera de 30%. Ca donnera :

<TH WIDTH="30%">
Souvent, on a besoin de répéter les WIDTH dans les lignes suivantes pour garder les largeurs voulues, surtout si on met des images. On en profitera pour mettre les nombres au milieu de leurs cellules grâce aux paramètres ALIGN="(LEFT, CENTER ou RIGHT)" pour l'alignement horizontal et VALIGN="TOP, MIDDLE ou BOTTOM)" pour l'alignement vertical. Ici, de simples <TD ALIGN="CENTER"> suffiront. On obtiendra:

lundi mercredi vendredi
ligne 1 1 - 1 2 - 1 3 - 1
ligne 2 1 - 2 2 - 2 3 - 2

Au fait, on a oublié de mettre un titre à notre tableau. Ce sera chose faite quand nous aurons inséré juste sous le <TABLE> une ligne <CAPTION>MON JOLI TABLEAU</CAPTION>.

Il est tout à fait possible d'élargir le tableau autant qu'on veut! Pour ce faire, il suffit d'ajouter dans le tag TABLE un paramètre WIDTH="x%". Ici, on va l'élargir à 100% afin qu'il prenne toute la largeur de la page. De même, le paramètre HEIGHT permet d'ajuster la hauteur totale du tableau. Les WIDTH et HEIGHT fonctionnent en pourcentages de l'espace total proposé par le navigateur, ou bien en pixels. WIDTH=100 vous donnera une largeur de 100 pixels. Si on veut augmenter la taille des bordures du tableau, on peut mettre un nombre à BORDER. Ici, on met BORDER=5. Tant qu'on y est, on va augmenter les espaces entre les cellules, avec le paramètre CELLSPACING=5 que nous écrirons dans <TABLE>. Le paramètre CELLPADDING, qui se met au même endroit, permet d'augmenter la marge autour du texte. En gros, il gonfle les cellules autour de leur contenu. Ici, nous ne l'utiliserons pas. Notez qu'en mettant simultanément les paramètres CELLSPACING et BORDER a zéro, vous collez les cellules les unes contre les autres. Si en plus vous les coloriez les cellules, (voir plus loin), vous obtenez un joli tableau abstrait, genre celui qui illustre le frontispice(1) de ma homepage.

MON JOLI TABLEAU
lundi mercredi vendredi
ligne 1 1 - 1 2 - 1 3 - 1
ligne 2 1 - 2 2 - 2 3 - 2

Bien, maintenant, supposons que nous voulions fondre en UNE SEULE cellule les 1-1 et 1-2. Nous allons tout simplement mettre, dans le <TD> de la 1-1, le paramètre ROWSPAN=2 qui signale que la cellule en question s'étale sur deux lignes. N'oublions pas d'effacer la cellule 1-2 et son TD, sinon il y a confusion. De la même manière, le paramètre COLSPAN nous servira à fusionner les cellules 2-1 et 3-1 :

MON JOLI TABLEAU
lundi mercredi vendredi
ligne 1 1 - 1 2 - 1
ligne 2 2 - 2 3 - 2

Et puisque nous sommes équipés d'un browser récent (Nestcape 3 par ex.), on va pouvoir colorier ces jolies cases! On utilise, dans les <TD>, la variable bgcolor="#RRVVBB" qui définit le fond de la case.
MON JOLI TABLEAU
lundi mercredi vendredi
ligne 1 1 - 1 2 - 1
ligne 2 2 - 2 3 - 2

Ouf! On a un tableau bien compliqué et bien vicieux. Normalement, si vous avez suivi, vous êtes à même de comprendre tout ce qui suit, et de disserter longuement à ce sujet :

<TABLE BORDER=5 WIDTH="100%" CELLSPACING=5>
<CAPTION>MON JOLI TABLEAU</CAPTION>
<TR><TH></TH><TH WIDTH="30%">lundi</TH><TH WIDTH="30%">mercredi</TH>
   <TH WIDTH="30%">vendredi</TH>
<TR><TH>ligne 1</TH><TD ALIGN="CENTER" ROWSPAN=2 bgcolor="#CC9900">1 - 1</TD>
   <TD ALIGN="CENTER" COLSPAN=2 bgcolor="#66BB33">2 - 1</TD></TR>
<TR><TH>ligne 2</TH><TD ALIGN="CENTER" bgcolor="#AA7700">2 - 2</TD><TD ALIGN="CENTER"
   bgcolor="#335588>3 - 2</TD></TR>
</TABLE>
(1) : Quand même, avouez, vous en connaissez beaucoup, des méthodes de HTML ou on trouve le mot "frontispice", vous? Surement pas sur le serveur du CERN en tout cas! Ah, les scientifiques, quelle bande de boeufs dès qu'il s'agit d'écrire trois lignes en français. C'est ptoyable

LES LISTES

Bon ben c'est pas compliqué, les listes, c'est fait pour afficher des séries d'éléments. Mettons que de manière peu originale, nous voulions faire une liste des jours de la semaine (pour ceux qui les oublieraient). On va ouvrir une liste non ordonnée, par le tag <UL>, puis on va mettre un tag <LI> qui indique que ce qui suit est un élément de liste. Notez que le </LI> n'est absolument pas requis. Après le LI, on va donc mettre le premier jour, par exemple Lundi. Puis dessous on met un autre <LI> suivi de Mardi, etc... N'oubliez pas de fermer votre </UL>. En fin de compte on a :

Vous noterez l'apparition de bouboules, que l'on peut avantageusement remplacer par des carrés en mettant, dans le <UL>, un paramètre TYPE="square". Ceci vaut pour la version 3 de Netscape (pour explorer, désolé, aucune idée). Pour les versions antérieures, le paramètre "square" fait sauvagement planter le navigateur. Pour obtenir un carré, il fallait mettre le paramètre "circle"! Faut pas chercher à comprendre, c'est Netscape.

Il existe aussi des listes ordonnées, que vous pourrez découvrir avec le tag <OL>, qui s'utilise exactement comme <UL>.

  1. Joe
  2. Jim
  3. Jack
  4. Ringo
On peut changer le type de numérotation des liste ordonnées par TYPE="I", "i", "A", "a", etc...
  1. Guerre
  2. Famine
  3. Pestilence
  4. Ringo

Allez, après ce petit intermède listier, on prend son courage à deux mains et on se lance à l'assaut des FRAMES. Et ça, c'est pas de la tarte, je vous le promets, bande de petits salopards.


VOUS LES FRAMES

Les frames, c'est ces trucs chiants comme tout qui prennent des heures à charger et qui découpent votre page en plusieurs morceaux. C'est surtout utile pour mettre, à coté de votre page, un menu qui restera disponible en permanence.

On va imaginer que vous avez une page à faire, nommée ESSAI2.HTM, et dans laquelle sont placés trois chapitres. On veut mettre un cadre, en haut, qui contiendra des liens vers chacun des paragraphes. Pour ce faire, le plus simple est de créer ESSAI2.HTM, puis un fichier contenant les trois liens, nommé LIENS2.HTM, et enfin un troisième fichier FRAMES2.HTM qui créera les frames et renverra vers les deux fichiers susnommés.

ESSAI2.HTM est un fichier HTML normal et sans histoire, dans lequel nous aurons mis des <A NAME="">, LIENS2.HTM contiendra un tableau de liens vers les trois zones visées, des liens du type <A HREF="ESSAI2.HTM#numero">. Enfin le fichier FRAMES2.HTM ne comportera pas de <BODY>, donc aucun texte affichable.

Le tag FRAMESET servira à définir le tag, on peut définir le nombre ou le pourcentage de colonnes (cols) ou de lignes (rows), dans notre cas le premier champ, en haut, prendra le quart de la fenêtre totale, soient 25%, le deuxième champ prendra le reste, noté *.

<FRAMESET rows="25%,*">

Puis on va définir diverses caractéristiques pour chaque frame, avec le tag <FRAME>. Tout d'abord, on indique quel fichier HTML sera affiché dans le premier champ, avec SRC="liens2.htm". Comme ce frame n'aura nul besoin d'être déroulé (scrolling), il sera donc fixe. On utilise le paramètre SCROLLING="NO". On n'a nul besoin de lui donner un nom, puisqu'aucun lien ne pointe sur lui. Le champ du dessous, qui contient la page proprement dite, aura lui besoin d'un nom. On écrit un deuxième tag FRAME, on indique que le fichier affiché est ESSAI2.HTM (SRC="essai2.htm") et on donne un nom avec la commande NAME="nomcible".

Voilà, c'est fini pour FRAMES2.HTM.

<HTML>
<HEAD>
<TITLE>frames d'essai2</TITLE>
</HEAD>
<FRAMESET rows="25%,*">
<FRAME SRC="liens2.htm" SCROLLING="NO">
<FRAME SRC="essai2.htm" NAME="cible2">
</FRAMESET>
</HTML>

Essayons, ça doit marcher

Ach! Grosse Katastroffe! Ca marche pas! L'écran est bien partagé comme convenu, mais quand on clique sur un lien, au lieu de bouger le champ "cible2" jusqu'au chapitre correspondant, il ouvre une autre fenêtre du navigateur, ou bien charge essai2.htm dans le premier champ, ce qui ne veut rien dire. Bon reprenons calmement avant de manger le clavier. L'erreur, elle vient des liens eux-mêmes, car nous avons indiqué sur quoi le lien pointait, mais pas où il devait afficher. Donc, logiquement, il n'aime pas.

Pour réparer cet outrage, on utilise le paramètre TARGET dans le fichier LIENS2.HTM. Dans chaque lien, on mettra TARGET="cible2", car cible2 est le nom que nous avons donné au deuxième champ (c'est pour ça qu'on lui a donné un nom, vous vous souvenez?). Voici à quoi ressemble LIENS2.HTM :

<HTML>
<HEAD>
<TITLE>liens 2</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00FFFF" LINK="#C0C0C0" VLINK="#808080" ALINK="#FFFF00">
<TABLE WIDTH="100%">
<CAPTION><P ALIGN="center"><FONT SIZE="+2" COLOR="#FFFF00">MON MENU</FONT></P></CAPTION>
<TR> <TD ALIGN="center" width="33%"><A HREF="essai2.htm#premier" TARGET="cible2">chapitre 1</A></TD>
<TD ALIGN="center" width="33%"><A HREF="essai2.htm#deuxieme" TARGET="cible2">chapitre2</A></TD>
<TD ALIGN="center"><A HREF="essai2.htm#troisieme" TARGET="cible2">chapitre 3</A></TD> </TR>
</TABLE>
</BODY>
</HTML>

Voyez ce que donne cette merveille que nous venons d'écrire, c'est impressionnant!

Notez qu'on peut aussi imbriquer des frames les uns dans les autres, et ainsi faire des pages très compliquées qui en jetteront plein la vue à vos amis. Mais je le rappelle, les frames ralentissent considérablement les configurations les mieux disposées, et personnellement, j'en utilise le moins possible dans mes pages.

Enfin, j'indiquerais un paramètre très utile du tag <A>, qui est TARGET="_top" (ATTENTION : PIEGE A CONS! le "top" doit être impérativement en minuscules). Mine de rien, c'est très utile car ça permet de "tuer" des frames, c'est à dire que quand vous activez un lien avec ce paramètre, même dans une fenêtre, vous détruisez les frames et la page en question s'affiche directement en plein écran dans votre navigateur. Si comme moi vous détestez les frames, je vous conseille donc :
- D'adhérer au "I hate frames club"
- De mettre fréquemment le paramètre TARGET="_top" dans vos liens.


IMAGE MAP, WHAT IT IS?

Il s'agit d'une image au format GIF ou JPG, qui sera affichée dans la page, et sur laquelle sont définies diverses zones sur lesquelles on peut cliquer, et qui conduisent à divers liens. C'est pas bien compliqué à faire et ça en jette un max.

<MAP NAME="nom">
<AREA SHAPE="forme" COORDS="x,y,..." HREF="reference" ALT="alt-text">
<AREA ...
...
</MAP>
<IMG SRC="adresse_image" USEMAP="#nom">

Le paramètre SHAPE peut avoir deux valeurs, "rect" qui définira une zone rectangulaire et "circle" qui définira une zone circulaire. Pour un rectangle, les coordonnées sont X de départ, Y de départ, X d'arrivé et Y d'arrivée. Pour un cercle, il n'y a que trois paramètres, X et Y du centre, et R le rayon. Tout ceci est exprimé en pixels, il est donc bon de connaître les dimensions de l'image que l'on met en fond.

HREF est bien sûr l'adresse de la page-cible (je vous rappelle qu'on fait des liens).

Allez, on fait un essai :

<MAP NAME="mon_image_map">
<AREA SHAPE="circle" COORDS="18,12,5" HREF="#index">
</MAP>
<IMG SRC="image1.gif" USEMAP="#mon_image_map">
On peut constater que si on clique sur le pompon bleu en haut à gauche, ça envoie vers le haut de la page. Et on est donc satisfait. Evidemment, on peut enlever le filet de "couleur lien" par un BORDER=0 bien senti, exactement comme pour une image.





QU'EST-CE QU'ON S'EMBEDDE

Vous vous demandez surement comment on peut faire pour mettre des morceaux MIDI, des sons WAV, des films MPEG et autres petits mickeys ridicules dans vos pages. Sachez que je désapprouve cette attitude qui fait perdre du temps de connection et des unités téléphoniques, mais passons. Donc, comment qu'on fait pour mettre des cochonneries comme ça dans une page web. Ben c'est pratique, y'a qu'une commande, qui s'appelle EMBED. En pratique, recopiez le truc ci-dessous et remplacez par ce qui vous fait plaisir.

<EMBED SRC="fichier.ext" AUTOSTART="true" WIDTH=xxx HEIGHT=yyy>

Le fichier dans SRC est bien sûr celui que vous voulez lancer, n'oubliez pas l'extension, c'est à elle que votre navigateur reconnaitra ce qu'il doit faire. Autostart="true" signifie que l'utilisateur n'aura rien à faire pour lancer le fichier, ça se fera tout seul. Width et height sont les dimensions du panneau de contrôle très laid qui apparaîtra dans votre navigateur. Un conseil, mettez-les à zéro (le panneau très laid disparaitra). Si vous voulez qu'il soit affiché en entier, ses dimensions sont 145x60.

Mais il n'y a pas de miracle. Ceci ne marchera que si l'utilisateur a intallé le PLUG-IN correspondant. Donc si ça ne marche pas, ne venez pas vous plaindre à moi, hein. Trouvez le plug-in en question et installez-le comme un grand. Je peux pas être tout le temps derrière vous non plus.


L'ATTAQUE DE FORT MULAIRE

Certaines personnes, quand elles vont sur internet et lisent un truc du genre "écrivez-moi a bloblo@totoche.fr", s'empressent de passer leur chemin, soit qu'elles n'utilisent pas le logiciel de mail de leur navigateur et ont la flemme de lancer le leur (ex. : moi), soit qu'elles estiment qu'elles n'ont rien de special a dire. Voici pourquoi les formulaires sont souvent plus efficaces que le mail classique, car ils forment un courrier "préécrit" à l'usage des gens pressés et/ou un peu "motivationnellement handicapés" (comprendre : grosse feignasse). D'où l'intérêt d'en mettre dans vos pages. Par ailleur, vous ne pouvez pas savoir à quel point le simple ajout d'un formulaire, même rudimentaire, à un site, lui donne tout de suite un aspect professionnel indéniable.

Qu'est-ce qu'un formulaire? Pour vous convaincre de l'utilité de la chose, regardez un peu le mien.

Vous constatez qu'il se présente sous forme de plusieurs zones, ou champs, dans lesquels on peut soit écrire, soit cliquer, soit faire un choix. Si vous remplissez le formulaire et que vous appuyez sur le bouton OK, votre navigateur envoie les données non pas à moi directement, mais à mon fournisseur d'accès. Là, un petit programme dit "script CGI", et appelé form-gw-mail.cgi, traduit les données qu'il reçoit en un courrier électronique qu'il m'envoie alors à mon adresse, sous le titre "courrier du formulaire". Cette structure a deux conséquences importantes.

La première c'est que le destinataire du formulaire n'a aucun moyen de connaitre l'e-mail de l'expéditeur (l'expéditeur, c'est toujours mon provider). Donc, si vous voulez répondre à votre interlocuteur, il faudra impérativement mettre un champ pour qu'il donne son adresse.

Deuxièmement, il y a des incompatibilités. Je m'explique : mon provider à moi m'autorise à utiliser un script CGI qui tourne sur SA machine, car je suis un de ses clients (ça fait partie de l'abonnement), mais si VOUS recopiez mot à mot le code de mon formulaire, ça marchera pas forcément, car il se peut que votre hôte ne vous autorise pas à utiliser ses scripts, ou bien que son script de formulaire soit différent du mien et que la syntaxe en soit différente, ou même tout simplement qu'il n'y ait pas de script de formulaire sur son ordinateur! Renseignez-vous auparavant sur l'existance et la syntaxe de VOTRE formulaire avant de le programmer.

Toutefois, ceci ne concerne que la partie "en-tête" du formulaire, et non le corps, qui est un standard défini. Nous ne parlerons donc que de cette dernière partie.

Nous allons donc travailler "par l'exemple" en écrivant un formulaire d'un genre commercial. Supposons que nous soyons une entreprise vendant des chats empaillés par correspondance. Nous mettrons donc à disposition du client un bon de commande électronique sous la forme de ce formulaire.

Voici l'en-tete que JE mettrais (mais la votre, comme je l'ai expliqué, risque fort d'être différente):

<FORM METHOD="post" ACTION="/myweb-cgi/form-gw-mail.cgi">
<INPUT NAME="contact" TYPE="hidden" VALUE="aspexpl">


La première des choses à faire est bien sûr de demander le nom du client, son adresse électronique (pour qu'on puisse lui envoyer la facture). Chaque champ est défini par un tag <INPUT> suivi de ses paramètres. Ici, chacun des champs sera une ligne de texte. Cela est précisé par le paramètre TYPE="text". La taille de la ligne, en caractères, est donnée par le paramètre SIZE="xxx". Enfin, il faut donner à chaque champ, un nom de variable (qui sera rappelé dans le courrier que vous recevrez). En fin de compte, on obtient ceci :

Vous voyez tout de suite ce qui cloche : le client a bien les champs à remplir, mais il ne sait pas à quoi ils correspondent. Heureusement, on peut insérer du texte (même formaté) entre les input du formulaire.

Votre nom, cher ami :
Votre adresse électronique SVP :

Vous pouvez rajouter le paramètre VALUE="texte par défaut" pour rajouter un texte qui s'affichera par défaut dans le champ. Ici, nous n'en aurons pas usage, mais si vous voulez demander, par exemple, la saisie d'un URL, vous pourrez mettre VALUE="http://", ce qui facilitera la vie à l'utilisateur.

Le type "texte" est pratique pour entrer une petite chose du genre nom, mais si vous souhaitez que le client puisse vous envoyer un gros texte, il faudra employer une structure plus compliquée que INPUT, le tag TEXTAREA. Ici, dans un TEXTAREA, nous demanderons l'adresse postale du client (pour la livraison, bien sûr). Nous préciserons en paramètres le nombre de lignes (ROWS=3) et de colonnes (COLS=40), ainsi que le paramètre WRAP, qui permet de passer directement à la ligne sans que le client n'ait à appuyer sur return. Et n'oubliez pas le NAME! Bizarrement, contrairement à l'INPUT, TEXTAREA se ferme (par un </TEXTAREA>).

Votre adresse postale :

Puis, vous indiquerez le mode de paiement souhaité. Pour ce faire, nous allons utiliser des "boutons radio", comme ceux que nos aïeux utilisaient à l'age de pierre pour leurs transistors. Si vous vous souvenez, quand on appuyait sur un bouton, les autres sortaient, de façon à ce qu'il n'y ait qu'un seul bouton enfoncé en même temps (ingénieux non?). C'est exactement ce que nous recherchons (car il est peu probable que le client utilise plusieurs modes de paiement en même temps).

Ceci se fait grâce au tag INPUT, avec le paramètre TYPE="radio". Pour que cela marche, il faudra que le NAME de tous les boutons soit le même. Il faudra aussi indiquer une valeur qui vous sera renvoyée, avec le paramètre ACCEPT="xxx". Enfin, une valeur par défaut peut être définie en mettant le paramètre CHECKED dans un des boutons (ici le dernier).

Comment payez-vous?

Chèque
Liquide
Carte de crédit
Virement sur notre compte numéroté à la Zurich & Bogota Bank Co.

Puis, il va falloir que le client indique quel article il désire. Pour cela, il faudra qu'il choisisse dans une liste que vous aurez établie, grâce au tag SELECT (qui lui aussi se /FERME). Après avoir donné un NAME à la sélection, vous séparerez les différents choix par la commande <OPTION>.

Quelle race :

Le nombre d'articles désirés sera donné par un INPUT dont le TYPE sera int (pour integer : nombre entier).

Combien en voulez-vous?

Maintenant que les champs sont terminés, on peut mettre le bouton qui servira à envoyer les données. Ce bouton est lui aussi géré par le tag INPUT, avec le paramètre TYPE=submit et VALUE="xxx", où xxx est le texte qui apparaîtra dans le bouton. Comme le client est un peu con, il se peut qu'il se trompe dans les valeurs qu'il donne. Donc on lui donne une sortie de secours pour effacer automatiquement les champs. On fait un autre bouton avec TYPE=reset et VALUE="remettre à zéro", par exemple. Puis, fermez le formulaire par </FORM>

Pour finir, notre formulaire aura cette tête :

Votre nom, cher ami :
Votre adresse électronique SVP :
Votre adresse postale :

Comment payez-vous?
Chèque
Liquide
Carte de crédit
Virement sur notre compte numéroté à la Zurich & Bogota Bank Co.

Quelle race : combien :

Ce qui se code de la manière suivante :

<FORM METHOD="post" ACTION="/myweb-cgi/form-gw-mail.cgi">
<INPUT NAME="contact" TYPE="hidden" VALUE="aspexpl">

Votre nom, cher ami : <INPUT NAME="nomdupigeon" TYPE="text" SIZE="50"><BR>
Votre adresse électronique SVP : <INPUT NAME="emaildupigeon" TYPE="text" SIZE="30"><BR>

Votre adresse postale : <TEXTAREA NAME="adresspigeon" ROWS=3 COLS=50 WRAP></TEXTAREA><BR><BR>

Comment payez-vous?<BR>
<INPUT NAME="paye" TYPE="radio" VALUE="cheque">Chèque<BR>
<INPUT NAME="paye" TYPE="radio" VALUE="liquide">Liquide<BR>
<INPUT NAME="paye" TYPE="radio" VALUE="carte">Carte de crédit<BR>
<INPUT NAME="paye" TYPE="radio" VALUE="suisse" CHECKED>Virement sur notre compte numéroté à la Zurich & Bogota Bank Co.

<BR><BR>Quelle race : <SELECT NAME="race">
<OPTION>Siamois
<OPTION>Angora
<OPTION>Burmese
<OPTION>Européen
<OPTION>Abyssin
<OPTION>Man Island
<OPTION>Main Coon
<OPTION>Bâtard quelconque
</SELECT>

combien : <INPUT NAME="combien" TYPE=int SIZE=5><BR><BR>

<INPUT TYPE=submit VALUE="OK, BALANCE!"><INPUT TYPE=reset VALUE="ON RECOMMENCE">

</FORM>

En fin de compte, vous devriez recevoir dans votre boite aux lettres des mails de ce genre :

adresspigeon : 9, rue Emile Fouetteminou, 24 121 Retombes s/ Saypates CEDEX
combien : 4
emaildupigeon : boubou@velu.com
nomdupigeon : Felix Ronron
paye : suisse
race : Abyssin

Remarquez au passage que chez moi, les champs arrivent par ordre alphabétique du NAME. Le plus intelligent aurait donc été de donner des noms tels que A-nomclient B-emailclient C-adressclient etc... afin que tout arrive dans l'ordre. Mais si vous n'avez pas ce problème, oubliez ce que je vous ai dit.

Notez aussi qu'il existe d'autres types de champs utilisables dans des formulaires, et que je n'ai décrit ici que ceux qui avaient le plus d'utilité. Je n'ai pas de documentation bien précise à ce sujet, et c'est par l'exemple que j'ai appris. Faites-en autant.


Et bien nous voila presque rendus, vous en savez assez pour frimer devant n'importe quel informaticien. Sauf que votre site, il marche très bien sur VOTRE ordinateur, mais il n'est pas connecté au réseau. Alors, pour que le Monde entier puisse faire connaissance avec votre "oeuvre" (quelle qu'elle puisse être), il va falloir vous trouver un hôte.


QUOI J'EN FAIS D'MON SITE?

Alors voilà, votre site est prêt, emballé et pesé au kilo près. Il va falloir vous mettre en quête d'un ordinateur connecté au réseau disposant de quelques Mo libres pour vous héberger. Car en effet, je suis désolé de briser ainsi vos illusions de jeune internaute débutant, mais le superbe PC multimédia avec le pentium de l'enfer, le CDROM 50x de la mort, l'écran 32' 16x9 coins carrés qui tue et le modem à 3gbits/s que vous vous êtes acheté pour Noël n'est pas, et ne sera jamais, réellement connecté à internet. En tout cas pas directement. Vous êtes connecté au réseau par le truchement d'un autre ordinateur, plus puissant, celui de votre provider (a moins que vous ne vous connectiez du bureau, ce qui est très vilain, ou que vous soyez très riche, ce qui est aussi très vilain, ignoble exploiteur capitaliste à la solde du grand capital). L'ordinateur de votre provider, c'est en général une grosse bête sous UNIX (un système d'exploitation que, je vous rassure, vous n'êtes pas sensé connaître) cablée avec des machins numériques et des gros modems partout. C'est sur le disque dur de cet ordinateur - ou d'un autre du même genre - qu'il va falloir placer vos précieux fichiers.

Mais bien sûr, ceci n'est pas facile, car il faut que l'administrateur du système vous en donne l'autorisation, et comme ces ordinateurs appartiennent rarement à des sociétés philantropes...

Donc, plusieurs solutions s'offrent à vous :

Première solution : Votre provider fait partie de ceux qui sont pas trop cons, et qui donc proposent un espace libre (5 ou 10 Mo en général) à leurs clients, comme ça, gratos, compris dans l'abonnement. C'est le cas du mien (noos). Là, pas de probleme. Il faut comprendre que c'est aussi l'interêt du provider de fournir ces espaces à ses abonnés, comme ça, il est à peu près sûr de fidéliser sa clientèle. Et même si votre fournisseur n'est pas du nombre, renseignez-vous pour savoir si, comme ça, par hasard, gentiment... parfois, ça marche de titiller l'esprit commerçant de ces gens-là. En tout cas, si vous devez vous abonner, demandez d'abord combien d'espace offre la compagnie en question et faite jouer la concurrence.

Deuxième solution : Taper le patron. Si vous travaillez dans une grosse boite qui possède un ordinateur directement connecté au réseau, vous pouvez toujours tenter de négocier une petite place. Faites valoir que ce genre de petit cadeau est toujours apprécié par les employés, d'où décrispation sociale, que vous encouragez la mutation technologique chez le personnel, et qu'en plus ça ne coûtera quasiment rien à la société (argument de poids). Attention, n'oubliez pas cependant que vous êtes chez votre patron, et que toute la boite va certainement avoir la tentation de regarder votre oeuvre. Essayez donc d'éviter certains sujets de sites, comme par exemple :

http://www.ibm.com/~dupont/jeunesgarconnetsbresilienscourrantnussurlaplage.html
http://www.wolkswagen.ge/~durand/Sieg_Heil/meinfuhrer.htm

ou plus grave

http://www.total.fr/~dugenou/birmanie.htm

Sinon, il y a toujours

http://www.anpe.fr

Troisième solution : Faire appel à quelques associations qui offrent gratuitement, en général contre le placement de quelques banderoles publicitaires, un petit espace. On citera aux USA le cas de ANGELFIRE et GEOCITIES, en France on trouve MYGALE et CHEZ. Debrouillez-vous pour trouver les adresses, j'ai autre chose à faire.

Quatrième solution : Payer, comme un con, un espace à votre provider. Evidemment, seuls les sites à but commercial auront recours à de telles extrémités. En général, c'est assez cher, surtout quand on sait combien le site coute au provider (on rappellera que le prix du disque de 4 Go se situe actuellement, au 30 juin 1997, vers les 1700F, soient royalement 42,5 centimes le Mo).

Cinquième solution : Vous faire héberger par un ordinateur alors que l'administrateur ignore votre présence. C'est évidemment l'idéal, vous pouvez faire ce que bon vous semble, y compris bidouiller la babasse du gars quand il a le dos tourné. Mais c'est moyennement légal. C'est même plutôt de la piraterie informatique et c'est pas très malin (on peut remonter jusqu'à vous très facilement). Mais qui sait, il y aura peut-être un programme de réinsertion internet à la prison?

Bref, vous l'aurez compris, DEMERDEZ-VOUS!


OUI MAIS COMMENT?

Vous avez dégotté un petit espace sympa et douillet, le type veut bien vous héberger, il vous a même donné un code secret et un nom d'utilisateur pour accéder à votre répertoire. OK. Maintenant, il va falloir transférer vos fichiers depuis chez vous jusqu'à l'ordinateur en question. Cette opération a pour nom "uploader" (à replacer dans une conversation). Pour procéder, il vous faut un logiciel dédié à cet usage. Selon que vous soyez MAC ou PC, vous utiliserez soit FETCH, soit WS-FTP. En règle générale, ils sont fournis avec votre kit d'abonnement. Cherchez bien sur vos disquettes et sur votre disque dur avant de me demander où on les trouve! Si c'est pas le cas, ben votre provider, y'a gros à parier qu'il s'est payé votre tête.

MAC : Bon, je n'épiloguerais pas plus avant sur votre curieux goût en matière d'informatique. L'utilitaire FETCH (que vous pouvez télécharger sur tous les bons sites de shareware MAC de l'univers) se présente sous la forme d'une fenêtre. connectez-vous à votre hôte en donnant votre nom d'utilisateur et votre mot de passe. Vous arrivez automatiquement dans votre répertoire. Allez dans un menu appelé "put folders and files", sélectionnez tous vos fichiers, et envoyez-les TOUS en format "raw data" (textes et binaires).

PC : Si vous êtes l'heureux et clairvoyant possesseur d'un PC, l'utilitaire WS-FTP se connecte tout comme FETCH. Puis il se présente sous forme de 2 fenêtres dont l'une représente l'arborescence de votre disque dur, et l'autre votre répertoire chez votre hôte. Deux flèches permettent de transférer les fichiers sélectionnés de l'un à l'autre. En bas, trois boutons pour le mode binaire, texte et auto. FAISEZ GAFFE AUX BOUTONS! Il faut envoyer les fichiers HTML en mode texte, et les autres (images, sons et autres) en mode binaire! sinon, a marche pas.

Ces deux programmes permettent de créer des repertoires, d'effacer des fichiers, et toutes sortes de choses très utiles. La plus utile, c'est l'option renommer. Parce que souvent, ces utilitaire capricieux renomment les fichiers à leur guise, mettant des majuscules là où il faut pas. Souventes fois me suis-je retrouvé avec un site qui plante parce que j'avais un Fichier.htm au lieu d'un fichier.htm (notez la subtilité). Donc, il faut toujours regarder si le site marche bien comme il faut. Ces vérifications sont indispensables. Sinon vous aurez l'air d'un zozo.


META CULOTTE

Bon, d'accord, le titre n'est pas d'un goût exquis. Dans vos pages HTML, vous aurez pris le plus grand soin à mettre le tag META, qui permet de déposer dans votre page un certain nombre de choses qui seront utiles à certains utilitaires de recherche.

Le tag META a la syntaxe suivante :

<META Name="description" Content="...">
<META Name="keywords" Content="...">

Dans le premier, "description", le contenu sera un bref texte décrivant votre page. Dans l'autre, vous mettrez des mots-clé que vous jugez représentatifs de votre site, séparés par des VIRGULES. Pour votre information, voici les métas de cette page :

<META Name="description" Content="Faites VOUS MEME vos propres
  pages WEB sans rien y connaitre, c'est possible. Il suffit de suivre mes conseils!">
<META Name="keywords" Content="HTML, guide, reference, programmation,
  page, web, homepage, explication, francais">

Quelques précisions cependant. D'une part certains utilitaires de recherche n'utilisent absolument pas les métas. S'en fichent. D'autre part, ils ne viendront pas vous chercher : il faudra que vous leur signaliez votre existence. En général, une option du genre "Add new site" est placée bien en évidence sur la page d'accueil (c'est leur intérêt d'indexer le plus de sites possible, donc c'est bien en évidence). Déclarez votre site à un max d'utilitaires de recherche, puis controlez dans les jours qui suivent que vous êtes bien inscrit. La procédure prend souvent des semaines. Si au bout d'un mois vous n'êtes toujours pas référencé, c'est probablement qu'ils vous ont oublié, ces sagouins. RECOMMENCEZ! Tannez-les jusqu'à ce qu'ils daignent vous inscrire dans leur disque dur, envoyez-leur des mails d'insulte ou de menaces, posez des bombes chez les responsables, prenez leurs enfants en otage, bref, bougez-vous. Un truc : Altavista fournit ses données à de nombreux utilitaires de recherches (dont le lentissime Yahoo!, qui a mis deux mois à me reconnaitre, que Nyogtha leur mange les yeux de l'intérieur), donc commencez par lui. Vous trouverez, dans ma page de liens, les adresses des principaux utilitaires.


CE PARAGRAPHE NE PRESENTE AUCUN INTERET

Certaines personnes pourront se croire intelligentes en vous demandant des trucs du genre "c'est quelle version du HTML que tu utilises ?". Sachez que cela ne présente aucun intérêt. Il existe un organisme qui est au HTML ce que l'Académie Française est à notre langue, et qui décrète périodiquement que telle chose est du "vrai" HTML, et que telle autre est du "faux". Sauf que les éditeurs de browsers, Netscape et Microsoft en tête, se soucient de ces avis à peu près autant que le gouvernement israélien des résolutions de l'ONU. En pratique, c'est l'usage qui commande : testez votre page, si elle marche sur les deux principaux browsers (qui équipent 99% des usagers), vous pouvez considérer que c'est du "vrai" HTML, et envoyer paître tous ces vieux birbes intégristes et leurs fatwas d'un autre âge. Après tout, si vous dites "Je vais au coiffeur", certes c'est pas français, mais tout le monde vous comprend, et c'est l'essentiel. Le HTML est comme le français, une langue vivante, il n'est la propriété de personne. Par ailleurs, vous trouverez au début de certaines pages HTML des zigouigouis du genre :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Ceci ne sert à rien non plus. Effacez-les de vos pages si vos éditeurs en mettent, c'est du gaspillage d'espace.


CONSEILS A TOI, MON JEUNE DISCIPLE

Et bien voilà, nous sommes rendus au terme de notre périple au pays du HTML. Si ce parcours initiatique t'a paru bien facile, alors pour le JAVA tu es prêt, mais c'est sans moi qu'il te faudra parcourir le chemin, car une tâche je suis en la matière.

Lorsque longtemps comme moi sur les voies du HTML tu auras marché, fier et aguerri tu seras. Mais n'oublie pas, jeune Jedi, le sage précepte que je m'en vais t'enseigner.

QUAND SUR LE NET TU VOIS UN EFFET SURPRENANT, UNE CHOSE MERVEILLEUSE QUE TU CROYAIS IMPOSSIBLE A FAIRE, ALORS SAUVEGARDE LA PAGE, BIDOUILLE LE CODE ET ESSAIE DE FAIRE PAREIL, VOIRE MIEUX. AINSI AI-JE MOI MEME PROGRESSE SUR LES VOIES DE LA FORCE.

De même que c'est en forgeant qu'on devient forgeron, que c'est en bûchant qu'on devient bûcheron, en se clochardisant qu'on devient fondeur de cloche, en militant qu'on devient militaire, et en s'apitoyant qu'on devient pitoyable, le seul moyen efficace d'apprendre le HTML est de le pratiquer assidûment et de s'inspirer de l'exemple des maîtres.

Autre conseil, et au risque de paraître obsédé : TELECHARGEZ UN EDITEUR HTML! C'est vite fait et ça fait gagner un temps inimaginable.


E-Mail formulaire HomePage

FOND DE LA PAGE
allez, remontez, on n'a pas le temps de faire les marioles