HTML and cryptage

internet/cours/définitions.md

@@ -0,0 +1,28 @@
+# Définitions sur le thème : Internet
+**Internet** est l’interconnexion de nombreux réseaux de tailles et natures variées. C’est un réseau mondial de communications numériques qui sert de support à de nombreuses ressources et services comme le web, les mails ou la téléphonie.
+Tous les appareils y sont connectés grâce aux protocoles internet : IP (et TCP).
+
+**Réseau** : Ensemble de machines capables de communiquer entre elles.
+
+**3G, 4G, 5G** : Protocoles de communication sans fil ayant une grande porté. Ils sont utilisés par des appareils très mobiles (téléphones, clés 3G…).
+
+**Wifi** : Protocole de communication sans fil de faible porté (30 mètres maximum), il est utilisé pour créer des réseaux domestiques ou de plus grandes organisations.
+
+**Ethernet** : Protocole de communication filaire utilisé pour relier deux appareils entre eux. Il est utilisé sur des câbles en cuivre.
+
+**ADSL** : Protocole de communication filaire utilisé pour relier une box à son opérateur. Il est utilisé sur des câbles en cuivre.
+
+**Fibre** : Technologie de communication filaire utilisée pour relier deux appareils entre eux. Il s’agit d’un long brin de plastique ou de verre qui guide un rayon lumineux porteur d’informations.
+
+**Fournisseur d’accès à internet (FAI) ou opérateur** : Organisation capable de connecter un tiers au réseau internet.
+
+**Neutralité d’un réseau** : Principe devant garantir l’égalité de traitement de tous les flux de données. Un réseau neutre ne peut pas privilégier certaines communications au détriment d’autres.
+
+**Routeur** : Appareil servant à aiguiller les données à travers les réseaux auxquels elle est connectée. Cette action est appelée routage.
+
+**Serveur** : Appareil proposant un service numérique.
+
+**Centre de calcul, centre de données, ou datacenter** : Bâtiment servant à héberger, sécuriser et climatiser des appareils (serveurs, routeurs…).
+
+**Machine ou appareil** : Ordinateur souvent spécialisé dans une tâche.
+

internet/tp_filius_hors_programme/tpfilius2.tex

@@ -81,5 +81,7 @@ Comme il s’agit d’un réseau pair-à-pair, on peut se connecter à n’impor
 Gnutella n’est aujourd’hui plus beaucoup utilisé, mais de nombreux protocoles fonctionnes sur un principe similaire.
 Bittorrent permet l’échange de fichiers, Matrix ou retroshare permettent de communiquer, dat permet d’héberger et de visiter des sites web.
 
+\includestandalone[width=0.8\linewidth]{./figure} % without the `.tex` extension
+%\includegraphics[width=0.7\textwidth]{utility.pdf}
 
 \end{document}

photo numérique/activité_décryptage_image/sujet.tex

