Programmation web BC2

Introduction aux développement web

Contenu de la formation
Introduction au développement Web et multimédia
o Les architectures multi-tiers, web statique, web dynamique
o Outils de développement web
o Ergonomie web
o Concept de base du multimédia
Le langage HTML5
Les feuilles de styles CSS3
Mise en fonctionnement d’un site web (notions de : Hébergement, Référencement, Tests, maintenance)

I. Le site web
C’est un ensemble de fichier (pages html /web, images, son, vidéo, etc.) et de répertoires
placés dans le même espace du disque dur « arborescence » d’un poste de travail ou d’un serveur
et liés entre eux par des liens hypertextes. Et pour que le site soit accessible depuis un réseau,
un serveur http/web doit fonctionner sur le serveur qui héberge le site.
II. Les différents types d’un site web
1. Site web statique
a. Définition
Un site web statique est une succession des pages et pour modifier les pages d’un site
statique, nous devons confier les opérations à une personne qui a la maitrise du langage de
conception de ces pages ou d’un logiciel de création de site.
b. Fonctionnement
L’administrateur du site compose avec un éditeur «HTML » des pages stockées sur le
serveur web. Celui-ci renvoie ces pages à la demande au visiteur par la suit ces pages ne
pourront être modifiées que via un éditeur HTML, par l’administrateur.
2. Site web dynamique
a. Définition
Un site web dynamique est une véritable application informatique effectuant des
traitements, reliée à une ou plusieurs bases de données.
Avec un site dynamique, la mise à jour de site devient simple.

b. Fonctionnement
L’administrateur du site et le visiteur utilisent le même outil : le navigateur web. Mais
les pages avec lesquelles travaille l’administrateur ne sont pas les même que celle que le visiteur

ISAEG 2021/2022 1 Ali ZIDANII

 Programmation web BC2

voit : il encode dans des pages d’administration (aussi appelées « formulaires »), qui nourrissent
la base de données.
De son côté, le visiteur visualise des pages qui font appel au contenu de la base de
données. C’est le serveur web qui s’occupe de récupérer le contenu des formulaires que remplit
l’administrateur, et de renvoyer cette information dans les pages vues par le visiteur.
III. Les étapes de la création d’un site web
1. Planification
La planification de création d’un site web est une étape très importante puisqu’elle
définit les objectifs du site d’un côté et organise le travail à faire d’autre coté par la séparation
en différents types, organise les taches à faire.
2. Accumulation des informations et des matériels
Il faut avoir accumulé au préalable toutes les informations susceptibles de s’intégrer
dans les pages du site (images, son, texte, …). Ainsi que le matériel nécessaire pour la création
d’un site.
3. Hébergement
L’hébergement d’un site se fait dans un serveur web. Ce serveur est offert par divers
fournisseurs que ce soit gratuit ou payant.
4. Référencement
Le référencement est une étape importante dans la création d’un site web, puisqu’il est
inutile de mettre en ligne un site s’il n’est pas visible par le public.
En effet, le référencement a pour mission de faire connaitre le site aux moteurs de
recherche et aux autres sites, il existe deux types de référencement : Le référencement
automatique Assuré par les balises META et le référencement manuel.
IV. Techniques de développement web
1. Les logiciels utilisés
Il existe deux types de logiciels pour créer des pages web :
Les premiers obligent à saisir les balises « HTML », le site étant ensuite visualisé à l’aide d’un
navigateur.
Les seconds son de type “WYSIWYG” (what you see is what you get).
Exemple : « Macromedia Dreamweaver » qui est un éditeur « HTML » professionnel
destiné à la conception, au codage et au développement des sites, des pages et des applications
web. Avec Dreamweaver, on peut créer des applications web dynamiques reposant sur des
bases de données à l’aide de langages serveur tels que PHP, ASP, JSP et « ASP .NET ».

ISAEG 2021/2022 2 Ali ZIDANII

Programmation web BC2

2. Les langages
 Le HTML (HyperText Markup Langage)

Le langage HTML permet de définir la présentation du document ainsi que les liens
hypertextes vers d’autres documents à l’aide de balises de formatage.

Afin de générer l'aspect graphique du site web, le langage principal adéquat est le
HTML. Cette technologie permet, par un système de balise, de réaliser une interface graphique
correspondant à la volonté de son créateur.

 Le XML (extensible Markup Langage et traduisez Langage à balises extensibles)

Est en quelque sorte un langage HTML amélioré permettant de définir de nouvelles

balises. Il s'agit effectivement d'un langage permettant de mettre en forme des documents grâce
à des balises (Markup).
 Le JavaScript

Est un langage de programmation de scripts principalement utilisé dans les pages web
interactives. C'est un langage orienté objets à prototype, c'est-à-dire que les bases du langage
et ses principales interfaces sont fournies par des objets qui ne sont pas des instances
de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs
propriétés, et notamment une propriété de prototypage qui permet d'en générer des
objets héritiers personnalisés.
 Le CSS: (Cascading Style Sheets)

Il sert à mettre en forme des documents web, type page HTML ou XML.
 Le langage PHP (Personal Home Page)

Le langage PHP est un langage interprété et exécuté du côté serveur et non du côté
client. La syntaxe du langage est proche de celle du langage C. Cependant, il est plus
spécialement destiné à être intégré dans les pages HTML. En effet, il sera utilisé pour faire le
lien entre les données de la base et l'affichage graphique du site.

Ses principaux atouts sont :

. La gratuité
. La simplicité d’écriture de scripts
. La possibilité d’interfaçage avec des bases de données
. L’intégration au sein de nombreux serveurs web

ISAEG 2021/2022 3 Ali ZIDANII

Programmation web BC2

 Le langage MySQL (Structured Query Language)

Dans le but de stocker, de supprimer ou de modifier les informations disponibles

sur le site, une base de données est indispensable. Le langage MySQL semble le plus adapté
pour la réaliser. C'est un Système de Gestion de Bases de Données (SGBD) fonctionnant sous
Linux et Windows.

Pour développer en langage PHP et MySQL, on peut utiliser les logiciels suivants :

 XAMPP : Pour le développement des codes PHP/MySQL.

 EasyPHP

 WampServer

ISAEG 2021/2022 4 Ali ZIDANII