MS-POWERPOINT

Ms- Power point is one of the best popular slide

presentation applications. It is also family member of office
program. It is developed by Microsoft Corporation in U.S.A.
With the help of this program, we can create or design any
types of slide and set custom animation, slide transition, sounds
effects and presentation show. It is specially used for
presenting any types of project works of any official.

-Extension file name:- .ppt (power point)

HOW TO LOAD OR START MS-POWER POINT

Steps:-
1. click on start button.
2. click on program
3. click on Microsoft power point.
4. then, you will enter the ms-power point program window.
Or
1. click on start button.
2. click on run.
3. then, type (powerpnt) in the open text box.
4. Finally , click on ok button.

How to set custom animation in the created object or text

Steps:-
1. At first make or create any types of objects or write any
text in the slide.
2. then, select the required object or text.
3. click on slide show menu.
4. click on custom animation.
 5. then, custom animation dialog box will appear.
6. click on add effects button.
7. then, choose any one animation effects from the dialog
box.
8. if you like any animation you can set otherwise you can
change.

TO VIEW SHOW
This command is used to view or display the full page style
your created and animated slide.
Steps:-
1. at first prepared your slide.
2. click on slide show menu.
3. click on view show or press (F5) key.
4. after finish viewing your slide, click anywhere inside the
slide to return back from view show.
TO INSERT NEW BLANK SLIDE
Steps:-
1. Click on insert menu.
2. Click on new slide.
3. Then, new slide layout dialog box will appear.
4. Then, choose any one layout style.
5. Then, click on ok button.

TO SET SLIDE TRANSITION

This command is used to set slide transition in the created
slides, which is automatically appearing after one slide to
another slide.
Steps:-
1. at first select the any required slide.
2. click on slide show menu.
 3. click on slide transition.
4. then, slide transition dialog box will appear.
5. then, put the right tick mark on the “Automatically after”
option.
6. then, remove the right tick mark on the “on mouse click”
option.
7. then, click on apply all slide button.

SETTING BACKGROUND
Steps:-
1. click on format menu.
2. click on background option.
3. background dialog box will appear.
4. click on drop-down arrow button.
5. then, choose any one standard color.
6. Finally, click on Apply or Apply to all button.

PRESENTING THE SLIDE CONTINUOUSLY

Steps:-
1. click on slide show menu.
2. click on setup show.
3. then, setup show dialog box will appear.
4. then, put the right tick mark on the “loop continuously
until ‘esc’ ”
5. finally, click on ok button.

SLIDE DESIGN/ DESIGN TEMPLATES

This command is used to apply pre-ready-made slide format in
the created slides as your requirements.
Steps:-
1. click on format menu.
2. click on slide design.
3. then, slide design dialog box will appear, with various
style.
4. then, choose any one style from the box

SLIDE LAYOUT
This command is used to re-apply any types of slide style in the
already existed slides.
Steps:-
1. select the any slide.
2. click on format menu.
3. click on slide layout.
4. then, slide layout dialog box will appear, with various
style.
5. then, choose any one slide layout style.

COLOR SCHEME
This command is used applying any types of color style in the
created slides.
Steps:-
1. select the any slide.
2. click on format menu.
3. click on slide design.
4. slide design dialog box will appear.
5. choose the color scheme.
6. then, choose the any one color style.
7. finally, click on ok button.
DUPLICATE SLIDE
Steps:-
1. select the any slide.
2. click on insert menu.
3. click on duplicate.
TO DELETE SLIDE
Steps:-
1. at first select the required slide.
2. then press delete key.
ACTION BUTTON
This command is used to adding or different types of action
button for linking another slides or programs and documents
as your desired.
Steps:-
1. click on slide show menu.
2. click on action button.
3. then, choose any one action button style.
4. then, drag the mouse button to draw the required button
in the slide.
5. then, show a dialog box.
6. then, choose any one program or documents by using
browse button.
7. finally, click on ok button.
SLIDE NUMBER
This command is used to give slide numbers in the created
slides.
Steps:-
1. select the slide.
2. click on insert menu.
3. click on slide number.
4. then, slide number dialog box will appear.
5. then, place the right tick mark on the slide number option.
 6. finally, click on ok button.
SLIDE SORTER VIEW
This command is used to view all inserted or created slides in
full page. By using this view you can do any types of works as
like, inserting new slide, delete, move, copy and paste,
duplicating as your requirements.
Steps:-
1. click on view menu.
2. click on slide sorter view.
3. then, slide sorter view dialog box will appear with all
slides.
4. then, you can do as your requirements.
5. double click on the any one slide to return back from slide
sorter view.
MS-POWER POINT FINISHED

HTML (HyperText Markup Language)

Introduction to HTML:
Hypertext Markup Language (HTML) is a system of code that you use to create interactive, online pages.
You’re probably familiar with the most common HTML application like www pages.

HTML is a document-layout and hyperlink-specification language. It defines the syntax and

placement of special, embedded directions that aren’t displayed by the browser, but tell it how to display
the contents of the document, including text, images, and other support media. The language document
also tells you how to make a document interactive through special hypertext links, which connect your
document with other documents-on either your computer or someone else’s, as well as with other Internet
resources, like FTP.

Definition:
Hypertext Markup Language is a system of codes that identify parts and characteristics
of documents. HTML documents are plain text files that contain no images, no sounds,
no videos, and no animations; however they can include “pointers” or link to these file
types, which is how Web Pages end up looking as if they contain non-text elements. Or
an equivalent definition can be given as:

HTML documents are plain-text (also known as ASCII) files that can be created using any
text editor. You can also use word-processing software if you remember to save your
document as “text only with line breaks”

As you can see, HTML documents look nothing like the Web Pages you have likely seen
before.
<HTML>
<HEAD>

<BODY>
….
</BODY>
</HTML>

HTML is made up of tags and attributes that work together to identify document parts
and tell browsers how to display them.

Understanding tags and attributes:

Tags:
Html tags actually serve to purpose:
i) Firstly, they identity logical document parts-that is, the major structural
components in documents such as headings (<h1> for example) numbered lists
(<OL>, for ordered list) and paragraphs (That is, <P>)
ii) Secondly, tags in html documents are reference other elements – that is, tags can
include pointers and links to other documents, images, sound files, video files,
multimedia applications, animation and so on. As for an example,

<IMG SRC = “logo.gif”>

Remember:
1) All tags are composed of elements that are contained within angle brackets (< >).
The angle brackets simply tell browser that the text between them is an html
commands. Some sample tags look like these:
  <H2> (for heading level 2)
 <BODY> (for document body)
 <B> (for bold)
2) Most tags are paired with an opening tag (for example, <h1> and a closing tag
</h1>).
E.g.
<H1>information that the tags apply to</H1>

Attributes:
Some tags work in conjuction with attributes, which provide additional command or
information about an element, such as how element should align? What other files
should be accessed? Or even the color of an element.
e.g.
<H1 align = “center”> a centered heading goes here</H1>
NOTE: When in doubt, use quotes with attributes, although they aren’t always necessary,
they never hurt.

We can use multiple attributes in a tag by using one space between each attribute, like
this:
<H1 align= “center” size = “+2” color = “#ffoooo”> a widely formatted heading goes
here</H1>

What can you do with HTML?

You’re likely most familiar with HTML as it’s used to create Web Pages; however, HTML
has expanded to include many other uses:
1) To create Web Pages: We Pages can be constructed in HTML.
2) Developing intranet or extranet sites: HTML is commonly used to develop
intranet and extranet sites, which are company-wide Web sites that are accessed by
people within the company from one or more locations.
3) Developing help files: HTML is also used to develop online help files, allowing
developers to inexpensively produce documentation that is accessible on any
platform.
4) Developing KIOSK applications: Finally, html can also be used to create kiosk
application those stand-alone computers with the neat touch-screen capabilities.

What tools do you need for html?

For your first documents, you need only two basic tools:
An HTML editor, to create and save HTML documents
A Web Browser, to view and test your html documents.

A) HTML Editor:
Many WYSIWYG (What you see is what you get) editors are also available (e.g. Dream
weaver, FrontPage, Claris Home Page or Adobe Page Mill, both for Windows and
Macintosh). You may wish to try one of them after you learn some of the basics of HTML
tagging. WYSIWYG editors let you design your HTML document visually, as if you were
using a word processor, instead of writing the markup tags in a plain-text file and
imagining what the results would be. But it is always useful to know basic HTML tags to
code a document even if you are using a WYSIWYG editor, in case you want to add HTML
features that your editor doesn’t support.

B) Web Browser:
HTML documents are interpreted and displayed by web browsers. Various web browsers
are Netscape Navigator and Microsoft Internet Explorer. These are also referred as “The
Big Two Most of the browsers in use are graphical browsers: they can display elements
other than text. A text-only browser can display only text.

C) Other Resources:
The World Wide Web Consortium site, as well as several products specific Web Sites will
help you learn, use and keep up with changes in HTML.

(1)Visit the W3C:

The World Wide Web consortium (W3C) was founded in 1994 at the Massachusetts
institute of Technology (MIT) to over see the development of web standards, including
the HTML standards. The consortium defines and publishes HTML standards, the tag
and attributes within HTML documents. So, an excellent way to monitor HTML
changes is to visit the W3C site:
Visit: www.w3c.org/
Here, you’ll find new releases of HTML standards proposed standards and other
developments in Web-related specifications, such as the Cascading Style Sheets
(CSS) and eXtensible markup language (XML) specifications.

(2)Monitor Netscape and Microsoft sites:

At the time of writing about 50% of Net surfers used Netscape Navigator, about 40%
used Internet Explorer, and the remaining 10% used a variety of other browsers.
Realistically, about 80 to 90% of all Web users can access that majority of sites
incorporating the latest HTML tags and recent enhancements.
Find Netscape extensions at: developper.netscape.com/index.html
Find Microsoft extensions at: www.microsoft.com/windows/i.e/

(3)Monitor other sites:

Although definitive information comes from W3C, Microsoft and Netscape sites, you
can reference other reliable resources too.
Organization URL (Uniform Resource Locator)
Web Design Group http://www.htmlhelp.com/
Web Developer’s virtual Library http://www.stars.com/
HTML Writers Guide http://www.hwg.org/
CNet’s Builder.com http://www.builder.com/

Applying structure tags:

Structure tags provide browsers with information about document characteristics. E.g. structure tags
identify the versions of html used, provide introductory information about the document, and include the
title, among other similar things. Most structure tags, although part of the HTML document, do not appear
in the browser windows. Instead, structure tags work “behind the scenes” and essentially tell the browser
which elements to include and how to display them. Although these tags do not produce the snazzy results
you see in Web Pages or help files, they are essential for telling browsers hoe to interpret the document.

NOTE: Most browsers, including Netscape Navigator and Microsoft Internet Explorer,
correctly display documents that do not include structure tags. However, there is no
guarantee that future versions will continue to do so or that your results will be
consistent.

All HTML documents should include five structure tags that work “behind the scenes”
and essentially tell the browser which elements is include and how to display them.
A) <!DOCTYPE HTML PUBLIC “-//W3C//DTDHTML 4.0 TRANSITIONAL//EN”>
B) <HTML>
C) <HEAD>
D) <TITLE>COMPUTER POINT NEPAL</TITLE>
 </HEAD>
E) <BODY>BODY OF THE HTML DOCUMENT.
</BODY>
</HTML>

A) The <!DOCTYPE…> tag:

This non-paired tag tells browsers (and validation services) the html versions with which the document
complies.
The html 3.2 and 4 specification require this tag follows:
<!DOCTYPE HTMLPUBLIC “-//W3C//DTD HTML 3.2 FINAL//EN”>
or like this:
<!DOCTYPE HTMLPUBLIC “-//W3C//DTD HTML 3.2 TRANSITIONAL//EN”>

a) Strict:
<!DOCTYPE HTMLPUBLIC “-//W3C//DTDHTML 4.0//EN”>
The strict version prohibits everything except “pure” HTML, and you’re unlikely to use it
unless you’re writing HTML documents that use no formatting tag and are relying on
Style Sheets to make them look good. To indicate that your document complies with the
strict specification, use:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>

b) Transitional (loose):
<!DOCTYPE HTML PUBLIC “-//W3C//DTDHTML 4.0 TRANSITIONAL//EN”>
The transitional version is the most flexible for accommodating deprecated but still
useful tags the attributes, including all formatting tags. To indicate that your document
complies with the transitional specification, use:
<!DOCTYPE HTML PUBLIC “-//W3C//DTDHTML 4.0 Transitional//EN”>

c) Frameset:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>
The frameset specification is similar to the transitional specification, but also supports
the tags needed to use frames. To indicate that your document compiles with the frames
specification, use:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

Different Versions of HTML:

1) The html 2 standard is:
<!Doctype html public “-//w3c//dtd html 2 final//en”>
2) The html 3.2 standard is:
<!Doctype html public “-//w3c//dtd/html 3.2 final//en”>
3) The html 4.0 standard is:
a+b+c

B) The <HTML> tag:

This element tells your browser that the file contains HTML coded information. The file
extension .html or .htm also indicaates this HTML document and must be used. This
tag identifies the document as an HTML document. Technically, this tag is superfluous
after the <! DOCTYPE…> tag, but it is necessary only for older browser that do not
support the <! Doctype…> tag. Moreover, this tag in HTML editor is paired like this :

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.0 Transitional//EN”>

<HTML>
 …
…
</HTML>

C) The <HEAD>tag:
The head element identifies the first part of your HTML-coded document that contains
the title. The title is shown as part of your browser’s window.

<HEAD> Enter Heading </HEAD>

This tag contains information about the document, including its title, scripts used,
style definitions, and document descriptions. Place it in html editor as:

<!DOCTYPE..>
<HTML>
…
…
</HEAD>
</HTML>

D) The <TITLE> tag:

The <TITLE> tag, required only for html 3.2 and 4 specifications, contains the
document title. The title does not appear within the browser window, although it is
usually visible in the browser’s title bar. Between the opening and the closing tags,
include a title that briefly summarizes your document’s content. To use the <TITLE>
tag, enter it between the opening and closing <HEAD> tags, like this:

<! DOCTYPE HTML PUBLIC “-//W3C//DTDHTML 4.0 TANSITIONAL//EN”>

<HTML>
<HEAD>
<TITLE>
Title that Summarizes the Document’s content
</TITLE>
…
…
</HEAD>
</HTML>

The title element contains your document title and identifies its content in a global
context. The title is typically displayed in the title bar at the top of the browser
window, but not inside the window itself. The title is also what is displayed on
someone’s holiest or bookmark lists so choose something descriptive, unique, and
relatively short. A title is also used identify your page for search engines.

<TITLE> Enter title </TITLE> this is the tag used to enter the titles in the pages.

Title should represent the document, ever if the document is taken out of context.
Some good titles include the following:

Sample HTML Code

Learning to Ride a Bicycle
Television Viewing for Fun and Profit.
 Less useful titles, particularly taken out of context, include the following:

Examples
Chapter 2
Continued

E) The <BODY> tag:

The <BODY> tag encloses all the tags, attributes, and informatin that we want a
visitor’s browser to display. Almost everything in this note takes place between the
<BODY> tags. To use the <BODY> tag, enter it below the closing </HEAD> tag and
above the closing </HTML> tag, like this:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>
<HEAD>
<TITLE>
Title That Summarizes the Document’s Content
</TITLE>
<HEAD>
<BODY> All the tags, attributes and information in the document body go here
</BODY>
</HTML>
The second and largest part of your HTML document is the body, which contains the
content of your document (displayed within the text area of your browser window). The
tags explained below are used within the body or your HTML document.
<BODY>your body text </BODY>
If you’ve been following along, save your document, view it in a browser to conform that
you’re on the right track. The title appears in the title bar, and some text appears in the
document window.

Remember: The HTML 4 specification does not require all structure tags. In fact, only
two: the <!DOCTYPE…> tag and the <TITLE> tag. If you choose to use only two tags,
the code would look like this;
<!DCOTYPE HTML PUBLIC “-//W3C//DTDHTML 4.0 Transitional//EN”>

<TITLE> the name of a minimal and content free document </TITLE>

Applying Common Tags and Attributes:

After you include the structure tags, you’re ready to start placing basic content in the
document body. The elements viz. headings, paragraphs, lists, and rules (horizontal
lines) constitute the basic HTML document components and, unlike the structure tags, do
appear in the browser window.

Creating Paragraphs
One of the most common tags you’ll use is the paragraph tag, <P>, which is appropriate
for regular body text. The paragraph tag absolutely does not have to be paired-you can
simply use the opening tag, <P>, where you want to start a paragraph. As with many
tags, however, it’s easier to identify where the tag begins and ends if you use both
opening and closing tags.
To use the paragraph tags, enter them around the text you want to format as a
paragraph like this:
<P>
A whole paragraph goes right here.
</P>
You can also apply other paragraph formats instead of the <P> tag to achieve some
slightly different formats. Alignment attributes are often used with these paragraph
formatting tags, including ALIGN = LEFT, ALIGN = CENTER, ALIGN = RIGHT. To apply
these attributes, include them in any of the opening paragraph tags, like this:
<P ALIGN = CENTER>
Paragraph of information goes here.
</P>

