act-html

Transcription

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:
• Savoir utiliser un logiciel d’édition (éditeur de texte, Word, etc.)
• Internet et WWW de base
Module technique précédent: internet (à option)
Module technique précédent: 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
Activités HTML - .
act-html-4
• Ce module propose six exercices pour l’acquisition des bases de HTML
Versions WWW des exercices:
url: http://tecfa.unige.ch/guides/htmlman/exo1.html
© TECFA 8/12/99
Activités HTML - .
act-html-5
Exercice 1: les Titres
Consigne
1. Lancez un éditeur HTML
2. Reproduisez un fichier qui présente la structure ci-dessous (encadré)
3. Vérifiez votre solution en comparant votre document avec le code source (à la
page suivante)
Tableau 1:
Nom
Ce texte est décalé vers la droite en utilisant le marqueur blockquote.
Quelques pointeurs
Voici quelques pointeurs relatifs à mes intérets:
© TECFA 8/12/99
Activités HTML - .
act-html-6
Solution
Différentes solutions existent pour arriver au même résultat.
Voici l’une d’entre elles.
<html>
<head>
</title>exo1.html</title>
</head>
<body>
<H1>Nom</H1>
<blockquote>Ce texte est décalé vers la droite en utilisant
le marqueur blockquote.</blockquote>
<H3>Quelques pointeurs</H3>
<p>
</p>
</body>
</html>
© TECFA 8/12/99
Activités HTML - .
act-html-7
Exercice 2: les listes
Consigne
1. Reprenez l’exercice 1 et ajoutez-y une liste composée (numéros et puces)
2. Vérifiez 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
© TECFA 8/12/99
Activités HTML - .
act-html-8
Solution
<html>
<head>
</head>
<body>
<H1>Nom</H1>
<blockquote>Ce texte est décalé vers la droite en utilisant le
marqueur blockquote.</blockquote>
<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
Activités HTML - .
act-html-9
Exercice 3: les liens
Consigne
1. Reprenez l’exercice 2 et ajoutez des liens (les mots soulignés sont des liens
hypertextuels
Nom
Quelques pointeurs
1. Natation
• Fédération internationale de natation amateur
• Yahoo : Swimming and diving
2. Finance
• WWW-library: Finance
• Axone consulting
© TECFA 8/12/99
Activités HTML - .
act-html-10
Solution
<html>
<head>
</head>
<body>
<H1>Nom</H1>
<ol>
<li>Natation
<ul>
<li><a href="http://www.hk.super.net/~kff/wmsf.html">
Fédération 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>
© TECFA 8/12/99
Activités HTML - .
act-html-11
Exercice 4: les images
Consigne
1. Reprenez votre fichier de l’exercice 3 et ajoutez-y une image
(l’image se trouve à l’adresse http://tecfa.unige.ch/gif/W3-small.gif)
Nom
Ce texte est décalé vers la droite en utilisant le marqueur
blockquote.
Quelques pointeurs
1. Natation
2. Finance
© TECFA 8/12/99
Activités HTML - .
act-html-12
Solution
<html>
<head>
</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">
<ol>
<li><a
<li>Natation
<ul>
href="http://www.hk.super.net/~kff/wmsf.html">
href="http://www.yahoo.com/Recreation/Sports/Swimming_and_Diving/">
</ul>
<li>Finance
<ul>
href="http://www.cob.ohio-state.edu/dept/fin/overview.htm">
href="http://www.axone.ch">Axone consulting</a>
</ul>
</ol>
<li><a
<li><a
<li><a
</body>
</html>
© TECFA 8/12/99
Activités HTML - .
act-html-13
Exercice 5: les tableaux
Consigne
1. Reprenez l’exercice 4 et ajoutez-y un tableau
Nom
blockquote.
Quelques pointeurs
1. Natation
2. Finance
© TECFA 8/12/99
Activités HTML - .
act-html-14
Solution
<html>
<head>
</head>
<body>
<H1>Nom</H1>
<ol>
<li>Natation
<ul>
<li><a href="http://www.hk.super.net/~kff/wmsf.html">
<li><a href="http://www.yahoo.com/Recreation/Sports/Swimming_and_Diving/">
</ul>
<li>Finance
<ul>
<li><a href="http://www.cob.ohio-state.edu/dept/fin/overview.htm">
<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
Activités HTML - .
act-html-15
Exercice 6: les formulaires
Consigne
1. Reprenez l’exercice 5 et ajoutez-y un formulaire
Nom
blockquote.
Quelques pointeurs
............
© TECFA 8/12/99
Activités HTML - .
act-html-16
Solution
<html>
<head>
</head>
<body>
<H1>Nom</H1>
.........
<h2>Envoyez-moi vos commentaires</h2>
<form enctype="application/x-www-form-urlencoded"
action="mailto:[email protected]" 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>
© TECFA 8/12/99

act-html

Transcription

Documents pareils

Java - Applications distribuées

Activités HTML avec Claris Home Page

Design d`un simple site Web

Boîtier de vote interactif

1 FEDERATION FRANCAISE DE NATATION COMITE DE L

Formulaires - Tecfa - Université de Genève

Offre d`emploi – Entraîneur de natation Le Lille Métropole Natation

URGENT Le Club Léo Lagrange de Nantes, club support du Pôle et

Coupon cours natation particuliers Ileo

act-comm

1 MAITRE NAGEUR SAUVETEUR CADRE D`EMPLOI DES

html-intro