M2 : Technologie et Handicap
TD HTML AVEC CORRECTION
On utilisera Notepad++ comme éditeur sur Windows
Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos
pages dedans.
Créez vos fichiers HTML et n’oubliez pas d’enregistrer sous format HTML en
ajoutant à la fin l’extension .htm ou .html.
Pour visualiser les fichiers, ouvrez-les à l’aide d’un navigateur tel que Chrome ou
Firefox.
Exercice 1
Ecrivez le code de la page suivante
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
Correction
<HTML>
<HEAD>
<TITLE>Exemple de fichier HTML</TITLE>
</HEAD>
<BODY>
<H1>Exemple de fichier HTML</H1>
<P>Ceci est un exemple de fichier
<A HREF="[Link]
</P>
Un fichier HTML peut contenir :
<UL>
<LI>du texte destiné à
être lu; </LI>
<LI>des indications de formatage :
<OL>
<LI> caractères <B>gras</B>,
<I>italiques</I>, ... </LI>
<LI> niveaux de sections, </LI>
<LI> listes, ... </LI>
</OL></LI>
<LI>des liens <A HREF="[Link]
[Link]">hypertextes</A> pointant sur mon
université; </LI>
<LI>des images <IMG SRC="[Link]
[Link]/ingenierie-cognition/master-
handi/handi/[Link]" ALIGN=middle></LI>
</UL>
</BODY>
</HTML>
Exercice 2
Ecrivez le code de la page suivante
Le tableau et le titre (niveau 1) sont centrés sur la largeur de la fenêtre,
Le tableau s’étend sur la moitié de la largeur de la fenêtre,
La bordure du tableau fait 2 pixels de large,
La première ligne est une ligne d’en-tête (Utilisez la balise <th> au lieu de <td>).
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
Correction
<html>
<head>
<meta charset="utf-8" />
<Title>Tableaux</title>
</head>
<body>
<br />
<h1 align="center">Les tableaux</h1>
<table align="center" border="2" width="50%">
<tr>
<th>Pair</th>
<th>Impair</th>
</tr>
<tr>
<td>4</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Exercice 3
Reproduisez la page suivante.
Le tableau et le titre (niveau 1) sont centrés sur la largeur de la fenêtre,
La largeur du tableau est de 450px,
La bordure du tableau fait 2 pixels de large,
Un cellpadding et cellsapcing de 4px.
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
Correction
<html>
<head>
<meta charset="utf-8" />
<Title>Tableau</title>
</head>
<body>
<br />
<h1 align="center">Tableau</h1>
<table align="center" border="2" width="450"
cellspacing="4" cellpadding="4">
<tr>
<td align="right"><b>A1</b></td>
<td>A2</td>
</tr>
<tr>
<td align="right"><b>B1</b></td>
<td>B2</td>
</tr>
<tr>
<td align="right"><b>C1</b></td>
<td>C2</td>
</tr>
<tr>
<td align="right"><b>D1</b></td>
<td>D2</td>
</tr>
<tr>
<td align="right"><b>E1</b></td>
<td>E2</td>
</tr>
<tr>
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
<td align="center"colspan="2" >F</td>
</tr>
</table>
</form>
</body>
</html>
Exercice 4
Reproduisez la page suivante.
Correction
<html>
<head>
<meta charset="utf-8" />
<Title>Contact</title>
</head>
<body>
<br />
<h1 align="center">Contact</h1>
<form name="form1" method="post" action="">
<center>
<p>
<b>Votre prénom</b>
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
<input type="text" name="prenom" />
</p>
<p>
<b>Nom</b>
<input type="text" name="nom" />
</p>
<p>
<b>Civilité </b>
<input type="radio" name="civilite" value="Mme"
checked="checked" /> Madame
<input type="radio" name="civilite"
value="Mlle" /> Mademoiselle
<input type="radio" name="civilite" value="M"
/> Monsieur
</p>
<p>
<b>email</b>
<input type="text" name="email" />
</p>
<p>
<b>Abonnement</b>
<input type="checkbox" name="abonnement"
value="oui" /> Abonnement à la newsletter
</p>
<p>
<b>Préférence</b>
<select name="select">
<option value="parmail" selected="selected">
Contactez-moi par email</option>
<option value="partel"> Contactez-moi par
téléphone</option>
</select>
</p>
<p>
<input type="submit" name="Submit"
value="Envoyer" />
</p>
</center>
</form>
</body>
</html>
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
Exercice 5
Changer le code de l’exercice précédent pour avoir la mise en forme suivante.
Correction
<html>
<head>
<meta charset="utf-8" />
<Title>Contact</title>
</head>
<body>
<br />
<h1 align="center">Contact</h1>
<form name="form1" method="post" action="">
<table align="center" border="0" width="450"
cellspacing="4" cellpadding="4">
<tr>
<td align="right"><b>Votre prénom</b></td>
<td><input type="text" name="prenom" /></td>
</tr>
<tr>
<td align="right"><b>Nom</b></td>
<td><input type="text" name="nom" /></td>
</tr>
<tr>
<td align="right"><b>Civilité</b></td>
<td><input type="radio" name="civilite"
value="Mme" checked="checked" /> Madame
<input type="radio" name="civilite"
value="Mlle" /> Mademoiselle
<input type="radio" name="civilite"
value="M" /> Monsieur
</td>
</tr>
Saber HENI
saber.heni02@[Link]
M2 : Technologie et Handicap
<tr>
<td align="right"><b>Abonnement</b></td>
<td><input type="checkbox" name="abonnement"
value="oui" /> Abonnement à la newsletter</td>
</tr>
<tr>
<td align="right"><b>Préférences</b></td>
<td><select name="select">
<option value="parmail"
selected="selected"> Contactez-moi par
email </option>
<option value="partel"> Contactez-moi par
téléphone</option>
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="Submit"
value="Envoyer" /></td>
</tr>
</table>
</form>
</body>
</html>
Saber HENI
saber.heni02@[Link]
