Part II: How-To Guide

Planning: Think it through

Before you begin, it's a good idea to map out your site to determine how visitors will navigate through it. You'll want an introductory page explaining who has developed the site and why. Your main page should also provide the principal categories of content found on the site - with links to those pages. This is your main navigation bar and should be repeated on all pages. Contact information should also be accessible from every page, even if it's just a link to a contact page.

Think about the kind of impression you'd like to create, which should be determined by your audience. Do you want a high-tech, sophisticated site to reach science/technology teachers? Or something that's simple and full of primary colours to appeal to elementary students and their parents?

Check the web for similar sites to see which elements you'd like to use and which elements you don't like to help determine how your site will look and function.

Great suggestions for planning and designing a site can be found on the Web Wizard Guide, Web Design 101 and About.com.

Content: Keep it simple

Writing for the web is very different from writing for print. People often scan material on the Internet and don't want to read long, dense bodies of text. Keep language clear, simple and to the point.

Contact information usually includes a mailing address, phone number and e-mail address. In an attempt to circumvent spamming, some sites now write out their e-mail addresses. This gets around automated programs that scan web sites for e-mail addresses. For example, autoshare.com now posts contact information on their site as: info "at" autoshare "dot" com.

Provide your message in small sections. Often, paragraphs are only a sentence or two. Also use headings and bullet points to break up your content. If you need to post a longer text, turn the document into a PDF file so it can be printed for reading.

Take advantage of the work done by others. Add links within your text to take people to articles, updates, other web sites, additional information. It's the only medium where you can immediately point visitors to infinite amounts of supplementary material - and they don't even have to leave their computer.

Site Design 101

Text should be very easy to read. Because information on web sites usually comes in bite-size pieces and will be read on a backlit screen, most web designers find that sans-serif fonts work best. (Characters in a sans-serif font do not have the little flourishes or serifs at their ends. For example, the body of this article is set in a serif font while the headings are sans serif.) Check that the fonts you use are included in the basic operating systems for both Macintoshes and PCs. (Arial and Verdana are good options.) Also consider font size - larger fonts are easier to read.

Take care when choosing the colours of fonts and page backgrounds. If you use a background colour on your web page, be sure that the text colour is easy to read against the background you've chosen. For example, significant amounts of white text on a black or very dark background will be difficult to read.

The basic page set-up and the position of navigation links should be the same throughout your site. Users depend on the links being in the same place and are confused if they are moved. Due to the immediacy of the Internet you have only a short period of time to engage viewers' attention before they leave in frustration.

Accessibility for physically disabled web surfers can also be an issue with site design. The World Wide Web Consortium (W3C) is the authority on this issue and has extensive information and resources available for web developers.

Trace Research and Development Center at the University of Wisconsin also has detailed information on web accessibility, including a complete section on designing for colour blindness.

Be sure to test your web pages on both a Mac and Windows computer and in a couple of different browsers, since your design may work properly in one and not in another.

Web templates allow you to flow your text and images so you don't need to know how to code HTML to create a great web page. Free templates for teachers are available on buytemplates.net and Tomato Tree Designs.

Images

Illustrations, photographs and video are important means of attracting viewers and keeping them interested - but they can also be sources of frustration. Remember to keep images small so they are easy to load.

Photographs are saved as JPEGs and illustrations are usually saved as GIFs. While you don't need to know a great deal to prepare images for posting, it does help to understand as much about the process as possible. For more detailed information on preparing images, see Preparing Web Graphics by Lynda Weinman.

Image sources

Your own original imagery may be your number one option. But there are others.

A large number of sites offer free images and content, but you may have to include a link from your site to theirs. Be sure to read their usage policy before taking an image.

You can also purchase images from image banks. In Google, type "image bank" in the search field and you'll find a number of options. You can often pay online for the right to immediately use a particular image. Getty Images is a very good site for top-quality graphics.

Relying on commercial image banks for all of your site images can be expensive, but you may want to pay for something for use on your home page if it will set the mood for your site.

Some school boards also have image banks that teachers can use for school projects, and there are a number of sites online that provide free images for use by teachers. These include:

• Discovery School
• Free Graphics for Teachers
• The Teachers's Guide - free educational clipart
• Gander Academy - clipart for students and teachers
• Photos for Teachers
• [Oz-teachers] - copyright-free photos
• Classroom Clip Art.

Copyright

Often, it seems as if the Internet is a free-for-all of images and content. This is not the case. You should ensure that you have the legal right to use content and images on your site. One simple way to obtain such material is to create your own - take your own photos, do your own drawings, write your own text. Another way is to obtain permission from owners to use their content or images. Contact information is located on most web sites.

Software

You don't need expensive software to create a web page. You can use the text editor that came with your computer - Notepad/Wordpad (Windows) or SimpleText (Mac). When using text editors, save the page by adding .html to the file extension instead of .txt.

HTML for the World Wide Web by Elizabeth Castro (Peachpit Press, Berkeley, CA, 1998) is the best book I've come across for learning Hypertext Markup Language (HTML). My copy is the fourth edition and it was inexpensive as far as computer books go. It will prove extremely useful if you are learning to create your own web site and includes handy HTML charts for colour and accent codes. It's available at most large bookstores and through some libraries, including the College library.

You can even make an HTML page with Microsoft Word - using the save-as command to save the file as an HTML document. But Word adds a lot of unnecessary code to your page that you'll want to clean up when you are more familiar with HTML. (See Breaking the Code, page 42 for a brief explanation of HTML code.)

