Mi Age

Cours Internet
D .Mailliet
MIAGE 2 me anne
Cours Internet...................................................................................................................................................................................1 Cours Internet...................................................................................................................................................................................7 I. Introduction..............................................................................................................................................................................7 A. Logiciels utiliss..............................................................................................................................................................7 1. Editeur de Textes.............................................................................................................................................................7 2. Navigateur........................................................................................................................................................................7 3. Serveur http......................................................................................................................................................................7 4. Interprte Php ..................................................................................................................................................................7 5. Serveur de base de donnes MySQL .............................................................................................................................7 6. Installation des logiciels..................................................................................................................................................7 a) Sous Windows.............................................................................................................................................................7 b) Sous Linux...............................................................................................................................................................7 B. Objectifs du cours : quelques langages pour Internet .............................................................................................7 1. Seul le client est utile ......................................................................................................................................................8 L HyperText Markup Language .......................................................................................................................................8 a) Les feuilles de style.....................................................................................................................................................8 b) Le javascript ............................................................................................................................................................8 c) Les applets java ...........................................................................................................................................................8 2. serveur(s) ncessaire(s) ...................................................................................................................................................8 a) Le Php ..........................................................................................................................................................................8 b) Php - MySql ............................................................................................................................................................8 C. But de lenseignement.....................................................................................................................................................8 D. Clients et Serveurs...........................................................................................................................................................8 1. Exemple ...........................................................................................................................................................................8 2. Client seul. .......................................................................................................................................................................9 3. Client et serveur...............................................................................................................................................................9 Bonjour......................................................................................................................................................................................... 10 4. Fonctionnement Rsultat ............................................................................................................................................. 11 E. Javascript ou Php ?....................................................................................................................................................... 11 1. Exemple 1 ..................................................................................................................................................................... 11 2. Exemple 2 ..................................................................................................................................................................... 11 3. Exemple 3 ..................................................................................................................................................................... 11 II. Attention la casse........................................................................................................................................................... 12 III. Html................................................................................................................................................................................... 13 A. Structure d'un document HTML.................................................................................................................................. 13 B. Le laxisme du HTML................................................................................................................................................... 14 C. Prsentation dun document HTML............................................................................................................................ 14 D. Indentation ou pas ........................................................................................................................................................ 15 E. Liste des balises et des attributs................................................................................................................................... 15 F. Du style dans le texte ................................................................................................................................................... 33 1. Les titres........................................................................................................................................................................ 33 Mon titre en H1 ....................................................................................................................................................................... 33 Mon titre en H2................................................................................................................................................................... 33 Mon titre en H3............................................................................................................................................................... 33 Mon titre en H4........................................................................................................................................................... 33 2. Les diffrents styles de caractres ............................................................................................................................... 33 Voici du gras............................................................................................................................................................................ 33 Voici de l'italique.................................................................................................................................................................. 33 voici du texte en police monospace ...................................................................................................... 33 voici du texte soulign ................................................................................................................................................. 33 Voici un exemple de texte partiellement en italique, en gras et soulign ............................................................................. 33 3. Styles logiques.............................................................................................................................................................. 33 Mise en vidence simple............................................................................................................................................... 34 Plus d'emphase............................................................................................................................................................ 34 Pour faire une citation ................................................................................................................................................. 34 Le rsultat d'un programme .......................................................................................................................... 34
Technologies Internet
Table des matires
D. Mailliet
MIAGE 2 me anne
ceci est une variable......................................................................................................................................................34 Du code ......................................................................................................................................................................34 Une touche du clavier ...................................................................................................................................34 G. Formater le texte............................................................................................................................................................34 1. Les retours la ligne : <br> ou <p>.............................................................................................................................34 avec un retour la ligne et une ligne vierge ........................................................................................................................34 2. Aligner le texte ..............................................................................................................................................................34 Votre paragraphe est au centre......................................................................................................................................................34 3. Mettre du texte en retrait : ............................................................................................................................................34 4. Le texte prformat :.....................................................................................................................................................35 5. Csure ou pas de csure................................................................................................................................................35 6. Les traits de sparation : ...............................................................................................................................................35 7. Les caractres spciaux.................................................................................................................................................35 8. Indice et exposant..........................................................................................................................................................36 H. Afficher des images ......................................................................................................................................................36 1. Les formats de fichiers graphiques ..............................................................................................................................36 2. Affichage simple d'une image......................................................................................................................................36 3. Les attributs de <IMG> ................................................................................................................................................37 4. Une image pour le fond de votre page .........................................................................................................................37 I. Les Liens HyperTextes .....................................................................................................................................................37 1. Crer un lien hypertexte - <A> ....................................................................................................................................37 2. Utiliser les ancres - <A name="..."> ............................................................................................................................38 a) Insrer une ancre .......................................................................................................................................................38 b) Pointer vers une ancre ..........................................................................................................................................38 J. Les Listes ...........................................................................................................................................................................38 1. Listes puces et listes numrotes...............................................................................................................................38 a) Les listes puces - <UL> .........................................................................................................................................38 b) Les listes numrotes - <OL> ..............................................................................................................................38 1. Mon premier lment de liste ...............................................................................................................................................39 2. Mon deuxime lment de liste............................................................................................................................................39 2. Les listes descriptives - <DL>......................................................................................................................................39 3. Les listes <DIR> et <MENU> .....................................................................................................................................39 4. Mler les listes...............................................................................................................................................................40 K. Couleurs et Polices........................................................................................................................................................40 1. Dfinition des couleurs en HMTL ...............................................................................................................................40 a) Les couleurs standard ...............................................................................................................................................40 b) Les codes hexadcimaux......................................................................................................................................40 2. Les lments de la page ................................................................................................................................................40 3. Les polices de caractres : La balise <FONT> ...........................................................................................................41 a) Changer la taille par dfaut ......................................................................................................................................41 L. Les Tableaux .................................................................................................................................................................41 1. Dfinir un tableau - <TABLE> ....................................................................................................................................42 2. Les cellules d'un tableau ...............................................................................................................................................42 a) Les titres ....................................................................................................................................................................42 b) Les cellules............................................................................................................................................................43 3. Exemple de code pour un tableau ................................................................................................................................43 M. Les frames......................................................................................................................................................................44 1. Le fichier <FRAMESET> ............................................................................................................................................44 2. Les attributs pour le fichier <FRAMESET> ...............................................................................................................44 3. Des fichiers HTML et des frames................................................................................................................................45 4. Exemple de code pour un fichier frameset ..................................................................................................................46 N. Formulaires de saisie.....................................................................................................................................................46 IV. Javascript ...........................................................................................................................................................................49 A. Gnralits .....................................................................................................................................................................49 B. Erreur dans un javascript ..............................................................................................................................................49 1. Erreur simple .................................................................................................................................................................49 2. ErreurGrave ...................................................................................................................................................................49
Table des matires
D. Mailliet
MIAGE 2 me anne
Commentaires............................................................................................................................................................... 49 Constantes, Variables, types ........................................................................................................................................ 49 1. Variables ....................................................................................................................................................................... 50 Le nom des variables est sensible la casse (ie : x != X)....................................................................................................... 50 2. Constantes..................................................................................................................................................................... 50 3. La valeur sans valeur.................................................................................................................................................... 50 4. oprateurs divers........................................................................................................................................................... 50 a) Oprateurs dassignement : ..................................................................................................................................... 50 b) Oprateurs de comparaison : ............................................................................................................................... 51 c) Oprateurs affectation conditionnelle.................................................................................................................... 51 E. Types ............................................................................................................................................................................. 51 1. Gnralits .................................................................................................................................................................... 51 a) Syntaxe objet ............................................................................................................................................................ 51 b) Syntaxe Classe ..................................................................................................................................................... 51 c) Syntaxe imprative................................................................................................................................................... 51 2. Boolens........................................................................................................................................................................ 51 a) Oprateurs logiques : ............................................................................................................................................... 52 3. Les nombres.................................................................................................................................................................. 52 a) Les entiers:................................................................................................................................................................ 52 b) Les nombres dcimaux: ....................................................................................................................................... 52 c) Les oprateurs........................................................................................................................................................... 52 d) Les constantes mathmatiques ............................................................................................................................ 52 e) Les fonctions ............................................................................................................................................................ 52 4. Les chaines: .................................................................................................................................................................. 52 a) Loprateur de Concatnation ................................................................................................................................. 53 b) Les fonctions ........................................................................................................................................................ 53 5. Les tableaux: ................................................................................................................................................................. 53 a) Tableaux simples...................................................................................................................................................... 53 b) Tableaux associatifs............................................................................................................................................. 54 c) Tableaux multidimentionnels .................................................................................................................................. 54 d) fonctions ............................................................................................................................................................... 54 6. Les dates: ...................................................................................................................................................................... 56 a) Fonctions................................................................................................................................................................... 56 F. Les structures de contrle ............................................................................................................................................ 56 1. Conditionnelle .............................................................................................................................................................. 56 a) Le Si .......................................................................................................................................................................... 56 b) Le Cas ................................................................................................................................................................... 57 2. Boucles.......................................................................................................................................................................... 57 a) Boucle pour............................................................................................................................................................... 57 b) Pour dans .............................................................................................................................................................. 58 c) Boucle tant que......................................................................................................................................................... 58 3. Rupture et continuitde boucle.................................................................................................................................... 58 G. Les fonctions................................................................................................................................................................. 59 1. Passage des arguments par valeur ............................................................................................................................... 59 2. Passage des arguments par adresse (par variable)...................................................................................................... 59 3. Arit variable ................................................................................................................................................................ 59 H. Les procdures.............................................................................................................................................................. 60 I. Porte des variables.......................................................................................................................................................... 60 J. Classes et Objets............................................................................................................................................................... 61 K. Entres/Sorties.............................................................................................................................................................. 61 1. sorties ............................................................................................................................................................................ 61 2. entres ........................................................................................................................................................................... 62 L. Fichiers.......................................................................................................................................................................... 62 M. Inclusion de fichiers ..................................................................................................................................................... 62 N. Evnements : traitement............................................................................................................................................... 62 O. Evnements : simulation.............................................................................................................................................. 63 Blur() ; focus() ; click(); submit(); etc... .................................................................................................................................... 63
C. D.
Table des matires
D. Mailliet
MIAGE 2 me anne
Dans lexemple suivant on simule laction de lutilisateur qui consiste placer le focus sur le champ mdp.........................63 Dans les 2 exemples suivants on envoie automatiquement le formulaire ci-dessus .................................................................64 P. Objets prdfinis ...........................................................................................................................................................64 1. Exemple trs important :...............................................................................................................................................64 2. Les tableaux prdfinis .................................................................................................................................................65 3. Exemple : communication entre frames ......................................................................................................................66 4. Exercice : .......................................................................................................................................................................67 V. Feuilles de style .................................................................................................................................................................69 A. La cration de style .......................................................................................................................................................69 B. Les feuilles de style externes........................................................................................................................................70 1. Le fichier externe ..........................................................................................................................................................70 2. L'intgration du fichier externe ....................................................................................................................................70 C. Les proprits de style ..................................................................................................................................................70 1. Les proprits de police ................................................................................................................................................70 2. Les proprits de texte ..................................................................................................................................................71 3. Les proprits d'arrire-plan .........................................................................................................................................71 4. Les proprits de positionnement.................................................................................................................................71 5. Les proprits d'encadrement .......................................................................................................................................71 6. Exemples........................................................................................................................................................................72 VI. Applet java.........................................................................................................................................................................74 A. Gnralits .....................................................................................................................................................................74 B. Syntaxe...........................................................................................................................................................................74 C. Passage de paramtres...................................................................................................................................................75 VII. Php......................................................................................................................................................................................76 A. Gnralits .....................................................................................................................................................................76 B. Commentaires................................................................................................................................................................77 C. Constantes, Variables, types.........................................................................................................................................77 1. variables .........................................................................................................................................................................77 Le nom des variables est sensible la casse (ie : $x != $X)...................................................................................................77 2. Nommage dynamique des variables ............................................................................................................................78 3. Constantes......................................................................................................................................................................79 4. Rfrences .....................................................................................................................................................................79 5. La valeur sans valeur ....................................................................................................................................................79 6. oprateurs divers ...........................................................................................................................................................79 a) Oprateurs dassignement : ......................................................................................................................................79 b) Oprateurs de comparaison :................................................................................................................................79 c) Oprateurs affectation conditionnelle ....................................................................................................................79 7. Variables prdfinies ....................................................................................................................................................80 D. Types..............................................................................................................................................................................80 1. Boolens ........................................................................................................................................................................80 a) Oprateurs logiques : ................................................................................................................................................80 2. Les nombres...................................................................................................................................................................80 a) Les entiers: ................................................................................................................................................................80 b) Les nombres dcimaux: ........................................................................................................................................81 c) Les oprateurs ...........................................................................................................................................................81 d) Les constantes mathmatiques.............................................................................................................................81 e) Les fonctions .............................................................................................................................................................81 3. Les chaines: ...................................................................................................................................................................83 a) Loprateur de Concatnation..................................................................................................................................83 b) Les fonctions .........................................................................................................................................................83 4. Les tableaux:..................................................................................................................................................................86 a) Tableaux simples.......................................................................................................................................................86 b) Tableaux associatifs..............................................................................................................................................86 c) Tableaux multidimentionnels...................................................................................................................................86 d) fonctions................................................................................................................................................................87 e) Exemple .....................................................................................................................................................................88 E. Les structures de contrle.............................................................................................................................................89
Table des matires
D. Mailliet
MIAGE 2 me anne
Conditionnelle .............................................................................................................................................................. 89 Le Si .......................................................................................................................................................................... 89 Le Cas ................................................................................................................................................................... 90 2. Boucles.......................................................................................................................................................................... 90 a) Boucle pour............................................................................................................................................................... 90 b) Boucle pour chaque ............................................................................................................................................. 91 c) Boucle tant que......................................................................................................................................................... 92 d) Boucle Faire tant que........................................................................................................................................... 92 3. Rupture et continuit de boucle................................................................................................................................... 93 F. Les fonctions................................................................................................................................................................. 93 1. Passage des arguments se fait par valeur .................................................................................................................... 93 2. Passage des arguments se fait par adresse (par variable)........................................................................................... 93 G. Les procdures.............................................................................................................................................................. 94 H. Porte des variables...................................................................................................................................................... 94 I. Classes et Objets............................................................................................................................................................... 94 J. Entres/Sorties.................................................................................................................................................................. 95 1. sorties ............................................................................................................................................................................ 95 2. entres ........................................................................................................................................................................... 95 K. Fichiers.......................................................................................................................................................................... 96 Et pour la lecture........................................................................................................................................................................... 96 L. Inclusion de fichiers ..................................................................................................................................................... 97 VIII. PhpMyAdmin ............................................................................................................................................................... 98 On voit ci-dessus les diffrentes bases que lon peut dvelopper en cliquant sur le + et dcouvrir les tables qui la compose ........................................................................................................................................................................................................ 98 CREATE DATABASE `calrep`; ............................................................................................................................................... 101 Soit par un copier/coller des lignes de ess.sql........................................................................................................................... 101 IX. Interfaage PhP/MySql .................................................................................................................................................. 102 a) b)
1.
Table des matires
D. Mailliet
MIAGE 2 me anne
Cours Internet
I.
Introduction
A. Logiciels utiliss
1. Editeur de Textes Votre diteur de textes (ASCII) prfr fera laffaire. Il est possible dutiliser Notepad sous Windows, VI ou Kedit sous Linux. Mais les Editeurs plus volus comme (X)Emacs ou Pfe ou scriptEdit ou encore EditPlus faciliteront la tache. Les diteurs intgrs aux navigateurs seront aussi utiliss sans en abuser. Il permettra dcrire les codes dans les diffrents langages 2. Navigateur Internet Explorer, Netscape, Mozilla sont les plus utiliss. Ils ne ragissent pas tous exactement de la mme faon. Internet Explorer nexiste que sous windows. Netscape et mozilla existent sous Windows et linux, Ils ne ragissent pas non plus exactement de la mme faon sous ces 2 systmes dexploitation. Il conviendra donc de tester les pages cres sous les 2 systmes dexploitation et avec les diffrents navigateurs. 3. Serveur http Cest lui qui va fournir les pages html demandes. Nous utiliserons Apache. Le rle essentiel du serveur Http va tre de fournir une arborescence pour Internet diffrente de larborescence physique . Par exemple sous Windows, avec easyphp install en standard les pages http et php se trouvent en C:\Program Files\EasyPHP\www
A gauche : sans utiliser le serveur http. A droite : en utilisant le serveur http sur la machine locale (127.0.0.1 est ladresse IP de la machine locale, mais cette IP peut tre remplace par celle dune machine distante quipe dun serveur http). On remarque que la racine pour le serveur correspond physiquement C:\Program Files\EasyPHP\www pour la machine. Et quil est possible de descendre dans larborescence sous WWW, mais quil nest pas possible dy remonter. 4. Interprte Php
Il fonctionne en collaboration avec le serveur http pour traduire le code Php en Html 5. Serveur de base de donnes MySQL Il travaille en collaboration avec linterprte Php et fournit les donnes extraites des tables. 6. Installation des logiciels a) Sous Windows
Un ensemble easyphp que lon peut tlcharger sur www.easyphp.org sinstalle trs facilement et contient les 2 serveurs et linterprte. b) Sous Linux
Cest trs simple : il suffit de valider les installations des logiciels ci-dessus, ils font partie de toutes les (bonnes) distributions
B.
Objectifs du cours : quelques langages pour Internet

7
Nous distinguerons 2 grandes parties :

