NSI InterfaceWeb IHM

Bloc 4
ARCHITECTURES SYSTÈME ET RÉSEAUX,

IHM ET WEB
Module 4.
Technologies Web
Rodrigue Chakode Mai 2021

Bloc 4
ARS
Introduction à HTML 5
1. Introduction à HTML 5
> Base et structure d'une page web : le HTML
> HTML : éléments de base du HTML
> HTML : mise en forme et structures
avancées
2. Déploiement d'un site web
3. Interactions et gestion dynamique dans une
page web
4. Frameworks de développement et outils de
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS
Qu’est ce qu’une page Web
A la base de toute page web, on retrouve du code HTML
HTML 3
Bloc 4
ARS
HTML : Hypertext Markup Language
Langage de balises pour le Web
• Les balises permettent de définir et d’organiser :

> La structure et le contenu d’une page Web
> Comment les éléments de la page seront rendus
• Standard maintenu par la World Wide Web Consortium (W3C)
> Plusieurs versions, HTML5 étant la plus récente
HTML 4
Bloc 4
ARS
HTML5 : Les balises
Balise ouvrante, balise fermante
• Une balise ouvrante commence par le symbole ‘<’, suivi d’un mot clé,
puis du symbole ‘>’
> Ex : <strong> est la balise ouvrante d’un bloc en gras
• Une balise fermante commence par le symbole ‘</’, suivi d’un mot clé,
puis du symbole ‘>’
> Ex : </strong> est la balise fermante d’un bloc en gras
HTML 5
Bloc 4
ARS
Des balises HTML en exemple
HTML 6
Bloc 4
ARS
Structure d’une page HTML5
HTML 7
Bloc 4
ARS
Entête d’une page Web
Partie comprise entre les balises <head> et </head>
• Titre de la page : <title> </title>

• Des métadonnées
> <meta name=”nom” content=”valeur” />
• Feuilles de styles
HTML 8
Bloc 4
ARS
Corps d’une page Web
Section comprise entre les balises <body> et </body>
Inclut :
• Des éléments visibles (textes, images,vidéos,...)
> Ex:
• Des éléments invisibles qui contribuent à gérer des

interactions (scripts) ou des mises en forme (styles)
> Ex :
HTML 9
Bloc 4
ARS
avancées
page web
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS
Texte et mise en forme
Pas de prise en charge WYSIWYG
• Toute mise en forme nécessite l’usage d’une balise

> Paragraphe : <p> </p>
> Gras : <strong></strong> (ou <b></b>)
> Italique : <i></i>
> Titres : <h1></h1>, <h2></h2>, <h3></h3>...
> Retour à la ligne: <br />
> Et bien d’autres
HTML 11
Bloc 4
ARS
Multimédia - images
<img />
• src (1) définit le chemin ou l’URL vers l’image

• alt (2) définit un message à afficher si le navigateur ne peut
pas rendre l’image
HTML 12
Bloc 4
ARS
Multimédia - audios
<audio></audio>
• controls (1) permet d’utiliser les options audio par défaut

du navigateur
• src (2) définit le chemin ou l’URL de l’image
HTML 13
Bloc 4
ARS
Multimédia - vidéos
<video></video>
• controls (1) permet d’utiliser les options vidéo par défaut

du navigateur
• Balise imbriquée <source> (2) pour définir le chemin et le
format de la vidéo
HTML 14
Bloc 4
ARS
Multimédia - élément de figure
<figure></figure>
• Élément multimédia (audio, vidéo, image) + légende

> Legende définie via <figcaption></figcaption>
HTML 15
Bloc 4
ARS
Lien hypertexte ou élément d’ancre vers d’autre page
<a></a>
• L’attribut href (1) définit la page cible du lien

• Le texte du lien est défini entre la balise ouvrante et la balise
fermante (2)
HTML 16
Bloc 4
ARS
Liste numérotée
<ol></ol>
• Eléments de la liste définis via des balises <li></li>
HTML 17
Bloc 4
ARS
Liste non-numérotée
Balise <ul></ul>
• Eléments de la liste définis via des balises <li></li>
HTML 18
Bloc 4
ARS
avancées
page web
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS
Division/bloc de contenu
<div></div>
• Permet de regrouper et d’organiser des éléments