Other paragraph formatting tags:

Paragraph Format Effect
<ADDRESS> Used for address and contact information. Often appears in Italics.
<BLOCKQUOTE> Used for formatting a autation. Usually appears indented
from both sides and with less space between lines than
does a regular paragraph.
<PRE> Effective for formatting program code or similar
information. Usually appears in a fixed-width font with
ample space between words and lines.

Unlike documents in most word processors, carriage returns in HTML files aren’t significant. In fact, any
amount of white space – including spaces, linefeeds, and document is displayed in a browser. So you don’t
have to worry about how long your lines of text are. Word wrapping can occur at any Point in your source
file with affecting how the page will be displayed.

In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as
<P>
Welcome to the world of HTML
This is the first paragraph.
While short, it is still a paragraph!
</P>

In the source file there is a line break between the sentences. A Web browser ignores this line break and
starts a new paragraph only when it encounters another <P> tag.
Important

You must indicate paragraphs with <P> elements. A browser ignores any indications or blank lines in the
source text. Without <P> elements, the document becomes one large paragraph. (One exception is text
tagged as “preformatted,” which is explained below.) For example, the following would produce identical
output as the first bare-bones HTML example:
<H1> Level-one heading </H1>
<P>
Welcome to the world of HTML. This is the
First Paragraph. While short it is still a Paragraph!
</P>
<P>
And this is the second paragraph.
</P>
To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps
identify the start of a new section, and separate paragraphs with blank lines (in addition to the <P> tags).
These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces
because it has its own set of rules on spacing that do not depend on the spaces you put in your source
file).
Applying Bold Italic and Other Emphases:
In additional to creating paragraphs, headings, and lists, you can also apply formatting to individual letters
and word. For example, you can make a word appear italic, bold, underlined or superscript as in e2. You
see these character-level formatting tags only within paragraph-level tags-that is, you can’t put a <P> tag
within a character level tag such as <B>. You have to close the character-level formatting before you close
the paragraph-level formatting.
Correct:
<P><B> this is the end of a paragraph that also uses boldface.</B></P>
<P> this is the beginning of the following paragraph.
Incorrect:
This text <B> is boldface. </P>
<P> as is this </B></P>
Although many character-formatting tags are available, you’ll probably use <B> for boldface
and <I> for italics most often.

COMMON CHARACTER FORMATTING TAGS

Character Tag Effect
<B> Applies boldface
<BLINK> Makes text blink, usually considered highly unprofessional.
<CITE> Indicates citations or references.
<CODE> Displays program codes. Similar to the <PRE> tag.
<EM> Applies emphasis; usually displayed as italics.
<I> Applies Italics.
<S>, <STRIKE> Applies Strikethrough to text. These tags are deprecated in the HTML 4
specification.
<STRONG> Applies stronger emphasis; usually displayed as bold.
<SUB> Formats text as subscript
<SUP> Formats text as superscript
<TT> Applies a fixed with font
<U> Applies underline. This tag is deprecated as in the HTML 4 specification.
<VAR> Displays variables or arguments.
To use these tags, enter them around the individual letters or words you want to emphasize like this:

Making some text <B>bold</B> or <I>italic</I> is a useful technique, more so than <STRIKE>strike
through</STRIKE> or <BLINK>blinking</BLINK>.

Including Horizontal Rules:

Horizontal rules are the lines that break up long section of text, indicate a shift in information, for help
improve the overall document design. To use a horizontal rule, include the <HR> tag where you want the
rule to appear, like this:
<P>long passage of text often be broken into sections with headings and optionally, horizontal
rules. </P>
<HR>
<H3>A heading also Break up text</H3>
<P>a new long passage can continue here</P>

By default, horizontal rules appear shaded; span the width of the browser window, and are a few pixels
high. You can change rule’s shading, width, height and alignment by including the appropriate attributes.

Remember:
Pixels are the little dots on your screen that, taken together, produce an image. Pixel is actually an
abbreviation for picture element. If your display is set to 800×600, you have 800 pixels horizontally and
600 pixels vertically.

HORIZONTAL RULE ATTRIBUTES

Rule Attribute Effect
SIZE = n Specifies rule height; measured in pixels.
WIDTH = n Specifies rule width (length); measured in pixels.
WIDTH = “n%” Specifies rule width (length); measured as a percentage of the document
width.
ALIGN = LEFT Specifies left alignment
ALIGN = CENTER Specifies center alignment
ALIGN = RIGHT Specifies right alignment
NOSHADE Specifies that the rule has no shading.
To use any of these attributes, include them in the <HR> tag, like this:
<HR WIDTH = “80%” SIZE = 8>
<HR WIDTH = “50%”>
<HR WIDTH = 400 ALIGN=RIGHT>
<HR NOSHADE ALIGN = CENTER WIDTH = 200>
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule
is useful to separate major sections of your document.
You can vary a rule’s size (thickness) and width (the percentage of the window covered by
the rule). Experiment with the settings until you are satisfied the presentation. For example:
<HR SIZE = 4 WIDTH = “50%”>
Displays as:

Specifying Line Breaks:

Sometimes you need to break line in a specific place, but you don’t want to start a new paragraph (with
extra space). For example, you might not want lines of poetry text to go all the way across the document;
instead, you might to break them into several shorter lines. You can easily break paragraph lines by
inserting the <BR> tag where you want the lines to break, like this:
<P>
There once was an HTML writer, <BR>
Who tried to make paragraph wider. <BR>
He found with a shock <BR>
All the tags did mock<BR>
The attempt to move that the text outsider. <BR>
Mercifully Anonymous
</P>

Including Fancier Formatting:

Although most newer browsers support these effects, that is fancier formatting, not all browsers do; your
fancier effects might not reach all visitors. Also, the HTML 4 specification deprecates many of these effects
in favor of Styles Sheets. If your visitors use Style Sheet-Capable browsers, you might consider using Style
Sheets instead of the tags and attributes mentioned here.

Adding Colors:
One of the easiest ways to jazz up your documents is to add colors to the background or text. You can
enliven another wise dull Web page with a splash of color or an entire color scheme. For example, add a
background color and change the text colors to coordinate with the background. Or highlight a word or two
with color and make the words leap off the page. Or, if you’re developing a corporate site, adhere to the
company’s color scheme to ensure a consistent look.

Recommended RGB Values

R G B
00 00 00
33 33 33
66 66 66
99 99 99
cc cc cc
FF FF FF
To create an RGB number from the values in this table, simply select one number from each column. For
example, choose FF from the Red column, 00 from the green column, and 00 from the Blue column to
create the RGB number FF0000, which has the largest possible red component but no blue and green,
therefore appearing a pure bright red.

Setting Background Colors:

Using a background color, which is simply a color that fills the entire browser window, is a great way to add
flair to your Web pages. By default, browsers display white or grays backgrounds color, which many be
adequate if you’re developing pages for an intranet site where flashy elements aren’t essential. If you’re
developing a public or visually appealing. For example, if you’re developing a public corporate Web site,
you might want to use your company’s standard colors- ones that appear on letter logos, or marketing
materials. Or, you might want to use your favorite color if you are developing a personal site. In either
case, using a background color can improve overall page appearance and help develop a theme among
pages.

As you’ll see in the next section; pay careful attention to how text contrasts with the background color. If
you specify a dark background color, use a light text color. Likewise, if you specify a light background
color, use a dark text color. Contrast is key for ensuing that visitors can read information on you pages.

To specify a background color for your documents, include the BGCOLOR= “#…” attribute in the <BODY>
tag, like this:
<BODY BGCOLOR = “#FFFFFF”>

Setting Text Colors:

Like background colors, text colors can enhance your Web pages. In particular, you can specify the color of
the following:
 Body text, which appears throughout the document body.
 Unvisited links, which are links not yet followed
 Active links, which are links as they’re being selected
 Visited links, which are links previously followed

Changing body text is sometimes essential-for example, if you’re added a background color or an image. If
you’ve added a dark background color, the default black body text color won’t adequately contrast with
the background, making the text difficult or impossible to read. In this case, you’d want to change the text
color to one that’s lighter so that it contrasts with the background sufficiently.

Changing link colors helps keep your color scheme intact-for unvisited as well as visited links. Set the
visited and unvisited links to different colors to help visitors know which links they’ve followed and which
ones they haven’t.

To change body text and link colors, simply add the attributes listed below to the opening <BODY> tag.
Attribute Description
TEXT = “….” Sets the color for all text within the document with a color name or a #RGGBB
value.
ALINK = “….” Sets the color for active links, which are the links at the time the visitor clicks
on them, with a color name or #RRGGBB value
VLINK “…” Sets the color for links the visitor has recently followed with a color name or a
#RRGGBB value (how recently depends on browser settings)
LINK “…..” Sets the color for unvisited links with a color name a #RRGGBB value.
Remember
We recommend setting all web page color at one time-that way you can see how background, text, and
link colors appear as a unit.

When setting text colors, using a “safe” color is less important for text than for background. Dithering is
less apparent in small areas, such as text.

To change text link colors, follow these steps:

1. Within the <BODY> tag, add the TEXT = attribute to set the color for text within the document.
This example makes the text black.
<BODY>TEXT = “#FFFFFF”>
2. Add the LINK = attribute to set the link color. This example uses blue (#0000FF) for the links.
<BODY>TEXT = “#FFFFFF”>
3. Add the VLINK = attribute to set the color for visited links. If you set the VLINK = to the same as
the links, links will not change colors even after visitors follow them. This could be confusing,
but also serves to make look like there is always new material available. This example sets the
visited link to a different shade of blue.
<BODY>TEXT = “#FFFFFF” LINK = “0000FF” VLINK = “000099”>
4. Finally, set the ALINK = or active link color. This is the color a link while visitors are clicking on
it and will no necessarily be visible in Internet Explorer 4, depending on visitor settings. These
example sets ALINK = to red.
<BODY TEXT = “#FFFFFF” LINK = “#0000FF” VLINK = “#000099” ALINK = “#FF0000”>

Specifying Fonts and Font Sizes:

If you visitors will be using fairly new browsers, you can use <FONT> tag to specify font characteristics for
you document including colors, size, and typeface. You can use the given tag and attributes to set
characteristics.
Tag/Attribute Description
<FONT> Sets font characteristics for text
SIZE = “…” Specifies relative font size on a scale of 1 through 7. Three (3) is the default for
normal size. You can specify the relative size by using + or -, for example, +2.
COLOR = “…” Specify font color in #RRGGBB numbers or with color names. This color applies only
to the text surrounded by the <FONT> tag.
FACE= “…” Specifies typefaces as list of possible typefaces, in order of references, separated by
commas, for example “Verdana, Arial, Helvetica.”

<BASEFONT> Sets text characteristics for the documentAs you’re determining which font face to
use, keep in mind that the font is available in your visitor’s computers for them to
view the fonts you specify. For example, if you specify Technical as the font to use
and your visitors do not have Technical, their computers will substitute a font, which
might not be a font you’d consider acceptable. As a partial way of overcoming this
problem, you can list multiple faces in order of preference; the machine displays the
first available. For example, a list of “Comic Sans Ms, Tekton, Times, Arial” will
display Comic Sans MS if available, then try Technical, Then Tekton, and so forth.

FONTS COMMONLY AVAILABLE ON PC, MAC, AND UNIX

Windows Macintosh Unix
Arial Helvetica Helvetica
Times New Roman Times Times
Courier New Courier Courier

To specify font characteristics, follow these steps. You can set some or all of the characteristics used in
this example.
1. Identify the text to format with the <FONT> tag.
<FONT> look at this!</FONT>
2. Select a specific font using the FACE = attribute.
<FONT FACE = “Verdana, Times New Roman, Times”>look at this!</FONT>
3. Change the font size using the Size = attribute. You set the size of text on a relative scale from
1 to 7, with the default size being 3. Either set the size absolutely, with a number from 1 to 7, or
relatively + or – to change the size. Almost newer browsers (and all HTML 3.2 and 4-complaint
browsers) support SIZE = to set font size. The only significant downside to setting the font size
is that you’ve your visitor might already have increased (or decreased) the default font size, so
your size change might have more of an effect than you expected.
<FONT FACE = “Verdana, Times New Roman, Times” SIZE = “+2” look at this!</FONT>
4. Add a COLOR = attribute to set the colors, using a color name or a #RRGGBB value.
<FONT FACE = “Verdana, Times New Roman, Times” SIZE = “+2” COLOR = #FF0000”> look at
this!</FONT>

Creating Headings:
Heading break up large areas of text, announce topics to follow, and arrange information according to a
logical hierarchy. HTML provides six different levels of headings; <H1> is the largest of the headings, and
<H6> is the smallest.

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically
displayed in larger and/or bolder fonts than normal body text. The first heading in each document should
be tagged <H1>.

The syntax of the heading element is:

<Hy> text of heading </Hy>
Where y is a number between 1 and 6 specifying the level of the heading.
<H1>……..</H1>
<H2>……..</H2>
<H3>…….</H3>
<H4>…….</H4>
<H5>…….</H5>
<H6>…….</H6>
Do not skip levels of headings in your document. For example, don’t start with a level-one heading <H1>
and then next use a level-three <H3> heading.

Remember:
For most documents, limit yourself to two or three levels. After three heading levels, many visitors begin to
lose track of your hierarchy. If you find that using several heading levels, consider reorganizing your
document too many heading levels often indicates a larger organizational problem.

To use heading tags, enter them around the heading text, like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<TITLE>
Title that summarizes the document’s content
</TITLE>
</HEAD>
<BODY> all the tags, attributes and information in the document body go here
<H1> first level heading </H1>
<H2> second level heading </H2>
<H3> Third level heading </H3>
</BODY>
</HTML>

In general, you should use heading tags only for document headings- that is, don’t use heading tags for
figure captions or to emphasize information within text. There are six different types of heading in
ascending order. They are follows:
1. H1
2. H2
3. H3
4. H4
5. H5
6. H6

By Default, all browsers align headings on the left. Most browsers, however support alignment attributes,
which also let you right-align and center headings.

Heading Alignment Attributes:

Heading Attributes Effect
ALIGN = LEFT Aligns the heading on the left (default)
ALIGN = CENTER Aligns the heading on the center.
ALIGN = RIGHT Aligns the heading on the right.
To use the alignment attributes, include them in the initial heading tag, like this:
<H1 ALIGN = LEFT> Left-aligned heading </H1>
<H1 ALIGN = CENTER> centered heading</H1>
<H1 ALIGN = RIGHT> Right aligned heading</H1>

Remember:
If you’re writing for a wide audience, some of whom might be using older browsers, surround the ALIGN =
CENTER attribute with <CENTER> tags to ensure that the text actually appears centered, yielding
something like this: <CENTER><H1 ALIGN = CENTER> Centered heading</H1></CENTER>

Creating Lists:
Lists are a great way to provide information in a structured, easy-to-read format. They help your visitor
easily spot information, and they draw attention to important information. A list is a good form for a
procedure. HTML supports unnumbered, numbered and definition lists. You can nest lists too, but use this
feature sparingly because too many nested items can get difficult to follow.

HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but this feature
sparingly because too many nested items can get difficult to follow.

Followings are the different types of lists:

 Ordered
  Unordered (Bulleted)
 Definition

LIST AND LIST ITEM TAGS

List Tag Effect
<OL> Specifies that the information appear as an ordered (numbered) list
<UL> Specifies that the information appear as an unordered (bulleted) list
<LI> Specifies a list item in either ordered or unordered lists.

Unordered Lists
The following steps show you how to create a bulleted list (unordered list)
Start with text you want to format as a list.
Lions
Tigers
Bears
Oh, My!
1. Insert the <UL> tags around the list text.
<UL>
Lions
Tigers
Bears
Oh, My!
</UL>
2. Type the <LI> tags for each list item
<UL>
<LI> Lions
<LI> Tigers
<LI>Bears
<LI> Oh, My!
</UL>
To change your list from unordered bulleted to ordered numbered, change the <UL> to <OL> and
</UL> to </OL>.

Another equivalent example shows like this:

To make an unnumbered, bulleted list,
1. Start with an opening list <UL> (for numbered list) tag
2. Enter the <LI> (List item) tag followed by the individual item; no closing </LI> tag is needed
3. End the entire list with a closing list </UL> tag
Below is a sample three-item list:
<UL>
<LI>apples
<LI>bannas
<LI>grapefruit
</UL>
The output is:
Apples
Bananas
Grapefruit
The <LI> items can contain paragraphs. Indicate the paragraphs with the <P> paragraph
tags.
Ordered Lists
A numbered list (also called an ordered list, from which the tag name derives) is identical to an
unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag.
The following HTML code:
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
Produces this formatted output:
1. Oranges
2. Peaches
3. Grapes
Setting List Appearance
By default, numbered list use Arabic numerals, and bulleted list use small round bullets. You can change
the appearance of these by using the attributes listed in the following table:
LIST ATTRIBUTES
List Tag Effect
For numbered list:
TYPE = A Specifies the number (or a letter) with which the list should start: A, a,
I, I or 1 (default).
TYPE = a
TYPE = I
TYPE = i
TYPE = 1
For bulleted list:
TYPE = disc Specifies the bullet shapes.
TYPE = square
TYPE = circle
To use any of these attributes, include them in the initial <OL> or <UL> tag or in the <LI> tag, like
this:
<OL TYPE = A>
<LI>Outlines use sequential lists with letters.
<LI> so some (unpopular) numbering schemes for documentation.
</OL>
Or, Like this:
<UL TYPE = square>
<LI> use bullets for non-sequential items.
<LI> use number for sequential items.
</UL>
Remember:
You can add the COMPACT attribute to initial <OL> or <UL> tags to tell browsers to display list as
compactly as possible. Generally, this setting will make little difference, as most browsers render list this
way by default.

Note: Type attributes for unordered lists are currently supported by many (but by no means all) browsers,
although, support is expected to continue to grow.

More Options for Ordered Lists:

Ordered lists have additional attributes that you can use to specify the first number in the list, as well as to
create hierarchical information.

First, you can start a numbered list with a value other than 1 (or A, a, I or i). Simply include the START =
attribute in the initial <OL> tag, as (OL START = 51>. Or, you can even change specific number within a
list by the VALUE = attribute in the <LI> tag, as in <LI VALUE =7>. To use this attributes, include them in
the <OL> tag, like this:
<OL START = 51>
<LI>this is the fifty-first item.
<LI>this is the fifty-second.
<LI TYPE = I VALUE = 7> this item was renumbered to be the seventh, using lower case
roman numerals, just because we can.
</OL>
Second, you can use nested ordered list and different TYPE = attribute to create outlines. The numbering
continues past each lower level case section without the need to manually renumber with a VALUE =
attribute.
<OL TYPE = I>
<LI>top level item
<LI> another top level item
<OL TYPE = A>
<LI>second level item
<LI>another second level item
<OL TYPE = 1>
<LI> third level item
 <LI> another third level item
</OL>
<LI>another second level item
</OL>
<LI>a top level item
</OL>

Nested Lists
List can be nested. You can also have a number of paragraphs, each containing a nested list, in single list
item.
Here is a sample-nested list:
<UL>
<LI> List of computer devices
<UL>
<LI> Keyboard
<LI> mouse
<LI>monitor
</UL>
<LI>processors
<UL>
<LI>pentium
<LI>AMD
</UL>
</UL>
The nested list is displayed as:
 List of computer devices
 Keyboard
 Mouse
 Monitor
 Processors
 Pentium
 AMD

Definition List:
Finally, one special list variant, definition list, can be useful for providing two levels of information. You can
think of definition lists as dictionary entries-you have two levels of information: the entry, followed by a
definition. You can use this list to provide glossary-type information, or you can use the to provide two-
level lists.

A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a
definition (coded as <DD>). Web browsers generally format the definition on a new line and indent it.

DEFINITION LIST AND ITEM TAGS

List Tag Effect
<DL> Specifies that the information appear as a definition list
<DT> Identifies definition term
<DD> Identifies definition

To create a definition list, follow these steps:

1. Enter the <DL> tags to start the definition list.
<DL>
</DL>
2. Add the <DT> tag to identify definition terms.
<DL>
<DT>HTML
<DT>DTD
</DL>
3. Add the <DD> tag to identify individual definition.
<DL>
<DT>HTML
<DD>Hypertext Markup Language
<DT>DTD
<DD>Data Transfer Definition
 </DL>
The output of the above list is like this:
HTML
Hypertext Markup Language
DTD
Data Transfer Definition
Another Example on a definition list is like this:
<DL>
<DT> Chip
<DD> chip, the best guide to computing. It is situated in Mumbai.
<DT> Microsoft
<DD> Microsoft, the software giant, is located at Redmond Washington
<DL>
The output looks like:
Chip
Chip, the best guide to computing. It is situated in Mumbai
Microsoft
Microsoft, the software giant, is located at Redmond Washington
The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph
tags), lists, or other information.
The COMPACT attribute can be used routinely in case your definition terms are very short. If,
for example, you are explaining some terms, the options may fit on the same line as the start of the
definition.
<DL COMPACT>
<DT>-HTTP
<DD>Hyper Text Transfer Protocol
<DT> URL
<DD> Universal Resource Locator
</DL>
The output looks like:
-HTTP
Hyper Text Transfer Protocol
-URL
Universal Resource Locator
An example on a nested list is:

Tables
Introduction to tables
The HTML table model allows you to arrange data -- text, preformatted text, images, links, forms, form
fields, other tables, etc. -- into rows and columns of cells.

Each table may have an associated caption (see the CAPTION element) that provides a short description of
the table's purpose.

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY
elements, respectively). Row groups convey additional structural information and may be rendered by
browsers in ways that emphasize this structure. Browsers may exploit the head/body/foot division to
support scrolling of body sections independently of the head and foot sections. When long tables are
printed, the head and foot information may be repeated on each page that contains table data.

