Cour WEB Bba

Beghoura Mohamed Amine Développement d’Applications Web
2ème Année Licence Informatique
Partie1
Introduction au World Wide Web
Le réseau Internet est un réseau de machines (ordinateurs, serveurs, etc.) interconnectées et
qui offre une variété de services tels que : courriers électroniques, transfert de fichiers et le
web.
Dans cette première partie, nous allons voir essentiellement les bases du web. Nous allons
couvrir le web, ce que c’est, à quoi il ressemble, commentet comment se forment ses
principales composantes.
Nous allons parler de HTML, qui est le principal type de document sur le web. Nous allons
voir le principe des URLs qui sont la façon dont vous vous référez aux documents sur le web.
Nous parlerons du protocole http qui unit le web. Et puis, nous allons parler des applications
Web.
1. Définition et Historique
“The World Wide Web (WWW, W3) is an information system of interlinked hypertext documents that
are accessed via the Internet. It has also commonly become known simply as the Web. Individual
document pages on the World Wide Web are called web pages and are accessed with a software
application running on the user's computer, commonly called a web browser. Web pages may contain
text, images, videos, and other multimedia components, as well as web navigation features consisting
of hyperlinks.”(Extrait du Wikipedia : http://en.wikipedia.org/wiki/World_Wide_Web)
Le World Wide Web (WWW, W3) est définit comme étant un système d’information constitué
d’un ensemble de documents HyperText interdépendants etdisponibles sur le réseau Internet.
Ces documents sont appelés pages web, ils sont accessibles à travers un navigateur (Browser
en Anglais) ou bien un client web. Ces pages web peuvent contenir du texte, des images, des
vidéos ou autres composants.
Le World Wide Web est une collection de documents. Ces documents sont formés avec ce
qu’on appelle « HTML », qui signifie HyperText MarkupLanguage. HTML est la base
pour presque toutes les pages Web (Même s’il peut y avoir des documents, images, vidéos,
etc).
1
Beghoura Mohamed Amine Développement d’Applications
d’Appl Web
Figure 1. Page web principales contenant des liens vers d’autres pages du site web http://www.w3schools.com
http://
Note :Ne
Ne pas confondre entre le World Wide Web et le terme Internet qui est le réseau
informatique mondial accessible au public principalement composé par des millions de
réseaux aussi bien publics que privés.
L’histoire
toire du web a commencé avec Tim Berners-Leequi est un informaticien britannique et
ancien employé du CERN. Il est considéré comme l'inventeur du Web. En Mars
1989,Berners-Lee
Lee a écrit une proposition de ce qui allait devenir le World Wide Web. La
proposition
sition de 1989 a été conçuepour
conçu pour un système de communication plus efficace pour
l’entreprise CERN. Par contre, Tim Berners-Lee a réalisé que le concept qu’il a proposé
pourrait être déployé à travers le monde.
Berners-Lee et un autre informaticien belge (Robert Cailliau) ont proposé le concept du

WWWen 1990et qui consiste à utiliser des documents hypertextepour relier et accéder à des
informations sur un réseau de nœuds dans lequel l'utilisateur
l'utilis peut naviguer
guer d’un document à
un autre à volonté.
Berners-Lee a terminé le premier site en Décembre cette année. Le premier test a été effectué
en Décembre 1990 et Berners-Lee
Berners Lee a rapporté sur le projet sur le newsgroup alt.hypertexten
alt.hypertext
Août 1991.
2. Architecture Client/serveur
Un ensemble de pages web et de ressources liées forment un site web (de l'anglais web
site) qui est accessible via une adresse web.. Un site web est hébergé sur un serveur web, lui-
même accessible en utilisant un client web via un réseau internet ou intranet.
intranet
Le Web est un service Internet qui fonctionne selon les règles de l’architecture
client/serveur.Un émetteurr (client) envoie une requêteHTTP sous forme d’un lien URL vers
un serveur qui répond par l’envoie du fichier demandé et qui sera visualisé sur le navigateur
du client (figure 2).
2
d’Appl Web
Figure 2. Fonctionnement du Web
La communication entre le navigateur et le l serveur se fait en deux temps (figure 2) :

- Le navigateur effectue une requête HTTP (exemple : demande d’affichage de la page
index.html)
- Le serveur traite la requête puis envoie une réponse HTTP (le serveur envoie la page
index.html au client web)
- Le navigateur
vigateur interprète et affiche alors les pages à l'utilisateur.
Un serveur Web: est un serveur informatique utilisé pour héberger des sites
web sur Internet ou un intranet.
intranet
L'expression « serveur Web » désigne également le logiciel utilisé sur le serveur pour
exécuter les requêtes HTTP qui est le protocole de communication employé sur le World
Wide Web. La fonction principale d'un serveur Web est de stocker et délivrer des pages
Web qui sont généralement écrites en HTML.
Il existe plusieurs serveurs web à l’exemple de :

• Apache HTTP Server de la « Apache Software Foundation »
• Apache Tomcat de la Apache Software Foundation, évolution de Apache pour J2EE ;
• Google Web Server de Google ;
• Internet Information Services (IIS) de Microsoft ;
Un Client Web est l’outil permettant d’accéder aux documents HyperText disponibles
disponible sur le
Web à l’exemple du navigateur.
navigateur
Les deux navigateurs (Figure

igure 3) les plus utilisés aujourd'hui sont Firefox (Mozilla) et Chrome
(Google).
3
d’Appl Web
Figure 3. Logo de Firefox, Chrome et Opera
Le fonctionnement d’un ’un navigateur est de la façon suivante : Le navigateur désigne une
page web par son adresse URL (Uniform Resource Locator) qui contient à la fois le nom
d'une machine mais aussi le nom du service demandé, le nom du document,…etc.Le
document,…etc. serveur
répond aux demandes en envoyant les pages au navigateur Web. Le navigateur
navigat interprète et
affiche alors les pages à l'utilisateur (Figure 4).
Figure 4. Fonctionnement d’un Navigateur
URL(Uniform
Uniform Resource Locator)est
Locator est un identifiant unique qui désigne une page appartenant à
un site web. Voici un exemple de format d'adresse URL:
U
http://www.exemple.com/test
http://www.exemple.com/test-dir/index.html?var1=temp1&var2=temp2
?var1=temp1&var2=temp2
• http:// : Le protocole de communication

• www.exemple.com:: Le nom du domaine (DNS, unique)
• Test-dir: Répertoire sur la machine
• Index.html: Nom du document à afficher sur le navigateur
• ?var1=temp1&var2=temp2 : des paramètres additionnels pour accéder à la
ressource index.htmlou ou « ? » est un séparateur qui indique la liste des paramètres
(var1 et var2 dans l’exemple) et le « & » est un séparateur qui est utilisé pour les
variables
4
3. Protocole HTTP
Le protocole HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur Internet
depuis 1990.
La version 0.9 était uniquement destinée à transférer des données sur Internet (en particulier
des pages Web écrites en HTML.
La version 1.0 du protocole (la plus utilisée) permet de transférer des messages avec des en-
têtes décrivant le contenu du message en utilisant un codage de type MIME (Multipurpose
Internet Mail Extensions).
Le but du protocole HTTP est de permettre un transfert de fichiers (essentiellement au

format HTML) localisés grâce à une chaîne de caractères appelée URL entre un navigateur (le
client web) et un serveur Web.
3.1 Requête HTTP

Une requête HTTP est un ensemble de lignes envoyé au serveur par le navigateur. Elle
comprend :
• Une ligne de requête: c'est une ligne précisant

o la méthode qui doit être appliquée,
o le chemin du document demandé,
o et la version du protocole utilisée.
• Les champs d'en-tête de la requête: il s'agit d'un ensemble de lignes facultatives
permettant de donner des informations supplémentaires sur la requête et/ou le client
(exemple : le nom du navigateur, système d'exploitation, ...etc). Chacune de ces lignes
est composée d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la
valeur de l'en-tête.
• Le corps de la requête: c'est un ensemble de lignes optionnelles devant être séparées
des lignes précédentes par une ligne vide.
Ligne de requête
Champs d'en-tête1: valeur1
Le corps de la Requête
Les méthodes de requêtes http qui peuvent être utilisées sont présentées dans la table suivante
(table 1) :
Méthode Description
GET Requête de la ressource située à l'URL spécifiée
HEAD Requête de l'en-tête de la ressource située à l'URL spécifiée
POST Envoi de données au programme situé à l'URL spécifiée
PUT Envoi de données à l'URL spécifiée
DELETE Suppression de la ressource située à l'URL spécifiée
Table 1, méthodes et descriptions des requêtes HTTP
5
Les champs d’en-têtes sont présentés dans la table 2 :
Nom de l'en-tête Description

Type de contenu accepté par le browser (par exempletext/html). Voir types
Accept
MIMEhttp://fr.wikipedia.org/wiki/Type_MIME
Accept-Charset Jeu de caractères attendu par le browser
Accept-Encoding Codage de données accepté par le browser
Accept-Language Langage attendu par le browser (anglais par défaut)
Authorization Identification du browser auprès du serveur
Content-Encoding Type de codage du corps de la requête
Content-Language Type de langage du corps de la requête
Content-Length Longueur du corps de la requête
Content-Type Type de contenu du corps de la requête (par exempletext/html). Voir types MIME
Date Date de début de transfert des données
Forwarded Utilisé par les machines intermédiaires entre le browser et le serveur
From Permet de spécifier l'adresse e-mail du client
Permet de spécifier que le document doit être envoyé s'il a été modifié depuis une
From
certaine date
Link Relation entre deux URL
Orig-URL URL d'origine de la requête
Referer URL du lien à partir duquel la requête a été effectuée
Chaîne donnant des informations sur le client, comme le nom et la version du
User-Agent
navigateur, du système d'exploitation
Table 2, entêtes des requêtes HTTP
Exemple:
GET http://www.exemple.comHTTP/1.0
Accept: text/html
If-Modified-Since: Saturday, 15-January-2015 14:37:11 GMT
User-Agent: Mozilla/23.0
3.2 RéponseHTTP
Une réponse HTTP est un ensemble de lignes envoyées au Client Web par le serveur. Elle
comprend :
• Une ligne de statut: c'est une ligne précisant la version du protocole utilisé et l'état du
traitement de la requêteà l'aide d'uncode et d'un Message explicatif.
• Les champs d'en-tête de la réponse: il s'agit d'un ensemble de lignes facultatives
permettant de donner des informations supplémentaires sur la réponse et/ou le serveur.
Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de
deux points (:) et de la valeur de l'en-tête
• Le corps de la réponse: il contient le document demandé
6
Ligne de statut
Le corps de la Réponse
Les codes et les Messages de réponse http sont présentés dans la table 3 :
Code Message Description

200 OK La requête a été accomplie correctement
Elle suit une commande POST, elle indique la réussite, le corps du reste du document est
201 CREATED
sensé indiquer l'URL à laquelle le document nouvellement créé devrait se trouver.
202 ACCEPTED La requête a été acceptée, mais la procédure qui suit n'a pas été accomplie
PARTIAL Lorsque ce code est reçu en réponse à une commande GET, cela indique que la réponse n'est
203
INFORMATION pas complète.
204 NO RESPONSE Le serveur a reçu la requête mais il n'y a pas d'information à renvoyer
205 RESET CONTENT Le serveur indique au navigateur de supprimer le contenu des champs d'un formulaire
PARTIAL Il s'agit d'une réponse à une requête comportant l'en-tête range. Le serveur doit indiquer l'en-
206
CONTENT tête content-Range
30x Redirection Ces codes indiquent que la ressource n'est plus à l'emplacement indiqué
301 MOVED Les données demandées ont été transférées à une nouvelle adresse
Les données demandées sont à une nouvelle URL, mais ont cependant peut-être été déplacées
302 FOUND
depuis...
Cela implique que le client doit essayer une nouvelle adresse, en essayant de préférence une
303 METHOD
autre méthode que GET
Si le client a effectué une commande GETconditionnelle (en demandant si le document a été
304 NOT MODIFIED
modifié depuis la dernière fois) et que le document n'a pas été modifié il renvoie ce code.
40x Erreur due au client Ces codes indiquent que la requête est incorrecte
400 BAD REQUEST La syntaxe de la requête est mal formulée ou est impossible à satisfaire
Le paramètre du message donne les spécifications des formes d'autorisation acceptables. Le
401 UNAUTHORIZED
client doit reformuler sa requête avec les bonnes données d'autorisation
PAYMENT
402 Le client doit reformuler sa demande avec les bonnes données de paiement
REQUIRED
403 FORBIDDEN L'accès à la ressource est tout simplement interdit
404 NOT FOUND Le serveur n'a rien trouvé à l'adresse spécifiée. Parti sans laisser d'adresse... :)
Erreur due au
50x Ces codes indiquent qu'il y a eu une erreur interne du serveur
serveur
INTERNAL Le serveur a rencontré une condition inattendue qui l'a empêché de donner suite à la demande
500
ERROR (comme quoi il leur en arrive des trucs aux serveurs...)
NOT
501 Le serveur ne supporte pas le service demandé (on ne peut pas tout savoir faire...)
IMPLEMENTED
Le serveur a reçu une réponse invalide de la part du serveur auquel il essayait d'accéder en
502 BAD GATEWAY
agissant comme une passerelle ou un proxy
SERVICE Le serveur ne peut pas vous répondre à l'instant présent, car le trafic est trop dense (toutes les
503
UNAVAILABLE lignes de votre correspondant sont occupées veuillez rappeler ultérieurement)
GATEWAY La réponse du serveur a été trop longue vis-à-vis du temps pendant lequel la passerelle était
504
TIMEOUT préparée à l'attendre (le temps qui vous était imparti est maintenant écoulé...)
Table 3 Les codes et les statuts de réponse
7
Les en-têtes qu’une réponse http peut contenir sont :
Nom de l'en-tête Description

Content-Encoding Type de codage du corps de la réponse
Content-Language Type de langage du corps de la réponse
Content-Length Longueur du corps de la réponse
Content-Type Type de contenu du corps de la réponse (par exempletext/html). Voir types MIME
Date Date de début de transfert des données
Expires Date limite de consommation des données
Forwarded Utilisé par les machines intermédiaires entre le browser et le serveur
Location Redirection vers une nouvelle URL associée au document
Server Caractéristiques du serveur ayant envoyé la réponse
Table 4 les en-têtes d’une réponse http
Exemple:
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Content-Type: text/html
Content-Length: 1354
<html>
<body>
<h1>Hello World!</h1>
.
.
.
</body>
</html>
8
d’Appl Web
Partie 2
Langages de programmation pour le Web
Dans cette deuxième partie de la matière développement des applications web, web nous allons
voir des généralités sur ce qu’on appelle page web statique et page web dynamique.
dynamique Nous
allons aussi
si parcourir le principe des langages balise et plus spécifiquement l’HTML et enfin
le XML pour la définition des données.
1. Contenu d’une page Web
Dans la première partie, nous avons parlé

parl du contenu d’une page web ou nous avons vu
qu’une page web peut contenir
enir du texte, des images, des données, des vidéos, etc.
Le contenu d’une page web (sauf les textes, s’ils sont écris directement sur la page) est
simplement relié à la page par des lignes de code (qui marque sa position vis-à-vis
vis du texte et
la page).
Le contenu et la mise en forme d’une page web, tel qu’on le voit sur écran, sont affichés
qu’au moment du chargement de la page au travers d’un navigateur web.
Figure 1, Contenu d’une page web
Figure 1 symbolise la façon dont le contenu d’une page est stocké

stocké sur le serveur.
serveur Tout ce qui
est ressources (images, vidéos,
os, données, etc.) est retenu séparément du code de la page web
sur le serveur. La forme de leur affichage doit être spécifiée dans le code source de la page.
Exemple explicatif :
Quand on crée un document dit « Word (office)», et que l’on intègre une image dessus, celle-
ci se trouve ensuite «contenu » dans le document. On peut ensuite envoyer notre document à
un contact, et celui-ci
ci reçoit l’intégralité du document (texte et photo).
En revanche pour une page web, web l’image que nous voulons que celle-cicelle affiche se
trouvera placée à côté (oudans un dossier séparé) de notre page
age et ce n’est qu’au moment de
9
d’Appl Web
son affichage que le code programmésur la page web ira chercher l’image pour l’afficher.
Si nous voulons donc transmettre notre page web à un de nos contacts,
contacts nous devrons
donc joindre en plus de notre page,
page notre image.
2. Page Statique et Page Dynamique
Un Site Web statique est un site ou chacune des pages est créée en HTML.
HTML
Un ordinateur qui se connecte

necte au serveur, demande une page. Celle ci lui est directement
servie (elle est stockée toute prête sur le serveur)
Figure 2, Page Statique
Une page statique est une page dont l’intégralité du code va être interprété directement par
le navigateur (page
page programmée => page affichée).
Par opposition, un site Web dynamique est un site Web dont les pages sont générées
dynamiquement à la demande..
Le contenu est obtenu en combinant l’utilisation d’un langage de scripts ou de programmation

et une base de données (exemple, le langage PHP et MySQL).
MySQL)
Figure 3. Page Dynamique
Une page dynamique, le serveur sur lequel la page est stockée, devra réaliser des opérations
avant de pouvoir afficher le contenu de la page demandée.On dit que le serveur, en fonction,
10
des « paramètres » (sélection réalisée par l’internaute) génère l’affichage du contenu de

la page web.
Pour unepagewebilexistedestypesd’extensionsdedifférentstels
que:.html,.htm,.php,.aspx,.xmletc.Les pagesditesstatiquesportentengénéralel’extension .html e
t les pagesditesdynamiquesportentl’extension.php,.aspx ou d’autres encore.
Note :Les pages dynamiques sont dites pages sécurisées car on ne peut jamais (à partir
du navigateur ) voir lecode de construction de la page Internet, mais seulement celui de la
page Internet générée (code source visible depuis le navigateur).
3. Les langages de balises
Les langages de balises représentent une classe de langages spécialisés dans l'enrichissement
d'information textuelle. Ils utilisent des balises, unités syntaxiques délimitant des séquences
de caractères à l'intérieur d'un flux de caractères (par exemple un fichier texte).
L'inclusion de balises permet de transférer à la fois la structure du document et son contenu.

Cette structure est compréhensible par un programme informatique, ce qui permet un
traitement automatisé du contenu.
Les langages à base de balisesservent surtout à structurer ou formater des documents. Il

suffit en effet d'encadrer des portions de texte par des balises pour utiliser une fonctionnalité
du langage.
Exemple : en HTML il suffit d'encadrer un mot par les balises <b> et </b> pour qu'il
apparaisse en gras.
Parmi les langages de définition de documents les plus populaires on compte DocBook,
LaTex, XML, HTML
4. HTML
L’HyperTextMarkupLanguage, généralement abrégé HTML, est le format de données

conçu pour représenter les pages web. C’est un langage de balisagepermettant d’écrire de
l’hypertexte, d’où son nom.
HTMLpermet de structurer sémantiquement et de mettre en forme le contenu des pages,

d’inclure des ressourcesmultimédias dont des images, des formulaires de saisie, et des
programmes informatiques.
Note :Un fichier écrit en langage HTML n'est autre qu'un fichier texte, mais dont le contenu
est structuré à l'aide de repères que l'on appelle des éléments. Chaque élément est constitué
de balises et d'attributs qui permettent d'apporter des informations sur son contenu.
La balise est le moyen de communiquer avec le navigateur. Elle apparaît entre les caractères
réservés < et >.
11
HTML possède de nombreux éléments de gestion de l'apparence (ou formatage) de la page

qui se rapprochent de ce que nous connaissons sur les éditeurs de texte : mise en gras (b), en
italique (i), indentation, taille ou couleur des caractères (font).
On trouve dans HTML de quoi structurer les listes, titres, tableaux, citations, adresses... autant
de structures du texte qui ne définissent pas l'apparence finale à l'écran.
Note :les balises (ou tags ou marqueurs) HTML ne s’affiche pas sur la page web, elles sont
interprétées par le navigateur.
Exemple :
Pour déclarer un paragraphe en HTML, on utilise la balise <p> comme suit :
<p>Ceci est un paragraphe.</p>
Il est possible également de déclarer un texte souligné :
<p><u>Ceci est un paragraphe souligné.</u></p>
Le deuxième exemple apparaît comme suit :
Une balise HTML est un élément qui contrôle l’affichage sur le navigateur. Une balise
HTML est interprétée et elle ne s’affiche pas sur le navigateur.
Exemple :Voici un exemple qui présente la structure d’un document HTML simple
<html>
<head>
<title>First Step</title>
</head>
<body>
<p>hello world !!!</p>
</body>
</html>
Le code HTML présenté dans l’exemple est inséré dans un fichier dont le nom est
hello.htm.Lerésultat sur le navigateur est présenté dans la figure 4.
12
d’Appl Web
Figure 4. Page HTML Simple
Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs sont des
informations complémentaires qui la caractérisent.
caractérisent. Ils se présentent sous la forme
nom_attribut="valeur" (exemple
xemple :<p align= "left"> hello world!</p>).
Chaque balise ouverte doit être fermée, cependant il existe des exceptions. On distingue deux
types de balises :
• Les balises simples : Ce sont des balises

balises qui sont dites "vides", c'est-à-dire
c'est qu'elles ne
vont contenir aucune autre balise HTML. Ces balises n'ont pas besoin d'être fermées.
(Exemple : <imgsrc= "my_image.png">)
• Les balises doubles : elles nécessitent deux balises, une ouvrante et une fermante
ferm dans
lesquelles on va pouvoir mettre d'autres balises ou du texte. La balise fermante est
identique à la balise ouvrante, à la différence qu'elle contient un "/" pour indiquer à
quel endroit on la ferme (exemple
( : <p> ici c’est du texte !!!< /p>).
En HTML, on peut écrire des balises imbriquées.

imbriquées. Lorsque l'on cumule l'écriture de plusieurs
balises ouvrantes (forcément inévitable), il est impératif de respecter la hiérarchie des balises
(Exemple : <p><u>C’est
C’est un texte !</u></p>)
Note :Ci-joint à cette partie,

tie, vous trouveriez la liste des balises HTML.
HTML. Les balises à retenir
en tête sont celles dont la description est en gras.
13
5. Structure d’un Document HTML

Un document HTML est fichier texte dont l’extension doit être *.html (si la page est
statique). Pour définir un document HTML, il faut impératif utiliser au moins une structure
minimale qui a la forme suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<Head>
<! - -Information sur le document HTML - ->
</Head>
<body>
<! - -Contenu du document HTML - ->
</body>
</HTML>
Figure 5. Structure Minimale d’un document HTML
La première ligne du document (Figure 5) s'appelle le DOCTYPE. C'est une balise

indispensable pour conserver la compatibilité du rendu de la page sur les différents
navigateurs modernes.
Après le DOCTYPE, vient la balise <html>. C’est une balise racine qui doit être déclarée une
seule fois dans un document HTML pour que le navigateur identifier qu’il s’agit d’un
document HTML et pour contenir le reste des balises.
Le contenu de la balise <html> est principalement séparé sur deux parties :
1. Une partie qui contient une déclaration des informations relatives au document. Cette
partie est définie par la balise <head> (Les balises utilisées dans cette partie sont :
<title>, <meta />, <link />, <script>, <style>)
2. La deuxième partie qui est contenue entre la balise <body> sert à définir le contenu
qui va être affiché sur le navigateur.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>

</body>
</html>
14
L'histoire du HTML est résumée par le W3C sur son site. On pourrait la synthétiser par le
tableau suivant :
Date Événement
1989- Discussions, échanges et projets à l'initiative de chercheurs du CERN aboutissant à un
1992 premier HTML qualifié par la suite de version numéro 0.
1993 Création du navigateur MOSAIC (sans tréma) par le NCSA de l'Université de l'Illinois.
Ce navigateur tourne sur les PC. Création du W3C. Publication des recommandations
formant la version HTML 1.0.
1995 Recommandations sur le standard HTML 2.0 (insertion d'images, de tableaux, de listes
et de formulaires).
1995 Synthèse des nouvelles exigences des auteurs réunies dans les recommandations
du HTML 3.0 : trop ambitieuse, elle n'a jamais trouvé de consensus au sein même du
W3C.
1996 Version HTML 3.2 (liens sur image, applet Java, JavaScript...), reprise de la version 3
édulcorée.
1997 Version provisoire du HTML 4.0 (frames, feuilles de style, intégration d'éléments
multimédias).
1999 Dernière version à ce jour, HTML 4.01 n'apportant que des corrections minimales à la
version précédente.
2000 Sortie du format XHTML 1.0, une extension du XML.
2006 Sortie d'une version de travail de la recommandation XHTML 2.0.
2009 Annonce de la fin des travaux sur XHTML2.0 à la fin de 2009.
2009 Sortie d'une version de travail de la recommandation HTML 5.
Tableau 1, évolution du HTML
La version du HTML est définie dans la balise < !DOCTYPE>, le tableau suivant résume les
versions essentielles et leursDoctypes :
Version Doctype
HTML 5 <!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
HTML 4.01 Transitional "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
XHTML 1.0 Transitional "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Table 2, doctypes de quelques versions du HTML
15
d’Appl Web
Création d’un tableau en HTML
Dans cette section, nous présentons un exemple de création d’un tableau en HTML. Les
balises
es nécessaires pour ceci sont : <table>, <th>, <tr> et <td>. Le code HTML d’une page
qui va contenir le tableau est le suivant :
<!DOCTYPE html>
<html>
<head>
<title>Mon tableau</title>
<head>
<body>
<table >
<tr>
<th>Module</th>
<th>Credit</th>
</tr>
<tr>
<td>Web</td>
<td>4</td>
</tr>
<tr>
<td>GL</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Le résultat du code sur le navigateur est le suivant :
Création d’un Formulaire en HTML
En HTML, les formulaires apportent l’interactivité à une page web. Ils permettent aux
utilisateurs d’introduire des données, sélectionner des choix ou de valider quelque chose.
Cependant, le langage HTML ne permet pas d’analyser ou de traiter ces informations. Ceci,
nécessite l’utilisation d’un autre langage complémentaire
complémentaire tel que le langage PHP que nous
allons voir dans la prochaine partie de cette matière.
La balise pour créer un formulaire en HTML est : <form>.. L’objectif est de signaler que tout
ce qui est entre cette balise double fait partie du formulaire.
16
d’Appl Web
Sauf qu’il
il faut inclure les champs du formulaire selon le besoin. Pour cela, il existe plusieurs
types de balises telles que : <input />, <textarea />, … etc.
L’exemple suivant montre la façon dont il faut utiliser la balise form :
<form>
<label>Votre pseudo :</label>

abel>
<input
input type="text" name="pseudo" />
<label for="pass">Votre mot de passe :</label>

<input type="password" name="pass" />
<input type=”submit” value=”Envoyer” />

</form>
Le résultat de ce code sur le navigateur est le suivant :
La balise <input />crée

crée des champs pour saisir les informations. On peut ajouter un certain
nombre d'autres attributs à la balise <input /> pour personnaliser son fonctionnement :
• On peut agrandir le champ avec size.

• On peut limiter le nombre de caractères que l'on peut saisir
s avec maxlength.
maxlength
• On peut pré-remplir
remplir le champ avec une valeur par défaut à l'aide de value.
• On peut donner une indication sur le contenu du champ avec placeholder.
placeholder Cette
indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
• On peut donner un nom (unique) pour le champ de texte avec l’attribut name.
Pour personnaliser le type de la balise <input> selon l’usage à l’aide de l’attribut type:
Code input Type Description

<input type="text" /> Texte Création d’une zone de texte simple
simp
<input type ="password" /> Texte Zone de mot de passe
<input type="email" /> Texte Zone pour saisir une adresse email
<input type="url" /> Texte Zone pour contenir un URL
<input type="tel" /> Numéro de téléphone saisie de numéros de téléphone
<input type="number" /> Nombre saisir un nombre entier
sélectionner un nombre avec un curseur
<input type="range" /> Nombre
(aussi appelé slider)
<input type="date" /> Date sélection de date
<input type="file" /> Fichier Sélection d’un fichier pour upload
Table 3. Les valeurs d’attribut type de la balise <input />
17
d’Appl Web
La balise <input /> peut prendre d’autres formes que des champs à saisie, qui sont:
1. Case à cocher
Code HTML:
<p>Cochez les aliments que vous aimez manger :</p>
<input type="checkbox" name="frites"
name="frites" /><label for="frites">Frites</label><br />
<input type="checkbox" name="steak" /><label for="steak">Steak haché</label><br />
<input type="checkbox"
ype="checkbox" name="epinards" /><label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" /><label
/><label for="huitres">Huitres</label>
Résultat :
Note :on
on peut associer un attribut for à la balise <label> pour indiquer le nom du champ input
dont on veut lier le libellé.
2. Les zones d'options
Code HTML :
<p>Veuillez
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br /></p>
</p>
<input type="radio" name="age" value="moins15" /><label >Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25"
value="medium15 /><label >15-25
25 ans</label><br />
<input type="radio" name="age" value="medium25-40"
value="medium25 /><label >25-40
40 ans</label><br />
<input type="radio" name="age" value="plus40" /><label >Encore plus vieux que ça ?!</label>
Résultat :
3. Listes déroulantes
Code HTML:
<select name="pays" id="pays">

<option value="algerie">Algerie
Algerie</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume
uni">Royaume-Uni</option>
</select>
18
Résultat :
Finalement, Pour récupérer ce que les visiteurs ont saisi, le langage HTML ne suffit pas. Il
faut utiliser un langage « serveur » comme PHP.
Note :Il faut bien se rappeler du rôle de l’attribut name qui sera utile pour la troisième partie
de cette matière.
Formulaires (Envoyer des données vers un script)

Les données que l’utilisateur introduit sur un formulaire peuvent être récupérées pour les
traiter avec un langage de script ou les transmettre vers une autre ressource web (exemple :
une autre page web).
Les données peuvent être envoyées en utilisant deux méthodes différentes (voir les
méthodesGET et POST du protocole http) vers une autre page web qui sera spécifiée avec
l’attribut action dans la balise <form>.
Le type de la méthode choisie est spécifié dans la balise <form> en utilisant l’attribut method.
Exemple :
<form action = "ma_page_destination.php"method="POST/GET">
<label>Firstname:</label>
<input type="text" name="fname">
<br>
<label>Last name: </label>

<input type="text" name="lname">
<br>
<input type="submit" value="Submit">

</form>
Les données d’un formulaire sont envoyées par la méthode GET (http) en tant que des
variables dans l’URL ou bien avec la méthode POST (http). Chacune de ses méthodes a ses
caractéristiques et son mode d’utilisation à l’exemple :
GET:
- Les données sont concaténées à l’URL de l’adresse spécifiée avec l’attribut action
- La longueur de l’URL ne doit pas dépassé 3000 caractères
- Les données sont visibles sur le lien
- La méthode GET est utilisée lorsqu’il s’agit d’envoyer des données non-sensitives
(sécurité)
19
POST:
- Les données sont envoyées dans les requêtes http (invisible sur l’URL)
- La taille des données envoyées par POST est illimitée
- La requête POST est utilisée pour envoyer des données sensitives (sécurisée)
6. Feuilles de style (CSS)

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style
Sheets, forment un langage informatique qui décrit la présentation des documents HTML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de
sites web et bien pris en charge par les navigateurs web dans les années 2000.
La feuille de style CSS contient la déclaration de toute la mise en forme des pages :
le positionnement des éléments, l'image de fond, les polices de caractère, les couleurs,
etc.Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela
engendra le même effet sur les pages html liées à la feuille de style CSS.
Il existe donc trois façons d'enregistrer les styles :
1. Dans une feuille de style externe. Enregistrer le code CSS dans un fichier s'appelant
(par exemple) "style.css", et mettre dans l'en-tête de la page html (entre les
balises <head></head>) :
<link href="style.css" rel="stylesheet" media="all" type="text/css">
2. Dans une feuille de style interne.Pour déclarer des styles qui ne s'appliqueront qu'à la
page considérée, les styles sont à déclarerdans la balise <head></head> entre les
balises suivantes :
<style type="text/css">
....
</style>
3. Dans le code au sein des balises html (inline).Si l'on veut attribuer un style à un seul
endroit, on peut déclarer le style à l'intérieur d'une balise html à l'aide de
l'attribut style. Par exemple :
<p style="text-align:center; color:red">

Ici mon texte.
</p>
La structure d’une feuille CSS est la suivante ou pour chaque déclaration, la structure est toujours la
même :
20
Sélecteur {
Propriété: valeur;
}
• Le sélecteur, c'est la balise (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class);
• La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.)
• Et enfin la valeur qui précise les caractéristiques de la propriété
Sélecteurs CSS class et idsont utilisé pour définir des styles particuliers que l'on voudra
reproduire de façon ponctuelle ou récurrente un style dans les pages HTML.Les propriétés
utilisées avec les sélecteurs class et id sont :
• background-color
• float
• width
• margin
• text-align
Exemple 1 (Sélecteur Class):
.haut {
text-align:right;
}
<p class="haut">
<a href="#haut">Haut de page</a>
</p>
Exemple 2 (Sélecteur id):
#menu {
background-color:silver;
width:100px;
float:left;
}
#contenu {
margin-left:110px;
}
<div id="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
21
<div id="contenu">
<p>Hello World </p>
<p class="haut">
<a href="#haut">Haut de page</a>
</p>
</div>
Note :Les sélecteurs Class et id sont différents d’où le sélecteur id ne peut être utilisé qu’une
seule fois dans une page alors que le sélecteur class peut être utilisé plusieurs fois dans la
même page.
Mise en page avec la balise <div></div> :
Pour une mise en page souple et cohérente, on divisera la page en "blocs" avec la balise html
<div></div>(des div, appelés aussi "boites" ou "calques"), qui ont l'avantage de pouvoir être déplacés
de gauche à droite, ou de haut en bas grâce aux CSS.
Figure 6. L’utilisation de la balise <div></div> et CSS
22
Exemple :
Figure 7. Mise en page sur 4 parties
Code HTML :
<div id="entete">
En tête
</div>
<div id="main">
<div id="menu">
Menu
</div>
<div id="contenu">
Contenu
</div>
</div>
<div id="footer">
Pied de Page
</div>
Code CSS :
#entete, #menu, #contenu, #footer {
padding:1px 0;
}
#entete {
background-color:#FF9900;
text-align:center;
}
#main {
max-with:960px;
margin:auto;
}
#menu {
float:left;
width:240px;
background-color:#FF3366;
}
#contenu {
margin-left:245px;
23
background-color:#9966FF;
}
#footer {
background-color:#669933;
text-align:center;
clear:both;
}
24
Quelques balises HTML :Lien (http://www.w3schools.com/tags/)

(Les balises les plus importantes à connaitre pour cette matière sont formatées en gras)
Balise Description
 Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<b> Definesboldtext
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickablebutton
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<div> Defines a section in a document
<em> Definesemphasizedtext
<embed> Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header> Defines a header for a document or section
<hgroup> Defines a group of headings
<html> Defines the root of an HTML document
<img> Defines an image
<input> Defines an input control
<kbd> Defines keyboard input
<keygen> Defines a key-pair generator field (for forms)
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
<link> Defines the relationship between a document and an external
resource (most used to link to style sheets)
<main> Specifies the main content of a document
<menu> Defines a list/menu of commands
25
<menuitem> Defines a command/menu item that the user can invoke from a popup
menu
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines an embeddedobject
<ol> Defines an orderedlist
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Definessmallertext
<source> Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
<strong> Defines important text
<style> Defines style information for a document
<sub> Definessubscriptedtext
<sup> Definessuperscriptedtext
<table> Defines a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
<u> Defines text that should be stylistically different from normal text
<ul> Defines an unorderedlist
<var> Definesa variable
<video> Defines a video or movie
<wbr> Defines a possible line-break
26
Caractères spéciaux (HTML):

Le langage donne la possibilité d’afficher à l'écran des caractères qui soit ne peuvent pas être
directement saisis au clavier, soit n'existent pas dans l'encodage choisi. Il faut faire appel pour
cela à des entités numériques ou alphabétiques. Par exemple, un caractère "espace" se code
indifféremment par , ou bien par .
Les entités permettent d'avoir accès à des caractères qui ont un sens en HTML. Ces caractères
sont :
Caractère Entité
< <
> >
& &
Table 2. Tableau de correspondances entre les entités et les caractères réservés en HTML
D'autres entités renvoient à des caractères spéciaux :
Caractère Entité Caractère Entité

à à â â
ä ä æ æ
é é è è
ê ê ë ë
ù ù û û
ü ü ö ö
ï ï î î
ç ç œ &oelig;
Table 3. Principales entités de caractères utilisées en français. Il est également possible d'utiliser des accents
sur des majuscules. Par exemple, l'entité &Aagrave; renvoie au caractère À.
27
Propriétés (CSS) : lien (http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-

avec-html5-et-css3/memento-des-proprietes-css)
Propriétés de mise en forme du texte

Propriété Valeurs (exemples) Description
font-family police1, police2, police3, serif, sans-serif, Nom de police
monospace
@font-face Nom et source de la police Police personnalisée
font-size 1.3em, 16px, 120%... Taille du texte
font-weight bold, normal Gras
font-style italic, oblique, normal Italique
text-decoration underline, overline, line-through, blink, none Soulignement, ligne au-dessus, barré
ou clignotant
font-variant small-caps, normal Petites capitales
text-transform capitalize, lowercase, uppercase Capitales
font - Super propriété de police. Combine
: font-weight,font-style, font-size, font-
variant, font-family.
text-align left, center, right, justify Alignement horizontal
vertical-align baseline, middle, sub, super, top, bottom Alignement vertical (cellules de
tableau ou élémentsinline-
block uniquement)
line-height 18px, 120%, normal... Hauteur de ligne
text-indent 25px Alinéa
white-space pre, nowrap, normal Césure
word-wrap break-word, normal Césure forcée
text-shadow 5px 5px 2px blue(horizontale, verticale, fondu, Ombre de texte
couleur)
Propriétés de couleur et de fond

color nom, rgb(rouge,vert,bleu), Couleur du texte
rgba(rouge,vert,bleu,transparence), #CF1A20...
background-color Identique à color Couleur de fond
background- url('image.png') Image de fond
image
background- fixed, scroll Fond fixe
attachment
background- repeat-x, repeat-y, no-repeat, repeat Répétition du fond
repeat
background- (x y), top, center, bottom, left, right Position du fond
position
background - Super propriété du fond. Combine
:background-image, background-
repeat,background-
attachment, background-position
opacity 0.5 Transparence
28
Propriétés des boîtes

width 150px, 80%... Largeur
height 150px, 80%... Hauteur
min-width 150px, 80%... Largeur minimale
max-width 150px, 80%... Largeur maximale
min-height 150px, 80%... Hauteur minimale
max-height 150px, 80%... Hauteur maximale
margin-top 23px Marge en haut
margin-left 23px Marge à gauche
margin-right 23px Marge à droite
margin-bottom 23px Marge en bas
margin 23px 5px 23px 5px Super-propriété de marge.
(haut, droite, bas, gauche) Combine: margin-top, margin-right,margin-
bottom, margin-left.
padding-left 23px Marge intérieure à gauche
padding-right 23px Marge intérieure à droite
padding-bottom 23px Marge intérieure en bas
padding-top 23px Marge intérieure en haut
padding 23px 5px 23px 5px Super-propriété de marge intérieure.
(haut, droite, bas, gauche) Combine : padding-top, padding-
right,padding-bottom, padding-left.
border-width 3px Épaisseur de bordure
border-color nom, rgb(rouge,vert,bleu), Couleur de bordure
rgba(rouge,vert,bleu,transparence),
#CF1A20...
border-style solid, dotted, dashed, double, groove, Type de bordure
ridge, inset, outset
border 3px solid black Super-propriété de bordure. Combineborder-
width, border-color, border-style.
Existe aussi en version border-top, border-
right, border-bottom, border-left.
border-radius 5px Bordure arrondie
box-shadow 6px 6px 0px black Ombre de boîte
(horizontale, verticale, fondu, couleur)
Propriétés de positionnement et d'affichage

display block, inline, inline-block, table, table-cell, Type d'élément (block, inline, inline-
none... block, none…)
visibility visible, hidden Visibilité
clip rect (0px, 60px, 30px, 0px) Affichage d'une partie de l'élément
rect (haut, droite, bas, gauche)
overflow auto, scroll, visible, hidden Comportement en cas de dépassement
float left, right, none Flottant
clear left, right, both, none Arrêt d'un flottant
position relative, absolute, static Positionnement
top 20px Position par rapport au haut
bottom 20px Position par rapport au bas
left 20px Position par rapport à la gauche
right 20px Position par rapport à la droite
z-index 10 Ordre d'affichage en cas de superposition.
La plus grande valeur est affichée par-dessus
les autres.
29
Propriétés des listes

