diff --git a/R1.02/tp/tp2/correction/exercice1.html b/R1.02/tp/tp2/correction/exercice1.html
new file mode 100644
index 0000000..b0af8a1
--- /dev/null
+++ b/R1.02/tp/tp2/correction/exercice1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="zxx">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+
+ <title>Exercice 1</title>
+ </head>
+ <body>
+ <ul>
+ <li><a href="#partie_1">Partie 1</a></li>
+ <li><a href="#partie_2">Partie 2</a></li>
+ <li><a href="exercice1_copie.html#partie_2">Partie 2</a></li>
+ </ul>
+ <h1 id="partie_1">Première partie</h1>
+ <p>Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis <strong>Ut ullam</strong> ut voluptas neque ea fugiat amet! Et asperiores quam <a href="https://www.loremipzum.com" target="_blank">Qui dolor id illum ullam</a>. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi <em>Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem</em> ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam. </p><blockquote cite="https://www.loremipzum.com">Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum. </blockquote><p>Rem alias blanditiis <em>Aut delectus quo modi velit a similique assumenda</em>. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam <a href="https://www.loremipzum.com" target="_blank">Ut eveniet sed neque maxime</a> At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem. </p><ul><li>Eum neque molestias est commodi quia sed voluptatem quia. </li><li>Non omnis ratione qui voluptas fuga in optio rerum? </li></ul><p>Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod <strong>Qui eius</strong> sed quas molestias vel quod voluptas! Sit molestiae ipsam <em>In expedita et voluptas sequi</em>! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus. </p>
+ <p>Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis <strong>Ut ullam</strong> ut voluptas neque ea fugiat amet! Et asperiores quam <a href="https://www.loremipzum.com" target="_blank">Qui dolor id illum ullam</a>. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi <em>Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem</em> ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam. </p><blockquote cite="https://www.loremipzum.com">Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum. </blockquote><p>Rem alias blanditiis <em>Aut delectus quo modi velit a similique assumenda</em>. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam <a href="https://www.loremipzum.com" target="_blank">Ut eveniet sed neque maxime</a> At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem. </p><ul><li>Eum neque molestias est commodi quia sed voluptatem quia. </li><li>Non omnis ratione qui voluptas fuga in optio rerum? </li></ul><p>Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod <strong>Qui eius</strong> sed quas molestias vel quod voluptas! Sit molestiae ipsam <em>In expedita et voluptas sequi</em>! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus. </p>
+ <p>Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis <strong>Ut ullam</strong> ut voluptas neque ea fugiat amet! Et asperiores quam <a href="https://www.loremipzum.com" target="_blank">Qui dolor id illum ullam</a>. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi <em>Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem</em> ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam. </p><blockquote cite="https://www.loremipzum.com">Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum. </blockquote><p>Rem alias blanditiis <em>Aut delectus quo modi velit a similique assumenda</em>. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam <a href="https://www.loremipzum.com" target="_blank">Ut eveniet sed neque maxime</a> At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem. </p><ul><li>Eum neque molestias est commodi quia sed voluptatem quia. </li><li>Non omnis ratione qui voluptas fuga in optio rerum? </li></ul><p>Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod <strong>Qui eius</strong> sed quas molestias vel quod voluptas! Sit molestiae ipsam <em>In expedita et voluptas sequi</em>! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus. </p>
+
+ <h1 id="partie_2">Deuxième partie</h1>
+
+ <p>Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis <strong>Ut ullam</strong> ut voluptas neque ea fugiat amet! Et asperiores quam <a href="https://www.loremipzum.com" target="_blank">Qui dolor id illum ullam</a>. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi <em>Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem</em> ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam. </p><blockquote cite="https://www.loremipzum.com">Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum. </blockquote><p>Rem alias blanditiis <em>Aut delectus quo modi velit a similique assumenda</em>. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam <a href="https://www.loremipzum.com" target="_blank">Ut eveniet sed neque maxime</a> At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem. </p><ul><li>Eum neque molestias est commodi quia sed voluptatem quia. </li><li>Non omnis ratione qui voluptas fuga in optio rerum? </li></ul><p>Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod <strong>Qui eius</strong> sed quas molestias vel quod voluptas! Sit molestiae ipsam <em>In expedita et voluptas sequi</em>! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus. </p>
+ <p>Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis <strong>Ut ullam</strong> ut voluptas neque ea fugiat amet! Et asperiores quam <a href="https://www.loremipzum.com" target="_blank">Qui dolor id illum ullam</a>. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi <em>Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem</em> ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam. </p><blockquote cite="https://www.loremipzum.com">Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum. </blockquote><p>Rem alias blanditiis <em>Aut delectus quo modi velit a similique assumenda</em>. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam <a href="https://www.loremipzum.com" target="_blank">Ut eveniet sed neque maxime</a> At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem. </p><ul><li>Eum neque molestias est commodi quia sed voluptatem quia. </li><li>Non omnis ratione qui voluptas fuga in optio rerum? </li></ul><p>Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod <strong>Qui eius</strong> sed quas molestias vel quod voluptas! Sit molestiae ipsam <em>In expedita et voluptas sequi</em>! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus. </p>
+ <p>Lorem ipsum dolor sit amet. Fugiat beatae aut fugiat dolores qui consequuntur perferendis et dolores repudiandae. Et ullam maxime sapiente veritatis quo consequatur ducimus. Cum dolor blanditiis <strong>Ut ullam</strong> ut voluptas neque ea fugiat amet! Et asperiores quam <a href="https://www.loremipzum.com" target="_blank">Qui dolor id illum ullam</a>. Qui dolorem autem et soluta nostrum 33 galisum nostrum est exercitationem enim! Et harum animi non obcaecati fuga ut repellendus quas ea perspiciatis ducimus. Aut doloremque animi <em>Et quia et saepe quaerat aut velit incidunt et perferendis voluptatem</em> ex quia voluptas ea accusamus nostrum. Qui commodi laboriosam ad dicta galisum ut tempora unde et dolorem suscipit. Ut illum illum id dolor tempore ut quos voluptatem aut internos molestias quo adipisci ipsum. 33 expedita molestias aut iusto nihil aut nemo optio et cupiditate velit. Et cupiditate omnis ex explicabo fugit in voluptas ducimus et eaque quae et dolor odio aut consectetur rerum nam consequuntur quisquam. </p><blockquote cite="https://www.loremipzum.com">Sed eaque quas sed vitae quae et dolor ratione sed rerum saepe rem sunt rerum. </blockquote><p>Rem alias blanditiis <em>Aut delectus quo modi velit a similique assumenda</em>. At nobis natus et natus tenetur est quaerat dolor aut sequi harum sed dignissimos nihil. Ut iure unde et voluptatem enim cum consequatur totam rem veniam maxime ab exercitationem modi ut cumque magni! Eum illo aliquam et vitae earum eos sint mollitia. Non dolor natus est aperiam laudantium aut reiciendis incidunt quia fugit ad earum vero aut quasi rerum et corrupti quibusdam? Et molestiae itaque id voluptatem maxime qui velit fuga eum eius dolorum sit saepe iste id similique consectetur. Et consequatur autem et doloribus nemo quo minima consequatur qui repellendus voluptatum? Aut facilis quaerat ut omnis aperiam <a href="https://www.loremipzum.com" target="_blank">Ut eveniet sed neque maxime</a> At voluptas molestiae a sapiente voluptas ex nulla amet. Eos sint ducimus est odit rerum vel dolorem itaque est suscipit architecto non veritatis sequi et voluptatum exercitationem. Vel esse nulla et exercitationem laudantium non assumenda nesciunt? Qui dicta quia vel magni pariatur sit ratione atque qui quia fugiat est eligendi quidem. </p><ul><li>Eum neque molestias est commodi quia sed voluptatem quia. </li><li>Non omnis ratione qui voluptas fuga in optio rerum? </li></ul><p>Quo repudiandae rerum ea doloribus nihil eos temporibus beatae ab libero nobis aut ullam voluptatem eos totam fuga sit velit sequi. Id consequatur nobis a quae possimus aut nesciunt temporibus! Et iure quod <strong>Qui eius</strong> sed quas molestias vel quod voluptas! Sit molestiae ipsam <em>In expedita et voluptas sequi</em>! Eos ducimus laudantium et quia reiciendis aut numquam quos sed necessitatibus omnis et exercitationem repudiandae? Ab totam odit aut expedita omnis sit praesentium aliquam est accusantium fugiat qui omnis qui illo dolorem. Sed expedita galisum ut officia reprehenderitet accusamus ad nemo placeat. Ut fugiat totam a facere quaerat et esse corrupti sed dolor pariatur in mollitia necessitatibus. </p>
+ </body>
+</html>
diff --git a/R1.02/tp/tp2/correction/exercice2.html b/R1.02/tp/tp2/correction/exercice2.html
new file mode 100644
index 0000000..8d775ce
--- /dev/null
+++ b/R1.02/tp/tp2/correction/exercice2.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+ <head>
+ <title>Exercice 2</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ </head>
+
+ <body>
+ <form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
+
+ <div>
+ <label for="lastname">Nom : </label>
+ <input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
+ </div>
+
+ <div>
+ <label for="firstname">Prénom : </label>
+ <input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
+ </div>
+
+ <div>
+ <label for="birthdate">Date de naissance : </label>
+ <input type="date" name="birthdate" id="birthdate">
+ </div>
+
+ <div>
+ <label for="email">Adresse email : </label>
+ <input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
+ </div>
+
+ <div>
+ <label for="postcode">Code postal : </label>
+ <input type="number" name="postcode" id="postcode" placeholder="ex: 75000" min="5" max="99999" required>
+ <!--
+ Validation d'un code postal avec une expression régulière
+ <input type="text" name="postcode" id="postcode" placeholder="ex: 75000" pattern="(?:[0-8]\d|9[0-8])\d{3}">
+ -->
+ </div>
+
+ <div>
+ <label for="phonenumber">N° Télephone portable : </label>
+ <input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
+ <!-- Il n'y a pas d'attribut pour afficher un message d'erreur personnalisé, c'est pour cela qu'il y a JavaScript -->
+ </div>
+
+ <div>
+ <input type="radio" name="gender" id="femme" value="Madame" required>
+ <label for="femme">Femme </label>
+ <input type="radio" name="gender" id="homme" value="Monsieur" required>
+ <label for="homme">Homme </label>
+ <input type="radio" name="gender" id="autre" value="Autre" required>
+ <label for="autre">Autre </label>
+ </div>
+
+ <div>
+ <label for="semester">Semestre : </label>
+ <select name="semester" id="semester" size="4" required>
+ <option value="Semestre 1">Semestre 1</option>
+ <option value="Semestre 2" selected>Semestre 2</option>
+ <option value="Semestre 3">Semestre 3</option>
+ <option value="Semestre 4">Semestre 4</option>
+ </select>
+ </div>
+
+ <div>
+ <label for="niveau">Niveau en HTML (entre 0 et 10) : </label>
+ <input type="range" name="niveau" id="niveau" min="0" max="10" value="5">
+ </div>
+
+ <div>
+ <label for="message">Message : </label>
+ <textarea name="message" id="message" required></textarea>
+ </div>
+
+ <div>
+ <input type="submit" value="Envoyer">
+ <input type="reset" value="Remettre à zéro">
+ </div>
+ </form>
+ </body>
+</html>
diff --git a/R1.02/tp/tp2/correction/exercice3.html b/R1.02/tp/tp2/correction/exercice3.html
new file mode 100644
index 0000000..e20fbf4
--- /dev/null
+++ b/R1.02/tp/tp2/correction/exercice3.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+ <head>
+ <title>Exercice 3</title>
+
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <meta charset="utf-8">
+ </head>
+
+ <body>
+ <form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
+
+ <div>
+ <label for="lastname">Nom : </label>
+ <input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
+ </div>
+
+ <div>
+ <label for="firstname">Prénom : </label>
+ <input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
+ </div>
+
+ <div>
+ <label for="birthdate">Date de naissance : </label>
+ <input type="date" name="birthdate" id="birthdate">
+ </div>
+
+ <div>
+ <label for="email">Adresse email : </label>
+ <input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
+ </div>
+
+ <div>
+ <label for="postcode">Code postal : </label>
+ <input type="number" name="postcode" id="postcode" placeholder="ex: 75000" min="5" max="99999" required>
+ <!--
+ Validation d'un code postal avec une expression régulière
+ <input type="text" name="postcode" id="postcode" placeholder="ex: 75000" pattern="(?:[0-8]\d|9[0-8])\d{3}">
+ -->
+ </div>
+
+ <div>
+ <label for="phonenumber">N° Télephone portable : </label>
+ <input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
+ <!-- Il n'y a pas d'attribut pour afficher un message d'erreur personnalisé, c'est pour cela qu'il y a JavaScript -->
+ </div>
+
+ <div>
+ <input type="radio" name="gender" id="femme" value="Madame" required>
+ <label for="femme">Femme </label>
+ <input type="radio" name="gender" id="homme" value="Monsieur" required>
+ <label for="homme">Homme </label>
+ <input type="radio" name="gender" id="autre" value="Autre" required>
+ <label for="autre">Autre </label>
+ </div>
+
+ <div>
+ <label for="semester">Semestre : </label>
+ <select name="semester" id="semester" size="4" required>
+ <option value="Semestre 1">Semestre 1</option>
+ <option value="Semestre 2" selected>Semestre 2</option>
+ <option value="Semestre 3">Semestre 3</option>
+ <option value="Semestre 4">Semestre 4</option>
+ </select>
+ </div>
+
+ <div>
+ <label for="niveau">Niveau en HTML (entre 0 et 10) : </label>
+ <input type="range" name="niveau" id="niveau" min="0" max="10" value="5">
+ </div>
+
+ <div>
+ <label for="message">Message : </label>
+ <textarea name="message" id="message" required></textarea>
+ </div>
+
+ <div>
+ <input type="submit" value="Envoyer">
+ <input type="reset" value="Remettre à zéro">
+ </div>
+ </form>
+ </body>
+
+</html>
diff --git a/R1.02/tp/tp2/correction/exercice4.html b/R1.02/tp/tp2/correction/exercice4.html
new file mode 100644
index 0000000..7a6851d
--- /dev/null
+++ b/R1.02/tp/tp2/correction/exercice4.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <title>Exercice 4</title>
+ <link rel="stylesheet" href="./style4.css">
+ </head>
+ <body>
+ <h1>Emoticons</h1>
+
+ <p>
+ Emoticons are textual portrayals of a writer's moods or facial
+ expressions in the form of icons. Originally, these icons
+ consisted of ASCII art.
+ </p>
+
+ <p>
+ Emoticons can generally be divided into two groups: Western (mainly
+ from America and Europe) or horizontal; Eastern or vertical (mainly
+ from east Asia).
+ </p>
+
+ <h2>Western</h2>
+
+ <p>
+ Western style emoticons are mostly written from left to right as
+ though the head is rotated counter-clockwise 90 degrees.
+ </p>
+
+ <ul>
+ <li>Smiley: <span>:‑) :-></span></li>
+ <li>Tongue-tied: <span>:‑&</span></li>
+ <li>Broken heart: <span><\3</span></li>
+ <li>Rose: <span>@}->--</span></li>
+ <li>Fish: <span>><(((*></span></li>
+ </ul>
+
+ <h2>Eastern</h2>
+
+ <p>
+ Eastern emoticons generally are not rotated sideways. They first
+ arose in Japan, where they are referred to as kaomoji.
+ </p>
+
+ <ul>
+ <li>Troubled: <span>(>_<)</span></li>
+ <li>Sad: <span>("_")</span></li>
+ <li>Cat: <span>(=^·^=)</span></li>
+ <li>Headphones: <span>((d[-_-]b))</span></li>
+ </ul>
+ </body>
+</html>
diff --git a/R1.02/tp/tp2/correction/exercice5.html b/R1.02/tp/tp2/correction/exercice5.html
new file mode 100644
index 0000000..4b7e8a2
--- /dev/null
+++ b/R1.02/tp/tp2/correction/exercice5.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>Exercice 5</title>
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="./style5.css">
+ </head>
+ <body>
+ <table>
+ <caption>Orbites des planètes du Système solaire</caption>
+ <thead>
+ <tr>
+ <th>Planète</th>
+ <th>Distance moyenne (UA)</th>
+ <th>Exentricité </th><th>Inclinaison (°)</th>
+ <th>Période de révolution (an)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Mercure</td>
+ <td>0,38709893</td>
+ <td>0,205</td>
+ <td>7</td>
+ <td>0,241</td>
+ </tr>
+
+ <tr>
+ <td>Venus</td>
+ <td>0,72333199</td>
+ <td>0,007</td>
+ <td>3,4</td>
+ <td>0,615</td>
+ </tr>
+ <tr>
+ <td>Terre</td>
+ <td>1</td>
+ <td>0,017</td>
+ <td>0</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td>Mars</td>
+ <td>1,52366231</td>
+ <td>0,094</td>
+ <td>1,9</td>
+ <td>1,881</td>
+ </tr>
+
+
+ <tr>
+ <td>Jupiter</td>
+ <td>5,20336301</td>
+ <td>0,049</td>
+ <td>1,3</td>
+ <td>11,862</td>
+ </tr>
+ <tr>
+ <td>Saturne</td>
+ <td>9,6</td>
+ <td>0,057</td>
+ <td>2,5</td>
+ <td>29,452</td>
+ </tr>
+ <tr>
+ <td>Uranus</td>
+ <td>2872,5</td>
+ <td>0,8</td>
+ <td>97,8</td>
+ <td>30,589</td>
+ </tr>
+
+ <tr>
+ <td>Neptune</td>
+ <td>4495,1</td>
+ <td>1,8</td>
+ <td>28,3</td>
+ <td>59,8</td>
+ </tr>
+ </tbody>
+
+ </table>
+ </body>
+</html>
diff --git a/R1.02/tp/tp2/correction/exercice6.html b/R1.02/tp/tp2/correction/exercice6.html
new file mode 100644
index 0000000..4ac5224
--- /dev/null
+++ b/R1.02/tp/tp2/correction/exercice6.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <title>Exercice 6</title>
+ <link rel="stylesheet" href="./style6.css">
+ </head>
+ <body>
+ <table>
+ <tbody>
+ <tr><td rowspan="5"></td><td colspan="3"></td><td rowspan="4"></td></tr>
+ <tr><td rowspan="3"></td><td></td><td rowspan="2"></td></tr>
+ <tr><td></td></tr>
+ <tr><td colspan="2"></td></tr>
+ <tr><td colspan="4"></td></tr>
+ </tbody>
+ </table>
+ </body>
+</html>
diff --git a/R1.02/tp/tp2/correction/style4.css b/R1.02/tp/tp2/correction/style4.css
new file mode 100644
index 0000000..ae629ba
--- /dev/null
+++ b/R1.02/tp/tp2/correction/style4.css
@@ -0,0 +1,21 @@
+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;
+}
+
diff --git a/R1.02/tp/tp2/correction/style5.css b/R1.02/tp/tp2/correction/style5.css
new file mode 100644
index 0000000..34c07f5
--- /dev/null
+++ b/R1.02/tp/tp2/correction/style5.css
@@ -0,0 +1,26 @@
+table {
+ font-family: sans-serif;
+ border-collapse: collapse;
+ margin : auto;
+ width:700px;
+}
+table caption {
+
+ font-weight: bold;
+ font-variant: small-caps;
+
+}
+
+th {
+ border-bottom: 3px solid black;
+ border-top: 3px solid black;
+ text-align: left;
+ font-weight: bold;
+ font-variant: small-caps;
+}
+
+td {
+ border-bottom: 1px solid lightgray;
+ text-align: left;
+}
+
diff --git a/R1.02/tp/tp2/correction/style6.css b/R1.02/tp/tp2/correction/style6.css
new file mode 100644
index 0000000..a54f611
--- /dev/null
+++ b/R1.02/tp/tp2/correction/style6.css
@@ -0,0 +1,9 @@
+table {
+ border-collapse: collapse;
+}
+td {
+ border:1px solid black;
+ width:50px;
+ height:50px;
+}
+
diff --git a/R1.02/tp/tp3/README.md b/R1.02/tp/tp3/README.md
new file mode 100644
index 0000000..96debd8
--- /dev/null
+++ b/R1.02/tp/tp3/README.md
@@ -0,0 +1,129 @@
+# TP CSS
+> Vous trouverez une correction du tp1 [ici](../tp1/correction).
+> Vous trouverez une correction du tp2 [ici](../tp2/correction).
+> Vous trouverez une correction du tp3 [ici](../tp3/correction).
+
+
+
+## Exercice 1 : stylisation d'une liste
+
+Soit le code [html](src/exercice1.html) suivant
+
+```html
+<h1>Mes films préférés de Clint Eastwood</h1>
+<ul>
+ <li>Gran Torino (2008)</li>
+ <li>Impitoyable (1992)</li>
+ <li>Mystic River (2003)</li>
+ <li>Sur la route de Madison (1995)</li>
+ <li>Lettres d'Iwo Jima (2006)</li>
+ <li>L'Échange (2008)</li>
+ <li>Josey Wales hors-la-loi (1976)</li>
+ <li>Breezy (1973)</li>
+</ul>
+```
+
+Donnez une feuille de style pour obtenir la mise en page suivante ;
+
+
+
+> Propriétés css utiles :
+> - `list-style-type` : contrôle l'apparence de la puce d'un élément de liste.
+> - `padding`, `margin` : espace intérieur et extérieur
+> - `background-color` : couleur de fond
+> - `font-style` : italique, oblique ou normal
+>
+> Pseudo-classes utiles :
+> - `nth-child` : nth-child(an+b) permet de selctionner les éléments en fonction de leur position.
+
+## Exercice 2 : positionnement des boîtes avec la propriété `position`.
+
+Soit le code [html](./src/exercice2.html) suivant :
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Exercice 2</title>
+ </head>
+ <body>
+ <main>
+ <header></header>
+ <section></section>
+ <aside></aside>
+ <footer></footer>
+ </main>
+ </body>
+</html>
+```
+Donnez une feuille de style pour obtenir la mise en page suivante :
+
+
+> Propriétés utiles
+> - `position` : static, relative, absolute, fixed, sticky
+> - `top`, `bottom`, `right`, `left` : coordonnées de l'élément. Attention, pour le
+> positionnement absolu, les **coordonnées s'entendent par rapport au premier ascendant en position relative,
+> le body s'il n'y en a pas**.
+> - `ẁidth` et `height` : largeur et hauteur.
+> - `border-radius` et `border` : arrondi des coins, et bordure.
+
+## Exercice 3 : selection à l'aide d'attributs.
+Soit le code [html](src/exercice3.html) suivant
+```html
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Exercice 3</title>
+ </head>
+ <body>
+ <ul>
+ <li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
+ </ul>
+ </body>
+</html>
+```
+Donnez une feuille de style pour obtenir la mise en page suivante :
+
+
+Vous pouvez utiliser les images suivantes :
+- [html](https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg)
+- [css](https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg)
+- [javascript](https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg)
+
+> On peut selectionner un élément en utilisant la valeur d'un attribut. Par exemple :
+> ```css
+> a[href*="toto"]
+> ```
+> selectionne les liens dont l'url cible contient "toto".
+> Propriétés utiles :
+> - `background-image` : permet de définir une image comme arrière plan.
+> - `display` : permet de définir le rendu d'un élément (bloc ou en ligne)
+> - `font-size` : contrôle la taille de la fonte.
+> - `text-align`, `vertical-align` : contrôle l'alignement horizontal et vertical des éléments inline.
+
+## Exercice 4 : media queries
+Soit le code [html](src/exercice4.html) et sa feuille de [style](src/style4.css).
+
+Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché.
+
+> Utilisez une requête media `@media`.
+
+## Exercice 5 : mise en page avec la propriété `float`
+On reprend le source précédent.
+
+À l'aide de la propriété `float`, affichez les articles sur 2 colonnes avec une bordure de 1px grise et
+une marge entre les articles de 40px.
+
+> Vous aurez besoin d'utiliser la propriété `width` que vous pouvez utiliser avec la fonction CSS `calc()` pour le calcul,
+> exemple:
+> ```css
+> width: calc(100px + 2*20px)
+> ```
+> Penser quand vous cherchez la bonne largeur (+/- 50%), qu'il faut prendre en compte la taille de marge et des bordures. Vous pouvez utiliser
+> la propriété `box-sizing`.
+
+Ajoutez une requête media pour que les articles s'affichent à nouveau verticalement lorsque la taille de l'écran est en dessous de 720px.
diff --git a/R1.02/tp/tp3/img/eastwood.png b/R1.02/tp/tp3/img/eastwood.png
new file mode 100644
index 0000000..3a1ff45
Binary files /dev/null and b/R1.02/tp/tp3/img/eastwood.png differ
diff --git a/R1.02/tp/tp3/img/smiley.png b/R1.02/tp/tp3/img/smiley.png
new file mode 100644
index 0000000..8e56184
Binary files /dev/null and b/R1.02/tp/tp3/img/smiley.png differ
diff --git a/R1.02/tp/tp3/img/web_stack.png b/R1.02/tp/tp3/img/web_stack.png
new file mode 100644
index 0000000..58436d1
Binary files /dev/null and b/R1.02/tp/tp3/img/web_stack.png differ
diff --git a/R1.02/tp/tp3/src/exercice1.html b/R1.02/tp/tp3/src/exercice1.html
new file mode 100644
index 0000000..5be8589
--- /dev/null
+++ b/R1.02/tp/tp3/src/exercice1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <title>CEastwood</title>
+ </head>
+
+ <body>
+ <h1>Mes films préférés de Clint Eastwood</h1>
+ <ul>
+ <li>Gran Torino (2008)</li>
+ <li>Impitoyable (1992)</li>
+ <li>Mystic River (2003)</li>
+ <li>Sur la route de Madison (1995)</li>
+ <li>Lettres d'Iwo Jima (2006)</li>
+ <li>L'Échange (2008)</li>
+ <li>Josey Wales hors-la-loi (1976)</li>
+ <li>Breezy (1973)</li>
+ </ul>
+ </body>
+</html>
+
diff --git a/R1.02/tp/tp3/src/exercice2.html b/R1.02/tp/tp3/src/exercice2.html
new file mode 100644
index 0000000..dc7e3af
--- /dev/null
+++ b/R1.02/tp/tp3/src/exercice2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Exercice 2</title>
+ </head>
+ <body>
+ <main>
+ <header></header>
+ <section></section>
+ <!--aside></aside-->
+ <footer></footer>
+ </main>
+ </body>
+</html>
diff --git a/R1.02/tp/tp3/src/exercice3.html b/R1.02/tp/tp3/src/exercice3.html
new file mode 100644
index 0000000..15feafa
--- /dev/null
+++ b/R1.02/tp/tp3/src/exercice3.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Exercice 3</title>
+ </head>
+ <body>
+ <ul>
+ <li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
+ </ul>
+ </body>
+</html>
diff --git a/R1.02/tp/tp3/src/exercice4.html b/R1.02/tp/tp3/src/exercice4.html
new file mode 100644
index 0000000..21a28e6
--- /dev/null
+++ b/R1.02/tp/tp3/src/exercice4.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="style4.css">
+ <title>Document</title>
+ </head>
+
+ <body>
+ <header>
+ <nav>
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li><a href="/">About</a></li>
+ <li><a href="/">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <article>
+ <header>
+ <h1>Article title 1</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 2</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 3</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 3</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ </main>
+ </body>
+</html>
diff --git a/R1.02/tp/tp3/src/style4.css b/R1.02/tp/tp3/src/style4.css
new file mode 100644
index 0000000..b97f333
--- /dev/null
+++ b/R1.02/tp/tp3/src/style4.css
@@ -0,0 +1,21 @@
+ul {
+
+ text-align: center;
+ padding:0;
+}
+li {
+ list-style-type: none;
+ list-style-position: inside;
+ display: inline-block;
+ margin-right: 2em;
+ font-size : 2em;
+}
+li:last-child{
+ margin-right:0;
+
+}
+article {
+ text-align: justify;
+ border : 1px solid grey;
+ padding : 1em;
+}