Visual Guide to HTML

This HTML document contains examples of some basic HTML (Hyper Text Mark-up Language) codes. It is intended as a reference for constructing HTML documents.

This guide reflects the state of the art in HTML about 15 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.

BASIC HTML INFORMATION

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).

BODY BGCOLOR=#000000

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.

...like right here

Or move to a particular place in a different document.

../../RubberCat/Cat.html

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

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.

Bold

Italics

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"

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

• first item
• second item

• something here
• something there
  • something old
  • something new

• this is the "disc" type bullet
• this is the "circle" type bullet
• this is the "square type bullet

1. first item
2. second item

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

5. and you can start somewhere other than at the beginning
6. and go on from there

5. or really mix it up
6. and go on
7. and go on
8. and go on
9. and go on from there

One bit of text...

And the next line indented.

A Definition List

With a numbered list in it

1. first thing
2. second thing

And an unordered list in it...

• first bullet
• second bullet

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

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.