You may also group columns to provide additional structural information that may be exploited by
browsers. Furthermore, you may declare column properties at the start of a table definition (via the
COLGROUP and COL elements) in a way that enables browsers to render the table incrementally rather
than having to wait for all the table data to arrive before rendering.

Table cells may either contain "header" information (see the TH element) or "data" (see the TD element).
Cells may span multiple rows and columns.

Tables should not be used purely as a means to layout document content as this may present problems
when rendering to non-visual media. Additionally, when used with graphics, these tables may force users
to scroll horizontally to view a table designed on a system with a larger display. To minimize these
problems, authors should use style sheets to control layout rather than tables.
Here's a simple table that illustrates some of the features of the HTML table model. The following table
definition:
<TABLE border="1">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
<TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>
might be rendered something like this by a graphical browser:

Elements for constructing tables

The TABLE element

Start tag: required, End tag: required

Attribute definitions
summary = text
This attribute provides a summary of the table's purpose and structure for
browsers rendering to non-visual media such as speech and Braille.
align = left|center|right
Deprecated. This attribute specifies the position of the table with respect to the
document. Permitted values:
 left: The table is to the left of the document.
 center: The table is to the center of the document.
 right: The table is to the right of the document.
width = length
This attribute specifies the desired width of the entire table and is intended for
visual browsers. When the value is a percentage value, the value is relative to the
browser's available horizontal space. In the absence of any width specification,
table width is determined by the browser.
The TABLE element contains all other elements that specify caption, rows, content, and formatting.

Table directionality
The directionality of a table is either the inherited directionality (the default is left-to-right) or that
specified by the dir attribute for the TABLE element.

For a left-to-right table, column zero is on the left side and row zero is at the top. For a right-to-left table,
column zero is on the right side and row zero is at the top.
When a browser allots extra cells to a row (see the section on calculating the number of columns in a
table), extra row cells are added to the right of the table for left-to-right tables and to the left side for right-
to-left tables.

Note that TABLE is the only element on which dir reverses the visual order of the columns; a single table
row (TR) or a group of columns (COLGROUP) cannot be independently reversed.

When set for the TABLE element, the dir attribute also affects the direction of text within table cells (since
the dir attribute is inherited by block-level elements).
To specify a right-to-left table, set the dir attribute as follows:
 <TABLE dir="RTL">
...the rest of the table...
</TABLE>
The direction of text in individual cells can be changed by setting the dir attribute in an element that
defines the cell. Please consult the section on bidirectional text for more information on text direction
issues.

Table Captions: The CAPTION element

Start tag: required, End tag: required

Attribute definitions
align = top|bottom|left|right
Deprecated. For visual browsers, this attribute specifies the position of the
caption with respect to the table. Possible values:
 top: The caption is at the top of the table. This is the default value.
 bottom: The caption is at the bottom of the table.
 left: The caption is at the left of the table.
 right: The caption is at the right of the table.

When present, the CAPTION element's text should describe the nature of the table. The CAPTION element
is only permitted immediately after the TABLE start tag. A TABLE element may only contain one CAPTION
element.

Browsers allow sighted people to quickly grasp the structure of the table from the headings as well as the
caption. A consequence of this is that captions will often be inadequate as a summary of the purpose and
structure of the table from the perspective of people relying on non-visual browsers.

Visual browsers should avoid clipping any part of the table including the caption, unless a means is
provided to access all parts, e.g., by horizontal or vertical scrolling. We recommend that the caption text
be wrapped to the same width as the table.

Row groups: the THEAD, TFOOT, and TBODY elements

THEAD and TFOOT

Start tag: required, End tag: optional

TBODY
Start tag: optional, End tag: optional

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the
THEAD, TFOOT and TBODY elements, respectively. This division enables browsers to support scrolling of
table bodies independently of the table head and foot. When long tables are printed, the table head and
foot information may be repeated on each page that contains table data.

The table head and table foot should contain information about the table's columns. The table body should
contain rows of table data.

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at
least one row, defined by the TR element.
This example illustrates the order and structure of table heads, feet, and bodies.
<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
 <TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>
TFOOT must appear before TBODY within a TABLE definition so that browsers can render the foot before
receiving all of the (potentially numerous) rows of data. The following summarizes which tags are required
and which may be omitted:
 The TBODY start tag is always required except when the table contains only one
table body and no table head or foot sections. The TBODY end tag may always be
safely omitted.
 The start tags for THEAD and TFOOT are required when the table head and foot
sections are present respectively, but the corresponding end tags may always be
safely omitted.
The table of the previous example could be shortened by removing certain end tags, as in:
<TABLE>
<THEAD>
<TR> ...header information...
<TFOOT>
<TR> ...footer information...
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TABLE>
The THEAD, TFOOT, and TBODY sections must contain the same number of columns.

Column groups: the COLGROUP and COL elements

Column groups allow authors to create structural divisions within a table. Authors may highlight this
structure through style sheets or HTML attributes (e.g., the rules attribute for the TABLE element). For an
example of the visual presentation of column groups, please consult the sample table.

A table may either contain a single implicit column group (no COLGROUP element delimits the columns) or
any number of explicit column groups (each delimited by an instance of the COLGROUP element).

The COL element allows authors to share attributes among several columns without implying any
structural grouping. The "span" of the COL element is the number of columns that will share the element's
attributes.

The COLGROUP element

Start tag: required, End tag: optional
Attribute definitions
span = number
This attribute, which must be an integer > 0, specifies the number of columns in a
column group. Values mean the following:
 In the absence of a span attribute, each COLGROUP defines a column group
containing one column.
 If the span attribute is set to N > 0, the current COLGROUP element defines
a column group containing N columns.
Browsers must ignore this attribute if the COLGROUP element contains one or more COL elements.
width = multi-length
This attribute specifies a default width for each column in the current column group. In addition to
the standard pixel, percentage, and relative values, this attribute allows the special form "0*" (zero
asterisk) which means that the width of the each column in the group should be the minimum width
necessary to hold the column's contents. This implies that a column's entire contents must be
 known before its width may be correctly computed. Authors should be aware that specifying "0*"
will prevent visual browsers from rendering a table incrementally.
This attribute is overridden for any column in the column group whose width is specified via a COL
element.
The COLGROUP element creates an explicit column group. The number of columns in the column group
may be specified in two, mutually exclusive ways:
1. The element's span attribute (default value 1) specifies the number of columns in
the group.
2. Each COL element in the COLGROUP represents one or more columns in the group.
The advantage of using the span attribute is that authors may group together information about column
widths. Thus, if a table contains forty columns, all of which have a width of 20 pixels, it is easier to write:
<COLGROUP span="40" width="20">
</COLGROUP>
than:
<COLGROUP>
<COL width="20">
<COL width="20">
...a total of forty COL elements...
</COLGROUP>
When it is necessary to single out a column (e.g., for style information, to specify width information, etc.)
within a group, authors must identify that column with a COL element. Thus, to apply special style
information to the last column of the previous table, we single it out as follows:
<COLGROUP width="20">
<COL span="39">
<COL id="format-me-specially">
</COLGROUP>
The width attribute of the COLGROUP element is inherited by all 40 columns. The first COL element refers
to the first 39 columns (doing nothing special to them) and the second one assigns an id value to the
fortieth column so that style sheets may refer to it.

The table in the following example contains two column groups. The first column group contains 10
columns and the second contains 5 columns. The default width for each column in the first column group is
50 pixels. The width of each column in the second column group will be the minimum required for that
column.
<TABLE>
<COLGROUP span="10" width="50">
<COLGROUP span="5" width="0*">
<THEAD>
<TR><TD> ...
</TABLE>

The COL element

Start tag: required, End tag: forbidden

Attribute definitions
span = number
This attribute, whose value must be an integer > 0, specifies the number of
columns "spanned" by the COL element; the COL element shares its attributes with
all the columns it spans. The default value for this attribute is 1 (i.e., the COL
element refers to a single column). If the span attribute is set to N > 1, the current
COL element shares its attributes with the next N-1 columns.
width = multi-length
This attribute specifies a default width for each column spanned by the current
COL element. It has the same meaning as the width attribute for the COLGROUP
element and overrides it.
The COL element allows authors to group together attribute specifications for table columns. The COL does
not group columns together structurally -- that is the role of the COLGROUP element. COL elements are
empty and serve only as a support for attributes. They may appear inside or outside an explicit column
group (i.e., COLGROUP element).
The width attribute for COL refers to the width of each column in the element's span.
For example, for each of the following tables, the two column calculation methods should result in three
columns. The first three tables may be rendered incrementally.
<TABLE>
<COLGROUP span="3"></COLGROUP>
<TR><TD> ...
...rows...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
<COL span="2">
</COLGROUP>
<TR><TD> ...
...rows...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
</COLGROUP>
<COLGROUP span="2">
<TR><TD> ...
...rows...
</TABLE>

<TABLE>
<TR>
<TD><TD><TD>
</TR>
</TABLE>

Calculating the width of columns

You may specify column widths in three ways:
Fixed
A fixed width specification is given in pixels (e.g., width="30"). A fixed-width
specification enables incremental rendering.
Percentage
A percentage specification (e.g., width="20%") is based on the percentage of the
horizontal space available to the table (between the current left and right margins,
including floats). Note that this space does not depend on the table itself, and thus
percentage specifications enable incremental rendering.
Proportional
Proportional specifications (e.g., width="3*") refer to portions of the horizontal
space required by a table. If the table width is given a fixed value via the width
attribute of the TABLE element, browsers may render the table incrementally even
with proportional columns.
However, if the table does not have a fixed width, browsers must receive all table data before they
can determine the horizontal space required by the table. Only then may this space be allotted to
proportional columns.

If you specify no width information for a column, a browser may not be able to incrementally format the
table since it must wait for the entire column of data to arrive in order to allot an appropriate width.

If column widths prove to be too narrow for the contents of a particular table cell, browsers may choose to
reflow the table.

The table in this example contains six columns. The first one does not belong to an explicit column group.
The next three belong to the first explicit column group and the last two belong to the second explicit
column group. This table cannot be formatted incrementally since it contains proportional column width
specifications and no value for the width attribute for the TABLE element.

Once the (visual) browser has received the table's data: the available horizontal space will be alloted by
the browser as follows: First the browser will allot 30 pixels to columns one and two. Then, the minimal
space required for the third column will be reserved. The remaining horizontal space will be divided into six
equal portions (since 2* + 1* + 3* = 6 portions). Column four (2*) will receive two of these portions,
column five (1*) will receive one, and column six (3*) will receive three.
<TABLE>
<COLGROUP>
<COL width="30">
<COLGROUP>
<COL width="30">
<COL width="0*">
<COL width="2*">
<COLGROUP align="center">
<COL width="1*">
<COL width="3*" align="char" char=":">
<THEAD>
<TR><TD> ...
...rows...
</TABLE>

In the following table, the column width specifications allow the browser to format the table incrementally:
<TABLE width="200">
<COLGROUP span="10" width="15">
<COLGROUP width="*">
<COL id="penultimate-column">
<COL id="last-column">
<THEAD>
<TR><TD> ...
...rows...
</TABLE>

The first ten columns will be 15 pixels wide each. The last two columns will each receive half of the
remaining 50 pixels. Note that the COL elements appear only so that an id value may be specified for the
last two columns.

Note. Although the width attribute on the TABLE element is not deprecated, you are encouraged to use
style sheets to specify table widths.

Table rows: The TR element

Start tag: required, End tag: optional

The TR elements acts as a container for a row of table cells. The end tag may be omitted.
This sample table contains three rows, each begun by the TR element:
<TABLE summary="This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR> ...A header row...
<TR> ...First row of data...
<TR> ...Second row of data...
...the rest of the table...
</TABLE>

Table cells: The TH and TD elements

Start tag: required, End tag: optional

Attribute definitions
headers = idrefs
 This attribute specifies the list of header cells that provide header information for