Introduction
D. Mailliet
MIAGE 2 me anne
1. Seul le client est utile Html, javascript, feuille de style et applet java sont interprts par le navigateur (rcent) il est inutile davoir install apache, php, mysql. L HyperText Markup Language Cest un langage de mise en forme des pages Html. Il permet de dfinir lapparence dune page : sa prsentation. Il permet entre autre de grer les alignements de textes, le gras, litalique, les titres, la confection de tableaux et de formulaires etc. La seule interaction avec lutilisateur est la gestion de liens hypertexte qui permettent de passer dune page une autre en cliquant sur un lment de la page. Le HTML dcrit la prsentation dune page laide de balises entre < > a) Les feuilles de style Elles permettent de donner une uniformit de prsentation des diffrentes pages dun mme site et de donner de la souplesse la modification de leur prsentation. Les styles peuvent tre dfinis dans le fichier Html ou mieux dans un fichier spar (.css). Dans un tel fichier, on dfinit par exemple quun titre de page est en bleu sur fond jaune avec une hauteur de 18 points, que les titres de niveau 1 sont en vert et ont une hauteur de 16 points etc. ... Lapplication de cette feuille de style aux diffrentes pages du site lui donnera une certaine homognit. De plus la modification dans la feuille de style : titre de page est en rouge sur fond vert avec une hauteur de 20 points provoquera la modification dans toutes les pages sans quil soit ncessaire de le faire manuellement dans chaque page. b) Le javascript Il permet de donner une ractivit aux pages, par exemple en animant certaines parties comme le changement dune image lorsque la souris passe sur elle, contrle de validit de parties de formulaire comme la vrification que lutilisateur a bien rempli certaines zones obligatoires. Le code javascript se trouve directement dans les pages html ou dans un fichier spar (.js) et est directement lisible. Il se trouve encadr par 2 balises <script> </script> c) Les applets java
Il sagit ici de code java (diffrent de javascript) compil (.class) : il a le mme objectif que javascript , mais le code est (un peu) protg.. Il est interprt lui aussi par le navigateur condition que la JVM (machine virtuelle java) soit installe (sur le client) 2. serveur(s) ncessaire(s) a) Le Php
Cest du code mlang au code Html, il est interprt par le serveur et est traduit en code html puis envoy au navigateur b) Php - MySql Des requtes SQL sont interprts par Php, envoy au serveur de SGBD pour recevoir les donnes correspondantes, traduites en HTML et envoyes au navigateur.
C.
But de lenseignement
Lobjet de cet enseignement nest pas de faire de vous des experts mais de vous donner les bases pour le devenir. Nous ne verrons que les principales caractristiques des diffrents langages et certainement pas toutes leurs finesses. Mais principalement lutilit et le fonctionnement de chacun dentre eux. Internet regorge de documentations sur le sujet. Ce polycopi est insuffisant pour traiter tous les TP et projets mais les diffrents sites Internet prconiss et dautre que vous pourrez trouver pourront vous y aider.
D.
Clients et Serveurs
Le fonctionnement normal ncessite n+2 machines : Les n clients, le serveur http et le serveur MySql. Bien entendu, les systmes dexploitation tant multi-tches, pour les tests, une seule machine peut faire fonctionner les 2 serveurs et le(s) client(s) 1. Exemple
On veut crire un programme simple qui demande lutilisateur son prnom et qui affiche bonjour suivi du prnom donn : Il sagit donc dun programme interactif, Le Html seul ne suffit pas : nous avons le choix entre javascript et php nous allons voir les diffrences entre ces 2 possibilits. Voici donc le droulement du fonctionnement
Introduction
D. Mailliet
MIAGE 2 me anne
Lappui sur le bouton valider provoque laffichage :
2. Client seul. Seul le navigateur est primordial, le serveur est facultatif xxx et yyy reprsentent soit : C:\Program Files\EasyPHP\www\pedago\ess1\tstjs.htm soit : http://localhost/pedago/ess1/tstjs.htm (sous Windows localhost est quivalent 127.0.0.1 A vrifier sous Linux). Le source de tstjs.htm est crit en javascript (texte en gras) et Html (le reste non gras) : <html> <head> <TITLE>Question/rponse</TITLE> </head> <body> <form name="maforme"> Votre prnom : <INPUT type="text" name="leprenom" value=""> <INPUT type="submit" value="Valider" onclick="javascript:document.write('bonjour' +document.maforme.leprenom.value);return true;"> </form> </body> </html> 3. Client et serveur Le navigateur et le serveur Http/Php sont ncessaires xxx reprsente http://localhost/pedago/ess1/tstjs.php et yyy : http://localhost/pedago/ess1/suite.php?leprenom=didier Il y a ici 2 fichiers diffrents: tstjs.php
Introduction
D. Mailliet
MIAGE 2 me anne
<html> <head> <TITLE> Question/rponse </TITLE> </head> <body> <form name="maforme" methode="post" action="suite.php" target="_self"> Votre prnom : <INPUT type="text" name="leprenom" value=""> <INPUT type="submit" value="Valider" > </form> </body> </html> Et suite.php : <html> <head> <TITLE> Question/rponse TITLE> </head> <body> Bonjour <?php echo $leprenom ?> </body> </html> Remarquons que si lon demande laffichage du source de suite.php
Nous ne verrons pas loriginal (tel quil a t crit ci-dessus -) mais son interprtation par php : <html> <head> <TITLE>Titre de la page</TITLE> </head> <body> Bonjour didier </body> </html> o la variable $leprenom a t remplac par sa valeur didier
Introduction
10
D. Mailliet
MIAGE 2 me anne
Remarquons aussi: Que tstjs.php aurait pu sappeler tstjs.htm(l) car aucun code php ny est contenu La ncessit de 2 programmes : le premier est envoy au navigateur par le serveur, il est charg de poser la question lutilisateur et le second est charg de mettre en forme la rponse (stocke dans leprenom) de lutilisateur, et qui transite ici par lURL. Que si lon met comme adresse C:\Program Files\EasyPHP\www\pedago\ess1\tstjs.php, c'est--dire que lon ne passe pas par le serveur, les programmes fonctionneront (mal) mais ninterprteront pas la rponse en mettant simplement Bonjour non suivi du prnom puisque cest le serveur qui est charg de linterprtation de la variable leprenom. 4. Fonctionnement Rsultat Du point de vue de lutilisateur, le fonctionnement de tstjs.htm et de tstjs.php/ suite .php semble identique et le rsultat est le mme. Il constatera une diffrence sil sen va examiner les sources. Cependant le fonctionnement est radicalement diffrent : Dans le premier cas : le client demande au serveur la page tstjs.htm (cest lutilisateur qui tape lURL : http://.../tstjs.htm) lorsque lutilisateur appuie sur le bouton valider , cest le navigateur qui rcupre le texte tap par lutilisateur et affiche le rsultat trait. Dans ce cas, il nous faut un navigateur volu (capable de traiter des donnes et pas seulement de la mise en forme) et un serveur http minimal. Il y a une demande et une rponse. Dans le deuxime cas : le client demande au serveur la page tstjs.php (cest lutilisateur qui tape lURL : http://.../tstjs.hphp) lorsque lutilisateur appuie sur le bouton valider , le navigateur demande une nouvelle page au serveur suite .php en adjoignant lURL la donne tape par lutilisateur et cest le serveur qui la traite pour fournir une page Html. . Dans ce cas, il nous faut un navigateur minimal (capable de traiter de la mise en forme) et un serveur http volu. Il y a 2 demandes et 2 rponses.
E.
Javascript ou Php ?
Qui fait le travail intelligent : le client ou le serveur ? Si cest le serveur, il faut en gnral dissocier les parties puisquil y a un aller entre le client (navigateur) qui reoit les instructions de lutilisateur et le serveur qui les traite et un retour vers le client qui les affiche et selon la complexit des changes, cette navette peut se reproduire. Alors que si cest le client, toutes les informations lui sont envoyes et cest lui qui choisit de les afficher (selon les demandes). Imaginons 3 exemples pour clarifier les choses (on ne parlera que de javascript et php, bien entendu, il comporteront tous du Html qui est lessence mme du fonctionnement http et pourquoi pas des feuilles de style) : 1. Exemple 1 On demande lutilisateur de remplir un formulaire (comme celui ci-dessus, mais plus long que dentrer le seul prnom) et on veut obliger celui-ci remplir certains champs obligatoires, que la date de naissance est bien valide, que le code postal con tient bien 5 chiffres, etc. Il est possible de faire ces vrifications avant que ce formulaire soit envoy ; donc par le navigateur (en javascript par exemple) vitant ainsi denvoyer un formulaire incorrect au serveur qui ferait la vrification, constaterait lincorrection et le renverrait au client pour correction et ainsi de suite. Dans ce cas on choisi javascript pour des questions de rapidit et dencombrement des changes 2. Exemple 2 On veut raliser un programme qui donne accs certaines informations lutilisateur que sil connat un certain mot de passe. Si la ralisation est faite en javascript, et que lutilisateur ne connat pas ce mot de passe, des tests adapts permettront de ne pas afficher dans le navigateur, mais il suffira dexaminer le source pour accder aux informations puisque toutes auront t envoyes par le serveur le choix de les afficher incombant au client (navigateur). Dans ce cas, on choisira Php pour des raisons de scurit. 3. Exemple 3 On veut raliser un programme qui permette lutilisateur dentrer un code postal et dobtenir le n om de la commune correspondante. Comme il y a en France 36 000 communes, si lon choisit de coder en javascript, le serveur va devoir
Introduction
11
D. Mailliet
MIAGE 2 me anne
envoyer les 36 000 noms et codes postaux afin que le client puisse effectuer la slection. Dans ce cas, on choisira Php pour des raisons de volumes de donnes (dencombrement); il sera mme intressant de faire appel une requte Sql pour faciliter la recherche.
II.
Attention la casse
J'attire seulement votre attention sur la notion de casse, c'est--dire le respect des majuscules et minuscules. En effet, lorsque vous vous trouvez sous systme utilisateur (MacOs ou Windows), le fait que vous fassiez appel un fichier nomm "Bonjour.html" par "bonjour.html" ne pose a priori pas de problme. Tant que vous tes sous systme utilisateur. Mais sur Internet, la plupart des serveurs - l o seront stockes vos pages personnelles - fonctionnent sous UNIX ou driv. Or Unix est sensible la casse, c'est--dire que si vous appelez le fichier "Bonjour.html" en tapant "bonjour.html", vous n'obtiendrez pas de rponse, ou un message d'erreur. Sous Unix, il s'agit de deux fichiers distincts. En guise de conseil, essayez de n'utiliser que des minuscules dans vos noms de fichier (ou que des majuscules), ce qui vous permettra d'viter ce risque d'erreur.Evitez de mme les accents et les espaces dans les noms de fichiers
Introduction
12
D. Mailliet
MIAGE 2 me anne
III. Html
Le langage HTML (Hyper Text Markup Language) est un langage de balisage, c'est dire qu'il est compos de ce qu'on appelle des balises, balises qui sont ensuite interprtes par le navigateur, celui-ci produit la mise en forme du document. C'est--dire, par exemple,Gras, italique, centr, formulaires, images, etc... Voici un exemple de balise : <head> xxxxx</ head > Les balises sont crites entre < et >. Elles vont gnralement par paire, d'abord la balise ouvrante, marquant le dbut de l'action, et la balise fermante, marquant la fin de l'action. Celle ci est reconnaissable par le / plac juste aprs le <. Certaines balises nont pas de balise de fermeture par exemple <br> qui permet le passage la ligne, na aucune raison davoir une fermeture. Une bonne ide concite adopter la syntaxe de XML, c'est--dire mettre un antislash la fin : <br /> Les balises peuvent avoir des attributs qui se place galement l'intrieur des < >, comme ceci : <balise attribut1=" " attribut2=" "> xxx </ balise > La valeur des attributs peut tre avec ou sans guillemets simple ou double. On mettera toujours les valeurs entre guillemets, mme si a net pas obligatoire. De mme, il est une habitude de mettre le nom des balises en majuscule. Si lon veut une compatibilit XML, cest viter. ( vrifier)
A.
Structure d'un document HTML
Dans un document HTML, certaines balises sont indispensables, elles forment la structure du document. Html est trs laxiste, Si certaines balises sont absentes ou non ferme ou mme croises, le document produit risque dtre correct. Mais il vaut mieux respecter les rgles suivantes La premire balise est <HTML>. Elle ouvre tous les documents. </HTML> ferme le document. La deuxime balise est <HEAD>. Thoriquement elle n'est pas obligatoire, une page HTML peut parfaitement fonctionner sans la balise HEAD. Mais en pratique elle se rvle indispensable. Elle contient la plupart des informations sur la page. Ces informations sont dfini grce des sous balises de HEAD, de la manire suivante : <HEAD> < BALISE_de_TETE></ BALISE_de_TETE> </HEAD> Voici les principales balises (_de_tte) : <TITLE> </TITLE> : Permet d'indiquer le titre de la page, celui qui s'affiche dans la page du navigateur . <SCRIPT> </SCRIPT> : Permet de placer du script qui pourra tre excuter dans la page , Javascript ou VBscript par exemple. <META> : Donne des indications sur la page qui pourront tre rcupres par les robots des moteurs de recherche, et pourront aussi fournir des infos aux personnes qui liront votre code. La troisime balise formant la structure d'un document HTML est la balise <BODY>. C'est dans cette balise que va se placer tous le corps de la page html, c'est a dire tous son contenu. Tous le texte inscrit entre les balises <BODY> et </BODY> sera affich l'cran. Elle possde les attributs suivants:
HTML
13
D. Mailliet
MIAGE 2 me anne
Attribbut BGCOLOR=une couleur BACKGROUND = l'URL d'une image TEXT = une couleur LINK = une couleur VLINK = une couleur ALINK = une couleur
signification dfinit la couleur de fond du document, en RGB dfinit l'image de fond du document dfinit la couleur du texte du document dfinit la couleur des liens du document dfinit la couleur des liens visits du document dfinit la couleur des liens actifs du document
En rsum,voici un exemple dans lequel, il faut remplacer les par du texte et les exemples de couleurs (#XXXXXX) par dautres valeurs. :
<head> <title>...</ title> < meta name ="author" content ="..." /> < meta name ="keywords" content ="..." /> < meta name ="lang" content ="..." /> <meta name="description" content="..." /> ... </head> <body bgcolor="#FFFFFF" link="#FF3300" alink="#FFFFFF" vlink="#660099"> ... </body> </html>
<html>
B.
Le laxisme du HTML
Le balisage ouvrant/fermant en html correspond au parenthsage mathmatique et aux structures de contrle des langages informatique. Autrement dit , il ne faut pas croiser les balises. Il faut viter doublier de fermer une balise ou de les fermer dans le dsordre. Cependant une page mal construite peut trs bien safficher correctement,
Mais la maintenance (mise jour) peut savrer prilleuse. Il faut viter tout prix dcrire par (contre-)exemple <html> <head> <title>Maivais exemple <body bgcolor="#FFFFFF" link="#FF3300" alink="#FFFFFF" vlink="#660099"> </head></ title> Il ne faut surtout pas suivre cet exemple </body> </html>
C.
Prsentation dun document HTML
Comme dans les langages de programmation, les espaces, tabulations et passage la ligne (mme multiples) nont aucun effet sur la prsentation. Que lon mette 1 ou 20 espaces entre 2 mots, ils apparatront toujours spars dun seul, il en va de mme si lon passe 1 ligne entre 2 mots, ils apparatront spars dun espace. Pour obtenir plusieurs espaces, il faut mettre plusieurs &nbsp ; pour obtenir plusieurs sauts de ligne, il faut mettre plusieurs <br /> Il convient donc , comme en programmation, pour amliorer la claret, de bien indenter les lignes de code.
HTML
14
D. Mailliet
MIAGE 2 me anne
D.
Indentation ou pas
Remarque : Si lindentation procure incontestablement une facilit de lecture du code, les multiples espaces inutiles prennent du temps de transmission sur le rseau. Il nest donc pas inutile de disposer de 2 versions des pages html une pour le dveloppement et une pour lutilisation du site. Il est facile dcrire une moulinette dans un langage de programmation quelconque qui suprime les espaces, tabulation et sauts de ligne non obligatoires.
E.
Liste des balises et des attributs
Le tableau ci-dessous reprsente la liste des balises classe par ordre alphabtique. La balise se situe dans la colonne la plus gauche. Et la description correspond la premire ligne dentte du tableau. Lorsque la cellule la plus gauche est vide, il sagit dune description des attributs de la balise situe au dessus. Et la description correspond la deuxime ligne dentte du tableau Balise Attribut Fermeture Attributs Valeur on() reprsente dans la suite: onKeyDown Appel une fonction onKeyPress Appel une fonction onKeyUp Appel une fonction onClick Appel une fonction onDblClick Appel une fonction onHelp Appel une fonction onMouseDown Appel une fonction onMouseMove Appel une fonction onMouseOut Appel une fonction onMouseOver Appel une fonction onMouseUp Appel une fonction <!DOCTYPE> N N  N N <ABBR> O title Texte id class style on,,,() <ACRONYM> title id class Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe HTML 15 Description Description Balise de script simple Balise de script (se produit lorsqu'une touche du clavier est enfonce) Balise de script (se produit lorsqu'on tape une touche du clavier) Balise de script (se produit lorsqu'une touche du clavier est leve) Balise de script (se produit lorsqu'on click) Balise de script (se produit lorsqu'on double-click) Balise de script (se produit lorsqu'on appel l'aide F1) Balise de script (se produit lorsqu'un bouton de la souris est press) Balise de script (se produit lorsqu'on bouge la souris) Balise de script (se produit lorsqu'on dplace la souris sur le texte) Balise de script (se produit lorsqu'on dplace la souris hors le texte) Balise de script (se produit lorsqu'un bouton de Version du HTML utilis Commentaire Abrviation Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Acronyme (remplace <ABBR>) Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Origine / Exemple HTML 2.0 "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" HTML 2.0 HTML 2.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 4.0 "Description" "pargr1" "titre1"
D. Mailliet
MIAGE 2 me anne
<ADDRESS> <A HREF>
style on,,,() N Accesskey
Un style une fonction O O Texte
href Name Target
URL Nom
Tabindex
title id class style on,,,() O O N title id class style on,,,() O href Target
<APPLET> <AREA> <B>
<BASE>
<BASEFONT> <BDO> <BGSOUND> <BIG>
O N O N title
Target (respectivement : mme cadre, cadre pre, nouvelle fentre, page entire) ou le nom du cadre de destination Nombre C'est l'ordre de tabulation. 2 signifie que lorsque vous appuierez sur Tab, ce sera le deuxime lment slectionn Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) Un style Attache un style spcifique la balise une fonction voir Balise de script simple et complexes O Insertion d'applet Java N Zone cliquable O Texte en gras Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) Un style Attache un style spcifique la balise une fonction voir Balise de script simple N Df. sup. de l'URL de la page HTML URL C'est l'URL vers o pointe le lien hypertexte Target Cadre de destination du lien (respectivement : mme cadre, cadre pre, nouvelle fentre, page entire) ou le nom du cadre de destination N Taille par dfaut d'une police O Changement de direction impossible N Insertion de fichier audio O Police de taille plus importante Texte Une description du texte lorsque l'on pointe le curseur dessus 16
Attache un style spcifique la balise voir Balise de script simple URL sous forme textuel Lien hypertexte C'est la touche de raccourci permettant d'accder au lien (par la combinaison Alt + nom de la touche). C'est l'URL vers o pointe le lien hypertexte Nom (marque une position l'intrieur du document) Cadre de destination du lien
"font-size: 12 pt" onClick="fonction()" HTML 2.0 HTML 2.0 "b"
"page.html" "Nom" "_self" | "_parent" | "_blank" |"top" | "cadre"
"2"
"Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 N.N 2.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "page.html" "_self" | "_parent" | "_blank" |"top" | "cadre"
N.N 1.0 HTML 3.0 * I.E 3.0 HTML 3.0 "Description"
HTML
D. Mailliet
MIAGE 2 me anne
id class style on,,,() N title id class style on,,,() N title id class style on,,,() O Text
Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction F Couleur hexa RRVVBB ou nom de la couleur Couleur Couleur Couleur Image Couleur Valeur fixed Nombre en pixels Valeurs yes ou no Nombre en pixels Nombre en pixels Nombre en pixels Texte Nom d'une ID Nom d'une classe Un style Appel une fonction Appel une fonction Appel une 17
<BLINK>
<BLOCKQUO TE>
Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Clignotement du texte Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Lgre marge gauche Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Corps du document Couleur du texte
"pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" * N.N 1.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "#000000"
<BODY>
Link VLink ALink background bgcolor bgproperties BottomMargin Scroll TopMargin LeftMargin RightMargin title id class style oncontextmenu ondragstart onselectstart
Couleur d'un lien Couleur d'un lien visit Couleur d'un lien actif Image d'arrire plan Couleur de la page Arrire plan statique (qui ne dfile pas avec le texte) Marge en bas de la page Permet ou non de faire dfiler la page Marge en haut de la page Marge gauche de la page Marge droite de la page Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise Balise de script (se produit lors de l'apparition du menu (click bouton droit)) Balise de script (se produit lorsqu'on effectue un glisser-dposer) Balise de script (se produit lorsqu'on
"#0000FF" "#0099FF" "#FF0000" "fond.jpg" "#FFFFFF" "fixed" "10" "yes" | "no" "10" "10" "10" "Description" "pargr1" "titre1" "font-size: 12 pt" "fonction()" "fonction()" "fonction()" D. Mailliet
HTML
MIAGE 2 me anne
<BR>
<BUTTON> <CAPTION>
fonction Appel une fonction onScroll Appel une fonction onResize Appel une fonction onLoad Appel une fonction onFocus Appel une fonction onBlur Appel une fonction onAfterUpdate Appel une fonction onBeforeUpdate Appel une fonction onKeyDown Appel une fonction onKeyPress Appel une fonction onKeyUp Appel une fonction on,,,() une fonction O N Clear Marges (gauche, droite, toutes) N O O O Align Alignement (respectivement : haut, bas, gauche, centr, droite) VAlign Alignement vertical (haut ou bas) title Texte onUnload id class style N title id class style on,,,() N title id Nom d'une ID Nom d'une classe Un style O Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID
entame une slection) Balise de script (se produit lorsque la feuille est ferme) Balise de script (se produit lorsqu'on scroll sur la feuille) Balise de script (se produit lorsqu'on redimensionne la feuille) Balise de script (se produit lorsque la feuille est charge) Balise de script (se produit lorsque la feuille reoit le focus) Balise de script (se produit lorsque la feuille perd le focus). Balise de script Balise de script Balise de script (se produit lorsqu'une touche du clavier est enfonce) Balise de script (se produit lorsqu'on tape une touche du clavier) Balise de script (se produit lorsqu'une touche du clavier est leve) voir Balise de script simple Saut de ligne Supprime les marges
"fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" onClick="fonction()" HTML 2.0 "left" | "right" | "all"
Bouton dans un formulaire Titre de tableau Dfini l'alignement de la lgende
* I.E 4.0 HTML 3.0 "top" | "bottom" | "left" | "center" | "right"
Dfinit l'alignement vertical de la lgende "top" | "bottom"
<CENTER>
<CITE>
Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise Centrage Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte sous forme de citation Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) 18
"Description" "pargr1" "titre1" "font-size: 12 pt" HTML 3.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1"
HTML
D. Mailliet
MIAGE 2 me anne
class style on,,,() N title id class style on,,,() O Width Span
<CODE>
Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction N Largeur Nombre
<COL>
Align
char CharOff VAlign
title id class style N Width Span
<COLGROUP>
Align
char CharOff
Alignement (respectivement : gauche, centr, droite, justifi, align sur un caractre spcifique) Texte Caractre sur lequel le texte s'alignera (si char est utilis dans align) Nombre Nombre de pixels de retrait du texte Alignement Dfinit l'alignement vertical de la colonne vertical (respectivement en haut, au milieu, en bas, ligne de base) Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) Un style Attache un style spcifique la balise F Regroupement de colonnes (tableau) Largeur Largeur des colonnes dfinie pas la balise col Nombre Indique le nombre de colonnes sur lesquelles s'appliqueront les proprits de la balise col Alignement Dfinit l'alignement de la colonne (respectivement : gauche, centr, droite, justifi, align sur un caractre spcifique) Texte Caractre sur lequel le texte s'alignera (si char est utilis dans align) Nombre Nombre de pixels de retrait du texte
Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte sous forme de code source Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Df d'une colonne d'un tableau Largeur des colonnes dfinie pas la balise col Indique le nombre de colonnes sur lesquelles s'appliqueront les proprits de la balise col Dfinit l'alignement de la colonne
"titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" * I.E 3.0 "100" | "10%" "2"
"left" | "center" | "right" | "justify" | "char"
"a" "10" "top" | "middle" | "bottom" | "baseline"
"Description" "pargr1" "titre1" "font-size: 12 pt" * I.E 3.0 "100" | "10%" "2"
"left" | "center" | "right" | "justify" | "char"
"a" "10"
HTML
19
D. Mailliet
MIAGE 2 me anne
<COMMENT> <DD>
<DEL> <DFN>
<DIR>
<DIV> <DL>
Alignement Dfinit l'alignement vertical de la colonne vertical (respectivement en haut, au milieu, en bas, ligne de base) title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) style Un style Attache un style spcifique la balise N O Commentaire N F Dfinition d'un terme title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) style Un style Attache un style spcifique la balise on,,,() une fonction voir Balise de script simple N O Fourni des infos sur un document N O Texte sous forme logique title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) style Un style Attache un style spcifique la balise on,,,() une fonction voir Balise de script simple N O Liste plusieurs dimensions name Texte Nom de la division align Alignement Alignement du texte (gauche, centr, droite) title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une Attache une classe la balise (un style classe dfini dans une feuille de style) style Un style Attache un style spcifique la balise onAfterUpdate Appel une Balise de script fonction onBeforeUpdate Appel une Balise de script fonction on,,,() une fonction voir Balise de script simple O O Structuration d'objets quelconques O O Structure d'un glossaire compact Indique qu'une liste doit tre lgrement espace pour tre plus compacte title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une Attache une classe la balise (un style HTML 20
VAlign
"top" | "middle" | "bottom" | "baseline"
"Description" "pargr1" "titre1" "font-size: 12 pt" * I.E 3.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Division" "left" | "center" | "right" "Description" "pargr1" "titre1" "font-size: 12 pt" "fonction()" "fonction()" onClick="fonction()" HTML 3.0 HTML 2.0
"Description" "pargr1" "titre1" D. Mailliet
MIAGE 2 me anne
<DT>
style on,,,() N title id class style on,,,() N O N O face size
classe Un style une fonction F Texte Nom d'une ID Nom d'une classe Un style une fonction O N O O Police Chiffre de 1 7 pouvant tre prcd de - ou +
<EM> <EMBED> <FIELDSET> <FONT>
title id class style on,,,() O onBlur
Texte Nom d'une ID Nom d'une classe Un style une fonction O
<FORM>
onFocus onScroll on,,,() <FRAME> O <FRAMESET> O <H1> O title id class style on,,,() O O O O O
une fonction N O O Texte Nom d'une ID Nom d'une classe Un style une fonction O O O O O
<H2> <H3> <H4> <H5> <H6>
dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple lment d'un glossaire Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Emphase (italique) Insertion d'applications multimdia Regroupement de zones dans les formulaires Dfinition du texte Police de caractre utilise pour le texte Taille du texte. Plus la valeur sera grande plus la taille du texte sera leve. Si vous utilisez un - ou un +, cela voudra dire que le texte devra tre tant et tant plus grand ou plus petit par rapport la taille de texte par dfaut du navigateur (3 sur PC et 2 sur Macintosh) ; 7 est la taille maximale Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Dbut du formulaire Lorsque le contrle perd le focus (vous cliquez ct aprs l'avoir slectionn). Lorsque le contrle reoit le focus Lorsque vous scrollez dans le contrle voir Balise de script simple Structure d'un cadre (frame) Fichier d'index pour les cadres (frame) Titre de niveau 1 Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 6
"font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 N.N 2.0 HTML 2.0 HTML 2.0 "Arial" "2" | "-1"
"Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0
onClick="fonction()" N.N 2.0 N.N 2.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 HTML 2.0 HTML 2.0 HTML 2.0 HTML 2.0
HTML
21
D. Mailliet
MIAGE 2 me anne
idem pour tous les Hi <HEAD> <HR> N O align F N Alignement (gauche, centr, droite) Couleur hexadcimale RRVVBB ou nom de la couleur Hauteur (pixels) Largeur (pixels ou %) Texte Nom d'une ID Nom d'une classe Un style une fonction F O Texte Nom d'une ID Nom d'une classe Un style une fonction O Nom En-tte d'un fichier HTML Filet horizontal (sparation) Alignement de la ligne HTML 2.0 HTML 2.0 "left" | "center" | "right" "#FF0000" | "red"
color
Couleur de la ligne
noshade size width title id class style on,,,() N N title id class style on,,,() O name target scrolling src Heigh Width O O N O N title id class style on,,,() N HTML
Pas d'ombrage (ligne pleine) Hauteur de la ligne Largeur de la ligne (par dfaut 100%) Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Structure externe d'une page HTML Texte en italique Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Dfinition d'un cadre local Le nom de la frame.
"2" "100%" "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" * I.E 3.0 name="nom de la frame" target="target" scrolling="auto, no, yes" src="fichier" Heigh=250 width="100%" HTML 2.0 HTML 2.0 HTML 2.0 HTML 2.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" * I.E 3.0 D. Mailliet
<HTML> <I>
<IFRAME>
<IMG> <INPUT> <INS> <ISINDEX> <KBD>
<LABEL>
Nom la destination Dans l'ordre : automatique (les barres de dfilement apparaissent si ncessaire), jamais de dfilement, toujours une barre de dfilement prsente. Le nom de la page qui se charge dans cette frame Hauteur (pixels) Largeur N Insertion d'image N Zone de saisie dans un formulaire O Fourni des infos sur un document N Df. d'un fichier de recherche (script CGI) O Texte de type machine crire Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) Un style Attache un style spcifique la balise une fonction voir Balise de script simple O Extension de la balise FORM 22
MIAGE 2 me anne
<LAYER> <LEGEND> <LI>
O N O type
O O O Type de liste (Respectivement puce sous forme de rond, carr ou cercle) Type de liste (Respectivement sous forme 1, a, A, i, I) Nombre
Dfinition des couches (layers) sous Netscape Lgende de tableau lment d'une liste Type de puce dans une liste de puces
* N.N 4.0 HTML 3.0 HTML 2.0 "disc" | "square" | "circle"
Type d'tiquette dans une liste d'tiquettes (numrique)
"1" | "a" | "A" | "i" | "I"
value
title id class style on,,,() O href
<LINK>
disabled media
Rel Rev Type
<MAP> <MARQUEE>
N O Align Behavior
BgColor
Direction
Height HSpace
Attribut valable uniquement dans une liste numrique (change l'ordre de la liste) Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) Un style Attache un style spcifique la balise une fonction voir Balise de script simple N Lien indpendant du mdia URL Dfinit la base de l'URL. Tous les liens de la page auront la mme base (par exemple "http://www.serveur.com/". Valeur, Identifie la mthode de prsentation la respectivement : mieux adapte la feuille de style l'cran, pour l'imprimante, projection, braille, speech, tout Texte Indique la fin de la source d'un lien et en identifie le type Texte Dfinit la fin de la destination d'un lien et en identifie le type Texte Dfinit le langage qui sera utilis par la feuille de style pour crer les rgles de styles O Structure externe de la zone cliquable O Texte dfilant Alignement (haut, Alignement du texte milieu, bas) Comportement Comportement du dfilement (dfiler, glisser ou alterner) Couleur Couleur de fond (arrire plan du texte) hexadcimale RRVVBB ou nom de la couleur Sens de Sens de dfilement dfilement (gauche ou droite) Hauteur (chiffre ou Hauteur du texte dfilant %) Marge (chiffre) Spcifie une marge en largeur entre la 23
"2"
"Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "http://www.serveur. com/" "screen" | "print" | "projection" | "braille" | "speech" | "all"
"text/css"
N.N 2.0 *I.E 3.0 "top" | " middle" | " bottom" " scroll" | " slide" | " alternate" "#FF00FF" | "red"
"left" | "right"
"100" | "10%" "10" D. Mailliet
HTML
MIAGE 2 me anne
<MENU>
<META>
zone de texte dfilant et les lments autours Loop Nombre Nombre de dfilement (si non prcis, l'infini) onAfterUpdate Appel une fonction Balise de script onBeforeUpda Appel une fonction Balise de script te onBounce Appel une fonction Balise de script onFinish Appel une fonction Balise de script (se produit lorsque le dfilement est finit) onKeyDown Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est enfonce) onKeyPress Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) onKeyUp Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) onStart Appel une fonction Balise de script (se produit lorsque le dfilement commence) ScrollAmount Valeur dfilement Valeur du dfilement : plus le nombre est (chiffre) grand, plus l'cart de dfilement (distance effectue en un dplacement du texte) sera grand (par dfaut 6) ScrollDelay Vitesse dfilement Vitesse de dfilement : plus le nombre (chiffre) est grand, plus le temps entre chaque dplacement de texte sera important (par dfaut 90) Truespeed ? ? VSpace Marge (chiffre) Spcifie une marge en largeur entre la zone de texte dfilant et les lments autours Width Largeur (chiffre ou Largeur du texte dfilant %) title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) style Un style Attache un style spcifique la balise on,,,() une fonction voir Balise de script simple O O Liste de type menu compact Indique qu'une liste doit tre lgrement espace pour tre plus compacte title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) style Un style Attache un style spcifique la balise on,,,() une fonction voir Balise de script simple O N Informations sur la page HTML name Nom Le nom dtermine le type de balise mta (description, langage...) content Texte Ce que contient la balise (dpend du nom de celle-ci) HTTP-Equiv O HTML Nom N Dtermine le type de balise mta Indique le document suivant 24
"1" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "7"
"100"
? "10"
"100" | "10%" "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "keywords" "meta, name, keywords, mots, clefs" "Content-Language" HTML 2.0 D. Mailliet
<NEXTID>
MIAGE 2 me anne
<NOBR>
N title id class style on,,,() N N N O O compact start type
O Texte Nom d'une ID Nom d'une classe Un style une fonction O O O O O Valeur Type de liste (Respectivement sous forme 1, a, A, i, I) Texte Nom d'une ID Nom d'une classe Un style une fonction F Alignement (gauche, centr, droite) Texte Nom d'une ID Nom d'une classe Un style une fonction N O O O Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte
<NOEMBED>
<NOFRAMES>
<NOSCRIPT> <OBJECT> <OL>
Pas de passage la ligne Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Contenu alternatif aux applications multimdia Contenu alternatif aux cadres (frame) Contenu alternatif aux scripts Insertion d'objet (multimdia, applet, ...) Liste ordonne Indique qu'une liste doit tre lgrement espace pour tre plus compacte Indique la valeur laquelle le numrotage de la liste doit commencer Type d'tiquette dans une liste d'tiquettes (numrique)
N.N 1.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" N.N 2.0 N.N 2.0 N.N 2.0 HTML 4.0 HTML 2.0 "2" "1" | "a" | "A" | "i" | "I"
title id class style on,,,() N align title id class style on,,,() O N O N title id class style on,,,() N title
<P>
Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Dbut d'un paragraphe (saut de 2 lignes) Alignement du texte Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Paramtres d'un objet insr Texte prformat Citations longues Texte barr Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte sous forme d'exemple Une description du texte lorsque l'on pointe le curseur dessus
"Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "left" | "center" | "right" "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 HTML 2.0 HTML 4.0 HTML 3.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description"
<PARAM> <PRE> <Q> <S>
<SAMP>
HTML
25
D. Mailliet
MIAGE 2 me anne
id class style on,,,() N N N title id class style on,,,() N N title id class style on,,,() N title id class style on,,,() O N title id class style on,,,() N title id class style on,,,() O Rules
Nom d'une ID Nom d'une classe Un style une fonction O O O Texte Nom d'une ID Nom d'une classe Un style une fonction O O Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction O O Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction O Respectivement : Pas de bordure, HTML
<SCRIPT> <SELECT> <SMALL>
<SPAN> <STRIKE>
<STRONG>
<STYLE> <SUB>
<SUP>
<TABLE>
Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Insertion de script (JavaScript) Dfinition d'une liste de formulaire Police de taille moins importante Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Structuration d'lments dans une ligne Texte barr Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte en gras Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Dfinie les feuilles de style Texte sous forme d'indice Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte sous forme d'exposant Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Structure d'un tableau Spcifie quel ct de la bordure intrieur du tableau doit tre affich 26
"pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" N.N 2.0 HTML 2.0 HTML 3.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 HTML 3.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 "none" | "groups" | "rows" | "cols" | "all" D. Mailliet
MIAGE 2 me anne
bordures horizontale entre tous les groupes de tableaux, bordures horizontale entre toutes les ranges du tableau, bordures partout Name Nom Frame Respectivement : Pas de bordure externe, en haut, en bas, en haut et en bas, du ct gauche, du ct droit, cts gauche et droit, encadrant le tableau, autour du tableau CellSpacing Nombre (en pixels) CellPadding Nombre (en pixels) Border Nombre (en pixels) BorderColor Couleur hexadcimale RRVVBB ou nom de la couleur BorderColorD Couleur ark hexadcimale RRVVBB ou nom de la couleur BorderColorLi Couleur ght hexadcimale RRVVBB ou nom de la couleur background Image bgcolor Couleur hexadcimale RRVVBB ou nom de la couleur Cols Nombre Height Hauteur (en pixel ou %) Width Largeur (en pixel ou %) Align Alignement (respectivement : gauche, centr, droite) onAfterUpdate Appel une fonction onBeforeUpda Appel une fonction te onKeyDown Appel une fonction onKeyPress
Nom du tableau Spcifie quel ct de la bordure extrieur du tableau doit tre affich
"nom" "above" | "below" | "hsides" | "vsides" | "LHS" | "RHS" | "box" | "border"
Marge entre le bord de la cellule et son contenu Marge entre les bords extrieurs du tableau et les cellules qu'il contient Dfinit la largeur de la bordure du tableau Couleur de la bordure du tableau
"2" "2" "2" "#FFFFFF"
Couleur de la bordure fonce du tableau "#FFFFFF"
Couleur de la bordure claire du tableau
"#FFFFFF"
Image d'arrire plan du tableau Couleur de fond du tableau
"fond.jpg" "#FFFFFF"
Dfinit le nombre de colonnes du tableau "3" Hauteur du tableau "100" | "10%" Largeur du tableau Dfinit l'alignement du tableau "100" | "10%" "left" | "center" | "right"
Balise de script Balise de script
"fonction()" "fonction()" "fonction()" "fonction()"
Balise de script (se produit lorsqu'une touche du clavier est enfonce) Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) 27
HTML
D. Mailliet
MIAGE 2 me anne
<TBODY>
<TD>
Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) style Un style Attache un style spcifique la balise on,,,() une fonction voir Balise de script simple N F Regroupement de tableaux BGColor Couleur Couleur de fond du tableau hexadcimale RRVVBB ou nom de la couleur Align Alignement Dfinit l'alignement du tableau (respectivement : haut, bas, gauche, centr, droite) VAlign Alignement Dfinit l'alignement vertical du tableau vertical (haut ou bas) title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) style Un style Attache un style spcifique la balise onKeyDown Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est enfonce) onKeyPress Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) onKeyUp Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) on,,,() une fonction voir Balise de script simple N F Cellule d'un tableau ColSpan Nombre Spcifie le nombre de colonnes recouvertes par une cellule NoWrap Nombre RowSpan Nombre Spcifie le nombre de lignes recouvertes par une cellule VAlign Alignement Alignement vertical du texte dans la (respectivement : cellule en haut, au milieu, en bas, sur la ligne de base) BorderColor Couleur Couleur de la bordure du tableau hexadcimale RRVVBB ou nom de la couleur BorderColorD Couleur Couleur de la bordure fonce du tableau ark hexadcimale RRVVBB ou nom de la couleur BorderColorLi Couleur Couleur de la bordure claire du tableau ght hexadcimale RRVVBB ou nom HTML 28
onKeyUp
"fonction()" "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" I.E 3.0 "#FF0000"
"top" | "bottom" | "left" | "center" | "right"
"top" | "bottom"
"Description" "pargr1" "titre1" "font-size: 12 pt" "fonction()" "fonction()" "fonction()" onClick="fonction()" HTML 3.0 "2" "2" "2" "top" | "middle" | "bottom" | "baseline"
"#FFFFFF"
"#FFFFFF"
"#FFFFFF"
D. Mailliet
MIAGE 2 me anne
de la couleur Image Couleur hexadcimale RRVVBB ou nom de la couleur Height Hauteur (en pixel ou %) Width Largeur (en pixel ou %) Align Alignement (respectivement : gauche, centr, droite) onAfterUpdate Appel une fonction onBeforeUpda Appel une fonction te onKeyDown Appel une fonction background bgcolor onKeyPress onKeyUp title id class style on,,,() <TEXTAREA> N <TFOOT> N BGColor
Hauteur du tableau Largeur du tableau Dfinit l'alignement du tableau
"100" | "10%" "100" | "10%" "left" | "center" | "right"
"fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 I.E 3.0 "#FF0000"
Align
VAlign
title id class style onKeyDown onKeyPress onKeyUp on,,,()

