Search Engine Optimization

SEO Search Engine Optimization (SEO) is a process implemented to increase a sites visibility. It involves minor alterations to your website, selecting keywords that will generate targeted traffic, continually researching search engine algorithms and policies, and most importantly understanding the customer’s goals. There are a wide range of companies offering SEO services, each employing strategies that may be significantly different from one another, hence producing varying results. Understanding these different strategies is the most important factor in choosing your SEO company. Need for optimization It is critical for any company to take into consideration how well its Web site will rank in the most important search engines and directories. There are many steps that a company must take in order to maximize a web site’s success in search engines and directories. Many companies underestimate the importance of search engines and fail to understand the ranking process. They end up ignoring what may be the most crucial ingredient of Internet marketing strategy. Classification of Search Engines
One of the first things to understand is the difference between search engines and directories. Crawler based search engines rely on automated software agents called spiders. These spiders grab information like page titles, meta data, and textual content to be included in the search engines index or database. Search engines determine relevancy by applying a set of rules known as an algorithm. The algorithm determines whether to include a specific page in the results based on the items captured by the spider. Google is an example of this type of search engine. The other types of search engines are those that have a directory component. The main distinguishing factor here is the human element. Directories are organized by human editors who actually visit the submitted website. They play a large role in the categorization of the web site and the wording of the titles and descriptions that will be the basis by which searchers will find the web site. LookSmart is an example of human powered directory. Search engines like Yahoo and MSN, present both crawler based and human powered results. These are known as hybrid search engines. How does SEO work? While the algorithm of each search engine may be different, they all look for the similar things:
Location of keywords:
Search engines first check title tags, headlines, and the first two paragraphs for keyword matches. Keywords are the cornerstone of every SEO campaign.
Frequency of keywords:
For the search engine to relate relevancy of a keyword to your website, it is important that the frequency of the keyword should be maintained. This frequency varies for different sites depending on several external factors.
Link popularity:
Increase in the relevant, external, qualified inbound links to other websites
An SEO campaign can be broken down into 7 basic functions as shown in the table below:
1. Keyword Identification The right keywords have to be identified first. These are words related to the site and ‘USED’ by surfers while finding your service or product. 2. Competition Analysis Here the websites ranking high for the keywords selected are reviewed for their link structure optimization method and incoming links. . 3. Page optimization In this stage the website is thoroughly optimized with meta tags, body text, internal links. 4. Link building Qualified incoming links are generated in this step. 5. Submissions The web pages are systematically submitted to various search engines and directories. 6. Analysis & Tweaking The results are observed over a period of time depending on the rankings and traffic analysis. The website is further tuned. 7. Reporting Throughout the course of the optimization, web stats are observed and tactics are altered based on traffic analysis.
Facts about SEO:
Web site optimization aims at a moving target, and therefore, must be an ongoing process rather than a finite project Merely submitting the website is a small part of the larger process of Web site optimization. Website optimization consists of site design and layout, scientific research, determination of the best keyword phrases, monitoring rankings, algorithmic and industry changes and much more It is always advisable to work with a firm that specializes in Search Engine Optimization rather than a general services web firm
Benefits of SEO:
Long term visibility
Banner ads or paid search engine placement works for a while but once the market budget is depleted, the site disappears. Also consumers are often more likely to purchase from a site ranked high in the search engine results rather than from a paid advertisement.
Familiarity with the company
A highly ranked website means more people see the name of the company and become familiar with the company and its products, even if they haven’t made a purchase. A survey by NPD shows that consumers are twice as likely to recognize businesses ranked in the top three in search engine results than those appearing in banner ads.
Affordability
In comparison to pay per click or banner ads, which cost between $500 to $5000 a month, an SEO plan costs much less. SEO provides a higher ROI for most companies than any other advertising medium.
Web site maintenance:
A web site should always be thought of as a work in progress. Optimization work continues long after the optimized site is launched. This is because search engines frequently change their algorithms and the competitive landscape changes. The most effective strategy is to change and adapt the site in response to changes in search engine ranking criteria. The activities carried out in an SEO maintenance program are:
Continuous monitoring of ranking and traffic trends Altering and Tuning Webpages to maintain and improve rankings Comprehensive ranking reports provide to clients

