Polycopié Web Dynamique

Web Dynamique
Pour les étudiants de SMI
Ahmed ZINEDINE
2015
dd
Web Dynamique
Pour les étudiants de SMI
Ahmed ZINEDINE
2015
Dernière mise à jour : 2019
Web Dynamique A. Zinedine
Présentation du polycopié
Ce cours est destiné aux étudiants de SMI (Sciences mathématiques et

Informatique). Il donne les notions de base de la programmation Web.
Après une introduction sur l’historique de l’Internet et du Web, nous avons

partagé le polycopié en 3 parties :
La première partie contient 2 chapitres. Le chapitre 1 présente en détaille le

langage HTML. Ce fameux langage de balisage est à l’origine du succès du
web. Tous les sites web quelle que soit leur complexité présente finalement
leur contenu en HTML.
Le deuxième chapitre traite les feuilles de style en cascade (CSS). L’idée de base
est de séparer le contenu d’un document de son style. Le but est de faciliter la
maintenance des sites web et la modification de leurs styles. En plus, les
feuilles de style offrent plus de contrôle sur le style et permettent d’autres
possibilités non offertes par HTML.
Les besoins des sites actuels dépassent largement les possibilités offertes par
HTML (et CSS). En effet, ces deux langages sont destinés à présenter (afficher)
un document. Ils n’offrent aucune possibilité de traitement (comment faire par
exemple pour capturer le login et le mot de passe d’un utilisateur ?). Les scripts
viennent pour étendre les capacités de HTML. Ils sont de deux types : Les
scripts côté client (dont l’exécution se passe sur la machine de l’utilisateur) et
les scripts côté serveur (dont l’exécution se passe sur le serveur).
Dans la partie 2, qui contient le chapitre 3, nous étudions le langage Javascript,

le langage de script côté client qui domine le marché actuellement.
Dans la partie 3, qui contient les chapitres 4, 5, 6 et 7, nous étudions le langage

PHP, qui est de nos jours le langage de script côté serveur le plus populaire sur
le Web.
Ahmed Zinedine
Pour toute remarque, suggestion commentaire ou correction, merci de contacter

l’auteur par email sur l’adresse : ahmed.zinedine@usmba.ac.ma.
3
4
Table des matières

Introduction .................................................................................................................................. 9
1) L’internet .................................................................................................................................................. 9
a) Historique d’Internet ...................................................................................................................... 9
b) Communication sur Internet ........................................................................................................ 10
c) Les services internet...................................................................................................................... 10
d) Architecture Client / Serveur ....................................................................................................... 11
2) Le World Wide Web ............................................................................................................................ 11
a) Historique du Web ........................................................................................................................ 11
b) Le W3C.......................................................................................................................................... 12
c) Web et architecture Client / Serveur ............................................................................................ 12
d) Les langages du Web .................................................................................................................... 12
Partie 1 HTML et Feuilles de style .................................................................................................... 15
Chapitre 1 : Le langage HTML ............................................................................................... 17
0) Introduction ........................................................................................................................................... 17
a) Comment fonctionnent les pages Web ? ...................................................................................... 17
b) Qu’est-ce que HTML ? .................................................................................................................. 17
c) Comment insérer du code HTML ? .............................................................................................. 18
d) Qu’est-ce que une balise ? ............................................................................................................ 18
e) Qu’est-ce que un attribut ? ........................................................................................................... 18
1) Structure d’une page HTML .............................................................................................................. 18
a) La section entête (Head) :.............................................................................................................. 19
b) La partie Corps du document (Body)............................................................................................ 20
2) Le texte dans une page HTML .......................................................................................................... 22
a) La balise <br> ................................................................................................................................ 22
b) La balise <hr>................................................................................................................................ 23
c) La balise <pre>…</pre> ................................................................................................................ 24
d) Les caractères accentués et caractères spéciaux .......................................................................... 25
e) La mise en forme du texte ............................................................................................................. 26
f) Autres balises de style ................................................................................................................... 27
3) Structuration d’une page HTML....................................................................................................... 27
a) Les Titres ....................................................................................................................................... 28
5
b) Les paragraphes ............................................................................................................................ 28

c) Les divisions .................................................................................................................................. 29
d) Les listes ........................................................................................................................................ 29
4) Les images .............................................................................................................................................. 32
a) La balise <img /> ........................................................................................................................... 33
5) Incorporer du multimédia .................................................................................................................. 34
6) Les liens .................................................................................................................................................. 34
a) La balise <a>…</a> ....................................................................................................................... 35
b) Images et liens............................................................................................................................... 37
7) Les tableaux ........................................................................................................................................... 37
a) Options globales pour tout le tableau ........................................................................................... 39
b) Options pour une seule ligne ........................................................................................................ 40
c) Options pour une seule cellule...................................................................................................... 41
8) Les formulaires ..................................................................................................................................... 42
a) Créer un formulaire ...................................................................................................................... 42
b) Créer les champs du formulaire ................................................................................................... 42
Chapitre 2 : Les feuilles de style ............................................................................................ 47
0) Introduction ........................................................................................................................................... 47
1) Principe de feuilles de style ............................................................................................................... 48
a) Feuilles de style incorporées ......................................................................................................... 48
b) Feuilles de style externes .............................................................................................................. 49
c) Feuilles de style en ligne ............................................................................................................... 50
2) Les attributs de style............................................................................................................................ 51
a) Syntaxe générale ........................................................................................................................... 51
b) Attributs de style concernant le texte .......................................................................................... 52
c) Marges, bordures et remplissage .................................................................................................. 55
d) Couleurs et images d’arrière-plan ................................................................................................ 58
e) Le positionnement et la visibilité .................................................................................................. 58
2) Organisation des feuilles de style ..................................................................................................... 59
a) Organiser les styles en groupes .................................................................................................... 59
b) Organiser les styles en classes ...................................................................................................... 60
Partie 2 Scripts côté client ................................................................................................................. 63
Chapitre 3 : Le langage Javascript ......................................................................................... 65
0) Introduction ........................................................................................................................................... 65
6
1) Comment insérer du code javascript dans une page HTML ...................................................... 65

2) Eléments de la programmation de base de javascript.................................................................. 67
a) Les commentaires ......................................................................................................................... 68
b) Déclaration des variables .............................................................................................................. 68
c) Les fonctions ................................................................................................................................. 69
d) Structures de contrôle ................................................................................................................... 69
3) Le modèle Objet de javascript ........................................................................................................... 71
a) Objets Créés par l’utilisateur ........................................................................................................ 71
b) Les objets prédéfinis ..................................................................................................................... 75
b1) Les Objets built-in ................................................................................................................... 75
b2) Les Objets du Navigateur ........................................................................................................ 87
4) Manipulation des formulaires ........................................................................................................... 92
a) L’objet form ................................................................................................................................... 92
b) Les éléments du formulaire .......................................................................................................... 93
c) Manipulation des éléments du formulaire .................................................................................... 97
d) L’utilisation du mot clés this ...................................................................................................... 104
5) Les timers .............................................................................................................................................105
Partie 3 Scripts côté serveur ............................................................................................................. 109
Chapitre 4 : Débuter avec PHP ............................................................................................. 111
1) Commencer avec PHP .......................................................................................................................111
a) Installation de EasyPHP .............................................................................................................. 112
b) Configuration de PHP ................................................................................................................. 112
c) Démarrage et Arrêt du Serveur .................................................................................................. 112
d) Accès aux pages Web.................................................................................................................. 114
e) Résumé des tâches à faire pour commencer : ............................................................................. 114
f) Exemples de scripts PHP ............................................................................................................. 115
2) Eléments de la programmation de base de PHP..........................................................................116
a) Les commentaires ....................................................................................................................... 117
b) Déclaration des variables ............................................................................................................ 117
c) Les constantes ............................................................................................................................. 118
d) Les fonctions ............................................................................................................................... 119
d) Structures de contrôle ................................................................................................................. 121
Chapitre 5: Quelques fonctions utiles de PHP ................................................................. 125
1) Fonctions pour l’affichage ................................................................................................................125
7
2) fonctions pour la gestion des variables .........................................................................................125

3) Chaînes de caractères ........................................................................................................................126
4) Tableaux ...............................................................................................................................................127
a) Initialisation des tableaux : ......................................................................................................... 127
b) Accès aux éléments d’un tableau................................................................................................ 128
c) Parcours des tableaux.................................................................................................................. 128
d) Autres fonctions pour la gestion des tableaux ........................................................................... 129
e) Tableaux associatifs .................................................................................................................... 130
f) Parcours des tableaux associatifs avec foreach ........................................................................... 130
g) Fonctions utiles pour les tableaux associatifs............................................................................. 131
5) Date et heure .......................................................................................................................................132
6) Mathématiques ...................................................................................................................................134
7) Inclusion des fichiers .........................................................................................................................135
8) Arrêt prématuré..................................................................................................................................136
9) Accès aux fichiers et aux dossiers ..................................................................................................138
a) Gestion des fichiers ..................................................................................................................... 138
b) Gestion des dossiers .................................................................................................................... 142
10) Expressions régulières ....................................................................................................................145
11) Mail ......................................................................................................................................................147
12) Variables d’environnement et constantes PHP .........................................................................148
13) Entêtes HTTP ....................................................................................................................................149
14) Cookies ...............................................................................................................................................150
15) Sessions ..............................................................................................................................................152
Chapitre 6 : Passage de paramètres à un script ............................................................... 155
1) Passage des données avec la méthode POST : .............................................................................155
2) Passage des données avec la méthode GET : ...............................................................................158
Chapitre 7: Accès aux bases de données ............................................................................ 161
1) Création de Bases de données et de tables ...................................................................................161
2) PHP Data Objects (PDO) ..................................................................................................................164
3) Connexion à la base de données .....................................................................................................164
4) Manipuler les données ......................................................................................................................165
5) Afficher le résultat d’une requête...................................................................................................172
8
Introduction
1) L’internet
a) Historique d’Internet
Internet est un réseau informatique très vaste. En fait, c’est un réseau de réseaux. Il est
constitué de plusieurs centaines de milliers de réseaux locaux (réseaux d’universités,
d’entreprises, d’organisations, d’individus…). Internet est si gigantesque qu’il s’étend à
l’heure actuelle sur tout le globe terrestre. Des millions et des millions d’ordinateurs son y
connectés.
En 1969 et en pleine guerre froide, le DoD (Departement of Defence) demanda à l’ARPA

(Advenced Research Project Agency) de créer un réseau d’interconnexion de ses
ordinateurs. L’objectif était de construire un réseau informatique couvrant la totalité du
territoire américain, qui est susceptible de résister à une attaque nucléaire et capable de
fonctionner même en cas de destruction partielle. C’est ainsi que le réseau ARPANET est né.
Et dès le départ, ce réseau fut conçu sans être dirigé par un noeud particulier, et de telle
sorte que si une voie de communication venait à être détruite, alors le réseau soit capable
d’acheminer les informations par un autre chemin.
Vers 1980, ARPA commença à faire évoluer les ordinateurs de ses réseaux vers les nouveaux
protocoles TCP/IP et elle se mit à subventionner l’université de Berkeley pour qu’elle
intègre TCP/IP dans son système d’exploitation UNIX (BSD). A cette époque, la quasi-
totalité des départements informatiques des universités américaines commencèrent à se
doter de réseaux locaux qui, en quelques années seront interconnectés entre eux sous
l’impulsion de la NSF (National Science Foundation).
En 1983, l’agence de la communication de la défense décide d’ouvrir le réseau grandissant

au domaine civil et il le divise en deux sous réseaux : MILNET qui est un réseau militaire
sous la tutelle d’une autorité militaire, et ARPANET qui est un réseau destiné aux
chercheurs et scientifiques, placé sous une autorité universitaire.
En 1986, la National Science Foundation crée son propre réseau le NSFNET.
En 1990, Le nom ARPANET cesse d’exister, le nom INTERNET (Inter Network) s’impose peu
à peu.
En 1992, la mise en place du Web (avec le multimédia) a donné une grande poussée au
développement de l’Internet.
En 1995, NSFNET disparaît à son tour. Composé de réseaux interconnectés, Internet devient
le réseau mondial que nous connaissons aujourd’hui.
9
Ainsi, Internet s’est constitué progressivement par des centaines de milliers de réseaux
locaux mis en place par les universités, les entreprises, les administrations et organismes
divers, interconnectés entre eux.
b) Communication sur Internet
Pour que deux ordinateur sur un réseau peuvent « communiquer entre eux », c'est-à-dire
échanger des informations, ils doivent utiliser tous les deux un même protocole : Un
protocole est un ensemble de règles de communication utilisés par deux ordinateurs qui
veulent communiquer sur le réseau pour pouvoir « se comprendre » c'est-à-dire c’est
comme une « langue commune » utilisée par les deux ordinateurs
Tous les ordinateurs sur Internet utilisent les protocoles de la suite TCP/IP (Transmission
Control Protocol/Internet Protocol) basée sur la commutation de paquets (datagrammes),
proposée par le pionnier d'ARPAnet Robert Kahn et le chercheur Vincent Cerf en 1974.. En
effet, les réseaux constituant Internet ne sont pas de même type (Ethernet, Token Ring,…),
et les ordinateurs sont de tout genre (PC, Macintosh,…) et utilisent différents systèmes
d’exploitation (Unix, Windows,…). La communication entre les différents nœuds est en fait
possible grâce à cette suite de protocoles ouverts utilisés pour la communication sur
Internet.
c) Les services internet
Internet offre plusieurs services. Chaque service utilise un protocole spécial de la suite de
protocoles TCP/IP. Voilà quelques exemples :
Connexion à distance (Telnet)
Ce service permet de se connecter et ouvrir une session sur une machine distante (si
on a les droits nécessaires) en utilisant un compte et un mot de passe.
Transfert de fichiers (FTP)
En utilisant le protocole FTP (File Transfert Protocol) un utilisateur peut transférer

des fichiers de/vers une machine distante et les gérer sur cette machine. (Exemple :
ftp://ftp.microsoft.com).
Le courrier électronique
Il permet d’échanger des courriers avec des correspondants situés n’importe où sur
le réseau Internet. Il fonctionne en mode différé : les messages sont stockés dans une
boîte à lettres en attendant d’être lus par les destinataires. Ce service est parmi les
services d’Internet les plus utilisés.
Le World Wide Web
Web en anglais signifie toile d'araignée et World, le monde. Il s’agit ici du service le
plus populaire d'Internet. En effet, le Web peut être vu comme une gigantesque
bibliothèque. Ce service permet de pouvoir consulter une quantité incroyable de
10
documents à partir de son poste. Ces documents sont téléchargés (copiés sur votre
ordinateur) puis afficher sur votre écran.
Que pouvons-nous y trouver ? Tout ce que vous pourriez imaginer : de la littérature,

des informations personnels sur telle ou telle personne, des recettes de cuisines, des
programmes informatiques, des informations scientifiques, des photos, des chansons,
des vidéos, des jeux, les horaires de vos trains, ... le but de ce cours et de vous
montrer comment créer vos propres documents en vue de les publier sur le Web.
d) Architecture Client / Serveur
Tous les services d’Internet suivent le modèle Client / Serveur. Les applications qui suivent
ce modèle se composent de deux parties (client et serveur) chacune s’exécutant sur un
ordinateur (qui peut être le même : i. e. le logiciel client et le logiciel serveur peuvent être
installés sur un même ordinateur). La communication se passe selon le modèle suivant :
 Le serveur est toujours à l’écoute de tous les clients sur le réseau (généralement
plusieurs clients) ;
 C’est le client qui doit prendre l’initiative pour demander le service ;
 Le client émet une requête vers le serveur et attend la réponse ;
 Si le serveur détecte une requête, il la traite et il envoie la réponse au client
concerné ;
 Le client reçoit le résultat et il l’exploite.
2) Le World Wide Web

a) Historique du Web
Le World Wide Web (ou plus simplement le Web) trouve ses origines au début des années
1990. A cette époque, M. Tim Bernes-Lee, un chercheur du CERN (Centre Européen de
Recherche Nucléaire), inventa une technique permettant de créer des références croisées
entre des textes sur Internet à l’aide de liens « hypertextes ». Le but de ce projet était de
pouvoir simplement proposer des documents multimédia (pouvant comporter plusieurs
formes de médias, sons, images, vidéos, textes, ...) et d'autoriser une navigation dite
hypertexte au travers de ces documents. En 1990, il proposa le premier serveur Web et le
premier navigateur (Nexus).
La simplicité du langage HTML proposé séduisait les utilisateurs. Et en 1993, le CERN et

NCSA (National Center for Superconducting Application) diffusent gratuitement le premier
navigateur Web grand public : Mosaic. Dans cette année, près de 100 ordinateurs étaient
équipés pour la diffusion de pages HTML. Ce réseau de pages fut baptisé World Wide Web
(ou toile Mondiale). Plusieurs logiciels (navigateurs Web) avaient été écrits pour permettre
la consultation et l’affichage de page Web. On pouvait dès lors naviguer sur le Web en
donnant tout simplement une URL (Uniform Resource Locator) au navigateur et on est parti
sur le Web. Dès lors, il suffit de cliquer sur les différents liens hypertextes pour consulter de
nouvelles informations et de partir d’un document à l’autre. La popularité du Web croissant
rapidement, des navigateurs Web capable d’afficher, en plus du texte, des images, du son et
de la vidéo, ne tardèrent pas à apparaître (par exemple, Netscape Navigator et après Internet
Explorer).
11
b) Le W3C
En 1994, Tim Bernes-Lee fonda le W3C (World Wide Web Consortium) afin de garder un
contrôle sur l'évolution du Web. Cette organisation, regroupant différentes sociétés actives
sur le Web, est chargée de contrôler l'évolution des technologies et des langages utilisés sur
le Web. Les principaux navigateurs utilisés par la plupart des internautes respectent plus ou
moins les recommandations du W3C.
c) Web et architecture Client / Serveur
Comme tous les autres services d’Internet, Le WWW suit le modèle Client / Serveur.
Parmi les logiciels Serveurs (serveurs Web, dits aussi serveurs HTTP) il y a Apache (très
populaire) et IIS (de Microsoft).
Les logiciels clients du Web s’appellent navigateurs. Parmi les plus connus il y a : Mozilla
Firefox, Google Chrome, Microsoft Internet Explorer,…
Supposons par exemple que vous voulez visiter le site www.fsdm.usmba.ac.ma. Quand vous
tapez cette adresse dans la barre d’adresses du navigateur (par exemple Firefox) et vous
validez, alors le client (qui est Firefox) envoie la requête au serveur se trouvant à cette
adresse. Ce serveur qui est à l’écoute des requêtes pareilles envoie la page HTML demandé.
Quand Firefox reçoit la page, il l’affiche sur votre écran.
Un navigateur Web est donc un logiciel informatique qui se charge de demander les pages
HTML (ordonnées par l’utilisateur) auprès du serveur Web. Quand il reçoit le fichier HTML
voulu, il interprète ses composants pour collecter, disposer et afficher les éléments d’une
page Web. Le fichier HTML est toujours bâti sur des commandes HTML, mais il peut aussi
contenir des éléments pour gérer le contenu dynamique tels que des sections de langage de
script, des applets Java, des contrôles ActiveX. Les navigateurs utilisent aussi des
programmes appelés Plug-ins pour interpréter diverses données telles que les données audio
et vidéo.
d) Les langages du Web

Le premier langage qui a été définit pour le Web est le langage HTML (HyperText Markup
Language) qui permet de décrire un document transitant sur le Web. Les pages HTML sont
aujourd’hui l’interface standard d’Internet. Elles peuvent contenir du texte, des images des
animations, du son de la vidéo (on parle de l’hypermédia), des programmes interactifs
complets Des millions de pages sont rapatriés sur des millions de serveurs dans le monde
entier. Actuellement, HTML est sorti de son contexte et n’est plus réservé à Internet. Il
permet maintenant de décrire toutes sortes de documents, qui ne sont pas forcément liés au
web. La plupart des réseaux d’entreprises (Intranet) utilisent HTML pour faire circuler leurs
documents professionnels en interne. Il est largement utilisé pour publier des présentations
sur CD-ROM. Un exemple plus frappant étant certainement celui des documentations et des
systèmes d'aides accompagnant certains logiciels. Bref, le HTML est partout.
Il existe un autre langage appelé XML (eXtensible Markup Language). Alors que les pages
HTML utilisent des balises prédéfinies dans les normes du langage (par le W3C), le XML
permet l’utilisation de balises personnalisées. L’étude de XML est hors du cadre de ce cours.
12
Après la version 4 du HTML, le W3C a sorti un nouveau langage appelé XHTLM

(extensible HTML) et ce dans le but d’encourager les gens à écrire des pages Web qui
respectent les règles strictes du langage XML, tout en gardant la simplicité de HTML.
En 2014 la recommandation officielle du HTML 5 est sortie. Cette version a révolutionné la

manière dont le Web évolue, fonctionne et est utilisé. En effet, HTML5 est à la fois une
spécification unique et un ensemble complet de technologies.
D’autres langages sont venus se greffer sur le HTML pour étendre ses possibilités, par
exemple JavaScript et CSS.
Le langage CSS (Cascading Style Sheets) a augmenté considérablement les possibilités du

Web. L’idée de base est de pouvoir séparer la structure d’un document de son style. Par
exemple, vous pouvez définir le contenu de votre page dans un document HTML, et dans un
autre document appelé feuille de style vous définissez le style du premier document (par
exemple vous définissez la couleur des titres et leur taille, l’alignement des paragraphes,
l’arrière-plan…). Ainsi, si vous voulez modifier le style de vos pages, il vous suffit de
modifier la feuille de style.
JavaScript est un langage de scripts (côté client) qui permet d’ajouter des blocs de code dans
un document HTML. Par exemple, il permet de contrôler la validité des informations saisies
dans un formulaire avant de l’envoyer au serveur. Il permet aussi de créer des effets visuels
dans une page HTML, par exemple animer un bouton, modifier la couleur d’un texte…
D’autres langages de scripts interviennent dans le côté du serveur (Par exemple, PHP,
ASP…) et ils permettent d’effectuer certains traitements pour engendrer des pages HTML
dynamiquement. Ils permettent, entre autres, l’interfaçage web/bases de données.
13
14
Partie 1
HTML et Feuilles de style
15
16
Chapitre 1 : Le langage HTML
0) Introduction
a) Comment fonctionnent les pages Web ?
Les pages Web ressemblent à des pages imprimées. Le principe d’affichage d’une page Web
est très simple : vous demandez à votre navigateur d’afficher une page de votre choix et la
page apparaît sur votre écran. Si la page se trouve déjà sur votre disque dur, l’affichage est
instantané. Si la page est sur un autre ordinateur quelque part dans le monde, ça peut être
un peu plus lent.
La page Web possède des caractéristiques très importantes hors de portée d’une page
papier: vous pouvez par exemple cliquer sur un lien qui vous mène à une autre page. Vous
pouvez aussi cliquer sur le bouton Envoyer sous un formulaire pour l’envoyer tout de suite
à son destinataire. Les images animées, le son, la vidéo n’existent pas aussi dans les pages en
papier.
Mais, il faut aussi savoir qu’une page Web affichée sur votre écran peut être constituée en
réalité par des éléments provenant de plusieurs fichiers (et même parfois de plusieurs
ordinateurs). Par exemple, une page Web peut être constituée d’un fichier texte (HTML)
situé sur un serveur au Maroc, des fichiers images situés sur un ordinateur en France, et des
fichiers son ou vidéo sur un autre ordinateur au Canada.
C’est pourquoi la tâche d’un navigateur dépasse largement l’affichage d’un fichier. Elle
consiste également à assembler les composantes de la page et à les disposer conformément
aux commandes HTML insérées dans le texte par l’auteur de la page.
Pour récapituler, On peut dire qu’une page Web contient généralement plusieurs éléments :
 Un fichier HTML : c’est un fichier texte simple qui contient le texte de la page ainsi
que les commandes HTML nécessaires pour la mise en forme du texte et à la
description de la disposition des autres éléments sur la page.
 Des images, des sons, des vidéos, des Applets Java…ces éléments sont stockés dans
des fichiers séparés qui accompagnent le fichier HTML.
b) Qu’est-ce que HTML ?

Le langage HTML (HyperText Markup Language) est un langage de formatage de texte
adapté à la conception de pages web (c’est un langage de balisage, de marquage).
Ce n'est pas un langage de programmation, mais un langage de mise en forme de données :

une page Web décrit une structure statique, tandis qu'un programme est un processus
dynamique.
17
Le HTML a très vite remporté un grand succès. Mais il a aussi rencontré certaines limites.
En particulier, il n'est pas extensible (l’auteur de la page ne peut pas définir ses propres
balises). C’est pour cela que le langage XML (eXtensible Markup Language) a été créé,
précisément fondé sur la notion d'extensibilité.
Le problème, c'est que le HTML n'était pas compatible avec le XML ; c'est pourquoi l'on a
conçu le langage XHTML (eXtensible HTML), qui prend en considération le caractère strict
de la syntaxe XML, mais conserve toute la simplicité et tous les principes fondamentaux du
HTML.
En 2014 la recommandation officielle du HTML 5 est sortie. Cette version a révolutionné la

manière dont le Web évolue, fonctionne et est utilisé. Il a simplifié le travail des
programmeurs, a harmonisé l'accès à divers dispositifs et applications et a offert aux
utilisateurs de nouvelles fonctionnalités étonnantes. En effet, HTML5 est à la fois une
spécification unique et un ensemble complet de technologies. D’une manière générale, on
peut voir HTML5 comme une nouvelle version du langage de balisage lui-même et de son
standard associé pour accéder aux documents HTML et les manipuler, le Document Object
Model (DOM); des feuilles de style CSS, et le langage de script JavaScript. Le terme est
souvent utilisé, même plus largement, pour inclure des interfaces de programmation
d'application (API) spécifiques, telles que celles qui permettent de nouvelles fonctionnalités
graphiques, de géolocalisation, de stockage local et de vidéo basées sur un navigateur
c) Comment insérer du code HTML ?
Dans un simple document texte. Tout éditeur de texte brut est convenable. Le bloc-notes de
Windows est parmi les plus utilisés. Une page HTML est donc un simple document texte à
la seule condition qu’il porte l’extension .html (ou .htm) pour qu’il soit reconnu par le
navigateur.
d) Qu’est-ce que une balise ?
HTML est un langage de balisage (ou Markage). Il se base sur la notion de balise. Une balise
est une instruction HTML. Son rôle est de déclarer un élément de la page et d’indiquer au
navigateur comment l’afficher. Généralement, une balise s’ouvre par <balise> et se ferme
par </balise>.
e) Qu’est-ce que un attribut ?
Une balise peut parfois accepter plusieurs options que l’auteur de la page peut définir pour
cette balise. Ces options s’appellent attributs de la balise. La syntaxe générale est la
suivante :
<balise attribut1= "valeur1" attribut2 = "valeur2" attribut3 = "valeur3" > …..</balise>
1) Structure d’une page HTML

Toute page HTML se présente sous la forme suivante :
18
1 <!DOCTYPE html>
2 <html>
3 <head>
….
4 </head>
5 <body>
…
6 </body>
7 </html>
1) La page commence donc par ce qu’en appelle « la déclaration du type du

document ».
2) La deuxième ligne contient une balise ouvrante <html> (ligne 2) et se termine par
une balise fermante </html> (ligne 7).
3) La page contient deux sections différentes :
 La section entête qui commence par la balise <head> et se termine par
</head>. Les informations contenues dans cette section ne sont pas destinées
pour l’affichage à l’écran, mais elles sont utilisées par les moteurs de
recherche et par les navigateurs…nous reviendrons plus tard pour parler de la
section Head.
 La section Body, ou corps du document. C’est la partie principale qui
contient toutes les informations que vous voulez afficher sur votre page web.
Cette partie commence par la balise <body> et se termine par </body>.
Remarques
1) Les navigateurs sont très tolérants en ce qui concerne la syntaxe HTML. Ils ne
signalent jamais d’erreurs, mais ils ignorent tout simplement les balises non
correctes. Le résultat peut être loin de ce que vous attendez. Mais, il est très
recommandé de respecter les bonnes habitudes de développement et le caractère
strict du XHTML et du HTML5.
2) La casse n’est pas importante en HTML. Par exemple, <HTML>, <HtMl> et <html>
signifie la même chose. En HTML 4, on recommandait l’écriture de toutes les balises
en Majuscule. Mais les normes XHTML et HTML5 exigent que toutes les balises et
tous les attributs soient en minuscule. Il faut donc respecter cette norme et écrire
toutes les balises en minuscule.
3) HTML n’accepte pas les chevauchements entre les balises. C'est-à-dire, la première
balise ouverte doit être la dernière fermée et ainsi de suite. Par exemple, la balise
<html> de la ligne 2 est ouverte avant la balise <head> (ligne 3), donc la balise
</head> (ligne 4) doit être insérer avant la balise </html> (ligne 7).
a) La section entête (Head) :
Les principales balises de cette section sont <title>, <meta> <link> et <base>. Nous allons
voir maintenant la balise <title> et nous reviendrons sur les autres balises plus tard.
19
La balise <meta>
Elle est simplifiée en HTML5 et permet de spécifier l’encodage du document.
<meta charset="UTF-8">
La balise <title>…</title>
Cette balise définit un titre pour votre page. Ce titre sera affiché dans la barre de titre du
navigateur lors de l’affichage de la page.
Le titre est affiché ici
<!DOCTYPE html>
<html>
<head>
<title> Ma première page web </title>
</head>
<body>
…
</body>
</html>
b) La partie Corps du document (Body)
Cette partie est encadrée par les balises <body> et </body> et contient tout le texte de la
page ainsi que toutes les balises nécessaires pour formater ce texte et indiquer aux
navigateurs comment afficher tous les éléments de la page.
<!DOCTYPE html>
<html>
<head>
<title> Ma première page web </title>
</head>
<body>
Bienvenue sur ma page
</body>
</html>
Dans la suite, nous allons regrouper les balises HTML et les étudier une par une.
20
La balise <body>
Nous avons dit que le corps du document HTML est délimité par les balises <body> et
</body>. Cette balise accepte plusieurs attributs qui vous permettent d’exprimer vos
préférences en ce qui concerne un certain nombre de propriétés globales qui concernent
toute la page. Par exemple, vous pouvez choisir :
 La couleur par défaut du texte de toute la page ;

 La couleur ou image d’arrière-plan de la page ;
 La couleur des liens hypertextes (vous pouvez spécifier une couleur pour les liens
non visités, une autre pour les liens visités et une troisième pour les liens activés)
Pour exprimer ces préférences, vous devez ajouter les attributs convenables dans la balise
<body> :
 L’attribut text
Cet attribut permet de choisir une couleur pour le texte de la page. Si vous ne
définissez pas cet attribut, le texte sera par défaut en noir (sur un fond blanc).
 L’attribut bgcolor
Cet attribut permet de choisir une couleur d’arrière-plan pour votre page. La
couleur par défaut (si vous n’aviez rien spécifié) est le blanc.
 L’attribut background
Vous pouvez spécifier une image comme arrière-plan.
 L’attribut link
Cet attribut vous donne la possibilité de choisir une couleur pour les liens
hypertextes de votre page. La couleur par défaut est le bleu.
 L’attribut vlink
Les liens déjà visités sont d’habitude rouges. Mais vous pouvez spécifier une
autre couleur à l’aide de cet attribut.
 L’attribut alink
La couleur des liens actifs peut être définie à l’aide de cet attribut.
Exemple :
21
<!DOCTYPE html>
<html>
<body text = "white" bgcolor = "#0000FF" link = "red" vlink = "yellow">
Le texte de cette page est en blanc (white) sur un fond bleu (le bleu c’est #0000FF en
hexadécimal). Les liens sont rouges (red) et les liens visités sont en jaune (yellow).
</body>
</html>
Pour définir une image comme arrière-plan, vous pouvez remplacer bgcolor = "couleur" par
background = "adresseImage".
2) Le texte dans une page HTML

a) La balise <br>
HTML ignore tous les espaces et les retours à la ligne que vous insérez dans la page source.
Si vous voulez forcer un retour à la ligne dans un paragraphe, la balise <br> vous donne le
résultat. L’exemple suivant illustre ceci :
<!DOCTYPE html>
<html>
<body>
Il n’y a pas de retour
à la ligne ici. Mais après cette phrase, il y a un retour à la ligne. <br> C’est l’effet de la
balise break.
</body>
</html>
22
b) La balise <hr>
La balise <hr> vous offre la possibilité de dessiner une barre horizontale dans votre page.
Cette balise accepte plusieurs options concernant la couleur de la barre horizontale (attribut
color), sa largeur (l’attribut width), sa taille (i.e. sa hauteur) (l’attribut size) et son
alignement (l’attribut align)
Remarques
En HTML, une couleur prend une valeur de la forme color = " #rrggbb". C’est un chiffre de
6 chiffres hexadécimaux (de 0,1…,8,9,A,B,…F). rr correspond au pourcentage du rouge dans
la couleur choisie, gg correspondre au pourcentage du vert (green) et bb correspond au
pourcentage du bleu. Par exemple, la couleur blanche contient 100% de chacune des trois
couleurs (100% c’est FF). Donc le blanc c’est #FFFFFF. Le noir correspond à 0% de chacune
des 3 couleurs i.e. #000000. Le vert par exemple est #00FF00.
Les attributs width et size acceptent des valeurs en pixel ou en pourcentage. Préférez le
pourcentage car il convient à toutes les tailles d’écrans et s’ajuste dynamiquement avec la
taille de la fenêtre.
L’attribut align accepte les valeurs align= "left" pour aligner la barre à gauche, align
= "center" pour la centrer (c’est la valeur par défaut), et align = "right" pour l’aligner à
droite.
<!DOCTYPE html>
<html>
<body>
<hr>
La barre suivante est de couleur bleue, sa taille et 60% de la taille de la fenêtre et elle est
centrée.
<hr color = "blue" width = "60%" align = "center">
</body>
</html>
23
Remarque
Comme vous pouvez le remarquer, les deux balises précédentes <br> et <hr> ne possèdent
pas de balises fermentes. C’était acceptable dans la norme HTML 4. Mais la norme XHTML
exige que toute balise doive être fermée. Pour les balises qui n’ont pas de balise fermante, on
ajoute une barre oblique dans la balise elle-même avant le symbole >. La forme générale
d’une telle balise est la suivante :
<balise />
Par exemple la balise <br> devient <br /> et la balise <hr> devient <hr />. Comme ça, le
navigateur ouvre la balise et comprend qu’il ne doit pas attendre une balise fermente.
c) La balise <pre>…</pre>
Parfois vous aurez besoin à insérer dans une page web du texte pré-formaté et vous voulez
que les navigateurs l’affiche tel quel (en gardant tous les espaces, tous les retours à la
ligne…). La balise <pre> vous offre cette possibilité : tout texte inséré entre <pre> et </pre>
s’affiche dans sa forme originale. Cette mise en forme est convenable par exemple pour
afficher un morceau de code.
24
<!DOCTYPE html>
<html><body>
<pre>
main( ) {
for (i =1; i != 100 ; i++) {
s = s +i ;
}
}
</pre>
</body>
</html>
d) Les caractères accentués et caractères spéciaux
Votre clavier vous permet de taper un certain nombre de caractères directement dans un
éditeur de texte tel que le Bloc-Notes. Mais malheureusement, tous ces caractères ne sont
pas affichables correctement dans tous les navigateurs. Par exemple, les caractères
accentués tels que (é, è, à, ù, ô, …) peuvent ne pas s’afficher correctement dans certains
navigateurs. La même chose pour certains symboles et lettres par exemples : &, ®, ©, $, ¥, £,
€, π, σ, θ, ÷,…
D’autre part, certains caractères sont utilisés par le codage de HTML, par exemple, les
symboles : <, > et ".
HTML prévoit une méthode pour pouvoir afficher tous ces caractères dans une page web. Il
donne à chaque caractère un code qui commence par « & » suivi de « # » puis d’un numéro
(qui dépend du caractère voulu) et on termine par « ; ». Par exemple, pour afficher le mot
« café » dans une page HTML, il suffit d’écrire : « caf&#233 ; ». Donc on a utilisé le code
« é » pour afficher le caractère accentué « é ».
Vous pouvez aussi utiliser des mnémoniques mémorisables plus facilement que ces codes.
Par exemple, « é » est désigné par « &eaccute; », « è » est désigné par « è », « à »
est désigné par « à »…
Voilà les principaux caractères et entités dont vous aurez besoin :
Caractère mnémonique
à à
ù ù
è è
é &eacute ;
ê ê
25
î î
û û
ï ï
ü ü
ç ç
< <
> >
& &
" "
Pour afficher n’importe quel caractère qui n’appartient pas au jeu de caractère ASCII de
base, vous pouvez taper le symbole « & » suivi de « # » suivi du code Unicode du caractère
voulu et puis terminez par « ; ». Par exemple :
Caractère Code
α α
β β
γ γ
δ δ
e) La mise en forme du texte

Le gras (bold) avec la balise <b>…</b>
Tout texte mis entre <b> et </b> s’affiche en gras.
L’italique avec la balise <i>…</i>
Pour mettre du texte en italique, il suffit de le mettre entre <i> et </i>.
Texte mis en valeur
Il existe d’autres balises de mise en valeur de texte. Par exemple, tout texte mis entre la
balise <em> et </em> est mis en valeur (ça dépend du navigateur, en général en italique). De
même tout texte entre <strong> et </strong> est affiché généralement en gras (ça dépend
aussi du navigateur utilisé).
Texte en indice avec la balise <sub>…</sub>
Pour afficher du texte en indice, vous pouvez l’introduire entre les balises <sub> et </sub>
Texte en exposant avec la balise <sup>…</sup>
26
Pour afficher du texte en exposant, vous pouvez l’introduire entre les balise <sup> et
</sup>.
On peut bien sûr combiner toutes ces balises. Mais, il faut faire attention à l’ordre : l’ordre
de fermeture des baise doit être inverse à l’ordre d’ouverture : la première balise qui s’ouvre
doit être la dernière à se fermer. L’écriture suivante est incorrecte:
<b><i>Ce texte est en gras, italique </b></i>
Voilà l’écriture correcte :
<b><i>Ce texte est en gras, italique </i></b>
f) Autres balises de style
HTML contient des balises qui sont utilisées pour la définition de style de certaines divisions
particulières de vos pages. Par exemple :
La balise <cite>…</cite>
Elle est utilisée pour insérer une citation dans le document. Le texte mis entre <cite> et
</cite> est affiché généralement en italique.
La balise <code>…</code>
Le texte délimité par ces balises est affiché en général avec des caractères de type
imprimerie. Elle sert généralement à introduire du code informatique dans la page web.
La balise <dfn>…</dfn>
Cette balise vous permet d’introduire une définition. Elle affiche les caractères en gras ou en
gras italique (selon le navigateur utilisé).
La balise <blockquote>…</blocquote>
Cette balise introduit un retrait dans le texte. La partie délimitée par ces deux balises
s’affiche en retrait par rapport au reste de la page.
3) Structuration d’une page HTML

L’auteur d’une page HTML a besoin de structurer les informations contenues dans sa page.
Pour cela, il peut par exemple diviser la page en plusieurs paragraphes et divisions en
donnant éventuellement un titre à chaque division. Nous allons voir comment créer des
titres, des paragraphes et des divisions.
27
a) Les Titres
En HTML, vous disposez de six balises différentes (<Hn>…</Hn>, avec n = 1, 2, 3, 4, 5, ou 6)

offrant la possibilité d’introduire des titres avec six tailles différentes allant de H1 (la plus
grande) à H6 (la plus petite). La syntaxe générale est la suivante (avec n = 1, 2, 3, 4, 5, ou 6) :
<Hn> Ceci est un titre </Hn>
Exemple :
<!DOCTYPE html>
<html>
<body>
<h1> Ce titre est de niveau 1 </h1>
</body>
</html>
b) Les paragraphes (la balise <p>…</p>)
Vous pouvez diviser votre document en paragraphes à l’aide de la balise (<p>…</p>).

Chaque paragraphe commence par la balise <p> et se termine par la balise fermante </p>.
Un retour à la ligne et un espacement vertical sont insérés automatiquement avant et après
un paragraphe.
28
La balise <p> accepte l’attribut align qui permet d’aligner un paragraphe à gauche (left), à
droite (right) ou centré (center).
<!DOCTYPE html>
<html>
<body>
<p> Ce paragraphe est aligné à gauche </p>
<p align = "center"> Ce paragraphe est centré </p>
<p align = "right">

Ce paragraphe est aligné à droite </p>
</body>
</html>
c) Les divisions (la balise <div>…</div>)
Cette balise définit une division dans votre page. Cette division peut contenir du texte, des
images,… Vous pouvez par suite déterminer une mise en forme spéciale pour cette division.
Par exemple, vous pouvez demander aux navigateurs de l’aligner à droite, à gauche ou la
centrer sur l’écran grâce à l’attribut « align » de cette balise (avec les valeurs right, left ou
center).
<!DOCTYPE html>
<html>
<body>
<div> Bienvenue sur ma page </div>
<div align = "right"> Cette partie de la page est alignée à droite </div>
<div align = "center"> Celle-ci est centrée.</div>
</body>
</html>
d) Les listes
Si vous avez besoin d’insérer des listes dans vos pages web, sachez que vous pouvez le faire
en HTML de trois manières :
1) Les listes ordonnées (Ordered Lists : ce genre convient si vous voulez insérer un numéro
pour chaque élément de la liste (List Item). On utilise la balise <ol> …</ol> pour entourer la
liste. Tout élément de la liste est introduit entre les balises <li> et </li>
29
<!DOCTYPE html>
<html>
<body>
Voici une liste ordonnée :
<ol>
<li> premier élément </li>
<li> deuxième élément </li>
<li> troisième élément </li>
</ol>
</body>
</html>
Par défaut, le compteur commence à 1 dans les listes ordonnées. Vous pouvez imposer une
autre valeur de commencement en spécifiant l’attribut « start » de la balise <ol>. Par
exemple, si vous modifiez dans le code précédent la balise <ol> par <ol start ="7">, les
numéros des éléments de la liste seront respectivement 7, 8, et 9.
La balise <ol> admet aussi l’attribut « type » qui spécifie le type de la numérotation utilisée.
Les valeurs possibles pour cet attribut sont :
 « 1 » pour utiliser les chiffres arabes (1, 2, 3,…). C’est la numérotation par défaut.
 « a » pour utiliser les lettres minuscules (a, b, c,…)
 « A » pour utiliser des lettres majuscules (A, B, C,…)
 « i » pour les chiffres romains (i, ii, iii,…)
 « I » pour les chiffres romains (I, II, III,…)
2) Les listes non ordonnées (Unordered Lists) : qui conviennent pour les listes dont l’ordre
des éléments n’est pas important (une puce devant chaque élément de la liste suffit).Cette
fois-ci, on utilise les balises <ul> et </ul> pour commencer et puis terminer une liste. Un
élément de la liste est introduit entre <li> et </li> :
30
<!DOCTYPE html>
<html>
<body>
Voici une liste non ordonnée :
<ul>
<li> premier élément </li>
<li> deuxième élément </li>
<li> troisième élément </li>
</ul>
</body>
</html>
La balise <ul> accepte l’attribut « type » qui donne la possibilité de modifier la puce utilisée
devant chaque élément. Les valeurs possibles sont :
• disc (c’est la valeur par défaut).
o circle
 square
Dans l’exemple précédent, on pourrait afficher un petit carré noir devant chaque élément de
la liste en remplaçant la balise <ul> par <ul type = "square">.
On peut aussi modifier la puce d’un seul élément de la liste. L’attribut type sera introduit
dans ce cas dans la balise <li> de l’élément concerné.
3) Les listes descriptives (Descriptive Lists): elles utilisent une mise en forme spéciale.
Chaque élément de la liste est suivi par une description. On utilise les balises suivantes :
 la liste commence par <dl> et termine par </dl>

 chaque élément de la liste est entouré par <dt> et </dt>
 la description de cet élément est mise entre <dd> et </dd>.
31
<!DOCTYPE html>
<html>
<body>
Quelques filières de notre faculté:
<dl>
<dt>SMI</dt>
<dd> Sciences Mathématiques et Informatique</dd>
<dt>SMA</dt>
<dd> Sciences Mathématiques et Applications</dd>
<dt>STU</dt>
<dd> Sciences de la Terre et de l’Univers</dd>
</dl>
</body>
</html>
4) Les images
Les navigateurs actuels sont capables d’afficher différentes données multimédia dans une
page web. En particulier, les images sont parmi les éléments essentiels d’une page web.
Les images destinées pour le web portent le plus souvent l’extension .GIF, .JPG ou .PNG. Le
format GIF est convenable pour les graphiques qui n’utilisent pas beaucoup de couleurs,
tandis que les formats JPG ou PNG conviennent pour les images de haute qualité qui
utilisent des millions de couleurs (par exemple les photos).
32
a) La balise <img />
Cette balise vous permet d’insérer une image dans votre page web. Il possède un attribut src
(qui est obligatoire). Cet attribut spécifie l’adresse de l’image concernée. Rappelons que les
images d’une page web sont stockées séparément de la page HTML et que c’est le
navigateur qui se charge de chercher ces images dans leurs emplacements et puis les
afficher.
Exemple
<html>
<body>
<img src = "MesImages/MesPhotos/MaPhoto.jpg" />
</body>
</html>
Ce code demande au navigateur d’afficher l’image Maphoto.jpg qui se trouve dans le sous-
dossier MesPhotos du dossier MesImages. Ce dernier se trouve dans le même dossier que la
page HTML.
Outre l’attribut src, la balise <img /> admet plusieurs attributs :
 l’attribut alt
Cet attribut est très intéressant. Il vous permet de définir un texte comme
alternative de l’image : dans le cas où le navigateur ne peut pas afficher
l’image pour une raison ou l’autre, il affiche alors le texte contenu dans
l’attribut alt. Ce paramètre est utilisé aussi par certains navigateurs qui lisent
le texte pour les personnes non-voyants.
 les attributs width et height
Vous pouvez spécifier la largeur de l’image (width) et sa hauteur (height).

Ainsi le navigateur aura une idée sur les dimensions de l’image avant la fin de
son téléchargement.
 l’attribut align
Cet attribut vous permet de bien placer l’image sur la page et de l’aligner avec
le texte. Cet attribut accepte 2 valeurs pour l’alignement horizontal et 5
valeurs pour l’alignement vertical
 l’alignement horizontal : il permet d’habiller le texte et l’image. Ainsi vous

pouvez disposer une image à droite ou à gauche de plusieurs lignes de texte.
Les deux valeurs possible sont left et right (align = "center" n’est pas
correcte).
33
o align = "left" : l’image est alignée à gauche et plusieurs lignes de

texte sont disposés à droite de l’image (le nombre de lignes dépend de
la hauteur de l’image).
o align = "right" : l’image est alignée à droite et plusieurs lignes sont
disposés à gauche de l’image.
 l’alignement vertical : On entend par ceci l’alignement d’une image par

rapport à une ligne. Dans ce cas, l’image est disposée sur une seule ligne. La
ligne suivante ne peut pas s’aligner à côté de l’image. Elle est disposée donc
sous l’image.
5 valeurs sont possibles pour aligner une image verticalement par rapport à la
ligne en cours :
o align = "top" : la ligne du texte est alignée au côté supérieur de

l’image, la ligne suivante passe sous l’image.
o align = "middle" : la ligne du texte est alignée au milieu de l’image, la
ligne suivante passe sous l’image.
o align = "bottom" la ligne du texte est alignée au côté bas de l’image,
la ligne suivante passe sous l’image.
o align = "absmiddle" : le milieu de l’image est alignée au milieu
absolu de le la ligne en cours, la ligne suivante passe sous l’image.
o align = "absbottom" : le bas de l’image est aligné au côté bas de
l’élément le plus bas de la ligne, la ligne suivante passe sous l’image.
Si la même ligne contient plusieurs images de tailles différentes, absmiddle

et absbottom donnent des résultats différents à middle et bottom.
Si vous ne mettez pas l’attribut align, c’est l’option align = "bottom" qui est retenue
par défaut.
5) Incorporer du multimédia
Le terme multimédia signifie tous ce qui est en relation avec les images animées, du son et
de la vidéo. Dans nos jours, on ne peut pas parler du web sans le multimédia. HTML5 utilise
la balise <embed /> pour incorporer les fichiers audio ou vidéo dans la même page web.
Autrement dit l’affichage du fichier audio ou vidéo se passe dans la fenêtre du navigateur
avec le texte et images de la page. Pour ceci, le navigateur crée une zone d’affichage dont
vous pouvez contrôler les dimensions (width, height) et l’alignement (align = (right, left)).
Ces attributs se comportent exactement comme dans le cas d’une image. Généralement, les
navigateurs utilisent des plug-ins pour lire le contenu multimédia. Un plug-in est un
programme qui est écrit spécialement pour étendre les capacités d’un autre programme. Par
exemple, dans notre cas, le navigateur web a besoin d’un plug-in capable de lire le son ou la
vidéo. D’habitude, plusieurs plug-ins sont installés avec les navigateurs pour leur permettre
de lire les fichiers multimédia.
6) Les liens
La technique des liens hypertextes était derrière le grand succès du web. Elle permet une
navigation facile et efficace entre les différentes pages du web. L’auteur d’une page peut
34
définir certains éléments de sa page (du texte, des images,…) comme des liens hypertextes
pointant sur d’autres pages, les visiteurs de la page peuvent cliquer sur ces éléments pour
accéder aux pages de destinations.
a) La balise <a>…</a>
Pour créer un lien hypertexte dans vos pages, HTML vous offre la balise <a>…</a>. Pour
que le lien devienne cliquable, il faut utiliser l’attribut href de cette balise. Cet attribut
détermine la destination du lien, c'est-à-dire l’adresse de la page à laquelle mène ce lien. La
syntaxe est de ce genre :
<a href = "adresseURL"> Cliquez ici </a>
Dans cet exemple, lors de l’affichage de la page l’utilisateur peut cliquer sur le texte (ou tout
autre élément) qui se trouve entre <a > et </a> (dans notre cas « Cliquez ici »). La page qui
se trouve à l’adresse « adresseURL » se charge dans la fenêtre du navigateur.
On peut distinguer plusieurs cas selon l’adresse donnée à l’attribut href :
1. Lien vers un site externe : dans ce cas, vous donnez l’adresse URL (Uniforme
Ressource Locator) complète du site concerné. Une URL est de la forme :
« Protocole:Ordinateur/Dossier/SousDossier/SousSousDossier/…/fichier »
Pour être plus simple, voilà un exemple :
<a href = "http://www.fsdm.usmba.ac.ma/index.htm"> Aller à l’FSDM </a>

<a href = "ftp://ftp.microsoft.com"> Serveur ftp de microsoft </a>
<a href = "mailto:ahmed.zinedine@usmba.ac.ma"> Cliquez pour m’envoyer un email </a>
Le premier lien utilise le protocole http (protocole du web) et mène à une page qui s’appelle
index.htm sur un ordinateur qui se trouve à l’adresse (www.fsdm.usmba.ac.ma).
Le deuxième lien utilise le protocole FTP (protocole de transfère des fichiers). Il mène au site
ftp.microsoft.com.
Le troisième lien utilise le protocole mailto. C’est le protocole de la messagerie

électronique. Quand vous cliquez sur le lien, un programme d’envoi d’emails se lance pour
envoyer un email à l’adresse « ahmed.zinedine@usmba.ac.ma ».
2. Lien vers le même site : pour créer un lien vers une autre page dans votre site. Vous
utilisez toujours la balise <a > et l’attribut href. L’adresse à fournir cette fois-ci est le
chemin de la page à ouvrir. Par exemple si vous avez deux pages, page1.html et
page2.html, vous pouvez placer un lien dans la page page1.html <a href =
"page2.html"> Aller sur la page 2 </a>. Ce lien permet d’ouvrir la deuxième page.
3. Lien vers une section de la page courante (Ancres) : Vous pouvez créer un lien qui
pointe sur une section particulière de votre page. Par exemple, si vous avez une page
35
très longue, vous pouvez créer un index en haut de la page avec des liens qui mènent
aux différentes sections de la page.
Pour créer un lien vers une section de la même page, on passe par deux étapes :
o Créer un ancre nommé (ou étiquette) au début de la section cible concernée.

Ça consiste à insérer une balise de ce genre <a name = "UnNom">. Cette
balise permet de créer une étiquette pour la section ciblée. Remarquez
l’absence de l’attribut href, et par suite cette balise ne crée pas un lien
cliquable. L’attribut name accepte un nom que vous choisissez vous-même et
sera utilisé lors de la création du lien.
o Créer le lien hypertexte vers la section : on utilise une balise de la forme <a
href = "#UnNom"> Cliquez ici …</a>. L’attribut href est utilisé, donc on crée
un lien cliquable qui mène à la section qui commence par <a name =
"UnNom">. (Remarquez l’utilisation de # dans l’attribut href et non dans
l’attribut name).
<!DOCTYPE html>
<html>
<body>
<h2> paragraphe 1 </h2>
<p> Ici commence le paragraphe 1. Cliquez sur <a href = "#Parag2"> le lien </a>
Pour passer directement au paragraphe 2.
…
…
…
<a name = "Parag2">

<h2> Paragraphe 2 </a>
<p> C’est le paragraphe 2 …
…
…
</body>
</html>
Quand l’utilisateur clique sur le mot « le lien » du premier paragraphe, la partie de la page
qui commence par <a name = "Parag2"> s’affiche à l’écran.
4. Liens vers une section particulière d’une autre page : On le fait aussi en deux étapes :
o Créer une ancre nommé (étiquette) dans la partie cible de la deuxième page.
On le fait comme dans le cas précédent par une balise <a name "UnNom">
insérée au début de la section ciblée par le lien.
o Créer un lien hypertexte qui pointe vers cette étiquette dans la première page
de la forme <a href = "page2.html#UnNom">.
36
<!DOCTYPE html>

<html>
<body>
<h2> paragraphe 1 </h2>
<p> Ici commence le paragraphe 1.
…
…
…
<a name = "Parag2">
<h2> Paragraphe 2 </a>
<p> C’est le paragraphe 2 …
…
…
</body>
</html>
<!DOCTYPE html>
< !-- page1.html -->
<html>
<body>
Cliquez <a href = "page2.html#Parag2"> Ici </a > pour allez au paragraphe 2 de la page
page2.html
…
…
</body>
</html>
b) Images et liens
On peut utiliser une image comme lien hypertexte. Un simple clic sur l’image ouvre une
autre page HTML. C’est très simple. Il suffit d’insérer l’image concernée entre <a href = "">
et </a>.
Remarque : Quand vous faites une image en tant que lien, une bordure (généralement blue)
est créée autour de l’image. Si cette bordure ne vous plait pas, vous pouvez vous en
débarrasser en donnant la valeur 0 à l’attribut border de l’image :
<a href = "page2.html"> <img src = "image.gif" border = 0 /> </a>
7) Les tableaux
Parmi les éléments les plus intéressants dont l’auteur d’une page HTML aura besoin on
trouve les tableaux. En effet, on peut se servir des tableaux si on veut structurer les
informations à afficher dans des lignes et des colonnes. On peut aussi utiliser les tableaux
pour mieux contrôler la mise en page et la disposition des différents éléments sur la page
web.
37
Un tableau est donc un ensemble de cellules disposées sur plusieurs lignes. HTML offre
plusieurs balises et attributs pour définir des tableaux :
 La balise <table>…</table> : le début du tableau est déclaré par <table> et sa fin est
déclarée par </table>. Toutes les autres balises concernant ce tableau doivent être
entre ces deux balises.
 La balise <tr> …</tr> : pour créer une ligne d’un tableau, on utilise ces balises. Une
ligne commence par <tr> et se termine par </tr>. Toutes les cellules de cette ligne
sont à l’intérieur de ces deux balises.
 La balise <td>…</td> : Pour créer une nouvelle cellule dans une ligne, on
commence par la balise <td> et on termine la cellule par la balise </td>. Donc
l’information contenue dans la cellule est entourée par <td> et </td>.
 La balise <th>…</th> : c’est un cas particulier de la balise <td> </td>. On l’utilise si
on veut créer des entêtes pour les colonnes. Dans ce cas, on peut utiliser pour les
cellules de la première ligne la balise <th> au lieu de <td>. Le navigateur se charge
ensuite de mettre en valeur le contenu de ces cellules d’entête pour les différentier
des autres cellules du tableau.
 La balise <caption>…</caption> : elle permet de définir un titre pour le tableau.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th> Nom </th> <th > Prénom </th>
</tr>
<tr>
<td> Karimi </td> <td > Karim </td>
</tr>
<tr>
<td> Moussi </td> <td > Moussa </td>
</tr>
<caption> Liste des étudiants </caption>
</table>
</body>
</html>
38
Remarquez que le titre du tableau est mis en haut du tableau malgré que la balise <caption>
soit insérée à la fin du tableau. Remarquez aussi que les cellules de la première ligne du
tableau sont en gras. C’est parce que nous avons utilisé <th> au lieu de <td>.
Vous pouvez contrôler l’apparence du tableau en définissant un certain nombre d’attributs

offerts par HTML :
a) Options globales pour tout le tableau
Ces options sont exprimées à l’aide d’attributs de la balise <table>. Voilà les principales:
 Définir l’alignement du tableau (avec l’attribut align)
Avec l’option <table align = "left"> le tableau est aligné à gauche de la

fenêtre (c’est la valeur par défaut), l’option <table align = "right"> l’aligne à
droite tandis que l’option <table align ="center"> l’aligne au centre de la
fenêtre.
 Les bordures du tableau et leur couleur (les attributs border et bordercolor)
Par défaut, le tableau est créé sans bordures (largeur de bordure égale à 0).
Mais vous pouvez définir la largeur des bordures par l’attribut border. Par
exemple l’option <table border = 2> demande au navigateur de dessiner une
bordure de largeur 2 pixels autour de toutes les cellules.
La couleur de cette bordure peut être définie par l’attribut bordercolor. La

balise < table border = 2 bordercolor = "red"> crée un tableau avec une
bordure rouge.
 Couleur et image d’arrière-plan (l’attribut bgcolor et background)
Vous pouvez définir une couleur pour l’arrière-plan de votre tableau. Par
défaut, l’arrière-plan est blanc. Par exemple, la balise <table bgcolor =
"green"> demande un tableau sur un arrière-plan vert.
39
Si vous préférez une image d’arrière-plan plutôt qu’une couleur, vous devez
utiliser l’attribut background au lieu de bgcolor en lui fournissant l’adresse
de l’image. Par exemple, l’option <table background = "image.gif"> crée un
tableau dont l’arrière-plan est l’image contenue dans le fichier « image.gif »
 Les dimensions du tableau (les attributs width et height)
Généralement, la taille du tableau est adaptée à son contenu. Mais vous

pouvez fixer cette taille en spécifiant la largeur du tableau par l’attribut
width et sa hauteur par l’attribut height. Les valeurs de ces attributs peuvent
être données en pixels (points d’écran) ou en pourcentage (par rapport aux
dimensions de la fenêtre). Préférez le pourcentage pour permettre au
navigateur d’adapter la taille du tableau dynamiquement. Par exemple, pour
créer un tableau dont la largeur est 20% de la largeur de la fenêtre et 400
pixels de hauteur on écrit : <table width = "20%" height = 400>
 L’espacement entre les cellules du tableau (l’attribut cellspacing)
L’attribut cellspacing vous permet de déterminer l’espacement entre les

cellules d’un tableau. Par exemple, pour laisser un espace de 10 pixels entre
toutes les cellules voisines, il suffit d’écrire <table cellspacing = 10>.
 Les marges intérieures des cellules du tableau (l’attribut cellpadding)
Vous pouvez contrôler les marges des cellules de votre tableau. L’attribut
cellpadding est utilisé pour ceci. Par exemple, pour fixer les marges
intérieures de toutes les cellules à 5 pixels, il vous suffit d’écrire <table
cellpadding = 5>.
b) Options pour une seule ligne

On peut définir des options qui portent sur les cellules d’une seule ligne. Pour cela, HTML
offre un certain nombre d’attributs pour la balise <tr> :
 L’alignement horizontal et vertical du texte dans les cellules de la ligne.
L’attribut align utilisé dans la balise <tr> permet de spécifier l’alignement

horizontal du texte dans toutes les cellules de cette ligne. Les valeurs
possibles sont left, right et center. Par exemple, <tr align = "right"> permet
d’aligner le texte à droite de toutes les cellules de la ligne concernée. Par
défaut le texte est aligné horizontalement à gauche.
L’attribut valign utilisé dans la balise <tr> permet de spécifier l’alignement

vertical du texte dans toutes les cellules de cette ligne. Les valeurs possibles
sont top, middle et bottom. Par exemple, <tr valign = "top"> permet
d’aligner le texte verticalement en haut de toutes les cellules de la ligne
concernée. Par défaut le texte est aligné verticalement au milieu des cellules
(middle).
 La couleur de la bordure de la ligne (l’attribut bordercolor)
40
Dans le cas où le tableau possède des bordures, vous pouvez définir pour la
bordure d’une ligne particulière une couleur différente du reste du tableau.
Pour cela utilisez l’attribut bordercolor dans la balise <tr> concernée.
 La couleur d’arrière-plan (l’attribut bgcolor)
Vous pouvez aussi définir pour une ligne particulière une couleur d’arrière-
plan différente de la couleur utilisée pour le reste du tableau. Pour ce faire,
utilisez l’attribut bgcolor dans une balise <tr>. Par exemple, la balise <tr
bgcolor = "blue" bordercolor = "white"> définit un arrière-plan bleu et des
bordures blanches pour cette ligne même si l’arrière-plan du tableau et ses
bordures ont d’autres couleurs
c) Options pour une seule cellule

 La couleur de la bordure de la cellule (l’attribut bordercolor)
De même, le même attribut bordercolor utilisé cette fois-ci dans une balise
<td> permet de spécifier une couleur de bordure valable pour cette unique
cellule et qui peut être différente des bordures de la ligne ou du tableau.
 La couleur de l’arrière-plan de la cellule (l’attribut bgcolor)
La même chose est vraie pour la couleur de l’arrière-plan avec l’attribut

bgcolor. Si on l’utilise dans une balise <td>, il permet alors de définir un
arrière-plan pour une unique cellule.
 L’alignement horizontal et vertical du texte dans la cellule
Comme pour la balise <tr>, les attributs align et valign utilisés dans une
balise <td> permettent de définir l’alignement horizontal et vertical de texte
dans la cellule concernée. Si on écrit pour une cellule <td bgcolor =
"maroon" bordercolor = "black" align = "center" valign ="bottom">, alors
on obtient une cellule sur un fond marron, avec des bordures en noir. Le texte
est aligné en bas des cellules mais centré horizontalement.
 La possibilité d’étendre une cellule sur plusieurs lignes ou plusieurs colonnes.
Parfois vous aurez besoin d’étendre une cellule sur plusieurs lignes ou
plusieurs colonnes.
Pour l’étendre sur plusieurs lignes utilisez l’attribut rowspan de la balise

<td>. Par exemple <td rowspan = 2> étend cette cellule sur 2 lignes.
Pour étendre une cellule sur plusieurs colonnes, utilisez l’attribut colspan
dans la balise <td>. L’écriture suivante <td colspan = 3> étend cette cellule
sur 3 colonnes.
On conclut donc que pour les attributs communs entre les balises <table>, <tr> et <td>, en
cas de conflit la priorité est pour <td>, puis <tr> et enfin <table>.
41
Remarque : la balise <th> se comporte exactement comme la balise <td>. Elle possède donc
les mêmes attributs.
 Attributs de la balise <caption>
La balise <caption> admet un attribut align qui permet de disposer le titre en

haut du tableau avec la valeur align = "top" (c’est la valeur par défaut) ou en
bas du tableau avec la valeur align = "bottom". Par exemple, l’écriture
suivante permet de placer une légende en bas du tableau : <caption align=
"bottom">.
8) Les formulaires
Le web est actuellement parmi les moyens de communication les plus répondus. Une page
web vous permet de partager vos informations avec les autres et de communiquer vos
propres idées à tout le monde.
D’autre part, les informations peuvent passer dans le sens inverse : Vous pouvez collecter
des informations auprès des utilisateurs de vos pages. Pour cela vous pouvez proposer aux
visiteurs de vos pages des formulaires à remplir.
HTML propose un ensemble de balises qui créent des champs de saisie (des zones de texte,
des cases à cocher, des boutons radio, des listes de sélections, ….)
Dans ce paragraphe, nous allons apprendre comment créer le squelette d’un formulaire.
Toutefois, l’exploitation des données envoyées par l’utilisateur sera faite par des scripts côté
serveur (voir la partie de ce cours sur PHP).
a) Créer un formulaire (la balise <form>…</form>)
Un formulaire est constitué par un ensemble de champs (pour chaque champ, il existe une
balise spéciale). La création de ces champs se fait entre les deux balises <form> et </form>.
Donc un formulaire commence par <form> et se termine par </form>, et tout contrôle créé
à l’extérieur de ces balises, ne fera pas partie du formulaire en cours.
Les attributs de <form>
 L’attribut method : cet attribut détermine la méthode d’envoie des données du

