ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail

ISMONTIC TANGER

MODULE 104 : Sites web statiques

INITIATION À LA PROGRAMMATION WEB

ADDARRAZI ILHAM

2023-2024
Description du module

Objectif : Développer une application web statique selon les conditions, les
critères et les précisions qui suivent.
Durée : 105 heures  42 séances
3 sections:
HTML5
CSS3
Bootstrap
Evaluation: 3 contrôles continus et EFM Régional.
Définitions et standards du web
1. Définition du Web
Le Web ou World Wide Web
(abréviation : WWW, W3 ou 3W) est en
français la « toile d'araignée mondiale».
Le web est un système d'information
mondial qui permet aux utilisateurs de
consulter et de partager des documents
électroniques, des images, des vidéos et
d'autres ressources multimédias via
Internet.
Inventé en années 1980-1990 par Tim
Berners-Lee au CERN.
le WWW, est un
système hypertexte public fonctionnant
sur Internet qui permet de consulter
des pages accessibles sur des sites.
Définitions et standards du web
2. Les standards du Web définis par un consortium W3C
Un consortium à la tête du Web définit les standards de fonctionnement du
web: World Wide Web Consor​tium (W3C).
Le W3Cest une organisation internationale chargée de développer et de
maintenir des normes et des recommandations techniques pour le World Wide
Web (WWW).
Fondé en 1994 par Tim Berners-Lee.
Toute innovation du web doit être avalisée par ce consortium pour être
intégrée dans les protocoles du Web et utilisée.
Ces standards concernent les règles de communication, les formats et les
langages à utiliser. Les navigateurs sont capables de les interpréter et d’en
assurer l’affichage sur les ordinateurs où ils sont implémentés.
Navigateur
Un navigateur web (web browser en anglais) est un logiciel permettant d’accéder

à une page web et de l’afficher sur l’écran de l’utilisateur.

Les navigateurs web sont utilisés sur tous les appareils qui proposent un accès à

Internet et qui offrent la possibilité de consulter des pages web : tablettes,

smartphones, ordinateurs personnels

Les plus connus : Internet Explorer de Microsoft, Firefox de Mozilla,

Netscape, Opera, Safari…

Les standards de communication

1. HTTP : Hypertext Transfer Protocol

Il s’agit du protocole de transfert d’hypertexte.
C’est le protocole qui définit les règles que doit suivre un navigateur pour
obtenir une page web sur un serveur.
Ce protocole http existe en version sécurisée dans lequel les échanges sont
cryptés.
Les standards de communication

2. L’adresse d’une page Web : un URL : Uniform ressourc Locator

Un URL est une adresse uniforme « standard » (Uniform Ressourc Locator)
d’une ressource, donc d’une page Web.
Chaque page Web a une adresse unique qui se décompose en plusieurs
éléments :
Ex : http://education.edu.ma/articles.php?lng=fr&pg=650&tconfig=0
Le nom du protocole : http:// ou https://
Le nom de la machine qui héberge : edu.ma
Le nom de la ressource : nom de domaine : education
Eventuellement des paramètres optionnels : articles.php?
lng=fr&pg=650&tconfig=0
 Notion de site web
1. Définition
Un site web (aussi appelé site internet par abus de langage) est un ensemble de
pages Web hyperliées entre elles et mises en ligne à une adresse Web (appelée
Url).
Ces pages web contiennent généralement des informations, du contenu
multimédia, des liens hypertextes, et d'autres éléments interactifs qui sont
organisés autour d'un thème, d'un sujet ou d'un objectif spécifique. Les sites
web jouent un rôle crucial dans la diffusion d'informations, la communication
en ligne, le commerce électronique, l'éducation, et de nombreuses autres
activités en ligne.
 Notion de site web
2. Intérêts d'un site web
La mise en place d'un site web peut être motivée par plusieurs raisons :
Le besoin de visibilité : un site web, dans la mesure où il fait l'objet d'une
bonne campagne de promotion, peut être un moyen pour une enseigne ou une
organisation d'augmenter sa visibilité ;
L'amélioration de la notoriété : grâce à un site web institutionnel ou un
mini site web événementiel, une enseigne peut développer sa popularité
auprès du public ;
La collecte de données : internet représente pour les entreprises une
formidable opportunité de recueillir des données sur leurs clients ou bien de
démarcher de nouveaux prospects ;
La vente en ligne : frileux aux débuts d'internet, les internautes ont vite
compris l'intérêt d'internet pour l'achat de certains produits de consommation.
Un site internet peut représenter pour certaines entreprises une opportunité en
terme de commercialisation ;
 Notion de site web
3. Les différents types de sites web
Il existe différents types de sites web, chaque type correspond à un objectif.
On peut citer :
Les sites e-commerce ou sites marchands qui pour principal objectif la
vente en ligne.
Les sites vitrines, utilisés majoritairement pour présenter et exposer les
services d’une organisation ou une marque.
Les sites institutionnels, qui Présentent une organisation et ses valeurs,
à travers la description de son activité, de ses chiffres clés et des
informations indispensables au public ciblé.
Les sites portails, qui proposent des services de messagerie,
d’actualités,….
Les sites personnels, réalisés au profit des particuliers, qui désirent
partager en ligne leur passion pour un sujet précis.
Cette liste est loin d’être exhaustive, on retrouve d’autres sites tels que : Les
Blogs, les sites communautaires, les sites collaboratif.
Notion de site web

