ECOLE SUPÉRIEURE PRIVÉE D'INGÉNIEURS

DE MONASTIR

Technologies web 1.0

HAJER MARAOUI
[email protected]

Année universitaire : 2024-2025

Objectif du cours
▪ A la fin de ce module l’apprenant sera capable de maîtriser les
technologies web de base côté client (HTML5, CSS3 et JavaScript) ainsi
que côté serveur (PHP7).

2
Table des matières
▪ Chapitre 1 : Introduction au Web et à HTML
▪ Chapitre 2 : Le Langage de Balises HTML
▪ Chapitre 3 : Feuilles de Style CSS
▪ Chapitre 4 : Le Langage de Script JavaScript
▪ Chapitre 5 : Introduction à PHP
▪ Chapitre 6 : Programmation Orientée Objet avec PHP

3
Séance 1
Acquis D’apprentissage
▪ Introduire l'architecture client/serveur
▪ Introduire les sites web dynamiques et statiques
▪ Définir les différentes technologies web et les différencier
▪ Présenter un document hypertexte et définir le HTML

4
 Chapitre 1 :
Introduction au Web et à HTML
 Introduction à l'Architecture Client/Serveur

L’architecture Client/Serveur est un modèle de communication en réseau où les tâches

sont réparties entre les serveurs et les clients.
6
Introduction à l'Architecture Client/Serveur

▪ Un serveur est un ordinateur

puissant ou un logiciel qui fournit
des ressources, des services ou des
données à d'autres ordinateurs,
appelés clients, via un réseau.
▪ Les serveurs hébergent et gèrent des
sites Web, des applications ou des
données. Ils répondent aux
demandes faites par les clients.

7
 Introduction à l'Architecture Client/Serveur

▪ Un client est un dispositif ou un logiciel

qui demande des ressources ou des
services à un serveur.

▪ Dans le contexte du développement

Web, un client est généralement un
navigateur Web ou une application qui
demande et affiche du contenu Web
depuis un serveur.

8
 Introduction à l'Architecture Client/Serveur

Flux d'Interaction :
1. Demande : Le client envoie une demande au serveur pour une ressource ou un service
particulier.

2. Traitement : Le serveur traite la demande et effectue les actions nécessaires (par exemple,
récupérer des données depuis une base de données).

3. Réponse : Le serveur renvoie la ressource ou le résultat demandé au client.

4. Affichage : Le client reçoit la réponse et l'affiche à l'utilisateur.

9
Introduction aux Sites Web Dynamiques et Statiques

Site Web Statique:

Un site dont le contenu est fixe et

identique pour tous les visiteurs. Les
pages sont servies telles qu'elles sont
stockées sur le serveur.

10
 Introduction aux Sites Web Dynamiques et Statiques

Site Web Statique:

Caractéristiques :

▪ Simple et rapide à charger.

▪ Moins complexe à créer et à héberger.

▪ Adapté aux sites où le contenu n'a pas besoin

de mises à jour fréquentes.

Exemple : Un site Web personnel de portfolio

avec un ensemble fixe de pages.

11
Introduction aux sites web dynamiques et statiques

Site Web Dynamique :

Un site dont le contenu est généré en

temps réel en fonction des interactions
de l'utilisateur ou des données
récupérées. Les pages sont créées
dynamiquement par le serveur en
réponse à des requêtes spécifiques..

12
 Introduction aux sites web dynamiques et statiques
Site Web Dynamique :

Caractéristiques :

▪ Le contenu peut changer en fonction des entrées

des utilisateurs ou d'autres conditions.

▪ Plus complexe et gourmand en ressources à

développer et à maintenir.

▪ Adapté aux sites Web avec un contenu

fréquemment mis à jour ou des fonctionnalités
spécifiques aux utilisateurs.
Exemple : Un site de commerce électronique qui affiche différents produits en fonction des
préférences des utilisateurs ou une plateforme de médias sociaux.
13
 Activité 1: Exploration des Sites Web Dynamiques et Statiques
Instructions:
▪ Recherche :
Chaque groupe doit trouver 4 à 6 exemples de sites web dynamiques et 2 à 3 exemples de
sites web statiques. Ils peuvent utiliser Internet pour trouver des exemples pertinents.
▪ Description :
Pour chaque site web trouvé, les groupes doivent rédiger une brève description qui inclut :
▪ Le type de site (dynamique ou statique).
▪ Les fonctionnalités clés du site.
▪ Pourquoi ils ont classé ce site comme dynamique ou statique (quels éléments de preuve
les ont conduits à cette conclusion ?).

14
 C’EST QUOI LE WEB?

• Le Word-Wide Web (ou WWW, ou Web) est un très grand système d’information
réparti sur un ensemble de sites connectés : le réseau Internet

