diff --git a/HTML exercices/Loutre.webp b/HTML exercices/Loutre.webp
new file mode 100644
index 0000000..b81e42c
Binary files /dev/null and b/HTML exercices/Loutre.webp differ
diff --git a/HTML exercices/exercice-semantique.html b/HTML exercices/exercice-semantique.html
new file mode 100644
index 0000000..c33bac5
--- /dev/null
+++ b/HTML exercices/exercice-semantique.html	
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        li {
+            color: blue;
+            font: 1em sans-serif;
+        }
+
+        .titre-center {
+            text-align: center;
+            background-color: aqua;
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="titre-center">
+            <h1>Le blog informatique</h1>
+        </div>
+        <nav>
+            <ul>
+                <li>Accueil</li>
+                <li>FAQ</li>
+                <li>A propos</li>
+                <li>Contact</li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section>
+            <h2>A la une</h2>
+            <article>
+                <img src="" alt="oups cassé">
+                <div>
+                    <div>
+                        <h1>Sujet du post</h1>
+                        <p>hdfijsjisjd ushdisjdpjzi shdhoijdhks ksuhdijoqiz</p>
+                    </div>
+                    <div>
+                        <span>01/05/2017</span>
+                        <span>32 commentaires</span>
+                    </div>
+                </div>
+            </article>
+        </section>
+        <section>
+            <h2>Derniers posts</h2>
+            <article>
+                <img src="" alt="oups cassé">
+                <div>
+                    <div>
+                        <h1>Sujet du post</h1>
+                        <p>hgdjysgdkuhs jhsgdkhqkcb bqjhdgkqh</p>
+                    </div>
+                    <div>
+                        <span>12/07/2017</span>
+                        <span>41 commentaires</span>
+                    </div>
+                </div>
+            </article>
+            <hr>
+            <article>
+                <img src="" alt="oups cassé">
+                <div>
+                    <div>
+                        <h1>Sujet du post</h1>
+                        <p>hbdfjhcsbc jdscbkdshckjds kjdscksc</p>
+                    </div>
+                    <div>
+                        <span>10/07/2017</span>
+                        <span>26 commentaires</span>
+                    </div>
+                </div>
+            </article>
+            <hr>
+            <article>
+                <img src="" alt="oups cassé">
+                <div>
+                    <div>
+                        <h1>Sujet du post</h1>
+                        <p>jhdckuhdfkhb bsjdbkcshief jksdsfuh</p>
+                    </div>
+                    <div>
+                        <span>08/07/2017</span>
+                        <span>15 commentaires</span>
+                    </div>
+                </div>
+            </article>
+        </section>
+        <aside>
+            <h1>2017</h1>
+            <details>
+                <summary>Janvier</summary>
+            </details>
+            <details>
+                <summary>Février</summary>
+            </details>
+            <details>
+                <summary>Mars</summary>
+            </details>
+            <details open>
+                <summary>Avril</summary>
+                <ul>
+                    <li><a href="https://www.helmo.be/" target="_blank">élément cliquable</a></li>
+                    <li><a href="https://www.helmo.be/" target="_blank">élément cliquable</a></li>
+                </ul>
+            </details>
+            <details>
+                <summary>Mai</summary>
+            </details>
+            <details>
+                <summary>Juin</summary>
+            </details>
+            <details>
+                <summary>Juillet</summary>
+            </details>
+        </aside>
+    </main>
+    <footer>
+        <span>&copy; Biogie - 2017</span>
+    </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/HTML exercices/exercice.html b/HTML exercices/exercice.html
new file mode 100644
index 0000000..8c4c1aa
--- /dev/null
+++ b/HTML exercices/exercice.html	
@@ -0,0 +1,38 @@
+
+<!DOCTYPE html>
+    <html lang="fr">
+    <head>
+        <meta charset="utf-8">
+        <title>Corrigez moi</title>
+    </head>
+    <body>
+        <header>
+            <h1>Exercice de validation W3C</h1>
+        </header>
+        <main>
+            <h2>Liste des fruits</h2>
+            <article>
+                <h2>Pomme</h2>
+                <div>
+                    <ul>
+                        <li>Jonagold</li>
+                        <li>Golden
+                        <li>Pink lady
+                        
+                    </ul>
+                </div>
+                <footer>(source: Belgique)</footer>
+            </article>
+            <article>
+                <h2>Poire</h2>
+                <div>
+                    <ol>
+                        <li><a href="https://fr.wikipedia.org/wiki/Conf%C3%A9rence_(poire)">Conférence</a></li>
+                    </ol>
+                </div>
+                <aside><img src="http://www.devosgroup.be/images/producten/conf.jpg" alt="cassé"></aside>
+            </article>
+            <aside><p> Mangez au moins 5 fruits et légumes par jour</p></aside>
+        </main>
+    </body>
+</html> 
\ No newline at end of file
diff --git a/HTML exercices/images/gashy.jpeg b/HTML exercices/images/gashy.jpeg
new file mode 100644
index 0000000..89f658a
Binary files /dev/null and b/HTML exercices/images/gashy.jpeg differ
diff --git a/HTML exercices/insciption.html b/HTML exercices/insciption.html
new file mode 100644
index 0000000..5c780d9
--- /dev/null
+++ b/HTML exercices/insciption.html	
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8"/>
+    <title>Création d'un compte sur iBaie </title>
+    <style>
+      label {
+        display: inline-block;
+        width: 120px;
+        vertical-align: top;
+      }
+      label::after{
+        content: " :";
+      }
+      label.radio {
+        display: inline;
+      }
+      label.radio::after {
+        content: "";
+      }
+      input[type=text], input[type=range], input[type=date], input[type=email], input[type=password], input[type=url], textarea, select {
+        width: 200px;
+        margin-bottom: 5px;
+      }
+      input:required{
+        color: red;
+      }
+      fieldset {
+        margin-bottom: 15px;
+      }
+    </style>
+ </head>
+ <body>
+    <h1>Création de votre compte</h1>
+    <form>
+        <input id="counter" name="counter" type="hidden" value="100">
+        <fieldset>
+            <legend>Votre profil</legend>
+            <label for="statut">Statut</label><input id="statut" name="statut" type="text" >
+            <label for="nom">Nom</label><input id="nom" name="nom" type="text" > 
+            <label for="satisfaction">Votre satisfaction</label><input id="satisfaction" name="satisfaction" type="range" min="0" max="4" step="1"> 
+            <input type="reset" name="reset1" value="Réinitialiser">
+            <button type="reset" name="reset2"><u>Autre réinitialiser</u></button>
+            <label for="courriel">Courriel</label><input id="courriel" name="courriel" type="email" >
+            <label for="motPasse">Mot de passe</label><input id="motPasse" name="motPasse" type="password" >
+            <label for="ancienPasse">Ancien</label><input id="ancienPasse" name="ancienPasse" type="password" >
+            <label >Taille</label>
+            <label class="radio"><input id="tailleS" name="taille[]" type="checkbox" value="S">S</label>
+            <label class="radio"><input id="tailleM"  name="taille[]" type="checkbox" value="M">M</label>
+            <label class="radio"><input id="tailleL"  name="taille[]" type="checkbox" value="L">L</label>
+            <label class="radio"><input id="tailleXL" name="taille[]" type="checkbox" value="XL">XL</label> 
+
+            <label for="sexe">Sexe</label> 
+            <label class="radio"><input id="sexeF"  name="sexe" type="radio" value="Femme">Femme</label>
+            <label class="radio"><input id="sexeH" name="sexe" type="radio" value="Homme">Homme</label>
+            <label class="radio"><input id="sexeA" name="sexe" type="radio" value="Autre">Autre</label> 	
+                <label for="webPerso">Votre site web</label><input id="webPerso" name="webPerso" type="url"> 
+        </fieldset>
+ 
+        <label for="plaque">Voiture</label><input id="plaque" name="plaque" type="text" > 
+        <label for="quantite">Quantité</label><input id="quantite" name="quantite" type="number" value="0">
+        <label for="livraison">Livraison</label>
+        <select id="livraison" name="livraison">
+          <option value="D" selected>A domicile</option>
+          <option value="M">Au magasin</option>
+        </select>
+        <label for="message">Message</label><textarea id="message" name="message" rows="3" cols="20"></textarea>
+ 
+        <label for="date">Livré le</label><input id="date" name="date" type="date"> 
+        <label for="heure">A partir de</label><input id="heure" name="heure" type="time"> 
+
+        <label for="reduction">Réduction</label>
+        <select id="reduction" name="reduction" multiple>
+            <option selected>Famille nombreuse</option>
+          <option>Enfant de moins de 5ans</option>
+          <option>Enseignant</option>
+        </select>
+        <label for="etatCivil">Etat civil</label><input type="text" id="etatCivil" name="etatCivil" list="etats">
+        <label for="couleur">Couleur</label><input id="couleur" name="couleur" type="color">
+
+    </form>
+    <datalist id="etats">
+      <option value="M">Marié.e</option>
+      <option value="V">Veuf.ve</option>
+      <option value="D">Divorcé.e</option>
+      <option value="C">Célibataire</option>
+    </datalist> 
+
+        <label for="satisfaction">Votre satisfaction</label><input id="satisfaction" name="satisfaction" type="range" min="0" max="4" step="1">
+        <input type="submit" name="Valider">
+        <button type="submit" name="buttsub1" ><u>Autre valider</u></button>
+
+    </form>
+ </body>
+</html>
diff --git a/HTML exercices/ma-fiche.html b/HTML exercices/ma-fiche.html
new file mode 100644
index 0000000..761a5c9
--- /dev/null
+++ b/HTML exercices/ma-fiche.html	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Ma fiche personnelle</title>
+</head>
+<body>
+	<h1>Ma fiche personnelle</h1>
+	<h2>Mes coordonnées</h2>
+	<img src="./images/gashy.jpeg" alt="petite gashy sauvage" height="250px">
+	<ul>
+		<li>Prénom : Coralie</li>
+		<li>Nom : Florquin</li>
+		<li>Courriel : <a href="mailto:florquin43@gmail.com" target="_blank">florquin43@gmail.com</a></li>
+		<li>Date de naissance : 22/01/2001</li>
+	</ul>
+	<h2>Mes hobbies</h2>
+	<ul>
+		<li>Sport
+			<ol>
+				<li>Danse</li>
+				<li>Lecture</li>	
+			</ol>
+		</li>
+		<li>lecture
+			<ol>
+				<li>La passe miroir</li>
+				<li>Le seigneur des anneaux</li>
+			</ol>
+		</li>
+		<li>Cuisine
+			<ol>
+				<li>quiche
+					<ul>
+						<li>oeuf</li>
+						<li>crème</li>
+					</ul>
+				</li>
+			</ol>
+		</li>
+
+	</ul>
+</body>
+</html>
\ No newline at end of file
diff --git a/HTML exercices/mutualite.html b/HTML exercices/mutualite.html
new file mode 100644
index 0000000..b8a0dcd
--- /dev/null
+++ b/HTML exercices/mutualite.html	
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8">
+        <title>Mutualité</title>
+    </head>
+    <body>
+        <form method="post" action=".">
+            <label for="champ1">Nom</label>
+            <input id="champ1" name="nom" type="text" required placeholder="Votre nom"> <br>
+
+            <label for="champ2">Nombre d'enfants</label>
+            <select id="nombre enfants" name="nombre enfants" required aria-placeholder="nombre d'enfants">
+                <option value="1" selected>1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+            </select> <br>
+
+            <label for="champ3">Rue</label>
+            <input id="champ3" name="Rue" type="text"> <br>
+
+            <label for="champ4">Numéro de maison</label>
+            <input id="champ4" name="Numéro de maison" type="number"> <br>
+
+            <label for="champ5">Indication de la boîte/appartement</label>
+            <input id="champ5" name="Indication de la boîte/appartement" type="text"> <br>
+
+            <label for="champ6">le code postal</label>
+            <input id="champ6" name="le code postal" type="number"> <br>
+
+            <label for="champ7">la localité</label>
+            <input id="champ7" name="la localité" type="text"> <br>
+
+            <label for="champ8">la province de Belgique</label>
+            <input id="champ8" name="la province de Belgique" type="text"> <br>
+
+            <label for="champ9">la description de la situation familiale</label>
+            <textarea id="champ9" cols="40" rows="3"></textarea><br>
+
+            <label for="champ10">le livret de famille</label>
+            <input id="champ10" type="file" name="le livret de famille" accept=".pdf, .docx"><br>
+
+            <input type="button" value="Aide"><br>
+
+            <input type="submit" name="Soumettre" value="Soumettre le formulaire">
+
+        </form>
+    </body>
\ No newline at end of file
diff --git a/HTML exercices/test.html b/HTML exercices/test.html
new file mode 100644
index 0000000..c068d29
--- /dev/null
+++ b/HTML exercices/test.html	
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="fr"><!-- commentaire: l'attribut "lang" indique 
+aux moteurs de recherche que le contenu est en français -->
+<head>
+    <meta charset="utf-8">
+    <title>Initiation au langage HTML</title>
+    <link rel="stylesheet" href="default.css">
+    <script src="support.js"></script>
+    <meta name="keywords" content="html,xml,xhtml,css,w3c,internet" >
+    <meta name="description" content="Initiation au développement web." >
+ </head>
+ <body>
+    <h1>La structure d'une page HTML</h1>
+    <h2> titre 2 </h2>
+    <h3> titre 3 </h3>
+    <h4> titre 4 </h4>
+    <h5> titre 5 </h5>
+    <h6> titre 6 </h6>
+    <p>&#24328;<br>&#39987;<br>&#40147;<br>&#17629;<br>&#23610;</p>
+    <p>
+        On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarrassantes).
+        <hr>
+        <a href="https://the-fantasy-of-ilvanya.eu/" target="_blank">
+            <img src="./Loutre.webp" alt="Loutre a cessé d'exister" width="1000px" height="1000px">
+        </a>
+    </p>
+    
+
+ </body>
+</html>
\ No newline at end of file