the current data cell. The value of this attribute is a space-separated list of cell
names; those cells must be named by setting their id attribute. Authors generally
use the headers attribute to help non-visual browsers render header information
about data cells (e.g., header information is spoken prior to the cell data), but the
attribute may also be used in conjunction with style sheets. See also the scope
attribute.
scope = scope-name
This attribute specifies the set of data cells for which the current header cell
provides header information. This attribute may be used in place of the headers
attribute, particularly for simple tables. When specified, this attribute must have
one of the following values:
 row: The current cell provides header information for the rest of the row that
contains it (see also the section on table directionality).
 col: The current cell provides header information for the rest of the column
that contains it.
 rowgroup: The header cell provides header information for the rest of the
row group that contains it.
 colgroup: The header cell provides header information for the rest of the
column group that contains it.
abbr = text
This attribute should be used to provide an abbreviated form of the cell's content,
and may be rendered by browsers when appropriate in place of the cell's content.
Abbreviated names should be short since browsers may render them repeatedly.
For instance, speech synthesizers may render the abbreviated headers relating to
a particular cell before rendering that cell's content.
axis = cdata
This attribute may be used to place a cell into conceptual categories that can be
considered to form axes in an n-dimensional space. Browsers may give users
access to these categories (e.g., the user may query the browser for all cells that
belong to certain categories, the browser may present a table in the form of a
table of contents, etc.). Please consult the section on categorizing cells for more
information. The value of this attribute is a comma-separated list of category
names.
rowspan = number
This attribute specifies the number of rows spanned by the current cell. The default
value of this attribute is one ("1"). The value zero ("0") means that the cell spans
all rows from the current row to the last row of the table section (THEAD, TBODY,
or TFOOT) in which the cell is defined.
colspan = number
This attribute specifies the number of columns spanned by the current cell. The
default value of this attribute is one ("1"). The value zero ("0") means that the cell
spans all columns from the current column to the last column of the column group
(COLGROUP) in which the cell is defined.
Table cells may contain two types of information: header information and data. This distinction enables
browsers to render header and data cells distinctly, even in the absence of style sheets. For example,
visual browsers may present header cell text with a bold font. Speech synthesizers may render header
information with a distinct voice inflection.

The TH element defines a cell that contains header information. Browsers have two pieces of header
information available: the contents of the TH element and the value of the abbr attribute. Browsers must
render either the contents of the cell or the value of the abbr attribute. For visual media, the latter may be
appropriate when there is insufficient space to render the full contents of the cell. For non-visual media
abbr may be used as an abbreviation for table headers when these are rendered along with the contents
of the cells to which they apply.

The headers and scope attributes also allow authors to help non-visual browsers process header
information. Please consult the section on labeling cells for non-visual browsers for information and
examples.
The TD element defines a cell that contains data.
Cells may be empty (i.e., contain no data).

For example, the following table contains four columns of data, each headed by a column description.
<TABLE summary="This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH>Name</TH>
<TH>Cups</TH>
<TH>Type of Coffee</TH>
<TH>Sugar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Espresso</TD>
<TD>No</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Decaf</TD>
<TD>Yes</TD>
</TABLE>

Cells that span several rows or columns

Cells may span several rows or columns. The number of rows or columns spanned by a cell is set by the
rowspan and colspan attributes for the TH and TD elements.
In this table definition, we specify that the cell in row four, column two should span a total of three
columns, including the current column.
<TABLE border="1">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR><TH>Name<TH>Cups<TH>Type of Coffee<TH>Sugar?
<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No
<TR><TD>J. Dinnen<TD>5<TD>Decaf<TD>Yes
<TR><TD>A. Soria<TD colspan="3"><em>Not available</em>
</TABLE>
The next example illustrates (with the help of table borders) how cell definitions that span more than one
row or column affect the definition of later cells. Consider the following table definition:
<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
As cell "2" spans the first and second rows, the definition of the second row will take it into account. Thus,
the second TD in row two actually defines the row's third cell. Visually, a graphical browser might render
this as:

Note that if the TD defining cell "6" had been omitted, an extra empty cell would have been added by the
browser to complete the row.
Similarly, in the following table definition:
 <TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
cell "4" spans two columns, so the second TD in the row actually defines the third cell ("6"):
A graphical browser might render this as:

Defining overlapping cells is an error. Browsers may vary in how they handle this error (e.g., rendering
may vary).
The following illegal example illustrates how one might create overlapping cells. In this table, cell "5" spans
two rows and cell "7" spans two columns, so there is overlap in the cell between "7" and "9":
<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>
Table formatting by Browsers
HTML 4 includes mechanisms to control:
 border styles
 horizontal and vertical alignment of cell contents
 and cell margins
Borders and rules
The following attributes affect a table's external frame and internal rules.

Attribute definitions
frame = void|above|below|hsides|lhs|rhs|vsides|box|border
This attribute specifies which sides of the frame surrounding a table will be visible.
Possible values:
 void: No sides. This is the default value.
 above: The top side only.
 below: The bottom side only.
 hsides: The top and bottom sides only.
 vsides: The right and left sides only.
 lhs: The left-hand side only.
 rhs: The right-hand side only.
 box: All four sides.
 border: All four sides.
rules = none|groups|rows|cols|all
This attribute specifies which rules will appear between cells within a table. The
rendering of rules is browser dependent. Possible values:
 none: No rules. This is the default value.
 groups: Rules will appear between row groups (see THEAD, TFOOT, and
TBODY) and column groups (see COLGROUP and COL) only.
 rows: Rules will appear between rows only.
 cols: Rules will appear between columns only.
 all: Rules will appear between all rows and columns.
border = pixels
This attributes specifies the width (in pixels only) of the frame around a table (see
the Note below for more information about this attribute).
To help distinguish the cells of a table, we can set the border attribute of the TABLE element. Consider a
previous example:
 <TABLE border="1"
summary="This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH>Name</TH>
<TH>Cups</TH>
<TH>Type of Coffee</TH>
<TH>Sugar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Espresso</TD>
<TD>No</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Decaf</TD>
<TD>Yes</TD>
</TABLE>

In the following example, the browser should show borders five pixels thick on the left-hand and right-hand
sides of the table, with rules drawn between each column.
<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>1 <TD>2 <TD>3
<TR> <TD>4 <TD>5 <TD>6
<TR> <TD>7 <TD>8 <TD>9
</TABLE>
The following settings should be observed by browsers for backwards compatibility.
 Setting border="0" implies frame="void" and, unless otherwise specified,
rules="none".
 Other values of border imply frame="border" and, unless otherwise specified,
rules="all".
 The value "border" in the start tag of the TABLE element should be interpreted as
the value of the frame attribute. It implies rules="all" and some default (non-zero)
value for the border attribute.
For example, the following definitions are equivalent:
<TABLE border="2">
<TABLE border="2" frame="border" rules="all">
as are the following:
<TABLE border>
<TABLE frame="border" rules="all">

Horizontal and vertical alignment

The following attributes may be set for different table elements (see their definitions).

Attribute definitions
align = left|center|right|justify|char
This attribute specifies the alignment of data and the justification of text in a cell.
Possible values:
 left: Left-flush data/Left-justify text. This is the default value for table data.
 center: Center data/Center-justify text. This is the default value for table
headers.
 right: Right-flush data/Right-justify text.
 justify: Double-justify text.
 char: Align text around a specific character. If a browser doesn't support
character alignment, behavior in the presence of this value is unspecified.
valign = top|middle|bottom|baseline
This attribute specifies the vertical position of data within a cell. Possible values:
 top: Cell data is flush with the top of the cell.
 middle: Cell data is centered vertically within the cell. This is the default
value.
 bottom: Cell data is flush with the bottom of the cell.
 baseline: All cells in the same row as a cell whose valign attribute has this
value should have their textual data positioned so that the first text line
occurs on a baseline common to all cells in the row. This constraint does not
apply to subsequent text lines in these cells.
char = character
This attribute specifies a single character within a text fragment to act as an axis
for alignment. The default value for this attribute is the decimal point character for
the current language as set by the lang attribute (e.g., the period (".") in English
and the comma (",") in French). Browsers are not required to support this attribute.
charoff = length
When present, this attribute specifies the offset to the first occurrence of the
alignment character on each line. If a line doesn't include the alignment character,
it should be horizontally shifted to end at the alignment position.
When charoff is used to set the offset of an alignment character, the direction of offset is
determined by the current text direction (set by the dir attribute). In left-to-right texts (the default),
offset is from the left margin. In right-to-left texts, offset is from the right margin. Browsers are not
required to support this attribute.

The table in this example aligns a row of currency values along a decimal point. We set the alignment
character to "." explicitly.
<TABLE border="1">
<COLGROUP>
<COL><COL align="char" char=".">
<THEAD>
<TR><TH>Vegetable <TH>Cost per kilo
<TBODY>
<TR><TD>Lettuce <TD>$1
<TR><TD>Silver carrots <TD>$10.50
<TR><TD>Golden turnips <TD>$100.30
</TABLE>
When the contents of a cell contain more than one instance of the alignment character specified by char
and the contents wrap, browser behavior is undefined. Authors should therefore be attentive in their use of
char.

The default alignment for cells depends on the browser. However, browsers should substitute the default
attribute for the current directionality (i.e., not just "left" in all cases).

Browsers that do not support the "justify" value of the align attribute should use the value of the inherited
directionality in its place.

Cell margins

Attribute definitions
cellspacing = length
This attribute specifies how much space the browser should leave between the left
side of the table and the left-hand side of the leftmost column, the top of the table
and the top side of the topmost row, and so on for the right and bottom of the
table. The attribute also specifies the amount of space to leave between cells.
cellpadding = length
This attribute specifies the amount of space between the border of the cell and its
contents. If the value of this attribute is a pixel length, all four margins should be
this distance from the contents. If the value of the attribute is a percentage length,
 the top and bottom margins should be equally separated from the content based
on a percentage of the available vertical space, and the left and right margins
should be equally separated from the content based on a percentage of the
available horizontal space.
These two attributes control spacing between and within cells. The following illustration explains how they
relate:

In the following example, the cellspacing attribute specifies that cells should be separated from each other
and from the table frame by twenty pixels. The cellpadding attribute specifies that the top margin of the
cell and the bottom margin of the cell will each be separated from the cell's contents by 10% of the
available vertical space (the total being 20%). Similarly, the left margin of the cell and the right margin of
the cell will each be separated from the cell's contents by 10% of the available horizontal space (the total
being 20%).
<TABLE cellspacing="20" cellpadding="20%">
<TR> <TD>Data1 <TD>Data2 <TD>Data3
</TABLE>
If a table or given column has a fixed width, cellspacing and cellpadding may demand more space than
assigned. Browsers may give these attributes precedence over the width attribute when a conflict occurs,
but are not required to.

Associating header information with data cells

 For a given data cell, the headers attribute lists which cells provide pertinent
header information. For this purpose, each header cell must be named using the id
attribute. Note that it's not always possible to make a clean division of cells into
headers or data. You should use the TD element for such cells together with the id
or scope attributes as appropriate.
 For a given header cell, the scope attribute tells the browser the data cells for
which this header provides information. Authors may choose to use this attribute
instead of headers according to which is more convenient; the two attributes fulfill
the same function. The headers attribute is generally needed when headers are
placed in irregular positions with respect to the data they apply to.
 The abbr attribute specifies an abbreviated header for header cells so that
browsers may render header information more rapidly.
In the following example, we assign header information to cells by setting the headers attribute. Each cell
in the same column refers to the same header cell (via the id attribute).
<TABLE border="1">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH id="t1">Name</TH>
<TH id="t2">Cups</TH>
<TH id="t3" abbr="Type">Type of Coffee</TH>
<TH id="t4">Sugar?</TH>
<TR>
<TD headers="t1">T. Sexton</TD>
<TD headers="t2">10</TD>
 <TD headers="t3">Espresso</TD>
<TD headers="t4">No</TD>
<TR>
<TD headers="t1">J. Dinnen</TD>
<TD headers="t2">5</TD>
<TD headers="t3">Decaf</TD>
<TD headers="t4">Yes</TD>
</TABLE>
Note how the header "Type of Coffee" is abbreviated to "Type" using the abbr attribute.
Here is the same example substituting the scope attribute for the headers attribute. Note the value "col"
for the scope attribute, meaning "all cells in the current column":
<TABLE border="1">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH scope="col">Name</TH>
<TH scope="col">Cups</TH>
<TH scope="col" abbr="Type">Type of Coffee</TH>
<TH scope="col">Sugar?</TH>
<TR>
<TD>T. Sexton</TD>
<TD>10</TD>
<TD>Espresso</TD>
<TD>No</TD>
<TR>
<TD>J. Dinnen</TD>
<TD>5</TD>
<TD>Decaf</TD>
<TD>Yes</TD>
</TABLE>
Here's a somewhat more complex example illustrating other values for the scope attribute:
<TABLE border="1" cellpadding="5" cellspacing="2">
<TR>
<TH colspan="5" scope="colgroup">Community Courses -- Bath Autumn 1997</TH>
</TR>
<TR>
<TH scope="col" abbr="Name">Course Name</TH>
<TH scope="col" abbr="Tutor">Course Tutor</TH>
<TH scope="col">Summary</TH>
<TH scope="col">Code</TH>
<TH scope="col">Fee</TH>
</TR>
<TR>
<TD scope="row">After the Civil War</TD>
<TD>Dr. John Wroughton</TD>
<TD>
The course will examine the turbulent years in England
after 1646. <EM>6 weekly meetings starting Monday 13th
October.</EM>
</TD>
<TD>H27</TD>
<TD>&pound;32</TD>
</TR>
<TR>
<TD scope="row">An Introduction to Anglo-Saxon England</TD>
<TD>Mark Cottle</TD>
<TD>
One day course introducing the early medieval
period reconstruction the Anglo-Saxons and
their society. <EM>Saturday 18th October.</EM>
</TD>
<TD>H28</TD>
<TD>&pound;18</TD>
</TR>
 <TR>
<TD scope="row">The Glory that was Greece</TD>
<TD>Valerie Lorenz</TD>
<TD>
Birthplace of democracy, philosophy, heartland of theater, home of
argument. The Romans may have done it but the Greeks did it
first. <EM>Saturday day school 25th October 1997</EM>
</TD>
<TD>H30</TD>
<TD>&pound;18</TD>
</TR>
</TABLE>
A graphical browser might render this as:

Note the use of the scope attribute with the "row" value. Although the first cell in each row contains data,
not header information, the scope attribute makes the data cell behave like a row header cell. This allows
speech synthesizers to provide the relevant course name upon request or to state it immediately before
each cell's content.

Sample table
This sample illustrates grouped rows and columns.
<TABLE border="2" frame="hsides" rules="groups">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
 <TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>
A graphical browser might render this as:

This example illustrates how COLGROUP can be used to group columns and set the default column
alignment. Similarly, TBODY is used to group rows. The frame and rules attributes tell the browser which
borders and rules to render.

Links

Introduction to links and anchors

HTML offers many of the conventional publishing idioms for rich text and structured
documents, but what separates it from most other markup languages is its features for
hypertext and interactive documents. This section introduces the link (or hyperlink, or
Web link), the basic hypertext construct. A link is a connection from one Web resource to
another. Although a simple concept, the link has been one of the primary forces driving
the success of the Web.

A link has two ends -- called anchors -- and a direction. The link starts at the "source"
anchor and points to the "destination" anchor, which may be any Web resource (e.g., an
image, a video clip, a sound bite, a program, an HTML document, an element within an
HTML document, etc.).

Visiting a linked resource

The default behavior associated with a link is the retrieval of another Web resource. This
behavior is commonly and implicitly obtained by selecting the link (e.g., by clicking,
through keyboard input, etc.).

The following HTML excerpt contains two links, one whose destination anchor is an HTML
document named "chapter2.html" and the other whose destination anchor is a GIF image
in the file "forest.gif":
<BODY>
...some text...
<P>You'll find a lot more in <A href="chapter2.html">chapter two</A>.
See also this <A href="../images/forest.gif">map of the enchanted forest.</A>
</BODY>
By activating these links (by clicking with the mouse, through keyboard input, voice
commands, etc.), users may visit these resources. Note that the href attribute in each
source anchor specifies the address of the destination anchor with a URI.
The destination anchor of a link may be an element within an HTML document. The
destination anchor must be given an anchor name and any URI addressing this anchor
must include the name as its fragment identifier.

Destination anchors in HTML documents may be specified either by the A element

(naming it with the name attribute), or by any other element (naming with the id
attribute).
Thus, for example, an author might create a table of contents whose entries link to
header elements H2, H3, etc., in the same document. Using the A element to create
destination anchors, we would write:
<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2><A name="section1">Introduction</A></H2>
...section 1...
<H2><A name="section2">Some background</A></H2>
...section 2...
<H3><A name="section2.1">On a more personal note</A></H3>
...section 2.1...
We may achieve the same effect by making the header elements themselves the
anchors:
<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...

The A element
Start tag: required, End tag: required

