To Make a [Good] Web Page

If you are creating a web site, you should read this page first. I will cover three important areas: good design, HTML, and maintenance. If you follow these suggestions, your site will be easy to use, easy to maintain, and probably won't look too bad.

Good design

It is important that you use a good design on your site. A well-designed site is easy to use. Users will be able to find their way to the information that they need. If you use a bad design, users will have a hard time finding what they need. Here are some design tips:

Keep your design simple. If you use a complex design, users will get confused. You don't want users to be confused by the design.
Don't cover the entire screen with text and images, leave some empty space ("white space"). The empty space makes a page easier to look at than a cluttered page. I suggest a margin around the body text.
All the links in navigation images should be mirrored as text. Someone might have a slow connection and choose not to load images. If you aren't using an imagemap, alt text is usually good enough.
Don't overdo it on fonts! The body text should usually be a normal serif face (Times, a.k.a. Times New Roman is the standard face.) It is a good idea to use a different font for the headings than the body. You should only use the CSS seref and sans-serif fonts.
Do not use two fonts that are almost the same. If you use more than one font, make them obviously different.
Use single spaces between sentences. Double spaces are bad typography.
Do not center everything. People who are new at design usually overdo the centering.
Keep it simple.

Graphics

It is a good idea to use some graphics instead of just text. You can use graphics to make your design more attractive. One well-placed graphic on a page can do amazing things. Using a small graphic for the heading of a page looks really good. A simple logo in the same place on every page is often a good idea.

The most important use of graphics is to illustrate a point. Charts and other graphics can be very effective way to communicate a point. This should be your main use of graphics.

Always use alt text.

Images can enhance your design, or they can destroy it. Keep the pictures to a minimum. Use images with small file sizes. Use only what you need. Remember, many otherwise good designs have been ruined be excessive use of graphics.

Effects to avoid

The web is multimedia. You can use text, sound, images, and video. Most new web designers overuse graphics, sound, and animation. Here are some common mistakes that you should avoid:

Don't use marquees.
Do not use blinking text.
Keep animation to a minimum.
Do not start a sound playing when a page is loaded. It is very annoying and increases loading time.

HTML: The language behind the web

You can't create a web site without HTML. You could use a WYSIWYG editor to create your site, but if you know something about the code behind the page, you will do a much better job. This is not an explanation of HTML, but some suggestions to make sure that you use HTML properly. If you use these suggestions, your site will probably look good, be easy to use, and be easy to maintain.

Code you must use

Use only heading tags (<H*>..</H*>) for headings. HTML includes six levels of headings. If you are using all six levels, your page is too long and should be broken into several smaller pages. Three or four levels as almost always enough. Do not use font tags to create headings. You can change what the headings look like using CSS.
Make sure that book titles are italicized, not underlined. A single underline is used in drafts to show where the final will be italicized. Since you are using a computer to create a publication, skip the underline and use italics.
Paragraphs should be created with the paragraph tag (<p>). The break tag (<br>) is for forced line breaks, not for paragraphs.

Code you should use

HTML4.0 (instead of HTML3.2) Version 4 is easier to maintain and works better on old browsers than v3.2.
Cascading Style Sheets. CSS makes designing a site much easier. You can create one style sheet for an entire site. When you decide to change the design for the entire site, you will only have to change one file. I created a style sheet (style.css) that can be used and modified. You can also use the W3C Core Style Sheets. Useful links... the official CSS site and WebReview
Remember to put a title in the header of a page. Try to avoid the common mistakes of not using a title or using an incorrect title.

Code to avoid

Avoid tags that only work in Netscape or only work in Internet Explorer. Make sure that the tags you use are good HTML. If you aren't sure that your code is good, validate it.
Never use <font> tags. For headings, use heading tags. To change a font, use CSS. To make a font smaller or larger without changing the font, use CSS or the <small> and <big> tags.
<blink> and <marquee> are two of the most annoying tags. Most people don't like them. Since they are browser specific, they shouldn't be used anyway.
<center>. Use CSS for formatting when you can.
Avoid using frames. If frames don't improve your design, don't use them. If frames do improve your design, feel free to use them. I used frames on three of the sites that I have designed. Remember that it is usually easier to navigate and maintain a site that doesn't have frames.
Do not use double spaces for sentences. Use single spaces between sentences. Using double spaces (  , or   , etc.) for sentences is bad typography. This applies to print and electronic documents.

Make sure that you use this code properly

Don't use <table> to indent unless you really need to. Indents should be left to CSS. Please limit your use of tables for formatting. Do use <table> to create tables.
List tags, <dir>, <ol>, and <ul>, are often misused. List tags are for creating lists. Do not use these tags for indents. To indent use CSS. (margin-left, etc.)

Please try not to create sloppy code!

Maintenance

No matter how good of a job you do of creating a web site, something will need to be changed. Even if all the information is accurate, the spelling and grammar are correct, and all the links work. That is just the way the web is. It is important that the site is easy to modify. If you do a good job of designing a site, and use clean code, it will be easy to modify.

Please try not to create sloppy code!

Records

There are some things that you should record while designing and updating a web site. These records will help keep the design consistent. When someone else is updating the site, the records will save them time. Here are a few things to record:

Keep a file with the names of fonts you use and where they were used. This is very important for images.
For images with text over them, keep a copy of the picture without the text. Even better, keep the Photoshop picture with the images and text on different layers.

When you are finished creating a site, it is a good idea to validate the HTML.

Definitions

Alternate text: Alt text is used instead of an image in non-graphic browsers and browsers with image loading turned off.
CSS: Cascading Style Sheets. CSS is used for formatting web pages. Style sheets can be put at the top of a page or included in a separate file.
HTML: HyperText Markup Language. HTML is the language used to create webpages.
JPEG: Joint Photographic Experts Group. JPEG created a standard image format also named JPEG. JPEG images are a good way to send photographs across a network due to their high compression.
WYSIWYG: What You See Is What You Get. Pronounced "Whiz E Wig" Front Page is a WYSIWYG HTML editor.