Search Engine Submission

Below link will take you directly to Yahoo search engine submission page $299 charge.
http://www.yahoo.com

submit your site free

Search engines like Google, Altavista and AlltheWeb search the Internet and find your web site through links from other web
sites. This is another reason to build a strong network of quality
sites linking to yours.

free add url search engines list

You can also submit your site free, when you add your url to a search engine requesting to be indexed. Below is an easy one stop search engines list of some of the top search engines where you can submit your site free.

If your web site is linked to from other sites there may be no need to submit. If your web site has no links use the submit site free pages here only once, then check your listing in 45 to 60 days. CAUTION: submitting again before 45 days will not help, and may hurt your ranking chances if considered abuse by the search engine.

Software that automatically submits your website should be avoided. Only submit manually to the top search engines, that is where 80 to 90% of your traffic will come from.

submit site to Yahoo for free
You must register, before using, but it is free.

You can add your business to Google search engine through below link:
http://www.google.com

free MSN submit url here

add url to Altavista Yahoo now feeds Altavista

submit site free to AlltheWeb Yahoo now feeds AlltheWeb

submit site free to Alexa

submit site free to Splat

submit site free to National Directory

submit site to ScrubtheWeb

Search Engine Optimization companies

(1)www.WEBWISEMEDIA.COM
Phone: 888-879-8880

(2)www.berankednumber1.net
888-656-4665

(3)Submitawebsite.com

6340 East Thomas Rd Suite 228
Scottsdale, AZ 85251
Phone – 480-949-1810
Fax – 480-949-2883

Search Engine Optimization software

(1)webpostiongold.com

Phone:928.833.7339

(2)www.apexpacific.com
Phone:908 298 1144

Basic Text & Font
Tags

Before we get
started, you should
know that HTML code
almost always uses
beginning and ending
tags.  These tags
surround the text
that will be
affected by the
code. 

A beginning tag is
generally a word
surrounded by
brackets. The
closure tag is
surrounded by the
same brackets but
with a forward slash
right after the
opening bracket.

For example, if you
want to bold a
portion of a
sentence, then you
would use <b> for the opening tag
and </b> for
the closing.

Let’s say you want
to bold the word
“Hello!” in the
sentence below. Then
your HTML code would
look like this:

<b>Hello!</b> My name is Carla.

The output would
be: 

Hello! My
name is Carla.

Only the word
“Hello!” is bolded
because the tags
surround that word.
If you wanted to
bold the entire
sentence, then you
would have put the
closure tag, </b>,
after the word
“Carla”.  Be sure to
always include your
closing tag because
if you forget, your
entire page will be
affected by the tag.

You can apply this
same concept to many
other HTML codes.
Here are several of
the basics…

Basic Text & Font
Tags

New Paragraph: <p> Starts a new
paragraph and
creates a blank line
between your new
paragraph and the
one above it. 

The closing tag is
</p>, but is not
mandatory.

Line Break: <br> 
This will break your
text to the next
line.  Two <br> tags
is equivalent to one
<p> tag.  There’s no
closing tag needed
for this one.

Bold: <b>  Closing tag is
</b>

Underline: <u>   Closing tag is </u>

Italics: <i>   Closing tag is
</i>

Centering text: <center>  Closing
tag is </center>

Left aligning
text: <p
align=”left”> Just
use </p> for the
closing tag

Right aligning
text: <p
align=”right”> Just
use </p> for the
closing tag

Change text
color: <font
color=”red”> The
ending for any font tag is </font> 

If you want more
colors, you can also
use hex codes. 

Changing font
face: <font
face=”Arial”>

Change font size: <font size=”3″>
(choose between 1
and 7)

