Skip past the navigation links to the page content The Flying Cat Home

Guides to
Hypertext Markup Language (html)


Anyone who slaps a "this page is best viewed with Browser X" label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.
Tim Berners-Lee in Technology Review, July 1996


There are many good tutorials available on the web authoring. You can find by searching through indexes to the web for the string "html tutor". In your search statement you'll probably need to include the quotes.

In-House Guides

Planning and Preparation

Start your planning with the initial content you want to publish on your site. Print the material and lay it out on a table and you will begin to see how the narrative will flow from one page to another. You can use paper and pencil to sketch out the flow of traffic from one page to another and from one topical area to another.

Group your web pages by topic, placing distinct topics in directories of their own. Each subdirectory should have its own homepage, index.html, that appears when visitors parse a URL. This subdirectory homepage may offer a complex introduction to the topic, or may simply introduce the subpages contained within. At any rate, the homepage should annotate each link, providing some description, and should contain a link back to the site's main home page. Navigation bars, menus and popups as guides to the site can be included. Most navigation information is placed in the foot of the page.

Generally the top level directory will contain a subdirectory titled "images" or "graphics" or even "media" if you plan to include video or sound. In that top level "media" directory you will include images that are used across the site as a whole. This enables you to keep track of important images such as organizational logos and backgrounds.

Maintain a sense of consistency in your web site. Use the same background gif on all of your web pages, or a small variation in color to mark a series of pages within a single topic.

All web pages should be "stamped" with certain information, usually placed in the foot. This information identifies you and the web page and includes

  • Your name as the author or owner of the page
  • The URL of the page itself
  • A link up to the referring page, or to the top page in this topical group of pages
  • A link to the site's main home page
  • A mailto link that displays your email address as the link text. Some people prefer to handle email in a program other than the browser. By incorporating your email into the link text of the mailto URL you provide the address to these people as well as offering the hyperlinked email function.

Accessibility Issues

Here is a collection of reference guides, introductions and documentation to the Hypertext Markup Language (HTML), the language used to format web documents.

A really great, interactive, Hypertext tutorial

General Guides and Documentation

  • Organizing Your Site from A-Z is about website architecture and includes file and directory structures as well as navigation.
  • Web Site Development contains links to myriad tools and techniques, including browser information and simulation (see how your pages look in various browsers, including backwards compatibility). It also links to a number of resources on marketing and promotion of web sites.
  • Web references's Guide to HTML 3.2 is well designed to provide a brief reference to tags, but it doesn't include in-depth explanations and instructions.
  • Webwork contains terrific links to how to do things general and specific. Their link to ruler lines and controlling the appearance of bullets in list commands is the best I've seen.
  • HTML code for symbols and special characters.
  • HTMLgoodies includes a series of terrific tutorials on specific aspects of page construction. Here you'll find mini-tutorials on backgrounds, image maps, tables, etc.
  • HTML Tips and Hints. I especially like their explanation of how to place text and graphics side by side, and their discussion of the differences between absolute and relative URLs.
  • A Beginner's Guide to HTML. This is a very rich and comprehensive site from the NCSA, the National Center for Superconducting Applications. You could learn all the HTML you need here.
  • HTML Documentation from W3. W3 is the World Wide Web Consortium, a non governmental organization dedicated to developing common standards for the WWW. It's led by Tim Berners-Lee, the creator of the WWW. This site contains a number of useful links to HTML tutorials and to papers and discussions on the development of HTML.
  • For a lighter view of hypertext try the Mind Reading Markup Language (MRML)
  • Meta Tags control *how* your page will be indexed.
  • About URLs, URIs, URNs

Check your HTML Code

Making Frames and Tables

Please be sensitive to the fact that not all pages are suitable for frames and tables. If you want to learn to make a framed page by doing it, then I encourage you to place the frame on a separate page, labeled as a test piece.

Forms in HTML

The Common Gateway Interface (CGI)

Programs

Using HTML Editors

Try using the Netscape Composer. It's pretty easy to use and creates clean code that you can actually edit later!

GSU Dreamweaver tutorial is in PDF format.

WebPlus 1 is a free web page editor. This company also offers a free graphics editor, PhotoPlus.

Exceptional Web Pages

  • Jeff Gates has one of the most interesting web sites I've seen yet.
  • Jan Hanford's Doris Lessing site is spare and clean and beautifully rendered.
  • Salon is an Internet-based magazine that offers an exceptional example of the power of hyperlinking.
  • Envirolink is a beautiful example of the use of color an imagery to bring cohesion to a web site.
  • Internet Literacy's Common File Formats is an excellent example of the appropriate use of the table tag.
  • The @art gallery

1994 - 2008 Paula Edmiston

http://theflyingcat.com/handouts/html/index.html
Last Edited: 01 Dec 05