Apprendre HTML Pour Les Zros

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.

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

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

Dmarrer Programmes Accessoires Bloc-notes Vous voil maintenant devant un grand vide blanc. C'est l que nous allons oprer...

Vocabulaire essentiel Je 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 :

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 :

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

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

Julien marchait dans une sombre fort, o rgnait un froid glacial. Il se demandait combien de temps il errerait encore dans ces lieux sinistres. Il voulait retrouver la douce chaleur du foyer... Exemple 2 : Julien marchait dans une sombre fort, o rgnait un froid glacial. Il se demandait combien de temps il errerait encore dans ces lieux sinistres. Il voulait retrouver la douce chaleur du foyer... 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 :

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 :

Ce texte est soulign 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.

Gras et soulignSeulement gras 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 : Ca ne marche pas... Voici le bon exemple : En gras et soulign 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. Je vous redonne cet ancien exemple :

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

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. Je 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 . Celui du corps est . Essayez d'imaginer dans votre tte et sans continuer lire, quoi va ressembler votre page html. Voil la rponse :

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

Fichier Enregistrer Choisissez un rpertoire Type : "Tous" Nom : "nom.html" Enregistrer 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 documents\web\exemple.html 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

Vous pouvez essayer maintenant de taper du texte entre les 2 body :

Bonjour, bienvenue sur la page personnelle de Jean Dupont, qui a t cre il y a peu. Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai pas vous proposer... En attendant, vous trouverez quelques adresses susceptibles de vous intresser. 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).

Je 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 !". Je 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 Retour la ligne 1 entre Nouveau paragraphe2 entres

Mais c'est toujours comme les espaces, vous ne pouvez pas en faire deux. 2 tags la suite rendront l'effet d'un seul tag . Les deux tags et 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.

Bonjour, bienvenue sur la page personnelle de Jean Dupont, qui a t cre il y a peu.Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai pas vous proposer...En attendant, vous trouverez quelques adresses susceptibles de vous intresser.

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 . Ouf ! Voyons ce que cela donne :

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 :

Vous venez de voir comment insrer du texte et des entres. Mais cela se passe dans le tag ... 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 . Je 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 . Ecrivez votre titre aprs puis fermez le tag par . Par exemple :

La page perso de Jean Dupont Bonjour, bienvenue sur la page personnelle de Jean Dupont, qui a t cre il y a peu.Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai pas vous proposer...En attendant, vous trouverez quelques adresses susceptibles de vous intresser.

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

Les tags 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 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 . Et, comme je vous l'ai dj expliqu, prcisez l'attribut en indiquant "author". Le tag devrait ressembler a : . Ajoutez l'attribut : content. Et prcisez cet attribut par votre nom. Jean Dupont crira :

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

Un deuxime tag important est celui avec l'attribut name="description". Prcisez cette fois-ci content par un petit paragraphe qui rsume votre page. Exemple :

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 :

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

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 Jean Dupont parmi les autres (il ne reste plus qu' esprer qu'il choisisse de voir celle-ci).

Enfin, un dernier tag , 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 :

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

http://perso.provider.fr/jdupont/cible.html Si bien sr, le fichier de destination s'appelle cible.html. Idem sur votre disque dur, cela serait : c:\Site perso\cible.html 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:\Site perso\sommaire.html Et que le fichier cible se trouve dans le mme dossier, c'est--dire : c:\Site perso\cible.html Alors, dans ce cas-l, on crira que le lien amne vers : cible.html 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:\Site perso\Dossier\cible.html En relatif, on a : Dossier/cible.html

Je 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:\cible.html On utilise ici les deux points .. ../cible.html 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. Je 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.

http:// Ce type de lien amne vers une page html quelque part sur le web. ftp:// Il est utilis pour donner l'adresse d'un fichier tlcharger. telnet:// 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. mailto: 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 :

mailto:jdupont@sonprovider.fr

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 : . Ce qui donne :

Cliquez ici ! On croirait que l'on a fait exprs de choisir un nom si simple, pour ne pas l'oublier... Cependant, le tag 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 :

Cliquez ici ! Ou bien en relatif : Cliquez ici ! Vous pouvez tout aussi bien proposer d'envoyer un mail : M'envoyer un mail 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 . 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 :

