Appr endr e HTML Pour Les Zr os

Mis en page par KoraS.

Mis en partage sur le rseau eDonkey le mercredi 2 juin 2004 par Koras
Ce cours de HTML viens du site : http://www.siteduzero.com/
Dtestant lire sur mon PC et aimant le travail bien fait, jai mis en page a fin dimpression
ce cours trs complet et si jai dcider de le mettre en partage sur le rseau pour les
gens qui ne connaitrais pas le site du zro (a visiter ABSOLUMENT) et/ou qui voudrais
limprimer CORRECTEMENT pour le lire tranquillement dans leurs pieux.
Aller, bonne lecture les gars !!!!

Programmez, crackez, scannez, rippez et mettez tout a en partage sur le rseau eDonkey, on
va leurs apprendre a nous vendre des logiciels a 200 Euros, des jeux a 60 Euros, des albums a
20 Euros, des livres a 50 Euros, des magazines a 8 Euros a tous ces empafs de capitalistes !

A propos du rseau, jai remarqu depuis quelques temps une certaine tendance de la
communaut eDonkey Franaise a prendre et a ne pas laisser en partage, cela est sans doute
du au fait de la dmocratisation dInternet et des connections haut dbits et donc a lmergence
de nombreux newbies (dbutants), qui prennent sans se demander pourquoi, comment, par
qui.
Vous vous devez de laisser en partage quelques temps ce que vous venez de prendre pour quil
y est plus de full sources (personne possdant le fichier en entier), cest OBLIGATOIRE !!!!
Quest ce que vous risquez en nappliquant pas cette loi ? Cest simple vous risquez un jours ou
lautre de devoir acheter tous ce que vous prenez GRATUITEMENT avec votre Mule les gars !!!!
Et oui, dj quavec les lois pourrisses qui ont taient votes ces derniers temps de nombreuses
personnes luttent contre nous, les FAIs (Fournisseurs dAccs Internet) collaborent avec les
keufs et autres R.I.I.A, les espions sont partout sur le rseau et mme sur nos PCs (et je suis
pas parano, ce que je dit est prouver), alors si les utilisateurs se mettent a partir en couilles
aussi, je ne donne pas 2 ans au Roi des rseau Peer To Peer (eDonkey bien surs) ! Contre a,
partageons le plus et le plus longtemps possible.
J ai galement remarquer une monte en flche du nombres de fichiers incomplets, quand vous
dcidez de mettre un fichier en partage, vous endossez une responsabilit, dfinissez la priorit
de ce fichier au maximum (release ou trs haute selon les programmes utiliss) en cliquant droit
dessus dans la partie partage de votre logiciel, surtout, surtout, surtout, assurez vous avant de
lenlever quil y est au moins 20 personnes qui lont en entier et mieux encore, ne lenlever pas,
assumez jusquau bout votre rle.
La survie du rseau est entre nos mains les gars, faites tourner linfo, IL FAUT PARTAGER !!!

Longue vie a eDonkey et a tous les Hackers, Crackers, Rippers, Suppliers, Webmestres, etc,
qui se dcarcasse pour notre plaisir sans rien y gagner au fait si, ils y gagnent notre
estime et nos ternels remerciements !!!!!!




1
Les Bases Du HTML
Nous commencerons dans ce premier chapitre prciser ce qu'est le html et ce que vous pouvez
faire avec.
Plus bas, vous devrez retenir quelques mots de vocabulaire indispensables la comprhension de
tout ce qui suivra.
Vous aurez la fin quelques petits mots sur la syntaxe. Rien ne vous permettra donc ici de
commencer crer votre page en html, mais tout vous sera indispensable si vous tes un zro !
Qu'est-ce que le html ?
Vous connaissez srement le web, et vous aimez certains sites. Peut-tre que vous les enviez,
mme. Sachez que dans la plupart des cas, votre fournisseur d'accs (ou provider) tels que Aol,
Infonie, Wanadoo, Club Internet, Compuserve... vous donne gratuitement de la place sur le web
pour dposer votre page perso. Cette place peut occuper maximum 5 15 Mo, car on vous limite
celle-ci.
Alors, vous avez fait tout ce qu'il fallait pour savoir comment utiliser cette place sur le web. Oui
mais voil : comment allez-vous faire pour crer ces pages que vous enviez tant ? Eh bien, vous
allez devoir utiliser le seul moyen que tout le monde utilise : le langage html.
Le html est un langage de description de documents, pas de programmation. En plus clair, c'est un
langage informatique qui sert diter des pages (virtuelles), mais qui ne permet pas de crer des
programmes.
Enfin, si vous trouvez une bonne ide pour votre site perso, vous pourrez voir le nombre de
visiteurs augmenter considrablement. Tout est donc dans l'ide, mais si vous ne savez pas exploiter
le html, cela ne vous servira rien (ce qui explique la prsence de mon site).
Le prochain paragraphe vous explique o taper ce langage html.
O crire en html ?
Quel est donc l'environnement magique dans lequel vous allez crire votre page perso ? Il faut
quand mme savoir que ce n'est pas en tapant du texte n'importe o, et en l'enregistrant en .html que
a va marcher ! C'est tout de mme plus compliqu que a ! Toutefois, c'est un langage destin
tous les internautes, donc il n'est pas impossible utiliser.
J e vais vous le dire de suite, vous avez tout ce qu'il faut pour le faire. N'importe quel diteur de
texte ASCII suffit. Et parmi eux, il y a edit, sous Dos. Sous Windows, vous pouvez utiliser bloc-
notes (c'est celui que j'ai choisi pour ma part).
La deuxime solution, c'est d'utiliser un diteur WYSIWYG, soit : What You See Is What You Get.
En bon franais : ce que vous voyez est ce que vous obtenez. Avec a, un enfant de 5 ans peut crer
sa page perso. L'interface ressemble un programme de traitement de textes ordinaire. Il vous suffit
de cliquer sur italique, rouge, centr... et vous voyez illico le rsultat !
http://www.siteduzero.com/
2
Mais tout n'est pas si beau. En effet, le rsultat que vous aurez devant les yeux sera trs
approximatif. De plus, si vous choisissez cette mthode, je ne pourrai pas vous aider, car ici, je parle
de html "pur", sous un diteur de texte ASCII.
Citons, en diteurs WYSIWYG, Netscape Composer, livr avec Netscape, et Front Page Express,
livr avec Internet Explorer.
En bref, la meilleure solution qui vous offre le plus de choix, c'est un diteur ASCII. Pour ouvrir
Bloc-notes, cliquez sur :
Dmar r er
Pr ogr ammes
Accessoi r es
Bl oc- not es

Vous voil maintenant devant un grand vide blanc. C'est l que nous allons oprer...