Balise de script (se produit lorsqu'une touche du clavier est enfonce) Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) Un style Attache un style spcifique la balise une fonction voir Balise de script simple O Zone de saisie plusieurs lignes F Regroupement de tableaux Couleur Couleur de fond du tableau hexadcimale RRVVBB ou nom de la couleur Alignement Dfinit l'alignement du tableau (respectivement : haut, bas, gauche, centr, droite) Alignement Dfinit l'alignement vertical du tableau vertical (haut ou bas) Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) Un style Attache un style spcifique la balise Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est enfonce) Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) une fonction voir Balise de script simple 29
"top" | "bottom" | "left" | "center" | "right"
"top" | "bottom"
"Description" "pargr1" "titre1" "font-size: 12 pt" "fonction()" "fonction()" "fonction()" onClick="fonction()" D. Mailliet
HTML
MIAGE 2 me anne
<TH>
N ColSpan NoWrap RowSpan VAlign
F Nombre Nombre Nombre
Cellule d'en-tte d'un tableau Spcifie le nombre de colonnes recouvertes par une cellule
HTML 3.0 "2"
Alignement (respectivement : en haut, au milieu, en bas, sur la ligne de base) BorderColor Couleur hexadcimale RRVVBB ou nom de la couleur BorderColorD Couleur ark hexadcimale RRVVBB ou nom de la couleur BorderColorLi Couleur ght hexadcimale RRVVBB ou nom de la couleur background Image bgcolor Couleur hexadcimale RRVVBB ou nom de la couleur Height Hauteur (en pixel ou %) Width Largeur (en pixel ou %) Align Alignement (respectivement : gauche, centr, droite) onAfterUpdate Appel une fonction onBeforeUpda Appel une fonction te onKeyDown Appel une fonction onKeyPress onKeyUp title id class style on,,,() N BGColor
"2" Spcifie le nombre de lignes recouvertes "2" par une cellule Alignement vertical du texte dans la "top" | "middle" | cellule "bottom" | "baseline"
Couleur de la bordure du tableau
"#FFFFFF"
Couleur de la bordure fonce du tableau "#FFFFFF"
Couleur de la bordure claire du tableau
"#FFFFFF"
Hauteur du tableau Largeur du tableau Dfinit l'alignement du tableau
"100" | "10%" "100" | "10%" "left" | "center" | "right"
"fonction()" "fonction()" "fonction()" "fonction()" "fonction()" "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 "#FF0000"
<THEAD>
Align
Balise de script (se produit lorsqu'une touche du clavier est enfonce) Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) Texte Une description du texte lorsque l'on pointe le curseur dessus Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) Un style Attache un style spcifique la balise une fonction voir Balise de script simple F Regroupement de tableaux Couleur Couleur de fond du tableau hexadcimale RRVVBB ou nom de la couleur Alignement Dfinit l'alignement du tableau 30
"top" | "bottom" | D. Mailliet
HTML
MIAGE 2 me anne
VAlign
<TITLE> <TR>
Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) style Un style Attache un style spcifique la balise onKeyDown Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est enfonce) onKeyPress Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) onKeyUp Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) on,,,() une fonction voir Balise de script simple N O Titre de votre page N F Ligne d'un tableau VAlign Alignement Alignement vertical du texte dans la (respectivement : cellule en haut, au milieu, en bas, sur la ligne de base) BorderColor Couleur Couleur de la bordure du tableau hexadcimale RRVVBB ou nom de la couleur BorderColorD Couleur Couleur de la bordure fonce du tableau ark hexadcimale RRVVBB ou nom de la couleur BorderColorLi Couleur Couleur de la bordure claire du tableau ght hexadcimale RRVVBB ou nom de la couleur bgcolor Couleur Couleur de fond du tableau hexadcimale RRVVBB ou nom de la couleur Align Alignement Dfinit l'alignement du tableau (respectivement : gauche, centr, droite) onKeyDown Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est enfonce) onKeyPress Appel une fonction Balise de script (se produit lorsqu'on tape une touche du clavier) onKeyUp Appel une fonction Balise de script (se produit lorsqu'une touche du clavier est leve) title Texte Une description du texte lorsque l'on pointe le curseur dessus id Nom d'une ID Attache une ID la balise (un style dfini dans une feuille de style) class Nom d'une classe Attache une classe la balise (un style dfini dans une feuille de style) HTML 31
title
(respectivement : haut, bas, gauche, centr, droite) Alignement vertical (haut ou bas) Texte
"left" | "center" | "right"
Dfinit l'alignement vertical du tableau
"top" | "bottom"
"Description" "pargr1" "titre1" "font-size: 12 pt" "fonction()" "fonction()" "fonction()" onClick="fonction()" HTML 2.0 HTML 3.0 "top" | "middle" | "bottom" | "baseline"
"#FFFFFF"
"#FFFFFF"
"#FFFFFF"
"#FFFFFF"
"left" | "center" | "right"
"fonction()" "fonction()" "fonction()" "Description" "pargr1" "titre1"
D. Mailliet
MIAGE 2 me anne
<TT>
style on,,,() N title id class style on,,,() N title id class style on,,,() N type
Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction O Type de liste (Respectivement sous forme 1, a, A, i, I) Texte Nom d'une ID Nom d'une classe Un style une fonction O Texte Nom d'une ID Nom d'une classe Un style une fonction N O Texte Nom d'une ID Nom d'une classe Un style une fonction
<U>
<UL>
Attache un style spcifique la balise voir Balise de script simple Texte de type machine crire Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte soulign Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Liste puces Type d'tiquette dans une liste d'tiquettes (numrique)
"font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 3.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "1" | "a" | "A" | "i" | "I"
title id class style on,,,() N title id class style on,,,() N O title id class style on,,,()
<VAR>
<WBR> <XMP>
Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Texte sous forme de variable Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple Dsactive la balise <NOBR> Texte sous forme d'exemple Une description du texte lorsque l'on pointe le curseur dessus Attache une ID la balise (un style dfini dans une feuille de style) Attache une classe la balise (un style dfini dans une feuille de style) Attache un style spcifique la balise voir Balise de script simple
"Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" N.N 1.0 HTML 2.0 "Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()"
HTML
32
D. Mailliet
MIAGE 2 me anne
F.
Du style dans le texte
1. Les titres Il existe 6 niveaux de titre en HTML, allant de <H1> <H6>, <H1> tant le titre le plus important. Leur affichage dpend directement du navigateur que vous utilisez et des polices de caractre choisies. Dans tous les cas, le texte entre ces balises est plac sur une nouvelle ligne. Voici une exemple de code : s'affiche ainsi (dans le navigateur)
<H1>Mon titre en H1</H1> <H2>Mon titre en H2</H2> <H3>Mon titre en H3</H3> <H4>Mon titre en H4</H4> <H5>Mon titre en H5</H5> <H6>Mon titre en H6</H6> 2. Les diffrents styles de caractres
Mon titre en H1
Mon titre en H2
Mon titre en H3
Mon titre en H4 Mon titre en H5
Mon titre en H6
Pour appliquer un style un mot ou un morceau de phrase, il suffit d'encadrer le ou les mots des balises qui correspondent au style dsir. On peut aussi combiner les styles. Voici une exemple de code : <B> Voici du gras </B> <i> Voici de l'italique </i> <TT> voici du texte en police monospace </TT> <U> voici du texte soulign </U> STRIKE> voici du texte barr </STRIKE> ou <S> voici du texte barr </S> s'affiche ainsi (dans le navigateur) Voici du gras Voici de l'italique voici du texte en police monospace voici du texte soulign voici du texte barr
Pour mler les style, il vous suffit d'ajouter les balises les unes la suite des autres, sans oublier qu'il faudra toutes les fermer : <B><I><U>Voici un exemple de texte</I> partiellement en italique, en gras </B>et soulign</U> s'affiche : Voici un exemple de texte partiellement en italique, en gras et soulign 3. Styles logiques Au lieu de dfinir physiquement le style de caractres, il est souvent prfrable de lui donner une dfinition logique plus facilement modifiable grace aux feuilles de styles
HTML
33
D. Mailliet
MIAGE 2 me anne
Voici une exemple de code : <EM> Mise en vidence simple </EM> <STRONG>Plus d'emphase</STRONG>< <CITE> Pour faire une citation </CITE> <SAMP>Le rsultat d'un programme</SAMP> <VAR> ceci est une variable </VAR> <CODE>Du code</CODE> <KBD>Une touche du clavier</KBD> <DFN>Une dfinition</DFN> <ADDRESS>Une adresse</ADDRESS>
s'affiche ainsi (dans le navigateur) Mise en vidence simple Plus d'emphase Pour faire une citation Le rsultat d'un programme ceci est une variable Du code Une touche du clavier Une dfinition
Une adresse
G.
Formater le texte
1. Les retours la ligne : <br> ou <p> Le HTML est insensible aux espaces multiples ainsi quaux passages la ligne. Voici une exemple de code : Votre texte<BR>avec un retour la ligne simple Votre texte<P>avec un retour la ligne et ajout d'une ligne vierge. s'affiche ainsi (dans le navigateur) Votre texte avec un retour la ligne simple. Votre texte avec un retour la ligne et une ligne vierge
2. Aligner le texte En HTML, vous pouvez choisir d'aligner vos paragraphes de texte gauche (par dfaut), au centre ou droite. Il existe trois solutions, aucune ne permettant cependant de justifier le texte. - <P align=left / center / right>Texte</P> : Oui, il s'agit bien de la mme balise que pour l'ajout d'un retour la ligne, laquelle on adjoint un attribut, celui de l'alignement (respectivement gauche / centre / droite). A noter aussi, dans cette utilisation de la balise <P>, il vous faut utiliser la balise de fermeture pour signaler la fin de l'alignement. Ex. : <P align=center>Votre paragraphe est au centre</P> s'affiche ainsi : Votre paragraphe est au centre - <CENTER>Texte</CENTER> : C'est une balise Nestcape, aujourd'hui reconnue par la majorit des navigateurs Internet. Elle centre le paragraphe entre ces balises. Ex. : <CENTER>Votree paragraphe est au centre</CENTER> s'affiche : Votre paragraphe est au centre - <DIV align=left / center / right>Texte, image, tableau</DIV> : cette balise permet d'aligner en mme temps plusieurs type de donnes, qu'il s'agisse de texte, d'images ou encore de tableaux. Son fonctionnement est similaire a celui de <P align =...> 3. Mettre du texte en retrait :
<BLOCKQUOTE>...</BLOCKQUOTE>
HTML
34
D. Mailliet
MIAGE 2 me anne
A l'origine, cet lment devait permettre de diffrencier un paragraphe de citation du reste du texte, en affichant un retrait gauche. Mais la majorit des gens utilisent simplement cette balise pour le retrait, sans que le contenu soit forcment une citation. Pour augmenter le retrait, multipliez les blockquote. Ex. : <BLOCKQUOTE><BLOCKQUOTE>Texte avec deux retraits</BLOCKQUOTE></BLOCKQUOTE> s'affiche ainsi : Texte avec deux retraits 4. <PRE>.....</PRE> Le texte que vous saisissez entre ces balises sera affich tel que vous l'avez entr, c'est--dire avec les espaces et les retours la lignes. Ex. : <PRE> Voici un formate</PRE> s'affiche ainsi : Voici un formate 5. Csure ou pas de csure - Interdire la csure : <NOBR>Phrase de texte</NOBR> - Le navigateur ne pourra alors pas faire de csure ou de retour automatique la ligne dans le texte encadr par ces balises. Si besoin est, il ajoutera des ascenceurs horizontaux pour que le lecteur puisse afficher le reste de la ligne. - Programmer une csure : <WBR>Texte</WBR> - Si la portion de texte pour laquelle vous avez interdit les retours automatiques est longue, il est judicieux de placer cet lment pour permettre au navigateur, si besoin est, d'utiliser la csure programme pour un retour la ligne. 6. <HR> Pour arer vos textes, il peut tre judicieux de sparer les parties par des traits horizontaux. Cet lment HTML ne possde pas de balise de fin, puisque le trait s'affiche sur une nouvelle ligne. Attribbut align = left / center (dfaut) / right width = pixels / pourcentage height = pixels noshade signification stipule l'alignement du trait. spcifie la largeur du trait, soit en pixels, soit en pourcentage de la taille de la fentre. hauteur ou paisseur du trait en pixels. efface l'effet d'ombrage affich par dfaut dans le navigateur. Les traits de sparation : texte pretexte pre Le texte prformat :
7. Les caractres spciaux Dans un fichier Html, on ne peut mettre que du code ascii standard, certains caractres doivent tre remplac par un code spcial : celui-ci commence par un & et se termine par un ; .
HTML
35
D. Mailliet
MIAGE 2 me anne
Lettre
Code à á â ä ã å æ ç è é ê ë ì í î ï
Lettre
Code ñ ò ó ô õ ö ø ù ú û ü ý ÿ ð þ
Lettre
Code À Á Â Ä Ã Å &Aelig; Ç È É Ê Ë Ì Í Î Ï
Lettre
Code Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý &Yuml; Ð Þ
Lettre < > " &
Code < > " « » © ® & ¥ ¢ £ ß
Lettre
Code
° § ¶ ± ¹ ² ³ ½ ¼ ¾ ·
8. Indice et exposant Dans vos formules mathmatiques ou chimiques, il se peut que vous ayez besoin de mettre des caractres en indice ou en exposant. + indice : H<SUB>2</SUB>O : H2O + Exposant : 10<SUP>3</SUP> : 10 3
H.
Afficher des images
1. Les formats de fichiers graphiques Il n'y a que deux formats qui soient reconnues par la plupart des navigateurs : le GIF et le JPG. le format GIF : particulirement l'aise avec les aplats de couleurs (dessins), ce format permet des fichiers de faible encombrement et permet l'entrelacement (affichage progressif par bandes) et la transparence ainsi que les annimations. le format JPG permet de varier le taux de compression et donc de mieux adapter le rapport taille / qualit de l'image. Ce format est recommand pour les photos et en gnral les images comportant des dgrads de couleurs. Il existe d'autres formats, mais il faut alors que votre visiteur ait ajout son navigateur les pluggins ncessaires (petits programmes additionnels). 2. Affichage simple d'une image
Le code de base est des plus simples : <IMG SRC="xxx" /> Cet lment ne comporte pas de balise de fin. xxx reprsente lURL du fichier image. Cet URL peut videmment tre un chemin relatif local. Une bonne ide consiste crer un rpertoire pour stocker les images.
HTML
36
D. Mailliet
MIAGE 2 me anne
3. Attribbut width="pixels" height="pixels" alt="texte descriptif"
Les attributs de <IMG> signification indique la largeur de l'image afficher indique la hauteur de l'image afficher quelques mots qui s'affichent avant le chargement de l'image, ou en cas d'impossibilit de charger le fichier alignement de l'image sur la page par dfaut, le navigateur affiche un cadre de 1 pixel d'paisseur autour de l'image. 0 signifie qu'il n'y a pas de cadre. spcifie un espace vierge en pixels de chaque ct de l'image spcifie un espace vierge en pixels en haut et en bas de l'image spcifie un fichier en basse rsolution de l'image charger. Si votre fichier graphique est lourd, utiliser cet attribut pour faire patienter vos visiteurs avec une image en basse rsolution. Cette image doit avoir les mmes dimensions que l'image finale.
align="left / center / right" border="pixel" vspace="pixels" hspace="pixels" lowsrc="fichierbis.jpg"
Voici un exemple de code reprenant tous ces attributs : <IMG SRC="../../images/fic1.gif" lowsrc="../../images/fic2.jpg" height="125" width="125" alt="exemple" border="0" align=center vspace=10 hspace=10> Pendant son chargement, il affiche le texte "exemple", puis l'image en basse rsolution "fic2.jpg". Sa taille est de 125 x 125 et elle est aligne au centre. Elle ne possde pas de bordure et un espace de 10 pixels l'entoure compltement. 4. Une image pour le fond de votre page Nous le verrons plus tard, vous pouvez spcifier la couleur du fond de votre page, celle du texte, et des liens visits. Mais nous allons voir maintenant comment charger une image comme fond de page. Le navigateur rpte cette image pour "remplir" entirement le fond de la fentre ouverte. Un conseil, prenez un fichier trs lger et dont les motifs ne nuiront pas la lecture de vos documents. Il s'agit en fait d'un attribut de la balise de dbut <BODY background="fichier.jpg"> N'oubliez pas de fournir le chemin du fichier si celui-ci ne se trouve pas dans le mme dossier/rpertoire que le fichier HTML.
I.
Les Liens HyperTextes
Toute la puissance d'Internet rside sans doute dans sa facult relier les sites et les documents entre eux, grce aux liens hypertextes. 1. Crer un lien hypertexte - <A> Un lien HTML possde toujours deux extrmits : le dbut (le pointeur, ou le lien) et la fin (la cible). Le dbut correspond au texte (ou image) qui pointe vers un autre lment. Souvent, il s'agit du texte soulign et de couleur diffrente au-dessus duquel le curseur de la souris se transforme. Pour une image, si celle-ci ne possde pas de cadre, seule le changement de forme du curseur indique qu'il s'agit d'un lien. La fin d'un lien est le fichier qui s'affiche lorsque le lien a t cliqu. Il peut s'agir d'un fichier HTML, d'une partie du mme fichier (voir la section suivante sur les ancres), d'une image, de vido ou de son. Ce document peut se trouver sur le mme site (on utilise alors une adresse relative. Ex : ../images/fichier.html) ou sur un autre site (on utilise alors une adresse absolue. Ex. : http://www.monsite.com/fichier.html). La mise en oeuvre d'un lien hypertexte est trs simple : <A HREF="adresse_document_vis.html">Lien hypertexte</A> Il vous suffit d'indiquer l'adresse (relative ou absolue) du fichier qui devra se charger quand le texte sera cliqu.
HTML
37
D. Mailliet
MIAGE 2 me anne
2. Utiliser les ancres - <A name="..."> Grce aux ancres, il est possible de spcifier une section de texte, l'intrieur d'un document HTML, qui devra tre affiche. Pour tre plus clair, imaginons que nous ayons un document contenant des posies, dont l'une des sections, disons la partie 2, concerne les oeuvres de Baudelaire. Si dans un sommaire nous faisons rfrence cette partie, au milieu de beaucoup d'autres. Nos visiteurs, intrsss particulirement par Baudelaire et non par les autres, pourrait grce un lien aller directement cette partie. Il nous faut pour cela construire dans le document contenant les posies, un marqueur invisible identifiant la partie concernant Baudelaire : a) Insrer une ancre A l'endroit que vous souhaitez identifier, placez la balise suivante : <A name="partie2">II- La posie de Baudelaire</A> Le nom que vous donnez une ancre doit tre unique l'intrieur d'un mme document HTML. dans le sommaire, un lien pointant vers le fichier, et plus prcisement, l'intrieur de ce fichier, vers l'ancre identifiant cette partie. b) Pointer vers une ancre Lorsque vous construisez votre lien vers le fichier poesie.html (c'est un exemple!), il vous suffit d'ajouter le nom de l'ancre la suite du nom du fichier. Comme suit : <A HREF="poesie.html#partie2">Baudelaire et le Mal de Vivre</A> N'oubliez surtout pas le signe dise (#) entre le nom de fichier et celui de l'ancre, car c'est lui qui indique au navigateur de chercher l'ancre "partie2" dans le fichier "poesie.html". Vous pouvez aussi faire rfrence une ancre situe dans un mme fichier : <A HREF="#partie2">Baudelaire</A> Voil. Vous pouvez dsormais relier vos documents entre eux. Faites des essais, le plus dur tant d'tre trs rigoureux dans le chemin que l'on fournit.
J.
Les Listes
Il est parfois utile de faire appel une liste dont la prsentation sera plus parlante qu'une longue numration. Le HTML a prvu un certain nombre de type de listes. 1. Listes puces et listes numrotes Chaque liste est encadre des balises indiquant le style de la liste : <UL> pour les listes puces et <OL> pour les listes numrotes. Chaque lment de la liste est prcd de la balise <LI> (pas de balise de fin) et sera prsent avec un retour la ligne simple et une puce le prcdant. a) Code HTML Les listes puces - <UL> Prsentation dans un navigateur
<UL> Mon premier lment de liste <LI>Mon premier lment de liste Mon deuxime lment de liste <LI>Mon deuxime lment de liste </UL> Nous pouvons nanmoins agir sur la forme de la puce en ajoutant l'attribut type= type="disc (dfaut) / circle /square" - circle affiche des puces en forme de cercle vid et square des carrs. Voici un exemple : <UL type="square"> <LI>Mon premier lment de liste <LI>Mon deuxime lment de liste </UL> b) Les listes numrotes - <OL> Elles se construisent de la mme manire que les listes puces, si ce n'est que les puces sont remplaces par de nombres.
HTML
38
D. Mailliet
MIAGE 2 me anne
Code HTML
Prsentation dans un navigateur
<OL> 1. Mon premier lment de liste <LI>Mon premier lment de liste 2. Mon deuxime lment de liste <LI>Mon deuxime lment de liste </OL> Il xiste deux attributs pour les listes numrotes : le premier permet de choisir le type de numrotation utilis, et le second de spcifier un nombre de dpart de la liste. type="A / a / I / i / 1 (dfaut) A - chaque lment de la liste sera prcd d'une lettre majuscule en guise de numrotation a - numrotation par des lettres minuscules I - numrotation par capitales romaines i - numrotation par minuscules romaines 1 - numrotation par chiffres arabes, option par dfaut si l'attribut "type" n'est pas spcifi start=nombre Cette option peut s'avrer utile si vous dcidez de partager une liste en plusieurs colonnes d'un tableau. Le nombre spcifi pour start correspond au numro (ou la lettre) qui sera attribu au premier lment de la liste. Exemple de code : <OL type="i" start=6> <LI>Mon premier lment de liste <LI>Mon deuxime lment de liste </OL> 2. Les listes descriptives - <DL> Les listes descriptives se diffrencient des listes puces et des listes numrotes par le fait que les lments ne sont pas numrotes mais regroups dans des rubriques ou parties. La liste complte est encadre par les balises <DL> et </DL>. Chaque titre de rubrique est prcd par la balise <DT> (pas de balise de fin) et chaque lment de rubrique et prcd de <DD> (pas de balise de fin). Code HTML <DL> <DT>Ma premire rubrique <DD>Mon premier lment de premire rubrique <DD>Mon deuxime lment de premire rubrique <DT>Ma deuxime rubrique <DD>Mon premier lment de premire rubrique <DD>Mon deuxime lment de premire rubrique </DL> 3. Les listes <DIR> et <MENU> Prsentation dans un navigateur Ma premire rubrique Mon premier lment de premire rubrique Mon deuxime lment de premire rubrique Ma deuxime rubrique Mon premier lment de deuxime rubrique Mon deuxime lment de deuxime rubrique
Ces deux types de listes (qui disparaissent dans le HTML 4) sont trs similaires la liste puces. Seul le rendu de ces listes est diffrent (ce rendu diffre mme selon le navigateur que vous utilisez). Je me contenterai donc de vous donner deux exemples de codes : Liste Menu <MENU> <LI>Mon premier lment de liste <LI>Mon deuxime lment de liste </MENU>
Liste Dir (rpertoire ou listing) <DIR> <LI>Mon premier lment de liste <LI>Mon deuxime lment de liste </DIR> 39 D. Mailliet
HTML
MIAGE 2 me anne
4. Mler les listes Pour bien marquer les diffrentes parties de ce sommaire, vous pouvez "imbriquer" diffrentes listes, et mme des listes de types diffrents. Voici un exemple : <OL type="I"> <LI>Les dbuts de la posie <UL> <LI>Le Moyen-Age <LI>La Renaissance </UL> <LI>Les potes les plus connus <UL> <LI>Baudelaire <LI>Verlaine </UL> </OL>
K.
Couleurs et Polices
1. Dfinition des couleurs en HMTL Il y a deux possibilits en HTML pour dfinir une couleur : l'utilisation des 16 couleurs standards (hritage des premiers crans VGA sous Windows) l'utilisation de codes hexadcimaux a) Les couleurs standard
Elles sont donc au nombre de 16, et sont reconnues par tous les systmes. En voici la liste :
Aqua gray navy silver
black green olive teal
blue lime purple white
fuschia maroon red yellow
Leur emploi est simple, comme nous le verrons ultrieurement. b) Les codes hexadcimaux Pour utiliser ces couleurs converties en code hexadcimaux, il vous faut prcder la valeur par un signe dise (#). Voici quelques exemples de codes hexadcimaux de couleurs : code hexadcimal pour le blanc : FFFFFF code hexadcimal pour le noir : 000000 2. Les lments de la page Nous avons vu dans la partie "Afficher des images" qu'il tait possible de spcifier un fichier graphique qui sert de fond de page. Il est cependant aussi possible d'intervenir sur la couleur d'autres lments de la page, tel que le fond de la page, le texte, les liens, les liens visits ou encore le lien cliqu. Tout ceci se modifie en ajoutant des attributs la balise <BODY>. Les attributs de <BODY> :
HTML
40
D. Mailliet
MIAGE 2 me anne
attribut bgcolor= "couleur / code hexadcimal" text="couleur / code hexadcimal" link= "couleur / code hexadcimal" vlink= "couleur / code hexadcimal" alink= "couleur / code hexadcimal" Voici un exemple de code :
signification spcifie la couleur du fond de page. spcifie la couleur par dfaut pour tout le texte du document. spcifie la couleur des liens hypertextes et du cadre des images agissant comme des liens hypertextes. spcifie la couleur des liens visits dans le document. spcifie la couleur du lien au moment o il est cliqu (bouton de la souris en bas).
<BODY bgcolor="#000000" text="white" link="blue" vlink="yellow"> Le fond de page sera noir, le texte blanc, les liens en bleu et les liens visits seront jaunes.
Note : Lorsque vous spcifiez une couleur par son code hexadcimal, n'oubliez pas le signe dise (#), sans lequel votre code ne sera pas reconnu. 3. attribut face="nom de la police1, nom de la police2, etc" size=valeur absolue / valeur relative Les polices de caractres : La balise <FONT> signification spcifie une liste de polices de caractre par ordre de prfrence. Si la police n'est pas prsente dans le systme de votre visiteur, le navigateur cherche la suivante et ainsi de suite. Si aucune n'est prsente, il affiche le texte dans la police de caractre par dfaut. spcifie la taille des caractres. Deux mthodes coxistent : - la valeur absolue : les tailles vont de 1 7, 3 tant la taille normale par dfaut. On spcifie alors la taille par size=5, ce qui a pour effet d'agrandir de deux tailles les caractres ainsi encods. - la valeur relative : 3 tant la taille standard, on spcifie alors size=+2, ce qui a le mme effet que dans l'exemple prcdent. spcifie la couleur du texte encods.
color="couleur standard / code hexadcimal" Voici un exemple de code :
<FONT face="Helvetica, Times" size=+2 color="#AE3F1A">Mon texte special</FONT> Ce qui s'affiche ainsi : Mon texte special a) Changer la taille par dfaut Il est possible de changer la taille par dfaut du texte. On utilise la balise <BASEFONT> (sans balise de fin). Place un endroit quelconque, elle stipule une taille de caractre par une valeur absolue ou relative (voir plus haut) tout le texte qui la suit. Si vous faites appel la balise <FONT> pour modifier la taille d'une portion de texte, la taille normale sera celle spcifie dans <BASEFONT>. Ceci est particulirement important pour utiliser des valeurs relatives. Ne possdant pas de balise de fin, si vous dsirez retrouver la taille par dfaut du HTML (c'est--dire 3 en valeur absolue), il vous faudra disposer une nouvelle balise <BASEFONT> pour l'indiquer. Exemple de code : <BASEFONT size=+2> Le texte qui suit cette balise verra sa taille augmente de deux niveaux.
L.
.
Les Tableaux
HTML
41
D. Mailliet
MIAGE 2 me anne
1. Dfinir un tableau - <TABLE> Les balises <TABLE> et </TABLE> marquent le dbut et la fin d'un tableau. Il est possible d'ajouter un certain nombre d'attribut la balise de dbut pour modifier l'aspect du tableau. Les attributs de <TABLE> : Attributs bgcolor="couleur standard / code hexadcimal" background="fichier graphique" border="pixel" signification spcifie la couleur de fond du tableau. spcifie un fichier image en guise de fond pour le tableau. Les formats GIF et JPG sont reconnus universellement. spcifie l'paisseur en pixels du cadre et des bordures intrieures du tableau ("0" signifie qu'il n'y a pas de bordure, et 1 est la valeur par dfaut). spcifie la couleur du cadre et des bordures intrieures du tableau. spcifie la hauteur en pixels du tableau. spcifie la largeur du tableau, soit en pixels, soit en pourcentage par rapport la taille de la fentre. spcifie l'paisseur des bordures intrieures du tableau spcifie l'espace en pixels entre le contenu des cellules et le bord de la cellule.
bordercolor="couleur standard / code hexadcimal" height="pixels" width="pixels / %" cellpadding="pixels" cellspacing="pixels" Exemple de code :
<TABLE border="0" align="center" bgcolor="gray" width="50%" cellpadding="0" cellspacing="2"> Ici, le tableau n'aura pas de bordure, aura un fond gris, une largeur gale la moiti de celle de la fentre du navigateur. L'paisseur des bordures internes sera nulle et l'espace entre le bord des cellules et leur contenu sera de 2 pixels. 2. Les cellules d'un tableau a) Les titres
Un tableau se lit et se construit de haut en bas, en suivant chaque ligne de gauche droite. - <CAPTION>Titre du tableau</CAPTION> : fournit un titre au tableau. - <TH>Colonne 1</TH> : utilises la place des balises de cellule (voir plus bas), elles permettent de donner un titre une colonne ou une range d'un tableau. Attributs de <TH> : Attributs align="left (dfaut) / center / right" valign="top / middle (dfaut) /bottom" bgcolor="couleur standard / code hexadcimal" background="fichier graphique" height="pixels" width="pixels / %" signification spcifie l'alignement des donnes l'intrieur de la cellule (gauche, centre ou droite). spcifie l'alignement vertical des donnes l'intrieur de la cellule (en haut, au milieu ou en bas). spcifie la couleur de fond de la cellule. spcifie un fichier image en guise de fond pour la cellule. Les formats GIF et JPG sont reconnus universellement. spcifie la hauteur de la cellule de titre. spcifie la largeur de la cellule de titre (% par rapport la largeur totale du tableau).
HTML
42
D. Mailliet
MIAGE 2 me anne
b) Les cellules + Pour crer une nouvelle ligne dans le tableau (y compris pour les titres de colonnes utilisant les balises <TH>) : <TR>vos cellules</TR> Attributs de <TR> : Attributs align="left (dfaut) / center / right" valign="top / middle (dfaut) /bottom" bgcolor="couleur standard / code hexadcimal" background="fichier graphique" signification spcifie l'alignement des donnes l'intrieur des cellules de la range (gauche, centre ou droite). spcifie l'alignement vertical des donnes l'intrieur des cellules de la ligne (en haut, au milieu ou en bas). spcifie la couleur de fond des cellules de la ligne. spcifie un fichier image en guise de fond pour les cellules de la ligne. Les formats GIF et JPG sont reconnus universellement. spcifie la hauteur de la ligne.
height="pixels"
+ Pour crer une cellule : <TD>Le contenu de la cellule (texte, images,...)</TD> Attributs de <TD> : Attributs align="left (dfaut) / center / right" valign="top / middle (dfaut) /bottom" bgcolor="couleur standard / code hexadcimal" background="fichier graphique" height="pixels" width="pixels" colspan="nombre de colonnes" rowspan="nombre de lignes" 3. signification spcifie l'alignement des donnes l'intrieur de la cellule (gauche, centre ou droite). spcifie l'alignement vertical des donnes l'intrieur de la cellule (en haut, au milieu ou en bas). spcifie la couleur de fond de la cellule. spcifie un fichier image en guise de fond pour la cellule. Les formats GIF et JPG sont reconnus universellement. spcifie la hauteur de la cellule. spcifie la largeur de la cellule. spcifie que la cellule occupe plusieurs colonnes (vers la droite). spcifie le nombre de lignes occupes par la cellule (vers le bas).
Exemple de code pour un tableau
<TABLE width=400 border=1 bordercolor="#000000" cellpadding=2 cellspacing=2 bgcolor="gray"> <TR> <TD align=center width=150>cellule 1 de la ligne 1</TD> <TD align=center width=250>cellule 2 de la ligne 1</TD> </TR> <TR> <TD align=center colspan=2 bgcolor="yellow">cellule unique de la ligne 2</TD> </TR> <TR> <TD>cellule 1 de la ligne 3</TD> <TD rowspan=2 bgcolor="red">cellule 2 des lignes 3 et 4</TD> </TR> <TR> <TD>cellule 1 de la ligne 4</TD> </TR> </TABLE>
HTML
43
D. Mailliet
MIAGE 2 me anne
Ce qui devrait apparaitre comme suit : cellule 1 de la ligne 1 cellule 2 de la ligne 1
cellule unique de la ligne 2 cellule 1 de la ligne 3 cellule 2 des lignes 3 et 4 cellule 1 de la ligne 4
M.
Les frames
Les frames sont les cadres crs dans la fentre du navigateur. Chaque cadre reoit un fichier HTML (diffrent). Ce principe est surtout utilis pour des barres de navigations, des hauts de La tendance actuelle veut quon vite de mettre des frames, car la maintenance du site est plus dlicate et les moteurs de recherche accorde des pnalits ces sites. Dans le cas o nous construisons une page contenant n frames, il nous faut au moins n+1 fichiers le fichier <FRAMESET>, celui qui rpartit les cadres dans la fentre 1 fichiers HTML pour le contenu de chaque cadre
1. Le fichier <FRAMESET> Comme un tableau, un fichier frameset se construit en lisant les cadres de haut en bas, et de gauche droite. Mais commenons par un exemple de code simple : <HTML> <HEAD> <TITLE>Mon site</TITLE> </HEAD> <FRAMESET cols="20, *"> <FRAME SRC="fichier1.html" name="colGauche"> <FRAME SRC="fichier2.html" name="colDroite"> <NOFRAMES> Ce site a ete construit avec des frames. Il semble que votre navigateur ne supporte pas ces balises. Voici un lien pour visiter notre site sans frames : <A HREF="fichier2.html">Site sans frames</A> </NOFRAMES> </FRAMESET> </HTML> Le fichier <FRAMESET> est le fichier qui cre et rpartit dans la fentre les diffrents cadres (frames) de notre page. Les balises <FRAMESET> et </FRAMESET> remplacent les balises traditionnelles <BODY> et </BODY>. Ici, nous avons cr deux colonnes, la premire fait 20 pixels de large et la seconde occupe le reste disponible de la fentre du navigateur. Dans le colonne de gauche de 20 pixels de large - son nom tant "colGauche" -, nous chargeons le fichier "fichier1.html" et dans la colonne de gauche - "colGauche" -, nous chargeons le fichier "fichier2.html". Au cas o le navigateur de notre visiteur ne supporterait pas les balises de frames, nous fournissons un contenu alternatif via les balises <NOFRAMES>. Ici, un lien vers fichier2.html. 2. Les attributs pour le fichier <FRAMESET> Les attributs de la balise <FRAMESET> :
HTML
44
D. Mailliet
MIAGE 2 me anne
Attributs cols="pixels / %, pixels / %"
signification cre des colonnes dont la largeur peut tre spcifie en pixels ou en pourcentage de la fentre totale. Les dimensions pour chaque colonne sont spares par des virgules. (on note aussi qu'il est possible d'indiquer le signe "*" pour indiquer que la colonne occupe l'espace restant). cre des cadres horizontaux (lignes). Il n'est pas possible d'utiliser cols et rows dans le mme frameset (voir dans l'exemple en fin de leon). indique l'espace entre les deux cadres. paisseur de la bordure des cadres. couleur de la bordure des cadres (ici, les noms des 16 couleurs standard ne sont pas possibles). paisseur de la bordure entre les cadres.
rows="pixels / %, pixels / %" framespacing="pixels" frameborder="pixels" bordercolor="code hexadcimal" border="pixels"
NOTE IMPORTANTE : si vous dsirez que vos cadres n'aient pas de bordure, il vous faut fixer les trois attributs suivants la valeur de "0" pour que cela fonctionne sous Netscape et Internet Explorer : framespacing, frameborder et border. Certains de ces attributs sont redondants, mais c'est parce qu'ils ne fonctionnent soit que sous Internet Explorer soit sous Netscape. Les attributs des balises <FRAME> : Attributs src="fichier" name="texte" signification indique le fichier initialement charg dans la fentre. spcifie un nom pour la fentre cre. C'est particulirement important car vous ferez appel ce nom lorsque vous voudrez charger un fichier dans ladite fentre.: "parent" "blank" "top" le fichier est charg dans la fentre entire (efface les frames) une nouvelle fentre est ouverte dans votre navigateur pour y charger le fichier. L'ancienne fentre reste ouverte en arrire plan. ouvre le fichier dans une fentre suprieure hirarchiquement (dans le cas o plusieurs fentres du navigateur sont ouvertes). autorise ou non la prsence d'ascenseurs de dfilement pour le cadre. "auto" laisse au navigateur le soin d'afficher des ascenseurs si besoin est (c'est l'option par dfaut si rien n'est spcifi). marges disposes en haut et en bas du cadre. marges disposes de chaque ct du cadre.
-Bien que le nom que vous donnez vos fentres soit libre, il xiste certains noms qui sont rservs en HTML
scrolling="yes / no / auto"
marginheight="pixels" marginwidth="pixels"
3. Des fichiers HTML et des frames En fait, rien ne diffrencie premire vue les fichiers HTML pour un site avec des frames des autres fichiers HTML. La seule diffrence s'observe dans les liens hypertextes : il faut prciser la frame de destination pour l'affichage du fichier charger. Par dfaut, si rien n'est indiqu, le fichier se charge dans le cadre o se trouvait le lien hypertexte. Voici un exemple de code : <A HREF="monExemple.html" target="colDroite">Un exemple de chargement dans une frame</A> En guise de rappel, trois noms rservs vous permettent de sortir des frames : "_top", "_parent", "_blank" ( utiliser avec l'attribut target).
HTML
45
D. Mailliet
MIAGE 2 me anne
4. Exemple de code pour un fichier frameset Nous allons construire trois frames : deux colonnes, dont celle de gauche contenant deux ranges. <HTML> <HEAD> <TITLE>Mon site en frames</TITLE> </HEAD> <FRAMESET cols="150, *" border="5" frameborder="5" bordercolor="#000000"> <FRAMESET rows="50%, 50%"> <FRAME SRC="fichier1.html" name="hautGauche"> <FRAME SRC="fichier2.html" name="basGauche"> </FRAMESET> <FRAME SRC="fichier3.html" name="colDroite"> <NOFRAMES> Votre navigateur ne supporte pas les frames. Voici un acces a <A HREF="fichier3.html">notre site sans frames</A> </NOFRAMES> </FRAMESET> </HTML> Voici deux captures d'cran qui vous permettront de visualiser le rsultat. On note que sous Explorer 3, la couleur et l'paisseur des bordures de cadre ne fonctionnent pas. Capture du rsultat sour Internet Explorer 6 et Mozilla 1.4
N.
Formulaires de saisie
Il permet la saisie d'informations, qui sont retournes au serveur pour traitement. <FORM METHOD=.. ACTION=..>...</FORM> Encadre une section "form". METHOD= [GET | POST] : indique au serveur la mthode a utiliser pour traiter la requte. par defaut, la mthode GET est employe. Cette mthode transcode les reponses du formulaire au format MIME "x-www-form-urlencoded". c'est la plus rapide et la plus pratique pour des rponses courtes. Pour des formulaires de grande taille ou pour assurer une discression, la mthode POST seule permet le transfert, car GET impose une longueur limite des valeurs renvoyes et les informations apparaissent.
HTML
46
D. Mailliet
MIAGE 2 me anne
ACTION="url script" : indique au serveur le script a lancer lors du retour du formulaire. <INPUT NAME="." TYPE="." VALUE="." > Attribbut NAME=nom TYPE=nom_de_type TEXT : champ de saisie de texte SUBMIT IMAGE: signification donne un nom a l'objet, utilis par le serveur. identifie le type d'objet a afficher: C'est le type par defaut. bouton qui dclenche le renvoi du formulaire au serveur comme submit, mais affiche une image dont l'url est donn par SRC="url" . De plus, les coordonnes du clic souris sur l'image sont transmises au serveur. Voir a ce sujet les server-side map bouton qui reinitialise tous les objets de la FORM a leurs valeurs par dfaut. case cocher : permet de saisir un mot de passe ou un code secret; les caractres saisis sont remplacs par des "*" l'cran. n 'apparait pas l 'utilisateur. Sa valeur par defaut est souvent utilise par le script pour identifier le formulaire (un script peut ainsi traiter plusieurs formulaires) Remarque: Cle type est "declass"; il n'a pas t repris par la norme HTML 3. : a une signification diffrente suivant le TYPE de l'INPUT, soit: : Type du bouton definit le texte renvoy au serveur si la case est coche (ex: true, checked, on...) Encadre une liste de choix prdfinis, les OPTIONs SI l'attribut SIZE=n est prsent, la liste aura l'apparence d'une liste ascenseur de n lignes. Sinon, la liste sera une liste "pop-up", dont les options s'affichent lors d'un clic souris. le choix de plusieurs options est posssible (liste ascenseur seulement) Definit une entre dans la liste de choix indique le choix par dfaut dfinit une fenetre de saisie de texte plusieurs lignes. Le texte situ entre les balises de dbut et fin est le texte par dfaut. nombre de ligne de la fenetre nombre de colonnes de la fenetre
RESET CHECKBOX PASSWORD HIDDEN RADIO VALUE=valeur submit, reset checkbox <SELECT NAME="." [SIZE=n [MULTIPLE]]>...</SELECT> MULTIPLE <OPTION [SELECTED]> SELECTED <TEXTAREA NAME="." ROWS=n COLS=n >...</TEXTAREA> ROWS=n COLS=n
Exemple : <form method="GET" action="" > <input name="idform" type="hidden" value=100> <p>votre Nom : <input name="nom" type=text value="toto" > <p>Statut:<select name="statut"> <option value=1 >celibataire <option value=2 >marie </select> <p />une checkbox: <input name="cbox1" type="checkbox" value="true"> <br />une autre: <input name="cbox2" type="checkbox" value="false">
HTML
47
D. Mailliet
MIAGE 2 me anne
<br />une troisime: <input name="cbox3" type="checkbox" value="false"><p /> <input type="radio" name="monaie" checked value="ff"> franc franais <br /> <input type="radio" name="monaie" value="fb"> franc belge <br /> <input type="radio" name="monaie" value="dm"> Deutch Mark <br /> <input type="radio" name="monaie" value="pe"> pesetas espagnole <br /> <input type="radio" name="monaie" value="li"> Lire Italienne <br /> vos remarques :<br /><textarea name="rem" value="" rows="3" cols="56">facultatif</textarea><br /> <p> <input name="send" type="submit" value="Envoyer" > <p> <input name="reset" type="reset" value="defaut"> </form> donne :
HTML
48
D. Mailliet
MIAGE 2 me anne
IV. Javascript
A.
: <SCRIPT LANGAGE="JavaScript"> ... </SCRIPT> Exemple: <html> <body> <SCRIPT LANGAGE="JavaScript"> <!-document.write(bonjour); //--> </SCRIPT> </body> </html> est quivalent <SCRIPT LANGAGE="JavaScript"> <!-document.write(<html> /n); document.write(<body> /n); document.write(bonjour /n); document.write(</body>/n); document.write(</html> //--> </SCRIPT> mais ne prsente aucun intert
Gnralits
B.
Erreur dans un javascript
En Javascript, il y a 2 types d'erreurs : 1. Erreur simple Le script (programme) sexcute de <SCRIPT LANGAGE="JavaScript"> jusqu lapparition de la premire erreur puis rien ne se passe entre la premire erreur et </SCRIPT> 2. ErreurGrave Rien ne s'excute entre <SCRIPT LANGAGE="JavaScript> et </SCRIPT>
C.
Exemple :
Commentaires
Un script javascript se commente comme en C:
<SCRIPT LANGAGE="JavaScript"> <!-// commentaire de fin de ligne /* commentaire sur plusieurs lignes */ //--> </SCRIPT> Tout ce qui se trouve dans un commentaire est ignor. Il est conseill, comme toujours, de commenter largement ses scripts.
D.
Constantes, Variables, types
Le code javascript scrit dans une page Html entre les balises : <SCRIPT LANGAGE="JavaScript"> <!- //--> </SCRIPT>
JS : Javascript
49
D. Mailliet
MIAGE 2 me anne
Ce code est interprt par le navigateur. Les balises  sont l au cas ou le navigateur (trop ancien) ninterprterait pas le javascript et serait interprt par le navigateur comme un commentaire html 1. Variables Le typage des variables est implicite en javascript. Il nest donc pas ncessaire de dclarer leur type au pralable ni mme de les dclarer avant leur utilisation. Le nom des variables est sensible la casse (ie : x != X). Les noms de variables suivent les mmes rgles de nommage que les autres entits javascript. Un nom de variable valide doit commencer par une lettre ou un soulign (_), suivi de lettres, chiffres ou souligns. Une lettre peut tre une des lettres minuscules (a z) ou majuscules (A Z), et les caractres ASCII de 127 255 (0x7f0xff). Exemple . Validit des noms de variables SCRIPT LANGAGE="JavaScript"> var MaVar ; // Dclaration seule var mavar = "Jean"; // dclaration avec affectation initiale MaVar = "Paul"; // affectation document.write(mavar+', '+MaVar); // affiche "Jean, Paul" // 4site = 'pas encore'; // invalide : commence par un nombre _4site = 'pas encore'; // valide : commence par un souligné mas = 'jaune'; // valide : le code ASCII de est 239. document.write( mas ); document.write( _4site ); </SCRIPT> Les variables peuvent tre de type entier (integer), rel (double), chane de caractres (string) , boolen (boolean)., tableau (array), objet (object) Il est possible de convertir une variable en un type primitif grce au cast (comme en C, java ou delphi). Le cast est une conversion de type. Laction de caster (transtyper) consiste convertir une variable dun type en un autre. Exemple : chn= "12"; nbr = parseInt(chn); Quelques fonctions : 2. Constantes Lutilisateur ne peut dfinir des constantes dont la valeur est fixe une fois pour toute ! 3. La valeur sans valeur La valeur spciale null reprsente l'absence de valeur. Une variable avec la valeur NULL n'a pas de valeur. La constante null est sensible la casse. var mavar= null; Par exemple prompt() renvoie null quand lutilisateur appuie sur annuler. 4. oprateurs divers a) Oprateurs dassignement : // chn vaut la chane 12 // nbr vaut le nombre entier 12
Pour laffectation on utilise = (pour la comparaison = =) , *= /=, +=, -=, %= ; .=

