What is HTML?

HTML is HyperText Markup Language.

HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory
for Particle Physics in Geneva.
HTML code allows you to format a page with text and images so you can display it
on the World Wide Web. You don't need to have previous programming
knowledge, and you don't need special programs to code HTML.

HTML Editors
HTML documents are text files that you can "code" with a simple text editor like
notepad

Putting Your Site Online

After you build a page or two, you'll need to upload it to a server (a place that
serves your pages to the public). A server is a computer that is connected to the
internet 24 hrs a day. Your Internet Provider is a server, and there are several
free servers as well.

Coding HTML Tags

To properly code HTML you need to know how your HTML TAGS are written. An
HTML Tag is actually made up of TWO separate tags with some stuff in between:
 An Opening Tag
 A Tag Attribute(s) to help define the Opening tag
 A Value for the Attribute(s)
 Text or an Image you want the tag to affect
 A Closing Tag

The Opening Tag

The Opening Tag consists of an angular bracket < followed by a tagname and
then completed with a closing angular bracket >.

Let's pretend the tagname of the tag we want to use is EXAMPLE. We would
code the EXAMPLE Opening Tag like this:

<EXAMPLE>

The Tag Attribute(s)

A Tag Attribute lets you help define the tag it resides in more precisely and
allows you to specify more functions within the same tag:

<EXAMPLE ATTRIBUTE=>

The Value
Values can be a number or a word depending on which attribute you are using:

<EXAMPLE ATTRIBUTE="VALUE"
An Opening tag consists of a Tagname, Attribute(s) and a Value for each
Attribute(s). Now our Opening Tag is complete, so we can close it off with the
'other bracket':

<EXAMPLE ATTRIBUTE="VALUE">

The Text Or Image To Affect

Now that we have the Opening Tag complete, we need to give the Opening Tag
something to actually work on. We do that by defining some text, or perhaps a
graphic WITHIN the Tag:

<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here

The Closing Tag

All that remains now is to finish it off by adding the Closing Tag. This tells the
browser to stop creating the effect we defined in the Opening Tag. A Closing Tag
consists of a bracket, a forward slash (not a backward slash), the tagname and
then the 'other bracket', like this:

</EXAMPLE>

So, here is our complete example tag:

<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here </EXAMPLE>

Combining Tags With Several Attributes

Learning to properly COMBINE Attributes is extremely important! Let's use the
<FONT> tag to illustrate the way you combine attributes into a single tag.

This is how most beginners will code this scenario:

<FONT SIZE="4"><FONT FACE="Arial"><FONT COLOR="#000000">testing

the tags and attributes</FONT></FONT></FONT>

Bzzzzztt...WRONG!!!!!... thanks for playing...

As you can see each attribute was given it's own Opening and Closing Tag. All
this will do is give you a zillion Closing Tags and confuse your poor browser. What
you SHOULD do, is COMBINE all of the attributes into ONE <FONT> tag like
this:

<FONT SIZE="4" COLOR="#000000" FACE="Arial">testing the tags and

attributes</FONT>

All you really need to do is take all the Attributes and Values and nest them inside
ONE Opening Tag. The order of the attributes is up to you. As long as you have
them all set with the correct values, in quotes, it will work just fine!
Nesting Tags Properly
Nesting Tags is simply the process of applying more than one tag to the same
block of text or object.
Let's take a simple font tag for example:
<FONT SIZE="2">Nesting the Tags</FONT>
Here is how it looks on your page:
Nesting the Tags
Now let's say we want to have that text appear bolded. We have to add the Bold
Tag set around the text we want to affect:
<FONT SIZE="2"><B>'Nesting the Tags'</B></FONT>
Here is how the newly bolded text will appear on your page
'Nesting the Tags'
Now let's add a third tag to our text. Let's display our text in Italics by adding the
Italics Tag set to our text:
<FONT SIZE="2"><B><I>Nesting the Tags</I></B></FONT>
Now our text will be displayed like this:
Nesting the Tags
Learning how to properly nest multiple tags around one block of text or an object
is crucial to successfully coding your web pages.
If you look at our final example above, the opening tags have been put in a
certain order and the closing tags ALL appear in the EXACT OPPOSITE ORDER.
For example:
<TAG1><TAG2><TAG3> [text or object here] </TAG3></TAG2></TAG1>

Creating A Basic HTML Web Page

There are 4 HTML Tags you need to learn to create a basic page:
<HTML> and </HTML>
<HEAD> and </HEAD>
<TITLE> and </TITLE>
<BODY> and </BODY>
These are the 4 tags that MUST appear on a page in order for it be viewed
correctly.
The <HTML> Tag
This set of Opening and Closing Tags tell your browser that the document it is
loading is an HTML document. The Opening <HTML> Tag MUST appear at the
very top of your document since the rest of your document has to reside inside
this Tag.
The Closing </HTML> Tag MUST appear at the very bottom of your document.
This Tag tells the browser that there is no more HTML document to display.

The <HEAD> Tag

The HEAD portion of your page will display absolutely nothing in your browser.
It's function is to contain hidden internal information your browser requires to
display your page properly. Between the Opening <HEAD> Tag and the Closing
</HEAD> Tag you will often find the Meta Tag elements and scripts possibly
Javascript Tags.

The <TITLE> Tag

The TITLE Tag set is entered INSIDE your HEAD Tag set, like this:

<HEAD>
<TITLE> Type the title for your page right here </TITLE>
</HEAD>
The TITLE Tag is probably the most confusing tag of all, to novice HTML coders.
All this tag does is display whatever text you enter as the TITLE in your browser's
TITLE BAR. This TITLE does NOT appear anywhere on your page!

NOTE: Most Search Engines use your title when it displays search results to a
viewer. Keep your title short (no more than 10 words) and try to describe the
main theme of your site.

The <BODY> Tag

All of the text and images you put on your page must appear BETWEEN the
Opening and Closing <BODY> tags. There are several basic Attributes that you
can use in the Opening <BODY> Tag.

BACKGROUND=
Use this Attribute to specify a background graphic (GIF or JPG) like this:

BACKGROUND="[Link]"

or if it is in a different folder than the page you are writing:

BACKGROUND="otherfoldernamehere/[Link]"

BGCOLOR=
If you do not wish to use a background graphic, use this Attribute instead to
define a color for your web page background:

BGCOLOR="#FFFFFF" or "White"

TEXT=
Use this Attribute to define what color ALL of the text on your page will appear in:

TEXT="#000000" or "Black"

LINK=
This Attribute will let you define the color that ALL of your Links are displayed as:

LINK="#008080"

VLINK=
The VLINK [Visited Link] defines the color that ALL the Visited Links appear in. If
you click on a Link and go to a page, and then come back to the original page,
the Link you just clicked on is now another color. You can define that color using
VLINK:

VLINK="#FFFF00"

ALINK=
The ALINK [Active Link] sets the color the Links will turn as you click on them:

ALINK="#FF0000"

Creating A Page With These Tags

Here is the complete tag setup for a Basic Home Page that incorporates ALL of
the Tag sets we have discussed in this section:
<HTML>
<HEAD>
<TITLE>Type a title for your page here</TITLE>
</HEAD>

<BODY BACKGROUND="[Link]" BGCOLOR="#FFFFFF" TEXT="#000000"

LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">

This is where all the wonderful stuff you want to show on your page goes.

</BODY>
</HTML>

Creating and Formatting Text

Being able to create and format text the way you want it to appear on a web
page is the very essence of HTML. There are several tags that will allow you to
display your text:

The <FONT> Tag

The <FONT> Tag is designed to let you create and make modifications to the
text on your page but you have to decide which of the <FONT> Tag attributes
you need. These are some of the attributes for this tag:

SIZE="1-7"
This attribute will let you enter text sizes from 1 to 7. If you do not enter a
specific size 'value' the text will default to a size of 3. 1 is the smallest text size,
and 7 is the largest.

<FONT SIZE="2">testing the font size</FONT>

Now change the 2 to any number between 1 and 7. See the difference?

FACE="Font name here"

This attribute will let you define the font you want the text to appear in. If you
specify you want your text to show up in Arial, for example, and the person
viewing the page doesn't have the Arial font installed on their system then the
text will show up in whatever font they have defined as the default font in their
browser.

Here is the correct way to use the FACE= attribute:

<FONT FACE="Arial">testing the face attribute</FONT>

Lets say I want to have text show up in Arial, but I know some people don't have
Arial, so I want to define a secondary font that they might have. This is easy to
do... just type in another font name and separate the two with a comma, like
this:

<FONT FACE="Arial,Verdana">testing the face attribute</FONT>

In this example, if I dont have Arial, then the browser will try to show the font in
Verdana. If I dont have Verdana, then the text will be displayed in my browser's
default font.
COLOR="Color Code or Name here"
This attribute lets you define the color you want your text to appear in. You can
use a 6 character color identifier (Hexadecimal Color Code) or the Name of a
color.

Try this example on your web page:

<FONT COLOR="black">testing the color attribute</FONT>

This will give you black text. However, you can also use a 6 character
Hexadecimal Color Cod to define the color you want. Try this on your web page:

<FONT COLOR="#000000">testing the color attribute</FONT>

This will also give you black text.

Text Formatting Tags

Once you have decided on the size, color and font you wish to use, you can
further modify your text by applying one or more of these formatting tags:
Text Formatting Tags: Tags will display:
<B> This text is bolded </B> This text is bolded
<I> This text is italicized </I> This text is italicized
<U> This text is underlined </U> This text is underlined
<TT> This is typewriter text </TT> This is typewriter text
<SUB> This is subscript </SUB> This is subscript (H2O)
This is superscript
<SUP> This is superscript </SUP> (ESSOTM)

Special Characters
Some characters will not be shown unless you tell the browser to show them, and
some characters are not on the keyboard, so you have to use a "special
character" to tell the browser what to display. The character will start with an
ampersand (&) and finish with a semicolon (;). These are also case sensitive, so
do not use capital letters.
© &copy;
® &reg;
™ &#153;
< &lt;
> &gt; Here are a few common special characters, and if you want a
« &#171; complete list, go here.
» &#187;
½ &#189;

é
&eacute;

The most common special character is a blank space.

If you simply hit the space bar between two words, only one space will show up.
If you want several blank spaces between words, you have to use the 'non-
breaking space' special character: &nbsp;

So if I wanted to space out these two words, I would type this:

Hello &nbsp; &nbsp; &nbsp; Goodbye

and the result would be: Hello Goodbye

Using Color On Your Web Page

In HTML we use Hexadecimal Color Codes [based on RGB values] or Color
Names to insert colors into HTML documents.

Hexadecimal Color Codes

The Hexadecimal Color Code consists of 6 numbers and/or letters, combining to
give you over 14 million possible colors, shades, hues and tints.

The 6-number-and/or-letter combinations are actually 3 pairs of values where RR,

GG, BB are the hexadecimal digits specifying the Red, Green, and Blue values of
the color. This value is written as #RRGGBB. The number values range from 0 -
9; letter values range from A to F.

Here is an example of a Hexadecimal Color Code:

<FONT COLOR="#0000FF">Here is some example text I want to

color</FONT>

The above line of code will display the example text in blue like this:

Here is some example text I want to color

Color Names
Colors can also be specified by their official Color Name. Originally there were 16
Color Names, picked as the standard 16 colors supported with the Windows VGA
palette. Today there are hundreds of standard colors with official color names.

A Color Name is used in this format:

<FONT COLOR="blue">Here is some example text I want to color</FONT>

The above line of code will display the example text in blue like this:

Here is some example text I want to color

Both methods are perfectly legitimate methods of defining HTML colors but the
Hexadecimal Color Code system will give you a much wider range of possible
color choices.

Images: adding them to your page

You can add graphic images in two formats to your web pages:

 GIF images (they end with a .gif file extension)

 JPEG images (they end with a .jpg file extension)
The <IMG> (Image) tag is a 'one-sided' tag and requires several attributes for
successfully embedding an image on your page:

SRC=
If you have a graphic image with the filename my_picture.gif then you would
enter the filename as the Value for the SRC= attribute, like this:

<IMG SRC="my_picture.gif">

WIDTH= and HEIGHT=

You can set the height and width attributes like this:

<IMG SRC="[Link]" WIDTH="100" HEIGHT="200">

The numbers I used refer to the image size in PIXELS. The above image would
therefore appear on the page as 100 pixels wide, and 200 pixels high.

ALT=
It is ALWAYS a good habit to include the ALT= attribute. Some people turn OFF
their browsers ability to display pictures for faster performance, and if you do not
have a text description to replace the graphic, they won't be able to do or see
much on your site. This is especially important if you have a menu built with
graphic menu choices.

Put your mouse over the image below and watch what happens:

A little box comes up with the text I specified in the image's ALT= attribute. This
is how you would code it:

<IMG SRC="[Link]" WIDTH="140" HEIGHT="64" ALT="Testing the ALT text

trick" BORDER="0">

BORDER=
You can specify that your image be displayed with or without a border by adding
a simple BORDER= attribute, like this:

<IMG SRC="[Link]" WIDTH="100" HEIGHT="200" ALT="This is a test"

BORDER="0">

BORDER="0" tells the browser not to use a border. (technically you are telling the
browser to display the graphic with a border 0 [zero] pixels wide) If I wanted to
use a border I could use a 1 instead of a 0 (zero) like this:

<IMG SRC="[Link]" WIDTH="100" HEIGHT="200" ALT="This is a test"

BORDER="1">

Try using a 2 or a 3 instead of a 1 and watch the results.

Image Dimensions: how to find out what they are
You can usually check the dimensions of your images in a graphic editing
program of some sort, like Paint Shop Pro, or Adobe Photoshop. Some browsers
will even show you the dimensions of the image, in the title bar, if you use the
browser to view your image. Just type in the path and filename of the image in
your browser's address bar:

c:\pictures\my_picture.gif

Changing Image Size

HTML allows you to specify any dimensions you like IN THE TAG. The image itself
may well be 200 pixels wide and 150 pixels in height, but you can tell the
browser to display bigger or smaller just by adjusting the size in the Tag attribute
code.

To illustrate this, here is a sample image and it's coding:

<IMG SRC="[Link]" WIDTH="140" HEIGHT="64">

This image is 140 pixels wide and 64 pixels high. This is what it tells me in my
image editing program.

Now let's just change the number values in the WIDTH= and HEIGHT= attributes
and see what happens:

<IMG SRC="[Link]" WIDTH="200" HEIGHT="100">

In this example all I have done is changed the coding. I have simply told the
browser to display the image in the dimensions I have chosen. If the file was 15k
to start with, it will remain as a 15k filesize. The only thing that changes is the
displayed dimensions.

PLEASE NOTE: It is important to note that arbitrarily changing the dimensions

can drastically degrade the image quality very badly (as you can see above). If
you need to make major changes to the size of a graphic, change the dimensions
in your image editor and re-save the graphic with the new dimensions.

Aligning text beside an image

By adding the ALIGN= attribute to your Image tag, you can align text around
your image. This is how you would code the ALIGN attribute in your tag:
 <IMG SRC="[Link]" WIDTH="200" HEIGHT="100"
ALIGN="left"> This is where your text would go and the aligning would occur
automatically since it is already coded into the image tag.

Correct Value's for this attribute are: "bottom", "top", "middle", "left" and "right"
as shown below:

By default the text is aligned to the bottom of an image. You

can see where it starts and how it wraps around the image. There is no need to
use ALIGN=BOTTOM since it is the default setting.

This text is aligned with the top of the image (<IMG

SRC="[Link]" ALT="SampleImage" ALIGN=TOP>). Notice how the browser
aligns only one line and then goes down to the bottom of the image for the rest
of the text.

And this text is centered on the image (<IMG

SRC="[Link]" ALT="SampleImage" ALIGN=MIDDLE>). Only one line of the
text is aligned in the middle, and the rest drops down below the image.

The text here wraps all along the right side of the image since the image is
aligned to the left of the text (<IMG SRC="[Link]" ALT="SampleImage"
ALIGN=LEFT>). All the text is right until it completes it's span of the image and
then it wraps under the image.

And this text is left of the image as the image is aligned to the right (<IMG
SRC="[Link]" ALT="SampleImage" ALIGN=RIGHT>). All the text is left until
it completes it's span of the image and then it wraps under the image.

Using this method of aligning is handy if you have small descriptions, or

commentary to add to an image, but for much more precise placing of text blocks
around your images you should consider using Tables.

