diff --git a/R1.02/tp/tp2/README.md b/R1.02/tp/tp2/README.md
new file mode 100644
index 0000000..63d346f
--- /dev/null
+++ b/R1.02/tp/tp2/README.md
@@ -0,0 +1,130 @@
+> Vous trouverez une correction du tp1 [ici](../tp1/correction).
+
+# TP HTML/CSS 
+
+- partie 1 : [html](#liens)
+- partie 2 : [css](#texte)
+
+
+
+## Liens
+
+### Exercice 1
+
+Dans   le  fichier   [cartoon_laws.html](./src/cartoon_laws.html),  ajoutez   un
+sommaire composé  de liens vers  chaque élément h2 sous  la forme d'une  liste à
+puces. Puis ajoutez un lien au niveau  de chaque titre de niveau 2 permettant de
+revenir en haut de la page.
+
+
+## Formulaire
+
+> Un formulaire est déclaré à l'aide de la balise `<form>`.
+>
+>  ```html
+>    <form method="post" action="script" enctype="encodage">
+>
+>    </form>
+>  ```
+>   1. l'attribut `method` précise le "mode d'envoi" des données : get ou post.
+>   2. l'attribut `action` précise l'url destinatrice des données.
+>   3. l'attribut `enctype` précise la façon d'encoder les données. Par défaut, `application/x-www-form-urlencoded`. Les autres valeurs possibles sont `multipart/form-data` et `text/plain`.
+>
+> - Les différents zones d'entrées (input) [ici](http://www.w3schools.com/html/html_form_input_types.asp).<br>
+> - Utilisez l'attribut `name` pour donner un nom aux "variables" du formulaire transmises au serveur.<br>
+> - Utilisez les **types html5** dédiés.<br>
+> - Regardez aussi les attributs <b>placeholder</b>, <b>pattern</b>, et les balises `fieldset` et `label`.<br>
+
+
+### Exercice 2
+
+Écrivez une page contenant un formulaire qui demande diverses informations à l'aide de contrôles variés :
+
+
+| Champ | Type |
+| --- | --- |
+| Nom | type text |
+| Prénom | type text |
+| Date de naissance | type date |
+| Email | type email |
+| Code postal | type number |
+| Téléphone portable | type tel |
+| Sexe | boutons radio |
+| Semestre | liste déroulante S1, S2, S3, S4. |
+| Niveau en html | type range, entre 0 et 10 avec un pas de 1 |
+| Message | zone de texte |
+
+
+Tous les champs sont requis !<br>
+Le formulaire contiendra un bouton reset, et submit.<br>
+
+La formulaire sera soumis  par  la méthode `POST` au script générique
+
+```url
+https://dwarves.iut-fbleau.fr/requete.php
+```
+
+### Exercice 3
+
+Rajoutez (sans utiliser Javascript), les contrôles suivants au formulaire précédent :
+- Tous les champs sont obligatoires.
+- Le nom et le prénom ne contiennent que des lettres, majuscules ou minuscules.
+- L'adresse de courriel doit être valide.
+- Le semestre S2 est sélectionné par défaut.
+- Le code postal a 5 chiffres au maximum.
+- Le niveau en html par défaut est 5.
+- Le numéro de portable est un numéro français valide (10 chiffres commençant par 06 ou 07). 
+
+> L'attribut [pattern](https://www.w3schools.com/tags/att_input_pattern.asp)
+> de l'élément `input` permet de donner une [expression rationnelle](https://fr.wikipedia.org/wiki/Expression_r%C3%A9guli%C3%A8re) que
+> doit vérifier la valeur du champ texte. Le site [http://www.html5pattern.com](https://www.html5pattern.com/)  regorge d'exemples utiles.
+
+## Texte
+### Exercice 4
+
+On reprend l'exercice 2 du [tp1](../tp1) dont voici une [correction](../tp1/correction/exercice2.html). Appliquez au fichier la feuille de style suivante :
+
+```
+body {
+	font-family:sans-serif;
+}
+
+h1 {
+	font-variant:small-caps;
+	text-decoration : underline;
+}
+
+h2 {
+	background-color:#aaaaaa;
+	padding : 10px;
+	font-style:italic;
+}
+
+span {
+	font-family: monospace;
+	font-weight:bold;
+	color : #aa4512;
+}
+```
+
+Expliquez les changements.
+
+## Tableaux 
+
+
+### Exercice 5
+> Vous aurez sans doute besoin d'utiliser les propriétés  `border`, `border-collapse`, `width`, `height`.
+
+On reprend l'exercice 4 du [tp1](../tp1), dont voici une [correction](../tp1/correction/exercice4.html). Ajoutez une feuille de style pour obtenir
+le rendu conforme à cela :
+
+![systeme_solaire](./img/systeme_solaire.png ':-:')
+
+### Exercice 6
+> Vous aurez sans doute besoin d'utiliser les attributs `colspan` et `rowspan`.
+
+
+À l'aide d'un tableau, reproduire la figure suivante :
+
+
+![tableau](./img/table.png ':-:')
diff --git a/R1.02/tp/tp2/img/systeme_solaire.png b/R1.02/tp/tp2/img/systeme_solaire.png
new file mode 100644
index 0000000..7fe76ae
Binary files /dev/null and b/R1.02/tp/tp2/img/systeme_solaire.png differ
diff --git a/R1.02/tp/tp2/img/table.png b/R1.02/tp/tp2/img/table.png
new file mode 100644
index 0000000..2a64dfe
Binary files /dev/null and b/R1.02/tp/tp2/img/table.png differ
diff --git a/R1.02/tp/tp2/src/cartoon_laws.html b/R1.02/tp/tp2/src/cartoon_laws.html
new file mode 100644
index 0000000..e4d0d78
--- /dev/null
+++ b/R1.02/tp/tp2/src/cartoon_laws.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Laws of Cartoon Physics</title>
+		<style>
+		body {
+			width : 960px;
+			margin:auto;
+		}
+		</style>
+	</head>
+	<body>
+		<h1>
+			<cite>Laws of Cartoon Physics</cite>
+			by Mark O'Donnell
+		</h1>
+
+		<h2>Cartoon Law I</h2>
+		<p>
+			Any body suspended in space will remain suspended in space until made aware of
+			its situation. A character steps off a cliff but remains in midair until looking
+			down, then the familiar principle of 16 feet per second squared takes over.
+		</p>
+
+		<h2>Cartoon Law II</h2>
+		<p>
+			A body passing  through solid matter will leave a  perforation conforming to its
+			perimeter called the silhouette of passage.
+		</p>
+
+		<h2>Cartoon Law III</h2>
+		<p>
+			The time required for  an object to fall 20 stories is greater  than or equal to
+			the time it takes for whoever knocked it off the ledge to spiral down 20 flights
+			to attempt to  capture it unbroken. Such an object  is inevitably priceless; the
+			attempt to capture it, inevitably unsuccessful.
+		</p>
+
+		<h2>Cartoon Law IV</h2>
+		<p>
+			All principles of gravity are negated by fear.
+		</p>
+
+		<h2>Cartoon Law V</h2>
+		<p>
+			Psychic forces are sufficient in most bodies for a shock to propel them directly
+			away from  the ground.  A spooky  noise or an  adversary's signature  sound will
+			introduce motion upward, usually to the cradle of a chandelier, a treetop or the
+			crest of a flagpole.
+		</p>
+
+		<h2>Cartoon Law VI</h2>
+		<p>
+			The feet  of a running  character or  the wheels of  a speeding auto  need never
+			touch the ground, ergo fleeing turns to flight.
+		</p>
+
+		<h2>Cartoon Law VII</h2>
+		<p>
+			As speed increases, objects can be in several places at once.
+		</p>
+
+		<h2>Cartoon Law VIII</h2>
+		<p>
+			A painted tunnel entrance may or may not be traversable
+		</p>
+
+		<h2>Cartoon Law IX</h2>
+		<p>
+			Certain  bodies  can pass  through  a  solid  wall  painted to  resemble  tunnel
+			entrances; others cannot. ... Whoever paints  an entrance on a wall's surface to
+			trick an opponent will be unable to  pursue him into this theoretical space. The
+			painter  is flattened  against the  wall  when he  attempts to  follow into  the
+			painting. This is ultimately a problem of art, not science.
+		</p>
+
+		<h2>Cartoon Law X</h2>
+		<p>
+			Any violent rearrangement  of feline matter is impermanent. Cartoon  cats can be
+			sliced, splayed, accordion-pleated, spindled or disassembled, but they cannot be
+			destroyed. After a few moments  of blinking self-pity, they reinflate, elongate,
+			snap back or solidify.
+		</p>
+
+		<h2>Cartoon Law XI</h2>
+		<p>
+			Everything falls faster than an anvil.
+		</p>
+	</body>
+</html>