For your first web page experiments I'd recommend saving the pages to a file folder on your desktop. Keep all of the images in the same folder and on the same level as your HTML pages until you are more comfortable creating web pages.

If you're ready to use more sophisticated software, Dreamweaver is the industry standard. It doesn't add a lot of unnecessary code to your files and you have the choice of working with HTML or adding text, tables and photos into the design editor.

I would not recommend using FrontPage since it, like Word, adds code that you often don't want.

Other software that comes in handy when preparing material for posting are image-editing programs and Adobe Acrobat.

Photoshop is great for creating images but is fairly complex. Beginning web designers might want to visit About.com to learn about less expensive/free image editors. Type graphicssoft.about.com into your browser's address field; then under Articles and Resources select: Find the Right Software Pixel Illustration/Editing and choose Windows or Macintosh Free Photo Editors for Windows - Top Picks.

Adobe Acrobat allows you to make documents that can be opened by any computer and you can use it for long, dense amounts of text that you'd like viewers to print to read.

Adobe has a free service that allows you to turn a single file into a PDF document online on the Adobe web site.

The Ontario government licenses some software for use by teachers in Ontario, so you will be able to purchase Dreamweaver, Photoshop and other programs at a discount. Check with your Information Technology (IT) department to see what is available.

If you plan to create a web site using school resources, be sure to speak with staff in your IT department before purchasing any software to ensure that it's compatible with your school's systems.

Buying a web address

If you'd like your own domain name/web address, visit any web hosting company (www.powweb.com, www.internic.ca) and type in the web address you would like to own to see whether or not it's available. If it is, registration might cost anywhere from $10 to $50 per year and can be purchased online. These companies will also host the site for you for $10 to $20 per month, depending on the package you choose.

Finding a host

Once you've created your pages, you'll need to find a place to host them. You may be able to host your site through the IT department at your school or school board. Contact them even before you begin to create your pages - IT staff are excellent sources of information and may be able to provide guidance that could save you time and frustration.

If you are creating a site that won't be hosted by your school or board, it's most efficient to obtain your domain name and web space from the same provider. Google "web hosting" and check around for good prices and services.

Before you contact a hosting company, you should give some thought to choosing the appropriate account for you.

• How much site traffic are you expecting? A class of students? The entire school? All teachers in your school district? Everyone with access to the World Wide Web?
• How large will your site be? How many files will you post (images included) and how large are they?

For a list of questions you should ask a hosting company before signing up, visit Freshefuture, FoundHost or CreateFreeWebSite.

With a bit of determination and a willingness to try new things, creating your own web site can be a very exciting experience. Nowhere else can you access such a wide range of people at any time of the day or night. As a teacher, you can reach students, parents and fellow teachers around the world without ever leaving your desk.

Breaking the code

All basic web pages are made up of Hypertext Markup Language (HTML) code. If you'd like to see the code behind any page on the Internet, simply click on View in the top menu of your browser and go to Source.

While it may seem complex, HTML is broken down into commands that appear between less-than and greater-than brackets. At its most basic, you simply begin and end the command. For example, <p> begins the command and </p> ends the command. The "/" always ends any command.

<p> stands for paragraph, <b> stands for bold and <i> for italic text, so a paragraph would be coded like this:

<p>This web site has been developed to provide information for teachers at our school. <b>Note:</b>There will be a meeting of all staff today at 4 p.m. <i>Contact Mr. O'Brien for more information.</i></p>

When it's viewed in the browser, the text would look like this:

This web site has been developed to provide information for teachers at our school. Note: There will be a meeting of all staff today at 4 p.m. Contact Mr. O'Brien for more information.

Additional commands may be added to change the text font and colour. You can also change the background colour of the page and add tables.

Again, the commands are fairly straightforward:

<bgcolor="brown"> turns the background (bg) of your web page to brown. <font color="orange" face="Arial" size="2"> would give you orange text in an Arial font in a readable text size.

For example:

<font color="orange" face="Arial" size="2"><b>The next meeting will take place on Monday, June 15.</b></font>

The text would look like this:

The next meeting will take place on Monday, June 15.

An excellent online resource that allows you to try HTML coding without having to create a web page is HTML: An Interactive Tutorial for Beginners.

Keywords

If you want people to find your site, you need to add keywords to the top of your page. These are the roadmaps for search engines. Without them your content is invisible to the World Wide Web. If you look at the source code at the top of the College home page (click View in the top menu of your browser and go to Source) you'll see:

<meta name="keywords" content="Ontario, College of Teachers, teachers, students, education">

<meta name="description" content="The Ontario College of Teachers regulates the teaching profession in Ontario.">

The "keywords" section includes all words that could be used to find your page on the web. For example, anyone who enters Ontario, College of Teachers, teachers, students or education in a web search, will pull up the College home page. If we'd added "goose" to the list, the College web site would also come up if someone keyed "goose" into their search.

The "description" section is the description of your site/web page. If you did a search for the College, this information would appear:

The Ontario College of Teachers

The Ontario College of Teachers regulates the teaching profession in Ontario.

If you want only a limited, designated audience to see your web page, you would, of course, not place keywords at the top of your page. Just be aware that, even though you do not have keywords or a link to your site, once it's posted on the web - unless it is securely password-protected - someone, somewhere could access your pages.