Create Your Own Course Web Site with HTML
Presenter: Chris Jones, Arizona Western College, Yuma, AZ, cjones@azwestern.edu
presenter's site: http://www.azwestern.edu/modern_lang/esl/cjones/esl_internet/index.htm
How to build an effective web site with HTML
1.

Plan the layout of your web pages before you make any pages--in effect, make a site plan or index. Make sure that it is flexible so you can add or delete categories later. For an example, go to the web site above and click on Site Index. Include:
  1. An opening page, usually including links to all the majors catagories or topics.
  2. Categories you want to include. Some obvious ones might be Assignments, Syllabus, Examples of Descriptons of the various activities you'll do in your course.
  3. Subtopics to go under the categories.
2. Make a draft of your opening page and at least one of two of the main categories.
3. Name at least all the web pages for your main categories before you start such as assignments.htm and syllabus.htm. That makes it easier to create links to those pages later.
4. Find some free clip art, animations, or take photos of your students and/or their work to make your pages more attractive but also to illustrate what you want to show.
5. Find out if your institution requires written permission from students to post their work or photos on the Internet. Mine does. Plan ahead to get students to sign if you're going to need their permission.
6. Decide what html editor you're going to use and use it consistently. Some you might choose from are Macromedia Dreamweaver, Microsoft FrontPage, Netscape Composer, or the text editor on your computer.
7. Be consistent in your layout. It makes your web site look like you planned for it to go together--not like you tried to use every new thing you've ever heard of for web pages. For example, use the same color background or background design on all the pages except maybe your opening page. Choose a font style that is used on all Macs or PCs, or the browser will use its default font. Try to make all titles with the same font size and color. Put your links to other pages for your course in the same location on every page--top, bottom, or side.
8. Start creating the pages. If you were really organized, you can make the links from the beginning since you already named your pages. After creating most of a new page, copy and paste them wherever you've decided to put the links on all your pages.
9. Try to test your pages in more than one browser and on a Mac as well as a PC. Documents I've created in MS Word and converted to web pages aren't always readable on all those platforms and browsers, so I've had to redo them.
 

 

 How I set up the web site for an ESL Internet course

 
  • I put all the links to categories in a frame on the left side as well as at the bottom of each page, including links to the course pages as well as links back to other locations on my institution.

  • The Assignments page is updated before every class, so absentees know what they need to do.

  • The Video and Internet report pages illustrate two of the projects we complete.

  • The Photos page shows a class picture and indivdual photos of the students in the class. When the individual photos are clicked, each one opens in a new web page with an enlarged photo and includes the introduction that that student sent by email to his keypal for the semester, someone usually located in either Japan or Canada.
 
  • The Searching page gives the links to search engines we'll use to find information for Internet reports.
 
  • The Worksheets page shows links to pages I've created to help students learn about and understand various aspects of the course.
 
  • The Fun Activities page shows interesting things to do on the Internet after students have finished assignments. Usually, I start out with one activity and add a new one each week.
   

An excellent book to learn about designing attractive, interesting web pages is The Non-Designer's Web Book, by Robin Williams and John Tollett, Peachpit Press, Berkeley, CA 2000.