@@ -0,0 +1,221 @@
+\documentclass[11pt,a4paper]{../../template_cours}
+
+\title{Activité débranchée — Codage des images}
+\def\thesequence{Photographie numérique}
+\author{Adrian Amaglio}
+
+\usepackage{tabularx}
+
+
+% Format de fichier inspiré de JPEG
+% Structure d'un fichier JPEG (header)
+%    https://fr.wikipedia.org/wiki/JPEG#Syntaxe_et_structure
+%
+% Données EXIF associées à une image (footer)
+%    https://fr.wikipedia.org/wiki/Exchangeable_image_file_format#Exemple
+%    https://www.media.mit.edu/pia/Research/deepview/exif.html [En anglais]
+
+% Exemple de métadonnées EXIF :
+% Balise                                  Valeur
+% Constructeur                            HP
+% Modèle                                  R707
+% Orientation                             haut - gauche
+% Résolution X                            72,00
+% Résolution Y                            72,00
+% Unité de résolution                     Pouce
+% Logiciel                                Ver1.01
+% Date et heure                           2003:08:11 16:45:32
+% Position YCbCr                          centrée
+% Compression                             compression JPEG
+% Résolution X                            72,00
+% Résolution Y                            72,00
+% Unité de résolution                     Pouce
+% Vitesse d’obturation                    1/250 s
+% Nombre F                                f/4,0
+% ProgrammeExposition                     Programme normal
+% Version Exif                            Exif version 2.1
+% Date et heure (d’origine)               2003:08:11 16:45:32
+% Date et heure (numérisation)            2003:08:11 16:45:32
+% ConfigurationComposants                 Y Cb Cr -
+% Taux de compression bits par pixel      4.01
+% Compensation d’exposition               0.0
+% Valeur d’ouverture maximale             2.00
+% Mode de mesure de distance              Formes
+% Flash                                   Flash inactif
+% Longueur de focale                      20,1 mm
+% Annoteur                                432 bytes donnée inconnue
+% FlashPixVersion                         FlashPix version 1.0
+% Espace colorimétrique                   sRGB
+% Dimension X en pixels                   2240
+% Dimension Y en pixels                   1680
+% Source du fichier                       DSC
+% Index d’interopérabilité                R98
+% Version d’interopérabilité              (null)
+
+\begin{document}
+
+\maketitle
+
+\section{Votre mission}
+Les textes suivants sont des fichiers images, ouverts comme du texte.
+On peut donc y lire les instructions nécessaires à l’affichage de l’image, pixel par pixel.
+
+\begin{exercice}
+    Vous allez dessiner les images décrites ci dessous.
+    Puis vous devrez les assembler dans l’ordre !\\
+    Vous avez le choix entre les deux résolutions d’image suivantes :\\
+    Sur une feuille à grands carreaux coupée en 4, dessinez l’image avec un pixel par carreau.\\
+    Sur une feuille à petits carreaux coupée en 4, dessinez l’image avec un pixel pour 4 carreaux.\\
+    Vous aurez pour cela besoin des informations suivantes.
+\end{exercice}
+
+\section{Documentation technique de notre format d’image}
+Un fichier image contient plusieurs informations.
+Chacune de ces informations a un nom et une valeur :
+\\
+\begin{table}[h]
+\begin{tabularx}{\textwidth}{|l|X|X|}
+    \hline
+    Nom & Description & Valeurs possibles \\
+    \hline
+    SOI & « Start Of Image », il indique le début du fichier image & Aucune \\
+    \hline
+    SOF0 & « Start Of Frame », il indique les dimensions, le nombre de couleurs et la profondeur des couleurs & 4 valeurs : L,H,N,P = largeur, hauteur, nombre de couleurs, profondeur des couleurs\\
+    \hline
+    DHT & Define Huffman Table & Informations de compression codées en base64 \\
+    \hline
+    DRI  & Define Quantization Table & Informations de compression codées en hexadécimal \\
+    \hline
+    SOS & « Start Of Scan », indique le début de la description des pixels & Une suite de chiffres contenant les couleurs de chaque pixels \\
+    \hline
+    APP0 & Les métadonnées sont stockées ici & Les valeurs sont sous la forme « clé=valeur,clé=valeur… »\\
+    \hline
+    COM & Commentaire & On peut mettre ce que l’on veut ici \\
+    \hline
+    EOI & « End Of Image », indique la fin du fichier image & Aucune \\
+    \hline
+\end{tabularx}
+\end{table}
+
+
+
+
+
+
+\newpage
+
+
+
+
+
+% Displays an image described by text.
+% It must be read with its documentation (first page)
+\newcommand{\image}[6]{% arg1: scantext, arg2: datetime, arg3: gpslat, arg4: gpslong, arg5: rotation, arg6: commentary
+    \thispagestyle{empty} % Remove header and footer %
+    \begin{minipage}{.5\textwidth}
+    \sloppy
+    \texttt{SOI\\
+        SOF0 5,5,3,1\\
+        DHT QXUgdmVudCBxdWkgc291ZmZsZSBsYSB0ZW1\\
+        ww6p0ZSBzZSByw6ljb2x0ZW50IGxlcyBqb3Vycy\\
+        BkZSBmw6p0ZS4=\\
+        DRI c2abc2a0496c206e6520666175742070617\\
+        32076656e647265206c61207065617520646520\\
+        6ce280996f757273c2a0c2bb207e2050726f766\\
+        57262652076c3a967616e65\\
+        SOS\\
+        #1\\
+        APP0 version exif=2.1, Date et heure=#2, software=alamainV2.0, GPS latitude=#3, GPS longitude=#4, GPS altitude=1312m, rotation=#5\\
+        COM https://maps.openrouteservice.org permet d’entrer des
+    coordonnées GPS ! #6\\
+        EOI
+    }\\\textbf{}\\
+    \end{minipage}
+}
+
+
+% TODO user array https://tex.stackexchange.com/questions/37426/create-an-array-of-variables
+\newcommand{\dateone}{1773:12:16}
+\newcommand{\datetwo}{1789:07:14}
+\newcommand{\datethree}{1831:11:21}
+\newcommand{\datefour}{1871:05:21}
+\newcommand{\datefive}{1917:11:07}
+\newcommand{\datesix}{1968:05:03}
+\newcommand{\dateseven}{2018:11:17}
+\newcommand{\dateeight}{2019:12:05}
+\newcommand{\datenine}{2021:10:03}
+\newcommand{\dateten}{2033:05:12}
+
+\newcommand{\latone}{42.3518}
+\newcommand{\lattwo}{48.8532}
+\newcommand{\latthree}{45.7747}
+\newcommand{\latfour}{48.8872}
+\newcommand{\latfive}{59.9378}
+\newcommand{\latsix}{48.84878}
+\newcommand{\latseven}{48.87145}
+\newcommand{\lateight}{43.6124}
+\newcommand{\latnine}{}
+\newcommand{\latten}{}
+
+\newcommand{\longone}{-71.0416}
+\newcommand{\longtwo}{2.3692}
+\newcommand{\longthree}{4.8318}
+\newcommand{\longfour}{2.342}
+\newcommand{\longfive}{30.3099}
+\newcommand{\longsix}{2.3437}
+\newcommand{\longseven}{2.30241}
+\newcommand{\longeight}{3.8492}
+\newcommand{\longnine}{}
+\newcommand{\longten}{}
+
+% Simple color definition %
+\newcommand{\R}{100}
+\newcommand{\G}{010}
+\newcommand{\B}{001}
+\newcommand{\W}{111}
+\newcommand{\K}{000}
+
+% Pictures definitions %
+% Ces exemples sont durs à lire, les élèves reconnaissent à peine les lettres. Ça les force à utiliser les métadonnées pour les remettre dans l’ordre.
+\newcommand{\picI}{\K\B\B\B\K\W\K\G\K\W\\\K\W\G\W\K\W\K\G\K\W\\\K\R\R\R\K} % Un I
+\newcommand{\picIrot}{180°}
+\newcommand{\picL}{\B\R\G\G\G\B\K\G\G\G\\\B\R\G\G\G\B\K\G\G\G\\\B\R\K\R\G} % Un L
+\newcommand{\picLrot}{0°}
+\newcommand{\picO}{\K\B\G\R\K\K\W\W\W\K\\\W\B\G\R\W\K\W\W\W\K\\\K\B\G\R\K} % Un O
+\newcommand{\picOrot}{90°}
+\newcommand{\picV}{\B\G\B\G\B\R\G\R\G\R\\\K\G\K\G\K\R\G\R\G\R\\\B\B\G\B\B} % Un V
+\newcommand{\picVrot}{0°}
+\newcommand{\picE}{\K\K\K\K\K\W\W\W\W\W\\\W\R\W\R\W\W\R\R\R\W\\\R\R\B\R\R} % Un E
+\newcommand{\picErot}{90°}
+\newcommand{\picSecond}{\W\W\W\B\W\B\K\W\K\B\\\W\W\W\B\K\W\K\B\K\B\\\W\W\W\B\K} % Un 2
+\newcommand{\picSecondrot}{0°}
+\newcommand{\picHeart}{\K\R\K\R\K\R\G\R\G\R\\\R\G\W\G\R\K\R\G\R\K\\\K\K\R\K\K} % Un cœur
+\newcommand{\picHeartrot}{0°}
+\newcommand{\picExclamation}{\R\K\G\B\W\R\K\G\B\W\\\R\K\G\B\W\R\R\G\W\W\\\R\K\G\B\W} % Deux points d’exclamation
+\newcommand{\picExclamationrot}{0°}
+\newcommand{\picFirst}{\K\B\B\B\R\K\K\B\R\R\\\W\W\B\W\W\R\R\B\B\K\\\R\R\B\K\K} % Un 1
+\newcommand{\picFirstrot}{180°}
+\newcommand{\picSixth}{\G\B\B\B\G\W\B\W\W\W\\\G\B\B\B\G\W\B\W\B\W\\\G\B\B\B\G} % Un 6
+\newcommand{\picSixthrot}{0°}
+\newcommand{\picFiveteen}{\G\R\G\G\G\G\R\G\W\G\\\G\G\G\W\G\R\R\R\W\W\\\B\B\B\B\B} % Un 15
+\newcommand{\picFiveteenrot}{-90°}
+\newcommand{\picSeventeen}{\K\G\K\K\K\K\W\G\W\K\\\K\G\G\G\K\K\W\G\W\K\\\K\G\G\G\K} % Un 17
+\newcommand{\picSeventeenrot}{0°}
+\newcommand{\picEighteen}{\R\R\R\R\R\K\W\K\W\K\\\G\G\G\G\G\G\B\G\B\G\\\G\G\G\G\G} % Un 18
+\newcommand{\picEighteenrot}{90°}
+
+% Les rotations sont en sens horaire
+\image{\picI}{\dateone}{\latone}{\longone}{\picIrot}{i}
+\image{\picL}{\datetwo}{\lattwo}{\longtwo}{\picLrot}{l}
+\image{\picO}{\datethree}{\latthree}{\longthree}{\picOrot}{0}
+\image{\picV}{\datefour}{\latfour}{\longfour}{\picVrot}{\^}
+\image{\picE}{\datefive}{\latfive}{\longfive}{\picErot}{3}
+\image{\picSecond}{\datesix}{\latsix}{\longsix}{\picSecondrot}{sec}
+\image{\picFirst}{\dateseven}{\latseven}{\longseven}{\picFirstrot}{first}
+\image{\picSixth}{\dateseven}{\latseven}{\longseven}{\picSixthrot}{sixth}
+\image{\picFiveteen}{\dateseven}{\latseven}{\longseven}{\picFiveteenrot}{fifteenth}
+\image{\picSeventeen}{\dateseven}{\latseven}{\longseven}{\picSeventeenrot}{seventeenth}
+\image{\picEighteen}{\dateseven}{\latseven}{\longseven}{\picEighteenrot}{eighteenth}
+\image{\picHeart}{\dateeight}{\lateight}{\longeight}{\picHeartrot}{k}
+\image{\picExclamation}{\datenine}{\latnine}{\longnine}{\picExclamationrot}{punct}
+\end{document}

