Update SAE

.gitignore

@@ -73,3 +73,5 @@ tags
 # Persistent undo
 [._]*.un~
 
+#Visual Studio COde
+*.vscode

APL1.1/SAE11_2021/.vscode/tasks.json

@@ -1,29 +0,0 @@
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "cppbuild",
-			"label": "C/C++: gcc générer le fichier actif",
-			"command": "/usr/bin/gcc",
-			"args": [
-				"-fdiagnostics-color=always",
-				"-lm",
-				"-lgraph",
-				"-g",
-				"${file}",
-				"-o taquin.out main.o taquin.o utils.o graph_sup.o"
-			],
-			"options": {
-				"cwd": "${fileDirname}"
-			},
-			"problemMatcher": [
-				"$gcc"
-			],
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			},
-			"detail": "compilateur : /usr/bin/gcc"
-		}
-	]
-}

APL1.1/SAE11_2021/main.c

@@ -10,7 +10,7 @@
 #include "taquin.h"
 #include "lib_menu/menu.h"
 
-int main(void) {
+int main(int argc, char* argv[]) {
 	InitialiserGraphique();
 	CreerFenetre((Maxx() - WIDTH) / 2, (Maxy() - HEIGHT) / 2, 1200, 700);
 	ChoisirTitreFenetre("Taquin"); /* Ben alors Denis, on nous cache des fonctions ? */

APL1.2/TP02/alterations.c

@@ -0,0 +1,73 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<graph.h>
+
+struct rectangle {
+	int x;
+	int y;
+	int xx;
+	int yy;
+};
+
+typedef struct rectangle rect;
+
+void drawRect(rect Rekt) {
+	DessinerRectangle(Rekt.x, Rekt.y, Rekt.xx-Rekt.x, Rekt.yy-Rekt.y);
+}
+
+rect moveRect(rect Rekt, int x, int y) {
+	Rekt.x += x;
+	Rekt.y += y
+	Rekt.xx += x;
+	Rekt.yy += y;
+	return Rekt;
+}
+
+rect rotRectLeft(rect Rekt) {
+	
+}
+
+rect rotRectRight(rect Rekt) {
+	
+}
+
+int main(int argc, char * argv[]) {
+	InitialiserGraphique();
+	CreerFenetre(100,100,1200,700);
+
+	rect Rekt = {100,100,200,200};
+	int state = 0;
+
+	couleur white = CouleurParNom("white");
+
+	drawRect(Rekt);
+
+	while (1) {
+		if (ToucheEnAttente()) {
+			int key = Touche();
+			if (key == XK_Escape) return EXIT_SUCCESS;
+		}
+
+		if (SourisCliquee()) {
+			if (state == 0) {
+				Rekt.x = _X;
+				Rekt.y = _Y;
+				state = 1;
+			} else {
+				if (_X < Rekt.x ) {
+					Rekt.xx = Rekt.x;
+					Rekt.x = _X;
+				} else Rekt.xx = _X;
+				if (_Y < Rekt.y ) {
+					Rekt.yy = Rekt.y;
+					Rekt.y = _Y;
+				} else Rekt.yy = _Y;
+				state = 0;
+				drawRect(Rekt);
+			}
+		}
+	}
+	FermerGraphique();
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP02/complexes.c

@@ -0,0 +1,35 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<math.h>
+
+struct nb_complex {
+	float real;
+	float imaginary;
+};
+
+typedef struct nb_complex complex;
+
+float module(complex z) {
+	return sqrt(pow(z.real, 2) + pow(z.imaginary, 2));
+}
+
+complex conjugate(complex z) {
+	z.imaginary = -z.imaginary;
+	return z;
+}
+
+complex inverse(complex z) {
+	float a = z.real;
+	float b = z.imaginary;
+	z.real = a/(pow(a, 2) + pow(b, 2));
+	z.imaginary = -b/(pow(a, 2) + pow(b, 2));
+
+	return z;
+}
+
+int main(int argc, char * argv[]) {
+	complex a = {1.0f, 1.0f};
+	printf("%f\n", module(inverse(a)));
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP02/date.c

@@ -0,0 +1,12 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<time.h>
+
+int main(int argc, char * argv[]) {
+	time_t temps = time(NULL);
+	struct tm * timeInfos = localtime(&temps);
+
+	printf("Nous sommes le %4d-%2d-%2d\n", timeInfos->tm_year+1900, timeInfos->tm_mon, timeInfos->tm_mday);
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP02/groupe.c

@@ -0,0 +1,14 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<sys/types.h>
+#include<grp.h>
+#include<string.h>
+
+int main(int argc, char * argv[]) {
+	struct group * students21 = getgrnam("students21");
+	char ** names = students21->gr_mem;
+	
+	printf("%c", names[1]);
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP02/rectangles.c

@@ -0,0 +1,57 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<graph.h>
+
+struct rectangle {
+	int x;
+	int y;
+	int xx;
+	int yy;
+};
+
+typedef struct rectangle rect;
+
+void drawRect(rect Rekt) {
+	DessinerRectangle(Rekt.x, Rekt.y, Rekt.xx-Rekt.x, Rekt.yy-Rekt.y);
+}
+
+int main(int argc, char * argv[]) {
+	InitialiserGraphique();
+	CreerFenetre(100,100,1200,700);
+
+	rect Rekt = {100,100,200,200};
+	int state = 0;
+
+	couleur white = CouleurParNom("white");
+
+	drawRect(Rekt);
+
+	while (1) {
+		if (ToucheEnAttente()) {
+			int key = Touche();
+			if (key == XK_Escape) return EXIT_SUCCESS;
+		}
+
+		if (SourisCliquee()) {
+			if (state == 0) {
+				Rekt.x = _X;
+				Rekt.y = _Y;
+				state = 1;
+			} else {
+				if (_X < Rekt.x ) {
+					Rekt.xx = Rekt.x;
+					Rekt.x = _X;
+				} else Rekt.xx = _X;
+				if (_Y < Rekt.y ) {
+					Rekt.yy = Rekt.y;
+					Rekt.y = _Y;
+				} else Rekt.yy = _Y;
+				state = 0;
+				drawRect(Rekt);
+			}
+		}
+	}
+	FermerGraphique();
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP02/tailles.c

@@ -0,0 +1,15 @@
+#include<stdio.h>
+#include<stdlib.h>
+
+struct enregistrement {
+	int champ1;
+	char champ2;
+	char champ3;
+};
+
+int main(int argc, char * argv[]) {
+	struct enregistrement toto = {};
+	printf("%d\n", sizeof(toto));
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP03/challenger.c

@@ -0,0 +1,54 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<string.h>
+
+int main(int argc, char * argv[]) {
+	FILE* flux;
+	flux = fopen("top10", "r");
+
+	int NewRank = atoi(argv[1]);
+	int added = 0;
+
+	char* ChallengerNames[11] = {};
+	int ChallengerRanks[11] = {};
+
+	int count = 0;
+
+	if (flux) {
+		do {
+			int rank;
+			char * name = calloc(4, sizeof(char));
+
+			fread(&rank, 4, 1, flux);
+			fread(name, 1, 3, flux);
+
+			if (rank < NewRank && !added) {
+				ChallengerNames[count] = calloc(4, sizeof(char));
+				strcpy(ChallengerNames[count], argv[2]);
+				ChallengerRanks[count] = NewRank;
+				added = 1;
+				count++;
+			}
+
+			ChallengerNames[count] = calloc(4, sizeof(char));
+			strcpy(ChallengerNames[count], name);
+			ChallengerRanks[count] = rank;
+			count++;
+
+		} while (!feof(flux));
+		fclose(flux);
+
+		flux = fopen("top10", "w");
+		if (flux) {
+			//printf("%d\n", count);
+			/*for (int i = 0; i < count-2; i++) {
+				printf("%s\n", ChallengerNames[i]);
+				fwrite(&ChallengerRanks[i], 4, 1, flux);
+				fwrite(&ChallengerNames[i], 1, 3, flux);
+			}*/
+			fclose(flux);
+		}
+	}
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP03/records.c

@@ -0,0 +1,35 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<string.h>
+
+int main(int argc, char * argv[]) {
+	FILE* flux;
+	flux = fopen("top10", "r");
+
+	char name1[4] = "aaa";
+	char name2[4] = "bbb";
+	char name3[4] = "ccc";
+
+	if (flux) {
+		do {
+			int score;
+			char* name = calloc(3, sizeof(char));
+			fread(&score, 4, 1, flux);
+			fread(name, 1, 3, flux);
+			
+			if (feof(flux)) break;
+
+			strcpy(name3, name2);
+			strcpy(name2, name1);
+			strcpy(name1, name);
+		} while (!feof(flux));
+
+		printf("1ere place : %s\n", name1);
+		printf("2eme place : %s\n", name2);
+		printf("3eme place : %s\n", name3);
+
+		fclose(flux);
+	}
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP04/compteur.c

@@ -0,0 +1,24 @@
+#include<stdio.h>
+#include<stdlib.h>
+
+int main(int argc, char * argv[]) {
+	FILE* flux = fopen("compte", "r");
+	int compte = 0;
+
+	if (flux) {
+		fread(&compte, 4, 1, flux);
+	}
+
+	compte++;
+
+	printf("%d\n", compte);
+
+	flux = fopen("compte", "w");
+	if (flux) {
+		fwrite(&compte, 4, 1, flux);
+		fclose(flux);
+	}
+
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP04/hexadecimal.c

@@ -0,0 +1,28 @@
+#include<stdio.h>
+#include<stdlib.h>
+
+int main(int argc, char * argv[]) {
+	FILE* flux = fopen(argv[1], "r");
+
+	if (flux) {
+		unsigned char lettre, count = 0;
+
+		while(!feof(flux)) {
+			if (count == 0) puts("");
+			fread(&lettre, 1, 1, flux);
+			printf("%02x", lettre);
+			fread(&lettre, 1, 1, flux);
+			printf("%02x ", lettre);
+
+			count = (count + 1) % 8;
+		}
+
+		puts("");
+		fclose(flux);
+	} else {
+		puts("Error : Could not open file.");
+		return EXIT_FAILURE;
+	}
+	return EXIT_SUCCESS;
+}
+

APL1.2/TP04/image.c

@@ -0,0 +1,30 @@
+#include<stdio.h>
+#include<stdlib.h>
+#include<graph.h>
+
+int main(int argc, char * argv[]) {
+	int width, height;
+	couleur color;
+	FILE* flux = fopen("image.bin", "r");
+	if (flux) {
+
+		fread(&width, 4, 1, flux);
+		fread(&height, 4, 1, flux);
+
+		InitialiserGraphique();
+		CreerFenetre(100, 100, width, height);
+
+		for (int x = 0; x < width; x++) {
+			for (int y = 0; y < height; y++) {
+				fread(&color, sizeof(couleur), 1, flux);
+				ChoisirCouleurDessin(color);
+				DessinerPixel(x, y);
+			}
+		}
+
+		Touche();
+		FermerGraphique();
+ 		return EXIT_SUCCESS;
+	} else return EXIT_FAILURE;
+}
+

HTML/TP01/Exercice1.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+	<head>
+		<title>Le W3C</title>
+	</head>
+	<body>
+		<h1>Le W3C</h1>
+		
+		<p>Le <abbr title="World Wide Web Consortium">W3C</abbr> est un consortium créé le <time datetime="1994-10-01">1<sup>er</sup> octobre 1994</time> par Tim Berners-Lee, principal
+		inventeur du <em>World Wide Web</em> en <time datetime="1989">1989</time>,  pour promouvoir la compatibilité et  donc
+		la normalisation des technologies du World Wide Web. Avant le W3C, c'était l'<abbr title="Internet Engineering Task Force">IETF</abbr>, 
+		un autre organisme important de l'Internet, qui était en charge de cette mission.</p>
+		
+		<p>Le W3C a par exemple standardisé les technologies <abbr title="HyperText Markup Language">HTML</abbr> et <abbr title="Extensible Markup Language">XML</abbr>.</p>
+	</body>
+</html>

HTML/TP01/Exercice2.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<title>Emoticons</title>
+	</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).
+
+		<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>
+
+		<p>Smiley: :‑) :-&gt;<br>Tongue-tied: :‑&amp;<br>Broken heart: &lt;\3<br>Rose: @}->--<br>Fish: &gt;&lt;(((*&gt;</p>
+		
+		<h2>Eastern</h2>
+		<p>Eastern emoticons generally are not rotated sideways. They first arose in Japan, where they are referred to as kaomoji.</p>
+
+		<p>Troubled: (&gt;_&lt;)<br>Sad: (&quot;_&quot;)<br>Cat: (=^·^=)<br>Headphones: ((d[-_-]b))</p>
+	</body>
+</html>

HTML/TP01/Exercice3.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+	<head>
+		<title>Mes sites web préférés</title>
+	</head>
+	<body>
+		<h1>Mes sites préférés</h1>
+		<p>Parmis mes sites Web préférés, on y trouve :</p>
+		<ul>
+			<li><a href="http://www.iut-fbleau.fr" target="_blank">Le site du l'IUT</a></li>
+			<li><a href="https://www.youtube.com" target="_blank">Youtube</a></li>
+			<li><a href="https://dwarves.iut-fbleau.fr/gitiut/horville" target="_blank">Mon dépot en ligne</a></li>
+			<li><a href="https://validator.w3.org/">Le site de validation de W3C</a></li>
+		</ul>
+		<br>
+		<p>Par ordre d'importance, je pourrais les classer comme ceci:</p>
+		<ol>
+			<li><a href="https://www.youtube.com" target="_blank">Youtube</a></li>
+			<li><a href="https://dwarves.iut-fbleau.fr/gitiut/horville" target="_blank">Mon dépot en ligne</a></li>
+			<li><a href="http://www.iut-fbleau.fr" target="_blank">Le site du l'IUT</a></li>	
+			<li><a href="https://validator.w3.org/">Le site de validation de W3C</a></li>
+		</ol>
+		<br>
+		<dl>
+			<dt><a href="http://www.iut-fbleau.fr" target="_blank">Le site du l'IUT</a></dt>
+			<dd>On y trouve notament toutes les resources informatiques nécéssaire aux étudiants du BUT Info.</dd>
+			<dt><a href="https://www.youtube.com" target="_blank">Youtube</a></dt>
+			<dd>Qui regorge de vidéos en tous genres afin de se distraire</dd>
+			<dt><a href="https://dwarves.iut-fbleau.fr/gitiut/horville" target="_blank">Mon dépot en ligne</a></dt>
+			<dd>Qui contient tous mes travaux en informatique</dd>
+			<dt><a href="https://validator.w3.org/">Le site de validation de W3C</a></dt>
+			<dd>Qui sert à valider le contenu d'un document HTML et ainsi d'être sur qu'il soit à la norme.</dd>
+		</dl>
+	</body>
+</html>

HTML/TP01/Exercice4.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+	<head>
+		<meta charset="utf-8">
+		<title>Le Système Solaire</title>
+	</head>
+	<body>
+		<h1>Les planètes du système solaire</h1>
+		<table>
+			<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>
+					<th>Photo</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Mercure</td>
+					<td>0,38709893</td>
+					<td>0,205</td>
+					<td>7</td>
+					<td>0,241</td>
+					<td><img
+						src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Mercury_in_color_-_Prockter07_centered.jpg/280px-Mercury_in_color_-_Prockter07_centered.jpg"
+						width="75"
+						alt="Mecure">
+					</td>
+				</tr>
+				<tr>
+					<td>Venus</td>
+					<td>0,72333199</td>
+					<td>0,007</td>
+					<td>3,4</td>
+					<td>0,615</td>
+					<td><img 
+						src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Venus-real_color.jpg/280px-Venus-real_color.jpg"
+						width="75"
+						alt="Venus">
+					</td>
+				</tr>
+				<tr>
+					<td>Terre</td>
+					<td>1</td>
+					<td>0,017</td>
+					<td>0</td>
+					<td>1</td>
+					<td><img 
+						src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Earth_by_the_EPIC_Team_on_21_April_2018.png"
+						width="75"
+						alt="Terre">
+					</td>
+				</tr>
+				<tr>
+					<td>Mars</td>
+					<td>1,52366231</td>
+					<td>0,094</td>
+					<td>1,9</td>
+					<td>1,881</td>
+					<td><img
+						src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Mars_Valles_Marineris_EDIT.jpg/280px-Mars_Valles_Marineris_EDIT.jpg"
+						width="75"
+						alt="Mars">
+					</td>
+				</tr>
+				<tr>
+					<td>Jupiter</td>
+					<td>5,20336301</td>
+					<td>0,049</td>
+					<td>1,3</td>
+					<td>11,862</td>
+					<td><img 
+						src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Jupiter.jpg"
+						width="75"
+						alt="Jupiter">
+					</td>
+				</tr>
+				<tr>
+					<td>Saturne</td>
+					<td>9,6</td>
+					<td>0,057</td>
+					<td>2,5</td>
+					<td>29,452</td>
+					<td><img 
+						src="https://img.maxisciences.com/s3/frgsl/1024/astronomie/default_2021-06-14_8869d225-986d-4dfb-a2e6-055761d85705.jpeg"
+						width="75"
+						alt="Saturne">
+					</td>
+				</tr>
+				<tr>
+					<td>Uranus</td>
+					<td>2872,5</td>
+					<td>0,8</td>
+					<td>97,8</td>
+					<td>30,589</td>
+					<td><img 
+						src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Uranus2.jpg/280px-Uranus2.jpg"
+						width="75"
+						alt="Uranus">
+					</td>
+				</tr>
+				<tr>
+					<td>Neptune</td>
+					<td>4495,1</td>
+					<td>1,8</td>
+					<td>28,3</td>
+					<td>59,8</td>
+					<td><img 
+						src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/280px-Neptune.jpg"
+						width="75"
+						alt="Neptune">
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</body>
+</html>

HTML/TP01/Exercice5.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+	<head>
+		<title>Les couches du développement WEB</title>
+	</head>
+	<body>
+		<h1>Les différentes couches du développement WEB :</h1>
+		<img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg"
+		width="700"
+		alt="pyramide_couches_web"
+		usemap="#picmap">
+
+		<map name="picmap">
+			<area shape="poly" coords="233,203,350,0,467,203" href="https://developer.mozilla.org/docs/Web/JavaScript" target="_blank" alt="JavaScript">
+			<area shape="poly" coords="233,203,467,203,583,404,117,404" href="https://developer.mozilla.org/docs/Web/CSS" target="_blank" alt="CSS">
+			<area shape="poly" coords="117,404,583,404,700,603,0,603" href="https://developer.mozilla.org/docs/Web/HTML" target="_blank" alt="HTML">
+		</map>
+	</body>
+</html>

HTML/TP01/Exercice6.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+printf "<!DOCTYPE html>\n<html lang=\"fr-FR\">\n<body>\n" > $2
+printf "<h1>"$(readlink -f $1)"</h1>\n" >> $2	
+printf "<table>\n<thead>\n<tr>\n<th>Nom du fichier</th>\n<th>Droits</th>\n<th>Taille</th>\n</tr>\n</thead>" >> $2
+for file in $(ls $1)
+do
+	stat $file --format="<tr><td>%n</td><td>%A</td><td>%s</td></tr>" >> $2
+done
+
+printf "</table>\n</body>\n</html>" >> $2

HTML/TP01/toto.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+<body>
+<h1>/export/home/an21/horville/APL/HTML/TP01</h1>
+<table>
+<thead>
+<tr>
+<th>Nom du fichier</th>
+<th>Droits</th>
+<th>Taille</th>
+</tr>
+</thead><tr><td>Exercice1.html</td><td>-rw-r--r--</td><td>824</td></tr>
+<tr><td>Exercice2.html</td><td>-rw-r--r--</td><td>967</td></tr>
+<tr><td>Exercice3.html</td><td>-rw-r--r--</td><td>1725</td></tr>
+<tr><td>Exercice4.html</td><td>-rw-r--r--</td><td>2832</td></tr>
+<tr><td>Exercice5.html</td><td>-rw-r--r--</td><td>843</td></tr>
+<tr><td>Exercice6.sh</td><td>-rwxr-xr-x</td><td>380</td></tr>
+<tr><td>toto.html</td><td>-rw-r--r--</td><td>568</td></tr>
+</table>
+</body>
+</html>

HTML/TP02/exercice1-bis.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="FR-fr">
+	<head>
+		<title>Lorem Ipsum</title>
+	</head>
+	<body>
+		<h1>Mon deuxième article de blog</h1>
+		<h2 id="partie-1">Ma première partie</h2>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, est sit amet pellentesque feugiat, tortor ex bibendum ante, non luctus mauris nisi eget leo. Vestibulum justo enim, imperdiet vitae fermentum nec, pellentesque vitae nisl. Pellentesque placerat risus non massa mattis dignissim. In non venenatis diam. Donec sit amet finibus arcu. Nunc elit enim, convallis ut ex ac, euismod congue risus. Suspendisse nibh lectus, facilisis eu commodo at, luctus at urna. Aenean laoreet elit sit amet rhoncus viverra. Sed porta purus a rutrum iaculis. Nunc commodo ex urna, ac faucibus odio posuere vitae. Nam pellentesque tellus eget risus pharetra imperdiet. Maecenas semper feugiat lectus sed rutrum. Cras imperdiet ligula eu ornare bibendum. Phasellus semper arcu quis ex viverra, nec pharetra nunc porttitor. Vivamus tempor tortor metus, vel ornare diam malesuada sit amet. In hac habitasse platea dictumst.</p>
+
+		<p>Nullam sollicitudin lectus eget vestibulum ullamcorper. Fusce non sagittis tortor, in aliquet quam. Nunc convallis lacinia risus id mollis. Praesent enim ex, consectetur et aliquet ac, commodo quis arcu. In faucibus posuere sollicitudin. Fusce ultricies mi sed aliquet ultricies. Cras tempor nunc diam, sed gravida nisl facilisis vitae. Morbi condimentum sodales ex, eu ultricies risus. Integer tincidunt orci ut felis tempus, eu ullamcorper urna imperdiet. Curabitur lectus ante, lobortis vitae pretium a, sodales non sapien. Duis mollis convallis mollis. Nunc pellentesque nisl vel justo placerat porta. Mauris commodo mauris sed felis sagittis, vel commodo diam dictum. Duis iaculis vel sapien eu volutpat. Quisque nec finibus augue.</p>
+
+		<p>Etiam posuere auctor diam eu hendrerit. Aenean vulputate lectus laoreet mi condimentum, eu iaculis ipsum scelerisque. Pellentesque porta nec odio fermentum sodales. Vestibulum id hendrerit sem, at viverra turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tristique non turpis at auctor. Aenean mattis augue dui, sed sodales elit facilisis sed. Quisque finibus cursus dui. Duis rutrum lectus in ullamcorper lobortis. Ut interdum turpis eu tortor accumsan, at molestie velit tincidunt. Aliquam erat volutpat. Vestibulum convallis pharetra quam sagittis pellentesque. Maecenas euismod libero orci, ac laoreet felis laoreet in. Curabitur at dui neque.</p>
+
+		<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vehicula ex eu odio efficitur, in rutrum arcu pulvinar. Donec blandit semper est a suscipit. Quisque maximus felis a elit tempor, vitae ultrices quam laoreet. In in luctus mauris, ut tincidunt nulla. Sed a ipsum fringilla, tincidunt tortor ac, porttitor sapien. Quisque ultrices dignissim dui, ut congue nisi pharetra sit amet. Morbi id feugiat mi, non bibendum lorem. Donec mauris augue, vulputate non nisi non, ultricies faucibus magna. Nam in eleifend magna. Phasellus ac odio pulvinar, dictum ipsum id, tempus turpis. Vestibulum id nibh risus.</p>
+
+		<p>Duis sollicitudin mollis sollicitudin. Vestibulum consequat maximus eros et efficitur. Nulla porttitor blandit nisl aliquam tincidunt. Duis gravida id lacus eu condimentum. Pellentesque faucibus varius erat vitae blandit. Etiam efficitur dolor in velit hendrerit, id elementum arcu rutrum. Vivamus fermentum justo quis felis sagittis pharetra. Proin lacus dui, sollicitudin tempor augue a, suscipit suscipit purus. Ut sit amet euismod lorem. Sed sit amet dignissim dolor. Integer at neque consequat, varius metus vitae, rhoncus massa. </p>
+	</body>
+</html>

HTML/TP02/exercice1.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="FR-fr">
+	<head>
+		<title>Lorem Ipsum</title>
+	</head>
+	<body>
+		<a href="#partie-1">Partie 1</a>
+		<br>
+		<a href="#partie-2">Partie 2</a>
+		<br>
+		<a href="../exercice1-bis.html/#partie-1">Partie 3</a>
+		
+		<h1>Mon article de blog</h1>
+		<h2 id="partie-1">Ma première partie</h2>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, est sit amet pellentesque feugiat, tortor ex bibendum ante, non luctus mauris nisi eget leo. Vestibulum justo enim, imperdiet vitae fermentum nec, pellentesque vitae nisl. Pellentesque placerat risus non massa mattis dignissim. In non venenatis diam. Donec sit amet finibus arcu. Nunc elit enim, convallis ut ex ac, euismod congue risus. Suspendisse nibh lectus, facilisis eu commodo at, luctus at urna. Aenean laoreet elit sit amet rhoncus viverra. Sed porta purus a rutrum iaculis. Nunc commodo ex urna, ac faucibus odio posuere vitae. Nam pellentesque tellus eget risus pharetra imperdiet. Maecenas semper feugiat lectus sed rutrum. Cras imperdiet ligula eu ornare bibendum. Phasellus semper arcu quis ex viverra, nec pharetra nunc porttitor. Vivamus tempor tortor metus, vel ornare diam malesuada sit amet. In hac habitasse platea dictumst.</p>
+
+		<p>Nullam sollicitudin lectus eget vestibulum ullamcorper. Fusce non sagittis tortor, in aliquet quam. Nunc convallis lacinia risus id mollis. Praesent enim ex, consectetur et aliquet ac, commodo quis arcu. In faucibus posuere sollicitudin. Fusce ultricies mi sed aliquet ultricies. Cras tempor nunc diam, sed gravida nisl facilisis vitae. Morbi condimentum sodales ex, eu ultricies risus. Integer tincidunt orci ut felis tempus, eu ullamcorper urna imperdiet. Curabitur lectus ante, lobortis vitae pretium a, sodales non sapien. Duis mollis convallis mollis. Nunc pellentesque nisl vel justo placerat porta. Mauris commodo mauris sed felis sagittis, vel commodo diam dictum. Duis iaculis vel sapien eu volutpat. Quisque nec finibus augue.</p>
+
+		<p>Etiam posuere auctor diam eu hendrerit. Aenean vulputate lectus laoreet mi condimentum, eu iaculis ipsum scelerisque. Pellentesque porta nec odio fermentum sodales. Vestibulum id hendrerit sem, at viverra turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tristique non turpis at auctor. Aenean mattis augue dui, sed sodales elit facilisis sed. Quisque finibus cursus dui. Duis rutrum lectus in ullamcorper lobortis. Ut interdum turpis eu tortor accumsan, at molestie velit tincidunt. Aliquam erat volutpat. Vestibulum convallis pharetra quam sagittis pellentesque. Maecenas euismod libero orci, ac laoreet felis laoreet in. Curabitur at dui neque.</p>
+
+		<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vehicula ex eu odio efficitur, in rutrum arcu pulvinar. Donec blandit semper est a suscipit. Quisque maximus felis a elit tempor, vitae ultrices quam laoreet. In in luctus mauris, ut tincidunt nulla. Sed a ipsum fringilla, tincidunt tortor ac, porttitor sapien. Quisque ultrices dignissim dui, ut congue nisi pharetra sit amet. Morbi id feugiat mi, non bibendum lorem. Donec mauris augue, vulputate non nisi non, ultricies faucibus magna. Nam in eleifend magna. Phasellus ac odio pulvinar, dictum ipsum id, tempus turpis. Vestibulum id nibh risus.</p>
+
+		<p>Duis sollicitudin mollis sollicitudin. Vestibulum consequat maximus eros et efficitur. Nulla porttitor blandit nisl aliquam tincidunt. Duis gravida id lacus eu condimentum. Pellentesque faucibus varius erat vitae blandit. Etiam efficitur dolor in velit hendrerit, id elementum arcu rutrum. Vivamus fermentum justo quis felis sagittis pharetra. Proin lacus dui, sollicitudin tempor augue a, suscipit suscipit purus. Ut sit amet euismod lorem. Sed sit amet dignissim dolor. Integer at neque consequat, varius metus vitae, rhoncus massa. </p>
+		
+		<h2 id="partie-2">Ma deuxième partie</h2>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, est sit amet pellentesque feugiat, tortor ex bibendum ante, non luctus mauris nisi eget leo. Vestibulum justo enim, imperdiet vitae fermentum nec, pellentesque vitae nisl. Pellentesque placerat risus non massa mattis dignissim. In non venenatis diam. Donec sit amet finibus arcu. Nunc elit enim, convallis ut ex ac, euismod congue risus. Suspendisse nibh lectus, facilisis eu commodo at, luctus at urna. Aenean laoreet elit sit amet rhoncus viverra. Sed porta purus a rutrum iaculis. Nunc commodo ex urna, ac faucibus odio posuere vitae. Nam pellentesque tellus eget risus pharetra imperdiet. Maecenas semper feugiat lectus sed rutrum. Cras imperdiet ligula eu ornare bibendum. Phasellus semper arcu quis ex viverra, nec pharetra nunc porttitor. Vivamus tempor tortor metus, vel ornare diam malesuada sit amet. In hac habitasse platea dictumst.</p>
+
+		<p>Nullam sollicitudin lectus eget vestibulum ullamcorper. Fusce non sagittis tortor, in aliquet quam. Nunc convallis lacinia risus id mollis. Praesent enim ex, consectetur et aliquet ac, commodo quis arcu. In faucibus posuere sollicitudin. Fusce ultricies mi sed aliquet ultricies. Cras tempor nunc diam, sed gravida nisl facilisis vitae. Morbi condimentum sodales ex, eu ultricies risus. Integer tincidunt orci ut felis tempus, eu ullamcorper urna imperdiet. Curabitur lectus ante, lobortis vitae pretium a, sodales non sapien. Duis mollis convallis mollis. Nunc pellentesque nisl vel justo placerat porta. Mauris commodo mauris sed felis sagittis, vel commodo diam dictum. Duis iaculis vel sapien eu volutpat. Quisque nec finibus augue.</p>
+
+		<p>Etiam posuere auctor diam eu hendrerit. Aenean vulputate lectus laoreet mi condimentum, eu iaculis ipsum scelerisque. Pellentesque porta nec odio fermentum sodales. Vestibulum id hendrerit sem, at viverra turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tristique non turpis at auctor. Aenean mattis augue dui, sed sodales elit facilisis sed. Quisque finibus cursus dui. Duis rutrum lectus in ullamcorper lobortis. Ut interdum turpis eu tortor accumsan, at molestie velit tincidunt. Aliquam erat volutpat. Vestibulum convallis pharetra quam sagittis pellentesque. Maecenas euismod libero orci, ac laoreet felis laoreet in. Curabitur at dui neque.</p>
+
+		<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vehicula ex eu odio efficitur, in rutrum arcu pulvinar. Donec blandit semper est a suscipit. Quisque maximus felis a elit tempor, vitae ultrices quam laoreet. In in luctus mauris, ut tincidunt nulla. Sed a ipsum fringilla, tincidunt tortor ac, porttitor sapien. Quisque ultrices dignissim dui, ut congue nisi pharetra sit amet. Morbi id feugiat mi, non bibendum lorem. Donec mauris augue, vulputate non nisi non, ultricies faucibus magna. Nam in eleifend magna. Phasellus ac odio pulvinar, dictum ipsum id, tempus turpis. Vestibulum id nibh risus.</p>
+
+		<p>Duis sollicitudin mollis sollicitudin. Vestibulum consequat maximus eros et efficitur. Nulla porttitor blandit nisl aliquam tincidunt. Duis gravida id lacus eu condimentum. Pellentesque faucibus varius erat vitae blandit. Etiam efficitur dolor in velit hendrerit, id elementum arcu rutrum. Vivamus fermentum justo quis felis sagittis pharetra. Proin lacus dui, sollicitudin tempor augue a, suscipit suscipit purus. Ut sit amet euismod lorem. Sed sit amet dignissim dolor. Integer at neque consequat, varius metus vitae, rhoncus massa. </p>
+	</body>
+</html>

HTML/TP02/exercice2.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="FR-fr">
+	<head>
+		<title>Formulaire</title>
+	</head>
+	<body>
+		<h1>Formulaire</h1>
+		<form method="post" action="https://dwarves.iut-fbleau.fr/requete.php">
+			<label>Nom: <input type=text name="Nom" placeholder="Dupond"></label><br>
+			<label>Prénom: <input type="text" name="Prénom" placeholder="Jean"></label><br>
+			<label>Date de naissance : <input type="date" name="Date de naissance"></label><br>
+			<label>Adresse E-Mail: <input type="email" name="Email" placeholder="toto.exemple@u-pec.fr"></label><br>
+			<label>Code Postale: <input type="number" name="Code Postal" placeholder="77300"></label><br>
+			<label>Téléphone Portable: <input type="text" name="Téléphone portable" placeholder="0123456789" maxlength="10"></label><br>
+			<label>Sexe: </label>
+			<label><input type="radio" name="Sexe" value="male">Homme</label>
+			<label><input type="radio" name="Sexe" value="female">Femme</label>
+			<label><input type="radio" name="Sexe" value="other">Autre</label><br>
+			<label>Semestre: <select name="Semestre">
+				<option value="">Veuillez sélectionnez un semestre</option>
+				<option value="S1">Semestre 1</option>
+				<option value="S2">Semestre 2</option>
+				<option value="S3">Semestre 3</option>
+				<option value="S4">Semestre 4</option>
+			</select></label><br>
+			<label>Niveau en html: <input type="range" name="Niveau en html" value="5" min="0" max="10" step="1"/></label><br>
+			<label>Message: <textarea name="Message" rows="20" cols="50"></textarea></label><br><br>
+			<input type="reset" value="Remise à zéro"><input type="submit" value="Envoyer le formulaire">
+		</form>
+	</body>
+</html>

HTML/TP02/exercice3.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="FR-fr">
+	<head>
+		<title>Formulaire</title>
+	</head>
+	<body>
+		<h1>Formulaire</h1>
+		<form method="post" action="https://dwarves.iut-fbleau.fr/requete.php">
+			<label>Nom: <input type=text name="Nom" placeholder="Dupond"></label><br>
+			<label>Prénom: <input type="text" name="Prénom" placeholder="Jean"></label><br>
+			<label>Date de naissance : <input type="date" name="Date de naissance"></label><br>
+			<label>Adresse E-Mail: <input type="email" name="Email" placeholder="toto.exemple@u-pec.fr"></label><br>
+			<label>Code Postale: <input type="number" name="Code Postal" placeholder="77300"></label><br>
+			<label>Téléphone Portable: <input type="tel" name="Téléphone portable" 
+				placeholder="01 23 45 67 89" 
+				maxlength="14"
+				pattern="[0 6-7]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"></label><br>
+			<label>Sexe: </label>
+			<label><input type="radio" name="Sexe" value="male">Homme</label>
+			<label><input type="radio" name="Sexe" value="female">Femme</label>
+			<label><input type="radio" name="Sexe" value="other">Autre</label><br>
+			<label>Semestre: <select name="Semestre">
+				<option value="S1">Semestre 1</option>
+				<option value="S2" selected>Semestre 2</option>
+				<option value="S3">Semestre 3</option>
+				<option value="S4">Semestre 4</option>
+			</select></label><br>
+			<label>Niveau en html: <input type="range" name="Niveau en html" value="5" min="0" max="10" step="1"/></label><br>
+			<label>Message: <textarea name="Message" rows="20" cols="50"></textarea></label><br><br>
+			<input type="reset" value="Remise à zéro"><input type="submit" value="Envoyer le formulaire">
+		</form>
+	</body>
+</html>

HTML/TP02/exercice4-réponse.txt

@@ -0,0 +1,9 @@
+Le code CSS change le style par défaut des éléments suivants :
+
+	* Tous les éléments de texte inclus dans body auront comme police : "sans-serif"
+
+	* Les titres h1 seront en plus d'être en "sans-serif", en petites majuscules.
+
+	* Les titres h2 auront une couleur d'arrière plan de #aaaaaa, une marge de 10 pixels et seront en italique.
+
+	* Les éléments span seront en monospace gras et auront comme couleur (pas d'arrière plan) #aa4512.

HTML/TP02/exercice4.css

@@ -0,0 +1,20 @@
+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;
+}

HTML/TP02/exercice4.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<title>Emoticons</title>
+		<link rel="stylesheet" href="exercice4.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).
+
+		<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>
+
+		<p>Smiley: :‑) :-&gt;<br>Tongue-tied: :‑&amp;<br>Broken heart: &lt;\3<br>Rose: @}->--<br>Fish: &gt;&lt;(((*&gt;</p>
+		
+		<h2>Eastern</h2>
+		<p>Eastern emoticons generally are not rotated sideways. They first arose in Japan, where they are referred to as kaomoji.</p>
+
+		<p>Troubled: (&gt;_&lt;)<br>Sad: (&quot;_&quot;)<br>Cat: (=^·^=)<br>Headphones: ((d[-_-]b))</p>
+	</body>
+</html>

HTML/TP02/exercice5.css

@@ -0,0 +1,23 @@
+body {
+	font-family: sans-serif;
+}
+
+h1 {
+	font-size: 15px;
+	font-variant: small-caps;
+}
+
+thead {
+	border-color: #000000;
+}
+
+th {
+	font-size: 15px;
+	font-variant: small-caps;
+	border-top: 2px solid rgb(0, 0, 0);
+	border-bottom: 2px solid rgb(0, 0, 0);
+}
+
+td {
+	border-bottom: 1px solid rgb(190,190,190);
+}

HTML/TP02/exercice5.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+	<head>
+		<meta charset="utf-8">
+		<title>Le Système Solaire</title>
+		<link rel="stylesheet" href="exercice5.css"/>
+	</head>
+	<body>
+		<h1>Les planètes du système solaire</h1>
+		<table>
+			<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>

HTML/TP02/exercice6.css

@@ -0,0 +1,4 @@
+td {
+	border: 1px solid rgb(0, 0, 0);
+	
+}

HTML/TP02/exercice6.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html land="FR-fr">
+	<head>
+		<title>Tableau</title>
+		<link rel="stylesheet" href="exercice6.css"/>
+	</head>
+	<body>
+		<table cellspacing="0">
+			<tbody>
+				<tr>
+					<td width="50" height="250"/>
+					<td width="50" height="250"/>
+				</tr>
+			</tbody>
+		</table>
+	</body>
+</html>