formulaire vers la page de réception de ces données. Il accepte deux valeurs (get et
post). Le plus souvent la méthode post est utilisée.
 L’attribut action : cet attribut spécifie l’adresse de la page qui se charge de recevoir
les données du formulaire. Autrement dit, lorsque l’utilisateur clique sur le bouton
Envoyer, c’est cette page qui va s’ouvrir. Cette page peut contenir par exemple un
script en PHP capable de traiter les données reçues.
b) Créer les champs du formulaire

1) la balise <input />
42
Les zones de texte (<input type = "text" />) : cette balise permet de créer une zone de
saisie du texte. Par exemple, si vous voulez savoir le nom de l’utilisateur vous pouvez
proposer une zone de texte créée pour ceci.
Avec le type text, la balise <input /> accepte les attributs suivants :
 name : cet attribut permet d’attribuer un nom pour ce champ. Ce nom permet
d’identifier le champ pour pouvoir le référencier ultérieurement (par exemple, dans
les scripts traitant les données du formulaire).
 value: la valeur de cet attribut est envoyée au script traitant le formulaire. Il s’agit ici
du texte saisi dans la zone.
 size : cet attribut précise la taille de la zone du texte.
 maxlength : c’est le nombre maximal de caractères que l’utilisateur peut saisir dans
ce champ.
Les mots de passe (<input type = "password">) cette balise crée une zone de texte
spéciale dans laquelle tout caractère saisi au clavier parait à l’écran sous la forme (*), la
copie du contenu de la zone est aussi impossible, ce qui est convenable pour saisir un mot de
passe. Voilà, les principaux attributs :
 name : permet d’attribuer un nom pour le champ.

 value : permet de spécifier une valeur par défaut ou d’accéder au contenu de la zone
de mot de passe.
 size : définit la taille de la zone de mot de passe.
 maxlength : spécifie le nombre maximal de caractères que l’utilisateur peut saisir
dans ce champ.
Les champs cachés (<input type = "hidden">) : Vous pouvez créer un champ invisible
dans un formulaire. Ce champ ne parait pas à l’écran, mais vous pouvez accéder à sa valeur.
Exemple d’utilisation : vous pouvez stocker dans un tel champ une valeur utilisable par les
autres champs (par exemple un e-mail, ou une variable…). Les principaux attributs :
 name : Permet d’identifier le champ.

 value : permet de spécifier une valeur par défaut lors de chargement de la page ou
d’accéder à la valeur du champ plus tard.
Les cases à cocher (<input type = "checkbox">) : si vous voulez proposer à l’utilisateur
plusieurs choix, et que cet utilisateur peut choisir plusieurs options simultanément, vous
pouvez alors créer des cases à cocher. Ceci se fait par la balise <input type = "checkbox">
qui accepte les attributs suivants :
 name : permet d’identifier chaque case à cocher. Chaque case à cocher a son propre
nom.
 value : cette valeur sera utilisée par le script qui reçoit le formulaire
 checked : cet attribut permet de cocher la case à cocher lors du chargement de la
page. Il permet aussi au script traitant le formulaire de savoir si cette case est cochée
ou non.
Les boutons radio (<input type = "radio">) : les boutons radio permettent de choisir un
seul choix parmi un groupe d’options. Par exemple, si vous voulez savoir si le visiteur de
43
votre page est un homme ou bien une femme, un groupe de boutons radio (homme/femme)
convient. Voilà les attributs les plus intéressants :
 name : C’est le nom du groupe. Les boutons de chaque groupe ont tous le même
nom.
 value : cette valeur est utilisée par le script recevant le formulaire.
 checked : cet attribut permet de cocher une option lors du chargement de la page ou
de lire cette valeur par les scripts traitant le formulaire.
Le bouton d’envoi (<input type = "submit">) : C’est un bouton cliquable. Le clic sur ce
bouton cause l’envoie du formulaire vers le script désigné dans l’attribut action de la balise
<form>.
 name : ce nom sert pour identifier le bouton.

 value : c’est le texte qui apparaît sur le bouton (par exemple : value ="Envoyer").
Le bouton d’initialisation (<input type = "reset">) : c’est un bouton cliquable. Le clic sur
ce bouton cause l’initialisation du formulaire. Tous les champs du formulaire prennent leurs
valeurs par défaut. Comme pour le bouton submit, ce bouton accepte les attributs suivants
 name : ce nom sert pour identifier le bouton.

 value : c’est le texte qui apparaît sur le bouton (par exemple : value ="Annuler").
Les boutons image (<input type = "image">) : On peut créer un bouton d’envoi
personnalisé sous forme d’une image cliquable. Pour cela on utilise la balise <input type =
"image">. Voilà quelques attributs :
 name : permet de donner un nom pour identifier ce champ.

 src : cet attribut permet de spécifier l’adresse du fichier contenant l’image.
2) Les zones de texte multi lignes (<textarea>…</textarea>) : cette balise est utilisée
pour créer une zone de texte capable de recevoir un texte assez long (plusieurs lignes). Elle
est utile lorsque vous souhaitez permettre à vos visiteurs d’envoyer par exemple des
messages ou des commentaires sur votre site. Voilà les attributs les plus importants de cette
balise :
 name : le nom de la zone de texte multi-lignes.

 rows : nombre de lignes de la zone.
 cols : nombre de colonnes de la zone (c'est-à-dire le nombre de caractères par ligne).
 value : permet d’accéder au texte saisi dans la zone.
3) Les listes d’options (la balise <select>…</select>)
La balise <select> est utilisée pour créer des listes de sélection. La liste commence par la
balise <select> et se termine par la balise </select>. Chaque élément de la liste est introduit
entre les balises <option> et </option>
44
<select>
<option> élément 1 </option>
</select>
Attribut de la balise <select> : Cette balise admet plusieurs attributs. Les plus utilisés
sont :
 name : c’est un nom qui permet d’identifier la liste.

 size : c’est le nombre d’éléments de la liste qui apparaissent simultanément. Par
défaut, cette valeur est 1. Donc un seul élément de la liste apparaît (la liste ressemble
à un menu déroulant)
 multiple : cette option permet de sélectionner plusieurs éléments de la liste
simultanément. Son absence signifie que l’utilisateur ne peut sélectionner qu’un seul
élément (c’est le cas par défaut).
Attributs de la balise </option> : Cette balise qui permet de créer un élément de la liste
accepte quelques attributs. Voilà les plus utilisés :
 name : le nom qui permet d’identifier un élément.

 selected : cette option permet de sélectionner un élément de la liste lors du
chargement de la page.
45
46
Chapitre 2 : Les feuilles de style
0) Introduction
En entend par style tout ce qui est en relation avec la définition de l’apparence de la page
HTML (l’arrière-plan, la couleur du texte, le style du texte (gras, italique, souligné), nom de
la police, taille de la police, marges, interlignes, retraits des paragraphes, couleurs des liens,
…)
Bien qu’il est possible de définir quelques aspects du style de vos pages (par exemple :
gras :<b>, italique :<i>, <u> : souligné, la police (nom, couleur, taille) avec la balise
<font>,…) il est fortement recommandé de définir le style en utilisant les feuilles de style qui
sont largement adoptées et utilisées sur le Web.
Supposons que vous gérez un grand site web qui compte 1000 pages différentes. Chacune de
ces pages contient 10 titres de taille <H1>. Dans un premier temps, vous avez décidé
d’afficher tous les titres <H1> en rouge. Vous pouvez faire ça en HTML en utilisant des
balises de type : <font color = "red"><h1>Ici le titre </h1></font> (N.B. : cette balise est
obsolète et n’est pas pris en considération dans HTML5).
Supposons maintenant qu’après un certain temps, la couleur rouge des titres ne vous plait
pas et vous décidez de la changer en vert. Croyez-moi, ça va être vraiment dégouttant de
parcourir les 1000 pages pour chercher 10000 balises pour modifier <font color = "red"> en
<font color = "green">. La difficulté majeure vient du fait que la définition du style (avec la
balise <font>) est mélangée avec le code HTML définissant la structure et le contenu de la
page HTML.
Les feuilles de style fournissent un moyen très élégant pour faire ce type de changement
très rapidement et très efficacement. Leur idée de base est de dissocier la définition du style
de la page HTML proprement dite. On peut ainsi définir le style une seule fois et on
l’applique par la suite à toutes les pages du site.
Voilà quelques avantages qui peuvent vous convaincre de préférer la définition du style en
utilisant les feuilles de style (CSS) plutôt qu’on utilisant des balises HTML.
 En utilisant les feuilles de style, vous pouvez appliquer le même style sur toutes les
pages et assurer ainsi une cohérence visuelle entre toutes les pages.
 La maintenance du site est énormément simplifiée. Dans l’exemple ci-dessus vous
pouvez modifier la couleur des 10000 titres en un seul changement dans la feuille de
style, tous les titres se trouvent ensuite modifiés.
 Le code HTML se trouve allégé quand on se débarrasse de toutes les balises de style
inclues dans la page. Le transfert des pages dans le réseau devient plus rapide.
Ce n’est pas seulement tout ce que vous pouvez faire avec les feuilles de style, mais aussi,
elles étendent les possibilités de HTML. Voilà des exemples de ce que vous pouvez faire avec
les feuilles de style mais pas avec HTML :
47
 Vous pouvez définir un arrière-plan indépendant pour chaque élément de la page.

 Vous pouvez définir les marges des pages HTML, des paragraphes, et des divisions.
 Vous pouvez définir le retrait des paragraphes ;
 Vous pouvez définir n’importe quelle taille pour les caractères.
 Vous pouvez utiliser plusieurs unités de mesure (centimètres : cm, millimètres : mm,
pixels : px, points : pt, pouces : in, pourcentage : %,…) (HTML offre seulement les
pixels et le pourcentage)
 Vous pouvez spécifier l’espacement entre les lignes (interligne), l’espacement entre
les caractères et entre les mots.
 Vous pouvez aussi demander le positionnement exact de tout élément (image,
tableau, paragraphe,…) sur la page. Par exemple, vous pouvez commander le
positionnement d’une image aux coordonnées 200,250. Cette possibilité permet de
créer plusieurs couches dans une même page.
En conclusion, on peut dire que HTML seul n’offre pratiquement pas de contrôle sur le
style. Les feuille de style permettent d’accéder aux aspects élémentaires du style, tels que les
polices (avec les problèmes qu’elles posent : nom de police, taille, corps, style et espacement
des lignes). Mais une feuille de style concerne aussi les aspects plus élaborés tels que les
marges, les retraits, les couleurs et les graphiques. En principes, les feuilles de style
permettent de contrôler l’aspect de tout ce que le HTML permet d’afficher.
1) Principe de feuilles de style

Il existe 3 méthodes pour utiliser des feuilles de style :
a) Feuilles de style incorporées
Pour créer une feuille de style incorporée, on utilise une balise <style>…</style> placée
avant la balise <body>. Toutes les définitions de style sont placées à l’intérieur de cette
balise. Dans ce cas, la portée de cette feuille de style se limite à cette seule page. Vous ne
pouvez pas référer à cette feuille de style à partir d’une autre page HTML.
Exemple
48
<html>
<style>
body {background-image : url(image.gif); margin : 2cm ; }
h1 {font-size : 18pt ; font-style : italic ; font-color : red ;}
h2 {font-size : 14pt ; font-color : green;}
p {text-indent : 1.5cm ; line-height : 14pt ;}
a {text-decoration : none ;}
a: link {text-color : blue ;}
a: visited {text-color : white ;}
a: actived {text-color : yellow ;}
</style>
<body>
Ici le corps de la page
</body>
</html>
Dans cet exemple, à l’intérieur de la balise <style>…</style> nous avons défini le style qui
sera appliqué à plusieurs éléments de la page HTML :
o Pour l’élément <body> : on a défini l’image « image.gif » comme arrière-

plan de la page (avec l’attribut background-image = url(…)). Les marges de
la page sont fixées à 2 cm (rappelons que HTML n’offre aucun moyen pour
définir les marges).
o Pour l’élément <h1> : la taille des caractères est fixée à 18 pt, leur style est
italique, la couleur est rouge. Ainsi, tous les titres de type <h1> dans la page
se trouvent avec la même apparence (taille 18pt, italique, couleur rouge).
o Pour l’élément <h2> : la taille des caractères de tous les titres de type <h2>
est 14pt, la couleur de ces titres est verte.
o Pour tous les paragraphes (<p>), le retrait de la première ligne (text-indent)
est fixé à 1,5 cm, l’espacement entre les lignes du texte dans un paragraphe
(line-height) est 14pt.
o Le style des liens hypertextes est défini comme suit :
* tous les liens (<a >) sont non soulignés (text-decoration : none ;)
* les liens non visités (a : link) sont de couleur bleue.
* les liens visités (a : visited) sont de couleur blanche (white);
* les liens activés (a : actived) sont de couleur jaune (yellow).
b) Feuilles de style externes
Les feuilles de style externes sont plus appropriées si on veut appliquer le même style à
plusieurs pages HTML. On crée alors un fichier séparé qui porte l’extension « .CSS ». Dans
ce fichier, on insère toutes les définitions de style ; on fait ensuite le lien entre la page
HTML et la feuille de style en insérant une balise <link> dans la page HTML.
49
Exemple
MonStyle.CSS
body {background-image : url(image.gif); margin : 2cm ; }

h1 {font-size : 18pt ; font-style : italic ; font-color : red ;}
h2 {font-size : 14pt ; font-color : green;}
p {text-indent : 1.5cm ; line-height : 14pt ;}
a {text-decoration : none ;}
a: link {text-color : blue ;}
a: visited {text-color : white ;}
a: actived {text-color : yellow ;}
MaPage.html
<html>
<head>
<link rel = "stylesheet" type = "text/CSS" href = "MonStyle.CSS" />
</head>
<body>
Ici le corps de la page
</body>
</html>
Dans cet exemple, quand l’utilisateur ouvre la page MaPage.html, le navigateur interprète
la balise <link />. Cette balise indique qu’il existe une relation entre cette page et une feuille
de style (rel = "stylesheet"). Cette feuille de style est de type (text/CSS) (il existe d’autres
types : par exemple les feuilles de style à base de JavaScript). L’adresse de la feuille de style
est fournie par l’attribut href.
Ainsi, le navigateur télécharge le fichier MonStyle.CSS et applique le style qui est défini
dans ce fichier à la page HTML.
La seule différence entre les feuilles de style incorporées et celles externes est que ces
dernières sont réutilisables dans plusieurs pages : il suffit d’ajouter une balise <link /> pour
lier la feuille de style à toute page concernée par ce style. Comme ça on peut créer une
certaine homogénéité entre les pages d’un même site.
c) Feuilles de style en ligne

On peut appliquer un style à un élément particulier d’une page sans impliquer les autres
balises de même type. Par exemple, dans un seul titre <h1> particulier, on veut que la taille
de la police soit 24pt avec une couleur jaune. Dans ce cas, il suffit d’introduire le style dans
la balise concernée en ajoutant un nouvel attribut spécial appelé style. La syntaxe est la
suivante : <balise style = "…">.
50
Exemple
<html>
<body>
<h1 style = "{font-size : 24pt ; color : yellow}"> Ce titre a son propre style </h1>
<h1> un autre titre </h1>

<p style = "{text-indent : 2cm ; background-color : #FF66AA ;}">
Ce paragraphe utilise son propre style : un retrait de 2cm et une couleur d’arrière-plan
(#FF66AA).
</p>
</body>
</html>
Remarques
1) Vous pouvez appliquer plusieurs types de feuilles de style dans une même page
HTML. Dans le cas d’une contradiction entre ces styles, les styles en ligne ont la
priorité maximale, puis viennent les feuilles de style incorporées ensuite les feuilles
de style externes sont appliquées. Pour les éléments dont aucun style n’est défini, le
style par défaut de HTML est appliqué.
2) La nomenclature « feuilles de style en cascade » vient du fait que les styles sont
appliqués aux éléments en progression : Si un style est défini en ligne pour un
élément, on l’applique tout de suite puis on regarde dans la feuille de style
incorporée ; si d’autres styles de plus (autres que ceux en ligne) sont définis pour cet
élément dans cette feuille alors ils sont appliqués ; puis on regarde dans la feuille de
style externe : si d’autres définitions de style (autres que ceux en ligne et incorporés)
elles sont alors appliqués. Pour les autres attributs de style de cet éléments qui ne
sont définis ni en ligne, ni dans les feuilles de style (incorporées ou externes), alors
les définitions de style par défaut de HTML sont appliquées.
2) Les attributs de style

a) Syntaxe générale
Comme vous avez certainement remarqué, la définition d’un style respecte généralement la
syntaxe suivante :
Selecteur {attribut1 : valeur1 ; attribut2 : valeur2 ; …}
Le Selecteur est généralement le nom d’une balise. Les attributs de style sont définis à
l’intérieur des accolades ({…}) en séparant l’attribut de sa valeur par ( : ) ; après la définition
de chaque attribut en met un point-virgule ( ; ).
Remarques
51
1) Parfois, une même balise peut supporter plusieurs cas différents. Prenons par exemple le
cas de la balise <a>. Cette balise crée des liens hypertextes. On peut distinguer les cas
suivants
 Tous les liens hypertextes (déjà visités ou pas encore…). On les désigne par a.
 Seulement les liens non encore visités. On les désigne par le sélecteur a:link.
 Seulement les liens visités. On les désigne par le sélecteur a:visisted.
 Seulement les liens activés. On les désigne par le sélecteur a:actived.
<style>
a {text-decortion : none ; font-size : 14pt ; font-weight : bold}
a:link {color : red}
a:visited {color : green}
a:actived {color : black ;}
</style>
Dans cet exemple, le style de l’élément a sera appliqué à tous les liens (ils seront non
soulignés, de taille 14pt et en gras). Le style de l’élément a:link ne sera appliqué que pour
les liens non encore visités (la couleur de ces liens est rouge). Après la première visite de la
destination d’un lien, le style a:visited est alors appliqué (la couleur du lien devient verte).
Quand on active un lien (après un click et avant le chargement de la page pointée par ce
lien), c’est le style a:actived qui est appliqué, la couleur du lien devient alors noire.
2) Dans le cas où vous voulez appliquer un style à une petite portion de votre texte (par
exemple un seul mot) utilisez la balise <span>…</span>. Cette balise a le même rôle que la
balise <div> : elle sert seulement à délimiter une partie de la page. La seule différence est
que la balise <div> effectue des retours à la ligne (avant et après la balise) tandis que
<span> ne fait pas de retours à la ligne ce qui fait de cette balise un bon moyen pour définir
des styles pour une petite partie de la page ne dépassant pas une seule ligne.
Voilà les principaux attributs que vous pouvez définir pour une page web
b) Attributs de style concernant le texte
Les attributs suivants définissent le style du texte et peuvent être insérés dans n’importe
quelle balise entourant du texte (par exemple : <body>, <p>, <div>, <span>, <a>, <h1>,…)
• font-familly : cet attribut permet de définir le corps de la police à utiliser, par

exemple : Garamond, Times New Roman,… . Généralement, si vous utilisez une
certaine police, vous ne serez pas sûrs que cette police existe sur le système de
l’utilisateur de votre page. Pour cette raison, vous devez définir plusieurs polices
alternatives (par ordre de priorité décroissant) séparées par des virgules.
• font-size : Cet attribut vous permet de spécifier la taille de la police. Vous
pouvez utiliser plusieurs unités de mesure:
o points : pour définir la taille de la police en points, utilisez les lettres pt
après la valeur numérique (exemple : body {font-size : 12pt}).
o pixels : ajoutez les lettres px après la valeur numérique pour définir une
taille en pixels (exemple : p {font-size : 24px}.
52
o pouces : si vous préférez la définition des tailles en pouces, utilisez les

lettres in après une valeur numérique {font-size : 1in}
o centimètres : pour utiliser les centimètres, les lettres cm après une
valeur numérique donne le résultat souhaité ({font-size : 2cm}).
o pourcentages : vous pouvez définir la taille de la police par rapport à la
taille par défaut en utilisant le pourcentage. Par exemple, h1 {font-size :
300%} définit une taille pour les titres h1 trois fois plus grand que la taille
par défaut.
• font-style : cet attribut vous permet de mettre du texte en italique par exemple.
Les valeurs possibles pour cet attribut sont italic, oblic et normal. (exemple :
{font-style : italic}).
• font-weight : cet attribut spécifie le poids de la police, c'est-à-dire l’épaisseur de
son dessin. Autrement dit, il spécifie le degré du gras. Vous pouvez utiliser les
valeurs suivantes : extra-light, demi-light, light, medium, demi-bold, bold,
extra-bold. Vous pouvez aussi donner une valeur entre 100 et 900.
h1 {font-weight : extra-bold}
h2 {font-weight : 700}
• color : définie la couleur du texte. La valeur d’une couleur peut être donnée en
hexadécimal (par exemple {color : #FF0000}, qui signifie le rouge), ou encore en
spécifiant un nom de couleur : {color : red} ou en utilisant une nouvelle notation
propre aux feuilles de style sous la forme rgb(n1,n2,n3) où n1, n2 et n3 sont 3
nombres entre 0 et 255 et qui donnent respectivement le pourcentage du rouge,
du vert et du bleu dans la couleur à définir. Par exemple, {color : rgb(255,0,0)}
définit le rouge comme couleur pour le texte.
• text-decoration : cet attribut vous permet, par exemple, de souligner le
texte…Les valeurs possibles sont : underline (pour souligner le texte), overline
(pour surligner le texte), line-through (pour barrer le texte) et none (pour
supprimer toute décoration et obtenir du texte normal. Cette valeur est utilisée,
par exemple, si vous voulez supprimer le soulignement des liens hypertextes.).
• text-indent : cet attribut spécifie le retrait de la première ligne (d’un document,
d’un paragraphe, d’une division,…) par rapport au reste du texte. Vous pouvez
utiliser toutes les unités de mesure citées plus haut. Internet Explorer accepte
des valeurs négatives pour le retrait.
• text-align : spécifie l’alignement du texte. Les valeurs possibles sont left,
center, right et justify (pour aligner le texte à droite et à gauche).
• ligne-height : cet attribut définit l’espacement entre les lignes du texte. Vous
pouvez utiliser les différentes unités de mesure vues plus haut. (Par exemple : p
{line-height : 14pt}).
Exemple
53
1 <html>
2 <head> <title> Attributs de style concernant le texte </title> </head>
3
4 <style>
5 h1 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 18pt ; font-style :
6 normal ; color : red ; text-align : left}
8 normal ; text-align : right}
9 p {font-family : garamond, goudy, times, serif ; font-size : 12pt ; font-style : normal ;
10 line-height : 14pt}
11 a {text-decoration : none; font-weight : bold}
12 </style>
13
14 <body>
15 <h1> Un titre de type H1 </h1>
16 <p style = "text-align : left ; text-indent : 2cm "> Ici commence le premier paragraphe.
17 Cliquez <a href ="page2.html"> ici </a> pour aller dans une autre page. Remarquez
18 que le lien n’est pas souligné et qu’il est en gras.
19 </p>
21
22 <p style = "text-align : right"> Voici un autre paragraphe. Cliquez <a href =
23 "page3.html"> ici </a> pour aller à la page 3. Remarquez que le style défini dans la
24 balise style est appliqué.
25 </p>
26
27 </body>
28 </html>
Dans cet exemple, la feuille de style est insérée entre les balises <style> et </style>. A la
ligne 5, le style des titres <h1> est défini. Plusieurs noms de police sont fournis pour
l’attribut font-family (remarquez la virgule qui sépare les différents noms). Si le navigateur
trouve la police verdana, il l’utilise, sinon il cherche la police helvetica, s’il ne la trouve
pas, il passe à arial et ainsi de suite. Pour la taille des caractères, la taille 18pt est utilisée, le
style est normal (pas d’italique), la couleur de tous les titres <h1> est le rouge (color : red)
et ils sont tous alignés à gauche (text-align : left). De même, les lignes 7 et 8 définissent le
style des titres <h2>. La taille cette fois-ci est 14pt et l’alignement est à droite.
Les lignes 9 et 10 définissent le style des paragraphes. D’autres noms de police sont utilisés
ici. La taille des caractères est 12pt et le style est normal. L’espacement entre les lignes d’un
paragraphe est fixé à 14pt (line-height : 14pt). Aucune information sur l’alignement du
texte dans les paragraphes n’est donnée dans cette feuille de style. Ceci est fait dans les
balises <p> (en ligne).
La ligne 11 ordonne que les liens hypertextes soient non soulignés (text-decoration : none)
et qu’ils soient en gras (font-weight : bold).
Remarquez que nous avons défini des styles en ligne. Par exemple, à la ligne 16 nous avons
ajouté l’attribut style dans la balise <p>. Cet attribut reçoit la valeur "text-align : left ; text-
54
indent : 2cm ". Ceci a pour effet d’aligner le premier paragraphe à gauche (text-align :
left) et de marquer un retrait de la première ligne de ce paragraphe de 2cm (text-indent :
2cm). Pour le deuxième paragraphe, on a demandé (avec un style en ligne) de l’aligner à
droite (text-align : right) (voir ligne 22).
Voilà le résultat de cet exemple dans Firefox :
c) Marges, bordures et remplissage
Marges
Les feuilles de style vous offrent un contrôle total sur les marges de vos pages. Ceci était
impossible avec HTML. Vous pouvez définir non seulement les marges de toute la page,
mais aussi les marges de tout élément dans la page (par exemple, les paragraphes, les
divisions,…). Voilà les principaux attributs définissant les marges :
• margin-left : cet attribut spécifie une valeur pour la marge gauche de la page
(ou d’un autre élément, par exemple un paragraphe, une division,…).
• margin-right : cet attribut spécifie la marge droite.
• margin-top : pour spécifier la marge haute.
<style>
body {margin-top : 3cm ; margin-left : 2cm ; margin-right : 1.5cm ;}
</style>
Remarque : Vous pouvez regrouper tous ces attributs en un seul attribut margin et vous
fournissez 3 valeurs qui seront attribuées respectivement aux marges supérieure, droite et
gauche. L’exemple précédent peut être réécrit comme suit :
55
<style>
body {margin : 3cm 2cm 1.5cm ;}
<style>
Remarquez que les 3 valeurs sont séparées par un espacement, mais pas de virgules.
Si vous ne fournissez que deux valeurs, la première s’applique à la marge supérieure, la

deuxième s’applique aux marges droite et gauche. Si une seule valeur est fournie, il
s’applique aux trois marges.
Bordures
Les attributs suivants vous permettent de personnaliser les bordures des éléments de vos
pages HTML :
• border-width : Spécifie la largeur de la bordure autour d’un élément (la page

entière (body), un paragraphe (p), une division (div), un titre,…). Toutes les
unités de mesure vues plus haut sont acceptées.
• border-color : spécifie la couleur de la bordure. Rappelons qu’une couleur
peut être donnée en hexadécimal (#FF0000 par exemple) ou en donnant un
nom pour les couleurs les plus courantes (red par exemple) ou encore sous la
forme (rgb (valeur_r,valeur_g,valeur_b), par exemple rgb(255,0,0) donne le
rouge).
• border-style : cet attribut détermine l’aspect de la bordure. Plusieurs valeurs
sont possibles : none, dotted, dashed, solid, double, ridge, inset et outset.
Ces quatre dernières valeurs correspondent à des effets 3D.
Remplissage
Vous pouvez spécifier la distance entre les bordures d’une boîte et l’élément au sein de cette
boîte :
• padding-top : définit la distance entre la bordure supérieure et l’élément

intérieur.
• padding-bottom : définit la distance entre la bordure inférieure et l’élément
intérieur.
• padding-left : définit la distance entre la bordure gauche et l’élément
intérieur.
• padding-right : définit la distance entre la bordure droite et l’élément
intérieur.
Exemple
Reprenons l’exemple donné plus haut en y ajoutant la définition des marges ainsi qu’une
bordure dans l’élément body (comparez le avec le résultat obtenu dans la page 55) :
56
1 <html>
3
4 <style>
5 body {margin-top : 3cm ; margin-left : 2cm ; margin-right : 1.5cm ; border-width :
6 4pt; border-color : red; border-style : outset; }
12 line-height : 14pt}
14 </style>
15
16 <body>
18 <p style = "text-align : left ; text-indent : 2cm "> Ici commence le premier paragraphe.
19 Cliquez <a href ="page2.html"> ici </a> pour aller dans une autre page. Remarquez
20 que le lien n’est pas souligné et qu’il est en gras.
21 </p>
23
24 <p style = "text-align : right"> Voici un autre paragraphe. Cliquez <a href =
25 "page3.html"> ici </a> pour aller à la page 3. Remarquez que le style défini dans la
26 balise style est appliqué.
27 </p>
28
29 </body>
30 </html>
A la ligne 5 dans cet exemple, nous avons ajouté à la feuille de style les définitions des
marges qui seront appliqués à toute la page (car ils sont faites dans body). Une bordure
rouge de largeur 4pt avec le style 3D outset va entourer la page entière.
Remarque : vous pouvez aussi définir des marges pour les paragraphes (ou autres
éléments) mais dans ce cas leurs valeurs doivent être supérieures à ceux données pour les
marges de la page, sinon elles seront ignorées. Voilà le résultat de cet exemple dans le
navigateur :
57
d) Couleurs et images d’arrière-plan
Vous pouvez définir une couleur ou une image d’arrière-plan pour tout élément de votre
page :
• background-color : cet attribut vous permet de spécifier une couleur

d’arrière-plan. Par exemple, pour choisir un arrière-plan jaune pour votre
page vous pouvez ajouter dans l’élément body de la feuille de style, ou dans
un attribut style de la balise <body> ceci : background-color : yellow ; (ou
background-color : #FFFF00 ; ou encore background-color :
rgb(255,255,0) ;).
Pour définir le bleu par exemple comme couleur d’arrière-plan de tous les
paragraphes, il suffit d’ajouter dans la feuille de style : p {background-color :
blue}. Si vous voulez mettre l’arrière-plan d’une courte partie du texte en vert
il vous suffit d’entourer cette partie par une balise span avec l’attribut style
comme suit : <span style = "background-color : green"> Ceci est sur
arrière-plan vert </span>.
• background-image : Si vous préférez une image d’arrière-plan plutôt qu’une
couleur, utilisez cet attribut. Comme valeur, utilisez l’adresse de l’image en
respectant la syntaxe suivante : background-image : url(adresse_image).
Par exemple si vous voulez établir l’image nommée Mon_image.gif comme
image d’arrière-plan il vous suffit d’ajouter ceci dans la feuille de style :
body {background-image : url(Mon_image.gif)}
e) Le positionnement et la visibilité
Les feuilles de style offrent un nouveau moyen pour positionner un élément d’une page
HTML à l’emplacement exact où l’on veut. Ceci était impossible avec le langage HTML.
Voilà les principaux attributs concernant le positionnement :
• position : cet attribut spécifie le type de positionnement. Vous pouvez

affecter à cet attribut la valeur absolute si vous voulez donner les cordonnées
58
en calculant à partir du coin supérieur gauche de la page. Dans le cas où vous

voulez positionner un élément relativement à l’emplacement en cours,
choisissez la valeur relative.
• top : cet attribut spécifie les cordonnées de l’élément sur l’axe vertical. Si le
positionnement est absolu, on fait le calcul depuis le haut de la page. Si le
positionnement est relatif, on fait le calcul à partir de l’emplacement en cours.
• left : cet attribut spécifie les coordonnées de l’élément à positionner sur l’axe
horizontal. Le principe de calcul de ces coordonnées dépend du type de
positionnement (absolu ou relatif).
• width : cet attribut spécifie la largeur de la zone réservée à l’affichage de
l’élément concerné.
• height : cet attribut spécifie la hauteur de la zone d’affichage de l’élément.
Les valeurs de ces quatre derniers attributs peuvent être données avec les différentes unités
de mesure supportées par le langage CSS.
Avec le positionnement absolu, vous pouvez placer plusieurs éléments dans le même
emplacement en créant ainsi plusieurs couches. Il serait alors important d’utiliser les
attributs suivants :
• z-index : cet attribut correspond à l’emplacement d’un élément sur l’axe Z (la
profondeur d’écran). Ainsi, si deux éléments sont placés à un même
emplacement sur l’écran, alors celui dont la valeur de z-index est plus grande
apparaît situé sur l’autre.
• visibility : cet attribut vous permet de rendre un élément invisible sur la
page. Les valeurs possibles sont visible et hidden. La valeur hidden cache
l’élément et la valeur visible le rend visible. Par exemple, vous pouvez créer
une animation en situant plusieurs images à un même emplacement et
alterner leur affichage avec javascipt.
2) Organisation des feuilles de style