Vous vous tes fait mal ? 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. Je 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 #. Juste aprs, crivez le nom de l'ancre :

En cas de bobo, cliquez ici pour lire le chapitre traitant de cela. 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 : Go !

Reprenons un exemple concret avec Jean 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 :

La page personnelle de Jean Dupont Bonjour, bienvenue sur la page personnelle de Jean Dupont, qui a t cre il y a peu.Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai pas vous proposer...En attendant, vous trouverez quelques adresses susceptibles de vous intresser : Apprenez le html !(bas de la page) Vous pouvez m'envoyer un mail. 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 : . 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 (sauf indication contraire). Regardez cet exemple-ci et essayez-le :

Taille 1 Taille 2 Taille 3 Taille 4 Taille 5 Taille 6

Taille du texte

Pour donner la taille du texte, on utilise le tag (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 :

Taille 1 Taille 2 Taille 3 Taille 4 Taille 5 Taille 6 Taille 7

15

Si vous dsirez dfinir une taille pour tout le texte (celle par dfaut est 2), utilisez le tag juste aprs . Prcisez , 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 Gras Italique Soulign Texte en indice Texte en exposant Pour crire en plus petit que la taille normale Pour crire en plus gros que la taille normale Barr

Ce sont les tags les plus employs. Petit exemple :

N'oubliez pas ! Votre chien peut tre malade ! Il devrait tre impratif de l'emmener rgulirement chez un vtrinaire (comme moi !) 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) Mise en valeur forte des caractres (souvent gras) Autre mise en valeur (souvent italique) ou Utiliss pour les citations (souvent italique) Pour prsenter du code source Prvu pour les exemples Prsenter des saisies de l'utilisateur 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 :

Je cite : 43% des maladies des chevaux sont des une mauvaise hygine Et c'est important ! Ajoutez cela sur votre liste des bonnes rsolutions de l'anne 3144 : Hygine : Chose importante respecter

Alignements Pour aligner le texte, je vous conseille fortement d'utiliser le tag , 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 l'attribut "align" que vous prciserez par le type d'alignement. Les trois types d'alignement sont :

Gauche : "left" Centr : "center" Droite : "right"

Exemple :

A gauche Centr A droite

Noter cependant que les tags , et 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 , comme pour la taille. Mais cette fois-ci, on ajoute l'attribut "face", que l'on prcise par le nom de la police. Exemple :

Mauvaise criture TRES mauvaise criture N

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 ? Je 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 et on lui ajoute le nouveau tag color. Aprs, vous indiquez la couleur comme dcrit plus haut.