Attribute definitions
name = cdata
This attribute names the current anchor so that it may be the destination of
another link. The value of this attribute must be a unique anchor name. The scope
of this name is the current document. Note that this attribute shares the same
name space as the id attribute.
href = uri
This attribute specifies the location of a Web resource, thus defining a link between
the current element (the source anchor) and the destination anchor defined by this
attribute.
type = content-type
This attribute gives an advisory hint as to the content type of the content available
at the link target address. It allows browsers to opt to use a fallback mechanism
rather than fetch the content if they are advised that they will get content in a
content type they do not support.
Authors who use this attribute take responsibility to manage the risk that it may
become inconsistent with the content available at the link target address.
rel = link-types
This attribute describes the relationship from the current document to the anchor
specified by the href attribute. The value of this attribute is a space-separated list
of link types.
rev = link-types
This attribute is used to describe a reverse link from the anchor specified by the
href attribute to the current document. The value of this attribute is a space-
separated list of link types.

Each A element defines an anchor

1. The A element's content defines the position of the anchor.
2. The name attribute names the anchor so that it may be the destination of zero or
more links (see also anchors with id).
3. The href attribute makes this anchor the source anchor of exactly one link.

In the example that follows, the A element defines a link. The source anchor is the text
"W3C Web site" and the destination anchor is "http://www.w3.org/":
For more information about W3C, please consult the
<A href="http://www.w3.org/">W3C Web site</A>.

This link designates the home page of the World Wide Web Consortium. When a user
activates this link in a browser, the browser will retrieve the resource, in this case, an
HTML document.

Browsers generally render links in such a way as to make them obvious to users
(underlining, reverse video, etc.). The exact rendering depends on the browser.
Rendering may vary according to whether the user has already visited the link or not. A
possible visual rendering of the previous link might be:
For more information about W3C, please consult the W3C Web site.

Suppose we define an anchor named "anchor-one" in the file "one.html".

...text before the anchor...
<A name="anchor-one">This is the location of anchor one.</A>
...text after the anchor...
This creates an anchor around the text "This is the location of anchor one.". Usually, the
contents of A are not rendered in any special way when A defines an anchor only.
Having defined the anchor, we may link to it from the same or another document. URIs
that designate anchors contain a "#" character followed by the anchor name (the
fragment identifier). Here are some examples of such URIs:
 An absolute URI: http://www.mycompany.com/one.html#anchor-one
 A relative URI: ./one.html#anchor-one or one.html#anchor-one
 When the link is defined in the same document: #anchor-one
Thus, a link defined in the file "two.html" in the same directory as "one.html" would refer
to the anchor as follows:
...text before the link...
For more information, please consult <A href="./one.html#anchor-one"> anchor
one</A>.
...text after the link...
The A element in the following example specifies a link (with href) and creates a named
anchor (with name) simultaneously:
I just returned from vacation! Here's a
<A name="anchor-two"
href="http://www.somecompany.com/People/Ian/vacation/family.png">
photo of my family at the lake.</A>.
This example contains a link to a different type of Web resource (a PNG image).
Activating the link should cause the image resource to be retrieved from the Web (and
possibly displayed if the system has been configured to do so).

Syntax of anchor names

An anchor name is the value of either the name or id attribute when used in the context
of anchors. Anchor names must observe the following rules:
 Uniqueness: Anchor names must be unique within a document. Anchor names
that differ only in case may not appear in the same document.
 String matching: Comparisons between fragment identifiers and anchor names
must be done by exact (case-sensitive) match.
Thus, the following example is correct with respect to string matching and must be
considered a match by browsers:
<P><A href="#xxx">...</A>
...more document...
<P><A name="xxx">...</A>

Objects, Images, and Applets

Introduction to objects, images, and applets
HTML's multimedia features allow authors to include images, applets (programs that are automatically
downloaded and run on the user's machine), video clips, and other HTML documents in their pages.

For example, to include a PNG image in a document, authors may write:

<BODY>
<P>Here's a closeup of the Grand Canyon:
<OBJECT data="canyon.png" type="image/png">
This is a <EM>closeup</EM> of the Grand Canyon.
</OBJECT>
</BODY>

Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). These
elements have several limitations:
  They fail to solve the more general problem of how to include new and future
media types.
 The APPLET element only works with Java-based applets. This element is
deprecated in favor of OBJECT.
 They pose accessibility problems.
To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to
generic object inclusion. The OBJECT element allows HTML authors to specify everything required by an
object for its presentation by a browser: source code, initial values, and run-time data. In this specification,
the term "object" is used to describe the things that people want to place in HTML documents; other
commonly used terms for these things are: applets, plug-ins, media handlers, etc.

The new OBJECT element thus subsumes some of the tasks carried out by existing elements. Consider the
following chart of functionalities:
Type of inclusion Specific element Generic
element
Image IMG OBJECT
Applet APPLET (Deprecated.) OBJECT
Another HTML IFRAME OBJECT
document

The chart indicates that each type of inclusion has a specific and a general solution. The generic OBJECT
element will serve as the solution for implementing future media types.
To include images, authors may use the OBJECT element or the IMG element.
To include applets, authors should use the OBJECT element as the APPLET element is deprecated.

To include one HTML document in another, authors may use either the new IFRAME element or the OBJECT
element. In both cases, the embedded document remains independent of the main document. Visual
browsers may present the embedded document in a distinct window within the main document. Please
consult the notes on embedded documents for a comparison of OBJECT and IFRAME for document
inclusion.

Images and other included objects may have hyperlinks associated with them, both through the standard
linking mechanisms, but also via image maps. An image map specifies active geometric regions of an
included object and assigns a link to each region. When activated, these links may cause a document to be
retrieved, may run a program on the server, etc.

In the following sections, we discuss the various mechanisms available to authors for multimedia inclusions
and creating image maps for those inclusions.

Including an image: the IMG element

Start tag: required, End tag: forbidden

Attribute definitions
src = uri
This attribute specifies the location of the image resource. Examples of widely
recognized image formats include GIF, JPEG, and PNG.
longdesc = uri
This attribute specifies a link to a long description of the image. This description
should supplement the short description provided using the alt attribute. When the
image has an associated image map, this attribute should provide information
about the image map's contents.
name = cdata
This attribute names the element so that it may be referred to from style sheets or
scripts. Note. This attribute has been included for backwards compatibility.
Applications should use the id attribute to identify elements.
The IMG element embeds an image in the current document at the location of the element's definition. The
IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the
exception being for left or right-aligned images that are "floated" out of line.

In an earlier example, we defined a link to a family photo. Here, we insert the photo directly into the
current document:
<BODY>
<P>I just returned from vacation! Here's a photo of my family at the lake:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
alt="A photo of my family at the lake.">
</BODY>

This inclusion may also be achieved with the OBJECT element as follows:
<BODY>
<P>I just returned from vacation! Here's a photo of my family at the lake:
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
type="image/png">
A photo of my family at the lake.
</OBJECT>
</BODY>

The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below
for information on how to specify alternate text ). Browsers must render alternate text when they cannot
support images, they cannot support a certain image type or when they are configured not to display
images.
The following example shows how the longdesc attribute can be used to link to a richer description:
<BODY>
<P>
<IMG src="sitemap.gif"
alt="HP Labs Site Map"
longdesc="sitemap.html">
</BODY>

The alt attribute provides a short description of the image. This should be sufficient to allow users to
decide whether they want to follow the link given by the longdesc attribute to the longer description, here
"sitemap.html".
Please consult the section on the visual presentation of objects, images, and applets for information about
image size, alignment, and borders.

Generic inclusion: the OBJECT element

Start tag: required, End tag: required

Attribute definitions
classid = uri
This attribute may be used to specify the location of an object's implementation
via a URI. It may be used together with, or as an alternative to the data attribute,
depending on the type of object involved.
codebase = uri
This attribute specifies the base path used to resolve relative URIs specified by the
classid, data, and archive attributes. When absent, its default value is the base URI
of the current document.
codetype = content-type
This attribute specifies the content type of data expected when downloading the
object specified by classid. This attribute is optional but recommended when
classid is specified since it allows the browser to avoid loading information for
unsupported content types. When absent, it defaults to the value of the type
attribute.
data = uri
This attribute may be used to specify the location of the object's data, for instance
image data for objects defining images, or more generally, a serialized form of an
 object which can be used to recreate it. If given as a relative URI, it should be
interpreted relative to the codebase attribute.
type = content-type
This attribute specifies the content type for the data specified by data. This
attribute is optional but recommended when data is specified since it allows the
browser to avoid loading information for unsupported content types. If the value of
this attribute differs from the HTTP Content-Type returned by the server when the
object is retrieved, the HTTP Content-Type takes precedence.
archive = uri-list
This attribute may be used to specify a space-separated list of URIs for archives
containing resources relevant to the object, which may include the resources
specified by the classid and data attributes. Preloading archives will generally
result in reduced load times for objects. Archives specified as relative URIs should
be interpreted relative to the codebase attribute.
declare
When present, this boolean attribute makes the current OBJECT definition a
declaration only. The object must be instantiated by a subsequent OBJECT
definition referring to this declaration.
standby = text
This attribute specifies a message that a browser may render while loading the
object's implementation and data.
Most browsers have built-in mechanisms for rendering common data types such as text, GIF images,
colors, fonts, and a handful of graphic elements. To render data types they don't support natively,
browsers generally run external applications. The OBJECT element allows authors to control whether data
should be rendered externally or by some program, specified by the author, that renders the data within
the browser.

In the most general case, an author may need to specify three types of information:
 The implementation of the included object. For instance, if the included object is a
clock applet, the author must indicate the location of the applet's executable code.
 The data to be rendered. For instance, if the included object is a program that
renders font data, the author must indicate the location of that data.
 Additional values required by the object at run-time. For example, some applets
may require initial values for parameters.
The OBJECT element allows authors to specify all three types of data, but authors may not have to specify
all three at once. For example, some objects may not require data (e.g., a self-contained applet that
performs a small animation). Others may not require run-time initialization. Still others may not require
additional implementation information, i.e., the browser itself may already know how to render that type of
data (e.g., GIF images).

You can specify an object's implementation and the location of the data to be rendered via the OBJECT
element. To specify run-time values, however, authors use the PARAM element, which is discussed in the
section on object initialization.
The OBJECT element may also appear in the content of the HEAD element. Since browsers generally do not
render elements in the HEAD, authors should ensure that any OBJECT elements in the HEAD do not specify
content that may be rendered. Please consult the section on sharing frame data for an example of
including the OBJECT element in the HEAD element.

Please consult the section on form controls for information about OBJECT elements in forms.

This document does not specify the behavior of OBJECT elements that use both the classid attribute to
identify an implementation and the data attribute to specify data for that implementation. In order to
ensure portability, authors should use the PARAM element to tell implementations where to retrieve
additional data.
Rules for rendering objects
A browser must interpret an OBJECT element according to the following precedence rules:
1. The browser must first try to render the object. It should not render the element's
contents, but it must examine them in case the element contains any direct
children that are PARAM elements (see object initialization) or MAP elements (see
client-side image maps).
2. If the browser is not able to render the object for whatever reason (configured not
to, lack of resources, wrong architecture, etc.), it must try to render its contents.
Authors should not include content in OBJECT elements that appear in the HEAD element.

In the following example, we insert an analog clock applet in a document via the OBJECT element. The
applet, written in the Python language, requires no additional data or run-time values. The classid attribute
specifies the location of the applet:

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
</OBJECT>
Note that the clock will be rendered as soon as the browser interprets this OBJECT declaration. It is
possible to delay rendering of an object by first declaring the object (described below).
Authors should complete this declaration by including alternate text as the contents of OBJECT in case the
browser cannot render the clock.

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
An animated clock.
</OBJECT>
One significant consequence of the OBJECT element's design is that it offers a mechanism for specifying
alternate object renderings; each embedded OBJECT declaration may specify alternate content types. If a
browser cannot render the outermost OBJECT, it tries to render the contents, which may be another
OBJECT element, etc.

In the following example, we embed several OBJECT declarations to illustrate how alternate renderings
work. A browser will attempt to render the first OBJECT element it can, in the following order: (1) an Earth
applet written in the Python language, (2) an MPEG animation of the Earth, (3) a GIF image of the Earth,
(4) alternate text.
<P> <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
The outermost declaration specifies an applet that requires no data or initial values. The second
declaration specifies an MPEG animation and, since it does not define the location of an implementation to
handle MPEG, relies on the browser to handle the animation. We also set the type attribute so that a
browser that knows it cannot render MPEG will not bother to retrieve "TheEarth.mpeg" from the network.
The third declaration specifies the location of a GIF file and furnishes alternate text in case all other
mechanisms fail.

Object initialization: the PARAM element

Start tag: required, End tag: forbidden

Attribute definitions
name = cdata
This attribute defines the name of a run-time parameter, assumed to be known by
the inserted object. Whether the property name is case-sensitive depends on the
specific object implementation.
value = cdata
 This attribute specifies the value of a run-time parameter specified by name.
Property values have no meaning to HTML; their meaning is determined by the
object in question.
valuetype = data|ref|object
This attribute specifies the type of the value attribute. Possible values:
 data: This is default value for the attribute. It means that the value specified
by value will be evaluated and passed to the object's implementation as a
string.
 ref: The value specified by value is a URI that designates a resource where
run-time values are stored. This allows support tools to identify URIs given as
parameters. The URI must be passed to the object as is, i.e., unresolved.
 object: The value specified by value is an identifier that refers to an OBJECT
declaration in the same document. The identifier must be the value of the id
attribute set for the declared OBJECT element.
type = content-type
This attribute specifies the content type of the resource designated by the value
attribute only in the case where valuetype is set to "ref". This attribute thus
specifies for the browser, the type of values that will be found at the URI
designated by value.

PARAM elements specify a set of values that may be required by an object at run-time. Any number of
PARAM elements may appear in the content of an OBJECT or APPLET element, in any order, but must be
placed at the start of the content of the enclosing OBJECT or APPLET element.

The syntax of names and values is assumed to be understood by the object's implementation. This
document does not specify how browsers should retrieve name/value pairs nor how they should interpret
parameter names that appear twice.

We return to the clock example to illustrate the use of PARAM: suppose that the applet is able to handle
two run-time parameters that define its initial height and width. We can set the initial dimensions to 40x40
pixels with two PARAM elements.

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
This browser cannot render Python applications.
</OBJECT>
In the following example, run-time data for the object's "Init_values" parameter is specified as an external
resource (a GIF file). The value of the valuetype attribute is thus set to "ref" and the value is a URI
designating the resource.
<P><OBJECT classid="http://www.gifstuff.com/gifappli"
standby="Loading Elvis...">
<PARAM name="Init_values"
value="./images/elvis.gif">
valuetype="ref">
</OBJECT>
Note that we have also set the standby attribute so that the browser may display a message while the
rendering mechanism loads.

When an OBJECT element is rendered, browsers must search the content for only those PARAM elements
that are direct children and "feed" them to the OBJECT.
Thus, in the following example, if "obj1" is rendered, "param1" applies to "obj1" (and not "obj2"). If "obj1"
is not rendered and "obj2" is, "param1" is ignored, and "param2" applies to "obj2". If neither OBJECT is
rendered, neither PARAM applies.
<P>
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
 </OBJECT>
</OBJECT>

Global naming schemes for objects

The location of an object's implementation is given by a URI. As we discussed in the introduction to URIs,
the first segment of an absolute URI specifies the naming scheme used to transfer the data designated by
the URI. For HTML documents, this scheme is frequently "http". Some applets might employ other naming
schemes. For instance, when specifying a Java applet, you may use URIs that begin with "java" and for
ActiveX applets, you may use "clsid".

In the following example, we insert a Java applet into an HTML document.

<P><OBJECT classid="java:program.start">
</OBJECT>
By setting the codetype attribute, a browser can decide whether to retrieve the Java application based on
its ability to do so.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
Some rendering schemes require additional information to identify their implementation and must be told
where to find that information. Authors may give path information to the object's implementation via the
codebase attribute.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>
The following example specifies (with the classid attribute) an ActiveX object via a URI that begins with the
naming scheme "clsid". The data attribute locates the data to render (another clock).
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/clock.stm">
This application is not supported.
</OBJECT>

Object declarations and instantiations

The preceding examples have only illustrated isolated object definitions. When a
document is to contain more than one instance of the same object, it is possible to
separate the declaration of the object from its instantiations. Doing so has several
advantages:
 Data may be retrieved from the network by the browser one time (during the
declaration) and reused for each instantiation.
 It is possible to instantiate an object from a location other than the object's
declaration, for example, from a link.
 It is possible to specify objects as run-time data for other objects.

To declare an object so that it is not executed when read by the browser, set the boolean declare attribute
in the OBJECT element. At the same time, authors must identify the declaration by setting the id attribute
in the OBJECT element to a unique value. Later instantiations of the object will refer to this identifier.
A declared OBJECT must appear in a document before the first instance of that OBJECT.

An object defined with the declare attribute is instantiated every time an element that refers to that object
requires it to be rendered (e.g., a link that refers to it is activated, an object that refers to it is activated,
etc.).