a) Organiser les styles en groupes
Pour améliorer la lisibilité de vos feuilles de style, vous pouvez regrouper les éléments qui
ont le même style. Considérons l’exemple suivant :
<style>
h1 {font-family : verdana, helvetica, arial, sans-serif ; font-style : normal ; color : red; }

</style>
Dans cet exemple, on a défini le style des titres de type h1, de type h2 et de type h3 dans 3
lignes différentes. On peut regrouper toutes ces lignes dans une seule :
59
<style>
h1, h2, h3 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; color: red}
</style>
Ainsi, le même style sera appliqué aux éléments h1, h2 et h3.
b) Organiser les styles en classes
Jusqu’à maintenant nous avons vu comment appliquer un style à toutes les balises d’un
même type. Considérons par exemple le code suivant :
<style>
h1 {color : red ;}
</style>
Dans cet exemple, on a ordonné de mettre tous les titres de type h1 en rouge. Mais,
comment faire si, dans notre page HTML, nous voulons certains titres h1 en rouge et
d’autres titres h1 en vert ? Autrement dit, comment faire si nous avons plusieurs classes de
titre h1 ?
La norme CSS permet de créer plusieurs classes pour un même élément. Reprenons
l’exemple de la page 53. Dans cet exemple, l’alignement du texte des paragraphes est définit
avec un style « en ligne ». Dans l’exemple suivant, nous allons créer des classes pour définir
le style des paragraphes :
60
1 <html>
3
4 <style>
10 line- height : 14pt}
11 p.droite {text-align : right}
12 p.gauche {text-align : left ; text-indent : 2cm }
14 </style>
15
16 <body>
18 <p class = "gauche"> Ici commence le premier paragraphe. Cliquez <a href
19 ="page2.html"> ici </a> pour aller dans une autre page. Remarquez que le lien n’est
20 pas souligné et qu’il est en gras.
21 </p>
23
24 <p class = "droite"> Voici un autre paragraphe. Cliquez <a href = "page3.html"> ici
25 </a> pour aller à la page 3. Remarquez que le style défini dans la balise style est
26 appliqué.
27 </p>
28
29 </body>
30 </html>
Voilà ce que nous intéresse dans cet exemple (comparez le avec l’exemple de la page 53) :
 Dans les lignes 9 et 10, nous avons introduit une définition de style qui sera
appliquée à tous les paragraphes (<p>) sans exception.
 Dans la ligne 11, nous avons défini le style qui sera appliqué à tous les paragraphes
d’une classe nommée « droite ». Dans la page HTML, les paragraphes de ce type
commencent par <p class = "droite">.
 Dans la ligne 12, nous avons défini le style qui sera appliqué à tous les paragraphes
d’une classe nommée « gauche ». Dans la page HTML, les paragraphes de ce type
commencent par <p class = "gauche">.
Voyons maintenant ce qui se passe :
 A la ligne 18 commence le premier paragraphe avec <p class "gauche">. Donc ce

paragraphe appartient à la classe « gauche », et par suite il subit, en plus de style de
tous les paragraphes donné dans les lignes 9 et 10, le style défini pour la classe
« gauche » dans la ligne 11.
61
 Le deuxième paragraphe commence à la ligne 24 par <p class = "droite">. Ce

paragraphe subit donc le style défini pour la classe « droite » dans la ligne 19. Le
style défini dans les lignes 9 et 10 sera bien sûr appliqué car il concerne tous les
paragraphes.
En résultat, on obtient la même page que dans l’exemple de la page 53.
Pour créer une classe, voilà la syntaxe :
Balise.NomClasse {attribut1 : valeur1 ; attribut2 : valeur2 ; attribut3 : valeur3 ;}
Balise: un nom de balise HTML concernée par le style à définir (par exemple : p, a, h1, …).
Dans l’exemple précédent, nous avons utilisé le nom de balise P pour appliquer le style aux
paragraphes (<p>).
NomClasse : C’est un nom que vous choisissez vous-même pour votre classe. Dans
l’exemple précédent, nous avons utilisé deux classes nommées « droite » et « gauche ».
Pour appliquer un style d’une classe à un élément d’une page HTML, il suffit d’ajouter dans
la balise de cet élément l’attribut class
<balise class = "NomClasse">Ici le style de la classe « NomClasse » est appliqué </balise>
62
Partie 2
Scripts côté client
63
64
Chapitre 3 : Le langage Javascript
0) Introduction
Le HTML à lui seul, n’offre pas de grandes possibilités. Tout ce que vous pouvez faire avec
c’est de créer des pages web figées (statiques). C’est dans le but de lui ajouter des capacités
de programmation que le langage Javascript a été créé.
Javascript est un langage de script côté client. Il permet d’étendre les capacités du langage
HTML : En écrivant vos pages HTML, vous pouvez leur ajouter du code javascript qui fait
certains traitements dans ces pages.
Le code javascript est donc inclus dans le code HTML et il est interprété lui aussi par le
navigateur. De ce fait, il est complètement lié au navigateur. Il ne peut pas tourner
indépendamment. De plus cette interprétation peut être différente d’un navigateur à l’autre
et d’une version à l’autre.
Remarques :
1) Javascript est autre chose que Java :
• Java est un langage de programmation : Vous pouvez écrire un programme

très performant en Java. Une fois compilé, il peut tourner indépendamment
de l’environnement de développement.
• Javascript est un langage de script : Le code que vous pouvez écrire avec ce
langage n’est pas indépendant de l’environnement du navigateur. Le code a
besoin d’un navigateur web pour être interprété. Javascript utilise quelques
notions de Java, mais il ne permet pas d’écrire des programmes très
performants.
2) Le terme côté client signifie que les traitements et les calculs se passent sur
l’ordinateur du client. Autrement dit, quand un utilisateur demande une page auprès
d’un serveur, alors le serveur envoie la page demandée avec le code javascript inclus.
Une fois le client reçoit la page, il l’affiche et interprète les programmes javascript de
la page et il les exécute.
3) D’autres langages de scripts côté client existaient autrefois. Mais, de nos jours,
javascript domine le marché.
4) Il existe des langages de scripts côté serveur (Par exemple, PHP, ASP,…). Ces scripts
s’exécutent sur le serveur et génèrent dynamiquement les pages à envoyer aux
clients.
1) Comment insérer du code javascript dans une page HTML

Il existe trois façons pour introduire du code javascript dans une page HTML :
65
1. La balise <script language = "javascript">…</script> : Cette balise indique au

navigateur que le code inclus est du code javascript. Elle peut être insérée soit dans
la section head et par suite, elle sera accessible même avant l’affichage de la page,
soit dans le corps du document dans la section body. Prenons cet exemple que vous
pouvez insérer dans la section body de votre page :
<script language = "javascript">

var Nom = "Omar" ;
document.write ("Bonjour" + Nom) ;
</script>
Dans cet exemple, nous avons inséré une balise <script> qui nécessite un attribut
language (qui spécifie que le langage utilisé est javascript). A la deuxième ligne nous
avons déclaré une variable nommée Nom et nous lui avons affecté la valeur
« Omar ». La deuxième ligne demande l’affichage du message « Bonjour »
concaténé avec le contenu de la variable Nom (le résultat affiché sera donc
« Bonjour Omar »).
2. Le pseudo-protocole « javascript » : Dans une balise <a>, vous pouvez affecter à

l’attribut href du code javascript précédé par le mot « javascript: ». Ceci parait
comme si on spécifie le nom d’un protocole (rappelez-vous que on peut utiliser dans
un lien hypertexte tout type de protocole. Par exemple, pour faire un lien vers une
adresse email, on écrit <a href = "mailto:ali@yahoo.com">, pour établir un lien
vers un serveur FTP, le lien sera sous la forme <a href = "ftp:NomServeur">. http,
mailto et ftp sont des exemples de protocole. Dans la balise <a>, « javascript» se
comporte comme un protocole. On l’appelle un pseudo-protocole. Voilà un exemple :
<a href = "javascript:alert(‘tu as cliqué sur le lien !’)"> Cliquez ici </a>
Dans cet exemple, un clic sur le lien « Cliquez ici » provoque l’exécution de la
fonction « alert ». Cette fonction prédéfinie de javascript affiche dans une boite de
dialogue le message « tu as cliqué sur le lien ! »
3. Les événements : Les actions de l’utilisateur peuvent être capturées et interprétées.

Par exemple, le click de l’utilisateur par la souris est désigné par l’événement
onClick, le passage de la souris sur un élément de la page est désigné par
l’événement onMouseOver, quand la souris quitte cet élément, c’est l’événement
onMouseOut qui se déclenche…
Supposons par exemple que nous voulons exécuter une fonction javascript à chaque
fois que l’utilisateur passe le curseur de la souris sur une image donnée. Il suffit pour
cela d’ajouter dans la balise <img /> de cette image l’attribut onMouseOver comme
suit :
66
<img src = "image.gif" onMouseOver = "maFonction ( );"
Exemple :
1 <html>
2
3 <head>
4 <title>
5 Exemple de code javascript
6 </title>
7
8 <script language = "javascript">
9
10 function maFonction( ) {
11 document.write("Ce texte s’affiche à l’écran lors de l’appel de cette fonction") ;
12 }
13
14 </script>
15
16 </head>
17
18
19 <body>
20 Ce ci est du texte normal de la page HTML.
21
23 document.write ("Ce texte s’affiche à l’écran lors du chargement de la page <br>") ;
24 </script>
25
26
27 <a href = "javascript:maFonction( );">Cliquez ici pour exécuter la fonction
28 maFonction.</a>
29
30 <div onClick = "maFonction( ) ;"> Cliquez ici pour obtenir le même résultat </div>
31
32 </body>
33 </html>
2) Eléments de la programmation de base de javascript

Notons tout d’abord que beaucoup de notions de la programmation de base sont les même
que dans le langage C. Par exemple, les opérateurs et les expressions sont les mêmes que
dans C. Les instructions suivent la syntaxe de C, et toute instruction se termine par un
point-virgule (;). Par ailleurs javascript utilise aussi des notions de la programmation
orientée objet.
67
a) Les commentaires
Pour commenter votre code javascript, vous pouvez utiliser deux façons. Utilisez « // » si
vous voulez faire un commentaire qui tient sur une seule ligne. Tout ce qui vient après sur
la même ligne est ignoré par le navigateur. La deuxième méthode est utile si le commentaire
est étalé sur plusieurs lignes. Dans ce cas on le délimite par /* et */.
// Commentaire sur une seule ligne.

/* Commentaire
sur
plusieurs lignes */
b) Déclaration des variables
Pour déclarer une variable en javascript, on utilise le mot clé var. Pour le type de ces
variables, javascript reconnaît les types de base utilisés par tous les langages de
programmation (entier, réel, boolien, chaîne de caractères,…). Javascript utilise aussi des
notions de la programmation orientée objet (comme dans Java par exemple).
Commençons par la déclaration des variables de types simples. Dans ce cas, la déclaration
du type de la variable n’est pas nécessaire. Voilà un exemple :
var Nom = "Moujtahid" ;

var Age = 22 ;
var Taille = 1.75 ;
var Admis = true ;
Dans cet exemple nous avons déclaré quatre variables. Nous n’avons pas déclaré les types
de ces variables, mais le navigateur va reconnaître leurs types dès la première affectation de
chaque variable. L’interpréteur javascript va considérer la variable Nom comme une chaîne
de caractères, la variable Age comme entier, la variable Taille comme réel et la variable
Admis comme variable booléenne.
Remarques
1) Une chaîne en javascript est délimitée par les doubles quottes (") ou par des simple
quottes (' ). Les caractères utilisés en C (par exemple, ‘\n’, ‘\t’…) sont acceptés.
2) En javascript, la casse est importante. Javascipt fait la différence entre majuscules et
minuscules. Par exemple, Nom, nom et NOM sont trois variables différentes.
3) Javascript est très souple en ce qui concerne les types. Par exemple, bien que la
variable Nom est considérée en un premier temps comme une chaîne de caractères,
on peut lui affecté dans un deuxième temps un entier ou un réel et effectuer des
opérations. Voyons cet exemple :
68

var Nom = "Moujtahid " ;
Nom = Nom + 20 ;
document.write("le résultat est : " + Nom) ; //ceci affiche : « le résultat est Moujtahid 20 »
</script>
c) Les fonctions
Pour déclarer une fonction en javascript, utilisez le mot clé function suivi du nom de la
fonction. Le corps de la fonction est délimité par des accolades (exactement comme dans le
langage C) :
function MaFonction ( ) {
// Ici le corps de la fonction
Comme en C, une fonction peut recevoir des paramètres et retourner une valeur. L’appel de
la fonction se passe en utilisant son nom :

// Déclaration de la fonction
function somme(x,y) {
var s = x + y ;
return s ;
}
// Appel de la function
var resultat = somme(3,5) ; //appelle la fonction somme( ) pour calculer la somme 3+5
document.write("La somme de 3 et 5 est " + resultat) ;
</script>
d) Structures de contrôle
Tout ce qui concerne cette partie est le même que dans le langage C. Nous donnons un
rappel rapide sous forme d’exemples.
La boucle for
L’exemple suivant utilise la fonction prédéfinie « prompt) pour inviter l’utilisateur à entrer
un entier. Une boucle for calcule ensuite la somme des N premiers entiers ; puis on affiche
le résultat à l’aide de document.write() :
69

var N = prompt("Entrez un nombre entier :") ;
var S = 0 ;
var i = 0 ;
for (i = 0 ; i < N + 1; i++) {
S=S+i;
}
document.write("la somme des entiers de 0 à " + N + "est : " + S) ;

</script>
La boucle while
Voilà le même exemple avec la boucle while :

var S = 0 ;
var i = 0 ;
while ( i < N) {
i ++;
S=S+i;
}

</script>
La boucle do…while
Et maintenant avec la boucle do…while :

var S = 0 ;
var i = 0 ;
do {
i ++;
S=S+i;
} while (i < N)

</script>
Les tests : If …else…
70
var N = prompt("Entrez un nombre : ") ;

if (N < 0)
document.write("Vous avez entré un nombre négatif") ;
else
document.write("Vous avez entré un nombre positif ou nul") ;
</script>
Rappelons que la clause else est facultative.
Bref, tous ce que vous connaissez à ce propos en langage C est valable en javascript (par
exemple, les instructions switch, break, continue,…)
3) Le modèle Objet de javascript

Javascript utilise des notions de la programmation Orientée Objet (comme en Java ou C++
par exemple). Ainsi, vous pouvez déclarer une variable de type Objet.
Un objet est une structure complexe. Dans cette structure, le programmeur définit des
variables qui s’appellent propriétés de l’objet. Il définit aussi les actions (qui s’appellent
méthodes) qu’on peut appliquer sur cet objet.
Donc tout objet possède des propriétés et des méthodes :
 Les propriétés : sont des variables qui permettent de personnaliser l’objet.

 Les méthodes : sont des fonctions attachées à l’objet et qui réagissent sur celui-ci
pour exécuter une certaine action.
Javascript possède des objets prédéfinis qui sont prêts à utiliser par le programmeur. Celui-
ci peut aussi créer des nouveaux objets qui répondent à son propre besoin.
a) Objets Créés par l’utilisateur
Vous pouvez créer vos propres objets aux seins de vos scripts en leur attribuant des
propriétés et des méthodes. Vous pouvez les exploiter ensuite.
Création d’un objet
Nous allons dans ce paragraphe vous montrer comment créer un objet nommé Personne qui
possède les propriétés nom, prenom, et age et une seule méthode nommée sePresenter ( )
qui a pour rôle d’afficher un message de présentation de l’objet. Voilà comment on procède :
1) Première étape
71
Dans cette étape, on crée les méthodes qui seront associés à l’objet plus tard (dans la
deuxième étape). Une méthode est tout simplement une fonction. Créons donc la
fonction Presentation( ) :
function Presentation( ){
alert("Bonjour. Je suis " + this.nom + " " + this.prenom + " Agé de " + this.age);
}
Remarquez l’utilisation du mot clé this qui réfère à l’objet appelant (this sera reconnu après
association de cette fonction à l’objet dans l’étape suivante).
2) Deuxième étape
Une fois les méthodes créées, il nous reste de créer l’objet. Ce n’est qu’une autre
fonction dans laquelle on déclare des variables qui constituent les propriétés de
l’objet :
function Personne( ) {
this.nom ;
this.prenom ;
this.age ;
this.sePresenter = Presentation ;
}
Nous avons ainsi créer un objet nommé Personne avec 3 propriétés (nom, prenom,
et age). Remarquez aussi l’utilisation du mot clé this qui réfère à l’objet. Signalons
que ces propriétés sont, tout simplement, des variables déclarées de cette façon
particulière. On peut les initialiser lors de la création de l’objet comme on peut les
modifier plus tard (voir l’étape suivante). On a associé à l’objet Personne une
méthode nommée sePresenter à laquelle on a affecté le nom de la fonction créée
précédemment.
Utilisation de l’objet :
Maintenant on dispose d’un objet nommé Personne( ). On peut alors déclarer des variables
objets de ce type :
var personne1 = new Personne ( ) ;

Les variables personne1, personne2 et personne3 sont désormais des objets qui possèdent
des noms, prénoms et âges et qui peuvent « se présenter ». Voyons par exemple comment
on peut personnaliser l’objet personne1 :
72
var personne1 = new Personne();

personne1.nom = "Omari"; // on accède à la propriété nom
personne1.prenom = "Omar"; // on accède à la propriété prenom
personne1.age = 22; // on accède à la propriété age
personne1.sePresenter( ); // on appelle la méthode sePresenter( )
Quand l’instruction personne1.sePresenter() s’exécute dans le navigateur, voilà ce que vous

obtenez (c’est le résultat de l’instruction personne1.sePresenter() qui appelle la fonction
Presentation en lui passant les propriétés de l’objet personne1) :
Pour pouvoir voir ce résultat, regroupez ces portions de codes dans un seul fichier. Faites
attention au majuscules et minuscules. Le listing suivant donne l’ensemble des étapes
précédentes:
73
<html>
<body>

}
function Personne( ) {
this.nom ;
this.prenom ;
this.age ;
}
var personne1 = new Personne();

var personne2 = new Personne() ;
var personne3 = new Personne() ;
personne1.nom = "Omari";
personne1.prenom = "Omar";
personne1.age = 22;
personne2.nom = "Kaddouri";
personne2.prenom = "Kaddour";
personne2.age = 23;
personne3.nom = "Jallouli";
personne3.prenom = "Jalloul";
personne3.age = 24;
</script>
< !-- On ajoute des liens pour appeler les méthodes. -->
<a href = "javascript: personne1.sePresenter( )" >La première personne </a> <br />
<a href = "javascript: personne2.sePresenter( )" >La deuxième personne </a> <br />
<a href = "javascript: personne3.sePresenter( )" >La troisième personne </a>
</body>
</html>
Vous pouvez améliorer l’exemple précédent en passant les propriétés de l’objet en

paramètres lors de sa création:
74
<html>
<body>
// création d’une fonction qui sera utilisée comme méthode :
}
//création d’un objet nommé Personne (avec passage des valeurs des propriétés):
function Personne(n, p, a) {
this.nom = n ;
this.prenom = p;
this.age = a;
}
/*déclaration des variables objets personne1, personne2 et personne3 de type

Personne et passage de leurs propriétés */
var personne1 = new Personne("Omari", "Omar", 22 );

var personne2 = new Personne("Kaddouri", "Kaddour", 23 );
var personne3 = new Personne("Jallouli", "Jalloul", 24 );
</script>
< !-- On ajoute des liens pour appeler les méthodes. -->
<a href = "javascript: personne1.sePresenter( )" >La première personne </a> <br />
<a href = "javascript: personne2.sePresenter( )" >La deuxième personne </a> <br />
<a href = "javascript: personne3.sePresenter( )" >La troisième personne </a>
</body>
</html>
b) Les objets prédéfinis
b1) Les Objets built-in
Nous donnons ici une liste des objets prédéfinis les plus utilisés de javascipt :
1. L’Objet Date( )
75
Cet objet est très important. Il vous permet d’accéder à la date système de
l’utilisateur final.
Déclaration
Pour déclarer un nouveau objet de type Date( ), voilà la syntaxe :
var d = new Date ( ) ;
On utilise ici les mots clés var et new. Nous avons donc déclaré d comme variable de
type Date( ). Il convient de rappeler ici que la casse est importante en javascript
Méthodes
• getDate ( ) : permet de récupérer le numéro du jour du mois (de 1 à 31).

• getDay ( ) : permet de récupérer le numéro du jour de la semaine (de 0 à 6).
• getMonth ( ) : permet de récupérer le numéro du mois (de 0 à 11).
• getYear ( ) : permet de récupérer l’année (sur 4 chiffres).
• getHours ( ) : permet de récupérer l’heure (de 0 à 23).
• getMinutes ( ) : permet de récupérer les minutes (de 0 à 59).
• getSeconds ( ) : permet de récupérer les secondes (de 0 à 59).
L’exemple suivant montre comment on peut utiliser l’objet Date( ) et ses méthodes :
<html>
<body>

var maDate = new Date ( ) ;
document.write ("La date d’aujourd’hui est " + maDate) ;

document.write("<br>Le numéro du jour dans la semaine est : " + maDate.getDay( ) ) ;
document.write("<br>Le numéro du jour dans le mois est : " + maDate.getDate( ) ) ;
document.write("<br>Le numéro du mois est: " + maDate.getMonth( ) ) ;
document.write("<br>L’année est : " + maDate.getYear( ) ) ;
document.write("<br>L’Heure est : " + maDate.getHours( ) ) ;
document.write("<br>Les minutes : " + maDate.getMinutes( ) ) ;
document.write("<br>Les secondes : " + maDate.getSeconds( ) ) ;
</script>
</body>
</html>
Dans cette exemple, nous avons déclaré une variable de type Date ( ) avec l’instruction var
maDate = new Date ( ). Cette instruction stocke aussi la date système dans la variable
maDate. On peut par la suite afficher le contenu de cette variable. Les méthodes offertes
permettent de manipuler ce contenu. On appelle une méthode en utilisant la notation
76
pointée : objet.méthode ; de même, pour accéder à une propriété, on utilise :

objet.propriété. Voilà le résultat de l’exemple précédent affiché dans le navigateur:
Les méthodes de l’objet Date( ) citées plus haut et qui commencent avec « get » sont
utilisées pour lire à partir d’une date donnée. Pour « écrire » dans cette date (par exemple,
pour modifier l’année, le mois, les heures…) on utilise d’autres méthodes qui commencent
cette fois-ci par «set» : setDay( ), setDate( ), setMonth( ), setYear( ), setHours( ),
setMinutes( ), setSecondes( )...On peut aussi, lors de la déclaration d’une variable de type
Date, passer une date autre que la date système (par défaut, la date système est passée en
paramètre) :
1 <html>
2 <body>
4 var maDate = new Date (2001,8,11) ;
5 document.write("bonjour");
6
7 document.write ("La date passée en paramètre est " + maDate) ;
8 document.write("<br>Le numéro du mois est: " + maDate.getMonth( ) ) ;
9 document.write("<br>L’année est : " + maDate.getYear( ) ) ;
10
11 maDate.setMonth(9) ;
12 maDate.setYear (2004) ;
13
14 document.write ("La date passée en paramètre est " + maDate) ;
15 document.write("<br>Le numéro du mois est: " + maDate.getMonth( ) ) ;
16 document.write("<br>L’année est : " + maDate.getYear( ) ) ;
17
18 </script>
19 </body>
20 </html>
A la ligne 4 de cet exemple, nous avons passé en paramètre de Date( ) une date sous forme
de tableau (année, mois, jour, heures, minutes, secondes). Donc la variable maDate contient
77
maintenant la date 11/9/2001. Ce qui est nouveau dans cet exemple sont les lignes 11 et 12
dans lesquelles nous avons utilisé les méthodes setMonth( ) et setYear( ) de l’objet maDate.
A la ligne 11 nous avons modifié le numéro du mois stocké dans l’objet maDate, la nouvelle
valeur est 9 (c’est octobre), la ligne 12 change l’année en 2004. La nouvelle date qui est alors
stockée dans maDate est 11/10/2004.
2. L’objet Array ( )
Cet objet permet de créer des tableaux.
Déclaration
Pour déclarer une variable objet de type tableau (Array) on peut choisir entre ces trois
méthodes :
var monTableau1 = new Array (7);
var monTableau2 = new Array;
var monTableau3 = new Array ("A", "B", "C", "D", "E");
La première méthode est utilisée pour déclarer le tableau monTableau. C’est un tableau à 7
éléments (la taille est fixée dès le début).
La deuxième méthode crée un tableau monTableau mais à taille variable.
La troisième méthode permet d’initialiser le tableau dès sa création. Par exemple, le tableau
monTableau3 est un tableau à 5 éléments qui sont respectivement "A", "B", "C", "D" et"E".
Pour accéder aux éléments d’un tableau on utilise la même notation du langage C :
78
<html>
<body>
var monTableau = new Array ("A", "B", "C", "D", "E");
document.write (monTableau[0] + "<br>") ; // donne : A

document.write (monTableau[1] + "<br>") ; // donne : B
document.write (monTableau[2] + "<br>") ; // donne : C
document.write (monTableau[3] + "<br>") ; // donne : D
document.write (monTableau[4] + "<br>") ; // donne : E
/* on peut aussi faire une boucle :*/
var i = 0;
for (i=0 ; i< monTableau.length ; i++) {
document.write (monTableau[i]);
document.write("<br>") ;
}
</script>
</body>
</html>
Etudions maintenant quelques propriétés et méthodes de l’objet Array :
Propriétés
• length : Cette propriété donne la taille du tableau. Nous l’avons utilisé dans la boucle
for de l’exemple précédent. Nous avons accédé à cette propriété par
monTableau.length (qui est dans ce cas égale à 5).
Méthodes
• concat(tableau) : cette méthode concatène deux tableaux.

• sort( ) : cette méthode trie le tableau.
• joint (séparateur) : cette méthode retourne une chaîne de caractères contenant les
éléments du tableau séparés par la chaîne séparateur.
• reverse( ) : retourne en résultat le tableau inversé.
• slice(début, fin ) : cette méthode retourne le sous tableau [début, fin-1] du tableau
donné.
79
<html>
<body>
var Tab1 = new Array ("B", "A", "D", "C", "E");

var Tab2 = new Array ("X","Y", "Z");
document.write(Tab1 + "<br>");
document.write(Tab2 + "<br>");
document.write(Tab1.concat(Tab2)); //concatène Tab2 à la fin de Tab1

document.write("<br>"); //le résultat est un nouveau tableau
document.write(Tab2.join("****")); // donne : X****Y****Z

document.write("<br>"); // le résultat est une chaîne de caractères
document.write(Tab2.reverse()); //donne : Z Y X
document.write("<br>"); //le résultat est stocké dans Tab2
document.write(Tab1.slice(1,3)); //donne : A D
document.write("<br>");
document.write(Tab1.sort()); // donne : A B C D E , le résultat est stocké dans Tab1
</script>
</body>
</html>
Le résultat de ce code dans le navigateur est le suivant :
3. L’objet String( )
Javascipt offre deux façons pour traiter les chaînes de caractères : la première en les
considérant comme un type simple (le type string). La deuxième utilise le modèle objet : on
80
dispose pour cela d’un objet nommée String( ) offrant des méthodes et des propriétés assez
nombreuses. Rappelons qu’une chaîne constante est délimitée soit par des doubles quottes ("
et "), soit par simples quottes (' et ').
Déclaration
Pour déclarer un nouveau objet de type String( ), voilà la syntaxe :
var maChaine = new String ( ) ;
Propriétés
• length : renvoie la longueur de la chaîne (i.e. : le nombre de caractères dans la

chaîne).
Méthodes
Voilà une liste de méthodes spécialisées dans la manipulation de ces chaînes de caractères :
• charAt(value) : on utilise cette méthode pour renvoyer le caractère de la chaîne, sur

laquelle la méthode est appelée, situé à la position spécifiée en paramètre. Attention,
les indices de position commencent à partir de 0.
• indexOf(string) : cette méthode renvoie la position, dans la chaîne de caractères sur
laquelle la méthode est appelée, de la première occurrence de la chaîne passée en
paramètre. Attention les indices commencent à partir de 0. S'il n'y a pas
d'occurrence, la valeur -1 est rendue.
• lastIndexOf(string) : fonctionne de même que la méthode précédente, à la
différence que c'est l'indice de la dernière occurrence qui est renvoyé.
• substring(value1,value2) : retourne la sous chaîne (de celle sur laquelle la méthode
est appelée) commençant à la position value1 et finissant à la position value2.
Attention, les indices de position commencent à partir de 0.
• toLowerCase( ) : met la chaîne considérée en minuscule. Attention, il y a effet de
bord (on ne retourne pas une nouvelle chaîne à partir de celle initiale, mais on
modifie cette dernière).
• toUpperCase() : de même, met la chaîne en majuscule.
81
<html>
<body>
var S = new String ( ) ;

S = "JAVAscript est UN langage de scripts" ;
document.write ("Considérons la chaîne suivante : " + S) ;
document.write ("<br />le caractère à la position 5 est : " + S.charAt(5)) ;
document.write ("<br />la première position du mot (script) est: " + S.indexOf("script")) ;
document.write ("<br />La dernière position du mot (script) est:"+S.lastIndexOf("script"));
document.write ("<br />La chaine entre les positions 2 et 5 est : " + S.substring(2,5)) ;
document.write ("<br />la chaîne en majuscules : " + S.toUpperCase( )) ;
document.write ("<br />La chaîne en minuscules : " + S.toLowerCase( )) ;
</script>
</body>
</html>
D'autres méthodes sont aussi utilisables sur les chaînes de caractères et permettent de
retourner du code HTML dans le but de modifier dynamiquement un document HTML :
• big( ) : celle-ci permet de renvoyer le code HTML réalisant la mise en taille

supérieure de la chaîne de caractères.
• small( ) : retourne le code HTML réalisant la mise en taille inférieure de la chaîne de
caractères.
• blink( ) : retourne le code HTML mettant la chaîne de caractères en caractères
clignotants.
• bold( ) : génère le code HTML de mise en gras de la chaîne.
• italics( ) : génère le code HTML de mise en italique de la chaîne de caractères.
• fontcolor(couleur) : retourne le code HTML de changement de couleur de la police.
La chaîne de caractères qu'on passe en paramètre doit contenir une définition de
couleur au format HTML
• fontsize(value) : de même, renvoie le bout de code HTML de changement de taille
de la police (value est un entier entre 1 et 7).
82
• link(url_string) : cette méthode, qui s'applique à une chaîne, rend le code HTML
définissant un lien hypertexte, dont le texte est la chaîne et l'URL la chaîne
url_string.
• anchor(name_string) : cette méthode, qui s'applique à une chaîne, rend le code
HTML définissant une étiquette, dont le nom (ou label) est contenu dans la chaîne de
caractères passée en paramètre.
• strike( ) : retourne le code HTML permettant de rayer la chaîne de caractères.
• sub( ) : renvoie le code HTML réalisant la mise en indice de la chaîne.
• sup( ) : de même, renvoie le code HTML réalisant la mise en exposant de la chaîne.
<html>
<body>
var S = new String ( ) ;

S = "JAVAscript est UN langage de scripts" ;
document.write (S.bold( )) ;
document.write ("<br />" + S.italics( )) ;
document.write ("<br />" + S.bold( ).italics( )) ;
document.write ("<br />" + S.fontsize(7).fontcolor("red")) ;
document.write ("<br />Cliquez ici pour aller à la page 2".link("page2.html")) ;
</script>
</body>
</html>
Notons que l’exemple précédent donne exactement l’équivalent du document HTML

suivant :
<html>
<body>
<b>JAVAscript est UN langage de scripts</b> <br />

<i>JAVAscript est UN langage de scripts</i> <br />
<i><b>JAVAscript est UN langage de scripts</b></i> <br />
<font size= 7 color = "red">JAVAscript est UN langage de scripts</font> <br />
<a href = "page2.html">Cliquez ici pour aller à la page 2</a>
</body>
</html>
83
4. L’objet Math( )
Vous disposez d’un seul objet nommé Math pour faire des opérations mathématiques. Voilà
quelques méthodes applicables à cet objet :
Méthodes
• Math.abs(value) : calcule la valeur absolue du nombre passé en paramètre.

• Math.sin(value) : calcule le sinus de l'angle passé en paramètre (en radian).
• Math.cos(value) : calcule le cosinus de l'angle passé en paramètre (en radian).
• Math.tan(value) : calcul la tangente de l'angle passé en paramètre (en radian).
• Math.acos(-1..1) : calcule l'arc-cosinus en radian du nombre passé en paramètre (ce
nombre est bien entendu compris entre -1 et 1).
• Math.asin(-1..1) : de même, retourne l'arc-sinus du nombre (entre 1 et -1) passé en
paramètre.
• Math.atan(-π/2.. π /2) : calcule l'arc-tangent (en radian) du nombre passé en
paramètre (entre - π /2 et π /2).
• Math.PI : retourne la valeur de π (~3.141592654).
• Math.E : retourne la valeur mathématique e (~2.71828).
• Math.exp(value) : calcule la valeur exponentielle de celle passée en paramètre.
• Math.log(value) : calcule le logarithme de la valeur passée en paramètre.
• Math.max(value1,value2) : retourne la plus grande des deux valeurs passées en
paramètres.
• Math.min(value1,value2) : retourne la plus petite des deux valeurs passées en
paramètres.
• Math.pow(value,exponent) : calcule la valeur de celle du premier paramètre (value)
élevée à la puissance de la valeur du second paramètre (exponent) :
Math.pow(value,exponent) == valueexponent.
• Math.random() : retourne une valeur aléatoire comprise entre 0 et 1.
• Math.floor(value) : retourne l'entier le plus proche par défaut de la valeur passée en
paramètre.
• Math.round(value) : retourne l'entier le plus proche de la valeur passée en
paramètre.
• Math.sqrt(value) : calcul la racine carrée de la valeur passée en paramètre.
84
<html>
<body>
document.write ("La racine de 15 est : " + Math.sqrt(15)) ;