Blinking Text: <blink>  </blink>
(only works in
Netscape)

Scrolling Text: <marquee>
</marquee> (only
works in Internet
Explorer)

Return to Top

Basic Structure of
an HTML Page

Here you will see a
sample HTML page
with the basic
structure.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<html>

<head>

<title>Title that is
displayed at the top
of your web browser
and also used as the
title by many search
engines</title>

<meta
name=”description”
content=”10-15 word
description of your
site read by some
search engines”>

<meta
name=”keywords”
content=”main
keywords of your
site separated by
commas. Read by some
search engines”>

</head>

<body>

<p align=”left”>

This is my new web
page. we hope you
like it. Please come
back and visit
again.  If you need
help creating your
web site visit <a
href=”http://www.2createawebsite.com”>2
Create a
Website.com</a>.

</p>

</body>

</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The <html> tag just
tells the browser
where the HTML
starts. It is not
necessary to include
this tag to get your
page to show.

The <title> tells
your browser the
title of the page
and you’ll see this
text at the very top
of your web browser.
This is also used by
most search engines
when indexing your
page. Whatever text
you have here will
be title of your
site when displayed
in the search
engines.

The <meta name>
information is also
somewhat useful for
some search engines.
They may use
whatever is in your
“description” tag to
describe your site.
Others may randomly
take an excerpt of
the <body> of your
page for a
description of your
site. The keyword
tag may also be
helpful with your
ranking in some
engines. Insert 3 or
4 of your main
keywords or keyword
phrases separated by
commas here.

A few years ago, the
<meta name>
information was
quite crucial in
getting a top
listing with the
search engines.
However, things have
changed drastically
with the explosion
of so many new sites
and the fact that
many people abused
it. we would still
recommend using
these tags but don’t
expect to get a top
ranking because of
them.

The body of your
site should be
included inside the
<body> tags.

Return to Top

Hyperlinks are links
that take you to
another page or web
site. You create
them by using the
code below:

<a
href=”http://www.thepage.com”>Name
of link</a>

The link would
appear as, Name of link

Open Links in a
New Browser Window

If you don’t want
people to leave your
site completely when
they click on links
to other sites, you
can set the link to
open up a new
window. The “target”
attribute allows you
to do this:

<a
href=”http://www……
“target=”_blank”>

URL is
another name for a
web site address and
stands for Uniform
Resource Locator.

There are two
different types of
URLs you can use to
link to various
pages, absolute and
relative.

Absolute URLs
include the complete
path to the file’s
location, including
the names of all the
directories and
subdirectories.

Let’s say you have a
folder inside your
web site’s root
directory called
“music” and you want
to link to a page
inside the “music”
folder called
brahms.html.

The absolute URL is:

<a
href=”http://www.yoursite.com/music/brahms.html”>Brahms</a>

If you don’t want to
ever have to worry
about going back and
editing your
hyperlinks if your
site structure
changes then
relative URLs are
the way to go.

Relative URLs are
more or less like
shorthand that tells
the browser to go
backward one or more
directories to find
the file.

Let’s say you’re on
the page we
referenced above,
brahms.html (located
in the “music”
folder) and you want
to link back to the
home page:
(http://www.yoursite.com/index.html)

Using a relative
URL, you would tell
the browser to go
back 1 directory by
using the dot-slash
method.

<a
href=”../index.html”>Home</a>

The two dots
followed by a slash
instructs the
browser to go up 1
more level to get to
the main (root)
directory.

Changing the
Hyperlink Colors

The default color
for hyperlinks on an
HTML page is blue,
but you can change
it to whatever color
you’d like by using
the link code inside
the <body> tag.
Here’s an example:

<body link=”green”
vlink=”yellow”
alink=”purple”>

In the above
example, hyperlinks
will be green, links
that have already
been visited will be
yellow and active
links will be
purple.  (An active
link is one that has
just been clicked,
so for a split
second the link will
change colors as the
mouse activates it).

Creating email links
are just as simple.
All you need is the
“mailto” function to
get this to work
properly:

<a
href=”mailto:youraddress@email.com”>Email
Me</a>

Anchor Links

If you want to
create a link that
will take the
visitor to another
section of the same
page (rather than a
new page or site),
then you can create
an anchor link. 
There are two steps
to this process:

1) First, go to the
place in your HTML
code where you want
the anchor to go. 
This is the spot on
the page that the
browser will move to
when a person clicks
on the link.

