NEXT   Technologies Internet et Education, © TECFA
  Activités HTML

Activités HTML

act-html

Originaux

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:

Objectifs:

Ce module propose six exercices pour l'acquisition des bases de HTML

Versions WWW des exercices:

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)

 

 
Nom

Ce texte est décalé vers la droite en utilisant le marqueur blockquote.

Quelques pointeurs

Voici quelques pointeurs relatifs à mes intérets:

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>

Voici quelques pointeurs relatifs à mes intérets:

</p>

</body>

</html>

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

    Ce texte est décalé vers la droite en utilisant le marqueur blockquote.

    Quelques pointeurs

    Voici quelques pointeurs relatifs à mes intérets:

     

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

Solution

 

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

Voici quelques pointeurs relatifs à mes intérets:

 

 

<ol>

<li>Natation

<ul>

<li>pointeur 1

<li>pointeur 2

</ul>

<li>Finance

<ul>

<li>pointeur 1

<li>pointeur 2

</ul>

</ol>

 

</body>

</html>

Exercice 3: les liens

Consigne

  1. Reprenez l'exercice 2 et ajoutez des liens (les mots soulignés sont des liens hypertextuels
    2. Nom

    Ce texte est décalé vers la droite en utilisant le marqueur blockquote.

    Quelques pointeurs

    Voici quelques pointeurs relatifs à mes intérets:

     

    1. Natation
    2. Fédération internationale de natation amateur
    3. Yahoo : Swimming and diving
    4. Finance
    5. WWW-library: Finance
    6. Axone consulting

Solution

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

Voici quelques pointeurs relatifs à mes intérets:

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

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

Voici quelques pointeurs relatifs à mes intérets:

 

  1. Natation
  2. Fédération internationale de natation amateur
  3. Yahoo : Swimming and diving
  4. Finance
  5. WWW-library: Finance
  6. Axone consulting

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 décalé vers la droite en utilisant le

marqueur blockquote.</blockquote>

<H3>Quelques pointeurs</H3>

Voici quelques pointeurs relatifs à mes intérets:

 

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

Exercice 5: les tableaux

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 décalé vers la droite en utilisant le

marqueur blockquote.</blockquote>

<H3>Quelques pointeurs</H3>

Voici quelques pointeurs relatifs à mes intérets:

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

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

Exercice 6: les formulaires

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 décalé vers la droite en utilisant le

marqueur blockquote.</blockquote>

<H3>Quelques pointeurs</H3>

Voici quelques pointeurs relatifs à mes intérets:

 

.........

 

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

NEXT -- TIE