Student-Authored WebPages as an ESL Writing Tool

(From a 3 Rivers TESOL Conference presentation by Jerry Bicknell , WVU.)


The following discussion is based on my personal experiences working with students enrolled in an ESL course (Individualized Learning) in the Intensive English Program ( in the Department of Foreign Languages ( at West Virginia University ( Together, we set out to publish IEP Online ( ~WVESL/online/index.html), a source for information about life in Morgantown and at West Virginia Universtiy. The specific details of the procedure outlined here can easily be modified to encorporate any World-Wide Web publishing project.

While some students may already be quite comfortable with using a Web browser when they begin the class, it is not yet safe to assume that all students have surfed the Web (although this will undoubtedly change as computer resources become more generally available in schools around the world). The first step to implementing this project is to get the students online.

Step One: Introducing the WWW

It may be necessary to teach students the basics of using a Web browser . If some are already proficient at this, their help might be enlisted as peer tutors. This step includes verifying that the students know how to:

open the browser,

search by keywords,

create and use bookmarks, and

use the history function.

(Information about these functions can be found at the following links for Netscape Navigator or Communicator ( or for Microsoft's Internet Explorer 4.0 (

Step Two: Introducing the Class Project

Students work collaboratively as a class to develop ideas for WebPages. (Our class was small so this was quite do-able; with a larger class, small groups could be formed.) For the project, the students were asked to respond to the question: "Before you came to the United States, what questions did you have about West Virginia University and Morgantown?" These questions formed the basis for what the class would put in its WebPages. It was thought that providing information of this type would not only help the students in the class, but be a valuable resource for students all around the world who were considering coming to WVU. Once their questions were formulated and discussed, the students were encouraged to locate information (both on- and off-line) to help answer their questions. (On-line information would eventually be referenced in the form of links. It was the students' responsibility to compile and present any information that could not already be found via the Web.)

Step Three: Basic HTML Instruction

Once they are comfortable with surfing the Web, we can introduce the students to the basics of HTML and HTML editors. I utilized the following sub-steps to accomplish these goals:

View the code: First I had the students look at the Source Code for some of the World-Wide Web documents they were viewing.

HTML exercises: After they were somewhat intrigued by the incomprehensibility of the code, I sent them to the following site and asked them to find the answer to the questions that are asked there. This site "HTML for the Conceptually Challenged" ( provides a light-hearted HTML tutorial. This sub-step was spread out over several class meetings during which the students were also working on the group writing project already described.

Introduce the editor: For the sake of this project, we used the HTML editor that comes built-in to Netscape 3.0 Gold, since that was the Web browser that was installed on the machines in the CALL Lab. Numerous HTML editors are available commercially, as shareware, and even as freeware. (A list of downloadable HTML editors can be found at a number of the sites listed on the resource page of this site ( ~WVESL/resources2.html.)

Importing text: Since the students had access to word processors outside the lab, but not to the HTML editor, it was most effective for them to create their texts with a word processor and to cut and paste the text into the HomePages in the editor.

Importing images: For our project, students took pictures with their own cameras, which were scanned and saved to diskette. For a modest fee, it is also possible to have photographs saved to diskette at the time they are processed. Ask your local film processor about this option.

Formatting (colors, fonts, background images, tables): Since the steps involved will vary from HTML editor to HTML editor, it is difficult to give much detail here. From my experience, formatting in What-You-See-Is-What-You-Get (WYSIWYG) editors is almost as easy as using a word processor. Refer to your editor's documentation (they may have a Web Site), for specific details.

Making Links (internal pages or graphics & external pages and e-mail): Most HTML editors handle links in much the same way they handle other formatting tasks. It is, however, necessary to teach the students how to incorporate "anchors," which lead to locations within an HTML document, links to other pages within the same site (folders or directories), to external sites on other servers, and to e-mail addresses.

Step Four: Conducting On-going Formative Evaluations

To ensure a quality product, it is important that the students review and critique each other's work regularly as the project develops. Waiting until the pages are already published on the Web is like presenting your teacher a rough draft as a final paper! The evaluation process also serves as a language activity: In addition to deciding what information should be included in the site, determining matters of style and design, and verifying that links and other interactive elements in the site work properly before publishing their HomePages, peer editing techniques should be used to get the students to correct each other's language errors.

At critical points in the development of the site, especially when design decisions must be made, the site should be viewed with at least one internet browser. Some HTML editors provide a "preview" feature which allows you to see what the page will look like on the Web. It is also possible to open a file that is under development using a Web browser (for example, under the Netscape "File" menu choose the "Open Page" command). If possible, open the page with several browsers, since not all effects are supported by every browser. What looks right in one browser may not be displayed properly by another. (The sites listed under General HTML Resources contain more information about this potential problem.)

Step Five: Mounting the HomePage(s) on a Server

If your school has a World-Wide Web server, you might ask for permission to mount your student-authored WebPages there. I chose to use a free HomePage service available via the Web. Both the GeoCities ( and Tripod ( Web sites offer on-line support for developing and mounting individual and organizational homepages provided they are not intended for profit and do not violate the rules of the service provider. I used these sites because I thought that knowing about them and how they work would empower the students to mount their own individual HomePages should they chose to do so. Working through the university's network administrators would not have provided them with this knowledge.

Student Roles/Teacher Roles

Throughout the process of researching, compiling and publishing these WebPages, the teachers role is primarily that of facilitator, trouble-shooter (with help from the technical staff at the university computing services), and resource person. The students served as writers, (peer) editors, designers and developers. The more the project is left in the students' hands, the more ownership they will sense and, consequently, the more energy they will bring to the project.

1) Student-Published WebSites: Why learn HTML?

2) Student-Authored WebPages as an ESL Writing Tool

3) WWW Resources for HTML as an ESL Writing Tool

WVESL HomePage

Copyright 1997 by Jerry Bicknell

Permission is granted to freely copy (unmodified) this document (or rather its most up-to-date version) from

in electronic form, or in print if you're not selling it. On the WWW, however, you must link here rather than putting this up as your own page.