Insert the code <a name=”name1″>This
is the Text Where
the Anchor Will
Land</a> 
“name1″ is just the
name of the anchor we
chose.   You can all
it anything you
want.

2) Now to link to
that section of the
page, use the
hyperlink code: 

<a href=”#name1″>click
here</a>

Now when your
visitors click on
that link, they will
be taken to that
section of the page.

Return to Top

Understanding
tables, in our
opinion, is one of
the important
lessons you can
learn.  Tables are
such a fundamental
part of web page
layouts, and you can
do so much with your
page design if you
understand how they
work.

If you see a web
page with a left
navigation, usually
that page is created
by using one big
table with two
columns and no
border.  The left
column is generally
set to a smaller
amount than the
right column, thus
setting up the left
navigation.

Basic Table Tags

The three most
important tags for
tables is the
opening table tag,
<table> and the
table row and table
data tags – <tr> and
<td> respectively.

The <tr> tag
represents a row for
the table

The <td> tag
represents a cell
inside the row.

Now, with that in
mind, let’s create a
simple table:

<table>

<tr>   <td>A</td>
<td>B</td>
<td>C</td>   </tr>

<tr>   <td>X</td>
<td>Y</td>
<td>Z</td>   </tr>

</table>

And this is what the
table would look
like published:

Notice that by
looking at the code,
you can tell how
many rows and
columns are included
just by looking at
the code.  The two
opening <tr> tags
indicate two rows
and the three
opening <td> tags on
each line represents
three data cells (or
three columns).

Adding Table
Borders

Adding a border
simply involves
inserting the border
attribute to the
opening table tag.
So in the above
table the code would
be adjusted
accordingly:

<table border=”2″>

<tr><td>A</td> 
<td>B</td> 
<td>C</td> </tr>

<tr><td>X</td> 
<td>Y</td> 
<td>Z</td> </tr>

</table>

Notice the “2″
represents the
thickness of the
border. If you had
set it to “0″ then
there would have
been no border at
all. If you wanted
it very thick then
you could set it to
8, for example.  So
now your table will
look like this:

Changing a Table’s
Border Color

You can change the
color of a table
border by simply
adding the bordercolor attribute.

<table border=”2″ bordercolor=”red”>

<tr><td>A</td> 
<td>B</td> 
<td>C</td> </tr>

<tr><td>X</td> 
<td>Y</td> 
<td>Z</td> </tr>

</table>

And here’s what it
would look like…

Adjusting Table
Cell Spacing and
Cell Padding

You can increase the
space within the
table cells and the
space between the
cells by using the cellpadding and cellspacing 
attributes.

The cellspacing attribute adjusts
the space between
the cells and cellpadding adjusts the space
within (around) the
cell.

<table border=”2″ cellspacing=”10″
cellpadding=”3″>

<tr><td>A</td> 
<td>B</td> 
<td>C</td> </tr>

<tr><td>X</td> 
<td>Y</td> 
<td>Z</td> </tr>

</table>

This is what the
table would look
like now…

See how setting the
cellspacing
attribute to “10″
drastically
increased the
spacing between the
cells, and the
cellpadding
attribute set to “3″
added a little of
space within each
individual cell.

Specifying a Table
Width

You can specify the
width of a table by
using either a
percentage or a
pixel width.

<table width=”100%” border=”2″>

<tr><td>A</td> 
<td>B</td> 
<td>C</td> </tr>