15
 C’EST QUOI LE WEB?

• Le web est essentiellement constitué de documents hypertextes, ce terme peut être pris
au sens large : textes, sons, images, vidéo, etc.
16
 QU'EST-CE LE WEB?

• Les documents sont transmis sur le réseau par l’intermédiaire d’un programme serveur
qui dialogue avec un programme client
• Le dialogue entre serveur et client s’effectue selon un protocole de communication
(HTTP, FTP)
17
HTML (Hypertext Markup Language)

▪ Langage de balisage standard pour

créer des pages Web et des
applications Web

▪ Définit la structure et le contenu des

pages Web à l'aide d'éléments tels
que les titres, les paragraphes, les
liens et les images

18
CSS (Cascading Style Sheets)

▪ Utilisé pour contrôler la

présentation et la mise en page des
éléments HTML.

▪ Permet de styliser les pages Web,

y compris les polices, les couleurs
et les dispositions.

19
JavaScript

▪ Langage de programmation qui permet

des fonctionnalités interactives et
dynamiques sur les pages Web.

▪ Permet le script côté client, rendant

possible la création d'éléments
interactifs tels que des formulaires, des
animations et des mises à jour en temps
réel

20
Langages Côté Serveur (ex. : PHP, Python, Ruby, Node.js)

▪ Utilisés pour créer du contenu Web

dynamique en traitant les demandes côté
serveur.

▪ Peuvent interagir avec des bases de

données, gérer l'authentification des
utilisateurs et générer du contenu
dynamique en fonction de diverses
entrées.

21
Bases de données (ex. : MySQL, MongoDB, PostgreSQL)

▪ Stocker et gérer les données pour

les sites Web et applications
dynamiques.

▪ Permet une récupération, une mise

à jour et une gestion efficace des
données en fonction des
interactions des utilisateurs.

22
Protocoles de Communication (ex. : HTTP/HTTPS)

▪ Gérer la communication entre

clients et serveurs.

▪ Définissent comment les données

sont échangées sur le Web, assurant
la sécurité (HTTPS) et la fiabilité
des échanges.

23
 QU'EST-CE QU'UN DOCUMENT HYPERTEXTE ?

• Un document hypertexte est un type de document électronique qui contient des liens
(hyperliens) permettant de naviguer d'un document ou d'une section à une autre.

• Ce concept repose sur la structure de l'hypertexte, qui permet une navigation non linéaire en
créant des relations entre différentes parties du contenu ou entre différents documents

24
 QU'EST-CE QU'UN DOCUMENT HYPERTEXTE ?

Caractéristiques Principales :

• Liens Hypertextes : Permettent de se déplacer facilement entre différentes parties du texte ou

d'autres documents sur le web.

• Multimédia : Peut inclure des images, des vidéos, et des sons.

• Interactivité : Les utilisateurs peuvent interagir avec le document, en cliquant sur des liens
pour accéder à des contenus connexes.
25
 QU'EST-CE QU'UN DOCUMENT HYPERTEXTE ?

Exemples de Documents Hypertextes :

• Sites Web : Pages web interconnectées par des liens hypertextes.

• Wikis : Plateformes collaboratives avec des pages liées entre elles.

• E-books : Livres électroniques avec des liens pour naviguer entre les chapitres et les sections.

26
Définition du HTML (HyperText Markup Language)

HTML, ou HyperText Markup Language, est le langage de balisage standard utilisé pour créer et
structurer des documents sur le web. Il fournit la structure de base des pages web en utilisant des
balises (ou tags) pour définir les éléments de contenu tels que les titres, les paragraphes, les
listes, les images, et les liens.

27
 Caractéristiques Principales du HTML

Langage de Balisage : Utilise des balises pour structurer le contenu (ex. <p> pour un
paragraphe, <h1> pour un titre).

Structure du Document : Définit la structure hiérarchique d'une page web avec des éléments
imbriqués (ex. <div>, <section>, <article>).

Contenu Sémantique : Permet d’ajouter des significations spécifiques au contenu (ex.

<header>, <footer>, <main>).

28
 Activité 2 : Exploration de la structure et l’organisation d’un site web.
Instructions:
Dans cet exercice, vous allez travailler en groupe pour concevoir la structure d’un site web
fictif. Vous allez créer une maquette qui montre les différentes pages du site et les liens
entre elles. Cette activité vous aidera à comprendre comment organiser les informations et
à concevoir une navigation cohérente pour un site web.
▪ Description : Chaque groupe recevra un scénario fictif pour lequel vous devrez concevoir la
structure d’un site web. Voici quelques exemples de scénarios :
- Site de restaurant
- Blog personnel
- Boutique en ligne
- Site d’un club sportif
- Portfolio pour un artiste
29