TD HTML AVEC CORRECTION

Dimension: px

Commencer à balayer dès la page:

Download "TD HTML AVEC CORRECTION"

Marie-Thérèse François
il y a 8 ans
Total affichages :

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.

1 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

Créez vos fichiers HTML et n oubliez pas d enregistrer sous format HTML en ajoutant à la fin l extension.

2 <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=" </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=" pointant sur mon université; </LI> <LI>des images <IMG SRC=" 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>).

.. </LI> <LI> niveaux de sections, </LI> <LI> listes,... </LI> </OL></LI> <LI>des liens <A HREF="http://www.univparis8.

3 <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.

</table> </html> </body> Exercice 3 Reproduisez la page suivante.

4 <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>

cellpadding="4"> <td align="right"><b>a1</b></td> <td>a2</td> <td align="right"><b>b1</b></td>

5 <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>

6 <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> </b> <input type="text" name=" " /> <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 </option> <option value="partel"> Contactez-moi par téléphone</option> </select> <input type="submit" name="submit" value="envoyer" /> </center> </form>

7 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>

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>

8 </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 </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>

<option value="parmail" selected="selected"> Contactez-moi par email </option> <option value="partel"> Contactez-moi par

Documents pareils

Activités HTML. Code: act-html

Activités HTML. Code: act-html Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis: