Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
142 views

HTML Tabs

Basics of HTML and HTML tags

Uploaded by

desaivaibhav
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
142 views

HTML Tabs

Basics of HTML and HTML tags

Uploaded by

desaivaibhav
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 47

HTML (Hypertext Mark-up Language) is the primary language for formatting web pages.

With HTML
you describe what a page should look like, what types of fonts to use, what color text should be,
where paragraph marks come and many more aspects of the document.

It is the job of the browser that requests the HTML file to format the page according to the various
tags included in the HTML. Because there are so many different vendors of browsers, and each
vendor has their own way of interpreting what a HTML tag should accomplish, a web page will look
different in different browsers.

For instance, Lynx (A Popular Unix Based Browser) which only displays text for a web page will not
have the capabilities to display many of the graphical features of a web page such as images, forms,
tables, etc. - This doesn't mean Lynx is a bad browser, rather it means it was designed to operate a
particular way on a particular platform.

All HTML documents are created by using a tags. Tags have beginning and ending identifiers to
communicate to the browser the beginning and ending text that is to be formatted by the tag in
question. There are some tags that do not have an ending tag for reasons that are obvious when
used. This will become apparent as you become more familiar with HTML.

Most of the tags have an opening and a closing tag (you will become more familiar with this concept
in this document). Each tag is enclosed with the "less than" (i.e. <) and "greater than" (i.e. >) sign. The
closing tag usually looks the exact same as the opening tag with the exception of the "forward slash"
(i.e. /) that identifies it is a closing tag.

The following are example's of tags that will be discussed further:

<p> </p>
<b> </b>
<i> </i>

In some instances, an opening tag may have property values which can "optionally" be set to further
define what the tag is to accomplish. The Following is an example of a paragraph tag whereby
alignment of the paragraph has been defined as Left Justified:

<p align="left">

Enetrics Communications recommends using the Netscape® Navigator® Browser, or the


Microsoft® Internet Explorer® web browser. These two browsers are HTTP 1.1 compliant, and have
been keeping up to date with the latest HTML specifications, including the HTML 3.0 proposed
specifications. This is not to say that other browsers are not up to standards, rather simply to
comment these are known to be.

There are many web authoring tools to help you create your web pages. Netscape's Communicator
Package, Microsoft FrontPage® 98, NetObjects Fusion are probably the easiest to use. There are
many others web authoring tools on the market. Of course you can simply type the HTML tags into a
document using your favorite word processor, and save it as a text file, and this document will show
you how to do it.
HTML beginning and ending tags

Every HTML document must be identified with beginning and ending tags. These tags tell the web
browser where to start processing the HTML document for formatting, and when to stop.

Various tags that will be discussed include the Meta Tags, Background Tags (Used for setting
Document, Color, Background Color/Image) as well as the Body tag as well as how to get the most
out of them.

Each HTML document must start with the HTML tag. This is a simple tag that communicates to the
server, and the browser that this is "the beginning of an HTML document. This tag should be the first
tag to appear within an HTML document with the exception to comments which may be placed
anywhere in the document.

The HTML tag also has an associated ending tag which is identified at the end of the document. The
Closing HTML tag communicates to the server, and to the browsers that the end of an HTML
document has been reached.

The closing HTML tag must be the last tag in the document. The following is an example of the
beginning and ending HTML tag (Shown in Red Letters).

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Heading and Title Tags

The Heading tag is used to identify the start of information that applies to the document as a whole.
Consider it to be similar to be a synopsis of what may be found within a good novel. Between the
Opening

The title tag is used to give a title to your web page. Many browsers use the information displayed
between the opening and closing title tag to place bookmarks, or display the name of the web page in
the Window title of the browser (Windows based browsers).

In addition, many Robot (Spider) Search engines use the title tag to add a web site to their database,
and use the text between the title tag as the title that will be displayed in their search engine. As you
can see, careful naming of the title is important.

The following shows the title tag with a title identified between the opening and closing tag.

<html>
<head>
<title>This is the Title of my Web Page</title>
</head>
<body>
</body>
</html>

Note that the title tag's appear between an opening and closing heading tag. The <head> tag
identifies the beginning of heading information. It has an associated closing tag of </head>. The
heading opening and closing tag must come before the Body tag.

Meta Tags

Meta tags are used to communicate information about the web page. There are several different meta
tags that are used for various purposes. We will discuss three meta tags in this document: The author,
description, and keyword meta tags.

Meta tags do not have a closing tag, like most other tags. This is because the meta tag doesn't
describe, or cause formatting to the text in a document. Rather it describes information about the
document, or information that causes the browser to perform an action on a document.

The author meta tag is used to indicate who the author of the web page is.

The description meta tag has an important use when it comes to some search engines. There are
many search engines that will index your site automatically. Some of these search engines allow for a
short description to be placed in their web page. If the search engines is looking in your web page for
a description meta tag, it will use this description in the search index.

The keyword meta tag has another important use when it comes to some search engines. When
these auto robot search engines index your site, some will look for a keyword meta tag to use as
index words. When someone uses their search engine and searches on a word that is in your
keyword meta tame list, your site will be included in the output search results.

Each keyword should be separated by a comma. Capitalization is not important in the keyword meta
tag.

These meta tags are not required in your document, and should only be used if you wish to help out
the search engines or provide comments. The following example shows how these tags are coded:

<html>
<head>
<title>This is the Title of my Web Page</title>
<meta name="Author" content="Your name goes here">
<meta name="Description" content="My site is one of the best">
<meta name="Keywords" content="host,my,site,personal,web,page">
</head>
<body>
</body>
</html>