<tr><td>X</td> 
<td>Y</td> 
<td>Z</td> </tr>

</table>

Since the width is
set to 100% that
means the table will
take up 100% of the
screen and the
columns in the table
will be adjusted
evenly.  Here’s what
it would look like.

As we mentioned, you
can also set the
table width using
pixels instead of
percentages.  So
instead of setting
it to 100%, you
could set it to 300
pixels:

<table width=”300″ border=”2″>

<tr><td>A</td> 
<td>B</td> 
<td>C</td> </tr>

<tr><td>X</td> 
<td>Y</td> 
<td>Z</td> </tr>

</table>

The table would look
like this:

Setting Column
Widths

Sometimes you may
not always want your
columns to be the
same size.  If this
is the case, you
need to set values
on your table data
<td> cells.  Again,
you can set them by
using percentages or
pixel widths.

<table width=”300″
border=”2″>

<tr><td
width=”70%”>A</td>
<td>B</td>
<td>C</td> </tr>

<tr><td
width=”70%”>X</td>
<td>Y</td>
<td>Z</td> </tr>

</table>

This is what this
table would look
like.
 

See how the column
width for the first
column in both rows
is set to 70%. 
Notice there is no
value set for the
other 2 columns.  If
you do not set a
value for the
remaining columns,
their width will
automatically be
adjusted to take up
the remaining space
and they’ll share it
equally.

Since the table
width is set to 300
pixels, and the
first column is
instructed to take
up 70% of those 300
pixels (roughly 210
pixels), the other 2
columns divide the
remaining 30% of the
table (roughly 45
pixels a piece).

You could also have
expressed the column
widths of this table
in pixels instead of
percentages.  The
code would have
looked like this:

<table width=”300″
border=”2″>

<tr><td
width=”210″>A</td>
<td width=”45″>B</td>
<td width=”45″>C</td>
</tr>

<tr><td
width=”210″>A</td>
<td width=”45″>B</td>
<td width=”45″>C</td>
</tr>

</table>

See how the width of
the columns in each
row add up to 300
(210 + 45 + 45) —
which is the width
of the table.

What’s the
Difference Between
Using Percentages
and Pixel Widths

Many people prefer
to express their
table width and
column widths in
percentages because
that will ensure
that the table takes
up the same amount
of screen no matter
how big or small the
screen resolution
is. 

If someone is using
a 21 inch monitor to
view your site and
you have a table
width set to 300
pixels, the table
will show up very
small on their
screen.  However if
you set the table
width to 70%, it
will take up 70% of
the screen no matter
what size the person
is using. 

So it’s really up to
you to decide what’s
the best layout for
your tables.

Specifying a Table’s
Height

You can also set the
table height by
adding the height
tag to the table
code.

<table height=”250″ width=”300″
border=”2″>

<tr><td
width=”210″>A</td>
<td
width=”45″>B</td>
<td
width=”45″>C</td>
</tr>

<tr><td
width=”210″>A</td>
<td
width=”45″>B</td>
<td
width=”45″>C</td></tr>

</table>

Which will produce
the following table:

Horizontally
Aligning the Content
Inside Tables

The content inside a
cell is left aligned
by default, but you
can also center or
right align the text
as well by using the
align attributes.

<table width=”300″
border=”2″>

<tr><td width=”210″ align=”center”>A</td>
<td
width=”45″>B</td>
<td
width=”45″>C</td>
</tr>

<tr><td width=”210″ align=”center”>A</td>
<td
width=”45″>B</td>
<td
width=”45″>C</td></tr>

</table>

See how the first
column is aligned to
the center?  You can
also right align the
columns by using the
align=”right” inside
the <td> cells.

Vertically
Aligning the Content
Inside the Table
Cells

So far we’ve kept
the table cell
alignment at the
default, which is
the middle.  Notice
in the above table
that the A, B, and C
are all three
aligned in the
middle of their
cells.  Well you can
change their
alignment to either
top, bottom, or
middle by using the valign (which
stands for vertical
align) tag:

<table height=”250″
width=”300″
border=”2″>

<tr><td valign=”top” width=”210″>A</td>
<td
width=”45″>B</td>
<td
width=”45″>C</td>
</tr>

<tr><td valign=”top” width=”210″>A</td>
<td
width=”45″>B</td>
<td
width=”45″>C</td></tr>

</table>

We’ve set the table
height to “250″ so
the alignment would
be more noticeable.
Notice that the A in
both rows are
aligned to the top. 
You can also align
to the “bottom” or
the “middle”.

Creating a Left
Navigation Layout
With Tables

As we mentioned
earlier, most left
and right
navigations are
created using
tables.  All you do
is create a table
with one row, two
columns and no
border.  Then align
both of your columns
to the top (using
the valign tag) so your text
will start in the
top of the columns,
not the middle. 
Then depending on if
you’re going to have
a right or left
navigation, you’ll
make one column
significantly
smaller than the
other.

Here’s a simple left
navigation layout:

<table width=”100%”
border=”0″>

<tr><td valign=”top”
width=”25%“>Left
Nav Links Here</td>
<td valign=”top”
width=”75%“>Body
Here</td> </tr>

</table>

And here’s what it
would look like: 

Notice we set the
border to “0″ but
it’s still showing
in the example.  we
just did that to
show how the layout
would look. If you
set your border to
“0″ you won’t see
any lines around
your table.

So there ya have
it!  That’s a
general overview of
tables.  There’s so
much more you can do
with them, but if
you can understand
the basic layout,
you’ll be able to do
so much with the
design of your web
site.

Return to Top

Inserting Images

Once you have the
image you want to
use you can insert
it into your web
page.

Next you’ll need to
do is upload the
graphic to your web
server.  Your web
hoster will either
provide the
environment for you
to upload your
images or you’ll
have to use an FTP
program.

When you upload the
graphic, make sure
you pay attention to
what folder you’re
putting it into
because that will
affect how you write
the HTML.

Let’s say you upload
the graphic called
“apple.gif” to your
“images” folder on
your web server. The
image folder is
located inside your
“root” directory.

Your HTML code will
look like this:

<img
src=”images/apple.gif”>

Now let’s say you
have uploaded the
graphic to the
“fruit”
folder/directory
that is located
inside of the images
folder then the code
would appear as:

<img
src=”images/fruit/apple.gif”>

If you want text to
pop up when you run
the mouse over the
graphic, then you
need to add the alt tag.

<img
src=”images/apple.gif”
alt=”This is my
apple”>

If you want to
adjust the height
and width of the
image then you need
to use the height
and width tags:

<img
src=”images/apple.gif”
alt=”This is my
apple” height=”100″
width=”150″>

It is recommended
that you always
include the height
and width of your
images because it
makes your pages
load faster.

To add a border to
your image need the
“border” attribute.
It’s very simple:

<img
src=”images/apple.gif”
border=”5″> The 5
represents the
thickness of the
border. The higher
the number, the
thicker the border.
The number 0 is
equivalent to no
border.  Or you
could just leave the
border attribute out
if you do not want
one.

Let’s say you want
your graphic to have
a border of 2, be
100 x 250 pixels
(height x width) and
have an alt tag:

<img
src=”images/apple.gif
border=”5″
height=”100″
width=”250″
alt=”This is my
apple”> 

Please note that it
does not matter what
order you put the
attributes in
(border, alt, etc.).
Just make sure you
do not leave out any
of the punctuation.

If your graphic does
not show up and you
receive the “broken
image” icon, check
the following:

1. Make sure the
   file is
   uploaded and
   is actually in
   the directory
   you are pointing
   to in your HTML
   code.
2. Check the case
   of the actual
   filename. If you
   saved the file
   as “APPLE.gif”
   but typed
   “apple.gif” in
   the HTML code
   then the image
   will not show.
   Case does
   matter.