python/tp_intro/tpintro.py

@@ -1,2 +0,0 @@
-from turtle import *
-

python/tp_intro/tpintro.tex

@@ -1,154 +0,0 @@
-\documentclass[11pt,a4paper]{../../template_cours}
-
-\usepackage{minted}
-
-\title{Introduction à Python — Dessiner avec la tortue}
-\author{Adrian Amaglio}
-\def\thesequence{Programmation}
-
-\begin{document}
-Durée : 1h
-
-% ---
-\section{La tortue de Python}
-Pour pouvoir utiliser la tortue de Python, nous allons écrire la ligne suivante tout en haut de notre fichier python :
-\begin{minted}{python}
-from turtle import *
-\end{minted}
-
-%Pour que la fenêtre de dessin ne se ferme pas juste après la fin du tracé, ajoutez cette ligne \textbf{à la fin du programme} :
-%\begin{minted}{python}
-%exitonclick()
-%\end{minted}
-
-% Des élèves recopient tout sans réfléchir, je laisse ça là pour détecter ceux qui ne lisent pas le sujet.
-Le but de l’activité sera de diriger le curseur (A.K.A. la tortue) pour tracer les formes demandées.
-\\\textbf{À titre indicatif,} voici les instructions que nous utiliserons :
-
-Pour aller tout droit de 20 pixels :
-\begin{minted}{python}
-forward(20)
-\end{minted}
-
-Pour tourner sur la gauche de 45° :
-\begin{minted}{python}
-left(45)
-\end{minted}
-
-Pour tourner sur la droite de 45° :
-\begin{minted}{python}
-right(45)
-\end{minted}
-
-
-\section{Triangles, carrés et plus si affinités}
-
-Voici un programme Python qui trace un triangle équilatéral de côté 50px
-\begin{example}
-    \begin{minted}{python}
-forward(50)
-left(120)
-forward(50)
-left(120)
-forward(50)
-    \end{minted}
-\end{example}
-
-\begin{exercice}
-    Copiez collez ce programme dans votre éditeur python et exécutez le pour vérifier qu’il trace bien un triangle.\\
-    N’oubliez pas la première ligne (import) qui doit être en haut de chaque programme.
-\end{exercice}
-
-\begin{exercice}
-    Modifiez ce programme Python pour qu’il dessine un carré (polygone régulier à 4 côtés).
-\end{exercice}
-
-\begin{exercice}
-    Une fois que vous arrivez à tracer un carré à l’écran, adaptez le programme pour dessiner un octogone (polygone régulier à 8 côtés).
-\end{exercice}
-
-\section{Des variables}
-Il commence à être fatigant de recopier toujours les mêmes chiffres.\\
-Nous allons utiliser deux variables qui nous permettent de stocker une valeur en mémoire pour la réutiliser plus tard.\\
-Ici, la variable $angle$ contiendra l’angle en degrés entre chaque côtés du polygone et la variable $longueur\_cote$ contiendra la longueur d’un côté en pixels.
-\begin{example}
-    Ce programme python trace un triangle équilatéral de côté 50px
-    \begin{minted}{python}
-# Dans un premier temps, on fixe les valeurs de nos variables
-angle = 120
-longueur_cote = 50
-# Dans un second temps, on les utilise pour notre programme
-forward(longueur_cote)
-left(angle)
-forward(longueur_cote)
-left(angle)
-forward(longueur_cote)
-    \end{minted}
-    Il est strictement équivalent au programe de l’exemple 1.
-    Mais il est maintenant possible de changer tous les angles d’un coup en modifiant la valeur de la variable $angle$ à la ligne 2 !\\
-\end{example}
-
-\begin{exercice}
-    À l’aide des deux variables de l’exemple précédent, tracez un polygone régulier à 16 côtés.
-    \\\textbf{Faites vérifier le programme par le professeur}\\
-\end{exercice}
-
-\section{Des boucles}
-\begin{example}
-    Une boucle sert à répéter une instruction un nombre précis de fois.
-    Par exemple, la boucle suivante sert à répéter l’action « avancer de 10 pixels » 180 fois :
-    \begin{minted}{python}
-for compteur in range(180):
-    forward(10)
-    \end{minted}
-    \textbf{Pour qu’une action soit répétée, il faut qu’elle soit sous la ligne « for » et qu’elle soit précédée de 4 espaces.}
-\end{example}
-\begin{exercice}
-    Tracez maintenant un polygone régulier à 180 côtés.
-    Vous vous aiderez d’une boucle.
-\end{exercice}
-
-
-\section{Polygones en folie}
-Nous allons ajouter une dernière variable à notre programme python. Elle se nome $nombre_cotes$ et représente le nombre de côtés du polygone que l’on veut tracer.
-\begin{exercice}
-    Écrivez un programme python qui est capable de tracer n’importe quel polygone ayant un nombre de côtés définis par la variable $nombre\_cotes$.
-    \\
-    \textbf{Faites vérifier le programme par le professeur}\\
-    Le programme commencera par ces lignes :
-    \begin{minted}{python}
-nombre_cotes = 6
-longueur_cote = 20
-    \end{minted}
-\end{exercice}
-
-% Le damier est assez dur à faire sans fonctions, il a occupé tous les élèves rapides que j’ai eu.
-\section{Damier (Bonus)}
-On peut colorier nos polygones à l’aide des fonctions « begin\_fill » et « end\_fill ».
-Voici l’exemple d’un triangle que l’on remplit :
-\begin{minted}{python}
-begin_fill()
-forward(50)
-left(120)
-forward(50)
-left(120)
-forward(50)
-end_fill()
-\end{minted}
-
-\begin{exercice}
-    Écrivez un programme qui trace un damier de 6 cases par 6 cases.
-    Les couleurs des cases doivent alterner blanc et noir.
-    \\\textbf{Faites vérifier le programme par le professeur}
-    \\Indices :
-    \begin{itemize}
-        \item La première ligne du damier peut être vue comme la répétition d’un couple « case blanche + case noire ».
-        \item La seconde ligne du damier est la répétition d’un couple « Case noire + case blanche ».
-        \item On peut faire dans un premier temps une boucle qui dessine la première ligne.
-        \item On peut ensuite écrire les instructions permettant de se placer pour pouvoir dessiner la seconde ligne.
-        \item Dans un troisième temps on peut faire la boucle qui dessine la seconde ligne.
-        \item Finalement, on peut répéter les opérations précédentes 3 fois pour tracer tout le damier.
-    \end{itemize}
-\end{exercice}
-
-\end{document}

