How to Make a Successful ESL/EFL Teacher's Web Page

Charles Kelly
http://www.aitech.ac.jp/~ckelly/
Aichi Institute of Technology, Toyota, Japan

You will learn all that is absolutely necessary for writing a successful homepage without being confused by details which you do not need to know. Among other things, you will learn how to enhance your page to be fast-downloading, learn common mistakes to avoid and be given ideas on what makes a successful page. Even if you already have a page online, you are likely to pick up a few good ideas which you have not gotten elsewhere.

There is a frame version and a non-frame version of this page.

If you already have a web site, then perhaps you would prefer to read this related article.

Guidelines for Designing a Good Web Site for ESL Students: by Charles Kelly, The Internet TESL Journal, March 2000

HTML Basics

You don't need to understand much about HTML in order to write a web page. However, you should know the following.

Anything between < and > is HTML code and does not show on the page.
Any number of consecutive spaces, returns or tabs are reduced to one space on the web page.
You can view the source code of any web page, using the "View Source" or "Save as Source" menu items in Netscape or Internet Explorer. This means that you do not need to type any of the HTML code in the the page templates which are included since you can just download one and change the parts that need to be changed.
Different browsers and different computers display web pages differently which means the way the page looks on your computer is not necessairly the way it will look on other computers.
Files should always be saved as "text" and should have the extension ".html" or ".htm". (ie. index.html)

Overview of Basic HTML

Quick-Start Guide
Go to this page, print it out and keep it near your computer as you edit your web page.

Page Templates

Take a look at these page templates, choose one you like and edit it to suit your needs.

Basic Page Which Looks Good on Any Browser
This is a basic, straight-forward page layout which should display well on any browser.
Page Using Tables Which Looks Good on Most Browsers
This one uses table formatting with added color. Good for a short page and will display well with Netscape and Explorer. The colors within the tables only appear with Netscape 3.0 and Explorer 3.0 or newer.
Main Page Linked to Sub-Pages
This shows how you can link to subpages on your site. Some of the links are not functional on this page since the subpages are not actually there.
Main Page Linked to Sub-Pages + Sub-Pages
This is a suggested first page and a couple of subpages.
How to Write a Bilingual Web Page
These are various templates and ideas for writing bilingual pages. Perhaps the most useful for teachers are
- A Bilingual Template for Teachers - 1
- A Bilingual Template for Teachers - 2
Page Parts
- Various Page Section Possibilities
  You may prefer to use one of these section formats.
- Various Text-Only Title Possibilities
  You may prefer to use one of these possible page title formats.
Write a Few Quizzes
- Grammar Quiz - Texas
  Use this as a template to make a multiple-choice quiz which you can submit to The Internet TESL Journal's Self-Study Quiz Project. Submission should be emailed to mailto:iteslj [at] ge.aitech.ac.jp.

Style Guide

There are many "style guides" on the Internet which you can read for more information later, but for now here is a concise summary of what most of them say.

What Makes a Good Page

Fine-Tuning Your Page

Good Color Combinations
If you don't like the color of your page, copy and paste one of these <BODY> specifications into your page.

Samples of Things to Avoid

2-Column Page
Try it and see how long it takes before it starts to show on the screen.
Overdoing Frames
Many people dislike even simple frames.
Font Color Changes
Font color changes often make web pages unreadable.
Wide Tables
Defining table widths may make your page unreadable.

Samples of What Can Be Done

I'm not recommeding that you do these. In fact, some of these are nothing more than playing around and just waste the visitors' time.

Animation & Background Music
This will only work on some browsers and requires a MIDI plugin, too.
JavaScript
You must be using a JavaScript-enabled browser for these pages to work. Even then, some of the code on the following pages won't work on a pre-Netscape 3.0. View the source code of the pages to see how things were done. You can easily copy & paste the scripts you like into your own web page.
- JavaScript Scripts - 1
  Some of the common things you see on web pages. Most are just a waste of time.
- JavaScript Scripts - 2

Things Not Covered in This Workshop

Forms, Image Maps & CGI

For Further Reference

Useful External Links
Places Offering Free Home Pages, Online HTML Tutorials, Tools, etc.

Charles I. Kelly who has been teaching at Aichi Institute of Technology in Toyota, Japan since 1982, is one of the editors of The Internet TESL Journal and has written several ESL textbooks.

The Internet TESL Journal, Vol. III, No. 6, June 1997
http://iteslj.org/

http://iteslj.org/Articles/Kelly-MakePage/