web_2025/R1.02/tp/tp2/README.md

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


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

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 3

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 4
> 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 :

![systeme_solaire](./img/systeme_solaire.png ':-:')

### Exercice 5
> Vous aurez sans doute besoin d'utiliser les attributs `colspan` et `rowspan`.


À l'aide d'un tableau, reproduire la figure suivante :


![tableau](./img/table.png ':-:')