FAQ Resources Forms Reference Remote
Access		 Guidelines
& Policies		 Staff
& Jobs
Internet Basics
Email / Spam / Viruses
Instant Messaging
Laptop Setup
Student Disk Quota
Creating Web Pages
Passwords
User Profiles
After Graduation

HTML Tips

Style Guides

I recommend that you visit these pages in particular:


There are plenty more resources on the Web designed to help you create excellent Web pages. Here are a few:

back to top of page

Common Errors to Avoid

Get the structure right: HTML documents have a strict structure. If you don't follow the model, your pages will be rendered unpredictably by a visitor's browser software (in plain English: your page may look right on your screen, but there's no guarantee others will see anything like what you see).

Make sure your pages ALWAYS have the following tags and logical structure: 
<HTML>
  <HEAD>
    <TITLE>
       This is what appears in the title bar
    </TITLE>
  </HEAD>

  <BODY>
       This is what appears in the window
       ...
  </BODY>
</HTML>
Put another way: The TITLE goes in the HEAD of your page. The HEAD of your page comes before the BODY of your page. The HEAD and BODY should be enclosed by the HTML declaration.

Note: the extra spaces & indentations above were added for visual clarity; web clients ignore white space. The above HTML would be interpreted exactly the same on the user's screen if it had no wasted space, i.e.:

<HTML><HEAD><TITLE>This is what appears in the title bar</TITLE></HEAD> <BODY>This is what appears in the window ...</BODY></HTML>

back to top of page

Have a title The title of a page doesn't show up inside the user's window; it appears at the top of her window, and it is also what gets used to refer to your page (such as in the user's history list, or as the name of a bookmark).

Often what you want as the heading of the page is also what you want in the title bar of the user's window, so you have to put the text in two places in the page: once in the TITLE tag (i.e. <HEAD><TITLE>Put the title here</TITLE></HEAD>), and (probably) once at the top of your page in a heading.

If you don't put a title on your page, the user's bookmark list or history list will just use the page's raw filename, producing an unexciting and non-descriptive entry like "mypage.htm" instead of "Joe Smith's Home Page".

back to top of page

Have only one set of <BODY> tags When you try to get fancy and add background patterns, background colors, and different text and link colors to pages, it's easy to make the mistake of having too many <BODY> tags running around your document. There should only be one <BODY> tag (which may contain multiple options in it) and one </BODY> tag.

If you have multiple options to specify in a BODY tag, separate them with spaces but keep them all in the same tag (i.e. between the < and >). Examples:



Wrong:
<BODY bgcolor="#FFFFFF">
<BODY TEXT="#000000" LINK="#660033">
(content goes here)
</BODY>


Right:
<BODY bgcolor="#FFFFFF" TEXT="#000000" LINK="#660033">
(content goes here)
</BODY>

back to top of page

Nest tags; Don't overlap Every tag that consists of two parts should not contain the beginning of another two-part tag without also containing its ending. For example, if you wanted to make part of a phrase italicized and bold, you would do one of the following: 
  1. <EM>
  <STRONG>
    This phrase must be really important.
  </STRONG>
</EM>
    or

  2. <STRONG>
  <EM>
    This phrase must be really important.
  </EM>
</STRONG>

    either of which produces the result:
This phrase must be really important.

Note that in the first case, the start and end of the STRONG tag are entirely enclosed in the EM tag, and vice versa in example 2.

If you break this rule, results will be unpredictable. For example:
<EM>
  <STRONG>
    This phrase must be really important.
</EM>
  </STRONG>
Since the STRONG tag was not closed in the proper order, the user's browser may put the rest of your document in bold (even if yours doesn't while you're testing the page). Make sure you close tags in the proper places.

back to top of page

Have a default document in each of your directories

coming soon...

back to top of page

GIF vs. JPEG; which to use?

Scanned pictures can be from any source (PC, Mac, Unix, etc.); they just need to be in one of two formats: GIF or JPEG (aka JPG in the DOS world).

JPEG is better for photos because it compresses a lot of color information down to a small file size without losing much image quality. JPEG uses a "lossy" type of compression, meaning that some image data is in fact discarded to make the compression ratio better. In images with a lot of color gradations (such as photos), such data loss is rarely visible to the casual observer.

GIF is better for "artificial" graphics like logos, buttons or directional arrows. GIF is not lossy, but it is limited to only 256 colors -- not enough for true photo-like images.

back to top of page