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
<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="http://www.w3c.org/HTML">HTML</A> </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="http://www.univparis8.fr">hypertextes</A> pointant sur mon université; </LI> <LI>des images <IMG SRC="http://www2.univparis8.fr/ingenierie-cognition/masterhandi/handi/logohandi.png" 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>).
<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%"> <th>pair</th> <th>impair</th> <td>4</td> <td>7</td> <td>2</td> <td>1</td> </table> </html> </body> 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.
<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"> <td align="right"><b>a1</b></td> <td>a2</td> <td align="right"><b>b1</b></td> <td>b2</td> <td align="right"><b>c1</b></td> <td>c2</td> <td align="right"><b>d1</b></td> <td>d2</td> <td align="right"><b>e1</b></td> <td>e2</td>
<td align="center"colspan="2" >F</td> </table> </form> </body> </html> Exercice 4 Reproduisez la page suivante. <html> <head> <meta charset="utf-8" /> <Title>Contact</title> </head> <body> <br /> <h1 align="center">contact</h1> <form name="form1" method="post" action=""> <center> <b>votre prénom</b>
<input type="text" name="prenom" /> <b>nom</b> <input type="text" name="nom" /> </body> </html> <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 <b>email</b> <input type="text" name="email" /> <b>abonnement</b> <input type="checkbox" name="abonnement" value="oui" /> Abonnement à la newsletter <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> <input type="submit" name="submit" value="envoyer" /> </center> </form>
Exercice 5 Changer le code de l exercice précédent pour avoir la mise en forme suivante. <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"> <td align="right"><b>votre prénom</b></td> <td><input type="text" name="prenom" /></td> <td align="right"><b>nom</b></td> <td><input type="text" name="nom" /></td> <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>
</table> </form> </body> </html> <td align="right"><b>abonnement</b></td> <td><input type="checkbox" name="abonnement" value="oui" /> Abonnement à la newsletter</td> <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> <td align="center" colspan="2"> <input type="submit" name="submit" value="envoyer" /></td>