document.write("<br>La valeur de PI est : " + Math.PI ) ;
document.write ("<br>Le cosinus de PI/4 est : " + Math.cos((Math.PI)/4)) ;
</script>
</body>
</html>
5. L’objet Image( )
Cet objet permet une gestion dynamique simple des graphiques insérés dans une page
HTML. Il permet de charger des images à travers le réseau pour pouvoir les afficher plus
tard. Ceci vous permet de modifier dynamiquement la source d’une image sans recharger la
page HTML (par exemple pour créer une animation).
Déclaration
Pour déclarer un objet de type Image, voilà la syntaxe :
var monImage = new Image( ) ;
Propriétés
L’objet Image possède plusieurs propriétés qui sont sémantiquement équivalentes aux
attributs de la balise <img /> de HTML :
• Src : c’est la source de l’image. c'est-à-dire l’adresse du fichier image.

• Height : hauteur de l’image en pixels.
• Width : largeur de l’image en pixels.
• Complete : valeur booléenne qui permet de tester si le chargement de l’image est
terminé.
85
<html>
<body>
var maPhoto = new Image( ) ;
maPhoto.Src = "image.jpg" ;
maPhoto.height = 60 ;
maPhoto.width = 60 ;
if (maPhoto.Complete == true) alert ("Le chargement de l’image est terminé)");
</script>
</body>
</html>
Dans cet exemple, l’image « image.gif » (qui est la source de l’objet Image nommé
maPhoto) est téléchargée, mais vous ne la verrez pas affichée à l’écran, car nous n’avons
pas demandé l’affichage. Complétons cet exemple pour pouvoir exploiter l’image
téléchargée.
<html>
<body>
//déclarer l’objet et définir ses propriétés:
var maPhoto = new Image( ) ;
maPhoto.Src = "image.jpg" ;
maPhoto.height = 60 ;
maPhoto.width = 60 ;
// Tester la fin du chargement :

if (maPhoto.Complete == true) alert ("Le chargement de l’image est terminé)");
//afficher à l’aide de la balise HTML <img />
document.write("<img src = " + maPhoto.Src + " width = 60 height = 60 />");
</script>
</body>
</html>
86
Regardez maintenons l’exemple suivant qui vous permet de cliquer sur un bouton pour
parcourir un tableau de 10 images. A la suite de chaque clique vous affichez une image
différente :
<html>
<body>
<img name = "photo" src = "0.gif" width = 60 height = 60 align = "right" />

var m=0;
var Photos = new Array(10) ;
for (i = 0; i < 10; i++) {
Photos[i] = new Image( );
Photos[i].Src = i + ".gif";
}
function changePhoto() {
m=(m+1)%10;
photo.src = Photos[m].Src;
}
</script>
<form>
<input type = "button" value = "Changer la Photo" onClick = "changePhoto( )" />
</form>
</body>
</html>
Pour essayer cet exemple, placez 10 images nommées respectivement « 0.gif », « 1.gif »,
« 2.gif »…et « 9.gif » dans le même répertoire de votre page d’essai. Comme vous pouvez
remarquer, nous avons déclaré un tableau nommé Photos. Chaque élément de ce tableau est
un objet de type Image( ). Nous avons aussi défini une image source pour chaque objet (en
utilisant une boucle for) (par exemple, pour l’élément Photos[3], la source est « 3.gif »).
Nous avons aussi créé une fonction changePhoto( ) qui a pour rôle le changement de la
source de la balise <img /> insérée au début de la page. En fin, un bouton est créé dans un
formulaire pour permettre d’appeler la fonction changePhoto( ) lors d’un clic.
Vous pouvez automatiser le changement des images sans avoir besoin de cliquer. Nous
verrons ceci avec les Timers plus tard dans ce chapitre.
b2) Les Objets du Navigateur
Lors du chargement du navigateur, un certain nombre d’objets, appelés objets du

navigateur, sont automatiquement créés et sont prêts à employer. Ces objets sont
organisés selon la hiérarchie suivante :
87
Plugins
elements
navigator
mimeType (==button)
(==text)
images
(==password
)
window document forms (==hidden)
(==checkbox
links
)
(==radio)
history (==textarea)
1. L’objet window
L’objet window est dans le niveau le plus haut dans cette hiérarchie. Il représente la fenêtre
du navigateur. Cet objet possède des propriétés de type simple (par exemple status qui est
de type string) et d’autres de type objet (par exemple document). Il possède aussi des
méthodes fort utiles.
Propriétés
• status : Il définit le message qui s’affiche sur la barre d’état de la fenêtre.

Considérons cette balise qui affiche une image : <img src = "MaPhoto.jpg"
onMouseOver = "window.status = ‘voici ma photo’ " onMouseOut =
"window.status = ‘’ " />. Lors du passage de la souris sur l’image, le texte « voici
ma photo » s’affiche sur la barre d’état, une chaîne vide le remplace lorsque la souris
quitte l’image. L’objet window possède des propriétés de type objets comme
navigator, history et document étudiés dans la suite.
Méthodes
• open([url][,nom][,caractéristiques]) : cette méthode permet de créer

dynamiquement une nouvelle fenêtre. Elle retourne une valeur qui est un objet sous
forme de fenêtre. Elle accepte plusieurs paramètres optionnels qui permettent de
personnaliser la fenêtre créée.
o url : l’adresse de la page à afficher dans cette fenêtre.
o Nom : c’est le nom qui sera utilisé dans les autres fenêtres comme valeur de
l’attribut «target» pour afficher un contenu dans cette fenêtre.
o Caractéristiques : chaîne de caractères qui contient plusieurs propriétés de
la page. voilà quelques caractéristiques possibles :
88
Valeurs
Caractéristiques Description
possibles
Menubar Yes/NO Existence de la barre de menu
Toolbar Yes/NO Existence de la barre d’outils
Status Yes/NO Existence de la barre d’état
Location Yes/NO Existence de la barre de localisation
Directories Yes/NO Existence de la barre des liens
scrollbars Yes/NO Existence des barres de défilement
Resizable Yes/NO Possibilité de redimensionner la fenêtre
Height Nombre en pixels Hauteur initiale de la page
Width Nombre en pixels Largeur initiale de la page
Distance entre l’écran et la bordure supérieure
Top Nombre en pixels
de la page
Distance entre l’écran et la bordure gauche de la
Left Nombre en pixels
page
• close ( ) : ferme la fenêtre.
/* l’instruction suivante crée une nouvelle variable de type fenêtre appelée maFenetre qui
affiche la page page2.html. La fenêtre est sans barre de menu et sans barre d’outils et à 200
pixels du haut de l’écran */
maFenetre = window.open("page2.html","F1", "menubar = no, toolbar = no, top = 200 ") ;
/* Pour fermer la fenêtre maFenetre utilisez cette commande:

maFenetre.close( ) ;
Pour fermer la fenêtre en cours utiliser la commande :

window.close( ) ; */
L’objet window possède des méthodes interactives qui permettent le dialogue avec
l’utilisateur :
• alert("message") : affiche une boite de dialogue avec un seul bouton (OK). Cette
boite contient le message passé en paramètre.
• confirm("message") : affiche une boite de dialogue avec deux boutons (OK et
Annuler). Cette boite contient le message passé en paramètre. La fonction confirm
retourne une valeur booléenne qui permet de capturer la réponse de l’utilisateur (par
exemple : « x = confirm ("Voulez-vous vraiment quitter ?") ; ». affiche une boîte
de dialogue avec deux boutons. Si l’utilisateur clique sur Ok alors la variable x reçoit
la valeur « true ». S’il clique sur « Annuler », x reçoit « false ». En testant la valeur
de x vous pouvez décider ce qui se passe par la suite.
• prompt( ) : cette méthode affiche une boîte de dialogue invitant l’utilisateur à entrer
du texte. Elle retourne une chaîne de caractères contenant la saisie de l’utilisateur.
89
Nom = prompt (" Entrez votre nom : ") ;

/* une boite s’affiche. La variable Nom contient ce que l’utilisateur entre */
2. L’objet navigator
Cet objet représente le navigateur utilisé pour afficher la page. On l’utilise généralement
pour savoir quelques informations sur le navigateur de l’utilisateur. Voici quelques
propriétés utiles :
• appName : contient le nom du navigateur utilisé lors de l’affichage de la page.

• appVersion : contient la version du navigateur.
• platform : contient la plateforme utilisée.
• plugins[] : tableau de tous les plugins installés.
• mimetypes[] : tableau de tous les types mimes reconnu par le navigateur.
3. L’objet history
Cet objet représente l’historique des pages visitées par l’utilisateur. Il possède des méthodes
qui vous permettent de naviguer dans cet historique (simuler ce qu’on peut faire avec les
boutons Précédent et Suivant du navigateur) :
• back( ) : cette méthode affiche la page précédente.

• forward( ) : cette méthode affiche la page suivante.
• go(nombre) : affiche la page de l’historique dont le numéro est nombre. Ce nombre
peut être négatif. Par exemple go(-1) affiche la page précédente (équivalente à
back()), go(-2) affiche la page avant la précédente, go (3) affiche la troisième page en
avant.
• go("adresse") : affiche la page dont l’adresse est passée en paramètre (exactement
comme si vous la tapez dans la barre d’adresse).
<a href = "javascript :window.history.back( )">Retour à la page précédente </a>

<a href = "javascript :window.history.go(1)">Aller à la page suivante </a>
<a href = "javascript :window.history.go('http://www.yahoo.com')">allez à yahoo </a>
4. L’objet document
Cet objet représente le document de la page Web. A partir de cet objet on peut accéder aux
différents éléments de la page. Par exemple, à partir de l’objet document on peut accéder
aux objets images[], links[] et forms[] que nous étudierons dans la suite.
Parmi les méthodes les plus utilisées de l’objet document on trouve :
• open( ) : elle permet d’ouvrir le document pour pouvoir écrire dynamiquement. Par
exemple, après la création dynamique d’une nouvelle fenêtre, vous pouvez créer son
contenu dynamiquement aussi, mais avant, vous devez ouvrir le document par la
méthode document.open( )
• close( ) : permet de fermer le document après la fin de l’écriture.
90
L’exemple suivant reprend l’exemple de l’ouverture d’une nouvelle fenêtre (voir l’objet
window) pour vous montrer comment créer une nouvelle fenêtre et créer son contenu
dynamiquement.
<html>
<body>
<a href = "javascript:Ouvrir( ) ;"> Cliquez ici pour ouvrir une nouvelle fenêtre </a>
function Ouvrir( ) {
maFenetre = window.open( ) ;
maFenetre.document.open( ) ;
maFenetre.document.write("Vous avez créer une fenêtre et son contenu");
maFenetre.document.close( ) ;
}
</script>
</body>
</html>
5. L’objet images[]
C’est un tableau qui contient toutes les images dans la page HTML. La première image dans
la page est représentée par document.images[0], la deuxième image est
document.images[1]. Par exemple, pour changer la source de la quatrième image dans la
page, vous pouvez faire : document.images[3].Src = "MonImage.gif". Tous les attributs de
la balise <img /> sont accessibles de cette manière.
6. L’objet links[]
C’est un tableau qui contient tous les liens hypertextes dans la page HTML. Le premier lien
est links[0], le deuxième est links[1] et ainsi de suite. On peut accéder à tous les attributs
d’un lien. Par exemple, la destination du premier lien peut être récupérée par l’instruction :
document.links[0].href
7. L’objet forms[]
C’est un tableau qui permet l’accès à tous les formulaires d’une page HTML. Le premier
formulaire est document.forms[0], le deuxième est document.forms[1] et ainsi de suite.
8. L’objet elements
Etant donné un formulaire dans un document, le tableau elements vous permet d’accéder à
tous les éléments de ce formulaire (boutons, zones de texte, zones cachées, zones de mots
de passe, checkbox , boutons radio, bouton submit, bouton reset,…). Ces éléments sont
classés dans ce tableau suivant l’ordre d’apparition dans le document.
91
4) Manipulation des formulaires

Il est important de rappeler ici que le contrôle des formulaires est l’un des points forts du
langage javascript si ce n’est pas sa première raison d’exister.
Dans la section suivante, vous apprendrez comment accéder aux différents éléments d’un
formulaire, et comment modifier ou récupérer des informations de ces éléments. Vous
verrez aussi comment programmer les principaux événements de chaque contrôle.
a) L’objet form
Il correspond à la balise <form> en HTML. Cet objet possède les propriétés et les méthodes
suivantes :
Propriétés
• name : correspond à l’attribut name de la balise <form>.

• action : contient l’adresse du script à exécuter lors de l’envoi du formulaire.
• methode : méthode d’envoi du formulaire ( = get ou post).
• enctype : type d’encodage du formulaire.
• target : le cadre de destination du retour du formulaire (dans le cas où la page
contient plusieurs cadre).
Méthodes
• submit : cette méthode déclenche l’envoi du formulaire (simule le clic sur le bouton
d’envoi).
• reset : cette méthode réinitialise le formulaire (simule le clic sur le bouton de
réinitialisation).
Evénements supportés
• onSubmit : cet événement survient lors de l’envoi du formulaire (par un clic sur le
bouton d’envoi). Il permet de programmer des actions de contrôle du formulaire
avant de l’envoyer au serveur. Par exemple, si vous souhaiter que les utilisateurs
remplissent un champ obligatoire, vous pouvez programmer une fonction nommée
par exemple tester( ) et vous l’appelez lors de l’envoi.
• onReset : cet événement survient lors du clic sur le bouton de réinitialisation du
formulaire. Ainsi vous pouvez programmer ce bouton. Par exemple, si l’utilisateur
fait un clic sur ce bouton par erreur, vous pouvez afficher un message lui demandant
de confirmer ou annuler son action.
92
<html>
</head>
function tester( ) {
//x reçoit le texte de la zone de texte du formulaire :

x = document.myForm.text1.value ;
if (x == "") { alert(‘vous avez laisser le champ texte vide’) ;
return false
}
else return true ;
}
function confirmer( ) {
// une boîte de dialogue s’affiche, x reçoit true si on clique sur Ok et false sinon :
x = confirm ("Voulez vous vraiment réinitialiser le formulaire?") ;
if (x == true) return true ;

else return false ;
}
</script>
</head>
<body>
<form name = "myForm" action = "page2.php" method = "post" onSubmit = "return tester(
)" onReset = "return confirmer( )>
<input type = "text" name = "text1" />

<input type = "submit" value = "Envoyer" />
<input type = "reset" value = "Recommencer" />
</form>
</body>
</html>
b) Les éléments du formulaire
Comme nous avons vu plus haut, tous les éléments du formulaire sont regroupés dans un
tableau nommé elements[]. Dans ce paragraphe nous étudierons les propriétés, méthodes et
événements supportés par chaque élément, et dans le paragraphe qui suit nous verrons
comment accéder à ces éléments pour les exploiter.
1. Les zones de textes
93
Elles correspondent à l’élément HTML <input type = "text">. Elles supportent plusieurs
propriétés correspondantes aux attributs de cette balise HTML. Rappelons ici les plus
importantes :
Propriétés
• name : le nom de la zone de texte (correspond à l’attribut name de la balise

<input>)
• value : C’est le texte saisi dans la zone de texte. C’est la propriété la plus utilisée
pour ce type de champs.
• defaultvalue : C’est le texte par défaut de cette zone. Utile dans le cas de
réinitialisation.
• size : la taille de la zone de texte.
• maxlength : nombre maximal de caractères acceptables par la zone.
• disabled : utilisez cette propriété si vous voulez désactiver la zone.
• readOnly : la zone est accessible pour la lecture seulement. Pas d’écriture !
• class : dans le cas où vous appliquez plusieurs classes de style, vous pouvez changer
de classe dynamiquement en accédant à cette propriétés.
• style : Si vous appliquez des styles « en ligne » dans la balise de cet élément, vous
pouvez les modifier en accédant à ces propriétés.
Méthodes
Parmi les méthodes acceptées par les zones de texte il y a :
• focus( ) : cette méthode donne le focus à l’objet qui l’appelle. Par exemple, si vous
écrivez « document.myForm.text1.focus( ) », alors la zone de texte « text1 » reçoit
le focus, c'est-à-dire, elle est activée. Vous trouverez le curseur clignotant dans cette
zone vous invitant à saisir du texte.
• blur( ) : cette méthode fait l’inverse de focus( ). C'est-à-dire, il enlève le focus de
l’objet appelant.
Evénements
Les zones de texte détectent plusieurs événements. Dans la pratique on se sert beaucoup des
événements suivants :
• onFocus : détecte la prise du focus.

• onBlur : détecte la perte du focus.
• onChange : détecte le changement du texte dans la zone du texte.
2. Les zones de mots de passe
Elles correspondent à l’élément HTML <input type = "password">. Elles se comportent

exactement comme les zones de texte sauf que les caractères saisis se transforment en « * »
et qu’on ne peut pas copier leur contenu. Elles possèdent les mêmes propriétés, méthodes et
événements que les zones de texte.
3. Les zones cachées
94
Elles correspondent à l’élément HTML <input type = "hidden">. Ce champ qui permet
d’envoyer des informations sans que le visiteur s’en aperçoive (par exemple, un email,
l’heure, des cookies, des informations sur le browser…), n’apparaît pas à l’écran. Donc
toutes les méthodes et tous les événements concernant son affichage sont sans effet. Les
propriétés les plus utilisées sont name, value et defaultvalue.
4. Les zones de texte muli-lignes
Elles correspondent à l’élément HTML <textarea> qui est utilisé pour permettre à
l’utilisateur de saisir un texte assez long (plusieurs lignes). Voilà les propriétés les plus
utilisées :
Propriétés
• name : nom de la zone du texte.

• rows : nombre de lignes de texte permis.
• cols : nombre de caractères par ligne.
• disabled : utilisée pour désactiver la zone (zone grisée, inactive).
• readOnly : la zone est accessible en lecture seule.
• class : la classe de feuille de style.
• style : Vous pouvez changer le style « en ligne » avec cette propriété.
Méthodes
• focus() : donne le focus à la zone.

• blur (): enlève le focus.
Evénements
• onFocus : détecte la réception du focus.

• onChange : détecte le changement du texte.
• onScroll : détecte le défilement de la zone du texte (à l’aide des scrollbars).
5. Les cases à cocher :
Elles correspondent à l’élément HTML <input type = "checkbox"> qui permettent à

l’utilisateur d’effectuer plusieurs choix simultanément.
Propriétés
En plus des propriétés name, disabled, readOnly, class et style, les cases à cocher
acceptent la propriété importante suivante :
• checked : cette propriété permet de détecter si la case à cocher est cocher ou non. On
peut aussi modifier cette propriété dynamiquement.
Méthodes
95
Les cases à cocher acceptent quelques méthodes. Voilà les principales :
• focus( ) : donne le focus à la case.

• blur( ) : enlève le focus.
• click( ) : simule un clic sur la case à cocher.
Evénements

• onClick : détecte le clic sur la zone.
6. Les boutons radio
Elles correspondent à l’élément HTML <input type = "radio">. Dans la pratique, on définit
un groupe de boutons radio. Les boutons d’un même groupe ont tous le même nom
(l’attribut name). Ainsi on permet à l’utilisateur un seul choix parmi plusieurs offerts.
Les boutons radio acceptent les mêmes propriétés, méthodes et événements que les cases à
cocher.
7. Les boutons
Ils correspondent à l’élément HTML <input type = "button"> qui crée un bouton cliquable
dans la page. Voilà les principales propriétés des boutons :
Propriétés
Les boutons acceptent toutes les propriétés des zones de texte sauf que la signification de
quelques-unes est un petit peu différente. Par exemple, value signifie ici la libellée qui
s’affiche sur le bouton, maxlength signifie la longueur maximale de cette libellée.
Méthodes
• focus( ) : donne le focus au bouton.

• blur( ) : enlève le focus.
• click( ) : simule un clic sur le bouton.
Evénements

• onClick : détecte le clic sur le bouton.
Les boutons submit et reset sont des simples boutons mais un peu spéciaux car les
événements onClick de ces boutons sont préprogrammés (ils engendrent l’envoi (resp. la
réinitialisation) du formulaire).
8. Les listes d’options
96
Elles correspondent à l’élément HTML <select>. Cette balise définit la zone de la liste.
Chaque ligne de la liste est créée à l’aide de la balise <option> insérée entre les balises
<select> et </select>.
Les listes d’options possèdent plusieurs propriétés. Nous citons ici les principales :
Propriétés
• name : nom de la liste.

• size : nombre de lignes à afficher simultanément (par défaut size = 1).
• multiple : cette propriété autorise la sélection de plusieurs lignes simultanément.
• disabled : la liste est désactivée (grisée).
• class : classe de feuille de style.
• style : style (en ligne) de la liste.
• selectedIndex : l’indice de la ligne sélectionnée (les indices commencent à 0).
• options : c’est un tableau regroupant toutes les options de la liste.
Le tableau options possède plusieurs propriétés :
• length : c’est la longueur du tableau (correspond au nombre d’options de la liste).

• value : valeur d’une ligne (i.e. la valeur de l’attribut value de la balise <option>.
• text : c’est la libellée d’une ligne de la liste (i.e. le texte entre <option> et </option>).
Méthodes
Plusieurs méthodes sont associées aux listes :
• add() : cette méthode ajoute une nouvelle option à la liste.

• remove() : cette méthode supprime une option de la liste.
• focus() : cette méthode donne le focus à la liste.
• blur() : enlève le focus de la liste.
Evénements
Parmi les événements reconnus par les listes d’options on trouve :
• onChange : détecte la sélection d’une nouvelle ligne.

• onFocus : détecte la prise de focus.
• onBlur : détecte la perte de focus.
c) Manipulation des éléments du formulaire

Pour accéder aux éléments d’un formulaire en accède d’abord au formulaire puis à l’élément
concerné.
Considérons cet exemple :
97
Vous trouverez ci-après le code qui donne ce résultat. Nous avons créé un formulaire
nommé myForm à l’aide de la balise <form>. Plusieurs éléments du formulaire sont aussi
créés. Tous ces éléments sont des objets javascript. Vous pouvez les manipuler à l’aide de
javascript.
98
<html>
<body>

<form name = "myForm" action = "page2.php" method = "post">
<pre>

Entrez votre nom: <input type = "texte" name = "nom" />

Entrez votre prénom: <input type = "text" name = "prenom" />
Entrez votre mot de passe <input type = "password" name = "pass" />
< !-- les boutons radio d’un même groupe possèdent tous le même nom -->
Votre sexe :
<input type = "radio" name = "sexe" value = "H" /> Homme
<input type = "radio" name = "sexe" value = "F" /> Femme
< !-- chaque case à cocher à son propre nom -->
Vos loisirs:
<input type = "checkbox" name = "choix1" value = "s" /> Sport
<input type = "checkbox" name = "choix2" value = "l" /> Lecture
<input type = "checkbox" name = "choix3" value = "m" /> Musique
Saisissez ici un commentaire :

<textarea name = "commentaire" cols = 20 rows = 5 >
</textarea>
<input type = "submit" value ="Envoyer"/> <input type = "reset" value

="Recommencer"/>
</pre>
</form>
</body>
</html>
Exemple1 :
99
Dans cet exemple vous apprendrez comment accéder à la zone du texte Nom pour afficher
le texte saisi. Pour cela, il faut accéder d’abord au formulaire myForm, puis à la zone du
texte Nom.
1) Pour accéder au formulaire, il existe trois façons :
a) document.forms[0]
b) document.forms["myForm"]
c) document.myForm
Les deux premières façons utilisent le tableau forms qui regroupe tous les
formulaires du document. Notre formulaire étant le premier, son indice est alors 0.
La deuxième méthode utilise le nom du formulaire au lieu de l’indice. La troisième
méthode n’utilise pas le tableau forms. Il utilise le nom du formulaire pour accéder
directement à celui-ci.
2) Une fois accédé au formulaire, il nous reste d’accéder à l’élément du formulaire, dans
notre cas la zone de texte. Tous les éléments du formulaire sont regroupés dans le
tableau elements[] associé à ce formulaire. Notre zone de texte (celle du Nom) est
document.myForm.elements[0], la deuxième (celle du prénom) est
ème
document.myForm.elements[1] , la dernière case à cocher, qui est le 8 élément
du formulaire est document.myForm.elements[7], et ainsi de suite.
Il existe d’autres méthodes pour accéder aux éléments. Prenons l’exemple de la zone Nom :
a) document.myForm.elements[0]
b) document.myForm.elements["Nom"]
c) document.myForm.Nom
Nous avons utilisé ici seulement la troisième façon d’accès au formulaire. On pourrait faire
le suivant : document.forms[0].elements[0] ou document.forms[0].elements["Nom"].
3) Une fois accédé à l’élément voulu, on lit ou on modifie la propriété concernée. Dans
notre cas, nous voulons le texte saisi, c'est-à-dire la propriété value de la zone de
texte : elle correspond à document.forms[0].elements[0].value ou tout simplement
document.myForm.Nom.value.
Par exemple, pour afficher ce texte dans une alert, on écrit :
alert(document.myForm.Nom.value).
Dans l’exemple suivant nous reprendrons l’exemple précédent, mais en ajoutant une
fonction javascript, appelée dans l’événement onSubmit du formulaire et dont le rôle est de
créer une nouvelle fenêtre qui affiche toutes les informations saisies.
100
<html>
<body>
function Afficher( ) {
maFenetre = window.open( ) ;
maFenetre.document.open( ) ;
maFenetre.document.write(document.myForm.nom.value + "<br />") ;

maFenetre.document.write(document.myForm.prenom.value + "<br />") ;
maFenetre.document.write(document.myForm.pass.value + "<br />") ;
//L est la longueur du tableau des boutons radio
L = document.myForm.sexe.length ;
for (i =0 ; i < L ; i++){

if (document.myForm.sexe[i].checked ==true) {
maFenetre.document.write(document.myForm.sexe[i].value + "<br />") ;
}
}
if (document.myForm.choix1.checked ==true) {
maFenetre.document.write(document.myForm.choix1.value + "<br />") ;
}
}
}
maFenetre.document.write(document.myForm.commentaire.value + "<br />") ;
</script>
</body>
</html>
101
Pour tester cet exemple, ajoutez ce bout de code javascript dans l’exemple précédent.
Modifiez la première ligne du formulaire pour programmer l’appel de la fonction lors de la
soumission du formulaire. Voilà la nouvelle ligne :
<form name = "myForm" action = "page2.php" method = "post" onSubmit = "Afficher()">
Exemple 2 :
Considérons un formulaire qui contient une liste d’options :
Voilà le code nécessaire à la création de ce formulaire avec du code javascript pour le

manipuler :
102
<html>
<head>
function Ajouter ( ) {
document.myForm.pays.add(document.myForm.text1.value)
}
function Supprimer( ) {
document.myForm.pays.remove(document.myForm.pays.selectedIndex) ;
}
function Afficher ( ) {
// L est l’indice de la ligne sélectionnée:

L = document.myForm.pays.selectedIndex ;
//afficher le texte de cette ligne (d’indice L) :

alert(document.myForm.pays[L].text) ;
}
</script>
</head>
<body>
<form name = "myForm">
<pre>


Sélectionnez votre pays: <select name = "pays" onChange = "Afficher( )">
<option value = "M" selected ="selected" >Maroc</option>
<option value = "A" >Algérie</option>
<option value = "T" >Tunisie</option>
<option value = "L" >Libie</option>
</select>
<input type = "text" name = "text1" />


<input type = "button" name ="ajouter" value = "Ajouter à la liste" onClick = "Ajouter( )" />

<input type = "button" value = "Supprimer l’option sélectionnée" onClick = "Supprimer( )" />
</pre>
</form>
</body>
</html>
103
d) L’utilisation du mot clés this
Comme vous l’avez certainement remarqué, on utilise un chemin très long pour accéder à
un élément du formulaire. On appelle d’abord l’objet document, puis on accède au
formulaire, puis enfin en appelle l’objet voulu. Il existe une méthode plus simple qui permet
de donner un chemin relatif (c'est-à-dire relativement à l’objet en cours). L’objet encours est
désigné par le mot clé this.
Reprenons l’exemple précédent. Nous avons programmé un appel à la fonction Afficher( )

dans l’événement onChange de la liste pays. On pourrait aboutir au même résultat sans
créer cette fonction comme suit :
<select name = "pays"

onChange = "alert(document.myForm.pays[document.myForm.pays.selectedIndex ].text">
Toute cette deuxième longue ligne est pour accéder au texte de la ligne sélectionnée de la
liste pays. Remarquez que le chemin document.myForm.pays est parcouru deux fois.
Puisque on est en train d’utiliser l’événement onChange de cette liste (on est toujours dans
la même balise), la liste pays est désignée par le mot clé this. Dans ce cas, tout le chemin
document.myForm.pays sera simplifié. On le remplace tout simplement par this. On
pourrait donc obtenir le même résultat que précédemment on écrivant :
<select name = "pays"

onChange = "alert(this.[this.selectedIndex ].text " >
Supposons maintenant qu’à partir d’un élément du formulaire on veut accéder à un autre
élément dans le même formulaire. Dans ce cas, on part du premier élément, on monte au
niveau formulaire par appel de l’objet form, puis on accède au deuxième élément suivant la
forme suivante : this.form.element2.
Complétons l’exemple précédent. Supposons par exemple que nous voulons désactiver le
bouton «Ajouter» dans l’événement onFocus de la zone de texte texte1. On modifie la
balise créant cette zone de texte comme suit :
<input type = "text" name = "text1" onFocus = "this.form.Ajouter.disabled = true" />
Quand la zone de texte reçoit le focus, le bouton Ajouter est désactivé. Dans notre cas, this
réfère à la zone de texte, this.form réfère au formulaire qui contient la zone, c'est-à-dire le
formulaire myForm. Le reste du chemin est habituel : on peut utiliser plusieurs méthodes
pour arriver au bouton, soit par son nom comme nous avons fait dans ce cas, soit par le
tableau elements (par exemple : this.form.elements["Ajouter"]). Nous avons affecté ici la
valeur true à la propriété disabled. Il faut donc prévoir de réactiver le bouton dans un autre
événement.
104
5) Les timers
Les timers permettent de déclencher des actions au bout d’un certain laps de temps. On
peut les manipuler à l’aide des méthodes suivantes de l’objet window :
• setInterval( ) : Cette méthode déclenche l’exécution périodique d’une expression ou

d’une fonction javascript (dont le nom est passé en paramètre). Deux syntaxes sont
possibles :
 X = maFenetre.setInterval("ExpressionJS", msec) ;
 X = maFenetre.setInterval("FonctionJS", msec, arg1, arg2,…) ;
maFenetre est une variable objet de type window pour laquelle le timer est
associée. On peut l’omettre ou utiliser le mot clé window s’il s’agit de la fenêtre en
cours. ExpressionJS est une expression Javascript dont l’exécution se répète au bout
d’un nombre de millisecondes spécifié par le nombre msec. Dans la deuxième
syntaxe, FunctionJS est une fonction javascript dont l’exécution se répète au bout
de mesc millisecondes. arg1, arg2,...sont les arguments de la fonction FunctionJS
(en cas de besoin).
• clearInterval( ) : cette méthode permet de désactiver un cycle créé à l’aide de la