• Pas de représentation visuelle
• Rendu personnalisable via des éléments de style (le cas
échéant)
HTML 20
Bloc 4
ARS
Style des éléments HTML
La plupart des éléments ont un attribut style permettant de contrôler leur

style de rendu
• Plusieurs style peuvent être combinés à l’aide des points-

virgules
HTML 21
Bloc 4
ARS
Feuille de style
La plupart des éléments ont un attribut class permettant de définir une ou

plusieurs classes de style pour leur rendu
• Approche recommandée par rapport à l’attribut style qui

peut être complexe à maintenir
HTML 22
Bloc 4
ARS
Formulaires de données
<form></form>
• Permet d’envoyer des données vers un serveur Web

• Divers éléments de contrôle
> Boutons : <button></button>
> Eléments d’entrées de données : <input />
> Zones de texte: <textarea></textarea>
> Regroupement de champs : <fieldset></fieldset>
> Et bien d’autres
HTML 23
Bloc 4
ARS
Exemple de formulaire
HTML 24
Bloc 4
ARS
Formulaire - Transmission des données au serveur
L’attribut “method” définit comment les données sont transmis au serveur
• Méthode GET (<form method=”GET”>)

> Transmet les données dans l’URL de la requête
> Ex: /auth/login?name=toto&password=totopass
• Méthode POST (<form method=”POST”>)
> Transmet les données via le corps de la requête
• GET soulève la problématique de transmission de données en
claire dans l’URL (confidentialité)
HTML 25
Bloc 4
ARS
Liens utiles
Ressources documentaires et tutoriels HTML
• https://www.w3schools.com/
• https://developer.mozilla.org/fr/docs/Web/HTML
• https://fr.w3docs.com/apprendre-html/mise-en-forme-html.ht
ml
HTML 26
Bloc 4
ARCHITECTURES SYSTÈME ET RÉSEAUX, IHM ET
WEB
Chapitre 2
Fonctionnement d’un site Web

Bloc 4
ARS
Déploiement d'un site web
avancées
page web
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS
Architecture d'hébergement Web
● Un serveur Web stocke les pages

● Le serveur a une adresse (URL)
> https://nom_ou_ip_du_serveur/
Serveur Web
> Ex: https://www.education.gouv.fr/
Réseau
> Ex : http://192.168.1.1/
● Un navigateur Web permet d’accéder à
l’adresse Web et afficher le contenu
> Chrome, Firefox, Edge,...
Fichiers HTML
● Entre le navigateur et le serveur il y a un

réseau (LAN, WAN, Internet)
Fonctionnement d’un site Web 29

Bloc 4
ARS
Un serveur Web en bref
Logiciel capable d’exposer et de gérer du contenu Web
• Exemples
> Apache HTTP Server : https://httpd.apache.org/
> Microsoft IIS :
https://www.microsoft.com/fr-FR/download/details.aspx?id=4
8264
> NGINX : https://www.nginx.com/

Bloc 4
ARS
Site statique Vs Site dynamique
Site dynamique
s dans des fichiers HTML rendus tels quels par le serveur
• Contenu Webà la volée par le serveur
généré
Web
> Contenus enrichis dynamiquement avec
des données contextuelles
> Données contextuelles stockées dans des
Serveur Web
bases de données (ex : MySQL)
Réseau
> En plus de pages statiques le cas échéant
Fichiers HTML
Base de données

Bloc 4
ARS
Page par défaut d’un site Web statique
Page index.html ou index.htm
● Chargée par défaut lorsqu’on aucune autre page n’est référencée

> http://nom-du-site/, équivaut à http://nom-du-site/index.html ou
http://nom-du-site/index.htm le cas échéant

Bloc 4
ARS
Exercice 3 : déployer un site Web statique
● Outils
> OS: Ubuntu 20.04 LTS (le cas échéant sur
une machine virtuelle)
Serveur Web > Installer Apache HTTP Server
Réseau
> Le site sera composé des fichiers HTML
des exercices 1 et 2, à copier dans le
dossier /var/www/html du serveur
Fichiers HTML
> Créer une page d’index pour le site avec
deux liens, pointant respectivement vers
les pages de l’exercice 1 et de l’exercice 2

Bloc 4
ARS
Site Web dynamique
● Gérer des interactions avec l’utilisateur

> contrôles de données, actions
contextuelles, ...
Serveur Web
● Socle de Web dynamique requis
Réseau
> Javascript, PHP, Symfony, Django, …

> Serveur Web compatible (ex : PHP +
Apache)
> Système de base de données le cas
Base de données
échéant (ex : PHP + MySQL + Apache)

Bloc 4
WEB
Chapitre 3
Web dynamique : Javascript

Bloc 4
ARS
Web dynamique : Javascript, PHP
avancées
3. Interactions et gestion dynamique dans
une page web
gestion de contenu
1
4. Technologies Web
Bloc 4
ARS
Javascript
Langage de script pour manipuler dynamiquement les éléments d’une page

HTML
• Code défini via la balise <script></script>

• Exécuté par le navigateur (i.e. côté client)
Javascript 37
Bloc 4
ARS
Intérêts du Javascript dans une page Web
Manipuler programmatiquement les éléments d’une page Web
• Interactivité avec l’utilisateur

> Ex : valider les champs d’un formulaire
• Chargement de contenu contextualisé, asynchronicité
> Prendre en compte des spécificités côté client (ex :
type/version du nagivateur, localisation…)
> Chargement de contenu en arrière plan pour accélérer le
chargement initial d’une page Web
Javascript 38
Bloc 4
ARS
Exemple de page Web avec du Javascript
Javascript 39
Bloc 4
ARS
Apprendre du Javascript
Langage standardisé (ECMAScript)
• Site de référence (dernière version en 2018)

