diff --git a/SNT/01_WEB/1B_web.tex b/SNT/01_WEB/1B_web.tex
new file mode 100644
index 0000000..e603213
--- /dev/null
+++ b/SNT/01_WEB/1B_web.tex
@@ -0,0 +1,59 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{WEB - Cours}
+\date{Septembre 2020}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{La page web}
+
+\subsection*{Les langages du web}
+
+ \begin{minipage}{0.3\textwidth}
+ \begin{center}
+ \includegraphics[scale=0.4]{./fig/CSS3_logo}
+
+ Décoration
+
+ \end{center}
+ \end{minipage}
+ \hfill
+ \begin{minipage}{0.3\textwidth}
+ \begin{center}
+ \includegraphics[scale=0.9]{./fig/HTML5_logo}
+
+ Contenu
+
+ \end{center}
+ \end{minipage}
+ \hfill
+ \begin{minipage}{0.3\textwidth}
+ \begin{center}
+ \textbf{Javascript}
+
+ \includegraphics[scale=0.3]{./fig/JavaScript_logo}
+
+ Interaction
+
+ \end{center}
+ \end{minipage}
+
+\subsection*{Navigateur web}
+
+Le \textbf{navigateur web} est un logiciel qui "comprend" les langages du web pour nous afficher la page web souhaitée.
+
+Exemples de navigateur web:
+\begin{itemize}
+ \item Firefox
+ \item Chrome
+ \item Safari
+ \item Edge
+\end{itemize}
+
+\end{document}
diff --git a/SNT/01_WEB/2B_html.tex b/SNT/01_WEB/2B_html.tex
new file mode 100644
index 0000000..68052ec
--- /dev/null
+++ b/SNT/01_WEB/2B_html.tex
@@ -0,0 +1,47 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{WEB - Cours}
+\date{Septembre 2020}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Langage HTML}
+
+\begin{center}
+ HTML: HyperText Markup Language
+
+ En français: langage de balises pour l'hypertexte
+\end{center}
+
+Le html utilise des \textbf{balises} pour structurer le contenu de la page web.
+
+\subsection*{Balises}
+\begin{center}
+ \includegraphics[scale=2]{./fig/anatomie-element-html}
+\end{center}
+
+\subsubsection*{Exemples de balises}
+
+\begin{multicols}{2}
+ \begin{itemize}
+ \item \texttt{
...
}
+ \item \texttt{
...
}
+ \item \texttt{
...
}
+ \item \texttt{ ... }
+ \item \texttt{
...
}
+ \item \texttt{
...
}
+ \item \texttt{}
+ \item \texttt{ ... }
+ \end{itemize}
+\end{multicols}
+
+\afaire{Décrire l'utilisation des balises listées au-dessus.}
+
+\end{document}
diff --git a/SNT/01_WEB/3B_hebergement_url.tex b/SNT/01_WEB/3B_hebergement_url.tex
new file mode 100644
index 0000000..68052ec
--- /dev/null
+++ b/SNT/01_WEB/3B_hebergement_url.tex
@@ -0,0 +1,47 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{WEB - Cours}
+\date{Septembre 2020}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Langage HTML}
+
+\begin{center}
+ HTML: HyperText Markup Language
+
+ En français: langage de balises pour l'hypertexte
+\end{center}
+
+Le html utilise des \textbf{balises} pour structurer le contenu de la page web.
+
+\subsection*{Balises}
+\begin{center}
+ \includegraphics[scale=2]{./fig/anatomie-element-html}
+\end{center}
+
+\subsubsection*{Exemples de balises}
+
+\begin{multicols}{2}
+ \begin{itemize}
+ \item \texttt{
...
}
+ \item \texttt{
...
}
+ \item \texttt{
...
}
+ \item \texttt{ ... }
+ \item \texttt{
...
}
+ \item \texttt{
...
}
+ \item \texttt{}
+ \item \texttt{ ... }
+ \end{itemize}
+\end{multicols}
+
+\afaire{Décrire l'utilisation des balises listées au-dessus.}
+
+\end{document}
diff --git a/SNT/01_WEB/Zozor.zip b/SNT/01_WEB/Zozor.zip
new file mode 100644
index 0000000..4160644
Binary files /dev/null and b/SNT/01_WEB/Zozor.zip differ
diff --git a/SNT/01_WEB/fig/CSS3_logo.png b/SNT/01_WEB/fig/CSS3_logo.png
new file mode 100644
index 0000000..da0d94b
Binary files /dev/null and b/SNT/01_WEB/fig/CSS3_logo.png differ
diff --git a/SNT/01_WEB/fig/HTML5_logo.png b/SNT/01_WEB/fig/HTML5_logo.png
new file mode 100644
index 0000000..fe74f60
Binary files /dev/null and b/SNT/01_WEB/fig/HTML5_logo.png differ
diff --git a/SNT/01_WEB/fig/JavaScript_logo.png b/SNT/01_WEB/fig/JavaScript_logo.png
new file mode 100644
index 0000000..f7beb53
Binary files /dev/null and b/SNT/01_WEB/fig/JavaScript_logo.png differ
diff --git a/SNT/01_WEB/fig/anatomie-element-html.png b/SNT/01_WEB/fig/anatomie-element-html.png
new file mode 100644
index 0000000..291381e
Binary files /dev/null and b/SNT/01_WEB/fig/anatomie-element-html.png differ
diff --git a/SNT/01_WEB/fig/page_balise.png b/SNT/01_WEB/fig/page_balise.png
new file mode 100644
index 0000000..76c8dad
Binary files /dev/null and b/SNT/01_WEB/fig/page_balise.png differ
diff --git a/SNT/01_WEB/fig/reseau_stex_proxmox.pdf b/SNT/01_WEB/fig/reseau_stex_proxmox.pdf
new file mode 100644
index 0000000..e15f2dc
Binary files /dev/null and b/SNT/01_WEB/fig/reseau_stex_proxmox.pdf differ
diff --git a/SNT/01_WEB/fig/reseau_stex_proxmox.svg b/SNT/01_WEB/fig/reseau_stex_proxmox.svg
new file mode 100644
index 0000000..9567d02
--- /dev/null
+++ b/SNT/01_WEB/fig/reseau_stex_proxmox.svg
@@ -0,0 +1,3802 @@
+
+
+
+
diff --git a/SNT/01_WEB/fig/winscp_trans.png b/SNT/01_WEB/fig/winscp_trans.png
new file mode 100644
index 0000000..10bd864
Binary files /dev/null and b/SNT/01_WEB/fig/winscp_trans.png differ
diff --git a/SNT/01_WEB/index.rst b/SNT/01_WEB/index.rst
index 4314a82..07452f4 100644
--- a/SNT/01_WEB/index.rst
+++ b/SNT/01_WEB/index.rst
@@ -2,11 +2,106 @@ WEB
###
:date: 2022-08-21
-:modified: 2022-08-21
+:modified: 2022-08-28
:authors: Benjamin Bertrand
-:tags: WEB
+:tags: Web
:category: SNT
:summary: Découverte du HTML, du fonctionnement du web et de ses problématiques.
-Étape 1:
-========
+Le programme
+============
+
+Contenus
+- Repères historiques
+- Hypertexte
+- Langages HTML et CSS
+- URL
+- Requête HTTP
+- Modèle client/serveur
+- Moteurs de recherche: principes et usages
+- Paramètres de sécurité d’un navigateur
+
+Capacités attendues
+- Définir les étapes du développement du Web.
+- Maîtriser les renvois d’un texte à différents contenus.
+- Distinguer ce qui relève du contenu d’une page et de son style de présentation.
+- Étudier et modifier une page HTML simple.
+- Décomposer l’URL d’une page.
+- Reconnaître les pages sécurisées.
+- Décomposer le contenu d’une requête HTTP et identifier les paramètres passés.
+- Inspecter le code d’une page hébergée par un serveur et distinguer ce qui est exécuté par le client et par le serveur.
+- Mener une analyse critique des résultats fournis par un moteur de recherche.
+- Comprendre que toute requête laisse des traces.
+- Maîtriser les réglages les plus importants concernant la gestion des cookies, la sécurité et confidentialité d'un navigateur
+
+Progression
+===========
+
+Les étapes ne sont pas du tout égale en terme de répartition de temps. La première étape prend largement les 2/3 du temps alloué à la séquence.
+
+Étape 1: Le HTML
+----------------
+
+Cette étape se termine par la production évaluée d'une page web sur l'histoire du web. Il faut que les élèves aient vu cette vidéo avant la dernière séance.
+
+Brainstorming autour du web. Le but est d'essayer de mettre de l'ordre dans la tête des élèves: la différence entre web et internet, navigateur et moteur de recherche... Pour ensuite introduire les languages de "programmation" du web: HTML, CSS et javascript.
+
+Découverte du code source d'une page web et modification avec l'inspecteur -> principes du language html et les balises.
+
+Bilan sur le web:
+
+.. image:: ./1B_web.pdf
+ :height: 200px
+ :alt: Bilan sur le web
+
+Etude de la `page à balise <./page_balises.zip>`_ pour extraire les balises principales et la structure d'une page
+
+Bilan sur les balises:
+
+.. image:: ./2B_html.pdf
+ :height: 200px
+ :alt: bilan sur le html et les balises
+
+A partir de la vidéo sur l'histoire du web et de la page blanche, les élèves doivent faire une page sur l'histoire du web.
+
+Barème:
+- 4 points sur le contenu (éléments historique, structure...)
+- 4 points sur la validité du code et la bonne utilisation des balises
+- 2 points pour les éléments originaux ajoutés
+
+Étape 2: Hébergement d'une page
+-------------------------------
+
+Les élèves vont déposer leur page web sur le serveur du lycée pour la rendre accessible à tout le monde. C'est l'occasion de parler aussi d'url et un peu de http.
+
+Bilan sur l'hébergement et les urls
+
+.. image:: ./3B_hebergement_url.pdf
+ :height: 200px
+ :alt: Bilan sur l'hébergement et les urls
+
+
+Cette étape peut être commencé avant le rendu final de la page web sur l'histoire du web. De cette façon les plus rapides pourront construire une page index qui donnera accès aux pages des autres élèves.
+
+Étape 3: Les usages du web
+--------------------------
+
+Utilité du moteur de recherche
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+??? je crois que Camille a quelque chose!
+
+Les cookies
+~~~~~~~~~~~
+
+On profite du fait que les ordinateurs perdent les profiles pour jouer avec les cookies.
+
+On commence par la prise de conscience que les sites internet conservent des données. Pour cela, les élèves choisissent un thème et le note. Ensuite, ils vont sur youtube (en acceptant le bandeau des cookies), cherchent et regarde rapidement des vidéos sur le thème. Après 15min, ils ferment le navigateur et passent leur ordinateur à un autre élève qui doit retrouver le thème choisi.
+
+On se demande comment youtube fait pour se rappeler le thème -> les cookies. On explique comment accéder à l'historique et à la gestion des cookies. On les efface et on remarque que l'on ne peut plus deviner le thème.
+
+On peut ensuite surveiller les cookies déposés quand on accepte ou non la bannière.
+
+On parle ensuite RGPD.
+
+Bilan sur les cookies
diff --git a/SNT/01_WEB/page_balises.zip b/SNT/01_WEB/page_balises.zip
new file mode 100644
index 0000000..a14eaef
Binary files /dev/null and b/SNT/01_WEB/page_balises.zip differ
diff --git a/SNT/01_WEB/page_blanche.html b/SNT/01_WEB/page_blanche.html
new file mode 100644
index 0000000..00977c5
--- /dev/null
+++ b/SNT/01_WEB/page_blanche.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/SNT/index.rst b/SNT/index.rst
index cdca21a..de8edaa 100644
--- a/SNT/index.rst
+++ b/SNT/index.rst
@@ -2,8 +2,10 @@ SNT en 2nd
##########
:date: 2022-07-25
-:modified: 2022-07-25
+:modified: 2022-08-28
:authors: Bertrand Benjamin
:category: SNT
:tags: Progression
:summary: Organisation de l'année en SNT pour les 2nd
+
+Période 1: `Le web (avec un peu de réseau quand même!) <./01_WEB/>`_