méthode setInterval( ). La syntaxe est la suivante :
maFenetre.clearInterval(X) ;
• setTimeOut( ) : cette méthode déclenche un minuteur, à l’issu du quel une

expression (ou une fonction) javascript passée en paramètre est exécutée une seule
fois. Deux syntaxes sont possibles :
 X = maFenetre.setTimeOut("ExpressionJS", msec) ;
 X = maFenetre.setTimeOut("FonctionJS", msec, arg1, arg2,…) ;
• clearTimeOut( ) : Cette méthode permet de désactiver un minuteur créé à l’aide de

setTimeOut( ). La syntaxe est la suivante :
maFenetre.clearTimeOut(X) ;
Exemple 1:
105
<html>
<body>
// créer une nouvelle fenêtre :
fenetreA = window.open( ) ;
fenetreA.document.open( );
fenetreA.document.write("Dans 10 secondes, un message va s’afficher une seule fois:");
//les timers dans la nouvelle fenêtre :

X = fenetreA.setTimeout("alert('Bonjour cher utilisateur')",10000);
function message( ){
alert("Ce message s'affiche toutes les 2 secondes...");
}
//timers dans la fenêtre principale:

Y = window.setInterval("message()",2000) ;
</script>
<input type = "button" value = "Arrêter Messages" onClick="window.clearInterval (Y)" />
</body>
</html>
Exemple 2 :
L’exemple suivant crée une simple animation en alternant l’affichage de plusieurs images :
106
<html>
<body>
<img name = "photo" src = "0.gif" width = 60 height = 60 align = "right" />

var m=0;
var Photos = new Array(3) ;
for (i = 0; i < 3; i++) {
Photos[i] = new Image( );
Photos[i].Src = "photo" + i + ".jpg"; // photo1.jpg, photo2.jpg et photo3.jpg
}
function changePhoto() {
m=(m+1)%3;
photo.src = Photos[m].Src;
}
//un timer pour alterner l’affichage des photo toutes les 1000 millisecondes:
X = setInterval("changePhoto( )", 1000) ;
</script>
</body>
</html>
107
108
Partie 3
Scripts côté serveur
109
110
Chapitre 4 : Débuter avec PHP
PHP est un langage de script côté Serveur. Il permet d’écrire des scripts qui s’exécutent
sur le serveur web afin de générer des pages HTML qui seront envoyés par la suite vers le
navigateur. Ainsi, le navigateur ne reçoit que le résultat des scripts, le code source n’est pas
donc accessible aux utilisateurs.
PHP naît avec le site de Rasmus Lerdof. Il s’agit d’une page personnelle qui permet de
conserver une trace des utilisateurs. Pour répondre aux demandes des utilisateurs, Lerdof a
mis en ligne la version 1.0 du langage PHP (à l’époque Personal Home Page).
A la surprise de son auteur, PHP devient rapidement très populaire. Les utilisateurs de son
site commencèrent à envoyer leurs suggestions pour améliorer le langage et c’est ainsi que
Rasmus Lerdof a écrit la version 2 de PHP qui contient déjà des fonctionnalités puissantes.
Une communauté de développeurs se crée autour de PHP. De nouvelles fonctions voient le

jour, des bogues sont résolues. Rasmus décide alors de créer la version 3.0 et demande à
plusieurs programmeurs de le joindre sur ce projet, on cite ici par exemple Zeev Suraski et
Andi Gutmans qui ont apporté des fonctions essentielles. Le 6 juin 1998 la version 3.0 de
PHP (cette fois-ci Hypertext PreProcessor) sort.
PHP3 était un langage interprété. Mais depuis la version 4, PHP devient un langage compilé.
A partir de la version 5, PHP s’est orienté vers la programmation orienté objet. Le
développement et l’amélioration n’a jamais cessé. Actuellement, une très bonne partie du
marché est réservée à PHP. Des grandes sociétés de renommée (telles que Amazon,
Facebook,…) ont développé leurs sites autour du PHP. Pour toute documentation sur PHP,
visitez le site officiel : www.php.net
1) Commencer avec PHP

Désormais, vous aurez besoin d’un Serveur Web. Si dans les chapitres précédents vous
pouviez voir le résultat de votre code par une simple ouverture du fichier par le navigateur,
ceci n’est pas possible avec le code PHP. En effet, c’est le serveur web qui se charge
d’interpréter le code PHP et il envoie le résultat au navigateur sous forme de fichier HTML.
Le navigateur affiche ce résultat par suite. On parle ici d’une communication Client/Serveur
qui se déroule selon le modèle suivant :
1) le navigateur demande une page web auprès du serveur ;

2) Le serveur traite le fichier demandé (qui peut contenir du code PHP), il le traite, puis
il envoie le résultat au navigateur ;
3) Le navigateur reçoit une page HTML. Il interprète le code HTML, CSS, Javascript…
et affiche la page.
Il arrive souvent que le serveur web ait besoin d’une autre application (par exemple un
SGBD).
111
Dans ce cours nous allons utiliser le serveur Web le plus répondu dans le monde : le serveur
Apache. C’est un serveur open source très performant. Il s’intègre parfaitement avec PHP et
le SGBD MySQL, un autre fameux logiciel open source.
Vous pouvez bien sûr télécharger et installer tous ces logiciels séparément. Mais, il est plus
facile de télécharger un package préconfiguré qui rassemble déjà le tout (par exemple Wamp
ou EasyPHP).
a) Installation de EasyPHP
EasyPHP est un package qui contient les logiciels les plus essentiels pour le fonctionnement
de vos applications web :
1) le serveur Web Apache ;

2) Le moteur PHP ;
3) Le SGBD MySQL ;
4) L’outil PhpMyAdmin, une interface web qui permet d’administrer graphiquement le
SGBD MySQL.
Dans la suite de ce cours, nous allons utiliser EasyPHP Devserver. Vous pouvez le
télécharger librement depuis son site officiel : www.easyphp.net.
Une fois installé, un nouveau dossier pour « EasyPHP Devserver» est créé dans le dossier
« Programmes ». Dans ce dossier, Vous trouverez un sous dossier appelé «eds-WWW » (le
nom peut changer légèrement d’une version à l’autre). Ce dossier s’appelle le dossier public.
C’est là où vous allez mettre toutes les pages web que vous voulez mettre à disposition des
navigateurs. Ainsi, quand le serveur web démarre, toute page web se trouvant dans le
dossier public sera accessible par tout ordinateur connecté au votre.
b) Configuration de PHP
Le PHP inclus dans easyPHP est préconfiguré et, Généralement, vous n’aurez pas besoin de
modifier cette configuration. Mais, si vous le désirez pour une raison ou l’autre, sachez que
toutes les options de configuration de PHP se trouvent dans un fichier nommé PHP.ini qui
se trouve dans le dossier d’installation. Ce fichier est bien commenté. Vous pouvez le lire
facilement. Un texte qui suit un « ; » est un commentaire (donc ignoré). les entêtes de
sections sont entre crochets comme ça :[section] (ils sont ignorés aussi). Le reste du fichier
est sous forme : directive = valeur. Il vous reste seulement de reconnaître la bonne
directive à modifier et la bonne valeur.
Si vous modifiez le fichier php.ini, les nouvelles valeurs ne prennent effet qu’après
redémarrage du serveur Web.
c) Démarrage et Arrêt du Serveur
Il vous reste seulement de démarrer le serveur. Dans le menu Démarrer, lancez EasyPHP.
Sur la barre des tâches, cliquez sur l’icône d’EasyPHP pour accéder au tableau de bord qui
vous permettra de faire toutes les taches d’administration de votre environnement.
112
A partir de ce tableau de bord, vous pouvez faire toutes les taches dont vous
aurez besoins : démarrer ou arrêter les serveurs web et les serveurs de bases de
données, gérer plusieurs installations de PHP et des différents serveurs et
choisir laquelle utiliser, accéder à tous les paramètres de configuration des
différents serveurs, installer et gérer d’autres modules complémentaire,
accéder à PhpMyAdmin pour administrateur la base de données, Créer des
alias pour les dossiers web et sauvegarder leurs adresses comme Répertoire de
travail ce qui permet d’accéder au fichiers de votre site en mode modification
ou en mode affichage. Bref, c’est super pratique !
113
d) Accès aux pages Web
Si vous voulez mettre une page web à disposition des navigateurs, il vous suffit de la mettre
dans le dossier public. Ainsi, elle sera accessible par tout ordinateur qui peut effectuer une
connexion http au votre.
Vous pouvez faire les tests en accédant à vos pages via le même ordinateur. Pour cela,
lancez votre navigateur préféré et dans la barre d’adresse tapez : http://localhost:8080 ou
tout simplement localhost :8080. Ceci indique au navigateur de se connecter à un serveur
web qui se trouve sur le même ordinateur. Vous pouvez aussi taper, au lieu de localhost,
l’adresse IP de l’ordinateur local à savoir 127.0.0.1 :8080. Ceci donne le même résultat : le
navigateur essaye de chercher un serveur web sur la même machine.
Remarque : le nombre 8080 est le numéro du port utilisé par l’installation d’Apache de
EasyPHP Devserver. Vous pouvez changer ce port dans la configuration d’Apache à partir
du tableau de bord. Universellement, on utilise le port 80. Dans ce cas, il n’est pas nécessaire
d’ajouter le numéro de port dans l’adresse : il suffit de taper : http://localhost.
Pour se connecter depuis un autre ordinateur, il faut taper dans la barre d’adresse du
navigateur le nom de l’ordinateur qui contient le serveur web ou bien son adresse IP
(localhost et 127.0.0.1 ne marchent plus). Par exemple, si le nom de l’ordinateur est poste1,
vous devez taper dans la barre d’adresse : http://poste1, ou tout simplement //poste1. Si
vous connaissez l’adresse IP du poste1, vous pouvez l’utiliser aussi.
Remarque
Si une page portant le nom index.php (ou .html) se trouve dans le répertoire WWW, elle
s’affiche si vous ne précisiez pas le nom de la page demandée. Ainsi, vous pouvez par
exemple, nommer votre page d’accueil, index.php ou index.html.
e) Résumé des tâches à faire pour commencer :

1) Télécharger EasyPHP Devserver (le site officiel est www.easyphp.org). C’est gratuit.
2) Installer EasyPHP Devserver (il contient les composants nécessaires : Apache, PHP,
MySQL et PhpMyAdmin).
3) Vous pouvez (si vous voulez) modifier la configuration de PHP en modifiant le
fichier php.ini.
4) Démarrer EasyPHP Devserver depuis le menu Démarrer (et vérifier que les
serveurs sont en marche).
5) Mettre votre site dans le répertoire WWW (créer par exemple une page d’accueil
nommée index.html et copier là dans WWW).
6) Lancer le navigateur et taper dans la barre d’adresse http://localhost:8080.
114
f) Exemples de scripts PHP
1) Ouvrez un nouveau fichier texte simple (dans le Bloc Note par exemple) et tapez le
code suivant :
<html>
<body>
<?php
echo "C’est mon premier script PHP" ;
?>
</body>
</html>
Listing 1 : script1.php
2) Enregistrez ce fichier dans le répertoire public sous le nom script1.php.

3) Vérifiez que EasyPHP est démarré.
4) Lancez le navigateur et tapez dans la barre d’adresse : //localhost/script1.php
La figure suivante affiche le résultat :
5) Toujours dans le navigateur web, visualisez le code source de la page Web affiché.
Voilà ce que vous obtenez :
<html>
<body>
C’est mon premier script PHP
</body>
</html>
Listing 2 : source HTML généré par le script1.php
115
Explication
Comme vous pouvez le remarquer, le listing1 commence par les balises <html> et <body>
et se termine par </body> et </html>. Il s’agit en fait d’une page HTML normale. La seule
différence c’est qu’un script PHP est intégré dans cette page HTML (c’est le bout de code qui
commence par « <?php » et se termine par « ?> ». Remarquez aussi qu’on a utilisé
l’extension « .php » au lieu de « .html ».
Quand vous tapez l’adresse de la page à afficher, dans notre cas le fichier script1.php, le
navigateur web demande ce fichier auprès de serveur web. Ce dernier traite le fichier
script1.php et génère en mémoire un nouveau fichier qui va être envoyé vers le navigateur.
Le nouveau fichier est composé comme suit :
 Tout texte qui ne fait pas parti d’un script PHP (i.e. : n’est pas encadré par <?php et
?>) est écrit tel quel.
 Tout script php est traité. Seulement le résultat du traitement est écrit dans le
nouveau fichier à envoyer vers le navigateur.
Dans notre cas, tout le contenu de la page est envoyé tel quel, sauf ce qui est entre <?php
et ?>, à savoir la ligne : « echo "C’est mon premier script PHP" ; ». Cette instruction
demande au serveur d’écrire la phrase « C’est mon premier script PHP » dans le flux à
envoyer au navigateur.
Le script ci-dessus est équivalent au suivant :
<?php
echo "<html> \n" ;
echo " <body> \n" ;
echo "C’est mon premier script PHP \n" ;
echo " </body> \n" ;
echo "</html>" ;
?>
Listing 3 : script2.php , équivalent à script1.php
La seule différence c’est que tout le texte à envoyer est généré entièrement par la fonction
echo. (Le caractère \n, retour à la ligne, est ajouté pour mettre en forme le code source
généré).
2) Eléments de la programmation de base de PHP

Le langage PHP hérite du langage C et du Perl. Ainsi, la plupart des notions que vous avez
appris en C sont encore valables pour PHP. Par exemple, les opérateurs et les expressions
sont les mêmes que dans C. Les instructions suivent la syntaxe de C, et toute instruction se
termine par un point-virgule (;).
116
a) Les commentaires
Pour commenter votre code PHP, vous pouvez utiliser trois façons. Utilisez « // » si vous
voulez faire un commentaire qui tient sur une seule ligne. Tout ce qui vient après sur la
même ligne est ignoré par le navigateur. La deuxième méthode est utile si le commentaire
est étalé sur plusieurs lignes. Dans ce cas on le délimite par /* et */. Vous pouvez aussi
utiliser le caractère « # » pour créer un commentaire de fin de ligne comme en shell Unix :
<?php
// Commentaire sur une seule ligne.
/* Commentaire
sur
plusieurs lignes */
echo "Bonjour" ; #commentaire en fin de ligne

?>
b) Déclaration des variables
En PHP, les identificateurs des variables sont toujours précédés par le symbole « $ ».
Comme tout langage de programmation, PHP reconnaît les types de base pour les variables.
Cependant, le programmeur n’a pas à déclarer les variables et leurs types, car PHP reconnaît
le type de la variable dès la première affectation. De plus, une variable en PHP peut changer
de type dans un même script : il prend toujours le type de l’expression affectée à cette
variable. Voilà un exemple :
1 <html>
2 <body>
3 <?php
4 $V = "123" ;
5 echo "Le type de la variable V est ".gettype($V);
6 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
7 $V = "123" * 1 ;
8 echo "<br/> Le type de la variable V est ".gettype($V);
9 ?>
10 </body>
11 </html>
Enregistrez ce script sous le nom variables.php dans le répertoire WWW, démarrez le

serveur Web. Lancez le navigateur et tapez dans la barre d’adresse
« localhost/variables.php ». Le résultat obtenu dans le navigateur est le suivant :
117
Le script PHP commence à la ligne 3. La ligne 4 contient la première utilisation d’une

variable $V (le nom de toute variable est précédé par un dollar). Ce n’est pas nécessaire de
déclarer au préalable cette variable. Son type n’est pas précisé. Mais puisque nous avons
affecté à $V la valeur "123" (qui est une chaîne de caractère), PHP considère que $V est de
type string. (C’est ce qui est affiché par la première ligne en résultat dans le navigateur). A
la ligne 7, nous avons affecté à $V le résultat d’une expression ("123" * 1). PHP fait des cast
automatiquement (i.e. : changement de type). Il considère la chaîne "123" comme étant
l’entier 123. Il le multiplie par 1 et stocke le résultat dans $V qui est désormais devenue de
type integer. Ce qui est affiché dans la deuxième ligne du résultat.
Signalons ici que nous avons utilisé la fonction prédéfinie getType() qui retourne le type de
la variable passée en paramètre. Nous avons aussi utilisé dans cet exemple l’opérateur de
concaténation de chaînes de caractères « . »
Remarques
4) Une chaîne en PHP est délimitée par des doubles quottes (") ou par des simples
quottes (' ). Les caractères utilisés en C (par exemple, « \n », « \t »…) sont acceptés.
5) En PHP, la casse est importante en ce qui concerne les identificateurs des variables.
Par exemple, $V, et $v sont deux variables différentes.
c) Les constantes
Vous pouvez définir des constantes pour lesquelles la valeur est fixée une fois pour toutes
(comme en C) en utilisant la fonction define() :
<?php
define (DIX, 10) ;
$note = 14 ; //pour essayer
if ($note >= DIX)
echo "Accepté !" ;
else
echo "Refusé !" ;
?>
Les identificateurs de constantes ne sont pas sensibles à la casse.
118
d) Les fonctions
Pour déclarer une fonction en PHP, utilisez le mot clé function suivi du nom de la fonction.
Le corps de la fonction est délimité par des accolades :
function MaFonction ( ) {
// Ici le corps de la fonction
Comme en C, une fonction peut recevoir des paramètres et retourner une valeur. L’appel de
la fonction se passe en utilisant son nom :
<?php
// Déclaration d’une fonction nommée somme() qui calcule la somme de deux nombres
function somme($x,$y) {
$s = $x + $y ;
return $s ;
}
// Appel de la function
$resultat = SOMME(3,5) ; //appelle la fonction somme( ) pour calculer la somme 3+5
Echo "La somme de 3 et 5 est " . $resultat ;
?>
Remarquez que la casse n’est pas importante en ce qui concerne les identificateurs de
fonctions (Ainsi somme() et SOMME() désignent la même fonction).
Remarque
Comme tout langage de programmation, toute variable définie dans le corps d’une fonction
est dite variable locale. Sa portée est limitée à la fonction dans laquelle elle est définie. Une
variable définie hors de toute fonction est une variable globale.
Regardez attentivement ce bout de code :
1 <?php
2 $V1 = 0 ;
3 function MaFonction () {
4 $V1 = 1 ;
5 $V2 = 2 ;
6 echo "la valeur de V1 est $V1, et la valeur de V2 est $V2";
7 }
8 MaFonction() ;
9 echo "<br /> la valeur de la variable globale V1 est $V1" ;
11 ?>
119
Le résultat obtenu est le suivant :
Dans un autre langage on aurait attendre un autre résultat : à la ligne 2 de ce résultat, la

variable $V1, puisque elle est globale, devrait conserver la valeur obtenue au sein de la
fonction (c'est-à-dire 1). A votre avis pourquoi $V1 contient toujours 0, sa valeur avant
l’appel de la fonction ?
La raison est simple : la variable $V1 au sein de la fonction est tout à fait une nouvelle
variable différente de la variable globale $V1. Rappelez-vous que PHP crée des variables
sans aucun besoin de les déclarer : leur première utilisation suffit pour les créer.
A la ligne 2 donc, on a créé une variable globale $V1. Dans le corps de la fonction, à la ligne
4, nous avons créé une autre variable $V1, cette fois-ci locale, et une autre variable locale
$V2 à la ligne 5. Autrement dit, nous n’avons pas accédé dans notre fonction à la variable
globale $V1, mais à une toute nouvelle variable (locale) nommée aussi $V1.
Si votre intension est d’accéder à la variable globale $V1 dans la fonction, utilisez le mot clé
global comme suit :
1 <?php
2 $V1 = 0 ;
4 global $V1 ;
5 $V1 = 1 ;
6 $V2 = 2 ;
7 echo "la valeur de V1 est $V1, et la valeur de V2 est $V2";
8 }
9 MaFonction() ;
11 echo "<br/> la valeur de la variable globale V1 est $V1" ;
12 ?>
Ainsi, désormais dans la fonction MaFonction(), désigne la variable globale définie

précédemment.
Avec cette méthode, on peut créer au sein d’une fonction une nouvelle variable globale à
laquelle on peut accéder à l’extérieur de cette fonction.
120
On peut aussi accéder à une variable globale via le tableau associatif $GLOBALS (qui
contient toutes les variables globales du script) de la manière suivante :
1 <?php
2 $V1 = 0 ;
4 $GLOBALS["V1"] = 1 ;
5 $V2 = 2 ;
6 echo "la valeur de V1 est " . $GLOBALS["V1"] . ", et la valeur de V2 est $V2";
7 }
8 MaFonction() ;
9 echo "<br/> la valeur de la variable globale V1 est $V1" ;
11 ?>
A la ligne 4, nous avons utilisé le tableau associatif prédéfini ($GLOBALS). Dans ce tableau
sont stockées toutes les variables globales du script (Pour accéder à une variable précise on
utilise son nom (sans dollar). Dans notre cas, $GLOBALS["V1"] donne accès à $V1).
Pour en savoir plus sur les tableaux associatifs, voir la section sur les tableaux.
d) Structures de contrôle
Tout ce qui concerne cette partie est le même que dans le langage C. Nous donnons un
rappel rapide sous forme d’exemples.
La boucle for
L’exemple suivant donne la table de multiplication des nombres de 1 à 9:
<?php
for ($i =1 ; $i<10 ; $i++) {
echo "<b> Table de multiplication de $i</b><br/>" ;

for ($j = 1 ; $j <10 ; $j++) {
echo "$i x $j = " . $i * $j . "<br/>";

}
}
?>
La boucle foreach
Cette instruction particulière permet de parcourir des tableaux. Nous la retrouvons dans la
section destinée aux tableaux.
121
La boucle while
L’exemple suivant calcule la somme des 100 premiers entiers non nuls:
<?php
while ($i <= 100){
$s = $s + $i ;
$i++;
}
echo "La somme est " . $s; // on peut aussi écrire : echo "La somme est $s ";
?>
La boucle do…while
<?php
do {
$s = $s + $i ;
$i++;
} while ($i <= 100) ;
echo "La somme est " . $s;

?>
Et maintenant avec la boucle do…while :
Les tests : If …else…
<?php
$jour = date("d") ; //date() est une fonction qui retourne la date système ;
// avec le format "d", il donne le numéro du jour de 01 à 31
// $jour contient le numéro du jour actuel
// (Voir la section sur les dates)
if ($jour = = 1){
echo "C’est le début du mois " ; //les accolades ne sont pas nécessaires
// quand il s’agit d’une seule instruction
// comme dans notre cas
}
else {
echo "Ce n’est pas le début du mois" ;
}
?>
Rappelons que la clause else est facultative.
Bref, tous ce que vous connaissez à ce propos en langage C est valable en PHP (par exemple,
les instructions switch, break, continue,…)
122
Remarque
Dans les tests de la section précédente, nous avons utilisé des expressions booléennes. Ces
expressions prennent soit la valeur TRUE, soit la valeur FALSE.
Une valeur numérique nulle est automatiquement considérée comme FALSE. La même
chose pour une chaîne vide ou la chaîne « 0 »
123
124
Chapitre 5: Quelques fonctions utiles de PHP
Dans ce chapitre, nous présentons certaines fonctions de PHP qui vous seront utiles.
1) Fonctions pour l’affichage

Pour envoyer du texte à afficher dans le navigateur, utilisez une des trois fonctions : echo(),
print () et printf() (cette dernière est comme celle du langage C exactement) :
<?php
$nom = "Omar";
echo ("Bonjour $nom");

print("Bonjour $nom");
printf("Bonjour %s", $nom);
?>
2) fonctions pour la gestion des variables

Si vous voulez savoir le type d’une variable $V, vous pouvez utiliser la fonction
getType($V). Pour modifier le type d’une variable $V donnée, utilisez la fonction
setType($V,$type). La fonction is_integer($V) teste si une variable est un entier ou non,
is_string($V) teste si $V est une chaîne ou non et ainsi de suite pour les fonctions
is_long(), is_double(), is_bool(), is_float(),…
<?php
$V = "123"; // $V est une chaîne
echo "Le type de \$V est " . getType($V) ."<br/>" ; // affiche : Le type de $V est string
// on modifie le type de $V
setType($V, "integer") ; //$V devient de type integer: "123" est casté en l’entier 123
if (is_integer($V)) //teste si la variable est un entier ce qui est vrai dans notre cas
echo "\$V est entier" ;
else
echo "\$V n’est pas un entier" ;
?>
La fonction empty($V) permet de savoir si la variable $V contient une chaîne vide ou une
valeur numérique nulle ou rien du tout. Elle renvoie 1 dans ce cas.
La fonction isset($V) permet de tester si une variable $V existe (c'est-à-dire, a déjà reçu une
valeur dans le script et n’a pas été détruite par la fonction unset($V).
125
La fonction unset($V) permet de détruire une variable $V.
<?php
$V = 0;
echo isset($V) ; // affiche 1 car la variable existe déjà
echo empty($V) ; // affiche 1 car la variable est considérée vide (0 ou chaîne vide )
echo isset($W) ; // n’affiche rien car la variable n’existe pas

echo empty($W) ; // affiche 1 car la variable est considérée vide
$V= 1 ;
echo isset($V) ; // affiche 1 car la variable existe déjà
echo empty($V) ; // n’affiche rien car la variable n’est pas vide
unset($V) ; // détruit la variable $V
echo isset($V) ;// n’affiche rien car la variable n’existe pas

echo empty($V) ; // affiche 1 car la variable est considérée vide
?>
3) Chaînes de caractères
Les chaînes de caractères en PHP sont délimitées soit par des simples quottes soit par des
doubles quottes.
Si vous utilisez les doubles quottes pour délimiter une chaîne, alors les variables et les
caractères spéciaux contenus dans cette chaîne sont évalués. Ce n’est pas le cas si vous
utilisez les simples quottes.
<?php
$Nom = "Omar";
echo "Bonjour $Nom" ; // affiche Bonjour Omar , la variable $Nom est évaluée
echo 'Bonjour $Nom' ; // affiche Bonjour $Nom , la variable $Nom n’est pas évaluée
?>
Voilà quelques caractères spéciaux que vous pouvez utiliser :
\n (nouvelle ligne), \r (retour à la ligne), \t (tabulation horizontale), \\ (antislash), (\$ dollars

), \" (doubles quottes).
Pour concaténer deux chaînes, utiliser l’opérateur « . » (Point).
PHP fournit beaucoup de fonctions pour la manipulation des chaînes de caractères. En voici
quelques-unes :
126
• strlen($S) : retourne la longueur de la chaîne $S (i.e : le nombre de caractères).

• strtolower($S) transforme $S en minuscules.
• strtoupper($S) : transforme la chaîne $S en majuscules.
• trim($S) : supprime les espaces au début et enfin de la chaîne $S.
• substr($S,$i,$j) : retourne la sous-chaîne de $S qui commence à la position $i et
qui contient $j caractères.
• strnatcmp($S1,$S2) : compare les deux chaînes $S1 et $S2.
• addslaches($S1) : déspécialise les caractères spéciaux de la chaînes $S.
• ord($C) : retourne le code ASCII du caractère $C.
Si vous avez un texte assez long que vous voulez stocker dans une chaîne de caractères,
utilisez la syntaxe, dite here-Doc, comme suite :
<?php
$Text = <<<MonIdentificateur
Ici commence le texte. Les caractères spéciaux sont automatiquement déspécialisés.
Cette zone est identifier par un identificateur précédé de <<<. Dans notre cas c’est
"MonIdentificateur". Et pour terminer le texte, on doit clôturer par l’identificateur sur
une nouvelle ligne.
MonIdentificateur;
echo "$Text" ;
?>
4) Tableaux
Les tableaux en PHP sont de type array. Ils peuvent contenir des éléments de tout type.
Leurs éléments peuvent être de types différents.
a) Initialisation des tableaux :

Pour créer un tableau, on peut utiliser la fonction array() :
$etudiant = array("Omari","Omar",22, 066334455) ;
$jours = array("dimanche", "lundi","mardi","mercredi","jeudi","vendredi","samedi") ;
Ou en entrant directement les éléments du tableau :
$jours[] = "dimanche" ; $jours[] = "lundi" ; $jours[] = "mardi" ;…
Ou encore :
$jours[0] = "dimanche" ; $jours[1] = "lundi" ; $jours[2] = "mardi" ;…
127
b) Accès aux éléments d’un tableau
Pour accéder à un élément d’un tableau, on utilise son indice comme en C :
<?php
$etudiant = array ("Omari","Omar",22) ; // création d’un tableau avec la fonction array()
$nom = $etudiant[0] ; //accès au premier élément du tableau $etudiant

$prenom = $etudiant[1] ; //accès au deuxième élément du tableau $etudiant
$age = $etudiant[2] ; //accès au troisième élément du tableau $etudiant
//affichage du résultat
echo "Le nom de cet étudiant est $nom $prenom, il est âgé de $age ans." ;
?>
c) Parcours des tableaux
Pour parcourir un tableau vous pouvez utiliser une boucle d’une manière standard :
<?php
for ($i = 0 ; $i<count($jours) ;$i++) { // count() : nombre d’éléments d’un tableau

echo "Le jour numéro $i de la semaine est " . $jours[$i] . "<br/>";
}
?>
On utilise souvent la boucle foreach avec les tableaux :
<?php
echo "Les jours de la semaine sont :<br/>";

foreach ($jours as $j) {
echo "$j <br/>";
}
?>
Dans cet exemple, la variable $j reçoit successivement les différents éléments du tableau
$jours.
128
On peut aussi parcourir un tableau de la manière suivante :
<?php
echo "Les jours de la semaine sont : <br/>";
reset($jours);
for ($i=0 ; $i < count($jours) ; $i++){
echo current($jours) . "<br/>";
next($jours) ;
}
?>
Ici, nous avons utilisé des fonctions qui aident à parcourir un tableau :
• reset($t) : place le pointeur sur le premier élément du tableau $t.

• current($t) : lit la valeur de l’élément encours (sur le quel point le pointeur).
• next($t) : place le pointeur sur l’élément suivant.
• prev($t) : place le pointeur sur l’élément précédent.
• each : retourne la paire clé/valeur et avance le pointeur vers l’élément suivant.
(utile surtout avec les tableaux associatifs)
Dans notre exemple, après avoir initialisé le tableau $jours et afficher le message de la ligne
3, le pointeur est placé au début du tableau $jours par la fonction reset() (i.e : il pointe sur
« dimanche »). Dans la boucle, la fonction curent() retourne la valeur de l’élément courant
(sur lequel point le pointeur. Au début c’est dimanche). Ensuite, le pointeur avance vers le
deuxième élément grâce à la fonction next(). Et on reboucle jusqu’à la fin du tableau ($i
=count($jour)).
Cette méthode est aussi valable avec les tableaux associatifs de la section suivante.
d) Autres fonctions pour la gestion des tableaux
• count($t) et sizeof($t) : ces deux fonctions donnent la taille d’un tableau $t (i.e. :
le nombre de ses éléments).
• in_array($v ,$t) : vérifie si la valeur de $v existe dans le tableau $t.
• list($v1,$v2,$v3,…) : transforme une liste de variable en tableau.
• sort($t) : trie le tableau (ordre alphanumérique croissant).
• rsort($t) : trie le tableau (ordre alphanumérique décroissant).
• implode($s,$t)et join($s,$t) : ces deux fonctions retournent une chaîne de
caractères qui est le résultat de la jointure des éléments du tableau avec la chaîne
$s.
• array_merge($t1,$t2,$t3,…) : concatène les tableaux passés en arguments.
• array_rand($t) : renvoi un élément du tableau aléatoirement.
129
e) Tableaux associatifs
Un tableau associatif est un tableau tel que, une chaîne de caractère, dite clé, est associée à
chacun de ses éléments. Ainsi, au lieu d’accéder à un élément par son indice, on accède par
sa clé : $tableau["clé"] au lieu de $tableau[i]. Voilà un exemple :
<?php
//création du tableau associatif avec la fonction array()

$etudiant = array("Nom" =>"Omari","Prénom" =>"Omar","Age" => 22) ;
//accès aux éléments par les clés
$n = $etudiant["Nom"] ;
$p = $etudiant["Prénom"] ;
$a = $etudiant["Age"] ;
echo "Le nom de cet étudiant est $n $p. Il est âgé de $a ans.";
?>
On peut aussi créer le tableau sans utiliser la fonction array :
<?php
//création du tableau associatif directement :

$etudiant ["Nom"] = "Omari" ;
$etudiant ["Prénom"] = "Omar" ;
$etudiant ["Age"] = 22 ;
//On accède aux éléments par leurs clés:
$n = $etudiant ["Nom"];
$p = $etudiant ["Prénom"];
$a = $etudiant ["Age"];
echo "Le nom de cet étudiant est $n $p. Il est âgé de $a ans.";
?>
f) Parcours des tableaux associatifs avec foreach