Miscellaneous Useful Tags

Note 1: Occasionally you may see </P>, but it is not necessary, so don't bother.
Please remember that the Line Break <BR> and the Paragraph Break <P> do not
need to be "closed" (there is no </BR> and no need for </P>).

Note 2: Browsers ignore white space in the code of a document. Therefore, you
must use paragraph and line breaks or all your words will become one huge
paragraph. Try it, you'll see.
Horizontal Rules
The Horizontal Rule is a line that runs horizontally across your webpage. The
<HR> Tag is a one-sided tag (like the <IMG> or <META> tags) so we don't
need a Closing </HR> Tag to finish this tag set.

If you enter the <HR> tag you will get a line all the way across your webpage,
the same color as your browser's color.

There are several Attributes you can use to modify your Horizontal Rule:

WIDTH=
Use this Attribute to specify how wide you want your line to be. You can use
percentage value to specify the percentage of the page you want the line to
cover, or you can specify the absolute pixel size of the line.

Percentage Method:

WIDTH="50%"

This will give you a line exactly half the size of your page. This method is
recommended since no matter what resolution the viewer is looking at your page
in, the line will be 50% of the width of their screen.

Absolute Method:

WIDTH="300"

This number is the width in PIXELS. This works well when you need to specify an
exact size for your line. For example, if you want to have a line the same size as
a graphic, you can specify the same width as the graphic.

ALIGN=
Using this Attribute will give you the ability to specify further, where the line
should appear on your page. This is useful if you are trying to place a line that
you have already defined as less than 100% the width of the page.

The correct Value's to use are "right", "left" and "center".

SIZE=
Use this Attribute to specify the HEIGHT of the line. If you want a line 20 pixels
high, we would code it like this:

SIZE="20"
If you do not specify a size, the line will default to SIZE="1"

NOSHADE
This Attribute is a little bit different than most since it has NO associated Value.
This is more like an On/Off switch than a Value, as we have come to know them.
You can specify that the line is displayed as a solid line with no shading (shading
gives you that sorta 3-D effect) by coding the NOSHADE Attribute like this:

<HR NOSHADE>

As with most tags that use Attributes, you can combine all or some of the
Attributes into one tag, like this:

<HR WIDTH="50%" ALIGN="Center" SIZE="20" NOSHADE>

The above example would give you a line 50% the width of the page, sitting in
the center, 20 pixels high, with no shading.

HTML Lists: unordered, ordered and definition lists

With HTML you can also make nicely laid out lists. The can be indented, have
bullets (dots) in front, or they can be automatically numbered. Every item in a list
is tagged with <LI>, and there is no need to close the LI tag.

The Unordered List

An Unordered List will have bullets in front. You open an Unordered List with
<UL> and close it with </UL>.

Here is the code and results of an Unordered List:

The code: The result:

<UL>  milk
<LI> milk  bread
<LI> bread  fruit
<LI> fruit
</UL>

Unordered List: defining 'bullet' types

We can use the TYPE= attribute to define how we want the Unordered bullets to
look:
TYPE="DISC"
TYPE="CIRCLE"
TYPE="SQUARE"

So, if you want ALL of your recipe items to have SQUARE 'bullets' just add the
TYPE= attribute, like this, to your <UL> tag:

The code: The result:

<UL TYPE="SQUARE">  1 egg white

<LI> 1 egg white  1 cup of milk
<LI> 1 cup of milk  2 cups of flour
<LI> 2 cups of flour  1 tablespoon of sugar
<LI> 1 tablespoon of sugar
</UL>

The really cool part about this TYPE= attribute is that you can also specify the
type of 'bullet' you want EACH individual List item to have, by including the
TYPE= attribute right in the <LI> tag:

The code: The result:

<UL> o 1 egg white

<LI TYPE="CIRCLE"> 1 egg white  1 cup of milk
<LI TYPE="SQUARE"> 1 cup of milk  2 cups of flour
<LI TYPE="DISC"> 2 cups of flour  1 tablespoon of sugar
<LI> 1 tablespoon of sugar
</UL>
The Ordered List
An Ordered List will have numbers in front. You open an Ordered List with <OL>
and close it with </OL>.

Here is the code and results of an Ordered List:

The code: The result:

<OL> 1. milk
<LI> milk 2. bread
<LI> bread 3. fruit
<LI> fruit
</OL>

Ordered Lists: defining number types

The Ordered List tag has several attributes that work exactly the same way as the
Unordered List tag attributes we discussed above:

TYPE="A" (Upper Case Letters... ie, A,B,C etc.)

TYPE="a" (lower case letters... ie, a,b,c etc.)
TYPE="I" (Upper Case Roman Numerals... ie,II,III,IV etc.)
TYPE="i" (lower case roman numerals... ie,ii,iii,iv etc.)
TYPE="2" (Standard numbers... ie, 1,2,3 etc.)

Now, just as with the Unordered Lists you can either use these attributes in the
<OL> opening tag or in the individual <LI> List Item tags!

Ordered Lists: define the starting number

Let's say you want a numbered list that starts at a specific number, like 100. It is
simple to specify a Starting Number in your list:
The code: The result:

Cool Sites from 100-200 Cool Sites from 100-200

<OL START="100"> 100. Gazoo's Gold

<LI> Gazoo's Gold 101. Fortress of
<LI> Fortress of Solitude Solitude
<LI> Bravenet 102. Bravenet

blah blah blah blah blah blah

</OL>

Definition Lists
A Definition List is a little more involved as there are two levels to this list. There
is the Term and the Definition. You open a Definition List with <DL> and close it
with </DL>. The two levels are determined with <DT> for the term, and <DD>
for the definition.
Here is the code and results of a Definition List:

The code: The result:

milk
<DL> a very healthy liquid
<DT> milk <DD> a very healthy liquid bread
<DT> bread <DD> mix your dough and mix your dough and
bake bake
<DT> fruit <DD> my favorite are fruit
bananas my favorite are
</DL> bananas

When the terms are very short, you can use a Compact Definition List. The terms
will then be placed on the same line as the definitions. Here is the code and
results of a Compact Definition List:

The code: The result:

milk
<DL compact> a very healthy liquid
<DT> milk <DD> a very healthy liquid bread
<DT> bread <DD> mix your dough and mix your dough and
bake bake
<DT> fruit <DD> my favorite are fruit
bananas my favorite are
</DL> bananas

Nested Lists
When you get to be a "List Pro", you can put lists inside lists. This is called
Nested Lists. It can be confusing, so try to avoid it if you are still trying to grasp
all this.
The code: The result:

<UL>  These are fruit:

<LI> These are fruit: o Apples
<UL> o Oranges
<LI> Apples o Bananas
<LI> Oranges  These are vegetables:
<LI> Bananas o Celery
</UL> o Carrots
<LI> These are vegetables:
<UL>
<LI> Celery
<LI> Carrots
</UL>
</UL>
The Block Quote
The BlockQuote tag will move a paragraph over to the left to isolate it from other
text. It's like tabbing over a whole paragraph. Open it with <BLOCKQUOTE>
and close it with </BLOCKQUOTE>.

Here is an example:

This sentence is not between the blockquote tags.

This paragraph is between the blockquote tags and you will notice
that it is indented over. The whole paragraph is indented over until
you close the blockquote. It's a pretty handy command actually.

Now I'm out of the blockquote again.

Preformatted Text
The text between the <PRE> and the </PRE> tags will be displayed exactly as
it looks on your HTML editor page. It will be displayed with a "fixed-width" font.

<PRE>
Hello everyone!
This is a sample See, I'm over here now.
I'm not putting any tags inside this paragraph.
I'm just P L A Y I N G around.
Pretty fancy, huh?
</PRE>

Will be displayed as:

Hello everyone!
This is a sample See, I'm over here now.
I'm not putting any tags inside this paragraph.
I'm just P L A Y I N G around.
Pretty fancy, huh?

Hyperlinking: linking from one page to another

Hyperlinking, or Linking, is the ability to click on a bit of text or an image and
have it jump you to another page, or area of a page. This requires both the
Opening <A> and the Closing </A> Anchor Tag.

Anchors also must have the HREF= (Hypertext Reference) attribute to work
properly:

<A HREF=> </A>

But this tag is still incomplete and will do nothing until you give it a place to link
to:
<A HREF="[Link] </A>
Now to give your visitor something to click on, put some text between the
opening and closing tag, like this:

