135 lines
4.1 KiB
Markdown
135 lines
4.1 KiB
Markdown
> Vous trouverez une correction du tp1 [ici](../tp1/correction).
|
|
|
|
# TP HTML/CSS
|
|
|
|
- partie 1 : [html](#liens)
|
|
- partie 2 : [css](#texte)
|
|
|
|
|
|
|
|
## Liens
|
|
|
|
### Exercice 1
|
|
Ecrivez une page telle que la capture d'écran suivante :
|
|
|
|
|
|
|
|
>Il faut que le texte de chaque partie soit suffisamment long (au moins 2000 caractères), vous pouvez utiliser ce site pour générer du texte : [lorem ipsum](https://www.lipsum.com/)
|
|
|
|
Consignes :
|
|
- Le premier lien doit vous emmener à l'ancre situé sur le titre `Ma première partie`.
|
|
- Le second lien doit vous emmener à l'ancre situé sur le titre `Ma deuxième partie`.
|
|
- Le troisème lien doit vous emmener à l'ancre situé sur le titre `Ma première partie` dans un autre fichier.
|
|
|
|
> Vous pouvez dupliquer le fichier que vous venez d'écrire dans le même dossier.
|
|
|
|
|
|
## 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 :
|
|
- 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`, `hieght`.
|
|
|
|
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 :
|
|
|
|
|
|
|