list-style-type disc, circle, square, decimal, lower-roman, upper- Type de liste
roman, lower-alpha, upper-alpha, none
list-style-position inside, outside Position en retrait
list-style-image url('puce.png') Puce personnalisée
list-style - Super-propriété de liste. Combine list-
style-type, list-style-position,list-style-
image.
Propriétés des tableaux

border-collapse collapse, separate Fusion des bordures
empty-cells hide, show Affichage des cellules vides
caption-side bottom, top Position du titre du tableau
30
Partie 3
Langages de programmation coté serveur
La programmation coté serveur concerne les langages de script dont l’exécution se fait sur
le serveur. Ce type de langage permet de programmer des pages web dynamiques. Dans cette
partie, nous allons principalement voir les conceptions de programmation avec le langage de
script PHP.
Des liens intéressants pour apprendre davantage les principes de la programmation avec le
langage PHP :
1- http://www.codecademy.com/en/tracks/php
2- http://teamtreehouse.com/tracks/php-development
1. Introduction
PHP (officiellement, ce sigle est un acronyme récursif pour "PHP:
HypertextPreprocessor") est un langage de script généraliste, Open Source, et spécialement
conçu pour le développement d'applications web. Il peut être intégré facilement au page
HTML.
Le langage PHP est un langage de programmation interpréter (et non pas compiler) et
supporté par de nombreux serveurs WEB.
Le code PHP est inséré dans les pages WEB et repéré par un serveur WEB (si il est muni de
l'extension PHP) qu'il l'enverra à PHP pour l'interpréter.
Grâce à ces portions de code PHP insérées dans les pages WEB, PHP permettra d'écrire des
pages WEB à contenus dynamiques (vous écrivez une page HTML avec du code PHP inclus à
l'intérieur afin de réaliser une action précise.)
Note :Il faut changer l'extension de ce fichier en .php lorsque vous insérez le moindre petit
bout de code PHP dans une page HTML, (si vous avez une page nommée index.html et que
vous y insérez du code PHP, il vous faudra la renommer en index.php).
Ce qui distingue le PHP des langages de script comme le Javascript est que le code écrit en
PHP est exécuté sur le serveur web.
Le client web ne reçoit que le résultat du script, sans aucun moyen d'avoir accès au code qui a
produit ce résultat.
Pour que le serveur qui héberge la page web puisse repérer les portions de code en PHP, il
suffit simplement de lui indiquer le début ainsi que la fin du code PHP les deux marqueurs
suivant :
• La balise < ?php pour marquer le début d'une portion de code PHP
• La balise ?> pour marquer la fin d'une portion de code PHP
31
Exemple : insertion du code PHP dans une page HTML
<html>
<head>
<title>Test</title>
</head>
<body>
<p>un bout de code en HTML</p>
<?php
echo 'Mon premier script en PHP';
?>
</body>
</html>
Comme tous les langages de programmation, il est possible de commenter le code source en
PHP. Pour cela, il y a deux méthodes :
• pour commenter une seule ligne de code PHP, on précédera cette ligne de deux
slashs //
• pour commenter une portion de code, on précédera la première ligne de code que l'on
souhaite commenter par un /* et on fera suivre la dernière ligne de code que l'on
souhaite commenter par un */
Exemple :
<?php
// ceci est un commentaire sur une seule ligne
/* ceci est
un commentaire
sur plusieures lignes */
?>
Pour programmer en PHP il faut :

• Un éditeur de texte pour écrire vos portions de code en PHP
• Un environnement de développement afin de tester ces portions de code (exemples :
EasyPHP (Windows), wampserver (Windows), mamp (Apple), lamp (linux))
Note :chaque instruction en PHP doit se terminer par un point virgule « ; »
32
1. La fonction Echo
Cette fonction permet d'afficher à l'écran des chaînes de caractères définie entre deux
apostrophes ‘’ … ‘’, qui peuvent être définies directement par l'utilisateur. Les chaines de
caractères peuvent être des messages (texte) comme elles peuvent être un code HTML.
Les paramètres de la fonction echo peuvent ne pas être entourés de parenthèses.
Exemple :
< ?php echo‘‘Bonjour’’ ; ?>
Cette portion du code afficher le message Bonjour sur la page web.
< ?php echo ‘’<imgsrc=’mon_image.jpg’>’’;?>
Par contre cette portion du code affichera l’image mon_image.jpg en utilisant la balise
html <img>.
2. Les Variables
Pour déclarer des variables en PHP il faut que:
• les variables doivent être représentées par une chaîne de caractères, ayant toujours
comme premier caractère, le caractère dollar ($).
• Les variables peuvent avoir n'importe quelle lettre en deuxième caractère du moment
qu'il ne s'agit pas d'un chiffre.
• Les noms de variables ne peuvent pas contenir d'espace.
Pour assigner une valeur à une variable, il faut d'utiliser l'opérateur =, tout en prenant soin de
placer la variable qui reçoit le résultat d'une opération à gauche du signe =.
Exemple :
<?php
$nom = "LA GLOBULE";
// $nom contient alors la chaîne de caractères LA GLOBULE.
$mon_chiffre = 12;
// $mon_chiffre contient la valeur numérique 12.
$5toto = "test";
// Cette déclaration n'est pas valide car le nom de la variable commence par un chiffre
?>
33
3. Les opérateurs
Les opérateurs sont utilisés pour effectuer des opérations sur les variables. Le langage PHP
est dotéd’un ensemble d’opérateurs divisé sur 7 sous-ensembles:
• Les opérateurs Arithmétiques

• Les opérateurs d’affectation
• Les opérateurs de comparaison
• Les opérateurs / Décrément d'incrémentation
• Les opérateurs logiques
• Les opérateurs de chaînes de caractères
• Les opérateurs de tableaux
1. Les opérateurs Arithmétiques

Operateur Nom Exemple Résultat
+ Addition $x + $y Somme de $x et $y
- soustraction $x - $y Différence de $x et $y
* Multiplication $x * $y Produit de $x et $y
/ Division $x / $y Quotient de $x et $y
% Modulus $x % $y Le restede $x diviséesur $y
** Exponentiel $x ** $y Le résultat de $x à la puissance $y
2. Les opérateurs d’affectation

Affectation similaire que... Description
x=y x=y La variable sur la gauche de l’opérateur recevoir la valeur
de la variable sur la droite
x += y x = x +y Addition
x -= y x = x -y soustraction
x *= y x = x *y Multiplication
x /= y x = x /y Division
x %= y x = x %y Modulus
3. Les opérateurs de comparaison

Opérateur Name Exemple Résultat
== égalité $x == $y Renvoi true si $x est égale à $y
=== Identique $x === $y Returns true if $x is equal to $y, and they
are of the same type
!= Pas égal $x != $y Returns true if $x is not equal to $y
<> Pas égal $x <> $y Returns true if $x is not equal to $y
!== Non-identique $x !== $y Returns true if $x is not equal to $y, or
they are not of the same type
> Supérieur à $x > $y Returns true if $x is greater than $y
< Inférieur à $x < $y Returns true if $x is less than $y
>= Supérieurouégal $x >= $y Returns true if $x is greater than or equal
to $y
<= Inférieurouégal $x <= $y Returns true if $x is less than or equal to
$y
4. Les opérateurs / Décrément d'incrémentation

Operator Name Description
++$x Pre-increment Increments $x by one, then returns $x
$x++ Post-increment Returns $x, then increments $x by one
--$x Pre-decrement Decrements $x by one, then returns $x
$x-- Post-decrement Returns $x, then decrements $x by one
34
5. Les opérateurs logiques

Opérateur Nom Exemple Résultat
and Et $x and $y True si $x et $y sont vrais
or Ou $x or $y True si $x ou $y est vrai
xor Xor $x xor $y True si $x ou $y est vrai et l’autre False
&& Et $x && $y True si $x et $y sont vrais
|| Or $x || $y True si $x ou $y est vrai
! Not !$x True si $x est False
6. Les opérateurs de chaînes de caractères

. Concaténation $txt1 . $txt2 Concaténation de $txt1 et $txt2
.= Concaténation et affectation $txt1 .= $txt2 Jointure de $txt2 à $txt1
7. Les opérateurs de tableaux

+ Union $x + $y Union de $x and $y
== égalité $x == $y Returns true if $x and $y have the same key/value
pairs
=== Identique $x === $y Returns true if $x and $y have the same key/value
pairs in the same order and of the same types
!= L’inégalité $x != $y Returns true if $x is not equal to $y
<> L’inégalité $x <> $y Returns true if $x is not equal to $y
!== Non-identique $x !== $y Returns true if $x is not identical to $y
4. Les conditions
Les expressions conditionnelles sont utilisées pour effectuer des actions à la base des
conditions. Les expressions permettant de déclarer les conditions en PHP sont :
• if –exécution d’un code si la condition est vraie.

• if...else– exécution d’un code si une condition est vraie et un autre code si elle est
fausse
• if...elseif....else–le elseif est utilisé pour spécifier une condition si la première est
fausse
• switch – pour sélectionner un code à exécuter parmi plusieurs
1. l’expression if :
Syntax:
if (condition) {
/*le code à executer*/;
}
Exemple : si l’heure est inférieur à 20h, un message s’affichera sur le navigateur

<?php
$t = date("H");
if ($t < "20") {

echo "Bonne nuit!";
}
?>
35
2. if...else :
Syntax:
if (condition) {
code à exécuter si la condition est vraie
} else {
le code à exécuter si la condition est fausse
}
Exemple: le code suivant affiche bonjour si l’heure est inférieure à 20h et bonsoir si elle
est supérieure à 20h
<?php
$t = date("H");
if ($t < "20") {

echo "bonjour";
} else {
echo "bonne nuit";
}
?>
3. if...elseif....else
Syntax:
if (condition1) {
le code à executer si la condition 1 est vraie
} elseif (condition2) {
le code à exécuter si la condition 1 et fausse et la condition 2 est vraie
} else {
le code à exécuter si la condition 1 et la conditions 2 sont fausses
}
Exemple: le code suivant affiche bonjour si l’heure est supérieure à 6 et inférieur à 15,
bonsoir si l’heure est supérieure à 15h et inférieure ou égale à 20h et bonne nuit si l’heure
est supérieure à 20.
<?php
$t = date("H");
if ($t < "6" and $t > "15") {

echo "Bonjour!";
} elseif ($t < "15" and $t >= "20") {
echo "Bonsoir!";
} else {
echo "Bonne nuit!";
}
?>
36
4. Switch Statement
Syntax :
switch (n) {
case label1:
/* si n==label1*/
break;
case label2:
/* si n==label2*/
break;
case label3:
/* si n==label3*/
break;
default:
le code à executer si n est different de tous les labels;
}
Exemple: Le code suivant affichera le message « la couleur choisie est rouge ! »

<?php
$favcolor = "rouge";
switch ($favcolor) {
case "rouge":
echo "la couleur choisie est rouge!";
break;
case "bleu":
echo "la couleur choisie est bleu!";
break;
case "vert":
echo "la couleur choisie est vert!";
break;
default:
echo "aucune couleur n’a été choisie ";
}
?>
5. Les boucles
Souvent, lorsque nous écrivons un code, nous voulons qu’un bloque de code s’exécute
plusieurs fois. Au lieu de répéter les lignes de code que nous voulons répéter, nous utiliserons
les boucles.
En PHP, il existe plusieurs façons de déclarer une boucle :
• while – Une boucle qui se répète jusqu’à ce que la condition spécifiée soit fausse.
• do...while – Une boucle qui s’exécute une fois, ensuite elle se répète jusqu’à ce que la
condition soit fausse.
• for–Une boucle qui s’exécute un nombre de fois.
• foreach–Une boucle qui parcours un tous les éléments d’un tableau.
37
1. While
Syntaxe :
while (condition is true) {
code to be executed;
}
Exemple : Affecter la value 1 à $x, et répéter la boucle 5 fois ($x <= 5).
<?php
$x = 1;
while($x <= 5) {
echo "The number is: $x <br>";
$x++;
}
?>
2. do … while
Syntaxe :
do {
/* code to be executed; */
} while (condition is true);
Exemple:
<?php
$x = 1;
do {
$x++;
} while ($x <= 5);
?>
3. for
Syntaxe :
for (init_counter; test_counter; increment_counter) {
/* code to be executed; */
}
Paramèters:
initcounter: initialise le compteur de la boucle
testcounter: Evaluer la condition d’arrêt de la boucle.
incrementcounter: incrémentation/décrémentation du compteur.
Exemple : Affiche les valeurs de 0 jusqu’à 10.

<?php
for ($x = 0; $x <= 10; $x++) {
}
?>
4. foreach
Syntax
foreach ($array as $value) {
code to be executed;
}
Example:
38
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {

echo "$value <br>";
}
?>
6. Les fonctions
Une fonction est une bloque de code qui peut être utilisé plusieurs fois dans un programme.
Le langage PHP présente la possibilité de déclarer des fonctions sur une page web. Par contre
une fonction ne sera exécutée que lorsqu’on lui fait appel (et non pas lors de l’affichage de la
page).
La syntaxe suivante est utilisée pour déclarer une fonction en PHP :
function nom_function() {
/*code à executer;*/
}
Des informations peuvent être envoyées à une fonction à travers les arguments qui sont
déclarés entre les parenthèses et séparés par des virgules.
Exemple :
<?php
function familyName($fname, $year) {
echo $fname."Born in".$year. "<br>";
}
familyName("Hege", "1975");
familyName("Stale", "1978");
familyName("Kai Jim", "1983");
?>
Les fonctions en PHP peuvent avoir une valeur de retour qui sera renvoyée en utilisant le mot
clé return.
Exemple :
<?php
function sum($x, $y) {
$z = $x + $y;
return $z;
}
echo "5 + 10 = " . sum(5, 10) . "<br>";

echo "7 + 13 = " . sum(7, 13) . "<br>";
echo "2 + 4 = " . sum(2, 4);
?>
39
7. Les tableaux:
Un tableau stocke plusieurs valeurs en une seule variable, il permet de stocker plusieurs
valeurs à la fois.
Exemple :
Soit une liste d’éléments (une liste de noms de voitures), le stockage des voitures dans des
variables individuelles sera comme suit :
$cars1 = "Volvo";
$cars2 = "BMW";
$cars3 = "Toyota";
En php:
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
La création des tableaux en PHP:

En PHP, la fonction array() est utilisée pour créer un tableau
array() ;
Il existe trois types de tableaux en PHP
• Tableaux indexés –tableaux avec un numéro d’indexe.

• Tableaux associatifs–tableaux avec des clés nommées.
• Tableaux Multidimensionnels–tableaux contenant un ou plusieurs tableaux.
1) Tableaux indexés en PHP :

Il existe deux façons de créer un tableau indexé
• L’index est affecté automatiquement (l’index commence toujours par 0)
• Ou il peut être affecté manuellement.

$cars[0] = "Volvo";
$cars[1] = "BMW";
$cars[2] = "Toyota";
Example
<?php
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
Cet exemple permet de créer un tableau indexé nommé $cars, et d’affecter trois éléments à ce
tableau, et d’imprimer un texte qui contient les valeurs du tableau.
La fonction count(), pour avoir la longueur du tableau :
La fonction count() permet de retourner la longueur ( nombre d’éléments)du tableau
40
Example
<?php
echo count($cars);
?>
L’utilisation des boucles dans un tableau indexé:
Pour faire une boucle et imprimer toutes les valeurs d’un tableau indexé, vous devez utiliser
la boucle for.
Example
<?php
$arrlength = count($cars);
for($x = 0; $x < $arrlength; $x++) {

echo $cars[$x];
echo "<br>";
}
?>
2) Tableaux Associatifs en PHP :

Les tableaux associatifs utilisent des clés nommées que vous devez affecter. Il existe deux
façons de créer un tableau associatif.
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
Ou:
$age['Peter'] = "35";
$age['Ben'] = "37";
$age['Joe'] = "43";
Exemple
<?php
echo "Peter is " . $age['Peter'] . " yearsold.";
?>
La boucle dans un tableau associatif
Pour faire une boucle et imprimer toutes les valeurs d’un tableau indexé, vous devez utiliser la
boucle Foreach.
Exemple
<?php
foreach($age as $x => $x_value) {

echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
?>
41
3) Tableaux multidimensionnels en PHP :
Un tableau multidimensionnelest un tableau qui contient un ou plusieurs tableaux.
Exemple : Les tableaux deux dimensions en PHP :
Name Stock Sold

Volvo 22 18
BMW 15 13
Saab 5 2
Land Rover 17 15
Vous pouvez stocker les données du tableau ci-dessus dans un tableau de deux dimensions
$cars = array
(
array("Volvo",22,18),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);
Maintenant le tableau de deux dimensions $cars contient quatre tableaux, et possède deux
indice : l’indice des lignes et l’indice des colonnes.
Pour accéder aux éléments du tableau $carsvous devez pointer sur les deux indices (celui des
lignes et celui des colonnes).
Exemple
<?php
echo $cars[0][0].": In stock: ".$cars[0][1].", sold: ".$cars[0][2].".<br>";
?>
Vous pouvez aussi utiliser la boucle for dans une autre boucle for pour obtenir les éléments du
tableau $cars (vous devez toujours pointer sur les deux indices)
Exemple
<?php
for ($row = 0; $row < 4; $row++) {
echo "<p><b>Row number $row</b></p>";
echo "<ul>";
for ($col = 0; $col < 3; $col++) {
echo "<li>".$cars[$row][$col]."</li>";
}
echo "</ul>";
}
?>
42
8. Les sessions
Une session est une façon de stocker des informations (dans les variables) pour être utilisé sur
plusieurs pages.
Les informations sont stockées sur le serveur (Contrairement à un cookie, l'information n’est
pas stocké sur l'ordinateur des utilisateurs.).
Qu'est-ce qu'une session PHP?

Lorsque vous travaillez avec une application, vous l'ouvrez pour faire quelques modifications,
puis vous la fermez. C’est un peu comme une session. L'ordinateur sait qui vous êtes. Il sait
quand vous démarrez l'application et quand vous finissez. Mais sur Internet il ya un problème:
le serveur web ne sait pas qui vous êtes ou ce que vous faites, parce que l'adresse HTTP ne
maintient pas d'état.
Les variables de session résoudent ce problème en stockant les informations de l'utilisateur

pour être utilisé sur plusieurs pages (par exemple nom d'utilisateur, couleur préférée, etc.). Par
défaut, les variables de session durent jusqu'à ce que l'utilisateur ferme le navigateur.
Donc les variables de session contiennent des informations sur un seul utilisateur, et sont
disponibles pour toutes les pages en une seule application.
Remarque: Si vous avez besoin d'un stockage permanent, vous pouvez stocker les données
dans une base de données.
Démarrage d'une session PHP
Une session est lancée avec la fonction session_start ().
Les variables de session sont définis avec la variable globale PHP: $ _SESSION.
Maintenant, nous allons créer une nouvelle page appelée "démo _session 1.php". Dans cette
page, nous commençons une nouvelle session de PHP et fixer des variables de session:
Example
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body>
</html>
Remarque: La fonction session_start () doit être la première chose dans votre document.
Avant toutes les balises HTML.
43
Récupérer les valeurs des variables d’une session PHP :
Ensuite, nous créons une autre page appelée "demo_session2.php". Depuis cette page, nous
allons accéder aux informations de session, nous avons mis sur la première page ("session de
démonstration 1.php").
Notez que les variables de session ne sont font pas transmettre individuellement à chaque
nouvelle page. Il faut ouvrir la session au début de chaque page (session_start ()).
Notez également que toutes les valeurs de variables de session sont stockés dans la variable
globale $ _SESSION:
Example
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Echo session variables that were set on previous page
echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is " . $_SESSION["favanimal"] . ".";
?>
</body>
</html>
Une autre façon de montrer toutes les valeurs de variables de session pour une session
utilisateur est d'exécuter le code suivant:
Example
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
print_r($_SESSION);
?>
</body>
</html>
Modifier une variable de session PHP

Pour modifier une variable de session, il suffit juste ses valeurs écraser:
exemple
<? php
session_start ();
?>
<! DOCTYPE html>
<html>
<body>
<? php
// Pour changer une variable de session, à l'écraser
_SESSION ["Couleur de fav"] = "yellow" $;
print_r ($ _ SESSION);
44
?>
</ body>
</ html>
Détruire une sessionPHP

Pour supprimer toutes les variables globales de session et de détruire la session, l'utilisation
session_unset () et session_destroy ():
Example
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// remove all session variables
session_unset();
// destroy the session

session_destroy();
?>
</body>
</html>
8. Manipulation des formulaires en PHP:

En PHP, $_GET et $_POST sont utilisés pour récupérer les données des formulaires.
L’exemple suivant représente un simple formulaire HTML avec deux inputs et un bouton
envoyer:
Example
<html>
<body>
<form action="welcome.php" method="post">

Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Lorsque l’utilisateur remplit le formulaire ci-dessus et click sur le bouton envoyer, les
données du formulaire seront envoyées vers un fichier PHP qui s’appelle « welcome.php »
pour le traitement. Dans cet exemple, les données du formulaire sont envoyées avec la
méthode HTTP POST.
Pour afficher les données envoyées, vous pouvez simplement afficher toutes les variables en
utilisant la fonction echo. Le fichier welcome.php contient le code suivant
<html>
<body>
45
Welcome <?php echo $_POST["name"]; ?><br>

Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
Le résultat ressemble à ce qui suit:

Welcome John
Your email addressis john.doe@example.com
Vous pouvez obtenir le même résultat en utilisant la méthode HTTP GET :
Example
<html>
<body>
<form action="welcome_get.php" method="get">

Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Et le code du fichier welcome_get.php sera comme suit :

<html>
<body>
Welcome <?php echo $_GET["name"]; ?><br>

Your email address is: <?php echo $_GET["email"]; ?>
</body>
</html>
46

Cour WEB Bba

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cour WEB Bba

Enviado por

Direitos autorais:

Formatos disponíveis

Beghoura Mohamed Amine Développement d’Applications Web

2ème Année Licence Informatique

Berners-Lee et un autre informaticien belge (Robert Cailliau) ont proposé le concept du

Figure 2. Fonctionnement du Web

La communication entre le navigateur et le l serveur se fait en deux temps (figure 2) :

Il existe plusieurs serveurs web à l’exemple de :

Les deux navigateurs (Figure

Figure 3. Logo de Firefox, Chrome et Opera

Figure 4. Fonctionnement d’un Navigateur

• http:// : Le protocole de communication

Le but du protocole HTTP est de permettre un transfert de fichiers (essentiellement au

3.1 Requête HTTP

• Une ligne de requête: c'est une ligne précisant

Les champs d’en-têtes sont présentés dans la table 2 :

Nom de l'en-tête Description

Code Message Description

Les en-têtes qu’une réponse http peut contenir sont :

Nom de l'en-tête Description

1. Contenu d’une page Web

Dans la première partie, nous avons parlé

Figure 1, Contenu d’une page web

Figure 1 symbolise la façon dont le contenu d’une page est stocké

2. Page Statique et Page Dynamique

Un ordinateur qui se connecte

Figure 2, Page Statique

Le contenu est obtenu en combinant l’utilisation d’un langage de scripts ou de programmation

Figure 3. Page Dynamique

des « paramètres » (sélection réalisée par l’internaute) génère l’affichage du contenu de

3. Les langages de balises

L'inclusion de balises permet de transférer à la fois la structure du document et son contenu.

Les langages à base de balisesservent surtout à structurer ou formater des documents. Il

L’HyperTextMarkupLanguage, généralement abrégé HTML, est le format de données

HTMLpermet de structurer sémantiquement et de mettre en forme le contenu des pages,

HTML possède de nombreux éléments de gestion de l'apparence (ou formatage) de la page

<p>Ceci est un paragraphe.</p>

Il est possible également de déclarer un texte souligné :

<p><u>Ceci est un paragraphe souligné.</u></p>

Le deuxième exemple apparaît comme suit :

Figure 4. Page HTML Simple

• Les balises simples : Ce sont des balises

En HTML, on peut écrire des balises imbriquées.

Note :Ci-joint à cette partie,

5. Structure d’un Document HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<! - -Contenu du document HTML - ->

Figure 5. Structure Minimale d’un document HTML

La première ligne du document (Figure 5) s'appelle le DOCTYPE. C'est une balise

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Création d’un tableau en HTML

Le résultat du code sur le navigateur est le suivant :

Création d’un Formulaire en HTML

L’exemple suivant montre la façon dont il faut utiliser la balise form :

<label>Votre pseudo :</label>

<label for="pass">Votre mot de passe :</label>

<input type=”submit” value=”Envoyer” />

Le résultat de ce code sur le navigateur est le suivant :

La balise <input />crée

• On peut agrandir le champ avec size.

Code input Type Description

2. Les zones d'options

<select name="pays" id="pays">

Formulaires (Envoyer des données vers un script)

<label>Last name: </label>

<input type="submit" value="Submit">