Search form

You Can Create a Class Web Site

If you've read the Education World techtorial HTML Basics, you know how easy it is to create a basic Web page. In this article, you'll learn how to extend those lessons to create your own classroom Web page. Included: Four steps to designing and creating a classroom Web site.

According to Jakob Nielsen in his column Changes in Web Usability Since 1994, "The Web is no longer an experiment; it is mainstream. You have to rely on the ability to do business on the Web, and people get very annoyed when they can't. Limited sites are seen as a sign of corporate incompetence."

Nielsen made that statement in 1997. Even allowing for the technological lag time between the corporate and academic worlds, the day is rapidly approaching when the same statement will be made about schools and teachers; when limited school sites or non-existent teacher sites will be seen as clear signs of educational incompetence. In some places, in fact, that day already has arrived. Most schools today have their own Web sites. Isn't it time your class had a Web page on your school's site?

If you've read HTML Basics, Lorrie Jackson's Education World techtorial, you know how easy it is to create a basic Web page. It's so easy, in fact, that a child can do it. In this article, you'll learn how you can extend the lessons from that techtorial to create your own classroom Web page -- in four easy steps.

Additional Classroom Web Site Features

As you gain skill in Web page creation and design, you'll want to add new features to your classroom Web page. Consider the following additions to your site:

* a photograph or brief biography of the student of the week

* examples of exemplary work

* a quote of the day (See

* the day's schedule

* the "specials" schedule

* the current weather or a link to a daily weather site

* extra-credit quizzes

* curriculum-related hotlists

* pictures of classroom activities or school assemblies

* notices of upcoming school or classroom events

* grade-level appropriate books list

* the day's homework or long-term assignments

* class rules

* a link to the school newsletter


Solid research is the foundation of any project, whether that project is a student-written science report or a teacher-created Web Site. In this case, you'll want to check out some existing Web sites to discover what you like and don't like about them, and what you want to imitate -- and eliminate -- on your own site.

To find out what not to do, start with a visit to The World's Worst Website, where you'll experience a kind of sensory overload -- the kind you'll know you want to avoid. Then, drop in on Web Pages That Suck for a more complete picture of the don'ts of Web design. By the time you're done, you'll have learned the first rule for creating your own Web page -- Keep It Simple!

Next, explore some sites worth seeing. Education World's Web Wizards feature offers excellent examples of teacher-created Web sites. Notice what each site provides, and make a list of those elements and features that would be appropriate for your site as well. If you see something specific that you like -- a fabulous feature, the perfect clip art image, your school colors, or an interesting layout, for example -- bookmark those sites.

Finally, be sure to research your district guidelines and policies for Web postings. Many districts or schools require teachers' pages to include certain information -- and prohibit them from posting other information. Can you publish photos of students, your personal e-mail address, examples of student work? Must you publish your school e-mail address, a link to the school's homepage, or the district acceptable use policy (AUP)?


As you've told your students over and over (and over) again, careful planning is the most important factor in any project. Before typing a word or searching for a single graphic, you'll need to determine the purpose of your Web page and its intended audience. Are you creating the site to make parents aware of classroom activities, to provide curricular hotlinks for students, to offer homework help, supplementary lessons, parental support, and community resources? Your site's purpose and audience will help determine the features you provide.

Next, you need to decide the specific features your page will offer. Use a Simple Storyboard template to draw a rough layout of the actual page. For your initial Web page, limit yourself to only a few features; your contact information, a syllabus, a calendar of events, and a link to the school homepage are a good beginning. Later, you can add other features, such as curriculum hotlists, photographs of class activities, homework assignments, and more. For now, remember Rule Number One -- and keep it simple!

The real challenge, of course, comes in deciding how you want the features on your Web page to look and figuring out how to make them look the way you want. Storyboard Layout templates will help you think about some of the basic elements to include in your page design and help you make sure those elements are consistent throughout your site.


This is the part you were dreading, right? But it really is easier than you think! First, review the HTML Basics techtorial, which provides simple instructions for creating a Web page. Then, type the text for your site into a standard word processing document. For your initial Web page, it's best to stick to the most universally accepted fonts -- Arial or Times New Roman on the PC, and Helvetica or Times on a Macintosh. A font size of 12 is appropriate for most body text.

Use your spellchecker to check your text's spelling, punctuation, and grammar. Nothing detracts from the professionalism of a Web site quite as much as spelling and grammatical errors! When you're sure of its accuracy, copy your text and paste it into a Notepad file. Open a new folder, give the folder a clear and appropriate name (such as Grade 1 Web Page), and save the Notepad file to that folder. Be sure to follow the directions in the techtorial for saving your text. Place the folder on your Desktop.

Now its time to format the text in Notepad. For the simplest formatting, you can use an HTML Cheat Sheet to find the correct tags. But what if you can't find the tags you need for a particular formatting style? Remember the sites you bookmarked in Step 1? Find a site with the formatting you're looking for, go to File in the menu bar, and click View Source. In most cases, that will allow you to view the HTML tags used at that site. Simply use the same tags with your own text and the problem is solved!

Next, collect your graphics. Download appropriate educational clip art from such sources as the Education Clip Art, or scan your own art or photographs onto your computer. Give each graphic an easily recognized file name and save it as .gif files in a new folder. (You might name this folder Grade 1 Web Page Graphics, for example.) Place the graphics folder inside the Web page folder you've saved on your Desktop.

Now, insert the tags for each image into the appropriate area of your Notepad file. The HTML tagging for images is . (Be sure the file name in the tag matches exactly the file name of your image.)


Note that the tagging above will align your image to the left side of the browser window. To change the alignment, you'll need to add an additional tag. will align your image on the right side of the window. will center your image.


Now follow the directions in the HTML Basics techtorial to view your site. Go to File in the menu bar and click View Source to see your tagging and make any necessary changes.


When your Web page is formatted to your satisfaction, contact your school's Webmaster to find out how to upload it to the school Web site. In most cases, the Webmaster will handle that task for you. Don't forget to ask about maintaining your site as well. Nothing looks tackier -- or less professional -- than an obviously outdated Web site! If you've kept your site simple, maintenance should only take a few minutes a month.

And that's all there is to it!


Accomplished Web authors offer the following tips for creating a first Web page that looks professional, while accomplishing your goals.

  • Provide clear and simple headlines and page titles.
  • Avoid page elements that move constantly.
  • Do not include sounds that play automatically.
  • Minimize scrolling. Never expect users to scroll more than three screen lengths.
  • Keep paragraphs short and page sizes small.
  • Limit image sizes to fewer than 20k each.
  • Avoid overly-busy or multi-colored backgrounds. Leave lots of white space.
  • Limit animations.
  • Use the same font throughout. Stick to universal fonts.
  • Maintain the site and update it regularly.


Of course that's not really all there is to it. Creating a Web page is like any other skill -- it takes time and practice to master the intricacies of the process. But if you start with the basics and add to your knowledge a little bit at a time, you'll be an accomplished Web author in no time.



Article by Linda Starr
Education World®
Copyright © 2003 Education World


Updated 10/26/2007