Vous êtes sur la page 1sur 4

Corrigé TD1 : HTML5

Exercice 1
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>La structure d'une page HTML5 </title>
</head>
<body>
<header>
<img src=" logo.gif" alt="logo" />
<h1>La structure d'une page HTML5</h1>
</header>
<nav>
<p><a href="articles.html">Articles</a> -
<a href="contact.html">Contact</a>
</p>
</nav>
<article>
<header>
Exemple de structure d'une page en HTML5
</header>
<section>
<h4>Un titre dans la section</h4>
<p>Il s'agit de l'élément "section"...</p>
</section>
<section>
<h4>Un titre dans la section</h4>
<p>Il s'agit de l'élément "section"...</p>
</section>
<footer>
Cet article a été écrit par ......
</footer>
</article>
<aside>
<h1>Catégories</h1>
<ul>
<li><a href="actualité.html">Actualité</a></li>
<li><a href="développement.html">Développement</a></li>
</ul>
</aside>
<aside>
<h1>Liens</h1>
<ul>
<li><a href="proposer.html">Proposer un article </a></li>
<li><a href="acteurs.html">Les acteurs du Web à Proposer à votre
lien</a></li>
</ul>
</aside>
<footer>
Copyright &copy; 2012 - Tous droits réservés.
</footer>
</body>
</html>

Exercice 2
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>La structure d'une page HTML5 </title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Catégorie</th>
<th>Nuité</th>
<th>Repas du soir / petit déjeuner</th>
<th>1/2 pension</th>
</tr>
<tr>
<th colspan="2">plein tarif</th>
<td>30 Dt</td>
<td rowspan="3">50 dt</td>
<td>70 dt</td>
</tr>
<tr>
<th>STD-de + de 8 personnes</th>
<th>STD-de 24 ans</th>
<td>26 Dt</td>
<td>66 Dt</td>
</tr>
<tr>
<th colspan="2">CAF - guide</th>
<td>15 Dt</td>
<td>54 Dt</td>
</tr>
</table>
</body>
</html>

Exercice 3
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Un formulaire </title>
</head>
<body>
<div>
<form>
<fieldset>
<legend>Date de livraison</legend>
Choisissez la date<input id=nom name=nom type=date >
</fieldset>
<fieldset>
<legend>Votre identité</legend>
<ol>
<li>
<label for=nom>Nom</label>
<input id=nom name=nom type=text value="Prénom et nom" >
</li>
<li>
<label for=email>Email</label>
<input id=email name=email type=email value="exemple@domaine.com" >
</li>
<li>
<label for=telephone>Téléphone</label>
<input id=telephone name=telephone type=tel value="par ex : +21600000000" >
</li>
</ol>
</fieldset>
<fieldset>
<legend>Adresse de livraison</legend>
<ol>
<li>
<label for=adresse>Adresse</label>
<textarea id=adresse name=adresse rows=3 cols=30 ></textarea>
</li>
<li>
<label for=codepostal>Code postal</label>
<input id=codepostal name=codepostal type=text >
</li>
<li>
<label for="ville">Ville</label>
<select name="ville" id="ville">
<option>Sfax</option>
<option>Tunis</option>
</select>
</li>
</ol>
</fieldset>
<fieldset>
<legend>informations CB</legend>
<ol>
<li>
<fieldset>
<legend>Type de carte bancaire</legend>
<ol>
<li>
<input id=visa name=type_de_carte type=radio>
<label for=visa>VISA</label>
</li>
<li>
<input id=amex name=type_de_carte type=radio>
<label for=amex>AmEx</label>
</li>
<li>
<input id=mastercard name=type_de_carte type=radio>
<label for=mastercard>Mastercard</label>
</li>
</ol>
</fieldset>
</li>
<li>
<label for=numero_de_carte>N° de carte</label>
<input id=numero_de_carte name=numero_de_carte type=number >
</li>
<li>
<label for=securite>Code sécurité</label>
<input id=securite name=securite type=password >
</li>
</ol>
</fieldset>
<fieldset>
<input type="submit" name="submit" value="J'achète">
</fieldset>
</form>
</div>
</body>
</html>

Vous aimerez peut-être aussi