<A HREF="[Link] Help For All</A>

Now the tag is complete. Try it here: HTML Help For All
Page Linking Tips
If a page is not on your site put in the web address for the page, like this:

<A HREF="[Link] Site</A>

If the page is in the same folder use just the filename, like this:

<A HREF="[Link]"> Click here </A>

If the page is in a different directory or folder reference that right before the
page:

<A HREF="otherfoldernamehere/[Link]">Page Two</A>

Linking to Downloadable Files

If you want to make a file available for your visitors to download, use the anchor
tag with the filename of the file you wish your visitors to grab:

<A HREF="[Link]"> Click here to download the file </A>

Name Anchors: links to areas on the same page

Anchors can also be used to jump to a specific spot on the same page.

Lets' say you have a page about pets, and at the top of this page you want to
provide a link down to the area about your dog. Go to the area about your dog
and put a Name Anchor around the title or first word of the 'dog' portion:

<A NAME="dog">All about my dog Fluffy:</A>

Fluffy is my dog. He has a tail, 4 legs and likes to bark.

Now go up to the top of the page where you want to put the link to the 'dog'
section. Here is the code for the link at the top of the page:

<A HREF="#dog">Click for Fluffy the Dog</A>

Now when you click on the link on the top of your pets page, it will jump right
down to the section about Fluffy!

If you are linking to the Fluffy section from a different page you'll have to do this:

<A HREF="[Link]#dog">Click for Fluffy the Dog</A>

Mailto Anchor: making a link to an email address

If you want the link to jump to sending mail to a specific e-mail address, you
have to add "[Link] to the anchor:

<A HREF="[Link] Me Now!</A>

Now when you click on this mailto link, it will open your email program and
automatically address an email to whatever address you have defined in this tag.

Try it here: Email Me Now!

Image Anchor: hyperlinking to a graphic image
NOTE: If you have not yet read the section dealing with creating image tags you
might want to review that tutorial before you begin this one.

Let's say we have a spiffy new graphic and we want to make it clickable so people
can use it to go to another page.

Here is the image code:

<IMG SRC="[Link]" HEIGHT="30" WIDTH="40" ALT="My Picture"
BORDER="0">

Now we have to wrap the Anchor code around it:

<A HREF="folder/[Link]"><IMG SRC="[Link]" HEIGHT="30"
WIDTH="40" ALT="My Picture" BORDER="0"></A>

If you want to put a border around the picture (border="3"):

<A HREF="folder/[Link]"><IMG SRC="[Link]" HEIGHT="30"
WIDTH="40" ALT="My Picture" BORDER="3"></A>

If you want to hyperlink from a small version of the image (known as a

'thumbnail') to a larger version, link the small file to the large one:
<A HREF="[Link]"><IMG SRC="[Link]"></A>

In this example, clicking on the [Link] file will open to the

[Link] file.

Using Tables
There is no more useful tool for coding HTML than the humble Table. Tables allow
you to place objects and page elements very precisely on your web page allowing
you a lot more creative freedom.

There is one big drawback to using tables. Your browser will wait until ALL of the
material contained in the table has been downloaded before it displays the table
on the page. So, it is absolutely essential that you include Height and Width tags
in any images you put into a table, so that the browser doesn't wait for every
single graphic to download before it displays the table.

Tables can have borders which will separate the information obviously, or they
can have no borders hence being invisible on the page.

Here is a table with thin Here is a table with thick Here is a table without
borders: borders: borders:
Cell A Cell B Cell C Cell A Cell B Cell C Cell A Cell B Cell C
Cell D Cell E Cell F Cell D Cell E Cell F Cell D Cell E Cell F

The Parts Of A Table

Tables are broken down into rows and cells. Each row contains cells and the cells
contain your images and text. An individual table cell can contain anything you
can put on a page, even another full table! Here are the tags we use to create
tables:
Table Creation Tags: The Tags function:
<TABLE> This tells the browser to start a table
<TH>...</TH> This starts and ends a table header cell
<TR>...</TR> This starts and ends a table row
<TD>...</TD> This starts and ends a table cell
</TABLE> This tells the browser to end a table

The <Table> Tag Attributes

The Opening <TABLE> tag tells your browser that you want to create a table
next. As with most of the tags we have discussed, the <TABLE> tag has several
Attributes you can use to change the way your table looks and behaves:

BORDER=
If you want your table displayed with a border, you can specify a numerical value
which will tell the browser how many pixels wide you want the border to be.
Using BORDER="5" will give you a border 5 Pixels wide, etc.

TIP: I ALWAYS set this value to "1" while I am creating the Table. This allows me
to view the Table as I build it, then when I am finished the table and everything
appears the way I want it, I can turn off the border altogether by using
BORDER="0".

WIDTH=
By using this Attribute, you can specify how wide you want the table to be. If you
do not specify a table width, the table will appear as wide as the objects you put
into it. There are two methods you can use to specify the WIDTH= Attribute:

Percentage method

WIDTH="60%"
Using this method will create a table 60% the width of your screen. This method
is recommended because people using different screen resolutions will always see
the table as being 60% of their screen width, no matter whether they are using
640x480, 800x600 or whatever.

Absolute method

WIDTH="450"
Using this method you can specify an exact PIXEL width. This can be very handy
if you are placing objects precisely on your page. Be warned though, if you
specify a table has a width of 800, for example, and a viewer with a resolution of
640x480 (640 wide by 480 high) tries to view your table, they wind up not being
able to see the whole table and have to scroll to the right constantly to see
everything.
BGCOLOR=
You can use this Attribute to specify the background color of EVERY cell in your
table. ALL of the cells in the table will have the same background color. Code the
BGCOLOR= Attribute like this:

BGCOLOR="#ff0000"
ALIGN=
Using this Attribute you can define the alignment of the WHOLE table. Correct
values for this Attribute are "right", "left" and "center". So you code this like so:

ALIGN="right"

CELLPADDING=
This numerical value lets you specify how many pixels there should be between
the object/text in the cell and the wall of the cell that the object is in. This value
will affect ALL of the table's cells. You cannot have one cell with a different
cellpadding value than another in the same table. You code it thusly:

CELLPADDING="2"

TIP: The most important of cellpadding and spacing (in my opinion) is

cellpadding. Concentrate on that when building the table. Try it with a cellpadding
of zero, and then with a cellpadding of eight, and see what happens. If you are
showing the borders of the table (not setting it to zero), then cellspacing is a
great way to control the width of the borders. Generally, I set cellspacing to zero
and cellpadding between 2 and 10.

CELLSPACING=
This numerical value lets you specify how many pixels should be BETWEEN each
cell. This value affects ALL cells in the table the same way. We code this one just
like this:

CELLSPACING="3"

TIP: If you are having trouble understanding the difference between cellpadding
and cellspacing, imagine you have a crate full of beer cases. The space between
the individual bottles and the case they are in, is the CELLPADDING. The space
between each of the beer cases inside the crate is the CELLSPACING.

You can combine any or all of the Attributes into one <TABLE> tag like this:

<TABLE WIDTH="60%" CELLPADDING="2" ALIGN="RIGHT" BORDER="1">

Remember that the Table Attributes affect the ENTIRE Table.

The Table Header

Using the <TH> Table Header tag is a convenient way to create a cell with
bolded heading text in it in one easy step. The header cell is identical to other
cells in your table and can be manipulated in the same way. Here is a simple
table with a header cell:
Testing the header
Example Cell
This tag is not widely used anymore since it is usually just as easy to create a cell
and bold the text in it. Here is how you would code the example Table above:
<TABLE BORDER="1"> <-- Opening Table tag with the border on
<TH> Testing the header </TH> <-- defining the header cell and text
<TR> <-- defining the first row with this tag

<TD> Example Cell </TD> <-- defining the individual cell

</TR> <-- ending the first row with this tag

</TABLE> <-- ending the table with the Closing table tag
Coding A Table With One Row
Here is a very simple table with the border value set to "1":

Cell A Cell B Cell C Row 1

Column 1 Column 2 Column 3

Let's take a look at the coding for the example table:
<TABLE BORDER="1"> <-- Opening table tag with the border 'on'
<TR> <-- starting the first row with this tag
<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell
</TR> <-- ending the first row with this tag
</TABLE> <-- finishing the table with this tag