python/tp_variables/sujet.tex

@@ -6,6 +6,9 @@
 \author{Adrian Amaglio}
 \def\thesequence{Programmation}
 
+\newcommand{\copyablespace}{\BeginAccSupp{method=hex,unicode,ActualText=00A0}\ \EndAccSupp{}}
+\newcommand{\tab}{\copyablespace\copyablespace\copyablespace\copyablespace}
+
 \begin{document}
 Durée : 1h
 

web/tp_fake_news/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Un bel exemple !</title>
+        <link rel="stylesheet" href="./style.css" />
+    </head>
+    <body>
+        <h1>Voici un exemple de site internet</h1>
+        <p>Il est possible d'ecrire du texte sur un site internet !</p>
+    </body>
+</html>

web/tp_fake_news/style.css

@@ -0,0 +1,7 @@
+p {
+    color:blue;
+}
+
+h1 {
+    font-family: Arial, Helvetica, sans-serif;
+}

web/tp_fake_news/sujet.tex

@@ -0,0 +1,110 @@
+\documentclass[11pt,a4paper]{../../template_cours}
+\usepackage{listings}
+
+\usepackage{minted}
+
+\title{Créer et modifier une page web}
+\author{Adrian Amaglio}
+\def\thesequence{Web}
+
+\begin{document}
+Durée : 1h
+
+% ---
+\section{HTML — Structure et contenu}
+Le HTML est le langage de balisage utilisé pour structuré une page web.\\
+Une balise est de la forme :\\
+\begin{minted}{HTML}
+    <p>Je suis un texte quelconque</p>
+\end{minted}
+Remarquez que le texte débute par une balise « ouvrante » \textbf{<p>} et se termine par une balise « fermante » \textbf{</p>}.
+Le \textbf{/} est donc important à la fin car il indique la fin du paragraphe.
+
+Ici, on utilise la balise \textbf{p}.
+Elle signifie que son contenu est un paragraphe de texte.
+Pour en faire un titre principal, on aurait utilisé la balise \textbf{h1}.
+
+\begin{exercice}
+    Dans un dossier que vous pourrez retrouver plus tard dans l’année, créez un dossier et nomez le « web1 ».
+\end{exercice}
+
+\begin{exercice}
+    Ouvrez un éditeur de texte comme « notepad++ ».
+    Créez un nouveau fichier texte (menu \textbf{File > new} ou raccourci \textbf{CTRL+n}) et enregistrez le dans le dossier créé à l’exercice précédent (menu \textbf{File > save As}) sous le nom « index.html ».
+
+    Votre fichier devra avoir le contenu suivant. Il s’agit de la base de toutes les pages web.
+    \lstinputlisting[language=HTML]{index.html}
+\end{exercice}
+
+\begin{exercice}
+    Ouvrez le fichier « index.html » avec un navigateur.
+    \\
+    Remarquez que seul le texte entre deux balises est visible, les balises ne s’affichent pas !
+    C’est parce que le HTML est interprété par le navigateur, plutôt que d’afficher la balise h1 il va garder l’information que le texte qu’elle contient est un titre.
+\end{exercice}
+
+\begin{exercice}
+    Ajoutez dans le fichier « index.html », juste après le dernier paragraphe, un titre \textbf{h2} avec le contenu de votre choix.
+\end{exercice}
+
+\begin{exercice}
+    Ajoutez dans le fichier « index.html », juste après le dernier paragraphe, un paragraphe \textbf{p} avec le contenu de votre choix.
+\end{exercice}
+
+% ---
+\section{CSS — La mise en forme}
+
+\begin{exercice}
+    Dans le même dossier que votre fichier « index.html » créez un fichier « style.css » avec le contenu suivant :
+    \lstinputlisting[language=HTML]{style.css}
+    Enregistrez le puis actualiser la page index.html dans votre navigateur, le texte des paragraphes doit maintenant être écrit en bleu.
+\end{exercice}
+
+Les fichiers CSS sont structuré comme une suite de blocs suivants :
+\begin{minted}{HTML}
+<sélecteur> {
+    <directive>:<valeur>;
+}
+\end{minted}
+\begin{description}
+    \item[<sélecteur>] doit être remplacé par un nom de balise, il permet de choisir où appliquer le style entre accolades.
+    \item[<directive>] doit être remplacé par une directive CSS, c’est à dire une caractéristique à modifier (couleur, marges, police…).
+    \item[<valeur>] doit être remplacé par une valeur à donner à la directive précédente (rouge, 200px, Arial…).
+\end{description}
+
+\begin{exercice}
+    La règle CSS suivante permet de souligner du texte : « text-decoration: underline; ».\\
+    Appliquez cette règle à tous les titres h1.
+\end{exercice}
+
+% ---
+\section{Une fausse nouvelle faite maison}
+\begin{exercice}
+    Ouvrez un nouvel onglet dans votre navigateur et rendez vous sur le site d’information de votre choix (nextimpact, la quadrature du net…).
+\end{exercice}
+
+\begin{exercice}
+    Sur un titre, effectuez un clique droit et dans le menu qui s’ouvre choisissez l’option « examiner l’élément ».
+    \\
+    La fenêtre qui s’ouvre ensuite s’appelle la « Console de développement » car elle est utilisé par les créateurs et créatrices de sites web (développeurs et développeuses).
+    \\
+    Le code HTML de la page web devrait s’afficher et le titre sur lequel vous avez cliqué devrait être en surbrillance comme sur la capture suivante :
+    \begin{center}
+        \includegraphics[width=.8\textwidth]{console.png}
+    \end{center}
+    Modifiez maintenant le contenu de la balise titre pour y afficher le texte de votre choix.
+\end{exercice}
+
+\begin{exercice}
+    Effectuez une capture d’écran de votre fausse nouvelle, enregistrez la et envoyez la à un ou une amie.
+\end{exercice}
+
+% ---
+\section{Un site internet plus avancé}
+\begin{exercice}
+    Rendez vous sur le site internet suivant et suivez le tutoriel.
+    L’objectif est d’ajouter un menu à votre page web.
+    https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
+\end{exercice}
+
+\end{document}