TP N°3 HTML 5 CSS3 4eme STI

Module 2 : Systèmes, technologies et Internet
HTML5 CSS3
TP N°3 Important :
Créer un dossier de travail en le nommant "TP3 STI où seront enregistrés tous les documents à réaliser.
Une société de vente de voitures offre à ses clients la possibilité de tester et évaluer les nouveaux
modèles qu’elle dispose. L’évaluation consiste à attribuer trois notes en fonction des critères
suivants : sécurité, conduite et confort.
On demande de créer, pour cette société, un site Web offrant les services ci-dessous :
 Enregistrer un testeur,
 Évaluer un modèle de voiture,
 Éditer un bilan statistique des évaluations.
Travail demandé
1. Créer la page « index.html » comme illustré ci-dessous :
Zone1
Zone2
Zone3
Zone4
Sachant que :
 Zone1 contiendra le titre suivant « Épreuve pratique STI 2022 »
 Zone2 contiendra la page "menu.html".
 Zone3 contiendra par défaut la page "enregistrement.html" et servira aussi à l’affichage des
autres pages du site.
 Zone4 contiendra la phrase suivante « Copyright 4ème sciences de l’informatique »
NB :
 Utiliser les balises structurelles et sémantiques pour la création de la page index.
 Utiliser l’élément « iframe » pour l’intégration d’une page web dans une autre.
Niveau : 4EME Sciences de l’informatique 1 Prof : H.Sghaier

2. Créer la page « menu.html » contenant les liens hypertextes suivants :
 Enregistrement d’un testeur : servira de lien vers la page "enregistrement.html".
 Évaluation d’un modèle : servira de lien vers la page "evaluation.html".
 Bilan des évaluations : contiendra le texte suivant « Page prévu pour futur utilisation
PHP »
3. Créer la page « enregistrement.html » permettant d’ajouter un testeur à la base de données via
le formulaire suivant :
4. Créer la page « evaluation.html » permettant à un testeur d’évaluer un modèle de voiture en

attribuant une note à chaque critère d’évaluation, via le formulaire suivant :
Sachant que :
 La case à cocher « Je ne suis pas un robot » est par défaut non cochée.
5. Créer le fichier feuille de style « style.css » dans lequel ajouter des styles de votre choix.
6. Ajouter le code html nécessaire pour relier le fichier style avec les fichiers html.

Correction
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header><h1 align="center">Épreuve pratique STI 2022</h1></header>
<main><nav> <iframe src="menu.html" frameborder="0"></iframe> </nav>
<article id="frame" ><iframe src="enregistrement.html" frameborder="0"
name="conteneur" width="800" height="600" ></iframe></article>
</main>
<footer align="center"> <em><h4>Copyright</h4></em></footer>
</form>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>menu</title>
<link href="style.css" rel="stylesheet" />
</head>
<body scolling="no" height="500">
<br />
<a href="enregistrement.html" target="conteneur"
>Enregistrement d'un testeur</a
>
<br />
<a href="evaluation.html" target="conteneur">Evaluation d'un modèle</a>
<br />
<a href="bilan.html" target="conteneur">Bilan des évaluations</a> <br />
</body>
</html>

enregistrement.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend><h3>Enregistrement d'un Testeur</h3></legend>
<table>
<tr>
<td>N° Permis</td>
<td>
<input type="text" name="" id="" maxlength="8" max="8" size="" />
</td>
</tr>
<tr>
<td>Nom</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td>Prénom</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td>Genre</td>
<td>
<input type="radio" value="genre" name="genre" id="" />Femme
<input type="radio"name="genre" id=""value= />Homme
</td>
</tr>
<tr>
<td></td>
<td align="right">
<input type="reset" value="Annuler" />
<input type="submit" value="Envoyer" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

evaluation.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body><form action="" method="post">
<fieldset><legend><h3>Evaluation d'un modele</h3></legend>
<table>
<tr><td>N° Permis</td>
<td><input type="text" name="" id="" maxlength="8" max="8" size="8"/>
</td><td>
           &
nbsp;            &nbsp
;
<select name="" id="">
<option value="" disabled selected>Choisir un model</option>
<option value="">WALLIS IRIS</option>
<option value="">WALLIS 619</option>
<option value="">WALLIS 216</option>
</select>
</td>
</tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr>
<td>Note attribuées</td></tr>
<tr><td colspan="4">


Sécurité : <input type="text" name="" id="" size="4" />Conduite :
<input type="text" name="" id="" size="4" /> confort :
<input type="text" name="" id="" size="4" />
</td>
</tr><tr><td colspan="3">
Je ne suis pas un robot :<input type="checkbox" name="" id="" /></td>
</tr>
<tr>
<td></td>
<td align="right" colspan="3">
<input type="reset" value="Annuler" />
<input type="submit" value="Valider" />
</td>
</tr>
</table>
</fieldset>
</form></body></html>

style.css
*{
padding: 0;
margin: 0;
}
body {
margin: 0 auto; /* pour éviter les marges */
text-align: center;
}
header {
border-style: groove;
border-radius: 7px;
box-shadow: aquamarine;
text-shadow: blanchedalmond;
background-color: beige;
}
h1 {
text-shadow: 1px 1px 2px rgb(228, 228, 235), 0 0 1em rgb(117, 117, 119),
0 0 0.2em rgb(96, 96, 121);
}
main {
display: flex;
justify-content: center;
}
nav {
border-radius: 7px;
}
#frame {
border-radius: 7px;
}
a{
display: block;
text-decoration: none;
width: 200px;
border: outset;
background-color: beige;
border-radius: 5%;
}
footer {
text-shadow: 1px 1px 2px rgb(228, 228, 235), 0 0 1em rgb(117, 117, 119),
0 0 0.2em rgb(96, 96, 121);
}

Résultat

TP N°3 HTML 5 CSS3 4eme STI

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP N°3 HTML 5 CSS3 4eme STI

Transféré par

Droits d'auteur :

Formats disponibles

Module 2 : Systèmes, technologies et Internet

Niveau : 4EME Sciences de l’informatique 1 Prof : H.Sghaier

4. Créer la page « evaluation.html » permettant à un testeur d’évaluer un modèle de voiture en

Niveau : 4EME Sciences de l’informatique 2 Prof : H.Sghaier

Niveau : 4EME Sciences de l’informatique 3 Prof : H.Sghaier

Niveau : 4EME Sciences de l’informatique 4 Prof : H.Sghaier

Niveau : 4EME Sciences de l’informatique 5 Prof : H.Sghaier

Niveau : 4EME Sciences de l’informatique 6 Prof : H.Sghaier

Niveau : 4EME Sciences de l’informatique 7 Prof : H.Sghaier

Vous aimerez peut-être aussi