Vocabulaire essentiel
J e vous l'ai dj dit, il ne suffit pas de taper ce que vous voulez voir s'afficher pour avoir un rsultat.
Cela ne marche pas. Qu'y a-t-il d'autre, alors ? La SEULE et unique chose qui vient troubler vos
esprits, ce sont les TAGS. C'est tout ce que vous verrez en plus par rapport votre traitement de
texte habituel.
Un tag ? C'est une information qui s'adresse au brower (Netscape ou Internet Explorer). Elle ne sera
pas affiche. Le tag donne une information sur la taille, la couleur du texte, le lien...
Comment le distingue-t-on du texte ? Tout tag commence par un <et se termine par un >. Par
exemple (j'invente) : le tag mto. Il s'crit :
<mt o>
Et des tags, je vous en donnerai des tonnes, mais petit petit.
Il existe un deuxime mot connatre : ATTRIBUT.
Un attribut se trouve l'intrieur mme d'un tag. Il donne des informations plus prcises sur le tag.
Ce dernier peut avoir un ou plusieurs attributs, selon votre choix.
Revenons notre tag mto. On peut lui donner les attributs t et temprature. Vous voyez bien
qu'ils prcisent ce tag. Regardez plutt :
<mt o t t empr at ur e=" 34" >

Tous les attributs doivent avoir un espace entre eux pour les sparer. Mais il s'agit toujours du tag
mto, dont on doit crire le nom en premier. J e vous en dirai plus dans le chapitre suivant.








3
Syntaxe
La prsentation
Voil quelque chose de trs important savoir : la prsentation de votre page web, lorsque vous
l'crivez en html sous bloc-notes, ne donnera strictement rien lorsque les internautes la verront avec
leur browser. Vous pouvez vous amuser mettre 13 tabulations, 10 entres, mais vous ne verrez
rien de spcial lorsque vous la regarderez avec Internet Explorer ou Netscape.
J e vous donne 2 exemples pour tre plus clair. J 'ai mis des entres n'importe o, fait des espaces
n'importe o dans l'un, et pourtant le rsultat sera le mme dans les 2 cas. Attention : tout ceci se
passe lorsque vous crivez du texte qui sera affich, comme dans un traitement de texte. Ne jouez
pas a avec les tags !
Bien sr, le browser va la ligne quand le texte arrive au bout de celle-ci.
Exemple 1, o je n'ai pas mis des entres n'importe o :
J ul i en mar chai t dans une sombr e f or t , o r gnai t un f r oi d
gl aci al . I l se demandai t combi en de t emps i l er r er ai t encor e
dans ces l i eux si ni st r es. I l voul ai t r et r ouver l a douce
chal eur du f oyer . . .
Exemple 2 :
J ul i en mar chai t dans une sombr e
f or t , o r gnai t un f r oi d
gl aci al . I l se demandai t combi en
de t emps
i l er r er ai t encor e
dans ces l i eux si ni st r es. I l voul ai t
r et r ouver l a douce
chal eur du f oyer . . .

Vous n'avez droit qu' un espace entre 2 mots. Vous avez vu dans l'exemple 2 que j'en avais mis
partout, mais le rsultat sera le mme qu'avec l'exemple 1. C'est comme a.
A quoi a sert ? C'est pour vous qui crivez votre page. C'est juste pour vous, tant donn que
l'internaute ne saura pas si vous avez mis des entres et des espaces ou pas.
Ca vous permet "d'claircir" votre page sous bloc-notes. Ainsi, la prochaine fois que vous
reviendrez agrandir ou modifier votre page, vous localiserez plus vite un endroit prcis. Il vaut
mieux quelque chose de clair pour vous plutt qu'un gros pt de texte... Evidemment, j'ai un peu
exagr dans le deuxime exemple.
Rsumons : logiquement, vous n'aurez pas faire plusieurs espaces entre 2 mots car ce n'est pas a
qui claircira votre texte sous bloc-notes et qui le placera o vous le voulez dans le browser.
Mais pour vous, mettre une ou deux entres entre 2 paragraphes donnera quelque chose de plus
clair. Seulement pour vous, car pour faire des entres, il existe un tag.
Si je vous ai dit de ne pas le faire avec les tags, c'tait pour que vous ne fassiez pas d'entres au
milieu d'un tag ! Mais vous verrez, le troisime exemple en partant d'ici (avec gras et soulign) vous
montre qu'il est tout fait possible de mettre des entres entre 2 tags.

4

Les tags
Vous savez comment crire un tag. Mais, en gnral, un tag ne peut exister seul. Il faut le fermer.
Pour cela, recrez le mme tag plus loin, sans les attributs s'il y en avait. Vous ajouterez un / au
dbut du nom du tag. Avec le tag mto :
<mt o t t empr at ur e=" 34" ></ mt o>

Des tags interdisent leur fermeture, ils ne doivent pas tre ferms. Question de logique : si vous
dites qu'il y a une image ici, pas besoin de fermer le tag...
Entre les 2 tags, vous crirez du texte qui sera affich, en respectant les indications des tags.
J 'abandonne momentanment le tag mto, et je le remplace par un autre de mon invention :
<soul i gn>Ce t ext e est soul i gn</ soul i gn>

Ainsi, la phrase "ce texte est soulign" apparatra soulign (n'essayez pas, c'est un faux tag !).
Il est possible que vous utilisiez plusieurs tags en mme temps. Mon prochain exemple illustre ce
que je vous ai dit propos de la prsentation.
<gr as><soul i gn>Gr as et soul i gn</ soul i gn>Seul ement
gr as</ gr as>

Comme indiqu, une partie du texte sera en gras et soulign, une autre seulement en gras. Vous
pourrez ainsi vous amuser "jongler" avec les tags. Cependant, cela corse quelque peu la chose... Il
va falloir faire attention l'ordre de fermeture. Voici le mauvais exemple ne pas suivre :

<gr as><soul i gn>Ca ne mar che pas. . . </ gr as></ soul i gn>

Voici le bon exemple :

<gr as><soul i gn>En gr as et soul i gn</ soul i gn></ gr as>

C'est compris ? Il faudra faire pareil, mme avec 10 tags ! Attention donc.
Les attributs
Comme les attributs prcisent un tag, ils ne sont normalement pas obligatoires. Mais certains tags
ne sont utiles qu'avec un ou plusieurs attributs.
Vous savez les insrer, en les sparant chacun d'un espace. A vous de voir si vous en mettez, ou si
vous n'en mettez pas. Ce que vous devez savoir, c'est qu'il y a 2 types d'attributs. On prcise
certains, d'autres pas.
Vous vous souvenez des attributs t et temprature. Ils font partie chacun d'une catgorie
diffrente. Et n'est pas prcis. C'est tout simple.
Mais temprature l'est. Voici ce que l'on doit faire : sans espaces (puisqu'ils servent sparer les
attributs), vous crivez aprs l'attribut un =et deux ". Entre les 2 " vous prciserez l'attribut, par un
nombre ou par un mot. J e vous redonne cet ancien exemple :
<mt o t t empr at ur e=" 39" >
5

Structure DUne Page HTML
Maintenant nous allons commencer crire pour de bon. Comme je vous l'ai dj expliqu, ouvrez
bloc-notes. Vous allez partir de ce moment prcis (et ce jusqu' la fin) "jongler" entre les 2
fentres : celle de bloc-notes et celle de votre browser dans laquelle vous lisez ceci.
Vous crirez la page en langage html sous bloc-notes, puis vous regarderez le rsultat avez votre
browser pour vrifier (aprs avoir enregistr, bien sr).
En-tte et corps
Notre tout premier tag sera le tag <html>. Comme la plupart, il s'ouvre et se ferme. Il dit o
commence la page html et o elle se termine. Donc vous n'crirez rien en dehors de ce tag html.
Commencez donc crire :
<ht ml >

</ ht ml >

Ca va jusque l ?
Dans une page html, on distingue 2 parties diffrentes : l'en-tte et le corps que l'on met dans cet
ordre respectif. J e ne dtaillerai pas ici ce qu'il contiennent, mais je vous en donnerai une ide.
Commencez d'abord par crire ces 2 tags qui dlimitent ces parties.
Le tag de l'en-tte est <head>. Celui du corps est <body>. Essayez d'imaginer dans votre tte et sans
continuer lire, quoi va ressembler votre page html. Voil la rponse :
<ht ml >

<head>
</ head>

<body>
</ body>

</ ht ml >

Le tag head sera minuscule par rapport au tag body la fin. Mais head contient des informations
importantes sur la page qui s'adressent plus particulirement aux moteurs de recherche. Le prochain
chapitre lui est consacr.
Quant body, il risque d'tre gigantesque ! C'est lui qui contiendra l'norme majorit des tags qui
existent. C'est entre les 2 body que vous crirez du texte qui sera affich, que vous mettrez en gras,
italique, rouge, barr... Vous mettrez aussi des tableaux, des images... Bref, tous les prochains
chapitres sauf le 3 lui sont consacrs.
J e commencerai dj ici vous en parler...
Tout d'abord, enregistrez votre page. Comme c'est la structure de base de la page html, vous serez
oblig d'crire a pour toutes les pages. La bonne ide serait de la conserver comme modle.
Effectuez les oprations suivantes :
6
Fi chi er
Enr egi st r er
Choi si ssez un r per t oi r e
Type : " Tous"
Nom: " nom. ht ml "
Enr egi st r er

Remplacez le "nom" par le nom de votre choix.
Vous pouvez essayer de regarder quoi ressemble votre page dans le browser. A la ligne "Adresse",
tapez le chemin d'accs complet de votre fichier. Par exemple :

c: \ Mes document s\ web\ exempl e. ht ml

Et que voyez-vous ? Il y a deux possibilits, soit vous avez un navigateur ancien (pensez
tlcharger le dernier) et la page est entirement grise, soit il est rcent et elle est blanche. Rien de
plus.
Vos dbuts avec <body>
Vous pouvez essayer maintenant de taper du texte entre les 2 body :
<ht ml >

<head>
</ head>

<body>
Bonj our , bi envenue sur l a page per sonnel l e de J ean Dupont ,
qui a t cr e i l y a peu. Vous m' excuser ez du manque
d' i nf or mat i ons et de r ubr i ques que j e ne t ar der ai pas
vous pr oposer . . . En at t endant , vous t r ouver ez quel ques
adr esses suscept i bl es de vous i nt r esser .
</ body>

</ ht ml >

Et ce texte sera affich ! Il est vrai qu'il faut un minimum d'efforts avant d'arriver un rsultat.
Oui, mais quel rsultat ? Ce que vous venez de voir, c'est ce que vous devriez taper sous bloc-notes
(n'hsitez pas changer le texte pour en avoir un plus appropri ce que vous souhaitez dire).
J e vous proposerai souvent d'essayer l'exemple que vous avez sous vos yeux. Vous pourrez
comparer celui-ci avec le votre, pour vrifier et comparer s'il n'y a pas d'erreurs.
Dans ces cas-l, vous aurez en dessous de l'exemple un bouton "Essayer !". J e vous conseille
d'imaginer dans votre tte ce que cela donnera, pour savoir si vous avez bien compris. Voici le
premier bouton (qui s'applique au prcdent exemple) :
Normalement, une nouvelle fentre s'est affiche, sans la plupart des menus. Vous pouvez l'agrandir
si vous le voulez, mais ce n'est pas une obligation. Cela vous permet de diffrencier ces pages-ci de
celles qui servent d'exemples.
Vous avez pu remarquer que le rsultat est loin des pages web que vous visitez, mais patience !
Vous serez bientt surpris de ce que vous aurez fait.
Le premier problme de prsentation auquel nous allons remdier de suite, est cet effet de "gros
pt" sur cette page. Vous aurez eu beau faire des entres, mais je vous ai dj dit que cela ne donne
rien.
7
Il existe deux tags qui vous permettent cela. Le premier donne un retour la ligne, et le second la
cration d'un nouveau paragraphe. Il y a ici un mini-tableau qui les prsente :

Tag Introduit Valeur
<br>Retour la ligne 1 entre
<p>Nouveau paragraphe2 entres
Mais c'est toujours comme les espaces, vous ne pouvez pas en faire deux. 2 tags <br> la suite
rendront l'effet d'un seul tag <br>.
Les deux tags <p>et <br>ne doivent pas tre ferms.
Cela donnera quelque chose de bien plus clair par rapport notre ancien exemple. Faites de mme
en parallle avec votre page perso.
<ht ml >

<head>
</ head>

<body>
Bonj our , bi envenue sur l a page per sonnel l e de J ean Dupont ,
qui a t cr e i l y a peu. <p>Vous m' excuser ez du manque
d' i nf or mat i ons et de r ubr i ques que j e ne t ar der ai pas
vous pr oposer . . . <br >En at t endant , vous t r ouver ez quel ques
adr esses suscept i bl es de vous i nt r esser .
</ body>

</ ht ml >
Notez que j'aurais pu faire une entre avant chaque tag d'entre, mais cela n'aurait chang en rien le
rsultat. C'aurait t pour que je me retrouve plus facilement dans ma page la prochaine fois que je
serais venu l'diter.
Vous pouvez ds maintenant crer une page html.
Commentaires
Les commentaires peuvent vous tre utiles dans certains cas, mais comme ils ne sont pas trs
importants, je ne m'attarderai pas longtemps dessus.
Un commentaire se trouve dans un tag assez spcial, et le browser ne l'affiche pas. C'est du texte qui
peut vous permettre de vous situer (sous bloc-notes) dans une grosse page web.
Le commentaire est le SEUL tag qui peut se trouver n'importe o, mme dans head ou en-dehors.
Comment crer un commentaire ? Comme d'habitude, ouvrez le tag par un <. Tapez juste aprs un !
et deux -. Tapez votre commentaire aprs. A la fin de celui-ci, refaites deux - puis fermez le tag par
un >. Ouf ! Voyons ce que cela donne :
<! - - Rappel : pet i t pr obl me i ci - - >

En imaginant qu'hier j'ai eu un problme pour crer ma page web, ce commentaire est l pour me rappeler le
lendemain d'essayer d'y remdier.
8
Le Tag : <head>

Vous venez de voir comment insrer du texte et des entres. Mais cela se passe dans le tag
<body>... Et tout le reste, vous verrez, se trouvera entre le tag d'ouverture et celui de fermeture
body !
Mais quoi peut bien servir ce mystrieux tag <head>. J e vous ai dit qu'il s'adresse plus
particulirement aux moteurs de recherche. C'est vrai. Mais il ne faut pas l'oublier, mme si
l'internaute ne verra rien de ce qui se trouve dedans.
Assez de bavardages, voyons un peu les tags que l'on trouve dans l'en-tte...
Les titres
L'lment le plus connu et le plus utilis de l'en-tte est sans aucun doute le titre. Le titre s'affiche
gnralement en haut de la fentre du navigateur. On le retrouve aussi dans l'historique. Et les
moteurs de recherche s'en servent pour donner un titre aux pages qu'ils trouvent.
Bref, ces quelques raisons devraient, je l'espre, vous faire rflchir un bon moment au titre de votre
page.
Chaque page doit avoir un titre pas trop long et si possible diffrent.
Le tag qui indique un titre est <title>. Ecrivez votre titre aprs <title>puis fermez le tag par </title>.
Par exemple :
<ht ml >

<head>
<t i t l e>La page per so de J ean Dupont </ t i t l e>
</ head>

<body>
Bonj our , bi envenue sur l a page per sonnel l e de J ean Dupont ,
qui a t cr e i l y a peu. <p>Vous m' excuser ez du manque
d' i nf or mat i ons et de r ubr i ques que j e ne t ar der ai pas
vous pr oposer . . . <br >En at t endant , vous t r ouver ez quel ques
adr esses suscept i bl es de vous i nt r esser .
</ body>

</ ht ml >
Vous avez sans doute pu remarquer que le titre s'est affich en haut de la fentre.
Pensez aux titres, c'est souvent eux qui dterminent si le site est intressant ou pas, et par
consquent, ce peut tre grce lui que vous verrez le nombre de visiteurs augmenter !
Les tags <meta>
Les tags <meta>sont un autre moyen (plus complexe) qui permet aux moteurs de recherche
d'indexer (rfrencer) votre site. Ils donnent des informations sur l'auteur, sur le programme avec
lequel vous avez cr vos pages ou bien des mots cls...
9
Vous devrez mettre un tag <meta>par type d'information. Ce qui donnera plusieurs mme tags la
fin.
Commenons par l'auteur, c'est--dire vous. Ajoutez l'attribut name au tag <meta>. Et, comme je
vous l'ai dj expliqu, prcisez l'attribut en indiquant "author". Le tag devrait ressembler a :
<meta name="author">. Ajoutez l'attribut : content. Et prcisez cet attribut par votre nom. J ean
Dupont crira :
<met a name=" aut hor " cont ent =" J ean Dupont " >

Le moteur de recherche saura et fera savoir que l'auteur de la page web est J ean Dupont.

Un deuxime tag <meta>important est celui avec l'attribut name="description". Prcisez cette fois-
ci content par un petit paragraphe qui rsume votre page. Exemple :
<met a name=" descr i pt i on" cont ent =" Voi ci l a page per sonnel l e
de J ean Dupont . J e sui s vt r i nai r e. Ma page per sonnel l e
vous pr opose des consei l s pour vot r e ani mal et vous pouvez
m' envoyer des messages en cas d' ur gence. J e saur ai vous
consei l l er . " >

Le moteur de recherche affichera ce texte en guise de prsentation de votre site.

Vous pouvez aussi indiquer avec quel programme vous avez cr votre page web. Ici, il s'agit de
Bloc-notes. L'attribut name doit avoir pour valeur : "generator". Exemple :
<met a name=" gener at or " cont ent =" Mi cr osof t Bl oc- not es" >
Un dernier <meta>non moins important : celui qui donne des mots cls. Prcisez
name="keywords" puis donnez dans l'attribut content une liste de mots cls se rapportant votre
site. Espacez chaque mot par une virgule :
<met a name=" keywor ds" cont ent =" Dupont , vt r i nai r e, chi en,
chat , oi seau, t or t ue, bl essur e, ur gence, consei l s" >

N'hsitez pas en mettre bien plus (pas trop quand mme) ! Si un internaute tape vtrinaire dans
un moteur de recherche, il verra coup sr la page de J ean Dupont parmi les autres (il ne reste plus
qu' esprer qu'il choisisse de voir celle-ci).
Enfin, un dernier tag <meta>, qui ne fonctionne que sous Internet Explorer. Il permet d'obtenir des
effets de transition entre les pages du site (essayez vous verrez). Voici un exemple :
<met a ht t p- equi v=" Page- Ent er " cont ent =" Reveal Tr ans( Dur at i on=2, Tr ansi t i on=12) " >

Vous pouvez modifier "Duration" : c'est le temps que met la transition pour s'effectuer, en secondes.
Quant "Transition", c'est le type de transition que vous avez choisi : vous pouvez mettre une
valeur de 0 22. Si vous mettez 23, l'effet sera alatoire.
Ainsi se termine ce petit chapitre sur le tag <head>. Il existe peut-tre un ou deux autres tags qui se
mettent l-dedans, mais je vous le ferai savoir en temps voulu.

10
Crer Des Liens
Les liens sont trs importants en html. On en voit de partout. Et c'est sans doute cela qui diffrencie
le web d'un journal.
Question toute bte : qu'est-ce qu'un lien ? Un lien est le plus souvent un texte assez spcial.
Lorsque l'on pointe dessus, la souris devient une main. C'est un des moyens de le reconnatre. Mais
ce n'est pas tout ! Un texte qui fait lien est en gnral bleu et soulign.
Lorsque l'on clique sur un lien, on arrive sur une autre page ou sur une autre partie de la mme
page.
Et c'est par cela que l'on reprsente le web.
Concept relatif - absolu
Pour indiquer o se trouve un fichier cible (celui que l'Internaute voit aprs avoir cliqu sur un lien),
vous aurez 2 moyens...
Le premier est appel : "Adresse en absolu". Ce mot vous fait peut-tre peur, mais il n'y a rien de
sorcier l-dedans.
L'adresse du fichier doit tre crite en entier et vous devrez aussi prciser le type de lien (voir plus
bas). Sur Internet, on crira par exemple :
ht t p: / / per so. pr ovi der . f r / j dupont / ci bl e. ht ml

Si bien sr, le fichier de destination s'appelle cible.html. Idem sur votre disque dur, cela serait :

c: \ Si t e per so\ ci bl e. ht ml

Ce moyen est prcis, mais assez long. Utilisez-le si vous voulez qu'un lien amne un endroit
prcis.
Deuxime solution : utiliser une "Adresse en relatif". Ce doit tre de loin le moyen le plus utilis. Il
est un peu plus compliqu et plus vague que l'absolu, mais il est plus utilis car il a quelques
avantages (l'adresse devient plus courte). Accrochez-vous aux exemples suivants...
Supposons que le fichier qui contient le lien se trouve dans :
c: \ Si t e per so\ sommai r e. ht ml

Et que le fichier cible se trouve dans le mme dossier, c'est--dire :

c: \ Si t e per so\ ci bl e. ht ml

Alors, dans ce cas-l, on crira que le lien amne vers :
ci bl e. ht ml


Tout court ! Maintenant, corsons la chose : sommaire.html ne change pas de dossier, mais
cible.html, lui, se trouve dans un sous-dossier. Disons :
11

c: \ Si t e per so\ Dossi er \ ci bl e. ht ml

En relatif, on a :

Dossi er / ci bl e. ht ml

J e vous coupe ici pour vous faire une remarque trs importante :
Sur le web, pour sparer les dossiers, on utilise les /. Contrairement votre P.C. (surtout avec dos)
qui utilise les \. Ceci dit, Windows comprend les /.

Reprenons. Autre cas de figure : sommaire.html ne bouge toujours pas, mais cible.html se trouve
dans le dossier prcdent :
c: \ ci bl e. ht ml

On utilise ici les deux points ..

. . / ci bl e. ht ml

Pensez aussi que vous pouvez tout mlanger : les Dossier/ et les ../ ! Mais en gnral un site
n'est pas aussi compliqu que a !
C'est donc un concept connatre. J e vous conseille d'utiliser les "Adresses en relatif".
Pourquoi en relatif ? Eh bien, si votre site n'est pas trs complexe, cela vous permettra de pouvoir
visualiser les pages sur votre disque dur aussi bien que sur le web ! Parce que si l'adresse commence
par http://, il faudra que vous soyez connect pour voir les pages, et rciproquement...
Types de liens
Vous l'avez vu, les types de liens se rapportent l'absolu. Des fois, il est ncessaire de crer des
liens en absolu, car on n'a pas le choix. Vous avez ici une liste des types de liens (les plus
importants) que vous pourrez utiliser, avec leur description.
ht t p: / /

Ce type de lien amne vers une page html quelque part sur le web.

f t p: / /

Il est utilis pour donner l'adresse d'un fichier tlcharger.

t el net : / /

Adresse d'un serveur Telnet (il faut cependant que le navigateur reconnaisse le Telnet)

gopher : / /

Donne l'adresse de fichiers sur un serveur gopher.

news:


12
Amne vers un groupe de news.

mai l t o:

Sert envoyer une adresse e-mail quelqu'un.
Notez qu'il s'agit l de prfixes, et qu'il faut donc donner l'adresse en entier ! Par exemple :
mai l t o: j dupont @sonpr ovi der . f r
Crer un lien
Assez bavard, on y va ! Pour crer un lien, vous devez d'abord crire le texte sur lequel l'Internaute
cliquera. Entourez-le ensuite du tag, on-ne-peut-plus-simple : <a>. Ce qui donne :
<a>Cl i quez i ci ! </ a>

On croirait que l'on a fait exprs de choisir un nom si simple, pour ne pas l'oublier...
Cependant, le tag <a>ne peut exister sans attributs ! Il faut au moins prciser l'adresse ou l'endroit
de la page.
C'est donc ici se sparent les 2 moyens d'utiliser un lien, le premier amne une autre page, le
second un autre endroit de la page.
Le lien amne une autre page
Ajoutez l'attribut href et prcisez-le de l'adresse que vous voulez (vous allez maintenant rutiliser ce
que vous avez appris). Par exemple :
<a hr ef =" ht t p: / / per so. sonpr ovi der . f r / j dupont / ci bl e. ht ml " >
Cl i quez i ci ! </ a>

Ou bien en relatif :

<a hr ef =" ci bl e. ht ml " >Cl i quez i ci ! </ a>

Vous pouvez tout aussi bien proposer d'envoyer un mail :

<a hr ef =" mai l t o: j dupont @sonpr ovi der . f r " >M' envoyer un mai l
</ a>

Vous voyez toutes les possibilts qui s'offrent vous !
Ici se sparent les 2 moyens d'utiliser un lien, le premier amne une autre page, le second un
autre endroit de la page.
Le lien amne un autre endroit de la page
Si vous voulez qu'un lien amne un autre endroit de la page (c'est surtout intressant si vous avez
une grande page), vous n'avez pas besoin de changer l'attribut href. Mais il vous faut d'abord dfinir
l'endroit o le lien amnera. On appelle cet "endroit" une ancre.
Pour faire une ancre, placez-vous l'endroit dsir et entourez-le du tag <a>. Ajoutez-lui l'attribut
name, puis prcisez name par le mot de votre choix. Essayez quand mme de ne pas faire un grand
13
mot, et de ne pas insrer de caractres spciaux.
On obtient alors quelque chose comme a :
<a name=" bobo" >Vous vous t es f ai t mal ?</ a>

Par contre, on ne voit pas qu'il s'agit d'une ancre, car, contrairement aux liens, il ne se diffrencie
pas du texte normal. Mais votre navigateur en a besoin pour connatre l'endroit o aller.
2 tape : crer le lien. J e vous ai dit que l'on n'a pas besoin de changer le tag href, et c'est vrai. Mais
ce qui va changer sera la faon dont vous crirez l'adresse...
Aprs le ", mettez directement un #. J uste aprs, crivez le nom de l'ancre :
En cas de bobo, <a hr ef =" #bobo" >cl i quez i ci pour l i r e l e
chapi t r e t r ai t ant de cel a. </ a>

Mieux, vous pouvez combiner les 2 moyens d'utiliser un lien. C'est dire que le lien amnera un
endroit prcis d'une autre page. Exemple :

<a hr ef =" sommht ml . ht ml #bas" >Go ! </ a>
Reprenons un exemple concret avec J ean Dupont. Observez particulirement le lien vers une
adresse e-mail. Aprs un ? (sans espaces), on ajoute subject=, et on crit alors le sujet de l'e-mail.
Voyez plutt :
<ht ml >

<head>
<t i t l e>La page per sonnel l e de J ean Dupont </ t i t l e>
<! - Quel ques t ags met a- >
</ head>

<body>

Bonj our , bi envenue sur l a page per sonnel l e de J ean Dupont ,
qui a t cr e i l y a peu. <p>Vous m' excuser ez du manque
d' i nf or mat i ons et de r ubr i ques que j e ne t ar der ai pas
vous pr oposer . . . <br >En at t endant , vous t r ouver ez quel ques
adr esses suscept i bl es de vous i nt r esser : <p>

<a hr ef =" . . / sommht ml . ht ml #bas" >Appr enez l e ht ml ! ( bas de
l a page) </ a>
<br >Vous pouvez <a hr ef =" mai l t o: j dupont @sonpr ovi der . f r
?subj ect =J e veux t e par l er " >
m' envoyer un mai l . </ a>

</ body>

</ ht ml >

J 'ai mis quelques entres pour faciliter la lecture de l'exemple.
Vous avez peut-tre remarqu que l'adresse : "../sommhtml.html", contient des .. Si vous voulez
savoir pourquoi, voil la rponse : les exemples se trouvant dans un sous-dossier appel
"Exemples", il faut crire l'adresse avec .. car le sommaire se trouve dans le dossier prcdent.

Fin du chapitre sur les liens. Vous allez partir de maintenant apprendre embellir votre page, car,
pour l'instant, le rsultat est plutt loin des pages web que vous visitez !
14
Mettre En Forme Du Texte
Pour le moment, il faut dire que nos pages html ne sont pas trs belles, et qu'elles mriteraient
mieux. C'est le but de ce chapitre : embellir vos pages html par tous les moyens...
Nous verrons tout d'abord comment agrandir les caractres, puis ensuite vous verrez des attributs de
texte (gras, soulign...). Aprs, vous pourrez aligner du texte et la fin, vous saurez choisir une
police de caractre (mais ce n'est pas trs conseill, vous verrez pourquoi).
Voil en gros ce que vous saurez faire, et vous verrez que votre page donnera alors bien plus envie
d'tre lue.
Taille des caractres
On a 2 moyens de donner la taille des caractres. Ces 2 moyens s'appliquent :
Soit aux titres
Soit au texte
Taille des titres
On utilise ce moyen pour les titres et son utilisation n'en est pas trs complexe.
On a le choix entre 6 tailles pour les titres, et on utilise chaque fois un tag diffrent. Le tag
commence toujours par "h", qui est suivi d'une taille entre 1 et 6 (1 tant la plus grande, 6 la plus
petite). Par exemple : <h4>. A partir de maintenant, pour les exemples, je ne mettrai plus tout le
corps de la page html. Vous savez que tout se mettra entre les 2 <body>(sauf indication contraire).
Regardez cet exemple-ci et essayez-le :
<h1>Tai l l e 1</ h1><br >
<h2>Tai l l e 2</ h2><br >
<h3>Tai l l e 3</ h3><br >
<h4>Tai l l e 4</ h4><br >
<h5>Tai l l e 5</ h5><br >
<h6>Tai l l e 6</ h6>
Taille du texte
Pour donner la taille du texte, on utilise le tag <font>(que nous aurons l'occasion de revoir).
Ajoutez-lui l'attribut size et prcisez-le par la taille de votre choix de 1 7 (par contre, ici, 5 est plus
petit que 6).
Exemple :
<f ont si ze=" 1" >Tai l l e 1</ f ont ><br >
<f ont si ze=" 2" >Tai l l e 2</ f ont ><br >
<f ont si ze=" 3" >Tai l l e 3</ f ont ><br >
<f ont si ze=" 4" >Tai l l e 4</ f ont ><br >
<f ont si ze=" 5" >Tai l l e 5</ f ont ><br >
<f ont si ze=" 6" >Tai l l e 6</ f ont ><br >
<f ont si ze=" 7" >Tai l l e 7</ f ont >
15
Si vous dsirez dfinir une taille pour tout le texte (celle par dfaut est 2), utilisez le tag <basefont>
juste aprs <body>. Prcisez <basefont size="x">, et remplacez x par la valeur de votre choix.
Explications concernant les attributs de texte

Ci-aprs seront dvelopps les attributs de texte logiques et physiques. A priori, ces mots ne
devraient pas vous voquer grand-chose. Et peut-tre vous font-ils peur (il n'y a pas de honte !) ?
N'ayez crainte, voici quelques explications.
Un attribut de texte logique laisse au navigateur le choix de la manire avec laquelle il va prsenter
le texte. On ne dit pas qu'un texte est gras, mais qu'il est "fort". Le navigateur interprtera sa
manire le tag. C'est une vieille mthode un peu dmode, viter si vous ne voulez pas avoir de
surprises...
Elle peut tre cependant intressante, vous verrez cela plus tard.
Un attribut de texte physique, vous l'aurez compris, impose au navigateur une certaine mise en
forme. Vous serez ainsi certain que votre texte s'affichera en italique par exemple.
Attributs de texte physiques
Voici un tableau indiquant le nom des tags (que vous ne devez pas oublier de fermer), et l'effet
qu'ils donnent :
Tag Effet
<b> Gras
<i> Italique
<u> Soulign
<sub>
Texte en indice

<sup>
Texte en exposant

<small>Pour crire en plus petit que la taille normale
<big> Pour crire en plus gros que la taille normale
<s> Barr
Ce sont les tags les plus employs. Petit exemple :
<bi g>N' oubl i ez pas ! </ bi g><p>
Vot r e chi en peut t r e <i >mal ade ! </ i > I l devr ai t
t r e <u>i mpr at i f </ u> de l ' emmener <b>r gul i r ement </ b>
chez un vt r i nai r e <sub>( comme moi ! ) </ sub>

Evitez tout de mme de surcharger votre page en attributs de texte. Regardez ce que celle-ci donne :
Attributs de texte logiques
Voici la liste de la plupart des attributs de texte logiques. Rappelez-vous que le rsultat une fois
affich ne sera peut-tre pas celui que vous attendez !


16
Tag Effet (en gnral)
<strong> Mise en valeur forte des caractres (souvent gras)
<em> Autre mise en valeur (souvent italique)
<cite>ou <blockquote>Utiliss pour les citations (souvent italique)
<code>
Pour pr sent er du code sour ce
<samp> Pr vu pour l es exempl es
<kb> Prsenter des saisies de l'utilisateur
<dfn> Pour les dfinitions
Ces tags n'ont plus une grande importance sur le web, alors il vaut mieux les viter. Mais rien ne
vous empche de les ressuciter !
Autre exemple, qui ne s'affichera srement pas de la mme manire d'un navigateur l'autre :
J e ci t e : <ci t e> 43%des mal adi es des chevaux sont des
une mauvai se hygi ne</ ci t e>
Et c' est <st r ong> i mpor t ant ! </ st r ong><p>
Aj out ez cel a sur vot r e l i st e des bonnes r sol ut i ons
de l ' anne 3144 : <df n>Hygi ne : Chose i mpor t ant e
r espect er </ df n>
Alignements
Pour aligner le texte, je vous conseille fortement d'utiliser le tag <div>, parce qu'il s'applique tous
types d'objets (images, texte, vido...). C'est donc pour des raisons de simplicit.
Il faut ajouter au tag <div>l'attribut "align" que vous prciserez par le type d'alignement. Les trois
types d'alignement sont :
Gauche : "left"
Centr : "center"
Droite : "right"
Exemple :
<di v al i gn=" l ef t " >A gauche</ di v><br >
<di v al i gn=" cent er " >Cent r </ di v><br >
<di v al i gn=" r i ght " >A dr oi t e</ di v>
Noter cependant que les tags <left>, <center>et <right>fonctionnent aussi.
Polices
Ce doit tre votre ternelle question sur le net : "Mais que fait la police ???". Il faut d'abord que
vous sachiez ceci :
Tout le monde vite de faire des fantaisies avec les polices. Et c'est pour une raison bien simple :
imaginez un seul instant que l'internaute qui lit votre page web ne possde pas les polices que votre
site utilise ! Le rsultat l'affichage sera alors tout fait innatendu car le navigateur choisira une
police neutre en remplacement, telle Arial.
Donc, viter. Mais le tag existe bel et bien, alors je vous le donne quand mme...
17
On utilise encore le tag <font>, comme pour la taille. Mais cette fois-ci, on ajoute l'attribut "face",
que l'on prcise par le nom de la police. Exemple :
<f ont f ace=" Mi st r al " >Mauvai se cr i t ur e</ f ont ><br >
<f ont f ace=" Si gnat ur e" >TRES mauvai se cr i t ur e</ f ont ><br >
<f ont f ace=" Wi ngdi ngs" si ze=" 10" >N</ f ont >
Vous remarquerez que si vous ne possdez pas une ou plusieurs polices, le texte s'affiche dans une
autre police.
Utilisez une de ces 3 polices, beaucoup de monde doit les avoir :
Arial
MS Sans Serif
Times New Roman
Voil !
Vous venez de voir de nombreux moyens d'embellir votre site. A partir de maintenant, en
combinant plusieurs tags, vous devriez pouvoir montrer une page web plus facile lire et plus claire
tous les internautes. On sentira dj que vous savez manier le html.
Mais votre site doit manquer de couleurs. Pas de problme ! Le prochain chapitre va colorer votre
page web !
La Couleur Dans Une Page HTML
Quoi ? Votre page est grise ? Il manque des couleurs ? J e vais vous en donner des couleurs ! Et par
tous les moyens ! Texte, liens, fond...
Voyez vous-mme.
Comment appeller une couleur ?
C'est une question trs importante car on a plusieurs choix. On peut donner une couleur en :
Donnant la couleur en anglais (vous n'aurez pas beaucoup de choix)
Indiquant les valeurs rouge-vert-bleu (trs prcis !)
La premire mthode est la plus pratique, mais elle offre moins de choix. Inversement pour la
deuxime mthode, elle est moins pratique mais offre normment de choix (256 X 256 X 256
couleurs, si vous voulez savoir.)
Voici les couleurs en anglais reconnues par la plupart des navigateurs :



18
Couleur Aperu
Black ||||||||||||||||||||||||||||||||||||||||||||
Silver ||||||||||||||||||||||||||||||||||||||||||||
Gray ||||||||||||||||||||||||||||||||||||||||||||
White ||||||||||||||||||||||||||||||||||||||||||||
Maroon ||||||||||||||||||||||||||||||||||||||||||||
Red ||||||||||||||||||||||||||||||||||||||||||||
Purple ||||||||||||||||||||||||||||||||||||||||||||
Fuchsia ||||||||||||||||||||||||||||||||||||||||||||
Green ||||||||||||||||||||||||||||||||||||||||||||
Lime ||||||||||||||||||||||||||||||||||||||||||||
Olive ||||||||||||||||||||||||||||||||||||||||||||
Yellow ||||||||||||||||||||||||||||||||||||||||||||
Navy ||||||||||||||||||||||||||||||||||||||||||||
Blue ||||||||||||||||||||||||||||||||||||||||||||
Teal ||||||||||||||||||||||||||||||||||||||||||||
Aqua ||||||||||||||||||||||||||||||||||||||||||||
Pour indiquer une couleur avec les valeurs rouge-vert-bleu, on doit suivre le schma ci-dessous :
#XXXXXX

Aprs le #, on donne les valeurs hexadcimales (les X) de la couleur.
En hexadciaml, 0=0, comme d'habitude, 1=1, 2=2, 3=3... 9=9, mais 10 on met des lettres. Donc
10=A, 11=B, 12=C, 13=D, et ce jusqu' 15 (F).
Deux X valent une couleur. Par exemple :
#4D708F

Veut dire qu'il y a 4 et 13 de rouge, 7 et 0 de vert, 8 et 15 de bleu.
Le texte
Pour colorer le texte, on reprend le tag <font>et on lui ajoute le nouveau tag color. Aprs, vous
indiquez la couleur comme dcrit plus haut.
<f ont col or =" #1ADE15" >J ol i e coul eur ! </ f ont ><br >
<f ont col or =" mar oon" si ze=" 9" >Mar r on ! </ f ont >

Rien de plus simple, maintenant que vous savez crire les couleurs !!!
Pour dfinir une couleur qui sera utilise sur toute la page, on doit ajouter un attribut au tag <body>
(eh oui ! y'en a !) : text. Exemple :
<body t ext =" navy" >
Bl a bl a bl a. . .
</ body>
Les liens
La couleur des liens doit tre dfinie avec un attribut du tag <body>: link.
<body t ext =" navy" l i nk=" #0FFF59" >
19
<a hr ef =" page. ht ml " >Cl i quez i ci ! </ a>
</ body>


De mme, il existe les attributs vlink et alink. vlink donne la couleur des liens visits et alink la
couleur des liens activs.

<body t ext =" navy" l i nk=" #0FFF59" al i nk=" bl ue" vl i nk=" r ed" >
Re- bl a bl a bl a.
</ body>
Le fond
Choisissez bien votre couleur de fond, parce qu'en gnral, c'est jamais super. Le mieux c'est
d'utiliser une image de fond. Mais si vous le voulez, utilisez l'attribut bgcolor du tag <body>.
<body bgcol or =" #2749E0" >
</ body>
Exemple rcapitulatif
Voici maintenant un exemple qui rcapitule tout ce que vous venez de voir.
J 'y ai ajout en plus d'autres tags que vous avez vu, et que vous devriez reconnatre. C'est une
page... haute en couleurs !
<ht ml >

<head>
<t i t l e>Ri en que des coul eur s ! </ t i t l e>
<met a name=" keywor ds" cont ent =" coul eur s, f l ashs, vi f , j aune,
ver t , r ouge, bl eu" >
<met a name=" descr i pt i on" cont ent =" Une page t r s col or e ! " >
<met a name=" gener at or " cont ent =" Bl oc- not es" >
<met a name=" aut hor " cont ent =" Mat hi eu Nebr a" >
</ head>

<body t ext =" gr een" l i nk=" mar oon" al i nk=" #14D5FA" vl i nk=" r ed"
bgcol or =" yel l ow" >

<basef ont si ze=" 4" >
<di v al i gn=" cent er " ><h1><f ont col or =" r ed" >FLASH ! ! !
</ f ont ></ h1></ di v>

<p><br >Bi envenue sur l a page de Mi st er col or ! Rgal ez
vos <b>yeux</ b> !
<p><br >
<a hr ef =" . . / coul eur . ht ml " >Par t i r ! ! ! ! </ a>

</ body>

</ ht ml >

Au moins, on ne se plaindra pas d'une certaine monotonie de votre page !
Maintenant nous allons apprendre insrer des images dans votre page html, et vous vous
demanderez ce que l'on serait sans images !


20
Les Images
En gnral, dans un site web, ce n'est pas l'image qui donne l'information (ou trs rarement). C'est
plutt le texte.
Cependant, sans elles, les sites web seraient bien tristes... et bien plus rapides charger !
C'est pourquoi on a adopt certains formats d'images qui prennent trs peu de place (voir "Formats
d'images").
Lorsque vous saurez quels formats d'image utiliser, vous pourrez insrer une image (c'est le but de
ce chapitre !) mais aprs, vous pourrez la manipuler souhait pour en faire un lien.
J e ne vous en dis pas plus...
Formats d'images
A partir de maintenant, vous pouvez oublier le format bmp ! Certes, le web l'accepte, mais pas les
internautes. Sa taille est vraiment norme compar aux formats du net.
Mais quels sont-ils, au fait ?
Les 2 formats les plus rpandus du net sont (retenez-les bien) :
Le gif
Le jpeg
Quelles sont leurs particularits ?
Les gif
Le format gif accepte jusqu' 256 couleurs seulement, mais c'est le plus utilis, sauf pour des
images ncessitant plus de couleurs (les photos par exemple).
Mais il a des qualits pour tre rpandu : on peut le rendre transparent (trs pratique) ou mme
l'animer ! De plus, il n'apparat pas ligne par ligne, mais couche par couche, ce qui veut dire qu'on a
l'image tout de suite et que sa qualit s'amliore peu peu.
Les jpeg
Les jpeg sont des images utilises pour les photos, car elles peuvent accepter jusqu' 16,7 millions
de couleurs. On ne peut cependant pas les animer et leur compression diminue nettement la qualit
de l'image.
Voil, c'est tout. Pour animer vos gif, je vous conseille Microsoft Gif Animator (chez Microsoft), en
anglais, mais trs simple d'emploi.

21
Insrer une image

Retournons Bloc-notes...
Le tag qui vous permet d'insrer une image est le tag <img>. Ce tag ne doit pas tre ferm : il n'y en
a qu'un qui indique simplement qu'une image est affiche l.
Ajoutez maintenant l'attribut "src".
Prcisez src par l'adresse de votre image. Souvenez-vous du chapitre sur les liens. Ici aussi, vous
pouvez indiquer l'adresse en absolu ou en relatif (et je vous conseille fortement le relatif, sinon, il
faudra que vous ou les internautes soyez connects au moment du chargement de la page).
Cela donne :
<i mg sr c=" I mages/ MonI mage. gi f " >

Rien de plus dire pour afficher votre image !
Il existe d'autres attributs pour le tag <img>, mais facultatifs. Par exemple : "alt".
Prcisez alt par le texte de votre choix. Celui-ci sera affich dans les navigateurs ne lisant pas les
images, ou alors lorsque l'on pointe sur l'image.
<i mg sr c=" I mages/ MonI mage. gi f " al t =" Ceci est une i mage que
j ' ai cr e ! " >

Vous pouvez aussi dfinir la hauteur et la largeur de l'image avec les attributs height et width.
height dfinit la hauteur de l'image en pixels.
width dfinit la largeur de l'image en pixels.
<i mg sr c=" I mages/ MonI mage. gi f " hei ght =" 90" wi dt h=" 65" >

Vous pouvez encore donner la taille de la bordure entourant l'image (qui est de 0 par dfaut) avec
l'attribut border.

<i mg sr c=" I mages/ MonI mage. gi f " bor der =" 8" >

Si vous souhaitez aligner votre image, utilisez comme vous l'avez vu, le tag <div>.

<di v al i gn=" cent er " ><i mg sr c=" I mages/ MonI mage. gi f "
al t =" Une i mage cent r e" ></ di v>

Enfin, 2 derniers attributs : hspace et vspace.
hspace dtermine la distance en pixels entre l'image et le texte ct.
vspace dtermine la distance en pixels entre l'image et le texte au-dessus et en-dessous.
<i mg sr c=" I mages/ MonI mage. gi f " hspace=" 50" vspace=" 26" >


22

Image de fond
Comme pour une couleur de fond, c'est un attribut au tag <body>qu'il faut ajouter. Il s'agit ici de
"background". Prcisez background par l'adresse situant l'image de fond.
Essayez de crer une petite image, de sorte ne pas voir la jonction entre chaque copie, puisque le
navigateur va copier l'image autant de fois qu'il le faut pour remplir l'cran.
<body backgr ound=" Fond. gi f " >
Images cliquables
Que peut bien tre une image cliquable ? Tout simple : une image qui fait office de lien, on clique
dessus et on va sur une autre page.
Pour cela, vous auriez trs bien pu le deviner, on prend le tag <a>, que l'on ferme aprs le tag
<img>:
<a hr ef =" ht t p: / / www. i nf oni e. f r " ><i mg sr c=" I mage. gi f " ></ a>

Mais le html peut mieux faire : il vous offre la possibilit de dfinir diffrents endroits de l'image
comme liens. Vous pouvez avoir plusieurs liens dans une image ! Sur la photo d'un paysage, par
exemple, le soleil amne au site d'un passionn de l'espace, la poubelle vers un site colo, les
animaux vers la WWF...
Commencez d'abord mettre le tag <map>. Ajoutez-lui l'attribut name que vous prciserez par un
petit mot de votre choix. Pensez fermer le tag plus loin.
<map name=" endr oi t " >
</ map>

Tout ce que vous allez crire prsent se trouvera entre ces 2 tags.
Ecrivez maintenant le tag <area>que vous ne devez pas fermer et que vous pourrez rpter autant
de fois que vous le dsirez. Il indique les parties de l'image qui vont servir de lien.
Vous devez ajouter 3 attributs chaque tag <area>:
shape
coords
href
L'ordre ci-dessus est respecter.
Shape dfinit la forme de la surface cliquable. Il peut avoir comme valeur :
Valeur Forme
shape="rect" Un rectangle
shape="circle" Un cercle
shape="polygon" Un polygone quelconque
23
En gnral on utilise un rectangle, ou si on veut tre plus prcis, un polygone quelconque. Plus
rarement des cercles.
L'attribut coords dpendra de la valeur de shape.
shape="rect"
Entre guillements, comme d'habitude, vous indiquez :
coor ds=" x1, y1, x2, y2"

Remplacez x1, y2... par des valeurs en pixels sachant que :
x1 =angle suprieur gauche, pixel de gauche
y1 =angle suprieur gauche, pixel du haut
x2 =angle infrieur droit, pixel de gauche
y2 =angle infrieur droit, pixel du haut
Par exemple :

<ar ea shape=" r ect " coor ds=" 50, 80, 250, 290" >
shape="circle"
Voici le schma suivre pour un cercle :
coor ds=" x, y, r "

Remplacez x, y et r par des nombres en pixels sachant que :
x =centre, pixel de gauche
y =centre, pixel du haut
r =rayon en pixels
Exemple :
<ar ea shape=" ci r cl e" coor ds=" 130, 150, 60" >
shape="polygon"
Avec un polygone, vous pouvez dfinir autant de coordonnes que vous le voulez. Respectez
seulement le schma suivant :
coor ds=" x1, y1, x2, y2, x3, y3, . . . . et c"

Vous devez dfinir 3 points minimum, cela fera un triangle.
x(Nombre) =pixel de gauche d'un point
y(Nombre) =pixel du haut du mme point

24
Pour finir, ajoutez le troisime tag "href", qui donne l'adresse o amne la surface cliquable. Voil
ce que cela pourrait donner :
<map name=" Cl i cI mage" >
<ar ea shape=" r ect " coor ds=" 45, 26, 210, 168"
hr ef =" si t e1. ht ml " >
<ar ea shape=" ci r cl e" coor ds=" 120, 154, 34"
hr ef =" si t e2. ht ml " >
<ar ea shape=" pol ygon" coor ds=" 50, 66, 110, 102, 232, 231"
hr ef =" si t e3. ht ml " >
</ map>

Ensuite, sortez des tags <map></map>et choisissez l'endroit o vous voulez insrer votre image
cliquable. Ajoutez en plus l'attribut "usemap" au tag <img>, que vous prcisez par l'attrbut "name"
du tag <map>, prcd d'un #(#ClicImage, par exemple).
Voil un exemple qui rcapitule ce chapitre, un peu lourd, je l'avoue. Si vous voyez une indsirable
bordure bleue autour de votre image, ajoutez l'attribut "border" et affectez-lui la valeur 0.
<body t ext =" r ed" >

<map name=" Cl i cI mage" >
<ar ea shape=" r ect " coor ds=" 65, 50, 75, 83"
hr ef =" . . / coul eur . ht ml " >
<ar ea shape=" ci r cl e" coor ds=" 40, 54, 20"
hr ef =" . . / bases. ht ml " >
</ map>

<b>

<di v al i gn=" cent er " >
<i mg sr c=" . . / I mages/ Bal l on. gi f " al t =" Une i mage ! "
vspace=" 20" hspace=" 20" usemap=" #Cl i cI mage" bor der =" 0" >
</ di v>
Pensez r egar der et
essayer de poi nt er l a sour i s sur l ' i mage pour f ai r e
f onct i onner l ' at t r i but al t , cl i quer sur l ' i mage
n' i mpor t e o. . . </ b>

</ body>
Utilisez votre programme de dessin pour connatre les coordonnes des points que vous voulez
taper.
Ouf ! C'est fini ! Enfin, juste pour les images... Pour le prochain chapitre, le sujet sera, ou plutt
seront, les puces. En bien plus court et bien plus simple, ne vous inquitez pas.

Les Listes
Ce chapitre est assez court compar au prcdent.
Vous allez apprendre crer des listes puces, et des listes numrotes. Elles vous seront bien
pratiques quand vous devrez numrer des actions effectuer, par exemple.
Et surtout, elles mettent bien en valeur ce texte-l, puisque il est dcal par rapport au reste du texte.
25
Vous allez voir, c'est trs simple.
Liste puces
Pour indiquer au navigateur o se trouvera votre liste puces, placez le tag <ul>o vous le dsirez
puis refermez-le plus loin.
Entre ces deux tags se trouvera la liste puces (ne mettez rien d'autre).
Pour indiquer une nouvelle ligne (avec une puce au dbut), crez un tag <li>et fermez-le plus loin.
Rptez autant de fois le tag <li>que vous le voulez, entre les deux tag <ul>.
Sur mon si t e vous t r ouver ez : <p>
<ul >
<l i >Les consei l s du pr of essi onnel du boomer ang</ l i >
<l i >La vi e de mol i r e en 46 pages</ l i >
<l i >Les l i ens i nt r essant s</ l i >
<l i >Une adr esse super : Appr enez l e ht ml ! </ l i >
</ ul >
Notez que vous n'avez pas besoin d'crire de tag <p>ou <br> la fin de chaque ligne.
Pensez aussi que vous pouvez combiner des tags, ce n'est pas interdit ! Essayez par exemple de faire
un lien pour chaque ligne de la liste, ou bien de tout mettre en gras...
Malheureusement, le html n'offre pas autant de puces qu'un traitement de textes...
Liste numrote
Si il y a un ordre dans vos actions, une prfrence... utilisez une liste numrote.
A chaque ligne le numro du dbut augmente d'un.
Pour ce faire, tapez le tag <ol>et refermez-le plus loin. Dfinissez chaque ligne avec le tag <li>,
comme tout l'heure.
Ma vi e l e di manche : <p>
<ol >
<l i >J e me l ve</ l i >
<l i >J e mange une t ar t i ne</ l i >
<l i >J e r et our ne au l i t </ l i >
</ ol >
Liste numrote avec des chiffres romains
Ajoutez un attribut au tag <ol>: "type". Prcisez-le par un i ou un I, c'est tout.
Liste numrote avec des lettres
Prcisez l'attribut type par un A ou un a, selon votre choix.
Commencer une liste numrote partir de...
26
Il faut un autre attribut au tag <ol>: "start", que vous prciserez par le chiffre de votre choix.
Exemple :
Au choi x dans l e menu dgust at i on : <p>
<ol t ype=" A" >
<l i >Sauce de cr apaud baveux</ l i >
<l i >I nt est i ns de cheval avec un coul i s de sang f r ai s</ l i >
<l i >Zombi e du j our ( dconsei l l aux enf ant s) </ l i >
</ ol >
Et voil ! Elles vous seront trs pratiques, les listes, vous verrez.
Prochain arrt : les tableaux. Accrochez-vous bien, il y a pas mal de choses dire dessus.
Les Tableaux
Quoi ? Vous croyez que les tableaux ne serviront rien pour votre page ? Dtrompez-vous !
Au contraire, ils ont une grande importance. Si vous regardez bien, beaucoup de sites contiennent
des tableaux.
Ils offrent une mise en page particulire, et vous pouvez tout mettre dedans !
Du texte, mais aussi des images, des vidos, du son... tout !
Vous vous rendrez compte de leur utilit lorsque vous ferez votre page.
Ceci dit, si vous voulez faire un petit tableau simplet, a ne sera pas difficile. Mais ds que vous en
voudrez plus, vous devrez combiner bon nombre de tags et d'attributs...
Crer un tableau
L, c'est trs facile. On utilise le tag <table>que l'on referme plus loin avec </table>. Ce tag
dlimite l'emplacement du tableau.
<t abl e>

</ t abl e>

Vous devez savoir qu'en html, un tableau se construit ligne par ligne. Pour indiquer une ligne, on
utilise le tag <tr>, referm avec </tr>.
C'est dans ce tag que l'on indiquera les cellules (cases du tableau).
Si vous faites un tableau 4 lignes, le code en html devrait ressembler a :







27
<t abl e>

<t r >
</ t r >

<t r >
</ t r >

<t r >
</ t r >

<t r >
</ t r >

</ t abl e>

Ensuite, entre les <tr>...</tr>vous devez dfinir les cellules.
On distingue 2 sortes de cellules :
Les cellules d'en-tte, dfinies avec <th>...</th>
Les autres cellules, contenant les donnes, dfinies avec <td>...</td>
Ainsi, normalement, la premire ligne contiendra des <th>et les autres des <td>.
Exemple :

<t abl e>

<t r >
<t h></ t h>
<t h></ t h>
</ t r >

<t r >
<t d></ t d>
<t d></ t d>
</ t r >

<t r >
<t d></ t d>
<t d></ t d>
</ t r >

<t r >
<t d></ t d>
<t d></ t d>
</ t r >

</ t abl e>

Vous auriez d comprendre qu'il s'agit d'un tableau 2 X 4 : 2 cellules en largeur et 4 en longueur.
Et c'est entre ces tags <th>ou <td>que vous devrez crire les informations qui seront affiches.
Ouf !
Et pourtant c'est le strict minimum, comme vous le verrez plus loin.
Vous n'tes pas oblig de mettre du texte entre <td>et </td>. Vous pouvez mettre le tag img que
vous connnaissez, et il y aura une image dans la cellule !
Petit exemple pour rsumer :
28

<di v al i gn=" cent er " >Pr i x des bus de vi l l e : <p>
<t abl e>

<t r >
<t h>Age de l a per sonne</ t h>
<t h>Pr i x moyen TTC</ t h>
</ t r >

<t r >
<t d>Moi ns de 3 ans</ t d>
<t d>4 f r ancs</ t d>
</ t r >

<t r >
<t d>Ent r e 3 et 14 ans</ t d>
<t d>8 f r ancs</ t d>
</ t r >

<t r >
<t d>Pl us de 14 ans</ t d>
<t d>10 f r ancs</ t d>
</ t r >

</ t abl e>
</ di v>
Et l, surprise(s) ! Il n'y a pas de bordures, pas de cadres ! Pas joli joli...
Par contre vous avez sans doute remarqu que la premire ligne tait mise en valeur (souvent en
gras).
Bon, c'tait relativement simple jusqu'ici, mais je crois que vous ne pouvez pas vous arrter l, il
vous faudrait au moins une bordure...
Bordures et quadrillage
J e vous propose une solution trs simple pour avoir une bordure. Il s'agit d'un attribut au tag
<table>. Il s'appelle "border".
Ce qui donne :
<t abl e bor der >

</ t abl e>

Pas besoin de prciser border si la taille de la bordure vous convient (en gnral c'est bon).
Mais si vous en voulez une plus petite ou plus grande, vous pouvez prciser border comme ceci :

<t abl e bor der =" 5" >

</ t abl e>

Cela ne marche que pour le contour du tableau. Pour modifier l'paisseur du quadrillage, utilisez un
autre attribut avec <table>que vous devrez imprativement prciser : "cellspacing".
Exemple :

<t abl e bor der =" 5" cel l spaci ng=" 6" >

</ t abl e>

29
En gnral on utilise seulement border et on ne le prcise pas. J e reprends l'exemple de tout
l'heure et j'y ajoute l'attribut border. Regardez la diffrence :

Dfinir la hauteur et la largeur des tableaux
Si vous dsirez vraiment dfinir une hauteur et une largeur pour votre tableau, ces lignes sont pour
vous. Mais elles ne sont pas vitales.
Si vous avez une grande image dans une cellule, alors peut-tre que vous dsirerez rduire la taille
du tableau qui a t soudainement agrandit.
Vous devrez ajoutez les attributs height et/ou width au tag <table>.
Height dfinit la hauteur du tableau
Width dfinit la largeur du tableau
Prcisez ces attributs par un pourcentage, comme ceci :
<t abl e bor der hei ght =" 34%" wi dt h=" 50%" >
Ce tableau avec bordure utilise 34% de la fentre de l'explorateur en hauteur et 50% en largeur.

Prciser une distance minimale entre le bord d'une
cellule et son contenu
Si vous voulez donner un effet de "centr" votre tableau, rien de tel que de dplacer le texte qui s'y
trouve l'intrieur.
Pour ce faire, vous allez devoir ajouter (encore !) un attribut au tag <table>: cellpadding.
Prcisez cellpadding par un nombre en pixels (plus question de pourcentage). Exemple :
<t abl e bor der cel l paddi ng=" 12" wi dt h=" 75%" >
<t r >
<t h>C' est j ust e. . . </ t h>
<t h>. . . un essai </ t h>
</ t r >
</ t abl e>
Ombres et couleurs d'un tableau
Couleur de fond
Pour dfinir la couleur de fond d'un tableau, il faut utiliser l'attribut bgcolor du tag <table>.
On le prcise par une couleur en hxadcimal ou en anglais (voir le chapitre sur les couleurs).
Choisissez une couleur plutt claire pour le tableau, de prfrence.
Voici un exemple :
<t abl e bor der bgcol or =" aqua" >

30

Bordure
Pour dterminer la couleur des bordures et du quadrillage, on utilise l'attribut bordercolor (toujours
du tag table) :
<t abl e bor der bor der col or =" r ed" >

Ceci dit, l'effet donn n'est plus trs joli. Vous pouvez oublier cet attribut...
Ombrage
Par contre ceci est plus intressant. Dfinissez vous-mme la couleur claire et la couleur fonce de
l'ombre avec bordercolordark et bordercolorlight.
bordercolorlight dfinit la couleur la plus claire de l'ombre
bordercolordark dfinit la couleur la plus fonce de l'ombre
Ces attributs vont toujours ensemble. Si vous mettez l'un, vous devriez mettre l'autre.
D'autre part, vitez les couleurs farfelues qui ne rimeraient rien, pour prserver l'effet d'ombrage.
Enfin, et ce n'est pas le moins important, vous devriez prciser l'attribut border dans ce cas, pour
faire une grosse bordure, disons border="10". Sinon ces attributs bordercolorlight et
bordercolordark ne prendraient pas effet.
Exemple :
<t abl e bor der =" 9" bgcol or =" si l ver " bor der col or l i ght =" navy"
bor der col or dar k=" t eal " >

<t r >
<t h>Est - ce que cet al l i age</ t h>
<t h>de coul eur s</ t h>
<t h>vous pl a t ?</ t h>
</ t r >

</ t abl e>
Voil pour les tableaux. Vous comprenez maintenant ce que je vous ai dit au dbut du chapitre : un
tableau simple, ce n'est rien, mais quand on veut faire mieux...
Le chapitre suivant traite des formulaires. Autant vous prvenir tout de suite, c'est de loin le plus
difficile.
Mais si vous vous accrochez solidement, vous pourrez faire des trucs super !
Les Formulaires
Tt ou tard vous serez amen faire un formulaire pour votre site web. Pourquoi, et dans quel but ?
Ne vous est-il jamais arriv de remarquer que votre site manque un peu de mouvements ? Parce
qu'en fait, un site web, au dpart, c'tait fait pour lire et obtenir des informations.
31
Mais on peut faire bien mieux.
On peut ajouter quelques ingrdients qui demandent l'internaute d' "agir".
Ces ingrdients s'appellent : les formulaires.
Ainsi, votre site aura des lments des programmes informatiques : cases cocher, boutons, zones
pour crire, listes droulantes, boutons d'options...
En gnral, par la suite, on clique sur un bouton "Envoyer", ce qui dclenche le traitement des
donnes que l'utilisateur a entres, et leur envoi sur le site, sur votre courrier lectronique...
Voil en gros quoi consiste un formulaire.
Quelques exemples, pour vous montrer leur utilit :
Un questionnaire sur l'internaute, ses habitudes et ce qui lui plat ou pas sur votre site (trs
frquent).
Un vote pour un jeu, une ide, un site ou pour tout autre chose.
Une commande pour votre logiciel ou un de vos CD dont vous voulez vous dbarrasser.
A vous d'imaginer tout ce qu'un formulaire pourrait apporter votre site.
Cependant, vitez de poser des questions qui ennuieraient l'internaute : votre ge, votre adresse,
votre numro de carte bancaire... Essayez de prserver l'anonymat de cette personne.
Mais bien sr, tout ce qui est intressant est difficile faire. Sachez que, si vous avez bien suivi (et
compris) tous les chapitres de Apprenez le HTML, vous n'aurez pas trop de problmes. Sinon,
accrochez-vous un peu, mais je pense que vous pouvez y arriver quand mme.
Crer un formulaire
Dfinissez l'endroit o se trouvera votre formulaire. Utilisez pour cela le tag <form>. Refermez-le
plus loin, comme ceci :
<f or m>
</ f or m>

Evidemment, ce tag a besoin d'attributs. Le premier est : "action". On le prcise par le chemin
d'accs du programme qui va traiter le formulaire.
Comme je vous l'ai dj dit, il faut que ces donnes soient traites partir d'un programme. La
meilleure solution consiste crer un script CGI, comme nous le verrons plus loin. Si vous
souhaitez que la rponse au formulaire vous soit directement envoye par mail, crivez par exemple
(en remplaant cette adresse par la votre) :
<f or mact i on=" mai l t o: j dupont @wanadoo. f r " >
</ f or m>

Le deuxime attribut est "method". On le prcise par GET ou POST. Lequel choisir ?
GET permet d'envoyer des donnes ne dpassant pas 1Ko, ce qui est peu.
POST est plus pratique car non limit. Il vous sera utile si vous envoyez les donnes par
mail.
32
Conclusion, si vous hsitez, optez pour POST, comme ceci :

<f or mmet hod=" post " >
</ f or m>
Zones de saisie
A l'intrieur du tag <form>, vous allez dfinir votre formulaire. Vous pouvez bien sr mettre des
phrases et utiliser des tags pour mettre en forme du texte.
Vous avez plusieurs moyens pour demander des informations l'internaute. Un des plus frquents
est la zone de saisie.
Une zone de saisie ressemble a :

Zone de saisie monoligne
Ecrivez le tag <input>. Il ne doit pas tre referm. Comme pour les images, il sert juste dire qu'il y
a quelque chose l.
Prcisez l'attribut "name" par le nom que vous voulez donner cette zone de saisie. Cela ne sera pas
affich l'cran, mais vous en aurez besoin pour traiter les donnes. Donnez un nom reprsentatif
de prfrence.
Exemple :
<f or mact i on=" mai l t o: j dupont @wanadoo. f r " met hod=" post " >
<i nput name=" nomduchat " >
</ f or m>

Il vaut mieux viter les majuscules, les espaces et autres caractres.
Vous devez aussi donner d'autres informations obligatoires.
Il y a l'attribut "size" que l'on prcise par la longueur de la zone de saisie.
"maxlength", quant lui, indique le nombre maximum de caractres autoriss.
Petit exemple :
<f or mact i on=" mai l t o: j dupont @wanadoo. f r " met hod=" post " >
Cet t e zone de sai si e est de t ai l l e 6 et est l i mi t e 6
car act r es : <i nput name=" nomduchat " si ze=" 6" maxl engt h=" 6" >
<p>
Cel l e- ci est de t ai l l e 6, mai s d' une l ongueur maxi mal e de
4 car act r es : <i nput name=" nomduchi en" si ze=" 6"
maxl engt h=" 4" >
<p>
Cel l e- l est de t ai l l e 6 est l i mi t e 9 car act r es :
<i nput name=" nomduper r oquet " si ze=" 6" maxl engt h=" 9" >
</ f or m>
Vous pouvez aussi demander ce que l'internaute respecte certaines conditions. Imaginez que
demandiez une adresse e-mail, et qu'on vous renvoit quelque chose du type : "Blabla"...
33
Heureusement, un attribut, non obligatoire celui-ci, va vous venir en aide.
Il s'appelle "type". Ce petit tableau vous explique comment l'utiliser :
Valeur de "type" Description
int Un nombre entier doit tre entr.
float Un nombre dcimal doit tre entr
date Une date doit tre entre. Exemple : 07/10/96
url Une adresse e-mail doit tre entre. Exemple : jdupont@wanadoo.fr
password

Le texte entr est masqu par des * :

Si vous le dsirez, vous pouvez utiliser aussi les attributs "max" et "min". Ils permettent de dfinir
respectivement le plus grand nombre et le plus petit qui puisse tre entr. A utiliser avec l'attribut
type="int" ou type="float".

Zone de saisie multiligne
Le tag utiliser pour une zone de saisie plusieurs lignes est diffrent de ce que nous venons de
voir.
Il s'agit de <textarea>. Pensez mettre l'attribut "name" pour le nommer.
Pour la taille, utilisez les attributs "rows" et "cols". Ils indiquent le nombre de lignes et de colonnes.
Mais attention ! Ce tag doit se refermer plus loin ! Qu'crit-on entre les 2 ? Le texte afficher par
dfaut. Ce que l'internaute voit dans la zone de texte au dpart. Si vous ne voulez rien y mettre,
n'crivez rien.
Exemple :
<t ext ar ea name=" vot r evi e" r ows=" 5" col s=" 13" >
Tapez vot r e t ext e i ci .
</ t ext ar ea>
Listes d'options
Si l'internaute doit faire un seul choix parmi une liste, je vous conseille d'utiliser les listes d'options.
Elles ressemblent ceci :
Moins de 10 ans

Comme une telle liste contient plusieurs choix, on doit indiquer d'abord que l'on fait une liste l et
dire o elle s'arrte.
Utilisez le tag <select>, avec l'attribut "name" (c'est obligatoire, il faut le nommer). Refermez ce tag
plus loin, comme ceci :
<sel ect name=" mal i st e" >

</ sel ect >

34
Pour crer une option, mettez le tag <option>dans le tag <select>et refermez-le plus loin. Entre le
<option>et le </option>, tapez le texte afficher.
Exemple :
Vi l l e :
<sel ect name=" mal i st e" >

<opt i on>Par i s</ opt i on>
<opt i on>Avi gnon</ opt i on>
<opt i on>Mar sei l l e</ opt i on>
<opt i on>Li l l e</ opt i on>
<opt i on>Lyon</ opt i on>

</ sel ect >
Vous pouvez aussi dfinir une taille prcise pour la liste d'options, pour donner cet effet :
Paris
Avignon
Marseille
Lille
Lyon

Ajoutez l'attribut size au tag <select>, et prcisez-le par sa taille, comme ceci :
<sel ect name=" mal i st e" si ze=" 5" >
Si vous souhaitez que l'on puisse slectionner plusieurs options, ajoutez l'attribut "multiple" au tag
<select>:
<sel ect name=" mal i st e" si ze=" 5" mul t i pl e>
Ainsi on peut slectionner plusieurs options en maintenant les touches CTRL ou Maj enfonces :
Paris
Avignon
Marseille
Lille
Lyon

Boutons d'option et cases cocher
Toutefois, les lments les plus utiliss dans les formulaires (ils sont plus pratiques) sont :
Les boutons d'option : Option 1 Option 2
Et les cases cocher : Choix 1 Choix 2
En cliquant un peu partout vous vous tes srement rendu compte que ces deux lments
fonctionnent diffremment. On ne peut slectionner qu'un bouton d'option, tandis que l'on peut
choisir pour chaque case cocher sa valeur (coche ou non).
Commenons par les boutons d'option...
Les boutons d'option
Pour dfinir un bouton d'option, on utilise aussi le tag <input>. Pour le diffrencier des zones de
saisie par exemple, on doit lui ajouter l'attribut "type" et le prciser par "radio", comme ceci :
<i nput t ype=" r adi o" >
Le navigateur sait alors quoi il a affaire. Mais vous n'tes pas encore tir d'affaire ! Vous devez
rajouter encore 2 attributs.
35
Le premier, c'est "name". Vous le connaissez, mais attention ! Ici a ne fonctionne pas pareil. Ce
n'est pas un nom unique que l'on doit donner, mais le nom du groupe de boutons auquel il est reli.
Petite explication...
Monsieur, Madame
Mari, Clibataire
Voyez par vous-mme. On a le choix entre Monsieur, Madame, Mari ou Clibataire. Mais vous
devez slectionner un bouton d'option par ligne, alors qu'ici si vous avez cliqu sur Monsieur puis
sur Mari, Monsieur se dslectionne ! Il vous faut un groupe dans chacune des lignes. D'o l'intrt
de crer des groupes de boutons. Voici le rsultat :
Monsieur, Madame
Mari, Clibataire
Donnez donc la mme valeur l'attribut "name" pour chaque bouton d'option d'un mme groupe.
Cependant, tout ceci n'enlve pas le fait que chaque bouton d'option doive avoir un nom unique.
Utilisez l'attribut "value" que vous prciserez par le nom du bouton.
Petit exemple :
<f or m>
<i nput t ype=" r adi o" name=" Sexe" val ue=" Monsi eur " >Monsi eur ,
<i nput t ype=" r adi o" name=" Sexe" val ue=" Madame" >Madame<p>
<i nput t ype=" r adi o" name=" Si t uat i on" val ue=" Mar i " >Mar i ,
<i nput t ype=" r adi o" name=" Si t uat i on" val ue=" Cl i bat ai r e" >
Cl i bat ai r e
</ f or m>

Ah ! Et un dernier petit truc... Si vous voulez qu'un bouton d'option soit prslectionn, ajoutez-lui
l'attribut "checked". Vous n'avez pas besoin de le prciser.
Cases cocher
Ici on va aller plus vite, vous savez dj le principal.
Une case cocher se cre avec le tag <input>et l'attribut "type=checkbox" :
<i nput t ype=" checkbox" >
On doit aussi crer des groupes de cases cocher dfinis avec l'attribut "name" comme pour les
boutons d'option. Cela ne change rien de spcial la vue de l'internaute, car une case cocher
n'obit pas aux mme lois qu'un bouton d'option. Vous aurez pourtant besoin de connatre les noms
des groupes pour classer, organiser les donnes lorsque vous les recevrez.
Donnez un nom diffrent chaque case cocher avec l'attribut "value", ajoutez l'attribut "checked"
si vous voulez que la case cocher soit coche ds le dpart et c'est gagn !
Un exemple ?


36

<f or m>
Cochez l es al i ment s que vous ai mez i ci : <p>
<i nput t ype=" checkbox" name=" Al i ment sBons" val ue=" Fr i t es" >
Fr i t es,
<i nput t ype=" checkbox" name=" Al i ment sBons" val ue=" Fr omage" >
Fr omage,
<i nput t ype=" checkbox" name=" Al i ment sBons"
val ue=" Hambur ger " >Hambur ger ,
<i nput t ype=" checkbox" name=" Al i ment sBons" val ue=" Vi ande" >
Vi ande.
<p>Cochez l es al i ment s que vous n' ai mez pas : <p>
<i nput t ype=" checkbox" name=" Al i ment sPasBons"
val ue=" Epi nar ds" >Epi nar ds,
<i nput t ype=" checkbox" name=" Al i ment sPasBons"
val ue=" Lzar d" >Lzar d,
<i nput t ype=" checkbox" name=" Al i ment sPasBons"
val ue=" Escar got s" >Escar got s.
</ f or m>

Boutons de commande
Utiliss en gnral pour commander l'envoi du formulaire ou sa rinitialisation, les boutons de
commande ressemblent ceci :
Cliquez !

Pour faire un tel bouton, vous utiliserez (encore !) le tag <input>, avec l'attribut "type" que l'on
pourra prciser de 4 manires :
type="submit" : commande l'envoi du formulaire
type="reset" : remet zro le formulaire
type="button" : ne fait rien de spcial, attend une autre instruction (script...)
Quelle que soit la valeur choisie, cela donne un joli bouton de commande.
Toujours la proprit "name" dfinir, et un attribut "value" qui indique cette fois ce qui est affich
:
<i nput name=" Bout onFun" t ype=" submi t " val ue=" Go go go go ! " >
Cela donne :
Go go go go !

Envoi des donnes
Ouf ! Enfin ! On va pouvoir rcuprer les donnes.
Revenons au tag <form>et revoyons ses attributs :
<f or mact i on=" mai l t o: j dupont @wanadoo. f r " met hod=" post " >
</ f or m>

C'est le schma que je vous conseille d'utiliser (en remplaant bien sr jdupont@wanadoo.fr par
votre adresse).
37
Vous recevrez chez vous un mail et son contenu dpendra du browser qui l'a envoy. Avec IE5 par
exemple, vous recevez un mail avec comme objet "Formulaire post avec Microsoft Internet
Explorer." et un fichier joint (postdata.att) que vous pourrez ouvrir avec bloc-notes.
Et vous vous apercevrez alors que tout n'est pas rose. En effet, le message est plutt... cod.
Certains caractres sont remplacs par d'autres.
La rponse fonctionne comme ceci :
NomDeL'objet=Valeur&NomDeL'Objet=Valeur&NomDeL'Objet=....
Vous comprenez maintenant l'intrt de bien choisir le nom des objets du formulaire que vous
intgrez ?
Rfrez-vous ce petit tableau qui vous donne quelques correspondances :
Si vous voyez...... cela signifie :
%2B +
%3D =
%26 &
%27 '
+ Espace
Ce n'est pas vident comme vous pouvez le constater. Mais avec un peu d'habitude on s'y fait.
L'envoi a t command par le bouton et la proprit : type="submit". Le message sera envoy
suivant l'instruction qui se trouve dans l'attribut "action" du tag <form>. Il n'y a rien d'autre
ajouter...
Vous pourrez donc finalement comprendre ce que l'internaute a rempli dans son formulaire. Si vous
voulez obtenir quelque chose de plus clair (et de plus complexe videmment !), vous devez avoir
recours au CGI. Voyez plus bas.
Le CGI
On va finir tranquillement ce gros chapitre, un peu fastidieux je le reconnais.
Tout d'abord, le CGI (Common Gateway Interface) est un petit langage de programmation qui va
vous permettre de ranger, classer et organiser les rponses reues. C'est tout de mme quelque chose
qui dpasse ce site exclusivement consacr au HTML.
J e ne peux donc que vous renvoyer vers quelques adresses pour que vous puissiez vous renseigner.
Il faudra apprendre le programmer, et ce n'est pas toujours chose facile...
Solution ! Utiliser des scripts CGI tous prts ! A condition de parler un minimum d'anglais, of
course...
J e vous propose ces adresses :
http://www.perl-gratuit.com (franais)
http://www.cgi-resources.com
http://www.worldwidemart.com/scripts
38
Bonne pche !
Et bien voil... Les formulaires n'ont plus de secrets pour vous.
Vous trouverez dans le chapitre suivant tout ce qu'il faut pour faire de jolis frames. Qu'est-ce que
c'est ? Surpriiise !
Les Frames
L'utilit des frames est incontestable. Grce eux vous pouvez sparer une fentre du navigateur en
2, 3, 4... Mme si certains en abusent, je vous recommande vivement d'en mettre un dans votre page
perso. L'internaute pourra ainsi accder plus facilement et plus rapidement aux informations qu'il
cherche.
Peut-tre que ce terme ne vous dit rien, alors cliquez sur ce bouton pour voir quoi ressemble un
frame :
Sachez qu'il est tout fait possible de mettre plus de frames que a, mais cela risque d'encombrer
votre site.
Il est possible que votre navigateur soit trop ancien et ne connaisse pas les frames. En effet, les
frames ne datent pas du dbut du HTML, donc si vous avez un vieux navigateur, vous tes cuit et
un texte vous le fera savoir.
La meilleure solution ? Vous procurer une verison plus rcente de votre navigateur !
Dclarons un frame !
Insrer un frame
Il vous faudra crer autant de fichiers HTML qu'il n'y a de frames, sans compter le fichier qui fait
appel aux frames.
Pour raliser l'exemple que vous avez vu tout l'heure, il m'a fallu un fichier pour appeler les
frames, puis un fichier par frame. Ce qui fait 3 fichiers en tout !
Ca complique un peu les choses...
Pour commencer, on va s'occuper du fichier qui fait appel aux frames...
Ce fichier ne contiendra pas beaucoup d'informations. Vous pouvez la rigueur faire l'en-tte de
votre page avec <head>et y mettre le tag <title>pour le titre des 2 pages, ainsi que des mta-tags,
mais c'est tout.
Nouveaut ! Il n'y a pas de tag <body>! La page va ressembler a :







39
<ht ml >

<head>
<t i t l e>Le t i t r e de ma page avec f r ames</ t i t l e>
</ head>

<! - - Et i ci , l es appel s aux f r ames, non ent our s du t ag
body. . . - - >

</ ht ml >

Bien. Premire question : combien de frames voulez-vous, et dans quel sens ? En effet, les frames
peuvent tre orients de manire horizontale ou verticale. Dans les deux cas, utilisez le tag
<frameset>. Ensuite, accompagnez-le d'un de ces deux attributs :
Pour des frames orients verticalement, comme dans l'exemple de tout l'heure, prenez
"cols"
Sinon, pour des frames orients horizontalement, prenez "rows"
Vous devrez ensuite donner la taille des frames. Il faut prciser l'attribut que vous avez choisi par
une srie de pourcentages, spars pour chaque frame d'une virgule :

<f r ameset col s=" 18%, 51%, 31%" >

Cela donnera 3 frames : le premier d'une taille correspondant 18% de la fentre du navigateur, le
second 51% et le dernier 31%. C'est simplissime, comme vous pouvez le voir.
Fermez le tag frameset plus loin, pour faire :
<f r ameset col s=" 18%, 51%, 31%" >
</ f r ameset >

Nous allons indiquer quelles sont les pages HTML correspondant chaque frame entre les deux
<frameset>.
Pour chaque page vous devez crire un tag <frame>.
Puis ajoutez ce tag l'attribut "src", prcis du chemin d'accs au fichier HTML ; ainsi que l'attribut
"name" pour donner un nom quelconque votre frame :
<f r ame sr c=" f r ame1. ht ml " name=" gauche" >
<f r ame sr c=" f r ame2. ht ml " name=" mi l i eu" >
<f r ame sr c=" f r ame3. ht ml " name=" dr oi t e" >

Et voil qui est fait ! Vous n'avez plus qu' crer les fichiers frame1.html, frame2.html et
frame3.html, et la page sera complte !
J e vais juste vous donner quelques autres infos pour l'attribut "cols" ou "rows".
Premirement, vous n'tes pas oblig de mettre des pourcentages ; si vous mettez juste des nombres,
cela indiquera au browser un nombre de pixels.
Et deuximement, si vous mettez une * la place d'un nombre, cela indiquera au browser que ce
frame prend toute la place qui reste. Si le premier frame est large de 20% et que vous mettez une *,
le deuxime frame sera large de 80%.
40
Pensez aussi ceux qui ont des navigateurs qui ne connaissent pas les frames. Aprs le </frameset>,
crivez le tag <noframes>et refermez-le plus loin. Tapez un petit texte l'attention de ceux qui ne
peuvent pas voir de frames. Ce texte ne sera pas affich si les frames fonctionnent correctement.
Sachez que les frames peuvent tre redimensionns la guise de l'internaute. Si vous voulez
empcher ceci, il vous faut ajouter l'attribut "noresize" aux tags <frame>. Exemple :
<f r ame sr c=" f r ame1. ht ml " name=" gauche" nor esi ze>
<f r ame sr c=" f r ame2. ht ml " name=" mi l i eu" nor esi ze>
<f r ame sr c=" f r ame3. ht ml " name=" dr oi t e" nor esi ze>
Finissons avec un petit exemple pour rcapituler :
<ht ml >

<head>
<t i t l e>Ma page avec des f r ames ! </ t i t l e>
</ head>

<f r ameset col s=" 20%, *" >
<f r ame sr c=" 11b1. ht ml " name=" gauche" >
<f r ame sr c=" 11b2. ht ml " name=" dr oi t e" >
</ f r ameset >

<nof r ames>
Si vous pouvez l i r e ces l i gnes, c' est que vot r e navi gat eur
ne supppor t e pas l es f r ames.
</ nof r ames>

</ ht ml >
J e n'ai pas mis ici le code des pages 11b1.html et 11b2.html, simplement parce que vous savez dj
les raliser.
Les liens dans un frame
J usqu'ici, les frames ne devraient pas vous avoir caus trop de problmes, je pense.
Ici, nous allons parler des liens dans une page qui contient des frames. En effet, comme vous avez
pu le constater dans l'exemple prcdent, c'est pas joli-joli si on clique sur un des liens du frame de
gauche.
Il est possible d'indiquer vers o et comment le lien doit amener. On aurait prfr que les liens
amnent tous dans le grand frame, non ?
Il faut rajouter un attribut au lien dont on veut modifier la cible. Il s'agit de "target" qu'il faut
prciser par un de ces mots, selon votre choix :
Si l'on veut que...
Il faut prciser
"target" par :
La page s'affiche dans le mme frame que le lien _self
La page s'affiche dans l'autre frame (s'il n'y en a pas une nouvelle fentre est cre) _parent
La page s'affiche dans une nouvelle fentre du navigateur _blank
La page s'affiche dans la mme fentre du navigateur, cette fois sans frames _top
La page s'affiche dans un frame prcis de votre site
Le nom du
frame
41
Voici 2 exemples. Le premier lien affiche la page cible dans une nouvelle fentre, et le second dans
le frame appel "toto".
<a hr ef =" ci bl e. ht ml " t ar get =" _bl ank" >Cl i quez</ a>

<a hr ef =" ci bl e. ht ml " t ar get =" t ot o" >Cl i quez</ a>

Et si tous les liens d'une mme page sont destins amener au mme endroit, vous pouvez crire
dans l'en-tte de votre page, c'est dire entre les 2 <head>, le tag <base>avec l'attribut "target"
comme vous savez maintenant l'utiliser :

<head>
<base t ar get =" _t op" >
</ head>

Concluons ce chapitre avec cet exemple :

Code de la page qui appelle les frames :
<ht ml >

<head>
<t i t l e>Des f r ames et des l i ens</ t i t l e>
</ head>

<f r ameset r ows=" 50%, *" >
<f r ame sr c=" 11c1. ht ml " name=" unf r ame" >
<f r ame sr c=" 11c2. ht ml " name=" deuxf r ames" >
</ f r ameset >

<nof r ames>
Si vous pouvez l i r e ces l i gnes, c' est que vot r e navi gat eur
ne supppor t e pas l es f r ames.
</ nof r ames>
</ ht ml >

Code du frame du haut :

<ht ml >

<head>
</ head>

<body>
<a hr ef =" . . / bases. ht ml " t ar get =" _sel f " >Pour r evoi r l es
bases du ht ml dans ce f r ame</ a<p>
<a hr ef =" . . / bases. ht ml " t ar get =" deuxf r ames" >Pour r evoi r l es
bases dans l ' aut r e f r ame. </ a><p>
<a hr ef =" . . / bases. ht ml " t ar get =" _bl ank" >Pour r evoi r l es
bases dans une nouvel l e f ent r e. </ a><p><br >
<a hr ef =" 11c2. ht ml " t ar get =" deuxf r ames" >Pour r est aur er l a
page de dpar t du f r ame du bas. </ a>
</ body>

</ ht ml >

Code du frame du bas :





42

<ht ml >

<head>
</ head>

<body>
<a hr ef =" . . / sommht ml . ht ml " t ar get =" _sel f " >Pour voi r l e
sommai r e dans ce f r ame</ a><p>
/ sommht ml . ht ml " t ar get =" unf r ame" >Pour voi r l e
sommai r e dans l ' aut r e f r ame. </ a><p>
<a hr ef =" . . / sommht ml . ht ml " t ar get =" _bl ank" >Pour voi r l e
sommai r e dans une nouvel l e f ent r e. </ a><p><br >
<a hr ef =" 11c1. ht ml " t ar get =" unf r ame" >Pour r est aur er l a
page de dpar t du f r ame du haut . </ a>
</ body>

</ ht ml >
Vous devriez avec ce dernier exemple pouvoir manier les frames la perfection !
Objet du prochain chapitre : les scripts, ou comment faire des trucs et des bidules dignes d'un
programme dans une page web.
Les Scripts
Toutes les bonnes pages ont maintenant recours aux scripts, pour amliorer le confort des visiteurs
et pour ajouter un petit "plus" interactif qui fera que votre page ne sera vraiment pas comme les
autres.
Il n'est, certes, pas vident de manier ces choses-l, mais ds qu'on matrise un peu les scripts, on
peut aller trs trs loin...
Assez bavard. Vous ne voyez peut-tre pas ce que les scripts peuvent donner votre page... Et
pourtant leurs possibilits sont infinies !
J e vous laisse donc imaginer toutes les possibilits !!! Voyons voir maintenant comment insrer un
script dans sa page HTML.
Insrer un script
Tout d'abord, il faudrait savoir o insrer votre script. Ce n'est pas toujours la mme chose, a
dpend du script que vous utilisez. Dans la majorit des cas, vous pouvez le mettre n'importe o
dans votre code HTML (entre les 2 <body>, bien sr).
Le tag pour insrer un script n'est pas dur retenir, c'est <script>. Vous devez le refermer plus loin,
de manire dlimiter la zone du script, comme ceci :
<scr i pt >
<! - - I ci se t r ouver a vot r e scr i pt - - >
</ scr i pt >

Vous devrez par la suite ajouter obligatoirement l'attribut "language". Cet attribut devra tre prcis
par le langage que vous utiliserez dans votre script.
43
L, je pense que a se corse. J e m'explique.
Les scripts sont des minis-langages de programmation. Oui, c'est de la programmation miniature.
Ce qui veut dire que ce n'est pas la porte de tout le monde. Si vous n'avez jamais programm, ce
qui risque fort d'arriver, vous pouvez vous rabattre sur des scripts tout prts que proposent certaines
pages web.
Quoiqu'il en soit, il faut que vous sachiez que les langages les plus connus pour les scripts sont :
Les J avaScripts : du langage J ava
Les VbScripts : du langage Visual Basic
Il me semblerait que les J avaScripts soient les plus utiliss, pour leur puissance, mais les VbScripts
sont un peu plus faciles.
Il est hors de question de vous enseigner ici un de ces langages, ce serait vraiment trop long.
Votre tag ressemblera donc a :
<scr i pt l anguage=" J avaScr i pt " >

Ou a :

<scr i pt l anguage=" VbScr i pt " >
JavaScripts
Le texte dfilant
Voil un script sympa, qui risque quand mme de ralentir un petit peu votre PC (rien de bien grave).
Insrez ce code n'importe o dans votre page HTML :
<scr i pt l anguage=" J avaScr i pt " ><! - -
/ / debut du scr i pt
var msg = " Vot r e t ext e i ci ! " ;
var espaceur = " " ;
pos=0;
f unct i on def i l msg( ) {
wi ndow. st at us=msg.
subst r i ng( pos, msg. l engt h) +
espaceur +
msg. subst r i ng( 0, pos) ;
pos++;
i f ( pos > msg. l engt h)
pos=0
wi ndow. set Ti meout ( " def i l msg( ) " , 200)
}
/ / f i n du scr i pt
/ / - - ></ scr i pt >

Vous pouvez remplacer "Votre texte ici !" par le texte de votre choix (c'est en haut du script).
Pour faire fonctionner ce script, vous devez ajouter au tag <body>l'attribut "onload", prcis par
"defilmsg()" : <body onload="defilmsg()">.
44
Il ne vous reste plus qu' admirer le rsultat.
Le dgrad de couleur
Un script trs fun, mais plus complexe que le prcdent (plus gros aussi).
Vous devez metre ce script l'endroit prcis o vous voulez voir votre dgrad de couleurs :
<scr i pt l anguage=" J avaScr i pt " ><! - -

<! - -
/ / Fadi ng J avaScr i pt ( C) 1999 Webmast er - f r - des t as de ser vi ces gr at ui t s !
-
/ / web : ht t p: / / www. webmast er - f r . net
/ / e- mai l : webmast er @webmast er - f r . net
/ / Ce scr i pt est l i br ement ut i l i sabl e. Mer ci de ne pas ef f acer ces
comment ai r es.

var hexa = " 0123465789ABCDEF" ;

f unct i on DecToHexa( DecNb) {
x = Mat h. f l oor ( DecNb / 16) ;
h = hexa. char At ( x) ;
x = DecNb %16;
h += hexa. char At ( x) ;

r et ur n h;
}

f unct i on Degr ade( dr , dg, db, f r , f g, f b, t ext e) {
st eps = t ext e. l engt h;
cr = dr ; cg = dg; cb = db;
sr = ( f r - dr ) / st eps;
sg = ( f g - dg) / st eps;
sb = ( f b - db) / st eps;

f or ( var x = 0; x <= st eps; x++) {
document . wr i t e( ' <FONT COLOR=" #' + DecToHexa( cr ) +
DecToHexa( cg) + DecToHexa( cb) + ' " >' ) ;
document . wr i t e( t ext e. char At ( x) ) ;
document . wr i t e( ' </ FONT>' ) ;
cr += sr ; cg += sg; cb += sb;
}
}
/ / - - >
Degr ade( 0, 0, 255, 0, 255, 0, " Vot r e t ext e i ci ! " ) ;
/ / - - ></ scr i pt >

Pour personnaliser le dgrad, il faut vous pencher sur l'avant-dernire ligne (qui commence par
Degrade).
Il y a 6 nombres spars par des virgules. Les trois premiers reprsentent la couleur du dbut et les
trois derniers la couleur de fin.
Pour crire vos couleurs, ils faut savoir qu'elles sont en codes en RVB (Rouge, Vert, Bleu). La
premire des trois reprsente donc le nombre de rouges (jusqu' 255), la seconde le nombre de verts
et la troisime le nombre de bleus.
Ici, c'est assez simplifi, comme vous pouvez le voir, les couleurs vont du bleu au vert. Simple, non
? A vous de crer maintenant vos propres couleurs (et vous avez le choix !).
45
Il ne vous reste plus qu' remplacer le texte entre guillemets ("Votre texte ici !") par le texte de
votre choix et vous aurez tout compris !
Le roll-over
Le roll-over est une technique qui permet de changer une image lorsqu'on pointe dessus. Essayez
par exemple de pointer sur cette image :
Cette technique est trs utilise et permet de faire des effets sur votre page facilement. Voici
comment cela fonctionne :
<scr i pt l anguage=" J avascr i pt " >
f unct i on r ol l over ( i mage, f i chi er )
{
document . i mages[ i mage] . sr c=f i chi er
}
Dans un premier temps, copiez quelque part entre les 2 <body>le code suivant :
<a onmouseover =r ol l over ( ' MonRol l Over ' , ' i mage2. j pg' ) ;
onmouseout =r ol l over ( ' MonRol l Over ' , ' i mage1. j pg' ) ; >

Ce code ne doit tre crit qu'une seule fois par page.
Ensuite, l'endroit o vous souhaitez placer votre image, insrez le code HTML suivant :



MonRollOver est le nom de votre roll-over. Si vous mettez plusieurs roll-over dans votre
page, vous devez imprativement changer ce nom.
image1.jpg et image2.jpg sont les noms des images insrer. Ici, image1.jpg est l'image qui
du dbut, et image2.jpg est l'image qui apparat lorsqu'on pointe dessus.
VbScripts
Surprise !
Vous allez voir qu'on a moins de tracas avec un VbScript. Celui qui fait apparatre une fentre au
survol par exemple. Insrez ce script o vous voulez dans votre page :
<scr i pt l anguage=" vbscr i pt " >
Sub move( )
MsgBox " Vot r e t ext e i ci ! "
End Sub
</ scr i pt >

Remplacez "Votre texte ici" par le texte de votre choix. Ensuite, entourez les mots qui vont faire
apparatre la bote de dialogue par des <a>. Oui, le tag de lien va nous servir. Il faut ajouter l'attribut
"onmousemove" prciser par "move()".
Exemple :
46
Poi nt ez sur l e mot <a onmousemove=" move( ) " >BOUM</ a> !

Et le tour est jou !
La date
C'est un script ultra-simple qui montre quel point il est facile de programmer avec VbScript. Il
affiche la date et l'heure o vous voulez dans votre page. Regardez, a fait de suite plus "pro" :
Aujourd'hui nous sommes le 02/06/2004. L'horloge de votre ordinateur indique qu'il est 02:15:23 !
Pour cela, il suffit d'insrer le code suivant l'endroit voulu :
<scr i pt l anguage=" vbscr i pt " >
document . wr i t e( " Bi envenue sur ma page, nous sommes l e " & Dat e & " , et i l est act uel l ement
" & Ti me)
Voil. Ce n'tait peut-tre pas simple, mais ce n'est pas pour rien que ce chapitre est parmis les
derniers.
Vous pourriez faire une recherche sur Yahoo ! par exemple, et rechercher des sites qui pourraient
vous passer gratis des scripts... Dsol de ne pas pouvoir vous en dire plus, parce que a devient un
peu vaste partir de l...
Vous pouvez aussi essayer cette adresse, vous y trouverez srement ce que vous cherchez en
matire de scripts :
http://www.editeurjavascript.com
Le prochain chapitre vous parlera des successeurs du HTML, du web du futur (qui existe dj !) et
de ses possibilits. De quoi bien clturer cet apprentissage du HTML !
LAvenir Du HTML
Eh oui ! Comme tout, le HTML a volu, volue et voluera. Il vous faudrait peut-tre un peu
d'histoire, pour voir o en est prcisment ce langage HTML qui vous en a fait tant baver...
Et si je vous disais que par rapport avant, c'est un langage simple, trs simple ? Voici un ordre
chronologique du langage de description pour page web, qui est actuellement HTML :
1. Le premier langage de description de pages web a t SGML (Standard Generalized Markup
Language). Il est puissant et bourr d'options, si bien qu'il n'est pas la porte de tout le
monde, mais il convient parfaitement aux grandes organisations qui ont des exigences
leves.
2. Depuis peu, disons vers le dbut des annes 90, on ressentit le besoin d'un langage plus
simple (donc moins puissant) qui puisse tre la porte de tout le monde car le web
commenait sa grande expansion. De cette ide est n le HTML (HyperText Markup
Language)
3. Et maintenant, on se plaint de la puissance limite de HTML ! On regrette la puissance du
bon vieux SGML. On a donc eu l'ide de crer une variante simplifie de SGML, une sorte
47
de SGML-light. De l est n rcemment XML, un langage extensible, dont les possibilits
sont bien plus nombreuses que HTML (d'o son nom : eXtensible Markup Language).
Difficile de vous en dire plus sur XML quand on connat sa complexit. Mais je dois vous donner
une petite ide de ses possibilits...
XML invente un nouveau type de tags. Mais pas n'importe lesquels. On connaissait dj avec le
HTML des tags servant la disposition des lments et leur formatage (mise en forme).
Ces nouveaux tags sont des tags smantiques. Ils "expliquent" le texte qu'ils entourent...
Bizarre ? Pas tant que a... En fait, cela veut dire que vous pouvez crer vos propres tags ! Par
exemple, voici ce qu'on peut trouver :
<vi l l e>Par i s</ vi l l e>

Cela signifie en clair que Paris est une ville, oui, on l'aura tous compris. Sauf que vous savez que les
tags ne s'affichent pas et l'internaute ne les voit pas.
L, a devient plus compliqu. Il faut avoir fait de la programmation pour comprendre l'utilit des
tags smantiques. On peut rutiliser ces informations et les afficher de diffrentes manires dans
une page.
La page web du futur est donc une page diffrente chaque fois que vous la visitez. Il y a plus de
programmation, mais moins de pages diffrentes crer. Ce qui rend les choses plus simples.
Mais, me direz-vous, quelle est l'utilit de ce langage, vous qui n'tes que de simples crateurs de
pages perso ? La rponse dpend de vos connaissances et ambitions.
Si vous tes quelqu'un qui aime bien faire des pages web sans aller chercher trop loin, alors
ce n'est pas la peine de s'aventurer dans XML. Cela ne vous sera d'aucune utilit.
Par contre, si vous programmez un peu, et si vous voulez impressionner votre entourage ou
crer une page pour une entreprise, XML est le langage idal et vaut bien ses longues heures
d'apprentissage. Les rsultats seront consquents.
Par contre, je suis dsol mais je n'ai pas de page vers laquelle vous renvoyer. Il est sr qu'une
recherche dans AltaVista ou Yahoo de XML donnera de trs nombreuses rponses. Il existe aussi
de bons gros bouquins sur le XML. Comme je vous l'ai expliqu plus haut, c'est vous de voir si a
vaut le coup de s'aventurer l-dedans !

Et voil ! Notre apprentissage sur le HTML se termine ici (dj ?). Vous avez acquis de nombreuses
(et prcieuses) connaissances sur le HTML, qui vous permettront de crer sans problme votre page
perso !
J e vous ai ouvert la porte vers de nouvelles voies, comme le XML. A vous de voir si vous voulez
approfondir vos connaissances l-dessus...