In the following example, we declare an OBJECT and cause it to be instantiated by referring to it from a
link. Thus, the object can be activated by clicking on some highlighted text, for example.
<P><OBJECT declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
...later in the document...
<P>A neat <A href="#earth.declaration"> animation of The Earth!</A>
The following example illustrates how to specify run-time values that are other objects. In this example, we
send text (a poem, in fact) to a hypothetical mechanism for viewing poems. The object recognizes a run-
time parameter named "font" (say, for rendering the poem text in a certain font). The value for this
parameter is itself an object that inserts (but does not render) the font object. The relationship between
the font object and the poem viewer object is achieved by (1) assigning the id "tribune" to the font object
declaration and (2) referring to it from the PARAM element of the poem viewer object (with valuetype and
value).
<P><OBJECT declare
id="tribune"
type="application/x-webfont"
data="tribune.gif">
</OBJECT>
...view the poem in KublaKhan.txt here...
<P><OBJECT classid="http://foo.bar.com/poem_viewer"
data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>You're missing a really cool poem viewer ...
</OBJECT>

Including an applet: the APPLET element

APPLET is deprecated (with all its attributes) in favor of OBJECT.
codebase = uri
This attribute specifies the base URI for the applet. If this attribute is not specified,
then it defaults the same base URI as for the current document. Values for this
attribute may only refer to subdirectories of the directory containing the current
document. Note. While the restriction on subdirectories is a departure from
common practice and the HTML 3.2 specification, the HTML Working Group has
chosen to leave the restriction in this version of the specification for security
reasons.
code = cdata
This attribute specifies either the name of the class file that contains the applet's
compiled applet subclass or the path to get the class, including the class file itself.
It is interpreted with respect to the applet's codebase. One of code or object must
be present.
name = cdata
This attribute specifies a name for the applet instance, which makes it possible for
applets on the same page to find (and communicate with) each other.
archive = uri-list
This attribute specifies a comma-separated list of URIs for archives containing
classes and other resources that will be "preloaded". The classes are loaded using
an instance of an AppletClassLoader with the given codebase. Relative URIs for
archives are interpreted with respect to the applet's codebase. Preloading
resources can significantly improve the performance of applets.
object = cdata
This attribute names a resource containing a serialized representation of an
applet's state. It is interpreted relative to the applet's codebase. The serialized
data contains the applet's class name but not the implementation. The class name
is used to retrieve the implementation from a class file or archive.
When the applet is "deserialized" the start() method is invoked but not the init() method. Attributes
valid when the original object was serialized are not restored. Any attributes passed to this APPLET
instance will be available to the applet. Authors should use this feature with extreme caution. An
applet should be stopped before it is serialized.
Either code or object must be present. If both code and object are given, it is an error if they
provide different class names.
width = length
 This attribute specifies the initial width of the applet's display area (excluding any
windows or dialogs that the applet creates).
height = length
This attribute specifies the initial height of the applet's display area (excluding any
windows or dialogs that the applet creates).
This element, supported by all Java-enabled browsers, allows designers to embed a Java applet in an HTML
document. It has been deprecated in favor of the OBJECT element.

The content of the APPLET acts as alternate information for browsers that don't support this element or are
currently configured not to support applets. Browsers must ignore the content otherwise.

DEPRECATED EXAMPLE:
In the following example, the APPLET element includes a Java applet in the document. Since no codebase
is supplied, the applet is assumed to be in the same directory as the current document.
<APPLET code="Bubbles.class" width="500" height="500">
Java applet that draws animated bubbles.
</APPLET>
This example may be rewritten with OBJECT as follows:
<P><OBJECT codetype="application/java"
classid="java:Bubbles.class"
width="500" height="500">
Java applet that draws animated bubbles.
</OBJECT>
Initial values may be supplied to the applet via the PARAM element.
DEPRECATED EXAMPLE:
The following sample Java applet:
<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java applet that plays a welcoming sound.
</APPLET>
may be rewritten as follows with OBJECT:
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java applet that plays a welcoming sound.
</OBJECT>

Notes on embedded documents

Sometimes, rather than linking to a document, you may want to embed it directly into a
primary HTML document. Authors may use either the IFRAME element or the OBJECT
element for this purpose, but the elements differ in some ways. Not only do the two
elements have different content models, the IFRAME element may be a target frame
(see the section on specifying target frame information for details) and may be
"selected" by a browser as the focus for printing, viewing HTML source, etc. Browsers
may render selected frames elements in ways that distinguish them from unselected
frames (e.g., by drawing a border around the selected frame).
An embedded document is entirely independent of the document in which it is embedded. For instance,
relative URIs within the embedded document resolve according to the base URI of the embedded
document, not that of the main document. An embedded document is only rendered within another
document (e.g., in a subwindow); it remains otherwise independent.
For instance, the following line embeds the contents of embed_me.html at the location where the OBJECT
definition occurs.
...text before...
<OBJECT data="embed_me.html">
Warning: embed_me.html could not be embedded.
</OBJECT>
...text after...
Recall that the contents of OBJECT must only be rendered if the file specified by the data attribute cannot
be loaded.
The behavior of a browser in cases where a file includes itself is not defined.

Image maps
Image maps allow authors to specify regions of an image or object and assign a specific
action to each region (e.g., retrieve a document, run a program, etc.) When the region is
activated by the user, the action is executed.
An image map is created by associating an object with a specification of sensitive geometric areas on the
object.
There are two types of image maps:
 Client-side. When a user activates a region of a client-side image map with a
mouse, the pixel coordinates are interpreted by the browser. The browser selects a
link that was specified for the activated region and follows it.
 Server-side. When a user activates a region of a server-side image map with a
mouse, the pixel coordinates of the click are sent to the server-side agent specified
by the href attribute of the A element. The server-side agent interprets the
coordinates and performs some action.
Client-side image maps are preferred over server-side image maps for at least two reasons: they are
accessible to people browsing with non-graphical browsers and they offer immediate feedback as to
whether or not the pointer is over an active region.

Client-side image maps: the MAP and AREA elements

MAP
Start tag: required, End tag: required

AREA
Start tag: required, End tag: forbidden

MAP attribute definitions

name = cdata
This attribute assigns a name to the image map defined by a MAP element.
AREA attribute definitions
shape = default|rect|circle|poly
This attribute specifies the shape of a region. Possible values:
 default: Specifies the entire region.
 rect: Define a rectangular region.
 circle: Define a circular region.
 poly: Define a polygonal region.
coords = coordinates
This attribute specifies the position and shape on the screen. The number and
order of values depends on the shape being defined. Possible combinations:
 rect: left-x, top-y, right-x, bottom-y.
 circle: center-x, center-y, radius. Note. When the radius value is a
percentage value, browsers should calculate the final radius value based on
the associated object's width and height. The radius should be the smaller
value of the two.
 poly: x1, y1, x2, y2, ..., xN, yN. The first x and y coordinate pair and the last
should be the same to close the polygon. When these coordinate values are
not the same, browsers should infer an additional coordinate pair to close
the polygon.
Coordinates are relative to the top, left corner of the object. All values are lengths. All values are
separated by commas.
nohref
When set, this boolean attribute specifies that a region has no associated link.
Attribute to associate an image map with an element
usemap = uri
 This attribute associates an image map with an element. The image map is defined
by a MAP element. The value of usemap must match the value of the name
attribute of the associated MAP element.
The MAP element specifies a client-side image map (or other navigation mechanism) that may be
associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element
via the element's usemap attribute. The MAP element may be used without an associated image for
general navigation mechanisms.

The presence of the usemap attribute for an OBJECT implies that the object being included is an image.
Furthermore, when the OBJECT element has an associated client-side image map, browsers may
implement user interaction with the OBJECT solely in terms of the client-side image map. This allows
browsers (such as an audio browser or robot) to interact with the OBJECT without having to process it; the
browser may even elect not to retrieve (or process) the object. When an OBJECT has an associated image
map, authors should not expect that the object will be retrieved or processed by every browser.

The MAP element content model allows authors to combine the following:
1. One or more AREA elements. These elements have no content but specify the
geometric regions of the image map and the link associated with each region. Note
that browsers do not generally render AREA elements. Therefore, authors must
provide alternate text for each AREA with the alt attribute (see below for
information on how to specify alternate text).
2. Block-level content. This content should include A elements that specify the
geometric regions of the image map and the link associated with each region. Note
that the browser should render block-level content of a MAP element. Authors
should use this method to create more accessible documents.
When a MAP element contains mixed content (both AREA elements and block-level content), browsers
must ignore the AREA elements.

You should specify an image maps's geometry completely with AREA elements, or completely with A
elements, or completely with both if content is mixed. Authors may wish to mix content so that older
browsers will handle map geometries specified by AREA elements and new browsers will take advantage of
richer block content.

If two or more defined regions overlap, the region-defining element that appears earliest in the document
takes precedence (i.e., responds to user input).

Client-side image map examples

In the following example, we create a client-side image map for the OBJECT element. We do not want to
render the image map's contents when the OBJECT is rendered, so we "hide" the MAP element within the
OBJECT element's content. Consequently, the MAP element's contents will only be rendered if the OBJECT
cannot be rendered.
<HTML>
<HEAD>
<TITLE>The cool site!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navigate the site:
<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
</MAP>
</OBJECT>
</BODY>
</HTML>
We may want to render the image map's contents even when a browser can render the OBJECT. For
instance, we may want to associate an image map with an OBJECT element and include a text navigation
bar at the bottom of the page. To do so, we define the MAP element outside the OBJECT:
<HTML>
<HEAD>
<TITLE>The cool site!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
</OBJECT>

...the rest of the page here...

<MAP name="map1">
<P>Navigate the site:
<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
</MAP>
</BODY>
</HTML>
In the following example, we create a similar image map, this time using the AREA element. Note the use
of alt text:
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<P>This is a navigation bar.
</OBJECT>

