From 44902cf91c30622ea422de6790900b667b956ee0 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Tue, 26 Jul 2022 18:33:21 +0200
Subject: [PATCH] Feat: ajoute les bases pour produire chapitre HTML CSS

---
 1NSI/01_Web_HTML_CSS/exercises.tex       |  7 +++
 1NSI/01_Web_HTML_CSS/index.rst           | 57 ++++++++++++++++++++++++
 1NSI/01_Web_HTML_CSS/plan_de_travail.tex | 44 ++++++++++++++++++
 1NSI/01_Web_HTML_CSS/solutions.tex       | 28 ++++++++++++
 4 files changed, 136 insertions(+)
 create mode 100644 1NSI/01_Web_HTML_CSS/exercises.tex
 create mode 100644 1NSI/01_Web_HTML_CSS/index.rst
 create mode 100644 1NSI/01_Web_HTML_CSS/plan_de_travail.tex
 create mode 100644 1NSI/01_Web_HTML_CSS/solutions.tex

diff --git a/1NSI/01_Web_HTML_CSS/exercises.tex b/1NSI/01_Web_HTML_CSS/exercises.tex
new file mode 100644
index 0000000..72cc815
--- /dev/null
+++ b/1NSI/01_Web_HTML_CSS/exercises.tex
@@ -0,0 +1,7 @@
+\begin{exercise}[subtitle={<++>}, step={1}, origin={<++>}, topics={ Web HTML CSS }, tags={ Web }]
+    <++>
+\end{exercise}
+
+\begin{solution}
+    <++>
+\end{solution}
diff --git a/1NSI/01_Web_HTML_CSS/index.rst b/1NSI/01_Web_HTML_CSS/index.rst
new file mode 100644
index 0000000..487dc6a
--- /dev/null
+++ b/1NSI/01_Web_HTML_CSS/index.rst
@@ -0,0 +1,57 @@
+Web HTML CSS
+############
+
+:date: juillet 2022
+:modified: juillet 2022
+:authors: Benjamin Bertrand
+:tags: Web
+:category: 1NSI
+:summary: Prise en main des technologies web. Découverte du HTML et du CSS.
+
+Étape 1: HTML
+=============
+
+- Prise en main des outils de programmation.
+- Analyse d'une page exemple pour extraire les balises
+- Reproduction d'exemples à partir d'une page blanche
+- Vérification de la validité du code avec W3C
+- Rendre une page valide
+
+Bilan:
+
+- Le web, son origine, la principe de client serveur et le partage des responsabilités dans les techno web (HTML, CSS, JS)
+- HTML: notion de balise (avec attributs), page blanche de base et zoologie des balises
+
+Balises à travailler:
+
+- Header
+- paragraphes
+- Listes
+- Liens
+- Images
+- Tableaux (?)
+
+Étape 2: CSS
+============
+
+- Integration de règles CSS dans la page exemple
+- Application de règles CSS sur les balises (voir codingame pour cela)
+- Sélecteurs balise/identifiant/class (`jeu autour de la sélection <https://flukeout.github.io/>`_)
+
+Bilan:
+
+- Différentes façon d'appliquer des règles CSS
+- Sélecteur
+- Quelques propriétés
+
+Étape 3: hébergement, URL, protocole http(s)
+============================================
+
+- Depot d'une page sur le serveur
+- Accès à la page depuis le navigateur
+- Reconnaître les parties d'une URL
+
+Bilan:
+
+- Depot sur serveur
+- URL et chemin de fichier
diff --git a/1NSI/01_Web_HTML_CSS/plan_de_travail.tex b/1NSI/01_Web_HTML_CSS/plan_de_travail.tex
new file mode 100644
index 0000000..df2aa90
--- /dev/null
+++ b/1NSI/01_Web_HTML_CSS/plan_de_travail.tex
@@ -0,0 +1,44 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+
+\author{Benjamin Bertrand}
+\title{Web HTML CSS - Plan de travail}
+\tribe{1NSI}
+\date{juillet 2022}
+
+\pagestyle{empty}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+}
+
+
+\begin{document}
+\maketitle
+
+% Résumé
+
+\bigskip
+
+Savoir-faire de la séquence
+\begin{itemize}
+    \item
+\end{itemize}
+
+\bigskip
+
+Ordre des étapes à respecter
+
+
+\section{}
+
+\listsectionexercises
+
+
+\pagebreak
+
+\input{exercises.tex}
+\printcollection{banque}
+
+
+\end{document}
diff --git a/1NSI/01_Web_HTML_CSS/solutions.tex b/1NSI/01_Web_HTML_CSS/solutions.tex
new file mode 100644
index 0000000..1fcaa4c
--- /dev/null
+++ b/1NSI/01_Web_HTML_CSS/solutions.tex
@@ -0,0 +1,28 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+
+\usetikzlibrary{shapes.geometric}
+
+\author{Benjamin Bertrand}
+\title{Web HTML CSS - Solutions}
+\tribe{1NSI}
+\date{juillet 2022}
+
+\DeclareExerciseCollection{banque}
+\xsimsetup{
+    exercise/print=false,
+    solution/print=true,
+}
+
+\pagestyle{empty}
+
+
+\begin{document}
+
+\maketitle
+
+\input{exercises.tex}
+%\printcollection{banque}
+%\printsolutions{exercises}
+
+\end{document}