JS : Javascript
50
D. Mailliet
MIAGE 2 me anne
a=3 ; x*=y // quivalent x=x*y, b) Oprateurs de comparaison : ,= = (galit), < (infrieur strict), <= (infrieur large), >, >=, != (diffrence) c) Oprateurs affectation conditionnelle Signalons un oprateur trs spcial qui quivaut une structure conditionnelle complexe if then else la diffrence quil renvoie un rsultat de valeur pouvant ne pas tre un boolen : loprateur ternaire. Syntaxe : (condition)?(expression1):(expression2); Si la condition est vrai alors value et renvoie lexpression1 sinon value et renvoie lexpression2. Exemple : nbr = (toto>10)?(toto):(toto%10); Dans cet exemple, la variable nbr prend toto pour valeur si toto est strictement suprieur 10, sinon vaut le reste de la division entire de toto par 10.
E.
Types
1. Gnralits Mme si les variables n'ont pas tre explicitement dclares, javascript n'en conserve pas moins la notion de type, plus exactement la notion de classe et dobjet. Une connaissance de la POO (programmation oriente objet) facilite la comprhension de ce qui va suivre. Nanmoins, en premire approche, mais vraiment en toute premire approche (les puriste vont pousser les haut cris !!), on peut dire voix basse (et de faon peine audible) que, au niveau syntaxe, le paramtre principal de la fonction, au lieu de le mettre derrire le nom de la fonction, on lcrit devant et on met un point comme sparateur. Selon les fonctions, on utilise lune des 3 formes : a) Syntaxe objet Dans un langage de programmation impratif pour obtenir une sous-chaine extraite de la chaine chn entre les rangs deb et fin , on crirait : substring(chn,deb,fin), en javascript, on crit : chn.substring(deb,fin), pour la longueur du mot bonjour , on crirait :length("bonjour"), ici "bonjour".length b) Syntaxe Classe Certaines fonctions ont comme syntaxe celle de la mthode de classe : le nom de la classe (attention la casse) est suivi du nom de la mthode ou de lattribut. a = Math.sqrt(Math.sin(Math.PI / 3)) Que lon peut crire en mettant Math en facteur With (Math){ a=sqrt(sin(PI / 3)) } 0.9306048591020996 c) Syntaxe imprative Contrairement ce qui est crit plus haut, on ncrira pas "12".parseInt(); nbr = parseInt("12"); // nbr vaut le nombre entier 12
2. Boolens C'est le type le plus simple. Un boolen prend les valeurs de TRUE ou FALSE.
JS : Javascript
51
D. Mailliet
MIAGE 2 me anne
a) , && (et), , || (ou), ! (non) 3.
Oprateurs logiques :
Les nombres a) Les entiers:
Les entiers sont de nombres dont la plage dpend des plate-formes, mais reste quivalente la porte du type long en C. On pourra exprimer un entier en dcimal, hexadcimal ou encore en octal. decimal = 10; hexa = 0x0F; octal = 020; b) Les nombres dcimaux: . On peut exprimer ce type sous forme de nombre normal avec un point dcimal, ou en notation scientifique. normal = 0.017; scientifique = 17.0E-3; c) Les oprateurs + (addition), - (soustraction), * (multipli), / (divis), % (modulo), ++ (incrment), --(dcrment). Ces deux derniers peuvent tre pr ou post fixs i=5; i++ ; // i vaut 6 equivalent i+=1 ou encore i=i+1 document.write( i++) ; // affiche 6 et ensuite donne i la valeur 7 document.write( ++i) ; // donne i la valeur 8 et ensuite affiche 8 d) Les constantes mathmatiques Math.PI (avec des majuscules M P I) la valeur de soit 3.141592653589793 e) syntaxe Math.abs(nombre) Math.acos(nombre) Math.asin(nombre) Math.atan(nombre) Math.ceil(nombre) Math.cos(nombre) Math.exp(nombre) floor(nombre) Math.log(nombre) max(nombre1, nombre2) min(nombre1, nombre2) pow(base, exposant) Math.random() round(nombre) Math.sin(angle) Math.sqrt(nombre) Math.tan(nombre) Les fonctions description la valeur absolue d'un nombre l'arc cosinus en radian d'un nombre entre -1 et 1 (0 sinon) l'arc-sinus en radian d'un nombre compris entre -1 et 1 (0 sinon) l'arc tangente en radian d'un nombre entre -pi/2 et pi/2 l'entier le plus proche par valeur suprieure le cosinus d'un angle en radian la valeur exponentielle d'une valeur l'entier le plus proche par valeur infrieure le log de nombre le maximum entre deux nombres le minimum entre deux nombres base puissance exposant une valeur alatoire entre 0 et 1 l'entier le plus proche de la valeur donne en argument le sinus de l'angle donn en radian la racine carre de Math.sqrt(number) la tangente du nombre donn en radian
4. Les chaines: Une chaine est une suite de caractres. Elle peut tre dlimite par des guillements simples ou doubles. titi = "toto"; titi = toto;
JS : Javascript
52
D. Mailliet
MIAGE 2 me anne
document.write( "Je m'appelle " + titi); document.write( 'Je m\'appelle ' + 'titi '); Le premier appel document.write( va afficher je mappelle toto tandis que le deuxime va afficher je mappelle titi .(indpendamment des guillemets ou apostrophes) Les squences d'chappement de javascript: \n: Nouvelle ligne \t: Tabulation \r: Retour chariot \\: Anti slash \: Signe dollar \ : lapostrophe \" : le guillemet a) le + (plus) . document.write( 'Je m+ "appelle "+titi); // va afficher je mappelle toto si la variable titi contient a = "Bonjour " ; a .+= "monde" ; // quivalent a = a + "monde" ; a contient Bonjour monde b) syntaxe text.anchor(nom) chaine.big() chaine.blink() chaine.bold() chane.charAt(index) escape(chaine) chaine.fixed() chaine.fontcolor(couleur) chaine.fontsize(taille) chaine1.indexOf(chaine2,[depuis]) chaine.italics() chaine1.lastIndexOf(chaine2, [depuis]) texte.link(URL) chaine.small() chaine.strike() chaine.sub() chaine.substring(position1, position2) chaine.sup() chaine.toLowerCase() chaine.toUpperCase() 5. Les tableaux: Les fonctions description Cre un signet dans la page HTML positionne le couple de balises BIG (gros caractres) autour du texte positionne le couple de balises BLINK (clignotant) autour du texte positione le couple de balises BOLD (gras) le caractre index de la chane (commenant 0) en caractres ASCII des caractres ISO Latin-1 (& devient %26) positionne le couple de balises TT (fixe) autour du texte la couleur donne la chane de caractres concerne (quivalent &tl;FONT COLOR=couleur>) la taille de police donne la chane de caractres concerne (quivalent &tl;FONT size=taille>) la position de chane2 recherche dans chaine1 partir de la position depuis(-1 si pas trouv) positionne le couple de balises I (italique) autour du texte retourne la dernire occurrence de chaine2 dans chaine1 partir de la position depuis cre un lien hypertexte vers URL partir de texte positionne le couple de balises SMALL (petites lettres) autour du texte positionne le couple de balises STRIKE (biff) autour du texte positionne le couple de balises SUB(indice) autour du texte la chaine de caractres commenant la position1 et finissant la position2 positionne le couple de balises SUP (exposant) autour du texte convertit la chaine concerne en minuscule convertit la chaine concerne en majuscule Loprateur de Concatnation
a) Tableaux simples Un tableau est un type de donnes pouvant contenir plusieurs valeurs, indexes numriquement partir de ZERO.
JS : Javascript
53
D. Mailliet
MIAGE 2 me anne
Il est possible de prciser ou non le nombre dlments var tableau = new Array(4) ; tout comme : var tableau = new Array() ; puis : tableau[0] = "titi"; tableau[1] = "toto!"; tableau[3]="tata"; Remarquons le A majuscule Array Une chane de caractres nest pas un tableau de caractres. jours = new array("Lundi","Mardi","Mercredi","Jeudi", "Vendredi","Samedi","Dimanche"); b) Tableaux associatifs La cl (index) est forcment numrique commenant 0. Lindexation ne peut se faire autrement c) Tableaux multidimentionnels Il sagit de tableaux de tableaux. Exemple : var toto = new Array( new Array(1,2,3), new Array(4,5,6)) ; document.write( toto[1][2]); // affiche 6 ; les indices (cl) commencent 0 ! var tata = new Array(); tata [1]=new Array(1,2,3); tata [2]=new Array(4,5,6) ; // document.write( tata[2][2]);
// affiche 6 ; ici les indices (cl) commencent toujours 0 mais la // ligne 0 nest pas dfinie ni dclare
//document.write( tata[0][0]); // provoque une erreur //var tata[0]=new Array(); // provoque une erreur grave tata[0]=new Array(); // maintenant, dclar mais non dfini document.write( tata[0][0]); // affiche undefined d) fonctions
JS : Javascript
54
D. Mailliet
MIAGE 2 me anne
Mthode concat(valeur,...)
Description concatne des tableaux.
Exemplse var tableau = new Array('un','deux','trois','quatre','cinq'); var tableau2 = new Array('six','sept','huit','neuf','dix'); tableau1.concat('tableau2') var tableau = new Array('push','pop','reverse','shift'); tableau.join(', '); var tableau = new Array('o','ko','Mo','Go','To'); tableau.pop(); var tableau = new Array('0'); tableau.push('1','2','3','4'); var tableau = new Array('0','1','2','3'); tableau.reverse(); var tableau = new Array('fvrier','mars','avril','mai','juin'); tableau.shift(); var tableau = new Array(45,77,20,87,10,32); tableau.slice(1, 2); var tableau = new Array('Marc','Anglique','Edith','Annick','Isabelle'); tableau.sort(); var tableau = new Array('a','1','2','&','\?','f','g'); tableau.splice(1, 4, 'b', 'c', 'd', 'e'); var tableau = new Array('Ceci','est','un','programme','javascript','.') tableau.toString() var tableau = new Array('Mardi','Mercredi','Jeudi','Vendredi','Samedi','Di manche') tableau.unshift('lundi')
join(sparateur) s push(valeur,...)
forme une chane de caractre partir du tableau. supprime et retourne le dernier lment du tableau. ajoute des lments un tableau (NE 4). permute les lments du tableau. dcale les lments du tableau.
reverse() shift()
slice(dbut, fin) sort(fonction_tri)
retourne une partie du tableau. trie les lments du tableau.
splice (dbut, nb_lt__effacer, valeur, ...) toString()
insre, supprime ou remplace des lments du tableau. convertit un tableau en une chane de caractres.
unshift()
ajoute des lments au dbut d'un tableau.
JS : Javascript
55
D. Mailliet
MIAGE 2 me anne
6.
Les dates: a) Fonctions description le jour du mois de la date concerne (entier de 1 31) le jour de la semaine de la date concerne (0=dimanche) l'heure de la journe de la date concerne (0 23) la minute de l'heure de la date concerne (0 59) le mois de la date concerne (0 11) la seconde de la minute de la date concerne (0 59) l'heure dans la valeur numrique correspondante la diffrence (en minutes) entre l'heure courante et l'heure GMT le nombre d'annes coules depuis 1900 le nombre de millisecondes depuis le 01/01/1970 positionne le jour du mois de la date concerne (entier de 1 31) positionne le jour de la semaine de la date concerne (0=dimanche) positionne l'heure de la journe de la date concerne (0 23) positionne la minute de l'heure de la date concerne (0 59) positionne le mois de la date concerne (0 11) positionne la seconde de la minute de la date concerne (0 59) positionne l'heure dans la valeur numrique correspondante positionne le nombre d'annes coules depuis 1900 convertit une date en chane de caractres en suivant les conventions GMT (Mar, 01 Mar 1996 20:00:00 GMT) convertit une date en chane de caractres en suivant les conventions locales (03/01/96 20:00:00) le nombre de secondes coules depuis le 01/01/1970 0h0mn
syntaxe date.getDate() date.getDay() date.getHours() date.getMinutes() date.getMonth() date.getSeconds() date.getTime() date.getTimezoneOffset() date.getYear() Date.parse(chainedate) date.setDate(valeur) date.setDay(valeur) date.setHours(valeur) date.setMinutes(valeur) date.setMonth(valeur) date.setSeconds(valeur) date.setTime(valeur) date.setYear(valeur) chainedate.toGMTString() chainedate.toLocaleString() Date.UTC(an, mois, jour [, h] [, min] [, sec])
F.
Les structures de contrle

1. Conditionnelle
Elles ressemblent fortement celle de C, Java, Javascript. On se contente donc de donner ici une srie dexemples
a) Le Si Syntaxes : if (test1) instructions1 else instructions2 Elseif nexiste pas en javascript, il faut imbriquer les if. else est facultatif les parenthses autour des tests sont obligatoires. Si les instructions sont multiples, il faut les mettre entre accolades {}.
Attention : coller else et if provoque une erreur grave. a = 3; b = 5; if (a > b) document.write( "a est plus grand que b"); else if (a == b) document.write( "a est égal à b"); else document.write( "a est plus petit que b"); dans lexemple ci-dessous, 2 instructions sont excutes si le test est valide, on les met donc entre accolades {} et il ny a pas de clause elseif ni else. if (a > b) {
JS : Javascript
56
D. Mailliet
MIAGE 2 me anne
document.write( "a est plus grand que b"); b = a;
if (a == 5){ document.write( "a égale 5"); document.write( "..."); } else if (a == 6){ document.write( "a égale 6"); document.write( "!!!"); } else document.write( "a ne vaut ni 5 ni 6"); b) Le Cas
switch (i) { case 0: document.write( "i égale 0"); break; case 1: document.write( "i égale 1"); break; case 2: document.write( "i égale 2"); break; } le break est obligatoire,par exemple : i=1; switch (i) { case 0: document.write( "i égale 0"); case 1: document.write( "i égale 1"); case 2: document.write( "i égale 2"); } affiche i gale 1i gale 2 2. Boucles a) Boucle pour
est quivalent if (i == 0) { document.write( "i égale 0"); } if (i == 1) { document.write( "i égale 1"); } if (i == 2) { document.write( "i égale 2"); }
Syntaxe : for (expr1; expr2; expr3) instruction La premire expression (expr1) est value (excute), quoi qu'il arrive au dbut de la boucle. Au dbut de chaque itration, l'expression expr2 est value. Si l'valuation vaut TRUE, la boucle continue et l'instruction est excute. Si l'valuation vaut FALSE, l'excution de la boucle s'arrte. A la fin de chaque itration, l'expression expr3 est value (excute). expr1; expr2; expr3 sont facultatifs
JS : Javascript
57
D. Mailliet
MIAGE 2 me anne
// exemple 1 for (i = 1; i <= 10; i++) { document.write( i); } // exemple 2 for (i = 1;;i++) { if (i > 10) { break; } document.write( i); } // exemple 3 i = 1; for (;;) { // boucle infinie if (i > 10) { break; // rupture de boucle } Les 5 exemples affichent tous 12345678910
} /* exemple 4 : le mme que le 3 mais avec contraction de 2 lignes */ i = 1; for (;;) { if (i > 10) { break; } document.write( i++); } // exemple 5 for (i = 1; i <= 10; document.write(i++)) ; // exemple 6 for (i = 0; i <= 9; document.write( ++i)) ;
document.write( i); i++;
Attention : lexemple 1 est de loin le meilleur ! Il ne faut surtout pas abuser des contractions comme dans les exemples 5 et 6 qui rendent les programmes illisibles et dificilement maintenables b) Pour dans var toto = new Array(1,7,2,6,4,5,8,9); for (var i in toto) document.write(i+" : "+ toto[i]+" , "); Affiche : 0 : 1 , 1 : 7 , 2 : 2 , 3 : 6 , 4 : 4 , 5 : 5 , 6 : 8 , 7 : 9 ,
c) Syntaxe : While (test) instruction ;
Boucle tant que
La boucle nexcute quune seule instruction, pour en excuter plusieurs, il faut les mettre entre accolades { } i = 1; while (i <= 10) document.write( i++); Affiche 12345678910 3. Rupture et continuit de boucle
Break permet de quiter immdiatement une boucle : for (;;) { if (i > 10) { break; } document.write( i++); } continue permet de passer litration suivante sans excuter le reste des instructions : var toto = new Array(1,7,2,6,4,5,8,9); for (var i in toto) { if ( (toto[i] % 2) !=0 ) continue; // vite les valeurs paires document.write( toto[i]+" , "); } Affiche : 2 , 6 , 4 , 8 , On obtient le mme rsultat avec :
JS : Javascript
58
D. Mailliet
MIAGE 2 me anne
var toto = new Array(1,7,2,6,4,5,8,9); for (var i in toto) { if ( (toto[i] % 2) = 0 ) document.write( toto[i]+" , "); }
G.
Syntaxe :
Les fonctions
function nom (arg_1, arg_2, ..., arg_n) { corps de fonction return retval; }
On peut dclarer les fonctions nimporte o dans le programme. Cependant une bonne rgle consiste les dclarer avant de les utiliser (Ne pas suivre lexemple ci-dessous) 1. Passage des arguments par valeur La valeur des paramtres nest pas modifi : <html> <body> <SCRIPT LANGAGE="JavaScript"> <!-c=2; document.write( incr(c,3)); document.write(" , "); document.write( c); Affiche: 5 , 2 Il es prfrable de dclarer les fonctions dans la partie HEAD : <html> <!-<head> <SCRIPT LANGAGE="JavaScript"> c=2; <!-document.write( incr(c,3)); function incr(a,b){ document.write(" , "); a += b; // a = a + b document.write( c); return a ; } // --> // --> </SCRIPT> </SCRIPT> </head> </body> <body> </html> <SCRIPT LANGAGE="JavaScript"> Remarque On aurait pu se contenter de mettre function incr(a,b){ return a+b ;} 2. Passage des arguments par adresse (par variable) function incr(a,b){ a += b; // a = a + b return a ; } // --> </SCRIPT> </body> </html>
Le passage par adresse nexiste pas en javascript 3. Arit variable Javascript dfinit la classe Fonction et les paramtres des fonctions sont rangs dans un tableau arguments et le nombre dlments dans length
JS : Javascript
59
D. Mailliet
MIAGE 2 me anne
<html> <head> <SCRIPT LANGAGE="JavaScript"> <!-function inc(){ if (inc.arguments.length==1) return inc.arguments[0] +1 ; else return inc.arguments[1] + inc.arguments[0]; }// --> </SCRIPT> </head>
<body> <SCRIPT LANGAGE="JavaScript"> <!-c=2; document.write( inc(c,3)+"<br />"); document.write( inc(c)+"<br />"); document.write( c +"<br />"); // --> </SCRIPT> </body> </html>
Remarquons que le transtypage entier chane est automatique. Autre exemple : function somme(){ var res = 0; for (var i = 0; i < somme.arguments.length ; i++) res +=somme.arguments[i] ; return res; }// -->
H. I.
Les procdures Porte des variables
Cest la mme syntaxe que pour les fonctions on ne met pas de ligne return
La porte d'une variable dpend du contexte dans lequel la variable est dfinie. Pour la majorit des variables, la porte concerne la totalit d'un script javascript. Mais, lorsque vous dfinissez une fonction, la porte d'une variable dfinie dans cette fonction est locale la fonction. Par exemple: var a = 1; // porte globale avec ou sans var function test1() { document.write( "test1, a vaut :"+a+"<br />"); } function test2() { a = 2; // porte globale document.write( "test2, a vaut :"+a+"<br />"); } function test3() { var a = 3; // porte locale document.write( "test3, a vaut :"+a+"<br />"); } function test4() { b = 4; // porte globale document.write( "test4, b vaut :"+b+"<br />"); } function test5() { var c = 5; // porte locale document.write( "test5, c vaut :"+c+"<br />"); affiche le message : programme, a vaut :1 test1, a vaut :1 programme, a vaut :1 test2, a vaut :2 programme, a vaut :2
} document.write( "programme, a vaut :"+a+"<br />"); test1(); document.write( "programme, a vaut :"+a+"<br />"); test2(); document.write( "programme, a vaut :"+a+"<br />"); test3(); document.write( "programme, a vaut :"+a+"<br />"); test4(); document.write( "programme, b vaut :"+b+"<br />"); test5(); document.write( "programme, c vaut :"+c+"<br />"); // pas d'affichage jusqu' la fin ==> erreur
JS : Javascript
60
D. Mailliet
MIAGE 2 me anne
test3, a vaut :3 programme, a vaut :2 test4, b vaut :4 programme, b vaut :4 test5, c vaut :5
J.
Classes et Objets
Javascript permet la poo (programmation oriente objet) comme java C++ php ou Delphi Il est possible de dfinir des classes et dinstancier les objets correspondants Cette partie suppose une connaissance des langages orients objet. On ne donnera que la syntaxe sur lexemple trs classique des carrs et rectangles Le constructeur porte le nom de la classe (function et non class) Le mcanisme dhritage nexiste pas en javascript This fait rfrence, dans une classe, lobjet correspondant linstance de cette classe <html> <SCRIPT LANGAGE="JavaScript"> <head> var rect=new rectangle (3,5); SCRIPT LANGAGE="JavaScript"> function rectangle(Long,larg){ // on dfinit ici la classe document.write(rect.Lng); // 3 // dfinitions des fonctions et procdure document.write("<br>"); function perimetre(){ document.write(rect.larg); // 5 return 2*(this.Lng + this.larg) ; document.write("<br>"); } document.write(rect.surf()); // 15 function surface (){ document.write("<br>"); return this.Lng * this.larg ; document.write(rect.perimetre()); // 16 } document.write("<br>"); function double(){ this.Lng *= 2; rect.dble(); this.larg *= 2; } document.write(rect.Lng); // 6 // affectation des attributs document.write("<br>"); this.Lng = Long; document.write(rect.larg); // 10 this.larg = larg; document.write("<br>"); // affectations des mthodes document.write(rect.surf()); // 60 this.surf = surface; document.write("<br>"); this.dble =double; document.write(rect.perimetre()); // 32 this.perimetre=perimetre; document.write("<br>"); } </SCRIPT> </SCRIPT> </head> </body> <body> </html>
K.
Entres/Sorties
1. sorties Pour obtenir un affichage dans le navigateur , on utilise document.write() avec parenthses obligatoires. On peut aussi faire ouvrir une fentre : alert('voil');
JS : Javascript
61
D. Mailliet
MIAGE 2 me anne
2. entres Pour que le JavaScript obtienne des informations de lutilisateur, on peut : Soit rcuprer un lment quelquonque se trouvant dans la page y compris les lments dun formulaire (voir plus loin) Soit faire ouvrir une fentre :
x=prompt('entier=',0); alert(x); dans ce cas, si lutilisateur clique sur : ok, x reoit la valeur contenue dans la ligne, y compris undefined Annuler, x reoit la valeur null
Remarque prompt admet 1 ou 2 paramtres, le deuxime est facultatif et reprsente la valeur affiche louverture de la fentre. En cas dabsence de ce paramtre le mot undefined apparat Soit pour une rponse binaire : alert(confirm("d'accord ?")); confirm renvoie vrai ou faux selon que lutilisateur clique sur ok ou annuler
L.
Fichiers
La lecture et lcriture dans un fichier local ou distant poserait un srieux problme de scurit !!!!! La seule chose quil est possible denregistrer ou de lire sur le disque de lutilisateur, ce sont des Cookies
M.
Inclusion de fichiers
Pour inclure un fichier javascript dans une page html, on ajoute lattribut src suivi de lURL (relative ou absolue) du fichier inclure. Ce fichier ne doit contenir que du code javascript. <Script Language="JavaScript" src="xxx.js"> // description du fichier xxx </script>
N.
Evnements : traitement
Lutilisateur du navigateur dclanche un Evenement en oprant soit un clic sur un bouton, un lien, une option dune liste droulante ou cocher un bouton radio etc.. soit en dplaant la souris ,etc.. Voici les principaux vnements et quelques exemples de balises : Evnement onBlur onClick onChange Se produit lorsque ... un champ de saisie d'un formulaire perd le focus l'utilisateur clique avec la souris l'objet HTML considr l'utilisateur change le contenu d'un objet d'un formulaire HTML JS : Javascript 62 Exemples de balises HTML supportant l'vnement <INPUT> <SELECT> <TEXTAREA><TEXT> <INPUT> <SELECT> <A> <INPUT> <SELECT> <TEXTAREA>
D. Mailliet
MIAGE 2 me anne
onFocus onLoad onMouseOut onMouseOver onReset onSelect onSubmit onUnload
un champ de saisie d'un formulaire prend le focus le document HTML est compltement charg la souris quitte la zone d'un lien hypertexte la souris rentre dans la zone d'un lien hypertexte Appui sur le bouton reset un choix dans un liste est slectionn un formulaire est soumis au serveur HTTP on s'apprte changer de document HTML
<INPUT> <SELECT> <TEXTAREA> <BODY> <A ... > <A ... > <INPUT> <INPUT> <SELECT > <FORM> <BODY>
Lvnement est capt par lobjet sur lequel il sest produit et si le programme indique ce quil faut faire au cas o celui-ci se prsente, le code prvu cet effet seexcute. <html> <head> <TITLE>Question/rponse</TITLE> <SCRIPT LANGAGE="JavaScript"> function reponse() { alert('bonjour ' + document.maforme.leprenom.value); return true } function tst() { alert('bonjour ' + document.maforme.lenom.value); return true } </SCRIPT> </head> <body> <form name="maforme"> Votre nom : <INPUT type="text" name="lenom" value="" onBlur="tst();"> Votre prnom : <INPUT type="text" name="leprenom" value=""> <INPUT type="submit" value="Valider" onclick="reponse();"> </form> </body> </html>
O.
Evnements : simulation
Il est possible de simuler la gnration dun vnement. En principe la mthode qui gnre lvnement porte le mme nom que celle qui la gre mais sans le on , cest dire : Blur() ; focus() ; click(); submit(); etc... Dans lexemple suivant on simule laction de lutilisateur qui consiste placer le focus sur le champ mdp <html> <head> <TITLE>Vrification didentit</TITLE> </head> <body onLoad=window.document.maforme.mdp.focus();> <form name="maforme"> Votre nom : <INPUT type="text" name="lenom" value=""> Votre mot de passe : <INPUT type="password" name="mdp" value=""> <INPUT type="submit" value="Valider" >
JS : Javascript
63
D. Mailliet
MIAGE 2 me anne
</form> </body> </html> Dans les 2 exemples suivants on envoie automatiquement le formulaire ci-dessus On simule lappui sur valider <html> <head> <TITLE>Vrification didentit</TITLE> </head> <body onLoad=window.document.maforme.ok.click();> <form name="maforme"> Votre nom : <INPUT type="text" name="lenom" value="toto"> Votre mot de passe : <INPUT type="password" name="mdp" value="titi"> <INPUT name=ok type="submit" value="Valider" > </form> </body> </html> ou on simule lenvoi du formulaire, les champs napparaissent plus sur la page <html> <head> <TITLE>Vrification didentit</TITLE> </head> <body onLoad=window.document.maforme.submit();> <form name="maforme"> Votre nom : <INPUT type="hidden" name="lenom" value="toto"> Votre mot de passe : <INPUT type="hidden" name="mdp" value="titi"> </form> </body> </html> Remarque : Dun point de vue scurit, ce nest pas une bonne ide que de mettre le mot de passe en clair.
P.
Objets prdfinis
Le schma suivant, que l'on retrouve souvent dans la littrature, illustre la hirarchie des classes JS pour le Navigateur :
window | + --parent, frames, self, top | + --location | + --historique | + --document | + --formulaire (FORM) | | | + --elements (text fields, textarea, checkbox, password | radio, select, button, submit, reset) + --links | + -- URL 1. Exemple trs important : Le programme ci-dessous est une mine de renseignements, il dresse la liste des proprits des objets de la feuille :
JS : Javascript
64
D. Mailliet
MIAGE 2 me anne
<html> <body> <form name="maforme"> Votre nom : <INPUT type="text" name="lenom" value="" onBlur="tst();"> <INPUT type="submit" value="Valider" onclick="reponse();"> </form> <SCRIPT LANGAGE="JavaScript"> <!-function show_props(obj,obj_name){ var result=""; for(var i in eval(obj)) result+= obj_name+"."+i+" = "+eval(obj)[i]+"<br />\n"; return result; } x=prompt("proprits de l'objet : ","window.document"); alert( show_props(x,x)); document.write( show_props(x,x)); // --> </SCRIPT> </body> </html> essayer avec la proposition du prompt window.document , reprer un object et ressayer avec lui par exemple window.document.maforme puis window.document.maforme.lenom puis etc.. Remarque eval("5 + 3") 2. Les tableaux prdfinis Les principaux objets d'une page HTML peuvent tre nomms mais ils sont aussi dfinis par des tableaux que l'on retrouve dans la liste suivante : Array anchors applets arguments elements embeds forms frames history images links mimeTypes options plugins Description comprend toutes les balises <A> qui contiennent un argument NAME comprend toutes les balises <APPLET> du document comprend tous les arguments d'une fonction comprend toutes les balises <FORM> dans l'ordre de leur dfinition comprend toutes les balises <EMBED> dans l'ordre de leur dfinition comprend toutes les balises <FORM> du document comprend toutes les balises <FRAME> contenant un FRAMESET dans l'ordre de leur dfinition comprend tous l'historique du navigateur comprend toutes les balises <IMG> dans l'ordre de leur dfinition comprend tous les liens <AREA HREF="...">, <A HREF=""> et les objets Link crs par la mthode linkwith the link Comprend tous les types MIME supports par le navigateur (helpers ou plug-ins) comprend tous les lments OPTION d'une balise SELECT comprend tous les plug-ins installs sur votre navigateur le formulaire nest l que pour observer ses proprits la fonction eval qui comme son nom lindique value lobjet pass en paramtre exemple :
Ainsi dans le programme suivant :

JS : Javascript
65
D. Mailliet
MIAGE 2 me anne
<html> <head> </head> <body> <form name="calc"> <input type="radio" name="monaie" > franc belge <br /> <input type="radio" name="monaie""> Deutch Mark <br /> <input type="radio" name="monaie" > Lire Italienne <br /> ff : <input type="text" name="franc""> <br /> euros : <input type="text" name="euro"> <br /> <input type="button" value="effacer"> </form> </body> </html> pour accder on a le choix : soit par indexation (la numrotation commence zro !!) : window.document.forms[0].elements[4].value soit par nommage : window.document.calc.euro.value soit par combinaison window.document.calc.elements[4].value 3. Exemple : communication entre frames Lexemple ci dessois montre la hirarchie entre les diffrents documents. Le fichier suivant est le fichier principal et dfinit les frames : <HTML> <HEAD> <TITLE> communication entre frames </TITLE> </HEAD> <FRAMESET rows="20%, 50%" border="5" frameborder="5" bordercolor="#000000"> <FRAME SRC="haut.html" name="haut"> <FRAME SRC="" name="bas"> <NOFRAMES> Votre navigateur ne supporte pas les frames. Voici un acces a <A HREF="fichier3.html">notre site sans frames</A> </NOFRAMES> </FRAMESET> </HTML> ci-dessous le fichier haut.html et ci contre le rsultat : <HTML> <HEAD> <TITLE>Mon site en frames</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-parent.bas.document.writeln('<form>'); parent.bas.document.writeln('<INPUT TYPE="text" >'); parent.bas.document.writeln(''); parent.bas.document.writeln('</form>'); parent.bas.document.close() ; function recupere(){ alert(parent.bas.document.forms[0].elements[0].value) }
JS : Javascript
66
D. Mailliet
MIAGE 2 me anne
//--> </SCRIPT> </HEAD> <body bgcolor="#f0f0f0"> <INPUT TYPE="button" name="essai" onClick="recupere()" value="essai"> </body> </HTML> Lorsquon dfinit 2 cadres, il faut logiquement 3 fichiers (voir plus haut). Ici, le cadre du bas ne contenent rien initialement, nest dfini par aucun fichier. Ce qui apparat dans le cadre infrieur (nomm bas ) est cr par le script contenu dans le fichier du cadre suprieur (nomm haut ) le bouton situ dans ce cadre rcupre le contenu de llment zone texte du cadre bas
4. Exercice : Voici un convertisseur de monnaies nationales europenne : <html> <head> <SCRIPT LANGAGE="JavaScript"> <!-var taux = 6.55957; function eurofr(){ window.document.calc.franc.value =window.document.calc.euro.value * taux; } function freuro(){ window.document.calc.euro.value =window.document.calc.franc.value / taux; } function modif(tx,ch){ // ch est une chaine de 2 caractres taux = tx; var chn =window.document.calc.outerHTML; var pos = (chn.indexOf(window.document.calc.franc.outerHTML)); window.document.calc.outerHTML=chn.substring(1,pos - 5) +ch + chn.substring(pos3,chn.length); eurofr(); } // --> </SCRIPT> </head> <body> <form name="calc"> <input type="radio" name="monaie" checked onClick="modif(6.55957,'FF');"> franc franais <br /> <input type="radio" name="monaie" onClick="modif(40.3399,'FB');"> franc belge <br /> <input type="radio" name="monaie" onClick="modif(1.95583,'DM');"> Deutch Mark <br /> <input type="radio" name="monaie" onClick="modif(166.386,'Pt');"> pesetas espagnole <br /> <input type="radio" name="monaie" onClick="modif(1936.27,'LI');"> Lire Italienne <br /> ff : <input type="text" name="franc" onkeyup ="freuro()"> <br /> euros : <input type="text" name="euro" onkeyup ="eurofr()" )"> <br /> <input type="button" value="effacer" onClick="window.document.calc.franc.value='';window.document.calc.euro.value='';"> </form> </body> </html> Le tester, ltudier et le modifier de faon : Le rendre plus esthtique
JS : Javascript
67
D. Mailliet
MIAGE 2 me anne
Admettre 3 caractres au lieu de 2 pour les monaies augmenter le nombres de monaies convertibles : DEMParEuros = 1.95583; allemagne ESPParEuros = 166.386; espagne FRFParEuros = 6.55957; france IEPParEuros = 0.787564; Ireland ITLParEuros = 1936.27; Italie BEFParEuros = 40.3399; Belgique NLGParEuros = 2.20371; Hollande ATSParEuros = 13.7603; Autriche PTEParEuros = 200.482; Portugal FIMParEuros = 5.94573; Finlanded GRDParEuros = 340.750; Grece LUFParEuros = 40.3399;Luxambourg
JS : Javascript
68
D. Mailliet
MIAGE 2 me anne
V.
Feuilles de style
A. La cration de style
La dclaration de style se fait dans l'entte de la page, encadre par les balises <STYLE> et </STYLE>. Il y a 3 possibilits pour affecter un style modifier le style d'une balise existante crer une nouvelle classe de style affecter l'attribut style Les balises existantes Voici la syntaxe pour affecter la police arial en 12 points toutes les cellules des tableaux d'une page. Toutes les proprits de style sont dtailles dans le dernier paragraphe. <HTML><HEAD> <STYLE> TD {font-family:arial;font-size:12pt} </STYLE> </HEAD> <BODY> Ici le corps de la page </BODY></HTML> Dans lexemple ci-dessus, toutes les cellules TD auront comme style par dfaut Arial 12pt. On peut modifier ainsi toutes les balises existantes. Le cas particulier de la balise de lien A La balise <A> est particulire, car elle peut tre drive selon l'action du visiteur. On obtient ainsi 3 balises A. A:hover {text-decoration:underline} A:active {color:red} A:visited {color:green} Avec cette dclaration, le texte de lien : - est soulign au passage de la souris, - devient rouge sur un clic, - reste vert pour indiquer que ce lien a t visit.
ATTENTION : Netscape 4.X ne supporte pas cette fonctionnalit. Plus gnralement, il n'est pas possible de changer le style d'un objet HTML une fois la page charge dans Netscape. Cration de classes Modifier les balises existantes n'est pas suffisant quand il s'agit d'affecter un style une partie de texte. Par exemple dans cette page, les parties de code sont en courier new vert, grce la classe de style "code" qui est dclare ainsi : <HTML><HEAD> <STYLE> .code {font-family:courrier;color:green} </STYLE> </HEAD> Le point devant code indique la cration d'une nouvelle classe appele code. Pour affecter ce style une portion de texte, on crit : <SPAN class="code">texte mis en forme</SPAN> La balise <SPAN> permet d'affecter un groupe de mot une classe de style.
Feuilles de style
69
D. Mailliet
MIAGE 2 me anne
Il est aussi possible d'affecter ce style une balise existante. Pour donner le style courier new vert une cellule de tableau, on crit : <TD class="code">cellule en police courrier vert</TD> Affecter l'attribut style Il n'est pas indispensable de crer une classe de style pour affecter un style un objet. Par exemple : <SPAN style="font-family:courier;color:green">Texte mis en forme</SPAN> L'attribut style d'une balise reoit les proprits de style. Il est toutefois prfrable de dclarer une classe pour regrouper la mise en forme.
B.
Les feuilles de style externes
Nous avons vu jusqu'ici comment affecter un style une page, ce qui implique de recopier la dclaration dans toutes les pages et rend les mises jour longues et prilleuses. Il est possible de regrouper la dclaration des styles dans un fichier externe et de l'appeler dans toutes les pages du site. La maintenance est acclre et toutes les pages du site sont homognes. 1. Le fichier externe L'extension d'un fichier de feuille de style est toujours .css Le fichier css contient uniquement l'intrieur des balises <STYLE>. Voici un exemple de fichier de style appel style.css : /* Ceci est un commentaire */ TD {font-family:arial;font-size:12pt} .code {font-family:courrier;color:green} Le fichier style.css ne contient pas les balises <STYLE>. Comme en javascript, les commentaires sont marqus par // ou /* */. 2. L'intgration du fichier externe Une ligne dans l'entte suffit pour appeler le fichier de style dans une page : <HTML><HEAD> <LINK rel="StyleSheet" type="text/css" href="style.css"> </STYLE> </HEAD> La balise <LINK> fait un lien entre la page en cours et le fichier de style externe.
C.
Les proprits de style
Nous avons vu comment dclarer les styles dans une page. La norme CSS a prvu de nombreuses proprits pour les diffrents objets HTML. Toutes ces proprits ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport Internet Explorer 4 et 5, qui lui-mme ne respecte pas toutes les normes. 1. Les proprits de police
Normes respectes par Internet Explorer et Netscape. Proprit font-size font-family font-weight font-style color Signification Hauteur de police en points ou pixels Nom de police Epaisseur de la police (gras) Style de police (italic) Couleur de police Valeurs possibles font-size:12px font-size:10pt font-family:arial,verdana font-family:sans serif font-weight:bold font-weight:normal font-style:italic font-style:normal color:green color:#FFCC00
Feuilles de style
70
D. Mailliet
MIAGE 2 me anne
2. Les proprits de texte Normes respectes par Internet Explorer et Netscape. Proprit text-height text-decoration text-align text-indent text-transform Signification Hauteur de ligne en points ou pixels Attribut de soulignement Alignement de paragraphe (balise P) Indentation de paragraphe (balise P) Transformation des majuscules 3. Valeurs possibles text-height:12px text-decoration:overline | line-through | underline | none text-align:left | :right | :center text-indent:25px | -15px text-transform:capitalize|:uppercase | lowercase
Les proprits d'arrire-plan
Seul Internet Explorer 4 et 5 permet de choisir une image d'arrire plan. Proprit background background-color 4. Signification Image d'arrire-plan Couleur d'arrire-plan Valeurs possibles background:image.gif background-color:black
Les proprits de positionnement
Netscape 4.X a un gestion particulire des proprits de positionnement. Proprit clip width height top left overflow position visibility Signification Clipping Largeur de la zone Hauteur de la zone Ordonne du coin suprieur gauche Abscisse du coin suprieur gauche Recouvrement Type de positionnement Visibilit Valeurs possibles clip:auto width:auto height:auto top:10 left:400 overflow:clip overflow:scroll overflow:none position:absolute position:relative position:static visibility:hidden visibility:visible width:150 height:100
5. Les proprits d'encadrement Aucune de ces proprits n'est reconnue par Netscape 4.X Internet Explorer respecte presque compltement l'affichage de ces proprits. Proprit margin-top margin-right margin-bottom margin-left margin padding-top Signification Marge du haut en pixels Marge du bas en pixels Marge du haut en pixels Marge de gauche en pixels Groupement des 4 marges haute, droite, bas et gauche Espacement en haut Valeurs possibles margin-top:10 margin-right:15 margin-bottom:15 margin-left:10 margin:10,15,15,10 padding-top:10
Feuilles de style
71
D. Mailliet
MIAGE 2 me anne
padding-right padding-bottom padding-left padding border-style border-color border-width border-left-width border-right-width border-top-width border-bottomwidth float
Espacement droite Espacement en bas Espacement gauche Groupement des espacements en haut, droite, en bas et gauche Style de contour Couleur de contour Largeur de contour Epaisseur du trait de contour gauche Epaisseur du trait de contour droit Epaisseur du trait de contour haut Epaisseur du trait de contour bas Flottaison du bloc A viter
padding-right:10 padding-bottom:10 padding-left:10 padding:10,10,10,10 none, solid, double, groove, ridge, inset, outset border-color:red border-width:3px thin, medium, thick border-left-width:thin border-right-width:medium border-top-width:thick border-bottom-width:0px float:right float:left
6.
Exemples
<html> <body> <STYLE> TH {font-size:large; color: #3B3DE3; background-color: #EEEEEE} /* alternance de couleurs pour les lignes des tables*/ TR.A0 {background-color: #CCCCCC} TR.A1 {background-color: #DDDDDD} </STYLE> <table> <TR> <TH>Titre colonne 1</TH> <TH>Titre colonne 2</TH> </TR> <TR CLASS='A0' > <TD align=center width=150>cellule 1 de la ligne 1</TD> <TD align=center width=250>cellule 2 de la ligne 1</TD> </TR> <TR CLASS='A1' > <TD align=center width=150>cellule 1 de la ligne 2</TD> <TD align=center width=250>cellule 2 de la ligne 2</TD> </TR> <TR CLASS='A0' > <TD align=center width=150>cellule 1 de la ligne 3</TD> <TD align=center width=250>cellule 2 de la ligne 3</TD> </TR> <TR CLASS='A1' > <TD align=center width=150>cellule 1 de la ligne 4</TD> <TD align=center width=250>cellule 2 de la ligne 4</TD> </TR> </table>
Feuilles de style
72
D. Mailliet
MIAGE 2 me anne
</body> </html> donne le tableau suivant :
Dans lexemple suivant, le style supprime les ascenseurs de la page et du textarea et le javascript fait occuper tout lcran la page : <HTML> <HEAD> <TITLE> Exemple 9</TITLE> <style> .noScrollBar{ background-color : #FFFFFF; scrollbar-track-color : #FFFFFF; scrollbar-arrow-color : #FFFFFF; scrollbar-base-color : #FFFFFF; scrollbar-face-color : #FFFFFF; scrollbar-shadow-color : #FFFFFF; scrollbar-darkshadow-color : #FFFFFF; scrollbar-highlight-color : #FFFFFF; } </style> </HEAD> <BODY CLASS="noScrollBar" onLoad ="window.resizeTo(screen.availWidth,screen.availHeight); moveTo(0,0);browser.statusBar=false;"> Il suffit ensuite d'appeller la balise TEXTAREA ainsi : <TEXTAREA CLASS="noScrollBar" rows="7" cols="50" > Vous avez vu, il n'y a pas de barre de dfilement !!! </TEXTAREA> </BODY> </HTML>
Feuilles de style
73
D. Mailliet
MIAGE 2 me anne
VI. Applet java

A. Gnralits
On donne ici titre dexemple, la faon dintgrer du code java compil (pcode et non du JavaScript interprt) Cette faon de faire permet dacclrer le fonctionnement et aussi de protger son code
B.
Syntaxe
On utilise les balises applet <applet code="xxx.class" height=100 width =250> <param name="yyy" value="zzz"> </applet> exemple : le code : <html> <head> <title>essai</title> </head> <body> avant <hr> <applet code="Essai2.class" height=100 width =250> <param name="nbr" value="100"> </applet> <hr> aprs </body> </html> donne :
Applet JAVA
74
D. Mailliet
MIAGE 2 me anne
ou "Essai2.class" rsulte de la compilation de "Essai2.java" : import java.awt.*; public class Essai2 extends java.applet.Applet { int nombre; public void init( ) { super.init(); String s = getParameter("nbr"); if (s!=null) nombre = Integer.parseInt(s); else nombre=0; } public void start() { super.start(); } public void paint(Graphics screen) { screen.drawString("La racine carr de " + nombre + " est " + Math.sqrt(nombre), 5, 50); } }
C.
Passage de paramtres
On on utilise les balises <param> et les attributs name et value. Il faut bien entendu connatre le nom des paramtres utiliss dans le code Java
Applet JAVA
75
D. Mailliet
MIAGE 2 me anne
VII. Php
A. Gnralits
Le PHP est n en 1994, Rasmus Lerdorf possde une page web avec son CV. Celui-ci dveloppe un programme pour garder une trace de ses visiteurs: PHP. Rapidement, des internautes curieux lui demandent une copie de son programme, et c'est ainsi que Rasmus met en ligne la version 1.0 de PHP. Trs vite, sa cration connait un grand succs, et de nombreuses suggestions lui parviennent. Cest un langage incrust au HTML et interprt (PHP3) ou compil (PHP4) ct serveur. Il drive du C et du Perl dont il reprend la syntaxe. Il est extensible grce de nombreux modules et son code source est ouvert. Comme il supporte tous les standards du web et quil est gratuit, il sest rapidement rpandu sur la toile. En 1997, PHP devient un projet collectif et son interprteur est rcrit par Zeev Suraski et Andi Gutmans pour donner la version 3 qui sappelle dsormais PHP : Hypertext Preprocessor (acronyme rcursif lexemple du systme Open Source Linux : Is Not UniX). Il existe par ailleurs des applications web prtes lemploi (PHPNuke, PHP SPIP, PHPSlash) permettant de monter facilement et gratuitement son portail. En juillet 2000 plus de 300.000 sites tournaient dj sous PHP ! Intgration dun script dans une page Les pages web sont au format html. Les pages web dynamiques gnres avec PHP4 sont au format php. Le code source php est directement insr dans le fichier html grce au conteneur de la norme XML : <?php ?> Exemple: <html> <body> <?php echo Bonjour; ?> </body> </html> Exemple comment : ( le clbre hello world )
Exemple de script, code source (ct serveur) :
Autre criture du mme script :
<html> <body> <h1>Mon premier script</h1> <?php echo"Bonjour\nMonde\n";?>
<?php echo "<html>\n<body>\n"; echo "<h1>Mon premier script</h1>\n"; echo "Bonjour\nMonde\n"; echo "</body>\n</html>\n";
76 Php
D. Mailliet
MIAGE 2 me anne
Rsultat affich par le navigateur : Code source (ct client) de la page essai.ph3 rsultant du script
Lexemple ci-dessus montre : Que le code source vu par lutilisateur nest pas celui crit par le programmeur : les 2 codes cot serveur donne le mme rsultat cot client Que lon peut crire du Php dans du html et rciproquement Que \n provoque un passage la ligne dans le code source client mais pas dans le navigateur (il faudrait utiliser <br />
B.
Exemple :
Commentaires
Un script php se commente comme en C ou comme en Shell:
<?php // commentaire de fin de ligne /* commentaire sur plusieurs lignes */ # commentaire de fin de ligne ?> Tout ce qui se trouve dans un commentaire est ignor. Il est conseill, comme toujours, de commenter largement ses scripts.
C.
Constantes, Variables, types
Le code php scrit dans une page Html entre les balises : < ?php ?> Ce code est traduit par le serveur en code html et est envoy au client pour tre interprt par le navigateur. 1. variables
Le typage des variables est implicite en php. Il nest donc pas ncessaire de dclarer leur type au pralable ni mme de les dclarer avant leur utilisation. Le nom des variables est sensible la casse (ie : $x != $X).
Php
77
D. Mailliet
MIAGE 2 me anne
Les noms de variables suivent les mmes rgles de nommage que les autres entits PHP. Un nom de variable valide doit commencer par une lettre ou un soulign (_), suivi de lettres, chiffres ou souligns. Une lettre peut tre une des lettres minuscules (a z) ou majuscules (A Z), et les caractres ASCII de 127 255 (0x7f0xff). Les identificateurs de variable sont prcds du symbole $ (dollars). Exemple : $toto. Exemple . Validit des noms de variables <?php $var = "Jean"; $Var = "Paul"; echo "$var, $Var"; // affiche "Jean, Paul" // $4site = 'pas encore'; // invalide : commence par un nombre $_4site = 'pas encore'; // valide : commence par un souligné $mas = 'jaune'; // valide : le code ASCII de est 239. echo $mas ; echo $_4site ; ?> Les variables peuvent tre de type entier (integer), rel (double), chane de caractres (string) , boolen (boolean)., tableau (array), objet (object) Il est possible de convertir une variable en un type primitif grce au cast (comme en C, java ou delphi). Le cast est une conversion de type. Laction de caster (transtyper) consiste convertir une variable dun type en un autre. Exemple : $chn= "12"; $nbr = (int)$chn; Quelques fonctions : empty($var) : renvoie vrai si la variable est vide isset($var) : renvoie vrai si la variable existe unset($var) : dtruit une variable gettype($var) : retourne le type de la variable settype($var, "type ") : convertit la variable en type type (cast) is_long(), is_double(), is_string(), is_array(), is_object(), is_bool(), is_float(), is_numeric(), is_integer(), is_int() 2. Nommage dynamique des variables // $chn vaut la chane 12 // $nbr vaut le nombre entier 12
Une variable peut avoir pour identificateur la valeur dune autre variable. Syntaxe : ${$var} = valeur; Exemple : $toto = "titi"; ${$toto} = 123; echo $titi; // la variable $titi vaut 123 La porte dune variable est limite au bloc dans lequel elle a t cre. Une variable locale une fonction nest pas connue dans le reste du programme. Tout comme une variable du programme nest pas connue dans une fonction. Une variable cre dans un bloc nest pas connue dans les autres blocs, mmes suprieurs.
Php
78
D. Mailliet
MIAGE 2 me anne
3. Constantes Lutilisateur peut dfinir des constantes dont la valeur est fixe une fois pour toute. Les constantes ne portent pas le symbole $ (dollars) en dbut didentificateur et ne sont pas modifiables. define(var,valeur) : dfinit la constante var (sans $) de valeur valeur Exemple 1 : Define(toto,titi); echo toto; Exemple 2 : // affiche titi
define(anne,2003); echo anne; // affiche 2003 Contrairement aux variables, les identificateurs de constantes (et aussi ceux de fonction) ne sont pas sensibles la casse. 4. Rfrences On peut ,la manire des pointeurs en C, faire rfrence une variable grce loprateur & (ET commercial). Exemple 1 : $toto = 100; // la variable $toto est initialise la valeur 100 $titi = &$toto; // la variable $titi fait rfrence $toto $toto++; // on change la valeur de $toto echo $titi; // qui est rpercute sur $titi qui vaut alors 101 Exemple 2 : function change($var) { $var++; // la fonction incrmente en local largument } $nbr = 1; // la variable $nbr est initialise 1 change(&$nbr); // passage de la variable par rfrence echo $nbr; // sa valeur a donc t modifie 5. La valeur sans valeur La valeur spciale NULL reprsente l'absence de valeur. Une variable avec la valeur NULL n'a pas de valeur. La constante NULL est insensible la casse. <?php $var = Null; ?> 6. oprateurs divers a) Oprateurs dassignement :
Pour laffectation on utilise = (pour la comparaison = =) , *= /=, +=, -=, %= ; .= $a=3 ; $x*=$y // quivalent $x=$x*$y), b) Oprateurs de comparaison : ,== (galit), < (infrieur strict), <= (infrieur large), >, >=, != (diffrence) c) Oprateurs affectation conditionnelle
Signalons un oprateur trs spcial qui quivaut une structure conditionnelle complexe if then else la diffrence quil renvoie un rsultat de valeur pouvant ne pas tre un boolen : loprateur ternaire. Syntaxe :
Php
79
D. Mailliet
MIAGE 2 me anne
(condition)?(expression1):(expression2); Si la condition est vrai alors value et renvoie lexpression1 sinon value et renvoie lexpression2. Exemple : $nbr = ($toto>10)?($toto):($toto%10); Dans cet exemple, la variable $nbr prend $toto pour valeur si $toto est strictement suprieur 10, sinon vaut le reste de la division entire de $toto par 10. 7. Signification Variables de serveur : Variables d'environnement HTTP Cookies HTTP GET variables HTTP POST variables Variable de tlchargement de fichier via HTTP Variables de requte Variables prdfinies Nom (Php4) $_SERVER $_ENV $_COOKIE $_GET $_POST $_FILES $_REQUEST Un tableau associatif constitu du contenu des variables $_GET, $_POST, $_COOKIE, et $_FILES. $_SESSION $GLOBALS Un tableau associatif contenant les rfrences sur toutes les variables globales actuellement dfinies dans le contexte d'excution global du script. Les noms des variables sont les index du tableau. Ancien nom (Php3) $HTTP_SERVER_VARS $HTTP_ENV_VARS. $HTTP_COOKIE_VARS. $HTTP_GET_VARS. $HTTP_POST_VARS. $HTTP_POST_FILES. pas d'quivalent.
Session variables Variables globales
$HTTP_SESSION_VARS. idem
D.
Types
Mme si les variables n'ont pas tre explicitement dclares, PHP n'en conserve pas moins la notion de type 1. Boolens C'est le type le plus simple. Un boolen prend les valeurs de TRUE ou FALSE. a) Oprateurs logiques : and, && (et), or, || (ou), xor (ou exclusif), ! (non) 2. Les nombres a) Les entiers:
Les entiers sont de nombres dont la plage dpend des plate-formes, mais reste quivalente la porte du type long en C. Sur une plate-forme 32 bits, les valeurs vont de -2 147 483 648 +2 147 483 647. En cas de dpassement de capacit, PHP convertit automatiquement l'entier incrimin en nombre dcimal. On pourra exprimer un entier en dcimal, hexadcimal ou encore en octal. $decimal = 10; $hexa = 0x0F; $octal = 020;
Php
80
D. Mailliet
MIAGE 2 me anne
b) Les nombres dcimaux: 308 1.7E+308. On peut exprimer ce type sous forme de nombre normal avec un point dcimal, ou en notation scientifique. $normal = 0.017; $scientifique = 17.0E-3; c) Les oprateurs + (addition), - (soustraction), * (multipli), / (divis), % (modulo), ++ (incrment), --(dcrment). Ces deux derniers peuvent tre pr ou post fixs $i = 5 ; $i++ ; // i vaut 6 equivalent i+=1 ou encore i=i+1 echo $i++ ; // affiche 6 et ensuite donne i la valeur 7 echo ++$i ; // donne i la valeur 8 et ensuite affiche 8 d) Les constantes mathmatiques
Constante
M_PI M_E M_LOG2E M_LOG10E M_LN2 M_LN10 M_PI_2 M_PI_4 M_1_PI M_2_PI M_SQRTPI M_2_SQRTPI M_SQRT2 M_SQRT3 M_SQRT1_2 M_LNPI M_EULER
Valeur
3.14159265358979323846 2.7182818284590452354 1.4426950408889634074 0.43429448190325182765 0.69314718055994530942 2.30258509299404568402 1.57079632679489661923 0.78539816339744830962 0.31830988618379067154 0.63661977236758134308 1.77245385090551602729 1.12837916709551257390 1.41421356237309504880 1.73205080756887729352 0.70710678118654752440 1.14472988584940017414 0.57721566490153286061
Description
Pi e log_2 e log_10 e log_e 2 log_e 10 pi/2 pi/4 1/pi 2/pi sqrt(pi) [4.0.2] 2/sqrt(pi) sqrt(2) sqrt(3) [4.0.2] 1/sqrt(2) log_e(pi) [4.0.2] Euler constant [4.0.2]
e) Nom Abs Acos acosh Asin asinh Atan2 Atan atanh base_convert BinDec
Les fonctions
Signification Valeur absolue arc cosinus Arc cosinus hyperbolique arc sinus Arc sinus hyperbolique arc tangent de deux variables arc tangent Arc tangeant hyperbolique Convertit un nombre entre des bases arbitraires. Convertit de binaire en dcimal Php 81 D. Mailliet
MIAGE 2 me anne
Ceil Cos cosh DecBin DecHex DecOct deg2rad Exp expm1 Floor fmod getrandmax hexdec hypot is_finite is_infinite is_nan lcg_value Log10 log1p Log max min mt_getrandmax mt_rand mt_srand OctDec pi pow rad2deg rand round Sin sinh
Arrondit au nombre suprieur cosinus Cosinus hyperbolic Convertit de dcimal en binaire Convertit de dcimal en hexadcimal Convertit de dcimal en octal Convertit un nombre de degrs en radians exponentielle Returns exp(number) - 1, computed in a way that is accurate even when the value of number is close to zero Arrondi l'entier infrieur Returns the floating point remainder (modulo) of the division of the arguments Plus grande valeur alatoire possible. Convertit de hexadcimal en dcimal Returns sqrt( num1*num1 + num2*num2)
Gnrateur de congruence combine linaire logarithme en base 10. Returns log(1 + number), computed in a way that accurate even when the val ue of number is close to zero Logarithme naturel (nprien) La plus grande valeur. La plus petite valeur. La plus grand valeur alatoire possible. Gnre une meilleure valeur alatoire. Initialise une meilleure valeur alatoire Convertit d'octal en dcimal. Retourne la valeur de pi Puissance Convertit de radians en degrs Gnre une valeur alatoire. Arrondi. Sinus Sinyus hyperbolique
Php
82
D. Mailliet
MIAGE 2 me anne
Sqrt srand Tan tanh
Racine carre. Initialise le gnrateur de nombres alatoires Tangente Tangente hyperbolique
3.
Les chaines:
Une chaine est une suite de caractres. Elle peut tre dlimite par des guillements simples ou doubles. Attention, leur utilisation ne produira pas le mme effet: les chaines entoures de guillemets doubles sont sujettes aux substitutions de variables et au traitement des squences d'chappement, contrairement aux chaines entoures de guillemets simples. <? $titi = "toto"; echo "Je mappelle $titi"; echo 'Je m\appelle $titi '; ?> Le premier appel echo va afficher je mappelle toto tandis que le deuxime va afficher je mappelle $titi . Les squences d'chappement de PHP: \n: Nouvelle ligne \t: Tabulation \r: Retour chariot \\: Anti slash \$: Signe dollar \ : lapostrophe \" : le guillemet a) le . (point) . echo 'Je m. "appelle ".$titi"; // va afficher je mappelle toto a$ = "Bonjour " ; a$ .= "monde" ; // quivalent a$ = a$ . "monde" ; a contient Bonjour monde b) Nom addcslashes addslashes bin2hex chop chr chunk_split convert_cyr_string count_chars crc32 Les fonctions Signification Ajoute des slashes dans une chane, la mode du langage C Ajoute des anti-slashs dans une chane Convertit des donnes binaires en reprsentation hexadcimale Alias de rtrim() Retourne un caractre spcifique Scinde une chane Convertit une chane d'un jeu de caractres cyrillique l'autre Retourne des statistiques sur les caractres utiliss dans une chane Calcule la somme de contrle CRC32 Loprateur de Concatnation
Php
83
D. Mailliet
MIAGE 2 me anne
crypt echo explode fprintf get_html_translation_table hebrev hebrevc html_entity_decode htmlentities htmlspecialchars implode join levenshtein localeconv ltrim md5_file md5 metaphone money_format nl_langinfo nl2br number_format ord parse_str print printf quoted_printable_decode quotemeta rtrim setlocale sha1_file sha1 similar_text soundex sprintf
Chiffrage indchiffrable (hashing) Affiche une chane de caractres Coupe une chane en segments Ecrit une chane formate dans un flt Retourne la table de traduction des entits utilise par htmlspecialchars() et htmlentities() Convertit un texte logique hbreux en texte visuel Convertit un texte logique hbreux en texte visuel, avec retours la ligne Convertit toutes les entits HTML en caractre normal Convertit tous les caractres ligibles en entits HTML Convertit les caractres spciaux en entits HTML Rassemble les lments d'un tableau en une chane Rassemble les lments d'un tableau en une chane Calcule la distance Levenshtein entre deux chanes Lit la configuration locale Supprime les caractres invisibles de dbut de chane Calcule le md5 d'un fichier Calcule le md5 d'une chane Calcule la cl mtaphone Met un nombre au format montaire Rassemble des informations sur la langue et la configuration locale. Insre un retour la ligne HTML chaque nouvelle ligne Formate un nombre pour l'affichage Retourne le code ASCII d'un caractre Analyse une requte HTTP Affiche une chane de caractres Affiche une chane de caractres formatte Convertit une chane quoted-printable en chane 8 bits Echappe les mta-caractres Supprime les espaces de fin de chane Modifie les informations de localisation Calcule le sha1 d'un fichier Calcule le sha1 d'une chane de caractres Calcule la similarit de deux chanes Calcule la cl soundex Retourne une chane formatte
Php
84
D. Mailliet
MIAGE 2 me anne
sscanf str_ireplace str_pad str_repeat str_replace str_rot13 str_shuffle str_split str_word_count strcasecmp strchr strcmp strcoll strcspn strip_tags stripcslashes stripos stripslashes stristr strlen strnatcasecmp strnatcmp strncasecmp strncmp strpos strrchr strrev strripos strrpos strspn strstr strtok strtolower strtoupper strtr
Analyse une chane l'aide d'un format Version insensible la casse de str_replace() Complte une chane jusqu' une taille donne Rpte une chane Remplace toutes les occurrences dans une chane Effectue une transformation rot13 Mlange les caractres d'une chane de caractres Convertit une chane de caractres en tableau Compte le nombre de mots utiliss dans une chane Comparaison de chanes binaires Trouve la premire occurence d'un caractre dans une chane Comparaison binaire de chanes Comparaison de chanes localise Trouve un segment de chane ne contenant pas certains caractres Supprime les balises HTML et PHP d'une chane Supprime les anti-slash d'une chane C Rercherche la position d'une occurence dans une chane, sans tenir compte de la casse Supprimer les anti-slash d'une chane Trouve la premire occurence dans une chane (insensible la casse) Calcule la taille d'une chane Comparaison de chanes avec l'algorithme d'"ordre naturel" (insensible la casse) Comparaison de chanes avec l'algorithme d'"ordre naturel" Compare en binaire des chanes de caractres Comparaison binaire des n premiers caractres Trouve la position d'un caractre dans une chane Retourne la fin de la chane Inverse une chane Trouve la position de la dernire occurence d'une chane dans une autre de faon insensible la casse. Trouve la position de la dernire occurence d'un caractre dans une chane Trouve le premier segment de chane Trouve la premire occurence dans une chane Coupe une chane en segments Renvoit une chane en minuscules Renvoit une chane en majuscules Remplace des chanes dans une chane Php 85 D. Mailliet
MIAGE 2 me anne
substr_count substr_replace substr trim ucfirst ucwords vprintf vsprintf wordwrap 4.
Compte de le nombre d'occurences de segments dans une chane Remplace un segment dans une chane Retourne un segment de chane Supprime les espaces en dbut et fin de chane Met le premier caractre en majuscule Met en majuscule la premire lettre de tous les mots Affiche une chane formate Retourne une chane formate Effectue la csure d'une chane Les tableaux:
a) Tableaux simples Un tableau est un type de donnes pouvant contenir plusieurs valeurs, indexes numriquement ou l'aide de chaines. $tableau[0] = "titi"; $tableau[1] = "toto!"; On remarquera que lorsqu'on veut ajouter un lment au tableau, il suffit de faire une affectation dans spcifier d'indice: $tableau[]="tata"; Cette technique est aussi valable pour les tableaux dont les valeurs ne sont pas indexes successivement. (i.e si les postes 1, 10, et 3 d'un tableau sont affectes, PHP affectera dans ce cas le poste d'indice 11) Prcision sur les chaines de caractres: notez que celles-ci peuvent tout fait tre considres comme des tableaux de caractres. Une affectation de type $MaChaine[3]='a'; est tout fait possible. $jours = array(1=>"Lundi","Mardi","Mercredi","Jeudi", "Vendredi","Samedi","Dimanche"); Les tableaux peuvent galement, comme nous l'avons dit, utiliser des chaines pour leur indexation. On parle alors de tableaux associatifs. Il est mme possible de mlanger indexation numrique et indexation par chaine dans le mme tableau. b) Tableaux associatifs
La cl (index) peut ne pas tre numrique exemple de tableau associatif $mois["Janvier"] = 31; $mois["Fvrier"] = 28; $mois["Mars"] = 31; on peut aussi crire : $mois= array("Janvier" => 31, "Fvrier" => 28 , "Mars" => 31); c) Tableaux multidimentionnels Il sagit de tableaux de tableaux. Exemple : $toto = array(array(1,2,3),array(4,5,6)) ; print $toto[1][2]; // affiche 6 ; les indices (cl) commencent 0 ! $toto = array(1 => array(1 => 1,2,3),array(1 => 4,5,6)) ; print $toto[2][3]; // affiche 6 ; ici les indices (cl) commencent 1 !
Php
86
D. Mailliet
MIAGE 2 me anne
d) Nom array_change_key_case array_chunk array_combine array_count_values array_diff_assoc array_diff array_fill array_filter array_flip array_intersect_assoc array_intersect array_key_exists array_keys array_map array_merge_recursive array_merge array_multisort array_pad array_pop array_push array_rand array_reduce array_reverse array_search array_shift array_slice array_splice array_sum array_unique array_unshift array_values array_walk array
fonctions
Signification Change la casse des cls du tableau Spare un tableau en tableaux de taille infrieure Creates an array by using one array for keys and another for its values Compte le nombre de valeurs dans un tableau Calcule la diffrence de deux tableaux, en prenant en compte les cls Calcule la diffrence entre deux tableaux Remplis un tableau avec une mme valeur Filtre les lments d'un tableau Remplace les cls par les valeurs, et les valeurs par les cls Calcule l'intersection de deux tableaux avec des tests sur les index Calcule l'intersection de tableaux Vrifie si une cl existe dans un tableau Retourne toutes les cls d'un tableau Applique sur fonction sur des tableaux Combine plusieurs tableaux ensembles, rcursivement Fusionne plusieurs tableaux Tri multi-dimensionnel Complte un tableau jusqu' la longueur spcifie, avec une valeur. Dpile un lment de la fin d'un tableau Empile un ou plusieurs lments la fin d'un tableau Prend une ou plusieurs valeurs, au hasard dans un tableau Rduit itrativement un tableau Renverse l'ordre des lments d'un tableau Recherche dans un tableau la cl associe une valeur Dpile un lment au dbut d'un tableau Extrait une portion de tableau Efface et remplace une portion de tableau Calcule la somme des valeurs du tableau Ddoublonne un tableau Empile un ou plusieurs lments au dbut d'un tableau Retourne les valeurs d'un tableau Excute une fonction sur chacun des membres d'un tableau. Cre un tableau
Php
87
D. Mailliet
MIAGE 2 me anne
arsort asort compact count current each end explode extract implode in_array is_array join key krsort ksort list natcasesort natsort next pos prev preg_split range reset rsort shuffle sizeof sort split uasort uksort usort
Trie un tableau en ordre inverse Trie un tableau en ordre Cre un tableau contenant les variables et leur valeur Compte le nombre d'lments d'un tableau Transforme une variable en tableau Retourne chaque paire cl/valeur d'un tableau Positionne le pointeur de tableau en fin de tableau Coupe une chane en segments Importe les variables dans la table des symboles Rassemble les lments d'un tableau en une chane Indique si une valeur appartient un tableau Dtermine si une variable est un tableau Rassemble les lments d'un tableau en une chane Retourne une cl d'un tableau associatif Trie un tableau en sens inverse et suivant les cls Trie un tableau suivant les cls Transforme une liste de variables en tableau Tri d'un tableau avec l'algorithme "ordre naturel" insensible la casse Tri d'un tableau avec l'algorithme "ordre naturel" Avance le pointeur interne d'un tableau Retourne l'lment courant d'un tableau Recule le pointeur courant de tableau Rassemble les lments d'un tableau en une chane Cre un tableau contenant un intervalle d'lments Remet le pointeur interne de tableau au dbut Trie en ordre inverse Mlange les lments d'un tableau Alias de count() Trie un tableau Scinde une chane en un tableau, grce une expression rgulire. Trie un tableau en utilisant une fonction de comparaison personnalise Trie un tableau par ses cls en utilisant une fonction de comparaison dfinie par l'utilisateur Trie un tableau en utilisant une fonction de comparaison personnalise
e)
Exemple
$toto = array("abc", "def", "ghij", "klmn", "opqrst", "uvwx");

