monnerat/web_2025
1
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

une correction du tp2

Browse Source
This commit is contained in:
Denis Monnerat
2025-11-23 11:00:46 +01:00
parent 68ca62927e
commit 7d81beb8bb
10 changed files with 489 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
R1.02/tp/tp2/README.md
View File

@@ -1,5 +1,7 @@
> Vous trouverez une correction du tp1 [ici](../tp1/correction). > Vous trouverez une correction du tp1 [ici](../tp1/correction).
> Vous trouverez une correction du tp2 [ici](../tp2/correction).
# TP HTML/CSS # TP HTML/CSS
- partie 1 : [html](#liens) - partie 1 : [html](#liens)

105
R1.02/tp/tp2/correction/exercice1.html Normal file
View File

@@ -0,0 +1,105 @@
<!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>
<nav>
<ul>
<li><a href="#law-1">Law 1</a></li>
<li><a href="#law-2">Law 2</a></li>
<li><a href="#law-3">Law 3</a></li>
<li><a href="#law-4">Law 4</a></li>
<li><a href="#law-5">Law 5</a></li>
<li><a href="#law-6">Law 6</a></li>
<li><a href="#law-7">Law 7</a></li>
<li><a href="#law-8">Law 8</a></li>
<li><a href="#law-9">Law 9</a></li>
<li><a href="#law-10">Law 10</a></li>
<li><a href="#law-11">Law 11</a></li>
</ul>
</nav>
<h2 id="law-1">Cartoon Law I (<a href="#">top</a>)</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 id="law-2">Cartoon Law II (<a href="#">top</a>)</h2>
<p>
A body passing through solid matter will leave a perforation conforming to its
perimeter called the silhouette of passage.
</p>
<h2 id="law-3">Cartoon Law III (<a href="#">top</a>)</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 id="law-4">Cartoon Law IV (<a href="#">top</a>)</h2>
<p>
All principles of gravity are negated by fear.
</p>
<h2 id="law-5">Cartoon Law V (<a href="#">top</a>)</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 id="law-6">Cartoon Law VI (<a href="#">top</a>)</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 id="law-7">Cartoon Law VII (<a href="#">top</a>)</h2>
<p>
As speed increases, objects can be in several places at once.
</p>
<h2 id="law-8">Cartoon Law VIII (<a href="#">top</a>)</h2>
<p>
A painted tunnel entrance may or may not be traversable
</p>
<h2 id="law-9">Cartoon Law IX (<a href="#">top</a>)</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 id="law-10">Cartoon Law X (<a href="#">top</a>)</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 id="law-11">Cartoon Law XI (<a href="#">top</a>)</h2>
<p>
Everything falls faster than an anvil.
</p>
</body>
</html>

83
R1.02/tp/tp2/correction/exercice2.html Normal file
View File

@@ -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>

85
R1.02/tp/tp2/correction/exercice3.html Normal file
View File

@@ -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>

53
R1.02/tp/tp2/correction/exercice4.html Normal file
View File

@@ -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>:‑) :-&gt;</span></li>
<li>Tongue-tied: <span>:‑&</span></li>
<li>Broken heart: <span>&lt;\3</span></li>
<li>Rose: <span>@}-&gt;--</span></li>
<li>Fish: <span>&gt;&lt;(((*&gt;</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>(&gt;_&lt;)</span></li>
<li>Sad: <span>("_")</span></li>
<li>Cat: <span>(=^·^=)</span></li>
<li>Headphones: <span>((d[-_-]b))</span></li>
</ul>
</body>
</html>

85
R1.02/tp/tp2/correction/exercice5.html Normal file
View File

@@ -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>

20
R1.02/tp/tp2/correction/exercice6.html Normal file
View File

@@ -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>

21
R1.02/tp/tp2/correction/style4.css Normal file
View File

@@ -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;
}

26
R1.02/tp/tp2/correction/style5.css Normal file
View File

@@ -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;
}

9
R1.02/tp/tp2/correction/style6.css Normal file
View File

@@ -0,0 +1,9 @@
table {
border-collapse: collapse;
}
td {
border:1px solid black;
width:50px;
height:50px;
}