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

©Thomas N. Robb

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:

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?

  1. Students capable of generating interesting information.
  2. A teacher who is willing to spend the time to: [-21-]
  3. A computer or computers on which to develop the pages (which neither needs to be networked nor internet-accessible.)
  4. 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


is an excellent source.

Steps to a successful project

  1. 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.)

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

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

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

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

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

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

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

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

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

  11. 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"

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

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

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.


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:


Note: Thanks go to Roy Bowers, Christine Meloni, David Sperling, Linda Thalman and Mark Warschauer for their valuable comments on earlier drafts of this article.