Php
88
D. Mailliet
MIAGE 2 me anne
$titi = each($toto); print_r($titi); // affiche echo '<br />'; $titi = each($toto); print_r($titi); // affiche echo '<br />'; $titi = each($toto); print_r($titi); // affiche echo '<br />'; $titi = each($toto); print_r($titi); // affiche echo '<br />';
Array ( [1] => abc [value] => abc [0] => 0 [key] => 0 ) Array ( [1] => def [value] => def [0] => 1 [key] => 1 ) Array ( [1] => ghij [value] => ghij [0] => 2 [key] => 2 ) Array ( [1] => klmn [value] => klmn [0] => 3 [key] => 3 )
reset($toto); // rinitialisation du pointeur dlments du tableau $toto $titi = each($toto); print_r($titi); // affiche Array ( [1] => abc [value] => abc [0] => 0 [key] => 0 ) echo '<br />'; print($titi[0].' , '.$titi[1]); // affiche 3 , klmn echo '<br />'; print($titi[key].' , '.$titi[value]); // affiche 3 , klmn echo '<br />'; list($a,$b,,$c)=$toto; print($b); // affiche echo '<br />'; list(,$d)=$titi ; print($d); // affiche echo '<br />'; def
klmn
E.
Les structures de contrle
Elles ressemblent fortement celle de C, Java, Javascript. On se contente donc de donner ici une srie dexemples
PHP propose 2 faons de rassembler des instructions l'intrieur d'un bloc, pour les fonctions de contrle if, while, for, foreach et switch soit : En encadrant les instructions par des accolades {} En remplaant l'accolade d'ouverture par deux points (:) et l'accolade de fermeture par, respectivement, endif;, endwhile;, endfor;, ou endswitch;. 1. Syntaxes : if (test1) instructions1 elseif (test2) instructions2 else instructions3 if (test1) : instructions1 elseif (test2) : instructions2 else instructions3 endif Elseif et else sont facultatifs les parenthses autour des tests sont obligatoires. Si les instructions sont multiples, il faut les mettre entre accolades {}. $a = 3;
Conditionnelle a) Le Si
Php
89
D. Mailliet
MIAGE 2 me anne
$b = 5; if ($a > $b) print "a est plus grand que b"; elseif ($a == $b) print "a est égal à b"; else print "a est plus petit que b"; dans lexemple ci-dessous, 2 instructions sont excutes si le test est valide, on les met donc entre accolades {} et il ny a pas de clause elseif ni else. if ($a > $b) { print "a est plus grand que b"; $b = $a; } Autre syntaxe : if ($a == 5): print "a égale 5"; print "..."; elseif ($a == 6): print "a égale 6"; print "!!!"; else: print "a ne vaut ni 5 ni 6"; endif; b) switch ($i) { case 0: print "i égale 0"; break; case 1: print "i égale 1"; break; case 2: print "i égale 2"; break; } est quivalent if ($i == 0) { print "i égale 0"; } if ($i == 1) { affiche i gale 1i gale 2 2. Boucles Le Cas print "i égale 1"; } if ($i == 2) { print "i égale 2"; } le break est obligatoire,par exemple : $i=1; switch ($i) { case 0: print "i égale 0"; case 1: print "i égale 1"; case 2: print "i égale 2"; }
a) Boucle pour Syntaxe : for (expr1; expr2; expr3) instruction La premire expression (expr1) est value (excute), quoi qu'il arrive au dbut de la boucle. Au dbut de chaque itration, l'expression expr2 est value. Si l'valuation vaut TRUE, la boucle continue et l'instruction est excute. Si l'valuation vaut FALSE, l'excution de la boucle s'arrte.
Php
90
D. Mailliet
MIAGE 2 me anne
A la fin de chaque itration, l'expression expr3 est value (excute). expr1; expr2; expr3 sont facultatifs // exemple 1 for ($i = 1; $i <= 10; $i++) { print $i; } // exemple 2 for ($i = 1;;$i++) { if ($i > 10) { break; } print $i; } // exemple 3 $i = 1; for (;;) { // boucle infinie if ($i > 10) { break; // rupture de boucle } print $i; $i++; Les 8 exemples affichent tous 12345678910 b) Syntaxes : foreach(array_expression as $value) commandes foreach(array_expression as $key => $value) commandes La premire forme passe en revue le tableau array_expression. A chaque itration, la valeur de l'lment courant est assigne $value et le pointeur interne de tableau est avanc d'un lment (ce qui fait qu' la prochaine itration, on accdera l'lment suivant). La deuxime forme fait exactement la mme chose, mais c'est la cl de l'lment courant qui est assign la variable $key. Lorsque foreach dmarre, le pointeur interne de fichier est automatiquement ramen au premier lment du tableau. Cela signifie que vous n'aurez pas faire appel reset() avant foreach. Boucle pour chaque } /* exemple 4 : le mme que le 3 mais avec la syntaxe alternative (sans {}) et contraction de 2 lignes */ $i = 1; for (;;) : if ($i > 10) { break; } print $i++; endfor; // exemple 5 for ($i = 1; $i <= 10; print $i, $i++) ; // exemple 6 for ($i = 1; $i <= 10; print $i++) ; // exemple 7 for ($i = 0; $i <= 9; print ++$i) ; // exemple 8 for ($i = 1; $i <= 10; print $i, ++$i) ;
Note : De plus, notez que foreach travaille sur une copie du tableau spcifi, et pas sur le tableau lui-mme. Par consquent, le pointeur de tableau n'est pas modifi, comme il le serait avec le fonction each(), et les modifications faites dans le tableau ne seront pas prises en compte dans le tableau original. $toto = array("abc", "def", "ghij", "klmn", "opqrst", "uvwx"); foreach ($toto as $valeur) { echo "Valeur: $valeur<br>\n"; } foreach ($toto as $cle => $valeur) { echo "Clé: $cle; Valeur: $valeur<br>\n"; } affiche : Valeur: abc Valeur: def Valeur: ghij Valeur: klmn Valeur: opqrst Valeur: uvwx
Php
91
D. Mailliet
MIAGE 2 me anne
Cl: 0; Valeur: abc Cl: 1; Valeur: def Cl: 2; Valeur: ghij Cl: 3; Valeur: klmn Cl: 4; Valeur: opqrst Cl: 5; Valeur: uvwx Tableau multidimmentionnels Exemple: Avec : $toto = array(1 => array(1 => 1,2,3),array(1 => 4,5,6)) ; foreach ($toto as $valeur) echo "Valeur: $valeur<br>\n"; donne : Valeur: Array Valeur: Array il faut 2 foreach : foreach ($toto as $tablo) foreach ($tablo as $valeur) echo "Valeur: $valeur , \n"; Valeur: 1 , Valeur: 2 , Valeur: 3 , Valeur: 4 , Valeur: 5 , Valeur: 6 , c) Syntaxes : While (test) instruction ; While (test) : instruction1 ; instruction2; ...; instructionP endwhile; Dans la premire version, la boucle nexcute quune seule instruction, pour en excuter plusieurs, il faut les mettre entre accolades { } $i = 1; while ($i <= 10) print $i++; Affiche 12345678910 d) Boucle Faire tant que Boucle tant que
Les boucles do..while ressemblent beaucoup aux boucles while, mais l'expression est teste la fin de chaque itration plutt qu'au dbut. La principale diffrence par rapport la boucle while est que la premire itration de la boucle do..while est toujours excute (l'expression n'est teste qu' la fin de l'itration), ce qui n'est pas le cas lorsque vous utilisez une boucle while (l'expression est vrifie au dbut de chaque itration). Exemple : $i = 5; do print $i--; // post dcrment while ($i>0); echo '<br>'; $i = 5; do { print --$i; // prdcrment } while ($i>0); Affichent : 54321 43210
Php
92
D. Mailliet
MIAGE 2 me anne
3. Rupture et continuit de boucle Break permet de quiter immdiatement une boucle : for (;;) : if ($i > 10) { break; } print $i++; endfor; continue permet de passer litration suivante sans excuter le reste des instructions : $toto=array(1,7,2,6,4,5,8,9); while (list ($cle, $valeur) = each ($toto)) { if (!($valeur % 2)) { // vite les valeurs paires continue; } print("$cle : $valeur , "); } Affiche : 0 : 1 , 1 : 7 , 5 : 5 , 7 : 9 ,
F.
Syntaxe :
Les fonctions
function nom ($arg_1, $arg_2, ..., $arg_n) { corps de fonction return $retval; } On peut dclarer les fonctions nimporte o dans le programme. Cependant une bonne rgle consiste les dclarer avant de les utiliser (Ne pas suivre lexemple ci-dessous) On peut donner une valeur par dfaut aux arguments 1. Passage des arguments se fait par valeur La valeur des paramtres nest pas modifi : $c=2; print incr($c,3); print incr($c); print $c; function incr($a,$b=1){ $a += $b; // $a = $a + $b return $a ; } Affiche : 532
Remarque On aurai pu se contenter de mettre function incr($a,$b=1){ return $a+$b ;} 2. Passage des arguments se fait par adresse (par variable) On place un & devant le paramtre et sa valeur sen trouve modifie function incr2(&$a,$b=1){ $a += $b; // $a = $a + $b return $a ; } $c=2;
Php
93
D. Mailliet
MIAGE 2 me anne
print incr2($c,3); print incr2($c); print $c; affiche : 566
G. H.
Les procdures Porte des variables
Cest la mme syntaxe que pour les fonctions on ne met pas de ligne return
La porte d'une variable dpend du contexte dans lequel la variable est dfinie. Pour la majorit des variables, la porte concerne la totalit d'un script PHP. Mais, lorsque vous dfinissez une fonction, la porte d'une variable dfinie dans cette fonction est locale la fonction. Par exemple: $a = 1; /* porte globale */ function test() { echo " a vaut :"; echo $a; /* porte locale */ } affiche le message : a vaut : La valeur globale (1) de a nest pas connue localement et donc, il ny a pas daffichage pour la valeur de a. En PHP, une variable globale doit tre dclare l'intrieur de chaque fonction afin de pouvoir tre utilise dans cette fonction. Par exemple: $a = 1; $b = 2; function somme() { global $a, $b; $b = $a + $b; } somme(); echo $b; Le script ci-dessus va afficher la valeur 3. En dclarant globales les variables $a et $b locales de la fonction somme(), toutes les rfrences ces variables concerneront les variables globales. Il n'y a aucune limite au nombre de variables globales qui peuvent tre manipules par une fonction. Une deuxime mthode pour accder aux variables globales est d'utiliser le tableau associatif prdfini $GLOBALS. Le prcdent exemple peut tre rcrit de la manire suivante: $a = 1; $b = 2; function somme() { $GLOBALS["b"] = $GLOBALS["a"] + $GLOBALS["b"]; } somme(); echo $b;
I.
Classes et Objets
Php permet la poo (programmation oriente objet) comme java C++ javasctipt ou Delphi Il est possible de dfinir des classes et dinstancier les objets correspondants Cette partie suppose une connaissance des langages orients objet. On ne donnera que la syntaxe sur lexemple trs classique des carrs et rectangles Le constructeur porte le mme nom que la classe (comme en java) Le mcanisme dhritage sobtient par extends
Php
94
D. Mailliet
MIAGE 2 me anne
<?php
This fait rfrence, dans une classe, lobjet correspondant linstance de cette classe } } class rectangle { var $larg,$Long; $rect = new rectangle(5,12); function rectangle($Long,$larg){ $this->Long = $Long; print $rect->surface(); $this->larg = $larg; echo '<br/>'; } $rect->double(); function surface (){ print $rect->surface(); return $this->Long * $this->larg ; echo '<br/>'; } print $rect->perimetre(); function double(){ $this->Long *= 2; $this->larg *= 2; echo '<br/>'; } $K = new carre(5); function perimetre(){ return 2*($this->Long + $this->larg) ; print $K->surface(); } echo '<br/>'; } $K->double(); print $K->surface(); echo '<br/>'; class carre extends rectangle { print $K->perimetre(); function carre($cote){ $this->Long = $cote; ?> $this->larg = $cote;
J.
Entres/Sorties
1. sorties
Pour obtenir du serveur lenvoi vers le client (navigateur) de caractres constituant du code html, on utilise indiferemment print() ou echo() avec ou sans parenthses. 2. entres Pour que le serveur obtienne des informations du client, on peut envoyer par lurl des paramtres avec leur valeur (mthode get) de la manire suivante : <?php echo "$a+$b=".($a+$b) ?> Le code prcdent, contenu dans le fichier tstparam.php et appel de cette faon :
Le code ci-dessus (ou similaire) peut tre excut :

Php
95
D. Mailliet
MIAGE 2 me anne
Soit directement Soit avec la balise href soit par le biais des formulaires soit avec get soit avec post la mthode get transmet les informations dans lURL avec la syntaxe ci-dessus(la taille des info est davantage limite quavec post ) la mthode post les transmet sans quelles soient visible dans lURL On prfrera donc en gnral la mthode post pour des questions de confidentialit, la mthode get est bien utile pour vrifier le bon passage des informations durant la phase de dveloppement. Le passage de paramtres seffectue de la manire suivante : Le ? entre lURL et le premier paramtre le & sparant chaque paramtre le = entre le nom de variable et sa valeur
K.
Pour lcriture :
Fichiers
La lecture et lcriture dans un fichier local ou distant se fait de la manire suivante :
$filename = 'ess.txt'; $somecontent = "Ajout de chaîne dans le fichier \n"; // Assurons nous que le fichier est accessible en écriture if (is_writable($filename)) { // Dans notre exemple, nous ouvrons le fichier $filename en mode d'ajout // Le pointeur de fichier est placé à la fin du fichier // c'est là que $somecontent sera placé if (!$handle = fopen($filename, 'a')) { print "Impossible d'ouvrir le fichier ($filename)"; exit; } // Write $somecontent to our opened file. if (!fwrite($handle, $somecontent)) { print "Impossible d'écrire dans le fichier ($filename)"; exit; } print "L'écriture de ($somecontent) dans le fichier ($filename) a réussi"; fclose($handle); } else { print "Le fichier $filename n'est pas accessible en écriture."; } Et pour la lecture // Lit un fichier, et le place dans une chaîne $filename = "./ess.txt"; $fic = fopen ($filename, "r"); $contenu = fread ($fic, filesize ($filename)); print $contenu; fclose ($fic);
Php
96
D. Mailliet
MIAGE 2 me anne
?>
L.
Inclusion de fichiers
Pour inclure un fichier contenant du php dans du code php, on utilise : include(), include_once(), require() et require_once().
Php
97
D. Mailliet
MIAGE 2 me anne
VIII. PhpMyAdmin
On y accde dans le menu principal de easyphp sous windows (ou aprs avoir tlcharg et install PhpMyAdmin sous linux) On voit ci-dessous le rpertoire de stockage des bases et des tables.
Le bouton ci-dessus donne accs :
On voit ci-dessus les diffrentes bases que lon peut dvelopper en cliquant sur le + et dcouvrir les tables qui la compose
PhpMyAdmin
98
D. Mailliet
MIAGE 2 me anne
donnera : # phpMyAdmin MySQL-Dump # version 2.2.0rc4 # http://phpwizard.net/phpMyAdmin/ # http://phpmyadmin.sourceforge.net/ (download page) #

PhpMyAdmin
99
D. Mailliet
MIAGE 2 me anne
# Serveur: localhost # Gnr le : August 6, 2003, 6:52 pm # Version du serveur: 3.23.40 # Version de PHP: 4.0.6 # Base de donnes: `calrep` # -------------------------------------------------------# # Structure de la table `jours` # DROP TABLE IF EXISTS `jours`; CREATE TABLE `jours` ( `num_jour` int(11) default NULL, `nom_jour` varchar(20) default NULL ) TYPE=MyISAM; # # Contenu de la table `jours` # INSERT INTO `jours` (`num_jour`, `nom_jour`) VALUES (1,'de la vertue'); INSERT INTO `jours` (`num_jour`, `nom_jour`) VALUES (2,'du genie'); INSERT INTO `jours` (`num_jour`, `nom_jour`) VALUES (3,'du travail'); INSERT INTO `jours` (`num_jour`, `nom_jour`) VALUES (4,'de l´opinion'); INSERT INTO `jours` (`num_jour`, `nom_jour`) VALUES (5,'des recompenses'); INSERT INTO `jours` (`num_jour`, `nom_jour`) VALUES (6,'de la rvolution'); # -------------------------------------------------------# # Structure de la table `mois` # DROP TABLE IF EXISTS `mois`; CREATE TABLE `mois` ( `num_mois` int(11) default NULL, `nom_mois` varchar(15) default NULL ) TYPE=MyISAM; # # Contenu de la table `mois` # INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (1,'vendemiaire'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (2,'brumaire'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (3,'frimaire'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (4,'nivose'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (5,'pluviose'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (6,'ventose'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (7,'germinal'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (8,'floreal'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (9,'prairial'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (10,'messidor'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (11,'thermidor'); INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (12,'fructidor');
PhpMyAdmin
100
D. Mailliet
MIAGE 2 me anne
INSERT INTO `mois` (`num_mois`, `nom_mois`) VALUES (13,'sansculottides'); On peut sauvegarder les lignes dans un fichier ess.sql (par exemple) et ajouter au dbut du fichier ( par exemple aprs # -------------------------------------------------------) les lignes : # -- cration de la base --CREATE DATABASE `calrep`; USE calrep; Remarque : # dbute un commentaire Cette sauvegarde permet par exemple de recrer la base, les tables et les donnes trs facilement :
Soit par un copier/coller des lignes de ess.sql Soit en indiquant le chemin daccs ess.sql
Remarque : pour crer Base/Tables/Donnes, on peut soit utiliser linterface propose par phpMyAdmin puis sauvegarder (cest plus prudent) dans un fichier. Soit crer directement le fichier grce un diteur de texte et utiliser le procdure ci-dessus. Les documentations ne manquent pas (voir les copies dcran ci-dessus) Ne pas hsiter les consulter
PhpMyAdmin
101
D. Mailliet
MIAGE 2 me anne
IX. Interfaage PhP/MySql

Il est intressant de crer un fichier connect.php : <?php define(NOM,"xxx"); define(PASSE,"xxx"); define(SERVEUR," xxx"); define(BASE,"xxx "); function Erreur($message){ print("<DIV style=\"color:red\">"); print($message); print("</DIV>"); exit; } function FermerBase(){ if (mysql_close()==false) Erreur("Fermeture impossible de la base"); } function ouvrirBase(){ $connexion=mysql_connect(SERVEUR,NOM,PASSE); if ($connexion ==0) Erreur("impossible d'etablir la connexion"); if(mysql_select_db(BASE, $connexion) == 0) Erreur("impossible de se connecter a la base "+BASE); } ?> Remplacer les xxx par les valeurs correspondantes : Le nom de lutilisateur autoris accder la base Son mot de passe Adresse IP ou nom du serveur MySql (par exemple : localhost) Nom de la base
Il est important de donner ce fichier lextension .php alors quune autre extension conviendrait mais noffrirait pas de scurit puisquun accs directe par lurl permettrait de lire son contenu puisque linterprte php ne linterprterait pas ( cause de lextension qui ne serait pas reconnu) Il suffit ensuite de mettre au dbut du fichier : require("connect.php"); pour linclure dans les programme qui doivent effectuer des requtes mysql <?php require("connect.php"); ouvrirBase(); $requete="select * from xxx"; $resultat=mysql_query($requete); if($resultat == 0) Erreur("impossible d'effectuer la requete <BR>$requete"); if (mysql_num_rows($resultat)==0) Erreur("désolé nous n'avons aucune information"); // rcupration du nombre de champs $nbChamps = mysql_num_fields($resultat) ;
Php / MySQL
102
D. Mailliet
MIAGE 2 me anne
// rcupration du nom des champs for ($i=0; $i<$nbChamps; $i++) { echo (mysql_field_name($resultat,$i)); echo' , '; } echo '<br/>'; echo '<br/>'; // rcupration des enregistrements while ($data=mysql_fetch_row($resultat)){ for ($i=0; $i<$nbChamps; $i++) { echo $data[$i] ; echo' , '; } echo '<br/>'; } FermerBase(); ?> remplacer les xxx de la requte Sql par le nom de la table On peut aussi obtenir la liste des bases et des tables dune base par des requtes adaptes : $requete="show tables"; et $requete="show databases"; Le programme ci-dessus donne la liste des champs et des enregistrements presque sans aucune mise en forme, echo' , '; spare les lments de chaque enregistrement et echo '<br/>'; insre un passage la ligne entre les diffrents enregistrements
Php / MySQL
103
D. Mailliet
Cours Internet
D. Mailliet

Mi Age

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mi Age

Uploaded by

Copyright:

Available Formats

Cours Internet

Table des matires

Table des matires

Table des matires

Table des matires

Table des matires

Objectifs du cours : quelques langages pour Internet

Nous distinguerons 2 grandes parties :

Lappui sur le bouton valider provoque laffichage :

Structure d'un document HTML

Prsentation dun document HTML

Liste des balises et des attributs

<ADDRESS> <A HREF>

style on,,,() N Accesskey

Un style une fonction O O Texte

href Name Target

<APPLET> <AREA> <B>

<BASEFONT> <BDO> <BGSOUND> <BIG>

"font-size: 12 pt" onClick="fonction()" HTML 2.0 HTML 2.0 "b"

"page.html" "Nom" "_self" | "_parent" | "_blank" |"top" | "cadre"

N.N 1.0 HTML 3.0 * I.E 3.0 HTML 3.0 "Description"

Bouton dans un formulaire Titre de tableau Dfini l'alignement de la lgende

* I.E 4.0 HTML 3.0 "top" | "bottom" | "left" | "center" | "right"

Dfinit l'alignement vertical de la lgende "top" | "bottom"

class style on,,,() N title id class style on,,,() O Width Span

char CharOff VAlign

title id class style N Width Span

"left" | "center" | "right" | "justify" | "char"

"a" "10" "top" | "middle" | "bottom" | "baseline"

"left" | "center" | "right" | "justify" | "char"

"top" | "middle" | "bottom" | "baseline"

"Description" "pargr1" "titre1" D. Mailliet

style on,,,() N title id class style on,,,() N O N O face size

<EM> <EMBED> <FIELDSET> <FONT>

title id class style on,,,() O onBlur

Texte Nom d'une ID Nom d'une classe Un style une fonction O

<H2> <H3> <H4> <H5> <H6>

"Description" "pargr1" "titre1" "font-size: 12 pt" onClick="fonction()" HTML 2.0

<IMG> <INPUT> <INS> <ISINDEX> <KBD>

<LAYER> <LEGEND> <LI>

* N.N 4.0 HTML 3.0 HTML 2.0 "disc" | "square" | "circle"

Type d'tiquette dans une liste d'tiquettes (numrique)

"1" | "a" | "A" | "i" | "I"

title id class style on,,,() O href

Rel Rev Type

"100" | "10%" "10" D. Mailliet

N title id class style on,,,() N N N O O compact start type

<NOSCRIPT> <OBJECT> <OL>

<PARAM> <PRE> <Q> <S>

<SCRIPT> <SELECT> <SMALL>

"nom" "above" | "below" | "hsides" | "vsides" | "LHS" | "RHS" | "box" | "border"

"2" "2" "2" "#FFFFFF"

Couleur de la bordure fonce du tableau "#FFFFFF"

Couleur de la bordure claire du tableau

Image d'arrire plan du tableau Couleur de fond du tableau

Balise de script Balise de script

"fonction()" "fonction()" "fonction()" "fonction()"

"top" | "bottom" | "left" | "center" | "right"

Image d'arrire plan du tableau Couleur de fond du tableau

Hauteur du tableau Largeur du tableau Dfinit l'alignement du tableau

"100" | "10%" "100" | "10%" "left" | "center" | "right"

Balise de script Balise de script

title id class style onKeyDown onKeyPress onKeyUp on,,,()

"top" | "bottom" | "left" | "center" | "right"