Coding A Table With Two Or More Rows

All you have to do is tell the table to start a new row, and define more cells:

Cell A Cell B Cell C

Row 1

Row 2
Cell D Cell E Cell F

Column 1 Column 2 Column 3

Here is how I would code the table you see above:

<TABLE BORDER="1"> <-- Opening table tag with the border 'on'
<TR> <-- starting the first row with this tag
<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell
</TR> <-- ending the first row with this tag

(here is where the second row comes in)

<TR> <-- starting the SECOND row with this tag

<TD> Cell D </TD> <-- defining the individual cell

<TD> Cell E </TD> <-- defining the individual cell
<TD> Cell F </TD> <-- defining the individual cell

</TR> <-- ending the SECOND row with this tag

</TABLE> <-- finishing the table with this tag

Customizing Your Table Cells

Each table cell requires an Opening <TD> tag and a Closing </TD> tag to work
properly. You can insert text, images, anything that you would put on any other
portion of your page, into a table cell. There are several attributes you can use to
modify your cells:

ALIGN=
This Attribute allows you to define HORIZONTAL ALIGNMENT of text or objects
in the cell. Correct values for this attribute are "left", "center" and "right" We
code it like this:

ALIGN="right"

VALIGN=
This attribute lets you define the VERTICAL ALIGNMENT of text or objects in
the cell. Correct values for this attribute are "top", "middle" or "bottom". We code
it like this:

VALIGN="bottom"

COLSPAN=
This attribute allows you to specify how many columns a cell should span across.
The correct value is a numerical value entered like this:

COLSPAN="2"

The number you use depends on how many columns you wish to span across.

ROWSPAN=
This attribute allows you to specify how many rows a cell should span across. The
correct value is a numerical value entered like this:

ROWSPAN="2"

The number you use depends on how many rows you wish to span.

BGCOLOR=
This attribute lets you specify the background color of that individual cell. You
complete this attribute by entering a Hexadecimal Color Value, like this:

BGCOLOR="#000000"

WIDTH=
This attribute lets you specify how wide the individual cell should be. You can use
the percentage method or the absolute pixel width method.

Percentage method:

WIDTH="35%"

(Note: Using the percentage method will give you a percentage of the width of
the table, not the width of the page.)
Absolute method:

WIDTH="150"

This is the width of the cell in PIXELS.

Spanning Columns and Rows

Spanning is a very useful table creation tool. Cell spanning allows you to alter the
size of cells to your own needs. Here is the simple table we created before:
Cell A Cell B Cell C Row 1

Cell D Cell E Cell F Row 2

You will notice each row has 3 cells, but what do we do if we want the second row
to have only two cells? If you simply remove one cell, you will notice your table
gets all screwed up.

So, what we need to do is modify the cell <TD> tag with an attribute that will
allow us to span one cell across two existing cells. If we use the COLSPAN=
Attribute we can stretch a cell across 2 or more columns of the table:

Cell A Cell B Cell C Row 1

Cell D Cell F Row 2

Notice Cell D is now stretched, or SPANNED, across two cells.

Here is how the above table is coded:

<TABLE BORDER="1"> <-- Opening table tag with the border on

<TR> <-- starting the FIRST row with this tag

<TD> Cell A </TD> <-- defining the individual cell

<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell

</TR> <-- ending the FIRST row with this tag

(here is where the second row comes in)

<TR> <-- starting the SECOND row with this tag

<TD COLSPAN="2"> Cell D </TD> <-- defining the individual cell

(Notice I removed Cell E entirely)

<TD> Cell F </TD> <-- defining the individual cell

</TR> <-- ending the SECOND row with this tag

</TABLE> <-- finishing the table with this tag

Here is a slightly different variant, using the ROWSPAN= attribute:

Cell A Cell B Row 1

Cell C
Cell D Cell E Row 2

Notice Cell C is now stretched, or SPANNED, across two cells and ROWS.

Here is how the above table is coded:

<TABLE BORDER="1"> <-- Opening table tag with the border on

<TR> <-- starting the FIRST row with this tag

<TD> Cell A </TD> <-- defining the individual cell

<TD> Cell B </TD> <-- defining the individual cell
<TD ROWSPAN="2"> Cell C </TD> <-- defining the individual cell

</TR> <-- ending the FIRST row with this tag

(here is where the second row comes in)

<TR> <-- starting the SECOND row with this tag

<TD> Cell D </TD> <-- defining the individual cell

<TD> Cell E </TD> <-- defining the individual cell

(Notice I have removed CELL F entirely because CELL C now occupies it's space)

</TR> <-- ending the SECOND row with this tag

</TABLE> <-- finishing the table with this tag

Adding Email Forms

Forms let your visitor fill out information, hit submit (or GO) and the information can be
directed to the server for several different actions. An example may be to have the form
filled out, and when submitted, will be emailed to you. In order for the form submission to
be legible via email, they have to be processed. This can be done with CGI scripting (very
advanced) or simply by having someone do it for you, like Bravenet Web Services.

E-Mail Form Question Options

There are 5 choices of form question layouts.

1. Text fields
2. Radio Buttons
3. Check Boxes
4. Selector Bars
5. Text areas

What's your name?

Text Field: Fred

Are you happy?

Radio Buttons:
Yes No
Check one or more:
Check Boxes:
One Two Three
Select your favorite color:
Selector Bar: Red
 Your Comments Please?
Nice Site!

Text Area:

Submit/Reset Buttons: Submit Reset

1) The Text Field

Text fields are one line of input. Normally you set a limit as to how many
characters can be typed for the given field (maxlength). You can also set the size
of the field (size).

<INPUT TYPE=TEXT NAME=name SIZE=40 maxlength=30 value="This only allows 30 characters">

This only allow s 30 characters

<INPUT TYPE=TEXT NAME=name SIZE=30 maxlength=15 value="This only 15.">

This only 15.

2) The Radio Button

Radio Buttons allow for multiple choices yet the user can only select one. Multiple
selections are not allowed with radio buttons. Notice that the NAME is the same
for all buttons in a set, but the VALUE is different. Also notice that in the first one,
the word "checked" is in the code which defaults "Yes" as being chosen when the
page loads.

<INPUT type=radio name="happy" checked value="yes"> Yes

<INPUT type=radio name="happy" value="no">No
<INPUT type=radio name="happy" value="maybe">Maybe

Yes No Maybe

3) The Check Box

Check Boxes allow for multiple choices AND multiple selections. The user can
select one or more. Notice that the NAME is now different for all checkboxes, but
the VALUE is the same. Also notice that in the second two, the word "checked" is
in the code which puts a check in the box for "Two" and "Three" when the page
loads.

<INPUT type=checkbox name="One" value="yes">One

<INPUT type=checkbox checked name="Two" value="yes">Two
<INPUT type=checkbox checked name="Three" value="yes">Three

One Two Three

4) The Selector Bar

Selector Bars are perfect for questions that have many responses and you don't
want to take up a lot of room on a page. They can be set for single or multiple
selections allowed (either put in the word multiple or don't). If you choose
multiple, you have to hold down the ctrl-key when making multiple choices.
Notice the size can be however many cells you want.
The NAME designates the topic for all the individual VALUES.

<SELECT name="favorite_color" multiple size=3>

<OPTION selected value="Red"> Red </OPTION>
<OPTION value="blue"> Blue </OPTION>
<OPTION value="green"> Green </OPTION>
<OPTION value="purple"> Purple </OPTION>
<OPTION value="black"> Black </OPTION>
<OPTION value="yellow"> Yellow </OPTION>
<OPTION value="pink"> Pink </OPTION>
</SELECT>
Size set to 1 (not multiple) Size set to 3 (multiple)
Red Red
Blue
Green

5) The Text Area

Text fields are multiple lines of input. Normally this is where people respond with
a lengthy answer of a paragraph or more. Be sure to put in the wrap=virtual so
that when the typing hits the end of the line it auto wraps to the next line. You
can set the columns and rows to whatever you like. And you can put in a default
response that is preloaded in the box when the page loads.

<TEXTAREA WRAP=VIRTUAL NAME="comments" COLS=20 ROWS=5> Nice Site! </TEXTAREA>

Nice Site!

6) The Submit and Reset Button

