Act HTML

Activits HTML
act-html
Activits 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
Prrequis:
Savoir utiliser un logiciel ddition (diteur de texte, Word, etc.) Internet et WWW de base Module technique prcdent: internet ( option) Module technique prcdent: www-tech
Modules techniques:
Module technique: Module technique: html-intro html-forms (pour les exercices la fin)
Objectifs:
Internet et Education TECFA 8/12/99
Activits HTML - .
act-html-4
Ce module propose six exercices pour lacquisition des bases de HTML
Versions WWW des exercices:

url: http://tecfa.unige.ch/guides/htmlman/exo1.html url: http://tecfa.unige.ch/guides/htmlman/exo2.html url: http://tecfa.unige.ch/guides/htmlman/exo3.html url: http://tecfa.unige.ch/guides/htmlman/exo4.html url: http://tecfa.unige.ch/guides/htmlman/exo5.html url: http://tecfa.unige.ch/guides/htmlman/exo6.html
Internet et Education
TECFA 8/12/99
Activits HTML - .
act-html-5
Exercice 1: les Titres Consigne

1. Lancez un diteur HTML 2. Reproduisez un fichier qui prsente la structure ci-dessous (encadr) 3. Vrifiez votre solution en comparant votre document avec le code source ( la page suivante)
Tableau 1:
Nom
Ce texte est dcal vers la droite en utilisant le marqueur blockquote.
Quelques pointeurs
Voici quelques pointeurs relatifs mes intrets:
TECFA 8/12/99
Activits HTML - .
act-html-6
Solution
Diffrentes solutions existent pour arriver au mme rsultat. Voici lune dentre elles.
<html> <head> </title>exo1.html</title> </head> <body> <H1>Nom</H1> <blockquote>Ce texte est dcal vers la droite en utilisant le marqueur blockquote.</blockquote> <H3>Quelques pointeurs</H3> <p> Voici quelques pointeurs relatifs mes intrets: </p> </body> </html>
TECFA 8/12/99
Activits HTML - .
act-html-7
Exercice 2: les listes Consigne

1. Reprenez lexercice 1 et ajoutez-y une liste compose (numros et puces) 2. Vrifiez votre solution en comparant votre document avec le code source ( la page suivante)
Tableau 2:
Nom
Quelques pointeurs
1. Natation pointeur 1 pointeur 2 2. Finance pointeur 3 pointeur 4

Activits HTML - .
act-html-8
Solution
<html> <head> </title>exo1.html</title> </head> <body> <H1>Nom</H1> <blockquote>Ce texte est dcal vers la droite en utilisant le marqueur blockquote.</blockquote> <H3>Quelques pointeurs</H3> Voici quelques pointeurs relatifs mes intrets:
<ol> <li>Natation <ul> <li>pointeur 1 <li>pointeur 2 </ul> <li>Finance <ul> <li>pointeur 1 <li>pointeur 2 </ul> </ol> </body> </html>
TECFA 8/12/99
Activits HTML - .
act-html-9
Exercice 3: les liens Consigne

