ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
ENSA Agadir
École Nationale des Sciences Appliquées
Culture Digitale — Programmation Web en Python / GD1
Année universitaire 2024-2025
GUIDE DE PRÉPARATION À L'EXAMEN
Fiches de révision • Exercices variés • Corrigés
Informations sur l'examen :
Durée : 30 minutes — Format : QCM 20 questions sur papier — Note : 20 points
Répartition : Streamlit (8 pts) + HTML/CSS/JS (7 pts) + Flask (5 pts)
Comment utiliser ce guide :
Ce document est organisé en 3 fiches, une par technologie. Chaque fiche contient :
1. L'essentiel à retenir — les concepts clés résumés
2. Le comparatif visuel — tableaux de synthèse pour ne plus confondre les notions
3. Exercices de compréhension — lecture de code, associations, détection d'erreurs
4. Corrigés — en fin de chaque fiche
Conseil : L'examen est un QCM : il teste votre compréhension, pas votre capacité à écrire
du code de mémoire. Concentrez-vous sur le POURQUOI de chaque ligne de code, pas
seulement le COMMENT.
Page 1 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
FICHE 1 — Streamlit
1.1 — L'essentiel à retenir
Streamlit en une phrase :
Streamlit transforme un script Python en application web interactive SANS écrire une seule
ligne de HTML, CSS ou JavaScript.
Principe fondamental :
À chaque interaction utilisateur (clic, slider, saisie...), Streamlit ré-exécute TOUT le script
du début à la fin. C'est le modèle réactif.
Les commandes essentielles :
Catégorie Commande Rôle
Lancement streamlit run [Link] Démarre l'application dans le navigateur
Config st.set_page_config(layout="wide") Pleine largeur (obligatoire pour
dashboards)
Texte [Link]() / [Link]() Titre principal / sous-titre
Alertes [Link]() / [Link]() / [Link]() / Messages vert / orange / rouge / bleu
[Link]()
Données [Link](df) Affiche un tableau Pandas interactif
Graphique st.plotly_chart(fig) Affiche un graphique Plotly (interactif)
Mise en page [Link]([2, 1, 1]) Colonnes avec proportions
personnalisées
KPI [Link]("Label", valeur, delta) Indicateur avec flèche verte/rouge
Sidebar [Link]() Place un widget dans la barre latérale
Saisie [Link]() / [Link]() / [Link]() Curseur / Liste déroulante / Case à
cocher
Action [Link]("Texte") Bouton cliquable (retourne True/False)
Les couleurs des messages :
Fonction Couleur Usage typique
[Link]() Vert Opération réussie, statut OK
[Link]() Bleu Information neutre
[Link]() Orange Avertissement, attention
[Link]() Rouge Erreur, problème critique
Conseil : [Link]() colore automatiquement le delta : positif = vert (flèche ↑), négatif =
rouge (flèche ↓). Pas besoin de gérer les couleurs manuellement.
1.2 — Exercices
Exercice 1 — Relier chaque widget à son résultat
Tracez une ligne entre chaque code (gauche) et ce qu'il produit (droite).
Page 2 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
Code Résultat
[Link]('Vitesse', 0, 100) ..... A. Une case à cocher
[Link]('Ville', ['Agadir', 'Casa']) ..... B. Un curseur de 0 à 100
[Link]('Confirmer') ..... C. Un champ de texte libre
st.text_input('Nom') ..... D. Une liste déroulante à 2 choix
Exercice 2 — Que produit cette application ?
Décrivez en français ce que l'utilisateur voit à l'écran quand il lance ce code :
st.set_page_config(layout="wide")
[Link]("Suivi Production")
zone = [Link]("Zone", ["Nord", "Sud", "Est"])
c1, c2, c3 = [Link](3)
[Link]("Rendement", "94%", "+2%")
[Link]("Défauts", "12", "-3")
[Link]("Machines", "8/10")
if zone == "Nord":
[Link]("Zone Nord : Production normale")
else:
[Link](f"Zone {zone} : Vérification en cours")
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
Exercice 3 — Trouver les 3 erreurs
Ce code devrait afficher un dashboard avec un graphique, mais il contient 3 erreurs. Identifiez-les.
import streamlit as st
import pandas as pd
import [Link] as px
[Link]("Analyse des ventes")
st.set_page_config(layout="wide") # Erreur ?
data = [Link]({
"Mois": ["Jan", "Fév", "Mar"],
"Ventes": [120, 150, 180]
})
fig = [Link](data, x="Mois", y="Ventes")
[Link](fig) # Erreur ?
seuil = [Link]("Seuil", 100, 200)
if seuil > 150:
[Link]("Seuil élevé", color="blue") # Erreur ?
Erreur 1 : ................................................................................................................
Erreur 2 : ................................................................................................................
Page 3 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
Erreur 3 : ................................................................................................................
Exercice 4 — Vrai ou Faux ?
a) Streamlit nécessite un fichier HTML pour fonctionner.
b) [Link](3) crée 3 colonnes de largeurs égales.
c) Quand on bouge un slider, seule la ligne du slider est ré-exécutée.
d) [Link]() et [Link]() produisent le même widget, mais à des endroits différents.
e) Plotly Express crée des graphiques statiques (pas de zoom ni de survol).
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
Page 4 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
1.3 — Corrigés Streamlit
Exercice 1 — Relier :
[Link] → B (curseur) | [Link] → D (liste déroulante) | [Link] → A (case à cocher) |
st.text_input → C (champ texte)
Exercice 2 — Description :
L'utilisateur voit : une page pleine largeur avec le titre 'Suivi Production'. À gauche, une sidebar avec
une liste déroulante (Nord/Sud/Est). Dans la page principale, 3 colonnes avec des KPIs : Rendement
94% (flèche verte +2%), Défauts 12 (flèche verte -3 car la baisse est positive), Machines 8/10 (sans
delta). En dessous, si 'Nord' est sélectionné → message vert. Sinon → message orange avec le nom
de la zone.
Exercice 3 — Erreurs :
1) st.set_page_config() doit être la PREMIÈRE commande Streamlit du script, avant [Link](). Ici elle
est après → erreur.
2) [Link](fig) n'existe pas. La bonne fonction est st.plotly_chart(fig).
3) [Link]() n'accepte pas de paramètre color. On écrit simplement [Link]("Seuil élevé").
Exercice 4 — Vrai/Faux :
a) FAUX — Streamlit génère l'interface automatiquement, aucun HTML nécessaire.
b) VRAI — [Link](3) = 3 colonnes égales. Pour des proportions différentes →
[Link]([2,1,1]).
c) FAUX — Streamlit ré-exécute TOUT le script à chaque interaction (modèle réactif).
d) VRAI — Le widget est identique, seul l'emplacement change (sidebar vs page principale).
e) FAUX — Plotly crée des graphiques interactifs (zoom, survol, sélection). Matplotlib est statique.
Page 5 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
FICHE 2 — HTML, CSS et JavaScript
2.1 — L'essentiel à retenir
Le trio du web en une phrase chacun :
HTML = la structure (le squelette). Que contient la page ?
CSS = la présentation (l'apparence). Comment ça se présente ?
JS = l'interactivité (le comportement). Que se passe-t-il quand l'utilisateur agit ?
Les balises HTML essentielles :
Balise Rôle Exemple
<h1> à <h6> Titres (h1 = plus important) <h1>Mon titre</h1>
<p> Paragraphe de texte <p>Du texte ici</p>
<a href='...'> Lien hypertexte <a href='url'>Cliquer</a>
<img src='...'> Image <img src='[Link]'>
<div> Conteneur bloc (grouper des <div>...</div>
éléments)
<ul> / <ol> Liste à puces / Liste numérotée <ul><li>item</li></ul>
<input> Champ de saisie (formulaire) <input type='text'>
<button> Bouton cliquable <button>OK</button>
<style> Bloc CSS dans le <head> <style>p{color:red}</style>
<script> Bloc JavaScript (avant </body>) <script>alert('Hi')</script>
Les propriétés CSS à connaître :
Propriété Ce qu'elle fait Piège courant
color Couleur du TEXTE ≠ background-color (le fond)
background-color Couleur du FOND Ne pas confondre avec color
font-size Taille de la police Unité obligatoire : 18px, 1.2em
display: flex Aligne les enfants côte à côte S'applique au PARENT, pas aux
enfants
margin / padding Espace extérieur / intérieur margin = dehors, padding = dedans
Les sélecteurs CSS — ne plus confondre :
Syntaxe Cible Exemple
p Toutes les balises <p> p { color: blue; }
.important Tous les éléments class='important' .important { font-weight: bold; }
#titre L'élément unique id='titre' #titre { font-size: 24px; }
JavaScript — les 3 choses à savoir :
1. let / const pour déclarer des variables. let x = 5;
2. [Link]('id') pour accéder à un élément HTML par son id.
3. .innerHTML pour modifier le contenu d'un élément. .value pour lire un champ de saisie.
Page 6 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
2.2 — Exercices
Exercice 1 — Associer chaque code à sa technologie
Pour chaque ligne, indiquez : HTML, CSS ou JavaScript ?
a) <h2>Bienvenue</h2>
b) .titre { color: red; font-size: 20px; }
c) let total = prix * quantite;
d) <input type="number" id="note">
e) [Link]("resultat").innerHTML = "OK";
f) background-color: #3498db;
g) <a href="[Link]
h) function calculer() { return 42; }
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
Exercice 2 — Décrire le rendu visuel
Décrivez ce que l'utilisateur voit dans son navigateur avec ce code :
<div style="background-color: #f0f0f0; padding: 20px;">
<h1 style="color: navy;">Tableau de bord</h1>
<p>Production du jour : <strong>1250 unités</strong></p>
<button onclick="alert('Rapport envoyé !')">Envoyer</button>
</div>
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
Exercice 3 — Compléter le code
Complétez les trous pour que le bouton affiche la somme de deux champs dans le paragraphe
résultat.
<input type="number" id="val1">
<input type="number" id="val2">
<button onclick="additionner()">Calculer</button>
<p id="resultat"></p>
<script>
function additionner() {
let a = Number([Link]("......").value);
let b = Number([Link]("......").value);
[Link]("......").________ = a + b;
}
</script>
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
Exercice 4 — Où va quoi dans une page HTML ?
Placez chaque élément au bon endroit : <head>, <body>, ou avant </body> ?
Élément Emplacement
Page 7 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
<title>Mon site</title> ....................
<style>p { color: red; }</style> ....................
<h1>Bienvenue</h1> ....................
<script>alert('OK')</script> ....................
<link rel='stylesheet' href='[Link]'> ....................
Page 8 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
2.3 — Corrigés HTML/CSS/JS
Exercice 1 — Associer :
a) HTML — b) CSS — c) JavaScript — d) HTML — e) JavaScript — f) CSS — g) HTML — h)
JavaScript
Exercice 2 — Rendu visuel :
L'utilisateur voit un bloc gris clair (#f0f0f0) avec du padding. Dedans : un titre 'Tableau de bord' en
bleu marine (navy), un paragraphe 'Production du jour : 1250 unités' (1250 en gras grâce à <strong>),
et un bouton 'Envoyer'. Quand on clique sur le bouton, une fenêtre pop-up affiche 'Rapport envoyé !'.
Exercice 3 — Compléter :
let a = Number([Link]("val1").value);
let b = Number([Link]("val2").value);
[Link]("resultat").innerHTML = a + b;
Les ids correspondent aux champs : val1, val2, resultat. innerHTML insère le résultat dans le <p>.
Exercice 4 — Où va quoi :
<title> → dans <head> | <style> → dans <head> | <h1> → dans <body> | <script> → avant </body> |
<link> → dans <head>
Page 9 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
FICHE 3 — Flask
3.1 — L'essentiel à retenir
Flask en une phrase :
Flask est un micro-framework Python qui crée un serveur web. Vous écrivez le backend en
Python et le frontend en HTML (templates).
Différence clé avec Streamlit :
Streamlit = tout en Python (UI automatique). Flask = Python pour la logique + HTML/CSS
pour l'interface (séparation claire).
L'architecture Flask :
mon_projet/
├── [Link] # Code Python (routes, logique)
├── templates/ # Fichiers HTML (pages web)
│ ├── [Link]
│ └── [Link]
└── static/ # Fichiers CSS, JS, images
├── [Link]
└── [Link]
Conseil : templates/ = HTML (pages dynamiques) | static/ = CSS, JS, images (fichiers
fixes). Ne jamais confondre les deux !
Les concepts fondamentaux :
Concept Code Explication
Créer l'app app = Flask(__name__) Crée l'instance de l'application Flask
Route (URL) @[Link]('/') Associe une URL à une fonction
Python
Route dynamique @[Link]('/user/<nom>') <nom> est capturé et passé à la
fonction
Template render_template('[Link]') Charge un fichier HTML depuis
templates/
Variables render_template('[Link]', x=val) Envoie des données Python au
HTML
Lancer [Link](debug=True) Démarre le serveur en mode
développement
Comparatif Streamlit vs Flask :
Critère Streamlit Flask
Interface Générée automatiquement Vous écrivez le HTML vous-même
HTML nécessaire ? Non Oui (dans templates/)
Idéal pour Dashboards, prototypes rapides Sites web, APIs, applications
complètes
Interactivité Widgets Python (slider, button...) HTML + JavaScript
Commande streamlit run [Link] python [Link] ou flask run
Page 10 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
Modèle Ré-exécute tout le script Exécute seulement la route demandée
3.2 — Exercices
Exercice 1 — Que se passe-t-il quand on visite ces URLs ?
@[Link]('/')
def accueil():
return render_template("[Link]")
@[Link]('/produit/<id>')
def detail(id):
return f"Détail du produit {id}"
@[Link]('/contact')
def contact():
return "<h1>Contactez-nous</h1><p>Email : info@[Link]</p>"
a) URL : [Link] → Que voit l'utilisateur ?
......................................................................................................................................................................................................
.................................................
b) URL : [Link] → Que voit l'utilisateur ?
......................................................................................................................................................................................................
.................................................
c) URL : [Link] → Que voit l'utilisateur ?
......................................................................................................................................................................................................
.................................................
d) URL : [Link] → Que se passe-t-il ?
......................................................................................................................................................................................................
.................................................
Exercice 2 — Où placer ces fichiers ?
Fichier Dossier (templates/ ou static/)
[Link] ....................
[Link] ....................
[Link] ....................
[Link] ....................
[Link] ....................
Exercice 3 — Streamlit ou Flask ? Identifiez la technologie
Pour chaque ligne de code, indiquez si c'est du Streamlit ou du Flask.
a) [Link]("Mon Dashboard")
b) @[Link]("/resultat")
c) return render_template("[Link]", note=15)
d) col1, col2 = [Link](2)
e) st.plotly_chart(fig)
f) app = Flask(__name__)
g) seuil = [Link]("Seuil", 0, 100)
h) [Link](debug=True)
......................................................................................................................................................................................................
.................................................
......................................................................................................................................................................................................
.................................................
3.3 — Corrigés Flask
Page 11 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
Exercice 1 :
a) La page [Link] (depuis templates/) est affichée.
b) Le texte 'Détail du produit 42' est affiché (42 est capturé par <id>).
c) Un titre 'Contactez-nous' et un paragraphe avec l'email sont affichés (HTML brut retourné).
d) Erreur 404 (Not Found) car aucune route /aide n'est définie.
Exercice 2 :
[Link] → templates/ | [Link] → static/ | [Link] → static/ | [Link] → templates/ | [Link]
→ static/
Règle : les fichiers HTML (pages) vont dans templates/. Tout le reste (CSS, JS, images) va dans static/.
Exercice 3 :
a) Streamlit — b) Flask — c) Flask — d) Streamlit — e) Streamlit — f) Flask — g) Streamlit — h)
Flask
Page 12 / 13
ENSA Agadir — Programmation Web Python — Guide de préparation 2025-2026
CHECKLIST DE RÉVISION
Cochez chaque compétence que vous maîtrisez. Si une case reste vide, retournez à la fiche
correspondante.
Streamlit (Fiche 1 — 8 pts à l'examen)
☐ Je sais que streamlit run [Link] lance l'application
☐ Je connais le modèle réactif : toute interaction = ré-exécution complète du script
☐ Je sais créer des colonnes avec [Link]() et des proportions [2, 1, 1]
☐ Je sais utiliser [Link]() et comprends le delta (vert = positif, rouge = négatif)
☐ Je distingue [Link] (vert), [Link] (orange), [Link] (rouge), [Link] (bleu)
☐ Je sais placer des widgets dans la sidebar avec [Link]()
☐ Je sais que st.set_page_config() doit être la PREMIÈRE instruction Streamlit
☐ Je sais que Plotly Express = interactif et st.plotly_chart() l'affiche
☐ Je comprends la logique bouton + checkbox (if [Link] AND checkbox)
HTML / CSS / JavaScript (Fiche 2 — 7 pts)
☐ Je connais le rôle de chacun : HTML = structure, CSS = style, JS = interactivité
☐ Je sais reconnaître les balises principales : <h1>, <p>, <a>, <div>, <ul>, <input>, <button>
☐ Je sais que <style> va dans <head> et <script> va avant </body>
☐ Je distingue les sélecteurs CSS : balise, .classe, #id
☐ Je sais que color = couleur du texte, background-color = couleur du fond
☐ Je sais que display: flex aligne les éléments côte à côte
☐ Je sais que [Link]() accède à un élément et .innerHTML modifie son contenu
Flask (Fiche 3 — 5 pts)
☐ Je sais que Flask sépare backend (Python) et frontend (HTML)
☐ Je comprends @[Link]() : associe une URL à une fonction
☐ Je sais que render_template() charge un HTML depuis templates/
☐ Je sais que static/ contient CSS, JS, images — templates/ contient les HTML
☐ Je connais la différence clé : Streamlit = UI auto, Flask = vous écrivez le HTML
Conseil : Si toutes les cases sont cochées, vous êtes prêts. L'examen est un QCM :
relisez vos TP Streamlit, comprenez chaque ligne de code, et mémorisez les différences
entre les 3 technologies. Bonne chance !
Bon courage à toutes et à tous !
Page 13 / 13