The Submit Button is what sends in the form once the user finishes filling it out.
The Reset button erases andthing the user has typed so he can start again. To
alter the text that appears on the buttons, change the value atribute to the text
you wish to have displayed.

<INPUT type=submit name=submit value="Click Here to Continue">

<INPUT type=reset name=reset value="Start Again">

Click Here to Continue Start Again

7) Hidden Values

If you had several forms on different pages and you wanted to have a field in the
e-mail you received that told you which page it came from, you can put in a
hidden field. Only you will ever see this, the user will not.

<INPUT type=hidden name=webpage value=from_index_page>

Building a Site with Frames
This tutorial will help you lay out your site in several layouts using frames.
Frames is a method to divid up your screen into separate windows and place web
pages inside each window. Frames are mainly used so the content of one frame
does not have to reload if the content of another frame is changed. Once you
understand the concept of frames, it is a wonderful tool to improve your site
appearance and functionality.

To begin with, you need to understand that the page to build the frames is a page
all on it's own. There is nothing in the frame building page except instructions for
the browser. These instructions tell the browser how many frames you want on
the page, what size and configuration you want the frames to be displayed, and
what pages you want to load inside each frame when it starts.

Inside the Frame Building Page

The page will be enclosed in HTML and HEAD tags:
<HTML><HEAD> ... </HEAD></HTML>
The instructions for your frames will be enclosed in the following HTML tags:
<FRAMESET> ... </FRAMESET>
The frame building instructions will be placed inside and below is an example.

<HTML>
<HEAD>
<FRAMESET COLS="100%" ROWS="80,*">
<FRAME NAME="top" SRC="[Link]">
<FRAME NAME="bottom" SRC="[Link]">
</FRAMESET>
</HEAD>
</HTML>

The above code will make the following frames:

You'll notice that inside the frameset tag is the COLS (columns) and ROWS.
COLS="100%" means one column at 100% wide.
COLS="50%,50%" means two columns at 50% wide each.
COLS="80,*" means two columns, one at 80 pixels wide and the second
unrestricted.
COLS="50,50,100,*" means four columns, with fixed widths on the first three.
The same system applies to rows.

In the above example... there are two web pages that the frames page needs to
grab.
- [Link] will be placed in the frame named "top", and
- [Link] will be placed in the frame named "bottom".
You don't have to use those names... the top one could be called Fred and the
bottom Barney if you like.

Getting More Elaborate

What if you want to use a combination of rows and columns? Well... as long as
you follow the basic rules, it is easily achieved. It does take practice, so don't be
upset if it takes a while to get exactly what you want. My sample is basically a
frameset inside a frameset.

The easiest way to explain it is to show you an example. I'll color the text
differently so it's easier to understand.

<HTML>
<HEAD>
<FRAMESET COLS="100%" ROWS="80,*">
<FRAME NAME="top" SRC="[Link]">
<FRAMESET COLS="120,*">
<FRAME NAME="left" SRC="[Link]">
<FRAME NAME="right" SRC="[Link]">
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>

The above code will make the following frames:

Let's get building!

So to build a nice framed site with:

1) a header frame,
2) a navigation frame,
3) and a content frame,

We simply make three web pages that will be the content of our three frames.
Once they are built... we make the frame building page (we're using [Link]).
When you're finished, [Link] can be loaded in your browser and it will build
your beautiful framed site! (see it in action!)

Once you are comfortable with building frames, and how they work, you will
probably want to explore various frame configurations and layouts to see which
might work best for you.
We have taken the hard work out of it for you: Download pre-made Frame
sets!

(see the sample)

Added Features
Once you have successfully built the frames from the example above, you can
add little features to make the frames do what you want them to do. Here is a
small list (not for all browsers though):

 SCROLLING="no" (no/yes/auto) - control whether or not the scroll

bar appears for that particular frame. I would say no for our header frame
and auto for the two below it.
 FRAMESPACING="1" (0,1,2,3...) - how much space is between the
frames. I'd say 1 is good.
 FRAMESET FRAMEBORDER="0" (0,1,2,3...) - we can set this to zero to
create a seamless page (making frames invisible).
  FRAME FRAMEBORDER="no" (no,yes) - this should always be no, see
the code below for where this is located.
 BORDERCOLOR="Blue" (any color) - choose the color of the frame
border (not all browsers).
 MARGINWIDTH="1" (0,1,2,3...) - the space between the frame side
and the content.
 MARGINHEIGHT="1" (0,1,2,3...) - the space between the frame top
and the content.
 BORDER="1" (0,1,2,3...) - width of the document border.
 NORESIZE (present or not) - if you put this word in the frame tag, then
the visitor cannot grab the edge of the frame and slide it around.

Sample code with the above options. (note color changes in

code)
<HTML>
<HEAD>

<frameset cols="100%" rows="100,*" border="1" frameborder="1" framespacing="1">

<frame name="top" src="[Link]" marginwidth="1" marginheight="1" scrolling="auto"

frameborder="no" noresize>

<frameset cols="170,*" border="1" frameborder="1" framespacing="1">

<frame name="left" src="[Link]" marginwidth="1" marginheight="1" scrolling="auto"

frameborder="no" noresize>

<frame name="right" src="[Link]" marginwidth="1" marginheight="1"

scrolling="auto" frameborder="no" noresize>

</frameset>

</frameset>

</HEAD>
</HTML>

Targeting links to different frames

To start with, you have to know the NAMES of the frames you build. Notice in the
code that it says frame name="top". That means the name of the top frame is
"top". The others in our example are called left and right.

Now that all the frames are in place, and you want to navigate around the site,
you have to remember to tell each link where you want it to open. This is called
targeting. So if in the left frame I have a link to page two, and I want it to open
in the right frame, I have to target it there. The right frame is named "right", so
we target to "right"... like this:

<A HREF="[Link]" target="right"> Go to page two </a>

If you want to "Break Out of Frames", you can make a link that tells the browser
to target to the whole screen. This is called "target to _top". (note the
underscore)
<A HREF="[Link]" target="_top"> To Site B </a>
If you want to "Open a New Browser", you can make a link that tells the browser
to target to a brand new browser window. This is called "target to _blank". (note
the underscore)

<A HREF="[Link]" target="_blank"> Go Site C </a>

Adding Sound Files To Your Web Page
You found a cool new MIDI, or WAV file and you really want it to play on your
page, right?

Will the sound enhance the page, or will it drive people away? Just because the
sound file is slightly related to the page topic does NOT mean it should go on your
page.

That said, let's take a closer look at sound files and how to set them up on your
pages:

MIDI versus .WAV files

A MIDI file (a file that ends with the extension .mid) is essentially a small file with
instructions that tell your sound card how to play a song. The better your sound
card, the better it will sound. All of the actual playing is done on YOUR computer.
You cannot 'record' existing sounds with MIDI.

A WAV file (a file that ends with the extension .wav) is a digital recording of a
sound or song. It is much like a cassette tape or cdrom. Because there is so much
information contained in .wav's these files tend to be HUGE. (Long .wav's can be
anywhere from 500k to 3 MEGS or more!)

Adding A Link To A Sound File

The easiest way to add a sound file to your page is to provide a simple link:

<A HREF="[Link]"> Play Mr. Bojangles</A>

Try it here: Play Mr. Bojangles

When a visitor clicks on this link, the file will be downloaded in it's entirety, and
then played on their computer using a sound program (like Windows media
player) that the user already has. If a user does not have a sound utility/program
installed they will hear nothing.

The <Embed> and <Bgsound> Tags

You can use the Embed tag to have sound automatically play on your page.
However, Netscape Navigator and Internet Explorer require two DIFFERENT tags
to tell the browser how to handle sound files. You MUST include both tags to get
the sound file to play in all formats of both browsers.

The <EMBED> Tag works in Internet Explorer 4.0x, 5.0x, Navigator 3.0x, 4.0x

The <BGSOUND> Tag works in Internet Explorer 3.0x (best used with the
NOEMBED tag... see below)

Here is the coding for adding sound files that most every browser can handle:

<EMBED SRC="[Link]" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="145"

HEIGHT="60" ALIGN="CENTER">
<NOEMBED>
<BGSOUND SRC="[Link]" LOOP="10">
</NOEMBED>
</EMBED>
Copy and Paste this example into your page and replace the "[Link]" with
the name of your sound file.

<Embed> Tag Attributes

