HTML 4.0 Tag Reference
by Eric Ladd
This chapter is unique in the book because it is written to
serve as a reference for all the tags included in the
recommended HTML 4.0 standard. It is a one-stop catalog of
each tag, including the tag’s attributes, syntax, and
examples uses. By necessity, the chapter covers a large
amount of information, but you’ll soon come to appreciate
the value of having all the relevant facts about all HTML
tags, together with tips on how to use them, right at your
fingertips.
This chapter covers only the tags included in
the HTML 4.0 Document Type Definition (DTD) as
published by the World Wide Web Consortium
(W3C). Browser-specific extensions to HTML 4.0
are beyond the scope of this chapter, but may be
covered elsewhere in the book. For example, the
<LAYER> tag introduced by Netscape
Communications Corporation is discussed in
detail in Chapter 23, "Introduction to Dynamic
HTML," and Chapter 24, "Advanced Netscape
Dynamic HTML."
For the most up-to-date status of HTML 4.0,
consult http://www.w3.org/TR/PR-html40/, where
you will find links to the most current version
of the standard and the version just prior to
that.
Because of the vast coverage of the chapter, the information
presented has been carefully structured to make it as easy
as possible for you to look up the tags that you need. At
the highest level, the chapter is organized into major
sections that cover a group of related tags. The major
sections include
- Document structure tags
- Text-level formatting tags
- Block-level formatting tags
- List tags
- Hyperlink tags
- Image and imagemap tags
- Table tags
- Form tags
- Frame tags
- Executable content tags
In some cases, tags covered in this chapter get
a more thorough treatment in a later chapter of
the book. Look for cross-references to point you
to this expanded coverage.
Within a given section, several tags are discussed in
detail. Specifically, you’ll find the following information
about each tag:
- The tag’s keyword--For example, the <INPUT> tag’s
keyword is INPUT.
- What kind of tag it is--Every HTML tag is either a
container tag or a standalone tag. A container tag is
one that activates an effect and that has a companion
tag that discontinues the effect. For example, <I> is
a container tag that, together with its companion
closing tag </I>, causes all text found between them
to be rendered in italics. The <I> tag turns on the
italics effect and the </I> tag turns it off.
A standalone tag is one that does not have a
companion tag. For example, the <IMG> tag simply
places an image on a page. <IMG> has no effect that
was turned on and needs to be turned off, so there is
no need for a closing tag.
Note
Standalone tags are sometimes called empty tags.
- The tag’s function--A description of the effect or
page element that the tag controls.
- The tag’s syntax--HTML is derived from the Standard
Generalized Markup Language (SGML) by applying SGML
constructs according to a certain set of rules. These
rules define a tag’s syntax.
- The tag’s attributes--An attribute modifies how a
tag’s effect is applied. Some tags take no
attributes, and others may be able to take several.
Additionally, attributes can sometimes take on only
one of a set number of values. In these cases, the
possible values of the attribute are listed along
with the attribute. Use of some attributes may be
required (such as the SRC attribute for the <IMG>
tag), and use of others may be option. A tag’s
required attributes, if any, are noted in each
attribute discussion.
- Example usage--You can learn more about how a tag
is used by looking over the sample code given in the
tag description.
- Related tags--Some tags work in conjunction with
others to produce an effect. In these cases, you’ll
find a listing of the other HTML tags related to the
one being described. Very often, you’ll find that the
related tags are discussed in the same section.
Within a section, tags are listed alphabetically by keyword,
unless they need to be used in a certain order, in which
case, they are presented in the order that they are
typically used.
Every HTML document has three major components: the HTML
declaration, the head, and the body. The document structure
tags are those that define each component.
<HTML>
Type:
Container
Function:
Declares the document to be an HTML document. All document
content and supporting HTML code goes between the <HTML> and
</HTML> tags.
Syntax:
<HTML> ... </HTML>
Attributes:
None.
Example:
<HTML>
... all content and HTML code goes here ...
</HTML>
Related Tags:
Although the <HTML> tag is typically the first tag in a
document, it is sometimes preceded by a <!DOCTYPE> tag that
specifies what level of HTML conformance the document
displays. A document conforming to the HTML 4.0 standard
might have a <!DOCTYPE> tag that reads:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
Technically, <!DOCTYPE> is an SGML tag, not an HTML tag, so
it is acceptable for it to be outside the <HTML> and </HTML>
tags.
<HEAD>
Type:
Container
Function:
Contains the tags that comprise the document head.
Syntax:
<HEAD> ... </HEAD>
Attributes:
None.
Example:
<HTML>
<HEAD>
... tags making up the document head go here ...
</HEAD>
... all other content and HTML code goes here ...
</HTML>
Related Tags:
A number of tags can be placed between the <HEAD> and
</HEAD> tags, including <BASE>, <ISINDEX>, <LINK>, <META>,
<SCRIPT>, <STYLE>, and <TITLE>. Each of these is described
next.
<BASE>
Type:
Standalone
Function:
Declares global reference values for the HREF and TARGET
attributes. The reference or base HREF value is used as a
basis for computing all relative URL references. The base
TARGET name is used to identify the frame into which all
linked documents should be loaded.
Syntax:
<BASE HREF=”base_url”>
or
<BASE TARGET=”frame_name”>
Attributes:
The <BASE> tag takes either the HREF or the TARGET
attribute. A given <BASE> tag can contain only one of these,
so if you need to specify a base URL and a base target
frame, you need to have two <BASE> tags in the head of your
document. These two attributes work as follows:
- HREF--Specifies the reference URL that is used to
help compute relative URLs. For example, if the BASE
HREF URL is
http://www.myserver.com/sports/hockey/skates.html and
you use the relative URL pucks.html elsewhere in the
document, the relative URL will really point to
http://www.myserver.com/sports/hockey/pucks.html.
- TARGET--Specifies the default frame name to which
all links are targeted.
Note
When used in a <BASE> tag, HREF is typically set
to the URL of the document.
Example:
<HEAD>
<BASE HREF=”http://www.myserver.com/index.html”>
<BASE TARGET=”bigframe”>
...
</HEAD>
This code sets the document’s base URL to
http://www.myserver.com/index.html and the base frame for
targeting hyperlinks to the frame named ”bigframe”.
<ISINDEX>
Type:
Standalone
Function:
Produces a single-line input field used to collect query
information.
Syntax:
<ISINDEX PROMPT=”Please enter the value to search for.”>
Attributes:
The PROMPT attribute specifies what text should appear
before the input field. In the absence of a PROMPT
attribute, the text will read "This is a searchable index.
Enter search criteria:".
Example:
<HEAD>
<ISINDEX PROMPT=”Enter the last name of the employee you want to search for:”>
...
</HEAD>
<ISINDEX> was used in the early days when the
<FORM> tags had yet to come onto the scene. The
W3C has deprecated the <ISINDEX> tag, meaning
that it discourages its use in favor of using
the <FORM> tags and that it expects to drop the
tag from the standard in the future.
<META>
Type:
Standalone
Function:
Defines document meta-information, such as keywords,
expiration date, author, page generation software used, and
many other document-specific items. It also supports the
notion of client pull--a dynamic document technique in
which the browser loads a new document after a specified
delay.
Syntax:
<META HTTP-EQUIV=”header” CONTENT=”value”>
or
<META NAME=”name” CONTENT=”value”>
Attributes:
The <META> tag takes the following attributes:
- HTTP-EQUIV--Specifies a type of HTTP header to be
sent with the document. The value of the header is
given by the CONTENT attribute. The two most commonly
used values of HTTP-EQUIV are REFRESH, which
refreshes the page after a specified delay, and
EXPIRES, which gives the date after which content in
the document is not considered to be reliable.
- NAME--Set equal to the name of the document meta-
variable you want to specify. The value of the
variable is given in the CONTENT attribute. Typical
values for NAME include AUTHOR, KEYWORDS, GENERATOR,
and DESCRIPTION. The KEYWORDS value is particularly
useful for specifying words you’d like a search
engine’s indexing program to associate with the page.
- SCHEME--Provides information on how to interpret
the meta-variable. For example, with the following
<META> tag:
<META SCHEME=”9-digit-ZipCode” NAME=”zip” CONTENT=”02134-1078”>
a browser may not know how to interpret "02134-1078"
without information from the SCHEME attribute.
- CONTENT--Specifies either the HTTP header or the
value of the meta-variable.
Example:
<HEAD>
<!-- The first <META> tag instructs the browser to load a new page after 10 seconds. -->
<!-- This is useful for creating a splash screen effect. -->
<META HTTP-EQUIV=”Refresh” CONTENT=”10, URL=http://www.myserver.com/index2.html”>
<!-- The remaining <META> tags specify author and keyword information. -->
<META NAME=”AUTHOR” CONTENT=”Eric Ladd”>
<META NAME=”KEYWORDS” CONTENT=”Main page, welcome, neat stuff”>
...
</HEAD>
<LINK>
Type:
Standalone
Function:
Denotes the linking relationship between two files.
Syntax:
<LINK HREF=”url_of_linked_file” TITLE=”title” REL=”forward_relationship” REV=”reverse_relationship”>
Attributes:
The <LINK> tag takes the following attributes:
- HREF--Set equal to the URL of the file to which
you’re making the linking reference.
- TITLE--Gives the link a descriptive title.
- REL--Specifies the relationship of the linked file
to the current file.
- REV--Specifies how the current file relates to the
linked file.
Table 3.1 shows some possible values for REL and REV and
what these values mean.
Table 3.1--Possible Values for the REL and REV Attributes
Value Meaning
Copyright Web site’s copyright page
Glossary Glossary of terms for a site
Help Site help page
Home Site home page
Index Site index page
Made mailto URL pointing to the email address of
the page author
Next Page that logically follows the current page
Previous Page that precedes the current page
Stylesheet File containing style information for the
page
TOC Site table of contents
Up Page that is above the current page in a
site’s hierarchy
Because there are so many different types of
linked files, it is permissible to have more
than one <LINK> tag in a document.
Example:
<HEAD>
<LINK HREF=”/style/styles.css” REL=”Stylesheet”>
<LINK HREF=”/index.html” REL=”Home”>
<LINK HREF=”/help.html” REL=”Help”>
<LINK HREF=”back_one.html” REV=”Next”
...
</HEAD>
<SCRIPT>
Type:
Container
Function:
Contains script code referenced in the body of the document.
Syntax:
<SCRIPT LANGUAGE=”scripting_language”>
... script code goes here ...
</SCRIPT>
Attributes:
The <SCRIPT> tag can take the following attributes:
- DEFER--Specifying the DEFER attribute tells the
browser that the script does not generate any
document content. This enables the browser to
continue parsing and rendering the document without
having to execute the script.
- LANGUAGE--Set equal to the scripting language used
to write the script. LANGUAGE is being deprecated in
favor of using the TYPE attribute.
- SRC--Specifies the URL of a file containing the
script code, if not contained between the <SCRIPT>
and </SCRIPT> tags.
- TYPE--Set equal to the MIME type of the script
code, usually text/javascript or text/vbscript. TYPE
is a required attribute under HTML 4.0.
Example:
<SCRIPT LANGUAGE=”VBScript”>
<!--
Sub ScriptEx
document.write(“<HR>”)
document.write(“<H1 ALIGN=CENTER>Thank you for your submission!</H1>”)
document.write(“<HR>”)
</SCRIPT>
Script code is often placed between <!-- and -->
tags so that browsers that can’t process scripts
will treat the code as a comment.
<STYLE>
Type:
Container
Function:
Specifies style information for the document.
Syntax:
<STYLE TYPE=”mime_type” MEDIA=”media_type” TITLE=”title”>
... style information goes here ...
</HTML>
Attributes:
THE <STYLE> tag takes the following three attributes:
- MEDIA--Specifies what media types the styles are to
be used for (visual browser, speech-based browser,
Braille browser, and so on).
- TITLE--Gives the style information a descriptive
title.
- TYPE--Set equal to the Internet content type for
the style language. This means that you will most
likely say TYPE="text/css1" to denote the use of the
style language put forward in the Cascading Style
Sheets, Level 1 specification. TYPE is a required
attribute of the <STYLE> tag.
Example:
<STYLE TYPE=”text/css1”>
<!--
BODY {font: 10 pt Palatino; color: silver margin-left: 0.25 in}
H1 {font: 18 pt Palatino; font-weight: bold}
H2 {font: 16 pt Palatino; font-weight: bold}
P {font: 12 pt Arial; line-height: 14 pt; text-indent: 0.25 in}
-->
</STYLE>
Style information is usually contained between
<!-- and --> tags so that browsers that cannot
process it will treat the style information as a
comment.
<TITLE>
Type:
Container
Function:
Gives a descriptive title to a document. Use of the <TITLE>
tag is required by the HTML 4.0 DTD for many good reasons.
Titles show up in browser window title bars and in bookmark
and history listings. In each of these cases, you provide an
important reader service when you specify a title, because
the browser will display just the document’s URL otherwise.
Additionally, web search engines such as Yahoo! and
AltaVista frequently look for title information when they
index a document.
Syntax:
<TITLE> ... document title goes here ... </TITLE>
Attributes:
None.
Example:
<TITLE>
The Advantages of a Corporate Web Site
</TITLE>
Try to keep titles to 40 characters or less so
that browsers can display them completely.
<BODY>
Type:
Container
Function:
Contains all content and tags that comprise the document
body.
Syntax:
<BODY BGCOLOR=”background_color” BACKGROUND=”background_image”
LINK=”unvisited_link_color” ALINK=”active_link_color”
VLINK=”visited_link_color” TEXT=”text_color”>
... document body goes here ...
</BODY>
Attributes:
The <BODY> tag takes the following attributes, which focus
on global background and coloring properties. Each color-
related attribute can be set equal to one of the sixteen
reserved color names (BLACK, WHITE, AQUA, SILVER, GRAY,
MAROON, RED, PURPLE, FUSCHIA, GREEN, LIME, OLIVE, YELLOW,
NAVY, BLUE, and TEAL) or to an RGB hexadecimal triplet.
- ALINK--Set equal to the color you want to paint
active links (a link is active in the instant that
the user clicks it).
- BACKGROUND--Set equal to the URL of an image to use
in the document background. The image will be
horizontally and vertically tiled if it is not large
enough to fill the entire browser screen.
- BGCOLOR--Set equal to the color you want to paint
the document’s background.
- LINK--Set equal to the color you want to paint
unvisited links (a link is unvisited if a user has
yet to click it).
- TEXT--Set equal to the color you want to paint the
body text of the document.
- VLINK--Set equal to the color you want to paint
visited links (a link is visited if a user has
already clicked it).
All the attributes listed have been deprecated
in favor of using style sheet characteristics to
specify the same information.
Example:
<BODY BGCOLOR=”white” TEXT=”#FF0088” LINK=”#DD0F00” VLINK=”#00FF9A”>
... all document body content and HTML code goes here ...
</BODY>
Related Tags:
Dozens of tags are allowed between the <BODY> and </BODY>
tags. In fact, with the exception of some of the frame-
related tags, any tag in the rest of the chapter can be
placed between <BODY> and </BODY>.
Putting together what you’ve learned in this section, you
can come up with a generic HTML document template such as
the following:
<HTML>
<HEAD>
<TITLE>Document Template</TITLE>
... <META>, <BASE>, <LINK>, <SCRIPT>, <STYLE>, <ISINDEX> tags ...
</HEAD>
<BODY>
... document body content and tags ...
</BODY>
</HTML>
When creating a new document, you can use this code to get
started and then fill in tags and other information
according to your needs.
HTML provides a host of tags that you can use to change how
text is displayed on a browser screen. After all, 12-point
Times Roman gets a little tired after a while, and it’s nice
to give a reader an occasional break from a sea of ordinary
text.
Text-level formatting can occur in one of two ways. An HTML
tag that formats text can make changes to the font
properties of the text (font formatting or physical styles),
or it can describe how the text is being used in the context
of the document (phrase formatting or logical styles). The
next two sections introduce you to the tags used for each
type of formatting.
Font Formatting
<B>
Type:
Container
Function:
Contains text to be rendered in boldface.
Syntax:
<B> ... bold text goes here ... </B>
Attributes:
None.
Example:
<B>Stop!</B> Make sure you activate SSL on your browser before proceeding.
<BASEFONT>
Type:
Standalone
Function:
Sets base size, color, and typeface properties for the body
text font.
Syntax:
<BASEFONT SIZE=”size” COLOR=”color” FACE=”list_of_typefaces”>
Attributes:
<FONT> can take any combination of the following attributes:
- COLOR--Set to any of the 16 reserved, English-
language color names or an RGB hexadecimal triplet.
The default font color is black.
- FACE--Set to a list of typefaces that the browser
should use to render the text. The browser will use
the first face in the list if that face is available.
If not, it will work through the rest of the list and
use the first face it finds available.
- SIZE--Set equal to an integer value between 1 and
7. This number is mapped to a font size in points by
the browser, according to the user’s preferences. The
default SIZE value is 3.
Example:
<BASEFONT SIZE=5 COLOR=”navy” FACE=”Arial,Helvetica,Times”>
Related Tags:
The <FONT> tag is typically used if you need to modify any
of the base font properties specified in the <BASEFONT> tag.
The W3C has deprecated the use of the <BASEFONT>
tag. Specifying font properties, such as size,
color, and typeface, can now be done with style
sheets.
<BIG>
Type:
Container
Function:
Contains text to be rendered in a font size bigger than the
default font size.
Syntax:
<BIG> ... big text goes here ... </BIG>
Attributes:
None.
Example:
It’s <BIG>really</BIG> important that you check this out!
Related Tags:
The <SMALL> tag has the opposite effect (see later in this
chapter).
<FONT>
Type:
Container
Function:
Contains text whose font properties are to be modified.
Syntax:
<FONT SIZE=”size” COLOR=”color” FACE=”list of typefaces”>
... text with modified font properties ...
</FONT>
Attributes:
Note that the <FONT> tag has the same attributes as the
<BASEFONT> tag. <FONT> is used to change font properties
from the base values provided in the <BASEFONT> tag or from
their default values. SIZE can be set to a value between 1
and 7, or it can be set equal to how much larger or smaller
you want the font size to go (-1 for one size smaller, +3
for three sizes larger, and so forth). COLOR and FACE work
exactly as they did for the <BASEFONT> tag.
Example:
<FONT SIZE=+1 COLOR=”red”>Caution:</FONT> You should scan all downloaded
files with a virus checker before executing them.
Related Tags:
<FONT> changes properties specified in the <BASEFONT> tag.
For changing font properties, the <FONT> tag has
been deprecated in favor of style sheets.
<I>
Type:
Container
Function:
Contains text to be rendered in italics.
Syntax:
<I> ... italicized text goes here ... </I>
Attributes:
None.
Example:
My favorite paper is <I>The Wall Street Journal</I>.
<S>, <STRIKE>
Type:
Container
Function:
Contains text to be marked with a strikethrough character.
Syntax:
<S> ... strikethrough text goes here ... </S>
or
<STRIKE> ... strikethrough text goes here ... </STRIKE>
Attributes:
None.
Example:
Content that has been struck from the record will be denoted as
follows: <S>removed content</S>.
Both the <S> and <STRIKE> tags have been
deprecated by the W3C. You should use style
sheets to render strikethrough text instead.
<SMALL>
Type:
Container
Function:
Contains text to be rendered in a font size smaller than the
default font size.
Syntax:
<SMALL> ... smaller text goes here ... </SMALL>
Attributes:
None.
Example:
It’s a <SMALL>small world</SMALL> after all!
Related Tags:
The <BIG> tag has the opposite effect (see the <BIG> tag
section earlier in the chapter).
<SUB>
Type:
Container
Function:
Contains text to be a subscript to the text that precedes
it.
Syntax:
<SUB> ... subscript text goes here ... </SUB>
Attributes:
None.
Example:
In the above equation, x<SUB>1</SUB> and x<SUB>2</SUB> are the unknowns.
<SUP>
Type:
Container
Function:
Contains text to be rendered as a superscript to the text
that precedes it.
Syntax:
<SUP> ... superscript text goes here ... </SUP>
Attributes:
None.
Example:
The area of a square equals s<SUP>2</SUP>, where s is the length of one side.
<TT>
Type:
Container
Function:
Contains text to be rendered in a fixed-width font.
Typically, this font is Courier or some kind of typewriter
font.
Syntax:
<TT> ... text to be in fixed-width font goes here ... <TT>
Attributes:
None.
Example:
The computer will then display the <TT>Login:</TT> prompt.
<U>
Type:
Container
Function:
Contains text to be rendered with an underline.
Syntax:
<U> ... text to be underlined ... </U>
Attributes:
None.
Example:
Longest book I’ve read: <U>War and Peace</U>.
The <U> tag has been deprecated by the W3C. If
you need to underline text, you can do so using
style sheets. However, keep in mind that a user
might confuse your underlined text with
hypertext and try to click it. Also, in keeping
with general typesetting rules, if you italicize
for form or style, you should not underline.
Phrase Formatting
Recall that phrase formatting indicates the meaning of the
text it marks up and not necessarily how the text will be
rendered on the browser screen. Nevertheless, text marked
with a phrase formatting tag will typically have some kind
of special rendering to set it apart from unmarked text.
<ACRONYM>
Type:
Container
Function:
Contains text that specifies an acronym.
Syntax:
<ACRONYM> ... acronym goes here ... </ACRONYM>
Attributes:
None.
Example:
Hypertext Markup Language <ACRONYM>(HTML)</ACRONYM> is derived from the
Standard Generalized Markup Language <ACRONYM>SGML</ACRONYM>.
<ADDRESS>
Type:
Container
Function:
Contains either a postal or electronic mail address. Text
marked with this tag is typically rendered in italics.
Syntax:
<ADDRESS> ... address goes here ... </ADDRESS>
Attributes:
None.
Example:
If you have any comments, please send them to
<ADDRESS>feedback@myserver.com</ADDRESS>.
<CITE>
Type:
Container
Function:
Contains the name of a source from which a passage is cited.
The source’s name is typically rendered in italics.
Syntax:
<CITE> ... citation source goes here ... </CITE>
Attributes:
None.
Example:
According to the <CITE>New York Times</CITE>, crime in the
city is on the decline.
<CODE>
Type:
Container
Function:
Contains chunks of computer language code. Browsers commonly
display text marked with the <CODE> tag in a fixed-width
font.
Syntax:
<CODE> ... code fragment goes here ... </CODE>
Attributes:
None.
Example:
<CODE>
for n = 1 to 10
value(n) = (n++)^2;
</CODE>
<DEL>
Type:
Container
Function:
Contains text that has been deleted from the document. The
tag is intended mainly for documents with multiple authors
and/or editors who would want to see all the content in an
original draft, even though it may have been deleted by a
reviewer.
The idea of logically marking up deleted text is
similar to the idea of using revision marks in
Microsoft Word. When revision marks are turned
on, you can see the deleted text even though it
is technically no longer part of the document.
Syntax:
<DEL> ... deleted text goes here ... </DEL>
Attributes:
None.
Example:
She just got a big<DEL>, huge</DEL> raise.
In this example, the use of the word huge is redundant, so
an astute copy editor would delete it.
Related Tags:
The <INS> tag has a similar function for inserted text.
<DFN>
Type:
Container
Function:
Denotes the defining instance of a term. Internet Explorer
will display text tagged with <DFN> in italics, whereas
Netscape Navigator will not use any special formatting.
Syntax:
<DFN> ... term being introduced goes here ... </DFN>
Attributes:
None.
Example:
Freud proposed the idea of a <DFN>catharsis</DFN> - a release
of psychic tension.
<EM>
Type:
Container
Function:
Contains text to be emphasized. Most browsers render
emphasized text in italics.
Syntax:
<EM> ... emphasized text goes here ... </EM>
Attributes:
None.
Example:
All employees <EM>must</EM> sign their timesheets before submitting them.
<INS>
Type:
Container
Function:
Contains text that has been inserted into the document after
its original draft.
Syntax:
<INS> ... inserted text goes here ... </INS>
Attributes:
None.
Example:
The New World was discovered by <DEL>Magellan</DEL>
<INS>Columbus</INS> in 1492.
Note how <DEL> and <INS> are used together to
strike some text and then insert a correction in
its place.
Related Tags:
The <DEL> tag logically represents deleted text.
<KBD>
Type:
Container
Function:
Contains text that represents keyboard input. Browsers
typically render such text in a fixed-width font.
Syntax:
<KBD> ... keyboard input goes here ... </KBD>
Attributes:
None.
Example:
When prompted for the item code, enter <KBD>179-990A</KBD>.
<Q>
Type:
Container
Function:
Contains a direct quotation to be displayed inline.
Syntax:
<Q CITE=”URL_of_cited_document”> ... quotation goes here ... </Q>
Attributes:
If you’re quoting from an online source, you can set the
CITE attribute equal to the source’s URL.
Example:
<Q>To be or not to be. That is the question.</Q>, he said dramatically.
Related Tags:
The <BLOCKQUOTE> tag can also be used to denote quoted text,
but block quotes are displayed with increased right and left
indents and not in line with the rest of the body text.
<SAMP>
Type:
Container
Function:
Contains text that represents the literal output from a
program. Such output is sometimes referred to as sample
text. Most browsers will render sample text in a fixed-width
font.
Syntax:
<SAMP> ... program output goes here ... </SAMP>
Attributes:
None.
Example:
A common first exercise in a programming course is to write a program
to produce the message <SAMP>Hello World</SAMP>.
<STRONG>
Type:
Container
Function:
Contains text to be strongly emphasized. Browsers typically
render strongly emphasized text in boldface.
Syntax:
<STRONG> ... strongly emphasized text goes here ... </STRONG>
Attributes:
None.
Example:
Do <STRONG>not</STRONG> install the software until you’ve closed
all other running applications.
<VAR>
Type:
Container
Function:
Denotes a variable from a computer program. Variables are
typically rendered in a fixed-width font.
Syntax:
<VAR> ... program variable goes here ... </VAR>
Attributes:
None.
Example:
The <VAR>RecordCount</VAR> variable is set to the number of records
that the query retrieved.
Block-level formatting tags are usually applied to larger
content than the text-level formatting tags. As such, the
block-level tags define major sections of a document, such
as paragraphs, headings, abstracts, chapters, and so on. The
tags profiled in this section are the ones to turn to when
you when you want to define the block-level elements in a
document you’re authoring.
<BLOCKQUOTE>
Type:
Container
Function:
Contains quoted text that is to be displayed indented from
regular body text.
Syntax:
<BLOCKQUOTE CITE=”URL_of_cited_document”> ... quoted text goes here ... </BLOCKQUOTE>
Attributes:
If you’re quoting from an online source, you can set the
CITE attribute equal to the source’s URL.
Example:
Fans of Schoolhouse Rock will always be able to recite the preamble
of the United States Constitution:
<BLOCKQUOTE>
We, the people, in order to form a more perfect Union ...
</BLOCKQUOTE>
Related Tags:
The <Q> tag is used to denote quoted text that is to be
displayed in line with the body text.
<BR>
Type:
Standalone
Function:
Inserts a line break in the document. Carriage returns in
the HTML code do not translate to line breaks on the browser
screen, so authors often need to insert the breaks
themselves. The <BR> tag is indispensable when rendering
text with frequent line breaks, such as addresses or poetry.
Unlike the <P> tag or the heading tags, <BR> adds no
additional vertical space after the break.
Syntax:
<BR CLEAR=”LEFT|RIGHT|ALL”>
Attributes:
The CLEAR attribute tells which margin to break to when
breaking beyond a floating page element such as an image.
Setting CLEAR=”LEFT” breaks to the first line in the left
margin free of the floating object. CLEAR=”RIGHT” breaks to
the first clear right margin, and CLEAR=”ALL” breaks to the
first line in which both the left and right margins are
clear.
Example:
President William Jefferson Clinton<BR>
The White House<BR>
1600 Pennsylvania Avenue NW<BR>
Washington, DC 20500
<CENTER>
Type:
Container
Function:
Centers all text and other page components it contains.
Syntax:
<CENTER> ... centered page components goes here ... </CENTER>
Attributes:
None.
Example:
<CENTER>
<H2>Annual Report to Stockholders</H2>
by Caroline A. Krauss, CEO
</CENTER>
The W3C has deprecated the <CENTER> tag in favor
of using the <DIV> tag (see the following tag)
or style sheets for centering.
<DIV>
Type:
Container
Function:
Defines a section or division of a document that requires a
special alignment.
Syntax:
<DIV ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”>
...
</DIV>
Attributes:
The ALIGN attribute controls how text contained between the
<DIV> and </DIV> tags is aligned. You can set ALIGN equal to
LEFT, RIGHT, CENTER, or JUSTIFY, depending on the kind of
alignment you need.
Example:
<DIV ALIGN=”JUSTIFY”>
This is a fairly long paragraph that should be rendered with non-ragged
left and right margins. HTML authors can accomplish this effect by
setting the ALIGN attribute equal to JUSTIFY. ALIGN=LEFT will make the
text flush left, but the right margin will be ragged.
</DIV>
<HR>
Type:
Standalone
Function:
Places a horizontal line on the page.
Syntax:
<HR ALIGN=”alignment” NOSHADE SIZE=”thickness”
WIDTH=”pixels_or_percentage_of_screen”>
Attributes:
The unmodified <HR> tag places a line, 1 pixel thick, across
the page. The line will have a shading effect to give the
illusion of being three-dimensional. You can change how the
default line is displayed by using combinations of the
following attributes:
- ALIGN--You can set ALIGN equal to LEFT, RIGHT, or
CENTER to change how the horizontal line is aligned
on the page. Note that this matters only when you’ve
changed the width of the line to be something less
than the browser screen width. The default value of
ALIGN is CENTER.
- NOSHADE--Placing the NOSHADE attribute in an <HR>
tag suppresses the shading effect and yields a solid
line.
- SIZE--SIZE controls the thickness of the line. You
set SIZE equal to the number of pixels in thickness
you’d like the line to be.
- WIDTH--A line’s WIDTH can be specified in one of
two ways. You can set it equal to a number of pixels,
or you can set it equal to a percentage of the user’s
browser screen width (or table cell, if you’re
placing a line inside a cell). Because you can’t know
the screen resolution settings of every user, you
should use the percentage approach whenever possible.
Example:
<HR NOSHADE WIDTH=80% SIZE=4>
<DIV ALIGN=”CENTER”><B>Welcome!</B></DIV>
<HR NOSHADE WIDTH=80% SIZE=4>
<H1>[nd]<H6>
Type:
Container
Function:
Establishes a hierarchy of document heading levels. Level 1
has the largest font size. Increasing through the levels
causes the font size to decrease. All headings are rendered
in boldface and have a little extra line spacing built in
above and below them.
Although the headings tags are meant to be used
in a strictly hierarchical fashion, many authors
use them out of sequence to achieve the
formatting effects they want.
Syntax:
<Hn ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”> ... Level n heading ... </Hn>
where n = 1, 2, 3, 4, 5, or 6.
Attributes:
The ALIGN attribute controls how the heading is aligned on
the page. You can set a heading’s alignment to values of
LEFT, RIGHT, CENTER, or JUSTIFY. The default alignment is
LEFT.
Example:
<H1 ALIGN=”CENTER”>Table of Contents</H1>
<H2>Chapter 1 - Introduction</H2>
...
<H2>Chapter 2- Prior Research</H2>
...
<P>
Type:
Container
Function:
Denotes a paragraph. Most browsers ignore the use of
multiple <P> tags to increase the amount of vertical space
in a document.
Syntax:
<P ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”>
paragraph text
</P>
Attributes:
The ALIGN attribute controls how text in the paragraph is
aligned. You can set ALIGN to LEFT (the default), RIGHT,
CENTER, or JUSTIFY.
Example:
<P ALIGN=”CENTER”>
Every line of text in this paragraph is centered,
which probably makes it look somewhat strange
since most people are accustomed to a JUSTIFY alignment
for lots of text.
</P>
<PRE>
Type:
Container
Function:
Denotes text to be treated as preformatted. Browsers render
preformatted text in a fixed-width font. Whitespace
characters, such as spaces, tabs and carriage returns, found
between the <PRE> and </PRE> tags are not ignored. This
makes preformatted text a viable option for presenting
tables of information.
Syntax:
<PRE WIDTH=”width_of_widest_line”>
... preformatted text goes here ...
</PRE>
Attributes:
The <PRE> tag’s WIDTH attribute is set to the number of
characters in the widest line of the preformatted text
block. This information helps some browsers choose the font
size for displaying the text.
Example:
<PRE WIDTH=34>
Catalog No. Item Price
AZ-1390 Polo Shirt $29.99
FT-0081 Sweater $52.99
CL-9334 Belt $16.99
</PRE>
<SPAN>
Type:
Container
Function:
Generic container tag for applying style information.
Syntax:
<SPAN STYLE=”style information”>
range of text over which style is to be applied
</SPAN>
Attributes:
You can set the STYLE attribute to a sequence of as many
characteristic: value pairs as you need to specify the style
information you’re applying. Valid style characteristics are
those put forward in the Cascading Style Sheets Level 1
specification.
Example:
<SPAN STYLE=”font-weight: bold; color: red; text-indent: 0.25 in”>
Here is some bold, red, text that’s indented by one quarter of an inch.
</SPAN>
Technically, HTML lists are a form of block-level
formatting, but because lists are such a useful way of
presenting content, the list tags merit their own section in
the chapter.
HTML 4.0 continues to support five types of lists, although
tags for two of the five have been deprecated. Using the
tags in this section, you can create the following types of
lists:
- Definition lists
- Directory lists
- Menu lists
- Ordered (numbered) lists
- Unordered (bulleted) lists
Most HTML lists make use of the list item tag, <LI>, so this
tag is covered first, followed by the tags you use to create
each type of list.
<LI>
Type:
Container
Function:
Denotes an item in a list.
Syntax:
<LI TYPE=”list_type” START=”start_value”> ... list item goes here ... </LI>
Attributes:
The <LI> tag can take two different attributes:
- START--(Ordered lists only) You can change the
starting value of the numbering sequence from the
default of 1 to any other value you choose.
- TYPE--(Ordered and unordered lists) You can modify
the numbering scheme in an ordered list or the bullet
character in an unordered list by setting TYPE to one
of the different list types available. Ordered list
types include 1 (Arabic numerals), A (uppercase
alphabet), a (lowercase alphabet), I (uppercase Roman
numerals), and i (lowercase Roman numerals). The
unordered list types include DISC (solid circular
bullet), SQUARE (solid square bullet), and CIRCLE
(open circular bullet).
Even if you are not using an Arabic numeral
numbering scheme, you should still set START
equal to a numeric value. Browsers know to map
the START value to any numbering scheme you’ve
specified in a TYPE attribute. For example, the
code:
<LI TYPE=”a” START=”4”>
will produce an ordered list beginning with the
lowercase letter d.
Example:
<LI>Larry</LI>
<LI>Curly</LI>
<LI>Moe</LI>
Related Tags:
The <LI> tag is always used in conjunction with one of the
other HTML list tags: <DIR>, <MENU>, <OL>, and <UL>.
<DIR>
Type:
Container
Function:
Creates a directory listing. Items in a directory list are
bulleted and generally short--usually not more than 20
characters in length. Directory lists were originally
intended for rendering narrow columns of information, such
as indexes or telephone directory listings.
The <DIR> tag has been deprecated by the W3C.
You should use an unordered list (<UL>) instead.
Syntax:
<DIR COMPACT>
<LI>List item 1</LI>
<LI>List item 2</LI>
...
</DIR>
Attributes:
The optional COMPACT attribute instructs a browser to reduce
the spacing between list items so that the list is rendered
in the smallest amount of vertical space possible.
Example:
<DIR>
<LI>Mary Garrison, x521</LI>
<LI>Tom Hinkle, x629</LI>
<LI>Pat Joseph, x772</LI>
</DIR>
Related Tags:
List items in a directory list are specified with the <LI>
tag.
<DL>
Type:
Container
Function:
Denotes a definition list.
Syntax:
<DL COMPACT>
... terms and definitions go here ...
</DL>
Attributes:
The COMPACT attribute is optional and allows you to compress
the list into the smallest vertical space possible on the
browser screen.
Example:
<DL>
<DT>Browser</DT>
<DD>A program that allow a user to view World Wide Web pages</DD>
<DT>Server</DT>
<DD>A program that fields requests for web pages</DD>
</DL>
Related Tags:
Terms in a definition list are specified with the <DT> tag,
and their definitions are specified with the <DD> tag.
<DT>
Type:
Container
Function:
Contains a term to be defined in a definition list.
Some browsers will automatically render a
definition list term in boldface.
Syntax:
<DT> ... term being defined goes here ... </DT>
Attributes:
None.
Example:
<DL>
<DT>Creatine</DT>
<DD>A nutritional supplement that promotes muscle development</DD>
...
</DL>
Related Tags:
Use of the <DT> tag makes sense only in the context of a
definition list (between the <DL> and </DL> tags). The <DD>
tag is used to give the term’s definition.
<DD>
Type:
Container
Function:
Contains a term’s definition. The definition is typically
indented from the term, making it easier for the reader to
see the term-definition structure of the list.
Syntax:
<DD> ... term definition goes here ... </DD>
Attributes:
None.
Example:
<DL>
<DT>HTML</DT>
<DD>A document description language used to author web pages</DD>
...
</DL>
Related Tags:
The <DD> tag should be used only when contained by <DL> and
</DL> tags. A term, specified by a <DT> tag, should precede
each definition.
<MENU>
Type:
Container
Function:
Creates a menu listing. Menu list items are typically
short--usually not more than 20 characters in length. Most
browsers render a menu list in the same way they render a
bulleted list.
The use of menu lists has been deprecated by the
W3C. You should use the unordered list tag
(<UL>) instead.
Syntax:
<MENU COMPACT>
<LI>Menu list item 1</LI>
<LI>Menu list item 2</LI>
...
</MENU>
Attributes:
The optional COMPACT attribute is used to reduce vertical
spacing between list items.
Example:
<MENU COMPACT>
<LI>Hamburgers</LI>
<LI>Hot dogs</LI>
<LI>BBQ chicken</LI>
</MENU>
Related Tags:
List items in a menu listing are specified with the <LI>
tag.
<OL>
Type:
Container
Function:
Creates an ordered or numbered list.
Syntax:
<OL TYPE=”1|A|a|I|i” START=”start_value” COMPACT>
<LI>List item 1</LI>
<LI>List item 2</LI>
...
</OL>
Attributes:
The <OL> tag can take the following attributes:
- COMPACT--Instructs the browser to reduce vertical
spacing between list items.
- START--You can change to a position other than the
first position in the ordering scheme by using the
START attribute. For example, setting START to 3 with
TYPE set equal to I produces a list that begins
numbering with III (3 in uppercase Roman numerals).
- TYPE--Controls the numbering scheme used when
rendering the list. The default value of 1 indicates
the use of Arabic numerals, but you can also choose
from uppercase letters (A), lowercase letters (a),
uppercase Roman numerals (I), or lowercase Roman
numerals (i).
Example:
Book Outline
<OL TYPE=”A”>
<LI>HTML</LI>
<LI>Dynamic HTML</LI>
<LI>Java</LI>
<LI>JavaScript</LI>
</OL>
Related Tags:
List items in an ordered list are specified with the <LI>
tag.
<UL>
Type:
Container
Function:
Creates an unordered or bulleted list.
Syntax:
<UL TYPE=”DISC|SQUARE|CIRCLE” COMPACT>
<LI>List item 1</LI>
<LI>List item 2</LI>
...
</UL>
Attributes:
The <UL> tag can take the following attributes:
- COMPACT--Reduces the vertical spacing between list
items.
- TYPE--Allows you to specify which bullet character
to use when rendering the list. This can be helpful
when nesting bulleted lists because browsers have a
default progression of bulleted characters that they
use. You can override the browser’s choice of bullet
characters in the nested lists by using TYPE.
Example:
Web Browsers
<UL TYPE=”SQUARE”>
<LI>Netscape Navigator</LI>
<LI>Microsoft Internet Explorer</LI>
<LI>NCSA Mosaic</LI>
</UL>
Related Tags:
List items in an unordered list are specified with the <LI>
tag.
The capability of linking web resources makes the web so
fascinating. By following links, you can be looking up job
opportunities one moment and then be reading up on the
latest mixed drink recipes the next! Linking between
documents is accomplished with the one simple tag described
in this section.
<A>
Type:
Container
Function:
The <A> tag can do one of two things, depending on which
attributes you use. Used with the HREF attribute, the <A>
tag sets up a hyperlink from whatever content is found
between the <A> and </A> tags and the document at the URL
specified by HREF. When you use the <A> tag with the NAME
attribute, you set up a named anchor within a document that
can be targeted by other hyperlinks. This helps make
navigating a large document easier because you can set up
anchors at the start of major sections and then place a set
of links at the top of the document that point to the
anchors at the beginning of each section.
Hypertext links are typically colored and
underlined. A linked graphic will be rendered
with a colored border. If you don’t want a
border around your linked image, be sure to
specify BORDER=0 in the <IMG> tag you use to
place the image.
Syntax:
<!-- Setting up a hyperlink -->
<A HREF=”URL_of_linked_document” TARGET=”frame_name”
REL=”forward_link_type” REV=”reverse_link_type”
ACCESSKEY=”key_letter” TABINDEX=”tab_order_position”>
... hyperlinked element goes here ...
</A>
or
<!-- Setting up a named anchor -->
<A NAME=”anchor_name”>
... text to act as named anchor ...
</A>
Attributes:
The <A> tag can take a host of attributes, including
- ACCESSKEY--An access key is a shortcut key a reader
can use to activate the hyperlink. For example, if
you set the access key to the letter “C”, Windows
users can press Alt+C on their keyboards to activate
the link.
- HREF--Gives the URL of the web resource to which
the hyperlink should point.
- NAME--Specifies the name of the anchor being set
up.
- REL--Describes the nature of the forward link (see
Table 3.1 for possible values).
- REV--Describes the nature of the reverse link (see
Table 3.1 for possible values).
- TABINDEX--Specifies the link's position in the
document’s tabbing order.
- TARGET--Tells the browser which frame the linked
document should be loaded into.
Examples:
The following code sets up a simple hyperlink:
You can learn more about our
<A HREF=”prodserv.html TARGET=”main” ACCESSKEY=”P”>
products and services </A> as well.
To follow the link, a user can click the hypertext products
and services or press Alt+P (on a Windows machine) or Cmd+P
(on a Macintosh).
This code establishes a named anchor within a document:
...
<A NAME=”toc”>
<H1>Table of Contents</H1>
</A>
...
With the anchor set up, you can point a hyperlink to it by
using code such as this:
<A HREF=”index.html#toc”>Back to the Table of Contents</A>
Without images, the web would just be another version of
Gopher. Web graphics gives pages powerful visual appeal and
often adds significantly to the messages that authors are
trying to convey.
Placing an image on a page is as simple as using the HTML
<IMG> tag. In its most basic form, the <IMG> tag needs only
one attribute to do its job. However, <IMG> supports as many
as ten different attributes that you can use to modify how
the image is presented.
<IMG>
Type:
Standalone
Function:
Places an inline image into a document.
Syntax:
<IMG SRC=”URL_of_image_file”
WIDTH=”width_in_pixels” HEIGHT=”height_in_pixels”
ALT=”text_description” BORDER=”thickness_in_pixels”
ALIGN=”TOP|MIDDLE|BOTTOM|LEFT|RIGHT”
HSPACE=”horizontal_spacing_in_pixels”
VSAPCE=”vertical_spacing_in_pixels”
ISMAP USEMAP=”map_name”>
Attributes:
As you can see from the tag’s syntax, <IMG> can take several
attributes (each attribute is described in detail in this
section):
- SRC--Specifies the URL of the file containing the
image.
- WIDTH and HEIGHT--Gives the width and height of the
image in pixels. Specifying this information in the
tag means that the browser can allot space for the
image and then continue laying out the page while the
image file loads.
- ALT--A text-based description of the image content.
Using ALT is an important courtesy to users with
nonvisual browsers or with image loading turned off.
- BORDER--Controls the thickness of the border around
an image. An image has no border by default. However,
a hyperlinked image will be rendered with a colored
border. If you don’t want the border to appear around
your image, you need to set BORDER=0.
- ALIGN--Controls how text flows around the image.
TOP, MIDDLE, and BOTTOM alignment aligns text
following the image with the top, middle, or bottom
of the image, respectively. However, once the text
reaches the end of the current line, it will break to
a position below the image. If you want text to wrap
around the entire image, you need to use the LEFT or
RIGHT values of the ALIGN attribute to float the
image in the left or right margin. Text will wrap
smoothly around a floated image.
- HSPACE and VSPACE--Controls the amount of
whitespace left around the image. HSPACE is set to
the number of whitespace pixels to use on the left
and right sides of the image. VSPACE controls the
number of whitespace pixels left above and below the
image.
- ISMAP--Identifies the image as being used as part
of a server-side imagemap.
- USEMAP--Set equal to the name of the client-side
imagemap to be used with the image.
Example:
<IMG SRC=”/images/logo.gif” WIDTH=600 HEIGHT=120
ALT=”Welcome to XYZ Corporation” USEMAP=”#main”
VSPACE=10>
One popular use of images is to set up
imagemaps--clickable images that take users to different
URLs, depending on where they click. Imagemaps are popular
page elements on many sites because they provide users with
an easy-to-use graphical interface for navigating the site.
Imagemaps come in two flavors: server-side and client-side.
When a user clicks on a server-side imagemap, the
coordinates of the click are sent to the server, where a
program processes them to determine which URL the browser
should load. To accomplish this, the server needs to have
access to a file containing information about which regions
on the image are clickable and with which URLs those regions
should be paired.
With client-side imagemaps, the client (browser) processes
the coordinates of the user’s click, rather than passing
them to the server for processing. This is a much more
efficient approach because it reduces the computational load
on the server and eliminates the opening and closing of
additional HTTP connections. In order for the browser to be
able to process a user’s click, it has to have access to the
same information about the clickable regions and their
associated URLs as the server does when processing a server-
side imagemap. The method of choice for getting this
information to the client is to pass it in an HTML
file--usually the file that contains the document with the
imagemap, although it does not necessarily have to be this
way. HTML 4.0 supports two tags that enable you to store
imagemap data in your HTML files: <MAP> and <AREA>. A
discussion of these tags rounds out the coverage in this
section.
<MAP>
Type:
Container
Function:
Contains HTML tags that define the clickable regions (hot
regions) of an imagemap.
Syntax:
<MAP NAME=”map_name”>
... hot region definitions go here ...
</MAP>
Attributes:
The NAME attribute gives the map information a unique name
so it can be referenced by the USEMAP attribute in the <IMG>
tag that places the imagemap graphic.
Example:
<MAP NAME=”navigation”>
<AREA SHAPE=”RECT” COORDS=”23,47,58,68” HREF=”search.html”>
<AREA SHAPE=”CIRCLE” COORDS=”120,246,150,246” HREF=”about.html”>
...
</MAP>
With the imagemap data defined by the map named navigation,
you would reference the map in an <IMG> tag as follows:
<IMG SRC=”navigation.gif” USEMAP=”#navigation”>
If the map were stored in a file different from the
document’s HTML file, you would reference it this way:
<IMG SRC=”navigation.gif” USEMAP=”maps.html#navigation”>
Related Tags:
The <AREA> tag is used to define the individual hot regions
in the imagemap. The named map is referenced by the USEMAP
attribute of the <IMG> tag.
<AREA>
Type:
Standalone
Function:
Defines a hot region in a client-side imagemap.
Syntax:
<AREA SHAPE=”RECT|CIRCLE|POLY|DEFAULT” COORDS=”coordinate_list”
HREF=”URL_of_linked_document” TARGET=”frame_name”
ALT=”text_alternative” TABINDEX=”tab_order_position” NOHREF>
Attributes:
The <AREA> tag takes a number of attributes, including
- ALT--Provides a text alternative for the hot region
in the event that the image does not load or the user
has image-loading turned off. ALT text is also used
by spoken-word browsers for the visually impaired.
- COORDS--Specifies the coordinates that define the
hot region. Coordinates are given as a list of
numbers, separated by commas. No coordinates are
needed when specifying a DEFAULT region.
- HREF--Set equal to the URL of the document to
associate with the hot region.
- NOHREF--Using the NOHREF attribute in an <AREA> tag
essentially deactivates the hot region by having it
point to nothing.
- SHAPE--Specifies the shape of the hot region being
defined. Possible values of SHAPE include RECT for
rectangles, CIRCLE for circles, POLY for polygons,
and DEFAULT for any point on the image not part of
another hot region.
- TABINDEX--Defines the hot region’s position in the
tabbing order of the page.
- TARGET--Specifies into which frame to load the
linked document.
Each type of hot region has a specific number of
coordinate points that you need to specify to
completely define the hot region. A rectangular
region is defined by the coordinates of the
upper-left and lower-right corners, a circular
region by the coordinates of the center point
and a point along the edge of the region, and a
polygonal region by the coordinates of the
polygon’s vertices.
Example:
<MAP NAME=”main”>
<AREA SHAPE=”POLY” COORDS=”35,80,168,99,92,145” HREF=”profile.html”>
<AREA SHAPE=”CIRCLE” COORDS=”288,306,288,334” HREF=”feedback.html”>
<AREA SHAPE=”DEFAULT” HREF=”index.html”>
</MAP>
Related Tags:
<AREA> tags are allowable only between <MAP> and </MAP>
tags.
HTML table are not only a great way to present information,
but a useful layout tool as well. HTML 4.0 expands the table
tags in several important ways:
- Support for rendering parts of the frame around a
table, rather than "all or nothing."
- Control over which boundaries to draw between cells.
- Table header, body, and footer sections can be
defined as separate entities.
<TABLE>
Type:
Container
Function:
Contains all HTML tags that comprise a table.
Syntax:
<TABLE ALIGN=”LEFT|CENTER|RIGHT” BORDER=”thickness_in_pixels”
BGCOLOR=”color” WIDTH=”pixels_or_percentage_of_browser_width”
COLS=”number_of_columns” CELLPADDING=”pixels” CELLSPACING=”pixels”
FRAME=”outer_border_rendering” RULES=”inner_border_rendering”>
...
</TABLE>
Attributes:
The <TABLE> tag can take the following attributes to modify
how the table is presented:
Example:
<TABLE BORDER=2 CELLPADDING=4 FRAME=BORDER RULES=ALL ALIGN=CENTER>
...
</TABLE>
Related Tags:
The <TABLE> and </TABLE> tags form the container for all the
other table-related tags. The many tags you can use between
<TABLE> and </TABLE> include <CAPTION>, <THEAD>, <TFOOT>,
<TBODY>, <COLGROUP>, <COL>, <TR>, <TH>, and <TD>.
<CAPTION>
Type:
Container
Function:
Specifies a caption for a table.
Syntax:
<CAPTION ALIGN=”TOP|BOTTOM|LEFT|RIGHT”>
... caption text goes here ...
</CAPTION>
Attributes:
The ALIGN attribute gives you fine control over how the
caption is placed. Setting ALIGN to TOP or BOTTOM places the
caption above or below the table, respectively. Using LEFT
or RIGHT floats the caption in the left or right margin.
Example:
<CAPTION ALIGN=”BOTTOM”>
Table 3 - Experiment Results
</CAPTION>
<THEAD>
Type:
Container
Function:
Defines the header section of a table. Being able to define
the header separately allows the browser to duplicate the
header when breaking the table across multiple pages.
Syntax:
<THEAD ALIGN=”LEFT|CENTER|RIGHT|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”>
... rows that comprise the header ...
</THEAD>
Attributes:
The <THEAD> tag can take the following two attributes:
- ALIGN--Controls the horizontal alignment within the
cells of the table header. ALIGN can take on values
of LEFT, RIGHT, CENTER, or JUSTIFY.
- VALIGN--Controls the vertical alignment in the
header cells. VALIGN can take on values of TOP,
MIDDLE, BOTTOM, or BASELINE.
Example:
<THEAD ALIGN=”CENTER” VALIGN=”BASELINE”>
<TR>
<TH>Catalog Number</TH>
<TH>Item</TH>
<TH>Price</TH>
...
</TR>
</THEAD>
Related Tags:
The rows of the table header are built with <TR>, <TH>, and
<TD> tags.
<TFOOT>
Type:
Container
Function:
Defines the footer section of the table.
Syntax:
<TFOOT ALIGN=”LEFT|CENTER|RIGHT|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”>
...
</TFOOT>
Attributes:
<TFOOT> can take the same ALIGN and VALIGN attributes as the
<THEAD> tag:
- ALIGN--Controls the horizontal alignment within the
cells of the table footer. ALIGN can take on values
of LEFT, RIGHT, CENTER, or JUSTIFY.
- VALIGN--Controls the vertical alignment in the
footer cells. VALIGN can take on values of TOP,
MIDDLE, BOTTOM, or BASELINE.
Example:
<TFOOT ALIGN=”JUSTIFY” VALIGN=”TOP”>
<TR>
<TD><I>Source:</I> The Washington Post, 9/22/97</TD>
...
</TR>
</TFOOT>
Related Tags:
You specify the rows and cells in the table footer by using
the <TR>, <TH>, and <TD> tags.
<TBODY>
Type:
Container
Function:
Defines the body section of the table.
Syntax:
<TBODY ALIGN=”LEFT|CENTER|RIGHT|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”>
...
</TBODY>
Attributes:
<TBODY> can take the following attributes:
- ALIGN--Controls the horizontal alignment within the
cells of the table body. ALIGN can take on values of
LEFT, RIGHT, CENTER, or JUSTIFY.
- VALIGN--Controls the vertical alignment in the body
cells. VALIGN can take on values of TOP, MIDDLE,
BOTTOM, or BASELINE.
Example:
<TBODY ALIGN=”LEFT” VALIGN=”BASELINE”>
<TR>
<TD>Brenda Lynn</TD>
<TD>SD-4949</TD>
<TD>x619</TD>
...
</TR>
</TBODY>
Related Tags:
You specify the rows and cells in the table body by using
the <TR>, <TH>, and <TD> tags.
<COLGROUP>
Type:
Container
Function:
Groups a set of columns so that properties may be assigned
to all columns in the group rather than to each one
individually.
Syntax:
<COLGROUP SPAN=”number_of_columns” WIDTH=”width_of_column_group”
ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”>
...
</COLGROUP>
The <COLGROUP> and </COLGROUP> tags have no content or code
between them if the properties put forward in the <COLGROUP>
tag are to apply to each column in the group. You can also
use the <COL> tag between <COLGROUP> and </COLGROUP> to
specify column properties for a subgroup of the larger
group.
Attributes:
<COLGROUP> can take the following attributes:
- ALIGN--Controls the horizontal alignment within the
column group. ALIGN can take on values of LEFT,
RIGHT, CENTER, or JUSTIFY.
- SPAN--Tells the browser how many columns are in the
group.
- VALIGN--Controls the vertical alignment in the
column group. VALIGN can take on values of TOP,
MIDDLE, BOTTOM, or BASELINE.
- WIDTH--Specifies how wide (in pixels or in terms of
relative width) the enclosed columns should be.
Example:
<COLGROUP SPAN=3 ALIGN=”CENTER” VALIGN=”TOP”>
</COLGROUP>
<TR>
<TD>Column 1 - center/top alignment</TD>
<TD>Column 2 - center/top alignment</TD>
<TD>Column 3 - center/top alignment</TD>
<TD>Column 4 - default alignment</TD>
</TR>
</TFOOT>
Related Tags:
The <COL> tag can be used between the <COLGROUP> and
</COLGROUP> tags to refine column properties for a subset of
the column group.
<COL>
Type:
Standalone
Function:
Specifies properties for a column or columns within a group.
Syntax:
<COL SPAN=”number_of_columns” WIDTH=”width_of_column_subgroup”
ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”>
Attributes:
<COL> can take the following attributes:
- ALIGN--Controls the horizontal alignment within the
column cells. ALIGN can take on values of LEFT,
RIGHT, CENTER, or JUSTIFY.
- SPAN--Tells the browser how many columns to which
to apply the property.
- VALIGN--Controls the vertical alignment in the
column cells. VALIGN can take on values of TOP,
MIDDLE, BOTTOM, or BASELINE.
- WIDTH--Specifies the width (in pixels or in terms
of relative width) of the column or column group.
Example:
<TABLE BORDER=1>
<COLGROUP>
<COL ALIGN=CENTER>
<COL ALIGN=RIGHT>
</COLGROUP>
<COLGROUP>
<COL ALIGN=CENTER SPAN=2>
</COLGROUP>
<TBODY>
<TR>
<TD>First column in first group, center aligned</TD>
<TD>Second column in first group, right aligned</TD>
<TD>First column in second group, center aligned</TD>
<TD>Second column in second group, center aligned</TD>
</TR>
</TBODY>
</TABLE>
<TR>
Type:
Container
Function:
Defines a row of a table, table header, table footer, or
table body.
Syntax:
<TR BGCOLOR=”color” ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”
VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”>
...
</TR>
Attributes specified in a <TR> tag apply only to the row
that the tag is defining and will override any default
values.
Attributes:
The <TR> tag can take the following attributes:
- ALIGN--Controls the horizontal alignment within the
cells in the row. ALIGN can take on values of LEFT,
RIGHT, CENTER, or JUSTIFY.
- BGCOLOR--Controls the background color of cells in
the row. You may set BGCOLOR equal to one of the 16
reserved color names or to a hexadecimal triplet
describing the desired color.
- VALIGN--Controls the vertical alignment of the
cells in the row. VALIGN can take on values of TOP,
MIDDLE, BOTTOM, or BASELINE.
Example:
<TR BGCOLOR=”white” VALIGN=”TOP”>
<TD>Cell #1</TD>
<TD>Cell #2</TD>
...
</TR>
Related Tags:
Cells in a row are defined using the <TD> or <TH> tags.
<TD>, <TH>
Type:
Container
Function:
Defines a cell in a table. <TH> creates a header cell whose
contents will be rendered in boldface and with a centered
horizontal alignment. <TD> creates a regular data cell whose
contents are aligned flush left and in a normal font weight.
Vertical alignment for both types of cells is MIDDLE by
default.
Syntax:
<TD ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”
BGCOLOR=”color” NOWRAP ROWSPAN=”number_of_rows”
COLSPAN=”number_of_columns”>
or
<TH ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY” VALIGN=”TOP|MIDDLE|BOTTOM|BASELINE”
BGCOLOR=”color” NOWRAP ROWSPAN=”number_of_rows”
COLSPAN=”number_of_columns”>
Attributes:
Both the <TH> and <TD> tags can take the following
attributes:
- ALIGN--Controls the horizontal alignment within the
cell. ALIGN can take on values of LEFT, RIGHT,
CENTER, or JUSTIFY.
- BGCOLOR--Controls the background color of the cell.
You may set BGCOLOR equal to one of the 16 reserved
color names or to a hexadecimal triplet describing
the desired color.
- COLSPAN--Specifies the number of columns the cell
should occupy.
- NOWRAP--Suppresses text wrapping within the cell.
- ROWSPAN--Specifies the number of rows the cell
should occupy.
- VALIGN--Controls the vertical alignment of the
cell. VALIGN can take on values of TOP, MIDDLE,
BOTTOM, or BASELINE.
Example:
<TR VALIGN=”BOTTOM”>
<TH>Column 1 - center/bottom alignment</TH>
<TD VALIGN=”MIDDLE”>Column 2 - left/middle alignment</TD>
<TD ALIGN=”JUSTIFY”>Column 3 - justify/bottom alignment</TD>
<TD COLSPAN=2>Columns 4 and 5 - left/bottom alignment</TD>
</TR>
HTML forms are a web surfer’s gateway to interactive
content. Forms collect information from a user, and then a
script or program on a web server uses the information to
compose a custom response to the form submission.
For all the form controls that are available to you as a
document author, there are surprisingly few tags you need to
know to produce them. These tags, together with some new
tags introduced in the HTML 4.0 spec that improve form
accessibility for the disabled, are covered in this section.
<FORM>
Type:
Container
Function:
Contains the text and tags that comprise an HTML form.
Syntax:
<FORM ACTION=”URL_of_processing_script” METHOD=”GET|POST”
TARGET=”frame_name” ENCTYPE=”MIME_type_of_file_to_upload”
ACCEPT-CHARSET=”acceptable_character_sets”>
...
</FORM>
The <FORM> tag and its attributes are sometimes referred to
as the form header.
Attributes:
The <FORM> tag takes the following attributes:
- ACCEPT-CHARSET--Set equal to a list of character
sets that the form's processing script can handle.
- ACTION--Set equal to the URL of the script or
program that will process the form data. ACTION is a
required attribute of the <FORM> tag.
- ENCTYPE--Used when you’re expecting a file upload
as part of the form data submission and is set equal
to the expected MIME type of the file.
- METHOD--Refers to the HTTP method used to send the
form data to the server. The default METHOD is GET,
which appends the data to the end of the processing
script URL. If you set METHOD="POST", the form data
will be sent to the server in a separate HTTP
transaction.
- TARGET--Allows you to target the response from the
processing script or program to a specific frame.
Example:
<FORM ACTION=”/cgi-bin/addentry.pl” METHOD=”POST” TARGET=”response”>
...
</FORM>
Related Tags:
The following tags are valid only when used between the
<FORM> and </FORM> tags: <INPUT>, <SELECT>, <OPTION>,
<TEXTAREA>, <BUTTON>, <LABEL>, <FIELDSET>, and <LEGEND>.
Each of these tags is described in this section.
<INPUT>
Type:
Standalone
Function:
Places one of the following form controls:
- Text, password, or hidden fields
- Check boxes
- Radio buttons
- File upload fields
- Image-based buttons
- Scripted buttons
- Submit and reset buttons
Syntax:
<!-- Text and password fields -->
<INPUT TYPE=”TEXT|PASSWORD” NAME=”field_name” VALUE=”default_value”
SIZE=”field_size” MAXLENGTH=”maximum_input_length”
DISABLED READONLY>
or
<!-- Hidden field -->
<INPUT TYPE=”HIDDEN” NAME=”field_name” VALUE=”field_value”>
or
<!-- Checkbox -->
<INPUT TYPE=”CHECKBOX” NAME=”field_name” VALUE=”field_value”
CHECKED DISABLED>
or
<!-- Radio button -->
<INPUT TYPE=”RADIO” NAME=”field_name” VALUE=”field_value”
CHECKED DISABLED>
or
<!-- File upload -->
<INPUT TYPE=”FILE” NAME=”field_name” VALUE=”default_value”
ACCEPT=”acceptable_MIME_types” DISABLED>
or
<!-- Image-based button -->
<INPUT TYPE=”IMAGE” SRC=”URL_of_image_file” ALT=”text_description”
ALIGN=”TOP|MIDDLE|BOTTOM|LEFT|RIGHT” USEMAP=”map_name” DISABLED>
or
<!-- Scripted button -->
<INPUT TYPE=”BUTTON” VALUE=”button_label” onclick=”script_name”
DISABLED>
or
<!-- Submit/reset button -->
<INPUT TYPE=”SUBMIT|RESET” VALUE=”button_label” DISABLED>
Attributes:
The <INPUT> tag is easily the most versatile of all the HTML
tags. It has a large number of attributes, although not all
are applicable in every situation. The following list
examines each variant of the <INPUT> tag (which corresponds
to changing values of the TYPE attribute) and notes what
each applicable attribute does in that situation.
- Text and password fields
(TYPE=”TEXT|PASSWORD”)--The NAME attribute gives
the input field a unique name so it can be identified
by the processing script. The VALUE attribute is
appropriate for a text field when you want to
prepopulate the field with a default value. LENGTH is
set equal to the number of characters wide the input
field should be on screen. MAXLENGTH sets an upper
limit on how many characters long the input from the
field can be. The DISABLED attribute deactivates the
field, and READONLY leaves the field active while
disallowing the user from typing any new input into
it.
- Hidden fields (TYPE=”HIDDEN”)--NAME and VALUE
specify the name of the field and the value to pass
to the server.
- Check box (TYPE=”CHECKBOX”)--NAME gives the check
box field a unique name, and VALUE is set equal to
the value you want passed to the server if the box is
checked. Including CHECKED makes the box preselected,
and DISABLED disables the check box altogether.
- Radio buttons (TYPE=”RADIO”)--NAME gives a name to
the entire set of radio buttons. All buttons can have
the same NAME because their corresponding VALUEs have
to be mutually exclusive options. The CHECKED
attribute preselects a radio button and DISABLED
shuts down the radio button.
- File upload (TYPE=”FILE”)--NAME gives the field a
unique name, and VALUE is set to the default value of
the field (presumably a filename). The ACCEPT
attribute provides a set of acceptable MIME types for
upload. Specifying the DISABLED attribute deactivates
the field.
- Image-based button (TYPE=”IMAGE”)--The SRC
attribute tells the browser where it can find the
image file for the button. ALT provides a text-based
alternative to the image should the image file not be
available. You can use ALIGN to control how the image
is aligned on the page. USEMAP is set equal to a
client-side imagemap name, allowing you to take
different actions, depending on where the user
clicks. Using the DISABLED attribute shuts off the
button.
- Scripted button (TYPE=”BUTTON”)--Whatever you
specify for the VALUE attribute will be the text that
appears on the face of the button. The onclick
attribute is set equal to the name of the script that
is to execute when the button is clicked. If you
specify the DISABLED attribute, the scripted button
will be deactivated.
- Submit and reset buttons (TYPE=”SUBMIT|RESET”)--The
VALUE attribute specifies what text to place on the
button. If DISABLED, the submit or reset button will
be turned off.
Example:
<FORM ACTION=”/cgi-bin/bigform.cgi”>
Login Name: <INPUT TYPE=”TEXT” NAME=”login” SIZE=12>
Password: <INPUT TYPE=”PASSWORD” NAME=”passwd” SIZE=12>
<INPUT TYPE=”HIDDEN” NAME=”browser” VALUE=”IE4”>
Sex: <INPUT TYPE=”RADIO” NAME=”sex” VALUE=”F”>Female
<INPUT TYPE=”RADIO” NAME=”sex” VALUE=”M”>Male
<INPUT TYPE=”BUTTON” VALUE=”Check data” onclick=”validate()”>
<INPUT TYPE=”SUBMIT” VALUE=”Login”>
<INPUT TYPE=”RESET” VALUE=”Clear”>
</FORM>
<SELECT>
Type:
Container
Function:
Sets up a list of choices from which a user can select one
or many.
Syntax:
<SELECT NAME=”field_name” SIZE=”visible_rows” MULTIPLE DISABLED>
...
</SELECT>
Attributes:
You can use the following attributes with the <SELECT> tag:
- DISABLED--Deactivates the field.
- MULTIPLE--Allows the user to choose more than one
of the options by holding down the Ctrl key and
clicking.
- NAME--Gives the field a unique name so it can be
identified by the processing script.
- SIZE--Set equal to the number of options that
should be visible on the screen.
If you set SIZE=1 and don’t specify MULTIPLE,
the field will be displayed as a drop-down list.
Otherwise, the field appears as a scrollable
list of options.
Example:
<SELECT NAME=”toppings” SIZE=5 MULTIPLE>
<OPTION>Mushrooms</OPTION>
<OPTION>Onions</OPTION>
<OPTION>Sausage</OPTION>
...
</SELECT>
Related Tags:
Individual options in the list are specified using the
<OPTION> tag.
<OPTION>
Type:
Container
Function:
Defines an option in a <SELECT> field listing.
Syntax:
<OPTION VALUE=”option_value” SELECTED DISABLED>
... option text ...
</OPTION>
Attributes:
The <OPTION> tag takes the following attributes:
- DISABLED--Makes the option unavailable.
- SELECTED--Preselects an option.
- VALUE--Specifies a value to pass to the browser if
the option is select. If no VALUE is given, the
browser will pass the option text to the server for
processing.
Example:
<SELECT NAME=”state” SIZE=5>
<OPTION VALUE=”AL”>Alabama</OPTION>
<OPTION VALUE=”NM” SELECTED>New Mexico</OPTION>
<OPTION VALUE=”OK”>Oklahoma</OPTION>
...
</SELECT>
Related Tags:
The <OPTION> tag is valid only between the <SELECT> and
</SELECT> tags.
<TEXTAREA>
Type:
Container
Function:
Sets up a multiple-line text input window.
Syntax:
<TEXTAREA NAME=”field_name” ROWS=”number_of_rows”
COLS=”number_of_columns” DISABLED READONLY>
... default text to appear in window ...
</TR>
Attributes:
The <TEXTAREA> tag can take the following attributes:
- COLS--Set equal to the number of columns wide the
text window should be.
- DISABLED--Deactivates the text window.
- NAME--Assigns a unique name to the input window so
that the processing program can identify it.
- READONLY--Leaves the window active, but the user
will not be able to change the default text that is
displayed.
- ROWS--Set equal to the number of rows high the text
window should be.
Example:
<TEXTAREA NAME=”feedback” ROWS=10 COLS=40>
We appreciate your comments! Please delete this
text and type in your feedback.
</TEXTAREA>
<BUTTON>
Type:
Container
Function:
Places a button on the form. This type of button is
different from the one rendered by <INPUT> because it has
improved presentation features, such as three-dimensional
rendering and up/down movement when clicked.
Syntax:
<BUTTON TYPE=”SUBMIT|RESET” NAME=”button_name” VALUE=”button_value”
DISABLED>
... text for button face or <IMG> tag ...
</BUTTON>
If there is text between the <BUTTON> and </BUTTON> tags,
that text will appear on the face of the button. If there is
an <IMG> tag between <BUTTON> and </BUTTON>, the image will
be used as the button.
Attributes:
You can use the following attributes with the <BUTTON> tag:
- DISABLED--Disables the button.
- NAME--Gives the button a unique name.
- TYPE--Set to SUBMIT or RESET, depending on the type
of button you’re defining.
- VALUE--Specifies what is passed to the server when
the button is clicked.
Example:
<BUTTON NAME=”secure_connect” VALUE=”secure”>
<IMG SRC=”images/clickme.gif”>
</BUTTON>
<LABEL>
Type:
Container
Function:
Denotes a form field label. Labels are typically text next
to the field that prompts the user for the type of input
expected. This works fine for text-based browsers, but it
makes forms inaccessible for users who are visually impaired
and who use speech-based or Braille browsers. Marking field
labels with the <LABEL> tag makes it possible to prompt
these users for the necessary input.
Syntax:
<LABEL FOR=”field_ID” ACCESSKEY=”shortcut_key” DISABLED>
... label text goes here ...
</LABEL>
Attributes:
The <LABEL> tag takes the following attributes:
- ACCESSKEY--You can set up a shortcut key for
placing the cursor in the field corresponding to the
label by using the ACCESSKEY attribute. For example,
if you set ACCESSKEY=”K”, the users can access the
field by pressing Alt+K (Windows) or Ctrl+K
(Macintosh).
- DISABLED--Deactivates the label.
- FOR--Set equal to the value of the ID attribute for
the field that goes with the label.
Example:
<LABEL FOR=”PW” ACCESSKEY=”P”>Enter your password:</LABEL>
<INPUT TYPE=”PASSWORD” ID=”PW” NAME=”passwd”>
Related Tags:
<LABEL> is typically used with the <INPUT>, <SELECT>, or
<TEXTAREA> tags.
<FIELDSET>
Type:
Container
Function:
Groups related form input fields.
Syntax:
<FIELDSET>
... related input fields ...
</FIELDSET>
Attributes:
None.
Example:
<FIELDSET>
Login: <INPUT TYPE=”TEXT” NAME=”login”>
Password: <INPUT TYPE=”PASSWORD” NAME=”passwd”>
</FIELDSET>
Related Tags:
The <LEGEND> tag can be used to give a field grouping a
specific name.
<LEGEND>
Type:
Container
Function:
Names a group of related form fields.
Syntax:
<LEGEND ALIGN=”LEFT|RIGHT|TOP|BOTTOM” ACCESSKEY=”shortcut_key”>
... legend text goes here ...
</LEGEND>
Attributes:
The <LEGEND> tag has two attributes:
- ACCESSKEY--Set equal to a keyboard key to be used
as a shortcut key.
- ALIGN--Controls how the legend text is horizontally
aligned with respect to the group of fields and can
be set equal to LEFT, RIGHT, TOP, or BOTTOM.
Example:
<FIELDSET>
<LEGEND ALIGN=”TOP”>User Login Information</LEGEND>
Login: <INPUT TYPE=”TEXT” NAME=”login”>
Password: <INPUT TYPE=”PASSWORD” NAME=”passwd”>
</FIELDSET>
Related Tags:
<LEGEND> gives a name to a set of fields grouped together by
the <FIELDSET> tag.
Framed layouts are ones in which the browser window is
broken up into multiple regions called frames. Each frame
can contain a distinct HTML document, allowing you to
display several documents at once rather than just one.
There are only a few tags you need to know to set up a
framed page. These tags are covered in this section.
<FRAMESET>
Type:
Container
Function:
Divides the browser window into frames.
Syntax:
<FRAMESET ROWS=”list_of_row_sizes” COLS=”list_of_column_sizes”>
...
</FRAMESET>
Attributes:
<FRAMESET> can take the ROWS or COLS attribute, but not both
at the same time. ROWS specifies how the browser screen
should be broken up into multiple rows. ROWS is set equal to
a list of values that describe the size of each row. The
number of items in the list determines how many rows there
will be. The values in the list determine the size of each
row. Sizes can be in pixels, percentages of screen depth, or
relative to the amount of available space. COLS works the
same way, except it will divide the screen into columns.
Example:
<!-- Divide the screen into three columns: 100 pixels, 50% of screen,
and whatever is left over. -->
<FRAMESET COLS=”100,50%,*”>
...
</FRAMESET>
Related Tags:
<FRAMESET> only breaks up the screen into multiple regions.
You need to use the <FRAME> tag to populate each frame with
content. Also, you can use the <NOFRAMES> tag to specify
alternative content for browsers that cannot process frames.
<FRAMESET> tags may be nested to create even
more complex layouts.
<FRAME>
Type:
Standalone
Function:
Places content into a frame.
Syntax:
<FRAME SRC=”URL_of_document” NAME=”frame_name” FRAMEBORDER=”0|1”
MARGINWIDTH=”width_in_pixels” MARGINHEIGHT=”height_in_pixels”
NORESIZE SCROLLING=”YES|NO|AUTO”>
Attributes:
The <FRAME> tag can take several different attributes:
- FRAMEBORDER--Setting FRAMEBORDER to 1 turns on the
frame’s borders; setting it to 0 turns them off.
- MARGINHEIGHT--Specifies the size (in pixels) of the
top margin of the frame.
- MARGINWIDTH--Specifies the size (in pixels) of the
left margin of the frame.
- NAME--Gives the frame a unique name so it can be
targeted by other tags (such as <A>, <FORM>, and
<AREA>).
- NORESIZE--Suppresses the user’s ability to drag and
drop a frame border in a new location.
- SCROLLING--Controls the presence of scrollbars on
the frame. Setting SCROLLING to YES makes the browser
always put scrollbars on the frame, setting it to NO
suppresses the scrollbars, and setting it to the
default of AUTO lets the browser decide whether the
scrollbars are needed or not.
- SRC--Tells the browser the URL of the HTML file to
load into the frame. SRC is a required attribute of
the <FRAME> tag.
Example:
<FRAMESET COLS=”25%,75%”> <!-- Make 2 columnar frames -->
<!-- Populate frame #1 -->
<FRAME SRC=”leftframe.html” NORESIZE NAME=”left” FRAMEBORDER=0>
<!-- Populate frame #2 -->
<FRAME SRC=”rightframe.html” NORESIZE NAME=”right” FRAMEBORDER=0>
...
</FRAMESET>
Related Tags:
The <FRAME> tag is valid only between the <FRAMESET> and
</FRAMESET> tags.
<NOFRAMES>
Type:
Container
Function:
Provides an alternative layout for browsers that cannot
process frames.
Syntax:
<NOFRAMES>
... non-frames content goes here ...
</NOFRAMES>
Attributes:
None.
Example:
<FRAMESET COLS=”25%,75%”> <!-- Make 2 columnar frames -->
<!-- Populate frame #1 -->
<FRAME SRC=”leftframe.html” NORESIZE NAME=”left” FRAMEBORDER=0>
<!-- Populate frame #2 -->
<FRAME SRC=”rightframe.html” NORESIZE NAME=”right” FRAMEBORDER=0>
<NOFRAMES>
Your browser cannot process frames. Please visit the
<A HREF=”/noframes/index.html”>non-frames version</A>
of our site.
</NOFRAMES>
</FRAMESET>
Related Tags:
<NOFRAMES> is valid only between the <FRAMESET> and
</FRAMESET> tags. Your <NOFRAMES> content should be
specified before any nested <FRAMESET> tags.
<IFRAME>
Type:
Container
Function:
Places a floating frame on a page. Floating frames are best
described as "frames that you can place like images."
Syntax:
<IFRAME SRC=”URL_of_document” NAME=”frame_name” FRAMEBORDER=”0|1”
WIDTH=”frame_width_in_pixels_or_percentage”
HEIGHT=”frame_height_in_pixels_or_percentage”
MARGINWIDTH=”margin_width_in_pixels”
MARGINHEIGHT=”margin_height_in_pixels”
SCROLLING=”YES|NO|AUTO” ALIGN=”TOP|MIDDLE|BOTTOM|LEFT|RIGHT”>
... text or image alternative to the floating frame ...
</IFRAME>
Attributes:
The <IFRAME> tag can take the following attributes:
- ALIGN--Controls how the floating frame is aligned,
and can be set to TOP, MIDDLE, BOTTOM, LEFT, or
RIGHT. TOP, MIDDLE, and BOTTOM alignments make text
appear next to the frame, starting at the top,
middle, or bottom of the frame. Setting ALIGN to LEFT
or RIGHT floats the frame in the left or right margin
and allows text to wrap around it.
- FRAMEBORDER--Setting FRAMEBORDER to 1 turns on the
floating frame’s borders; setting it to 0 turns them
off.
- HEIGHT--Specifies the height of the floating frame
in pixels.
- MARGINHEIGHT--Specifies the size (in pixels) of the
top margin of the floating frame.
- MARGINWIDTH--Specifies the size (in pixels) of the
left margin of the floating frame.
- NAME--Gives the floating frame a unique name so it
can be targeted by other tags (such as <A>, <FORM>,
and <AREA>).
- SCROLLING--Controls the presence of scrollbars on
the floating frame. Setting SCROLLING to YES makes
the browser always put scrollbars on the floating
frame, setting it to NO suppresses the scrollbars,
and setting it to the default of AUTO lets the
browser decide whether the scrollbars are needed or
not.
- SRC--Tells the browser the URL of the HTML file to
load into the floating frame. SRC is a required
attribute of the <IFRAME> tag.
- WIDTH--Specifies the width of the floating frame in
pixels.
Example:
<IFRAME SRC=”floating.html” WIDTH=”50%” HEIGHT=”50%” ALIGN=LEFT
SCROLLING=”NO” NAME=”floater” FRAMEBORDER=1>
Your browser does not support floating frames. :(
</IFRAME>
One of the ways in which web pages have become more dynamic
is through their support of executable content such as Java
applets and ActiveX controls. These page elements are
downloaded to the browser and run in its memory space to
produce dynamic content on the browser screen.
HTML 4.0 supports two ways for placing executable content:
the <APPLET> tag for Java applets and the <OBJECT> tag for
other executable objects. These tags, along with the
supporting <PARAM> tag, are profiled in this section.
<APPLET>
Type:
Container
Function:
Places a Java applet on a page.
Syntax:
<APPLET WIDTH=”width_in_pixels” HEIGHT=”height_in_pixels”
CODEBASE=”base_URL_for_applet” CODE=”applet_class file”
OBJECT=”serialized_applet_file” NAME=”applet_name”
ARCHIVE=”archive_list” ALT=”text_alternative”
ALIGN=”TOP|MIDDLE|BOTTOM|LEFT|RIGHT”
HSPACE=”pixels” VSPACE=”pixels”>
...
</APPLET>
Attributes:
As the following list demonstrates, many of the <APPLET>
tag’s attributes are just like those for the <IMG> tag:
- ALIGN--Positions adjacent text at the TOP, MIDDLE,
or BOTTOM of the applet window, or you can float the
window in the LEFT or RIGHT margins.
- ALT--Provides a text-based alternative to the
applet.
- ARCHIVE--Set equal to a comma-delimited list of
archive locations.
- CODE--Specifies the class file.
- CODEBASE--Set equal to the URL of the code.
- HEIGHT--Specifies the height of the applet window
in pixels. HEIGHT is a required attribute of the
<APPLET> tag.
- HSPACE--Controls the amount of whitespace (in
pixels) to the left and right of the applet window.
- NAME--Gives the applet a unique name so that it can
be referenced by other Java applets.
- OBJECT--Provides the name of a serialized applet
file.
- VSPACE--Controls the amount of whitespace (in
pixels) above and below the applet window.
- WIDTH--Specifies the width of the applet window in
pixels. WIDTH is a required attribute of the <APPLET>
tag.
Example:
<APPLET WIDTH=250 HEIGHT=200 CODE=”marquee.class” NAME=”marquee”
ALT=”Scrolling text marquee applet” ALIGN=”RIGHT”
HSPACE=5 VSPACE=12>
<PARAM NAME=”message” VALUE=”Hello World!”>
...
</APPLET>
Related Tags:
Parameters are passed to a Java applet using the <PARAM>
tag.
<PARAM>
Type:
Standalone
Function:
Passes a parameter to a Java applet (<APPLET>) or other
executable object (<OBJECT>).
Syntax:
<PARAM NAME=”parameter_name” VALUE=”parameter_value”
VALUETYPE=”DATA|REF|OBJECT” TYPE=”internet_media_type”>
Attributes:
The <PARAM> tag can take the following attributes:
- NAME--Provides the name of the parameter.
- TYPE--Tells the browser what the parameter’s
Internet media (MIME) type is.
- VALUE--Specifies the value of the parameter.
- VALUETYPE--Provides more detail about the nature of
the VALUE being passed and can be set to DATA, REF,
or OBJECT.
Example:
<APPLET WIDTH=300 HEIGHT=224 CODE=”test.class ALT=”Test applet”
ALIGN=”TOP” NAME=”test” >
<PARAM NAME=”tolerance” VALUE=”0.001” VALUETYPE=”DATA”>
<PARAM NAME=”pi” VALUE=”3.14159” VALUETYPE=”DATA”>
...
</APPLET>
Related Tags:
<PARAM> tags can be used only between the <APPLET> and
</APPLET> tags or between the <OBJECT> and </OBJECT> tags.
<OBJECT>
Type:
Container
Function:
Places an executable object on a page.
Syntax:
<OBJECT CLASSID=”implementation_info” CODEBASE=”URL_of_object”
CODETYPE=”MIME_type” TYPE=”data_MIME_type”
STANDBY=”message_while_loading” USEMAP=”map_name”
ALIGN=”TEXTTOP|MIDDLE|TEXTMIDDLE|BASELINE|TEXTBOTTOM|LEFT|CENTER|RIGHT”
WIDTH=”width_in_pixels_or_percentage” NAME=”object_name”
HEIGHT=”height_in_pixels_or_percentage”
HSPACE=”pixels” VSPACE=”pixels” BORDER=”pixels”>
...
</OBJECT>
Attributes:
The <OBJECT> tag has an exhausting list of attributes, but
many of them are like those for the <IMG> tag so they are
fairly easy to understand:
- ALIGN--Controls how content adjacent to the object
area is aligned. Note that this ALIGN attribute has
many more possible values than ALIGN attributes for
other tags.
- WIDTH and HEIGHT--Specifies the dimensions of the
object area as a number of pixels or as a percentage
of available space.
- BORDER--Set equal to the number of pixels that the
border thickness should be.
- HSPACE and VSPACE--Controls the amount of
whitespace around the object area.
Additionally, <OBJECT> can take these attributes:
- CLASSID--Identifies which implementation or release
of the object you’re using.
- CODEBASE--Set equal to the URL of the object.
- CODETYPE--Describes the code’s MIME type.
- STANDBY--Allows you to display a message to the
user while the object is loading.
- TYPE--Specifies the MIME type of the data passed to
the object.
- USEMAP--Points to client-side map data, if
imagemaps are used.
Example:
<OBJECT WIDTH=100% HEIGHT=100 CODETYPE=”application/x-oleobject”
CLASSID=”CLSID: 1A4DA620-6217-11CF-BE62-0080C72EDD2D”
CODEBASE=”http://activex.microsoft.com/controls/iexplorer/marquee.ocx”
HSPACE=5 VSPACE=10 ALIGN=MIDDLE BORDER=0>
<PARAM NAME=”image” VALUE=”greeting.gif”>
<PARAM NAME=”speed” VALUE=”7”>
<PARAM NAME=”repeat” VALUE=”1”>
...
</OBJECT>
Related Tags:
Parameters passed to the object are given by the <PARAM>;
tag.