Université Benyoucef Benkhadda - Alger 1

Faculté des Sciences /département MI

Développement d’Applications Web

(Cours .

2ème Année Licence Informatique

Semestre 4

Présenté
11
par : Mme TOUIL 2016-2017 1
 Objectifs du cours

1- Comprendre le principe de fonctionnement du Web

2- S’initier à la programmation Web en maitrisant ses

principaux langages

3- S’amener à la capacité de créer une application Web

Client/serveur

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 2
 Objectifs du cours
Ce que vous apprendrez dans l’ordre :

1- Créer des pages statiques (textes, images, tableaux, formulaires,…)

2- Décorer vos pages (police du texte, couleurs, style,…)
3- Rendre vos pages interactives ( boutons, évènements,…)
4- Manipuler une BDD (création, interrogation, modification)
5- Créer des pages dynamiques.
6- Autres: authentification, envoie de mails,….

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 3
 C Introduction au World Wide Web

1- définition et Historique

2- Architecture Client/Serveur

3- Protocole http

4- Evolution du Web
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 4
 C Introduction au World Wide Web
1- Définition et historique

a- Définition :

Le World Wide Web (WWW), la « toile (d’araignée)

mondiale », appelé le Web, et parfois la Toile, est un système
hypertexte composé par des documents (pages) reliés entre
eux à travers des hyperliens (un lien web ou lien tout
simplement).

Présenté par : Mme TOUIL 2016-2017 5

 C Introduction au World Wide Web
Le Web permet de naviguer (à l’aide d’un navigateur) de pages
en pages sur des sites.

Page Web
Est un document, structuré généralement par HTML, destiné à
être consulter à travers le Web. Elle peut être liée avec
d’autres ressources Web( images, vidéos, autres pages ).

Site Web
Est un ensemble de pages Web reliées entre elles, publiées par
le même propriétaire, et hébergées sut un ou plusieurs
serveurs Web

Présenté par : Mme TOUIL 2016-2017 6

 C Introduction au World Wide Web

Quelle est la différence entre le Web et l’Internet ?

Dans le langage courant, les termes "web" et "Internet" sont

souvent utilisés comme des synonymes.

La différence entre web et Internet est plus importante .

Présenté par : Mme TOUIL 2016-2017 7

 C Introduction au World Wide Web
• Internet est un réseau informatique qui relie des ordinateurs entre eux
à l'échelle du monde. Ce gigantesque réseau se compose de millions de
réseaux publics et privés, par exemple: des réseaux universitaires ou
commerciaux.

• Internet repose sur le protocole de communication IP (pour Internet

Protocol), qui permet d'acheminer des données entre les ordinateurs
connectés à ce réseau.

• Internet a de multiples usages comme le partage de fichiers, la messagerie

instantanée, la téléphonie, l'envoi de courrier électronique et le web.

Le web est sa principale application est l’application la

plus populaire du réseau internet.

Présenté par : Mme TOUIL 2016-2017 8

 C Introduction au World Wide Web
b- Naissance du Web

• 1989 : Tim Berners-Lee, un physicien britannique , engagé au CERN (Conseil

Européen de la Recherche Nucléaire ), proposa de développer un
système HyperText organisé en Web, afin d’améliorer la diffusion
des informations internes.

• 1990 : Robert Cailliau rejoignait le projet et collaborait à la révision de la

proposition : WorldWideWeb.
Robert Cailliau était l’auteur du 1er logo WWW
- le 1er serveur web : [Link]
- le 1er navigateur : WorldWideWeb , est un navigateur en mode
texte développé en langage C
- les 3 technologies à la base du Web : URL , HTML, HTTP

•1991 : Tim Berners-Lee rendait le projet WorldWideWeb public

Présenté par : Mme TOUIL 2016-2017 9
 C Introduction au World Wide Web
c- historique du Web

• 1993 : - le 30 avril, le CERN renonce aux droits d’auteur sur les logiciels du
WorldWideWeb et permet leur mise dans le domaine public.
- 130 sites web en juin, 623 en décembre
- Apparition du 1er navigateur public: NCSA Mosaic disponible sur
X Windows, puis sur Windows et Mac
- Mode graphique: affichage des images dans les pages web

• 1994 : - Apparition de 2 738 sites en juin, 10 022 en décembre

- Le site Yahoo crée par deux étudiants
- Développement de l’application Netscape Navigator 1.0
- en Octobre, fondation du World Wide Web Consortium (W3C) dans
le but de standardisation et développement du web.

Présenté par : Mme TOUIL 2016-2017 10

 C Introduction au World Wide Web
• 1995 : - Microsoft créait MSN pour concurrencer Internet et le web, puis
change d’avis et lance la guerre des navigateurs.
- Apparition Internet Explorer 1.0 et 2.0
- Apparition du moteur de recherche AltaVista

• 1996 : Apparition du navigateur Opera

• 1997 : Mise à jour de l’Internet Explorer 4.0

• 1998 : Apparition de Google

• 1999 : Internet Explorer 5.0

• 2001 : Lancement du site Wikipédia

Présenté par : Mme TOUIL 2016-2017 11

 C Introduction au World Wide Web
• 2003 : Apple lance Safari (navigateur web)

• 2004 : - lancement Mozilla Firefox 1.0

- apparition du Facebook

• 2008 : Google lançait Google Chrome

• Actuellement : explosion du Web mobile

• En cours de développement : le web sémantique

Présenté par : Mme TOUIL 2016-2017 12

 C Introduction au World Wide Web
2- Architecture Client / Serveur

L’architecture client/serveur désigne un mode de communication

entre plusieurs composants d’un réseau.

Présenté par : Mme TOUIL 2016-2017 13

 C Introduction au World Wide Web
Client Web

Appelé aussi Client HTTP, est un logiciel conçu pour se connecter au

serveur HTTP , demander des ressources, les recevoir et les visualiser à
l’utilisateur.
Exemple : Mozilla Firefox, Google Chrome, Safari, Opéra

Serveur Web

Appelé aussi Serveur HTTP, est un logiciel permettant de stocker les

ressources Web et les transférer aux clients Web via le protocole HTTP
Exemple : Apache HTTP Server

Un serveur est généralement capable de servir plusieurs clients

simultanément.

Présenté par : Mme TOUIL 2016-2017 14

 C Introduction au World Wide Web
3- Le protocole HTTP

Le HyperText Transfer Protocol, HTTP, est un protocole de

communication client-serveur développé pour le World Wide Web. Il est
utilisé pour échanger toute sorte de données entre client et serveur

Le protocole, HTTP se place au dessus de TCP et fonctionne selon un

principe de requête/réponse :

Présenté par : Mme TOUIL 2016-2017 15

 C Introduction au World Wide Web
le client transmet une requête comportant des informations sur le
document demandé et le serveur renvoie le document si disponible
ou, le cas échéant, un message d’erreur.

Https : est la variante de http sécurisé: Il garantit théoriquement

la confidentialité et l'intégrité des données envoyées par l'utilisateur

Présenté par : Mme TOUIL 2016-2017 16

 C Introduction au World Wide Web
a- Les requêtes Client
la syntaxe de la demande (=requête client) est toujours la même:

Ligne de commande (Commande, URL, Version de protocole)

En-tête de requête
<ligne vide>
Corps de requête

 Ligne de commande
1- Commande : est la méthode à utiliser, elle spécifie le type de
requête ;
Les méthodes les plus utilisées sont : GET , POST et HEAD

- GET : C'est la méthode la plus courante pour demander une

ressource. Une requête GET est sans effet sur la ressource
Présenté par : Mme TOUIL 2016-2017 17
 C Introduction au World Wide Web
- HEAD : Cette méthode ne demande que des informations sur la
ressource, sans demander la ressource elle-même.

- POST : Cette méthode doit être utilisée lorsqu'une requête modifie la

ressource.

2- URL : l'adresse de la page sur le serveur ; elle est du type :

/repertoire/[Link]

3- version du protocole : indiquer la version du protocole HTTP utilisée.

Présenté par : Mme TOUIL 2016-2017 18

 C Introduction au World Wide Web
En-tête de la requête : La requête peut avoir une ou plusieurs lignes d'en-
têtes, chacune comportant un nom et une valeur.

Corps de la requête : On envoie le corps de requête. Il peut contenir, par

exemple, le contenu d'un formulaire HTML envoyé
en POST.

Présenté par : Mme TOUIL 2016-2017 19

 C Introduction au World Wide Web
Exemple de Requête :
- GET

GET /[Link] HTTP/1.1

Host: [Link]
Accept: */*
Accept-Language: fr
User-Agent: Mozilla/4.0 (MSIE 6.0; windows NT 5.1)
Connection: Keep-Alive

Le client demande le document à l'adresse

[Link] il accepte tous les types de
document en retour, préfère les documents en français, utilise un navigateur
(browser) compatible Mozilla 4.0 sur un système Windows NT 5.1 (Windows
XP) et signale au serveur qu'il faut garder la connexion TCP ouverte à l'issue
de la requête (car il a d'autres requêtes à transmettre).
Présenté par : Mme TOUIL 2016-2017 20
 C Introduction au World Wide Web
- HEAD

HEAD / [Link] HTTP/1.1

Host: [Link]
Keep-Alive: 300
Connection: keep-alive

Le client demande des informations sur le fichier [Link] sans avoir son
contenu.

Présenté par : Mme TOUIL 2016-2017 21

 C Introduction au World Wide Web
- POST : Il a le même effet que GET sauf que, lui, envoie des données via le
corps de la requête.

POST / [Link] HTTP/1.1

Host: [Link]
Connection: Close
Content-type: application/x-www-form-urlencoded
Content-Length: 33

variable=valeur&variable2=valeur2

Le client demande une ressource en remplaçant les valeurs des champs

variable et variable2 par les valeurs données en requête. C’est-à-dire le client
demande à mettre à jour la page.

Présenté par : Mme TOUIL 2016-2017 22

 C Introduction au World Wide Web
b- La réponse SERVEUR
Les réponses ont, elles aussi, toujours la même syntaxe

Ligne de statut (Version, Code-réponse, Texte-réponse)

En-tête de réponse

Corps de réponse

- Ligne de statut
La ligne de statut est composée de :
- Version : la version HTTP du serveur
- Code-réponse : le code d'erreur retourné (par exemple 200, 403, 404,
500)
- Texte-réponse : le texte associé à l'erreur (respectivement pour les
exemples précédents : "OK", "FORBIDDEN",
"NOT FOUND", "INTERNAL ERROR").
Présenté par : Mme TOUIL 2016-2017 23
 C Introduction au World Wide Web
En-têtes
Les en-têtes sont nombreux ici aussi, en voici quelques-uns utiles :

Date: Fri, 31 Dec 1999 [Link] GMT (Date de génération de la réponse)

Server: Apache/2.2.3 (Spécifie le modèle du serveur HTTP)
Content-type: text/html (Le document retourné est de type HTML)
Content-Length: 42 (le corps du document a une longueur de 42)

Corps
Et pour finir, le Corps de réponse contient le contenu du fichier, le HTML
d'une page par exemple

Présenté par : Mme TOUIL 2016-2017 24

 C Introduction au World Wide Web
Exemple de réponse

HTTP/1.1 200 OK
Date: Thu, 11 Jan 2007 [Link] GMT
Server: Apache/2.0.54
Connection: close
Content-Type: text/html

<!DOCTYPE>
<html xmlns="[Link] xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta http-equiv="pragma" content="no-cache" />
<title>Accueil - Le Site du Zéro</title>
...

Présenté par : Mme TOUIL 2016-2017 25

 C Introduction au World Wide Web
4-Evolution du Web

 Le Web 2.0 ( Web social)

- a été utilisé pour la première fois par Dale Dougherty en 2003 et
popularisé par Tim O’Reilly dès 2004.
- Offre la possibilité aux utilisateurs pour contribuer à l’échange
d’information et interagir ( partager, échanger, …..

 Le Web 3.0 (Web sémantique )

Les informations sont comprises par l’ordinateur pour mieux répondre
aux besoins des utilisateurs selon leurs centres d’intérêts, préférences, …

 Le Web 4.0
Ca sera le futur du Web actuel

Présenté par : Mme TOUIL 2016-2017 26

 C Introduction au World Wide Web
5- Les 3 mécanismes du Web 2.0

- URL : Le Web permet d’accéder à un ensemble de ressources et Le

mécanisme de localisation peut faire appel au protocole DNS

- http : C’est un protocole de niveau applicatif basé sur le paradigme

client-serveur et sans état.

- HTML : L’Hypertext Markup Language, est le format de données conçu

pour représenter les pages web. C’est un langage de balisage.

Présenté par : Mme TOUIL 2016-2017 27

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 28

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 29

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 30

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 31

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 32

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 33

 C Introduction au World Wide Web
Que se passe-t-il quand je saisie une URL?

Présenté par : Mme TOUIL 2016-2017 34

 C Introduction au World Wide Web

Fin du chapitre 1

Présenté par : Mme TOUIL 2016-2017 35

 C

1- Généralités : page statique, page dynamique et

applications Web

2 Langages de balise : définition et historique

3 HTML5

4 - CSS 3

5- JavaScript

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 1
 C

a. Qu’est ce qu’une page statique

Une page Web est dite statique, si elle est visible telle qu’elle a été conçue
Cette page peut présenter toute forme de contenu: animation, image, vidéo
…
mais elle est toujours présentée de la même manière.

b. Qu’est ce qu’une page dynamique ?

La page dynamique permet de présenter les informations de différentes
Manières selon l’interaction avec le visiteur
La page dynamique est alors construite au fur et à mesure grâce à une
Programmation conçue par l’Administrateur du site

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 2
 C

c. Exemple de site dynamique :

- Site e-commerce : présentation des articles par thèmes, couleurs, prix,…
- Les forums: les visiteurs peuvent participer au contenu du site.

d. Avantages et Inconvénients des 2 pages

L’utilisation des pages dynamiques est plus souple pour l’évolution du site
mais nécessite plus de temps de travail pour la programmation.
En opposition, les pages statiques sont plus « figées » mais plus simples
à réaliser.

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 3
 C

e. Application Web
• Une application web désigne un logiciel applicatif hébergé sur un serveur
et accessible via un navigateur web.
• Contrairement à un logiciel traditionnel, l’utilisateur d’une application
web n’a pas besoin de l’installer sur son ordinateur. Il lui suffit de se
connecter à l’application à l’aide d’un navigateur.

f. exemple
• une gestion de réservation pour un hotel
• Site onec ( office national des examens et concours) .

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 4
 C

- Définition :
1- la balise est un mot clé utilisé pour la structuration d'un document et
qui sera invisible par le lecteur final, on parle alors de langage de balisage.

2- un langage de balisage est un langage permettant de structurer

(ranger) ou mettre en forme (présenter) des données en les organisant à
l'aide de balises. Le langage de balisage le plus connu est sans doute le
HTML qui sert à construire les pages Web.

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 5
 C

3- HTML (HyperText Markup Language) est le format de données conçu

pour représenter les pages web.
HTML est initialement dérivé du Standard Generalized Murkup Language
(SGML) (Langage de balisage généralisé normalisé).

- Historique :
1989-1992 : HTML est une des 3 inventions à la base du World Wide
Web, avec le HTTP et les adresse web (URL).

1993 : HTML 1.0 à la fin de l’année 1993, le terme HTML+ est utilisé
pour désigner la version future de HTML.

1995-1996 : HTML 2.0

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 6
 C

1997 : HTML 3.2 et HTML 4.0

1999 : HTML 4.01

2000-2006 : XHTML une version extensible de HTML

2007 à nos jours: HTML 5 et abandon du XHTML

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 7
 C

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 8
 C

1 Introduction

2 Les bases de HTML 5

3 Les Tableaux

4 Les Formulaires

5 Divers : quelques fonctionnalités avancées

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 9
 C

• HTML 5 : est la dernière version du langage HTML

• HTML ( HyperText Markup Language) : langage de balisage utilisé
pour écrire et structurer des documents hypertextes.

• Notion d’hypertexte ( déjà expliquée)

• Notion de balisage

• Une balise : est une unité syntaxique (information du syntaxe) qui

permet de délimiter une partie du texte.

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 10
 C

Exemple
est le titre du document ?
Page d͛aĐĐueil <title> Page d͛aĐĐueil </title>

est un paragraphe ?
Soyez les bienvenus <p> Soyez les bienvenus </p>

est un autre paragraphe ?

Merci de votre visite <p> Merci de votre visite </p>

• Les balises indiquent la nature du texte qu'elles encadrent. Elles veulent

dire par exemple « ceci est un titre de la page » ,
« ceci est un paragraphe du texte »,…
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 11
 C

• Elément HTML : est la partie du document délimitée par les balises

Exemple : élément HTML paragraphe

<p> Ceci est un paragraphe </p>

Balise d’ouverture Balise de fermeture

Exemple : élément HTML titre
<title> Ceci est un titre du document </title >
• Elément HTML sans contenu : Défini par une balise auto-fermante
<br> : élément HTML effectuant un saut de ligne
<hr> : élément HTML traçant une ligne horizontale
<img> : élément HTML pour afficher une image
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 12
 C

• Attribut : Est une information auxiliaire définissant une propriété de

l’élément HTML

A quoi cela sert-il?

 Attribut SCR : permet de spécifier la localisation de l’image à charger
<img scr=‘’tphtml/[Link]‘’>
 Attribut ALIGN de la balise P : gère l’alignement des paragraphes par
rapport à la marge droite et la marge gauche
 center : permet de centrer le paragraphe
 left et right : permet d’aligner à gauche (resp. à droite ) le
paragraphe
 justify : permet d’aligner à droite et à gauche le paragraphe
<p align=‘’center’’> Ceci est un paragraphe centré </p>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 13
 C

 Chaque élément HTML avec contenu doit avoir une balise d’ouverture et
une balise de fermeture.

 les balises doivent être bien imbriquées :

première ouverte – dernière fermée
<ol><li> paragraphe </ol> </li> <ol><li> paragraphe </li> </ol>

 le langage est insensible à la casse :

<p> Paragraphe </P>

 Les attributs doivent être séparés par des espaces et il recommandé de

placer leur valeurs entre guillemets

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 14
 C

1 Introduction

2 Les bases de HTML 5

3 Les Tableaux

4 Les Formulaires

5 Divers : quelques fonctionnalités avancées

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 15
 C

<!DOCTYPE html> Précise qu’il s’agit d’un document HTML 5

(obligatoire)
<!-- commentaire --> Commentaire (optionnel)
<html> La racine du document contient
obligatoirement deux fils head et body
<head>
<title> Titre de la page </title>
……
</head>
<body>
……
</body>
</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 16
 C

<!DOCTYPE html)
<!– commentaire -- >
<html lang=‘’fr’’ dir= ‘’ltr’’> - Attribut lang précise la langue
utilisée pour éditer le contenu de la
page ( fr, en, ar, …)
- Attribut dir précise le sens de
lecture ltr
<head> (gauche à droite) ou rtl (droite à gauche)
<title> Titre de la page </title>
……
</head>
<body>
……
</body>
</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 17
 C

<!DOCTYPE html)

<!– commentaire -- >

<html lang= ‘’fr’’ dir= ‘’ltr’’>

<head>
<title> Titre de la page </title> L’entête : Fournit des renseignements sur la page
……
</head>

<body>
…… Le corps :représente le contenu de la page (texte, image, tableau,…)
</body>
</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 18
 C

<!DOCTYPE html)

<!– commentaire -- >

<html lang= ‘’fr’’ dir= ‘’ltr’’>

<head>
<title> Titre de la page </title> Le titre de la page (obligatoire)
……
</head>

<body>
……
</body>
</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 19
 C

<!DOCTYPE html>
<html >
<head>
<title> Page HTML 5 minimale </title>
</head>
<body>
<p> salut ! <br> C’est ma première page</p>
</body>
</html>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 20
 C

<head>
<title> Page HTML simple </title>
<meta Charset=‘’UTF-8’’>

</head>

cette balise META permet d’avoir une information sur l’encodage des
caractères utilisés (UTF-8)
il est recommander de la placer au début de la section <head> ,
surtout avant <title> ,

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 21
 C

<head>
<meta Charset=‘’UTF-8’’>
<title> Page HTML simple </title>
<meta name=‘’ keywords’’ content=‘’Web, HTML5, CSS‘’>

</head>
Des mots clés pour l’indexationde la page

La balise META keywords, permet d’indiquer un certain nombre de

mots-clés à associer à la page

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 22
 C

<head>
<meta Charset=‘’UTF-8’’>
<title> Page HTML simple </title>
<meta name=‘’ keywords’’ content=‘’Web, HTML5, CSS3’’>
<meta name=‘’description’’ content=‘’description de ma page’’>

</head>
Description de la page affichée par les moteurs de
recherche

Cette META permet de fournir une courte description de la page web.

Cette description est notamment utilisée par les principaux moteurs de
recherche, pour fournir le court texte d’aperçu des pages de résultats.
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 23
 C

<head>
<meta Charset=‘’UTF-8’’>
<title> Page HTML simple </title>
<meta name=‘’keyword’’ content=‘’Web , HTML5, CSS3’’>
<meta name=‘’description’’ content=‘’description de ma page’’>
<meta http-equiv=‘’refresh‘’ content=‘’10’’>

</head>
Rafraichissement ( Rechargement) de la page toutes
les 10 secondes

L’attribut refresh permet d’ordonner au navigateur de recharger la

page toutes les n secondes
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 24
 C

<head>
<meta Charset=‘’UTF-8’’>
<title> Page HTML simple </title>
<meta name=‘’keywords ‘’ content=‘’Web, HTML5, CSS3’’>
<meta name=‘’description ‘’ content=‘’description de ma page’’>
<meta http-equiv=‘’refresh’’ content=‘’10’’>
<meta name="Date" content=‘’ Mon, 13 February 2017 [Link]">

</head>
Date de création ou mise à jour de la page

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 25
 C

Paragraphe
<body>
<p title=‘’Description 1’’ > Premier paragraphe </p>
<p title =‘’Description 2’’ > Deuxième paragraphe </p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 26
 C

Paragraphe
<body>
<p title=‘’Description 1’’ > Premier paragraphe </p>
<p title =‘’Description 2’’ > Deuxième paragraphe </p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 27
 C

Paragraphe
<body>
<p title=‘’Description 1’’ > Premier paragraphe </p>
<p title =‘’Description 2’’ > Deuxième paragraphe </p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 28
 C

Texte en gras

<b> Ceci est un texte en gras </b>

Texte en italique

<i> Ceci est un texte en italique </i>

Texte en petite taille

<p> Ceci est un texte <small> petit </small> , </p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 29
 C

Texte souligné
<u> Ceci est un texte en gras </u>

Texte en indice
<p> la variable X _i .</p>

Texte marqué
<p> <mark> Remarque : </mark> </p>

Alignement du texte ( attribut align):

<p align=‘’center’’> Paragraphe avec texte centré </p>

Remarque : l’attribut align peut avoir les valeurs center, rignt, left.
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 30
 C

Liste non ordonnée ( à puces: Elément HTML ul + li

<p>
<b> Plan du cours : </b>
<ul>
<li> Introduction au Web </li>
<li> HTML 5 </li>
<li> CSS 3</li>
<li> JavaScript </li>
<li> ….. </li>
</ul>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 31
 C

Liste non ordonnée ( à puces: Elément HTML ul + li

<p>
<b> Plan du cours : </b>
<ol>
<li> Introduction au Web </li>
<li> HTML 5 </li>
<li> CSS 3</li>
<li> JavaScript </li>
<li> ….. </li>
</ol>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 32
 C

Paramètres d’une liste ordonnée (numérotée)

Le type de la numérotation : Attribut type

• type=‘’1’’: 1,2,3,… (Numérotation décimale )

• type=‘’a’’: a, b, c, … (Numérotation alphabétique minuscule)
• type=‘’A’’: A, B, C, … (Numérotation alphabétique majuscule)
• type=‘’i’’: i, ii, iii, … (Numérotation en chiffres romains minuscules)
• type=‘’I’’: I, II, III, … (Numérotation en chiffres romains majuscules)

La valeur initiale de la numérotation : Attribut start

Une numérotation descendante : Attribut booléen reversed

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 33
 C

Paramètres d’une liste ordonnée (numérotée)

Exemple
<p>
<b> Plan du cours : </b>
<ol type=‘’I’’ start=‘’3’’>
<li> Introduction au Web </li>
<li> HTML 5 </li>
<li> CSS 3</li>
<li> JavaScript </li>
<li> ….. </li>
</ol>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 34
 C

Paramètres d’une liste ordonnée (numérotée)

Exemle
<p>
<b> Plan du cours : </b>
<ol type=‘’I’’ reversed=‘’5’’>
<li> Introduction au Web </li>
<li> HTML 5 </li>
<li> CSS 3</li>
<li> JavaScript </li>
<li> ….. </li>
</ol>
</p>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 35
 C

Listes de définitions : Eléments HTML dl + dt + dd

La liste de définition permet de présenter un glossaire, un lexique ou un

dictionnaire.
Ces listes comportent deux parties , un Terme et une Description.

• dl : la liste de définitions (conteneur)

• dt : Le terme à définir ( terme de définition )
• dd: La définition du terme ( description de définition )

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 36
 C

Listes de définitions : Eléments HTML dl + dt + dd

• Exemple :
<p>
<b> Quelques définitions </b>
<br>
<dl>
<dt> HTML </dt>
<dd> Langage de création de pages Web </dd>
<dt> CSS </dt>
<dd> Langage de décoration de pages Web </dd>
</dl>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 37
 C

Listes de définitions : Eléments HTML dl + dt + dd

• Exemple :
<p>
<b> Quelques définitions </b>
<br>
<dl>
<dt> HTML </dt>
<dd> Langage de création de pages Web </dd>
<dt> CSS </dt>
<dd> Langage de décoration de pages Web </dd>
</dl>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 38
 C

Les Liens

Il est facile de reconnaitre un lien sur une page:

On peut faire des liens :

 d’une page vers une autre page.

 vers un autre site. liens externes le même
fonctionnement

 vers une ancre ( au sein de la même page) liens internes

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 39
 C

Les Liens

Liens externes

Lien vers un autre site

<a href="[Link]"> Aller à Google </a>

 Lien vers une autre page

- Avec un lien relatif : <a href="[Link]">Exemple de lien</a>

- Avec un lien absolu :

<a href="C:/Users/L2/Desktop/[Link]">Exemple de lien</a>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 40
 C

Les Liens
Lien vers une ancre

Une ancre est une sorte de point de repère qu’on peut mettre dans les
pages HTML lorsqu’elles sont très longues.

Pour créer une ancre, il suffit de rajouter l’attribut identifiant « id » à une

balise qui va servir de repère.

Utilisons l’attribut « id » pour donner un nom à l’ancre .

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 41
 C

Les Liens
Exemple:

<p id="p_1">
<a href="#p_10">Aller au paragraphe 10</a>
</p>
. ..
...
. ..
...
...
...
<p id="p_10">
<a href="#p_1">Aller au premier paragraphe</a>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 42
 C

Les Liens
Lien vers une ancre située dans une autre page :

Comment créer cette ancre ?

L’idée est de faire un lien qui ouvre une autre page ET qui amène
directement à une ancre sur cette page .

<a href =‘’[Link]#id_ancre’’> Titre du paragraphe </a>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 43
 C

Les Liens
Exemple : soit la page 1 html suivante :

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 44
 C

Les Liens
Exemple : soit la page 1 html suivante :

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 45
 C

Les Liens
Et soit la 2ème page HTML suivante :

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 46
 C

Les Liens

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 47
 C

Les Liens

Lien vers le début de la page :

<p>
<a href=‘’#’’> Aller au début de la page </a>
</p>

Ouvrir un lien dans un nouvel onglet :

<p>
<a href="[Link]" target="_blank">Lien</a>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 48
 C

Les Liens
Lien vers une adresse e-mail :

<p><a href=“[Link] Contactez-nous</a> </p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 49
 C

Les Liens
Lien de téléchargement :

<p> <a href="C:/Users/digitec/Desktop/DAW/[Link]">Télécharger</a>

</p>
Le fichier « [Link] » sera ouvert dans le même onglet que la page appelante

<p> <a href="C:/Users/digitec/Desktop/DAW/[Link]" target="_blank" >

Télécharger </a>
</p>

Le fichier « [Link] » sera ouvert dans un autre onglet

Lien sous forme d’image :

<p>
<a href="[Link]"> <img src="[Link]" width="70px" height="50px"> </a>
</p>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 50
 C

Les Titres
On doit utiliser six niveaux de titres différents.

Pourquoi?
Parce que, dans un document, on peut dire « ceci est un titre très
important », « ceci est un titre un peu moins important », « ceci est un titre
encore moins important », etc.

On a donc six (06) balises de titres différentes:

 <h1> </h1> : signifie « titre très important »
 <h2> </h2> : signifie « titre important »
 <h3> </h3> : signifie « sous-titre » c’est un titre un peu moins important
 <h4> </h4> : signifie « titre moins important »
 <h5> </h5> : signifie « titre pas important »
 <h6> </h6> : alors là pas important du tout

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 51
 C

Les Titres
Exemple :

<Body>
<h1> Titre du 1er niveau </h1>
<h2> Titre du 2ème niveau </h2>
<h3> Titre du 3ème niveau </h3>
<h4> Titre du 4ème niveau </h4>
<h5> Titre du 5ème niveau </h5>
<h6> Titre du 6ème niveau </h6>
</body>

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 52
 C

Les divisions – L’élément HTML div

Définition :
 La balise <div> est un cadre qui peut inclure tous les éléments HTML (tels
que les paragraphes les tableaux, les listes, les images ..., et également
d'autres divisions).

 Cet élément est l'un des plus utilisé pour structurer les pages html en
plusieurs grandes sections :
• en tête
• partie principale,
• partie navigation,
• pied de page,
• ...

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 53
 C

Les divisions – L’élément HTML div

Exemple

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 54
 C

Les divisions – L’élément HTML div

Exemple : le code HTML correspondant :
<body>
<div style="background : yellow ; color : red">
<h1>Introduction:</h1>
</div>
<div style="background : blue ; color : yellow">
<h1>Chapitre 1:</h1>
</div>
<div style="background : #FFA500 ; color : blue" dir="rtl">
<h1> : ‫< الترجمة‬/h1>
</div>
<div style="background : yellow ; color : red" align="center">
<h1>Conclusion:</h1>
</div>
</body>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 55
 C

Les couleurs HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 56
 C

Structurer la page
En-tête de la page
zone de Navigation ( Menu)

Contenu de la page
Partie latérale

Pied de page

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 57
 C

Structurer la page – Elément HTML 5 à utiliser

En-tête de la page
zone de Navigation ( Menu) header

nav
Contenu de la page
Partie latérale

div, h1, h2, h3, h4, h5, h6, p, a, img

Pied de page footer

aside
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 58
 C

Structurer la page – Elément HTML 5 à utiliser

<header> : Section d'introduction d'un article, d'une autre section ou du

document entier (en-tête de page).

<nav> : Section possédant des liens de navigation principaux (au sein

du document ou vers d'autres pages)

<aside > : Section dont le contenu est un complément par rapport à ce

qui l'entoure, qui n'est pas forcément en lien direct avec le
contenu mais qui peut apporter des informations
supplémentaires.

<footer> : Section de conclusion d'une section ou d'un article, voire du

document entier (pied de page).

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 59
 C

Structurer la page – Attribut « style »

Cet attribut permet la mise en forme de l’élément HTML

Exemple : ( exemple en TP)

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 60
 C

1 Introduction

2 Les bases de HTML 5

3 Les Tableaux

4 Les Formulaires

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 61
 C

Création des tableaux

Elément HTML : table , tr, td

La création des tableaux se fait avec les éléments de base :

• <table> : permet de créer le tableau en entier

• <tr> (table row) : élément pour créer une ligne de tableau.
• <td> (table data) : élément pour créer une cellule de donnée.
• <caption> : attribue un titre au tableau.

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 62
 C

Création des tableaux

Exemple :
<!DOCTYPE html>
<html>
…..
<table border="1">
<caption> Mon premier tableau </caption>
<tr>
<td> Cellule 1 </td> <td> Cellule 2 </td>
</tr>
<tr>
<td> Cellule 3 </td> <td> Cellule 4 </td>
</tr>
</table>
….
</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 63
 C

Création des tableaux

Types de tableaux :

1- Les tableaux réguliers :

2- Les tableaux irréguliers :

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 64
 C

Tableaux réguliers
Titres des lignes
Sont crées avec l’élément (balise) <th> ( à ajouter au début de la ligne )

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 65
 C

Tableaux réguliers
Exemple : Code HTML
<!DOCTYPE html>
<html>
….
<table border="1">
<caption>Statistique des moyennes</caption>
<tr>
<th>Nom de l'étudiant:</th>
<td>étudiant 1</td><td>étudiant 2</td><td>étudiant 3</td>
</tr>
<tr>
<th>Moyenne:</th>
<td align="center">12</td><td align="center">11</td>
<td align="center">09</td>
</tr>
</table>
…..</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 66
 C

Tableaux irréguliers
Fusion des colonnes : sont faites avec l’attribut de cellule colspan .
<!DOCTYPE html>
<html>
….
<table border="2">
<caption>Tableau irrégulier </caption>
<tr>
<td> Cellule 1 </td><td> Cellule 2 </td><td> Cellule 3 </td>
</tr>
<tr>
<td colspan="2" align="center"> Cellule 4 </td> <td> Cellule 5 </td>
</tr>
<tr>
<td> Cellule 6 </td> <td colspan="2" align="center"> Cellule 7 </td>
</tr>
</table>
….</html>
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 67
 C

Tableaux irréguliers
Fusion des lignes : sont faites avec l’attribut de cellule rowspan .
……
<table border="2">
<caption>Tableau irrégulier </caption>
<tr>
<td> Cellule 1 </td><td> Cellule 2 </td>
<td> Cellule 3 </td>
</tr>
<tr>
<td rowspan="2"> Cellule 4 </td> <td> Cellule 5 </td> <td rowspan="3"> Cellule 6 </td>
</tr>
<tr> <td> Cellule 7 </td> </tr>
<tr>
<td> Cellule 8 </td><td> Cellule 9 </td>
</tr>
</table>
…..
[Link] (UMBB)
Présenté par : Mme TOUIL 2016-2017 68
 C

1 Introduction

2 Les bases de HTML 5

3 Les Tableaux

4 Les Formulaires

1 Introduction
2 création des formulaires
3 validatio s ta i ue des do es d’u fo ulai e

[Link] (UMBB)
Présenté par : Mme TOUIL 1
 C

Introduction

• Un formulaire est un ensemble des champs permettant de saisir des

données .

• Les formulaires sont utilisés pour envoyer des données vers le serveur.

•Les do es d u fo ulai es so t valid es s ta i ue e t :

 soit automatiquement par le navigateur

 soit grâce aux nouveautés de HTML5

[Link] (UMBB)
Présenté par : Mme TOUIL 2
 C

Introduction

Principe de fonctionnement

[Link] (UMBB)
Présenté par : Mme TOUIL 3
 C

Introduction

Principe de fonctionnement

[Link] (UMBB)
Présenté par : Mme TOUIL 4
 C

Introduction

Principe de fonctionnement

[Link] (UMBB) 5
Présenté par : Mme TOUIL
 C

Introduction

Principe de fonctionnement

[Link] (UMBB)
Présenté par : Mme TOUIL 6
 C

Introduction

Manipulation « complète » d u fo ulai e:

1. Préciser la méthode de transmission et le script de réception

2. Créer les champs du formulaire ( Balises HTML5) Coté Client
3. Définir les règles de validation syntaxique des données

4. Programmer le script de réception Coté Serveur

[Link] (UMBB)
Présenté par : Mme TOUIL 7
 C

Introduction
Manipulation « complète » d u fo ulai e:

1. Préciser la méthode de transmission et le script de réception:

pour créer un formulaire ,il faut commencer par écrire la balise principale
du formulaire : <form></form>

<form method= GET ou POST action= [Link] >

…..
</form>
Attribut action : Précise le script PHP qui va recevoir les données du
formulaire.

Attribut method: précise la méthode du Protocol HTTP qui va être

utilisée pour envoyer les données du formulaire.

[Link] (UMBB)
Présenté par : Mme TOUIL 8
 C

Introduction
Manipulation « complète » d u fo ulai e:

a) Method = GET : - c'est une méthode en général assez peu adaptée car
elle est limitée à 255 caractères.
- Les do es so t e vo es lai e e t da s l URL

b) Method = POST : - c'est la méthode la plus utilisée pour les formulaires

car elle permet d'envoyer un grand nombre
d'informations.
- Les do es so t e vo es d u e faço t a spa e te.

[Link] (UMBB) 9
Présenté par : Mme TOUIL
 C

Introduction

1 Introduction

2 Les bases de HTML 5

3 Les Tableaux

4 Les Formulaires

1 Introduction
2 création des formulaires
3 validatio s ta i ue des do es d’u fo ulai e
[Link] (UMBB) 10
Présenté par : Mme TOUIL
 C

Création des formulaires

Regroupement des champs : élément fielset et legend

Exemple :

<form method="POST" action="[Link]">

<fieldset>
<legend><b>Données Personnelles:</b> </legend>
</fieldset>
<fieldset>
<legend><b>Diplômes:</b> </legend>
</fieldset>
<fieldset>
<legend><b>Cursus:</b> </legend>
</fieldset>
</form>
[Link] (UMBB)
Présenté par : Mme TOUIL 11
 C

Création des formulaires

Regroupement des champs : élément fieldset et legend

Exemple :

<form method="POST" action="[Link]">

<fieldset>
<legend><b>Données Personnelles:</b> </legend>
</fieldset>
<fieldset>
<legend><b>Diplômes:</b> </legend>
</fieldset>
<fieldset>
<legend><b>Cursus:</b> </legend>
</fieldset>
</form>
[Link] (UMBB) 12
Présenté par : Mme TOUIL
 C

Création des formulaires

Zone de texte : élément input avec type égal à text

Exemple :

<form method="POST" action="[Link]">

<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Nom:</b> </label>
<input type="text" name=" o >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 13
 C

Création des formulaires

Mot de passe: élément input avec type égal à password

Exemple :

<form method="POST" action="[Link]">

<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Mot de passe:</b> </label>
<input t pe= password" name= mot_pass >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 14
 C

Création des formulaires

Adresse URL : élément input avec type égal à url

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Votre URL:</b> </label>
<input t pe= u l" name= adresse_url >
</fieldset>
</form>

[Link] (UMBB) 15
Présenté par : Mme TOUIL
 C

Création des formulaires

Adresse e-mail: élément input avec type égal à email

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Adresse e-mail:</b> </label>
<i put t pe= e ail" name= adresse_email >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 16
 C

Création des formulaires

Adresse e-mail : élément input avec type égal à email

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Adresse e-mail:</b> </label>
<i put t pe= e ail" name= adresse_email >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 17
 C

Création des formulaires

Date : élément input avec type égal à date

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Date de naissance:</b> </label>
<i put t pe= date" name= date_naissance i = 99 -01-
a = -02-23 >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 18
 C

Création des formulaires

Date : élément input avec type égal à date

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Date de naissance:</b> </label>
<i put t pe= date" name= date_naissance i = 99 -01-
a = -02-23 >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 19
 C

Création des formulaires

Mois : élément input avec type égal à month
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Mois de naissance:</b> </label>
<i put t pe= month" name= mois_naissance >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 20
 C

Création des formulaires

Temps: élément input avec type égal à time
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>A quelle heure dormez-vous?:</b> </label>
<i put t pe= ti e" name= temps_dodos i = : :
a = : : >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 21
 C

Création des formulaires

Nombre: élément input avec type égal à number
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Votre taille (cm):</b> </label>
<i put t pe= number" name= taille i =
a = step= >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 22
 C

Création des formulaires

Intervalle: élément input avec type égal à range
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Contrôle audio :</b> </legend>
<label> <b>Ajuster le volume</b> </label>
<i put t pe= a ge" name= volu e i =
a = step= >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 23
 C

Création des formulaires

Couleur: élément input avec type égal à color
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Votre couleur préférée :</b> </label>
<i put t pe= color" name= couleur_pref value="# 9E " >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 24
 C

Création des formulaires

Couleur: élément input avec type égal à color
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Votre couleur préférée :</b> </label>
<i put t pe= color" name= couleur_pref value="# 9E " >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 25
 C

Création des formulaires

Barre de progression : élément progress
Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Téléchargement :</b> </legend>
<label> <b>Temps restant :</b> </label>
<progress name= p og essio value= . >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 26
 C

Création des formulaires

Sélection unique : élément input avec type égale à radio

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Divers :</b> </legend>
<label> <b>Végetarion :</b> </label>
<i put t pe= adio name= vegetarien value= oui > (Oui)
<i put t pe= adio name= vegetarien value= o checked> (Non)
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 27
 C

Création des formulaires

Sélection multiple : élément input avec type égale à checkbox

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Loisirs :</b> </legend>
<label> <b>Voyage :</b> </label>
<i put t pe= chekbox name= vo age > <br>
<label> <b>Natation :</b> </label>
<i put t pe= chekbox name= atatio > <br>
<label> <b>Musique :</b> </label>
<i put t pe= chekbox name= usi ue > <br>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 28
 C

Création des formulaires

Sélection multiple : élément input avec type égale à checkbox

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Loisirs :</b> </legend>
<label> <b>Voyage :</b> </label>
<i put t pe= chekbox name= vo age > <br>
<label> <b>Natation :</b> </label>
<i put t pe= chekbox name= atatio > <br>
<label> <b>Musique :</b> </label>
<i put t pe= chekbox name= usi ue > <br>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 29
 C

Création des formulaires

Liste de choix: éléments select et option

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Votre ville de naissance:</b> </label>
<select name= pays_naissance >
<optio value= algerie > Algérie </option>
<optio value= espagne > Espagne </option>
<optio value= france > France </option>
<optio value= maroc > Maroc </option>
</select>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 30
 C

Création des formulaires

Liste de choix: éléments select et option

Exemple :
<form method="POST" action="[Link]">
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Votre ville de naissance:</b> </label>
<select name= pays_naissance >
<optio value= algerie > Algérie </option>
<optio value= espagne > Espagne </option>
<optio value= france > France </option>
<optio value= maroc > Maroc </option>
</select>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 31
 C

Création des formulaires

Liste de choix avec catégories: éléments select et option et optgroup

Exemple :
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Pays de naissance:</b> </label>
<select name= pays_naissance >
<optgroupe la el = Af i ue >
<optio value= algerie > Alg ie </optio >
<optio value= maroc > Ma o </optio >
</optgroup>
<optgroup la el= Eu ope >
<optio value= espagne > Espag e </optio >
<optio value= france selected > France </option>
</optgroup>
</select>
</fieldset>
[Link] (UMBB)
Présenté par : Mme TOUIL 32
 C

Création des formulaires

Liste de choix avec catégories: éléments select et option et optgroup

Exemple :
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Pays de naissance:</b> </label>
<select name= pays_naissance >
<optgroupe la el = Af i ue >
<optio value= algerie > Alg ie </optio >
<optio value= maroc > Ma o </optio >
</optgroup>
<optgroup la el= Eu ope >
<optio value= espagne > Espag e </optio >
<optio value= france > F a e </optio >
</optgroup>
</select>
</fieldset>
[Link] (UMBB)
Présenté par : Mme TOUIL 33
 C

Création des formulaires

Sélection de fichiers: éléments input avec type égaie à file
Exemple :
<form method= POST a tio = t aite e [Link] >
<fieldset>
<legend><b>Données personnelles :</b> </legend>
<label> <b>Envoyer votre CV</b> </label>
<i put t pe= file accept= .PDF,.DOCX >
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 34
 C

Création des formulaires

Sélection de fichiers: éléments input avec type égaie à file

L att i ut « accept » peut avoir les valeurs suivantes:

a) Image/* : pour tous les fichiers image.
b) Audio/* : pour tous les fichiers audio.
c) Video/* : pour tous les fichiers video.
d) Une extension : comme .pdf, .png, .docx, .jpeg,…
e) Plusieurs extensions : par exemple accept= .pdf, .png, .docx, .jpeg,…

L att i ut multiple permet de sélectionner plusieurs fichiers.

[Link] (UMBB)
Présenté par : Mme TOUIL 35
 C

Création des formulaires

Texte multi-ligne : éléments textarea

Exemple :
<form method= POST a tio = t aite e [Link] >
<fieldset>
<legend><b>Divers :</b> </legend>
<label> <b>Commentaire : </b> </label><br>
<textarea name= o e tai e rows= ols= >
Vot e o e tai e ous i t esse …..
</textarea>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 36
 C

Création des formulaires

Texte multi-ligne : éléments textarea

Exemple :
<form method= POST a tio = t aite e [Link] >
<fieldset>
<legend><b>Divers :</b> </legend>
<label> <b>Commentaire : </b> </label><br>
<textarea name= o e tai e rows= ols= >
Vot e o e tai e ous i t esse …..
</textarea>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 37
 C

Création des formulaires

Réinitialisation ou soumettre les données :

Exemple :
<form method= POST a tio = t aite e [Link] >
<fieldset>
<legend><b>Action :</b> </legend>
<label> Réinitialisez les données : </label>
<input t pe= eset value= Effa e ><br>
<label> Envoyez les données : </label>
<input t pe= submit value= Valide ><br>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 38
 C

Création des formulaires

Réinitialisation ou soumettre les données :

Exemple :
<form method= POST a tio = t aite e [Link] >
<fieldset>
<legend><b>Action :</b> </legend>
<label> Réinitialisez les données : </label>
<input t pe= eset value= Effa e ><br>
<label> Envoyez les données : </label>
<input t pe= submit value= Valide ><br>
</fieldset>
</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 39
 C

Création des formulaires

Attributs importants:

a) value : Valeur par défaut ( ou texte des boutons reset et submit).

b) size : Nombre de caractères par défaut de la zone de texte.
c) maxlength : Nombre maximal de caractères de la zone de texte.
d) placeholder : Indication du texte à saisir ( disparait après clic).
e) required : Attribut booléen qui précise que le champ est obligatoire
( les données du formulaire ne seront pas transmis si ce champ
o ligatoi e a pas de valeu )
f) pattern : restriction sur les valeurs à saisir

[Link] (UMBB)
Présenté par : Mme TOUIL 40
 C

Création des formulaires

1 Introduction

2 Les bases de HTML 5

3 Les Tableaux

4 Les Formulaires

1 Introduction
2 création des formulaires
3 validatio s ta i ue des do es d’u fo ulai e
[Link] (UMBB) 41
Présenté par : Mme TOUIL 41
 C

Validatio s ta i ue des do ées d u fo ulai e

Validation faite par le navigateur:

<form method="POST" action="[Link]">

<fieldset>
<legend><b>Données Personnelles:</b> </legend>
<label> <b>Adresse e-mail:</b> </label>
<i put t pe= e ail" name= adresse_email >
</fieldset>
</form>

[Link] (UMBB) 42
Présenté par : Mme TOUIL 42
 C

Validatio s ta i ue des do ées d u fo ulai e

Validation exigée par le développeur :

• l att i ut pattern associe une expression régulière aux champs de texte

dont les valeurs saisies doivent respecter cette expression.
• si l e p essio guli e est pas espe t e alo s la validatio du
formulaire est bloquée (pas de transmission vers le serveur).

Exemple 1 :
<form method="POST" action="[Link]">
<fieldset>
<input t pe="te t“ pattern="[a-z0-9]">
</fieldset>
</form>
Un champ de saisie qui accepte uniquement une seule lettre
minuscule ou un chiffre
[Link] (UMBB) 43
Présenté par : Mme TOUIL 43
 C

Validatio s ta i ue des do ées d u fo ulai e

Exemple 2:
<form method="POST" action="[Link]">
<fieldset>
<input t pe="te t“ pattern="[0-9]+">
</fieldset>
</form>
Un champ de saisie qui accepte un ou plusieurs chiffres (donc un
nombre)

[Link] (UMBB) 44
Présenté par : Mme TOUIL 44
 C

Validatio s ta i ue des do ées d u fo ulai e

Quelques expressions régulières:
1.[.....] : Intervalle de valeurs permises
2.[^......] : Intervalle de valeurs non permises
3.[a-z]: Une seule lettre minuscule
4.[A-Z]: Une seule lettre majuscule
5.[a-z]*: Zéro ou plusieurs lettres minuscules
6.[A-Z]+: Une ou plusieurs lettres majuscules
7.[a-z]{8}: Exactement 8 lettres minuscules
8.[a-zA-Z]{5, 8}: Entre 5 et 8 lettres (majuscules ou minuscules)
9.[a-zA-Z]{5,}: Au minimum 5 lettres (majuscules ou minuscules)
10.[^A-Z]: Aucune lettre majuscule
11.\d: Un chiffre quelconque
12..: N’i po te uel ca act e
13.\.: Le point
14.\-: Le –(tiret du 6)
15.(a|b): Le aou le b
16.(ab): Le aet le b
[Link] (UMBB) 45
Présenté par : Mme TOUIL 45
 C

1 Introduction

2 Les fondations du CSS

3 Applicatio d u style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures

[Link] (UMBB)
Présenté par : Mme TOUIL 1
 C

Introduction

Les feuilles de style en cascade : CSS (Cascading Style Sheets) : est un

langage qui :

- Vient compléter HTML.

- Gére la mise en forme des pages Web ( site web)

[Link] (UMBB)
Présenté par : Mme TOUIL 2
 C

Introduction
Les versions de CSS

CSS 1 : dès 1996. Elle pose les bases de ce langage qui permet de
présenter sa page web, comme les couleurs, les marges, les
polices de caractères, etc.

CSS 2 : apparue en 1999. cette nouvelle version de CSS rajoute de

nombreuses options : utilisation des techniques de
positionnement très précises, permettant d'afficher des éléments
où on le souhaite sur la page.

CSS 3 : c'est la dernière version, qui apporte des fonctionnalités

intéressantes par rapport aux versions précédentes.

[Link] (UMBB)
Présenté par : Mme TOUIL 3
 C

1 Introduction

2 Les fondations du CSS

3 Applicatio d u style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
[Link] (UMBB)
Présenté par : Mme TOUIL 4
 C

Les fondations du CSS

Sélecteurs , Propriétés, Valeurs:

• Un sélecteur : détermine à quel élément un style doit être appliqué

•Une propriété : détermine le style qui va être appliqué un élément

•Une valeur : d te i e le o po te e t d u e p op i t .

[Link] (UMBB)
Présenté par : Mme TOUIL 5
 C

Les fondations du CSS

Sélecteurs , Propriétés, Valeurs:

Exemple :

Sélecteur p {

color: blue;
Propriétés valeurs
font-size: 16px;
}

[Link] (UMBB)
Présenté par : Mme TOUIL 6
 C

Les fondations du CSS

Où ECRIRE le CSS ?

• Nous avons le choix: Il ya 3 possibilités :

1- Da s l l e t head du document HTML

2- Dans les balises ouvrante du fichier HTML via un attribut style.
3- Dans un fichier CSS séparé.
Il est e o a d d utilis la de i e thode.

• Pour lier un fichier HTML avec un fichier CSS, on écrit :

<link rel= stylesheet href = fichie [Link] />

[Link] (UMBB)
Présenté par : Mme TOUIL 7
 C

Les fondations du CSS

Exemple : soit le code HTML suivant:

[Link] (UMBB)
Présenté par : Mme TOUIL 8
 C

Les fondations du CSS

1- Da s l élé e t head du document HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 9
 C

Les fondations du CSS

2- Dans les balises ouvrante du fichier HTML via un attribut style

[Link] (UMBB)
Présenté par : Mme TOUIL 10
 C

Les fondations du CSS

3- Dans un fichier CSS séparé.
O it le ode CSS da s u fi hie s pa a a t l e te sio .css
C est la thode le plus p ati ue et souple.

[Link] (UMBB)
Présenté par : Mme TOUIL 11
 C

Les fondations du CSS

3- Dans un fichier CSS séparé.
.

[Link] (UMBB)
Présenté par : Mme TOUIL 12
 C

Les fondations du CSS

Quelle méthode choisir?

La méthode la plus recommandée est celle de créer un fichier CSS séparé.

Pourquoi cette séparation entre le contenu et la mise en forme?

• Supposo s u u site est co posé de t ois 03 pages HTML.

[Link] (UMBB)
Présenté par : Mme TOUIL 13
 C

Les fondations du CSS

1er cas : Le code CSS est placé dans chacune des pages

Si un jour, on veut que les paragraphes soient écrits en rouge et non en

bleu, il faudra modifier chaque page HTML une à une .

[Link] (UMBB)
Présenté par : Mme TOUIL 14
 C

Les fondations du CSS

2ème cas : Si on travaille avec un fichier CSS externe on aura besoin

d i e le ode CSS u e seule fois pou tout es les pages HTML.

[Link] (UMBB)
Présenté par : Mme TOUIL 15
 C

Les fondations du CSS

Résumé:

 U st le, appli u à toutes les pages d u site, assu e la oh e e

graphique de ce site;

 La maintenance de site en est facile ( on ne modifie que la feuille de

style);

 le code HTML est lisible et facilement modifiable;

[Link] (UMBB)
Présenté par : Mme TOUIL 16
 C

1 Introduction

2 Les fondations du CSS

3 Applicatio d u style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
17
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
[Link] (UMBB) 17
Présenté par : Mme TOUIL
 C

Applicatio d u style
Sélectionner une balise

•Il s agit de la s le tio la plus si ple, puis ue le s le teu est o stitu du

nom de la balise sans le début < et de fin />;

Exemple : p {
color:yellow; background-color:blue;
} signifie que le texte de tous les paragraphes figure
en jaune sur un fond bleu

[Link] (UMBB)
Présenté par : Mme TOUIL 18
 C

Applicatio d u style
Sélectionner plusieurs balises

•Il s agit d appli ue le e st le à plusieu s alises diff e tes e les

énumérant et en les séparant par une virgule dans le sélecteur.

Exemple : h1 { color:white; background-color:blue; }

div { color:white; background-color:blue; }
p { color:white; background-color:blue; }

h1,div,p { color:white; background-color:blue; }

Cette possibilité de regroupement peut être utile pour définir des styles
communs à un ensembles de balises.
[Link] (UMBB)
Présenté par : Mme TOUIL 19
 C

Applicatio d u style
Sélecteur universel :
• Pour appliquer un style à toutes les balises , on utilise le sélecteur
universel *
Exemple : pour que la couleur du fond de tous les éléments soit le jaune:
*{background-color:yellow}

[Link] (UMBB)
Présenté par : Mme TOUIL 20
 C

Applicatio d u style
Sélecteur universel :
• Pour appliquer un style à toutes les balises , on utilise le sélecteur
universel *
Exemple : pour que la couleur du fond de tous les éléments soit le jaune:
*{background-color:yellow}

[Link] (UMBB)
Présenté par : Mme TOUIL 21
 C

Applicatio d u style
Sélecteur universel :

• Pour appliquer un style à toutes les balises , on utilise le sélecteur

universel *
Exemple : pour que la couleur du fond de tous les éléments soit le jaune:

*{background-color:yellow}

• Cela e p he pas de odifie ette p op i t s pou u e alise

particulière, en la redéfinissant uniquement pour celle-ci :

*{background-color:yellow}
p{background-color:gray;}

[Link] (UMBB)
Présenté par : Mme TOUIL 22
 C

Applicatio d u style
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 23
 C

Applicatio d u style
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 24
 C

Applicatio d u style
Les commentaires dans du CSS

Comme en HTML, il est possible de mettre des commentaires.

Les commentaires ne seront pas affichés.

Pour faire un commentaire :

/* suivi de votre commentaire */

[Link] (UMBB)
Présenté par : Mme TOUIL 25
 C

Applicatio d u style

Définir Class et id

Tout e u o a vu jus u à p se t i pli ue pa e e ple ue tous les

paragraphes possèdent la même présentation.

Co e t fai e pou ue e tai s pa ag aphes seule e t soie t its d u e

manière différente? .

Pour répondre à la question, on peut utiliser deux (02) attributs spéciaux qui
fonctionnent sure toutes les balises:

• L att i ut class; Ces att i uts pe ette t d appli ue diff e ts

• L att i ut id; styles à des balises de même type.

[Link] (UMBB)
Présenté par : Mme TOUIL 26
 C

Applicatio d u style
Définir « class »
• l att i ut class peut se ett e su i po te uelle alise, aussi ie tit e,
paragraphe, image, etc…

• Pe et d appli ue u st le à u e lasse d fi ie de alises.

• Pour créer une classe, le sélecteur est constitué du nom choisi pour la
lasse p d d u poi t.
Exemple : .couleur_b { color:blue;}

• A e stade, la lasse est a st aite et e s appli ue à au u l e t. Pou

mettre un paragraphe précis de la page avec un texte, on doit écrire dans
le code HTML: <p lass= couleur_b > Te te de pa ag aphe </p>
On doit écrire un nom qui sert à identifier la balise p
[Link] (UMBB)
Présenté par : Mme TOUIL 27
 C

Applicatio d u style
• Les textes des autres paragraphes reste inchangé.
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 28
 C

Applicatio d u style
• Les textes des autres paragraphes reste inchangé.
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 29
 C

Applicatio d u style

• La classe couleur_b peut do s appli ue à u tit e <h1>, une division

<div> ou un élément <span> , si ple e t e iva t pou ha u d e t e
eu l att i ut lass= couleur_b

[Link] (UMBB)
Présenté par : Mme TOUIL 30
 C

Applicatio d u style
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 31
 C

Applicatio d u style
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 32
 C

Applicatio d u style
Définir id (identifiant)

• Il fonctionne exactement de la même manière que « class », il ne peut

t e utilis u u e seule fois da s le ode.

• Il concerne les éléments uniques de structuration du document, comme

les blocs principaux (logo, en-tête, colonne(s), pied de page...).

• Il est spécifié en CSS par un dièse (#) :

#nom_id {
propriété:valeur;
}

[Link] (UMBB)
Présenté par : Mme TOUIL 33
 C

Applicatio d u style
Exemple 1:

[Link] (UMBB)
Présenté par : Mme TOUIL 34
 C

Applicatio d u style
Exemple 1:

[Link] (UMBB)
Présenté par : Mme TOUIL 35
 C

Applicatio d u style
Exemple 2:

[Link] (UMBB)
Présenté par : Mme TOUIL 36
 C

Applicatio d u style
Exemple 2:

[Link] (UMBB)
Présenté par : Mme TOUIL 37
 C

Applicatio d u style
Les sélecteurs avancés
une balise contenue dans une autre:
• Si on veut sélectionner, par exemple tous les <em> situés à l'intérieur
d u e alise <h3>, et mettre le texte entouré de la balise <em></em> en
bleu, on aura comme code html et code CSS comme suit:

[Link] (UMBB)
Présenté par : Mme TOUIL 38
 C

Applicatio d u style
Les sélecteurs avancés
une balise contenue dans une autre
• Si on veut sélectionner, par exemple tous les <em> situés à l'intérieur
d u e alise <h3>, et mettre le texte entouré de la balise <em></em> en
bleu, on aura comme code html et code CSS comme suit:

[Link] (UMBB)
Présenté par : Mme TOUIL 39
 C

Applicatio d u style
 une balise qui en suit une autre
Si on veut appliquer un style sur un paragraphe qui suit un titre de niveau
1, on aura :

[Link] (UMBB)
Présenté par : Mme TOUIL 40
 C

Applicatio d u style
 une balise qui en suit une autre
Si on veut appliquer un style sur un paragraphe qui suit un titre de niveau
1, on aura :

[Link] (UMBB)
Présenté par : Mme TOUIL 41
 C

Applicatio d u style
 une balise qui possède un attribut

• C est u e thode ui s le tio e les alises a a t u att i ut ave u e

valeur donnée.

• Les sélecteurs d'attribut peuvent trouver une correspondance des

façons suivantes:

1- élément[attr1] { Définition du style;} : le st le s appli ue su l l e t

d att i ut « att » , uelle ue soit sa valeu

[Link] (UMBB)
Présenté par : Mme TOUIL 42
 C

Applicatio d u style
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 43
 C

Applicatio d u style
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 44
 C

Applicatio d u style
2- l e t[att = valeu ] { D fi itio du st le;} : Le st le s appli ue su
l l e t d att i ut « att » do t la valeu est e a te e t « valeu ».
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 45
 C

Applicatio d u style
2- l e t[att = valeu ] { D fi itio du st le;} : Le st le s appli ue su
l l e t d att i ut « att » do t la valeu est e a te e t « valeu ».
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 46
 C

Applicatio d u style
3- *[att = val ] { D fi itio du st le;} : Le st le s appli ue su tous les
l e ts d att i ut « att » ui ad et o e valeu "val".

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 47
 C

Applicatio d u style
3- *[att = val ] { D fi itio du st le;} : Le st le s appli ue su tous les
l e ts d att i ut « att » ui ad et o e valeu "val".

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 48
 C

Applicatio d u style
4- *[attr1] { Définition du style;} : Le st le s appli ue su tous les l e ts
d att i ut « att » uel ue soit sa valeu .

5- l e t [att ][att = val { D fi itio du st le;} : Le st le s appli ue

su l l e t d att i ut « att » uel ue soit la valeu et d atrribut «
att » de valeu val '

[Link] (UMBB)
Présenté par : Mme TOUIL 49
 C

1 Introduction

2 Les fondations du CSS

3 Application d’un style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
1
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
[Link] (UMBB)
Présenté par : Mme TOUIL 1
 C

les Propriétés CSS – Style du texte

La police : (la propriété font-family)
La propriété font-family définit une liste de police, ordonnée par priorité.

Il existe cinq famille de police :

1. sans-serif: Verdana, Arial, Trebuchet, Helvetica, Tahoma, Geneva.
2. serif: Times new roman, Times, Georgia, PalatinoLinotype, Palatino.
3. monospace: Courier New, Courier, LucidaConsole, Monaco.
4. cursive: ComicSans, ComicSans MS, Coronetscript, Florence.
5. fantasy: Impact, Arnoldboecklin, Oldtown, Blippo, Brushstroke.

[Link] (UMBB)
Présenté par : Mme TOUIL 2
 C

les Propriétés CSS – Style du texte

La police : (la propriété font-family)

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 3
 C

les Propriétés CSS – Style du texte

La police : (la propriété font-family)

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 4
 C

les Propriétés CSS – Style du texte

La taille des caractères : (la propriété font-size)
• La taille par défaut est égale à 16 pixels
• Les unités de mesures absolues: cm, mm, px

Exemple :

body {
font-size: 15px;
}
div {
font-size: 14.5px;
}

[Link] (UMBB)
Présenté par : Mme TOUIL 5
 C

les Propriétés CSS – Style du texte

Le style des caractères :(propriété font-style et font-weight et font-variant )

• font-style : normal , italic (italique)

• font-weight : normal, bold (gras).
• font-variant : normal,small-caps (petites majuscules

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 6
 C

les Propriétés CSS – Style du texte

Le style des caractères :(propriété font-style et font-weight et font-variant )

• font-style : normal , italic (italique)

• font-weight : normal, bold (gras).
• font-variant : normal,small-caps (petites majuscules

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 7
 C

les Propriétés CSS – Style du texte

 La couleur du texte: (propriété color)
•Couleurs simples: red, white, blue,….
•Couleurs personnalisées: #+ code hexadécimale de la couleur (voir la
palette des couleurs).

 Alignement du texte: (propriété text-align)

Valeurs possibles: left, right, center , justify

 Décoration du texte:(propriété text-decoration)

Valeurs possibles: none (aucun soulignement),
underline (ligne au-dessous) ,
line-through (ligne au milieu)
overline (ligne au-dessus).

[Link] (UMBB)
Présenté par : Mme TOUIL 8
 C

les Propriétés CSS – Style du texte

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 9
 C

les Propriétés CSS – Style du texte

Transformation du texte:(propriété text-transform)

Valeurs possibles:
none,
capitalize (première lettre de chaque mot écrite en majuscule),
uppercase (texte en majuscules),
lowercase (texte en minuscules)

Indentation:(propriété text-indent)
•Ajoute un espace au début de chaque bloque de texte.
•Unités possibles: px, cm , mm.

[Link] (UMBB)
Présenté par : Mme TOUIL 10
 C

les Propriétés CSS – Style du texte

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 11
 C

1 Introduction

2 Les fondations du CSS

3 Application d’un style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
3 Style des listes
4 Style des Bordures
5 Autres
[Link] (UMBB)
Présenté par : Mme TOUIL 12
 C

les Propriétés CSS – Style du fond

• Couleur de fond : propriété background-color.
Exemple code CSS:
body
{
background-color:blue; /* le fond de la page sera bleu */
color:white; /* le texte de la page sera blanc */
}

• Image de fond : propriété background-image.

Exemple code CSS:
body
{
background-image:url(‘’[Link]’’);
}
[Link] (UMBB)
Présenté par : Mme TOUIL 13
 C

les Propriétés CSS – Style du fond

• Options disponibles pour l’image de fond:

Propriété background-repeat: répétition du fond.

1. no-repeat : le font ne sera pas répété. L’image sera donc unique sur la
page.
2. repeat-x : le font sera répété uniquement sur la 1ere ligne,
horizontalement.
3. repeat-y : le font sera répété uniquement sur la 1ere colonne,
verticalement.
4. repeat : le fond sera répété en mosaïque ( par défaut)

[Link] (UMBB)
Présenté par : Mme TOUIL 14
 C

les Propriétés CSS – Style du fond

Exemple code CSS

body
{
background-image:url(‘’[Link]’’); /* le fond de la page sera l’image
« [Link] » */
background-repeat:no-repeat; /* L’image « [Link] » sera donc
unique sur la page. */
}

[Link] (UMBB)
Présenté par : Mme TOUIL 15
 C

les Propriétés CSS – Style du fond

• Options disponibles pour l’image de fond:
Propriété background-position: position du fond.
cette propriété indique où doit se trouver l’image et elle n’est intéressante
que si elle est combinée avec background-repeat:no-repeat; ( un fond qui
ne se répète pas).

Exemple code CSS:

body {
background-image:url(‘’[Link]’’); /* le fond de la page sera l’image
« [Link] » */
background-repeat:no-repeat; /* L’image « [Link] » sera donc
unique sur la page. */
background-position: 30px 50px; /* l’image sera placée à 30px de la gauche
et à 50 px du haut. */
}
[Link] (UMBB)
Présenté par : Mme TOUIL 16
 C

les Propriétés CSS – Style du fond

• Il est possible d’utiliser ces valeurs :
 top : en haut;
 bottom : en bas;
 left : à gauche;
 right : à droite;
 center : centré

• Il est possible de combiner ces mots:

Exemple code CSS:
body
{
background-image:url(‘’[Link]’’);
background-repeat:no-repeat;
background-position: top right; /* l’image sera alignée en haut à droite */
}
[Link] (UMBB)
Présenté par : Mme TOUIL 17
 C

les Propriétés CSS – Style du fond

• Valeurs possibles de background-size:

[Link] (UMBB)
Présenté par : Mme TOUIL 18
 C

les Propriétés CSS – Style du fond

• Options disponibles pour l’image de fond:
Propriété background-size : dimension de l’image de fond.
cette propriété indique la taille de l’image dans l’arrière plan.

Syntaxe: background-size: x y;
x: détermine la dimension horizontale ( px, auto, pourcentage %,…)
y: détermine la dimension verticale (px, auto, pourcentage %,…)

Exemple code CSS:

body
{
background-image:url(‘’[Link]’’);
background-size : 30% 50% ; /* l’image occupe 30% de largeur et 50% de
hauteur de fond avec répétition*/
}
[Link] (UMBB)
Présenté par : Mme TOUIL 19
 C

1 Introduction

2 Les fondations du CSS

3 Application d’un style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
3 Style des listes
4 Style des Bordures
5 Autres
[Link] (UMBB)
Présenté par : Mme TOUIL 20
 C

les Propriétés CSS – Style des listes

• Type des puces: Propriété list-style-type.

Valeurs possibles: circle(○) , disc (•) , square (∎).

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 21
 C

les Propriétés CSS – Style des listes

• Puces avec images: Propriété list-style-image.

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 22
 C

1 Introduction

2 Les fondations du CSS

3 Application d’un style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
3 Style des listes
4 Style des Bordures
5 Autres
[Link] (UMBB)
Présenté par : Mme TOUIL 23
 C

les Propriétés CSS – Style des bordures

• Couleur des bordures : Propriété border-color.
• Taille des bordures : propriété border-width.
• Type des bordures : propriété border-style.

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 24
 C

les Propriétés CSS – Style des bordures

• Couleur des bordures : Propriété border-color.
• Taille des bordures : propriété border-width.
• Type des bordures : propriété border-style.

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 25
 C

les Propriétés CSS – Style des bordures

• Bordures arrondies :
Propriété s : border-radius , border-top-left-radius , border-top-right-radius ,
border-bottom-left-radius , border-bottom-left-radius .

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 26
 C

les Propriétés CSS – Style des bordures

• Bordures arrondies :
Propriété s : border-radius , border-top-left-radius , border-top-right-radius ,
border-bottom-left-radius , border-bottom-left-radius .

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 27
 C

1 Introduction

2 Les fondations du CSS

3 Application d’un style

4 Les propriétés CSS

1 Style du texte
2 Style du fond
3 Style des listes
4 Style des Bordures
5 Autres
[Link] (UMBB)
Présenté par : Mme TOUIL 28
 C

les Propriétés CSS – Autres

 line-height : cette propriété permet de spécifier la hauteur d’une ligne

de texte et donc aussi de gérer l'espace entre les lignes.
Syntaxe : line-height:normal; /* valeur par défaut */
Ou line-height:x ; /* valeur numérique (px, pourcentage%, sans
unité*/
Exemple:
<body>
<p style="line-height:10px">Paragraphe 1</p>
<p style="line-height:normal">Paragraphe 2</p>
<p style="line-height:100%">Paragraphe 3</p>
<p style="line-height:5">Paragraphe 4</p>
</body>

Remarque : Cette propriété est applicable sur l’ensemble des balises HTML.
[Link] (UMBB)
Présenté par : Mme TOUIL 29
 C

les Propriétés CSS – Autres

overflow-x : cette propriété permet de définir les mécanismes à utiliser
(rognage, ascenseurs, dépassement) lorsque le contenu
dépasse est trop long par rapport à sa boite.

Syntaxe :
• overflow-x: visible; /* Le contenu n'est pas rogné , il n’y a pas d’ascenseur*/
• overflow-x: hidden;/* Le contenu est rogné , il n'y a pas d'ascenseur */
• overflow-x: scroll; /* Le contenu est rogné , il y a ascenseur */
• overflow-x: auto; /* Le navigateur décide de la meilleur approche*/

[Link] (UMBB)
Présenté par : Mme TOUIL 30
 C

les Propriétés CSS – Autres

Exemple: code HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 31
 C

les Propriétés CSS – Autres

Exemple: code HTML+Code CSS

[Link] (UMBB)
Présenté par : Mme TOUIL 32
 C

les Propriétés CSS – Autres

Exemple: code HTML+Code CSS

[Link] (UMBB)
Présenté par : Mme TOUIL 33
 C

les Propriétés CSS – Autres

overflow-y : Cette propriété permet de définir les mécanismes à utiliser
(rognage, ascenseur, dépassement) lorsque le contenu
dépasse des bords haut et bas de la boîte.

Syntaxe :
 overflow-y: visible; /* le contenu n’est pas rogné, il n’ya pas
d’ascenseur*/
 overflow-y: hidden; /* le contenu est rogné, il n’ya pas d’ascenseurs */
 overflow-y: scroll; /*le contenu est rogné, il ya ascenseur */
 overflow-y: auto; /* le navigateur décide de la meilleur approche */

[Link] (UMBB)
Présenté par : Mme TOUIL 34
 C

les Propriétés CSS – Autres

Exemple1: code HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 35
 C

les Propriétés CSS – Autres

Exemple1: code HTML+Code CSS

[Link] (UMBB)
Présenté par : Mme TOUIL 36
 C

les Propriétés CSS – Autres

Exemple1: code HTML+Code CSS+execution

[Link] (UMBB)
Présenté par : Mme TOUIL 37
 C

les Propriétés CSS – Autres

Exemple2: code HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 38
 C

les Propriétés CSS – Autres

Exemple2: code HTML+code CSS

[Link] (UMBB)
Présenté par : Mme TOUIL 39
 C

les Propriétés CSS – Autres

Exemple2: code HTML+code CSS+execution

[Link] (UMBB)
Présenté par : Mme TOUIL 40
 C

les Propriétés CSS – Autres

Cursor: cette propriété permet de changer l'aspect du curseur sur un
élément d'une page web.

Syntaxe: 1- sélecteur1 {
cursor:crosshair; /* cette valeur donne le type */
}
Valeurs possibles:
pointer , progress , help , wait , default ou auto , ….

[Link] (UMBB)
Présenté par : Mme TOUIL 41
 C

1 Introduction

2 Généralités

3 Fonctions

4 Tableaux

5 Formulaires

6 Manipulation du DOM HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 1
 C

Qu’est-ce que c’est JavaScript ?

• Est un langage de programmation qui permet d’apporter des

améliorations au langage HTML permettant d’exécuter des commandes
du coté client.

•JavaScript a été initialement développé par Netscape et s’appelait à

l’époque LiveScript.

• Adopté à la fin de l’année 1995 par Sun (qui a aussi développé Java).

•Est un langage de scripts incorporé dans un document HTML.

• Les scripts permettent une interaction entre la page et l’utilisateur et

sont exécutés par le navigateur via un interpréteur de scripts.

[Link] (UMBB)
Présenté par : Mme TOUIL 2
 C

Un script: est une suite d’instructions qui doit être interprété par un
programme.

Donc, pour lire le code JavaScript il nous faut un interpréteur.

• JavaScript est un langage orienté objet à prototype: cela signifie qu’il

utilise des objets dans son fonctionnement global et ces objets sont
prototypés . Un objet correspond à un bloc cohérent de code qui sert à
effectuer une opération bien déterminée.

[Link] (UMBB)
Présenté par : Mme TOUIL 3
 C

Qu’est-ce que c’est JavaScript ?

• Les scripts JS sont appelés scripts coté-client.

•Ils sont souvent générés par le serveur ( par des scripts coté-serveur):

[Link] (UMBB)
Présenté par : Mme TOUIL 4
 C

JavaScript n’est pas Java:

• Il est important de savoir que JavaScript est totalement différent de Java.

JavaScript Java
- Code intégré dans la page Html - Module (applet) distinct de la page Html

- Code interprété par le navigateur au - Code source compilé avant son exécution
moment de l’exécution

-Code de programmation simples mais - Langage de programmation beaucoup

pour des applications limitées plus complexe mais plus performant

-Permet d’accéder aux objets du -N’accède pas aux objets du navigateur

navigateur

-Code source visible - Sécurité ( code source compilé )

[Link] (UMBB)
Présenté par : Mme TOUIL 5
 C

Un peu de théorie objet:

 les objets et leur hiérarchie : JavaScript divise une page Web en objets
et surtout va permettre à l’utilisateur d’accéder à ces objets, d’en retirer des
informations et de les manipuler.

exemple: Illustration des différents objets qu’une page peut contenir.

Soit la page suivante:

[Link] (UMBB)
Présenté par : Mme TOUIL 6
 C

exemple: Illustration des différents objets qu’une page peut contenir.

Cette page s’affiche dans une fenêtre. C’est l’objet fenêtre.

Objet fenêtre

Dans cette fenêtre, il ya un document HTML. C’est l’ objet document.

L’objet fenêtre contient l’objet document

[Link] (UMBB)
Présenté par : Mme TOUIL 7
 C

exemple: Illustration des différents objets qu’une page peut contenir.

Objet document

Dans ce document, on trouve un formulaire. C’est l’objet formulaire.

Autrement dit, L’objet fenêtre contient l’objet document qui lui contient
un objet formulaire.

[Link] (UMBB)
Présenté par : Mme TOUIL 8
 C

exemple: Illustration des différents objets qu’une page peut contenir.

Objet formulaire

Dans ce formulaire, on trouve trois objets. Ce sont l’objet radio, l’objet

bouton et l’objet texte.
Autrement dit, L’objet fenêtre contient l’objet document qui contient
l’objet formulaire, qui contient à son tour 3 objets : l’objet radio, l’objet
bouton et l’objet texte.
[Link] (UMBB)
Présenté par : Mme TOUIL 9
 C

exemple: Illustration des différents objets qu’une page peut contenir.

Objet radio
Objet bouton

Objet texte

La hiérarchie des objets de cet exemple est donc :

radio
Fenêtre document formulaire bouton
texte

[Link] (UMBB)
Présenté par : Mme TOUIL 10
 C

Remarque : Pour accéder à un objet. Il faudra donner le chemin complet

de l’objet en allant du contenant le plus extérieur à l’objet référencé.

Exemple :(précédent)

Pour le bouton radio « semaine »: (windows).[Link][0]

Remarque : L’objet Windows occupe la 1ere place dans la hiérarchie, il est

repris par défaut par JavaScript et devient donc facultatif.
[Link] (UMBB)
Présenté par : Mme TOUIL 11
 C

 Les propriétés des objets : Une propriété est :

• Un attribut,
• Une caractéristique,
• Une description de l’objet.
Exemple :
l’objet livre a comme propriétés :
• Son auteur,
• Sa maison d’édition,
• Son titre,…

De même les objets JavaScript ont des propriétés personnalisées.

Exemple :
Dans le cas des boutons « radio », une de ses propriétés est :
• sa sélection ou sa non-sélection (checked)

[Link] (UMBB)
Présenté par : Mme TOUIL 12
 C

En JavaScript, pour accéder aux propriétés, on utilise la syntaxe :

Nom_de_l’objet.nom_de_la_propriété

Dans l’exemple précédent :

Pour tester la propriété de sélection du bonton radio « semaine », on

écrit: [Link][0].checked

[Link] (UMBB)
Présenté par : Mme TOUIL 13
 C

Où définir un script JS ?

Il existe plusieurs façons d’inclure du JavaScript dans une page HTML:

• Dans l’élément <script> ( cas du script interne): head ou body

• En mettant le code dans un fichier.
• A travers des événements.
Une première instruction JavaScript soit l’instruction alert().
Cette instruction affiche un message (dont son texte entre les guillemets)
dans une boite de dialogue pourvue d’un bouton OK. Pour continuer dans
la page, on devra cliquer ce bouton.

[Link] (UMBB)
Présenté par : Mme TOUIL 14
 C

Où définir un script JS ?
1- Dans l’élément <script> ( cas du script interne):
a. soit dans l’élément «head » de la page HTML
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 15
 C

Où définir un script JS ?
1- Dans l’élément <script> ( cas du script interne):
a. soit dans l’élément « head » de la page HTML
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 16
 C

Où définir un script JS ?
1- Dans l’élément <script> ( cas du script interne):
b. soit dans l’élément « body » de la page HTML
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 17
 C

Où définir un script JS ?
1- Dans l’élément <script> ( cas du script interne):
b. soit dans l’élément « body » de la page HTML
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 18
 C

Où définir un script JS ?
1- Dans l’élément <script> ( cas du script interne):
c. soit dans les deux : si on a plusieurs scripts définis dans les éléments
«head» et «body». Ceux_ci sont lu dans l’ordre d’écriture.
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 19
 C

Où définir un script JS ?
Exemple : exécution du code HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 20
 C

Où définir un script JS ?
2- Dans l’élément <script> ( cas du script externe): très souvent la
méthode la plus recommandée dans le cas de gros projets car elle permet
la meilleure maintenabilité de code
Exemple : [Link]

Mon_script.JS

[Link] (UMBB)
Présenté par : Mme TOUIL 21
 C

Où définir un script JS ?
2- Dans l’élément <script> ( cas du script externe):
Exemple : l’exécution du code HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 22
 C

Où définir un script JS ?
3- A travers des liens: Dans le cas d’un lien par la balise <a>…</a>
Pour associer une action JavaScript au clic d’un lien, il a fallu introduire une
notation particulière.

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 23
 C

Où définir un script JS ?
3- A travers des liens: Dans le cas d’un lien par la balise <a>…</a>
Pour associer une action JavaScript au clic d’un lien, il a fallu introduire une
notation particulière.
Exemple : exécution du code html

[Link] (UMBB)
Présenté par : Mme TOUIL 24
 C

Où définir un script JS ?

3- A travers des attributs d’événement :

- JavaScript est dépendant des événements qui se produisent , lors des
diverses actions, sur les objets d’un document HTML.

- Pour être efficace, il faut qu’à ces événements soient associées les
prévus par vous ( le constructeur du site). C’est le rôle des
gestionnaires d’événements

Syntaxe: onévénement=‘’fonction()’’

a. Événement onLoad:
- L’événement onLoad survient lorsque la page a fini de se charger.
- L’événement onLoad est utilisé sous forme d’un attribut de la
balise «body»
[Link] (UMBB)
Présenté par : Mme TOUIL 25
 C

Où définir un script JS ?
3- A travers des attributs d’événement:

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 26
 C

Où définir un script JS ?
3- A travers des attributs d’événement:

Exemple : script JS exécuté après le chargement du body

[Link] (UMBB)
Présenté par : Mme TOUIL 27
 C

Où définir un script JS ?
3- A travers des attributs d’événement:

b. Evénement onClik.
- C’est l’événement classique en informatique, le clic de la souris.

Exemple 1: Script JS exécuté via un bouton

[Link] (UMBB)
Présenté par : Mme TOUIL 28
 C

Où définir un script JS ?
3- A travers des attributs d’événement:

b. Evénement onClik.
- C’est l’événement classique en informatique, le clic de la souris.

Exemple 1: Script JS exécuté via un bouton

[Link] (UMBB)
Présenté par : Mme TOUIL 29
 C

Où définir un script JS ?
3- A travers des attributs d’événement:

Exemple 2: Scripts JS exécuté via des boutons

[Link] (UMBB)
Présenté par : Mme TOUIL 30
 C

Où définir un script JS ?
3- A travers des attributs d’événement:

Exemple 2: Scripts JS exécuté via des boutons

[Link] (UMBB)
Présenté par : Mme TOUIL 31
 C

Ouelques attributs d’événements

 onLoad : Après le chargement de la page.
 onClik : Après avoir cliqué sur l’élément (un bouton, champ input,…)
 onDblclick : Après un double clic sur l’élément.
 onInput : Après avoir saisi une valeur dans l’élément.
 onChange : Après avoir changé la valeur de l’élément.
 onSelect : Après avoir sélectionné une partie du texte de l’élément.
 onCopy : Après avoir copié une partie du texte de l’élément.
 onCut : Après avoir coupé une partie du texte de l’élément.
 onPast : Après avoir collé un texte dans l’élément.
 onReset : Après avoir cliqué sur le bouton reset d’un formulaire
[Link] (UMBB)
Présenté par : Mme TOUIL 32
 C

Quelques attributs d’événements

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 33
 C

Quelques attributs d’événements

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 34
 C

1 Introduction

2 Généralités

3 Fonctions

4 Tableaux

5 Formulaires

6 Manipulation du DOM HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 35
 C

• Commentaires :
 Commentaire mono-ligne :
// Ceci est un commentaire en une seule ligne

 Commentaire multi-ligne :
/* Ceci est un commentaire sur
plusieurs lignes */

• Instructions :
 Délimitées par des « ; » :
alert(‘’Bonjour…’’) ; alert(‘’ Comment allez-vous?’’) ;

 Délimitées par des « retours à la ligne »:

alert(‘’Bonjour…’’)
alert(‘’Comment allez-vous?’’)

[Link] (UMBB)
Présenté par : Mme TOUIL 36
 C

•Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 37
 C

•Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 38
 C

• Identificateurs :
 Utilisés pour :
• Nommer une fonction
• Nommer une variable

 Règles de définition : Un identificateur

1. Commence par une lettre, _, ou le $.
2. Peut contenir des lettres, des chiffres ou les caractères $ et _.
3. Ne contient pas des caractères spéciaux.
[Link] contient pas des espaces.
5.N’est pas un mot clé comme for, if, while, this, return,…
6. Sensible à la casse ( a et A sont considérés comme deux
identificateurs différents).

[Link] (UMBB)
Présenté par : Mme TOUIL 39
 C

• Variables:

 Déclaration :
var x ; //Variable sans valeur

 Affectation :
x = 12 ; //affectation de la valeur entière 12
var x=12 ; // déclaration et affectation au même temps

 déclarations et affectations multiples:

var var1 = "Coucou", var2 = var3 = 10, var4 ;

[Link] (UMBB)
Présenté par : Mme TOUIL 40
 C

• Variables globales: sont déclarées en dehors des blocs de fonctions, des

if et des boucles.
Exemple : variable globale

[Link] (UMBB)
Présenté par : Mme TOUIL 41
 C

• Variables globales: sont déclarées en dehors des blocs de fonctions, des

if et des boucles.
Exemple : variable globale

[Link] (UMBB)
Présenté par : Mme TOUIL 42
 C

• Typage dynamique des variables : Le type d’une variable est déterminé

automatiquement selon la valeur affectée à cette variable. Cela signifie
également que la même variable pourra avoir différents types au cours de
son existence.
Exemple 1: code HTML

Cet opérateur renvoie une

chaine de caractères qui
indique le type de A

[Link] (UMBB)
Présenté par : Mme TOUIL 43
 C

Exemple1 : Exécution du code

[Link] (UMBB)
Présenté par : Mme TOUIL 44
 C

Exemple 2 :

Affiche : undefined
Affiche : number
Affiche : string
Affiche : boolean
Affiche : object

[Link] (UMBB)
Présenté par : Mme TOUIL 45
 C

Opérateurs arithmétiques:

Opérateur Signification Simplification

a=a+12; Addition a+=12;
a=a-12; Soustraction a-=12;
a=a*12; Multiplication a*=12;
a=a/12; Division réelle a/=12;
a=a%12; Reste de la division (modulo) a%=12;
a++; Incrémentation
a-- Décrémentation

Opérateurs booléens
ET (&&), OU (||), NON (!)

[Link] (UMBB)
Présenté par : Mme TOUIL 46
 C

Opérateurs de comparaison:
• Egalité (==): Les deux opérandes ont la même valeurs.
alert(‘’12’’==12.00) Affiche true

• Inégalité (!=): Les deux opérandes n’ont pas la même valeur.

alert(‘’12’’!=12) Affiche false

• < , > , >= , <= .

Autres opérateurs :
• Le typeof : Retourne le type d’un opérande.
typeof 12.67 Retourne number

• Test ternaire: condition ? Expre1: Expre2

var B =12;
var A = ( B<0 ? (-1)*B : B ); Retourne 12
[Link] (UMBB)
Présenté par : Mme TOUIL 47
 C

Conversion entre Number et String

var A=12; //Affiche : number

alert(typeof(A));

A=A+’’ ‘’; // Affiche: string

alert(typeof(A));

A=parseInt(A) // Affiche: number

alert(typeof(A))

parseInt(): Convertit une chaine en un nombre entier. Retourne le

nombre si la conversion est possible et NaN si la conversion
est impossible.
toString(): Convertit un nombre en une chaine .
A=toString(A); alert(typeof(A)); // Affiche: string
[Link] (UMBB)
Présenté par : Mme TOUIL 48
 C

Conversion entre Number et String

parseFloat(): Convertit une chaine en un nombre réel. Retourne le

nombre si la conversion est possible et NaN si la conversion
est impossible.

[Link] (UMBB)
Présenté par : Mme TOUIL 49
 C

Boite de saisie de valeur: la Fonction prompt()

Cette fonction permet de demander à l’utilisateur de donner une
information. La boite de dialogue est composée de deux boutons « OK »
ou « Annuler » et une zone de saisie.
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 50
 C

Exemple : exécution

• L'utilisateur peut saisir du texte. la méthode retourne le texte saisi si le

visiteur clique sur OK et retourne null si le visiteur clique sur Annuler ou
appuie sur la touche Echap.
• La boîte de message et les boutons ne sont pas modifiables.
• Pour écrire le message sur plusieurs lignes, utilisez le caractère spécial de
retour chariot \n.
[Link] (UMBB)
Présenté par : Mme TOUIL 51
 C

Boite de confirmation: la Fonction confirm()

 Cette fonction permet d’avertir l’utilisateur en ouvrant une boite de
dialogue avec deux choix « OK » ou « Annuler ».

 La fonction confirm() renvoie comme valeur:

• true, si on a cliqué sur OK
• false, si on a cliqué sue Annuler

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 52
 C

Exemple :

Valeur retournée true ou false.

[Link] (UMBB)
Présenté par : Mme TOUIL 53
 C

Branchement conditionnel:

Le « if »:

if (exp_logique) // Exécution d’une seule ligne

alert(‘’condition vraie’’); d’instructions

if (exp_logique) // Exécution d’un bloc d’instructions

alert(‘’condition vraie’’);
alert(‘’…je le confirme’’);

[Link] (UMBB)
Présenté par : Mme TOUIL 54
 C

Branchement conditionnel:

Le « if else»:

if (exp_logique) // Exécution d’une seule ligne

alert(‘’condition vraie’’); d’instructions
else
alert (‘’condition fausse’’);

if (exp_logique) { // Exécution d’un bloc d’instructions

alert(‘’condition vraie’’);
alert(‘’…je le confirme’’);
} else {
alert(‘’condition fausse’’);
alert(‘’…je le confirme’’);
}
[Link] (UMBB)
Présenté par : Mme TOUIL 55
 C

Exemple :
Ecrire un script qui demande à l’utilisateur de saisir son âge et de
contrôler la validité de l’âge entré ( si l’âge est erroné, afficher un message
d’erreur et redemander de saisir l’âge.

[Link] (UMBB)
Présenté par : Mme TOUIL 56
 C

Branchement conditionnel:

Le « switch»:

switch (variable) {
case 0: alert(‘’ valeur nulle’’);
break;
case 1:
case 3 :alert(‘’ valeur impaire’’);
break;
case 2:
case 4: alert(‘’ valeur paire’’);
break;
default: alert(‘’variable >4, ou <0 ‘’);
}

[Link] (UMBB)
Présenté par : Mme TOUIL 57
 C

Boucles :
Le «for»:

for (var i = -4;i<=4;i+=2) {

alert(i); // affiche -4, -2, 0, 2, 4
}

for (var i = -2;i<=2;i++) {

if (i==0) break;
alert(i); // affiche -2, -1
}

for (var i = -2;i<=2;i++) {

if (i==0) continue;
alert(i); // affiche -2, -1, 1, 2 mais pas le zéro
}
[Link] (UMBB)
Présenté par : Mme TOUIL 58
 C

Boucles :
Le «while»:

while (condition) {
action;
}

Le « do while »:

do {
action;
} while (condition)

[Link] (UMBB)
Présenté par : Mme TOUIL 59
 C

Exemple :
Ecrire un script permettant d’afficher, dans une page HTML, les nombres
premiers compris entre 0 et 100.

[Link] (UMBB)
Présenté par : Mme TOUIL 60
 C

Exemple :
Ecrire un script permettant d’afficher, dans une page HTML, les nombres
premiers compris entre 0 et 100.

[Link] (UMBB)
Présenté par : Mme TOUIL 61
 C

Modifier les paramètres d’un élément:

 Méthode :
[Link](‘’id_element ‘’).propriété=valeur:
Permet de modifier une partie de la page ou carrément la page HTML
sans la recharger .
 Quelques propriétés :
o value : la valeur de l’attribut value des éléments input, contenu du
textarea
o [Link] : la couleur du texte.
o [Link] : la largeur de l’élément.
o [Link] : la hauteur de l’élément.
o [Link] : la couleur de la bordure.
o [Link] : le style de la bordure.
o [Link] : la couleur du fond.
o [Link] : la police du texte.
o [Link] : l’alignement du texte.
[Link] (UMBB)
Présenté par : Mme TOUIL 62
 C

Exemple : Créer un script javaScript ajoutant 2 boutons permettant

d’alterner entre 2 couleurs d’une partie de la page html.

[Link] (UMBB)
Présenté par : Mme TOUIL 63
 C

Exemple : Créer un script javaScript ajoutant 2 boutons permettant

d’alterner entre 2 couleurs d’une partie de la page html.

[Link] (UMBB)
Présenté par : Mme TOUIL 64
 C

1 Introduction

2 Généralités

3 Fonctions

4 Tableaux

5 Formulaires

6 Manipulation du DOM HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 65
 C

• Définition : On appelle un sous-programme qui permet d’effectuer un

ensemble d’instructions par simple appel de la fonction dans le corps du
programme principal.

• Déclaration de la fonction :
o La fonction doit être définie a fin que le navigateur la connaisse.
o La déclaration d’une fonction doit se faire grâce au mot clé « function »
syntaxe :
function Nom_de_la_fonction(argument1, argument2,…) {
liste d’instructions
}
-Une fois cette étape franchie, la fonction ne s’exécutera pas tant que l’on
ne fait pas appel à elle quelque part dans la page.
- Il est plus prudent de placer la déclaration de la fonction dans l’en-tête
(<head>) pour qu’elle soit prise en compte par l’intepreteur avant son
exécution dans le corps de la page (<body>).
[Link] (UMBB)
Présenté par : Mme TOUIL 66
 C

•Appel de fonction : Pour exécuter une fonction, il suffit de faire appel à

elle en respectant la casse. Nom_de_la_fonction();

Remarque : Si les arguments sont définis dans la déclaration de la

fonction, il faudra veiller à les inclure lors de l’appel de la fonction.

• Fonction sans arguments (ou paramètres)

[Link] (UMBB)
Présenté par : Mme TOUIL 67
 C

• Fonction avec paramètres

[Link] (UMBB)
Présenté par : Mme TOUIL 68
 C

• Fonction avec paramètres facultatifs

[Link] (UMBB)
Présenté par : Mme TOUIL 69
 C

• Fonction avec paramètres facultatifs

[Link] (UMBB)
Présenté par : Mme TOUIL 70
 C

• Fonction avec paramètres facultatifs

[Link] (UMBB)
Présenté par : Mme TOUIL 71
 C

• Fonction avec paramètres facultatifs

[Link] (UMBB)
Présenté par : Mme TOUIL 72
 C

• Fonction avec valeur de retour : (return)

[Link] (UMBB)
Présenté par : Mme TOUIL 73
 C

• Fonction avec valeur de retour : (return)

[Link] (UMBB)
Présenté par : Mme TOUIL 74
 C

• Fonction avec valeur de retour : (return)

[Link] (UMBB)
Présenté par : Mme TOUIL 75
 C

• Fonction avec valeur de retour : (return)

[Link] (UMBB)
Présenté par : Mme TOUIL 76
 C

1 Introduction

2 Généralités

3 Fonctions

4 Tableaux

5 Formulaires

6 Manipulation du DOM HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 77
 C

• Introduction
Un tableau, en JavaScript, est une variable pouvant contenir plusieurs
données indépendantes indexées par un numéro, appelé indice. L’indice
d’un tableau est ainsi l’élément permettant d’accéder aux données qui y
sont stockées.

• Intérêt des tableaux

L’intérêt premier du tableau est de permettre un accès. à une information
par son indice.
Remarque :
- Le 1er élément d’un tableau porte l’indice 0 et le nième élément porte
l’indice n-1
- Les tableaux en JavaScript sont dynamique c’est-à-dire leurs dimensions
sont prédéfinies.

[Link] (UMBB)
Présenté par : Mme TOUIL 78
 C

• Tableaux Multidimensionnels
- lorsque le tableau est composé uniquement de variables, on parte de
tableau monodimensionnel ( ou unidimensionnel):
Indice 0 1 2 3
Données Donnée1 Donnée2 Donnée3 Donnée4

-Lorsqu’un tableau contient lui-même d’autres tableaux, on parle alors de

tableaux multidimensionnels.

[Link] (UMBB)
Présenté par : Mme TOUIL 79
 C

• Tableaux associatifs
JavaScript autorise l’utilisation d’une chaine ou d’un nombre spécifique
pour indexer les valeurs du tableau, on parle alors d’un tableau associatif:

Indice ‘’Hichem’’ ‘’Mohamed’’ ‘’Amina’’ ‘’Souad’’

Données 15 5 12 20

• Création de tableau:
Le JavaScript fournit plusieurs façons de créer un tableau:
 var Mon_Tab = [‘’donnée1’’, ‘’donnée2’’, ‘’ donnée3’’, ‘’donnée4’’];
 var Mon_Tab = new Array (‘’donnée1’’, ‘’donnée2’’, ‘’donnée3’’,
‘’donnée 4’’);
-Le tableau « Mon_Tab » est initialisé avec des valeurs à la création.
- Pour plus de rigueur, un tableau devrait être déclaré avant que l’on lui
affect des valeurs. La déclaration d’un tableau se fait comme suit :
var Mon_Tab = new Array();
[Link] (UMBB)
Présenté par : Mme TOUIL 80
 C

• Accès aux données (lire):

Pour accéder à un élément, on utilse Mon_Tab[indice],où indice est le
numéro de la case de l’élément.

Exemple :
var Mon_Tab = [‘’Hichem’’ , ’’Mohamed’’ , ‘’Amina’’ , ‘’Souad’’];
[Link](‘’ le 4ième élément du tableau est ‘’+Mon_Tab[3]);
// affiche ‘’ le 4ième élément du tableau est Souad’’

• Ajouter une valeur :

Pour ajouter une valeur d’un élément, on modifie simplement sa valeur,
fait comme s’il existait déjà.

[Link] (UMBB)
Présenté par : Mme TOUIL 81
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 82
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 83
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 84
 C

• Tableau à 2 dimensions:
pour créer un tableau à 2 dimensions, on utilise l’astuce suivante : On
déclare chaque élément comme un nouveau tableau.

Syntaxe :
var table = new Array(x);
table[i] = new Array(y);

Il est bien entendu plus rapide d’utiliser une instruction itérative pour
créer ce tableau à 2 dimensions.

Exemple :
var mon_Tab = new Array(5);
for ( var i=0;i<5;i++) { /* c’est un tableau de 5 lignes et
mon_Tab[i]= new Array(3); 3 colonnes */
}
[Link] (UMBB)
Présenté par : Mme TOUIL 85
 C

• Propriétés et méthodes:
Comme tout objet, l’objet Array possède une propriété et des méthodes
qui s’avèrent assez utiles.

 propriété : le tableau (objet Array) ne possède qu’une seule propriété

« length » qui désigne le nombres d’éléments du tableau.

Syntaxe
var table= new Array();
x=[Link];

Si x =0, le tableau « table » est vide

Si x >0, le tableau possède des éléments de l’indice 0 à x-1

[Link] (UMBB)
Présenté par : Mme TOUIL 86
 C

• Propriétés et Méthodes:

 Méthodes : L’objet Array possède plusieurs méthodes qui permettent de

manier les éléments du tableau.

Syntaxe : tableau.méthode();

1. Join(séparateur) : regroupe tous les éléments du tableau en une seule

chaine. Chaque élément est séparé par un
séparateur.

2. reverse() : inverse l’ordre des éléments sans les trier.

[Link] (UMBB)
Présenté par : Mme TOUIL 87
 C

• Propriétés et Méthodes:

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 88
 C

• Propriétés et Méthodes:

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 89
 C

• Propriétés et Méthodes:

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 90
 C

• Propriétés et Méthodes:

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 91
 C

• Propriétés et Méthodes:
3. sort() : renvoie les éléments par ordre alphabétique, s’ils sont de même
nature.

4. concat(tableau) : concatène le tableau passé en paramètre avec celui

de la méthode.

5. push(element1,…) : ajoute l(es) élément(s) passé(s) en paramètres à la

fin du tableau.

6. unshift(element1,…) : ajoute l(es) élément(s) passé(s) en paramètres à

au début du tableau.

7. shift() : supprime le premier élément du tableau.

8. pop() : supprime le dernier élément du tableau.

[Link] (UMBB)
Présenté par : Mme TOUIL 92
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 93
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 94
 C

9. slice(début, fin) : renvoie les éléments contenus entre la position

supérieure ou égale au début et inferieur à fin.

10. splice(début, nombre, éléments): supprime les éléments à partir de la

position début et sur nombre de
position.
les éléments sont remplacés par ceux fournies en paramètres ( facultatif)
Exemple :

var tab=[12, 45, 60, 100];

alert([Link](0,3); // résultat : 12, 45, 60
alert([Link](0,2,28); // résultat : 12, 45 ( suprimés)
alert(table1) ; // Résultat 28, 60, 100

[Link] (UMBB)
Présenté par : Mme TOUIL 95
 C

1- Déclaration :
var chaine = ‘’ma chaine de caractères’’

2- Taille :
alert([Link]); // Affiche : 23

3- Caractère à un indice donné :

[Link](0); // Affiche : m

4- Découper une chaine :

[Link](‘’ ‘’): // Retourne :[‘’ma’’, ‘’chaine’’, ‘’de’’, ‘’caracères’’]

5- Ecriture en minuscule : chaine= [Link]()

6- Ecriture en majuscule : chaine=[Link]()

[Link] (UMBB)
Présenté par : Mme TOUIL 96
 C

1 Introduction

2 Généralités

3 Fonctions

4 Tableaux

5 Formulaires

6 Manipulation du DOM HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 97
 C

Généralités

-Avec JavaScript, les formulaires HTML prennent une toute autre

dimension.

-On peut accéder à chaque élément d’un formulaire pour, par exemple, y
aller lire ou écrire une valeur.

Déclaration d’un formulaire

- La déclaration d’un formulaire se fait par la balise <FORM> et </FORM>.
- En JavaScript, il faut nommé le formulaire par l’attribut :
NAME=‘’nom_de_form’’
cet attribut a toute son importance pour designer le chemin complet des
éléments.
-Une erreur classique en JavaScript, c’est d’oublier de déclarer la fin du
formulaire après avoir incorporé un contrôle.
[Link] (UMBB)
Présenté par : Mme TOUIL 98
 C

1- Contrôle ligne de texte

la zone de texte est l’élément d’entrée/sortie . La syntaxe HTML est
<INPUT TYPE=‘’text’’ NAME=‘’nom’’ > pour un champ de saisie d’une seule
ligne .

L’objet « text » possède 3 propriétés :

Propriété Description
name Indique le nom du contrôle par lequel on pourra accéder

defaultvalue Indique la valeur par défaut qui sera affichée dans la zone
de texte.

value Indique la valeur en cours de la zone de texte. Soit celle

tapée par l’utilisateur ou si celui-ci n’a rien tapé. La valeur
par défaut

[Link] (UMBB)
Présenté par : Mme TOUIL 99
 C

Exemple 1: Lire une valeur dans une zone de texte :

[Link] (UMBB)
Présenté par : Mme TOUIL 100
 C

Exemple 1 : Lire une valeur dans une zone de texte :

[Link] (UMBB)
Présenté par : Mme TOUIL 101
 C

Exemple 1: Lire une valeur dans une zone de texte :

[Link] (UMBB)
Présenté par : Mme TOUIL 102
 C

Exemple 2 : Ecrire une valeur dans une zone de texte

Entrer une valeur quelconque dans le zone de texte d’entrée. Appuyer sur le
bouton pour afficher cette valeur dans la zone de texte de sortie.

[Link] (UMBB)
Présenté par : Mme TOUIL 103
 C

Exemple 2 : Ecrire une valeur dans une zone de texte

Entrer une valeur quelconque dans le zone de texte d’entrée. Appuyer sur le
bouton pour afficher cette valeur dans la zone de texte de sortie.

[Link] (UMBB)
Présenté par : Mme TOUIL 104
 C

Exemple 2 : Ecrire une valeur dans une zone de texte

Entrer une valeur quelconque dans le zone de texte d’entrée. Appuyer sur le
bouton pour afficher cette valeur dans la zone de texte de sortie.

[Link] (UMBB)
Présenté par : Mme TOUIL 105
 C

Exemple 2 : Ecrire une valeur dans une zone de texte

Entrer une valeur quelconque dans le zone de texte d’entrée. Appuyer sur le
bouton pour afficher cette valeur dans la zone de texte de sortie.

[Link] (UMBB)
Présenté par : Mme TOUIL 106
 C

2- Les boutons radio

Les boutons « radio » sont utilisés pou noter un seul choix parmi un
ensemble de propositions.

Cet objet possède les propriétés suivantes :

Propriété Description
name Indique le nom du contrôle. Tous les boutons portent le même nom.

index L’index ou le rang du bouton radio en commençant par 0.

Checked Indique l’état du bouton sélectionné par défaut.

Defaultchecked Indique l’état du bouton sélectionné par défaut.

Value Indique la valeur l’élément radio

[Link] (UMBB)
Présenté par : Mme TOUIL 107
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 108
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 109
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 110
 C

3- Les boutons case à cocher (checbox)

Les boutons « case à cocher » sont utilisés pou noter un ou plusieurs choix
parmi un ensemble de propositions.
Sa syntaxe et son usage est tout à fait semblable aux boutons « radio » sauf
en ce qui concerne l’attribut « name ».
Propriété Description
name Indique le nom du contrôle. Toutes les cases à cocher portent un
nom différent .

index L’index ou le rang du bouton radio en commençant par 0.

Checked Indique l’état du bouton sélectionné par défaut.

Defaultchecked Indique l’état du bouton sélectionné par défaut.

Value Indique la valeur l’élément radio

[Link] (UMBB)
Présenté par : Mme TOUIL 111
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 112
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 113
 C

Exemple : sur les boutons radio

En utilisant les boutons radio, écrire un code ne JavaScript permettant de
faire un sondage sur le choix d’utilisation d’un système d’exploitation.

[Link] (UMBB)
Présenté par : Mme TOUIL 114
 C

Exemple : sur les boutons radio

En utilisant les boutons radio, écrire un code ne JavaScript permettant de
faire un sondage sur le choix d’utilisation d’un système d’exploitation.

[Link] (UMBB)
Présenté par : Mme TOUIL 115
 C

Exemple : sur les boutons radio

En utilisant les boutons radio, écrire un code ne JavaScript permettant de
faire un sondage sur le choix d’utilisation d’un système d’exploitation.

[Link] (UMBB)
Présenté par : Mme TOUIL 116
 C

4. Liste de sélection
Le contrôle liste de sélection nous permet de proposer diverses options
sous la forme d’une liste déroulante dans laquelle l’utilisateur peut cliquer
pour faire son choix. Ce choix reste alors affiché.
Cet objet possède les propriétés suivantes :
Propriété Description
name Indique le nom de la liste déroulante

length Indique le nombre d’éléments de la liste

selectedIndex Indique le rang à partir de 0 de l’élément de la liste qui a été

sélectionné par l’utilisateur .

Defaultselected Indique l’élément de la liste sélectionné par défaut. C’est lui qui
apparait alors dans la petite boite.

[Link] (UMBB)
Présenté par : Mme TOUIL 117
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 118
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 119
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 120
 C

Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 121
 C

1 Introduction

2 Généralités

3 Fonctions

4 Tableaux

5 Formulaires

6 Manipulation du DOM HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 122
 C

Qu’est-ce que c’est ?

 Document Object Model : Représentation du document HTML à base

d’objets.

 C’est une API (Application Programming Interface) : Interface de

programmation d’application ( c’est-à-dire un ensemble de classes, de
méthodes,ou d’objets prédéfinies à utiliser.

 Permet de manipuler le contenu d’un document HTML.

 Acceder aux éléments HTML ( à leurs propriétés, leurs contenus,…).
 Modifier les différentes parties d’un document HTML ( supprimer des
éléments existants, ajouter de nouveaux éléments

 L’objet prédéfini document représente tout le document HTML.

[Link] (UMBB)
Présenté par : Mme TOUIL 123
 C

1. [Link]() : Retourne un objet HTML à partir de son id,

défini dans la propriété id de la balise de l'objet.
getElementById() retourne un seule élément, même si plusieurs éléments
HTML ont le même id

[Link] (UMBB)
Présenté par : Mme TOUIL 124
 C

[Link]() :

Exemple 1 :

[Link] (UMBB)
Présenté par : Mme TOUIL 125
 C

[Link]() :

Exemple 1:

[Link] (UMBB)
Présenté par : Mme TOUIL 126
 C

[Link]() :

Exemple 1:

[Link] (UMBB)
Présenté par : Mme TOUIL 127
 C

[Link]() :

Exemple 2:

[Link] (UMBB)
Présenté par : Mme TOUIL 128
 C

[Link]() :

Exemple 2:

[Link] (UMBB)
Présenté par : Mme TOUIL 129
 C

[Link]() :

Exemple 2:

[Link] (UMBB)
Présenté par : Mme TOUIL 130
 C

Pour accéder au contenu textuel:

o value : la valeur de l’attribut « value » ( élément input, option)
o textContent : la valeur textuelle des éléments label, p, textarea, td,…

Pour acceder aux propriétés CSS :

o [Link] : la couleur du texte.
o [Link] : la largeur de l’élément.
o [Link] : la hauteur de l’élément.
o [Link] : la couleur de la bordure.
o [Link] : le style de la bordure.
o [Link] : la couleur du fond.
o [Link] : la police du texte.
o [Link] : l’alignement du texte.

[Link] (UMBB)
Présenté par : Mme TOUIL 131
 C

2. [Link]()
-Pour trouver tous les objets à partir de leur nom.
-Elle retourne un tableau d’éléments
Donc elle retourne un tableau « array » d’objets HTML ayant nom défini
dans la propriété « name » de la balise de l’objet.

Exemple

[Link] (UMBB)
Présenté par : Mme TOUIL 132
 C

Exemple : [Link]()

[Link] (UMBB)
Présenté par : Mme TOUIL 133
 C

Exemple : [Link]()

[Link] (UMBB)
Présenté par : Mme TOUIL 134
 C

Exemple : [Link]()

[Link] (UMBB)
Présenté par : Mme TOUIL 135
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 1 :

[Link] (UMBB)
Présenté par : Mme TOUIL 136
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 1 :

[Link] (UMBB)
Présenté par : Mme TOUIL 137
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 1 :

[Link] (UMBB)
Présenté par : Mme TOUIL 138
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 1 :

[Link] (UMBB)
Présenté par : Mme TOUIL 139
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 2 :

[Link] (UMBB)
Présenté par : Mme TOUIL 140
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 2 : déclaration des fonctions « authentification » et « inscription »

[Link] (UMBB)
Présenté par : Mme TOUIL 141
 C

La propriété innerHTML : retourne le code HTML du contenu de l’élément.

Exemple 2 : déclaration de la fonction « choix » +son appel dans « body »

[Link] (UMBB)
Présenté par : Mme TOUIL 142
 1 Introduction

2 Syntaxe de base

3 Types , variables, opérateurs et fonctions

4 Structures de contrôles

5 Traitement des formulaires HTML avec PHP

6 Classes et objets

[Link] (UMBB)
Présenté par : Mme TOUIL 1
 Le PHP , qu’est –ce que c’est ?
 Acronyme de Hypertext Preprocessor.
 Un langage de scripts coté serveur.
 Utilisé pour créer des pages Web dynamique à travers un serveur
HTTP ( contrairement au JavaScript qui permet de créer des
pages web interactives).
 Permet de traiter les données des formulaires HTML.
 Permet de manipuler les BDDs enregistrées au sein du serveur.
 Les scripts PHP sont exécutés au sein du serveur Web (WAMP) et
le résultat de l’exécution (HTML,CSS, JS) est retourné au client.
[Link] (UMBB)
Présenté par : Mme TOUIL 2
  PHP est langage interprété orienté Web. Syntaxiquement c’est
un mélange de C et de Perl. Les scripts PHP sont lus et
interprétés par le moteur PHP.

 PHP comporte plus de 500 fonctions. Il est fournit avec des

librairies offrant des fonctionnalités diverses :

 accès aux bases de données,

 fonctions d’images,
Protocoles internet divers,…..

[Link] (UMBB)
Présenté par : Mme TOUIL 3
 - Sites Statiques et dynamiques
Il est important de connaitre la différence entre un site statique et un
site dynamique:

 Sites statiques : sont conçus uniquement avec les langages

HTML et CSS. Vous pouvez leur donner l’apparence que vous
voulez , mais le problème c’est que ces sites web ne changent
pas, ils sont globalement tout le temps les mêmes.

 Sites dynamiques : sont conçus aussi avec du HTML et CSS,

mais en plus, on doit utiliser d’autres technologies telles que:
PHP et MySQL.

[Link] (UMBB)
Présenté par : Mme TOUIL 4
 Principe de fonctionnement d’un site statique :

[Link] (UMBB)
Présenté par : Mme TOUIL 5
 Principe de fonctionnement d’un site statique :

[Link] (UMBB)
Présenté par : Mme TOUIL 6
 Principe de fonctionnement d’un site dynamique:

[Link] (UMBB)
Présenté par : Mme TOUIL 7
 Installations nécessaires:
 Avant de commencer à programmer avec PHP, il va falloir installer
sur nos ordinateurs des programmes qui leurs permettront de
comprendre le PHP.

 Les programmes qu’on doit pouvoir installer sont:

 WAMP : sous Windows;
 MAMP : sous Mac;
 XAMP : sous Linux

Mais dans tous les cas se sont des packages qui nous permettront
d’installer des sous programmes , automatiquement, qui sont
indispensables :

[Link] (UMBB)
Présenté par : Mme TOUIL 8
 Les sous programmes sont :

 Est un serveur web qui permet de

répondre aux requêtes des clients.

 Est le moteur de BDDs qui permet de

stocker les informations.

 Permet de comprendre le langage PHP.

[Link] (UMBB)
Présenté par : Mme TOUIL 9
 1 Introduction

2 Syntaxe de base

3 Types , variables, opérateurs et fonctions

4 Structures de contrôles

5 Traitement des formulaires HTML avec PHP

6 Classes et objets

[Link] (UMBB)
Présenté par : Mme TOUIL 10
 Premiers scripts PHP
 Un script PHP doit être enregistré avec l’extension «.php », il doit
contenir un ou plusieurs code PHP.
 Un code PHP doit être délimité par <?php et ?>, on peut aussi
utiliser les balises <script language=‘’php’’> et </script>.
 Un script PHP peut contenir aussi des codes HTML,CSS et JS.
Pourquoi ce mélange? Pourquoi pas uniquement du PHP?
Une page web dynamique, en général, n’est pas dynamique à 100%,
elle doit contenir quelques parties statiques et d’autres dynamiques..
Donc le code HTML représente la partie statique de la page à
générer, tandis que les codes PHP permettent de générer la partie
dynamique de cette page.
[Link] (UMBB)
Présenté par : Mme TOUIL 11
 Avant de commencer à écrire votre premier script PHP, il va falloir
installer et démarrer par la suite Wamp :

Apres avoir démarrer WAMP, une petite icône qui va

se mettre dans la barre de tache. Au départ , elle est rouge ensuite

orange ensuite verte. Lorsqu’elle est verte , cela veut dire que tous
les programmes associés à WAMP ont été démarrés.

[Link] (UMBB)
Présenté par : Mme TOUIL 12
 Exemple 1 : « premier_script.php » : un éditeur de texte tel que
Notpad++ ou sublime 2 , nous permet d’éditer le script , à
l’enregistrement, on doit lui donner l’extension « .php »

Les scripts PHP doivent être sauvegardés dans le dossier « www »

du dossier « wamp ».

[Link] (UMBB)
Présenté par : Mme TOUIL 13
 L’exécution du script « premier_script.php » se fait de la manière
suivante :

[Link] (UMBB)
Présenté par : Mme TOUIL 14
 L’exécution du script « premier_script.php » se fait de la manière
suivante :
Ici on doit donner le nom du script à exécuter

[Link] (UMBB)
Présenté par : Mme TOUIL 15
 L’exécution du script « premier_script.php » se fait de la manière
suivante :

[Link] (UMBB)
Présenté par : Mme TOUIL 16
 L’exécution du script « premier_script.php » se fait de la manière
suivante :
On doit écrire : localhost/premier_script.php

[Link] (UMBB)
Présenté par : Mme TOUIL 17
 Exemple 2 : Intégration à HTML

[Link] (UMBB)
Présenté par : Mme TOUIL 18
 Exemple 2 : Intégration à HTML
Le code HTML généré est le suivant:

[Link] (UMBB)
Présenté par : Mme TOUIL 19
 Exemple 3 : générer un code HTML+CSS dynamiquement

Code HTML+CSS généré :

[Link] (UMBB)
Présenté par : Mme TOUIL 20
 Exemple 4 : générer un code JavaScript dynamiquement

Code JavaScript généré :

[Link] (UMBB)
Présenté par : Mme TOUIL 21
  Séparateur d’instructions
Comme en C , une instruction se termine par un « ; ». Notez que la
balise « ?> » implique la fin d’un instruction.

 Bloc D’instructions
Un bloc d’instructions se place entre accolades { et }.

 Commentaires
Les commentaires s’utilisent comme en C avec :
 /*…*/ : un commentaire sur plusieurs lignes.
 // : un commentaire sur une ligne.
[Link] (UMBB)
Présenté par : Mme TOUIL 22
 1 Introduction

2 Syntaxe de base

3 Types , variables, opérateurs et fonctions

4 Structures de contrôles

5 Traitement des formulaires HTML avec PHP

6 Classes et objets

[Link] (UMBB)
Présenté par : Mme TOUIL 23
 1- Visibilité et affectation
 PHP n’est pas un langage fortement structuré, il ne contient
donc pas de partie déclaration. Pour définir une variable, il suffit
de l’initialiser .
 Les variables sont précédées du signe « $ » suivi du nom de la
variable, quelque soit leur type. Ainsi pour déclarer une
variable var : $var=1; la variable $var est alors définie et vaut 1.
Elle devient immédiatement accessible et ce jusqu’à la fin du
script.
 Le nom commence par un caractères alphabétiques ou par le
caractère de soulignement « _ ».
 Les noms des variables sont sensibles à la casse ( majuscules et
minuscules).
exemple : $mavar et $MaVar ne désignent pas le même variable
[Link] (UMBB)
Présenté par : Mme TOUIL 24
 2- Affectation par valeur et par référence
 L’affectation consiste à donner une valeur à une variable.
 la valeur donnée détermine le type de la variable.

2.1 Affectation par valeur :

cette affectation se fait à l’aide de l’opérateur = , soit après la
création de la variable, soit en même temps.

2.2 Affectation par référence :

De même, cette affectation est réalisée au moyen de l’opérateur =,
l’opérande de droite est une variable qui doit être précédée du
caractères « & »

[Link] (UMBB)
Présenté par : Mme TOUIL 25
 Exemple 5 : « [Link] » : affectation par valeur

String
Integer
Float
Boolean

[Link] (UMBB)
Présenté par : Mme TOUIL 26
 Exemple 6 : affectation par référence

[Link] (UMBB)
Présenté par : Mme TOUIL 27
 3-Type de variables
Les Variables PHP sont à typage faible. C’est PHP qui décide de son
type lors de l’affectation. Il existe 6 types de données:
Il existe 6 types de données:

1. Entier ( int, integer)

2. Décimal ( real, float; coubles)
3. Chaine de caracrtères ( string)
4. Tableau ( array)
5. Objet=objet
6. Booléen (boolean)

[Link] (UMBB)
Présenté par : Mme TOUIL 28
 3.1 Entiers
un entier est un ensemble des nombres naturels , sans virgules,
positifs ou négatifs

3.2 Réels
- Ce sont des nombres avec virgules.
- La virgule est spécifiée par le point « . » décimal.
- La puissance de 10 s’exprime avec le « e » ou le « E ».
Exemple :

[Link] (UMBB)
Présenté par : Mme TOUIL 29
 3.3 chaines de caractères
les chaines de caractères doivent être délimitées par ‟ ” ou ‛ ’. Le
point (.) est utilisé pour faire la concaténation entre deux chaines de
caractères. Plusieurs fonctions prédéfinies existent et qui permettent
de manipuler les chaines de caractères comme :

 strlen($str) : Retourne la longueur de la chaine str.

 str_word_count($str):
- calcule le nombre de mots dans une chaine de caractères.
 str_replace() :
- Remplace toutes les occurrences dans une chaîne.
- retourne une chaîne, ou un tableau, contenant les valeurs
remplacées.

[Link] (UMBB)
Présenté par : Mme TOUIL 30
  strl_repeat($input,$multiplier) :
- Répète une chaine.
- elle retourne la chaine input répétée multiplier fois.

 strtolower($str): Retourne la chaine str en minuscules.

 strtoupper($str): Retourne la chaine str en majuscules.

[Link] (UMBB)
Présenté par : Mme TOUIL 31
 Exemple 6: chaine de caractères

[Link] (UMBB)
Présenté par : Mme TOUIL 32
 Exemple 6: chaine de caractères

[Link] (UMBB)
Présenté par : Mme TOUIL 33
 3.4 Les Tableaux
- Les tableaux en PHP sont déclarés par la fonction prédéfinie :
Array(valeur1,valeur2,…..)

- La 1ère valeur prend l’indice 0, la 2ème l’indice 1, et ainsi de suite.

- Chaque élément du tableau peut être identifié par une clé qui est
soit une chaine de caractères ou une variable. Ce type de tableau
est appelé tableau associatif.
- Les éléments du tableau peuvent être de type : integer, double,
boolean, string ou même array. Ce qui permet de créer des
tableaux de tableaux c’est-à-dire des tableaux multidimensionnels .
- Imbrication des tableaux est possible.
- La fonction count() retourne la taille d’un tableau.
- La fonction print_r() affiche la structure d’un tableau .
[Link] (UMBB)
Présenté par : Mme TOUIL 34
 - La fonction foreach() permet de parcourir un tableau.
syntaxe : 1- foreach (array_expression as $value) {
// instructions; }
2- foreach (array_expression as $clé => $value) {
// instructions; }
3- foreach(array_expression as &$value) {
// instructions; } cette forme permet de modifier les
éléments d’un tableau en précédant
$value d’un &.

- La fonction unset() détruit une variable :

1- Destruction d’une seule variable : unset($var);
2- Destruction d’un élément du tableau : unset($tab[i]);
3- Destruction de plusieurs variables : unset($var1,$var2,…);
[Link] (UMBB)
Présenté par : Mme TOUIL 35
 Exemple 7 : Tableau indexé

[Link] (UMBB)
Présenté par : Mme TOUIL 36
 Exemple 7: Tableau indexé

[Link] (UMBB)
Présenté par : Mme TOUIL 37
 Exemple 8: Tableau associatif

[Link] (UMBB)
Présenté par : Mme TOUIL 38
 Exemple 8: Tableau associatif

[Link] (UMBB)
Présenté par : Mme TOUIL 39
 Exemple 8: Tableau multidimensionnel

[Link] (UMBB)
Présenté par : Mme TOUIL 40
 Exemple 8: Tableau multidimensionnel

[Link] (UMBB)
Présenté par : Mme TOUIL 41
 Exemple 9: Tableau (utilisation de foreach() et unset()

[Link] (UMBB)
Présenté par : Mme TOUIL 42
 Exemple 9: Tableau (utilisation de foreach() et unset()

[Link] (UMBB)
Présenté par : Mme TOUIL 43
 Exemple 10 :Tableau (utilisation de foreach() et unset()

[Link] (UMBB)
Présenté par : Mme TOUIL 44
 4- Les constantes
- Les constantes sont déclarées avec la fonction prédéfinie :
define(‘nom_constante’,valeur_constante)

- On peut accéder à la valeur d’une constante en spécifiant

simplement son nom.

- On ne doit pas préfixer le nom de la constante avec $ lors de son

appel.

- Une constante ne peut pas être redéfinie.

[Link] (UMBB)
Présenté par : Mme TOUIL 45
 Exemple 11 : les constantes

[Link] (UMBB)
Présenté par : Mme TOUIL 46
 5- La portée des variables
Les variables globales en PHP ne peuvent pas être utilisées à
l’intérieur de fonctions par un simple appel comme en JavaScript.

Exemple 12 : la fonction foo() affiche la variable a qui est

déclarée globalement

[Link] (UMBB)
Présenté par : Mme TOUIL 47
 Pour corriger l’erreur :
- il faut utiliser le mot-clé global pour pouvoir accéder à cette
variable globale dans une fonction ; ou bien
- cette variable globale doit être appelée à travers le tableau
prédéfini de variables globales $GLOBALS

Exemple 12-1 : avec global

[Link] (UMBB)
Présenté par : Mme TOUIL 48
 Exemple 12-2 : $GLOBALS

[Link] (UMBB)
Présenté par : Mme TOUIL 49
 6- Les opérateurs
Ce sont :

Les opérateurs de calcul

les opérateurs d'assignation
les opérateurs d'incrémentation
les opérateurs de comparaison
les opérateurs logiques
les opérateurs bit-à-dit
les opérateurs de décalage de bit

[Link] (UMBB)
Présenté par : Mme TOUIL 50
  Les opérateurs de calcul

Exemple Nom Résultat

-$a Négation Opposé de $a
$a + $b Addition Somme de $a et $b
$a - $b Soustraction Différence de $a et $b
$a * $b Multiplication Produit de $a et $b
$a / $b Division Quotient de $a et $b
$a % $b Modulo Reste de $a divisé par $b
$a ** $b Exponentielle Résultat de l’élévation de $a à la
puissance $b
$a=$b Affectation Affecter $b dans $a

[Link] (UMBB)
Présenté par : Mme TOUIL 51
  Les opérateurs d’assignation

Exemple Résultat
$a += $b $a=$a+$b; addition de $a et $b; le résultat dans $a
$a -= $b $a=$a-$b; soustraction de $a et $b; le résultat dans $a
$a *= $b $a=$a*$b; multiplication de $a par $b; le résultat dans $a
$a /=$b $a=$a/$b; division de $a par $b; le quotient dans $a
$a %= $b Le reste de la division de $a par $b dans $a
$a |= $b Effectue un OU logique entre $a et $b, le résultat dans $a
$a ^= $b Effectue un OU exclusif entre $a et $b, le résultat dans $a
$a &= $b Effetue un ET logique entre $a et $b, le résultat dans $a
$a .= $b Effectue une concaténation de des chaines $a et $b, le
résultat dans $a
[Link] (UMBB)
Présenté par : Mme TOUIL 52
  Les opérateurs d’incrémentation
Exemple Résultat
$a++ Incrémentation: augmente d’une unité la variable $a
$a-- Décrémentation : diminue d’une unité la variable $a
 Les opérateurs de comparaison
Exemple Résultat
$a == $b Compare $a et $b et vérifie leur égalité
$a < $b Vérifie que si $a est strictement inférieur à $b
$a > $b Vérifie que si $a est strictement supérieur à $b
$a <= $b Vérifie que si $a est inférieur ou égale à $b
$a >= $b Vérifie que si $a est supérieur ou égale à $b
$a != $b Compare $a et $b et vérifie leur inégalité
[Link] (UMBB)
Présenté par : Mme TOUIL 53
  Les opérateurs logiques
Exemple Résultat
$a && $b True si $a et $b valent true
$a and $b
$a or $b True si $a ou $b valent true
$a || $b
$a xor $b True si $a ou $b est true, mais pas les deux en même
temps
! $a True si $a est false

[Link] (UMBB)
Présenté par : Mme TOUIL 54
  Les opérateurs bit à bit
Exemple Résultat
$a & $b Retourne 1 si le bit de $a et le bit de $b de même poids
sont à 1
$a | $b Retourne 1 si l’un ou l’autre des deux bits de même poids
est à 1 (ou les deux)
$a ^ $b Retourne 1 si l’un des deux bits de même poids est à 1,
(mais pas les deux)
~$a Complement :retourne un 1 si le bit est 0 et inversement

Exemple : 9 (1001) & 12(1100)  1000 (8)

9 (1001) | 12(1100)  1101 (13)
9 (1001) ^12(1100)  0101 (5)
~9 (~1001)  0110 (6)

[Link] (UMBB)
Présenté par : Mme TOUIL 55
  Les opérateurs bit à bit
Exemple Résultat
$a & $b Retourne 1 si le bit de $a et le bit de $b de même poids
sont à 1
$a | $b Retourne 1 si l’un ou l’autre des deux bits de même poids
est à 1 (ou les deux)
$a ^ $b Retourne 1 si l’un des deux bits de même poids est à 1,
(mais pas les deux)
~$a Complement :retourne un 1 si le bit est 0 et inversement

Exemple 13 : 9 (1001) & 12(1100)  1000 (8)

9 (1001) | 12(1100)  1101 (13)
9 (1001) ^12(1100)  0101 (5)
~9 (~1001)  0110 (6)

[Link] (UMBB)
Présenté par : Mme TOUIL 56
  Les opérateurs de décalage de bit
Exemple Résultat
$a << Décale les bits de $a sur la gauche ( chaque décalage
équivaut à une multiplication par 2 )
$a >> Décale les bits de $a par la droite ( chaque décalage
équivaut à une division par 2)

Exemple 14: 6<< (0110)  1100 (12)

6>> (0110)  0011 (3)

[Link] (UMBB)
Présenté par : Mme TOUIL 57
 7- Les fonctions
- Comme en JavaScript, les fonctions en PHP doivent être déclarée
avec le mot-clé function et les valeurs de retour sont retournées
avec le mot-clé return. La fonction n’est exécutée qu’après l’appel.

- La fonction peut être appelée avec ou sans paramètres, et avec ou

sans valeur de retour.

- Les paramètres peuvent avoir des valeurs par défaut.

[Link] (UMBB)
Présenté par : Mme TOUIL 58
 Exemple 15 : les fonctions

[Link] (UMBB)
Présenté par : Mme TOUIL 59
 Exemple 15 : les fonctions

[Link] (UMBB)
Présenté par : Mme TOUIL 60
 1 Introduction

2 Syntaxe de base

3 Types , variables, opérateurs et fonctions

4 Structures de contrôles

5 Traitement des formulaires HTML avec PHP

6 Classes et objets

[Link] (UMBB)
Présenté par : Mme TOUIL 61
 1- Introduction
Tous les scripts PHP sont une suite d’instructions. Une instruction
peut être une assignation, un appel de fonction ou une instruction
de contrôle.

2- Test conditionnel
Voici la syntaxe de chacune des structures if, if else, if elseif :

if (condition) { if (condition) { if (condition1) {

// actions; //actions; // action 1;
} } else { } elseif (condition2) {
// autres actions; // action 2;
} } else {
// autre actions;
}
[Link] (UMBB)
Présenté par : Mme TOUIL 62
 1- Introduction
Tous les scripts PHP sont une suite d’instructions. Une instruction
peut être une assignation, un appel de fonction ou une instruction
de contrôle.

2- Test conditionnel
Voici la syntaxe de chacune des structures if, if else, if elseif :

if (condition) { if (condition) { if (condition1) {

// actions; //actions; // action 1;
} } else { } elseif (condition2) {
// autres actions; // action 2;
} } else {
// autre actions;
}
[Link] (UMBB)
Présenté par : Mme TOUIL 63
 3- les Boucles
Voici la syntaxe de chacune des structures while, do while, for :

While (condition) { do { for($i=0;$i <10;$i++) {

// actions; //actions; // actions;
} } while (condition); }

[Link] (UMBB)
Présenté par : Mme TOUIL 64
 1 Introduction

2 Syntaxe de base

3 Types , variables, opérateurs et fonctions

4 Structures de contrôles

5 Traitement des formulaires HTML avec PHP

6 Classes et objets

[Link] (UMBB)
Présenté par : Mme TOUIL 65
 1- Introduction
- Lors de la création d’un formulaire HTML par la balise <form>, on
précise comment les données du formulaires sont envoyées au
serveur et par quel script elles seront traitées.
-Le traitement est fait par un script coté serveur(PHP) et l’envoi est
fait :
 soit par la méthode GET;
 soit par la méthode POST.
- Ces deux informations sont à mentionner par les attributs method
et action de la balise <form>

Exemple :
<form method=‘’get’’ action=‘’[Link]’’>…</form>

[Link] (UMBB)
Présenté par : Mme TOUIL 66
 2- Utilisation de la méthode GET

La page HTML suivante contient un formulaire avec deux champs

nom et prénom.

Les données de ces deux champs sont envoyées au serveur par la

méthode GET et elles seront traitées par le script traitement_get.php

[Link] (UMBB)
Présenté par : Mme TOUIL 67
 Exemple 16: [Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 68
 Exemple 16 : [Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 69
 -Le PHP possède un tableau prédéfini $_GET qui permet de
conserver toutes les données d’un formulaire qui sont envoyées par
la méthode GET.

- la récupération des valeurs du formulaire est faite à travers le nom

de chaque composant du formulaire.

-Le formulaire de l’exemple 16 contient deux composants identifiés

respectivement par name=‘’nom’’ et name=‘’prenom’’.

-Donc au niveau du serveur, la récupération du nom et du prénom

saisis est faite par $_GET[‘’nom’’] et $_GET[‘’prenom’’].

-Le script PHP suivant permet de récupérer les données de la page

[Link] et les afficher

[Link] (UMBB)
Présenté par : Mme TOUIL 70
 Script traitement_get.php

Pour exécuter la page « [Link] » avec le script PHP, il suffit

de sauvegarder le fichier « [Link] » dans le répertoire www

[Link] (UMBB)
Présenté par : Mme TOUIL 71
 Exécution dans localhost

[Link]

Traitement_get.php

[Link] (UMBB)
Présenté par : Mme TOUIL 72
 3- Utilisation de la méthode POST
◦ Dans la page « [Link] » , on remplace « method=‘’get ‘’ »
par « method=‘’post’’ » et « action=‘’traitement_get.php’’ » par «
action=‘’traitement_post.php’’ ».

◦ Dans ce cas les données du formulaire vont être envoyées par la

méthode POST.

◦ Au niveau du serveur, ces données sont récupérées à travers le

tableau prédéfini $_POST[‘’nom’’] et $_post[‘’prenom’’] retournent
le nom et le prénom saisi dans le formulaire.

Le script PHP suivant permet de récupérer les données de la page

modifiée « [Link] » et les afficher.

[Link] (UMBB)
Présenté par : Mme TOUIL 73
 Exemple 17: [Link]
C’est le même code, on seulement changer la méthode en POST et
action = traitement_pos.php
[Link]

Traitement_post.php

[Link] (UMBB)
Présenté par : Mme TOUIL 74
 4- Traitement des différents champs d’un formulaire HTML
Supposant dans ce qui suit que la méthode utilisée est POST.

Comment récupérer la valeur de chaque champs dans un

formulaire HTML?

• <input type=‘’text’’ name=‘’nom’’>: $_POST[‘nom’] retourne la

valeur saisie dans ce champs

C’est le même principe pour tous les champs input (type égale à
‘’password’’, ‘’number’’, ‘’date’’ , …)

[Link] (UMBB)
Présenté par : Mme TOUIL 75
 • Boutons radios à sélection unique : supposons que l’on a trois
boutons radios comme suit :
[Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 76
 On aura l’exécution suivante :

Alors, $_POST[‘diplôme’] retourne la valeur du bouton sélectionné

(donc la valeur L , M ou D ) après avoir cliqué sur «Envoyer »

[Link] (UMBB)
Présenté par : Mme TOUIL 77
 Le traitement peut être effectué comme suit :

Traiter_post.php

[Link] (UMBB)
Présenté par : Mme TOUIL 78
 L’exécution finale est comme suit :

[Link] (UMBB)
Présenté par : Mme TOUIL 79
 • Eléments de type select ( liste) : Le même principe des boutons
radios est appliqué pour les éléments de type select. C’est-à-dire,
$_POST[‘’nom_du_select’’] retourne la valeur de l’option choisie.

Exemple : [Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 80
 Le traitement en PHP correspondant est fait comme suit :

Traiter_post.php

[Link] (UMBB)
Présenté par : Mme TOUIL 81
 Et l’exécution est comme suit

[Link] (UMBB)
Présenté par : Mme TOUIL 82
 • Cases à cocher (checkbox) :
Supposons que l’on a trois choix présentant des activités sportives:
[Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 83
 • Cases à cocher (checkbox) :
Supposons que l’on a trois choix présentant des activités sportives:
[Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 84
 Lors de la validation du formulaire, uniquement les valeurs des cases
cochées sont envoyées au serveur.

Donc vu que l’on a deux cases cochées, le serveur reçoit uniquement

deux valeurs $_POST[‘’foot’’] et $_POST[‘’tennis’’], l’appel
$_POST[‘’natation’’] retourne une erreur.

Pour détecter si une case est cochée ou pas, on peut utiliser la

fonction prédéfinie isset() qui permet de tester si la valeur d’un
champ existe et si elle est différente de NULL.

Avec cette fonction , le traitement de ces trois cases peut être fait
comme suit:

[Link] (UMBB)
Présenté par : Mme TOUIL 85
 Avec cette fonction, le traitement de ces trois cases peut être fait
comme suit:
Traiter_post.php

[Link] (UMBB)
Présenté par : Mme TOUIL 86
 Et l’exécution est comme suit :

[Link] (UMBB)
Présenté par : Mme TOUIL 87
 Une autre solution de l’exemple
Form2_1.html

[Link] (UMBB)
Présenté par : Mme TOUIL 88
 Une autre solution de l’exemple
Form2_1.html

[Link] (UMBB)
Présenté par : Mme TOUIL 89
 Le traitement PHP est comme suit :

[Link]

[Link] (UMBB)
Présenté par : Mme TOUIL 90
 L’exécution :

[Link] (UMBB)
Présenté par : Mme TOUIL 91
 • Envoi d’un fichier : pour envoyer un fichier au serveur , il faut
insérer le code HTML suivant :
<input type=‘’file’’ name=‘’fiche’’ > comme pour tous les champs
du formulaire, on doit lui donner un nom.

Pour envoyer un fichier :

 il faudra limiter sa taille
Pour cela , on doit utiliser un champs caché « hidden », lui donner
le nom « MAX_FILE_SIZE » et lui attribuer la taille maximale du
fichier à uploader en octets .
<input type=‘’hidden’’ name=‘’MAX_FILE_SIZE’’ value=‘’100000’’>

Remarque: la taille du fichier envoyé au serveur ne doit pas

dépassée 100K, sinon une erreur est survenue.

[Link] (UMBB)
Présenté par : Mme TOUIL 92
  il faudra préciser au navigateur qu’on va envoyer des fichiers:
Cela est fait en ajoutant enctype=‘’multipart/form-data’’.

 Une fois qu’on precise l’envoi des données, ces dernières vont être
reçus au sein du serveur dans un tableau global $_FILES.

Ce tableau $_FILES contient toutes les données non textuelles

envoyées par le biais du formulaire. Rappelons que les données
textuelles sont enregistrées dans le tableau $_GET ou $_POST.

[Link] (UMBB)
Présenté par : Mme TOUIL 93
 Exemple : Envoi et enregistrement d’une photo

Form2_1.html

[Link] (UMBB)
Présenté par : Mme TOUIL 94
 Le traitement au niveau du serveur est comme suit :
Traiter_file.php

[Link] (UMBB)
Présenté par : Mme TOUIL 95
  $_FILE[‘photo’][‘error’] : retourne le nombre d’erreurs qui ont été
rencontrées lors de l’envoi de la photo vers le serveur. Si c’est égal à
0 alors il n’y a pas eu d’erreurs donc on peut procéder à
l’enregistrement.
 $_FILES['photo']['name'] : retourne le nom original de la photo
telle qu’elle était enregistrée au sein de la machine client.

 $_FILES['photo']['tmp_name']: retourne le nom temporaire de la

photo telle qu’elle est enregistrée temporairement au niveau du
serveur. L’image reste dans le dossier temporaire du serveur jusqu’à
ce que le script PHP en question sera fermé. Si elle n’a pas été
enregistrée alors elle sera perdue après la fermeture du script PHP.

[Link] (UMBB)
Présenté par : Mme TOUIL 96
  La fonction prédéfinie move_uploaded_file permet de
déplacer la photo du dossier temporaire vers un autre
emplacement, ceci va éviter la perte de la photo après la
fermeture du script, donc une sorte d’enregistrement.

Le 1er argument de la fonction est le nom de la photo qui se

trouve dans le dossier temporaire, et le 2ème paramètre indique
le nouveau nom et l’emplacement dans lequel la photo va être
enregistrée. Si on indique uniquement le nom sans
l’emplacement, alors la photo sera enregistrée par défaut dans
le dossier courant où il se trouve votre script PHP. Sinon, si on
veut enregistrer la photo dans un autre endroit alors il suffit de
précéder le nom par un chemin comme par exemple :
"donnes/mes_photos/"."nouveau_nom" . $extension.

[Link] (UMBB)
Présenté par : Mme TOUIL 97
 On peut également autoriser l’enregistrement des fichiers ayant
quelques extensions uniquement. Ceci peut être fait comme suit :

[Link] (UMBB)
Présenté par : Mme TOUIL 98