SRC=
Enter the name of the sound file you wish to use, like "[Link]" or
"[Link]".

AUTOSTART=
Using this attribute will tell the browser to play a sound automatically by entering
"TRUE" as the Value. The sound will NOT start automatically if you enter "FALSE"
as the Value.

LOOP= In Netscape, you can tell the browser to play the sound over and over in
an endless Loop by entering "TRUE" as the Value. You can tell the browser to play
the sound ONCE by entering "FALSE" as the Value. (Internet Explorer does not
recognize this attribute. Use PLAYCOUNT= as shown below for IE.)

PLAYCOUNT=
Entering a number ("2" or "5" etc.) will tell Internet Explorer how many times to
play the sound. (Netscape does not recognize this attribute.)

WIDTH= and HEIGHT=

In Netscape, these attributes define the appearance and size of the CONTROL
PANEL it creates. (Internet Explorer does not recognize this Tag.)

The smallest Value you should use for these two attributes is:

WIDTH="145" HEIGHT="60"

If you put anything smaller or do not include these two attributes you may
encounter trouble getting the control panel to appear properly.

CONTROLLER=
For Internet Explorer, enter "TRUE" as the Value to show a CONTROL PANEL
and enter "FALSE" to not show it.

ALIGN=
Tells the Browser where to display the CONTROL PANEL. Enter "right", "left",
"absmiddle", "top" or "bottom" as your Value.

Java and Javascript can add all kinds of special effects and functionality
to your site. We will show you how to add them to your site:

Embedding Java Applets and Javascript

Java is a language that allows Java programmers to write small programs called
Applets that you can download and use on your web page. [Link] has a
great selection of applets you can try.

Applets can add special effects to your page, aid navigation, alter images or just
spruce up some text. When a visitor loads your web page with a Java Applet on
it, the visitor's browser downloads the Applet from your server and then runs it
from their own computer.
Javascript is a scripting language you can add directly to your page coding.
There are no other elements to upload to your server. Javascript allows you to
add many extra functions and effects to your pages. [Link] also has a wide
range of Javascripts for you to use.

The Java Applet

Java Applet's use .class files to contain the programming instructions they need.
Some Applets will use only one .class file, some will use several. You must upload
all of the associated .class files into your web page directory.

There are 3 steps usually needed to add an applet to your page:

1. Add the applet HTML coding onto your web page

2. Edit any Param Values as outlined by the Applet's Author
3. Upload all of the associated files (.class files, images, sounds and .html) to
your web server directory

To embed an Applet on your web page use the <APPLET> Tag. Change the
applet's parameters by editing the VALUE= settings in the <PARAM> Tag(s).

Here is an example applet and it's coding:

This is the Applet's HTML code for your page: The Java Applet:
<APPLET CODE="[Link]" WIDTH="104" HEIGHT="130">
<PARAM NAME="amplitude" VALUE="4">
<PARAM NAME="bgcolor" VALUE="#ffffff">
<PARAM NAME="picture" VALUE="[Link]">
<PARAM NAME="shakespeed" VALUE="20">
<PARAM NAME="sound" VALUE="[Link]">
</APPLET>

In this example, some of the VALUE= settings can be modified by you to add
your own pictures and sound files, or adjust the color of the applet's background
to match your page. Be sure to read the documentation that comes with your
applet and only change the Value's specified as editable.

This example Applet requires 3 files be uploaded to the web server:

1. [Link] (the programming instructions)

2. [Link] (the image file you wish to use)
3. [Link] (the sound file you wish to use)

TIP: Class files are case-sensitive, so be careful when you are uploading them to
a server. A lot of servers will automatically change all filenames to lowercase so
you may have to rename your .class files once you have uploaded them.

Adding Javascript
Javascript has quite a different method of installing, since you don't need to
upload any separate elements like .class files and so forth.

There are 2 steps required to install a javascript on your page:

1. Copy all the stuff between the <SCRIPT> and the </SCRIPT> tag, and
paste it somewhere between your <HEAD> and </HEAD> tag.
2. Copy and paste the HTML code that activates the javascript somewhere
into the Body of your page
Try the example script we have below. Follow the steps and you should have no
trouble:

1. Copy and Paste this code between the <HEAD> and </HEAD> tags on
your page:

<script language="JavaScript">
<!-- Hide the script from old browsers --
function loadalert ()
{alert("This is a standard javascript alertbox! Yee haa!")
}
// --End Hiding Here -->
</script>

The top of your page should now look something like this:

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hide the script from old browsers --
function loadalert ()
{alert("This is a standard javascript alertbox! Yee haa!")
}
// --End Hiding Here -->
</script>
</HEAD>

2. Copy and Paste this HTML coding anywhere in the Body of your page:

<INPUT TYPE="submit" VALUE="Click Me To Activate The Script"

onClick="loadalert()">

Click Me To Activate The Script

Now you should have a button like this:

Ok, so now try clicking your spiffy new javascript button! If you followed the
steps correctly you should have a standard javascript alertbox on your page now.

Now that your pages are basically complete, you need to let the world
know that your work is out there to see. The first step is to learn how to
create Meta Tags:

Meta Tags: the mystery revealed

The <META> Tag is a little bit different than the Tags we have already covered.
The <META> Tag is known as a one-sided Tag since it requires no Closing Tag
whatsoever.

Let's look at an example of how the <META> Tag is used:

<HEAD>
<TITLE> HTML Clinic - HTML Help For All </TITLE>
<META NAME="KEYWORDS"
CONTENT="html,help,tag,clinic,free,table,form,code,">
<META NAME="DESCRIPTION" CONTENT="Top-Rated HTML Resource on the
Web">
</HEAD>
ALL of the <META> Tags are entered between the <HEAD> and </HEAD> Tag
set. The order you put them in is not important. Enter at least these two meta
tags on each page.

If you want to save some time, try our free online Meta Tag Creator! VERY COOL!

The Meta Tag Attributes

The Attribute and Value entries work differently in Meta Tags than in other HTML
Tags:

NAME=
This Attribute only serves to give the Meta Tag an identifying name. In the
example, you will notice I have used two of the most common Names,
"KEYWORDS" and "DESCRIPTION".

CONTENT=
All this Attribute does is define what Content is to be associated with the Name
you defined in the NAME= portion of the Meta Tag.

So, now, if you look at the example above you can see I have defined my first
Meta Tag as the "Keywords" Meta Tag and have included a set of keywords
(with a comma after each keyword) as the Content for that individual Meta Tag.

The second Meta Tag I have defined as the "Description" Meta Tag and I have
included a short, detailed description of my site's highlights as the Content of that
Meta Tag.

Other Commonly Used Meta Tags

<META NAME="AUTHOR" CONTENT="Your Name Here">
This tag lets you define who wrote your web page. You can use your real name,
online name. or the name of your company. For example: "Bravenet Dave"

<META NAME="COPYRIGHT" CONTENT="Enter Year And Company Name Here">

This tag allows you to define when your page was created. As the writer of your
page you hold the copyright to the material on it. This does not allow you to claim
the copyright on other people's works even if they appear on your page.

<META NAME="CONTACT_ADDR" CONTENT="Your Email Address Here">

This tag allows you to define the email address people should use to get in touch
with you. For example: "webmaster@[Link]".

<META NAME="RATING" CONTENT="Add Your Rating Here">

What audience is your site geared towards? Possible values: "GENERAL", "14
YEARS", "MATURE", or "RESTRICTED".

<META NAME="ROBOT" CONTENT="Enter The Value Here">

Do you want search engines to index other pages on your site? When a search
engine spider visits your page it will most likely try to follow your links and index
every page it encounters.

Possible values:

"ALL"
This will tell a search engine spider to follow ALL the links on your web page and
index everything it finds.
"NOINDEX"
This will tell a search engine NOT to index this page at all, but it can follow any
links on the page.

"NOFOLLOW"
This will tell the search engine spider to index this page, but NOT to follow any
links on this page.

"NONE"
This will tell the search engine NOT to index or follow any links on this page.

<META NAME="REVISIT-AFTER" CONTENT="Enter Value Here">

This tag lets you tell a visiting search engine spider when to come back and index
the site again. Possible values can be any amount of time you want: "10 days",
"2 months" "1 week" or whatever.

<META HTTP-EQUIV="REFRESH"
CONTENT="2;URL=[Link]
You can use this tag to set up a redirection to another page. You can send your
visitors to a different specific page by including this tag.

