Web Projects for the ESL/EFL Class:
Famous Japanese Personages

This article appeared in Vol. 6, No. 4 of
the CAELL Journal (Winter 1995/1996). The numbers in square brackets
like this: [-21-] indicate the end of each page in the published
version. Note, however, that there might be slight differences between
the submitted version below and published version.

In the past, "information" was created by a specific sphere of
individuals, primarily publishers, universities and the broadcast
media. One of the benefits of the internet, and particularly the
World Wide Web, is that now anyone can be an information
creator, and that includes our students, as well.

Creating information that might be useful to others isn't as difficult
as it might seem. For the ESL class with students from many cultures,
some aspects of the cultures could be compared and contrasted, for
example, "Holidays Around the World" while classes without a wide
ethnic mix can create information about their school or the local
community. A class composed entirely of Hispanic ESL students could,
for example, create a set of bilingual pages, in English and Spanish
which might have even greater appeal. Some possible topics:

Restaurants which are popular or affordable for students

A guide to amusement facilities in your area

A guide to recreational facilities with hours, rates and other
essential information.

A collection of essays on aspects of your town, as perceived
through the eyes of your students.

The history of your area, with each team of students describing a
different era

For EFL classes, some aspect of the students' own culture can be
presented for the consumption of speakers of English. My students in
Japan, for example, have created a set of pages on famous persons in
contemporary Japan:

When deciding on a topic for your class, you might be tempted to allow
each student to develop something in an area where he or she has
particular interest or expertise. An important consideration for web
projects, however, is 'Unity.' If the class works on a project as a
whole, a larger, more worthwhile volume of specific information can be
produced. Furthermore, if we are truly interested in the information
being seen by others, a hodgepodge of topics, even worthwhile ones,
buried inside a homepage called 'Class Projects of ESL Class 502' is
hardly going to attract attention.

Linking up with one or more other schools will permit you to decide on
a joint theme which students from all participating schools can
contribute to. This provides a built-in audience -- the students and
teachers at the other schools. This is particularly important if you
must go the individual topic route. Each student can then read and
provide feedback, perhaps via a "mailto link," on some of the pages
of the other class.

What are the requirements for developing a Web project?

Students capable of generating interesting information.

A teacher who is willing to spend the time to:

work with the students until the information is presentable both
linguistically and graphically, and,

learn the basic elements of HTML

[-21-]

A computer or computers on which to develop the pages (which
neither needs to be networked nor internet-accessible.)

A web server for mounting the final project. This need not be on
your premises.

Most likely, if you are reading this article, requirements 1 and 3 are
already fulfilled, You might wonder, however, if you will have the
time in your busy schedule to learn another 'language' -- HTML.
Relax! It isn't a language. All it is is a way to tell the WWW
browser what and how to format the various pieces of your document.
The basics are as easy as <b>this</b> which would
put the bracketted word in boldface. Naturally, there are manuals on
how to construct pages and a plethora of information available on the
web, but most of this info isn't even necessary: Take any page that
appeals to you. A simply designed one is best, however, and then
select View/Source from the menu. This will instantly reveal to you
the codes behind the document you are currently viewing and allow you
to see feature by feature what codes yield what effect.

You can also modify the page, save it and then bring it up in your web browser to see the effect of your changes. It's that easy. You can thus take a page which is somewhat similar to the ones you want to develop and replace the informational content to create your own page. There is no need to develop it 'from scratch.' For those who would like to learn the basics of HTML, 'A Beginner's Guide to HTML' located at

Steps to a successful project

Determine the topic of the project. It should be something
which allows each student to create one or more pages. (Naturally,
you could have jointly authored pages as well, if collaborative
writing works better for you.)

Design a mock-up of the home page and a sample of each type of
subsidiary page. You might make some rough graphics, leaving the
final ones to the more artistic members of your class to develop.

Have the students brainstorm the possible individual topics, and
then from the list, have the students decide which topics they want to
be responsible for.

Set criteria for how long contributions should be, what reference
sources the students should use and how these should be cited, if
necessary.

