HTML Noter
Uploaded by
PUSAT CollegeHTML Noter
Uploaded by
PUSAT CollegeHTML (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 e 2. 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>£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>£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>£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
You might also like
- It Spring Edutech: Chapter 1: Getting Started With HTMLNo ratings yetIt Spring Edutech: Chapter 1: Getting Started With HTML12 pages
- INTRODUTION TO HTML CODING FOR WEBSITE DESIGN - by Engr Peter A OgbeideNo ratings yetINTRODUTION TO HTML CODING FOR WEBSITE DESIGN - by Engr Peter A Ogbeide45 pages
- Hyper Text Markup Language (HTML) : Unit 5No ratings yetHyper Text Markup Language (HTML) : Unit 512 pages
- Introdution To HTML: Srutipragyan Swain Assistant Professor, Comp - Sc. Department of CSE IMIT, CuttackNo ratings yetIntrodution To HTML: Srutipragyan Swain Assistant Professor, Comp - Sc. Department of CSE IMIT, Cuttack54 pages
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Introduction To Website Design and DevelopmentNo ratings yetIntroduction To Website Design and Development17 pages
- Hypertext Markup Language/Print Version: Before We StartNo ratings yetHypertext Markup Language/Print Version: Before We Start43 pages
- Android The Mobile Operating System and Architecture: SSRN Electronic Journal January 2018No ratings yetAndroid The Mobile Operating System and Architecture: SSRN Electronic Journal January 201813 pages
- Structure of The Program-Bachelor of Technology in Artificial Intelligence (As Approved by The Subject Committee)No ratings yetStructure of The Program-Bachelor of Technology in Artificial Intelligence (As Approved by The Subject Committee)10 pages
- Big Data, Analytics Intelligence, and Data Science: December 2022No ratings yetBig Data, Analytics Intelligence, and Data Science: December 20228 pages
- 03 Finalized Syllabus of 3 Year of The Revised BCA PROGRAMNo ratings yet03 Finalized Syllabus of 3 Year of The Revised BCA PROGRAM29 pages
- Managment-Information-System-Bachelor CaNo ratings yetManagment-Information-System-Bachelor Ca72 pages
- Snapshot of Local Security and Justice Perceptions in Selected Districts of NepalNo ratings yetSnapshot of Local Security and Justice Perceptions in Selected Districts of Nepal70 pages
- MNGNT (Managment) Information Systems BitNo ratings yetMNGNT (Managment) Information Systems Bit73 pages
- MIT Syllabus For Purwanchal University NepalNo ratings yetMIT Syllabus For Purwanchal University Nepal38 pages
- Cat Data Link Circuit - Test: TroubleshootingNo ratings yetCat Data Link Circuit - Test: Troubleshooting6 pages
- PHXT 25 QUOT0563 26 May 2025 Sobha Furniture Industries LLC Ci62 + IQC May 2025No ratings yetPHXT 25 QUOT0563 26 May 2025 Sobha Furniture Industries LLC Ci62 + IQC May 20252 pages
- Started On State Completed On Time Taken Marks Grade Feedback100% (1)Started On State Completed On Time Taken Marks Grade Feedback4 pages
- Chapter 3 - Numerical Descriptive MeasuresNo ratings yetChapter 3 - Numerical Descriptive Measures73 pages
- Modernizing Legacy C++ Code - Gregory and McNellis - CppCon 2014No ratings yetModernizing Legacy C++ Code - Gregory and McNellis - CppCon 201481 pages
- E Peas AEM10941 Datasheet Solar Energy HarvestingNo ratings yetE Peas AEM10941 Datasheet Solar Energy Harvesting25 pages