Dans l’exemple suivant, nous n’allons pas utiliser les clés : ceci ressemble donc à ce que
nous avons déjà vu avec les tableaux ordinaires et l’instruction foreach :
130
<?php
?>
<html><body><table border = '1'>
<tr><td>Nom</td><td>Prénom</td><td>Age</td></tr>
<tr>
<?php
// $var parcours les différents éléments
foreach ($etudiant as $var){
echo "<td> $var </td>" ;
}
?>
</tr>
</table></body></html>
Nom Prénom Age
Omari Omar 22
Maintenant, nous allons nous servir des clés :
<?php
foreach ($etudiant as $cle => $val){

// $cle parcours les clés et $val parcours leurs valeurs
echo "$cle : $val <br/>" ;

}
/* affiche le résultat suivant :
Nom : Omari
Prénom : Omar
Age : 22
*/
?>
g) Fonctions utiles pour les tableaux associatifs
• array_count_values($t) : valable aussi pour les tableaux ordinaires. Elle

retourne un tableau associatif contenant les valeurs de $t comme clés et leurs
fréquences comme valeurs. Vous pouvez utiliser cette fonction si vous voulez
savoir par exemple, combien de fois se répète une valeur donnée dans un tableau
$t.
• array_keys($t) : retourne un tableau contenant les clés d’un tableau associatif $t.
131
• array_values($) : retourne un tableau contenant les valeurs d’un tableau

associatif $t.
5) Date et heure
Les fonctions de gestion des dates et heures sont très utiles. PHP en fournit plusieurs. En
voici les plus intéressantes :
• getdate() : retourne un tableau associatif contenant la date et l’heure. Les clés de

ce tableau sont rassemblées dans ce tableau :
Dans les exemples, on suppose que la date est dimanche 6 mai 2007 à 03h30mn15s
On crée un tableau $t dans lequel on stocke le résultat de getDate() comme suit :
$t = getDate() ;
Clé Signification Exemple
seconds Secondes $t["seconds"] donne : 15
minutes Minutes $t ["minutes"] donne : 30
hours Heures $t ["hours"] donne : 3
mday Jour du mois de 1 à 31 $t ["mday"] donne : 6
wday Jour de la semaine de 0 à 6 $t ["wday"] donne : 0
mon Mois de l’année de 1 à 12 $t ["mon"] donne : 5
year Année sur 4 chiffres $t ["year"] donne : 2007
yday Jour de l’année de 0 à 365 $t ["yday"] donne : 125
weekday Jour de la semaine, textuel,anglais $t ["wekday"] donne : Sunday
month Mois, textuel, complet, en anglais $t ["month"] donne : May
Exemple :
<?php
$LaDate = getDate() ;
$jour = $LaDate["mday"];
$mois = $LaDate["mon"];
$annee = $LaDate["year"];
echo "Nous sommes le : $jour/$mois/$annee" ; //affiche : Nous sommes le 6/5/2007
?>
• date($format) : cette fonction retourne une chaîne de caractère contenant la

date et l’heure système de la machine du serveur web. Vous pouvez choisir le
format de la date retournée en spécifiant l’argument optionnel ($format) de cette
fonction. Les formats possibles sont rassemblés dans ce tableau :
132
Dans les exemples, on suppose que la date est dimanche 6 mai 2007 à 03h45mn20s
Format Signification Exemple
d Jour du mois sur deux chiffres de 01 à 31 date("d") donne : 06
j Jour du mois de 1 à 31 (sans les 0 initiaux) date("j") donne : 6
Jour de la semaine, textuel, en version longue et en
l date("l") donne : Sunday
anglais
D Jour de la semaine textuel en trois lettres et en anglais date("D") donne : Sun
w Jour de la semaine numérique de 0 à 6 (0 pour dimanche) date("w") donne : 0
z Jour de l’année de 0 à 365 date("z") donne : 125
m Mois de l’année sur deux chiffres de 01 à 12 date("m") donne : 05
n Mois de l’année de 1 à 12 (sans les 0 initiaux) date("n") donne : 5
F Mois textuel en version longue et en anglais date("F") donne : May
M Mois textuel en trois lettres date("M") donne : May
Y Année sur 4 chiffres date("Y") donne : 2007
y Année sur 2 chiffres date("y") donne : 07
h Heure au format 12h de 01 à 12 date("h") donne : 03
g Heure au format 12h de 1 à 12 (sans les 0 initiaux) date("g") donne : 3
H Heure au format 24h de 00 à 23 date("H") donne : 03
G Heure au format 24h de 0 à 23 (sans les 0 initiaux) date("G") donne : 3
i Minutes de 00 à 59 date("i") donne : 45
s Secondes de 00 à 59 date("m") donne : 20
a am ou pm date("a") donne : am
A AM ou PM date("A") donne : AM
L Booléen pour savoir si l’année est bissextile date("L") donne : 0
t Nombre de jour dans le mois donné de 28 à 31 date("t") donne : 31
Vous pouvez combiner ces formats pour obtenir le format dans lequel vous voulez afficher
la date :
<?php
echo "Si on utilise le format : l j F Y , La date affichée serait : " . date("l j F Y") ;
echo "<br/> Et avec le format : j/n/Y , La date affichée serait : " . date("j/n/Y") ;
echo "<br/> Et avec le format : D Y-m-d , La date affichée serait : " . date("D Y-m-d ") ;
echo "<br/> Et avec le format : D d/m/y H:i:s on affiche : " . date("D d/m/y H:i:s") ;
?>
Le résultat obtenu dans le navigateur, sachant que la date système est dimanche 6 mai 2007
à 5h10min50s, est le suivant :
133
• checkdate($mois, $jour,$annee) : vérifie si la date entrée en arguments et une

date valide ou non. (Par exemple, si les utilisateurs de votre site saisissent leurs
dates de naissance, utilisez la fonction checkdate() pour vérifier que les dates
saisies correspondent à des dates valides avant de les stocker dans la base de
données. Par exemple : 45/45/2007 n’est pas une date valide).
6) Mathématiques
Fonctions
PHP fournit un ensemble de fonctions mathématiques. Voilà quelques-unes :
• abs($x) : retourne la valeur absolue de $x

• ceil($x) retourne l’entier n le plus proche à $x tel que $x <= n.
• floor($x) la partie entière de $x.
• pow($x,$y) $x à la puissance $y
• max($a,$b,$c,…) : retourne l’argument de valeur maximale.
Constantes :
• M_PI : la valeur de pi (3.1415926535898)

• M_E : la valeur de e (2.718281828459)
Nombres aléatoires
Vous pouvez générer des nombres aléatoires en se basant sur la fonction rand() ou la
fonction mt_rand() :
• rand($x,$y) : retourne un nombre aléatoire entre $x et $y. Si seulement $x est

fourni, rand() fournit un nombre aléatoire entre $x et RAND_MAX (le nombre le
plus grand que rand() peut générer). Si $x et $y sont absent, le nombre aléatoire
généré est entre 0 et RAND_MAX.
• getRandMax() : retourne la valeur de RAND_MAX.
• srand : réinitialise le générateur de nombre aléatoire.
• mt_rand, mt_getRandMax() et mt_setrand() font la même chose, mais
beaucoup plus rapidement et plus sûrement.
134
Exemple
<?php
echo " pow (2,3) = " . pow(2,3);
echo " <br/> ceil(1,6) = " . ceil(1.6);
echo "<br/> floor (1,6) = " . floor (1.6);
echo "<br/> Max (2,3,20,-4,56,5) = " . Max (2,3,20,-4,56,5);
echo "<br/> La valeur de pi est " . M_PI;
echo "<br/> La valeur de e est " . M_E;
///////////////////////////////////////////////////////////////////////////////////////////
echo "<br/> Le nombre RAND_MAX généré par mt_rand est " . mt_getrandmax();
echo "<br/> Voilà un nombre aléatoire : " . mt_rand();
echo "<br/> Et voici un autre : " . mt_rand() ;
?>
Le résultat est le suivant :
7) Inclusion des fichiers

PHP vous permet d’appeler un autre fichier à partir de votre script en utilisant la fonction
include(). Au bon emplacement dans votre script PHP, tapez include("monFichier") et le
contenu du fichier « monFichier » va être évalué et son résultat sera inséré à cet
emplacement.
Exemple : Considérons le script inclusion.php suivant qui fait appel à trois autres fichiers :
<?php
for ($i= 1; $i<=3; $i++){
include("$i.php");
}
?>
135
Le contenu des trois fichiers ressemble au suivant :
<?php
//Ceci est le fichier 1.php. Dans les autres fichiers en remplace 1 par 2 ou 3
echo "Nous sommes dans le fichier 1<br/>";
?>
On obtient ce qui suit :
Exemple d’utilisation
Supposons par exemple que vos scripts utilisent des variables qui risquent de changer de
temps en temps. Vous pouvez créer alors un fichier externe variables.inc.php que tous les
scripts appellent avec la fonction include(). Ainsi, si vous avez à faire des modifications,
vous pouvez les faire à un seul emplacement : le fichier variable.inc.php.
Voyons par exemple le script suivant qui contient des informations nécessaires pour accéder
à une base de données :
<?php
$server = "MonServeur" ;
$BD = "MaBase" ;
$user = "Moi" ;
$password = "Laisser Passer" ;
?>
Si tous les scripts accédant à la base de données incluent se fichier, et si un jour je change de
serveur par exemple, il me suffit de modifier le nom du serveur dans cet unique script. Tous
les autres scripts continuent à fonctionner correctement.
Il existe une autre fonction qui sert pour l’inclusion des fichiers : c’est la fonction require().
8) Arrêt prématuré
Parfois, vous aurez besoin de stopper un script PHP, par exemple pour gérer une erreur
d’exécution. A ce stade, PHP offre deux fonctions :
• die("message") : cette fonction affiche un message puis arrête le script.
136
• exit() : arrête le script sans afficher de message.
Supposons que nous disposons d’une fonction ouvrir_connexion() qui permet à un

utilisateur de se connecter à un serveur de base de données en fournissant le nom du
serveur, le login et le mot de passe de l’utilisateur. Si, pour une raison ou une autre, la
connexion échoue, on avertit l’utilisateur puis on stoppe le script. Alors la fonction die ()
fait cette tâche :
<?php
Ouvrir_connexion("$server","$user","$password") or die ("Connexion impossible au
serveur");
//ou bien
// Ouvrir_connexion ("$server","$user","$password") or exit();
?>
Remarquez l’existence de l’opérateur or : si la connexion se passe sans problème, la

deuxième partie de l’instruction est ignorée (die ("…")). Si un problème survient, la fonction
die () est exécutée.
La dernière ligne (avec exit ()) fait la même chose sauf qu’aucun message n’est affiché pour
l’utilisateur.
<?php
echo "Cette ligne est avant la fonction die </br>") ;

die ("Le script va s’arrêter ici");
echo "Cette ligne ne s’exécute pas car le script est arrêté par la fonction die") ;
?>
Voilà un autre exemple pour tester :
Le résultat de l’exécution est le suivant :
137
9) Accès aux fichiers et aux dossiers

PHP fournit un ensemble de fonctions qui permettent l’accès au système de fichiers pour
manipuler vos fichiers et dossier. Certaines de ces fonctions ressemblent à ceux du langage
C.
a) Gestion des fichiers

Parmi les fonctions PHP de gestion des fichiers on site :
• fopen($file,$mode) : ouvre le fichier dont le nom est $file avec le mode $mode.
Cette fonction retourne un identificateur $id de fichier si l’opération se passe
bien et False en cas d’erreur. Les modes possibles sont :
o "r" : pour ouvrir le fichier en lecture seule

o "r+" : pour ouvrir le fichier en lecture/écriture
o "w" : écriture seule (le fichier est créé s’il n’existe pas).
o "w+" : lecture/écriture (le fichier est créé s’il n’existe pas).
o "a" : création et écriture seule (le pointeur est placé en fin de fichier)
o "a+" : création et lecture/écriture (le pointeur est placé en fin de fichier)
• fclose($id) : ferme le fichier dont l’identificateur est $id.

• fgetc($id) : lit un seul caractère du fichier identifié par $id.
• fgets($id) : lit une ligne du fichier identifié par $id.
• fputs($id,$s) : écrit la chaîne $s dans le fichier identifier par $id.
• feof($id) : teste la fin du fichier $id.
• copy($source, $destination) : copie un fichier dans un autre.
• readfile($fichier) : affiche le contenu texte du fichier nommé $fichier.
• file_exists($fichier) : teste si le fichier dont le nom est $fichier existe ou non.
• filesize($fichier) donne la taille du fichier $fichier.
• filetype($fichier) : donne le type de $fichier (i.e. : file pour un fichier, dir pour
un répertoire)
• rename($ancien, $nouveau) : renomme un fichier.
• unlink($fichier) : supprime le fichier nommé fichier.
Exemple 1 : écriture dans un fichier
Dans cet exemple, nous voulons ouvrir le fichier « c:/essai.txt » avec le mode « w ». C'est-
à-dire pour écriture. Si le fichier existe, alors il sera ouvert, sinon il sera créé. C’est le rôle de
la fonction fopen () qui ouvre le fichier et retourne un identificateur que nous stockons dans
$id.
Si l’ouverture se passe sans problèmes, (i.e. $id != False), alors on écrit la chaîne $contenu
dans le fichier $id grâce à fputs(), et puis on ferme le fichier avec fclose(). Dans le cas
d’erreur, on stoppe le script en affichant un message d’erreur.
138
<?php
$fichier = "c:/essai.txt" ;
$id = fopen($fichier,"w") ;
if($id) {
$contenu = "C’est un texte d’essai.\n\r On essaye d’accéder au fichier par PHP";
fputs($id,$contenu) ;
fclose($id) ;
echo "L’écriture dans le fichier $fichier s’est bien passée" ;
}
else die ("Erreur lors d’essai d’ouverture du fichier " . $fichier );
?>
Exemple 2: Lecture du contenu d’un fichier.
<?php
$id = fopen($fichier,"r") ;
if($id) {
while( !feof($id)){
$contenu = $contenu . fgets($id) ;
}
fclose($id) ;
echo $contenu ;
}
else die ("Erreur lors de l’ouverture du fichier " . $fichier );
?>
Dans cet exemple, nous avons lu le contenu du fichier « c:/essai.txt ». Nous avons ouvert
le fichier par la fonction fopen() en utilisant le mode « r » (mode lecture). L’identificateur
retourné par fopen() est stocké dans la variable $id. (i.e. dans le script, le fichier ouvert est
reconnu par $id).
Si $id est différent de false, ce qui veut dire que l’ouverture s’est passée sans erreurs, on
boucle, tant que la fin du fichier n’est pas encore atteinte ( !feof($id)). A chaque passage
dans la boucle, on lit une ligne du fichier ouvert par la fonction fgets(). Cette ligne lue est
concaténée avec la chaîne $contenu. Quand la fin du fichier est atteinte, on sort de la
boucle, on ferme le fichier par fclose() et on affiche la chaîne $contenu qui contient
maintenant le contenu du fichier « c:/essai.txt »
139
Exemple 3 : Lecture du contenu du fichier par readfile()
On peut aboutir au même résultat de l’exemple précédent quand il s’agit d’un fichier texte à
afficher à l’écran comme suit :
<?php
//readfile() lit le contenu d’un fichier texte et l’affiche à l’écran
readfile($fichier) ;
?>
Exemple 4 : Copie d’un fichier dans un autre.
<?php
$source = "c:/essai1.txt" ;
$destination = "c:/essai2.txt" ;
$id1 = fopen($source,"r") ;
$id2 = fopen($destination,"w") ;
if($id1 && $id2) {

while( !feof($id1)){
$c=fgetc($id1);
fputs($id2,$c);
}
fclose($id1) ;
fclose($id2) ;
echo "L'opération de copie s'est bien passée!" ;
}
else die ("Erreur lors de l’ouverture de l’un des fichiers ");
?>
Dans cet exemple, nous voulons copier le fichier « c:/essai1.txt » dans le fichier
«c:/essai2.txt». Nous avons utilisé la fonction fopen() pour ouvrir le premier fichier en
mode lecture (« r ») et le deuxième en mode écriture (« w »). Ce mode, permet de créer le
fichier « c:/essai2.txt » s’il n’existe pas. Si l’ouverture des deux fichiers passe sans
problèmes alors on boucle jusqu’à ce qu’on atteint la fin du fichier source (identifié par
$id1). A chaque passage dans la boucle on lit un seul caractère du fichier source ($id1)
grâce à getc(), ce caractère est stocké dans la variable temporaire $c, puis on écrit $c dans le
fichier de destination ($id2) grâce à puts(). Comme ça on effectue une copie caractère par
caractère. N’oubliez pas de fermer les fichiers à la fin de l’opération.
140
L’exemple suivant reprend le même exemple précédent, mais cette fois-ci, on utilise la
fonction copy() pour lire la source et écrire dans la destination au lieu de le faire à la main
comme dans l’exemple précédent.
Exemple 5 : copie de fichier à l’aide de la fonction copy().
<?php
$source = "c:/essai.txt" ;
$destination = "c:/essai2.txt" ;
$id1 = fopen($source,"r") ;
$id2 = fopen($destination,"w") ;
$bienpasser = copy($id1,$id2);
if($bienpasser)
echo "L'opération de copie s'est bien passée!" ;
else
die ("Erreur lors de l’ouverture de l’un des fichiers ");
fclose($id1) ;
fclose($id2) ;
?>
Dans l’exemple suivant, nous essayons de lire certaines propriétés du fichier « essai.txt ».
Ainsi la fonction filetype() nous donne le type du fichier (i.e. : fichier ou dossier). La
fonction filesize() donne la taille du fichier. Nous allons ensuite renommer le fichier. On
peut le faire à l’aide de la fonction rename(). Mais, il vaut mieux vérifier que le nouveau
nom n’est pas déjà utilisé (si c’est le cas, il serait impossible de terminer l’opération, et PHP
génère une erreur). Pour cela, nous allons tester l’existence d’un fichier portant le nom
« c:/essai2.txt » avec la fonction file_exists(). Le cas échéant, on le détruit avec la fonction
unlink().
141
<?php
$fichier = "c:/essai1.txt" ;
//afficher le type $fichier (soit file soit dir, ie : répertoire)

echo "Le type de $file est " . filetype($fichier) ;
//affiche la taille du fichier

echo "La taille de $file est " . filesize($fichier) ;
/* renommer le fichier, le nouveau nom est c:/essai2 .txt.

On tester d’abord si un tel nom n’existe pas */
if ( !file_exists("c:/essai2 .txt") {
unlik("c:/essai2 .txt") ; //si un fichier avec ce nom existe, on le supprime d’abord
rename($fichier, "c:/essai2 .txt ") ; //maintenant on renomme sans problème
}
//afficher le contenu du fichier "c:/essai2 .txt " :
readfile("c:/essai2 .txt ");
?>
b) Gestion des dossiers

Les fonctions suivantes sont utiles pour manipuler les dossiers de votre système de fichiers :
• chdir($dossier) : change le dossier courant en le dossier passé en argument.

• getcwd() : retourne le nom du dossier courant.
• opendir($dossier) : ouvre le dossier passé en argument et retourne un pointeur
$p sur ce dossier si l’opération a réussi, et la valeur false en cas d’erreur (pour
échapper cette erreur, tapez @ devant le nom de la fonction opendir(), ainsi,
l’erreur ne sera pas signalée).
• closedir($p) : ferme un pointeur $p déjà ouvert par opendir().
• readdir($p) : lit une entrée du dossier identifié par le pointeur $p (il retourne le
nom d’un fichier ou d’un dossier parmi ceux contenus dans le dossier ouvert. S’il
n’ y a plus d’entrée, elle retourne false.
• rewinddir($p) : pointe à nouveau sur la première entrée dans le dossier identifié
par $p.
Exemple
142
<?php
$currentdir = getcwd();
$parentdir = "$currentdir/..";
echo "Le dossier courant est ". $currentdir;

chdir($parentdir);
echo "<br />Maintenant, le dossier courant est ".getcwd();
?>
Dans cet exemple, nous avons lu le nom du répertoire courant avec la fonction getcwd().
Nous avons stocké le résultat dans la variable $currentdir. Le nom du répertoire parent est
stocké dans la variable $parentdir. La fonction chdir nous a permis de changer le
répertoire de travail. Le résultat est le suivant :
L’exemple suivant liste le contenu d’un dossier :
143
<?php
// ouvre le dossier courant. Le symbole @ permet d’échapper l’erreur en cas d’erreur
$dir = @opendir(".") ;
//si aucune erreur n’est survenue lors de l’ouverture on procède…

if($dir) {
//tant que readdir() trouve des entrées, on boucle :

while ($fichier = readdir($dir)) {
//selon le type de l’entrée on choisi une image

if (filetype($fichier) == 'file')
echo "<img src ='file.gif' width = '20' height = '20' />" ;
elseif (filetype($fichier) == 'dir')
echo "<img src ='dir.gif' width = '20' height = '20' /> " ;
//on affiche le nom de l’entrée à côté de l’icône :

echo "$fichier <br/>" ;
}
/*quand il n’y a plus de fichier ou de dossier, readdir() retourne false et on

quitte la boucle et on ferme le pointeur $dir */
closedir($dir) ;
}
?>
Le résultat donné est le suivant :
144
10) Expressions régulières

PHP offre un outil très puissant utilisé lors de la recherche d’un motif donné dans une
chaîne de caractères. Cet outil réside dans les expressions régulières.
Commençons par citer quelques fonctions, puis expliquons à l’aide d’exemples :
• preg_match($motif,$ch) : cette fonction teste si la chaîne $ch contient le motif

$motif.
• preg_replace($motif,$newS, $ch): cette fonction remplace toutes les
occurrences de $motif dans la chaîne $ch par la chaîne $newS.
• preg_split($motif, $ch) : retourne un tableau contenant les sous-chaînes de la
chaîne $ch délimitées par le motif $motif.
Les motifs peuvent êtres très complexes et permettent aux programmeurs d’exprimer toute
sorte d’expressions. Commençons par des exemples simples :
<?php
$adresse = "13, rue Al Majd, Fès";
if(preg_match("/Fès/",$adresse)) //la fonction preg_match teste l’existence de la chaîne
"Fès" dans $adresse
echo "Vous êtes de la ville de Fès" ;
else
echo "Votre adresse ne contient pas le mot Fès" ;
Dans cet exemple, le motif est une simple chaîne de caractères. La fonction preg_match()
teste l’existence de cette sous chaîne (« Fès ») dans la chaîne $adresse.
Autre exemple : utilisation de preg_replace().
<?php
$adresse = "13, rue Al Majd; Fès";
//Modifier toutes les occurrences de la sous-chaîne "Fès" dans $adresse par "Mekhnès"
$newAdresse = preg_replace("/Fès/","Mekhnès" ,$adresse) ;
echo "La nouvelle adresse est $newAdresse" ; // affiche "13, rue Al Majd , Mekhnès"
?>
Voilà un exemple d’utilisation de preg_split() :
Dans les exemples précédents, les motifs utilisés étaient des sous-chaînes de caractères. On
peut utiliser des modèles dans nos recherches . Dans ce qui suit, nous présentons quelques
manières possibles pour définir un motif :
• Spécifier un ensemble de caractères : sert pour tester si un caractère appartenant

à un ensemble donné apparaît dans une chaîne. Par exemple, si on veut savoir si
la chaîne $ch contient un des caractères « a », « b » « c » « d » « e » ou « f », on
peut tester comme suit : if(preg_match([abcdef],$ch))…
145
<?php
$adresse = "13, rue Al Majd, Fès";
/*Découper l’adresse en morceaux, le séparateur utilisé est " ," . Le résultat est stocké dans
le tableau $t : */
$t = preg_split("/,/",$adresse) ;
echo "Votre ville est " . $t[2] ; // affiche Fès
echo "<br /> Votre rue est " . $t[1] ; // affiche rue Al Majd
echo "<br /> Votre numéro est " . $t[0] ; // affiche 13
?>
• Spécifier une plage de caractères : on peut aboutir au même résultat précédent en

écrivant : if(preg_match([a-f],$ch))…. Ainsi, la fonction preg_match() cherche ci
la chaîne $ch contient un des caractères contenus entre « a » et « f ».
• Exclusion d’un motif : si on cherche le « complémentaire » : par exemple, pour
tester si la chaîne $ch contient un caractère autre que « a », « b » et « c », on
peut écrire if(preg_match([^abc],$ch))…ou d’une manière équivalente :
if(preg_match([^a-c],$ch))…Ce qui est nouveau ici c’est le caractère « ^ » qui,
une fois ajouté dans un motif, il signifie « la négation » ou encore « le
complémentaire ». Si on veut chercher ce caractère dans une chaîne, on doit le
déspécialiser par «\^ ».
Pour tester si une chaîne de caractères $ch contient au moins un chiffre, on peut écrire if
(preg_match([0123456789],$ch))…ou encore : if (preg_match([0-9],$ch))…
Maintenant pour tester si cette chaîne contient un caractère qui n’est pas un chiffre, on écrit
if (preg_match([^0123456789],$ch))…ou if (preg_match([^0-9],$ch))…
Le langage des expressions régulières offre un mécanisme pour contrôler le nombre

d’occurrences d’un motif :
• {i}: le motif existe exactement i fois dans la chaîne. Pour tester si la chaîne $ch
contient exactement deux chiffres, on écrit : if (preg_match([0-9]{2},$ch))…
• {i,}: le motif existe au minimum i fois dans la chaîne. Pour tester si la chaîne $ch
contient au minimum deux chiffres, on écrit : if (preg_match([0-9]{2,},$ch))…
• {i,j}: le motif existe au minimum i fois et au maximum j fois dans la chaîne. Pour
tester si la chaîne $ch contient au moins 2 chiffres et plus 4 chiffres (elle peut
contenir des lettres), on écrit : if (preg_match([0-9]{2,4},$ch))…
• ? : ce symbole signifie que le caractère précédent apparaît au plus une fois.
• + : le caractère qui précède ce symbole doit apparaître une fois au minimum.
• * : le caractère qui précède ce symbole apparaît 0 ou plusieurs fois.
• . : le point remplace un caractère.
On peut aussi préciser l’emplacement du motif dans la chaîne :
• ^motif : le motif est au début de la chaîne.

• motif$ : le motif est à la fin de la chaîne.
Exemple :
146
<?php
$email = "info@usmba.ac.ma" ;
if(!preg_match("/@/",$email))
echo "Cette adresse n'est pas valide. Il ne contient pas le caractère @" ;
else
echo "Cette adresse contient le caractère @" ;
if(preg_match("/\.ma$/",$email))
echo "<br />Cette adresse se termine par .ma" ;
else
echo "<br />Cette adresse ne se termine pas par .ma" ;
// remplacer le caractère (.) par (point) pour éviter les spams par exemple
$email2 = preg_replace("/\./","(point)",$email);
echo "<br />Cette adresse sera affichée comme ça : $email2" ;
?>
Le résultat affiché par le navigateur est donné dans la figure suivante :
11) Mail
La fonction mail() de PHP permet d’envoyer des emails à des destinataires. Pour utiliser
cette fonction, vous devez installer tout d’abord un serveur de messagerie électronique.
Vous devez aussi configurer PHP pour utiliser ce serveur de messagerie (pour cela, ouvrez le
fichier php.ini et dans la section « mail function », tapez le nom du serveur devant la
directive SMTP. La valeur par défaut est localhost. Donc si le serveur de messagerie est
installé sur la même machine que le serveur web, cette étape n’est pas nécessaire).
La forme la plus simple de mail() est mail($destinataire, $sujet, $message) comme dans
l’exemple suivant :
<?php
$destinataire = "lui@usmba.ac.ma.ac.ma" ;
$sujet = "Réunion" ;
$message = "Bonjour. La date de la réunion prévue est fixé pour mardi prochain." ;
mail($destinataire, $sujet, $message) ;
?>
147
Vous pouvez ajouter des entêtes à la fonction mail ; par exemple, si vous voulez envoyer des
copies à d’autres destinataires ou si vous voulez spécifier l’expéditeur du message ou pour
spécifier un email au quel retourne les réponses ou tout simplement pour indiquer le type
du contenu du message. Les entêtes s’écrivent en général sous la forme "entete : valeur\n".
Dans l’exemple suivant, on reprend le même message précédent et on lui ajoute des
informations dans l’entête :
<?php
$destinataire = "lui@usmba.ac.ma" ;
$sujet = "Réunion" ;
$message = "Bonjour. La date de la réunion prévue est fixé pour mardi prochain." ;
//on concatène tous les entêtes
$entetes = "From : me@ usmba.ac.ma\n" ;

$entetes = $entetes . "Cc : toi@ usmba.ac.ma\n" ;
$entetes = $entetes . "Bcc : elle@ usmba.ac.ma\n" ;
$entetes = $entetes . "Content : text/html\n" ;
mail($destinataire, $sujet, $message,$entetes) ;
?>
12) Variables d’environnement et constantes PHP

La communication entre le client et le serveur se passe selon le modèle Client/Serveur. Le
client envoie une requête http. Le serveur lui envoie la réponse. La requête http et sa
réponse sont constituées d’un entête (header) et d’un corps. Dans l’entête, le navigateur et le
serveur échange des meta-informations sur les données échangées.
Toutes les entêtes de la requête envoyé par le client sont transformées en variables dites
variables d’environnement et sont mise à la disposition du programmeur. En voici quelques-
unes :
• $_SERVER["PHP_SELF"] : cette variable stocke le nom du script en cours

d’exécution.
• $_SERVER["HTTP_USER_AGENT"] : stocke la signature du navigateur qui
demande le script. Le programmeur peut connaître dans le type du navigateur
utilisé.
• $_SERVER["REMOTE_ADDR"] : adresse IP du client. Ainsi l’auteur du script
peut savoir de quelle adresse IP se connecte le client.
• $_SERVER["HTTP_REFERER"] : Stocke l’url de la page qui a renvoyé le client
sur ce script (par exemple, une autre page qui contient un lien vers le script , un
moteur de recherche qui a renvoyé l’adresse suite à une recherche…Le
développeur peut ainsi savoir qu’il est le « chemin » le plus utilisé pour accéder à
ces pages.)
148
Nous n’avons donné ici que quelques exemples, pour voir d’autres variables
d’environnement ainsi que d’autres informations sur la configuration de votre serveur,
utilisez la fonction prédéfinie phpinfo() qui est destinée pour ceci :
<?php
phpinfo() ; // affiche des infos sur la configuration de PHP et de Apache
?>
Dans vos scripts, vous pouvez utiliser aussi des constantes prédéfinies par PHP. Ces
constantes sont parfois indispensables. Voilà quelques-unes :
• __FILE__ : représente le fichier encours.

• __LINE__ : représente la ligne encours.
• PHP_VERSION : représente la version de PHP utilisée.
• PHP_OS : représente le système d’exploitation de la machine qui tourne PHP.
13) Entêtes HTTP

Le serveur envoie des entêtes par défaut pour chaque réponse à une requête http. Mais, PHP
vous donne la possibilité de modifier ces entêtes dans vos scripts. Il propose pour cela la
fonction header($ch). Cette fonction accepte en argument une chaîne de caractères
contenant les différents entêtes à spécifier avec leurs valeurs sous la forme suivantes :
entete : valeur
Exemple : Dans cet exemple, nous voulons modifier l’entête de la réponse http envoyé au
client suite à une requête :
<?php
header("content-type: image/jpeg") ;
header("Date: ") . date("d/M/Y") ;
header("Last-Modified: ") . strftime("%c",getlastmod());
header("Location: photo.jpg");
?>
La deuxième ligne de ce script appelle la fonction header() et définit l’entête content-type

qui détermine le type du contenu que nous voulons envoyer au client. La troisième ligne
envoie l’entête Date dans lequel nous avons stocker la date système du serveur selon le
format (d/M/Y). Puis on a envoyé l’entête Last-Modified avec la date de la dernière mise à
jour de la page (c’est le résultat de strftime("%c",getlastmod())). L’entête Location redirige
le client vers un nouveau fichier qui est photo.jpg. Le navigateur ouvre ainsi ce fichier
directement.
Note Importante : Tout envoi des entêtes doit être avant l’envoie du moindre contenu au
navigateur. Ainsi l’utilisation de echo ou print avant d’une utilisation de header() générera
une erreur. Même un simple espace ou retour à la ligne avant la balise <?php est non
autorisé (car un tel espace est équivalent à echo " " ; et un tel retour à la ligne est équivalent
à echo "\n" ;)
149
Vous pouvez utiliser la fonction header() pour décrire le contenu de vos fichier et ainsi aider
le système de l’utilisateur à choisir le programme convenable pour les traiter. Dans
l’exemple suivant, la fonction header() informe le navigateur que le contenu de la page
s’ouvre avec Excel :
<?php
header("content-type: application/x-msexcel");
echo "Nom \t Prénom \t Age \n " ; // \t : tabulation ; \n : retour à la ligne
echo "Moujtahid \t Moujidd \t 21 \n " ;
echo "Omari \t Omar \t 22 \n " ;
echo "Abbassi \t Abbass \t 23 \n " ;
echo "Kaddouri \t Kaddour \t 25 \n " ;
echo "Jallouli \t Jalloul \t 24 \n " ;
?>
Ainsi, le navigateur avertit l’utilisateur comme dans la figure:
Comparez avec le résultat suivant : c’est le même fichier mais sans la ligne 2 (sans utiliser
header()).
14) Cookies
Les cookies sont des petits fichiers texte envoyés par le serveur en vue de les stocker sur le
disque dur du client. Ces fichiers contiennent principalement le nom d’une variable et sa
150
valeur. Lorsque le navigateur effectue ultérieurement une autre connexion, il envoie au