Provide the students with a model of what they are to write. The
more concrete your examples, the easier it will be to understand and
the more uniform the final appearance of the project. The model should
include all of the elements that will be on the final pages. For
example, at the bottom of each page, you will probably want to list
the name of the page creator (with a 'mailto' link if the student has
a personal e-mail account, the date of document creation and a listing
of sources consulted to create the information. I have also added an
'Information verified by' line and had another student
double-check the information for accuracy; a wise procedure if your
students are more knowledgeable in the project's subject area than you
are!

Have the students start writing their drafts either on paper or
using their standard word processor. Allow sufficient time for
multiple drafts with feedback from you. Ultimately, you will probably
have to overtly correct some stylistic infelicities although there is
no reason for you to remove the 'flavor' from the documents by making
them look as if a native speaker had written them.

When the students have completed their information, it's time to
create the HTML [-22-] documents. There is no need for you to teach your
students the intricacies of HTML if you create a page template for
them in advance. Simply take your earlier HTML mock-up and place all
of the elements that they will need to change to their own, original
information in boldface and name it 'model.html' (or 'model.htm' on
DOS). The students can then take copies of this, cut & paste in their
own information and save it with a name that you designate (see 'File
Names' below).

Once each HTML document has been created, the students can check
its appearance by calling it up with Open/File on their own computer.
Any errors in the HTML coding can then be fixed, the document
re-saved, and then using the 'reload' function, it can be read into
the browser again to see the effect of the changes. When done, they
can then call you over to visually check each document for errors that
they might have overlooked.

Completed documents are then given to you on floppy or stored in a
special directory (folder) on the network for eventual uploading to
the WWW server.

Once everything is in a special directory, including whatever
graphics you are using, you can then check the completed project for
integrity. Call up each document from your home page to see if all of
the elements are in place. Also, change the fonts and sizes to others
that are likely to be used to see what effect this has on the
appearance of your pages. What looks great to you may look very poor
with different settings. I've found pages which took up the full width
of my 21 monitor, for example.

Now its time to upload the pages. You will need to create, or
have created, a link to your Home Page, which ideally should be called
'index.html'. If your project is the sole resident of a directory
called, for example, "holidays" then a path reference to
".../holidays/" will be interpreted as "...holidays/index.html"

Announce the project to your on-line professional groups and
register it with the various search engines so that people who are
looking will be able to discover your information. Scott Banister's
"Submit-It" service
http://www.submit-it.com/ allows you to submit your information to
numerous search engines with considerable ease.

Ask your WWW server administrator how you can obtain information
about the number of times your project has been accessed. Most
servers keep a log of this information. In Unix, for example, 'grep'
can be used to extract your project's information from the log. In my
experience, this log and whatever messages students receive from
readers of their pages are the elements of the project which provide
the greatest reward.

Procedural Advice

Create a time line for completion of the
project that you believe is realistic, then get your students to stick
with it, even if it means a bit of "overtime"for them.

first drafts

completed drafts

conversion to HTML

testing of the pages

release date.

Do, however, allow a little leeway in your schedule. It wouldn't be
wise, for example, to schedule the project to end on the very last
week of classes since, if problems crop up, you will end up having to
complete the project yourself without your class being able to observe
the final outcome.

Graphics

Large graphics cause the impatient or the thrifty to abort page
loadings, so keep those graphic images small. You can make a
provision for uploading a larger version if you feel it
warranted. (Note that specifying a smaller width or height does not
result in [-23-] the transmission of less information; you need to physically
reduce the size so that both a small and large version are available
on the server.)

File Names

When you set up your home page, you will need to determine the names
of the various files that your students are assigned to produce. Tell
them what these names are so that they can save them appropriately.

If you keep all documents and gifs in the same directory, then you can
specify the names of all documents without a path, for example,
"href=bakery.html". This way nothing need be changed when they are
uploaded to a different directory on the WWW server.

Links within the Project

It could well be the case that one page in the project will contain
references to other project pages. Links can be created between these
so that viewers can switch back and forth between related documents
without having to return to the home page. If you can make a bilingual
set of pages, with parallel pages in English and another language,
place a button on each page so that people can switch back and forth
between them.

Variable Layouts

If the nature of the information that the students are
generating requires slightly different layouts for each page, then you
might have to teach them the HTML for that particular area of their
document. Indented lists or tables are two items that could easily
vary in length from page to page. You can, however, just teach them
this small part of the language without going into greater detail than
necessary. If you are lucky, the students' word processor might have
a built-in HTML editor. (The most recent versions of MS Word and
NisusWriter do.)

Should the students learn HTML?

As stated earlier, HTML is not difficult to learn. If you want to use
the study of HTML generation as a content activity for your class, it
has much to recommend it. If, however, your class has set goals or
you are on a tight schedule, the template approach allows your
students to accomplish the desired objective quickly and efficiently.

There are times when it is actually desirable to let the students
create documents from scratch rather than from a template such as when
they are creating their own home pages. A template approach
will result in a series of quickly produced home pages, but
they will often suffer from what I term the 'Levittown Home Page
Effect' -- they will appear undistinguishable from one another apart
from whatever personal data the students have entered. (Levitt built huge tracts of look-alike housing on the U.S. East Coast just after WWII.)

A compromise measure would be for them to 'surf' the net for a home
page design that they like, download the HTML and then tailor it to
their own needs.

Projects are a challenging way to provide your students with
an excellent language practice activity that can reap real benefits,
not only for them, but for the community as well. Further ideas for
projects, and methods for realizing them can be easily found on the
web using the powerful search engines that are now available. A good
collection of ESL projects can be found at Linda Thalman's site: