Outils de l`Internet (côté Client)

Transcription

Tristan Colombo
Outils de l’Internet
(côté Client)
Université d’Aix Marseille I - Provence
Laboratoire d’Informatique Fondamentale de Marseille
Couverture : logos W3C et Javascript
Outils de l’Internet (côté Client) – Version 1.3 : janvier 2006
Copyright (C) 2006 – Tristan Colombo – ATER Université d’Aix-Marseille I
Permission est accordée de copier, distribuer et/ou modifier ce
document selon les termes de la Licence de Documentation Libre GNU
(GNU Free Documentation Licence), version 2.0 ou toute version
ultérieure publiée par la Free Software Foundation.
Une copie de la présente licence est incluse dans la section intitulée
”Licence de Documentation Libre GNU”.
Les exemples de code de programmation sont diffusés sous
Licence Publique Générale GNU (GNU General Public Licence)
dont une copie est incluse dans la section intitulée
”Licence Publique Générale GNU”.
Tristan Colombo
(côté Client)
Version 1.3
Le monde juge bien des choses,
car il est dans l’ignorance naturelle
qui est le vrai siège de l’homme.
Les sciences ont deux extrémités qui se touchent,
la première est la pure ignorance naturelle
où se trouvent tous les hommes en naissant,
l’autre extrémité est celle où arrivent les grandes âmes qui,
ayant parcouru tout ce que les hommes peuvent savoir,
trouvent qu’ils ne savent rien et se rencontrent en cette même ignorance
d’où ils étaient partis, mais c’est une ignorance savante qui se connaı̂t.
Pascal
Table des matières
Introduction
11
1. L’architecture client/serveur
1.1. Programmation côté client : JavaScript . . . . . . . . . . . . . . . . . . . . . . . .
1.2. Programmation côté serveur : CGI . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3. Programmation côté serveur : PHP/MySQL . . . . . . . . . . . . . . . . . . . . .
15
16
17
19
2. Internet
2.1. Historique . . . . . .
2.2. Le protocole TCP/IP
2.3. Adresse IP et DNS .
2.4. Architecture . . . . .
2.5. Le protocole HTTP .
2.6. Le type MIME . . . .
2.7. URL . . . . . . . . .
.
.
.
.
.
.
.
21
21
22
22
23
23
23
24
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
25
25
26
26
27
27
28
29
29
30
31
32
32
32
33
34
37
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3. HTML
3.1. Les bases du langage . . . . . . . . . . . . . . . . . .
3.1.1. Conventions et caractères spéciaux . . . . . . .
3.1.2. Codage des couleurs et des unités de longueur
3.1.3. Structure d’un document HTML . . . . . . . .
3.1.4. Les balises d’en-tête . . . . . . . . . . . . . . .
3.1.5. Document HTML minimal . . . . . . . . . . .
3.2. Balises HTML . . . . . . . . . . . . . . . . . . . . . .
3.2.1. Elements de style . . . . . . . . . . . . . . . .
3.2.2. Listes . . . . . . . . . . . . . . . . . . . . . . .
3.2.3. Tableaux . . . . . . . . . . . . . . . . . . . . .
3.2.4. Liens hypertextes et ancrages . . . . . . . . . .
3.2.5. Les images . . . . . . . . . . . . . . . . . . . .
3.2.6. Les images réactives . . . . . . . . . . . . . . .
3.2.7. Les cadres . . . . . . . . . . . . . . . . . . . .
3.2.8. Les formulaires . . . . . . . . . . . . . . . . . .
3.3. Conclusion . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
4. CSS : Styles en cascade
4.1. Philosophie des cascades . . . . . . . . . . . . .
4.2. Application d’une feuille CSS à un document . .
4.3. Quelques propriétés de style CSS et leurs valeurs
4.3.1. Les pseudo-classes . . . . . . . . . . . . .
4.3.2. Polices . . . . . . . . . . . . . . . . . . .
4.3.3. Couleurs . . . . . . . . . . . . . . . . . .
4.3.4. Texte . . . . . . . . . . . . . . . . . . . .
4.3.5. Cadrage . . . . . . . . . . . . . . . . . . .
4.3.6. Liste . . . . . . . . . . . . . . . . . . . .
4.4. Exemple . . . . . . . . . . . . . . . . . . . . . .
4.5. Un exemple plus complexe . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5. Javascript
5.1. La hiérarchie des objets javascript . . . . . . . . . . . . . . .
5.2. Les bases du langage . . . . . . . . . . . . . . . . . . . . . .
5.2.1. Insertion de Javascript dans du code HTML . . . . .
5.2.2. Les variables . . . . . . . . . . . . . . . . . . . . . . .
5.3. Structures de contrôle . . . . . . . . . . . . . . . . . . . . . .
5.3.1. Les instructions conditionnelles . . . . . . . . . . . . .
5.3.2. Les boucles . . . . . . . . . . . . . . . . . . . . . . . .
5.4. Gestion des erreurs/exceptions . . . . . . . . . . . . . . . . .
5.5. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . .
5.6. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.6.1. Portée des variables . . . . . . . . . . . . . . . . . . .
5.6.2. Les expressions régulières . . . . . . . . . . . . . . . .
5.7. Retour sur les objets . . . . . . . . . . . . . . . . . . . . . .
5.8. Quelques fonctions Javascript . . . . . . . . . . . . . . . . .
5.8.1. Fonctions de base . . . . . . . . . . . . . . . . . . . .
5.8.2. Fonctions de manipulation de chaı̂nes de caractères .
5.8.3. Fonctions de manipulation des tableaux . . . . . . . .
5.8.4. Fonctions d’accès à la Date . . . . . . . . . . . . . . .
5.8.5. Fonctions d’erreurs . . . . . . . . . . . . . . . . . . .
5.8.6. Fonctions mathématiques . . . . . . . . . . . . . . . .
5.8.7. Fonctions de manipulation des Expressions Régulières
5.9. Les événements d’interception . . . . . . . . . . . . . . . . .
5.10. Gestion des fenêtres . . . . . . . . . . . . . . . . . . . . . .
5.10.1. Les boı̂tes de dialogue . . . . . . . . . . . . . . . . .
5.10.2. La ligne de status . . . . . . . . . . . . . . . . . . . .
5.10.3. Temporisations et intervalles . . . . . . . . . . . . .
5.10.4. Contrôle de la fenêtre . . . . . . . . . . . . . . . . .
5.10.5. Navigation . . . . . . . . . . . . . . . . . . . . . . .
5.11. Gestion des cookies . . . . . . . . . . . . . . . . . . . . . . .
5.12. Notes diverses . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
39
40
40
41
41
41
41
42
43
43
44
46
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
63
63
63
64
64
69
69
69
71
71
72
72
73
74
75
75
75
76
78
79
79
79
81
82
82
82
82
84
85
85
86
5.12.1. Correspondance CSS - Javascript . . . . . . . . . . .
5.12.2. Eviter de recharger une page après appel à javacript
5.12.3. Désactiver les erreurs HTML dûes à javascript . . .
5.12.4. Les accents en javascript . . . . . . . . . . . . . . . .
5.13. DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6. Le référencement
6.1. Référencement des pages d’un site . . . .
6.2. Les pages dynamiques et l’URL rewriting
6.3. Le référencement des images . . . . . . .
6.4. La recherche de liens – backlink . . . . .
6.5. Le fichier sitemap.xml de Google . . . . .
6.6. Conclusion . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
86
86
86
87
87
.
.
.
.
.
.
89
90
90
91
91
91
92
Références
93
Annexe A – Exercices
95
Annexe B – TP
105
Annexe C – GNU Free Documentation Licence
119
Annexe D – GNU General Public Licence
127
Index
133
Introduction
e nos jours, avec le développement et la généralisation d’Internet, de plus en plus d’appliDcations
permettent de dialoguer avec des serveurs. Ces applications dynamiques exécutent
des programmes sur un serveur en fonction de données fournies par le client. Ce dialogue s’effectue selon des règles très précises : le protocole. Le protocole du Web est HTTP, mais il peut
être possible de communiquer avec un site via d’autres protocoles, comme par exemple FTP qui
permet d’échanger des fichiers.
Avant que d’aborder plus précisément le mécanisme client/serveur et les différents langages, intéressons nous aux outils de développement. Ce sont ceux que vous allez utiliser pour
développer vos applications et ils peuvent vous faire gagner un temps précieux ... ou vous le
faire perdre ! Premier rappel élémentaire : vous allez produire du code HTML (que ce soit de
manière directe ou indirecte) ; pensez donc à l’indenter correctement. Ceci pour deux raisons :
1. Pour vous : il est beaucoup plus simple de relire et débugger un code présenté de manière
claire.
2. Pour l’utilisateur : si une de vos pages présente une particularité, un utilisateur peut avoir
la curiosité d’afficher votre code ... ce qui peut produire le plus mauvais effet !
Pensez également qu’il existe une grande diversité de navigateurs web et que vos pages devront
être affichées correctement sur tous ces types de navigateurs et ceci quelle que soit la résolution
graphique de l’utilisateur. Ceci demande bien sûr de nombreux tests mais surtout de bannir
l’utilisation de code non normalisé. Si vous utilisez des objets spécifiques tels que les cadres –
frames – ou des applications en Flash, vous devez tester le navigateur client pour savoir s’il
contient le plugin nécessaire et sera en mesure d’afficher correctement la page. Voici maintenant
un aperçu non exhaustif des outils de développement disponibles qui seront notés à l’aide d’étoiles
(de une pour ”Très Mauvais” à cinq pour ”Indispensable”).
Environnements de développement intégrés
Il s’agit d’environnements contenant un éditeur avec coloration syntaxique. Ils peuvent contenir également des outils WISIWIG permettant de coller des images, insérer des animations, etc.
Le code généré est plus ou moins ”pur”.
– DreamWeaver – Windows – F
Le plus connu des environnements de développement intégré orienté Web. Il est très convivial et graphiquement très joli. Il a pourtant de très grosses lacunes. Tout d’abord il n’est
disponible que sous Windows (ce qui suffit à en faire un outil inutilisable ...). De plus le
code généré est très mal indenté et contient un nombre impressionnant de ligne inutiles,
ce qui le rend très rapidement illisible.
12
Introduction
– Quanta Plus – Linux – F F
Equivalent de DreamWeaver sous Linux. Il produit un code un peu plus propre et mieux
indenté. Les fonctionnalités disponibles sont les mêmes.
– BlueFish Editor – Linux – F F F F
Le plus complet des environnements : idéal pour ceux qui aiment ce genre d’outil. L’interface est assez austère mais bien conçue. Contient beaucoup plus de fonctionnalités que
les outils de la gamme DreamWeaver. L’absence d’outils WISIWIG permet la production
d’un code pur.
– KDevelop – Linux – F F
Très bon outil de développement généraliste ... mais justement trop généraliste pour être
utilisé en développement internet.
– Eclipse – Linux & Windows – ?
Environnement de développement complet. Défaut : développé notamment par Borland et
IBM, risque de devenir payant à court terme.
Editeurs
Quelques éditeurs contenant une coloration syntaxique pour ceux préférant tout maı̂triser et
coder en ”dur” (ce qui n’est pas une mauvaise idée ...).
– NEdit – Linux – F F
Editeur assez basique.
– XEmacs – Linux – F F F F
Editeur prenant en compte les expressions relationnelles. S’il vous faut absolument un
éditeur en mode graphique, celui-ci représente à mes yeux le meilleur choix ... en mode
graphique ...
– VIm – Linux & Windows – F F F F F
L’éditeur de référence en mode console ! ! ! Il faut bien sûr passer un peu de temps pour
apprendre les commandes de bases ... mais que de temps gagné par la suite !
Navigateurs
Voici quelques navigateurs qui pourront être utilisés pour tester l’affichage de vos pages. L’un
d’entre eux pourra même être utilisé en phase de développement.
– Internet Explorer – Windows – F
Le plus connu des navigateurs car distribué obligatoirement avec toutes les versions de
Windows. Mais comme beaucoup de produits Microsoft, il s’agit aussi du plus mauvais ...
– Netscape Navigator – Linux & Windows – F
La tentative de réponse de Netscape à Microsoft. Au final un produit équivalent.
– Mozilla-FireFox – Linux & Windows – F F F F F
Très bon navigateur permettant de bloquer les popups et auquel on peut intégrer de
nombreuses extensions. Associé aux extensions ”Web Developper” et ”HTML Validator”,
il s’agit du meilleur navigateur orienté développement. Il permet de tester et de valider
vos pages, de débugger le JavaScript, etc. Parmi les autres extensions utiles :
Introduction
13
– ”LiveHTTPHeaders” : permet d’apercevoir les entêtes MIME des paquets et les cookies
chargés par les pages.
– ”Add N Edit Cookies” : permet d’éditer et de modifier les cookies.
– ”DOM Inspector” : aide au débuggage. Sous Debian :
apt-get install mozilla-firefox-dom-inspector
Note : Dans la suite, lorsque des indications d’installation ou de configuration seront données,
elles le seront toujours par rapport à la distribution Debian Linux.
De plus, s’agissant de la première version du manuscript, il est fort probable que de nombreuses
fautes d’orthographe se soient glissées dans ces lignes. Je m’en excuse par avance et si vous me
les signalez, je me ferai un plaisir de les corriger ;-)
1
L’architecture client/serveur
Software is like sex :
It’s better when it’s free.
Linus Torvalds
ériellement , un site est constitué d’un ordinateur connecté à internet, et sur lequel
Mat
tourne en permanence un programme serveur – on le désignera simplement par le terme
serveur . Le serveur (Apache par exemple) est en attente de requêtes qui lui sont transmises sur le
réseau par un programme client1 tournant sur une autre machine. Lorsque la requête est reçue,
le serveur l’analyse afin de déterminer la ou les actions à exécuter, puis transmet la réponse
au programme client. Il existe de nombreux types de communication possibles entre serveur et
client :
– Le cas le plus simple est une recherche de document. Lorsque l’on se déplace dans un site,
en cliquant sur un lien, on effectue une requête pour charger une nouvelle page.
– Le client peut transmettre des informations au serveur et lui demander de les conserver.
– Et enfin, le client peut demander au serveur d’exécuter un programme en fonction de
paramètres – cas des CGI –, et de lui transmettre le résultat (exemple
http://www.cmi.univ-mrs.fr/~tristan/bioinfo/gcta/index.html).
La figure 1.1 illustre les aspects essentiels d’une communication web dite statique. Le client
envoie une requête au serveur. Ce dernier se charge de rechercher le document demandé
parmi l’ensemble de fichier auxquels il a accès, et transmet ce document s’il existe (sinon vous
aurez droit au fameux ”404 - page not found”).
Le système de localisation de fichiers sur le Web permet de faire référence de manière unique
à un document. Il s’agit des URL – Universal Resource Location. Une URL est constituée de
plusieurs partie :
1
La plupart du temps le programme client est un navigateur internet.
16
Chapitre 1. L’architecture client/serveur
Programme
serveur
Requetes
Client
INTERNET
Document(s)
Document(s)
Documents
Serveur
Fig. 1.1 – Architecture Web ”classique”
– le nom du protocole utilisé pour accéder à la ressource ; les plus utilisés sont http et ftp
ainsi que leurs versions sécurisées shttp et sftp. Le nom du protocole est séparé de la suite
de l’URL par les symboles ” ://”.
– le nom du serveur hébergeant la ressource. Par exemple lcb.cnrs-mrs.fr
– le numéro de port réseau sur lequel le serveur est à l’écoute. Il est séparé du nom du
serveur par le symbole ” :”. Par défaut, en http le port est fixé à 80 et en ftp à 21. L’appel
de http://lcb.cnrs-mrs.fr et de http://lcb.cnrs-mrs.fr:80 est donc équivalent.
– le chemin d’accès, sur la machine serveur, à la ressource.
Les clients web permettent de dialoguer avec un serveur en lui transmettant ces URL, puis
affichent à l’écran les documents transmis par le serveur.
Abordons maintenant les aspects programmation.
1.1
Programmation côté client : JavaScript
La programmation côté client permet de rendre les pages HTML plus réactives sans avoir à
effectuer sans cesse des échanges avec le programme serveur. Le JavaScript permet par exemple
d’effectuer ce type de programmation. Il est interprété au niveau du client et permet toutes
sortes de calculs, d’affichages et de contrôles localement, au niveau du client.
Le JavaScript a été introduit par Netscape puis repris par les autres navigateurs. Il est aujourd’hui plus ou moins normalisé par le W3C, mais il reste toujours difficile de s’assurer qu’un code
un tant soit peu complexe donne les mêmes résultats selon le navigateur employé. Les principaux
cas de recours à JavaScript sont :
– faire un calcul en local.
– contrôler une zone de saisie (passer tous les caractères d’une zone texte en majuscule par
exemple).
– afficher un message.
– enfin piloter l’interface du navigateur (fenêtres, menus déroulants).
Le code JavaScript est inclus dans une page HTML entre des balises <SCRIPT> et </SCRIPT>.
Il peut se trouver dans un fichier séparé. Il suffira alors de le charger dans la page HTML par
1.2 Programmation côté serveur : CGI
17
un code du type :
<SCRIPT language="text/javascript" src="fichier.js" />
On notera ici l’omission de la balise </SCRIPT> qui est en fait incluse à la fin de la balise
<SCRIPT ... />. Ce procédé est valable pour toutes les balises que l’on referme immédiatement
après ouverture.
Remarque : Par défaut, Apache va rechercher les fichiers de script dans le répertoire /var/www qui
est le répertoire des images. Vous pouvez le modifier en éditant le fichier /etc/apache/httpd.conf
et en modifiant la valeur des lignes :
DocumentRoot /var/www
...
<Directory /var/www>
Les limites de la programmation côté client sont très vite atteintes : aucune interaction
possible avec le serveur.
1.2
Programmation côté serveur : CGI
Le Common Gateway Interface (CGI) consiste à produire des documents HTML au travers d’un
programme qui est associé au serveur web. Ce programme peut recevoir en outre des paramètres
saisis par l’utilisateur dans des formulaires. Les CGI peuvent être programmés dans n’importe
quel langage, mais ils le sont en général en Perl ou en C. Voici un exemple très simple de
CGI-Perl : exemple1.cgi
#!/usr/bin/perl -X
use vars qw/$DB $URL \%PAPERS/;
use CGI 2.42 qw/:standard :html3 escape/;
use CGI::Carp qw/fatalsToBrowser/;
$a=param(a);
$b=param(b);
print "
<HTML>
<HEAD>
<TITLE>Programme de test CGI</TITLE>
</HEAD>
<BODY background=\"white\">
Le résultat de ".$a." x ".$b." est : ".$a*$b." <BR />
</BODY>
</HTML>\n";
18
Requetes
Programme
serveur
Requetes
Client
Programme
CGI
INTERNET
Document(s)
HTML
Document(s)
HTML
Fichiers
Serveur
Fig. 1.2 – Architecture CGI
$a et $b sont des paramètres récupérés depuis un formulaire appartenant à une page HTML et
ou les entrées seraient nommées a et b. On pourrait ainsi avoir :
...
<FORM action="exemple1.cgi" method="POST">
Entrez la valeur de a : <INPUT type="text" name="a" size="3" /><BR />
Entrez la valeur de b : <INPUT type="text" name="b" size="3" /><BR />
<INPUT type="submit" name="submit_1" value="Multiplier !" />
</FORM>
...
Il n’y a bien sûr ici aucun test d’erreur ... mais il faut penser que l’utilisateur ne va pas forcément
donner deux entiers ! Il existe deux méthodes pour transmettre des données au serveur : la
méthode GET et la méthode POST. Nous y reviendrons plus tard.
Le CGI est la solution la plus ancienne, et sans doute encore la plus utilisée, pour la gestion de sites web dynamiques. La figure 1.2 illustre les composants d’une architecture CGI. Le
client envoie une requête (souvent à partir d’un formulaire HTML, ce qui permet de transmettre
des variables) qui est plus complexe que la simple demande de transmission d’un document.
Cette requête consiste à faire déclencher une action (déterminée par le champ action de la balise
<FORM>) sur le serveur. Les CGI peuvent par exemple accéder à une base de données pour fournir
des résultats.
L’exécution du programme CGI par le serveur web se déroule en trois phases :
– Requête du client au serveur : le serveur récupère les informations transmises par le client
(le navigateur), c’est-à-dire le nom du programme CGI accompagné, le plus souvent, de
paramètres saisis par l’utilisateur dans un formulaire.
– Exécution du programme CGI : le serveur déclenche l’exécution du programme CGI en lui
fournissant les paramètres reçus.
– Transmission du document HTML : le programme CGI renvoie le résultat de son exécution
1.3 Programmation côté serveur : PHP/MySQL
19
SQL
Programme
serveur
Requetes
Serveur
mysqld
INTERNET
Client
Données
Document(s)
HTML
Base de
données
Fichier PHP
Serveur
Fig. 1.3 – Architecture PHP/MySQL
au serveur sous la forme d’un fichier HTML, le serveur se contentant alors de faire suivre
au client.
1.3
Programmation côté serveur : PHP/MySQL
Une autre solution de programmation côté serveur est le PHP, qui est très souvent associé à
MySQL. Un script PHP est exécuté par un interpréteur généralement intégré à Apache sous
forme de module. Quand un fichier PHP est demandé au serveur (le client solicite l’affichage
d’une page d’extension .php2 ), ce dernier le charge en mémoire et transmet le script PHP à
l’interpréteur. Celui-ci exécute le script et produit du code HTML qui vient remplacer le script
PHP dans le document transmis au client. Ce dernier ne reçoit donc que du code HTML et ne voit
jamais la moindre instruction PHP. Le principe est très proche des CGI avec des améliorations
notables :
– Il s’agit d’un langage enfoui (embeded ) : à l’intérieur d’un code HTML on va inclure des
instructions PHP. L’intégration se fait dnc de manière très souple.
– Les variables issues des formulaires sont fournies directement et sans effort.
– Enfin, les scripts sont effectués directement au sein d’Apache, ce qui évite d’avoir à lancer
systématiquement un programme CGI.
Un des grands atouts de PHP est sa possibilité de se connecter à un serveur MySQL (démon
mysqld ) pour récupérer est exploiter des données. L’architecture de ce système est donnée en
figure 1.3. Il s’agit d’une architecture à trois composantes, chacune réalisant une deds trois tâches
fondamentales d’une application.
– Le navigateur constitue l’interface graphique dont le rôle est de permettre à l’utilisateur
de visualiser et d’interagir avec l’information.
– MySQL est le serveur ded données.
– Enfin l’ensemble des fichiers PHP contenant le code d’extraction, traitement et mise en
2
L’extension des scripts
/etc/apache/httpd.conf.
PHP
est
paramétrable
dans
le
fichier
de
configuration
d’Apache
:
20
forme des données constitue le serveur d’application, associé à Apache qui se charge de
transférer les documents produits sur internet.
Dans l’exemple présenté, le serveur mysqld et Apache se situent sur la même machine mais d’un
point de vue technique il est aussi simple de les séparer physiquement.
Nous allons maintenant nous intéresser plus particulièrement au fonctionnement d’Internet.
2
Internet
I am Linus Torvalds, and yes I am your God.
Linus Torvalds
Dans ce chapitre nous ferons un rapide survol de l’historique d’Internet et de son architecture.
2.1
Historique
Le début d’Internet remonte à la fin deds années 1960 avec le réseau ARPANet (Advanced
Research Projects Agency Network of the Department of Defense)). Ce système de communication d’ordinateur en réseau sans structure centralisée était destiné à une utilisation militaire :
le réseau pouvait supporter la perte de plusieurs machines sans compromettre la capacité de
communication des machines restantes. Développé par le laboratoire ARPA du département de
la défense américain, ce réseau utilisait le protocole NCP (Network Control Protocol).
Dans les années 1970, seuls les laboratoires, universités et le gouvernement américain pouvaient
se connecter au réseau ARPANet.
En 1974 un nouveau protocole voit le jour : TCP/IP (Transmission Control Protocol/Internet
Protocol ). Développé par Vinton Cerf et Robert Kahn (pionnier d’ARPANet), il s’agit d’une
suite de protocoles permettant à des machines de réseaux différents de communiquer (ce que ne
pouvait pas faire NCP).
En 1983 le protocole TCP/IP remplace définitivement NCP et on assiste à la naissance du terme
”Internet” (Interconnected Networks). Internet est donc le réseau mondial des réseaux qui utilisent le protocole TCP/IP pour communiquer.
Mais ces évènements ne suffisent pas pour décrire l’Internet que nous connaissons : seuls les
transferts de données brutes sont possibles avec un tel système. Il manque un langage permettant de visualiser rapidement des informations. C’est dans les années 1980 que des physiciens du
22
Chapitre 2. Internet
CERN proposèrent l’adoption d’un langage qu’ils avaient développés pour la création et le partage de document électroniques intégrés permettant le multimédia sur Internet. Ainsi naquirent
le HTML, les logiciels de navigation et le World Wide Web.
De nos jours, le World Wide Web Consortium (W3C) définit les spécifications HTML et standardise toute technologie relative au web (normes HTTP, CSS, XML, ...).
2.2
Le protocole TCP/IP
Le TCP/IP est un protocole réseau, c’est-à-dire un ensemble de règles et de procédures à
respecter pour émettre et recevoir des informations sur le réseau. Les protocoles contenus dans
TCP/IP sont :
– HTTP (World Wide Web)
– FTP (transfert de fichiers)
– SMTP (transfert du courrier électronique)
– Telnet (interfaçage terminaux/applications à travers Internet)
– etc.
Les informations sont transmises par paquets sous forme de datagramme :
Champ
Version
Lg
ToS
Lg totale
Identifiant
Flags
Offset fragment
TTL
Protocole
Somme de contrôle
Adresse source
Adresse destination
Options
Données
2.3
Bits
4
4
8
16
16
3
13
8
8
16
32
32
-
Description
Numéro de version du protocole
Longueur de l’en-tête en mots de 32 bits
Qualité de service (caractérise la priorité du flux)
Longueur totale du datagramme en octets
Identifiant de fragment
Drapeaux de fragmentation
Offset de fragment en mots de 64 bits
Durée de vie du datagramme
Protocole encapsulé dans les données
Somme de contrôle de l’en-tête
Adresse de l’expéditeur du datagramme
Adresse du destinataire du datagramme
Options Internet (sécurité, routes statistiques, ...)
Bits de données
Adresse IP et DNS
Toute machine connectée à internet doit posséder un identifiant unique : c’est l’adresse (numéro)
IP. Cette adresse est attribuée par l’IANA (Internet Assigned Numbers Agency) et elle suit la
structure définit par le protocole IPv4 : suite de quatre entiers codés sur 8 bits (nombres compris
entre 0 et 255) et séparés par des points (par exemple : 193.50.130.266).
Pour les réseaux équipés d’un proxy (seul à avoir une ”véritable” adresse IP), on utilise des
adresses IP internes pour éviter tout conflit avec l’extérieur.
L’adresse peut être fixe (serveur d’entreprise) ou variable (attribuée par un FAI (Fournisseur
2.4 Architecture
23
d’Accès Internet) à chaque connexion).
On peut attribué à chaque ordinateur un nom. Ce nom, couplé au nom du sous-réseau auquel appartient l’ordinateur fournit un identifiant unique permettant de l’identifier. Ce sousréseau est appelé domaine et on parle d’adresse DNS (Domain Name Server ). Par exemple :
cmi.univ-mrs.fr. L’adresse DNS suit une structure arborescente ; elle est divisée en deux composantes :
– le nom de l’organisation ou de l’entreprise : cmi.univ-mrs où cmi est le nom d’hôte
(machine) et univ-mrs est le domaine considéré
– la classification de domaine : .fr, .com, ... il s’agit de la répartition géographique,
thématique, ...
Le serveur de domaine (serveur DNS) est une machine dans le réseau qui fait la correspondance
entre les noms et les adresses IP.
2.4
Architecture
Il existe deux types d’architecture web :
– l’architecture 2-tiers : le navigateur (client) demande une page (requête HTTP) et le
serveur web fournit directement la réponse (réponse HTTP).
– l’architecture 3-tiers : le client demande une page, le serveur web fait appel à un serveur de
Base de Données pour obtenir des informations, le serveur de BD fournit le service requis
au sevreur web, et enfin le serveur web structure les informations obtenues en page web
et les envoie au navigateur.
2.5
Le protocole HTTP
Le protocole HyperText Transfert Protocol est le protocole standardisé (RCF2068) de TCP/IP.
Il s’agit d’un modèle client-serveur pour transfert de documents hypertextes. Utilisé depuis 1990,
il a vu ses possibilités augmenter :
– version 0.9 : seulement transfer de pages en HTML
– version 1.0 : transfert de pages HTML contenant des données multimédia : codage de type
MIME (voir ci-après)
– version 1.1 : connexions persistantes
2.6
Le type MIME
Le type MIME (pour Multipurpose Internet Mail Extension) fournit des informations pour
décoder un contenu et utiliser l’application adéquate pour l’afficher. Il permet l’insertion de documents externes (images, sons, texte, ...). Il est constitué de la manière suivante :
Content-type: type_mime_principal/sous_type_mime
Ainsi, pour une image PNG utilisera-t-on : Content-type: image/png, pour un document
HTML : Content-type: text/html, ...
Voici un exemple de type MIME dans un mail :
24
Chapitre 2. Internet
From: [email protected]
To: [email protected]
Subject: Test MIME
MIME-Version: 1.0
Content-type: multipart/mixed; boundary="Borne-Fin"
Ceci est un message MIME
--Borne-Fin
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: 7bit
Et voici une photo de Tux :
--Borne-Fin
Content-type: image/png; name="tux.png"
Content-Transfer-Encoding: base64
/9j/4Q4eRXhpZgAASUAAAKAAAgAgB8gAAAICAgAgwAUAUgICAgICAg ...
2.7
URL
Pour désigner une ressource internet, on utilise un format de nommage universel (RFC1738) :
l’URL (Uniform Ressource Locator ). Il s’agit d’une chaı̂ne de caractères ASCII de la forme :
protocole://[authentification@]serveur[:port]/chemin[#interne]
Les différents types de protocoles : file (accès local), http (documents HTML), ftp (transfert de
fichiers), mailto (adresse de courrier électronique), etc. L’authentification est facultative (permet
la connexion à un serveur grâce à un login). Cette manière de faire est déconseillée car les
identifiants de connexion apparaissent en clair dans l’URL.
Exemples d’URL :
file:///home/tristan/Articles/Cours/HTML/cours.tex
ftp://ftp.ncbi.org
http://www.lcb.cnrs-mrs.fr
http://www.w3.org/MarkUp/#recommandations
3
HTML
Computers are like Old Testament gods ; lots of rules and no mercy.
Joseph Campbell
Voici une présentation des fonctionnalités les plus courantes du HTML.
3.1
Les bases du langage
Un document HTML est un ensemble structuré d’éléments. Un élément est un bloc de texte
qui peut être constitué :
– d’une balise unique : exemple <BR>3
– de deux balises s’appliquant à un contenu :
– balise ouvrante
– contenu
– balise fermante
Par exemple : <B>un texte en gras</B>
On appelle balise, ou tag, les caractères < et > entre lesquels se trouvent le nom de l’élément et
éventuellement des attributs ayant une valeur (après le signe =). Par exemple :
<IMG src="tux.png" alt="Tux" /> Les éléments src et alt sont des attributs de la balise
<IMG>.
On distinguera également les balises ouvrantes et fermantes : elles possèdent le même nom mais
le nom de la balise fermante est précédé du symbole /.
3
N’existe plus en XHTML. On préfèrera utiliser ¡BR /¿ qui est une balise unique ouvrante-fermante.
26
Chapitre 3. HTML
3.1.1
Conventions et caractères spéciaux
Par convention, on écrit le nom des balises en majuscules et les attributs en minuscules, et
on ajoute un niveau d’indentation à chaque ouverture de balise et on en retire un à chaque
fermeture de balise. Il ne s’agit que d’une convention ! Les balises <IMG src="tux.png" />,
<img SRC="tux.png"> et <img src="tux.png"> seront traitées de la même manière.
Certains caractères, tels que <, >, & .. sont deds caratères réservés du HTML. Ces caractères,
de même que les caractères accentués ne peuvent pas être écrit directement, il faut utiliser un
codage de type &MotClé; ou &#code_ascii. Voici un tableau des principaux codes :
caractère
<
&
codage
&lt ;
&amp ;
&nbsp ;
caractère
>
"
codage
&gt
&quot ;
Pour les caractères accentués, il suffit d’ajouter à la lettre le mot clé correspondant à l’accent
désiré :
diacritique
’
^
◦
ç
codage
acute ;
circ ;
ring ;
cedil ;
diacritique
‘
~
”
/
codage
grave ;
tilde ;
uml ;
slash ;
Ainsi, par exemple, é est codé par é, è est codé par è, à est codé par &agrave
ou Þ, ...
3.1.2
Codage des couleurs et des unités de longueur
Les couleurs peuvent être utilisées de deux manières. Soient codées en RGB où chaque onde est
elle même codée en hexadécimal de 00 (0%) à FF (100%). Ainsi, par exemple :
#000000
#87CEEB
#FFFF00
#FFFFFF
:
:
:
:
blanc (white)
bleu ciel (skyblue)
jaune (yellow)
noir (black)
Une deuxième manière est d’utilisé un nom de couleur publié par le W3C :
silver, purple, lavender, etc.
Les unités de longueur/largeur utilisables sont résumées dans le tableau suivant :
suffixe
px
pt
cm
mm
%
unité
pixel
point
centimètre
milimètre
pourcentage de largeur/hauteur d’écran
Structure d’un document HTML
3.1.3
27
Structure d’un document HTML
Les documents HTML suivent une grammaire appelée DTD écrite en SGML (métalanguage).
Il existe trois DTD possibles pour HTML 4.0.1 :
– strict : exclut les éléments et attributs de présentation (DTD pour les feuilles de style
CSS)
– transitional : DTD complète
– frameset : pour les pages découpées en cadres. Identique à transitional sauf pour la
déclaration du contenu de l’élément <HTML>.
A l’intérieur d’un document HTML, les balises suivent une imbrication hiérarchique cumulant
les propriétés et le chevauchement n’est pas toléré. Exemples :
<B><I>gras et italique</I></B> provoque l’affichage : gras et italique
<B><I>mauvaise imbrication</B></I> : les balises se chevauchent ...
Voici maintenant comment déclarer le type du document pour strict, transitional et frameset :
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Cette ligne d’instructions précise :
– l’élément racine de la DTD (ici HTML) : il s’agit du symbole initial dont les balises vont
encadrer toute la description du document (<HTML> ... </HTML>).
– la norme est publiée sur internet (PUBLIC)
– la DTD ne suit pas la norme ISO (-), elle est produite par le W3C (W3C) sous le nom
DTD HTML 4.0.1 en langue anglaise (EN)
– l’URL qui indique l’adresse où télécharger la DTD au cas où le navigateur en aurait besoin
De manière générale, un document se compose donc d’une balise indiquant la DTD (<DOCTYPE>),
suivi d’un en-tête du document (<HEAD>) donnant des informations sur la page (titre, auteur,
...), et du corps du document (<BODY>) qui constitue la partie affichée par le navigateur.
3.1.4
Les balises d’en-tête
Les informations d’en-tête sont données à l’aide de la balise <HEAD>. Les éléments contenus dans
<HEAD> ne sont pas affichés dans la page. Il peut contenir plusieurs sous balises :
– la balise <TITLE> qui permet de définir le titre de la page (obligatoire)
28
Chapitre 3. HTML
<TITLE>Titre de la page</TITLE>
– la balise <LINK> qui permet de lier un objet à la page. On utilise par exemple cette balise
pour afficher une petite icône dans le navigateur à gauche de l’adresse de la page.
<LINK rel="SHORTCUT ICON" href="favicon.ico" />
Pour générer l’icône favicon.ico (attention, ce nom est obligatoire), on peut utiliser le
site http://www.html-kit.com/e/favicon.cgi qui permet de générer une icône à partir
d’un fichier image jpg.
– la balise <BASE> qui indique la base commune de tous les liens hypertextes de la page
(URL relatives)
<BASE href="http://www.lcb.cnrs-mrs.fr" />
– la balise <META> pour ”méta-données” et qui permet l’ajout d’informations.
– Appel d’une autre page après un délai de x secondes
<META http-equiv="refresh" content="x"; url="http://www.autrepage.com">
– Spécification de l’encodage supporté par le navigateur
<META http-equiv="charset" content="iso-8859-1">
– Référencement de la page (auteur)
<META name="author" content="Elessar">
– Référencement de la page (mots clés)
<META name="keywords" content="HTML, javascript, CSS">
– Référencement de la page (description)
<META name="description" content="Description de la page">
– Référencement de la page (copyright)
<META name="copyright" content="(C) 2005 - Elessar">
– Référencement de la page (date)
<META name="date" content="20/07/2005">
3.1.5
Document HTML minimal
Avant que d’aborder des balises plus complexes du HTML, vous trouverez sur la page suivante
un document HTML minimal.
3.2 Balises HTML
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN"
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<META name="author" content="Elessar">
<META name="keywords" content="HTML, javascript, CSS" >
</HEAD>
<BODY>
Corps du document.
</BODY>
</HTML>
3.2
Balises HTML
La balise principale de tout document HTML est la balise <BODY>. Le tableau suivant résume
quelques attributs qui peuvent être affectés à cette balise.
Attribut
background=”image”
text=#rrggbb
link=#rrggbb
vlink=#rrggbb
3.2.1
Fonction
image utilisée comme fond d’écran (ou alors couleur)
couleur du texte en RGB
couleur des liens hypertextes en RGB
couleur des liens hypertextes déjà visités en RGB
Elements de style
Plusieurs changements de style son disponibles :
– changements de style du contenu :
– <B> : met en gras
– <BIG> : met en gros (taille + 1 par rapport à la fonte courante)
– <I> : met en italique
– <SMALL> : met en petit (taille - 1 par rapport à la fonte courante)
– <U> : met en souligné
– changements du style logique (pas d’effet visuel mais peut être utilisé avec une feuille de
style) :
– <ABBR> : abréviation
– <ACRONYM> : acronyme
– <CITE> : citation
30
Chapitre 3. HTML
– <CODE> : code de programme
– <EM> : emphatique (mise en valeur)
– <Q> : citation courte
– <STRONG> : texte important
– changements de style des paragraphe :
– <P> : définition d’un paragraphe simple
– <PRE> : définition d’un paragraphe concervant les tabulations, ...
– <BLOCKQUOTE> : indentation d’un paragraphe
– <DIV> : définition d’une division à laquelle on va appliquer un style.
Exemple : <DIV align="center">texte centré</DIV>
– changements de style des titres :
Il existe six niveaux de titres (headings) : H1, H2, H3, H4, H5 et H6 tels que :
<H1>Taille maximale</H1> et <H6>Taille minimale</H6>
3.2.2
Listes
En HTML, deux types de listes sont définis :
– les listes ordonnées (items numérotés 1, 2, .. ou A, B, ...). Ces listes sont définies à l’aide
de :
– <OL> : contient la suite d’items et éventuellement l’en-tête
– <LH> : en-tête de liste (facultatif)
– <LI> : contient un item
Pour changer le type de numérotation, on pourra utiliser la valeur de l’attribut type par
la valeur 1, A, a, I ou i. Par exemple :
<OL type="i">
<LH>Liste :</LH>
<LI>1er item</LI>
<LI>2ème item</LI>
</OL>
Ce qui donnera :
Liste :
i. 1er item
ii. 2ème item
– les listes non ordonnées. Elles sont définies par :
– <UL> : contient la suite d’items et éventuellement l’en-tête
– <LH> : en-tête de liste (facultatif)
– <LI> : contient un item
Là encore, il est possible de changer le style des puces grâce à l’attribut type et aux valeurs
circle, square ou disc.
Ces différents types de liste peuvent bien sûr être imbriqués.
Tableaux
3.2.3
31
Tableaux
L’élément <TABLE> permet de définir un tableau. Il peu contenir les balises :
– <CAPTION> : contient le titre du tableau qui sera encadré
– <TR> : contient une ligne du tableau
– <TH> : contient les données d’une cellule de l’en-tête
– <TD> : contient les données d’une cellule
Exemple :
<TABLE>
<TR>
<TH>Col 1</TH>
<TH>Col 2</TH>
</TR>
<TR>
<TD>Lg 1, Col 1</TD>
</TR>
<TR>
</TR>
</TABLE>
Ce qui produit l’affichage :
Col 1
Lg 1, Col 1
Lg 2, Col 1
Col 2
Lg 1, Col 2
Lg 2, Col 2
Voici maintenant quelques attributs de balise et leurs valeurs possibles :
attribut
align
valign
border
cols
cellpadding
balises possibles
<TH> <TR> <TD>
<TH> <TR> <TD>
<TABLE>
<TABLE>
<TABLE>
valeurs
center, left, right, justify
top, middle, bottom
entier : taille de la bordure en pixels
entier : nombre de colonnes
entier : espacement (pixels) entre les cellules et l’encadrement
32
3.2.4
Chapitre 3. HTML
Liens hypertextes et ancrages
Un lien est une référence qui permet d’accéder directement à un autre document – dit document
lié – ou à un paragraphe de la page en cours. Ce lien est défini à l’aide d’une balise d’ancrage,
le <A>. On parlera d’ancre source pour indiquer le texte situé entre les balises <A>, et d’ancre
destination pour indiquer le document pointé. Ce document de destination est indiqué à l’aide
de l’attribut href. Exemple : <A href="page2.html">Vers Page 2</A>
Rappel : la couleur des liens peut être définie grâce aux attributs de la balise <BODY>.
Pour insérer des liens vers une portion d’une même page, il va falloir marquer les points de la
page qui seront des destinations :
<A name="label">Portion de document où je souhaite me rendre</A>. La référence
se fait alors par : <A href="#label">Déplacement vers la portion choisie</A>. Pour une
référence à un label d’une autre page, il suffit de spécifier le nom de la page auparavant :
<A href="page.html#label">lien</A>.
Pour envoyer un mail (activer le logiciel de gestion de courrier configuré avec le navigateur) :
<A href="mailto:nom@adresse">Envoyer un mail</A>.
Enfin, pour ajouter une bulle d’aide lorsque la souris passe au dessus d’un lien :
<A href="page.html" title="bulle d’aide">lien</A>.
3.2.5
Les images
Les images sont incluses à l’aide de la balise <IMG />. Voici les attributs disponibles :
– src="url_image" : URL de l’image au format gif, jpeg ou png.
– alt="texte" : texte à afficher à la place de l’image si cette dernière ne peut être chargée.
Attention ! Cet attribut est obligatoire !
– align="..." : alignement de l’image par rapport au texte qui l’entoure (bottom, top,
middle, left, right)
– height="taille" : hauteur de l’image (style="height: ..px")
– width="taille" : largeur de l’image (style="width: ..px")
– border="taille" : taille de la bordure de l’image (à mettre à 0 si l’image sert de lien)
– usemap="carte" : image réactive (voir section suivante)
3.2.6
Les images réactives
Une image réactive est une image simple, insérée à l’aide de <IMG /> mais à laquelle on associe
une ”carte” indiquant les zones ”réactives” ou ”cliquables”. Ces zones sont définies à l’aide de
formes élémentaires (coordonnées et distances en pixels) :
– rectangle (attribut rect) x1 , y1 , x2 , y2 (coins supérieur gauche et inférieur droit)
– cercle (attribut circle) x, y, r (coordonnées du centre et rayon)
– polygone (attribut poly) x1 , y1 , ..., xn , yn (coordonnées de chacun des sommets du polygone)
Les cadres
33
Supposons que nous disposions d’une image image.png de 150 x 100 pixels. On veut qu’en
cliquant sur le coin supérieur gauche de l’image on soit renvoyé vers page1.html et en cliquant
dans la zone centrale du cercle vers page2.html. On écrira alors :
<IMG src="image.png" alt="Image réective" usemap="#carte" />
<MAP name="carte">
<AREA shape="rect" coords="0, 0, 20, 20" href="page1.html" />
<AREA shape="circle" coords="75, 50, 10" href="page2.html" />
</MAP>
Pour désactiver une zone, on utilisera l’attribut noref en lieu et place de href.
Note : les images réactives peuvent être réalisées de manière beaucoup plus rapide grâce à des
logiciels comme Gimp.
3.2.7
Les cadres
L’utilisation des cadres nécessite un changement de DTD : il faudra utiliser la DTD Frameset et
la balise <BODY> de la page principale sera remplacée par <FRAMESET>4 . On va pouvoir afficher
plusieurs pages dans différentes zones (cadres) d’une même page HTML. Le découpage de la
page mère peut se faire verticalement :
<FRAMESET cols="n1, n2 ...">

</FRAMESET>
ou horizontalement :
<FRAMESET rows="n1, n2 ...">

</FRAMESET>
La dimension des cadres (éléments n1, n2, ... précédents) se donne en pixels ou en pourcentage
de la hauteur/largeur de la page. Le contenu d’un cadre se définit à l’aide de
<FRAME src="nom_page" name="label_page" />.
On peut désigner un cadre avec un lien hypertexte (gestion d’un menu, etc.) : dans un des
cadres du document courant, l’activation de <A href="page.html" target="gauche">...</A>
provoque l’affichage du contenu de page.html dans le cadre du document courant dont l’attribut
name vaut gauche.
Pour finir, voici quelques attributs disponibles pour les balises <FRAMESET> et <FRAME />.
– Pour <FRAMESET> :
attribut
valeurs
action
frameborder YES NO
indique si le cadre à une bordure ou non
border
nombre de pixels épaisseur de la bordure
framespacing nombre de pixels espace entre les cadres
4
Ensemble de frames ou cadres
34
Chapitre 3. HTML
– Pour <FRAME> :
attribut
valeurs
action
marginwidth nombre de pixels taille des marges latérales
marginheight nombre de pixels taille des marges du haut et du bas
Attention ! Les cadres ne sont pas gérés par certains navigateurs. Il faut alors proposer une
alternative d’affichage dans la balise <FRAMESET> avec :
<NOFRAMES>
<BODY>
Cette page utilise des cadres pour s’afficher correctement.
</BODY>
</NOFRAMES>
3.2.8
Les formulaires
Les formulaires permettent à l’utilisateur d’envoyer des informations vers le serveur. D’après le
protocole HTTP, il existe deux méthodes d’envoi :
– GET qui ajoute les informations à transmettre à l’URL (ex :
http://www.annuaire.com?nom=Bing&prenom=Chandler
Les caractères spéciaux seront codés par le caractère % suivi du code ASCII du caractère
spécial.
– POST qui ajoute des informations dans le corps de la requête HTTP (invisible pour
l’utilisateur)
Pour déclarer un formulaire, on utilise le tag <FORM> et les deux attributs action pour définir
l’URL de la cible (programme qui va traiter les données) et method qui défini la méthode
d’envoi. A l’intérieur d’un tag <FORM>, on utilisera des éléments interactifs permettant de saisir
des données :
<FORM action="URL de la cible (script, mail)" method="GET/POST">

</FORM>
Les éléments interactifs
35
Fig. 3.4 – Les différentes valeurs de l’attribut type du tag <INPUT / >
3.2.8.1
Les éléments interactifs
Elément INPUT Le tag <INPUT /> permet de définir des boutons ou des champs de saisie.
Voici ces attributs :
attribut
type
name
size
maxlength
checked
value
rôle
type de l’entrée (voir figure 3.4
nom symbolique
nombre de caractères affichables (type text ou password)
nombre de caractères autorisés (text ou password)
bouton checkbox ou radio sélectionné par défaut
valeur du champs
Note sur l’attribut value :
– pour les champs text ou password : permet de définir le texte par défaut
– pour les boutons submit ou reset : permet de définir l’étiquette du bouton
– pour les boutons checkbox ou radio : permet de définir la valeur de retour du bouton s’il
est activé (checked pour définir la valeur par défaut).
– pour le champs hidden : permet de définir la valeur de la variable cachée
36
Chapitre 3. HTML
Elément SELECT Le tag <SELECT> permet de proposer un menu déroulant permettant de
sélectionner un ou plusieurs des items. Ces attributs :
nom
name
size
multiple
rôle
nom symbolique
si 1 alors menu déroulant sinon taille de la liste
attribut sans valeur : si présent alors sélection multiple sinon sélection simple
Les balises <OPTION> placée entre les tags <SELECT> permettent de définir les items de la liste.
<OPTION selected> permet de définir l’élément par défaut. Exemple (voir résultat en figure
3.5 :
<FORM action="traitement.cgi" method="POST">
<DIV align="center">
<H3>Le tag SELECT</H3>
<TABLE border = 1>
<TR>
<TD>Liste de choix</TD>
<TD align="center">
<SELECT size="1">
<OPTION>Item 1</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</DIV>
</FORM>
Elément TEXTAREA Le tag <TEXTAREA> permet de définir une zone de texte de x colonnes
par y lignes (attributs cols et rows). Exemple :
<FORM action="traitement.cgi" method="POST">
<H3>Le tag TEXTAREA</H3>
<TEXTAREA cols="20" rows="50">
Texte par défaut ici ...
</TEXTAREA>
</DIV>
</FORM>
3.3 Conclusion
37
Fig. 3.5 – Sélection dans une liste avec <SELECT>
3.3
Conclusion
HTML est un langage de balises pour la structuration de documents. Une interactivité avec
l’utilisateur est autorisée par le biais des formulaires. Toutefois, ces formulaires doivent être
traités à l’aide de langages de programmation car HTML n’est pas un langage de programmation.
HTML n’est pas compilé et son interprétation par les différents navigateurs peut différer : ce qui
fonctionne sur un navigateur ne fonctionnera peut-être pas correctement sur un autre ... Pour y
remédier : respecter la DTD et utiliser des outils de validation5 pour vérifier son code.
5
HTML Validator (basé sur Tidy) dans Mozilla-Firefox et/ou le site du W3C
4
CSS : Styles en cascade
Le concept de l’opensource oblige distributeurs et développeurs à rester honnêtes.
Linus Torvalds
feuilles de styles en cascades permettent de définir la manière dont sera affichée une page
LesHTML
(éléments de style) et ceci pour une page ou pour un ensemble de documents. On
peut ainsi définir le fait qu’un lien non visité sera vert, un titre de premier niveau <H1> sera
affiché dans une police de 28 points, avec des caractères majuscules et en italique, ...
Les styles CSS sont, comme les pages HTML, soumis aux règles du W3C (pour valider une
feuille CSS : http://www.w3.org). Ils sont spécifiés sous forme de liste de paires nom/valeur de
propriétés séparées par des points virgules. Le nom et la valeur sont séparés à leur tour par deux
points. Par exemple, le style suivant décrit un texte en italique, de couleur verte et souligné :
font-style: italic; color: green; text-decoration: underline;
Ces styles doivent être écrits sous forme de règles : un sélecteur (tag) et la liste des paires
nom/valeur entre accolades. Pour appliquer l’exemple précédent à tous les titres de premier
niveau, on ferait :
H1 {font-style: italic; color: green; text-decoration: underline;}
Tous les titre <H1> seraient alors affichés avec ce style. Pour définir des styles spécifiques à une
condition donnée, on créera une classe. Dans notre cas, on peut créer la classe vert :
H1.vert {font-style: italic; color: green; text-decoration: underline;}
Cet élément de style ne s’appliquera qu’aux titres de premier niveau appartenant à la classe
vert (par un appel à <H1 class="vert"> ou pour un tag <H1> se trouvant dans une balise
<DIV class="vert">).On peut également déclaré des classes génériques : ce sont des classes qui
pourront être appliquées à de multiples tags. Par exemple,
.vert {font-style: italic; color: green; text-decoration: underline;}
pourra être appliquée à <P class="vert">, <H2 class="vert">, ...
Outre les classes pouvant être définies par le programmeur, il existe sept pseudo-classes définissant
40
Chapitre 4. CSS : Styles en cascade
des événements spécifiques à certains tags. Pour les différencier des autres classes lors de la
création, on remplace le point unique par deux points (par exemple : a:link {color: green;}).
La liste de ces pseudo-classes sera donnée dans la suite.
Remarque : Les commentaires des pages CSS ne suivent pas la même norme que le HTML ; il
s’agit des commentaires issus du C : /* ... */.
4.1
Philosophie des cascades
Littéralement, CSS signifie ”Cascading style sheets” : feuilles de style en cascade. Le terme de
”cascade” signifie que les règles de style qui s’appliquent à un élément donné dans un document
peuvent venir en cascade de différentes sources. En effet, le style peut être défini de multiples
manières. Voici l’ordre de priorité : la feuille de styles de l’utilisateur annule la feuille de styles par
défaut du navigateur, les feuilles de styles de l’auteur écrasent la feuille de style de l’utilisateur
et les styles en ligne (tag <STYLE>) écrasent tous les autres styles. De plus, dans une feuille de
styles, si plusieurs règles s’appliquent à un élément, les styles définis par la règle la plus spécifique
annulent les styles conflictuels définis par des règles moins spécifiques.
4.2
Application d’une feuille CSS à un document
Une feuille CSS est une feuille ne contenant que des règles de style et se trouve donc séparée du
document HTML : il faut donc la rattacher au document6 . Il existe deux méthodes différentes
permettant de charger la feuille de styles. Toutes deux doivent être placée dans le tag <HEAD>.
– Grâce au tag <LINK /> qui cré une relation entre le document courant et un autre document :
<LINK rel="stylesheet" type="text/css" href="mon_style.css" />
– L’importation dans le tag <STYLE> grâce à la directive @import :
<STYLE type="text/css" media="all">
@import "mon_style.css";
</STYLE>
Note : Un tag très important pour le style est le tag <SPAN>. Ce tag marque une zone de texte
en laissant son style inchangé. Par la suite, il pourra être très utile grâce aux CSS ...
6
Il est possible de la définir directement dans le document grâce à la balise <STYLE> placée dans <HEAD>
mais cette méthode est déconseillée.
4.3 Quelques propriétés de style CSS et leurs valeurs
4.3
4.3.1
41
Quelques propriétés de style CSS et leurs valeurs
Les pseudo-classes
Il existe en tout sept pseudo-classes, trois d’entre elles étant explicitement associées au tag <A>.
– a:link pour un lien non visité
– a:active pour un lien activé (actuellement chargé et traité par le navigateur)
– a:visited pour un lien visité
Les autres pseudo-classes sont :
– :hover qui active un style lorsque la souris est au-dessus de l’élément.
– :focus qui active un style lorsque l’élément devient le centre d’attention (en cliquant
dessus ou en le sélectionnant avec la touche de tabulation).
– :lang qui active un style en fonction de la langue sélectionnée dans un tag <DIV lang=...>.
– :first-child qui active un style lorsqu’il est l’enfant de l’élément conteneur.
Les deux dernières pseudo-classes ne sont pas encore prises en charge par les navigateurs.
4.3.2
Polices
– font-family : liste de noms de polices séparées par une virgule (serif, sans-serif,
monospace, cursive, fantasy). Le navigateur utilise la première police désignée dans
la liste qui est également disponible sur la machine du client. Note : la police par défaut
du système est caption.
– font-size : définit la taille de la police en valeur absolue ou relative, en pourcentage ou en
utilisant des mots clés (xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger).
– font-stretch : paramétrage de la compression ou de l’étirement des caractères (normal, wider,
narrower, ultra-condensed, extra-condensed, condensed, semi-condensed,
semi-expanded, expanded, extra-expanded, ultra-expanded).
– font-style : style incliné de la police (normal, italic, oblique).
– font-variant : affichage des lettres minuscules en capitales minuscules ou non (normal,
small-caps).
– font-weight : contrôle le gras des caractères (normal, bold, bolder, lighter, 100,
200 ... 900).
– font : permet de spécifier plusieurs propriétés de police en une seule règle. Par exemple,
font-style: italic;
font-family: serif, monospace;
font-size: 12pt;
peut être résumé en :
font: italic 12pt serif, monospace
42
4.3.3
Couleurs
– background-attachement : spécifie comment une image de fond est attachée dans le
navigateur (scroll, fixed). Avec la valeur scroll, le navigateur déplace l’image en
même temps que les éléments superposés lorsque l’utilisateur fait défiler l’écran. Avec la
valeur fixed, l’image de fond reste fixe et les éléments défilent par dessus.
– background-color : définit la couleur de fond d’un élément (nom de couleur, transparent).
La valeur par défaut est transparent. Note : la valeur de couleur par défaut pour le
système est ActiveCaption.
– background-image : place une image en arrière plan du contenu d’un élément
(URL de l’image url(), none).
– background-position : position de départ de l’image de fond (top, center, bottom,)
et (left, center, right) ou (nombre) et (nombre) ou (pourcentage) et (pourcentage).
– background-repeat : Répétition de l’image de fond pour couvrir tout le fond (repeat,
repeat-x, repeat-y, no-repeat). repeat-axe permet de répéter l’image uniquement
sur l’axe indiqué.
– background : permet de spécifier en une seule commande tous les paramètres d’image
d’arrière plan énumérés précédemment. Par exemple,
background-image: url(backgrounds/tux.jpg); background-position: top center;
background-repeat: repeat-x; peut être résumé en :
background: url(backgrounds/tux.jpg) repeat-x top center;
– color : définit la couleur d’avant-plan du contenu d’un élément (couleur).
4.3.4
Texte
– letter-spacing : définit un espace supplémentaire entre les caractères du texte
(normal, nombre).
– line-height : définit l’interlignage du texte formant le contenu d’un élément
(normal, nombre, pourcentage).
– text-align : justification du texte par rapport aux marges de la page (left, right, center,
justify)
– text-decoration : décore le texte (underline, overline, line-through, blink).
– text-indent : indentation d’un texte (nombre, pourcentage).
– text-shadow : apparence en 3D du texte en utilisant des ombres portées
(none, nombre nombre nombre couleur : les trois nombres indiquent le décalage horizontal, le décalage vertical et le rayon de dispersion).
– vertical-align : position relative d’un élément par rapport à la ligne contenant l’élément
(baseline, sub, super, top, text-top, middle, bottom, text-bottom, pourcentage,
nombre).
– word-spacing : ajoute un espace supplémentaire entre les mots du contenu d’un élément
(normal, nombre).
– text-transform : convertit des blocs de texte en majuscules ou en minuscules (capitalize,
uppercase, lowercase, none).
Cadrage
4.3.5
43
Cadrage
– border-color : couleur de la bordure (1 à 4 valeurs de couleurs définissant les côtés de la
bordure).
– border-width : largeur de la bordure (thin, medium, thick, nombre).
– border-style : style de la bordure (none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset).
– border-top : admet les trois paramètres précédents pour la bordure supérieure.
– border-bottom : idem avec la bordure inférieure.
– border-left : idem avec la bordure gauche.
– border-right : idem avec la bordure droite.
– float : désigne l’affichage d’un élément comme un élément flottant et force le texte à se
dérouler autour de lui de la manière spécifiée (left, right, none).
– height : hauteur de la zone d’affichage de l’élément associé (nombre, pourcentage, auto).
– width : largeur de la zone d’affichage de l’élément associé (nombre, pourcentage, auto).
– margin : propriétés de marges autour d’un élément (nombre, pourcentage, auto).
– padding : propriétés d’espacement d’un élément entre sa zone de contenu et sa bordure
(nombre, pourcentage).
– position : type de positionnement appliqué à un élément (static, absolute, fixed,
relative). absolute défini la position par rapport à l’élément contenant et fixed permet
de ”fixer” l’élément : ce dernier ne défile plus en même temps que la page.
– top : position du bord supérieur d’un élément (nombre, pourcentage, auto).
– bottom : position du bord inférieur d’un élément (nombre, pourcentage, auto).
– right : position du bord gauche d’un élément (nombre, pourcentage, auto).
– left : position du bord droit d’un élément (nombre, pourcentage, auto).
– z-index : spécifie l’ordre d’empilement des éléments (nombre). L’élément ayant le plus
grand z-index sera affiché par dessus l’élément ayant un z-index inférieur.
– display : type d’affichage (inline, block, list-item, run-in, compact, marker,
table, inline-table, table-row-group, table-header-group, table-footer-group,
table-row, table-column-group, table-column, table-cell, table-caption, none).
– visibility : spécifie si un élément est visible (visible, hidden, scroll, auto). visible
est la valeur par défaut : un élément est visible et peut être tracé en dehors de la boı̂te
de l’élément si nécessaire. hidden permet de dissimuler l’affichage en dehors de la boı̂te
de l’élément, et scroll affiche des barres de défilement permettant de voir l’élément en
entier (il ne dépasse pas de sa boı̂te).
– clip : définit une zone de détourage rectangulaire, seules les portions situées dans cette
zone seront affichées (rect(nombre nombre nombre nombre)).
4.3.6
Liste
– list-style-image : définit une image à utiliser comme marqueur de liste ou puce dans
les listes non ordonnées (none, URL de l’image url()).
44
– list-style-position : position du marqueur graphique (inside, outside). inside
force le retour contre la marge gauche du texte se trouvant sous une puce.
– list-style-type : spécifie le style des marqueurs de liste (pour une liste ordonné :
decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek,
lower-alpha, upper-alpha, lower-latin, upper-latin, hebrew, armenian,
georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha,
katakana-iroha et pour une liste non ordonnée disc, circle, squarre, none).
– list-style : permet de définir plusieurs éléments de style de liste simultanément.
Enfin, pour modifier l’apparence de la souris, on pourra utiliser la propriété cursor qui admet
pour valeurs auto, wait, help, crosshair, text, pointer, move, e-resize,
ne-resize, ....
4.4
Exemple
Voici un exemple d’utilisation du z-index inspiré d’une feuille CSS du livre de D. Flanagan
”Javascript, La référence”.
<HTML>
<HEAD>
<TITLE>Test du z-index</TITLE>
<STYLE type="text/css">
div.fenetre
{
position: absolute;
width: 300px;
height: 200px;
border: outset gray 3px;
}
div.barretitre
{
position: absolute;
top: 0px;
height: 18px;
width: 290px;
background-color: ActiveCaption;
border-bottom: groove black 2px;
padding: 3px 5px 2px 5px;
font: caption;
4.4 Exemple
45
}
div.contenu
{
position: absolute;
top: 25px;
height: 165px;
width: 290px;
padding: 5px;
overflow: auto;
background-color: #ffffff;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="fenetre" style="left: 10px; top: 10px; z-index: 10;">
<DIV class="barretitre">Fenêtre de z-index 10</DIV>
<DIV class="contenu">
1<BR />
2<BR />
3<BR />
4<BR />
5<BR />
6<BR />
7<BR />
8<BR />
9<BR />
10<BR />
</DIV>
</DIV>
<DIV class="contenu" style="background-color: #d0d0d0;
font-weight: bold;">
Ceci est une autre fenêtre avec un z-index supérieur
à la première (donc au dessus).
</DIV>
</DIV>
46
Fig. 4.6 – Exemple : multi-fenêtrage avec z-index
<DIV class="contenu" style="background-color: blue;
font-style: italic;">
Ceci est une fenêtre intercallée.
</DIV>
</DIV>
</BODY>
</HTML>
Le résultat de ce code est donné en figure 4.6.
4.5
Un exemple plus complexe
Voici un autre exemple, issu du magnifique site http://www.csszengarden.com/. Nous allons
décortiquer ensemble le code HTML et CSS d’une page de ce site. Pour une plus grande lisibilité, je présenterai tout d’abord le code de la page CSS accompagné d’explications. Ensuite, je
présenterai le code de la page HTML que j’interromprai parfois par des notes sur les règles CSS
s’appliquant à certains endroits clés.
4.5 Un exemple plus complexe
1
/* css released under Creative Commons License */
/* All associated graphics copyright 2003, Dave Shea */
/* Added: May 7th, 2003 */
5
/* basic elements */
html
/* Définitions de la taille de marge et du "padding" de la page HTML.
/* Le padding est une "marge interne" qui correspond à la possibilité
/* d’entourer le "contenu" par un espacement.
/* Ici il n’y aura ni marge ni padding.
{
margin: 0px;
padding: 0px;
}
10
*/
*/
*/
*/
15
20
25
30
35
40
body
/* Définition du style du marqueur BODY :
*/
/* Toujours ni marge ni padding.
*/
/* La couleur du texte sera #555753 et la police du georgia 9pt/17pt. */
/* Enfin, la couleur de fond sera blanche (#fff) et on appliquera une */
/* image en fond d’écran (001/blossoms.jpg). Cette image ne sera pas */
/* répétée (blocage de l’effet mosaique) et sera placée en bas
*/
/* (bottom) et à droite (right) de la page.
*/
{
font: 9pt/17pt georgia;
color: #555753;
background: #fff url(001/blossoms.jpg) no-repeat bottom right;
margin: 0px;
padding: 0px;
}
p
/* Définition du style des paragraphes P :
/* Police georgia 9pt/17pt, pas de marge supérieure et le texte sera
/* justifié.
{
font: 9pt/17pt georgia;
margin-top: 0px;
text-align: justify;
}
h3
/* Définition du style des titres de troisième niveau H3 :
/* Police georgia italique de graisse normale en 12pt, pas de marge
*/
*/
*/
*/
*/
47
48
45
50
55
60
65
/* inférieure, espacement entre les lettres de 1px et couleur #7D775C */
{
font: italic normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #7D775C;
}
a:link
/* Définition du style des liens A :
/* La graisse de la police sera forte (gras), pas de decoration de
/* texte (pas de soulignement, ...) et couleur #B7A5DF
{
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited
/* Définition du style des liens visités A
{
font-weight: bold;
color: #D4CDDC;
}
*/
*/
*/
*/
70
75
80
85
a:hover, a:active
/* Définition du style des liens actifs ou survolés par la souris A
{
text-decoration: underline;
color: #9685BA;
}
acronym
/* Définition du style des ACRONYM : pas de bordure inférieure
{
border-bottom: none;
}
/*
/*
/*
/*
*/
*/
specific divs */
Nous définissons ici des classes spécifiques pour le marqueur div. */
Ces classes seront appelées par la suite à l’aide du marqueur id. */
Exemple : <DIV id="container">
*/
90
95
100
#container
/* Définition de la classe "container" :
/* On place en fond l’image 001/zen-bg.jpg sans répétition et
/* positionnée en haut à gauche. Il n’y a pas de marge mais un
/* padding (encadrement) : 0px en haut et en bas, et 175px à gauche
/* et à droite.
/* La division sera placée en mode absolu en haut à gauche (aux
/* coordonnées (0, 0)).
{
background: url(001/zen-bg.jpg) no-repeat top left;
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
}
*/
*/
*/
*/
*/
*/
*/
105
#intro
{
min-width: 470px;
}
110
115
120
125
#pageHeader
/* Définition de la classe "pageheader" : marge inférieure de 20px
{
margin-bottom: 20px;
}
*/
#pageHeader h1
/* Définition de la classe "pageHeader" pour le tag H1 :
*/
/* Afficher l’image 001/h1-fr.gif avec un fond transparent, sans
*/
/* répétition et positionnée en haut à gauche. La hauteur de l’image */
/* est 87px, et la largeur 219px. La marge supérieure fait 10px et le */
/* positionnement est flottant à gauche.
*/
{
background: transparent url(001/h1-fr.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
130
#pageHeader h1 span
/* Définition de la classe "pageHeader" pour le marqueur SPAN dans H1 */
49
50
135
/*
/*
/*
/*
/*
/*
{
Ne pas afficher le contenu.
Ce mécanisme permet d’afficher une image à la place d’un texte.
On fera par exemple :
<DIV id="pageHeader">
<H1><SPAN>Mon image rempacera ce texte.</SPAN></H1>
</DIV>
*/
*/
*/
*/
*/
*/
display:none
140
}
145
150
155
160
#pageHeader h2
{
margin-top: 58px;
width: 200px;
height: 18px;
float: right;
}
#pageHeader h2 span
{
display:none
}
#quickSummary
{
clear:both;
margin: 20px 20px 20px 10px;
width: 160px;
float: left;
}
165
170
175
#quickSummary p
{
font: italic 10pt/22pt georgia;
text-align:center;
}
#preamble
{
clear: right;
}
180
185
#supportingText
{
padding-left: 10px;
}
#footer
{
text-align: center;
}
190
195
200
205
210
215
220
#footer a:link, #footer a:visited
/* Définition des liens et des liens visités de la classe "footer"
/* Cette définition vient s’ajouter à la précédente définition sur
/* les liens.
{
margin-right: 20px;
}
*/
*/
*/
#linkList
{
margin-left: 600px;
position: absolute;
top: 0px;
right: 0px;
}
#linkList2
{
font: 10px verdana, sans-serif;
background: transparent url(001/paper-bg.jpg) top left repeat-y;
padding: 10px;
margin-top: 150px;
width: 130px;
}
#linkList h3.select
/* Définition de la sous-classe "selecet" de H3 dans la classe
/* "linkList".
/* Exemple d’utilisation :
/* <DIV id="linkList">
/*
<H3 class="select">...</H3>
/* </DIV>
*/
*/
*/
*/
*/
*/
51
52
{
width: 97px;
height: 24px;
225
}
230
235
#linkList h3.select span
{
display:none
}
#linkList h3.favorites
{
background: transparent url(001/h4.gif) no-repeat top left;
width: 60px;
height: 18px;
}
240
#linkList h3.favorites span
{
display:none
}
245
250
255
260
#linkList h3.archives
{
background: transparent url(001/h5.gif) no-repeat top left;
width:57px;
height: 14px;
}
#linkList h3.archives span
{
display:none
}
#linkList h3.resources
{
width:63px;
height: 10px;
265
}
270
#linkList h3.resources span
{
display:none
}
275
280
285
290
#linkList ul
{
margin: 0px;
padding: 0px;
}
#linkList li
/* Définition du marqueur LI de la classe "linkList" :
*/
/* Le style de puce est "none" : pas de puce, image de fond
*/
/* 001/cr1.gif sans répétition, placée en haut et au centre avec
*/
/* fond transparent, "padding" haur de 5px, marge inférieure de 5px, */
/* et espacement séparant les lignes de 2.5ex. L’affichage se fera en */
/* bloc (display: block) : disposition verticale sans avoir à ajouter */
/* de tag <BR />.
*/
{
line-height: 2.5ex;
background: transparent url(001/cr1.gif) no-repeat top center;
display: block;
padding-top: 5px;
margin-bottom: 5px;
list-style-type: none;
}
295
#linkList li a:link
{
color: #988F5E;
}
300
#linkList li a:visited
{
color: #B3AE94;
}
305
#extraDiv1
{
background: transparent url(001/cr2.gif) top left no-repeat;
53
54
position: absolute;
top: 40px;
right: 0px;
width: 148px;
height: 110px;
310
}
315
.accesskey
{
text-decoration: underline;
}
Et voici maintenant le code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xHTML1/DTD/xHTML1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xHTML" xml:lang="en" >
<HEAD>
<META http-equiv="content-type" content="text/HTML; charset=iso-8859-1" />
<META name="author" content="Dave Shea" />
<META name="keywords" content="design, css, cascading, style, sheets,
xHTML, graphic design, w3c, web standards, visual, display" />
<META name="description" content="A demonstration of what can be
accomplished visually through CSS-based design." />
<META name="robots" content="all" />
<TITLE>css Zen Garden: The Beauty in CSS Design</TITLE>
<!-La ligne suivant de SCRIPT vide permet d’éviter l’apparition d’un
FOUC (Flash Of Unstyled Content) dans Internet Explorer.
Il s’agit d’un affichage de la page sans style avant d’appliquer
le style à cette m^
eme page. Avec les autres navigateurs tout
fonctionne correctement ... no comment ! Pour plus d’infos :
voir http://www.bluerobot.com/web/css/fouc.asp
-->
<SCRIPT type="text/javascript"></SCRIPT>
<!-On importe le fichier de style
-->
<STYLE type="text/css" media="all">
@import "zen.css";
</STYLE>
55
</HEAD>
<!-This xHTML document is marked up to provide the designer with the maximum possible
flexibility. There are more classes and extraneous tags than needed, and in a real
world situation, it’s more likely that it would be much leaner.
However, I think we can all agree that even given that, we’re still better off than
if this had been built with tables. (Dave Shea)
-->
<BODY onload="window.defaultStatus=’css Zen Garden: The Beauty in CSS Design’;"
id="css-zen-garden">
<!-Affichage de ’css Zen Garden ..." dans la barre de status au chargement de
la page (sauf sous Firefox).
-->
<DIV id="container">
<DIV id="intro">
<DIV id="pageHeader">
<!-Exemple de remplacement de texte par une
image (voir CSS l. 117-141)
-->
<H1><SPAN>css Zen Garden</SPAN></H1>
<H2><SPAN>The Beauty of <ACRONYM title="Cascading
Style Sheets">CSS</ACRONYM> Design</SPAN></H2>
</DIV>
<DIV id="quickSummary">
<P class="p1"><SPAN>A demonstration of what can be
accomplished visually through <ACRONYM
title="Cascading Style Sheets">CSS</ACRONYM>-based
design. Select any style sheet from the list to load
it into this page.</SPAN></P>
<P class="p2"><SPAN>Download the sample <A
href="zengarden-sample.HTML" title="This page’s source
HTML code, not to be modified.">HTML file</A> and <A
href="zengarden-sample.css" title="This page’s sample
CSS, the file you may modify.">css file</A></SPAN></P>
</DIV>
56
<DIV id="preamble">
<H3><SPAN>The Road to Enlightenment</SPAN></H3>
<P class="p1"><SPAN>Littering a dark and dreary road lay
the past relics of browser-specific tags, incompatible
<ACRONYM title="Document Object Model">DOM</ACRONYM>s,
and broken <ACRONYM title="Cascading Style Sheets">CSS
</ACRONYM> support.</SPAN></P>
<P class="p2"><SPAN>Today, we must clear the mind of past
practices. Web enlightenment has been achieved thanks to
the tireless efforts of folk like the <ACRONYM title=
"World Wide Web Consortium">W3C</ACRONYM>, <ACRONYM
title="Web Standards Project">WaSP</ACRONYM> and the major
browser creators.</SPAN></P>
<P class="p3"><SPAN>The css Zen Garden invites you to relax
and meditate on the important lessons of the masters. Begin
to see with clarity. Learn to use the (yet to be)
time-honored techniques in new and invigorating fashion.
Become one with the web.</SPAN></P>
</DIV>
</DIV>
<DIV id="supportingText">
<DIV id="explanation">
<H3><SPAN>So What is This About?</SPAN></H3>
<P class="p1"><SPAN>There is clearly a need for <ACRONYM
title="Cascading Style Sheets">CSS</ACRONYM> to be taken
seriously by graphic artists. The Zen Garden aims to excite,
inspire, and encourage participation. To begin, view some of
the existing designs in the list. Clicking on any one will
load the style sheet into this very page. The code remains
the same, the only thing that has changed is the external
.css file. Yes, really.</SPAN></P>
<P class="p2"><SPAN><ACRONYM title="Cascading Style Sheets">
CSS</ACRONYM> allows complete and total control over the
style of a hypertext document. The only way this can be
illustrated in a way that gets people excited is by
demonstrating what it can truly be, once the reins are placed
in the hands of those able to create beauty from structure.
To date, most examples of neat tricks and hacks have been
demonstrated by structurists and coders. Designers have yet to
57
make their mark. This needs to change.</SPAN></P>
</DIV>
<DIV id="participation">
<H3><SPAN>Participation</SPAN></H3>
<P class="p1"><SPAN>Graphic artists only please. You are
modifying this page, so strong <ACRONYM title=
"Cascading Style Sheets">CSS</ACRONYM> skills are necessary, but
the example files are commented well enough that even <ACRONYM
title="Cascading Style Sheets">CSS</ACRONYM> novices can use them
as starting points. Please see the <A
href="http://www.mezzoblue.com/zengarden/resources/"
title="A listing of CSS-related resources"><ACRONYM
title="Cascading Style Sheets">CSS</ACRONYM> Resource Guide</A> for
advanced tutorials and tips on working with <ACRONYM
title="Cascading Style Sheets">CSS</ACRONYM>.</SPAN></P>
<P class="p2"><SPAN>You may modify the style sheet in any way you
wish, but not the <ACRONYM title="HyperText Markup Language">HTML
</ACRONYM>. This may seem daunting at first if you’ve never
worked this way before, but follow the listed links to learn more,
and use the sample files as a guide.</SPAN></P>
<P class="p3"><SPAN>Download the sample <A
href="zengarden-sample.HTML" title="This page’s source HTML code,
not to be modified.">HTML file</A> and <A href="zengarden-sample.css"
title="This page’s sample CSS, the file you may modify.">css file</A>
to work on a copy locally. Once you have completed your masterpiece
(and please, don’t submit half-finished work) upload your .css
file to a web server under your control. <A
href="http://www.mezzoblue.com/zengarden/submit/" title=
"Use the contact form to send us your CSS file">Send us a link</A>
to the file and if we choose to use it, we will spider the associated
images. Final submissions will be placed on our server.</SPAN></P>
</DIV>
<DIV id="benefits">
<H3><SPAN>Benefits</SPAN></H3>
<P class="p1"><SPAN>Why participate? For recognition, inspiration, and
a resource we can all refer to when making the case for <ACRONYM
title="Cascading Style Sheets">CSS</ACRONYM>-based design. This is
sorely needed, even today. More and more major sites are taking the
leap, but not enough have. One day this gallery will be a historical
curiosity; that day is not today.</SPAN></P>
</DIV>
58
<DIV id="requirements">
<H3><SPAN>Requirements</SPAN></H3>
<P class="p1"><SPAN>We would like to see as much <ACRONYM
title="Cascading Style Sheets, version 1">CSS1</ACRONYM> as possible.
<ACRONYM title="Cascading Style Sheets, version 2">CSS2</ACRONYM>
should be limited to widely-supported elements only. The css Zen Garden
is about functional, practical <ACRONYM title="Cascading Style Sheets">
CSS</ACRONYM> and not the latest bleeding-edge tricks viewable by 2% of
the browsing public. The only real requirement we have is that your
<ACRONYM title="Cascading Style Sheets">CSS</ACRONYM> validates.
</SPAN></P>
<P class="p2"><SPAN>Unfortunately, designing this way highlights the
flaws in the various implementations of <ACRONYM title=
"Cascading Style Sheets">CSS</ACRONYM>. Different browsers display
differently, even completely valid <ACRONYM title=
"Cascading Style Sheets">CSS</ACRONYM> at times, and this becomes
maddening when a fix for one leads to breakage in another. View the
<A href="http://www.mezzoblue.com/zengarden/resources/" title=
"A listing of CSS-related resources">Resources</A> page for information
on some of the fixes available. Full browser compliance is still
sometimes a pipe dream, and we do not expect you to come up with
pixel-perfect code across every platform. But do test in as many as you
can. If your design doesn’t work in at least IE5+/Win and Mozilla
(run by over 90% of the population), chances are we won’t accept
it.</SPAN></P>
<P class="p3"><SPAN>We ask that you submit original artwork. Please
respect copyright laws. Please keep objectionable material to a minimum;
tasteful nudity is acceptable, outright pornography will be rejected.
</SPAN></P>
<P class="p4"><SPAN>This is a learning exercise as well as a
demonstration. You retain full copyright on your graphics (with limited
exceptions, see <A href="http://www.mezzoblue.com/zengarden/submit/
guidelines/">submission guidelines</A>), but we ask you release your
<ACRONYM title="Cascading Style Sheets">CSS</ACRONYM> under a Creative
Commons license identical to the <A href="http://creativecommons.org/
licenses/sa/1.0/" title="View the Zen Garden’s license information.">
one on this site</A> so that others may learn from your work.</SPAN></P>
<P class="p5"><SPAN>Bandwidth graciously donated by <A
href="http://www.dreamfirestudios.com/">DreamFire Studios</A></SPAN></P>
</DIV>
59
<DIV id="footer">
<A href="http://validator.w3.org/check/referer" title="Check the validity
of this site’s XHTML">xHTML</A>  
<A href="http://jigsaw.w3.org/css-validator/check/referer" title=
"Check the validity of this site’s CSS">css</A>  
<A href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title=
"View details of the license of this site, courtesy of Creative
Commons.">cc</A>  
<A href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=
http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&output=Submit&gl=
sec508&test=" title="Check the accessibility of this site according
to U.S. Section 508">508</A>  
<A href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=
http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&output=Submit&gl=
wcag1-aaa&test=" title="Check the accessibility of this site
according to Web Content Accessibility Guidelines 1.0">aaa</A>
</DIV>
</DIV>
<DIV id="linkList">

<DIV id="linkList2">


<DIV id="lselect">
<H3 class="select"><SPAN>Select a Design:</SPAN></H3>

<UL>
<!-Le mécanisme des accesskey utilisé ici permet d’accéder à un lien
à l’aide d’une touche. Par exemple pour accesskey="a" à l’aide de
la touche "a". Mais malheuresement le système n’est pas si
simple. Pour que cette touche devienne active, suivant les
navigateurs, il faudra appuyer en m^
eme temps sur Ctrl, ou Alt,
60
ou Maj, ou ... C’est une des raisons pour lesquelles ce système
est très peu utilisé.
-->
<LI><A href="/" title="AccessKey: a" accesskey="a">Sample #1</A> by
<A href="http://www.mezzoblue.com/" class="c">Dave Shea</A> </LI>
<LI><A href="/" title="AccessKey: b"
<A href="http://www.mezzoblue.com/"
<LI><A href="/" title="AccessKey: c"
<LI><A href="/" title="AccessKey: d"
accesskey="b">Sample #2</A> by
class="c">Dave Shea</A> </LI>
accesskey="c">Sample #3</A> by
accesskey="d">Sample #4</A> by
<LI><A href="/" title="AccessKey: e"
<LI><A href="/" title="AccessKey: f"
<LI><A href="/" title="AccessKey: g"
accesskey="e">Sample #5</A> by
accesskey="f">Sample #6</A> by
accesskey="g">Sample #7</A> by
<LI><A href="/" title="AccessKey: h" accesskey="h">Sample #8</A> by
<A href="http://www.mezzoblue.com/" class="c">Dave Shea</A> </LI>
</UL>
</DIV>
<DIV id="larchives">
<H3 class="archives"><SPAN>Archives:</SPAN></H3>
<UL>
<LI><A href="/" title="View next set of designs. AccessKey: n"
accesskey="n"><SPAN class="accesskey">n</SPAN>ext designs »</A>
 </LI>
<LI><A href="/" title="View previous set of designs. AccessKey: p"
accesskey="p">« <SPAN class="accesskey">p</SPAN>revious designs
</A></LI>
<LI><A href="http://www.mezzoblue.com/zengarden/alldesigns/"
title="View every submission to the Zen Garden. AccessKey: w"
accesskey="w">Vie<SPAN class="accesskey">w</SPAN> All Designs</A></LI>
</UL>
</DIV>
<DIV id="lresources">
<H3 class="resources"><SPAN>Resources:</SPAN></H3>
61
<UL>
<LI><A href="http://www.csszengarden.com/001/001.css" title=
"View the source CSS file for the currently-viewed design,
AccessKey: v" accesskey="v"><SPAN class="accesskey">V</SPAN>
iew This Design’s <ACRONYM title="Cascading Style
Sheets">CSS</ACRONYM></A></LI>
<LI><A href="http://www.mezzoblue.com/zengarden/resources/"
title="Links to great sites with information on using CSS.
AccessKey: r" accesskey="r"><ACRONYM title="Cascading Style
Sheets">CSS</ACRONYM>
<SPAN class="accesskey">R</SPAN>esources</A></LI>
<LI><A href="http://www.mezzoblue.com/zengarden/faq/" title="A list
of Frequently Asked Questions about the Zen Garden. AccessKey: q"
accesskey="q"><ACRONYM title="Frequently Asked Questions">FA<SPAN
class="accesskey">Q</SPAN></ACRONYM></A> </LI>
<LI><A href="http://www.mezzoblue.com/zengarden/submit/" title="Send
in your own CSS file. AccessKey: s" accesskey="s"><SPAN class=
"accesskey">S</SPAN>ubmit a Design</A></LI>
<LI><A href="http://www.mezzoblue.com/zengarden/translations/"
title="View translated versions of this page. AccessKey: t"
accesskey="t"><SPAN class="accesskey">T</SPAN>ranslations</A></LI>
</UL>
</DIV>
</DIV>
</DIV>
</DIV>


<DIV id="extraDiv1"><SPAN></SPAN></DIV><DIV id="extraDiv2"><SPAN></SPAN></DIV>
<DIV id="extraDiv3"><SPAN></SPAN></DIV>
<DIV id="extraDiv4"><SPAN></SPAN></DIV><DIV id="extraDiv5"><SPAN></SPAN></DIV>
<DIV id="extraDiv6"><SPAN></SPAN></DIV>
</BODY>
</HTML>
Enfin, la figure 4.7 montre l’affichage de la page accompagné de remarques.
62
Fig. 4.7 – Exemple : le site ”Jardin Zen” de Dave Shea
5
Javascript
DHTML is nothing more than a marketing term for generic animation
and manipulation of multimedia events.
Sally Khudairi
avascript est un langage de script qui, incorporé aux balises HTML, permet d’améliorer la
Jprésentation
et l’interactivité des pages Internet. Ces scripts vont être gérés et exécutés par
le navigateur lui-même sans avoir à faire appel aux ressources du serveur.
5.1
La hiérarchie des objets javascript
La première chose à savoir est que tous les objets d’une page HTML sont vus par javascript sous
la forme d’une hiérarchie. L’élément racine est la page HTML courante, appelée Objet Window
courant. Principalement, nous utiliserons l’objet Document (la page HTML en elle-même) dont
l’organisation hiérarchique peut être vue en figure 5.8. Ainsi, pour accéder à la première image
du document (dont le nom est ”image1”), en javascript, on pourra utiliser :
document.images[0] car il s’agit de la première des images affichées (indice 0 du tableau images)
ou, plus simplement, en faisant référence à son nom lorsque celui-ci est connu :
document.image1
5.2
Les bases du langage
Dans cette partie, nous allons détailler les bases du Javascript7 , c’est-à-dire la syntaxe générale
et l’utilisation des variables.
7
Note préliminaire : Javascript est sensible à la casse. Veillez à bien respecter les majuscules/minuscules.
64
Chapitre 5. Javascript
forms[]
tableau d’objets Form
anchors[]
tableau d’objets Anchor
document
links[]
tableau d’objets Link
elements[]
tableau d’objets elements
du formulaire HTML :
Button
CheckBox
FileUpload
Hidden
Password
Radio
Reset
Select
Submit
Text
TextArea
options[]
tableau d’objets Option
images[]
tableau d’objets Image
Fig. 5.8 – Hiérarchie des objets côté client dans Javascript
5.2.1
Insertion de Javascript dans du code HTML
On signale à l’aide d’une balise <SCRIPT> le début du code Javascript. Cette balise aura la
syntaxe suivante :
<SCRIPT type="text/javascript">
...
</SCRIPT>
Le code Javascript sera donc contenu entre ces balises et placé n’importe où dans le document
HTML. Toutefois, il est préférable de déclarer les scripts dans la partie <HEAD> du document
(car ils seront chargés au moment de l’affichage de la page).
Une autre solution, plus propre, consiste à placer le code Javascript dans un fichier d’extension
.js et de le charger dans le document HTML grâce à la commande :
<SCRIPT type="text/javascript" src="fichier.js"></SCRIPT>
De plus, avec cette méthode, on peut cacher le code source du script à l’internaute.
5.2.2
Les variables
Javascript est un langage non typé : une variable peut contenir une valeur de n’importe quel type
de donnée. On pourra ainsi affecter successivement à une même variable un entier, un flottant,
un caractère, ou une chaı̂ne de caractères. Les variables sont déclarées à l’aide du mot-clé var.
Si l’on ne déclare pas explicitement la variable, elle sera déclarée implicitement. Exemple :
var i, j;
var resultat=0;
i = j;
resultat = "Chaine";
Les objets
65
nouveau = 2;
Comme dans la plupart des langages, les chaı̂nes de caractères se trouvent entre guillemets " ou
apostrophes ’. Pour les nombres flottants, la décimale est indiquée par le point ”.”.
De plus, les mots clés true et false sont disponibles pour les variables booléennes.
5.2.2.1
Les objets
Javascript est entièrement tourné vers la philosophie ”Objet”. Chaque variable est considérée
comme un objet et on peut lui appliquer une méthode (une fonction prenant cette variable
comme paramètre) grâce à l’opérateur ”.” (différents exemples sont donnés dans la section
suivante ”Opérateurs”).
Le mot clé permettant de créer un objet est new.
5.2.2.2
Opérateurs
Opérateurs arithmétiques
Ce sont les opérateurs classiques avec l’addition (+), la soustraction (-), la multiplication (*), la
division (/) et le modulo (%) ou reste de la division entière.
Opérateurs d’incrémentation
Bien entendu, les opérateurs d’incrémentation (++) et de décrémentation (-- ) sont disponibles :
var var1 = 10, var2 = 2;
var1++;
--var2;
La variable var1 vaut maintenant 11 et la variable var2 vaut 1.
Opérateurs d’égalité
L’opérateur d’égalité est classiquement == (et d’inégalité !=), tout comme en C. Attention toutefois, le langage n’étant pas typé, il faut penser à convertir les 2 éléments de comparaison dans
le même type avant de les comparer ! (voir plus loin toString() et valueOf().
De plus, les opérateurs d’identité === et de non-identité !== ont été ajoutés. Deux variables sont
identiques si elles sont de même type et si elle contiennent les mêmes valeurs. Deux variables de
types différents pourront toutefois être égales :
var a = undefined;
var b = null;
On a alors a == b mais a !== b.
66
Opérateurs de comparaison
Ici encore, ce sont les opérateurs classiques : le test d’égalité (==), le test de différence (!=), le
test d’infériorité (<), inférieur ou égal (<=), et le test de supériorité (>), supérieur ou égal (>=).
Attention à la conversion des types des variables !
A ces opérateurs, on ajoute :
– l’opérateur in qui teste si la valeur de gauche est le nom d’une propriété de l’objet de
droite. Exemple :
var contact = {nom, prenom, adresse, tel, mail};
"nom" in contact; // renvoi true
"gaim" in contact; // renvoi false;
– l’opérateur instanceof qui teste si l’objet de gauche est une instance de la classe de droite.
Exemple :
var Tab = new Array();
Tab instanceof Array; // renvoi true
Tab instanceof Number; // renvoi false
Opérateurs de chaı̂nes de caractères
L’opérateur de concaténation de chaı̂nes est le signe plus ”+” :
var chaine1="salut";
var chaine2=" a toi";
var concat1=$chaine1 + $chaine2;
var concat2 = chaine1;
concat2 += chaine2;
Les valeurs résultantes de concaténation pour les variables concat1 et concat2 sont équivalentes.
Elles contiennent toutes deux "salut a toi".
Remarque : attention avec les comparaisons de chaı̂nes contenant des valeurs numériques : il
s’agira bien d’une comparaison alpha-numérique et ainsi, "111" < "5" sera évalué à true car
"1" se situe avant "5".
Opérateurs Logiques
Les opérateurs logiques renvoient une valeur interprétée à true ou false. Il y a le ET (&&), le
OU (||), et le NOT (!).
Opérateurs binaires
Là encore, ce sont les opérateurs classiques : le ET binaire (&), le OU binaire (|), le OU EXCLUSIF – XOR – binaire (^), et les décalages de n bits vers la gauche ou la droite (<< et >>).
Opérateurs objet
Comme nous l’avons vu précédemment, l’opérateur de création d’un objet est new qui appelle
une fonction dite constructeur de l’objet. Par exemple, pour créer un objet contenant l’heure
courante (objet prédéfini), nous exécuterons : var d = new Date();. D’autre part, il est possible
Les tableaux
67
de créer un objet de manière implicite lors de la déclaration de la variable par la syntaxe :
var obj = {attribut_1:valeur_1, ..., attribut_n:valeur_n};
Par exemple, pour créer un objet représentant un point dans un espace en 3D et utiliser ces
coordonnées, nous pourrons effectuer :
var point = {x:0, y:0, z=0};
point.x = point.y + 2;
D’autres opérateurs objet sont également disponibles :
– delete permet de supprimer un attribut d’un objet8 . Sur l’exemple précédent :
delete point.x; // L’attribut x de point n’existe plus. Retourne True.
delete point;
// Impossible ! Retourne False;
– void permet de retourner la valeur undefined en lieu et place de la valeur renvoyée par un
opérande. Son utilisation classique est de l’intégrer dans un marqueur HTML à l’aide de
javascript:. Par exemple, si l’on crée un lien qui ouvre une nouvelle fenêtre, l’omission
de void entraı̂nera l’affichage de la valeur de retour de la fonction sur la fenêtre de départ.
Exemple :
<A href="javascript: window.open()">Ouvre une fen^
etre</A> efface la fenêtre de
départ (celle qui contient le lien) et remplace son contenu par la valeur de retour (ici
[object Window]).
<A href="javascript: void window.open()">Ouvre une fen^
etre</A> permet de conserver l’affichage de la première fenêtre.
5.2.2.3
Les tableaux
Les tableaux suivent les spécifications des tableaux en C : ils permettent de stocker une liste de
valeurs dans une variable indicée de 0 à n. L’indice est indiqué entre crochets à la fin du nom
de la variable et il est possible de créer des tableaux multi-dimensionnels en indiçant n fois la
variable.
Un tableau est un objet de type Array. Lors de la déclaration du tableau, il est également
possible de définir ces valeurs. Pour cela plusieurs méthodes :
var Tab = new Array();
Tab[0] = 10;
Tab[1] = "Coucou";
Tab[2] = 3.14159;
Ou alors (résultat identique) :
var Tab = new Array(10, "Coucou", 3.14159);
Ou encore :
var Tab = [10, "Coucou", 3.14159];
Les mêmes méthodes peuvent être appliquées pour la création de tableaux multi-dimensionnels :
au lieu de définir un élément, on définit un nouveau tableau. Exemple avec une matrice 2x2 :
8
Attention ! Ne peut pas supprimer l’objet en lui même !
68
var Tab = [[1, 2], [3, 4]];
document.write(Tab[0][0]); // Affiche 1
document.write(Tab[0][1]); // Affiche 2
Remarque : On peut également définir un tableau dans lequel certains éléments seront indéfinis.
Il suffit de les ommettres lors de la définition : var Tab = new Array(1,,3,,5);. Ainsi, Tab[1]
est indéfini.
5.2.2.4
Les tables de hachage
Les tables de hachage se déclarent de la même façon que les tableaux conventionnels mais sont
indicées par des chaı̂nes de caractères. Exemple :
var Tab_H = new Array();
Tab_H["Geller"] = "Ross";
Tab_H["Green"] = "Rachel";
document.write(Tab_H["Green"]); // Affiche "Rachel"
5.2.2.5
Séquences d’échappement
Les séquences d’échappement employées dans les chaı̂nes de caractères sont celles du C. En
voici un tableau récapitulatif des plus fréquemment utilisées :
Séquence d’échappement
\t
\n
\r
\"
\’
\\
5.2.2.6
Caractère
tabulation horizontale
retour à la ligne
retour chariot
guillemets
apostrophe
anti-slash
Constantes spéciales
Certains noms de variables sont réservés et attribués à des constantes permettant de stocker des
valeurs particulières. Ces valeurs spéciales permettent soit d’indiquer pourquoi la variable est
indéfinie, soit d’afficher une valeur digne d’intérêt pour le langage. Voici la liste de ces valeurs :
Constante
null
undefined
Infinity
NaN
Number.Nan
Number.MAX_VALUE
Number.MIN_VALUE
Number.POSITIVE_INFINITY
Number.NEGATIVE_INFINITY
Signification
Absence de valeur
Indéfini
Infini
N’est pas un nombre
Valeur de Nan
Plus grand nombre représentable
Plus petit nombre représentable
Infini par valeurs positives
Infini par valeurs négatives
Exemple
–
var a; document.write(a);
var a = 10 / 0;
var a = 10 / "Toto";
document.write(Number.Nan);
document.write(Number.MAX_VALUE);
document.write(Number.MIN_VALUE);
document.write(Number.POSITIVE_INFINITY);
document.write(Number.NEGATIVE_INFINITY);
5.3 Structures de contrôle
5.3
69
Structures de contrôle
Les structures de contrôle permettent d’effectuer des tests et des boucles, et donc d’indiquer
l’ordre dans lequel les instructions doivent être traitées. Ces instructions utilisent des opérateurs
de comparaison vus précédemment.
5.3.1
Les instructions conditionnelles
Ces instructions permettent d’imposer une condition, et en fonction du fait qu’elle soit vérifiée
(true) ou pas (false), de déterminer le code à exécuter. On distingue le test simple et le test ”par
cas”.
5.3.1.1
Si
Il s’agit du test simple reprenant la syntaxe du C. Si la condition est vérifiée, on exécute un
bloc de commandes (entre accolades), sinon on en exécute un autre.
if (meteo == "soleil")
reponse="Yeepeeeee !";
else
reponse="Bouuuh ...";
5.3.1.2
Choix
Structure ”Switch” empruntée au langage C.
switch(meteo)
{
case "soleil" : reponse="Yeepeee !";
break;
case "vent"
:
case "pluie" : reponse="Bouuuuh !";
break;
default
: reponse="Il neige ???"
} Remarque : ne pas oublier l’instruction break à la fin du traitement d’un cas sinon les instructions suivantes seront exécutées.
5.3.2
Les boucles
Les instructions de boucle ont été empruntées au C.
70
5.3.2.1
Tant que
Exécute un bloc d’instructions tant que la condition est vraie.
while (condition)
{
... bloc de commandes ...
}
Rappel : il faut bien sûr que la condition varie à l’intérieur du bloc de commandes sous peine
de créer une boucle infinie.
5.3.2.2
Faire tant que
Variante du while qui effectue au moins une fois le bloc de commande puisque le test est
effectué après.
do
{
... bloc de commandes ...
} while (condition);
5.3.2.3
Pour
Instruction for classique : on spécifie l’initialisation des variables conditionnant l’itération, la
condition d’arrêt de la boucle, et l’évolution des variables de boucle. Sur un exemple très simple :
for (i=0; i<10; i++)
j = j + i;
5.3.2.4
Pour chaque élément dans
Permet de parcourir tous les éléments d’un objet. Par exemple, dans le cas d’un tableau Tab :
for (elt in Tab)
document.write(Tab[elt]+"<BR />\n");+ Cet exemple affiche tous les éléments du tableau
Tab.
5.3.2.5
Les instructions break et continue
Les instructions break et continue sont des expressions un peu particulières : elles permettent
d’interrompre le déroulement d’une boucle et cela même si la condition de boucle est toujours
valide.
L’instruction break déclenche la sortie forcée de la boucle.
L’instruction continue va directement au test de boucle sans exécuter les instructions suivant
5.4 Gestion des erreurs/exceptions
71
le continue.
for (i=0; i<10; i++)
{
if (i==3) continue;
if (i==7) break;
document.write("Etape "+i+"<BR />\n";
}
Cette boucle affiche les étapes 0 à 2 (étape 3 sautée par le continue) puis 4 à 6 (sortie avant
l’impression de l’étape 7 par le break).
5.4
Gestion des erreurs/exceptions
Une exception est un signal indiquant qu’une circonstance exceptionnelle ou une erreur est
survenue. L’instruction throw permet de signaler qu’une erreur est survenue (arrêt du script et
recherche d’instructions pour gérer l’erreur) et les instructions try/catch/finally capturent
et gèrent l’exception. Exemple :
if (x == null) throw new Error("x indéfini !");
Ici on ne fait que créer un signal d’exception. Pour gérer cette exception on va devoir utiliser
try qui va surveiller si une exception est levée dans le bloc de commandes qu’il contient. Si
c’est le cas, le bloc catch récupèrera l’erreur et la gèrera (catch récupère le message d’erreur de
throw). Enfin, le bloc finally sera exécuté de façon systématique (permet d’intégrer du code
de nettoyage par exemple). Voici un exemple complet :
try
{
if (x == null) throw new Error(1);
...
}
catch (msg)
{
document.write("Une erreur de type - " + msg + " - est survenue !<BR />");
}
finally
{
var x = 0;
document.write("Ce code sera exécuté quoi qu’il advienne ...<BR />");
}
5.5
Les commentaires
Javascript prend en charge les commentaires de style C. Toute ligne (ou fin de ligne) précédée
du symbole // sera considérée comme un commentaire. De même, tout bloc de code compris
entre les caractères /* et */ sera considéré comme commentaire.
72
5.6
Les fonctions
L’instruction function permet de déterminer une fonction et le nombre de paramètres qu’elle
doit utiliser. Sa syntaxe est :
function nom_fonction(arg_1, ... arg_n)
{
...
}
Les fonctions peuvent renvoyer des valeurs grâce à return. En cas d’omission du return, ce
sera la valeur undefined qui sera renvoyée. Voici deux petits exemples :
function hello()
{
document.write("Salut à tous !<BR />");
}
function somme(x, y)
{
return (x+y);
}
5.6.1
Portée des variables
Une variable déclarée à l’extérieur de toute fonction aura une portée globale, c’est-à-dire qu’elle
sera visible depuis n’importe qu’elle partie du script (y compris dans les fonctions). Une variable
déclarée à l’intérieur d’une fonction sera quant à elle locale et ne sera accessible qu’à l’intérieur
de cette fonction. Exemple :
var globale = 1;
document.write(globale); // affiche 1
function portee_var()
{
var locale = 2;
var globale = 3;
document.write(locale); // affiche 2
document.write(globale); // affiche 3 : il s’agit d’une nouvelle variable du
// m^
eme nom que la variable globale
}
document.write(globale); // affiche 1 : la variable globale existe toujours et
// reste inchangée
document.write(locale); // null : la variable locale n’est plus définie
Les expressions régulières
5.6.1.1
73
Raccourcis de programmation
De par la structure des objets javascript, il se peut que les noms de variables soient très longs.
Prenons le cas d’un formulaire de nom frames[1].document.forms[0] contenant plusieurs
champs : nom, prenom, ... L’instruction with permet de modifier la chaı̂ne de portées de la variable
(en gros, définit un alias)9 . Ainsi, plutot que de taper frames[1].document.forms[0].nom.value
pour accéder à la valeur du champs nom, nous pourrions faire :
with (frames[1].document.forms[0])
{
nom.value="Geller";
prenom.value="Ross";
}
Reste bien sûr également la solution ”manuelle” :
var f = frames[1].document.forms[0];
f.nom.value="Bing";
f.prenom.value="Chandler";
5.6.2
Les expressions régulières
Suivant les fonctions de manipulation de chaı̂nes de caractères que vous utiliserez, vous aurez
besoin des expressions régulières. En voici un rapide rappel :
Définition
0...9
a...zA...Z0...9
\t \n \r \f
suite de caractères de x à y
début de ligne
fin de ligne
n’importe quel caractère
Caractère E.R.
\d
\w
\s
[x-y]
ˆ
$
.
On peut appliquer à ces définitions les opérateurs suivants :
Opérateur
répétition 0 à n fois
répétition 1 à n fois
répétition x fois
répétition au moins x fois
répétition entre x et y fois
un caractère parmi une liste
Caractère E.R.
*
+
{x}
{x,}
{x, y}
[]
Pour détecter un identificateur (une lettre minuscule ou majuscule suivie de lettres minuscules
ou majuscules, de chiffres ou de caractères ” ”), on pourra par exemple écrire : /[a-zA-Z]\w*/.
9
Pour être plus précis, modifie le chemin d’accès à la variable pour effectuer la résolution des noms de variables
74
Si l’on veut les identificateurs qui contiennent au moins trois chiffres consécutifs :
/[a-zA-Z]\w*\d{3,}\w*/.
5.7
Retour sur les objets
Voici quelques exemples d’utilisation d’objets. Vous trouverez ici une allusion à this : il s’agit
de la référence à l’objet en cours de définition/utilisation.
var point = new Object;
point.x = 0;
point.y = 0;
Une meilleure façon de faire serait :
function pt(x, y)
{
this.x = x;
this.y = y;
}
var point = new pt(0, 0);
Pour définir une méthode, il suffit de définir une fonction qui utilisera un objet donné. Dans le
cas du point ci-dessus :
function pt(x, y) // Définition de la classe pt
{
// Attributs de la classe
this.x = x;
this.y = y;
// Méthode dist_origine de la classe pt
this.dist_origine=function distance_origine()
{
return Math.sqrt(this.x*this.x+this.y*this.y);
}
}
var point = new pt(0, 0);
distance = point.dist_origine();
5.8 Quelques fonctions Javascript
5.8
75
Quelques fonctions Javascript
Voici maintenant quelques fonctions JavaScript essentielles. Elles sont présentées par groupe
d’intérêt avec un exemple d’application pour les fonctions les plus délicates à utiliser. Pour plus
de fonctions, voir le site http://javascript.reference.info
Les arguments donnés entre crochets sont optionnels.
5.8.1
5.8.1.1
Fonctions de base
parseFloat()
Convertit une chaı̂ne en nombre.
5.8.1.2
parseInt(Chaı̂ne, [Base])
Convertit une chaı̂ne en entier.
parseInt("4"); // Renvoi 4
parseInt("100", 2); // Renvoi 4
parseInt("1f", 16); // Renvoi 31
5.8.1.3
toString()
Retourne une représentation littérale de l’objet.
5.8.1.4
valueOf()
Renvoi la valeur de l’objet.
5.8.2
Fonctions de manipulation de chaı̂nes de caractères
La classe String supporte la gestion des chaı̂nes de caractères.
5.8.2.1
concat()
Concatène des chaı̂nes.
5.8.2.2
length()
Donne la longueur d’une chaı̂ne.
76
5.8.2.3
split(Sep, [Max ])
Transforme une chaı̂ne en un tableau de chaı̂nes en séparant les éléments suivant Sep et ce
jusqu’à ce que le tableau est une taille maximale de Max.
var ch = "1;2;3;4;5";
var Tab = ch.split(";", 3); // Tab contient [1, 2, 3]
5.8.2.4
substr(Premier, Longueur )
Extrait une sous-chaı̂ne de Longueur caractère à partir du caractère Premier.
5.8.2.5
toLowerCase()
Convertit une chaı̂ne en minuscules.
5.8.2.6
toUpperCase()
Convertit une chaı̂ne en majuscules.
5.8.3
5.8.3.1
Fonctions de manipulation des tableaux
concat()
Concatène des tableaux et renvoi donc un nouveau tableau formé par la concaténation de chacun
des arguments spécifiés.
Tab.concat([4, 5]); // Renvoi [1, 2, 3, 4, 5]
5.8.3.2
join([Sep])
Convertit tous les éléments d’un tableau en chaı̂nes de caractères et les concatène en les séparant
par Sep. Exemple :
var Tab = [1, 2, 3];
var liste = Tab.join(" - "); // liste => "1 - 2 - 3"
5.8.3.3
length()
Donne la taille d’un tableau.
push()
5.8.3.4
77
pop()
Retourne le dernier élément du tableau (et le supprime du tableau).
5.8.3.5
push()
Ajoute des éléments à la fin du tableau.
5.8.3.6
reverse()
Inverse l’ordre des éléments d’un tableau et renvoi le tableau inversé.
var inverse=Tab.reverse();
5.8.3.7
shift()
Retourne le premier élément du tableau (et le supprime du tableau).
5.8.3.8
slice()
Retourne une portion de tableau.
Tab.slice(0,2); // => retourne [1, 2]
5.8.3.9
sort([fct de tri ])
Tri les éléments d’un tableau suivant la fonction de tri éventuellement fournie (par défaut tri
alpha-numérique).
function tri(a, b)
{
return (a-b);
}
Tab.sort(tri);
5.8.3.10
splice(Debut, [Nbre Elts, [Valeur]] )
Insère, supprime ou remplace des éléments de tableau à partir de Debut et pour Nbre Elts
éléments (jusqu’à la fin du tableau si non spécifié). Enfin, Valeur contient éventuellement les
valeurs à insérer dans le tableau.
Tab.splice(1, 0, 11, 11); // Tab contient [1, 11, 11, 2, 3]
Tab.splice(2); // Tab contient [1, 2]
Tab.splice(1,1); // Tab contient [1, 3]
78
5.8.3.11
toString()
Convertit un tableau en chaı̂ne.
5.8.3.12
unshift()
Ajoute des éléments au début du tableau.
5.8.4
Fonctions d’accès à la Date
Les objets Date permettent de manipuler la date et l’heure. Sans arguments, le constructeur
Date() crée un objet Date défini à la date et à l’heure courante.
5.8.4.1
getDate()
Retourne le jour du mois (valeur entre 1 et 31).
var date = new Date();
var mois = date.getDate();
5.8.4.2
getDay()
Retourne le jour de la semaine (valeur entre 0 (dimanche) et 6 (samedi)).
5.8.4.3
getFullYear()
Retourne l’année.
5.8.4.4
getHours()
Retourne l’heure (valeur entre 0 et 23).
5.8.4.5
getMonth()
Retourne le mois (valeur entre 1 et 12).
5.8.4.6
getTime()
Retourne la date exprimée en millisecondes écoulées depuis le 01/01/1970 à minuit.
Fonctions d’erreurs
5.8.5
79
Fonctions d’erreurs
Les objets de la classe Error permettent de gérér les exceptions. Le constructeur Error()
peut prendre pour argument un message spécifiant le type d’exception. De plus, appelé sans
l’opérateur new, il se comportera comme si cet opérateur était présent.
5.8.5.1
message
Message d’erreur lisible par l’utilisateur.
5.8.5.2
name
Type d’erreur.
5.8.6
Fonctions mathématiques
Les objets Math permettent l’accès aux fonctions mathématiques.
5.8.6.1
abs()
Calcule une valeur absolue.
var x = Math.abs(-5); // x => 5
5.8.6.2
pow()
Math.pow(x, y) calcule xy .
5.8.6.3
sqrt()
Calcule une racine carrée.
5.8.7
Fonctions de manipulation des Expressions Régulières
RegExp est la classe de manipulation des Expressions Régulières. Le constructeur RegExp()
prend comme paramètre une chaı̂ne contenant une ER et éventuellement une chaı̂ne d’attributs
parmi (g (global), m (multiligne, et i (insensible à la casse).
80
5.8.7.1
exec()
Recherche de correspondance à caractère général.
var ER = RegExp(/(\d+) (\d+)/);
var Tab = ER.exec("150 160 170 180"); Le premier élément du tableau est la chaı̂ne de
travail "150 160 170 180". Les éléments suivants correspondent à $1, ... $n c’est-à-dire aux
éléments correspondants à l’expression régulière soumise. Ici, Tab[1]="150" et Tab[2]="160".
5.8.7.2
test()
Teste si une chaı̂ne à des correspondances avec un motif.
5.9 Les événements d’interception
5.9
81
Les événements d’interception
Dans cette partie je présenterai brièvement les différents types de signaux qui peuvent être
interceptés pour interagir avec un document HTML. Exemple :
<FORM>
<INPUT type="button" value="Cliquer ici !" onclick="alert(’Coucou !’);" />
</FORM>
Evénement
onabort
onblur
Description
Interruption chargement image
Perte du focus de saisie
onchange
onclick
ondblclick
onerror
onfocus
Perte du focus d’un élément de
formulaire alors que sa valeur a
changé depuis qu’il a recu le focus
Click de souris
Double-click de souris
Erreur chargement image
Obtention focus de saisie
onkeydown
Touche enfoncée
onkeypress
Touche pressée et relâchée
onkeyup
Touche relâchée
onload
Chargement document achevé
onmousedown
onmousemove
onmouseout
Bouton souris pressé
Souris déplacée
Pointeur souris déplacé
en dehors d’un élément
Pointeur souris sur un élément
Bouton souris relâché
Remise à jour formulaire
Changement taille fenêtre
Texte sélectionné
Formulaire envoyé
Document déchargé
onmouseover
onmouseup
onreset
onresize
onselect
onsubmit
onunload
Encore un exemple :
Pris en charge par les tags
<IMG>
<BUTTON>, <INPUT>, <SELECT>,
<TEXTAREA>, <LABEL>, <BODY>
<INPUT>, <SELECT>
<TEXTAREA>,
la plupart des éléments
<IMG>
<BUTTON>, <INPUT>, <LABEL>,
<SELECT>, <TEXTAREA>, <BODY>
Eléments de formulaire,
<BODY>
<BODY>
<BODY>
<BODY>, <FRAMESET>,
<IMG>
<FORM>
<BODY>, <FRAMESET>
<INPUT>, <TEXTAREA>
<FORM>
<BODY>, <FRAMESET>
<IMG src="mon_image.jpg" onmouseout="alert(’Cliquer sur l\’image !’);"
onclick="alert(’Merci !’);" />
82
5.10
Gestion des fenêtres
5.10.1
Les boı̂tes de dialogue
Il existe trois types de boı̂tes de dialogue :
– alert() affiche un texte (donné en paramètre) et un bouton ”Ok” de validation
– confirm() affiche un texte passé en paramètre et deux boutons ”Ok” et ”Annuler”. Cette
fonction renvoie truesi l’utilisateur clique sur ”Ok” et false sinon. Exemple :
if (confirm("Continuer le chargement ?"))
location.replace("page1.html");
else
location.replace("index.html");
– prompt() affiche un texte (donné en paramètre10 ) suivi d’une ligne de saisie de texte et
deux boutons ”Ok” et ”Annuler”. Cette fonction renvoie le texte saisi. Exemple :
var texte = prompt("Votre nom ?", "Ecrire ici");
document.write("Votre texte : " + texte + "<BR />n");
5.10.2
La ligne de status
La ligne de status se situe en bas du navigateur et affiche des informations (en général quand on
fait passer la souris sur un lien, affiche la cible du lien). Pour contrôler cette ligne on utilise les
propriétés status11 et defaultStatus (Attention ! Ne fonctionne pas avec FireFox !). Exemples :
<A href="http://www.lcb.cnrs-mrs.fr" onmouseover="status=’Site du LCB’;
return true;">LCB</A>
ou
<SCRIPT type="txt/javascript">
defaultStatus="Barre de status.";
</SCRIPT>
5.10.3
Temporisations et intervalles
La méthode setTimeout() permet de programmer le lancement d’une portion de code et la
méthode clearTimeout() annule l’exécution de ce code. setTimeout() prend deux paramètres :
le code à exécuter et la durée d’attente avant l’exécution (exprimée en millisecondes). Voici par
exemple l’affichage en seconde du temps écoulé depuis le 1er janvier 1970 à minuit :
10
Une deuxième chaı̂ne de caractères, optionnelle, peut être également envoyée : il s’agit du texte apparaissant
dans le champs de saisie.
11
Qui doit toujours renvoyer ”true”.
Temporisations et intervalles
83
<HTML>
<HEAD>
<TITLE>Test javascript</TITLE>
function rappel()
{
var d = new Date();
var m = d.getTime();
document.forms[0].Rappeler.value="Temps : "+m;
setTimeout("rappel()", 10);
}
</SCRIPT>
</HEAD>
<BODY onload="rappel();">
<FORM ...>
<INPUT type="text" name="Rappeler" size="25" />
...
</FORM>
</DIV>
</BODY>
</HTML>
Enfin, il existe deux autres méthodes setInterval() et clearInterval() permettant de définir
directement un intervalle de temps pour le rappel d’une fonction (la fonction n’a plus à se
rappeler elle-même).
<HTML>
<HEAD>
<TITLE>Animation</TITLE>
var element = null;
var cpt=0;
var tempo=10;
var y0;
var intervalId;
function anime_splash(id)
// Animation de l’image de splash
{
// Récupère l’élément d’après son ’id’
if (document.getElementById)
84
element = document.getElementById(id); // DOM
else if (document.all)
element = document.all[id];
// IE
else if (document.layers)
element = document.layers[id]; // Netscape
// Détermine la position de départ (ordonnée)
y0=parseInt(element.style.top);
if (element)
intervalId = setInterval("anime()", tempo);
}
function anime()
// Animation de l’image Splash
{
if (element.style)
element.style.top = y0 + cpt + "px"; // DOM
else
element.top = y0 + cpt;
if (y0+cpt++ == 200)
clearInterval(intervalId);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="image" src="Tux.png" style="position: absolute; top: 0px"/>
</DIV>
anime_splash("image");
</SCRIPT>
</BODY>
</HTML>
5.10.4
Contrôle de la fenêtre
Les méthodes de contrôle de la fenêtre sont à appliquer sur un objet Window. Les deux méthodes
à connaı̂tre en priorité sont bien sûr l’ouverture et la fermeture d’une fenêtre :
– window.open() permet d’ouvrir une fenêtre. Prend en paramètres :
– le nom de la page à charger dans cette fenêtre, ou du code HTML
– le nom de la fenêtre
Navigation
85
– toute option disponible sur les fenêtres
Exemple :
window.open("http://www.google.fr", "GOOGLE", "widht=350, height=300,
status=no, toolbar=no, resizable=no");
– window.close() ferme une fenêtre (window.closed indique si une fenêtre a été fermée ou
pas).
Pour déplacer la fenêtre :
– window.moveTo() place la fenêtre de telle sorte que le coin supérieur gauche se trouve aux
coordonnées spécifiées par les paramètres.
var W = window.open(’Fen^
etre en (0, 0)’, ’TEST’, ’width=20, height=50’);
W.moveTo(0, 0);
– window.moveBy() déplace la fenêtre d’un nombre spécifié de pixels à gauche ou à droite
et au-dessus ou en-dessous.
Enfin, les méthodes window.resizeTo() et window.resizeBy() permettent de redimensionner
la fenêtre.
5.10.5
Navigation
Ici, trois méthodes essentielles sont à connaı̂tre :
– location.replace() qui permet de charger une nouvelle URL spécifiée en paramètre
– history.back() qui charge la page précédente
– history.forward() qui charge la page suivante
Exemple :
Pour aller en page précédente, cliquer sur l’image :
<IMG src="http://www.lcb.cnrs-mrs.fr/img/logo.jpg" onclick="history.back();" />
5.11
Gestion des cookies
Tout d’abord, je tiens à rappeler que l’usage des cookies est déconseillé : problème de sécurité
(modification des données du cookie par l’utilisateur), problème de compatibilité (l’utilisateur
peut refuser l’utilisation des cookies), ...
Il y a 2 étapes dans la gestion d’un cookie :
– La création du cookie par document.cookie : on indique le nom du cookie et sa valeur,
suivi de la période de validité. La syntaxe est :
document.cookie = ("nom_cookie=" + valeur + "; expires=" +
temps.toGMTString());
où temps est une variable Date convertie au format GMT. L’exemple suivant teste si le
cookie existe pour le document en cours et, si oui essaye de récupérer la valeur de visite,
l’affiche, puis l’incrémente, sinon crée le cookie :
var Exp = new Date();
var cookie=document.cookie;
Exp.setFullYear(Exp.getFullYear() + 1);
86
if (cookie)
{
var Tab=cookie.split(";");
var val=Tab[0].split("=");
var val_cookie=val[1];
document.write("Cookie = " + val[1] + "<BR/>\n");
document.cookie = ("visite=" + ++val_cookie +
"; expires= " + Exp.toGMTString());
}
else
document.cookie = ("visite=" + 1 + "; expires= " +
Exp.toGMTString());
– La destruction du cookie grace à la méthode document.cookie.remove().
5.12
Notes diverses
Voici quelques notes faisant part d’astuces pouvant parfois être bien utiles ...
5.12.1
Correspondance CSS - Javascript
En général, les attributs de style CSS de la forme forme-style gardent leur nom en javascript
mais s’écrivent formeStyle. Par exemple, l’attribut CSS font-style deviendra fontStyle en
javascript.
5.12.2
Eviter de recharger une page après appel à javacript
Après un appel à javascript par un bouton par exemple, la page HTML sera rechargée. Pour
éviter celà, il faut que le code javascript renvoie false. Exemple :
<INPUT type="button" onclick="javascript: ...; return false" />
5.12.3
Désactiver les erreurs HTML dûes à javascript
Pour que les parseur HTML ne prennent pas en compte le code javascript, il faut mettre le
code en commentaire :
<!-...
//-->
</SCRIPT>
Les accents en javascript
5.12.4
87
Les accents en javascript
Le codage des accents est différent en HTML et en javascript (dans les fonctions du type
alert()). Pour connaı̂tre le code d’un caractère accentué, on pourra utiliser escape() qui
renvoi le code du caractère et unescape() qui affiche le caractère à partir du code. Exemples :
document.write(escape("é")); -> %E9
document.write(unescape("%E9")); -> é
alert("Voici une lettre : "+unescape(escape("é")));
5.13
DHTML
Tout ce que nous avons vu précédemment (HTML, CSS, et Javascript) forme le DHTML
(Dynamic HTML). Ainsi, de l’avis même d’un membre du W3C : ”DHTML is nothing more
than a marketing term for generic animation and manipulation of multimedia events” - Sally
Khudairi (DHTML n’est rien d’autre qu’un terme de marketing pour des animations et des effets
multimédia).
6
Le référencement
Cookie : Anciennement petit gâteau sucré, qu’on acceptait avec plaisir.
Aujourd’hui : petit fichier informatique drôlement salé, qu’il faut refuser avec véhémence.
Luc Fayard
e fois votre site construit, encore faut-il que des visiteurs puissent y accéder ... et pour cela
Unil faut
que votre site soit correctement référencé (ie. apparaisse en bonne position dans la liste
des réponses d’un moteur de recherche à une requête comportant des mots clés ciblant l’activité
dudit site). Il ne suffit donc pas d’être référencé, encore faut-il être correctement positionné : la
plupart des personnes (70%) consultant les moteurs de recherches se limitent aux trente premiers
résultats.
Il existe deux types d’outils de recherche :
– les annuaires qui permettent une recherche par navigation dans des rubriques et sousrubriques thématiques (Yahoo, Voilà, DMOZ, ...). Ce genre d’outils tend à être délaissé
de plus en plus par les internautes. Toutefois, l’inscription de votre site sur ces annuaires
permet d’augmenter le nombre de références à votre site ! Il est donc très important de commencer par là. Vous trouverez une liste des annuaires gratuits de liens en dur à l’adresse :
http://corrigesduweb.com/annuaires-liens-durs.php. Il existe également de nombreux sites permettant d’inscrire directement un site internet sur des dizaines d’annuaires.
– les moteurs de recherche qui reposent sur un principe d’interrogation par mots clés (Google,
Altavista, Voilà, ...). Les plus utilisé de tous à l’heure actuelle est Google (66% des recherches).
Voici maintenant quelques notions essentielles de référencement :
90
6.1
Chapitre 6. Le référencement
Référencement des pages d’un site
Même si la page d’accueil de votre site est primordiale, ce sont chaque page du site qu’il va
falloir référencé. En effet, chaque page est porteuse d’un contenu différent et un utilisateur peut
y accéder directement à l’aide d’un moteur de recherche.
Pour chacune des pages il va donc falloir déterminer les mots clés permettant de la caractériser au
mieux. Pour vous aider dans cette démarche, le site http://www.keyword-search-engine.com
vous fournira une estimation du nombre de fois où a été saisie une expression dans un moteur
de recherche au cours du mois précédent (ne pas tenir compte de l’indice de faisabilité qu’il
fournit).
Une fois les mots clés de la page dégagés, il faut les intégrer dans le code HTML :
– La balise <TITLE> : les mots clés de la page doivent être présents dans cette balise (attention, il s’agit du titre s’affichant en haut de la page : préférer une phrase à une liste de
mots clés !). Il est conseillé de ne pas y mettre plus de 10 mots et plus une expression sera
au début (à gauche) de cette balise, plus elle sera jugée importante.
– La balise <META name="description" ...> : elle apporte une description de la page qui
apparaı̂t dans les pages de résultats des moteurs de recherche. Il est conseillé de ne pas
dépasser 200 caractères.
– La balise <META name="keywords" ...> : cette balise n’est pratiquement plus utilisée par
les moteurs de recherche ... mais il est quand même bon de la remplir consciencieusement,
ne serait-ce que pour s’assurer que les mots clés de la page ont été correctement recherchés.
– Les balise <Hn> : leur contenu est jugé plus important par les moteurs de recherche. De
même, plus le texte se trouve en haut de la page, plus il est important.
– Les balises de lien <A> : il faut privilégier un texte explicite (et non : ”Cliquez ici”, ...).
– Enfin, l’adresse de la page – ou URL – est aussi très importante : elle doit contenir les
mots clés séparés par un tiret (les moteurs de recherche reconnaissent le tiret comme un
séparateur). Par exemple, pour une page où les mots clés seraient cours et HTML, une
URL ”optimale” serait : http://www.site.com/cours-HTML.html.
6.2
Les pages dynamiques et l’URL rewriting
Lors de l’utilistion de langages dynamiques tel que le PHP, le passage de variables dans l’URL
conduit à l’utilisation de longues chaı̂nes d’adresse (ex :
http://site.com/page.php?id=1&val=2&add=5). Ces adresses risques d’être ignorées
par les moteurs de recherche. Pour contourner le problème, on peut utiliser la technique de l’URL
rewriting.
Il s’agit d’un module d’Apache qui permet de traduire une URL virtuelle en URL réelle utilisable
par le serveur. Par exemple, la page utilisée dans le site (virtuelle) sera
mots-cles-page-1-2-5.html et sera traduite en page.php?id=1&val=2&add=5. Ces
règles de réécriture sont décrites dans le fichier .htaccess présent dans le répertoire des pages
pour lesquelles on veut effectuer une URL rewriting.
Au niveau du serveur Apache, il faut tout d’abord activer le module mod rewrite en ajoutant
6.3 Le référencement des images
91
les lignes suivantes au fichier /etc/apache/httpd.conf :
LoadModule rewrite_module modules/mod_rewrite.so
AddModule mod_rewrite.c Ensuite, les règles de réécriture du fichier .htaccess se présentent
comme suit :
Options FollowSymLinks
RewriteEngine on
RewriteRule ^([a-zA-Z\-]+)\-([0-9])\-([0-9])\-([0-9])\.html$
page.php?id=$2&val=$3&add=$4
La dernière ligne représente une règle proprement dite. La première expression régulière définit
le nom virtuel de la page et la second définit le nom réel à utiliser.
6.3
Le référencement des images
Il faut bien entendu commencer par compléter l’attribut alt (de toute façon s’il n’est pas
présent, la page ne sera pas valide ...). D’autre part, le nom du fichier image doit comporter les
mots clés caractérisant l’image, tout comme nous l’avons vu précédemment pour les pages. Par
exemple : cours-HTML.jpg.
La meilleure solution toutefois consiste à ne pas utiliser une balise <IMG> mais plutôt un remplacement de section <SPAN> par une image en CSS comme nous l’avons vu au chapitre 4.
6.4
La recherche de liens – backlink
Pour être correctement positionné dans le référencement, il faut rechercher à obtenir un maximum de liens pointant sur le site. Il y a bien sûr les liens internes au site ... mais également
les liens externes. Ce sont les liens en général fournit par les annuaires de liens en dur comme
indiqué en début de ce chapitre. Il y a également les éventuels partenaires de votre site, mettre
un lien vers leur site en échange d’un lien sur le votre ...
6.5
Le fichier sitemap.xml de Google
Un nouveau système de Google permet de fournir (à Google) un fichier XML contenant la liste
des pages du site et diverses informations. Pour celà, voir le protocole à respecter sur la page :
https://www.google.com/webmasters/sitempas/docs/fr/protocol.html
Ensuite, pour soumettre votre fichier sitemap.xml, il faut aller sur :
https://www.google.com/accounts/NewAccount
pour créer un compte Google et ensuite :
https://www.google.com/webmasters/sitempas/docs/fr/submit.html
Ce système accélère l’indexation des nouvelles pages de votre site (notamment pour les nouveaux
sites ... ;-)).
92
6.6
Chapitre 6. Le référencement
Conclusion
En conclusion, je citerai rapidement les choses à éviter.
– L’utilisation du flash, bien que d’un rendu graphique agréable, est à proscrire : le contenu
flash est perdu pour les moteurs de recherche.
– Les pages contenant des mots de plusieurs langues sont difficiles à indexer pour les moteurs
de recherche qui ne savent pas dans quelle langue les référencer.
– Les pages copiées sur des pages plus anciennes : seules les anciennes pages seront référencées
...
– L’utilisation des cadres – frames : complique l’indexation pour les moteurs de recherche
et rend impossible l’accès direct aux pages internes du site. Il existe des solutions de
substitution en CSS ou PHP qui permettront d’obtenir le même rendu.
Enfin, vous trouverez de nombreux outils et conseils sur les sites http://www.abondance.com
et http://www.webrankinfo.com.
Références
HTML
HTML et XHTML – La référence, C. Musciano et B. Kennedy, 2001, 4ème édition, éd. O’Reilly.
Exploration de réseaux IP avec Nmap, C. Nocton, 2005, n◦ 71, Linux Magazine.
http://www.w3.org
http://www.w3schools.com
http://www.cssgardenzen.com
http://www.alsacreations.com
http://www.aidenet.com
Javascript
Javascript – La référence, D. Flanagan, 2002, 4ème édition, éd. O’Reilly.
Annexe A
Exercices
HTML
1. Ecrire une page HTML telle que :
– la DTD est transitional
– l’en-tête contient les informations suivantes :
– vous êtes l’auteur
– les titre est ”Page d’accueil”
– la description est ”Page d’accueil de mon site”
– les mots clés sont : votre nom et ”accueil”, ”page”, et ”home page”
– la base est http://www.cmi.univ-mrs.fr
2. Ecrire le corps d’une page HTML composée :
– du titre (taille de police maximale) ”Mon CV”
– d’un premier paragraphe :
– dont le titre (de taille - 1 par rapport à ”Mon CV”) est ”Mes coordonnées personnelles”
– dont le contenu sera ”voici mon adresse” et sera affiché en italique
– d’un deuxième paragraphe :
– dont le titre (de même taille que le paragraphe précédent) est ”Mes diplômes”
– dont le contenu sera ”j’étais à l’école primaire en 19..” et sera affiché en gras
– d’un troisième paragraphe :
– dont le titre (de même taille que les paragraphes précédents) est ”Mes loisirs”
– dont le contenu sera exactement celui-ci :
Mon poète favori est Rimbaud dont voici quelques vers célèbres :
C’est un trou de verdure où chante une rivière
Accrochant follement aux herbes des haillons
D’argent; où le soleil, de la montagne fière,
Luit: c’est un petit val qui mousse de rayons.
Le titre de la page devra être centré tandis que ceux des paragraphes seront alignés à
gauche.
3. Créer une liste ordonnée :
– dont l’en-tête est ”liste des tâches à effectuer”
– dont les données sont, dans cet ordre :
– ”boulot” suivi d’une liste ordonnée :
– Mario Kart
– WarCraft III
96
– Pause Déjeuner
– Configuration Debian
– Mails
– Départ
– ”courses” suivi d’une liste non ordonnée :
– dont l’en-tête sera ”ma liste de courses”
– dont les données seront : pâtes, riz, pizza
4. Créer le tableau :
– dont le titre est ”Menu”
– dont les bordures seront de taille 1
– à 2 colonnes
– qui contiendra 4 lignes :
– la première : l’en-tête dont les cellules seront respectivement ”jours” et ”menu”
– la deuxième : ligne de données : ”lundi, mardi” et ”pâtes”
– la troisième : ligne de données : ”mercredi, jeudi” et ”riz”
– la quatrième : ligne de données : ”vendredi, samedi, dimanche” et ”pizza”
5. Ecrire un lien hypertexte absolu dont l’ancre destination est ”http ://www.lcb.cnrs-mrs.fr”
et dont l’ancre source est ”Page du LCB”
6. Ecrire un lien hypertexte vers ”nom fichier.html” dont l’ancre source est ”je change de
document” et dont l’ancre destination :
– se trouve dans le même répertoire que le document courant
– se trouve dans le sous-répertoire ”Equipes” du répertoire contenant
– se trouve dans le répertoire parent du document courant
7. Reprenons la page d’accueil du site de l’exercice 1. Ajouter en haut de cette page une table
des matières (liste non ordonnées de signets) dont l’activation d’un des signets amènera
directement au paragraphe correspondant.
8. Ecrire le corps d’une page HTML dont l’image de fond est fond.png. Ajouter dans ce corps
l’image image.png dont la hauteur sera 300, la largeur 200 et dont le texte alternatif sera
”Mon image”.
9. Créer une image réactive permettant de cliquer sur chacune des zones (le polygone composé
de 4 sommets et le disque) définies dans la figure 6.9.
10. Modifier le code HTML de l’exercice précédent de manière à ce que le disque ne soit plus
réactif.
11. Ecrire une balise <FRAMESET> découpée verticalement est composée de deux cadres :
– Le premier affichera page1.html et son attribut name sera gauche ; il occupera 30% de la
largeur de la page
– le deuxième sera lui-même décomposé horizontalement en deux cadres, occupant chacun
50%. Celui du haut affichera page2.html et son attribut name sera droit haut ; celui du
bas affichera page3.html et son attribut name sera droit bas.
On suppose que page1.html contient deux liens hypertextes qui peuvent respectivement
provoquer l’affichage dans droit haut de la page page4.html et dans droit bas l’affichage de
page5.html. Ecrire ces deux liens.
97
(0, 0)
(190, 40)
(x, 90)
(230, 130)
(50, 90)
Fig. 6.9 – Image reactif.png
12. Réaliser un script dont l’attribut action est script.php et la méthode POST, et qui contient
les champs suivants :
– un champs de type texte de taille maximale 20 et permettant de stocker un prénom
– un champs de type texte de taille maximale 30 et permettant de stocker un nom
– deux boutons radio dont le nom est ”fonction” et ayant l’un la valeur ”Responsable” et
l’autre la valeur ”Membre” (choix par défaut)
– un champs de sélection dans une liste dont le nom est ”grade” et dont les options sont :
– Professeur
– McF
– Doctorant (choix par défaut)
– Post-Doctorant
– Chercheur
– Ingénieur
– une zone de texte de 20 lignes et 40 caractères par ligne et dont la valeur par défaut est
”Entrez ici un commentaire”
– un bouton de soumission appelé ”valider” et un bouton de remise à zéro appelé ”vider”
13. Reprendre l’exercice précédent et structurer le formulaire dans un tableau HTML (un
champ par ligne). Ajouter également une colonne par ligne dans laquelle on indiquera le
type de donnée attendu dans le champs suivant.
CSS
1. Définir une feuille de style définissant :
– les liens en vert, les liens visités en vert, et les liens actifs en gras et en rouge
– le fond des tableaux en bleu foncé et le texte des cellules en blanc et centré
– les listes ordonnées en numérotation romaine minuscule
– le texte contenu dans les paragraphes en gris, italique, justifié et de police monospace
14pt
Ecrire le document HTML utilisant cette feuille CSS.
2. Définir une feuille de style définissant :
– une classe ”apercu” pour le tag <IMG />. L’image sera affichée dans un carré de 200px
par 200px avec possibilité de voir le reste de l’image grâce à des ascenseurs.
98
– une classe générique ”warning” affichant le texte en rouge, gras, lettres capitales et
centré.
– une classe ”cadre” pour le tag <DIV>. On créera un rectangle de 300px par 400px de
fond vert et où le texte sera affiché en italique. Au bas de ce rectangle on fera apparaı̂tre
une barre jaune de 10px de haut (penser à créer une autre classe).
Ecrire le document HTML utilisant cette feuille CSS.
Javascript
1. Ecrire la définition du tableau permettant de stocker les données suivantes (au moins 2
manières différentes) :
1a
1b
1c
2a
2b
2c
3a
3b
3c
2. Ecrire la définition du tableau permettant de stocker les données suivantes :
OS
WinBlurp
WinBlurp
Linux Sarge
WinBlurp
Version
1
2
1
24
sortie
1990
1991
2005
2004
3. Ecrire un bloc de code permettant de tester la valeur d’une variable surprise ; si elle
vaut :
– 1 : affiche ”Coucou”
– 2 ou 4 : définit 2 nouvelles variables i et j (la première valant 5 et la seconde valant 7)
– 3 : affiche ”Le résultat est” suivi de la somme des variables i et j
– dans tous les autres cas affiche ”Cas indéfini”
4. Ecrire un bloc de code affichant les nombres pairs de 1 à 10.
– Avec un for
– Avec un while
– Avec un do/while
– En considérant que les nombres sont contenus dans un tableau Tab, avec un for/in
5. Ecrire un bloc de code qui teste la valeur d’une variable x. Si x vaut :
– 1 : affiche ”OK”
– 2 : soulève une exception ”BUG”
– 3 : affiche ”OK”
– 4 : soulève une exception ”SYNTAX ERROR”
Récupérer les exceptions et afficher un message d’erreur correspondant.
Enfin, remettre la variable x à 0 quoi qu’il arrive.
6. Ecrire deux fonctions renvoyant la factorielle du nombre passé en paramètre. La première
sera itérative et la seconde sera récursive.
99
7. Ecrire une fonction prenant trois paramètres : deux nombres x et y et un opérateur op
parmi ”+, -, *, /”. Cette fonction renvoie le résultat de x op y et soulève une exception
si :
– y vaut 0 et op vaut ”/”
– op n’est pas dans la liste donnée précédemment
– x ou y n’est pas un nombre
Donner ensuite le code permettant de récupérer l’exception.
8. Créer une classe (constructeur) Individu contenant les champs Nom, Prenom, Annee_Naissancce
ainsi que les méthodes :
– toString : affichage en texte des informations
– Age : affichage de l’âge (calculé par rapport à cette année)
– Nom complet : renvoi la chaı̂ne ”Nom Prenom”
9. Ecrire une fonction qui affiche la date du jour (le jour en gras, suivi du numéro du jour en
italique, puis le mois et l’année).
10. Ecrire une fonction qui prendra une chaı̂ne en paramètre (cette chaı̂ne contient des éléments
séparés par ” :”). Cette fonction devra chercher si le deuxième élément contient la chaı̂ne
”Mirlipili” ou ”Mirlipilili”. Si la chaı̂ne est detectée, nous afficherons un message ”Chaı̂ne
détectée” sinon ”Rien”. De plus, si la chaı̂ne passée en paramètre ne correspond pas à la
syntaxe désirée, il faudra lever une exception.
11. Ecrire une fonction qui prend en paramètre un tableau d’entiers et renvoi une chaı̂ne
contenant ces entiers triés par ordre décroissant et séparés par un caractère ”,”.
12. Ecrire une page contenant un formulaire : 2 champs de texte et un bouton de validation.
Lorsque l’utilisateur quitte le champs de saisi du texte, le texte est mis en majuscules.
Entraı̂nement à l’examen
1. Définir une feuille de style CSS permettant de créer une info bulle ”simple” (qui se positionne toujours au même endroit sur la page) :
– les liens s’afficheront en vert sans décoration
– l’info bulle affichera un texte bleu sur fond jaune dans une fenêtre bordée d’un trait bleu
de 2 pixels de large ; entre la bordure et les mots de la bulle il y aura un espace de 2
pixels ; sa position sera à 20 pixels du haut et à 100 pixels de la gauche de la fenêtre du
navigateur.
Principe de l’info bulle : Lorsque l’utilisateur passe la souris sur un lien, une fenêtre contenant un message d’information s’affiche.
2. Ecrire la page HTML permettant d’utiliser cette feuille CSS. Le texte de la page sera :
Voici un exemple d’utilisation de l’info bulle
Le fait de passer la souris sur le texte l’info bulle affichera le message :
Message d’information
3. Quelle ligne faut-il ajouter pour éviter un FOUC sous Internet Explorer ?
4. Ecrire une page HTML qui affiche un décompte des secondes depuis 10. A 0, le message
”BAOUM !” apparaı̂t puis on efface l’affichage (y compris l’objet ayant permis l’affichage).
5. Ecrire une page HTML permettant d’étudier une séquence génétique, et plus précisément
de détecter les gènes potentiels :
100
– une séquence génétique ne peut contenir que les nucléotides (lettres) A, U, C, et G.
– un gène débute forcément par AUG et se termine soit par UGA, soit par UAA, soit par UAG.
A partir de la détection d’un signal de départ AUG, les lettres sont lues par blocs de 3
(les codons). Ainsi, sur la séquence : AUGGGAUGAAAUAA, on aura AUG GGA UGA AAU AA
et donc le gène AUG GGA UGA en lisant en phase 1 (pas de décallage par rapport à la
première lettre). En lisant en phase 3 (décallage de 2 lettres par rapport à la première
lettre), on aura : AU GGG AUG AAA UAA et donc le gène AUG AAA UAA.
Sur la page HTML, un champ de formulaire permettra de donner la séquence génétique et
un bouton submit déclenchera une fonction javascript affichant les différents gènes possibles
(ou des messages d’erreurs si la séquence ne contient pas seulement des nucléotides, s’il
n’y a pas de codon start AUG, ou s’il n’y a aucun codon Stop). Le messages s’afficheront
dans le même champ de formulaire qui a servi à la soumission.
Correction de la partie ”Entraı̂nement à l’examen”
1. #info_bulle
{
position: absolute;
visibility: hidden;
padding: 2px;
top: 20px;
left: 100px;
border: solid blue 2px;
color: blue;
background-color: yellow;
}
A
{
color: green;
}
A:hover DIV#info_bulle
{
visibility: visible;
}
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<HTML>
<HEAD>
<TITLE>Correction de l’info bulle</TITLE>
<STYLE type="text/css" src="style.css">
</STYLE>
</HEAD>
<BODY>
Voici un exemple d’utilisation de <A>l’info bulle
<DIV id="info_bulle">Message d’information</DIV></A>
</BODY>
</HTML>
3. <SCRIPT type="text/javascript"></SCRIPT>
<HTML>
<HEAD>
<TITLE>Heure</TITLE>
function decompte()
{
if (document.getElementById("heure").value=="BAOUM !")
document.forms[0].style.visibility="hidden";
else
{
document.getElementById("heure").value--;
if (document.getElementById("heure").value==0)
document.getElementById("heure").value="BAOUM !";
setTimeout("decompte()", 1000);
}
}
</SCRIPT>
</HEAD>
<BODY onload="decompte()">
<FORM method="POST" action="#">
<INPUT type="text" id="heure" size="7" value="10"/>
</FORM>
</DIV>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Bioinfo</TITLE>
function teste_gene()
{
function verif_ARN(chaine, longueur)
{
var i=0;
101
102
var erreur=0;
do
{
if ((chaine[i]!="A") && (chaine[i]!="U") && (chaine[i]!="C")
&& (chaine[i]!="G"))
erreur++;
i++;
} while ((erreur==0) && (i<longueur));
return(erreur);
}
function detecte_AUG(chaine, longueur, codon)
{
var Res = new Array();
longueur-=2;
for (var i=0; i<longueur; i++)
{
if ((chaine[i]==codon[0]) && (chaine[i+1]==codon[1])
&& (chaine[i+2]==codon[2]))
Res.unshift(i)
}
return(Res);
}
var l = document.getElementById("gene").value.length;
var sequence = document.getElementById("gene").value;
if (l<6)
{
document.getElementById("gene").value="La séquence génétique est
trop courte !";
return false;
}
var err = verif_ARN(document.getElementById("gene").value, l);
if (err)
{
document.getElementById("gene").value="La séquence ne contient pas
que des nucléotides !";
return false;
}
var AUG = detecte_AUG(document.getElementById("gene").value, l, "AUG");
if (AUG[0]==undefined)
{
document.getElementById("gene").value="Pas de codon Met !";
return false;
}
var UGA = detecte_AUG(document.getElementById("gene").value, l, "UGA");
103
var UAA = detecte_AUG(document.getElementById("gene").value, l, "UAA");
var UAG = detecte_AUG(document.getElementById("gene").value, l, "UAG");
if ((UGA[0]==undefined) && (UAA[0]==undefined) && (UAG[0]==undefined))
{
document.getElementById("gene").value="Pas de codon Stop !";
return false;
}
document.getElementById("gene").value="Resultats :\n";
for (start in AUG)
{
for (stop in UGA)
if ((AUG[start]-UGA[stop])%3==0)
{
for (i=AUG[start]; i<=UGA[stop]+2; i++)
document.getElementById("gene").value+=sequence[i];
document.getElementById("gene").value+="\n";
}
for (stop in UAA)
if ((AUG[start]-UAA[stop])%3==0)
{
for (i=AUG[start]; i<=UAA[stop]+2; i++)
}
for (stop in UAG)
if ((AUG[start]-UAG[stop])%3==0)
{
for (i=AUG[start]; i<=UAG[stop]+2; i++)
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM method="POST" action="#" onsubmit="javascript: teste_gene();
return false;">
<TEXTAREA cols="40" rows="10" id="gene">
Insérez votre gène ici
</TEXTAREA><BR />
<INPUT type="submit" value="Ok !" />
</FORM>
104
</DIV>
</BODY>
</HTML>
Annexe B
TP
Dans cette partie sont présentés les sujets de TP de l’année 2005-2006.
HTML
TP1
Création d’une page perso (CV)
1. Nous allons créer une page de CV. Pensez à vérifier la validité de votre code sur
http://www.w3.org ...
Voici les éléments caractérisant la page :
– Titre de la page : ”Page Perso - Mon CV”
– Couleur de fond : bleu clair
– Titre général centré : ”Mon CV”
– 1er paragraphe :
– Titre (taille - 1) aligné à gauche : ”Mes coordonnées personnelles”
– Présentation des données attendue :
NOM Prénom
Adresse : Mon adresse
Code Postal Ma ville
Tel : Mon numéro
ème
– 2
paragraphe :
– Titre (taille - 1) centré : ”Mes diplômes”
– Enoncer dans un tableau centré la liste des diplômes :
– 1ère colonne alignée à gauche : ”Année”
– 2ème colonne centré : ”Diplôme”
– 3ème colonne alignée à droite : ”Lieu d’obtention”
La première ligne contiendra le titre des colonnes et les suivantes les informations.
– 3ème paragraphe :
– Titre (taille - 1) centré : ”Loisirs”
– Titre (taille - 2) aligné à gauche : ”Sport”
– Au moins 3 sports énumérés sous forme de liste non ordonnée (la puce est un disque)
– Titre (taille - 2) aligné à gauche : ”Musique”
– Au moins 3 styles de musique énumérés sous forme de liste ordonnée (numérotation
romaine minuscule)
106
Annexe B – TP
– Titre (taille - 2) aligné à gauche : ”Autre”
– Un petit texte de 5 ou 6 lignes dont l’alignement sera justifié.
– 4ème paragraphe :
– Titre (taille - 1) centré : ”Mes liens”
– Une liste non ordonnée (la puce est un carré) de liens vers :
– http://www.kde.org
– http://www.kde-look.org
– http://www.bootsplash.org
2. Reprendre le tableau du 1 - 2ème paragraphe et le modifier de manière à ce que le fond
des cellules de la première colonne soit jaune, le fond de la deuxième colonne orange et le
fond de la dernière colonne rouge.
3. Récupérer une image de Tux sur Internet (http://www.google.fr section ”Images”) et
l’insérer à la fin du document. Ajouter un lien vers http://www.debian.org sur cette
image.
4. Supprimer la bordure de l’image signalant qu’il s’agit d’un lien.
5. Changer la couleur des liens : non visité en vert et visité en rouge.
Annexe B – TP
HTML
107
TP2
Navigation par liens et formulaires
Pour tous ces exercices, pensez à vérifier la validité de votre code sur
1. Création d’un menu
Nous allons créer un menu à l’aide des cadres.
(a) Créer une page index.html qui contiendra trois cadres12 : banniere, menu et texte
comme le montre la figure suivante (L=largeur et H=hauteur) :
banniere : L=15%, H=10%
menu : L=15%, H=90%
texte : L=85%, H=100%
Le cadre banniere affichera la page banniere.html, le cadre menu affichera menu.html
et enfin, le cadre texte affichera la page texte.html.
(b) Faire afficher une image quelconque (centrée) dans le cadre banniere.
(c) Le cadre menu contiendra une liste non ordonnée de liens :
– Page 1
– Page 2
– Page 3
Chacun de ces liens affichera la page page_x.html (x ∈ 1, 2, 3) dans le cadre texte (Les
fichiers page_x.html contiendront seulement un titre indiquant le nom du fichier).
2. Navigation par image réactive
Nous utiliserons l’image disponible sur le site
http://www.cmi.univ-mrs.fr/~tristan/debian-logo.jpg. Voici les informations dont
nous disposons (figure 6.10) :
– A(0, 110)
– B(0, 0)
– C(43, 0)
– D(21, 19)
– E(15, 54)
– F(64, 44)
– G(64, 62)
– H(55, 92)
– I(111, 147)
12
Attention à la DTD !
108
Annexe B – TP
Fig. 6.10 – Image réactive
Annexe B – TP
109
Nous définissons trois zones réactives13 :
– un cercle de centre F et de rayon (F, G) lié à http://www.google.fr
– un rectangle (A, I) lié à http://www.debian.org
– un polygone (A, H, E, D, C, B) lié à http://www.cmi.univ-mrs.fr
3. Formulaires
Nous allons créer un formulaire permettant à un utilisateur de saisir des informations en
vue de son inscription sur un forum.
(a) Créer une page formulaire.html de titre ”Test sur les formulaires”.
(b) Créer un tableau centré qui contiendra le formulaire (1ère colonne : intitulé, 2ème
colonne : champs de saisie).
(c) Le formulaire enverra ses informations en méthode POST vers
http://www.cmi.univ-mrs.fr/~tristan/affiche.php. Voici les champs :
Intitulé
Nom
Prenom
Password
Métier
–
Soumission
Type
Text (20 caractères)
Text (30 caractères)
Password (20 caractères)
Liste Select (Etudiant/Enseignant/Chercheur/Ingénieur)
Hidden (valeur=”Coucou”)
Submit (valeur=”Ok”)
Nom
Nom
Prenom
PWD
Metier
Cache
Soumission
(d) Testez votre formulaire en appuyant sur le bouton ”Ok” puis en passant en méthode
GET.
13
Rappel ces zones peuvent être calculées grâce à Gimp : Filtres − > Web − > Image cliquable (génération
automatique du code).
Annexe B – TP
HTML
111
TP3
Feuilles de style CSS
Nous allons créer un nouveau CV en utilisant cette fois les feuilles de style.
1. Création de la feuille de style
Créer une page style.css qui définira le style suivant :
– Une classe ”titre” sur le tag <DIV> où le texte sera :
– de police Arial,
– de police 18 pt,
– de couleur noire,
– centré,
– gras,
– les minuscules seront converties en capitales minuscules,
– le fond sera gris,
– lorsque le curseur passera au-dessus de cette zone nous ferons apparaı̂tre un sablier
– Une classe ”photo” sur le tag <IMG /> qui affichera une image :
– en haut à droite de la page (30 pixels du haut et 50 pixels de la marge droite),
– encadrée par une bordure en pointillés de 1 pixel de large et de couleur noire,
– Une classe ”diplome” sur le tag <TABLE> qui affichera une table où :
– la table sera centrée sur la page,
– la bordure est de 2 pixels,
– les bordures des cellules sont de 1 pixel,
– la première colonne sera alignée à gauche et en gras (Année),
– la deuxième colonne sera centrée (Diplôme),
– la dernière colonne sera alignée à droite et en italique (Lieu d’obtention).
– pour les listes, la couleur des items sera le bleu et la puce sera un cercle vide dans le
cas des listes non-ordonnées et une numérotation en chiffres romain majuscule pour les
listes ordonnées.
– Dans le cas général, la police utilisée sera :
– par ordre de préférence Verdana, Times New Roman, Serif,
– de taille 14 pt,
– de couleur noire.
2. Création de la page HTML
Créer une page CV.html utilisant le style définit précédemment. Les données sont celles
définies dans le TP1 auxquelles il faudra ajouter l’affichage d’une image en haut à droite
de la page.
112
Annexe B – TP
3. Modifications
– Modifier la classe ”photo” de sorte que l’image ne soit plus soumise au défilement.
– Dans le navigateur, imposer que la taille de la police des pages affichées soit 8 pt. Que
constatez vous ?
– Ajouter dans le document HTML une contrainte sur la couleur de fond des tags <DIV>
de la classe ”titre” qui devra être bleu. Que constatez vous ?
– Faire de votre image un lien vers http://www.debian.org. De quelle couleur sera la
bordure avant d’avoir cliqué sur l’image ? Comment la rendre noire dans tous les cas ?
Annexe B – TP
HTML
113
TP4
Javascript (1)
1. Ecrire un script qui crée un tableau contenant les nombres 1 à 10, puis affiche chacun de
ces éléments (une ligne par élément).
2. Modifier le script précédant pour qu’il affiche les nombres impairs compris entre 1 et 50.
3. Ecrire une fonction calculant tout terme de la suite de Fibonacci :
F(0) = 0
F(1) = 1
F(n+1) = F(n) + F(n-1)
4. Ecrire une classe Cercle permettant de créer un objet cercle défini par son rayon r et son
centre (cx, cy). Les méthodes disponibles seront :
– toString() : affichage du rayon et du centre
– perimetre() : calcul du périmètre
– aire() : calcul de l’aire
– translation(tx, ty) : renvoi un objet Cercle dont le centre est translaté de (tx, ty) par
rapport à (cx, cy)
5. Ecrire une fonction prenant en paramètre une chaı̂ne de caractères devant contenir deux
mots séparés par un espace (un prénom et un nom). La fonction renvoi une chaı̂ne de
caractères où le prénom est écrit en minuscules (sauf pour la première lettre qui est en
majuscule) et où le nom est entièrement en majuscules. Penser à gérer les exceptions.
6. Créer une page contenant une image. Lorsque l’on clique sur cette image une petite fenêtre
apparaı̂t contenant le message ”Coucou !”.
7. Créer une page contenant un formulaire : une liste de choix (”normal, gras, italique, souligné”), un champs de texte, et un bouton ”OK”. Lors du click sur le bouton ”OK”,
on affichera le contenu du premier champs de texte dans le style choisi dans une fenêtre
d’alerte. Penser à gérer les exceptions.
8. Créer un formulaire avec plusieurs champs de texte. Lorsque l’utilisateur quitte un champs
de texte, le texte sera mis en majuscules.
9. Créer une page contenant un formulaire : un champs de texte, un signe ”+”, un champs
de texte, un bouton contenant le signe ”=” et un champs de texte. Le click sur le bouton
”=” provoquera l’affichage du résultat de l’addition. Penser à gérer les exceptions.
10. Reprendre l’exercice précédent mais remplacer le signe ”+” par une liste de choix (+, -, *,
/). L’affichage sera alors le résultat de l’opération choisie.
Annexe B – TP
HTML
115
TP5
Javascript (2)
1. Créer une page contenant un formulaire avec les champs suivants :
– Nom (texte)
– Prénom (texte)
– Adresse Mail (texte : \w+[\.\w+]{0,1}@\w+\.\w{2,3})
– Code Postal (texte : 5 chiffres consécutifs)
– Recevoir lettre de news (bouton radio O/N)
Ce formulaire contiendra également un bouton Reset et un bouton ”Envoyer”. En cas
d’appui sur ”Reset”, une fenêtre apparaı̂tra demandant confirmation et effacera tous les
champs en cas de validation.
Le bouton ”Envoyer” déclenchera la vérification des champs et l’affichage d’une fenêtre
d’alerte indiquant les champs mal remplis ou alors un message de félicitation.
2. Créer une page contenant 2 cadres : un cadre d’affichage et un petit cadre au bas de la
page qui contiendra 2 boutons ”Précédent” et ”Suivant” et permettant de charger les pages
précédentes ou suivantes.
3. Créer une page contenant un bouton. Le fait d’appuyer sur ce bouton ouvrira un popup
qui affichera le nombre de fois où l’on a cliqué sur le bouton (si le popup est fermé et que
l’on appuie sur le bouton, le popup se réouvrira).
4. Modifier le script précédent en ajoutant la gestion des cookies : un bouton ”Effacer cookie”
qui détruira le cookie, et stocker le nombre de clics souris dans un cookie qui sera mis à
jour à chaque clic. Pour tester votre page, fermez le navigateur et rechargez votre page :
le nombre de clics doit être mémorisé.
5. Créer un script permettant d’afficher un ”diaporama” d’images : les 3 images
(http://www.w3.org/Icons/valid-xhtml10.png,
http://www.w3.org/Icons/valid-css.png, et http://www.w3.org/WAI/wcag1AA.png)
seront affichées à tour de rôle toutes les 5 secondes.
6. Créer un effet de ”rollover” sur une image (lorsque le pointeur de la souris passe sur
l’image IMG1 on change celle-ci en IMG2 et lorsque le pointeur de la souris quitte l’image,
on réaffiche IMG1).
7. Ecrire un script permettant d’ouvrir une fenêtre ”popup”. Le popup contiendra un lien
qui permettra de le détruire.
8. Créer un script qui affiche une petite fenêtre de popup qui se déplace de gauche à droite
de l’écran puis de haut en bas, de droite à gauche et enfin de bas en haut pour revenir à
sa position de départ (0, 0).
116
Annexe B – TP
Note : la classe Image permet la gestion des images :
var Img = new Image();
Img.src="http://www.lcb.cnrs-mrs.fr/img/logo.jpg";
Annexe B – TP
HTML
117
Projet
Création d’un site Internet
Le but de ce projet est de créer un site Internet relativement simple. Pour le javascript, pensez
à organiser votre code sous forme de librairies.
1.1 Architecture du site
Le site comprendra 2 cadres : un cadre supérieur contenant un menu et un cadre inférieur
pour l’affichage.
1.2 Gestion du menu (sur 5 Pts)
Le menu sera réalisé en Javascript sous forme de menu ”déroulant”. Voici les différents menus
principaux et secondaires :
– Linux
– Debian
– Ubuntu
– Gentoo
– Knoppix
– Visites
– Contacter Webmaster
– Carte Dynamique
1.3 Menu Linux (sur 1 Pt)
Pour chacune des distributions, affiche le site officiel.
1.4 Menu Visites (sur 3 Pts)
Afficher le nombre de visites de l’utilisateur : réinitialisation du nombre de visites au bout
d’un mois, et une seule visite comptée par jour.
1.5 Menu Contacter Webmaster (sur 3 Pts)
Affiche un formulaire avec les champs :
– Nom
– Prénom
118
Annexe B – TP
– Mail
– Date (format xx-xx-xxxx)
– Texte
Le format de chacune de ces entrées (à part le texte du mail) sera vérifié. Un bouton ”Date
auto” permettra de remplir le champs ”Date” avec la date du jour et le bouton submit enverra
le mail à [email protected].
1.6 Menu Carte Dynamique (sur 3Pts)
Affiche la carte http://www.tourisme.fr/carte/france.gif. Le fait de survoler une région
affichera son nom dans un petit cadre au-dessus de la carte.
1.7 Validitée du code HTML (éliminatoire)
Le code HTML devra être valide (petit bouton vert dans HTML Validator de FireFox).
1.8 Dernières consignes
Vous devrez rendre votre code par mail sous forme d’une archive tar compressée avec gzip
(donc un fichier .tar.gz).
Le rapport sera noté sur 3 Pts et vous devrez y détailler vos choix de programmation. Typiquement, un rapport devra contenir : une introduction, les solutions de programmation retenues,
un manuel utilisateur, les améliorations apportées et les améliorations possibles et, enfin, une
conclusion.
L’architecture du code (séparation en modules ou librairies et en fonctions), l’indentation et la
présence de commentaires pertinents seront notés sur 2 Pts.
Annexe C
GNU Free Documentation Licence
Version 1.2, November 2002
c
Copyright 2000,2001,2002 Free Software Foundation, Inc.
59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
Everyone is permitted to copy and distribute verbatim copies of this license document, but
changing it is not allowed.
Preamble
The purpose of this License is to make a manual, textbook, or other functional and useful
document ”free” in the sense of freedom : to assure everyone the effective freedom to copy and
redistribute it, with or without modifying it, either commercially or noncommercially. Secondarily, this License preserves for the author and publisher a way to get credit for their work, while
not being considered responsible for modifications made by others.
This License is a kind of ”copyleft”, which means that derivative works of the document
must themselves be free in the same sense. It complements the GNU General Public License,
which is a copyleft license designed for free software.
We have designed this License in order to use it for manuals for free software, because free
software needs free documentation : a free program should come with manuals providing the
same freedoms that the software does. But this License is not limited to software manuals ; it
can be used for any textual work, regardless of subject matter or whether it is published as a
printed book. We recommend this License principally for works whose purpose is instruction or
reference.
1. APPLICABILITY AND DEFINITIONS
This License applies to any manual or other work, in any medium, that contains a notice
placed by the copyright holder saying it can be distributed under the terms of this License. Such
a notice grants a world-wide, royalty-free license, unlimited in duration, to use that work under
the conditions stated herein. The ”Document”, below, refers to any such manual or work. Any
member of the public is a licensee, and is addressed as ”you”. You accept the license if you
copy, modify or distribute the work in a way requiring permission under copyright law.
A ”Modified Version” of the Document means any work containing the Document or
a portion of it, either copied verbatim, or with modifications and/or translated into another
language.
120
A ”Secondary Section” is a named appendix or a front-matter section of the Document
that deals exclusively with the relationship of the publishers or authors of the Document to
the Document’s overall subject (or to related matters) and contains nothing that could fall
directly within that overall subject. (Thus, if the Document is in part a textbook of mathematics, a Secondary Section may not explain any mathematics.) The relationship could be a
matter of historical connection with the subject or with related matters, or of legal, commercial,
philosophical, ethical or political position regarding them.
The ”Invariant Sections” are certain Secondary Sections whose titles are designated, as
being those of Invariant Sections, in the notice that says that the Document is released under
this License. If a section does not fit the above definition of Secondary then it is not allowed to
be designated as Invariant. The Document may contain zero Invariant Sections. If the Document
does not identify any Invariant Sections then there are none.
The ”Cover Texts” are certain short passages of text that are listed, as Front-Cover Texts
or Back-Cover Texts, in the notice that says that the Document is released under this License.
A Front-Cover Text may be at most 5 words, and a Back-Cover Text may be at most 25 words.
A ”Transparent” copy of the Document means a machine-readable copy, represented in
a format whose specification is available to the general public, that is suitable for revising the
document straightforwardly with generic text editors or (for images composed of pixels) generic
paint programs or (for drawings) some widely available drawing editor, and that is suitable for
input to text formatters or for automatic translation to a variety of formats suitable for input to
text formatters. A copy made in an otherwise Transparent file format whose markup, or absence
of markup, has been arranged to thwart or discourage subsequent modification by readers is not
Transparent. An image format is not Transparent if used for any substantial amount of text. A
copy that is not ”Transparent” is called ”Opaque”.
Examples of suitable formats for Transparent copies include plain ASCII without markup,
Texinfo input format, LaTeX input format, SGML or XML using a publicly available DTD,
and standard-conforming simple HTML, PostScript or PDF designed for human modification.
Examples of transparent image formats include PNG, XCF and JPG. Opaque formats include
proprietary formats that can be read and edited only by proprietary word processors, SGML or
XML for which the DTD and/or processing tools are not generally available, and the machinegenerated HTML, PostScript or PDF produced by some word processors for output purposes
only.
The ”Title Page” means, for a printed book, the title page itself, plus such following pages
as are needed to hold, legibly, the material this License requires to appear in the title page. For
works in formats which do not have any title page as such, ”Title Page” means the text near
the most prominent appearance of the work’s title, preceding the beginning of the body of the
text.
A section ”Entitled XYZ” means a named subunit of the Document whose title either is
precisely XYZ or contains XYZ in parentheses following text that translates XYZ in another
language. (Here XYZ stands for a specific section name mentioned below, such as ”Acknowledgements”, ”Dedications”, ”Endorsements”, or ”History”.) To ”Preserve the Title” of
such a section when you modify the Document means that it remains a section ”Entitled XYZ”
according to this definition.
121
The Document may include Warranty Disclaimers next to the notice which states that this
License applies to the Document. These Warranty Disclaimers are considered to be included by
reference in this License, but only as regards disclaiming warranties : any other implication that
these Warranty Disclaimers may have is void and has no effect on the meaning of this License.
2. VERBATIM COPYING
You may copy and distribute the Document in any medium, either commercially or noncommercially, provided that this License, the copyright notices, and the license notice saying
this License applies to the Document are reproduced in all copies, and that you add no other
conditions whatsoever to those of this License. You may not use technical measures to obstruct
or control the reading or further copying of the copies you make or distribute. However, you may
accept compensation in exchange for copies. If you distribute a large enough number of copies
you must also follow the conditions in section 3.
You may also lend copies, under the same conditions stated above, and you may publicly
display copies.
3. COPYING IN QUANTITY
If you publish printed copies (or copies in media that commonly have printed covers) of the
Document, numbering more than 100, and the Document’s license notice requires Cover Texts,
you must enclose the copies in covers that carry, clearly and legibly, all these Cover Texts :
Front-Cover Texts on the front cover, and Back-Cover Texts on the back cover. Both covers
must also clearly and legibly identify you as the publisher of these copies. The front cover must
present the full title with all words of the title equally prominent and visible. You may add
other material on the covers in addition. Copying with changes limited to the covers, as long as
they preserve the title of the Document and satisfy these conditions, can be treated as verbatim
copying in other respects.
If the required texts for either cover are too voluminous to fit legibly, you should put the first
ones listed (as many as fit reasonably) on the actual cover, and continue the rest onto adjacent
pages.
If you publish or distribute Opaque copies of the Document numbering more than 100, you
must either include a machine-readable Transparent copy along with each Opaque copy, or state
in or with each Opaque copy a computer-network location from which the general network-using
public has access to download using public-standard network protocols a complete Transparent
copy of the Document, free of added material. If you use the latter option, you must take
reasonably prudent steps, when you begin distribution of Opaque copies in quantity, to ensure
that this Transparent copy will remain thus accessible at the stated location until at least one
year after the last time you distribute an Opaque copy (directly or through your agents or
retailers) of that edition to the public.
It is requested, but not required, that you contact the authors of the Document well before
redistributing any large number of copies, to give them a chance to provide you with an updated
version of the Document.
4. MODIFICATIONS
122
You may copy and distribute a Modified Version of the Document under the conditions of
sections 2 and 3 above, provided that you release the Modified Version under precisely this
License, with the Modified Version filling the role of the Document, thus licensing distribution
and modification of the Modified Version to whoever possesses a copy of it. In addition, you
must do these things in the Modified Version :
A. Use in the Title Page (and on the covers, if any) a title distinct from that of the Document,
and from those of previous versions (which should, if there were any, be listed in the History
section of the Document). You may use the same title as a previous version if the original
publisher of that version gives permission.
B. List on the Title Page, as authors, one or more persons or entities responsible for authorship of the modifications in the Modified Version, together with at least five of the
principal authors of the Document (all of its principal authors, if it has fewer than five),
unless they release you from this requirement.
C. State on the Title page the name of the publisher of the Modified Version, as the publisher.
D. Preserve all the copyright notices of the Document.
E. Add an appropriate copyright notice for your modifications adjacent to the other copyright notices.
F. Include, immediately after the copyright notices, a license notice giving the public permission to use the Modified Version under the terms of this License, in the form shown in
the Addendum below.
G. Preserve in that license notice the full lists of Invariant Sections and required Cover Texts
given in the Document’s license notice.
H. Include an unaltered copy of this License.
I. Preserve the section Entitled ”History”, Preserve its Title, and add to it an item stating
at least the title, year, new authors, and publisher of the Modified Version as given on the
Title Page. If there is no section Entitled ”History” in the Document, create one stating
the title, year, authors, and publisher of the Document as given on its Title Page, then
add an item describing the Modified Version as stated in the previous sentence.
J. Preserve the network location, if any, given in the Document for public access to a Transparent copy of the Document, and likewise the network locations given in the Document
for previous versions it was based on. These may be placed in the ”History” section. You
may omit a network location for a work that was published at least four years before the
Document itself, or if the original publisher of the version it refers to gives permission.
K. For any section Entitled ”Acknowledgements” or ”Dedications”, Preserve the Title of the
section, and preserve in the section all the substance and tone of each of the contributor
acknowledgements and/or dedications given therein.
L. Preserve all the Invariant Sections of the Document, unaltered in their text and in their
titles. Section numbers or the equivalent are not considered part of the section titles.
M. Delete any section Entitled ”Endorsements”. Such a section may not be included in the
Modified Version.
N. Do not retitle any existing section to be Entitled ”Endorsements” or to conflict in title
with any Invariant Section.
O. Preserve any Warranty Disclaimers.
123
If the Modified Version includes new front-matter sections or appendices that qualify as
Secondary Sections and contain no material copied from the Document, you may at your option
designate some or all of these sections as invariant. To do this, add their titles to the list of
Invariant Sections in the Modified Version’s license notice. These titles must be distinct from
any other section titles.
You may add a section Entitled ”Endorsements”, provided it contains nothing but endorsements of your Modified Version by various parties–for example, statements of peer review or
that the text has been approved by an organization as the authoritative definition of a standard.
You may add a passage of up to five words as a Front-Cover Text, and a passage of up to
25 words as a Back-Cover Text, to the end of the list of Cover Texts in the Modified Version.
Only one passage of Front-Cover Text and one of Back-Cover Text may be added by (or through
arrangements made by) any one entity. If the Document already includes a cover text for the
same cover, previously added by you or by arrangement made by the same entity you are acting
on behalf of, you may not add another ; but you may replace the old one, on explicit permission
from the previous publisher that added the old one.
The author(s) and publisher(s) of the Document do not by this License give permission to
use their names for publicity for or to assert or imply endorsement of any Modified Version.
5. COMBINING DOCUMENTS
You may combine the Document with other documents released under this License, under
the terms defined in section 4 above for modified versions, provided that you include in the
combination all of the Invariant Sections of all of the original documents, unmodified, and list
them all as Invariant Sections of your combined work in its license notice, and that you preserve
all their Warranty Disclaimers.
The combined work need only contain one copy of this License, and multiple identical Invariant Sections may be replaced with a single copy. If there are multiple Invariant Sections
with the same name but different contents, make the title of each such section unique by adding
at the end of it, in parentheses, the name of the original author or publisher of that section if
known, or else a unique number. Make the same adjustment to the section titles in the list of
Invariant Sections in the license notice of the combined work.
In the combination, you must combine any sections Entitled ”History” in the various original documents, forming one section Entitled ”History” ; likewise combine any sections Entitled
”Acknowledgements”, and any sections Entitled ”Dedications”. You must delete all sections
Entitled ”Endorsements”.
6. COLLECTIONS OF DOCUMENTS
You may make a collection consisting of the Document and other documents released under
this License, and replace the individual copies of this License in the various documents with a
single copy that is included in the collection, provided that you follow the rules of this License
for verbatim copying of each of the documents in all other respects.
You may extract a single document from such a collection, and distribute it individually
under this License, provided you insert a copy of this License into the extracted document, and
follow this License in all other respects regarding verbatim copying of that document.
124
7. AGGREGATION WITH INDEPENDENT WORKS
A compilation of the Document or its derivatives with other separate and independent documents or works, in or on a volume of a storage or distribution medium, is called an ”aggregate”
if the copyright resulting from the compilation is not used to limit the legal rights of the compilation’s users beyond what the individual works permit. When the Document is included in
an aggregate, this License does not apply to the other works in the aggregate which are not
themselves derivative works of the Document.
If the Cover Text requirement of section 3 is applicable to these copies of the Document, then
if the Document is less than one half of the entire aggregate, the Document’s Cover Texts may
be placed on covers that bracket the Document within the aggregate, or the electronic equivalent
of covers if the Document is in electronic form. Otherwise they must appear on printed covers
that bracket the whole aggregate.
8. TRANSLATION
Translation is considered a kind of modification, so you may distribute translations of the
Document under the terms of section 4. Replacing Invariant Sections with translations requires
special permission from their copyright holders, but you may include translations of some or
all Invariant Sections in addition to the original versions of these Invariant Sections. You may
include a translation of this License, and all the license notices in the Document, and any
Warranty Disclaimers, provided that you also include the original English version of this License
and the original versions of those notices and disclaimers. In case of a disagreement between the
translation and the original version of this License or a notice or disclaimer, the original version
will prevail.
If a section in the Document is Entitled ”Acknowledgements”, ”Dedications”, or ”History”,
the requirement (section 4) to Preserve its Title (section 1) will typically require changing the
actual title.
9. TERMINATION
You may not copy, modify, sublicense, or distribute the Document except as expressly provided for under this License. Any other attempt to copy, modify, sublicense or distribute the
Document is void, and will automatically terminate your rights under this License. However,
parties who have received copies, or rights, from you under this License will not have their
licenses terminated so long as such parties remain in full compliance.
10. FUTURE REVISIONS OF THIS LICENSE
The Free Software Foundation may publish new, revised versions of the GNU Free Documentation License from time to time. Such new versions will be similar in spirit to the present version,
but may differ in detail to address new problems or concerns. See http ://www.gnu.org/copyleft/.
Each version of the License is given a distinguishing version number. If the Document specifies
that a particular numbered version of this License ”or any later version” applies to it, you
have the option of following the terms and conditions either of that specified version or of any
125
later version that has been published (not as a draft) by the Free Software Foundation. If the
Document does not specify a version number of this License, you may choose any version ever
published (not as a draft) by the Free Software Foundation.
ADDENDUM : How to use this License for your documents
To use this License in a document you have written, include a copy of the License in the
document and put the following copyright and license notices just after the title page :
c
Copyright YEAR
YOUR NAME. Permission is granted to copy, distribute and/or
modify this document under the terms of the GNU Free Documentation License,
Version 1.2 or any later version published by the Free Software Foundation ; with no
Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the
license is included in the section entitled ”GNU Free Documentation License”.
If you have Invariant Sections, Front-Cover Texts and Back-Cover Texts, replace the ”with...Texts.”
line with this :
with the Invariant Sections being LIST THEIR TITLES, with the Front-Cover Texts
being LIST, and with the Back-Cover Texts being LIST.
If you have Invariant Sections without Cover Texts, or some other combination of the three,
merge those two alternatives to suit the situation.
If your document contains nontrivial examples of program code, we recommend releasing
these examples in parallel under your choice of free software license, such as the GNU General
Public License, to permit their use in free software.
Annexe D
GNU General Public Licence
Version 2, June 1991
c 1989, 1991 Free Software Foundation, Inc.
Copyright 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
Everyone is permitted to copy and distribute verbatim copies of this license document, but
changing it is not allowed.
Preamble
The licenses for most software are designed to take away your freedom to share and change
it. By contrast, the GNU General Public License is intended to guarantee your freedom to share
and change free software—to make sure the software is free for all its users. This General Public
License applies to most of the Free Software Foundation’s software and to any other program
whose authors commit to using it. (Some other Free Software Foundation software is covered by
the GNU Library General Public License instead.) You can apply it to your programs, too.
When we speak of free software, we are referring to freedom, not price. Our General Public
Licenses are designed to make sure that you have the freedom to distribute copies of free software
(and charge for this service if you wish), that you receive source code or can get it if you want
it, that you can change the software or use pieces of it in new free programs ; and that you know
you can do these things.
To protect your rights, we need to make restrictions that forbid anyone to deny you these
rights or to ask you to surrender the rights. These restrictions translate to certain responsibilities
for you if you distribute copies of the software, or if you modify it.
For example, if you distribute copies of such a program, whether gratis or for a fee, you must
give the recipients all the rights that you have. You must make sure that they, too, receive or
can get the source code. And you must show them these terms so they know their rights.
We protect your rights with two steps : (1) copyright the software, and (2) offer you this
license which gives you legal permission to copy, distribute and/or modify the software.
Also, for each author’s protection and ours, we want to make certain that everyone understands that there is no warranty for this free software. If the software is modified by someone else
and passed on, we want its recipients to know that what they have is not the original, so that
any problems introduced by others will not reflect on the original authors’ reputations.
Finally, any free program is threatened constantly by software patents. We wish to avoid the
danger that redistributors of a free program will individually obtain patent licenses, in effect
128
making the program proprietary. To prevent this, we have made it clear that any patent must
be licensed for everyone’s free use or not licensed at all.
The precise terms and conditions for copying, distribution and modification follow.
GNU General Public License
Terms and Conditions For Copying, Distribution and
Modification
0. This License applies to any program or other work which contains a notice placed by
the copyright holder saying it may be distributed under the terms of this General Public
License. The “Program”, below, refers to any such program or work, and a “work based
on the Program” means either the Program or any derivative work under copyright law :
that is to say, a work containing the Program or a portion of it, either verbatim or with
modifications and/or translated into another language. (Hereinafter, translation is included
without limitation in the term “modification”.) Each licensee is addressed as “you”.
Activities other than copying, distribution and modification are not covered by this License ; they are outside its scope. The act of running the Program is not restricted, and
the output from the Program is covered only if its contents constitute a work based on
the Program (independent of having been made by running the Program). Whether that
is true depends on what the Program does.
1. You may copy and distribute verbatim copies of the Program’s source code as you receive
it, in any medium, provided that you conspicuously and appropriately publish on each copy
an appropriate copyright notice and disclaimer of warranty ; keep intact all the notices that
refer to this License and to the absence of any warranty ; and give any other recipients of
the Program a copy of this License along with the Program.
You may charge a fee for the physical act of transferring a copy, and you may at your
option offer warranty protection in exchange for a fee.
2. You may modify your copy or copies of the Program or any portion of it, thus forming
a work based on the Program, and copy and distribute such modifications or work under
the terms of Section 1 above, provided that you also meet all of these conditions :
(a) You must cause the modified files to carry prominent notices stating that you changed
the files and the date of any change.
(b) You must cause any work that you distribute or publish, that in whole or in part
contains or is derived from the Program or any part thereof, to be licensed as a whole
at no charge to all third parties under the terms of this License.
(c) If the modified program normally reads commands interactively when run, you must
cause it, when started running for such interactive use in the most ordinary way, to
print or display an announcement including an appropriate copyright notice and a
notice that there is no warranty (or else, saying that you provide a warranty) and
that users may redistribute the program under these conditions, and telling the user
how to view a copy of this License. (Exception : if the Program itself is interactive
129
but does not normally print such an announcement, your work based on the Program
is not required to print an announcement.)
These requirements apply to the modified work as a whole. If identifiable sections of that
work are not derived from the Program, and can be reasonably considered independent
and separate works in themselves, then this License, and its terms, do not apply to those
sections when you distribute them as separate works. But when you distribute the same
sections as part of a whole which is a work based on the Program, the distribution of the
whole must be on the terms of this License, whose permissions for other licensees extend
to the entire whole, and thus to each and every part regardless of who wrote it.
Thus, it is not the intent of this section to claim rights or contest your rights to work written
entirely by you ; rather, the intent is to exercise the right to control the distribution of
derivative or collective works based on the Program.
In addition, mere aggregation of another work not based on the Program with the Program
(or with a work based on the Program) on a volume of a storage or distribution medium
does not bring the other work under the scope of this License.
3. You may copy and distribute the Program (or a work based on it, under Section 2) in
object code or executable form under the terms of Sections 1 and 2 above provided that
you also do one of the following :
(a) Accompany it with the complete corresponding machine-readable source code, which
must be distributed under the terms of Sections 1 and 2 above on a medium customarily used for software interchange ; or,
(b) Accompany it with a written offer, valid for at least three years, to give any third
party, for a charge no more than your cost of physically performing source distribution,
a complete machine-readable copy of the corresponding source code, to be distributed
under the terms of Sections 1 and 2 above on a medium customarily used for software
interchange ; or,
(c) Accompany it with the information you received as to the offer to distribute corresponding source code. (This alternative is allowed only for noncommercial distribution
and only if you received the program in object code or executable form with such an
offer, in accord with Subsection b above.)
The source code for a work means the preferred form of the work for making modifications
to it. For an executable work, complete source code means all the source code for all
modules it contains, plus any associated interface definition files, plus the scripts used to
control compilation and installation of the executable. However, as a special exception, the
source code distributed need not include anything that is normally distributed (in either
source or binary form) with the major components (compiler, kernel, and so on) of the
operating system on which the executable runs, unless that component itself accompanies
the executable.
If distribution of executable or object code is made by offering access to copy from a
designated place, then offering equivalent access to copy the source code from the same
place counts as distribution of the source code, even though third parties are not compelled
to copy the source along with the object code.
130
4. You may not copy, modify, sublicense, or distribute the Program except as expressly provided under this License. Any attempt otherwise to copy, modify, sublicense or distribute
the Program is void, and will automatically terminate your rights under this License. However, parties who have received copies, or rights, from you under this License will not
have their licenses terminated so long as such parties remain in full compliance.
5. You are not required to accept this License, since you have not signed it. However, nothing
else grants you permission to modify or distribute the Program or its derivative works.
These actions are prohibited by law if you do not accept this License. Therefore, by modifying or distributing the Program (or any work based on the Program), you indicate
your acceptance of this License to do so, and all its terms and conditions for copying,
distributing or modifying the Program or works based on it.
6. Each time you redistribute the Program (or any work based on the Program), the recipient
automatically receives a license from the original licensor to copy, distribute or modify
the Program subject to these terms and conditions. You may not impose any further
restrictions on the recipients’ exercise of the rights granted herein. You are not responsible
for enforcing compliance by third parties to this License.
7. If, as a consequence of a court judgment or allegation of patent infringement or for any
other reason (not limited to patent issues), conditions are imposed on you (whether by
court order, agreement or otherwise) that contradict the conditions of this License, they do
not excuse you from the conditions of this License. If you cannot distribute so as to satisfy
simultaneously your obligations under this License and any other pertinent obligations,
then as a consequence you may not distribute the Program at all. For example, if a patent
license would not permit royalty-free redistribution of the Program by all those who receive
copies directly or indirectly through you, then the only way you could satisfy both it and
this License would be to refrain entirely from distribution of the Program.
If any portion of this section is held invalid or unenforceable under any particular circumstance, the balance of the section is intended to apply and the section as a whole is
intended to apply in other circumstances.
It is not the purpose of this section to induce you to infringe any patents or other property
right claims or to contest validity of any such claims ; this section has the sole purpose of
protecting the integrity of the free software distribution system, which is implemented by
public license practices. Many people have made generous contributions to the wide range
of software distributed through that system in reliance on consistent application of that
system ; it is up to the author/donor to decide if he or she is willing to distribute software
through any other system and a licensee cannot impose that choice.
This section is intended to make thoroughly clear what is believed to be a consequence of
the rest of this License.
8. If the distribution and/or use of the Program is restricted in certain countries either by
patents or by copyrighted interfaces, the original copyright holder who places the Program
under this License may add an explicit geographical distribution limitation excluding those
countries, so that distribution is permitted only in or among countries not thus excluded.
In such case, this License incorporates the limitation as if written in the body of this
License.
131
9. The Free Software Foundation may publish revised and/or new versions of the General
Public License from time to time. Such new versions will be similar in spirit to the present
version, but may differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the Program specifies a version
number of this License which applies to it and “any later version”, you have the option of
following the terms and conditions either of that version or of any later version published
by the Free Software Foundation. If the Program does not specify a version number of this
License, you may choose any version ever published by the Free Software Foundation.
10. If you wish to incorporate parts of the Program into other free programs whose distribution
conditions are different, write to the author to ask for permission. For software which is
copyrighted by the Free Software Foundation, write to the Free Software Foundation ;
we sometimes make exceptions for this. Our decision will be guided by the two goals of
preserving the free status of all derivatives of our free software and of promoting the sharing
and reuse of software generally.
No Warranty
11. Because the program is licensed free of charge, there is no warranty for
the program, to the extent permitted by applicable law. Except when
otherwise stated in writing the copyright holders and/or other parties
provide the program “as is” without warranty of any kind, either expressed or implied, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose. The entire risk as to the
quality and performance of the program is with you. Should the program
prove defective, you assume the cost of all necessary servicing, repair or
correction.
12. In no event unless required by applicable law or agreed to in writing will
any copyright holder, or any other party who may modify and/or redistribute the program as permitted above, be liable to you for damages,
including any general, special, incidental or consequential damages arising
out of the use or inability to use the program (including but not limited
to loss of data or data being rendered inaccurate or losses sustained by
you or third parties or a failure of the program to operate with any other
programs), even if such holder or other party has been advised of the possibility of such damages.
End of Terms and Conditions
Appendix : How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest possible use to the
public, the best way to achieve this is to make it free software which everyone can redistribute
and change under these terms.
132
To do so, attach the following notices to the program. It is safest to attach them to the start
of each source file to most effectively convey the exclusion of warranty ; and each file should have
at least the “copyright” line and a pointer to where the full notice is found.
¡one line to give the program’s name and a brief idea of what it does.¿
Copyright (C) ¡year¿ ¡name of author¿
This program is free software ; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software Foundation ; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY ; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
more details.
You should have received a copy of the GNU General Public License along with this
program ; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite
330, Boston, MA 02111-1307, USA.
Also add information on how to contact you by electronic and paper mail.
If the program is interactive, make it output a short notice like this when it starts in an
interactive mode :
Gnomovision version 69, Copyright (C) ¡year¿ ¡name of author¿
Gnomovision comes with ABSOLUTELY NO WARRANTY ; for details type ‘show
w’.
This is free software, and you are welcome to redistribute it under certain conditions ;
type ‘show c’ for details.
The hypothetical commands show w and show c should show the appropriate parts of the
General Public License. Of course, the commands you use may be called something other than
show w and show c ; they could even be mouse-clicks or menu items—whatever suits your program.
You should also get your employer (if you work as a programmer) or your school, if any, to
sign a “copyright disclaimer” for the program, if necessary. Here is a sample ; alter the names :
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
‘Gnomovision’ (which makes passes at compilers) written by James Hacker.
¡signature of Ty Coon¿, 1 April 1989
Ty Coon, President of Vice
This General Public License does not permit incorporating your program into proprietary
programs. If your program is a subroutine library, you may consider it more useful to permit
linking proprietary applications with the library. If this is what you want to do, use the GNU
Library General Public License instead of this License.
Index
Symboles
<A>
30
< ABBR >
27
< ACRON Y M >
27
<B>
27
< BASE >
26
< BIG >
27
< BLOCKQU OT E >
28
< BODY >
27, 30
< CAP T ION >
29
< CIT E >
28
< CODE >
28
< DIV >
28
< EM >
28
< F ORM >
32
< F RAM E/ >
31
< F RAM ESET >
31
< H1 >
28
< H2 >
28
< H3 >
28
< H4 >
28
< H5 >
28
< H6 >
28
< HEAD >
25, 46
<I>
27
< IM G/ >
30
< IN DEX >
26
< IN P U T / >
33
< LH >
28
< LI >
28
< LIN K/ >
38
< M AP >
31
< M ET A >
26
< OL >
28
< OP T ION >
34
<P >
28
< P RE >
28
<Q>
28
< SCRIP T >
46
< SELECT >
34
< SM ALL >
27
< ST RON G >
28
< ST Y LE >
38
< T ABLE >
29
< TD >
29
< T EXT AREA >
34
< TH >
29
< T IT LE >
25
< TR >
29
<U >
27
< UL >
28
A
alert()
63
Apache
13, 15, 17
architecture 2-tiers
21
architecture 3-tiers
21
ARPANet
19
Array.concat()
58
Array.join()
58
Array.length()
58
Array.pop()
58
Array.push()
58
Array.reverse()
59
Array.shift()
59
Array.slice()
59
Array.sort()
59
Array.splice()
59
Array.toString()
59
Array.unshift()
59
attributs
23
B
balise
23
BlueFish Editor
break
52
11
C
Cadres
31
caractères accentués
caractères spéciaux
catch
53
CGI
15–17
clearInterval()
64
24
24
134
INDEX
clearTimeout()
Client
13
confirm()
63
continue
52
CSS
37
63
history.forward()
HTML
20
HTTP
21
65
I
if
51
Images
30
réactives
30
Internet Explorer
11
D
Date()
60
Date.getDate()
60
Date.getDay()
60
Date.getFullYear()
60
Date.getHours()
60
Date.getMonth()
60
Date.getTime()
60
defaultStatus
63
delete
49
DNS
21
do/while
52
document.cookie
65
document.cookie.remove()
DreamWeaver
10
J
JavaScript
14
K
KDevelop
11
L
66
Liens hypertextes
30
Listes
28
non ordonnées
28
ordonnées
28
location.replace()
65
E
M
Eclipse
11
Error()
60
Error.message
60
Error.name
61
exception
53
Expressions régulières
Math.abs()
61
Math.pow()
61
Math.sqrt()
61
MIME
21
Mozilla-FireFox
11
MySQL
17–18
N
F
false
47
Feuilles de style
37
finally
53
for
52
for/in
52
Formulaires
32
Frames
31
function
54
G
GET
55
16, 32
H
history.back()
65
NEdit
11
Netscape Navigator
new
47, 48
11
O
Outils de développement
10
Editeurs
11
NEdit
11
VIm
11
XEmacs
11
Environnements intégrés
10
BlueFish Editor
11
DreamWeaver
10
Eclipse
11
INDEX
KDevelop
11
Quanta Plus
11
Navigateurs
11
Internet Explorer
11
Mozilla-FireFox
11
Netscape Navigator
11
P
11
R
valueOf()
VIm
11
void
49
XEmacs
S
Tableaux
29
tag
23
TCP/IP
19
throw
53
toString()
47, 57
true
47
try
53
V
47, 57
X
RegExp()
61
RegExp.exec()
61
RegExp.test()
61
return
54
T
13, 22
while
52
window.close()
64
window.closed
64
window.moveBy()
window.moveTo()
window.open()
64
window.resizeBy()
window.resizeTo()
Q
Serveur
13
setInterval()
64
setTimeout
63
status
63
String.concat()
57
String.length()
57
String.split()
57
String.substr()
58
String.toLowerCase()
String.toUpperCase()
Style
27
switch
51
URL
W
parseFloat()
57
parseInt()
57
PHP
17–18
POST
16, 32
prompt()
63
Quanta Plus
U
58
58
11
65
64
65
65
135
(côté Client)
La création de sites Web dynamiques, utilisant éventuellement des
informations issues d’une base de données, nécessite la maı̂trise
d’un certain nombre d’outils et de langages. Le plus important
d’entre eux permet de présenter des informations sur une page
Web : il s’agit du HTML, langage de marquage statique, auquel
on peut adjoindre des feuilles de style CSS permettant de modifier
l’affichage d’une même page de code.
En dehors de cet aspect purement statique, il existe également
des possibilités de programmation dynamique côté client ou côté
serveur. La programmation côté client s’effectue essentiellement
en JavaScript. On peut par la suite effectuer une combinaison
d’HTML, CSS, et JavaScript ; on parlera alors de DHTML.
La programmation côté serveur peut être effectuée à l’aide de CGI (Common Gateway Interface)
qui génèrent du code HTML à partir d’un programme en Perl ou C. Il existe également les JSP
(Java Server Page) qui fonctionnent sur le même principe. Enfin, le langage le plus utilisé reste
le PHP que l’on peut connecter très facilement à une base de données de type MySQL.
Pour finir, le XML permet le développement de nouveaux langages de marquages. Il a ainsi
permit de définir de manière plus formelle le HTML qui devient alors du XHTML où les feuilles
de style deviendront des XSLT.
Les différentes notions abordées (côté Client) :
– HTML : HyperText Markup Language
– Les feuilles de style en cascade : Cascading Style Sheets – CSS1 et CSS2
– JavaScript
– DHTML
Les différentes notions abordées (côté Serveur) :
– PHP : Hypertext Preprocessor
– PHP-MySQL
– Librairies PHP : FPDF et JPGraph
– XML : EXtensive Markup Language
– XSLT
– XHTML : EXtensive HyperText Markup Language
Toutes les notions présentées sont indépendantes du système d’exploitation utilisé. Toutefois, les
explications seront toujours fournies en se référant au système Debian Linux, le lecteur pouvant
l’adapter à son système.
LIF – 39 rue Joliot-Curie – 13453 Marseille Cedex 13

Outils de l`Internet (côté Client)

Transcription

Documents pareils

ST TROPEZ N.C. Bleu Citron hires a commercial agent

Across 1 in good condition >> en bon é*** / bien

Répertoire (Duo Marina Isabel Daniel Bolduc) Francophone

Télécharger la plaquette, les dates

Chanson – Artiste

Comment choisir un sujet - Canadian Parents for French

1971site_rcf.be_

Charlotte - Lycée Perrimond

Poste à pourvoir de lecteur d`anglais à la Faculté

09_la_croisade_des_enfants_-_jacques_higelin ( PDF