> https://262.ecma-international.org/
• Frameworks tiers pour de la manipulation avancée
> jQuery (https://jquery.com/), Vue.js (https://vuejs.org/), React (
https://reactjs.org/), Angular (https://angular.io/ )
• Ressources documentaires
> MDN Web Docs, W3Schools
Javascript 40
Bloc 4
WEB
Chapitre 4
Web dynamique : PHP

Bloc 4
ARS
PHP
Langage de script pour le développement d’applications Web
• Script exécuté côté serveur (le client reçoit du HTML)
PHP 42
Bloc 4
ARS
Intérêts du PHP
Créer des applications Web dynamiques qui traitent et génèrent des des
données côté serveur
• Code stocké et exécuté par le serveur

> Le client n’a pas accès au code, il reçoit du code HTML
> Accès et manipulation de bases de données
> Gestion des interactions et des requêtes envoyées par des
clients (ex : via des formulaires)
> Manipulation de ressources systèmes (ex : fichiers)
PHP 43
Bloc 4
ARS
Cas pratique : gestion de formulaire avec PHP
PHP 44
Bloc 4
ARS
Architecture d’un serveur de pages PHP
● Un serveur Web 21.9
> Ex : Apache HTTP Server

● Un interpréteur PHP
> Ex : modudle PHP (mod_php) pour
Serveur Web Apache HTTP Server
+ Interpréteur PHP
Réseau
● Lorsqu’une page PHP est demandée, le
serveur Web s’appuie sur l’interpréteur
PHP pour produire le code HMTL qu’il
Fichiers PHP
envoie au client

Bloc 4
ARS
Liens utiles
Ressources communautaires PHP
• https://www.php.net/manual
Javascript 46
Bloc 4
WEB
Chapitre 5
Frameworks Web et CMS

Bloc 4
ARS
Frameworks Web et CMS
avancées
page web
4. Frameworks de développement et outils
de gestion de contenu
1
4. Technologies Web
Bloc 4
ARS
Frameworks Web
Un framework Web offre un socle et un ensemble d’outils pour développer

rapidement des applications Web
• Fondation pour gérer la logique métier, l’intégration avec des

bases de données et l’interface
> Approche Modèle-Vue-Contrôleur (MVC)
> Pattern de développement, règles de bonnes pratiques
> “Echafaudage” et génération de code
> Complexité technique simplifiée
Frameworks Web et CMS 49

Bloc 4
ARS
Diversités de Frameworks Web
Le choix d’un framework Web doit prendre en compte le langage de

programmation sous-jacent
• Python
> Django, Flask, Tornado, …
• PHP
> Symfony, Laravel, Zend Framework, …
• Java
> Spring, Struts, JSF, …

Bloc 4
ARS
Content Management Systems (CMS)
Plateforme intégrée pour créer des sites Web de manière simple
• Produit packagé prêt au déploiement

> Cas d’usage prédéfinis (blog, intranet d’entreprise, …)
> Déploiements rapides avec des options de personnalisation (ex :
fonctionnalités, style, ...)
• Edition de contenu en mode WYSIWYGET
> Masquage de la complexité technique

Bloc 4
ARS
CMS - Exemple
Capture d’écran d’un éditeur WordPress

Bloc 4
ARS
Une offre large de solutions CMS sur le marché
Il faut prendre en compte le cas d’usage, la facilité de déploiement et les

contraintes opérationnelles
• Composants technique
> Base de données (MySQL, PostgresSQL,...), langage de
programmation (PHP, Java, Python, …), navigateurs
supportés, ...
• Exemples
> WordPress , CMS Made Simple, Joomla

NSI InterfaceWeb IHM

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

NSI InterfaceWeb IHM

Transféré par

Droits d'auteur :

Formats disponibles

Bloc 4

ARCHITECTURES SYSTÈME ET RÉSEAUX,

Rodrigue Chakode Mai 2021

A la base de toute page web, on retrouve du code HTML

Langage de balises pour le Web

• Les balises permettent de définir et d’organiser :

Balise ouvrante, balise fermante

Partie comprise entre les balises <head> et </head>

• Titre de la page : <title> </title>

Section comprise entre les balises <body> et </body>

• Des éléments invisibles qui contribuent à gérer des

Pas de prise en charge WYSIWYG

• Toute mise en forme nécessite l’usage d’une balise

• src (1) définit le chemin ou l’URL vers l’image

• controls (1) permet d’utiliser les options audio par défaut

• controls (1) permet d’utiliser les options vidéo par défaut

• Élément multimédia (audio, vidéo, image) + légende

• L’attribut href (1) définit la page cible du lien

• Eléments de la liste définis via des balises <li></li>

• Eléments de la liste définis via des balises <li></li>

• Permet de regrouper et d’organiser des éléments

La plupart des éléments ont un attribut style permettant de contrôler leur

• Plusieurs style peuvent être combinés à l’aide des points-

La plupart des éléments ont un attribut class permettant de définir une ou

• Approche recommandée par rapport à l’attribut style qui

• Permet d’envoyer des données vers un serveur Web

L’attribut “method” définit comment les données sont transmis au serveur

• Méthode GET (<form method=”GET”>)

Ressources documentaires et tutoriels HTML

Rodrigue Chakode Mai 2021

● Un serveur Web stocke les pages

● Entre le navigateur et le serveur il y a un

Fonctionnement d’un site Web 29

Logiciel capable d’exposer et de gérer du contenu Web

Fonctionnement d’un site Web 30

Fonctionnement d’un site Web 31

Page index.html ou index.htm

● Chargée par défaut lorsqu’on aucune autre page n’est référencée

Fonctionnement d’un site Web 32

Fonctionnement d’un site Web 33

● Gérer des interactions avec l’utilisateur

> Javascript, PHP, Symfony, Django, …

échéant (ex : PHP + MySQL + Apache)

Fonctionnement d’un site Web 34

Rodrigue Chakode Mai 2021

Langage de script pour manipuler dynamiquement les éléments d’une page

• Code défini via la balise <script></script>

Manipuler programmatiquement les éléments d’une page Web

• Interactivité avec l’utilisateur

Langage standardisé (ECMAScript)

• Site de référence (dernière version en 2018)

Rodrigue Chakode Mai 2021

Langage de script pour le développement d’applications Web

• Script exécuté côté serveur (le client reçoit du HTML)

• Code stocké et exécuté par le serveur

● Un serveur Web 21.9

> Ex : Apache HTTP Server

Fonctionnement d’un site Web 45

Ressources communautaires PHP

Rodrigue Chakode Mai 2021

Un framework Web offre un socle et un ensemble d’outils pour développer

• Fondation pour gérer la logique métier, l’intégration avec des

Frameworks Web et CMS 49

Le choix d’un framework Web doit prendre en compte le langage de