serveur cette variable et sa valeur. Ainsi, le serveur prend en considération cette variable.
Supposons par exemple que vous voulez offrir aux utilisateurs de votre page web la
possibilité de choisir leur couleur préférée comme couleur d’arrière-plan de la page. Alors,
pour cela vous pouvez demander à l’utilisateur de choisir sa couleur préférée. Vous utilisez
ensuite un cookie pour stocker cette couleur sur son disque dur. Au début de chaque
connexion, le client envoie ce cookie au serveur. Et ainsi la page et envoyé avec la couleur
choisie :
<?php
if (!isset($_COOKIE["couleur"]))
setCookie("couleur","yellow",time() + 30);
?>
<html>
<body bgcolor = "<?= $_COOKIE["couleur"]?>">
Bonjour
</body>
</html>
Comme vous pouvez remarquer dans cet exemple, on crée un cookie avec la fonction
setcookie(). Cette fonction exige deux arguments : le nom d’une variable (dans notre
exemple : couleur) et sa valeur (dans notre cas : yellow). Le troisième argument est
optionnel et sert à déterminer la date d’expiration du cookie. Ainsi, dans notre cas, le
cookie est détruit après 30 secondes. Vous pouvez aussi utiliser le tableau associatif
prédéfini (super global) nommée : $_COOKIE. Dans ce tableau sont stockées toutes les
variables de cookies. Pour accéder à une de ces variables, utilisez son nom comme clé. Dans
la deuxième ligne du script, on teste si la variable de cookie $couleur existe ou non. Dans le
cas où elle n’existe pas, (c’est le cas de la première visite d’un utilisateur), on crée le cookie,
c’est à dire, créer la variable $couleur avec la valeur « yellow », et on stocke le couple dans
un fichier sur l’ordinateur du visiteur. Le navigateur du client se charge d’envoyer ce couple
variable/valeur lors de toute prochaine visite.
Si la variable existe, ce qui veut dire que ce n’est pas la première visite de cet utilisateur (la
variable est envoyée par son navigateur), alors on affecte son contenu à l’attribut bgcolor de
la balise body.
Pour modifier la valeur stockée dans un cookie, utilisez toujours la fonction setcookie avec
la nouvelle valeur de la variable. Dans l’exemple précédent, si on veut modifier la couleur
stockée dans le cookie en bleu, on écrit tout simplement setCookie("couleur","blue");
Pour supprimer un cookie, utilisez setCookie("couleur"); sans spécifier de valeur.
N.B. : Les cookies sont envoyés dans l’entête http. Donc, tout comme la fonction header(),
aucun contenu ne doit être envoyé au client avant la fonction setCookie().
151
15) Sessions
PHP offre un mécanisme pour sauvegarder des variables lors de navigation d’un utilisateur
entre les différentes pages d’un site. Ainsi, elles seront disponibles dans toutes les pages de
ce site. Ces variables sont dites variables de session. Elles sont accessibles dans toutes les
pages visitées par l’utilisateur. Elles sont « hyper globales » !.
Prenons un exemple simple. Nous avons les deux scripts suivants :
<?php
$nom = "Omari" ;
?>
<html>
<body>
<a href = "script2.php">Lien vers le script 2 </a>
</body>
</html>
<html><body>
<?php
echo "Bonjour $nom" ;
?>
</body></html>
Créez ces deux fichiers. Ouvrez le premier fichier puis cliquez sur le lien. Vous allez
remarquer que la variable $nom n’est pas reconnu dans le deuxième script.
L’idée des sessions et de pouvoir garder la trace d’une variable. Par exemple, une fois passer
par le script 1, PHP sauvegarde la variable $nom en tant que variable de session et ainsi on
la retrouve dans toutes les pages visitées dans une même session.
Voyons donc comment on peut le faire avec notre exemple:
On modifie le scripte 1 :
<?php
session_start() ;
$_SESION["nom"] = "Omari" ;
$_SESION["prenom"] = "Omar" ;
$age = 22 ;
?>
<html><body> <a href = "script2.php">Lien vers le script 2 </a> </body></html>
On modifie le script 2 :
152
<?php session_start();?>
<html><body>
Bonjour <?php echo $_SESION["nom"] . " " . $_SESION["prenom"] ; ?> <br />
<a href = 'script3.php'>Lien vers le script 3 </a>
</body></html>
<?php unset($_SESION["prenom"]) ; ?>
On ajoute le script 3 :
<?php session_start();?>
<html><body>
Bonjour
<?php
// le prénom ne sera pas reconnu, car il n’est plus dans la session (unset)
echo $_SESION["nom"] . " " . $_SESION["prenom"] ;
?>
<br />
<a href = 'script4.php'>Lien vers le script 4 </a>
</body></html>
<?php session_destroy() ; ?>
Et puis on ajoute le script 4 :
<?php session_start(); ?>
<html><body>
Bonjour
<?php
// aucune variable de session ne sera plus reconnue, car la session est détruite
echo $_SESION["nom"] . " " . $_SESION["prenom"] ;
?>
<br />
</body></html>
Dans ces 4 scripts, nous avons utilisé les fonctions de session les plus utilisées : au début de
chaque script utilisant les sessions, utilisez session_start(). Il faut noter que les
informations de session sont envoyées dans les headers, ce qui veut dire qu’il ne faut rien
afficher avant l’utilisation de session_start() (exactement comme header() et setCookie()).
Pour enregistrer une variable en tant que variable de session utilisez le tableau super global
prédéfini : $_SESSION. C’est un tableau associatif dont les clés sont les noms des variables
153
de session. Pour lui ajouter une nouvelle variable, il suffit de faire une affectation du genre :
$_SESSION["nomVariable"] = valeur (le nom de la variable est entre simple ou double
quottes et sans $). Pour supprimer une variable de la session on utilise la fonction unset :
unset ($_SESSION["nomVariable"]). Pour fermer la session on utilise session_destroy().
Ceci détruit toutes les variables enregistrées dans la session.
Pour tester l’effet, ouvrez le script 1 puis cliquez sur le lien pour passer au script 2, puis
cliquez pour passer au script 3 puis 4.
Le script 1 commence par ouvrir une session. Les deux variables $nom et $prenom sont
enregistrées dans la session mais pas la variable $age. C’est pour quoi dans le script 2 on
peut afficher les deux premières variables mais si on essaye d’afficher $age, on trouve
qu’elle est vide.
Dans le script 2, nous avons utilisé la fonction unset() pour supprimer de la session la
variable $prenom. Cette variable comme vous allez remarquer n’est plus disponible dans le
script 3 contrairement à la variable $nom.
Dans le script 3, nous avons détruit la session avec session_destroy(). Ainsi la session est
supprimée et aucune de ses variables n’est disponible. C’est pour cela, dans le script 4 on ne
voit que le mot Bonjour, les autres variables sont considérées vides. La fonction
session_start() dans ce script ouvre une nouvelle session. En effet, session_start() donne
accès à une session qui est déjà ouverte, s’il n’y en a pas, il ouvre une nouvelle session.
154
Chapitre 6 : Passage de paramètres à un script
Toute application web qui se respecte a souvent besoin d’échanger les données avec les
utilisateurs. Elle collecte les informations d’auprès des utilisateurs, elle les traite, puis génère
de nouvelles pages qui présentent aux utilisateurs le résultat voulu.
Du côté client, les utilisateurs ne se contentent pas de demander des pages au serveur, ils
peuvent envoyer des données via les formulaires.
La mission principale de PHP est de faire tous les traitements nécessaires du côté serveur, y
compris la réception des données envoyées par les utilisateurs et leur manipulation. Cette
manipulation fait appelle le plus souvent aux bases de données.
Dans ce chapitre, nous allons voir comment on peut envoyer des données du côté client au
côté serveur. Ceci passe à travers le passage de paramètres d’un script à un autre. La
question ici est comment peut-on récupérer dans un script une variable définie dans un
autre. Ensuite, nous allons voir comment interfacer notre application web avec le serveur de
bases de données.
1) Passage des données avec la méthode POST :

Supposons que vous voulez demander aux utilisateurs de votre application leurs noms et
prénoms. La façon naturelle de faire ceci est de créer une page avec un formulaire comme
ceci :
<html>
<body>
<b>Entrez votre nom et prénom:</b>
<form action="welcome.php" method="post">
Nom: <input type="text" name="N"/><br />
Prénom: <input type="text" name="P"/><br />
<input type="submit" value = "Envoyer"/>
</form>
</body>
</html>
155
Les éléments principaux de ce formulaire sont les suivant :
1. L’action du formulaire : c’est le nom du script qui sera exécuter quand le formulaire
sera soumis. C’est le script qui va se charger de recevoir les données et de faire le
traitement nécessaire. C’est dans ce script que nous allons mettre l’essentiel du code.
Il est à noter que l’action par défaut et la page en cours.
2. la méthode du formulaire : La soumission du formulaire est en fait une nouvelle
requête qui demande l’exécution d’un autre script. Cette nouvelle requête est en
général, soit de type GET soit de Type POST. La méthode de la requête précise au
serveur comment les données sont envoyées. Dans les requêtes GET, les données
sont envoyées dans l’entête de la requête comme partie de l’URL. Dans les requêtes
POST, les données sont stockées dans le corps de la requête. Dans les deux cas, les
données sont envoyées sous forme de paires variable/valeur. Le script qui recevra les
données doit savoir au préalable quelle est la méthode utilisée car la réception des
données de l’autre côté en dépend. La méthode par défaut est GET.
3. Les noms des différents champs : Les champs du formulaire sont le moyen à travers
lequel l’utilisateur va envoyer les données. Les noms de ces champs vont être
transformés en noms de variables.
4. Les valeurs des différents champs : La valeur des champs (saisies par l’utilisateur, ou
valeurs par défaut) seront affectées aux variables correspondantes.
5. Le bouton de type submit : C’est ce bouton qui déclenche l’envoi. Dès le clic dessus,
une nouvelle requête est lancée avec la méthode spécifiée. Cette requête demande le
script spécifié dans l’action du formulaire. Il est à noter qu’il est possible d’envoyer
le formulaire sans cliquer sur le bouton (en simulant le clique avec javascript par
exemple, par la méthode submit() de l’objet form).
Voici à quoi ressemble le résultat de ce formulaire affiché et rempli par un utilisateur :
Une fois que l’utilisateur clique sur le bouton Envoyer, le navigateur crée une nouvelle
requête avec la méthode POST qui demande d’exécuter le script Welcome.php, tout en
mettant dans le corps de la requête les paires de variable/valeur : N=Zinedine , P=Ahmed.
Voici le résultat que recevra l’utilisateur après l’envoi :
156
Voyons maintenant à quoi ressemble le script Welcome.php qui va recevoir les données :
<?php
$leNom= $_POST["N"];
$lePrenom= $_POST["P"];
?>
<html>
<body>
<?php echo "Bonjour $leNom $lePrenom" ; ?>
</body>
</html>
157
Ou d’un manière complètement équivalente:
<html>
<body>
Bonjour <?php echo $_POST["N"] . " " . $_POST["P"]; ?>
</body>
</html>
Ce script accède au tableau associative prédéfini super global $_POST. PHP stocke dans ce
tableau toutes les variables envoyées par la méthode POST et les rendent ainsi accessibles
aux autres scripts. Il est maintenant facile à deviner qu’un autre tableau associative
prédéfini super global qui s’appelle $_GET est consacré au variables envoyées par la
méthode GET.
2) Passage des données avec la méthode GET :

Il est parfaitement possible de reprendre le même formulaire précédent et remplacer la
méthode POST par la méthode GET. Tout continue à fonctionner à condition de faire le
changement nécessaire dans le script welcome.php en remplaçant le tableau $_POST par le
tableau $_GET pour recevoir correctement les données. Mais, il est recommandé d’utiliser la
méthode post dans les formulaires qui contiennent beaucoup de données ou qui nécessitent
un minimum de sécurité car les données dans ces requêtes sont incluses dans le corps de la
requête. Par contre, dans les requêtes GET, les données sont envoyées en claire dans le URL
et donc visible par tout le monde. Aussi, dans la pratique la longueur de l’URL que les
navigateurs peuvent gérer est limitée.
La méthode GET est la méthode par défaut des navigateurs. Les requêtes GET sont faciles à
établir car leur corps est toujours vide. Toute l’information à circuler est encodée dans
l’entête. Si une requête de ce type veut passer des paramètres au script demandé alors elle
l’encode comme partie de l’URL. Par exemple, pour obtenir un résultat similaire au
paragraphe précédent, en pourrait passer le nom est le prénom dans une URL comme suit :
http://loclhost/welcome.php?N=zinedine&P=Ahmed
La partie de l’URL qui suit le point d’interrogation « ? » contient les données sous forme de
paires variable=valeur concaténées par « & » (Remarquez qu’il n’y a pas d’espace blanc).
Dans la pratique, ce mécanisme est mis en œuvre en créant des liens hypertextes qui
pointent vers des URL comme la précédente. Examinez l’exemple suivant :
158
<html>
<body>
<h1>Saluer nos étudiants:</h1>
<ol>
<li>
<a href ="welcome2.php?N=Moujtahid&P=Moujidd">Moujtahid Moujidd</a>
</li>
<li>
<a href ="welcome2.php?N=Omari&P=Omar">Omari Omar</a>
</li>
<li>
<a href ="welcome2.php?N=Kaddouri&P=Kaddour">Kaddouri Kaddour</a>
</li>
<li>
<a href ="welcome2.php?N=Jallouli&P=Jalloul">Jallouli Jalloul</a>
</li>
<li>
<a href ="welcome2.php?N=Kaslani&P=Kassoul">Kaslani Kassoul</a>
</li>
</ol>
</body>
</html>
159
Le résultat de ce script affiche la page suivante :
Quand un utilisateur clique sur un étudiant particulier, alors le navigateur lance une
nouvelle requête GET pour demander l’exécution du script welcome2.php en lui passant
deux variable N et P avec les valeurs correspondante à cet étudiant particulier :
Voilà à quoi ressemble le code du script Welcome2.php. La seule différence avec le script
welcome.php est l’utilisation du tableau super global $_GET au lieu de $_POST :
<html>
<body>
Bonjour <?php echo $_GET["N"] . " " . $_GET["P"]; ?>
</body>
</html>
160
Chapitre 7: Accès aux bases de données
Dans la pratique on ne demande pas aux utilisateurs leurs informations, seulement pour
leur dire bonjour. Dans la pratique, toute application qui se respecte gère un ensemble de
données qu’elle stocke dans une base de données. Les utilisateurs de l’application accèdent
alors via l’interface web et peuvent insérer de nouvelles données ou modifier, supprimer des
données existantes ou tout simplement chercher et afficher les informations stockées.
Les bases de données sont gérer d’habitude par des logiciels tiers (les SGBD). PHP dispose
de toutes les APIs nécessaires pour interfacer votre application avec la plupart des SGBD
connus. Dans ce cours nous allons utiliser le SGBD MySQL le plus répondu dans le domaine
des applications PHP. L’utilisation de tout autre produit est presque immédiate.
1) Création de Bases de données et de tables

Pour les exemples de ce cours, nous allons créer une base de données nommée SMI qui
contient une table Etudiant (Code varchar(10) Primary key, Nom varchar(30) Not Null,
Prenom varchar(30) Not Null, Filiere).
Pour cela, nous allons utiliser l’outil PhpMyAdmin. Dans la section Module du tableau de
bord de EasyPHP Devserver, cliquez sur Open pour lancer PhpMyAdmin :
PhpMyAdmin est un outil très efficace. Son interface web est très intuitive :
161
Pour créer une nouvelle base de données, il suffit de cliquer sur le lien « Nouvelle base de
données » et entrer un nom dans le champ consacré , puis cliquer sur Créer. Les bases de
données déjà disponibles apparaissent dans l’arborescence dans le panneau de gauche. Pour
supprimer une base de données, il suffit de cocher sa case à cocher puis cliquer sur le lien
« Supprimer ».
Pour entrer dans une base de données spécifique, cliquez sur son nom dans le panneau de
gauche. Ceci va vous donner l’accès à toutes les commandes que vous pouvez faire dans
cette base de données. Par exemple y créer des tables et manipuler les données.
162
Comme vous pouvez le remarquez, sous l’arborescence de la base de données créée, figurent
toutes les tables déjà créée, et un bouton pour créer d’autres. Des commandes pour gérer les
tables existantes (manipuler les données, modifier la structure ou supprimer carrément la
table) sont disponibles. Pour créer une nouvelle table, donnez son nom et préciser le nombre
de champ, puis cliquez sur exécuter pour afficher l’étape suivante dans laquelle vous
préciser les caractéristiques de chaque champs.
Une fois la table est créée vous pouvez modifier sa structure à tout moment. Vous pouvez
aussi y insérer directement des enregistrements et les manipuler à votre guise. Mais, dans la
pratique, la manipulation des données et une tâche quotidienne destinée aux utilisateurs
163
finaux et qui est gérée normalement à travers votre application PHP. L’objectif du reste du
cours est de vous monter comment vous pouvez le faire.
2) PHP Data Objects (PDO)

PHP offre trois façons différentes pour se connecter et manipuler les données d’une Bases
de données MySQL à savoir en utilisant les APIs suivantes :
1. L’ extension MySQL : obsolète et ne plus maintenues depuis 2012 ;

2. L’extension MySQLi (MySQL improved) : permet de gérer une base de données MySQL,
mais, si vous migrez vers un autre SGBD, tout votre code PHP doit être réécrit.
3. L’extension PDO : C’est un acronyme pour PHP Data Objects. Cette API offre un moyen
simple et cohérent d'accéder aux différentes bases de données. Cela signifie que les
développeurs peuvent écrire du code portable beaucoup plus facilement. PDO
fonctionnera sur 12 systèmes de base de données différents, alors que MySQLi ne
fonctionnera qu'avec MySQL. Avec PDO, il suffit de changer la chaîne de connexion dans
votre code pour migrer d’un SGBD à un autre, tout le reste du code reste intact.
Nous allons travailler avec PDO. Pour cela , vérifiez que la bibliothèque php_pdo.dll est
installée (ce qui est le cas généralement dans les nouvelles versions). Dans le fichier de
configuration de PHP php.ini, Vous devez activer (dé-commenter) la ligne qui correspond à
l’SGBD que vous voulez utiliser (par exemple : php_pdo_mysql.dll pour MySQL) :
3) Connexion à la base de données

Pour toute action dans la base de données, il faut d’abord se connecter. Ceci consiste à
instancier une nouvelle instance de la classe PDO en lui passant, un login et un mot de passe
valide et une chaîne de connexion ( qui précise le driver utilisé –dans notre cas = mysql, le
serveur et éventuellement le port de MySQL (3306 par défaut), et le nom de la base de
données)
<?php
//connexion à la base de données
164
$user = 'root';
$password = 'motDePasse';
$db = 'mysql:host=localhost:3307;dbname=SMI';
try {
$cn = new PDO($db, $user, $password);
Echo "Connexion bien établie" ;
catch (PDOException $dbex) {
die("Erreur de connexion : " . $dbex->getMessage() );
?>
Dans cet exemple, le script utilisera le login « root » et le mot de passe « motDePasse » pour
se connecter à MySQL qui écoute sur le port 3307 sur le serveur localhost. La base de
données voulue est nommée SMI. Si tout se passe bien le message « Connexion bien
établie » est affiché. Sinon, une exception est levée et le message de l’exception est affiché.
4) Manipuler les données

Le script suivant insère un enregistrement dans la table Etudiant :
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
165
///////////////////////////
//Exécution de la requête
////////////////////////
$Rq = "insert into Etudiant values ('E1', 'Moujtahid', 'Mouj','SMI')";
$cn->exec($Rq);
echo "Tout s’est bien passé";
?>
La première partie du script est déjà vue. Il s’agit de créer une connexion à la base de
données (on la stocke dans l’objet $cn). La deuxième partie appelle la méthode exec de
l’objet $cn. Cette méthode accepte en paramètre une chaine de caractère qui n’est rien
d’autre qu’une requête SQL. PHP va passer cette requête à MySQL qui connait parfaitement
comment la traiter.
Pour modifier ou supprimer un étudiant, rien à modifier dans le script à part la requête
SQL : on remplace l’instruction insert par un update ou delete.
Par exemple, le script suivant corrige le prénom de l’étudiant 'E1' , le nouveau prénom est
'Moujidd' :
<?php
166
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
try {
///////////////////////////
////////////////////////
$Rq = "update Etudiant set Prenom='Moujidd' = where Code='E1' ";
$cn->exec($Rq);
?>
Et pour supprimer cet étudiant, on peut faire :
167
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
try {
///////////////////////////
////////////////////////
$Rq = "delete from Etudiant Where Code='E1';
$cn->exec($Rq);
?>
168
Dans la pratique, l’utilisateur se serve généralement de l’interface de l’application pour

manipuler les données. Par exemple, pour insérer des étudiants, on peut utiliser un
formulaire comme celui-ci :
Voilà son code :
<html>
<body>
<h1>Ajouter un étudiant:</h1>
<form action="insert.php" method="post">
<pre>
Code: <input type="text" name="C"><br />
Nom: <input type="text" name="N"><br />
Prénom: <input type="text" name="P"><br />
Filière: <select name="F">
<option value = "SMI">Sciences mathématiques et Informatique</option>
<option value = "SMA">Sciences mathématiques et Application</option>
<option value = "SMP">Sciences de la matière Physique</option>
169
</select>
<input type="submit" value = "Envoyer">
</pre>
</form>
</body>
</html>
Quand l’utilisateur clique sur le bouton Envoyer, le formulaire est soumis par la méthode
POST à un script nommé insert.php qui va se charger d’insérer les données dans la table
Etudiant :
Voici à quoi ressemble le code du script Insert.php :
<?php
///////////////////////////
//récupérer les données envoyés par l’utilisateur dans des variables :
//normalement, on doit valider ici les données avant de les consommer,
//nous omettons ici la validation pour des raisons de simplicité
$code= $_POST["C"] ;
$nom= $_POST["N"] ;
$prenom=$_POST["P"] ;
$filiere= $_POST["F"] ;
///////////////////////////
////////////////////////
170
$user = 'root';
$password = '';
try {
///////////////////////////
////////////////////////
$Rq = "insert into Etudiant values ('$code', '$nom', '$prenom','$filiere')";
$cn->exec($Rq);
?>
Ce code marche parfaitement, mais pour des raisons de sécurité, il est recommandé de
préparer les requêtes SQL avant de les exécuter. Ceci consiste à changer notre code comme
suit :
///////////////////////////
171
////////////////////////
$Rq = $cn->prepare("insert into Etudiant values ( ?, ?, ?, ?)");
$Rq->execute([$code,$nom,$prenom,$filiere]);
Dans ce code, en passe à la méthode prepare de l’objet $cn la requête SQL, mais sans les
valeurs réelles : juste des points d’interrogation qui jouent le rôle de « placeholder »
générique. PHP passe cette requête à MySQL pour la compiler. Les valeurs réelle vont être
passé séparément dans un tableau par la méthode execute de l’objet $Rq. Cette façon
d’exécution des requêtes augmente énormément la sécurité en éliminant les attaques par
injections SQL largement connues. Elle augmente aussi les performances du SGBD surtout
pour les requêtes répétitives : le SGBD compile une seule fois pour toutes et réutilise le
résultat tant que nécessaires.
5) Afficher le résultat d’une requête

Pour afficher les données d’une table, le principe est le même, à une différence près : on
utilise maintenant la méthode query au lieu de exec. De plus, la requête retourne
maintenant des enregistrements à afficher. Nous devons donc savoir comment parcourir le
résultat pour l’exploiter.
Supposons que nous voulons afficher tous les étudiants de la filière 'SMI', sous forme d’un
tableau HTML comme le montre la capture d’écran suivante :
172
C’est le résultat du script suivant :
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
try {
173
///////////////////////////
////////////////////////
$Rq = "Select * from Etudiant Where filiere='SMI'";
$resultat= $cn->query($Rq);
///////////////////////////
////////////////////////
?>
<html>
<body>
<div align ="center">
<h1>Liste des étudiants</h1>
<table border = "1" bordercolor="red" cellspacing ="0" cellpadding="10">
<tr><th>Code</th><th>Nom</th><th> Prénom</th><th>Filière</th></tr>
<?php foreach ($resultat as $row) { ?>
<tr>
<td><?= $row["Code"] ?></td>
174
<td><?= $row["Nom"] ?></td>
<td><?= $row["Prenom"] ?></td>
<td><?= $row["Filiere"] ?></td>
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
Dans cet exemple, le résultat de la requête est stocké dans la variable $résultat. C’est un
tableau qui contient généralement plusieurs lignes (un étudiant par ligne). La boucle
foreach permet de parcourir ce tableau en prenant une ligne à la fois en la mettant dans la
variable temporaire $row. Cette variable est un tableau associatif qui contient l’étudiant en
cours. Les clés de ce tableau sont les noms des camps de la table Etudiant. Le reste n’est rien
que du HTML pour formater la sortie.
Nous allons améliorer cet exemple en ajoutant devant chaque étudiant des commandes pour
le manipuler. Le résultat attendu ressemble à ceci :
175
Pour mettre ceci en œuvre, nous auront besoin de deux scripts Modifier.php et
Supprimer.php qui attendent le code d’un étudiant par la méthode GET et font l’action
indiquée. Par exemple, pour supprimer un étudiant, il suffit de cliquer sur le lien Supprimer
de la ligne correspondante. Ce lien va exécuter le script supprimer.php en lui passant le code
de l’étudiant à supprimer. Le lien à générer pour supprimer l’étudiant E5 doit être
finalement comme suit :
<a href="supprimer.php?Code=E5" >Supprimer</a>
Ces liens doivent bien sûr se générer automatiquement lors de l’affichage de la liste. Le code
suivant montre les modifications apportées à l’affichage précédent pour afficher les liens
Modifier et Supprimer :
<?php foreach ($resultat as $row) { ?>
<tr>
<td><?= $row["Code"] ?></td>
<td><?= $row["Nom"] ?></td>
176
<td><?= $row["Prenom"] ?></td>
<td><?= $row["Filiere"] ?></td>
<td><a href="modifier.php?Code=<?= $row['id'] ?>" >Modifier</a></td>
<td><a href="supprimer.php?Code=<?= $row['id'] ?>">Supprimer</a></td>
</tr>
<?php } ?>
….
….
Le listing suivant donne un exemple de code pour le script Supprimer.php :
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
try {
///////////////////////////
177
////////////////////////
$code= $_GET["Code"] ;
$cn->exec("delete from Etudiant where Code ='$code' ");
echo "L’étudiant du code $code a été supprimé avec succès";
?>
Ou si vous voulez préparer la requête comme recommandé :
////////////////////////
$code= $_GET["Code"] ;
$Rq= $cn->prepare("delete from Etudiant where Code =? ");
$Rq->execute($code])
echo "L’étudiant du code $code a été supprimé avec succès";
Pour récapituler, nous pouvons mettre toute la couche d’accès aux données de notre
application dans un seul fichier « model.php » sous forme de fonctions qui fournissent les
actions de base nécessaires pour toute application qui gère une base de données, à savoir :
se connecter à la base, ajouter un nouveau enregistrement, modifier, supprimer et chercher
un enregistrement particulier et enfin afficher la liste de tous les enregistrements :
178
<?php
function ouvrirConnexion(){
$user = 'root';
$password = 'motDePasse';
try {
return $cn;
function AjouterEtudiant($t) {
$cn = ouvrirConnexion();
$Rq = $cn->prepare("insert into Etudiant values (?,?,?)");
$Rq->execute([$t["C"],$t["N"],$t["P"]]);
function ModifierEtudiant($t) {
$Rq = $cn->prepare("update Etudiant
set Code=?, Nom=?, Prénom =?, Filiere=?
where Code =?
179
");
$Rq->execute([$t["C"],$t["N"],$t["P"],$t['oldC']]);
function SupprimerEtudiant($c) {
$Rq = $cn->prepare("delete from Etudiant where Code=?");
$Rq->execute([$t["C"]]);
function AfficherEtudiant($c) {
return $cn->query("select * from Etudiant where Code='" . $c . "'");
function listeEtudiants() {
return ouvrirConnexion()->query("select * from Etudiant");
180

Polycopié Web Dynamique

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Polycopié Web Dynamique

Transféré par

Droits d'auteur :

Formats disponibles

Web Dynamique

Pour les étudiants de SMI

Pour les étudiants de SMI

Ce cours est destiné aux étudiants de SMI (Sciences mathématiques et

Après une introduction sur l’historique de l’Internet et du Web, nous avons

La première partie contient 2 chapitres. Le chapitre 1 présente en détaille le

Dans la partie 2, qui contient le chapitre 3, nous étudions le langage Javascript,

Dans la partie 3, qui contient les chapitres 4, 5, 6 et 7, nous étudions le langage

Pour toute remarque, suggestion commentaire ou correction, merci de contacter

Table des matières

b) Les paragraphes ............................................................................................................................ 28

1) Comment insérer du code javascript dans une page HTML ...................................................... 65

2) fonctions pour la gestion des variables .........................................................................................125

En 1969 et en pleine guerre froide, le DoD (Departement of Defence) demanda à l’ARPA

En 1983, l’agence de la communication de la défense décide d’ouvrir le réseau grandissant

En 1986, la National Science Foundation crée son propre réseau le NSFNET.

b) Communication sur Internet

c) Les services internet

Connexion à distance (Telnet)

Transfert de fichiers (FTP)

En utilisant le protocole FTP (File Transfert Protocol) un utilisateur peut transférer

Le World Wide Web

Que pouvons-nous y trouver ? Tout ce que vous pourriez imaginer : de la littérature,

d) Architecture Client / Serveur

2) Le World Wide Web

La simplicité du langage HTML proposé séduisait les utilisateurs. Et en 1993, le CERN et

c) Web et architecture Client / Serveur

d) Les langages du Web

Après la version 4 du HTML, le W3C a sorti un nouveau langage appelé XHTLM

En 2014 la recommandation officielle du HTML 5 est sortie. Cette version a révolutionné la

Le langage CSS (Cascading Style Sheets) a augmenté considérablement les possibilités du

Chapitre 1 : Le langage HTML

b) Qu’est-ce que HTML ?

Ce n'est pas un langage de programmation, mais un langage de mise en forme de données :

En 2014 la recommandation officielle du HTML 5 est sortie. Cette version a révolutionné la

c) Comment insérer du code HTML ?

d) Qu’est-ce que une balise ?

e) Qu’est-ce que un attribut ?

<balise attribut1= "valeur1" attribut2 = "valeur2" attribut3 = "valeur3" > …..</balise>

1) Structure d’une page HTML

1) La page commence donc par ce qu’en appelle « la déclaration du type du

a) La section entête (Head) :

Elle est simplifiée en HTML5 et permet de spécifier l’encodage du document.

Le titre est affiché ici

b) La partie Corps du document (Body)

 La couleur par défaut du texte de toute la page ;

Vous pouvez spécifier une image comme arrière-plan.

2) Le texte dans une page HTML

Il n’y a pas de retour

d) Les caractères accentués et caractères spéciaux

Voilà les principaux caractères et entités dont vous aurez besoin :

e) La mise en forme du texte

Tout texte mis entre <b> et </b> s’affiche en gras.

L’italique avec la balise <i>…</i>

Pour mettre du texte en italique, il suffit de le mettre entre <i> et </i>.

Texte mis en valeur

Texte en indice avec la balise <sub>…</sub>

Texte en exposant avec la balise <sup>…</sup>

<b><i>Ce texte est en gras, italique </b></i>

Voilà l’écriture correcte :

<b><i>Ce texte est en gras, italique </i></b>

f) Autres balises de style

3) Structuration d’une page HTML