1. Reprenez lexercice 2 et ajoutez des liens (les mots souligns sont des liens hypertextuels
Nom
Quelques pointeurs
1. Natation Fdration internationale de natation amateur Yahoo : Swimming and diving 2. Finance WWW-library: Finance Axone consulting
TECFA 8/12/99
Activits HTML - .
act-html-10
Solution
<html> <head> </title>exo1.html</title> </head> <body> <H1>Nom</H1> <blockquote>Ce texte est dcal vers la droite en utilisant le marqueur blockquote.</blockquote> <H3>Quelques pointeurs</H3> Voici quelques pointeurs relatifs mes intrets: <ol> <li>Natation <ul> <li><a href="http://www.hk.super.net/~kff/wmsf.html"> Fdration internationale de natation amateur</a> <li><a href="http://www.yahoo.com/Recreation/Sports/Swimming_and_Diving/"> Yahoo : Swimming and diving</a> </ul> <li>Finance <ul> <li><a href="http://www.cob.ohio-state.edu/dept/fin/overview.htm"> WWW-library: Finance</a> <li><a href="http://www.axone.ch">Axone consulting</a> </ul> </ol>
</body> </html>
Activits HTML - .
act-html-11
Exercice 4: les images Consigne

1. Reprenez votre fichier de lexercice 3 et ajoutez-y une image (limage se trouve ladresse http://tecfa.unige.ch/gif/W3-small.gif)
Nom
Quelques pointeurs
TECFA 8/12/99
Activits HTML - .
act-html-12
Solution
<html> <head> </title>exo1.html</title> </head> <body> <H1>Nom</H1> <img align=right alt="W3" height=53 border=2 width=105 src="http://tecfa.unige.ch/gif/W3-small.gif"> <blockquote>Ce texte est dcal vers la droite en utilisant le marqueur blockquote.</blockquote> <H3>Quelques pointeurs</H3> Voici quelques pointeurs relatifs mes intrets: <ol> <li>Natation <ul> href="http://www.hk.super.net/~kff/wmsf.html"> Fdration internationale de natation amateur</a> href="http://www.yahoo.com/Recreation/Sports/Swimming_and_Diving/"> Yahoo : Swimming and diving</a> </ul> <li>Finance <ul> href="http://www.cob.ohio-state.edu/dept/fin/overview.htm"> WWW-library: Finance</a> href="http://www.axone.ch">Axone consulting</a> </ul> </ol>
<li><a <li><a
<li><a <li><a
</body> </html>
Activits HTML - .
act-html-13
Exercice 5: les tableaux

Consigne 1. Reprenez lexercice 4 et ajoutez-y un tableau
Nom
Quelques pointeurs
TECFA 8/12/99
Activits HTML - .
act-html-14
Solution
<html> <head> </title>exo1.html</title> </head> <body> <H1>Nom</H1> <img align=right alt="W3" height=53 border=2 width=105 src="http://tecfa.unige.ch/gif/W3-small.gif"> <blockquote>Ce texte est dcal vers la droite en utilisant le marqueur blockquote.</blockquote> <H3>Quelques pointeurs</H3> Voici quelques pointeurs relatifs mes intrets: <ol> <li>Natation <ul> <li><a href="http://www.hk.super.net/~kff/wmsf.html"> Fdration internationale de natation amateur</a> <li><a href="http://www.yahoo.com/Recreation/Sports/Swimming_and_Diving/"> Yahoo : Swimming and diving</a> </ul> <li>Finance <ul> <li><a href="http://www.cob.ohio-state.edu/dept/fin/overview.htm"> WWW-library: Finance</a> <li><a href="http://www.axone.ch">Axone consulting</a> </ul> </ol>
<h2>Envoyez-moi vos commentaires</h2> <table width=100% border=2> <tr> <td>Votre Nom <td>Votre email <tr> <td colspan=2>Votre commentaire </table>
</body> </html>
TECFA 8/12/99
Activits HTML - .
act-html-15
Exercice 6: les formulaires

Consigne 1. Reprenez lexercice 5 et ajoutez-y un formulaire
Nom
Quelques pointeurs
............
TECFA 8/12/99
Activits HTML - .
act-html-16
Solution
<html> <head> </title>exo1.html</title> </head> <body> <H1>Nom</H1> <img align=right alt="W3" height=53 border=2 width=105 src="http://tecfa.unige.ch/gif/W3-small.gif"> <blockquote>Ce texte est dcal vers la droite en utilisant le marqueur blockquote.</blockquote> <H3>Quelques pointeurs</H3> Voici quelques pointeurs relatifs mes intrets: ......... <h2>Envoyez-moi vos commentaires</h2>
<form enctype="application/x-www-form-urlencoded" action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>

<table width=100% border=2> <tr> <td>Votre Nom
<input type="text" name="nom" size=15>

<td>Votre email
<input type="text" name="email" size=15>

<tr> <td colspan=2>Votre commentaire
<textarea name="nom" rows=5 cols=30></textarea> <input type="submit" value="Envoyer"> <input type="reset" value="Effacer">
</table>
</form>
</body> </html> Internet et Education TECFA 8/12/99

Act HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Act HTML

Transféré par

Droits d'auteur :

Formats disponibles

Activits HTML

Ce module propose six exercices pour lacquisition des bases de HTML

Versions WWW des exercices:

Exercice 1: les Titres Consigne

Exercice 2: les listes Consigne

1. Natation pointeur 1 pointeur 2 2. Finance pointeur 3 pointeur 4

Exercice 3: les liens Consigne

Exercice 4: les images Consigne

Exercice 5: les tableaux

Exercice 6: les formulaires

<form enctype="application/x-www-form-urlencoded" action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>

<input type="text" name="nom" size=15>

<input type="text" name="email" size=15>

Vous aimerez peut-être aussi