Visual Guide to HTML

John Krygier

This HTML document contains examples of some of the important HTML (Hyper Text Mark-up Language) codes. It is intended as a reference for constructing HTML documents. Not all HTML commands work with every viewer but these really basic ones should.

This guide reflects the state of the art in HTML about 5 years ago, but covers all the basics.

Instructions: View this document with an HTML editor (or open in a word processor) or choose "source" from the view menu in your viewer program (such as Mosaic or Netscape) to see the result.


HTML is a page mark up language, sort of like all the "invisible" symbols that a word processor document uses to designate italics, or underline, and that you can see if you "show invisibles." All HTML is is a text file. You can just type it all in a word or text processor, save it as text, and view it with netscape or some other viewer.

For safety, all text html files should be in lower case, and end with ".html" or ".htm"

All other files should be named accordingly, eg., a graphic (.gif) file should end with ".gif"

All HTML commands are placed between less than and greater than symbols. Anything between these two symbols will not show up in the viewer program. For example, to the command for paragraph break is P and to get a paragraph break put a P between the greater than/less than symbols at the end of a document. This cannot be shown here (but look at the source for this document). In the following guide any HTML command (in caps) should have the greater and less than symbols around it.

Many HTML commands have a "start" and an "end." Thus, the title at the top of this document starts when the command TITLE and ends with /TITLE (both between greaterthan/less than symbols).


All HTML documents should start with the command HTML (beween greater/lessthan symbols) and end with /HTML.

Then add any header material between HEADER and /HEADER. All HTML documents should have a Title in the header. The Title shows up as the title of the HTML viewer document (usually shown on the menubar). Make the title something logical!

Next comes the body of the document...pretty much everything else, between BODY and /BODY at the end of the document (right before the /HTML)

You can change the background colro or pattern of the viewed document. To get a background pattern you need to use the command BODY BACKGROUND and path to a .gif or .jpg file to use as the background. BGCOLOR needs a color to be specified in numerical form. The text below shows the path and name of a .gif file (Tile.gif) which is used to tile together the background.

BODY BACKGROUND=../html_guide_gif/Tile.gif

This changes the background color (this example is black, other colors are other numbers).



An "anchor" links documents together in HTML. The command for an anchor is A. The most common link in HTML is from one bit of text to something else (more text, for example). To link the words "more information" to the document "LinkedDocument.html" set up your HTML like this:

More information

There are other things you can anchor:

Sends E-Mail to John Krygier This may not work if you don't have a mail program active on the computer you are on.

Copies the file ESInfra.sea.bin from an FTP site (if this works, just hit cancel before it loads some junk on your computer!)

You can also...

Move to a particular place in the same document. right here

Or move to a particular place in a different document.

Path-Names: "../" moves you back one directory; "../../" moves you back two, etc. You move into directories by specifiying the directory names. Thus


moves you out two directories from the one the document you are using is in, then moves you into the directory "RubberCat" and to the file "Cat.html"

Changes in directories are necessary if a linked image or HTML file is not in the same directory or folder as the one you are currently in.


Text Headings: Headings are the only thing that can be on a line; thus you cannot put a header and an image on the same line.

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5
Header level 6

Text Size:

this is a font size of +1

this is a font size of +2

this is a font size of +3

this is a font size of +4

You can change the font size within a line of text, thus:

Laqured Pine.

Text Style changes in HTML include:



You can change all the normal text, unvisited links, visited links, and active links (you cannot change selected strings of text yet). Like changing the background pattern, you have to put the following command after the TITLE command to see what it does.

BODY BGCOLOR="#000000" TEXT="F0F0F0" LINK="FFFF00" VLINK="22AA22" ALINK="#0077FF"


Paragraphs are normally left justified and set off with the command "P"

Paragraphs can be centered if that makes you happy.

Forced Line Breaks break a line (like the paragraph command) but without an blank line following the break, such like:

Seven scampering breakfast sausages
Rubber ranger fancy tripod

Bulleted (unnumbered) Lists.

Bulleted Nested Lists.

It is possible to change the default "bullet" in these lists.
Numbered (ordered) Lists
  1. first item
  2. second item
It is possible to change how the list is numbered

  1. first item with capital letters
  2. second item with capital letters
  1. first item with lower case letters
  2. second item with lower case letters
  1. first item Roman caps
  2. second item Roman caps
  1. first item Roman lower case
  2. second item Roman lower case
  1. and you can start somewhere other than at the beginning
  2. and go on from there
  1. or really mix it up
  2. and go on
  3. and go on
  4. and go on
  5. and go on from there

Definition Lists

One bit of text...
And the next line indented.

Nesting Lists: Any of the above lists can be nested within each other.

A Definition List
With a numbered list in it
  1. first thing
  2. second thing
And an unordered list in it...


Horizontal Rule puts a line across the page; there are a few variables...

Embedded Images: Images should be in .gif format and the file name should end with ".gif". Make sure it is in lower case (in UNIX .GIF is something else; UNIX also does not recognize .GIF as a gif file).

The image can be made transparent with Photoshop:

The image can be on the same line with text (as long as the text is not a header):

Thisis default (BOTTOM) alignment.

Thisis ABSBOTTOM aligned.

Thisis TOP aligned.

Thisis TEXTTOP aligned.

Thisis MIDDLE aligned.

Thisis ABSMIDDLE aligned.

Thisis BASELINE aligned.

Thisis with a border.

Thisis centered with a border.

More than one image can be on a line:

An image can be linked to another document:

click on me.

E-mail: Geog 353 Main Page and Course Description krygier teaching page. krygier top page.

OWU Home
OWU Geology and Geography Home