Jolie couleur ! Marron ! 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 (eh oui ! y'en a !) : text. Exemple :

Bla bla bla...

Les liens La couleur des liens doit tre dfinie avec un attribut du tag : link.

19

Cliquez ici ! De mme, il existe les attributs vlink et alink. vlink donne la couleur des liens visits et alink la couleur des liens activs. Re-bla bla bla.

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 .

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 !

Rien que des couleurs ! FLASH !!! Bienvenue sur la page de Mister color ! Rgalez vos yeux ! Partir !!!!

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.

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

Rien de plus dire pour afficher votre image !

Il existe d'autres attributs pour le tag , 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.

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.

Vous pouvez encore donner la taille de la bordure entourant l'image (qui est de 0 par dfaut) avec l'attribut border. Si vous souhaitez aligner votre image, utilisez comme vous l'avez vu, le tag . 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.

22

Image de fond

Comme pour une couleur de fond, c'est un attribut au tag 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.

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 , que l'on ferme aprs le tag :

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 . Ajoutez-lui l'attribut name que vous prciserez par un petit mot de votre choix. Pensez fermer le tag plus loin.

Tout ce que vous allez crire prsent se trouvera entre ces 2 tags.

Ecrivez maintenant le tag 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 :

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 :

coords="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 :

shape="circle"

Voici le schma suivre pour un cercle :

coords="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 :

shape="polygon"

Avec un polygone, vous pouvez dfinir autant de coordonnes que vous le voulez. Respectez seulement le schma suivant :

coords="x1, y1, x2, y2, x3, y3, ....etc" 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 :

Ensuite, sortez des tags et choisissez l'endroit o vous voulez insrer votre image cliquable. Ajoutez en plus l'attribut "usemap" au tag , que vous prcisez par l'attrbut "name" du tag , 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.

Pensez regarder et essayer de pointer la souris sur l'image pour faire fonctionner l'attribut alt, cliquer sur l'image n'importe o...

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 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 et fermez-le plus loin. Rptez autant de fois le tag que vous le voulez, entre les deux tag .

Sur mon site vous trouverez : Les conseils du professionnel du boomerang La vie de molire en 46 pages Les liens intressants Une adresse super : Apprenez le html !

Notez que vous n'avez pas besoin d'crire de tag ou 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 et refermez-le plus loin. Dfinissez chaque ligne avec le tag , comme tout l'heure.

Ma vie le dimanche : Je me lve Je mange une tartine Je retourne au lit

Liste numrote avec des chiffres romains

Ajoutez un attribut au tag : "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 : "start", que vous prciserez par le chiffre de votre choix.

Exemple :

Au choix dans le menu dgustation : Sauce de crapaud baveux Intestins de cheval avec un coulis de sang frais Zombie du jour (dconseill aux enfants)

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 que l'on referme plus loin avec . Ce tag dlimite l'emplacement du tableau.

Vous devez savoir qu'en html, un tableau se construit ligne par ligne. Pour indiquer une ligne, on utilise le tag , referm avec . 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

Ensuite, entre les ... vous devez dfinir les cellules.

On distingue 2 sortes de cellules :

Les cellules d'en-tte, dfinies avec ... Les autres cellules, contenant les donnes, dfinies avec ...

Ainsi, normalement, la premire ligne contiendra des et les autres des . Exemple : 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 ou 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 et . Vous pouvez mettre le tag img que vous connnaissez, et il y aura une image dans la cellule !

Petit exemple pour rsumer :

28

Prix des bus de ville : Age de la personne Prix moyen TTC Moins de 3 ans 4 francs Entre 3 et 14 ans 8 francs Plus de 14 ans 10 francs

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 Je vous propose une solution trs simple pour avoir une bordure. Il s'agit d'un attribut au tag . Il s'appelle "border". Ce qui donne :

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

29

En gnral on utilise seulement border et on ne le prcise pas. Je 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 .

Height dfinit la hauteur du tableau Width dfinit la largeur du tableau

Prcisez ces attributs par un pourcentage, comme ceci : 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 : cellpadding. Prcisez cellpadding par un nombre en pixels (plus question de pourcentage). Exemple :

C'est juste... ... un essai

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 .

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 :

30

Bordure

Pour dterminer la couleur des bordures et du quadrillage, on utilise l'attribut bordercolor (toujours du tag table) :

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 :

Est-ce que cet alliage de couleurs vous plat ?

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 . Refermez-le plus loin, comme ceci :

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

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 :

Zones de saisie A l'intrieur du tag , 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 . 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 :

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 :

Cette zone de saisie est de taille 6 et est limite 6 caractres : Celle-ci est de taille 6, mais d'une longueur maximale de 4 caractres : Celle-l est de taille 6 est limite 9 caractres :

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

Tapez votre texte ici.

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 , avec l'attribut "name" (c'est obligatoire, il faut le nommer). Refermez ce tag plus loin, comme ceci :

34

Pour crer une option, mettez le tag dans le tag et refermez-le plus loin. Entre le et le , tapez le texte afficher.

Exemple :

Ville : Paris Avignon Marseille Lille Lyon

Vous pouvez aussi dfinir une taille prcise pour la liste d'options, pour donner cet effet :

ParisAvignonMarseilleLilleLyon

Ajoutez l'attribut size au tag , et prcisez-le par sa taille, comme ceci : Si vous souhaitez que l'on puisse slectionner plusieurs options, ajoutez l'attribut "multiple" au tag : Ainsi on peut slectionner plusieurs options en maintenant les touches CTRL ou Maj enfonces :

ParisAvignonMarseilleLilleLyon

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 . Pour le diffrencier des zones de saisie par exemple, on doit lui ajouter l'attribut "type" et le prciser par "radio", comme ceci :

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 :

Monsieur, Madame Mari, Clibataire 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 et l'attribut "type=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