3. Check your HTML
   code and make
   sure you have
   included all the
   punctuation.

Linking images is
helpful if you have
buttons or banners
on your site and you
want the visitor to
be taken to another
web page or site
when they click on
the image. To
accomplish this, use
the following code:

<a
href=”http://www.the_linked_site.com”><img
src=”images/apple.gif”
border=”0″></a>

The first part of
the code tells the
browser which site
to go to and the
second part, of
course, tells it
where the image is
located.

Return to Top

If used properly,
backgrounds can
really enhance your
site. If used
incorrectly, they
can make your site
very difficult to
read. 

If you plan to use a
“loud” background
that you think is
cool, be sure to
keep your visitors
in mind. Even though
you may love it, it
may be distracting
for the average
visitor and you
certainly do not
want a background
that takes away from
your text.

In general, try to
use light
backgrounds on dark
text.

To insert a
background color on
your web page, use
the following code
INSIDE your <body>
tag:

<body bgcolor=”red”>

You can specify any
color, or you can
use a
hex value.

Inserting a
Background Image

If you want an image
for your background
then you would use
the background and
image tag together:

<body
background=”images/weave.gif”> 

Keeping in mind that
“images/weave.gif”
is the location of
the graphic. So
you’re telling the
browser that the
graphic is located
in your images
folder off the
root/main
directory.  You can
also use the
absolute path to
your image.  For
example, http://www.yourdomain.com/images/weave.gif 

Return to Top

Understanding Hex /
Color Values

Hex values are used
for generating
colors other than
the standard reds,
blues, greens,
yellows, purples,
etc.  As you learned
above, to specify a
purple font you just
use the tag <font
color=”purple”>.  

But HTML doesn’t
understand colors
like “sky blue” or
“pea green” so if
you want these kinds
of colors, you need
to specify a hex
color value.

Understanding hex
values is easy if
you can grasp the
basics. Just
remember that the
individual colors
you will mix are
always red, green,
and blue and always
in that order.

So with the
6-character hex code
the first two
characters represent
the amount of red,
the second two
characters represent
the amount of green,
and the last two
represent the amount
of blue. Take a look
at the chart below
for the percentage
breakdown.

So the ex color of
ff3333 means 100% of
red (ff), 20% of
green (33) and 20%
of blue (33)

So you’d use <font
color=”#ff3333″> to specify
this color on your
page.

If you wanted all
white then the hex
color would be ffffff.

If you wanted a
color that was
mostly blue with a
hint of red and
green you could use
the hex code of 3333ff (20% of
red, 20% of green
and 100% of blue).

Now if this is too
confusing, or you
simply do not care
to learn how to mix
colors, you can
always use a hex
color code chart to
produce the colors
you need.

View the HTML
color code chart for
a list of all the
hex colors.

Return to Top

Inserting Bullets

You can insert
bullets into your
pages by simply
using the <ul>
(unordered list) and
<li> (list item)
codes.

<ul>

<li> Bullet 1 </li>

<li> Bullet 2 </li>

<li>Bullet 3 </li>

</ul>

The above code will
create the standard,
round bullet that
looks like this:

• Bullet 1
• Bullet 2
• Bullet 3

If you would like an
open-circle bullet,
you can change the
code slightly by
adding an attribute
to the <ul> tag. 
See below:

<ul type=”circle”>

<li> Bullet 1 </li>

<li> Bullet 2 </li>

<li> Bullet 3 </li>

</ul>

This will create an
open-circle bullet. 
See below:

• Bullet 1
• Bullet 2
• Bullet 3

Return to Top

Indenting Text

To indent your text
about an inch to the
right, simply use
the open and closing
<blockquote> tag
around the text you
want to indent.  

<blockquote> This text will be
indented indented </blockquote>

See how the code
makes the text in
the paragraph below
behave:

sample text sample
text sample text
sample text sample
text sample text
sample text sample
text sample text
sample text sample
text sample text
sample text sample
text sample text
sample text sample
text sample text sample text sample
text sample text