Many Meta Tags are useful for many different purposes. Meta Tags became a Catch-all for
identifying information with no particular purpose (with exception to a very few select meta tags.

Many vendors of software that generates HTML will make use of their own custom Meta Tags to
identify different pieces of information about the document. In these cases, the meta tags are only
useful to that particular software.
Too many meta tags can be detrimental to your site being indexed appropriately by the Search
Engines. Use Meta Tags Sparingly.

Body Tag

The body tag is used to identify the beginning of the main portion of your web page. All of the web
page will be designed between the opening and closing body tag.

Between these two tags you will place all images, image maps, links, text, paragraphs, and forms. In
the following example, I have placed one paragraph of text between the body tags.

<html>
<head>
<title>This is the Title of my Web Page</title>
</head>
<body>
This is a paragraph between the body tags, to provide an example of
what the text should look like!
</body>
</html>

The parameter on the body tag that is used to identify a background image is, just like Background
Colors, not an HTML 2.0 standard specification. The Background Image will replace the background
color if the image loads successfully. If not, the background color is the color that will be used as a
background to your web page. In addition, the background color will be set and used while the
background image is loading.

Background Image

The following modification to the <body> tag identifies a background image to be loaded. The
example shows the Absolute URL:

<body text="#00FFFF" bgcolor="#000000" link="#FFFF00" vlink="#FF0000"


background="http://www.yourdomain.com/yourdirectory/background.gif">

In the example I just provided I included the complete URL. This is not necessary with Enetrics
Communications Accounts. You can include the Parameter as a relative link, so long as the image file
resides in the same directory as the HTML document that is referencing the image. The following
shows the same URL as a relative link.

<body text="#00FFFF" bgcolor="#000000" link="#FFFF00" vlink="#FF0000"


background="background.gif">
Starting a New Paragraph

Simply having a new line in your text file will not provide a new paragraph or new line. When a
browser views the HTML, it actually appends each line together before processing the file. It also
removes extra spaces. Let me append this to the last statement, Not all browsers follow appropriate
standards. For instance one specific browser ignores the &nbsp; embedded code which means to
insert a non-breaking space. The particular browser that I am speaking of actually displays this
embedded code in the web page. If you see things like this in your web pages you access please
don't blame those who created the web page, rather contact the vendor of your browser, or maybe
even stop using that browser.

Back to starting a new paragraph. There are a few ways to start a new paragraph. There are also
some formatting parameters to some of these tags as will be explained.

New Paragraph

To Begin a New Paragraph the <p> opening tag and </p> ending tags are used. these Paragraph
tags also have parameters as part of the tag. These parameters allow you to Left Justify, Center, or
Right Justify the text on the web page. Most web browsers have started supporting the parameter to
the <p> tags, however, not all browser support them.

The following HTML paragraph tag allows for the left Justification of the paragraph. Please note that if
the parameter is omitted, it will be defaulted to left justification. I provide it here for documentation
purposes only!

<p ALIGN="left">This Paragraph will be Left Justified</p>

The following HTML paragraph tag allows for the Centering of a particular paragraph.

<p ALIGN="center">This Paragraph will be Centered on the Web Page</p>

The following HTML paragraph tag allows for the Right Justification of the Paragraph

<p ALIGN="right">This Paragraph will be Right Justified on the Web Page</p>

There is a Netscape extension tag that is used to center text. Some of the browser's that do not
support the parameters on the Paragraph tag will support the extension <center> and </center> tags.
For this reason, I try to make a habit of placing these tags around the Paragraph tags. Take a look at
the following example:

<center><p ALIGN="center">This Paragraph will be Centered on the Web Page</p></center>

Line Breaks

One of the features of the paragraph tag is an extra line will be places between paragraphs for each
paragraph tag use. The line break tag is used to indicate when to split a paragraph onto different
lines. No Extra line will be placed between the text.
The line break tag does not have a closing tag. It simply has an opening tag of <br>. The following
example is the previous example with a line break in the middle of the text.

<center><p ALIGN="center">This Paragraph will be <br>


Centered on the Web Page</p></center>

The following is an example of the above HTML Code:

This Paragraph will be


Centered on the Web Page

Unordered Lists

Un Ordered Lists present a list of items in a format that shows a bullet next to each item in the list.
Take a look at the following example:

• List Item 1

• List Item 2

• List Item 3

The code for this is as follows:

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

You can indent paragraphs by using the <ul></ul> tags. For instance the following paragraph will be
indented one level:

<p><ul>This paragraph will be indented one level.</ul></p>


<p><ul><ul>This paragraph will be indented two levels</ul></ul></p>
<p><ul><ul><ul>This paragraph will be indented three levels</ul></ul></ul></p>

The Unordered lists really do not have anything to do with starting a paragraph, however it does relate
to indenting paragraphs or creating a bulleted list (if no list item tags are used) so we have placed this
under this heading.
Text Formats

There may be times when a special effect to text is desired. Such as bolded text, or italicized text, or
larger text for titles. You can define super-script text, sub-script text. Maybe you want a certain piece
of text to blink. Even colors may be defined for any piece of text. The flexibility is quite enormous.

This section describes the various HTML tags that are used to apply these different formats to text.
Again, each of the tags discussed will have and opening tag, and a closing tag.

In order to facilitate the ease of this section, the following HTML will be used during this discussion.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<h1>This text is displayed with Heading #1</h1>
<p><i>This text is displayed as being italicized</i></p>
<p><b>This text is displayed as being in Bold</b></p>
<p><b><i>This text is displayed as being in Bold and Italicized</i></b></p>
<p>This <sup>word</sup> is Super-Script</p>
<p>This <sub>word</sub> is Sub-Script</p>
<p>This <strike>word</strike> is formatted with Strike-through</p>
<p>This <blink>word</blink> is Blinking</p>
<p><font COLOR="#00FF00">This text is in the color of Green</font></p>
</body>
</html>

NOTE: If your web browser does not support some of these tags, you will not see the formatting
effect. Enetrics Communications recommends you download the Netscape Communicator Web
browser or the Microsoft Internet Explorer Browser. Be sure your ISP will support these Browsers. If
they don't we recommend you find another ISP.

Bold Text

To apply the BOLD format to text in your web page, you need to use the opening and closing Bold
tags. These tags are <b> to open the bold, and </b> to close the bold. The following example shows
the Bold tags in green text

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><b>This text is displayed as Bold</b></p>
</body>
</html>
Underlined Text

This tag is represented by starting the text to be underlined with a <u> tag, and where the underlining
is to stop, place a </u> tag.

Be aware that most browser underline the text that is part of a link, and using this tag could confuse a
visitor to your web page as to whether the text is a link or not. I recommend using this tag sparingly.

The following example shows the use of this tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><u>This text is displayed as being underlined</u></p>
</body>
</html>

Italicized Text

The tags to format text to be Italicized are <i> and </i>. These tags can also be nested as you can see
in the following example where each Italicized opening and closing tag have been defined as being
green.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><i>This text is displayed as italicized</i></p>
<p><b><i>This text is displayed as Bold and Italicized</i></b></p>
</body>
</html>

Notice in the above example how we were able to make the Text Italicized and Bold. This is done by
embedding one tag inside of another. First we set the Bold Tag, then we set the italicized tag inside
the Bold Tag. This provides the results of both Bold and Italicized Text. You could continue to
embed other text attribute tags within these, such as the Underline tag:

<p><b><i><u>This text is displayed as Bold, Italicized and Underlined<u></i></b></p>

Superscript

The opening and closing tags are <sup> and </sup>. These tags can also be nested within other tags
(such as Bold, Italicized, Underline, etc. In the following example the super-script tags are shown in
Pink text.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <sup>word</sup> is Super-Script</p>
</body>
</html>

Subscript

The tags to format text to be shown in Sub-Script are <sub> and </sub>. These tags can also be
nested. In the following example the sub-script tags are shown in pink text.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <sub>word</sub> is Sub-Script</p>
</body>
</html>

Strikethrough

The tags to format text to be shown in Strike-Through are <strike> and </strike>. These tags can also
be nested. In the following example the Strike-Through tags are shown in Pink text.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <strike>word</strike> is formatted with Strike-through</p>
</body>
</html>

Netscape Browsers also supports the <s> and </s> tags which do the same thing as the <strike> and
</strike> tags, however, since not all browsers support the <s> and </s> tags, it is wise to stick with
the standard when you are coding your HTML documents.

Strong

Strong is typically used emphasize a word, phrase or sentence. The effect is similar to Bold text. The
following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><strong>This text is Emphasized</strong></p>
</body>
</html>

Blink

The tags to format text to be shown in Blinking format are <blink> and </blink>. These tags can also
be nested. In the following example the Blink tags are shown in Pink text.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <blink>word</blink> is Blinking</p>
</body>
</html>

Citations

Citations are used for titles of books, magazines, movies, etc. The effect of the citation Tags (<cite>
and </cite>) is the same as Italics. The following is an example of the usage of this tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p> <cite>This is the Title of a Book</cite></p>
</body>
</html>

Samples

Samples are used for providing an example (or sample) of a literal. Formatting is removed and the
text is displayed exactly in a Fixed font Format (similar to a typewrite font). The following is an
example of the usage of this tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p> <samp>This Text is in Fixed Font Format</samp></p>
</body>
</html>

Definitions

Definitions are to define a word. It will display in Italics in most browsers. There are a few browser
which do not display in Italics. The following is an example of the usage of this tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <dfn>Word</dfn> is being Defined</p>
</body>
</html>

Code

Code is used for Computer Code Examples. If you have an example of a program you need to place
on a web page, enclose it between the <code> and </code> tags. The Effect will be a fixed width
font. The following is an example of the usage of this tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>Example Program Code<code>#!/usr/bin/perl</code></p>
</body>
</html>

Variable

Variable is typically used when an example is provided and a piece of the example should be
replaced. For instance "telnet filename" The effect is different in different browsers. Typically values
between the <var> and the </var> tag are shown as italicized text. The following is an example of the
usage of this tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>Telnet<var>filename</var></p>
</body>
</html>

Typewriter

Typewrite style provides a Fixed Width Font Effect. The following is an example of the usage of this
tag:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><tt>This text will be a Fixed Width Font</tt></p>
</body>
</html>

Text Color

Another feature of the HTML language is the ability to apply color to text. Again the browser must be
able to support this feature or it will either ignore the tags, or display the tags as text.

The following is an example of specify a particular piece of text in the color green.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><font COLOR="#00FF00">This text is Green</font></p>
</body>
</html>

As you can see this was accomplished with the use of the <font> tag, and the closing tag is the
</font> tag. COLOR is a parameter to the <font> tag. It is used to identify the color that is to be used
to display the text that is between the opening and closing Font Tag.

The following is an example of some of the COLOR codes (Hexadecimal Codes) that will be used with
the COLOR parameter in a <font> tag.
Color Color Code Color Color Code

Red #FF0000 White #FFFFFF

Turquoise #00FFFF Light Grey #FFFFCC

Light Blue #0000FF Dark Grey #808080

Dark Blue #0000A0 Black #000000

Light Purple #FF0080 Orange #FF8040

Dark Purple #800080 Brown #804000

Yellow #FFFF00 Burgundy #800000

Pastel Green #00FF00 Forest Green #808000

Pink #FF00FF Grass Green #408080

Text Size and Fonts

Font Sizes, and Styles are not readily available in the HTML 2.0 specifications. A Font typestyle and
Font size may make it into the HTML 3.0 specifications. Here we identify how you can make different
text appear in different sizes.

The HTML tags to change the size of text include:

<h1>Heading Size 1</h1>

<h2>Heading Size 2</h2>

<h3>Heading Size 3</h3>

<h4>Heading Size 4</h4>

<h5>Heading Size 5</h5>

<h6>Heading Size 6</h6>

The following is the example HTML file with the heading codes in Pink.

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<h1>This text is displayed with Heading #1</h1>
</body>
</html>
Additionally you may specify a Font Tag which identifies to the browser which font to use for the text.
NOTE: The font must be available on the users computer or the default font defined for the browser
will be used. In the future, we hope fonts will be a downloadable object that can be embedded into
the web page. Until then, it is best to stick with the basic fonts available.

The following is an example of setting the font type and size of font:

<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<font face="arial" size=1>This text is displayed with different font</font>
</body>
</html>

Notice in the above example, the font face is set to Arial. All Windows Computers are shipped with
the Arial Font Pre-Loaded. It's a good bet that Arial will be available on the users Computer. A
secondary, and even a tertiary font may also be defined in case the primary font is N/A. Simply add
the fonts in a comma separated list as in the following example:

<font face="arial,helvetica,courier" size=1>Multiple Font Faces</font>

In the above example, if the Arial font is not found on the users computer, the Helvetica font will be
used. If the Helvetica font is not found, the courier font will be used. Lastly, if the courier font is not
found, the browsers default font will be used. There is no limit to the number of fonts you may place,
however we recommend limiting it to two or three at the most.
Links, Images, Audio and Video

Link to other pages

The <a> and </a> tags are used to create links from one web page to another. The following is an
example of a link to Enetrics Communications:

<a HREF="http://www.2kweb.net">This links to Enetrics Communications</a>

As you can see there is a parameter in this example named HREF. The value assigned to the HREF
parameter indicates the URL that will be used for navigation when a person clicks on the text
associated with the Link.

The associated text is the text after the <a HREF="..."> and the </a> tags.

To create a link that can be clicked on to start up the mail program associated with the browser, use
the following link. Notice there is not a whole lot that is different from linking with the mailto: option and
the http option.

Targets and anchors

A Target or sometimes called an anchor is a placeholder within an HTML document that may be used
for linking. Rather than link to another document, you are simply creating a link within the same
document.

Defining a target is quite simple. Instead of using the <A HREF> tag, you use a different parameter in
the <A> tag so that the tag is a name tag (i.e. <A NAME=" ">) - Take the following example where a
target is defined as being "target":

<a NAME="target"></a>

After Defining the target, you can then link to that target. The following shows the code that links to
the target we just defined:

<a HREF="#target">This is the text that is the link</a>


<a NAME="target"></a>

Notice the <a HREF> tag has a pound sign (i.e. #) before the name of the target

It tells the browser to look for a target rather than a URL

Let's get creative. Let's say in Document A you want to create a link to a target that resides in
Document B. The URL for Document B is http://yourdomain.com/index.php - within Document B is the
following tag about 5 screens down on the page

<a NAME="target"></a>

In Document A, you create a link to that Target (anchor) by adding the following line:
<a HREF="http://yourdomain.com/index.php#target">Click here to go there</a>

Notice you simply appended the #target onto the end of the URL. This tells the browser to first retrieve
the document found at http://yourdomain.com/index.php and then after retrieving the document
position the document to the target (anchor) #target

Adding an image

Images may be added to your web page as easily as links. The <img> tag is used to define an image.
This tag does not have a closing tag. However, there are parameters defined for this tag. The
following example adds an image to a Web Page:

<img src="http://www.2kweb.net/image-file.gif" alt="Text that displays if image doesn't


load">

The alt parameter is used to define a piece of text to be displayed for when the browser doesn't
successfully load the image. This can happen if there is a problem with the internet traffic, or if one of
the connections between the server and the client (browser) gets broken, or if the web surfer clicked
on the stop button to stop loading the image.

In the previous example, I used the complete URL to the image file, however relative URL's can be
used if the image file is stored in the same directory on the same server as the HTML document that
executed the call to retrieve the Image file.

You can also specify the justification (i.e. Alignment) parameter as in the following example which will
center the image (Remember to also use the <center> and </center> tags for those browsers that
don't support the justification parameter in the <img> tag.

<img src="http://www.2kweb.net/image-file.gif" alt="Text that displays if image doesn't load"


ALIGN="center">

You can also right justify the image by simply using the value of "right" for the ALIGN parameter as in
the following example:

<img src="http://www.2kweb.net/image-file.gif" alt="Text that displays if image doesn't load"


ALIGN="right">

Client side image maps

One of the main draw backs of the current ability to create image maps is the processing of the map
coordinates resides on the server. Not only is this an in-efficient use of the server resources, but it is
oftentimes cumbersome and the ability to create image maps is often times out of reach of the end
users.

The use of client side image maps allows the coordinates for an image map to be placed within the
HTML code, and places the burden of processing these coordinates on the browser, and thus making
more efficient use of the distributed processing of server vs. client.
This section describes how to define client side image maps (currently only supported by Netscape®
2.x and Microsoft® Internet Explorer® 3.x browsers (There may be other browsers that support this
feature, however I am not aware of them at the time of this writing))

A new attribute is defined oft he <IMG> tag as shown in the following example:

<img src="name-of-gif-file.gif" usemap="#map-name-goes-here">

The usemap tag is a pointer to a <map></map> tag location also to reside in the same HTML
document. The following is an example of the <map></map> tags and the area coordinates defined
within the <map> </map> tags.

<map NAME="map-name-goes-here">
<area coords="83,68 162,116" href="http://www.domain.com/dira/">
<area coords="172,67 273,115" href="http://www.domain.com/dirb/">
<area coords="280,67 377,116" href="http://www.domain.com/dirc/">
<area coords="23,120 95,166" href="http://www.domain.com/dird/">
<area coords="108,120 185,167" href="http://www.domain.com/dire/">
<area coords="195,120 302,166" href="http://www.domain.com/dirf/">
<area coords="310,119 375,166" href="http://www.domain.com/dirg/">
</map>

Notice the NAME attribute within the <map> tag directly relates to the USEMAP attribute defined in
the <IMG> tag. - This is all there is to defining a client side image map. To create the coordinates, you
will want to use a piece of software that will generate the coordinates for you.

In order to support both the Client side image map implementation and the server side

Embedding midi/wav files

Midi Files and Wave Files may be embedded and automatically played when a user hits your web site
using a couple of methods (again dependent upon the browser.) - Microsoft Internet Explorer supports
embedding a background sound to a web page using the <bgsound> tag. See the following example:

<bgsound src="http://www.2kweb.net/sound.mid" loop=0">

This would appear to be the most logical way to embed a sound file. The only difference is I think
this should be included in the <background> tag, but hey, who am I to tell everyone else how to do
html right?

The Loop parameter identifies how many times through the midi file should be played. You can set
this value to any number or to define an infinite loop, set the value to "-1" as shown in the following
example:

<bgsound src="http://www.2kweb.net/sound.mid" loop=-1">

The following is the embed tag:


<embed src="http://www.2kweb.net/sound.mid">

As you can see there isn't a whole lot of differences between the two with the exception of the tag
name. You can place both tags in your documents and both browsers will support playing the midi
files.

NOTE: The same is true for embedding wave files. Simply use the <bgsound> or <embed> tags to
link to the .wav file.
Tables in HTML

Tables can be somewhat difficult to code. We will simply touch on the highlights to get you started
into coding tables. There are three basic steps to defining a simple table. First Define the Table itself
(appearance of table, cell spacing, backgrounds, etc.) then define a row of the table (Again setting the
appearance properties to define the background, alignment, etc.) and finally defining the columns for
a table.

Think of a table as a Grid. The table itself is the outside boundary of the Grid, and the grid itself is
made up of Rows and columns. A Cell represents a single block that can be identified by an X,Y
coordinate. The following is an example of a table with 3 rows and 5 columns:

As you can see from the above example. There are a total of 15 cells. The following is the HTML
code that is used to create the above table:

<table border="1" width="43%">


<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</table>

Ok, let's proceed with defining a table, then rows, then columns (or cells):

Defining a table
To define a Table, we will use two tags. The opening table tag (i.e. <table>) and the closing table tag
(i.e. </table>) - The following example defines a very basic table. No Rows and No Columns. This
basic table will not be recognized by browsers as the table is not complete without at least one Row
and one Column, however this is the first step to defining a table:

<table>
</table>

Let's define some attributes to the table to define the width of the table, background color, cell
spacing, space within cells and border size. Each of these attributes will define what the table will
look like in the browser. Each of these attributes may also be

<table bgcolor="#800000">
</table>

Let's now define the width of the table by adding the width parameter to the example. Note: If you omit
the width the default used by browsers will be the width of the browser window used for displaying the
web page:

<table bgcolor="#800000" width="43%">


</table>

In the above example we have set the table width to be 43% - A Percentage is based upon the
window width of the browser displaying the web page. you can be more specific and define the table
to be X pixels wide by omitting the Percentage sign. The following example shows the width to be 43
pixels wide instead of 43% of the Window Width:

<table bgcolor="#800000" width="43">


</table>

You can also define the height of the table in percent of window height or in pixels high. The following
example shows defining the height to be 70% of the window height (Note: Not all browsers support
the height attribute)

<table bgcolor="#800000" width="43%" height="70%">


</table>

Now, lets define the Border width. This defines the outlining border for each cell and how thick it
should be. A Value of 0 will mean no border is to be visible in the browser. In our example we will
use a standard border width of 1:

<table bgcolor="#800000" width="43%" height="70%" border="1">


</table>
Next we will define the spacing of cells from each other. The Cell spacing attributes is used to define
this as shown in the following example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15">


</table>

Let's now define the Cell Padding. This is the amount of spacing to be used within each cell. It tells
the browser how much space to provide between the cell wall and the text and/or graphics within the
cell.

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8">
</table>

You can also define the Table Border Color. This color is set on the outside border of the table. In
Microsoft Internet Explorer it will also effect the borders surrounding all cells. We have define the
following example border color to be Teal:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080">
</table>

The following two attributes are only valid when displayed in Microsoft Internet Explorer 4.x and will
override the bordercolor attribute defined in the previous example. The first is to define a Dark border
color and the second is to define a Light Border color. This is to provide the ability to create a shadow
effect from the Table. In the following example we have defined Navy as the Dark Color and Silver as
the light color:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
</table>

Well, that about sums up defining a table. Let's move on to Defining Rows and Cells. We will expand
on the above example:

Defining a row

A Table is Made up of Rows and Columns. Before a Column can be defined (actually it is a cell within
a Row) a row must be defined.

Rows will take their default attributes from what is defined in the <table> tag, however these attributes
may be overridden when defining a table row (i.e. <tr> tag) - The following is an example of defining
table row with a single row defined:
<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"
cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr>
</tr>
</table>

The following attributes may be defined for a Table Row:

Row Alignment
Vertical Alignment
Background Color

The values for the Row Alignment are: Left, Center, or Right. The following is an example of defining
the Table Row for each of these values:

<tr align=left>
<tr align=center>
<tr align=right>

The following is an example of the above table with the row alignment set to justify centered:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center>
</tr>
</table>

The vertical alignment defines where the row is to line up vertically. Typically you would probably
want the row to line up at the top, however there may be times which you want it to align vertically to
create different effects. The following are examples of vertical alignment:

<tr align=center valign=top>


<tr align=center valign=center>
<tr align=center valign=bottom>
<tr align=center valign=baseline>

The following is an example with the vertical alignment set to top:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top>
</tr>
</table>

Finally, you can define the background color of the Row. This following is an example of adding in the
background color for the row to be displayed in Burgundy Color:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top bgcolor="#800000">
</tr>
</table>

Defining a column

A Row is divided into Columns (or cells) - Each Cell has many attributes the define what the
appearance of that cell is. We will continue with the previous example when defining a row to add 3
columns to the row and place some text within each of the three cells. The following is what our table
will look like when we are done:

COLUMN 1 COLUMN 2 COLUMN 3

Let's start by adding the three columns to our example code.

Each column (or cell) is define by the <td> and </td> tags. Below we have placed these two tags
between the table row tags (i.e. <tr> and </tr> tags). We have placed three sets because we want
three columns:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top bgcolor="#800000">
<td></td>
<td></td>
<td></td>
</tr>
</table>

Now lets' talk about the various attributes that can be set for each Cell. First you can define a Cell's
vertical alignment and horizontal alignment just like a row. Any attributes defined for a cell will
overide the attributes defined for the row the cell resides in. The Following example shows the
vertical alignment and horizontal alignment added in for our table example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top bgcolor="#800000">
<td valign="middle" align="center"></td>
<td valign="middle" align="center"></td>
<td valign="middle" align="center"></td>
</tr>
</table>

Next we add in the definition to define the overiding background color for the cell. We have defined
the cell color to e Silver in the following example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top bgcolor="#800000">
<td valign="middle" align="center" bgcolor="#FFFFCC"></td>
<td valign="middle" align="center" bgcolor="#FFFFCC"></td>
<td valign="middle" align="center" bgcolor="#FFFFCC"></td>
</tr>
</table>

The "nowrap" attribute forces the browser to keep the text of the cell on a single line without
automatically word wrapping the text to the next line.

The following example shows the nowrap as part of the Tags:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top bgcolor="#800000">
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap></td>
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap></td>
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap></td>
</tr>
</table>

Now let's add our text that will be the contents of each of the three cells. The text, images, etc. will
be placed between the <td> and </td> tags. See the following example:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">
<tr align=center valign=top bgcolor="#800000">
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 1</td>
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 2</td>
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 3</td>
</tr>
</table>
Our Table is now complete. The previous code represents the table at the beginning of this web
page. Just when you thought we were done theres one last item we must discuss. Table Headings.
Table headings are exactlly what they sound like. It's a way to define the heading value for a column.
The table Headings are defined exactly as the Table Description (cells) except the tag is <th> and
</th> instead of <td> and </td>

In the following example, we have added a row above the one we previously define and also defined
the table headings for the three columns:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"


cellpadding="8" bordercolor="#008080" bordercolorlight="#000080"
bordercolordark="#FFFFCC">

<tr align="center" valign="top" bgcolor="#800000">


<th valign="top" align="center" bgcolor="#FFFFCC" nowrap>Heading 1</th>
<th valign="top" align="center" bgcolor="#FFFFCC" nowrap>Heading 2</th>
<th valign="top" align="center" bgcolor="#FFFFCC" nowrap>Heading 3</th>
</tr>

<tr align=center valign=top bgcolor="#800000">


<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 1</td>
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 2</td>
<td valign="middle" align="center" bgcolor="#FFFFCC" nowrap>Column 3</td>
</tr>

</table>

The next example is the completed table with the headings defined

Heading 1 Heading 2 Heading 3

Column 1 Column 2 Column 3

Frames

I guess the best way to learn frames is to simply do them. We'll discuss the various elements of a
Frame Controller and setting up frames. In addition, we have provided four of the most commonly
used types of framesets with an example of what the finished web page would look like. - So, let's get
started.

The primary tag for creating frames is the <frameset> tag. Several elements within the frameset tag

The following is a frameset tag which is used to define a simple frame as shown in Example one:

<frameset cols="150,*">
</frameset>
The previous example indicates the browser window should be divided into two frames, the first
column is 150 pixels wide, and the second column will receive the balance of available browser
window space (identified by an Asterisk (i.e. *) as the second parameter to the "cols" attribute. - You
can also define the column and row Width in Percentage values by simply adding a percent sign (i.e.
%) after the number 150

Within the <frameset> tag we need to communicate to the browser what the source HTML Files will
be for the left frame and the right frame. This is accomplished by including the <frame> tag:

<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>

Each Frame is provided a name attribute. This is important for referencing the target when a link is
created in one of the two frames. In the above example, the name of the frames are "left-frame" and
"right-frame" and the HTML "src" is the URL (relative or absolute) to the HTML file to be displayed in
the frame.

The above example is the HTML definitions (tags) that reside in what we will be calling the "Controller
Frame" which is basically the main web page that will be linked to. When a web site visitor goes to
the "Controlling Frame" the web page will be loaded by dividing the browser window (as specified by
the "cols" attribute of the <frameset> tag) and loading two HTML web pages that are defined in the
<frame> tag.

One last attribute can be added to support those who may visit your web site with browsers that do
not support frames. This is the <noframes> and </noframes> tags. Between these two tags you will
place the HTML code that should be displayed to the Web Site visitor if the do not have frames
capable browser:

<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

We have used an example for the <noframes> of displaying the text "This page uses frames, but your
browser doesn't support them" - We would never do this in a live web site we plan to design. It's the
lazy way out. Simply create a web page for those that do not have frame capable browsers and place
the code between the <noframes> and </noframes> tags (be sure to include the <body> tags). By
doing this, you will be supporting all users the visit your web site, not just a select group.

Now, let's define some further attributes to the <frame> tag to identify some more behaviors such as
removing the capability to resize the frame. To accomplish this, simply add the attribute "noresize"
as shown in the following example:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize>
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Let's get a little more wild and define the target frame. The target is used in conjunction with links
that may be placed in the frame. In our example, the target frame for the left frame will be the right
frame. This means that links placed in the left frame will actually load the right frame with the linked
web page. - see the following example:

<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Notice that we are targeting the <frame> "name" property for the right frame. - now if a link is placed
in the left frame, when a web site visitor clicks on that link, the "linked to" page will be loaded in the
right frame.

There will be times when you want to create a frame and remove the "Scroll bar" from the frame. This
is accomplished by adding the attribute to the <frame> tag as shown in the following example:

<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize scrolling="no">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Left/Right Frames

The Frames code for a Left and right Frame consists of three HTML files. First, is the Control HTML
file which also contains the HTML for the web page to support browsers that do not support frames.
Second is the Source for the Left Frame and finally the source for the right frame. Below is an
example of the HTML for all three files to create this type of a frame:

Controller HTML File:

<html>
<head>
<title>Frames Control Web Page</title>
</head>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

Left Frame HTML File (Save this file named left-frame.html):

<html>
<head>
<title>Left Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the left frame</p>
</body>
</html>

Right Frame HTML File (Save this file named right-frame.html)

<html>
<head>
<title>Right Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the right frame.</p>
</body>
</html>

The Web page you will call is going to be the Controller Frame. The Controller frame will load up the
other two web pages into the left and right frames based upon the src tag in the Control Frame
HTML. In the above example, be sure all three web pages reside in the same directory and are
named accordingly.
Top/Left/Right Frames

The Top/Left/Right frame is perfect for placing a banner at the top of the page and yet allows your
web site visitors traverse your web site using the left an right frames. It's also good to place the title of
your web site and keep the title visible throughout your entire site.

The Frames code for a Top, Left and right Frame consists of Four HTML files. First, is the Control
HTML file which also contains the HTML for the web page to support browsers that do not support
frames. Second is the source for the top frame. Third is the Source for the Left Frame and finally the
source for the right frame. Below is an example of the HTML for all four files to create this type of a
frame:

Controller HTML File:

<html>
<head>
<title>Controller HTML Page</title>
</head>
<frameset rows="64,*">
<frame name="top-frame" scrolling="no" noresize target="right-frame" src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

Top Frame HTML File (Save this file named top-frame.html):

<html>
<head>
<title>Top Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>

Left Frame HTML File (Save this file named left-frame.html):

<html>
<head>
<title>Left Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Left Frame</p>
</body>
</html>

Right Frame HTML File (Save this file named right-frame.html)

<html>
<head>
<title>Right Frame</title>
</head>
<body>
<p>This is the Right Frame</p>
</body>
</html>

The Web page you will call is going to be the Controller Frame. The Controller frame will load up the
other two web pages into the left and right frames based upon the src tag in the Control Frame
HTML. In the above example, be sure all four web pages reside in the same directory and are named
accordingly.

what this web page will look like

Top/Left/Right/Bottom Frames

The Top/Left/Right/Bottom frame is perfect for placing a banner at the top of the page, footer and
copyright statements at the bottom of the page and yet allows your web site visitors traverse your web
site using the left an right frames. It's also good to place the title of your web site and keep the title
visible throughout your entire site.

The Frames code for a Top, Left, Right and Bottom Frame consists of Five HTML files. First, is the
Control HTML file which also contains the HTML for the web page to support browsers that do not
support frames. Second is the source for the top frame. Third is the Source for the Left Frame. Fourth
is the source for the Right Frame and finally the source for the bottom frame. Below is an example of
the HTML for all five files to create this type of a frame:

Controller HTML File:

<html>
<head>
<title>Controller HTML File</title>
</head>
<frameset rows="64,*,64">
<frame name="top-frame" scrolling="no" noresize target="right-frame" src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<frame name="bottom-frame" scrolling="no" noresize target="right-frame"
src="bottom-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

Top Frame HTML File (Save this file named top-frame.html):

<html>
<head>
<title>Top Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>

Left Frame HTML File (Save this file named left-frame.html):

<html>
<head>
<title>Left Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Left Frame</p>
</body>
</html>

Right Frame HTML File (Save this file named right-frame.html)

<html>
<head>
<title>Right Frame</title>
</head>
<body>
<p>This is the Right frame</p>
</body>
</html>

Bottom Frame HTML File (Save this file named bottom-frame.html)

<html>
<head>
<title>Bottom Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Bottom Frame</p>
</body>
</html>

The Web page you will call is going to be the Controller Frame. The Controller frame will load up the
other two web pages into the left and right frames based upon the src tag in the Control Frame
HTML. In the above example, be sure all five web pages reside in the same directory and are named
accordingly.
Top/Middle/Bottom Frames

The Top/Middle/Bottom frame is perfect for placing a banner at the top of the page and yet allows
your web site visitors traverse your web site using the Middle and bottom Frames It's also good to
place the title of your web site and keep the title visible throughout your entire site. The bottom Frame
can be used for Hotlinks to various pages on your web site and the middle frame will store the actual
site contents.

The Frames code for a Top, Middle and Bottom Frame consists of Four HTML files. First, is the
Control HTML file which also contains the HTML for the web page to support browsers that do not
support frames. Second is the source for the top frame. Third is the Source for the Middle Frame and
finally the source for the bottom frame. Below is an example of the HTML for all four files to create
this type of a frame:

Controller HTML File:

<html>
<head>
<title>Controller HTML File</title>
</head>
<frameset rows="64,70%,*">
<frame name="top-frame" scrolling="no" noresize target="middle" src="top-frame.html">
<frame name="middle-frame" target="middle-frame" src="middle-frame.html" >
<frame name="bottom-frame" scrolling="no" noresize target="middle-frame" src="bottom-
frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

Top Frame HTML File (Save this file named top-frame.html):

<html>
<head>
<title>Top Frame</title>
<base target="middle">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>

Middle Frame HTML File (Save this file named middle-frame.html):

<html>
<head>
<title>Middle Frame</title>
<base target="bottom">
</head>
<body>
<p>This is the Middle Frame</p>
</body>
</html>

Bottom Frame HTML File (Save this file named bottom-frame.html)

<html>
<head>
<title>Bottom Frame</title>
<base target="middle">
</head>
<body>
<p>This is the Bottom Frame</p>
</body>
</html>

The Web page you will call is going to be the Controller Frame. The Controller frame will load up the
other two web pages into the left and right frames based upon the src tag in the Control Frame
HTML. In the above example, be sure all four web pages reside in the same directory and are named
accordingly.
Forms Tutorial

Forms provide a means by which one can prompt the web surfer for information, and allow the surfer
to enter the information into the web page. A program is required to process the information after the
user enters it.

There are many different tags that facilitate the creation of Forms. For instance, you can create a
simply text entry field to ask a web surfer for a name, or address, or any other piece of information
that you can come up with.

You can provide choices where only one choice is valid. These are called radio buttons. A group of
options are presented, and the web surfer clicks on one of the options.

Text Area fields provide multiple lines of text entry. This is often used in feedback forms to allow the
Web Surfer to provide comments to the Web Program.

Combo Boxes present a list of valid values that can be chosen by the Web Surfer from a pull-down
list.

Beginning/Ending Form Tags

Forms are created using HTML Tags. Each form must have a beginning and ending tag. Please note:
Forms may not be nested, however each HTML document may have multiple forms in it. The
following is an example of a Beginning and ending Form:

<form method=post action="http://www.2kweb.net/cgi-bin/formmail.cgi">


</form>

The METHOD Parameter determines how the data will be sent to the cgi program that will process the
form. The possible methods are GET, or POST. For several reasons, the POST method is more
efficient and has less problems than the GET method. For complete information on the differences,
visit your local book store for the book titled "Teach Yourself CGI Programming with PERL in a week"
written by Eric Herrmann.

The ACTION parameter is used to give the URL of the CGI program that will process the form. All
forms must be processed by a CGI program. In the example given, the Enetrics Communications CGI
Program named formmail.cgi will be used to process all the entries that are typed into the form by the
Web Surfer. This program can be used to forward the form entries to your e-mail address.

Every form must be ended. the </form> tag tells the browser where the form ends.

Text Entry Fields

Text Entry Fields allow the User to enter non formatted, and/or non validated text. For instance, if you
we're doing a survey, and you wanted to give the Web Surfer the option of entering his or her name,
you could use a text entry field. The following example shows the coding of a text entry field within the
Form.

<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">


<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</form>

The Tag is the Input Tag. The TYPE parameter identifies the type of input field. In our case the Type
is "text" to identify a text entry field.

Other values for the TYPE parameter are "hidden" which tells the browser the field is not to be
displayed, and the Web Surfer cannot enter any data into the field. This becomes handy for fields that
must be provided to the CGI program in order for the CGI program to successfully process the data
entered in the form.

Another input TYPE is the "password" type, which tells the browser to echo each entry in the field with
the Asterisk (i.e*******).

The NAME parameter provides a field name that will be associated with the value is entered. This is
important for the CGI (Common Gateway Interface) program to processes the data sent to it. In the
case of the formmail.cgi program, the NAME will be used in the e-mail that is sent to your e-mail
address.

The SIZE parameter tells the browser how large to make the Field. This is pretty self-explanatory.

The MAXLENGTH parameter tells the browser how many characters maximum is allow to be entered
in the field.. You may have a SIZE of 20, and a MAXLENGTH of 40. In this situation, the form field
accepts more data than can be displayed in the field. The fields will simply scroll as the Web Surfer
types until the MAXLENGTH value is reached.

Text Area Fields

A Text Area Entry field allows multiple lines of entry to be entered by the Web Surfer. Typical uses are
to provide comments the Web surfer can enter. The data will be sent back to the CGI program as one
field identified by the NAME parameter. The ROWS and COLS fields are fairly self-explanatory. Take
a look at the modified Form source as shown below:
<p ALIGN=Center>
<center>
<h1>Example of Form with Text Area Field</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" 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 Country do you Live in?
<select NAME="Country">
<option VALUE="USA">United States
<option VALUE="CA">Canada
</select>
</p>
<p>What Type of Computer do you have?
<input TYPE="radio" NAME="Computer-Type" VALUE="Pentium"
checked>Pentium
<input TYPE="radio" NAME="Computer-Type" VALUE="486DX">486 DX
<input TYPE="radio" NAME="Computer-Type" VALUE="486SX">486 SX
</p>
<p>Comments: <br>
<textarea NAME="comments" ROWS="10" COLS="70" wrap="virtual">
This is text that can be defaulted into the text area field
</textarea>
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>

Notice the "wrap" attribute defined in the <textarea> tag. This attribute sets automatic word wrapping
when text is entered into the text area field. If you do not want word wrapping to occur, simply omit
the "wrap" attribute.
Check Boxes

Checkboxes allow the web user to click on a box to toggle a value to either yes or no. Take a look at
the following example:

<p ALIGN=Center>
<center>
<h1>Example of Form with Checkbox</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" 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>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>

The checked value at the end of the input tag identifies that value should be defaulted to a checked
state. By omitting the checked value, the checkbox will not be checked. The reset button will re-
initialize this value to a checked or non-checked state, depending upon the parameter identified in the
tag.
Radio Buttons

Radio Buttons provide a mutually exclusive selection value. Only one button may be pressed.
Pressing an alternate button in a Radio Button group will automatically remove the previous selection.
To identify a group of radio buttons, all the radio buttons must be next to each other, and have the
same value identified in the NAME parameter. Take a look at the following code modifications for the
Form.

<p ALIGN=Center>
<center>
<h1>Example of Form with Radio Buttons</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" 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 Country do you Live in?
<select NAME="Country">
<option VALUE="USA">United States
<option VALUE="CA">Canada
</select>
</p>
<p>What Type of Computer do you have?
<input TYPE="radio" NAME="Computer-Type" VALUE="Pentium"
checked>Pentium
<input TYPE="radio" NAME="Computer-Type" VALUE="486DX">486 DX
<input TYPE="radio" NAME="Computer-Type" VALUE="486SX">486 SX
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>

The Checked value identified at the end of the first radio button identifies the radio button is to be
checked as a default. The absence of any checked value will indicate no radio buttons will be
defaulted!

Combo Boxes

Combo Boxes provide an efficient way for the Web Surfer to choose a value from a list of valid values.
This is similar to Radio Buttons, except it is designed for larger lists. Take a look at the following form
modifications to show the addition of a combo box to allow the Web Surfer to identify the country they
live in.

<p ALIGN=Center>
<center>
<h1>Example of Form with a Combo Box</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" 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 Country do you Live in?
<select NAME="Country">
<option VALUE="USA">United States
<option VALUE="CA">Canada
</select>
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>

Submit and reset buttons

If a Form has only one text entry field, a submit button is not required, simply pressing the enter key
will submit the form to the Program identified in the beginning Form tag. However, if there are more
fields, a Submit Button is required. The following example shows the addition of a Submit and Reset
button.

<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">


<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</form>

The Submit and Reset buttons are also coded with the input tag. The TYPE parameter identifies the
field to be a button.

The value of "submit" tells the browser, when the button is pressed, send the form to the Web server
for processing by the CGI program.

The value of "reset" tells the browser, when the button is pressed, reset the form to the default values.
The default values can be either blank, or in some situations identifying a box to be checked, or a
radio button to be selected. The VALUE parameter identifies the text that will appear on the button.

At this point, we have a full blown Form with 2 text entry fields. One for Name, and one for the
password. Remember, the third field, "recipient" is a hidden field. To see what this tag would look like,
press here.

Of course the Form isn't formatted very well. This brings me to the next point. You can embed other
HTML tags inside the Form itself. The following is the modified Form code to make it formatted a little
bit more like a form should be:

<p ALIGN=Center>
<center>
<h1>Example of Form with 2 Text fields</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>
Email the contents of the form

itself to receive the values that were entered into the form, and then prepare and e-mail and send the
e-mail to you.

Most Web Hosting Providers do not provide you with this ability. If yours does, Great. If not, we do
offer CGI programs that run on the server to e-mail the contents of your form.

Our Standard Servers support CGI scripting, as well as other features needed for a complete
webhosting presence. If your provider does not have CGI abilities for your web site, take a look at our
account plans under the "Web Site Hosting" Category to the left. Simply open a web hosting account
plan, and upload your site, and prepare your form.

Special Characters

Special characters are those characters that can be inserted using a HTML code for which you cannot
enter them via the keyboard or because of conflicting codes that are used in HTML. For instance, the
less than sign is used in HTML to open every HTML tag. So to keep browsers from being confused
when it encounters an less than sign (i.e. <) the code used in HTML to represent a less than sign on
the web page would be &lt; instead of <.

Character HTML Code

" &quot;

& &amp;

< &lt;

> &gt;

&nbsp;

¡ &iexcl;
¢ &cent;

£ &pound;

¤ &curren;

¥ &yen;

¦ &brvbar;

§ &sect;

¨ &uml;

© &copy;

ª &ordf;

« &laquo;

¬ &not;

&shy;

® &reg;

¯ &macr;

° &deg;

± &plusmn;

² &sup2;

³ &sup3;

´ &acute;

µ &micro;

¶ &para;

· &middot;

¸ &cedil;

¹ &sup1;

º &ordm;

» &raquo;
¼ &frac14;

½ &frac12;

¾ &frac34;

¿ &iquest;

À &Agrave;

Á &Aacute;

 &Acirc;

à &Atilde;

Ä &Auml;

Å &Aring;

Æ &AElig;

Ç &Ccedil;

È &Egrave;

É &Eacute;

Ê &Ecirc;

Ë &Euml;

Ì &Igrave;

Í &Iacute;

Î &Icirc;

Ï &Iuml;

Ð &ETH;

Ñ &Ntilde;

Ò &Ograve;

Ó &Oacute;

Ô &Ocirc;

Õ &Otilde;

Ö &Ouml;
× &times;

Ø &Oslash;

Ù &Ugrave;

Ú &Uacute;

Û &Ucirc;

Ü &Uuml;

Ý &Yacute;

Þ &THORN;

ß &szlig;

à &agrave;

á &aacute;

â &acirc;

ã &atilde;

ä &auml;

å &aring;

æ &aelig;

ç &ccedil;

è &egrave;

é &eacute;

ê &ecirc;

ë &euml;

ì &igrave;

í &iacute;

î &icirc;

ï &iuml;

ð &eth;

ñ &ntilde;
ò &ograve;

ó &oacute;

ô &ocirc;

õ &otilde;

ö &ouml;

÷ &divide;

ø &oslash;

ù &ugrave;

ú &uacute;

û &ucirc;

ü &uuml;

ý &yacute;

þ &thorn;

ÿ &yuml;

You might also like