Created by Stephen Hartzog for Advanced Digital Studio 4 @ California College of Arts and Crafts
CONTENTS 
   

"Easy" HTML reference Draft 2 [09/02]

HyperText Markup Language (HTML) is the standard markup language for text documents on the internet. It may be used for embedding images, sounds, video and multimedia in webpages (but that's another story).

The form of HTML source code is intentionally simple enough to be created with any text editor, "by hand". It was designed to be readable by humans. In fact, most browsers still allow you to read the source code of any document that you view [in Internet Explorer: Menu || View >> Source ], which is an important method for learning HTML.

HTML is still evolving, which causes difficulties for designers. The HTML standard is defined by the governing body, the World Wide Web Consortium (W3C), but the browsers interpret HTML somewhat idiosyncratically. The development of HTML continues as a dialectic between the W3C and the actual implementations of the major browsers.
The language still bears the marks of it's origin, most notably, the original specification was concerned with the classification of information and NOT with the actual display (much to the chagrin of web designers). It started out as a fairly simple collection of tags for the organization and display of information, as it was created by scientists for the exchange of scholarly documents.

Hope for Webpage Designers:   Despair for Webpage Designers:
Basic HTML is simple.   HTML is evolving.
HTML was created by and for scientists.
... sometimes some tricky things must be done with the available repertoire of tags in order to create satisfying visual displays.

STRUCTURE vs. DISPLAY: One of the major dilemmas of web-design.
The scientists want to separate form and content; in practice, it's not so simple.
STRUCTURE
concerns the relative importance and precedence of elements.
DISPLAY
is the stuff designers care about, such as colors and type specifications.
The original form of HTML left the DISPLAY of webpages entirely up to the Browser. The goal was to make documents Device Independent.

 { TOP }

Some Basic Definitions

HyperText: Text which acts as a link to another document, sometimes called "active" or "hot", e.g.,
<a href="http://nukes.org">nukeville</a>

Tag: A markup element, a container which instructs the browser how to display or classify it's contents.
Most tags have opening and closing elements indicated by greater than and less than symbols, e.g., <b>this text should be bold</b>. In fact, the instructions to the browser are vague. It is up to the browser to decide exactly how to render the tag. What is important is that the tags indicate a difference.

Browser: a program which can interpret an HTML document for display on a computer screen, e.g., Netscape Navigator, Opera, Internet Explorer. Each browser renders HTML documents differently, and the different versions of each brand of browser also render the tags differently, or simply ignore them. This is a disconcerting situation for the HTML author.
On the other hand, browsers are forgiving. Supposedly, half of the code that makes up the major browsers is devoted to figuring out what bad code is supposed to mean. This can lead to bad habits.

CSS: Cascading Style Sheets.
An additional markup syntax for the display of elements in an HTML page. An attempt to separate content markup from display markup. The term "cascading" refers to the fact that there are multiple ways to assign styles to elements that are heirarchical, the more particular overriding the more general. There are major overlaps in functionality between CSS and HTML formatting for display, which leaves us in a tricky position.

JavaScript: The most common kind of script used for dynamic content in HTML pages. It is based on the (evolving) standard recommended by the W3C, known as ECMAscript. [note: This is the same model as Flash's ActionScript.]

DHTML: CSS plus JavaScript.
An attempt to standardize the means of identifying and controlling elements of HTML pages. Provides means for pages to change dynamically.

XML: eXtensible Markup Language.
HTML is now conceived as a subset of XML in the XHTML standard. XML is a more general form of markup language; it allows for the creation of custom tags for the catagorization of information.

URL: Uniform Resource Locator. the address of a web page.
URI: Uniform Resource Identifier: the path/location of any resource on the internet.

WYSIWIG Editor: "What You See Is What You Get"
These programs insert the appropriate tags for you through a graphical user interface (GUI). While this is a major convience, in that the program does repetitive tasks for you (and should always create valid code); on the other hand, if you only ever use a WYSIWIG editor, then you will not be able to evaluate whether the code it generates is redundant, or clean, nor will you be able to solve problems when it won't do what you want it to do, nor will you know what is easy html and what is advanced trickiness.
Note that these programs move away from the originating concept that HTML is human readable.


 { TOP }

HTML Tag Basics

The name of an HTML document can use any combination of alphanumeric characters, it cannot contain any spaces nor special characters such as !@#$%^&*><?/, and must end with one of two characteristic suffixes, either .htm or .html
Examples: "my_document.html", "home.html", "index.html"
In general, you should use only lower-case letters.

HTML TAGS instruct a browser to display or classify information in a specific way. Most tags consist of an opening element and a closing element of the following form:
<tag_name>
text to be displayed</tag_name>.
In order to conform to the latest XHTML standard, all tags should be lowercase.

Attributes: some tags have multiple additional options for display.
Attributes consist of NAME/VALUE pairs and are contained within the opening element of a tag.
Attributes must conform to the following format: name="value".
Example <p align="right">this text block would align on the right side of a page</p>
In order to conform to the latest XHTML standard, all attributes must be enclosed in quotation marks.
note: if a tag has defineable attributes, the safest way to control the display of text within that tag is to define every attribute explicitly, otherwise those attributes will be rendered as a default value which may vary between browsers

Nesting: Multiple tags may be applied to the same content.
It is very important when nesting tags to open and close them in the appropriate order, that is, the first tag opened is the last tag closed. Example of correct nesting <b><i>this text is bold and italic</i></b>
Incorrect nesting: <b><i>this text is improperly formatted</b></i>

Spaces: HyperText flows. In general, extra spaces (more than one) in your source code will be ignored, as will line breaks. You can use this feature to help visually organize your source code. If you want to have a line break in the display of your text you must use the BREAK tag: <br>, which does not have a closing element. To insert more than one space between characters, you must use the NO-BREAK SPACE "special" character: &nbsp;
Additionally, you can preserve all line breaks and spaces in a block of text with the PREFORMAT tag:

<pre> this   text is a
                  preformatted   B L O C K   of         text</pre>

Block tags vs. Inline tags:
"Inline" means that the markup tag does not interrupt the flow of the text.
"Block" level tags insert a line breaks before their content and a double break after their content.


 { TOP }

Minimal HTML Page

To create an HTML page, open any text editor (any program that can edit text document, e.g., SimpleText, MS Word, NotePad...) and create a new file. Save the file in the Text Only (or ASCII) file format with the appropriate extension, either name.htm or name.html

FOUR tags provide the minimum elements of any HTML document: HTML, HEAD, TITLE, BODY.
They always have the same relationship.

The basic HTML document:
<html>
 <head>
  <title>
your document's title goes here</title>
 </head>
 <body>

The content of your document to be displayed in the
browser window goes here, inside the BODY tag.
 </body>
</html>

<html>...</html>
Everything is nested inside of the HTML tag.

<head>...</head>
The HEAD tag contains information about your document. This information is not displayed directly in the browser window. SCRIPTS, CSS rules and META tags can be included here.

<title>...</title>
The TITLE tag is always nested within the HEAD tag. It contains the title of your document which is usually displayed in the title bar of the browser. The title also appears in the History and Bookmarks of the Browser.
note: do not use colons or backslashes in the title of your document.

<body>...</body>
The BODY tag normally contains the visible content of the document.
The BODY tag has several definable attributes.
Example of an exhaustively defined BODY tag:

<body text="#000000" link="#0000FF" vlink="#CC00FF" alink="#FF0000" bgcolor="#FFFFFF" background="images/background.gif" marginheight="10" marginwidth="10" leftmargin="10" topmargin="10">
ATTRIBUTE:       MEANING:        POSSIBLE VALUES:     
text Defines the default display color for text in the whole document. Browsers tend to use BLACK (hex value: #000000 ) if this value is not defined (and if the user has not altered their browser's default preferences). Any hexidecimal value;
May also be the literal name of the predefined colors
(see: colorhell)
link Defines the display color for hyper-links before they are visited.
vlink "Visited Link" defines the display color for hyper-links after they are visited.
alink "Active Link" defines the display color for hyper-links as they are clicked, while the mouse is down.
bgcolor Defines the display color for the document's background.
background Defines the image to be used as a background for the document. This image will override the BGcolor. Any valid URI that idenifies the location of an image
marginheight
marginwidth
MicroSoft's Internet Explorer specific attributes.
Define the size of the margin surrounding the content of the document. The defaults for these margins differ between browsers and platforms.
Any positive integer
leftmargin
topmargin
Netscape Navigator specific attributes.
Defins the size of the margin surrounding the content of the document. The defaults for these margins differ between browsers and platforms.
bgproperties IE specific attribute. Causes background image to stay put, while content moves over it. fixed

 { TOP }

Primordial HTML tags

The original HTML specification offered very little in the way of control of display, e.g., there was no way to change the color or face of text. The advantage of this situation is that the language as a whole was very simple and could be learned in it's entirety in a matter of days, if not hours.

In a sense, these tags stand as the most reliably meaningful markup for Cross-Browser, Cross-Platform compatibility. While some of them may "deprecated" in the latest standards, modern browsers still know how to interpret "legacy" document.

 

INLINE ELEMENTS (do not break the flow of the text line):

Font Style Elements (Physical):      meaning:
<b>...</b> an example bold
<i>...</i> an example italic
<tt>...</tt> an example typerwriter type, usually rendered as monospace
<sub>...</sub> an example subscript
<sup>...</sup> an example superscript
<small>...</small> an example smaller
<big>...</big> an example bigger
<strike>...</strike> AN example strike-through
 
Phrase Elements (Logical):   meaning:
<em>...</em> an example emphasis, usually rendered as italic
<strong>...</strong> an example strong, usually rendered as bold
<code>...</code> an example code, usually rendered as a monospace font
<dfn>...</dfn> an example definition
<samp>...</samp> an example sample output from a program
<kbd>...</kbd> an example keyboard, signifies text to be entered by a keyboard
<var>...</var> an example variable
<cite>...</cite> an example citation, used to indicate a quotation
 

BLOCK LEVEL ELEMENTS (force a line break before and a double line break after closing element):

TAG: DISPLAY EXAMPLE: EXPLANATION:
<p>...</p>

this text is contained within a PARAGRAPH tag

this text is contained within another PARAGRAPH tag

paragraph: recommended containers for all text elements
<pre>...</pre>
this text       is 
	  preformatted  it    preserves 
spaces and line breaks        
 in the source code
this text is immediately outside of the PRE tag
preformatted text: preserves spaces and line breaks in the source code. Usually, it is displays as monospace

<blockquote>
 ...
</blockquote>

this text is outside of the blockquote
this text is in a block quote
this text is outside of the blockquote
blockquote: logically indicates an extended quotation; usually causes text to be surrounded by left and right margins, and double line breaks above and below.
This is a simple way to indent text, but it is a violation of accessibility standards to use it for this purpose.
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Header Level 5
Header Level 6
headers: there are 6 levels of header elements which correspond to the heirarchical significance of the text contained by them, usually corresponding to titles and subtitles for sections of a document.
The display of the headers vary in intensity corresponding to their importance, i.e., H1 text is rendered the largest and boldest, H6 the smallest. The specifics of rendering are left up to the browsers, and are not consistent across browsers and platforms.
Functionally, the text in the header elements could be used by a search engine to analyze the content of a document.
note: the PARAGRAPH tag and the HEADER tags have an optional align attribute, which has four possible values: left, right, center.
Example: <p align="center">text contained by this paragraph tag should be centered</p>

 

SPECIAL TAGS (no closing element):

note: to conform with the XHTML standard, tags with no closing element should end with a space and forward slash before the closing angle bracket.

BREAK
<br> line break: forces a break in the flow of the text.
The BREAK tag can use the optional attribute CLEAR, which has three possible values: left, right, all. CLEAR forces a line break to occur at the end of aligned, or "floating" content (e.g., an IMG)
Example: <br clear="ALL">

HORIZONTAL RULE
<hr> horizontal rule: inserts a horizontal rule with a line break before and after.
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
width width of the hr, relative to the outermost container (usually the BODY tag, which corresponds to the width of the browser window, but could also be another table's cell) can be either a pixel value or a percentage <hr width="300">
<hr width="95%">
size height of the hr any positive integer.
zero renders as one pixel height.
<hr size="20">
noshade defines how to render the hr no options, causes the hr to be rendered as a flat color, as opposed to the default 3-D shading effect. In order to be consistent with the XML standard, this value should be written like this:
<hr noshade="noshade">
align alignment of the hr left, right, center <hr align="CENTER">
color

Supported by Internet Explorer ONLY (so far)
the color of the hr, also causes the hr to be rendered as noshade
note: this attribute is not supported by earlier browsers.
any hexidecimal color value, or reserved name. <hr color="fuschia">
<hr color="#888888">
EXHAUSTIVELY DEFINED HORIZONTAL RULE:
CODE: <hr align="CENTER" width="550" size="10" color="#CC8888" noshade="noshade">
DEFAULT HORIZONTAL RULE:
CODE: <hr>

COMMENT

<!-- commented text goes here --> comment: the text contained within a comment tag is not rendered by the browser. It is useful for annotating source code for easier understanding.

 { TOP }

The FONT tag

Implemented in all browsers, despite the reluctance of the scientists who want to separate the structure of a document from it's display. In fact, the font tag was never an official part of the standards. But, as the wwweb became a consumer tool the demand for prettier webpages held sway.
In the latest standards the font tag is DEPRECATED, which means that in theory you shouldn't use it. However, in practice, this is still the most universal way to control the display of text. I recommend using them for initial layouts and then using CSS redundantly for fine control.

FONT tag attributes
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
face The name of a font face on the user's computer. A comma separated list. The first match is used.
GENERIC font names:
serif
sans-serif
monospace
fantasy
cursive

Generic names should always be used as last entry in list.
<font face="Geneva,Arial,sans-serif">styled text</font>
size Size of font relative to browser's default (set by user). absolute: 1 thru 7 (default=3); or, relative: -7 thru +7 <font size="+1">styled text</font>
view examples
color Color of text. Hex color, or reserved color name. <font color="#006699">styled text</font>

example font tag:
<font color="#003366" size="4" face="sans-serif">styled text</A>

 { TOP }

HyperText a.k.a. Links

Basic link: redirects Browser to new webpage:
<a href="document.html">linked text</a>

RELATIVE LINK, or "Jump to":
Links to a NAMED ANCHOR in a page. Example:
<a href="#topic">jump to topic</a>

would jump to the place in the page with the following code:
<a name="topic">this text will appear normal</a>

EMAIL Link:
<a href="mailto:ads4@nukes.org">send me an email</a>
the value of the HREF begins with "mailto:" followed by the email address.
OPTIONAL: You can set the SUBJECT field of the opened email document:
<a href="mailto:ads4@nukes.org?subject=ads4">send email about ads4</a>

TARGET:
Links can use an optional TARGET attribute to load the linked document in a window other than the current one.
This can be useful for linking to external websites when you do not want people to leave your site.
Usually, this would just mean a new window will open, but this can also mean a named FRAME.
Example:
<a href="document.html" target="newwin">linked text</a>
Once the new window "newwin" is opened any links targetted to "newwin" will open in that window.
RESERVED TARGET NAMES: _blank, _top, _parent, _self
_blank will always open a new window. The other names are only useful in FRAMES.

IMAGE as LINK:
Simply insert the IMG tag inside of the link tags.


 { TOP }

Embedding Images

The IMG tag inserts an image inline. It does not cause a break in the flow of text. This is actually an example of HYPERMEDIA, in that it combines resources from multiple sources in a single document. Most current browsers support three image formats: GIF, JPG and PNG. While the PNG format offers many useful features, it is not supported by earlier browser versions.
note: there is NO closing element!

Minimum IMG tag declaration:

<img src="images/apple.jpg" alt="description of image">

Example of an exhaustively defined IMG tag :

<img src="images/apple.jpg" alt="description of image" height="250" width="300" align="left" border="0" hspace="0" vspace="0" name="image1">

You should always define the height and width of an image.
This allows the browser to layout the document before the image is fully loaded, which means that the text in the document can be rendered first.

ATTRIBUTE:   MEANING:  POSSIBLE VALUES: EXAMPLE USE:
src the location (URI) of the image; tells the browser where to find the image on the www. Any valid path to an image. <img src="images/apple.jpg">
alt alternative description of the image. this attribute is required by law to aid users with disabilities, for accessibility. Any combination of alphanumeric characters (except quotation marks). Should be an apt description of the image. <img src="images/apple.jpg" alt="an apple">
height the vertical dimension of the area in which to render the image. The image will be scaled to this value if it is not the same as the height of the original image. Any positive integer. <img src="images/apple.jpg" height="125" width="300">
width the horizontal dimension of the area in which to render the image. The image will be scaled to this value if it is not the same as the width of the original image. Any positive integer.
align determines how the image is rendered relative to the surrounding content. Some values allow the image to "float", which means that surrounding text will wrap around the image.

left, right, top, bottom, middle, absbottom, absmiddle, texttop, baseline

The default is usually "bottom"

<img src="images/apple.jpg" align="right">
border A visible border surrounding the image, usually uses a default color of BLACK. If the image is inside of a link, the border takes on the color of the BODY tag's link attribute. Current versions of the major browsers use a default value of zero, but earlier versions default to a one pixel border. any positive integer, or zero <img src="images/apple.jpg" border="0">
hspace the amount of the whitespace margin allotted on both the left and right of the image. any positive integer, or zero <img src="images/apple.jpg" hspace="10" vspace="0">
vspace the amount of the whitespace margin allotted both above and below the image. any positive integer, or zero
name The name is the identifier for the image by means of which it can be controlled through SCRIPT. any combination of alphanumeric character; cannot contain spaces. Must not begin with a number. <img src="images/apple.jpg" name="image1">

 { TOP }

Table Tags

The original way to control layout (CSS now offers Positioning control). The bane and blessing of web-design. Created by scientists to display tables of data; if designers and not scientists had made the html standard, they would be called GRID tags!

Tables consist of ROWS, <tr>, which consist of CELLS, <td>; and implicitly of COLUMNS.
CELL tags are nested inside of ROW tags; ROW tags are nested inside of TABLE tags.
A CELL can contain any other HTML tags, including other Tables!
note: there are also <th>, table header elements that are equivalent to <td> in the first row, which can help machines understand the structure of tables.

A simple table:
<table>
  <tr>
    <td>
First column's content goes here</td>
    <td>
<br>Second column's content goes here</td>
  </tr>
</table>

result:
First column's content
Second column's content

A table with two rows:
<table>
  <tr>
    <td>
Row One Column One</td>
    <td>
<br>Row One Column Two</td>
  </tr>
  <tr>
    <td>
<br>Row Two Column One</td>
    <td>
Row Two Column Two</td>
  </tr>
</table>

result:
Row One Column One
Row One Column Two

Row Two Column One
Row Two Column Two

A table with useful attributes:
<table border="0" cellpadding="3" cellspacing="3" width="100%" height="150" bgcolor="#9999FF">
  <tr>
    <td bgcolor="#cccccc" valign="top" align="right">
Row One Column One</td>
    <td bgcolor="#dddddd" valign="bottom" align="left">
Row One Column Two</td>
  </tr>
  <tr bgcolor="aqua" valign="middle" align="center">
    <td>
Row Two Column One</td>
    <td>
Row Two Column Two</td>
  </tr>
</table>

result:

Row One Column One Row One Column Two
Row Two Column One Row Two Column Two

 

TABLE Attributes
note: you should always define border, cellpadding and cellspacing, because different browsers have different default values for these attributes.
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
border If greater than zero, renders a 3-D border around the table and between cells. PIXELS <table border="0">...
cellpadding Space around the contents of the cells. PIXELS <table cellpadding="10">...
cellspacing Space between cells. PIXELS <table cellspacing="10">...
bgcolor Background color for whole table. Hex color, or reserved color name. <table bgcolor="#eeeeee">...
<table bgcolor="fuschia">...
background An image to be used as a background. Note: this does different things in IE and in Netscape. URL of an image on the web. <table background="ball.jpg">...
width Width of the the whole table, relative to the outermost container (usually the BODY tag, which corresponds to the width of the browser window, but could also be another table's cell). Can be either a PIXEL value or a PERCENTAGE. <table width="300">...
<table width="95%">...
height Height of the whole table.
This attribute can be a bit buggy.
Percentage is relative to the viewable area of the browser window.
Can be either a PIXEL value or a PERCENTAGE. <table height="200">...
<table height="95%">...
more attributes, which render differently across browsers:
bordercolor, bordercolordark, bordercolorlight

TR and TD Attributes in common
Defining these attributes for a row applies the attribute to all of the cells in that row.
If a row and a cell define the same attribute, the cell's value overrides the row's
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
align Horizontal alignment of cells. left, center, right ...<tr align="center">...
...<td align="right">...
valign Vertical alignment of cells top, middle, bottom ...<tr valign="middle">...
...<td valign="bottom">...
bgcolor Background color for cells. Hex color, or reserved color name. ...<tr bgcolor="#eeeeee">...
...<td bgcolor="fuschia">...
more attributes, which render differently across browsers:
bordercolor, bordercolordark, bordercolorlight

TD Attributes
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
width Desired width of the cell. Can be either a PIXEL value or a PERCENTAGE. <table width="300">...
<table width="95%">...
height Desired height of the cell. Can be either a PIXEL value or a PERCENTAGE. <table height="200">...
<table height="95%">...
background An image to be used as a background. URL of an image on the web. <td background="ball.jpg">...
nowrap Prevents content of a cell from wrapping. "nowrap"
In order to conform to XHTML standard.
<td nowrap="nowrap">...
colspan A cell spans more than one column. Any integer equal to or less than the total number of columns. <td colspan="3">...
rowspan A cell spans more than one row. Any integer equal to or less than the total number of rows. <td rowspan="2">...

A table with rowspan and colspan:
<table border="1" bordercolor="blue">
  <tr>
    <td rowspan="2">
Row One Cell One: rowspan="2" </td>
    <td colspan="2">
Row One Cell Two & Three: colspan="2" </td>
  </tr>
  <tr>
    <td>
Row Two Column One</td>
    <td>
Row Two Column Two</td>
  </tr>
</table>

result:
Row One Cell One: rowspan="2" Row One Cell Two & Three: colspan="2"
Row Two Column Two Row Two Column Three

 { TOP }

 

Framesets

Framesets allow you to combine two or more html pages within the same browser window.

Advantages of frames: allows for persistent content; only one part of the page changes when you link to new content. This can be useful for navigation of small subsets of material, e.g., a slideshow.
Disadvantages: Bookmarks will always take you to the front page of the framese, thus using frames for complex sites is problematic.

A minimal frameset document:

<head>
<title>
my framed site</title>
</head>

<frameset cols="200,*">
  <frame src="navigation.html" name="nav">
  <frame src="frontpage.html" name="content">
</frameset>

<noframes>
  <body>
     
sorry, this site requires a frames enabled browser.
  <body>
</noframes>

Notice that the BODY tag is inside of the NOFRAMES tag. NOFRAMES contains content for browsers that cannot render framesets (Netscape 2 and IE 3). Strictly speaking a FRAMESET document doesn't use a BODY tag. The visible content is contained in the documents "navigation.html" and "frontpage.html", which are normal html pages.

FRAMESET tag attributes
note: you should always define border, cellpadding and cellspacing, because different browsers have different default values for these attributes.
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
cols
The FRAMES are arranged in columns; sets the sizes of the columns.
You can use multiple columns in one FRAMESET.
PIXELS, or
PERCENTAGES, or
* (wildcard)
[may be combined]
<frameset cols="200,40%,*">...
rows The FRAMES are arranged in rows; sets the sizes of the rows.
You can use multiple rows in one FRAMESET.
PIXELS, or
PERCENTAGES, or
* (wildcard)
[may be combined]
<frameset rows="130,70%,*">...
border Thickness of the border between frames. PIXELS <frameset frameborder="no">...
bordercolor Color of the border between frames. Hex color, or reserved color name. <frameset frameborder="no">...
frameborder Whether or not frames display a border. yes | no <frameset frameborder="no">...


FRAME tag attributes
FRAME tags are always nested inside of a defining FRAMESET.
The number of FRAMES corresponds the the number of COLS or ROWS defined in the FRAMESET
ATTRIBUTE:   MEANING:  VALUES: EXAMPLES:
src URL of the page to be displayed within a frame. Any valid URL. ... <frame src="front.html"> ...
name Name used to target this FRAME from links in other FRAMEs of a FRAMESET. an alphanumeric string, without spaces or special characters, beginning with a letter. ... <frame src="front.html" name="content"> ...
to target this frame from another, include a link in this form:
<a href="page2.html" target="content">next page</a>
Note: if you use a TARGET value that does not correspond to a FRAME's NAME a new window will open, and any other links that use that value will load in that window.
scrolling Whether or not the frame can be scrolled. auto | yes | no ... <frame src="front.html" scrolling="no"> ...
noresize Whether or not you can resize the frames by dragging the border between them. none, but for XHTML compatibility you should write: noresize="noresize" ... <frame src="front.html" noresize> ...
marginheight The space between the content of the FRAME and the top and bottom edges of the frame. Note: this attribute does not render identically between IE and Netscape. PIXELS ... <frame src="front.html" marginheight="0"> ...
marginwidth The space between the content of the FRAME and the left and right edges of the frame. PIXELS ... <frame src="front.html" marginwidth="0"> ...

Note that FRAMESETs can be nested.
Alternatively, the page called by a FRAME can be another FRAMESET page.

Targetting in FRAMESETs
In addition to using the NAME attribute of a FRAME to target the loading of a page, there are several RESERVED TARGET NAMES that you will may to use.

name meaning example
_top Loaded page replaces the FRAMESET. <a href="section8.html" target="_top">take me out of this frameset</a>
_parent If one FRAME contains another FRAMESET page, this will cause a page to replace that nested FRAMESET. <a href="page2.html" target="content">next page</a>
_self Loads a page into the current FRAME.
This is used in combination with
<base target="content">
which causes all of the links in a page to target a named frame. The BASE tag goes in the HEAD of a document.
<a href="page2.html" target="content">next page</a>
_blank Loads page into a new window. <a href="page2.html" target="content">next page</a>

 { TOP }

find also: LIST(s), FORM