diff --git a/R1.02/README.md b/R1.02/README.md
index fc2a9b4..0c6278c 100644
--- a/R1.02/README.md
+++ b/R1.02/README.md
@@ -19,6 +19,7 @@ de site statique sur un serveur et l'ergonomie d'interface.
| Semaine | Cours | TP |
| -------------------- | ------------------------------------------------ | ----------------------- |
| 1 : 11/11 - 15/11 | [HTML](./cours/html.pdf) | |
+| 2 : 18/11 - 22/11 | [CSS](./cours/css.pdf) | [tp1 html](./tp/tp1)|
## Serveur http(s) de l'iut
diff --git a/R1.02/tp/tp1/README.md b/R1.02/tp/tp1/README.md
new file mode 100644
index 0000000..86687f7
--- /dev/null
+++ b/R1.02/tp/tp1/README.md
@@ -0,0 +1,256 @@
+# TP HTML
+
+
+> Vous validerez *toutes* vos pages avec le service de [validation](http://validator.w3.org/) du W3C.
+
+> Vous pouvez utiliser [des aides](https://websitesetup.org/wp-content/uploads/2019/10/WSU-HTML-Cheat-Sheet.pdf) pour trouver les balises HTML.
+> La [référence](https://developer.mozilla.org/fr/docs/Web/HTML/Element) des éléments HTML (Mozilla Developer Network).
+
+> Une [aide](./aide.md) pour le tp.
+## Correction de la syntaxe, et validation
+### Exercice 0
+Corrigez le code HTML suivant en utilisant le validateur du W3C :
+```html
+
+
+
+
+
+
My first HTML5 document
+
+
HTML5 est vraiment super !
+
+ Vous trouverez les images sur http://upload.wikimedia.org
+
+>Utilisez avantageusement les possiblités de formatages de votre éditeur de texte, ou
+> la commande `sed` pour transformer le csv en html ou encore ce [programme](./src/csv2html.c) C.
+
+
+## Images
+### Exercice 5
+Voici une image représentant les couches utilisées dans le développement WEB.
+
+
+
+
+Par CaptainT7 — Travail personnel, CC BY-SA 4.0, lien.
+
+
+
+Ecrire une page html qui affiche cette image. Les zones HTML, CSS et JS sont cliquables, et doivent ouvrir un
+nouvel onglet vers :
+- HTML : https://developer.mozilla.org/docs/Web/HTML
+- CSS : https://developer.mozilla.org/docs/Web/CSS
+- JS : https://developer.mozilla.org/docs/Web/JavaScript
+
+> - L'attribut `usemap` d'une image permet de préciser une carte (map) décrivant des zones d'une image cliquable.
+> - La balise `map` permet de décrire des zones (sous forme de rectangles, circles, polygones) cliquables d'une image . Un exemple
+> ```html
+> usemap="#planetmap">
+>
+> ```
+> - Vous pouvez facilement (graphiquement) générer une map avec Gimp (filtre->Web->Image cliquable)
+
+## Bonus
+### Exercice 6
+Ecrire un script shell qui permet de formater le contenu d'un repertoire en html, sous forme d'une table indiquant pour chaque entrée, le nom, les droits, la taille et la date de dernier accès correspondants. La commande
+
+```bash
+./dir2html.sh dir dir.html
+```
+produira le fichier `dir.html` contenant les entrées du répertoire `dir`, avec le rendu suivant :
+
+
+
+>**Aides**
+>- Comment faire pour écrire dans un fichier depuis un script bash ?
+>- Pour récupèrer la liste des entrées en bash :
+> ```bash
+> l=$(ls dir)
+> ```
+>- Pour itérer les éléments d'une liste en bash :
+> ```bash
+> for i in $l;
+> do
+> ...
+> done
+> ```
+>- Pour obtenir et formater les informations sur chaque entrée, vous pouvez utiliser la commande `stat`, en adaptant
+> sa sortie à vos besoins.
+>- Les icones de fichier  et de répertoire  se trouvent dans le répertoire [img](./img).
+>
+
diff --git a/R1.02/tp/tp1/aide.md b/R1.02/tp/tp1/aide.md
new file mode 100644
index 0000000..df16a25
--- /dev/null
+++ b/R1.02/tp/tp1/aide.md
@@ -0,0 +1,124 @@
+## Aides
+
+Vous trouverez quelques exemples d'utilisations de balises HTML.
+
+### Structure d'un fichier HTML
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
Bonjour
+
+
+```
+
+### Les listes
+[Plus de détails sur les listes](https://www.w3schools.com/html/html_lists.asp)
+###### Liste à puces
+```html
+
+
Coffee
+
Tea
+
Milk
+
+```
+
+ Exemple
+
+
Coffee
+
Tea
+
Milk
+
+
+
+###### Liste ordonnée
+```html
+
+
Coffee
+
Tea
+
Milk
+
+```
+
+Exemple
+
+
Coffee
+
Tea
+
Milk
+
+
+
+### Les tables
+[Plus de détails sur les tables](https://www.w3schools.com/html/html_tables.asp)
+```html
+
+
+
Firstname
+
Lastname
+
Age
+
+
+
Jill
+
Smith
+
50
+
+
+
Eve
+
Jackson
+
94
+
+
+```
+
+ Exemple
+
+
+
Firstname
+
Lastname
+
Age
+
+
+
Jill
+
Smith
+
50
+
+
+
Eve
+
Jackson
+
94
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/R1.02/tp/tp1/img/file.png b/R1.02/tp/tp1/img/file.png
new file mode 100644
index 0000000..a0d8a66
Binary files /dev/null and b/R1.02/tp/tp1/img/file.png differ
diff --git a/R1.02/tp/tp1/img/file1.png b/R1.02/tp/tp1/img/file1.png
new file mode 100644
index 0000000..5ae2705
Binary files /dev/null and b/R1.02/tp/tp1/img/file1.png differ
diff --git a/R1.02/tp/tp1/img/folder.png b/R1.02/tp/tp1/img/folder.png
new file mode 100644
index 0000000..ae41d4e
Binary files /dev/null and b/R1.02/tp/tp1/img/folder.png differ
diff --git a/R1.02/tp/tp1/img/gallerie.png b/R1.02/tp/tp1/img/gallerie.png
new file mode 100644
index 0000000..cc0becd
Binary files /dev/null and b/R1.02/tp/tp1/img/gallerie.png differ
diff --git a/R1.02/tp/tp1/img/html_css_js.png b/R1.02/tp/tp1/img/html_css_js.png
new file mode 100644
index 0000000..f3c78e1
Binary files /dev/null and b/R1.02/tp/tp1/img/html_css_js.png differ
diff --git a/R1.02/tp/tp1/img/iut.png b/R1.02/tp/tp1/img/iut.png
new file mode 100644
index 0000000..a8bc846
Binary files /dev/null and b/R1.02/tp/tp1/img/iut.png differ
diff --git a/R1.02/tp/tp1/img/planetes.png b/R1.02/tp/tp1/img/planetes.png
new file mode 100644
index 0000000..d7aa45b
Binary files /dev/null and b/R1.02/tp/tp1/img/planetes.png differ
diff --git a/R1.02/tp/tp1/img/rep.png b/R1.02/tp/tp1/img/rep.png
new file mode 100644
index 0000000..9f7763d
Binary files /dev/null and b/R1.02/tp/tp1/img/rep.png differ
diff --git a/R1.02/tp/tp1/img/tab.png b/R1.02/tp/tp1/img/tab.png
new file mode 100644
index 0000000..59bf6bf
Binary files /dev/null and b/R1.02/tp/tp1/img/tab.png differ
diff --git a/R1.02/tp/tp1/src/csv2html.c b/R1.02/tp/tp1/src/csv2html.c
new file mode 100644
index 0000000..3824421
--- /dev/null
+++ b/R1.02/tp/tp1/src/csv2html.c
@@ -0,0 +1,25 @@
+#include
+
+/* csv2html < file.csv > file.html */
+
+int main(int argc, char *argv[])
+{
+ int s;
+
+ printf("
\n
");
+
+ while ((s = getchar()) != EOF) {
+ switch(s) {
+ case '\n': printf("
\n
"); break;
+ case ';': printf("
"); break;
+ case '<': printf("<"); break;
+ case '>': printf(">"); break;
+ case '&': printf("&"); break;
+ default: putchar(s);
+ }
+ }
+
+ puts("
+
usemap="#planetmap">
+>
+> ```
+> - Vous pouvez facilement (graphiquement) générer une map avec Gimp (filtre->Web->Image cliquable)
+
+## Bonus
+### Exercice 6
+Ecrire un script shell qui permet de formater le contenu d'un repertoire en html, sous forme d'une table indiquant pour chaque entrée, le nom, les droits, la taille et la date de dernier accès correspondants. La commande
+
+```bash
+./dir2html.sh dir dir.html
+```
+produira le fichier `dir.html` contenant les entrées du répertoire `dir`, avec le rendu suivant :
+
+
+
+>**Aides**
+>- Comment faire pour écrire dans un fichier depuis un script bash ?
+>- Pour récupèrer la liste des entrées en bash :
+> ```bash
+> l=$(ls dir)
+> ```
+>- Pour itérer les éléments d'une liste en bash :
+> ```bash
+> for i in $l;
+> do
+> ...
+> done
+> ```
+>- Pour obtenir et formater les informations sur chaque entrée, vous pouvez utiliser la commande `stat`, en adaptant
+> sa sortie à vos besoins.
+>- Les icones de fichier  et de répertoire  se trouvent dans le répertoire [img](./img).
+>
+
diff --git a/R1.02/tp/tp1/aide.md b/R1.02/tp/tp1/aide.md
new file mode 100644
index 0000000..df16a25
--- /dev/null
+++ b/R1.02/tp/tp1/aide.md
@@ -0,0 +1,124 @@
+## Aides
+
+Vous trouverez quelques exemples d'utilisations de balises HTML.
+
+### Structure d'un fichier HTML
+```html
+
+
+
+
+
+
+
+