4. Structure d’un site web

Un ensemble de pages qui peuvent être consultées en suivant des hyperliens à

l'intérieur du site

la page d'accueil - la première page à consulter

les pages organisées dans plusieurs dossiers

les adresses de page (URL) définies par rapport à la racine du site (serveur

Web)
 Les standards de formats et de
langages
1. HTML

HTML (HyperText Markup Language) un langage codé permettant de

développer et de créer la mise en page d’un contenu pour le web.

Les pages web sont écrites dans le langage de balises HTML.

HTML est un langage de description des pages web permettant de structurer

un texte en lui ajoutant des balises pour préciser la façon dont le navigateur

doit mettre faire mettre en forme le contenu.

 Les standards de formats et de
langages
2. CSS
CSS : feuille de style en cascade
Le style graphique d’une page (police utilisées, tailles, couleurs…) peut être
précisé dans un fichier de style au format CSS contient des règles de mises en
forme que le navigateur saura interpréter pour l’affichage dans une bonne
mise en forme
Permettent de générer la présentation d’une page HTML : séparer la structure
(HTML) de sa présentation (CSS)
Ensemble de règles stylistiques applicables à un, ou plusieurs documents
HTML => gain de taille du fichier HTML
 Les standards de formats et de
langages
3. JAVASCRIPT

JavaScript désigne un langage de développement informatique, et plus

précisément un langage de script orienté objet.

JavaScript est un langage de programmation largement utilisé dans le

développement web pour ajouter des fonctionnalités interactives et

dynamiques aux sites web. Il joue un rôle essentiel dans l'amélioration de

l'expérience utilisateur et l'augmentation de l'interactivité d'un site web.Il

permet, entre autres, d'introduire sur une page web ou HTML des petites

animations ou des effet.

Terminologies du web

1. Hyperlien

Un lien hyperlien, appelé aussi «hypertexte » ou plus simplement « lien » est

un élément d’une page web qui, lorsque l’internaute clique dessus, dirige

celui-ci vers une autre page web.

Cet élément peut être une image (une photo, un bouton), un texte ou une zone

de la page.

Les liens sont à la base du web : c’est grâce à eux que les internautes peuvent

naviguer d’une page à l’autre, et ainsi explorer le World Wide Web.

Terminologies du web

1. Hyperlien

Un lien hyperlien, appelé aussi «hypertexte » ou plus simplement « lien » est

un élément d’une page web qui, lorsque l’internaute clique dessus, dirige

celui-ci vers une autre page web.

Cet élément peut être une image (une photo, un bouton), un texte ou une zone

de la page.

Les liens sont à la base du web : c’est grâce à eux que les internautes peuvent

naviguer d’une page à l’autre, et ainsi explorer le World Wide Web.

Terminologies du web

2. Un hébergeur Web

Un hébergeur Web est une entreprise de services informatiques hébergeant

(mettant en ligne) sur ses serveurs Web les ressources constituant les sites

Web de ses clients.

En d'autres termes, un hébergeur web met à disposition des serveurs

connectés en permanence à Internet, où les fichiers, les bases de données et

les autres éléments constitutifs d'un site web sont stockés et accessibles en

ligne.
Terminologies du web
3. Un moteur de recherche

Un moteur de recherche est un outil qui permet de rechercher sur le Web des

ressources, des contenus, des documents etc., à partir de mots clés.

Il suffit de renseigner les expressions qui forment la requête et le moteur de

recherche déniche automatiquement les ressources correspondant à la

recherche. Les résultats apparaissent organisés selon une logique propre à

chaque moteur.
Terminologies du web
4. Un serveur web
Un serveur Web est un logiciel ou matériel informatique chargé du stockage,
du traitement et de la diffusion des fichiers Web (pages, textes, images, etc.)
aux utilisateurs dès qu’ils lancent une requête.
Pour publier un site web, il faut un serveur web statique ou dynamique:
Un serveur web statique (aussi appelé une pile) est composé d'un
ordinateur (matériel) et d'un serveur HTTP (logiciel). Il est appelé «
statique » car le serveur envoie les fichiers hébergés « tels quels » vers le
navigateur.
Un serveur web dynamique possède d'autres composants logiciels,
certains qu'on retrouve fréquemment dont un serveur d'applications et une
base de données. Il est appelé « dynamique » car le serveur d'applications
met à jour les fichiers hébergés avant de les envoyer au navigateur via
Terminologies du web
4. Un serveur web
Un serveur Web est un logiciel ou matériel informatique chargé du stockage,
du traitement et de la diffusion des fichiers Web (pages, textes, images, etc.)
aux utilisateurs dès qu’ils lancent une requête.
Pour publier un site web, il faut un serveur web statique ou dynamique:
Un serveur web statique (aussi appelé une pile) est composé d'un
ordinateur (matériel) et d'un serveur HTTP (logiciel). Il est appelé «
statique » car le serveur envoie les fichiers hébergés « tels quels » vers le
navigateur.
Un serveur web dynamique possède d'autres composants logiciels,
certains qu'on retrouve fréquemment dont un serveur d'applications et une
base de données. Il est appelé « dynamique » car le serveur d'applications
met à jour les fichiers hébergés avant de les envoyer au navigateur via