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