Cochez les aliments que vous aimez ici : Frites, Fromage, Hamburger, Viande. Cochez les aliments que vous n'aimez pas : Epinards, Lzard, Escargots.

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

Cela donne :

Go go go go !

Envoi des donnes Ouf ! Enfin ! On va pouvoir rcuprer les donnes.

Revenons au tag et revoyons ses attributs :

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

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

Je 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 et y mettre le tag pour le titre des 2 pages, ainsi que des mta-tags, mais c'est tout.

Nouveaut ! Il n'y a pas de tag ! La page va ressembler a :

39

Le titre de ma page avec frames 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 . 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 : 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 :

Nous allons indiquer quelles sont les pages HTML correspondant chaque frame entre les deux .

Pour chaque page vous devez crire un tag .

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 :

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 !

Je 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 , crivez le tag 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 . Exemple :

Finissons avec un petit exemple pour rcapituler :

Ma page avec des frames ! Si vous pouvez lire ces lignes, c'est que votre navigateur ne suppporte pas les frames.

Je 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 Jusqu'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".

Cliquez Cliquez 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 , le tag avec l'attribut "target" comme vous savez maintenant l'utiliser : Concluons ce chapitre avec cet exemple :

Code de la page qui appelle les frames :

Des frames et des liens Si vous pouvez lire ces lignes, c'est que votre navigateur ne suppporte pas les frames. Code du frame du haut : Pour revoir les bases du html dans ce frame

42

Pour voir le sommaire dans ce frame /sommhtml.html" target="unframe">Pour voir le sommaire dans l'autre frame. Pour voir le sommaire dans une nouvelle fentre. Pour restaurer la page de dpart du frame du haut.

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 !

Je 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 , bien sr).

Le tag pour insrer un script n'est pas dur retenir, c'est . Vous devez le refermer plus loin, de manire dlimiter la zone du script, comme ceci :

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. Je 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 JavaScripts : du langage Java Les VbScripts : du langage Visual Basic

Il me semblerait que les JavaScripts 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 :

Ou a :

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 :

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 l'attribut "onload", prcis par "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 :

Degrade(0,0,255,0,255,0,"Votre texte ici !"); // --> 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 :

function rollover(image,fichier) { document.images[image].src=fichier }

Dans un premier temps, copiez quelque part entre les 2 le code suivant :

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 :

Sub move() MsgBox "Votre texte ici !" End Sub Remplacez "Votre texte ici" par le texte de votre choix. Ensuite, entourez les mots qui vont faire apparatre la bote de dialogue par des . Oui, le tag de lien va nous servir. Il faut ajouter l'attribut "onmousemove" prciser par "move()".

Exemple :

46

Pointez sur le mot BOUM ! 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 :

document.write("Bienvenue sur ma page, nous sommes le " & Date & ", et il est actuellement " & Time)

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 :

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

Je vous ai ouvert la porte vers de nouvelles voies, comme le XML. A vous de voir si vous voulez approfondir vos connaissances l-dessus...

Intro01.Les Bases Du HTMLQu'est-ce que le html ?O crire en html ?Vocabulaire essentielSyntaxe

02.Structure DUne Page HTMLEn-tte et corpsCommentaires

03.Le Tag : Les titresLes tags

04.Crer Des LiensConcept relatif - absoluTypes de liensCrer un lien

05.Mettre En Forme Du TexteTaille des caractresAttributs de texte physiquesAttributs de texte logiquesAlignementsPolices

06.La Couleur Dans Une Page HTMLLe texteLes liensLe fondExemple rcapitulatif

07.Les ImagesFormats d'imagesInsrer une imageImages cliquables

08.Les ListesListe pucesListe numrote

09.Les TableauxCrer un tableauBordures et quadrillageDfinir la hauteur et la largeur des tableauxPrciser une distance minimale entre le bord d'une cellule et son contenuOmbres et couleurs d'un tableau

10.Les FormulairesCrer un formulaireZones de saisieListes d'optionsBoutons d'option et cases cocherBoutons de commandeEnvoi des donnesLe CGI

11.Les FramesInsrer un frameLes liens dans un frame

12.Les ScriptsInsrer un scriptJavaScriptsVbScripts

13.LAvenir Du HTML