Vous êtes sur la page 1sur 5

TD N°1 : HTML

Matière : Tech et Prog Web Classe : 3ème année LFI


Profs : Mme Emna HKIRI NB pages : 3

Exercice1 :

Exercice
Ecrire le code de la page suivante
Transformer la en formulaire avec l’ajout des boutons envoyer et annuler

Exercice4.2.

Mme Emna HKIRI Page 1


On voulait mettre en ligne un site web pour l’admission des étudiants à la FSM de Monastir. Le
responsable de scolarité remplit les coordonnées des étudiants candidats et les affiche sur le site dans
un tableau des étudiants admis à la FSM
-La page d’accueil est une page index (qui contient des frames).
-La partie Menu (frame de gauche) inclut des liens vers la page formulaire et une autre page
(nommée autre_page)
-La partie centrale est l’endroit d’affichage des pages (la page formulaire).
-La partie droite comprend le logo de la FSM et le message de bienvenue.

La page formulaire comprend évidemment un formulaire. Dans ce dernier, le responsable traite les
coordonnées des étudiants admis à la FSM. Le formulaire comprend un groupe de champs. Le
groupe doit permettre la saisie du nom, du prénom, de la CIN, la spécialité, le dernier diplôme obtenu
et l’établissement d’origine etc… (voir schéma).
.
Créer un fichier CSS qui permet de :
Mettre la couleur de la page en gris
De mettre les titres de niveau 1en gras et italique
Mettre les liens en mauve

************************************Cadre***********************************
<html>
<head> </head>
<frameset cols="20%,60%,20%">
<frame src="Menu.html" name=primaire />
<frame src="form.html" name=centre />
<frame src="Bienvenu.html" name=droit />
</frameset>
</html>
***************************************************************************

************************************Menu***********************************
<html>
<head>
<title> Menu</title>
<link href="f1.css" rel="stylesheet" type="text/css">
</head>

Mme Emna HKIRI Page 2


<body>
<h1>Le Menu</h1>

<a href="form.html" target= "centre" class="lien" > formulaire </a> <br>


<a href="autrepage.html" target= "centre" class="lien"> autre_page </a> <br>

</body>
</html>

***************************************************************************

****************************Formulaire ******************************************
<!-- Formulaire.htm -->
<HTML>
<HEAD>
<TITLE>Les Formulaires</TITLE>

<link href="f1.css" rel="stylesheet" type="text/css">

</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="nom_de_votre_page.html">
<CENTER>
<h1 align="center"> Informations personnelles </h1>
<fieldset>
<legend> <h3>Coordonnées</h3> </legend>
<TABLE BORDER="1" WIDTH="90%">
<TR>
<TD WIDTH="20%"><B>Civilité</B>
<TD WIDTH="70%">
<INPUT TYPE=RADIO NAME=civilite
VALUE="Mademoiselle">Mademoiselle
<INPUT TYPE=RADIO NAME=civilite
VALUE="Madame">Madame
<INPUT TYPE=RADIO NAME=civilite VALUE="Monsieur" CHECKED>Monsieur
</TR>
<TR>
<TD><B>Nom / Prénom</B></TD>
<TD> <INPUT TYPE=TEXT NAME=nom SIZE=50 MAXLENGTH=80></TD>
</TR>

<TR>
<TD><B>Adresse</B></TD>
<TD><TEXTAREA NAME="adresse" value="Rue No Boîte postale"COLS="50" ROWS="2" >
</TEXTAREA></TD>
</TR>
<TR>
<TD><B>No postal / Localité</B></TD>
Mme Emna HKIRI Page 3
<TD><INPUT TYPE=TEXT NAME=no_postal Size=5 MAXLENGTH=4 >
<INPUT TYPE=TEXT NAME=localite SIZE="20" MAXLENGTH="80" placeholder="ville">
</TD>
</TR>
<TR>
<TD><B>Pays</B> </TD>
<TD> <SELECT NAME=pays>
<OPTION>France </OPTION>
<OPTION>Italie</OPTION>
<OPTION SELECTED>Tunisie</OPTION>
</SELECT>
</TR>
<TR>
<TD><B>Plateforme(s)</B></TD>
<TD><INPUT TYPE=CHECKBOX NAME=materiel VALUE="Windows"
CHECKED>Windows
<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Mac"
CHECKED>Macintosh
<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Unix"> Unix
</TD>
</TR>
<TR>
<TD><B>Applications(s)</B>
<TD><SELECT NAME=applications SIZE=5 MULTIPLE>
<OPTION SELECTED>Bureautique </OPTION>
<OPTION>DAO </OPTION>
<OPTION>Statistiques </OPTION>
<OPTION>SGBD</OPTION>
<OPTION SELECTED>Internet </OPTION>
</SELECT>
</TR>
</TABLE>
<BR>
</fieldset>
<INPUT TYPE=SUBMIT VALUE=" Soumettre formulaire ">
<INPUT TYPE=RESET VALUE=" Effacer ">
</CENTER>
</FORM>
</BODY>
</HTML>
***************************************************************************
****************************bienvenue ***********************************
<html>
<head>
<link href="f1.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 align="center"> Bienvenue <br> à la <br> FSM de Monastir </h1> <br>
<center>
Mme Emna HKIRI Page 4
<img class="img"src="logofsm.png" width="100px" height="150">
</center>
</body>
</html>
**************************************************************************

****************************CSS***********************************************
body{
background-color: gray;
}
.img{
border-width: 80px;
border-color: red;

h1{
text-transform:upper-latin;
font-style:italic;
}

.lien
{color :purple;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
text-align:justify;
}
***************************************************************************

Mme Emna HKIRI Page 5