HTML in a nutshell


You may find it easiest to open a second browser window and actually work on your page while referencing this page at the same time. You can do that in almost any browser by choosing "New Window", "New Web Browser" or "New Browser Window" from the "File" pulldown menu.


That's it. Have fun!

Index

Go to index.

What is HTML?

HTML stands for Hypertext Markup Language. It consists of a set of codes which are inserted in a document to control the way the document is displayed by a "web browser" such as Netscape Navigator/Communicator or Microsoft Internet Explorer. Since you are viewing this document, you must be using a web browser. If it has a "view source" feature, you can see what this web page looks like with the codes showing. In Netscape, select VIEW, then SOURCE... If you are familiar with the hidden codes used by word processors such as WordPerfect, you will see that HTML codes are very similar. A document containing these codes is called an HTML document.

An HTML document must have the proper form, so that it will be recognized and interpreted properly by the browser software. The basic form is:


< HEAD >
< TITLE >
< /TITLE >
< /HEAD >
< BODY >
main_part_of_document_goes_here
< /BODY >
< /HTML >

You should notice two things here. Opening codes are enclosed in brackets < > , and closing codes include a slash < / > .

For example, an HTML document is opened by < HTML > and closed by < /HTML > .

The best way to learn how to use HTML is to use it. Try out the tips on this home page. Each one will teach you a little more.

Go to index.

Colors

Colors, background images, and some other features are controlled by the tag.

You can control the color of the background, text, and links in your home page by using the tag. To control the various colors on your page, the < BODY > tag is written like this :

< BODY BGCOLOR="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx" >

You may include any of the items (bgcolor, text, link, vlink or alink), or leave any of them out. To set the color of the background, text, link, visited link, or active link, substitute a color value for the xxxxxx in the sample above. Do not make them all the same color, or you won't be able to see anything on your page.

Here are a few colors that you can use:

  • White = FFFFFF
  • Yellow = FFFF00
  • Red = FF0000
  • Grey = DCDCDC
  • Blue = 0000FF
  • Green = 00EE00
  • Black = 000000
  • Purple = CC33FF
  • Lt. Blue = 00CCFF

These values represent the hexidecimal value of the red/green/blue combination that makes up the color. A full explanation of these values is beyond the scope of this page, but can be found elsewhere on the web. When you see a color you like on another home page, you can use the "view source" feature of your browser to see the code for that color.

SUGGESTION: Start out by adding the tag

< BODY BGCOLOR="#FFFFFF" text="#000000" link="#0066CC" vlink="#336600" > < /td >

as the first item in the "Body Text" window. This will give you the color combination used on this page (as long as you have unchecked the box above the pulldown menus). Once you have that working, you can experiment with different colors by changing this tag.

Go to index.

Background Images

To add background images instead of background colors, you need to use the attribute BACKGROUND in the BODY tag instead of BGCOLOR. For example, if you wanted to use an image named "bg.gif" for your background, the tag would look something like this:

< BODY BACKGROUND="bg.gif" text="#000000" link="#0066CC vlink="#336600" >

Note: the image must be located in your own directory in the example above. If it's located somewhere else, you'll need to give the entire path in order for it work successfully. For more help with loading images, please see the section on adding graphics to your site.

Go to index.

Horizontal lines

You can insert a horizontal line (horizontal rule) in your document by inserting a < hr > tag. The default line is a full width, thin, and shaded, like this:


Enhancements to this tag, which are recognized by most browsers, allow more control of the appearance of the line. By adding SIZE=NUMBER, the thickness of the line can be controlled. The alignment can be controlled by adding ALIGN=LEFT/RIGHT/CENTER. The width of the line can be adjusted by adding WIDTH=PERCENT. A black line can be created by adding NOSHADE.

Combining these enhancements,

< hr size=10 align=left noshade width=50% >

will produce a thick black line at the left margin, half page width.


Note: The "fancy" lines used on many web pages are not produced by the


tag. They are
graphic images.

Go to index.

Bullet lists

You can create bullet lists by using the