web_2024/R1.02/tp/tp2

Vous trouverez une correction du tp1 ici.

TP HTML/CSS

• partie 1 : html
• partie 2 : css

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

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

  <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.
  
• Utilisez l'attribut name pour donner un nom aux "variables" du formulaire transmises au serveur.
  
• Utilisez les types html5 dédiés.
  
• Regardez aussi les attributs placeholder, pattern, et les balises fieldset et label.
  

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 !
Le formulaire contiendra un bouton reset, et submit.

La formulaire sera soumis par la méthode POST au script générique

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 de l'élément input permet de donner une expression rationnelle que doit vérifier la valeur du champ texte. Le site http://www.html5pattern.com regorge d'exemples utiles.

Texte

Exercice 4

On reprend l'exercice 2 du tp1 dont voici une correction. 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, dont voici une correction. 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 :