html et javascript

482

Upload: buimien

Post on 05-Jan-2017

246 views

Category:

Documents


0 download

TRANSCRIPT

  • HTML, JavaScript

  • CHEZ LE MME DITEURDans la mme collection-----------------------------------------------------------------------------------------

    C. Delannoy. - Langage C : la rfrence.N11123, 1999, 944 pages.

    G. Pujolle. - Les Rseaux.N11121, 2000, 1096 pages.

    P. Labbe. - Photoshop 6.N11155, 2001, 732 pages.

    P. Labbe. - Illustrator 9.N11156, 2000, 600 pages.

    Autre ouvrage des mmes auteurs------------------------------------------------------------------------------------------------

    Ph. Chalat, D. Charnay. - Les Cahiers du programmeur PHP-MySQL.Vol. 2 : Ateliers Web professionnels. N11089, septembre 2002, 150 pages.

    Autres ouvrages sur le dveloppement Web ------------------------------------------------------------------------------------

    S. Holzner. - Total HTML.N9255, 2001, 1010 pages.

    D. Thau. - JavaScript par la pratique.N9270, 2001,428 pages.

    D. Hunter, et coll. - Initiation XML.N9248, 2000, 850 pages.

    J.-P. Leboeuf. - Les Cahiers du programmeur PHP-MySQL.Vol. 1 : Premiers pas en PHP. N11069, septembre 2002, 150 pages.

    A. Tasso. - Le livre de Java premier langage.N9156, 2000, 312 pages.

    C. Delannoy. - Programmer en Java. Avec un CD-Rom incluant Borland JBuilder 6 Personnel. N11119, 2e dition, 2002, 650 pages.

    S. Allamaraju et al. - Programmation J2EE. Conteneurs J2EE, servlets, JSP et EJB.N9260, 2001, 1 260 pages.

  • HTML, JavaScript

    Philippe Chalat Daniel Charnay

  • DITIONS EYROLLES 61, Bld Saint-Germain 75240 Paris Cedex 05

    www.editions-eyrolles.com

    Publi l'origine sous le titre Programmation HTML et JavaScript , cet ouvrage a fait l'objet d'un reconditionnement l'occasion de son 9e tirage

    (format semi-poche, nouvelle couverture et nouveau prix).Le texte de l'ouvrage reste inchang par rapport au tirage prcdent.

    Le code source des exemples du livre est disponible sur le site : www. editions-eyrolles. com

    Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la photocopie usage collectif sans autorisation des ayants droit. Or, cette pratique s'est gnralise notamment dans les tablissements d'enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilit mme pour les auteurs de crer des uvres nouvelles et de les faire diter correctement est aujourd'hui menace.

    En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou partiellement le prsent ouvrage, sur quelque support que ce soit, sans autorisation de l'Editeur ou du Centre Franais d'exploitation du droit de Copie, 20, rue des Grands Augustins, 75006 Paris. Groupe Eyrolles, 1998, pour la prsente dition Groupe Eyrolles, pour la nouvelle prsentattion, 2002, ISBN 2-212-11157-6

    http://www.editions-eyrolles.com

  • Cet ouvrage constitue la deuxime dition, revue et largement augmente, de HTML et la programmation des serveurs Web de Philippe Chalat et Daniel Charnay, ditions Eyrol- les 1996.

    Les appellations suivantes sont des marques commerciales ou dposes des socits ou organisations qui les produisent :

    Macintosh, Apple, Teachtext, Netscape, Communicator, Internet Explorer, Unix, Frame- Maker, Adobe, PostScript, Acrobat, PDF, Illustrator, Photoshop, Director, Sun, Java, JavaScript, HotJava, Oracle, CompuServe GIF, QuickDraw, Microsoft, Word, Excel, PowerPoint.

  • Prface

    Quand la fin de l'anne 1989, je pris connaissance au CERN, d'une proposition interne de dveloppement d'un systme de partage de l'information, j'tais loin d'imaginer qu'elle bouleverserait non seulement notre environnement de travail, mais la socit elle-mme. Seul probablement son auteur, Tim Berners Lee, mesurait dj l'importance de l'entreprise. Il avait baptis le projet qu'il nous prsentait World-Wide Web, le tissu plantaire d'information. Mon collgue venait de poser le premier jalon d'une rvolution technologique dont les effets sociaux sont encore inconnus.Tout semble depuis avoir t dit sur le World-Wide Web et, beaucoup sera encore dit. Cette manire d'utiliser l'Internet, cette application comme nous l'appelons, s'est mme confondue avec le rseau lui-mme. Les raccourcis rducteurs se sont imposs, le Web et le Net sont devenus synonymes dans le langage populaire. Cette distorsion de la ralit initiale, qui ne distingue plus le transport d'informations des informaations elle-mmes, irrite les spcialistes. Ils ont raison sur le fond. Quoique... Si, une fois de plus, l'inconscient populaire avait raison ? Peut-tre la distinction n'est-elle plus que purement smantique. L'Internet est sans doute simplement devenu le Web - puisque que tout peut pratiquement se faire par l'intermdiaire d'une interface homme-machine Web - et le reste n'est que dtails.

    Le hasard et la ncessitIl y a de nombreuses raisons au succs du World-Wide Web, l o tant de projets technologiques, en particulier ceux qui sont issus de l'Europe, ont chou. Comme toute naissance, l'avnement du Web rsulte du concours du hasard et de la ncessit.Le Web correspondait un besoin rel - trop de projets cherchent leur application aprs coup - exprim par une communaut bien dfinie, celle des physiciens des hautes nergies. Cette communaut possde une caractristique unique : elle est constitue de10 000 chercheurs et techniciens qui doivent collaborer, et sont rpartis dans le monde entier ; la dimension plantaire tait prsente ds le dpart.Le hasard a voulu que le rseau de transport de l'Internet se dveloppe au mme moment et soit pourvu de mcanismes uniques dans l'histoire des communications. L'un de ces mcanismes, essentiel pour le fonctionnement du Web, constitue la possibilit pour des systmes connects de disposer d'un nom unique dans le monde, indpendamment de leur adresse physique, et un systme automatique et distribu (le DNS) permettant de transformer ces noms en adresses.Dans le mme temps, il se trouve que Tim Berners Lee, de son ct matrisait parfaitement les tlcommunications et les techniques de structuration des documents.

  • Dans notre monde technologique toujours plus complexe, la compartimentation des individus en spcialits devient un frein la crativit. Les grandes avances sont souvent ralises par ceux qui matrisent plusieurs domaines. La double invention par la mme personne du Hypertext Mark-Up Langage (HTML) et du Hypertext Transport Protocol (HTTP) en est l'illustration.Finalement, la mthode. Plutt que de se contenter de spcifier la technologie - ce qui est l'habitude des organes de standardisation officiels - le concepteur l'a ralise, mise en oeuvre, et offerte au public. Plutt que de dire : Voil comment doit fonctionner HTTP, vous de le dvelopper, d'en tester les interfonctionnements, le concepteur dit Voil un logiciel ; chargez-le, il marche. Et il marcha!

    SimplicitLe projet WWW doit aussi son succs sa technologie simple, pure l'extrme.HTTP repose sur un principe ancien mais assez hrtique dans le monde des tlcommunications et mme de l'informatique. En effet, pour agir sur un ordinateur distant - demander l'envoi d'une page d'information - nul besoin de possder un compte sur cet ordinateur, de s'y connecter et d'avoir un lien permanent - une connexion disent les spcialistes - pendant la phase de dialogue. Un simple message, vhiculable de manire asynchrone de relais en relais, est suffisant s'il dcrit entirement la fonction raliser sur l'ordinateur distant, et indique qui formule cette demande. C'est le principe de la poste. A l'arrive, le message est simplement analys et sa commande ralise.HTML, lui, est un sous-ensemble d'un autre standard, SGML, qui sert dfinir des types de documents. Le succs initial de HTML est largement d sa simplicit, on pourrait mme dire sa rusticit. Contrairement ce qui se dit, HTML n 'est pas, ou du moins pas encore, un langage qui permet d'crire de la documentation hypermdia. Certes, il permet l'incorporation d'images et de squences son ou vido. Mais il ne permet pas de spcifier des relations temporelles entre les diffrentes parties multimdias d'un document, par exemple indiquer que tel texte doit tre affich en mme temps que telle squence sonore est joue.

    Des nouveaux mtiersLa ralisation de documents Web a donn naissance de nouvelles catgories professionnelles : les auteurs Web. Raliser une documentation Web ncessite la runion d'un ensemble de comptences nouvelles : graphisme pour la ralisation des images, le choix des polices et la mise en page gnrale, sciences de la communication pour la dfinition des messages principaux, programmation (simplifie) pour la ralisation des pages, administration informatique pour la mise en uvre des serveurs, gestionnaire de site Web (Webmaster) pour l'entretien rgulier et la cohrence de l'ensemble, tlcommunications pour l'valuation de l'impact rseau. Selon les cas et l'importance des projets, ces comptences se trouveront runies chez une seule personne, ou au sein d'une quipe qui devra travailler en collaboration troite.

  • Mass media...Quel avenir peut-on prdire au Web et la documentation qu'il supporte. Le Web est un nouveau mdia de masse, qui prsente des caractristiques uniques. Il est par exemple plus facile de crer de l'information avec le Web qu'avec n'importe quel autre moyen de diffusion de masse. Le Web se caractrise aussi par le trs faible cot de la diffusion de l'information auprs d'une trs vaste audience.Grce ces particularits, le Web fait partie des mass media et il y a peu de chances qu'il chappe, terme, l'volution de tout moyen de masse. L'histoire des mdias ne recense aucun exemple o des concentrations de fournisseurs de l'information ne soit apparues. Avec le Web, une nouvelle industrie a vu le jour : celle des serveurs qui vivent de l'information fournie. Comme les chanes de tlvision, ils sont de deux types : payants ou gratuits, financs alors par la publicit. Les sites financs par la publicit sont confronts aux problmes d'audimat classiques. Pour rester attractifs, ils devront offrir une qualit de service (bande passante d'accs au rseau, disponibilit et puissance des ordinateurs serveurs) et des contenus ncessitant toujours plus de moyens. Hormis les sites trs thmatiques, seuls quelques fournisseurs puissants issus de concentrations domineront. Cette domination aura plusieurs effets. Ainsi, l'esprit frondeur, souvent polmique, parfois contestataire qui prvalait initialement dans l'Internet alorsl'apanage des universitaires va progressivement s'estomper au profit du ton plus classique des moyens de masse, reposant sur la recherche de dnominateurs communs afin de ne pas s'aliner une partie de l'audience et de toucher le plus grand nombre. Subsisteront nanmoins un grand nombre de serveurs institutionnels ou privs, o l'information pratique, culturelle, administrative, vnementielle sera mise sans contrepartie ni publicit, dans un but de service public ou de promotion, la disposition de tous.

    Un ouvrage exceptionnelC'est un honneur et un plaisir pour moi que d'avoir contribu cet avant-propos. Ce livre est un extraordinaire outil pour comprendre et utiliser HTML. Il faut remercier Daniel Charnay et Philippe Chalat pour leurs remarquables qualits pdagogiques mises la disposition d'une connaissance profonde, la fois thorique et pratique, du sujet. Le rsultat est un ouvrage exceptionnel et prcieux pour tous ceux qui envisagent de bnficier de cette possibilit unique dans l'histoire de la communication qu'offre le Web : le fait que chacun puisse aisment devenir non seulement consommateur, mais galement producteur d'information.

    Franois FluckigerResponsable adjoint de Rseaux du CERNCharg de cours l'Universit de Genve

  • V

  • Table des matires

    1. Introduction.......................................................................................1Les langages du Web, introduction la deuxime dition ........................................1

    A l'origine : le langage HTML..........................................................................1Le Web, support d'applications.........................................................................1Le langage JavaScript....................................................................................... 2Comment JavaScript se situe-t-il par rapport HTML ? .................................2O s'excute un script JavaScript ?...................................................................3D'o provient le code JavaScript ?....................................................................3Le langage JAVA .............................................................................................3Java ou JavaScript ? ......................................................................................... 4

    HTML 3.2, 4, Dynamic HTML ? ..............................................................................5Comment tudier avec ce manuel (ou sans) ?............................................................ 6Comment est dcrit JavaScript ?................................................................................ 6Comment est rdig ce manuel ? ...............................................................................6Conventions d'criture................................................................................................7Icnes ........................................................................................................................ 7Environnement de test et de production ....................................................................9Faut-il encore apprendre HTML ? ............................................................................ 9

    2. L'hypertexte ................................................................................... 11Le livre ................................................................................................................... 12Le document technique ........................................................................................... 12Le journal ................................................................................................................ 13Notions d'hypertexte................................................................................................ 14

    Ecrire de l'hypertexte ..................................................................................... 15Du multimdia pour le Web ......................................................................... 15

    3. HTML, son environnement........................................................... 17Qu'est-ce que HTML ? ............................................................................................17Dans quel contexte s'excute HTML ?.................................................................... 18Le protocole d'adressage des documents - l'URL................................................... 19

  • Programmation HTML et JavaScript

    O sont stocks les documents HTML ? ................................................................ 20Quelles protections pour les documents ?............................................................... 21

    Le langage HTML..............................................................................23

    4. Structure......................................................................................... 25Les balises................................................................................................................25L'accentuation ......................................................................................................... 26Structuration du document HTML ......................................................................... 27

    ....................................................................................................... 27 ....................................................................................................... 27 ....................................................................................................... 27 ....................................................................................................... 28 ................................................................................................ 29 ...................................................................................29

    Attributs d'une balise............................................................................................... 29Le document HTML minimum................................................................................30Tester les documents HTML .................................................................................. 30

    5. Divisions.......................................................................................... 33...............................................................................................................33 ............................................................................................................. 34 ................................................................................................................ 35 ............................................................................................................. 35

    L'attribut SIZE.................................................................................. 36L'attribut WIDTH............................................................................. 36L'attribut ALIGN.............................................................................. 36L'attribut NOSHADE....................................................................... 36

    ........................................................................................................... 36

    6. Listes ...............................................................................................39Liste descriptive.......................................................................................................40

    ............................................................................................................. 40 ............................................................................................................. 40..............................................................................................................41

    Listes rgulires ...................................................................................................... 42................................................................................................................42 ............................................................................................................. 42 ............................................................................................................. 42

    L'attribut TYPE dans les listes non ordonnes................................. 43Embotement de listes non ordonnes............................................... 44

    II

  • Table des matires

    ............................................................................................................... 45L'attribut TYPE dans les listes ordonnes...........................................46L'attribut START dans les listes ordonnes........................................46L'attribut value.................................................................................... 46Embotement de listes ordonnes........................................................47

    Listes imbriques...................................................................................................... 48

    7. Styles.................................................................................................51Style physique ou style des caractres......................................................................51

    .................................................................................................................51................................................................................................................... 51 .................................................................................................................51 ...............................................................................................................52

    Style logique, style de paragraphe............................................................................ 52 ...........................................................................................................52 .........................................................................................................53 ............................................................................................................53 ..............................................................................................................54............................................................................................................ 54 .........................................................................................................55 ....................................................................................................55............................................................................................................ 56 ........................................................................................ 56

    8. Crer des liens................................................................................. 59Dfinition d'une ancre ..............................................................................................61

    .................................................................................................................61L'attribut HREF, ancre de dpart vers un lien externe...................... 61L'attribut HREF, ancre de dpart vers un lien interne........................ 62L'attribut HREF, ancre de dpart vers un point spcifique................ 62L'attribut NAME, ancre d'arrive....................................................... 62L'attribut HREF et NAME sur une mme ancre.................................63

    Les diffrentes ressources pointes par un lien ....................................................... 64D'autres URL ........................................................................................................... 66

    FTP..................................................................................................................67NEWS ............................................................................................................ 70TELNET..........................................................................................................70MAILTO ........................................................................................................ 71JAVASCRIPT................................................................................................. 71

    Adressage des URL dans l'espace du serveur.......................................................... 71JavaScript et les liens................................................................................................73

    Les vnements associs aux liens..................................................................73

    III

  • Programmation HTML et JavaScript

    9. Inclusion d'images ......................................................................... 79Les images en ligne..................................................................................................79

    ............................................................................................................ 79Alignement des images ..................................................................................82

    Les images et les browsers non graphiques ............................................................ 83Les images en guise d'ancres .................................................................................. 84Les images et JavaScript.......................................................................................... 85

    10. Mise en page..................................................................................87 ........................................................................................................ 88

    L'attribut SIZE................................................................................... 88L'attribut COLOR.............................................................................. 88L'attribut FACE................................................................................. 88

    ............................................................................................... 89L'attribut COLS................................................................................. 89L'attribut WIDTH.............................................................................. 89L'attribut GUTTER........................................................................... 90

    .................................................................................................... 90 ....................................................................................................90

    L'attribut TYPE................................................................................. 91L'attribut SIZE................................................................................... 91Les attributs WIDTH, HEIGHT et ALIGN....................................... 91

    et l'attribut CLEAR ............................................................................. 91 pour le dcor ! ............................................................................... 92Les fonds d'cran ........................................................................................... 93

    L'attribut BGCOLOR........................................................................ 93L'attribut BACKGROUND............................................................... 93

    La couleur du texte ........................................................................................ 94L'attribut TEXT................................................................................. 94Les attributs LINK, VLINK et ALINK............................................. 94

    11. Les feuilles de style....................................................................... 99 ....................................................................................................100

    L'attribut TYPE............................................................................... 100Classes de style............................................................................................ 101

    L'attribut CLASS............................................................................ 102Sous-classe de style (ID)................................................................ 102L'attribut ID.................................................................................... 103

    avec l'attribut CLASS ...................................................................103Groupement .......................................................................................................... 104Slection contextuelle ........................................................................................... 104L'hritage des styles .............................................................................................. 105

    IV

  • Table des matires

    Dfinitions dans des fichiers externes .................................................................. 105Le fichier de style ................................................................................................. 105

    utilisation des fichiers externes ..................................................... 106L'attribut REL=stylesheet................................................................ 106L'attribut TYPE................................................................................ 106L'attribut HREF................................................................................ 106

    Dfinition ponctuelle d'un style dans une balise.................................................... 107L'attribut STYLE............................................................................. 107

    Les dfinitions de style .......................................................................................... 107Les polices de caractres............................................................................... 107

    font-size (fontSize) - taille des caractres........................................ 107font-style (fontStyle)........................................................................ 108font-family (fontFamily) - famille de caractres............................. 108font-weight (fontWeight) - graisse des caractres........................... 108

    Proprits des textes...................................................................................... 108line-height (lineHeight) - interligne................................................. 108text-align (textAlign) - alignement, justification............................. 108text-indent (textlndent) - indentation............................................... 109text-transform (textTransform) traitement de la casse..................... 109

    Le bloc...........................................................................................................109

    12. Positionnement dynamique .......................................................113Les couches ........................................................................................................... 114

    Mode CSS .................................................................................................... 115 avec attribut ID .............................................................................115Mode JavaScript............................................................................................116 .................................................................................116

    Les attributs ID, TOP et LEFT........................................................ 116Les attributs Z-INDEX, ABOVE et BELOW................................. 116Les attributs BGCOLOR et BACKGROUND................................ 117Les attributs WIDTH et HEIGHT................................................... 117L'attribut CLIP................................................................................. 117L'attribut VISIBILITY.................................................................... 118L'attribut SRC.................................................................................. 118

    Le dynamisme des couches ...................................................................................118Les proprits des couches ..................................................~................................118Le nommage des couches dans la hirarchie JavaScript .......................................119La hirarchie des objets dans les couches .............................................................119Les mthodes des couches..................................................................................... 119Les vnements lis aux couches ..........................................................................121Couleurs et units ..................................................................................................127

    V

  • Programmation HTML et JavaScript

    13. Images cliquables......................................................................131Systme de coordonnes........................................................................................132Mthode n 1 : imagemap, ismap ......................................................................... 133

    Ralisation de la carte coordonnes - URL ................................................. 133Comment fonctionne une carte cliquable ? ................................................. 136

    Mthode N 2 : usemap ........................................................................................ 136JavaScript et les images cliquables .......................................................................137

    Les vnements de la balise ......................................................... 137

    14. Les tableaux...............................................................................145.....................................................................................................146 ............................................................................................................147 ........................................................................................................... 147 .......................................................................................................... 149 ............................................................................................... 149

    L'attribut BGCOLOR...................................................................... 149

    15. Les frames..................................................................................155Cration de frames ................................................................................................ 157

    .............................................................................................158.................................................................................................... 160........................................................................................... 161

    Utilisation des frames ............................................................................................163L'attribut TARGET......................................................................... 163

    Les frames et JavaScript ........................................................................................167

    16. Mta-informations....................................................................171 ......................................................................................................171

    L'attribut NAME............................................................................. 172L'attribut CONTENT....................................................................... 172L'attribut HTPP-EQUIV.................................................................. 172

    Le client-pull ................................................................................................172

    La programmation......................................................................... 175

    17. Les limites d'HTML ................................................................ 177Introduction la programmation ...........................................................................182

    VI

  • Table des matires

    18. Les formulaires........................................................................... 191Quel est le principe du formulaire ? ...................................................................... 193A quel moment le formulaire est-il transmis au script ?........................................ 194Description des balises de formulaire et des vnements JavaScript ....................196

    .......................................................................................................196L'attribut METHOD........................................................................ 196L'attribut ACTION.......................................................................... 196L'attribut NAME............................................................................. 196L'attribut TARGET......................................................................... 196Les proprits de l'objet FORM...................................................... 197La mthode de l'objet FORM.......................................................... 197L'vnement JavaScript associ l'objet FORM............................ 198

    Les balises dfinissant les composants du formulaire ...........................................201 ou cINPUT TYPE=TEXT>......................................................... 201

    L'attribut NAME............................................................................. 202L'attribut SIZE.................................................................................202L'attribut VALUE............................................................................202Les proprits de l'objet TEXT....................................................... 202Les mthodes de l'objet TEXT........................................................ 202Les vnements associs l'objet TEXT........................................ 203

    .................................................................. 205 .........................................................................205

    L'attribut NAME............................................................................. 205L'attribut VALUE............................................................................206Les proprits de l'objet SUBMIT.................................................. 206Les mthodes de l'objet SUBMIT................................................... 206L'vnement associ l'objet SUBMIT.......................................... 206

    ..................................................................207L'attribut NAME............................................................................. 207L'attribut VALUE............................................................................207L'attribut CHECKED...................................................................... 207Les proprits de l'objet CHECKBOX............................................ 207La mthode de l'objet CHECKBOX............................................... 208L'vnement associ l'objet CHECKBOX.................................... 208

    ........................................................................... 210L'attribut NAME.............................................................................. 210L'attribut CHECKED.......................................................................210Les proprits de l'objet RADIO......................................................210La mthode de l'objet RADIO......................................................... 211L'vnement associ l'objet RADIO............................................. 211

    ............................................................................ 211L'attribut NAME..............................................................................211L'attribut VALUE............................................................................ 211Les proprits de l'objet RESET......................................................212

    VII

  • Programmation HTML et JavaScript

    La mthode de l'objet RESET......................................................... 212L'vnement associ l'objet RESET............................................ 212

    et ...........................................................................212L'attribut NAME de la balise ..................................... 212L'attribut SIZE de la balise ......................................... 212L'attribut MULTIPLE de la balise ............................... 212L'attribut VALUE de la balise ..................................... 213L'attribut SELECTED de la balise ............................... 213Les proprits de l'objet SELECT.................................................. 214Les mthodes de l'objet SELECT................................................... 214Les vnements associs l'objet SELECT................................... 215Les proprits des options de l'objet SELECT............................... 215

    ............................................................................................221 ........................................................................221

    L'attribut NAME............................................................................. 221L'attribut VALUE........................................................................... 221Les proprits de l'objet BUTTON................................................. 222La mthode de l'objet BUTTON.................................................... 222L' vnement associ l'objet BUTTON....................................... 222Le type HIDDEN............................................................................ 227Les proprits de l'objet HIDDEN................................................. 231

    19. La programmation CGI.............................................................237Emplacement des scripts CGI................................................................................ 239Le langage de programmation ...............................................................................240La scurit.............................................................................................................. 241La sortie standard................................................................................................... 242

    Le format ......................................................................................................242L'en-tte ....................................................................................................... 243Le corps ....................................................................................................... 246Pour aller plus loin .......................................................................................246

    Les variables d'environnement .............................................................................. 247Ralisation d'un script ........................................................................................... 251Exemples................................................................................................................ 253

    Un compteur d'accs .................................................................................... 253Une image dynamique.................................................................................. 255Une squence anime ...................................................................................256

    20. Formulaires et CGI.................................................................... 261L'encodage des donnes ........................................................................................ 261Le transport ............................................................................................................262

    La mthode GET ..........................................................................................262La mthode POST ........................................................................................262

    VIII

  • Table des matires

    La programmation ..................................................................................................262La mthode GET............................................................................................264La mthode POST..........................................................................................268

    21. Authentification des accs.......................................................... 273Principe de l'authentification ..................................................................................273Authentification par mot de passe ..........................................................................274Authentification par le rseau................................................................................. 276Propagation de la protection .................................................................................. 277

    Le langage JavaScript ......................................................................279

    22. JavaScript 1.2.............................................................................. 281Java et JavaScript ................................................................................................... 282Du JavaScript d'accord, mais o ? ......................................................................... 283

    La balise .................................................................. 285Le pseudo-protocole JavaScript ....................................................................286Les nouveaux attributs de gestion d'vnements...........................................287Insertion de variables JavaScript................................................................... 287La balise au secours des vieux browsers.............................. 288

    Les variables .......................................................................................................... 289Les types ................................................................................................................ 291

    Les chanes de caractres ..............................................................................291Les nombres ..................................................................................................292Les boolens.................................................................................................. 293Les fonctions ................................................................................................ 293Les objets ......................................................................................................295

    Les conversions entre types.................................................................................... 302Les tableaux............................................................................................................ 303

    Pour aller plus loin avec les tableaux............................................................ 304Les objets du browser.............................................................................................306

    La classe Window ........................................................................................ 306Les rfrences aux objets Window..................................................307Les proprits de la classe Window................................................ 307frames.............................................................................................. 312Les mthodes de la classe Window................................................. 320Les gestionnaires d'vnement des objets Window.........................330

    Tableaux rcapitulatifs ................................................................................. 332La classe Navigator....................................................................................... 337

    Proprits.........................................................................................337La classe Screen............................................................................................ 339

    IX

  • Programmation HTML et JavaScript

    Proprits........................................................................................ 339La gestion des vnements ....................................................................................340

    La classe event.............................................................................................. 341Proprits........................................................................................ 341

    Les nouveaux attributs de balises................................................................. 343Modification dynamique d'un gestionnaire d'vnement............................. 344Capture d'vnements .................................................................................. 346

    Les classes prdfinies........................................................................................... 351Date()............................................................................................................ 351

    Constructeur.................................................................................... 351Mthodes........................................................................................ 351Exemple.......................................................................................... 352

    Image() .........................................................................................................353Constructeur.................................................................................... 353Proprits........................................................................................ 353Gestionnaires d'vnement............................................................. 354Exemple.......................................................................................... 355

    Option() ........................................................................................................356Math.............................................................................................................. 357

    Proprits........................................................................................ 357Mthodes........................................................................................ 357Exemple.......................................................................................... 358

    Function() .................................................................................................... 359Constructeur.................................................................................... 359Exemple.......................................................................................... 360

    Les chanes de caractres comme objets ...................................................... 361Constructeur.................................................................................... 361Proprit.......................................................................................... 361Mthodes........................................................................................ 361Exemple.......................................................................................... 365

    Les expressions rgulires............................................................................366Principe........................................................................................... 367Cration........................................................................................... 367Utilisation....................................................................................... 368Syntaxe........................................................................................... 370Mmorisation des correspondances un modle........................... 372

    Les tableaux comme objets ......................................................................... 373Constructeur.................................................................................... 373Proprits........................................................................................ 374Mthodes......................................................................................... 374Exemples......................................................................................... 375

    Les oprateurs .......................................................................................................377Oprateurs arithmtiques..............................................................................378Oprateurs boolens .................................................................................... 378Oprateurs binaires.......................................................................................379

    X

  • Table des matires

    Oprateurs d'affectation.................................................................................380Oprateurs de comparaison .......................................................................... 380

    Les instructions de base.......................................................................................... 380Les commentaires .........................................................................................381Les variables .................................................................................................381

    var..................................................................................................... 381Les boucles.................................................................................................... 382

    Les blocs d'intructions nomms........................................................382do ... while.........................................................................................382while..................................................................................................383for......................................................................................................384for ... in..............................................................................................384break..................................................................................................385continue.............................................................................................387

    Les fonctions ................................................................................................ 388function............................................................................................. 388

    Les instructions conditionnelles.................................................................... 392if... else..............................................................................................392switch ... case....................................................................................393

    Les objets ......................................................................................................394new....................................................................................................394this.....................................................................................................395with................................................................................................... 396

    Les fonctions prdfinies........................................................................................397parseFloat...................................................................................................... 397parseInt.......................................................................................................... 397IsNaN ........................................................................................................... 398void................................................................................................................399eval ............................................................................................................... 399escape ........................................................................................................... 400unescape ....................................................................................................... 401

    JavaScript et la scurit ......................................................................................... 402Principe de base ............................................................................................402

    XI

  • Programmation HTML et JavaScript

    Annexes.............................................................................................. 405

    23. Crer des images.........................................................................407L'cran informatique ..............................................................................................407La mesure des images ............................................................................................408L'origine des images............................................................................................... 409La destination de l'image........................................................................................ 409Le mode natif de l'image ....................................................................................... 409Les dessins transparents..........................................................................................410Le mode entrelac...................................................................................................410Cration d'une image partir d'un dessin vectoriel ............................................... 411

    24. Le format MIME ....................................................................... 417

    25. Le module util.c...........................................................................421

    26. Installation d'un dmon httpd...................................................425Le fichier httpd.conf .............................................................................................. 427

    ServerType ................................................................................................... 427Port ............................................................................................................... 427User ...............................................................................................................428Group.............................................................................................................428ServerAdmin ................................................................................................ 428ServerRoot.....................................................................................................428ServerName................................................................................................... 429ErrorLog ....................................................................................................... 429TransferLog .................................................................................................. 430AgentLog.......................................................................................................430PidFile .......................................................................................................... 430AccessConfig.................................................................................................430ResourceConfig............................................................................................. 431TypesConfig ................................................................................................. 431

    Le fichier srm.conf..................................................................................................431DocumentRoot...............................................................................................431UserDir.......................................................................................................... 431AccessFileName............................................................................................432DefaultType...................................................................................................432Redirect ........................................................................................................ 432Alias...............................................................................................................433ScriptAlias .................................................................................................... 433

    Le fichier srm.conf : gestion des listes de fichiers..................................................433

    XII

  • Table des matires

    DirectoryIndex .............................................................................................434HeaderName................................................................................................. 434ReadmeName ...............................................................................................435FancyIndexing.............................................................................................. 435AddIcon........................................................................................................ 436AddIconByType........................................................................................... 436DefaultIcon................................................................................................... 437IndexIgnore ..................................................................................................437

    Le fichier access.conf.............................................................................................437Le dmarrage du serveur .......................................................................................438

    27. Caractres accentus, symboles ............................................... 439

    28. Index ............................................................................................443

    XIII

  • Chapitre 1

    Introduction

    Les langages du Web, introduction la deuxime ditionHTML est et restera incontestablement le langage de base du Web. Paralllement son volution, apparaissent de nouveaux langages apportant plus d'interactivit aux crans du Web, et d'offrir une intelligence locale aux postes de consultation; le Web client-serveur devient une ralit.

    A l'origine : le langage HTMLC'est un langage de description permettant de structurer et d'afficher diffrents objets sur un cran (qu'on appellera abusivement "page"). Ces objets peuvent tre du texte, des tableaux, des images voire de la vido et des sons. Ils peuvent tre aussi les lments devenus classiques des environnements graphiques, savoir les boutons, pop-listes, listes ascenseurs, botes de dialogue... Sur la plupart de ces objets, il est possible de placer des liens qui vont permettre de se connecter d'autres pages. Ce langage est donc l'origine essentiellement statique. Sur le serveur, le fichier HTML dcrit une "scne" qui sera envoye la demande vers un client (le browser, logiciel de navigation prsent sur le poste de consultation). Ce client va dcoder les instructions HTML pour afficher la scne qui restera ensuite la mme ; seule une nouvelle requte vers le serveur sera mme d'en modifier l'apparence.

    Le Web, support d'applicationsDvelopper des applications informatiques, c'est aussi se demander qui utilisera ces applications et sur quelles plates-formes. Dployer une application est aussi important et souvent aussi long que de produire l'application elle-mme. Le succs du Web et de

    1

  • Programmation HTML et JavaScript

    l'Intranet est d pour beaucoup au fait qu'une application qui s'excute dans le cadre d'un browser Web fonctionnera aussi bien sous Windows 95, Windows NT, MacOS, Unix... On cre l'application sans souci du poste client, celle-ci devenant immdiatement disponible pour tout poste disposant d'un browser Web. Si l'on dtient enfin le client universel pour toutes les applications, il devient ncessaire de se proccuper de l'intelligence que l'on peut intgrer. HTML peut alors tre insuffisant : il faut programmer...

    Le langage JavaScriptCr l'origine par Netscape, ce langage de programmation est conu pour traiter localement des vnements provoqus par le lecteur (par exemple, lorsque le lecteur fait glisser la souris sur une zone de texte, cette dernire change de couleur). C'est un langage interprt, c'est--dire que le texte contenant le programme est analys au fur et mesure par l'interprte, partie intgrante du browser, qui va excuter les instructions.Ce langage a fait l'objet d'une normalisation sous le nom de ECMAScript.

    Comment JavaScript se situe-t-il par rapport HTML ?HTML permet de dcrire des pages, un peu la manire d'un traitement de texte :"ici un texte gras, aller la ligne, ici une image, ici une image permettant d'activer un lien vers une autre page, etc."

    JavaScript permet de programmer des actions en fonction d'vnements :

    Si l'utilisateur remplit une case de saisie alorstester si les caractres taps sont numriques si oui

    enregistrer la valeur si non

    envoyer un message d'alerte

    ou bien d'effectuer des calculs toujours sans aucun recours au serveur :

    lire la valeur d'une cellule de saisie, multiplier ce nombre par 1,186, afficher le rsultat

    On nomme script l'ensemble d'instructions permettant de raliser une action.

    Les domaines d'applications du langage JavaScript peuvent tre classs en plusieurs catgories : Petites applications simples (calculettes, petits outils de conversions, dition automa

    tique d'un devis par l'acheteur, jeu, etc.). Aspects graphiques de l'interface (modification d'images lors du passage de la souris,

    gestion de fentres, fabrication locale d'une page HTML, etc.). Tests de validit des donnes sur les lments de l'interface de saisie (pour vrifier

    2

  • Introduction

    qu'une valeur considre comme obligatoire a bien t saisie, que le champ saisi correspond bien une date, etc.), gestion complte de l'interface d'une application complexe (cration de fentres, modification de menus, aide contextuelle, etc.).

    O s'excute un script1 JavaScript ?Depuis l'origine, il est possible de faire excuter par les serveurs des programmes dont le rsultat est une page Web. Contrairement ces programmes (les scripts du CGI qui seront tudis dans ce livre), les "JavaScripts" sont chargs avec la page Web pour tre excuts sur le poste client par le logiciel de navigation (le browser Netscape ou Internet Explorer). Cette notion d'excution locale est importante. En effet, avec HTML le poste client n'avait pas d'intelligence ; il se bornait afficher une page telle qu'elle tait dcrite dans le fichier provenant du serveur. Avec JavaScript, on excute localement un programme tlcharg lui aussi depuis le serveur ; ce programme est par dfinition une entit capable de prendre des dcisions en fonction d'vnements survenant localement, une partie de l'intelligence rsidant sur le poste client.Les browsers intgrent donc un interprteur qui dcode les instructions et les excute au moment opportun, soit par exemple au chargement de la page dans le browser, soit l'apparition d'un vnement particulier (clic sur un bouton, saisie d'une valeur, mouvement de souris, etc.)

    D'o provient le code JavaScript ?Le code JavaScript est dcrit dans le mme fichier que le document HTML ce qui augmente encore la simplicit d'criture. Ce code est par consquent du langage source2 et, l'image du code HTML, il a l'avantage d'tre parfaitement lisible par le lecteur curieux de voir comment est code la page de l'application qui se droule sous ses yeux.Lorsque le code HTML d'une page est charg, les fonctions JavaScript le sont aussi. Elles pourront tre rutilises, sans aucun accs vers le serveur, autant de fois qu'on le souhaite. Imaginons une page qui offre un bouton "calculette"; une fois charge on pourra utiliser cette calculette en permanence.La ranon de cette simplicit est qu'aucune analyse pralable du code JavaScript n'est ralise. Une erreur dans la syntaxe d'une instruction d'un programme mal test se traduit par l'apparition d'une fentre d'erreur...

    Le langage JAVANous ne parlerons pas (ou peu) de Java dans ce livre, d'abord parce que Java est un langage qui mrite un livre lui seul. En outre, crire une application en Java est trs loin du langage HTML. Cela est si vrai que l'affichage produit par une applet3 Java dans la fentre du browser n'est pas du tout ralis avec des instructions HTML.

    1. Ou un programme, la notion est sensiblement la mme.2. Le langage source ou code source reprsente en fait les instructions telles que les a

    tapes le programmeur.3. Nom donn aux programmes Java s'excutant dans le cadre d'un browser Web.

    3

  • Programmation HTML et JavaScript

    Conu par Sun, puis adopt par la quasi-totalit des constructeurs, Java est un langage de programmation comme JavaScript, mais c'est un langage compil, c'est--dire qu'avant de pouvoir s'excuter, un programme Java sera pralablement traduit. Cette traduction ou compilation effectue d'abord une analyse syntaxique et vrifie les rfrences ; si le rsultat de cette analyse est correct, un code excutable est gnr.Habituellement, on compile un programme (en langage C, C++, Fortran ou autre) pour une excution sur une plate-forme et un operating system donn. Avec Java, le code produit (appel le P-code) est indpendant de la plate-forme de production aussi bien que de la plate-forme d'excution ; tel est le grand avantage. On peut ainsi diffuser des applications sur le rseau sans se soucier du hardware qui va les utiliser ! Ce P-code est un code gnr non pas pour un processeur (ou une machine) spcifique, mais pour une machine "virtuelle" la machine Java. Par contre, il est bien vident que cette machine Java est dpendante de la machine physique qui la supporte. Mais, du point de vue du dveloppeur, c'est aussi "transparent" que pour l'interprteur JavaScript dcrit prcdemment. C'est le concepteur du browser qui a la charge d'implmenter cette machine virtuelle. Le P-code a aussi t conu pour tre transport correctement sur les rseaux. On peut compiler un programme Java sur un Macintosh qui, une fois tlcharg travers le rseau Internet, s'excutera aussi bien sur un browser install sur une machine Unix que sur un browser install sur un PC.Ce P-code est tlcharg, via une page HTML, depuis le serveur vers le client o il va s'excuter, mais l'utilisateur devant son cran n'aura plus cette fois la possibilit d'accder au code source.

    Java ou JavaScript ?Qu'apporte Java en plus de JavaScript ? L'un comme l'autre s'excutent sur le poste client et sont tlchargs depuis le serveur via une page HTML. Tous deux permettent une programmation vnementielle. Au niveau syntaxique, ils ressemblent C++. L'un est relativement simple et ne demande pas d'outils spcifiques, l'autre est plus complexe et ncessite un compilateur, voire un environnement de dveloppement complet (compilateur, debbuger gestionnaire de code, etc).On considre couramment que JavaScript est un bon assistant des pages HTML, permettant de faire des vrifications ou de petits calculs sur les donnes d'un formulaire de saisie, d'agrmenter le graphisme d'une page Web ou de charger un plug-in1 du browser. On peut envisager de raliser de petites applications, mais en JavaScript, la maintenance du code et son debuggage sont moins aiss. Enfin, le langage est plus limit que le langage Java (pas de classes et de notion d'hritage).Java est donc en principe un langage de dveloppeur adapt des applications plus lourdes (traitement de texte, tableur, etc.). Il est plus riche et plus rigoureux (dclaration obligatoire des variables comme en C ou en C++, possibilit d'accder aux composants rseaux...). Si une application doit tre distribue sur le rseau Internet avec une contre-

    1. Module externe dvelopp selon les rgles dictes par le concepteur du browser et permettant d'ajouter des fonctionnalits.

    4

  • Introduction

    partie financire, Java qui ne transfre pas le code source, va permettre d'exclure son "piratage" ou sa copie. Une application en JavaScript peut tre plus facilement copie, conserve, modifie...

    Dvelopper en Java ou en JavaScript prsente l'immense avantage de crer des applications indpendantes de la plate-forme d'excution. Dans un cas, le code est excut par la machine virtuelle Java intgre au browser, dans l'autre, le code est interprt par l'interprteur JavaScript intgr lui aussi au browser. On laisse ainsi aux diteurs de logiciels (Netscape, Microsoft, etc.) le travail de portage de leurs browsers sur les diffrentes pla- tes-formes.Enfin, la question du choix d'un langage pour une application sur le Web ne se pose pas rellement. C'est le mariage des trois technologies HTML, JavaScript et Java qui va permettre de faire de vritables applications pour le Web.

    Type de page HTML JavaScript Java CGIa

    Serveur institutionnel, pages de prsentation, publicits informations...

    OUI ventuellement pour enrichir le dcor

    NON NON

    Pages de formulaires, accs des bases de donnes.

    OUI OUI NON ou ventuel

    lement

    OUI

    Applications complexes, traitement de texte, tableur, outil de dessin...

    OUI ventuellement

    OUI NON

    Excution par le client client client serveur

    Figure 1 - Types de pages Web et langages ncessaires

    a. Le CGI n'est pas un langage, mais la zone du serveur o sont stocks les programmes excuts par le serveur.

    HTML 3.2, 4, Dynamic HTML ?Le niveau d'HTML que l'on pourrait considrer comme actuellement1 officiel est le niveau 3.2, mais les principaux browsers, comme Netscape ou Internet Explorer, peuvent tre en avance sur les normes et implmenter de nouvelles fonctionnalits. La plupart des pages Web qui voient le jour actuellement sont crites en utilisant ces spcificits, principalement au niveau de la mise en page et des artifices de prsentation.Ce manuel est fond plutt sur HTML 3.2. Il inclut ce que nous avons pu tester des feuilles de style et de Dynamic HTML. Nous avons inclus la balise layer de Netscape car

    1. Dcembre 1997

    5

  • Programmation HTML et JavaScript

    elle nous semble tre ce qu'il y a de plus dynamique dans HTML, mme si cette approche n'est pas encore "normalise" ; lors de la premire dition, nous nous tions pos les mmes questions concernant les frames. Notre objectif reste toujours de fournir un manuel pratique dcrivant des concepts qui fonctionnent rellement sur les browsers de rfrence.

    Comment tudier avec ce manuel (ou sans) ?On peut distinguer dans cet ouvrage une partie HTML pure ne ncessitant pas de connaissance particulire en informatique, une partie JavaScript ncessitant la comprhension d'un langage de programmation simple, et enfin une partie traitant de la programmation au niveau du serveur, le CGI. Ces trois parties sont clairement identifies. Dans l'apprentissage des balises HTML, l'aspect programmation JavaScript peut tre ignor par le lecteur ne s'intressant qu' la fabrication de pages statiques.Si vous disposez d'un micro-ordinateur, installez un chantillonnage de logiciels client (Netscape, Internet Explorer par exemple) et testez les diffrents exemples du manuel et leurs rsultats sur ces diffrents browsers. Essayez des exemples, modifiez-les, examinez le rsultat de ces modifications ; c'est une excellente mthode d'apprentissage. Il n'est pas ncessaire pour cette tape d'tre connect au rseau Internet. C'est possible tant que nous n'abordons pas la programmation CGI ; par la suite, il sera ncessaire d'tre dans l'environnement d'un serveur.Si vous tes connect Internet, vous pourrez trs vite vous passer de ce manuel et examiner, grce un browser, le code source HTML des millions de pages que vous avez votre disposition. Accder toute la documentation en ligne sur le Web est le plus sr moyen d'tre toujours au fait de ces nouvelles techniques.Chaque fois que vous trouverez une page sur le Web qui vous sduit ou vous intrigue allez voir le code source, c'est un excellent moyen d'apprentissage !

    Comment est dcrit JavaScript ?Nous avons dcid d'intgrer au fur et mesure de la description des balises HTML l'apport que peut avoir JavaScript sur la balise considre. Cette partie sera clairement indentifie par une icne et pourra tre ignore par le lecteur ne voulant pas se proccuper de l'aspect programmation. Si vous vous intressez cet aspect vous devrez avoir lu prcdemment le chapitre consacr au langage JavaScript.

    Comment est rdig ce manuel ?Avec quelques termes anglais. Nous avons prfr le terme browser celui de "navigateur" et nous avons utilis le terme balise plutt que tag !Tous les affichages des divers exemples ont t capturs dans un environnement X Win- dow et principalement depuis Netscape sur plate-forme Unix. Nos serveurs sont installs sur des machines Unix et utilisent les serveurs du NCSA et du CERN. Cela explique le choix de nos exemples.

    6

  • Introduction

    En revanche, c'est dans un environnement Macintosh que nous aborderons l'atelier de fabrication des dessins et des illustrations.

    Conventions d'critureLa syntaxe du langage sera inscrite de cette faon,

    Les exemples de code de cette faon.

    IcnesUn jeu d'icnes prsent sur la page suivante est utilis pour diffrencier les langages utiliss, le niveau d'HTML, ainsi que le browser utilis.

    7

  • Programmation HTML et JavaScript

    Code HTML standard. Cette icne dfinit un exemple complet pouvant tre reproduit et test sur n'importe quel browser (en principe !).

    Code Dynamic HTML . L'exemple inclura des scripts JavaScript.

    Code HTML utilisant des extensions propres Netscape. L'exemple ne pourra tre interprt correctement que sur un browser Netscape.

    Affichage du fichier HTML l'aide du browser Netscape.

    Affichage du fichier HTML l'aide du browser Netscape version 4 minimum.

    Source d'un programme crit en langage PERL.

    Source d'un programme crit en langage PLSQL.

    Source d'un programme crit en langage shell (shell, cshell, kshell...).

    Code HTML incluant du code JavaScript ou description de fonctionnalits JavaScript.

    Source d'un programme crit en langage C.

    Ligne unique de code imprime sur plusieurs lignes pour des raisons de mise en page.

    8

  • Introduction

    Environnement de test et de productionIl comprend quatre zones :La zone 1 se compose d'un simple poste (pas forcment connect au rseau) sur lequel on trouvera un ou plusieurs browsers installs ainsi qu'un simple diteur de texte. La machine peut tre indiffremment un Mac, un PC, ou un terminal X. Cette premire zone est suffisante pour apprendre le langage HTML de base.La zone 2 est identique la zone 1, mais les machines sont connectes au rseau. C'est depuis cette zone que l'on va tester les codes HTML et les scripts dvelopps que l'on aura pralablement installs en zone 3.La zone 3 est la zone serveur. Elle se compose d'une machine Unix sur laquelle se trouvent tous les logiciels ncessaires au fonctionnement d'un serveur Web, tous les rpertoires contenant les fichiers HTML, les images, les films, les sons ainsi que la zone o s'excutent les scripts.La zone 4 est l'atelier de PAO dans lequel on va raliser les images, les sons et les films.

    Figure 2 - L'environnement de travail

    Faut-il encore apprendre HTML ?Plus que jamais ! En effet, c'est dans les fichiers HTML et avec des instructions HTML qu'on appelle des applets Java et qu'on dcrit des scripts. HTML est le liant entre les diffrentes techniques existantes ou futures et, ce titre, il nous semble incontournable.

    9

  • Programmation HTML et JavaScript

    Chaque jour, la presse rapporte que tel traitement de texte offre dans sa nouvelle version la possibilit de sortie de documents en langage HTML. D'autres produits se proposent de convertir tel format de texte en HTML.Des diteurs plus ou moins wysiwyg apparaissent et l ; souvent, ils n'offrent que la possibilit d'insrer des balises grce un clic dans un menu, et tous ne font pas une analyse structurelle du fichier, ce qui serait le plus intressant. Ils dispensent surtout de connatre le balisage et les rgles de structuration.Tous ces produits n'indiquent pas toujours clairement quel niveau d'HTML ils sont capables de traiter ou de produire. L est peut-tre le problme le plus crucial, car lorsque l'on gnre de la documentation pour le Web, il est important de savoir quel niveau d'HTML on va se conformer, niveau que l'on peut d'ailleurs admettre diffrent selon le type de pages que l'on traite dans son serveur.Il reste enfin que toute la partie interactive (les formulaires ou la fabrication de scripts) n'est pour l'instant accessible qu'en travaillant au niveau du langage.Il ne faut pas pour autant ngliger ces logiciels, qui permettent souvent de peupler les pages d'un serveur en partant de documents existants.Tout cela dpend bien sr du niveau que l'on souhaite donner aux pages de son serveur : pour raliser des pages informatives, un assistant HTML peut suffire, pour mettre en place de vritables services sur le Web, il vaut mieux matriser ces langages.

    10

  • Chapitre 2

    L'hypertexte

    On pourrait dfinir l'hypertexte comme un systme qui relie par des liens activables des lments d'information.Ce principe est en partie apparu avec l'dition et la consultation de textes sur un cran d'ordinateur. La taille limite de ces crans, infrieure une page imprime, le passage d'un cran au suivant plus lent que l'action de tourner une page, et la constatation qu' un moment donn, le lecteur n'a besoin que d'une faible portion de l'information, ont fait natre un systme base de boutons, o un clic sur une partie du texte remplace celle-ci par un ensemble plus dtaill.La pratique de la lecture sur des mdias imprims constitue la base des pratiques d'criture hypertextuelle et la mtaphore de la page sera souvent employe. Dans le document lectronique, cette page pourra avoir en longueur l'lasticit que lui donne l'ascenseur1 permettant le dfilement du texte dans sa fentre.L'auteur d'un document hypertexte sera tent d'utiliser les mmes divisions et la mme prsentation (chapitres, notes, etc.) que lorsqu'il rdige un document destin l'impression. Effectuons tout d'abord un rappel sur l'organisation des documents imprims dans les types ou formats les plus courants :

    1. On appel ascenseur la facilit, apparue avec les interfaces graphique, de faire drouler un texte dans une portion d'cran, la fentre, l'aide d'un curseur que l'on dplace en faisant glisser la souris.

    11

  • Programmation HTML et JavaScript

    Le livreOn accde gnralement un tel ouvrage par la premire page, la lecture se poursuivant dans l'ordre chronologique des pages ; le seul droutement dans la lecture est introduit par les notes de bas de page. Le document se suffit lui-mme, et il n'y aura en principe pas d'accs ncessaire d'autres ouvrages (ventuellement, on aura recours un dictionnaire).

    Figure 3 - Accs squentiel ou linaire d'un document

    Le document techniquePrenons l'exemple de la documentation du traitement de texte Word. A l'exception du manuel d'initiation, il est rare qu'on lise les divers volumes comme un roman. C'est au cours de l'utilisation du traitement de texte que l'on va consulter, selon ses besoins le manuel de rfrence, celui de l'diteur d'quations ou encore le fascicule traitant des graphes.L'accs l'information va se faire en choisissant d'abord le volume, puis on orientera sa recherche en consultant soit la table des matires, soit l'index pour naviguer1 dans le document. On sera aussi peut-tre amen consulter un glossaire ou diverses annexes afin de complter la rponse attendue. Une telle structure de document est dite hirarchique ou arborescente ; sa consultation est plus difficile lorsqu'on travaille sur une dition papier que lorsqu'il s'agit d'un document lectronique. Ce type de document sera un trs bon candidat une prsentation hypertextuelle.

    1. Navigation est devenu le terme consacr pour illustrer l'action de se dplacer dans un systme d'hypertexte.

    12

  • L'hypertexte

    Figure 4 - Structure hirarchique d'un document

    Le journal

    Ce type de document correspond un besoin diffrent. Nous allons l'tudier, car il est intressant d'analyser la similitude entre la premire page, la une d'un journal, et la home page, ou page d'accueil, d'un service sur le Web.La premire page d'un journal est conue pour rpondre aux critres suivants : identifier le journal (logotype, typographie, mise en page), attirer l'il (couleur, iconographie), donner envie d'acheter le journal pour poursuivre la lecture.

    13

  • Programmation HTML et JavaScript

    Figure 5 - Liaison des articles dans un journal

    On peut lire un journal ou une revue en commenant les articles de premire page et continuer la lecture des pages suivantes, en revenant ensuite ventuellement vers la premire page pour choisir un nouvel article.

    Notions d'hypertexteDans les deux derniers types de documents dcrits, apparat le principe de liens entre divers lments de texte non contigus (une flche en pointill reprsentant les liens l'intrieur du document, une flche en trait plein pour des liens externes au document). Dans une forme papier des documents, on excute ces liens en tournant des pages ou en allant chercher sur des rayons des livres au gr des rfrences, notes de bas de page ou autres renvois rencontrs dans la lecture. Il sera chaque fois ncessaire de prserver le retour au point d'interruption de la lecture en marquant la page par un signet. Dans un document lectronique, on ira consulter ces liens en cliquant sur un repre spcial ; la sauvegarde du point de retour devra tre assure par une mmoire du systme.On peut considrer qu'hypercard sur Macintosh fut un des premiers systmes d'hypertexte. On rencontre maintenant des documents hypertexte dans divers environnements : sur les CD-Rom o ils sont raliss avec des logiciels comme Director ou Acrobat, dans la documentation en ligne sur les ordinateurs (ralise avec FrameMaker par

    exemple sur les stations Unix), dans la prsentation assiste par ordinateur (PowerPoint), sur l'Internet, o l'on peut fabriquer de tels documents l'aide du langage HTML. La rapidit de dplacement (un simple clic de souris) l'intrieur du document et la facilit de retour en arrire (mmoire) permettent une conception nouvelle de la documentation : les pages sont courtes (tenant sur un cran d'ordinateur), vont l'essentiel, et on offre aussi souvent que ncessaire l'explication d'un mot ou d'un concept en lui attribuant un lien vers une autre partie du document ou vers un autre document. Cette

    14

  • L'hypertexte

    autre partie peut tre un document rdig par un auteur diffrent sur un sujet diffrent. Par exemple, dans un document sur Lonard de Vinci, on trouve un lien vers un document touristique sur Florence.La premire page du document ressemble donc plus une table des matires o chacun des titres de chapitre est un lien vers le chapitre lui-mme. Si le document est complexe (type de document technique), on peut introduire dans la premire page une zone de dialogue, dans laquelle le lecteur peut entrer un mot que le systme utilisera pour lancer un moteur de recherche automatique dans le document (lien excutable), et prsenter alors une nouvelle page o seront indexes, en liens hypertexte, toutes les occurrences rencontres.

    Ecrire de l'hypertexteS'il ne possde pas de vritable logiciel de traitement d'hypertexte, l'auteur peut se tourner vers son traitement de texte et concevoir un document selon le schma habituel. Il peut ensuite tenter une transformation du texte linaire en hypertexte soit la main soit avec un logiciel de conversion. Cette mthode trs tentante permet de produire simultanment deux versions du document : une version imprimable et une version hypertex- tuelle.

    Du multimdia pour le WebPour le Web, on recommande souvent d'offrir une version imprimable (gnralement en PostScript ou en PDF ) d'un document hypertexte. Si ce document est un manuel technique ou une publication scientifique, il est inutile de se priver de l'aide d'un convertisseur. Mais, traduire directement la plaquette institutionnelle de son entreprise, c'est se priver de toute la richesse que peut apporter un document pens dans un mode hypertexte (films, sons, navigation l'aide de boutons, etc.). Ne travailler qu' l'aide d'un convertisseur de texte, c'est aussi perdre de vue l'interactivit apporte par les formulaires et l'accs aux scripts sur les serveurs Web.La ralisation de pages pour le Web procde aussi d'un assemblage de matriels issus de divers logiciels : logiciels de dessin (vectoriel et bitmap), logiciels d'acquisition d'images (fixes ou animes) et de sons, traitements de texte, logiciels d'criture de programmes informatiques, etc., qui seront tudis par la suite.

    15

  • Programmation HTML et JavaScript

    Ce chapitre de gnralits sur l'hypertexte introduit la notion importante de liens :Un lien dfinit une relation entre deux lments d'information :

    un lment sensible au clic de la souris - une lettre, un mot, un groupe de mots, une image ou une portion d'image. Cet lment est gnralement signal l'attention du lecteur par un attribut visuel.

    sa cible, qui peut tre du texte "plat", un autre document hypertexte, une image, un film ou un son.

    On distingue plusieurs types de liens :

    lien interne : rfrence une partie se trouvant l'intrieur du mme document.

    lien externe : rfrence vers un autre document. lien excutable : lien externe dclenchant un programme informati

    que de traitement de donnes en rponse une action effectue par le lecteur de manire interactive.

    Les liens sont la base du Web. La cible ou l'extrmit d'un lien peut setrouver sur n'importe quel ordinateur de la plante.

    R

    SU

    M

    16

  • Chapitre 3

    HTML, son environnement

    Qu'est-ce que HTML ?HTML - HyperText Markup Language - est un langage simple utilis pour crer des documents hypertexte pour le Web. Ce n'est pas un langage de description de page tel q