In the value portion of the CONTENT= attribute put in the number of seconds to
pause, followed by a semi-colon, then type URL= and then add the address of the
page you want the visitor to go to, just like this:

"2; URL=[Link]

So, after 2 seconds I would be whisked away to

[Link]

Meta Tags: why you should use them

When you submit your site to a Search Engine, it sends a little program called a
spider to visit your site and gather information about your site.

The spider will take certain bits of information from your coding to determine
what each page is about, and where and how it should be displayed to a person
using the Search Engine. Most Search Engines will use your Meta Tag defined
keywords and description to perform this task.

It is important to make sure that the keywords you use are relevant to your
page. It is also VERY BAD to repeat any keyword more than 3 or 4 times. Search
Engines will view this as an attempt to SPAM your keywords and probably drop
your page altogether from the Search Engine listings.

Before you leave this page, don't forget to try our free online Meta Tag Creator!
It's too handy!

Meta Tags are only the beginning of successfully promoting your site.
Learn the best methods of getting noticed
Getting in the Search Engines
Before you run over to all the search engines and submit your site, you need to
put some key elements on your page. META TAGS are very important in relaying
to the Search Engines what your page is about.

Check out the Meta Tag Creator for building Meta Tags for your Pages.
Basic HTML Tags

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading.
<h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new
paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment
will be ignored by the browser. You can use comments to explain your code, which
can help you when you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the
closing bracket.

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how the text is displayed in
another browser. Some people have large computer displays, some have small. The
text will be reformatted every time the user resizes his window. Never try to format
the text in your editor by adding empty lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of spaces count as one.
Some extra information: In HTML a new line counts as one space.

Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag
instead. (But don't use the <br> tag to create lists. Wait until you have learned about
HTML lists.)

You might have noticed that paragraphs can be written without the closing tag </p>.
Don't rely on it. The next version of HTML will not allow you to skip ANY closing
tags.

HTML automatically adds an extra blank line before and after some elements, like
before and after a paragraph, and before and after a heading.

We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.

Basic HTML Tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

Style Tag Example Result

Bold <b></b> <b>Project</b> Project
Italic <i></i> <i>Painting</i> Painting
Underline <u></u> <u>Planet</u> Planet
Strikeout <strike></strike> <strike>Peach></strike> Peach
Superscript  3x² -x²ⁿ⁺¹ 3x 2 -x2n+1
K₂ = a₂x_{n-
Subscript  K2 = a2xn-1
1}
 Here are a few combinations you can use for various styles

Example Result
<i><b>Web Design</b></i> Web Design
<u><b>Internet Explorer</b></u> Internet Explorer
<b><u><i>Best Seller</i></u></b> Best Seller
I = I₀e^-kd I = I0e-kb

 Frames & Tables Tutorial

Why Do I Need Them?
Frames and tables are extremely important in web design. It is impossible to create a
navigation bar on a website without using frames or tables in one form or another.

An example of this is that this page is completely enclosed in a giant invisible table. It has a
column down the side to put the navigation in and a giant cell for all the page text. I could also
have got the same effect using frames.

What Is The Difference?

There is one major difference between frames and tables.

Frames divide up your browser window into separate areas. In each of these a page is
loaded. Links in different pages can be made to change the pages in other frames and frames
can stay the same when another page changes. This means that you can have one page
which has the navigation bar for a whole site on it and it never changes.

Tables divide up a web page into separate cells (like in a spreadsheet). This means that you
have a lot more control over where text and pictures can be placed. By using the method I
described earlier (having a column for a navigation bar and a cell for the page text) you can
create complex page structures. A page looking the same could be created with frames and
tables.

Frames: Good and Bad

The best feature of using frames is, of course, the ability to update every page on your site
using one file. For example: if I used frames on Free Webmaster Help I could add another link
to the navigation bar on one page. When the frames loaded on the web you would see this
change, whatever page you are on.

Frames also make very consistent pages. As you are only changing the text for each page of
the site, the actual look of the page will not change much in the user's browser.

When used properly frames can make a very good design feature and, once each frame has
loaded, the loading times of a site are a lot less (as, usually, only one frame is ever changed
throughout the whole site).

Frames do have their bad points, though. One of the major ones is that, even though frames
have been around for a long time, they are still not fully supported. Some people who are still
using older browsers cannot view frames sites. Even worse, some search engines will not
index pages using frames! This could mean a great loss of traffic for your website

Another problem with frames is that if someone arrives at an internal page on your site the
frames will not appear. This could mean that someone might read a page and not actually
know they are on your site.
The final problem is that it is very difficult to bookmark an internal page in your site and if
someone bookmarks a page on your site (using most browsers) and return later, they will see
your first page, not the one they bookmarked.

Tables: Good and Bad

Like frames tables also have good and bad points. Their best feature is that they fix all the
problems with frames. As all the parts are on each page, if you load an internal page of the
site everything will appear and it is possible to bookmark these pages.

All search engines support tables so you do not need to worry about them not indexing your
site. Although, some browsers do not support tables, nearly all the browsers in use do so you
should not have any problems with compatibility.

Like frames, tables also have some bad points. The main one of these is that, all the parts
making the page are stored on each page (not on separate ones like in frames), updating
something on the whole site is more difficult. For example: adding a new link to my navigation
bar in frames would mean changing one page. Doing it in tables would mean changing every
page on the site. This can be overcome by using a search and replace program, though.

Keeping a consistent design is also more difficult using tables because, as I explained earlier,
everything is on each page. This means that each item on your page which is supposed to
remain consistent must be placed in exactly the same place on each page.

The final problem with tables is that, because everything is on every page, the individual
pages take longer to load. This is not much of a problem if you are keeping quite consistent
with images, but it you are not it can increase loading times greatly. Also, the whole table
must load before it is displayed on the screen so users will be left with a blank screen while
the page is loading (instead of seeing the text appear as it is downloaded).

Which Is Better?
I cannot really say which is better! I personally use tables, a template and a search and
replace program to make Free Webmaster Help but it is really a matter of what features are
most important to you.

How Do I Use Them?

Simple! Read on. In this tutorial you can learn how to create tables and frames using a
WYSIWYG program or in HTML code.

How Do Frames Pages Work?

Frames pages are basically an HTML file which breaks the browser window up into separate
parts or frames. In each frame a different HTML file can be loaded. Links in one frame can
then be used to change the content in any frame on the page. If a frame is not re-loaded,
changes to the others do not affect it.

Frames In HTML
To explain how to create frames in HTML code I will give you some sample code and then
explain it. This code creates a page with a left frame for contents.

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset border="0" cols="150,*" frameborder="0">
<frame name="contents" target="main" src="[Link]" scrolling="auto" noresize>
<frame name="main" src="[Link]" scrolling="auto" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

I will now explain this code:

<html>
<head>
<title>My Frames Page</title>
</head>

This is the standard start for an HTML document. The title will appear in the browser's title bar
for every page on the site as it is contained in frames.

<frameset border="0" cols="150,*" frameborder="0">

This declares a frames page. It sets the border as none and the frames borders as none. The
part:

cols="150,*"

Says that the frames should be columns. One should be 150 pixels wide and the other should
fill up the rest of the screen. This is a very versatile tag. You can use percentages instead of
the values and any number of frames can be added by just adding another comma.

You can also change this to rows= to make the frames rows instead.

<frame name="contents" target="main" src="[Link]" scrolling="auto" noresize>

This is the tag for the first frame. It tells you the frame should be referred to as contents, links
in it will open in the frame called main, the page to be loaded in the frame is [Link] and
that scrollbars should be used if needed. It also tells the browser not to allow the user to
resize the frame. Other values which could have been used for scrolling could be yes and no.
These would set the browser to always display scollbars or never display them respectively.

<frame name="main" src="[Link]" scrolling="auto" noresize>

This is the tag for the second frame.

<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>

This is the area where you can put the information to be displayed by browsers which don't
support frames. It is a normal HTML page between the <body></body> tags.

</frameset>
</html>

This text c
loses the frames and HTML tags.

The final thing you need to know to use the a tag to make hyperlinks refer to another frame.
To do this you add target="framename" to the hyperlink tag. For example to make a page
load in the main frame you would use:

<a href="[Link]" target="main">Click Here</a>