This text
will be indented
indented 

Return to Top

Special Characters

Return to Top

Horizontal Lines
/ Dividers

Horizontal lines are
great for breaking
up paragraphs of
text or separating
sections of your
page.

To create the
standard/default
horizontal line,
you’ll just simply
insert the <hr>
code.  This will
create a line that
looks like this:

Setting
Horizontal Line
Width,  Size and
Color

To set the width of
your line, simply
add a “width”
attribute.  For
example, 
<hr width=”250″> will create a line
that is 250 pixels
wide.  See below…

You can also set the
size of the line by
inserting a value. 
So if you wanted a
line that is 250
pixels wide and 6
pixels thick, you’d
use the following
code: 

<hr width=”250″
size=”6″>

This will produce
the line below:

Lastly, you can
control the color of
the line by
inserting the color
attribute:

<hr width=”250″
size=”6″
color=”blue”>

You may also use hex colors to
define the color of
the line.

Return to Top

Creating Forms

Probably one of the
easiest forms to
setup is the
FormMail form. 

However, in order to
make this work your
site must be hosted
with a host that
allows you to upload
files to your cgi
bin.

HTML Code for
Forms

Once the FormMail
file is in place on
your server, all you
have to do is create
a page with the form
code to make it
work.

Below you’ll find
the code for
creating a form in
which your visitors
can fill out and the
results will be
emailed to your
email address.

The form has the
following fields:

• Text box
• Password Field
  (hidden text)
• Check Box
• Radio Buttons 

Here is what the
form will look like
and below you will
find the HTML code. 
You will need to
change some
variables (in red)
to customize it to
your own needs.

Here’s the code for
the form you can
copy and paste. 
Feel free to remove
the HTML code for
fields you don’t
need or adjust the
various values to
fit your liking.

Notice the red
text.  This is what
you need to edit to
customize the form.

1) The 1st line
should be changed to
the address of the
FormMail script on
your server.
2) The 2nd line
should be the
address of the page
the user views after
they submit the
form.  You may need
to create this page.
3) The 3rd line is
the email address
the form results
will be sent to.

4) The 4th line is
the subject of the
email when the form
is sent to your
address.

<form METHOD=POST
ACTION=”http://www.yoursite.com/cgi-bin/formmail.cgi”>
<input type=hidden
name=”redirect”
value=”http://www.yoursite.com/thankyou.html“>
<input type=”hidden”
name=”recipient”
value=”email@youremail.com“>

<input type=”hidden”
name=”subject”
value=”Form
Subject“>

<p>Your Name: <input
TYPE=”text”
NAME=”Name”
SIZE=”40″
MAXLENGTH=”40″>
</p>

<p>Password:
<input
TYPE=”password”
NAME=”password”
SIZE=”10″
MAXLENGTH=”10″>
</p>

<p>Please Place me
on your mailing
list:

<input
TYPE=”checkbox”
NAME=”mailing-list”
VALUE=”Yes” checked>
</p>

<p>What’s Your
Gender?
<select
NAME=”Gender”>
<option
VALUE=”Male”>Male

<option
VALUE=”Female”>Female
</select>
</p>

<p>How Old Are You?

<input TYPE=”radio”
NAME=”Age”
VALUE=”0-25″
checked>0-25
<input TYPE=”radio”
NAME=”Age”
VALUE=”26-50″>26-50
<input TYPE=”radio”
NAME=”Age” VALUE=”50
and over”>51 and
Over
</p>

<p>Comments: <br>
<textarea
NAME=”comments”
ROWS=”10″ COLS=”50″
wrap=”virtual”>
You can insert
default text here if
you wish
</textarea>
</p>

<p>
<input TYPE=”submit”
NAME=”Request”
VALUE=”Submit This
Form”>
<input TYPE=”reset”
NAME=”Clear”
VALUE=”Clear Form”>
</p>

</form>

Return to Top