You are here

1. DO Learn Basic HTML (HyperText Mark-up Language)

There's no such thing as WYSIWYG (What You See Is What You Get) in HTML. Every browser interprets HTML in a slightly different or outdated fashion. Many users of HTML assistants or editors are stunned when they find out their web pages appear different or even garbled when viewed by a different browser.

Learning HTML (and CSS) on the Web
HTML Tutorials (Case Western) - www.cwru.edu/help/introHTML/toc.html - Includes great tutorials on image maps and tables in HTML 3.2 and on forms in HTML 2.0.
Eric Meyer on CSS: Links - www.ericmeyeroncss.com/links/ - CSS expert Eric Meyer's Recommended Links to Everything about Cascading Style Sheets.
HyperText Markup Language (HTML) Home Page - www.w3.org/MarkUp/ - Current official information on HTML and XHTML and their specifications.
Cascading Style Sheets (CSS) Home Page - www.w3.org/Style/CSS/ - "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to web documents. Tutorials, books, mailing lists for users, etc. can be found on the 'learning CSS' page." There is also a CSS Validator at this official CSS site.

2. Design for the user!

Designing for the user means that the pages you design will be accessible and easily navigated by the user. When users look at your page they will develop the use model of your page from what they see. If you did your job well, they will be able to navigate and locate the information they desire with ease.

  • Not all browsers support graphics!
    • Many people searching the web don't ever see your graphics. Some are using browsers that don't support graphics, others have turned them off. This is something you MUST consider when designing your pages.
    • Always offer text alternatives to everything. If you use an image map, be sure to provide a text version as well. It may not look as nice, but try turning off graphics and see how far you can get!
  • Not all browsers support TABLES the same way!
    • There are some dangers with tables. First of all, we do not know the size of the person's screen who will be looking at our web document. Thus we should be careful in using TABLES to control the location of elements on the screen.
    • Most importantly, however, we should be aware of what happens when a browser does not support TABLES: All the text runs together- A fix for this is to add <BR> tags to the beginning of each Table section.
    • The Case Western HTML Tutorial listed above has a great section on tables.

3. Validate your HTML

Reasons

  • There is no such thing as WYSIWYG (What You See Is What You Get) in HTML.
  • Not all the browsers implement HTML in the same way.
  • Some tags pertain to only one browser.
  • What looks good in the browser of your choice may be unreadable in a different browser.
  • Not supporting a browser can cause millions of people to not be able to see your site.
  • Some browsers are more forgiving than others. You trust your browser. But what if there's a typo that your browser lets by, but other browsers choke on? This happens!

How to validate - We suggest using the following site:

  • W3C HTML Validation Service - validator.w3.org/
    • We recommend putting the document type declaration (identifying the version of HTML you are writing) in your web pages. For example, the following line goes beforethe beginning <HTML> tag for this page, which is using XHTML 1.0 Strict:

      < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

    • If any errors are found in your HTML document, they will be listed by line number with a link to an explanation of the error. Understanding this report can be difficult at times, but stick with it.
    • You can even check files still on your computer from this service.

4. Check your pages in as many browsers as possible

At a minimum, check with MSIE, Netscape, Firefox, and Lynx (a non-graphical browser and useful for simulating what a person having a web page read to them with text-reading software would "see").

To check with Lynx from the web, go to - lynx me at: ugweb.cs.ualberta.ca/~gerald/lynx-me.cgi

5. Know the <IMG> tag

Always use ALT

  • Every time Lynx finds an <IMG> tag without an ALT attribute, it will display the following to the user: [IMAGE]
  • Sometimes ALT tag descriptions aren't needed. Rather than leaving the ALT tag out, use ALT=" ". This will suppress the [IMAGE] seen by lynx users.

Use WIDTH and HEIGHT

  • By adding the WIDTH and HEIGHT attributes to your <IMG> tags, you can decrease quite dramatically the amount of time users have to sit and wait for graphics to download. WIDTH and HEIGHT attributes allow the browser to determine the layout of your document. By knowing how large each graphic is going to be, the browser can display your document in its entirety with gaps left where the graphics will appear. As each graphic downloads, it is displayed in those gaps. The user can now scroll around and read the text while the graphics download! Bring up your graphic in the Netscape window to find out its size in pixels - it is displayed in the title bar. If you are using MSIE, right click on the graphic and select Properties to see the dimensions in pixels.

    How the tag would look - <IMG SRC="library.gif"ALT="Library" WIDTH="300" HEIGHT="200">


Things to Avoid on the Website

Avoid "Coming Soon" and "Under Construction" signs

When something is "published" for the web it isn't static. It can be changed any time to add or update information. This is the power of the web. Indicating that things may change is only stating the obvious. On the other hand, when you put pages up they should be correct, with all links working. Anything less is like printing a book with pages missing, the user is not getting what you have promised. If you do use "Coming Soon," make sure to include a date.

Click here - assumes that everyone is using a mouse with their browser.

Don't use Header tags to change font size

This confuses adaptive technology and indexing software.

Headers - <H1>text</H1> through <H6>text</H6> should be used in order - not <H1> then <H4> then <H2>. Again, it confuses other software that uses your page.

If you want to control font size, use the font size=n tag - with n being 1 through 7 - 1 = smallest and 7 = largest and 3 = the base size. They aren't seen by some other browsers, but it doesn't hurt them.
For example:
<FONT SIZE=5>Infopeople</FONT> =Infopeople.
or
<FONT SIZE=2>Infopeople</FONT> = Infopeople.

You can also use the size tags <BIG> & <SMALL>. These are now used by Netscape 2.0 and up and will be the standard as newer versions of browsers implement them.
For example:
<BIG>Infopeople</BIG> = Infopeople. This is cumulative, so
<BIG><BIG>Infopeople</BIG></BIG> = Infopeople
or
<SMALL>Infopeople</SMALL> = Infopeople. This is cumulative, so
<SMALL><SMALL>Infopeople</SMALL></SMALL> = Infopeople

Physical character highlighting

Use the tags:
<B></B> for bold and
<I></I> for italic.


Miscellaneous

Paragraphs <P>

In certain contexts, use of <P> should be avoided, such as directly before any other element which already implies a paragraph break.

To wit, the <P> element should not be placed before <H1>, etc., HR, ADDRESS, BLOCKQUOTE, or PRE elements.

It should also not be placed before or after a list element.
That is, a <P> should not be used to mark the end-of-text for <LI>, <DT> or <DD>. These elements already imply paragraph breaks.

While it is true that all of the entities mentioned above imply a paragraph break, this only occasionally means that they also imply white space between sections -- this depends on the browser. So, an alternative is to use the <BR> tag. In Netscape multiple instances of <BR> will create multiple line spaces.

Don't use the Netscapism <CENTER> tag

Use <P ALIGN=CENTER> </P>, <H1 ALIGN=CENTER> </H1>, etc. rather than <CENTER> </CENTER>

We recommend surrounding a table with <DIV ALIGN=CENTER> </DIV>

Directory Reference Errors

It is possible to request an index of a directory from an HTTP server. The typical response from the server is to either return a pre-generated index document (which is often the document "index.html" in the referenced directory), or to construct an HTML document on the fly which contains a listing of all files in the directory. However, when making such a directory reference, it is important to make sure to have a trailing slash on the URL. That is, if you were to request the index of Infopeople's directory of HTML documentation, you would want to refer to it as
infopeople.org/
not as
infopeople.org (missing the end )

Many servers are able to catch these errors, and provide redirection to the proper URL, but it's best to get the URL right in the first place -- notably because not all browsers support transparent redirection. Also, getting this correct the first time means it will take less time for the page to be loaded; your readers won't have to wait through the time needed to open two (or more) HTTP connections.

Missing quotes in start tags

This reference to the Cerritos Public Library Home Page should look like:
<A HREF="library.ci.cerritos.ca.us/">
but people composing "raw" HTML from a text editor will often instead type:
<A HREF="library.ci.cerritos.ca.us/> (missing the end ")

The behavior of browsers upon encountering this varies -- some display a proper link, but you can't follow it, while others actually eat up huge portions of the following text, thinking everything up until the next quotation mark to be part of the URL.

Missed end tags

Many of the HTML elements contain information within them. For example, <EM>emphasized text</EM> would be rendered as emphasized text. There is a start tag (<EM>), some content (which may include text, and in some cases, other nested elements), and an end tag (</EM>, indicated by the /). A common mistake is to miss the / in the end tag.