Prog Web & MM Maroua BAKRI
Langage HTML
Correction du TD N°2 :
Liens, Tableaux, Formulaire & Cadres
Exercice 1 :
<html>
<head>
<title> Jules Ducommun </title>
</head>
<body>
<h1 align=center> Jules Ducommun </h1>
<ol type=1>
<li> <a href=#T1>Mes coordonnées</a>
<li> <a href=#T2>Mon curriculum vitae</a>
<li> <a href=#T3>Mes hobbies</a>
<li> <a href=#T4> Mes sites préférés</a>
</ol>
<hr size=6 width=95% align=center />
<h2><a name=T1>Mes coordonnées</a></h2>
<font size=4 face=candara>Jules Ducommun <br/>SI-DGR<br/>EPFL<br/>CH - 1015
Lausanne</font>
<hr size=4 width=65% align=center />
<h2><a name=T2>Mon Curriculum Vitae</a> </h2>
<font size=4 face=candara>J’ai fréquenté l’école primaire de <font color=blue>Xxxxx</font>,
puis le collège de <font color=blue>Yyyyy </font>où j’ai obtenu mon diplôme d’études
secondaires en <b><i>198x</i></b>. <br/>J’ai suivi ensuite …</font>
<hr size=4 width=65% align=center />
<h2><a name=T3>Mes hobbies </a></h2>
À remplir…
<hr size=4 width=65% align=center />
<h2><a name=T4> Mes sites préférés </a></h2>
<ol type=1>
<li> Le site Webdo <a href=’’http ://[Link]’’> [Link]</a>
<li> Le serveur FTP anonyme mirroir de SWITCH
<a href=’’ [Link] [Link]
<li>La bibliothèque de l'ETHZ <a href=’’ telnet://[Link]’’> telnet://[Link]</a>
</ol>
<hr size=4 width=95% align=center />
<i><a href=’’[Link] ?subject= Feed-back Home-page’’>Jules
Ducommun</a> / révision 2.5.99</i>
</body>
</html>
Exercice 2 :
1
Prog Web & MM Maroua BAKRI
<html>
<head>
<title>Mon premier tableau</title>
<!-- Exercice 2 du TD2 HTML-->
</head>
<body>
<table align="center" border="1" width="90%">
<tr>
<th>Titre1</th><th>Titre2</th><th>Titre3</th>
</tr>
<tr>
<td>Cellule simple</td>
<td>Cellule simple</td>
<td>Cellule simple</td>
</tr>
<tr>
<td colspan="2" align="right">Deux colonnes assemblées</td>
<td>Cellule simple</td>
</tr>
<tr>
<td>Cellule simple</td>
<td>Cellule simple</td>
<td rowspan="2" valign="bottom">Deux lignes assemblées</td>
</tr>
<tr>
<td>Cellule simple</td>
<td>Cellule simple</td>
</tr>
<tr>
<td>Cellule simple</td>
<td colspan="2" rowspan="2" align="center" valign="top">Deux lignes et
deux colonnes</td>
</tr>
<tr>
<td>Cellule simple</td>
</tr>
</table>
<center><caption> Tableau I </caption></center>
</body>
</html>
Exercice 3 :
<html>
<head>
<meta charset="iso-8859-1"/>
<title> Mon premier formulaire </title>
2
Prog Web & MM Maroua BAKRI
</head>
<body>
<form id="sondage" method="post" action="#">
<fieldset>
<legend>Informations personnelles</legend>
<table>
<tr>
<td><label for="nom">Nom :</label></td>
<td><input type="text" id="nom" name="nom"/></td>
</tr>
<tr>
<td><label for="prenom">Prénom :</label></td>
<td><input type="text" id="prenom" name="prenom"/></td>
</tr>
<tr>
<td><label for="age">Age :</label></td>
<td><input type="text" id="age" name="age"/></td>
</tr>
<tr>
<td><label for="adresse">Adresse :</label></td>
<td><input type="text" id="adresse" name="adressse"/></td>
</tr>
<tr>
<td><label for="cp">Code Postal :</label></td>
<td><input type="text" id="cp" name="cp"/></td>
</tr>
<tr>
<td><label for="ville">Ville :</label></td>
<td><input type="text" id="ville" name="ville"/></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Informations sur l'objet</legend>
<p style="text-align:center;">Fréquence d'utilisation quotidienne :<br />
<input type="radio" id="j1" name="freq" value="1" /><label for="j1">1 fois</label>
<input type="radio" id="j2" name="freq" value="2" /><label for="j2">2
fois</label>
<input type="radio" id="j3" name="freq" value="3" /><label for="j3">3
fois</label>
<input type="radio" id="j4" name="freq" value="4" /><label for="j4">4
fois</label>
</p>
<p><label for="note">Note (1 = excellent) :</label><select id="note" name="note">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
3
Prog Web & MM Maroua BAKRI
<option value="5">5</option>
</select></p>
<table>
<tr>
<td valign=top><label for="commentaire">Commentaire</label></td>
<td><textarea id="commentaire" name="commentaire" cols="40"
rows="5"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Informations annexes</legend>
<p><label for="email_rep">Me tenir informé(e) du résultat ?</label><input
type="checkbox" id="email_rep" name="email_rep" /></p>
</fieldset>
<div style="text-align:center;"><input type="submit" name="submit" value="Participer au
sondage" /> <input type="reset" name="reset" value="Annuler" /></div>
</form>
</body>
</html>
Exercice 4 :
<ul type=disc>Liste à puces
<li>adresse
<li>Tél
<li>Fax
<li>E-mail
</ul>
<ul style= ’’list-style-image :URL([Link])’’>Liste dont les puces …
<li>blabla
<li>blabla
</ul>
<ol type=1>Combinaison de listes…
<li>École primaire
<ul type=disc>
<li>1ère
<li>2ème
</ul>
<li> École secondaire
<ul type=circle>
<li>1ère
<li>2ème
</ul>
<li>Gymnase
4
Prog Web & MM Maroua BAKRI
<ul type=square>
<li>1ère
</ul>
<li>Université
<ul type=square>
<li>1ère
</ul>
</ol>
<DL>Liste descriptive
<DT><b>1990</b>
<DD>Certificat
<DT><b>1993</b>
<DD>Maturité
</DL>
Exercice 5 :
Fichier : [Link]
5
Prog Web & MM Maroua BAKRI
Fichier : [Link]
Fichier : [Link]
6
Prog Web & MM Maroua BAKRI