<MAP name="map1">
<AREA href="guide.html"
alt="Access Guide"
shape="rect"
coords="0,0,118,28">
<AREA href="search.html"
alt="Search"
shape="rect"
coords="184,0,276,28">
<AREA href="shortcut.html"
alt="Go"
shape="circle"
coords="184,200,60">
<AREA href="top10.html"
alt="Top Ten"
shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
</MAP>
Here is a similar version using the IMG element instead of OBJECT (with the same MAP declaration):
<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
The following example illustrates how image maps may be shared.
Nested OBJECT elements are useful for providing fallbacks in case a browser doesn't support certain
formats. For example:
<P>
<OBJECT data="navbar.png" type="image/png">
<OBJECT data="navbar.gif" type="image/gif">
text describing the image...
</OBJECT>
</OBJECT>
If the browser doesn't support the PNG format, it tries to render the GIF image. If it doesn't support GIF
(e.g., it's a speech-based browser), it defaults to the text description provided as the content of the inner
OBJECT element. When OBJECT elements are nested this way, authors may share image maps among
them:
<P>
<OBJECT data="navbar.png" type="image/png" usemap="#map1">
 <OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navigate the site:
<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
</MAP>
</OBJECT>
</OBJECT>
The following example illustrates how anchors may be specified to create inactive zones within an image
map. The first anchor specifies a small circular region with no associated link. The second anchor specifies
a larger circular region with the same center coordinates. Combined, the two form a ring whose center is
inactive and whose rim is active. The order of the anchor definitions is important, since the smaller circle
must override the larger circle.
<MAP name="map1">
<P>
<A shape="circle" coords="100,200,50">I'm inactive.</A>
<A href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm active.</A>
</MAP>
Similarly, the nohref attribute for the AREA element declares that geometric region has no associated link.

Server-side image maps

Server-side image maps may be interesting in cases where the image map is too complicated for a client-
side image map.

It is only possible to define a server-side image map for the IMG and INPUT elements. In the case of IMG,
the IMG must be inside an A element and the boolean attribute ismap must be set. In the case of INPUT,
the INPUT must be of type "image".

When the user activates the link by clicking on the image, the screen coordinates are sent directly to the
server where the document resides. Screen coordinates are expressed as screen pixel values relative to
the image.

In the following example, the active region defines a server-side link. Thus, a click anywhere on the image
will cause the click's coordinates to be sent to the server.
<P><A href="http://www.acme.com/cgi-bin/competition">
<IMG src="game.gif" ismap alt="target"></A>

The location clicked is passed to the server as follows. The browser derives a new URI from the URI
specified by the href attribute of the A element, by appending `?' followed by the x and y coordinates,
separated by a comma. The link is then followed using the new URI. For instance, in the given example, if
the user clicks at the location x=10, y=27 then the derived URI is
"http://www.acme.com/cgi-bin/competition?10,27".

Browsers that do not offer the user a means to select specific coordinates (e.g., non-graphical browsers
that rely on keyboard input, speech-based browsers, etc.) should send the coordinates "0,0" to the server
when the link is activated.

Visual presentation of images, objects, and applets

All IMG and OBJECT attributes that concern visual alignment and presentation have been
deprecated in favor of style sheets.
Width and height
Attribute definitions
width = length
Image and object width override.
height = length
Image and object height override.
When specified, the width and height attributes tell browsers to override the natural image or object size in
favor of these values.
When the object is an image, it is scaled. Browsers should do their best to scale an object or image to
match the width and height specified by the author. Note that lengths expressed as percentages are based
on the horizontal or vertical space currently available, not on the natural size of the image, object, or
applet.

The height and width attributes give browsers an idea of the size of an image or object so that they may
reserve space for it and continue rendering the document while waiting for the image data.

White space around images and objects

Attribute definitions
hspace = pixels
Deprecated. This attribute specifies the amount of white space to be inserted to
the left and right of an IMG, APPLET, or OBJECT. The default value is not specified,
but is generally a small, non-zero length.
vspace = pixels
Deprecated. This attribute specifies the amount of white space to be inserted
above and below an IMG, APPLET, or OBJECT. The default value is not specified, but
is generally a small, non-zero length.
Borders
An image or object may be surrounded by a border (e.g., when a border is specified by the user or when
the image is the content of an A element).
Attribute definitions
border = pixels
Deprecated. This attribute specifies the width of an IMG or OBJECT border, in
pixels. The default value for this attribute depends on the browser.
Alignment
Attribute definitions
align = bottom|middle|top|left|right
Deprecated. This attribute specifies the position of an IMG, OBJECT, or APPLET
with respect to its context.
The following values for align concern the object's position with respect to surrounding text:
 bottom: means that the bottom of the object should be vertically aligned with the
current baseline. This is the default value.
 middle: means that the center of the object should be vertically aligned with the
current baseline.
 top: means that the top of the object should be vertically aligned with the top of
the current text line.
Two other values, left and right, cause the image to float to the current left or right margin. They are
discussed in the section on floating objects.

How to specify alternate text

Attribute definitions
alt = text
For browsers that cannot display images, forms, or applets, this attribute specifies
alternate text. The language of the alternate text is specified by the lang attribute.
Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as
content when the element cannot be rendered normally. Specifying alternate text assists users without
graphic display terminals, users whose browsers don't support forms, visually impaired users, those who
use speech synthesizers, those who have configured their graphical browsers not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET
elements.
While alternate text may be very helpful, it must be handled with care. Authors should observe the
following guidelines:
  Do not specify irrelevant alternate text when including images intended to format
a page, for instance, alt="red ball" would be inappropriate for an image that adds
a red ball for decorating a heading or paragraph. In such cases, the alternate text
should be the empty string (""). Authors are in any case advised to avoid using
images to format pages; style sheets should be used instead.
 Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this
frustrate users, it will slow down browsers that must convert text to speech or
braille output.
Implementors should consult the section on accessibility for information about how to handle cases of
omitted alternate text.

Forms
Introduction to forms
An HTML form is a section of a document containing normal content, markup, special elements called
controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete"
a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to
an agent for processing (e.g., to a Web server, to a mail server, etc.)
Here's a simple form that includes labels, radio buttons, and push buttons (reset the form or submit it):
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>

Controls
Users interact with forms through named controls.
A control's "control name" is given by its name attribute. The scope of the name attribute for a control
within a FORM element is the FORM element.

Each control has both an initial value and a current value, both of which are character strings. Please
consult the definition of each control for information about initial values and possible constraints on values
imposed by the control. In general, a control's "initial value" may be specified with the control element's
value attribute. However, the initial value of a TEXTAREA element is given by its contents, and the initial
value of an OBJECT element in a form is determined by the object implementation (i.e., it lies outside the
scope of this specification).

The control's "current value" is first set to the initial value. Thereafter, the control's current value may
be modified through user interaction and scripts.
A control's initial value does not change. Thus, when a form is reset, each control's current value is reset to
its initial value. If a control does not have an initial value, the effect of a form reset on that control is
undefined.

When a form is submitted for processing, some controls have their name paired with their current value
and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are
called successful controls.

Control types
HTML defines the following control types:
buttons
Authors may create three types of buttons:
  submit buttons: When activated, a submit button submits a form. A form
may contain more than one submit button.
 reset buttons: When activated, a reset button resets all controls to their
initial values.
 push buttons: Push buttons have no default behavior. Each push button may
have client-side scripts associated with the element's event attributes. When
an event occurs (e.g., the user presses the button, releases it, etc.), the
associated script is triggered.
Authors should specify the scripting language of a push button script through a default script
declaration (with the META element).
Authors create buttons with the BUTTON element or the INPUT element. Please consult the
definitions of these elements for details about specifying different button types.
checkboxes
Checkboxes (and radio buttons) are on/off switches that may be toggled by the
user. A switch is "on" when the control element's checked attribute is set. When a
form is submitted, only "on" checkbox controls can become successful.
Several checkboxes in a form may share the same control name. Thus, for example, checkboxes
allow users to select several values for the same property. The INPUT element is used to create a
checkbox control.
radio buttons
Radio buttons are like checkboxes except that when several share the same
control name, they are mutually exclusive: when one is switched "on", all others
with the same name are switched "off". The INPUT element is used to create a
radio button control.
menus
Menus offer users options from which to choose. The SELECT element creates a
menu, in combination with the OPTGROUP and OPTION elements.
text input
Authors may create two types of controls that allow users to input text. The INPUT
element creates a single-line input control and the TEXTAREA element creates a
multi-line input control. In both cases, the input text becomes the control's current
value.
file select
This control type allows the user to select files so that their contents may be
submitted with a form. The INPUT element is used to create a file select control.
hidden controls
Authors may create controls that are not rendered but whose values are submitted
with a form. Authors generally use this control type to store information between
client/server exchanges that would otherwise be lost due to the stateless nature of
HTTP. The INPUT element is used to create a hidden control.
object controls
Authors may insert generic objects in forms such that associated values are
submitted along with other controls. Authors create object controls with the
OBJECT element.

The elements used to create controls generally appear inside a FORM element, but may also appear
outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the
section on intrinsic events. Note that controls outside a form cannot be successful controls.

The FORM element

Start tag: required, End tag: required

Attribute definitions
action = uri
 This attribute specifies a form processing agent. Browser behavior for a value
other than an HTTP URI is undefined.
method = get|post
This attribute specifies which HTTP method will be used to submit the form data
set. Possible (case-insensitive) values are "get" (the default) and "post". See the
section on form submission for usage information.
enctype = content-type
This attribute specifies the content type used to submit the form to the server
(when the value of method is "post"). The default value for this attribute is
"application/x-www-form-urlencoded". The value "multipart/form-data" should be
used in combination with the INPUT element, type="file".
accept-charset = charset list
This attribute specifies the list of character encodings for input data that is
accepted by the server processing this form. The value is a space- and/or comma-
delimited list of charset values. The client must interpret this list as an exclusive-or
list, i.e., the server is able to accept any single character encoding per entity
received.
The default value for this attribute is the reserved string "UNKNOWN". Browsers may interpret this
value as the character encoding that was used to transmit the document containing this FORM
element.
accept = content-type-list
This attribute specifies a comma-separated list of content types that a server
processing this form will handle correctly. Browsers may use this information to
filter out non-conforming files when prompting a user to select files to be sent to
the server (cf. the INPUT element when type="file").
name = cdata
This attribute names the element so that it may be referred to from style sheets or
scripts. Note. This attribute has been included for backwards compatibility.
Applications should use the id attribute to identify elements.
The FORM element acts as a container for controls. It specifies:
 The layout of the form (given by the contents of the element).
 The program that will handle the completed and submitted form (the action
attribute). The receiving program must be able to parse name/value pairs in order
to make use of them.
 The method by which user data will be sent to the server (the method attribute).
 A character encoding that must be accepted by the server in order to handle this
form (the accept-charset attribute). Browsers may advise the user of the value of
the accept-charset attribute and/or restrict the user's ability to enter unrecognized
characters.
A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.

The following example shows a form that is to be processed by the "adduser" program when submitted.
The form will be sent to the program using the HTTP "post" method.
<FORM action="http://somesite.com/prog/adduser" method="post">
...form contents...
</FORM>
Please consult the section on form submission for information about how browsers must prepare form data
for servers and how browsers should handle expected responses.

The INPUT element

Start tag: required, End tag: forbidden

Attribute definitions
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button
This attribute specifies the type of control to create. The default value for this
attribute is "text".
name = cdata
This attribute assigns the control name.
value = cdata
This attribute specifies the initial value of the control. It is optional except when
the type attribute has the value "radio" or "checkbox".
size = cdata
This attribute tells the browser the initial width of the control. The width is given in
pixels except when type attribute has the value "text" or "password". In that case,
its value refers to the (integer) number of characters.
maxlength = number
When the type attribute has the value "text" or "password", this attribute specifies
the maximum number of characters the user may enter. This number may exceed
the specified size, in which case the browser should offer a scrolling mechanism.
The default value for this attribute is an unlimited number.
checked
When the type attribute has the value "radio" or "checkbox", this boolean attribute
specifies that the button is on. Browsers must ignore this attribute for other control
types.
src = uri
When the type attribute has the value "image", this attribute specifies the location
of the image to be used to decorate the graphical submit button.
Control types created with INPUT
The control type defined by the INPUT element depends on the value of the type attribute:
text
Creates a single-line text input control.
password
Like "text", but the input text is rendered in such a way as to hide the characters
(e.g., a series of asterisks). This control type is often used for sensitive input such
as passwords. Note that the current value is the text entered by the user, not the
text rendered by the browser.

Note. Application designers should note that this mechanism affords only light security protection.
Although the password is masked by browsers from casual observers, it is transmitted to the server
in clear text, and may be read by anyone with low-level access to the network.
checkbox
Creates a checkbox.
radio
Creates a radio button.
submit
Creates a submit button.
image
Creates a graphical submit button. The value of the src attribute specifies the URI
of the image that will decorate the button. For accessibility reasons, authors should
provide alternate text for the image via the alt attribute.
When a pointing device is used to click on the image, the form is submitted and the click
coordinates passed to the server. The x value is measured in pixels from the left of the image, and
the y value in pixels from the top of the image. The submitted data includes name.x=x-value and
name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the
x and y coordinate values, respectively.

If the server takes different actions depending on the location clicked, users of non-graphical
browsers will be disadvantaged. For this reason, authors should consider alternate approaches:
  Use multiple submit buttons (each with its own image) in place of a single
graphical submit button. Authors may use style sheets to control the
positioning of these buttons.
 Use a client-side image map together with scripting.
reset
Creates a reset button.
button
Creates a push button. Browsers should use the value of the value attribute as the
button's label.
hidden
Creates a hidden control.
file
Creates a file select control. Browsers may use the value of the value attribute as
the initial file name.

Examples of forms containing INPUT controls

The following sample HTML fragment defines a simple form that allows the user to enter a first name, last
name, email address, and gender. When the submit button is activated, the form will be sent to the
program specified by the action attribute.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
This form might be rendered as follows:

In the section on the LABEL element, we discuss marking up labels such as "First name".

In this next example, the JavaScript function name verify is triggered when the "onclick" event occurs:
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
<FORM action="..." method="post">
<P>
<INPUT type="button" value="Click Me" onclick="verify()">
</FORM>
</BODY>
Please consult the section on intrinsic events for more information about scripting and events.

The following example shows how the contents of a user-specified file may be submitted with a form. The
user is prompted for his or her name and a list of file names whose contents should be submitted with the
form. By specifying the enctype value of "multipart/form-data", each file's contents will be packaged for
submission in a separate section of a multipart document.
<FORM action="http://server.dom/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="name_of_sender">
What files are you sending? <INPUT type="file" name="name_of_files">
</P>
</FORM>

The BUTTON element

Start tag: required, End tag: required

Attribute definitions
name = cdata
This attribute assigns the control name.
value = cdata
This attribute assigns the initial value to the button.
type = submit|button|reset
This attribute declares the type of the button. Possible values:
 submit: Creates a submit button. This is the default value.
 reset: Creates a reset button.
 button: Creates a push button.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but
they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON
element that contains an image functions like and may resemble an INPUT element whose type is set to
"image", but the BUTTON element type allows content.

Visual browsers may render BUTTON buttons with relief and an up/down motion when clicked, while they
may render INPUT buttons as "flat" images.
The following example expands a previous example, but creates submit and reset buttons with BUTTON
instead of INPUT. The buttons contain images by way of the IMG element.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<BUTTON name="submit" value="submit" type="submit">
Send<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
<BUTTON name="reset" type="reset">
Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
</P>
</FORM>
Recall that authors must provide alternate text for an IMG element.
It is illegal to associate an image map with an IMG that appears as the contents of a BUTTON element.
ILLEGAL EXAMPLE:
The following is not legal HTML.
<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>

The SELECT, OPTGROUP, and OPTION elements

Start tag: required, End tag: required

SELECT Attribute definitions

name = cdata
This attribute assigns the control name.
size = number
 If a SELECT element is presented as a scrolled list box, this attribute specifies the
number of rows in the list that should be visible at the same time. Visual browsers
are not required to present a SELECT element as a list box; they may use any
other mechanism, such as a drop-down menu.
multiple
If set, this boolean attribute allows multiple selections. If not set, the SELECT
element only permits single selections.
The SELECT element creates a menu. Each choice offered by the menu is represented by an OPTION
element. A SELECT element must contain at least one OPTION element.

The OPTGROUP element allows authors to group choices logically. This is particularly helpful when the user
must choose from a long list of options; groups of related choices are easier to grasp and remember than a
single long list of options. In HTML 4, all OPTGROUP elements must be specified directly within a SELECT
element (i.e., groups may not be nested).

OPTGROUP
Start tag: required, End tag: required

OPTGROUP Attribute definitions

label = text
This attribute specifies the label for the option group.
OPTION
Start tag: required, End tag: optional

OPTION Attribute definitions

selected
When set, this boolean attribute specifies that this option is pre-selected.
value = cdata
This attribute specifies the initial value of the control. If this attribute is not set, the
initial value is set to the contents of the OPTION element.
label = text
This attribute allows authors to specify a shorter label for an option than the
content of the OPTION element. When specified, browsers should use the value of
this attribute rather than the content of the OPTION element as the option label.
When rendering a menu choice, browsers should use the value of the label attribute of the OPTION
element as the choice. If this attribute is not specified, browsers should use the contents of the OPTION
element.

The label attribute of the OPTGROUP element specifies the label for a group of choices.

In this example, we create a menu that allows the user to select which of seven software components to
install. The first and second components are pre-selected but may be deselected by the user. The
remaining components are not pre-selected. The size attribute states that the menu should only have 4
rows even though the user may select from among 7 options. The other options should be made available
through a scrolling mechanism.

The SELECT is followed by submit and reset buttons.

<FORM action="http://somesite.com/prog/component-select" method="post">
<P>
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
 <INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Only selected options will be successful (using the control name "component-select"). When no options are
selected, the control is not successful and neither the name nor any values are submitted to the server
when the form is submitted. Note that where the value attribute is set, it determines the control's initial
value, otherwise it's the element's contents.

In this example we use the OPTGROUP element to group choices. The following markup:
<FORM action="http://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
represents the following grouping:
None
PortMaster 3
3.7.1
3.7
3.5
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
Visual browsers may allow users to select from option groups through a hierarchical menu or some other
mechanism that reflects the structure of choices.
A graphical browser might render this as:

This image shows a SELECT element rendered as cascading menus. The top label of the menu displays the
currently selected value (PortMaster 3, 3.7.1). The user has unfurled two cascading menus, but has not yet
selected the new value (PortMaster 2, 3.7). Note that each cascading menu displays the label of an
OPTGROUP or OPTION element.

The TEXTAREA element

Start tag: required, End tag: required

Attribute definitions
name = cdata
This attribute assigns the control name.
rows = number
 This attribute specifies the number of visible text lines. Users should be able to
enter more lines than this, so browsers should provide some means to scroll
through the contents of the control when the contents extend beyond the visible
area.
cols = number
This attribute specifies the visible width in average character widths. Users should
be able to enter longer lines than this, so browsers should provide some means to
scroll through the contents of the control when the contents extend beyond the
visible area. Browsers may wrap visible text lines to keep long lines visible without
the need for scrolling.
The TEXTAREA element creates a multi-line text input control. Browsers should use the contents of this
element as the initial value of the control and should render this text initially.

This example creates a TEXTAREA control that is 20 rows by 80 columns and contains two lines of text
initially. The TEXTAREA is followed by submit and reset buttons.
<FORM action="http://somesite.com/prog/text-read" method="post">
<P>
<TEXTAREA name="thetext" rows="20" cols="80">
First line of initial text.
Second line of initial text.
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Setting the readonly attribute allows authors to display unmodifiable text in a TEXTAREA. This differs from
using standard marked-up text in a document because the value of TEXTAREA is submitted with the form.

The ISINDEX element

ISINDEX is deprecated. This element creates a single-line text input control. Authors should use the
INPUT element to create text input controls.

Attribute definitions
prompt = text
Deprecated. This attribute specifies a prompt string for the input field.
The ISINDEX element creates a single-line text input control that allows any number of characters.
Browsers may use the value of the prompt attribute as a title for the prompt.

DEPRECATED EXAMPLE:
The following ISINDEX declaration:
<ISINDEX prompt="Enter your search phrase: ">
could be rewritten with INPUT as follows:
<FORM action="..." method="post">
<P>Enter your search phrase: <INPUT type="text"></P>
</FORM>

Labels
Some form controls automatically have labels associated with them (press buttons) while most do not (text
fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, browsers should use the value of the value attribute as the
label string.
The LABEL element is used to specify labels for controls that do not have implicit labels,

The LABEL element

Start tag: required, End tag: required

Attribute definitions
for = idref
This attribute explicitly associates the label being defined with another control.
When present, the value of this attribute must be the same as the value of the id
 attribute of some other control in the same document. When absent, the label
being defined is associated with the element's contents.
The LABEL element may be used to attach information to controls. Each LABEL element is associated with
exactly one form control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be
the same as the value of the id attribute of the associated control element. More than one LABEL may be
associated with the same control by creating multiple references via the for attribute.

This example creates a table that is used to align two text input controls and their associated labels. Each
label is associated explicitly with one text input:
<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>
This example extends a previous example form to include LABEL elements.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
To associate a label with another control implicitly, the control element must be within the contents of the
LABEL element. In this case, the LABEL may only contain one control element. The label itself may be
positioned before or after the associated control.

In this example, we implicitly associate two labels with two text input controls:
<FORM action="..." method="post">
<P>
<LABEL>
First Name
<INPUT type="text" name="firstname">
</LABEL>
<LABEL>
<INPUT type="text" name="lastname">
Last Name
</LABEL>
</P>
</FORM>
Note that this technique cannot be used when a table is being used for layout, with the label in one cell
and its associated control in another cell.
When a LABEL element receives focus, it passes the focus on to its associated control. See the section
below on access keys for examples.
Labels may be rendered by browsers in a number of ways (e.g., visually, read by speech synthesizers, etc.)

Giving focus to an element

In an HTML document, an element must receive focus from the user in order to become active and
perform its tasks. For example, users must activate a link specified by the A element in order to follow the
specified link. Similarly, users must give a TEXTAREA focus in order to enter text into it.
There are several ways to give focus to an element:
 Designate the element with a pointing device.
 Navigate from one element to the next with the keyboard. The document's author
may define a tabbing order that specifies the order in which elements will receive
focus if the user navigates the document with the keyboard (see tabbing
navigation). Once selected, an element may be activated by some other key
sequence.
 Select an element through an access key (sometimes called "keyboard shortcut" or
"keyboard accelerator").

Tabbing navigation
Attribute definitions
tabindex = number
This attribute specifies the position of the current element in the tabbing order for
the current document. This value must be a number between 0 and 32767.
Browsers should ignore leading zeros.

The tabbing order defines the order in which elements will receive focus when navigated by the user via
the keyboard. The tabbing order may include elements nested within other elements.

Elements that may receive focus should be navigated by browsers according to the following rules:
1. Those elements that support the tabindex attribute and assign a positive value to
it are navigated first. Navigation proceeds from the element with the lowest
tabindex value to the element with the highest value. Values need not be
sequential nor must they begin with any particular value. Elements that have
identical tabindex values should be navigated in the order they appear in the
character stream.
2. Those elements that do not support the tabindex attribute or support it and assign
it a value of "0" are navigated next. These elements are navigated in the order
they appear in the character stream.
3. Elements that are disabled do not participate in the tabbing order.
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and
TEXTAREA.

In this example, the tabbing order will be the BUTTON, the INPUT elements in order (note that "field1" and
the button share the same tabindex, but "field1" appears later in the character stream), and finally the link
created by the A element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with FORM</TITLE>
</HEAD>
<BODY>
...some text...
<P>Go to the
<A tabindex="10" href="http://www.w3.org/">W3C Web site.</A>
...some more...
<BUTTON type="button" name="get-database"
tabindex="1" onclick="get-database">
Get the current database.
</BUTTON>
...some more...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
 </P>
</FORM>
</BODY>
</HTML>

Tabbing keys. The actual key sequence that causes tabbing navigation or element activation depends on
the configuration of the browser (e.g., the "tab" key is used for navigation and the "enter" key is used to
activate a selected element).
Browsers may also define key sequences to navigate the tabbing order in reverse. When the end (or
beginning) of the tabbing order is reached, browsers may circle back to the beginning (or end).

Access keys
Attribute definitions
accesskey = character
This attribute assigns an access key to an element. An access key is a single
character from the document character set. Note. Authors should consider the
input method of the expected reader when specifying an accesskey.
Pressing an access key assigned to an element gives focus to the element. The action that occurs when an
element receives focus depends on the element. For example, when a user activates a link defined by the
A element, the browser generally follows the link. When a user activates a radio button, the browser
changes the value of the radio button. When the user activates a text field, it allows input, etc.

The following elements support the accesskey attribute: A, AREA, BUTTON, INPUT, LABEL, and LEGEND,
and TEXTAREA.

This example assigns the access key "U" to a label associated with an INPUT control. Typing the access key
gives focus to the label which in turn gives it to the associated control. The user may then enter text into
the INPUT area.
<FORM action="..." method="post">
<P>
<LABEL for="fuser" accesskey="U">
User Name
</LABEL>
<INPUT type="text" name="user" id="fuser">
</P>
</FORM>
In this example, we assign an access key to a link defined by the A element. Typing this access key takes
the user to another document, in this case, a table of contents.
<P><A accesskey="C"
rel="contents"
href="http://someplace.com/specification/contents.html">
Table of Contents</A>
The invocation of access keys depends on the underlying system. For instance, on machines running MS
Windows, one generally has to press the "alt" key in addition to the access key. On Apple systems, one
generally has to press the "cmd" key in addition to the access key.

The rendering of access keys depends on the browser. We recommend that authors include the access key
in label text or wherever the access key is to apply. Browsers should render the value of an access key in
such a way as to emphasize its role and to distinguish it from other characters (e.g., by underlining it).

Disabled and read-only controls

In contexts where user input is either undesirable or irrelevant, it is important to be able to disable a
control or render it read-only. For example, one may want to disable a form's submit button until the user
has entered some required data. Similarly, an author may want to include a piece of read-only text that
must be submitted as a value along with the form. The following sections describe disabled and read-only
controls.

Disabled controls
Attribute definitions
disabled
When set for a form control, this boolean attribute disables the control for user
input.
When set, the disabled attribute has the following effects on an element:
 Disabled controls do not receive focus.
 Disabled controls are skipped in tabbing navigation.
 Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and
TEXTAREA.
This attribute is inherited but local declarations override the inherited value.
How disabled elements are rendered depends on the browser. For example, some browsers "gray out"
disabled menu items, button labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be
submitted with the form.
<INPUT disabled name="fred" value="stone">

Note. The only way to modify dynamically the value of the disabled attribute is through a script.

Read-only controls
Attribute definitions
readonly
When set for a form control, this boolean attribute prohibits changes to the control.
The readonly attribute specifies whether the control may be modified by the user.
When set, the readonly attribute has the following effects on an element:
 Read-only elements receive focus but cannot be modified by the user.
 Read-only elements are included in tabbing navigation.
 Read-only elements may be successful.
The following elements support the readonly attribute: INPUT and TEXTAREA.
How read-only elements are rendered depends on the browser.

Note. The only way to modify dynamically the value of the readonly attribute is through a script.

Form submission
The following sections explain how browsers submit form data to form processing agents.
Form submission method
The method attribute of the FORM element specifies the HTTP method used to send the form to the
processing agent. This attribute may take two values:
 get: With the HTTP "get" method, the form data set is appended to the URI
specified by the action attribute (with a question-mark ("?") as separator) and this
new URI is sent to the processing agent.
 post: With the HTTP "post" method, the form data set is included in the body of the
form and sent to the processing agent.
The "get" method should be used when the form is idempotent (i.e., causes no side-effects). Many
database searches have no visible side-effects and make ideal applications for the "get" method.
If the service associated with the processing of a form causes side effects (for example, if the form
modifies a database or subscription to a service), the "post" method should be used.

Note. The "get" method restricts form data set values to ASCII characters. Only the "post" method (with
enctype="multipart/form-data") is specified to cover the entire [ISO10646] character set.

Frames

Frames divide browser windows into several independent sections that can each containing separate HTML
document. Subdividing browser windows can dramatically improve the appearance and the usability of a
site.

Frames can, however, make navigation difficult. Framed sites use a combination of HTML documents
displayed together in the browser. Most commonly, frames divide the window into two or more sections,
with one larger section containing content and the smaller section(s) containing a logo navigation links, or
both. The appearance of frames depends on how you design them.

Creating Frames:
Creating frames requires relatively few steps:
1. Create a frameset (or layout) document that determines the location and characteristics of frames.
2. Designate the frames and their contents.
3. Format the frames.
4. Make provisions for frames when viewed in nonframed browsers.
Note: A framset specifies the layout for frames, including the locations and characteristics of the frames,
the framset acts as a holder for frame information.
FRAMSET TAGS AND ATTRIBUTES
Tags/Attribute Use
<FRAMSET> Establishes frames within HTML document.
ROW = “n1,n2” Sets the size for rows-horizontal frames in pixels, as a percentage, or as proportion of
the remaining space with ‘*’
COL = “n1,n2” Sets the size for columns-vertical frames in pixels, as a percentage, or as proportion
of the remaining space with ‘*’
<FRAME> Identifies frame characteristics and initial content.
SRC = “URL” Identifies the source for the frame content as a standard URL.
NAME = “….” Labels a frame so that it can be targeted or referred to from other frames or
windows.
<NOFRAMES> Sets a section of an HTML document to be visible to nonframed browser (and invisible
to framed browsers).
Creating a Frameset
A frameset is the foundation for individual frames and their content, and in it you specify the
general frame layout either vertical (using columns) or horizontal (using rows). The basic frameset closely
resembles a standard HTML document, but often lacks the <BODY> tag.
Follow these steps to add frameset on your HTML documents.
1. Start with a basic HTML document, including <HTML>, <HEAD> an d <TITLE> tags and <META> tags
of your choice. Your code should look something like this:
<HTML>
<HEAD>
<TITLE> Frameset Samples</TITLE>
</HEAD>
</HTML>
2. Add <FRAMESET> tags to establish frameset:
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
<FRAMESET>
</FRAMESET>
<HEAD>
<HTML>
3. Add a COLS = or ROWS = attribute, depending on whether you want vertical or horizontal frames. We
used the COLS = attribute with values of 50% and * to get two columns, one at 50% and one filling the
remaining space:
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
</HEAD>
<FRAMESET COLS = “50%,*”>
</FRAMESET>
</HTML>
Within a frameset, you can specify either rows or columns, but not both. To divide your browser
window into columns and then subdivide each column into rows, you nest <FRAMESET> tags like this:
<FRAMESET COLS = “200, 50%,*”>
<FRAMESET ROWS = “100,*”>
</FRAMESET>
</FRAMESET>

Adding Frames:
Adding frames to an existing frameset document is straightforward. You add a frame tag for each column
or in the frameset document, specify the content for each frame, and then name each frame.

In the following example, we are going to add vertical frames. The process for adding horizontal frames is
the same except for the ROWS = or COLS = attribute in the <FRAMESET> tag.
We’ll start with the existing frameset document that we created in the last section, and this we’ll add two
frame tags and the content for each frame. The starting document looks like this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
</HEAD>
<FRAMESET COLS = “50%,*”>
</FRAMESET>
</HTML>
Now follow these steps:
1. Add a <FRAME> tag within the <FRAMESET>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
</HEAD>
<FRAMESET COLS = “50%,*”>
<FRAME>
</FRAMESET>
</HTML>
2. Add the NAME = attribute to label the frame. Because browsers fill frames from left to right and top to
bottom, this frame is for the left frame. The second frame is for the right frame.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
</HEAD>
<FRAMESET COLS = “50%,*”>
<FRAME NAME = “first”>
</FRAMESET>
</HTML>
3. Add the SRC = attribute to specify the HTML document that will fill the frame. The document filling this
frame is z-yellow.html.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
</HEAD>
<FRAMESET COLS = “50%,*”>
<FRAME NAME = “first” SRC = z-yellow.html”>
</FRAMESET>
</HTML>
4. Add the second frame tag, with the name second and source of z-blue.html.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Frameset Samples</TITLE>
</HEAD>
<FRAMESET COLS = “50%,*”>
<FRAME NAME = “first” SRC = z-yellow.html”>
<FRAME NAME = “second” SRC = z-blue.html”>
</FRAMESET>
</HTML>
Note: The URL use depends on where the file is located. If you’re using a file in the same folder as the
frameset document or in an adjacent folder, you can use a relative URL. If the fire is located
elsewhere, you will need to adjust the URL accordingly.

Formatting Framesets
Formatting a frame primarily involves changing its boarders and adjusting its margins. You use the
attributes shown below. These tags generally apply either to a <FRAMESET> tag and thus to all <FRAME>
tags within the frameset or to individual <FRAME> tags, although the HTML 4 specification only supports
using these attributes with individual <FRAME> tags.
FRAME FORMATTING ATTRIBUTES
Attribute Use
FRAMEBOARDER = n Sets or removes the boarder around a frame. For uniform results in all
browsers, use in conjunction with the BOARDER = attribute.
BOARDER = n Sets and removes the boarder around a frame. For uniform results in a
browsers use conjunction with the FRAMEBOARDER = attribute.
NORESIZE Prohibits visitors from resizing a frame. In the absence of this attribute visitors
can click and drag the mouse to move the frame boarders.
SCROLLING = “….” Prohibits scrollbars, require scrollbars, or lets the browser provide scrollbars if
required (the default). Possible values are YES, NO and AUTO (matic).
MARGINHEIGHT = n Sets the number of pixels of the margin above and below the content of the
frame
MARGINWEIDTH = n Sets the number of pixels of the margin to the left and the right of frame
content.
BOARDERCOLOR = “…” Sets the color of the frame boarder as either a #rrggbb value or a color name.
Note: These options apply to actual frames, not to the content of the frames. Remember, frame content is
simply a standard HTML document and is formatted accordingly.
Controlling Frames:
If you have content of a known size, you might want to establish a fixed size for a frame and choose not to
let visitors resize it. For example, if a frame encloses an image map that is used for site wide navigation,
you would probably size the frame to the image map. If the image map is 390 pixels wide and 90 pixels
high, you might set the frame to 400×100 pixels with the following code:
<FRAMESET COLS = “400,*”>
<FRAMESET ROWS = “100,*”>

You know the exact size of only the first frame; it will be 400 pixels wide and 100 pixels high. All other
frames on the page will be resized according to the size of the browser window. If the browser window is
set 800×600, the second (variable) column will be about 400 pixels wide. If the browser window is
2024×786, however, the variable column will be about 600 pixels wide.

You can also set a frame to NORESIZE to prevent visitors from resizing it. Although many Web surfers do
not know that they can resize frames by simply clicking and dragging the borders, some do and will
rearrange the boarders to suit themselves, if, however, visitors resize a frameset to avoid scrolling, they
might obscure some content without realizing it. To avoid this, simply add NORESIZE attribute to the
<FRAME> tag, like this:
<FRAME NAME = “menu” SRC = “imagemap.html” NORESIZE>
NOTE: Setting one frame to NORESIZE also prohibits other frames from resizing.

Controlling Scrollbars:
Although scrollbars are essential to allow visitors to see all the content in most frames, they can be
superfluous and visually distracting. For example, depending on the margin that browser inserts around an
image, scrollbar might appear in some browsers on some platform and not in others. If the entire image
map fits within the frame, little scrolling is necessary, and scrolling would probably obscure more of the
image map than might be lost through the margins. Therefore, you might set this frame to SCROLLING =
no to prohibit scrollbars, like this:
<FRAME NAME = “menu” SRC = “imagemap.html” SCROLLING = NO>

You can also put SCROLLING = NO in the <FRAMESET> tag if you want to prohibit scrolling in all frameset
document keep in mind, though, that if you turn off the scrollbars in a frame containing more content than
will fit in the window, your visitor will have no way to view the page.

Setting frame margins

A frame margin is the space between the edge of the frame and the visible content of the HTML document.
Adjusting the frame margin affects the framed document itself and keeps from appearing to touch each
other; in other words, adjusting the frame margins gives you document a little “breathing room”.

To set frame margins, and the MARGINHEIGHT = (for vertical margins) and MARGINWIDTH = (for horizontal
margins) attributes to the <FRAME> tag a shown in the following code:
<FRAME NAME = “topleft” SRC = “z=maroon.html” MARGINWIDTH = “100” MARGINHEIGHT =
“100”>

Enabling Effective Navigation (Implementing Navigation)

Designing with frames and helping your visitors navigate your site effectively requires moderation and
simplicity.

Linking to specific frames requires only one new attribute, TARGET = when used in an anchor tag, this
attribute directs the content of the link into a different frame.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Computer Point Nepal</TITLE>
</HEAD>
<FRAMSET COLS = “230,*”
<FRAME NAME = “left” SRC = “leftoc1.html”>
<FRAME NAME = “main” SRC = “content.html”>
<NOFRAMES>
If you can see this, your browser is not capable of displaying frames.
</NOFRAMES>
</FRAMESET>
</HTML>

This first (left) <FRAME> tag carries the attribute NAME = “left”, and the other frame has the attribute
NAME = “main”. These attributes allow the frames to be specially addressed.

The basic code for the left frame is as follows:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>Computer point Neapl</TITLE>
</HEAD>
<BODY BACKGROUND = “.”BGCOLOR = “#ffffff” TEXT =”#000000” LINK = “#0000ff” VLINKI =
“#800080” ALINK = “#ff0000”>
<IMG SRC = “comput.gif” ALIGN = “.” WIDTH = “200” HEIGHT = “84” BOARDER = “0” ALT = “.”>
<UL>
<LI><A HERF = “first.html”>Introduction</A>
<LI><A HERF = “services.html”>Services</A>
<LI><A HERF = “eduction.html”>Education</A>
<LI><A HERF = “software.html”>Software Development</A>
<LI><A HERF = “hardware.html”>Hardware Education</A>
</UL>
</BODY>
</HTML>

As the document currently stands, clicking a link-say, introduction-in the left frames the new document in
the left (same) frame because frame links, by default, and land in the same frame. If you want the linked
document to appear in the right frame, follow these steps:
1. Add the TARGET = attribute to the anchor tag.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>computer Point Nepal </TITLE>
</HEAD>
<BODY BACKGROUND = “.” BGCOLOR = “#ffffff” TEXT = “#000000” LINK = “#0000ff” VLINK =
“#8000080” ALINK = “#ff000000”>
<IMG SRC = “comput.gif” ALIGN = “.” WIDTH = “200” HEIGHT= “84” BOARDER = “0” ALT = “.”>
<UL>
<LI><A HREF = “first.html” TARGET= “.”>Introduction</A>
<LI><A HERF = “services.html”>Services</A>
<LI><A HERF = “eduction.html”>Education</A>
<LI><A HERF = “software.html”>Software Development</A>
<LI><A HERF = “hardware.html”>Hardware Education</A>
</UL>
</BODY>
</HTML>
2. Add the name of the frame to which you want to link. The initial frameset names right frames “main”
frames, so that’s the name you use.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>computer Point Nepal </TITLE>
</HEAD>
<BODY BACKGROUND = “.” BGCOLOR = “#ffffff” TEXT = “#000000” LINK = “#0000ff” VLINK =
“#8000080” ALINK = “#ff000000”>
<IMG SRC = “comput.gif” ALIGN = “.” WIDTH = “200” HEIGHT= “84” BOARDER = “0” ALT = “.”>
<UL>
<LI><A HREF = “first.html” TARGET= “main”>Introduction</A>
<LI><A HERF = “services.html”>Services</A>
<LI><A HERF = “eduction.html”>Education</A>
<LI><A HERF = “software.html”>Software Development</A>
<LI><A HERF = “hardware.html”>Hardware Education</A>
</UL>
</BODY>
</HTML>
When you click the introduction link, the file appears in the right frame.
Of course, in this particular scenario, each link from this document should open in the main frame.
To save time and reduce the possibility of error, you can ad the TARGET = “main” attribute to the <BASE>
tag and force it to affect the entire document.
The <BASE> tag goes in the document head and sets the rules for the whole document. To set all
links from the document in the left frame to open in the main frame, and the tag and attribute to the
document head as in the following example.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Farmeset//EN”>
<HTML>
<HEAD>
<TITLE>computer Point Nepal </TITLE>
<BASE TARGET = “main”>
</HEAD>
<BODY BACKGROUND = “.” BGCOLOR = “#ffffff” TEXT = “#000000” LINK = “#0000ff” VLINK =
“#8000080” ALINK = “#ff000000”>
<IMG SRC = “comput.gif” ALIGN = “.” WIDTH = “200” HEIGHT= “84” BOARDER = “0” ALT = “.”>
<UL>
<LI><A HREF = “first.html” TARGET= “main”>Introduction</A>
<LI><A HERF = “services.html”>Services</A>
<LI><A HERF = “eduction.html”>Education</A>
<LI><A HERF = “software.html”>Software Development</A>
<LI><A HERF = “hardware.html”>Hardware Education</A>
</UL>
</BODY>
</HTML>

 THE END 