THE BARE BONES GUIDE TO HTML

by Kevin Werbach
Version 4.0 Formatted -- February 1999

The latest version of this document is available at http://werbach.com/barebones/, where you will also find the text version, translations, and background materials.

The Bare Bones Guide to HTML lists all the tags that current browsers are likely to recognize. I have included all the elements in the official HTML 4.0 recommendation with common attributes, as well as Netscape and Microsoft extensions. This document is a quick reference, not a complete specification; for official information about HTML and its development, see the World Wide Web Consortium site at http://www.w3.org/MarkUp/.

The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. A few tags link to notes that address frequently-asked questions. If you're looking for more detailed step-by-step information, see my WWW Help Page.

Table of Contents

INTRODUCTORY MATERIAL
- What is unique about this guide
- Which HTML tags are included
- How this document is formatted (including a description of symbols and abbreviations)
HTML TAGS
- basic elements (all HTML documents should have these)
- structural definition (appearance controlled by the browser's preferences)
- presentation formatting (author specifies text appearance)
- links, graphics, and sounds
- positioning
- dividers
- lists
- backgrounds and colors
- special characters
- forms
- tables
- frames
- scripts and java
- miscellaneous
Important: If you are not clear about the differences between the various versions of HTML, I suggest that you read my discussion of the development of HTML, or the World Wide Web Consortium HTML activity statement.

BASIC ELEMENTS

Document Type <HTML></HTML> (beginning and end of file)

Title <TITLE></TITLE> (must be in header)

Header <HEAD></HEAD> (descriptive info, such as title)

Body <BODY></BODY> (bulk of the page)


Document Type	`<HTML></HTML>`	(beginning and end of file)
Title	`<TITLE></TITLE>`	(must be in header)
Header	`<HEAD></HEAD>`	(descriptive info, such as title)
Body	`<BODY></BODY>`	(bulk of the page)

STRUCTURAL DEFINITION

Heading <H?></H?> (the spec. defines 6 levels)

Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>

Division <DIV></DIV>

Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

4.0 Defined Content <SPAN></SPAN>

Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually indented)

4.0 Quote <Q></Q> (for short quotations)

4.0 Citation <Q CITE="URL"></Q>

Emphasis <EM></EM> (usually displayed as italic)

Strong Emphasis <STRONG></STRONG> (usually displayed as bold)

Citation <CITE></CITE> (usually italics)

Code <CODE></CODE> (for source code listings)

Sample Output <SAMP></SAMP>

Keyboard Input <KBD></KBD>

Variable <VAR></VAR>

Definition <DFN></DFN> (not widely implemented)

Author's Address <ADDRESS></ADDRESS>

Large Font Size <BIG></BIG>

Small Font Size <SMALL></SMALL>

4.0 Insert <INS></INS> (marks additions in a new version)

4.0 Time of Change <INS DATETIME=":::"></INS>

4.0 Comments <INS CITE="URL"></INS>

4.0 Delete <DEL></DEL> (marks deletions in a new version)

4.0 Time of Change <DEL DATETIME=":::"></DEL>

4.0 Comments <DEL CITE="URL"></DEL>

4.0 Acronym <ACRONYM></ACRONYM>

4.0 Abbreviation <ABBR></ABBR>

STRUCTURAL DEFINITION
	Heading	`<H?></H?>`	(the spec. defines 6 levels)
	Align Heading	`<H? ALIGN=LEFT\|CENTER\|RIGHT></H?>`
	Division	`<DIV></DIV>`
	Align Division	`<DIV ALIGN=LEFT\|RIGHT\|CENTER\|JUSTIFY></DIV>`
4.0	Defined Content	`<SPAN></SPAN>`
	Block Quote	`<BLOCKQUOTE></BLOCKQUOTE>`	(usually indented)
4.0	Quote	`<Q></Q>`	(for short quotations)
4.0	Citation	`<Q CITE="URL"></Q>`
	Emphasis	`<EM></EM>`	(usually displayed as italic)
	Strong Emphasis	`<STRONG></STRONG>`	(usually displayed as bold)
	Citation	`<CITE></CITE>`	(usually italics)
	Code	`<CODE></CODE>`	(for source code listings)
	Sample Output	`<SAMP></SAMP>`
	Keyboard Input	`<KBD></KBD>`
	Variable	`<VAR></VAR>`
	Definition	`<DFN></DFN>`	(not widely implemented)
	Author's Address	`<ADDRESS></ADDRESS>`
	Large Font Size	`<BIG></BIG>`
	Small Font Size	`<SMALL></SMALL>`
4.0	Insert	`<INS></INS>`	(marks additions in a new version)
4.0	Time of Change	`<INS DATETIME=":::"></INS>`
4.0	Comments	`<INS CITE="URL"></INS>`
4.0	Delete	`<DEL></DEL>`	(marks deletions in a new version)
4.0	Time of Change	`<DEL DATETIME=":::"></DEL>`
4.0	Comments	`<DEL CITE="URL"></DEL>`
4.0	Acronym	`<ACRONYM></ACRONYM>`
4.0	Abbreviation	`<ABBR></ABBR>`

PRESENTATION FORMATTING

Bold <B></B>

Italic <I></I>

4.0* Underline <U></U> (not widely implemented)

Strikeout <STRIKE></STRIKE> (not widely implemented)

4.0* Strikeout <S></S> (not widely implemented)

Subscript <SUB></SUB>

Superscript <SUP></SUP>

Typewriter <TT></TT> (displays in a monospaced font)

Preformatted <PRE></PRE> (display text spacing as-is)

Width <PRE WIDTH=?></PRE> (in characters)

Center <CENTER></CENTER> (for both text and images)

N1 Blinking <BLINK></BLINK> (the most derided tag ever)

Font Size <FONT SIZE=?></FONT> (ranges from 1-7)

Change Font Size <FONT SIZE="+|-?"></FONT>

Font Color <FONT COLOR="#$$$$$$"></FONT>

4.0* Select Font <FONT FACE="***"></FONT>

N4 Point size <FONT POINT-SIZE=?></FONT>

N4 Weight <FONT WEIGHT=?></FONT>

4.0* Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)

MS Marquee <MARQUEE></MARQUEE>

PRESENTATION FORMATTING
	Bold	`<B></B>`
	Italic	`<I></I>`
4.0*	Underline	`<U></U>`	(not widely implemented)
	Strikeout	`<STRIKE></STRIKE>`	(not widely implemented)
4.0*	Strikeout	`<S></S>`	(not widely implemented)
	Subscript	`<SUB></SUB>`
	Superscript	`<SUP></SUP>`
	Typewriter	`<TT></TT>`	(displays in a monospaced font)
	Preformatted	`<PRE></PRE>`	(display text spacing as-is)
	Width	`<PRE WIDTH=?></PRE>`	(in characters)
	Center	`<CENTER></CENTER>`	(for both text and images)
N1	Blinking	`<BLINK></BLINK>`	(the most derided tag ever)
	Font Size	`<FONT SIZE=?></FONT>`	(ranges from 1-7)
	Change Font Size	`<FONT SIZE="+\|-?"></FONT>`
	Font Color	`<FONT COLOR="#$$$$$$"></FONT>`
4.0*	Select Font	`<FONT FACE="***"></FONT>`
N4	Point size	`<FONT POINT-SIZE=?></FONT>`
N4	Weight	`<FONT WEIGHT=?></FONT>`
4.0*	Base Font Size	`<BASEFONT SIZE=?>`	(from 1-7; default is 3)
MS	Marquee	`<MARQUEE></MARQUEE>`

POSITIONING

N3 Multi-Column <MULTICOL COLS=?></MULTICOL>

N3 Column Gutter <MULTICOL GUTTER=?></MULTICOL>

N3 Column Width <MULTICOL WIDTH=?></MULTICOL>

N3 Spacer <SPACER>

N3 Spacer Type <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK>

N3 Size <SPACER SIZE=?>

N3 Dimensions <SPACER WIDTH=? HEIGHT=?>

N3 Alignment <SPACER ALIGN=LEFT|RIGHT|CENTER>

N4 Layer <LAYER></LAYER>

N4 Name <LAYER ID="***"></LAYER>

N4 Location <LAYER LEFT=? TOP=?></LAYER>

N4 Rel. Position <LAYER PAGEX=? PAGEY=?></LAYER>

N4 Source File <LAYER SRC="***"></LAYER>

N4 Stacking <LAYER Z-INDEX=?></LAYER>

N4 Stack Position <LAYER ABOVE="***" BELOW="***"></LAYER>

N4 Dimensions <LAYER HEIGHT=? WIDTH=?></LAYER>

N4 Clipping Path <LAYER CLIP=,,,></LAYER>

N4 Visible? <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>

N4 Background <LAYER BACKGROUND="$$$$$$"></LAYER>

N4 Color <LAYER BGCOLOR="$$$$$$"></LAYER>

N4 Inline Layer <ILAYER></ILAYER> (takes same attributes as LAYER)

N4 Alt. Content <NOLAYER></NOLAYER>

POSITIONING
N3	Multi-Column	`<MULTICOL COLS=?></MULTICOL>`
N3	Column Gutter	`<MULTICOL GUTTER=?></MULTICOL>`
N3	Column Width	`<MULTICOL WIDTH=?></MULTICOL>`
N3	Spacer	`<SPACER>`
N3	Spacer Type	`<SPACER TYPE=HORIZONTAL\|VERTICAL\|BLOCK>`
N3	Size	`<SPACER SIZE=?>`
N3	Dimensions	`<SPACER WIDTH=? HEIGHT=?>`
N3	Alignment	`<SPACER ALIGN=LEFT\|RIGHT\|CENTER>`
N4	Layer	`<LAYER></LAYER>`
N4	Name	`<LAYER ID="***"></LAYER>`
N4	Location	`<LAYER LEFT=? TOP=?></LAYER>`
N4	Rel. Position	`<LAYER PAGEX=? PAGEY=?></LAYER>`
N4	Source File	`<LAYER SRC="***"></LAYER>`
N4	Stacking	`<LAYER Z-INDEX=?></LAYER>`
N4	Stack Position	`<LAYER ABOVE="*" BELOW="*"></LAYER>`
N4	Dimensions	`<LAYER HEIGHT=? WIDTH=?></LAYER>`
N4	Clipping Path	`<LAYER CLIP=,,,></LAYER>`
N4	Visible?	`<LAYER VISIBILITY=SHOW\|HIDDEN\|INHERIT></LAYER>`
N4	Background	`<LAYER BACKGROUND="$$$$$$"></LAYER>`
N4	Color	`<LAYER BGCOLOR="$$$$$$"></LAYER>`
N4	Inline Layer	`<ILAYER></ILAYER>`	(takes same attributes as LAYER)
N4	Alt. Content	`<NOLAYER></NOLAYER>`

LINKS, GRAPHICS, AND SOUNDS

Link Something <A HREF="URL"></A>

Link to Location <A HREF="URL#***"></A> (if in another document)

<A HREF="#***"></A> (if in current document)

4.0* Target Window <A HREF="URL" TARGET="***"></A>

4.0* Action on Click <A HREF="URL" ONCLICK="***"></A> (Javascript)

4.0* Mouseover Action <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript)

4.0* Mouse out Action <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript)

Link to Email <A HREF="mailto:@"></A>

N, MS Specify Subject <A HREF="mailto:@?SUBJECT=***"></A> (use a real question mark)

Define Location <A NAME="***"></A>

Display Image <IMG SRC="URL">

Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

N1 Alignment <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>

Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)

Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)

<IMG SRC="URL" WIDTH=% HEIGHT=%> (as percentage of page width/height)

Border <IMG SRC="URL" BORDER=?> (in pixels)

Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)

N1 Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">

Imagemap <IMG SRC="URL" ISMAP> (requires a script)

Imagemap <IMG SRC="URL" USEMAP="URL">

MS Movie Clip <IMG DYNSRC="***" START="***" LOOP=?>

MS Background Sound <BGSOUND SRC="***" LOOP=?|INFINITE>

Client-Side Map <MAP NAME="***"></MAP> (describes the map)

Map Section <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF>

N1 Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

N2 Embed Object <EMBED SRC="URL"> (insert object into page)

N2 Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?>

4.0 Object <OBJECT></OBJECT>

4.0 Parameters <PARAM>

LINKS, GRAPHICS, AND SOUNDS
	Link Something	`<A HREF="URL"></A>`
	Link to Location	`<A HREF="URL#***"></A>`	(if in another document)
		`<A HREF="#***"></A>`	(if in current document)
4.0*	Target Window	`<A HREF="URL" TARGET="***"></A>`
4.0*	Action on Click	`<A HREF="URL" ONCLICK="***"></A>`	(Javascript)
4.0*	Mouseover Action	`<A HREF="URL" ONMOUSEOVER="***"></A>`	(Javascript)
4.0*	Mouse out Action	`<A HREF="URL" ONMOUSEOUT="***"></A>`	(Javascript)
	Link to Email	`<A HREF="mailto:@"></A>`
N, MS	Specify Subject	`<A HREF="mailto:@?SUBJECT=***"></A>`	(use a real question mark)
	Define Location	`<A NAME="***"></A>`
	Display Image	`<IMG SRC="URL">`
	Alignment	`<IMG SRC="URL" ALIGN=TOP\|BOTTOM\|MIDDLE\|LEFT\|RIGHT>`
N1	Alignment	`<IMG SRC="URL" ALIGN=TEXTTOP\|ABSMIDDLE\|BASELINE\|ABSBOTTOM>`
	Alternate	`<IMG SRC="URL" ALT="***">`	(if image not displayed)
	Dimensions	`<IMG SRC="URL" WIDTH=? HEIGHT=?>`	(in pixels)
		`<IMG SRC="URL" WIDTH=% HEIGHT=%>`	(as percentage of page width/height)
	Border	`<IMG SRC="URL" BORDER=?>`	(in pixels)
	Runaround Space	`<IMG SRC="URL" HSPACE=? VSPACE=?>`	(in pixels)
N1	Low-Res Proxy	`<IMG SRC="URL" LOWSRC="URL">`
	Imagemap	`<IMG SRC="URL" ISMAP>`	(requires a script)
	Imagemap	`<IMG SRC="URL" USEMAP="URL">`
MS	Movie Clip	`<IMG DYNSRC="*" START="*" LOOP=?>`
MS	Background Sound	`<BGSOUND SRC="***" LOOP=?\|INFINITE>`
	Client-Side Map	`<MAP NAME="***"></MAP>`	(describes the map)
	Map Section	`<AREA SHAPE="DEFAULT\|RECT\|CIRCLE\|POLY" COORDS=",,," HREF="URL"\|NOHREF>`
N1	Client Pull	`<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">`
N2	Embed Object	`<EMBED SRC="URL">`	(insert object into page)
N2	Object Size	`<EMBED SRC="URL" WIDTH=? HEIGHT=?>`
4.0	Object	`<OBJECT></OBJECT>`
4.0	Parameters	`<PARAM>`

DIVIDERS

Paragraph <P></P> (closing tag often unnecessary)

Align Text <P ALIGN=LEFT|CENTER|RIGHT></P>

N Justify Text <P ALIGN=JUSTIFY></P>

Line Break <BR> (a single carriage return)

Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>

Horizontal Rule <HR>

Alignment <HR ALIGN=LEFT|RIGHT|CENTER>

Thickness <HR SIZE=?> (in pixels)

Width <HR WIDTH=?> (in pixels)

Width Percent <HR WIDTH="%"> (as a percentage of page width)

Solid Line <HR NOSHADE> (without the 3D cutout look)

N1 No Break <NOBR></NOBR> (prevents line breaks)

N1 Word Break <WBR> (where to break a line if needed)

DIVIDERS
	Paragraph	`<P></P>`	(closing tag often unnecessary)
	Align Text	`<P ALIGN=LEFT\|CENTER\|RIGHT></P>`
N	Justify Text	`<P ALIGN=JUSTIFY></P>`
	Line Break	`<BR>`	(a single carriage return)
	Clear Textwrap	`<BR CLEAR=LEFT\|RIGHT\|ALL>`
	Horizontal Rule	`<HR>`
	Alignment	`<HR ALIGN=LEFT\|RIGHT\|CENTER>`
	Thickness	`<HR SIZE=?>`	(in pixels)
	Width	`<HR WIDTH=?>`	(in pixels)
	Width Percent	`<HR WIDTH="%">`	(as a percentage of page width)
	Solid Line	`<HR NOSHADE>`	(without the 3D cutout look)
N1	No Break	`<NOBR></NOBR>`	(prevents line breaks)
N1	Word Break	`<WBR>`	(where to break a line if needed)

LISTS

Unordered List <UL><LI></UL> (before each list item)

Compact <UL COMPACT></UL>

Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list)

Bullet Type <LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)

Ordered List <OL><LI></OL> (before each list item)

Compact <OL COMPACT></OL>

Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)

Numbering Type <LI TYPE=A|a|I|i|1> (this & subsequent)

Starting Number <OL START=?> (for the whole list)

Starting Number <LI VALUE=?> (this & subsequent)

Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)

Compact <DL COMPACT></DL>

Menu List <MENU><LI></MENU> (before each list item)

Compact <MENU COMPACT></MENU>

Directory List <DIR><LI></DIR> (before each list item)

Compact <DIR COMPACT></DIR>


Unordered List	`<UL><LI></UL>`	(before each list item)
Compact	`<UL COMPACT></UL>`
Bullet Type	`<UL TYPE=DISC\|CIRCLE\|SQUARE>`	(for the whole list)
Bullet Type	`<LI TYPE=DISC\|CIRCLE\|SQUARE>`	(this & subsequent)
Ordered List	`<OL><LI></OL>`	(before each list item)
Compact	`<OL COMPACT></OL>`
Numbering Type	`<OL TYPE=A\|a\|I\|i\|1>`	(for the whole list)
Numbering Type	`<LI TYPE=A\|a\|I\|i\|1>`	(this & subsequent)
Starting Number	`<OL START=?>`	(for the whole list)
Starting Number	`<LI VALUE=?>`	(this & subsequent)
Definition List	`<DL><DT><DD></DL>`	(<DT>=term, <DD>=definition)
Compact	`<DL COMPACT></DL>`
Menu List	`<MENU><LI></MENU>`	(before each list item)
Compact	`<MENU COMPACT></MENU>`
Directory List	`<DIR><LI></DIR>`	(before each list item)
Compact	`<DIR COMPACT></DIR>`

BACKGROUNDS AND COLORS

Tiled Bkground <BODY BACKGROUND="URL">

MS Watermark <BODY BGPROPERTIES="FIXED">

Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)

Text Color <BODY TEXT="#$$$$$$">

Link Color <BODY LINK="#$$$$$$">

Visited Link <BODY VLINK="#$$$$$$">

Active Link <BODY ALINK="#$$$$$$">

(More info at http://werbach.com/web/wwwhelp.html#color)

BACKGROUNDS AND COLORS
	Tiled Bkground	`<BODY BACKGROUND="URL">`
MS	Watermark	`<BODY BGPROPERTIES="FIXED">`
	Bkground Color	`<BODY BGCOLOR="#$$$$$$">`	(order is red/green/blue)
	Text Color	`<BODY TEXT="#$$$$$$">`
	Link Color	`<BODY LINK="#$$$$$$">`
	Visited Link	`<BODY VLINK="#$$$$$$">`
	Active Link	`<BODY ALINK="#$$$$$$">`
	(More info at http://werbach.com/web/wwwhelp.html#color)

SPECIAL CHARACTERS

Special Character &#?; (where ? is the ISO 8859-1 code)

< <

> >

& &

" "

Registered TM ®

Registered TM ®

Copyright ©

Copyright ©

Non-Breaking Space  

(Complete list at http://www.uni-passau.de/%7Eramsch/iso8859-1.html)


Special Character	`&#?;`	(where ? is the ISO 8859-1 code)
<	`<`
>	`>`
&	`&`
"	`"`
Registered TM	`®`
Registered TM	`®`
Copyright	`©`
Copyright	`©`
Non-Breaking Space	` `
(Complete list at http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

FORMS

Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>

4.0* File Upload <FORM ENCTYPE="multipart/form-data"></FORM>

Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">

Field Name <INPUT NAME="***">

Field Value <INPUT VALUE="***">

Checked? <INPUT CHECKED> (checkboxes and radio boxes)

Field Size <INPUT SIZE=?> (in characters)

Max Length <INPUT MAXLENGTH=?> (in characters)

4.0 Button <BUTTON></BUTTON>

4.0 Button Name <BUTTON NAME="***"></BUTTON>

4.0 Button Type <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>

4.0 Default Value <BUTTON VALUE="***"></BUTTON>

4.0 Label <LABEL></LABEL>

4.0 Item Labelled <LABEL FOR="***"></LABEL>

Selection List <SELECT></SELECT>

Name of List <SELECT NAME="***"></SELECT>

# of Options <SELECT SIZE=?></SELECT>

Multiple Choice <SELECT MULTIPLE> (can select more than one)

Option <OPTION> (items that can be selected)

Default Option <OPTION SELECTED>

Option Value <OPTION VALUE="***">

4.0 Option Group <OPTGROUP LABEL="***"></OPTGROUP>

Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTAREA>

Name of Box <TEXTAREA NAME="***"></TEXTAREA>

N2 Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>

4.0 Group elements <FIELDSET></FIELDSET>

4.0 Legend <LEGEND></LEGEND> (caption for fieldsets)

4.0 Alignment <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>

FORMS
	Define Form	`<FORM ACTION="URL" METHOD=GET\|POST></FORM>`
4.0*	File Upload	`<FORM ENCTYPE="multipart/form-data"></FORM>`
	Input Field	`<INPUT TYPE="TEXT\|PASSWORD\|CHECKBOX\|RADIO\| FILE\|BUTTON\|IMAGE\|HIDDEN\|SUBMIT\|RESET">`
	Field Name	`<INPUT NAME="***">`
	Field Value	`<INPUT VALUE="***">`
	Checked?	`<INPUT CHECKED>`	(checkboxes and radio boxes)
	Field Size	`<INPUT SIZE=?>`	(in characters)
	Max Length	`<INPUT MAXLENGTH=?>`	(in characters)
4.0	Button	`<BUTTON></BUTTON>`
4.0	Button Name	`<BUTTON NAME="***"></BUTTON>`
4.0	Button Type	`<BUTTON TYPE="SUBMIT\|RESET\|BUTTON"></BUTTON>`
4.0	Default Value	`<BUTTON VALUE="***"></BUTTON>`
4.0	Label	`<LABEL></LABEL>`
4.0	Item Labelled	`<LABEL FOR="***"></LABEL>`
	Selection List	`<SELECT></SELECT>`
	Name of List	`<SELECT NAME="***"></SELECT>`
	# of Options	`<SELECT SIZE=?></SELECT>`
	Multiple Choice	`<SELECT MULTIPLE>`	(can select more than one)
	Option	`<OPTION>`	(items that can be selected)
	Default Option	`<OPTION SELECTED>`
	Option Value	`<OPTION VALUE="***">`
4.0	Option Group	`<OPTGROUP LABEL="***"></OPTGROUP>`
	Input Box Size	`<TEXTAREA ROWS=? COLS=?></TEXTAREA>`
	Name of Box	`<TEXTAREA NAME="***"></TEXTAREA>`
N2	Wrap Text	`<TEXTAREA WRAP=OFF\|HARD\|SOFT></TEXTAREA>`
4.0	Group elements	`<FIELDSET></FIELDSET>`
4.0	Legend	`<LEGEND></LEGEND>`	(caption for fieldsets)
4.0	Alignment	`<LEGEND ALIGN="TOP\|BOTTOM\|LEFT\|RIGHT"></LEGEND>`

TABLES

Define Table <TABLE></TABLE>

4.0* Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER>

Table Border <TABLE BORDER></TABLE> (either on or off)

Table Border <TABLE BORDER=?></TABLE> (you can set the value)

Cell Spacing <TABLE CELLSPACING=?>

Cell Padding <TABLE CELLPADDING=?>

Desired Width <TABLE WIDTH=?> (in pixels)

Width Percent <TABLE WIDTH=%> (percentage of page)

4.0* Table Color <TABLE BGCOLOR="$$$$$$"></TABLE>

4.0 Table Frame <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE>

4.0 Table Rules <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>

MS Border Color <TABLE BORDERCOLOR="$$$$$$"></TABLE>

MS Dark Border <TABLE BORDERCOLORDARK="$$$$$$"></TABLE>

MS Light Border <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>

Table Row <TR></TR>

Alignment <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Table Cell <TD></TD> (must appear within table rows)

Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

No linebreaks <TD NOWRAP>

Columns to Span <TD COLSPAN=?>

Rows to Span <TD ROWSPAN=?>

4.0* Desired Width <TD WIDTH=?> (in pixels)

N3 Width Percent <TD WIDTH="%"> (percentage of table)

4.0* Cell Color <TD BGCOLOR="#$$$$$$">

Header Cell <TH></TH> (same as data, except bold centered)

Alignment <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

No Linebreaks <TH NOWRAP>

Columns to Span <TH COLSPAN=?>

Rows to Span <TH ROWSPAN=?>

4.0* Desired Width <TH WIDTH=?> (in pixels)

N3 Width Percent <TH WIDTH="%"> (percentage of table)

4.0* Cell Color <TH BGCOLOR="#$$$$$$">

4.0 Table Body <TBODY>

4.0 Table Footer <TFOOT></TFOOT> (must come before THEAD>

4.0 Table Header <THEAD></THEAD>

Table Caption <CAPTION></CAPTION>

Alignment <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT>

4.0 Column <COL></COL> (groups column attributes)

4.0 Columns Spanned <COL SPAN=?></COL>

4.0 Column Width <COL WIDTH=?></COL>

4.0 Width Percent <COL WIDTH="%"></COL>

4.0 Group columns <COLGROUP></COLGROUP> (groups column structure)

4.0 Columns Spanned <COLGROUP SPAN=?></COLGROUP>

4.0 Group Width <COLGROUP WIDTH=?></COLGROUP>

4.0 Width Percent <COLGROUP WIDTH="%"></COLGROUP>

TABLES
	Define Table	`<TABLE></TABLE>`
4.0*	Table Alignment	`<TABLE ALIGN=LEFT\|RIGHT\|CENTER>`
	Table Border	`<TABLE BORDER></TABLE>`	(either on or off)
	Table Border	`<TABLE BORDER=?></TABLE>`	(you can set the value)
	Cell Spacing	`<TABLE CELLSPACING=?>`
	Cell Padding	`<TABLE CELLPADDING=?>`
	Desired Width	`<TABLE WIDTH=?>`	(in pixels)
	Width Percent	`<TABLE WIDTH=%>`	(percentage of page)
4.0*	Table Color	`<TABLE BGCOLOR="$$$$$$"></TABLE>`
4.0	Table Frame	`<TABLE FRAME=VOID\|ABOVE\|BELOW\|HSIDES\|LHS\|RHS\| VSIDES\|BOX\|BORDER></TABLE>`
4.0	Table Rules	`<TABLE RULES=NONE\|GROUPS\|ROWS\|COLS\|ALL></TABLE>`
MS	Border Color	`<TABLE BORDERCOLOR="$$$$$$"></TABLE>`
MS	Dark Border	`<TABLE BORDERCOLORDARK="$$$$$$"></TABLE>`
MS	Light Border	`<TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>`
	Table Row	`<TR></TR>`
	Alignment	`<TR ALIGN=LEFT\|RIGHT\|CENTER\|MIDDLE\|BOTTOM>`
	Table Cell	`<TD></TD>`	(must appear within table rows)
	Alignment	`<TD ALIGN=LEFT\|RIGHT\|CENTER VALIGN=TOP\|MIDDLE\|BOTTOM>`
	No linebreaks	`<TD NOWRAP>`
	Columns to Span	`<TD COLSPAN=?>`
	Rows to Span	`<TD ROWSPAN=?>`
4.0*	Desired Width	`<TD WIDTH=?>`	(in pixels)
N3	Width Percent	`<TD WIDTH="%">`	(percentage of table)
4.0*	Cell Color	`<TD BGCOLOR="#$$$$$$">`
	Header Cell	`<TH></TH>`	(same as data, except bold centered)
	Alignment	`<TH ALIGN=LEFT\|RIGHT\|CENTER\|MIDDLE\|BOTTOM>`
	No Linebreaks	`<TH NOWRAP>`
	Columns to Span	`<TH COLSPAN=?>`
	Rows to Span	`<TH ROWSPAN=?>`
4.0*	Desired Width	`<TH WIDTH=?>`	(in pixels)
N3	Width Percent	`<TH WIDTH="%">`	(percentage of table)
4.0*	Cell Color	`<TH BGCOLOR="#$$$$$$">`
4.0	Table Body	`<TBODY>`
4.0	Table Footer	`<TFOOT></TFOOT>`	(must come before `THEAD>`
4.0	Table Header	`<THEAD></THEAD>`
	Table Caption	`<CAPTION></CAPTION>`
	Alignment	`<CAPTION ALIGN=TOP\|BOTTOM\|LEFT\|RIGHT>`
4.0	Column	`<COL></COL>`	(groups column attributes)
4.0	Columns Spanned	`<COL SPAN=?></COL>`
4.0	Column Width	`<COL WIDTH=?></COL>`
4.0	Width Percent	`<COL WIDTH="%"></COL>`
4.0	Group columns	`<COLGROUP></COLGROUP>`	(groups column structure)
4.0	Columns Spanned	`<COLGROUP SPAN=?></COLGROUP>`
4.0	Group Width	`<COLGROUP WIDTH=?></COLGROUP>`
4.0	Width Percent	`<COLGROUP WIDTH="%"></COLGROUP>`

FRAMES

4.0* Frame Document <FRAMESET></FRAMESET> (instead of <BODY>)

4.0* Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %)

4.0* Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size)

4.0* Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %)

4.0* Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size)

4.0* Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>

4.0* Border Width <FRAMESET BORDER=?></FRAMESET>

4.0* Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>

N3 Frame Spacing <FRAMESET FRAMESPACING=?></FRAMESET>

4.0* Define Frame <FRAME> (contents of an individual frame)

4.0* Display Document <FRAME SRC="URL">

4.0* Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>

4.0* Margin Width <FRAME MARGINWIDTH=?> (left and right margins)

4.0* Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)

4.0* Scrollbar? <FRAME SCROLLING="YES|NO|AUTO">

4.0* Not Resizable <FRAME NORESIZE>

4.0* Borders <FRAME FRAMEBORDER="yes|no">

4.0* Border Color <FRAME BORDERCOLOR="#$$$$$$">

4.0* Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers)

4.0 Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME)

4.0 Dimensions <IFRAME WIDTH=? HEIGHT=?></IFRAME>

4.0 Dimensions <IFRAME WIDTH="%" HEIGHT="%"></IFRAME>

FRAMES
4.0*	Frame Document	`<FRAMESET></FRAMESET>`	(instead of <BODY>)
4.0*	Row Heights	`<FRAMESET ROWS=,,,></FRAMESET>`	(pixels or %)
4.0*	Row Heights	`<FRAMESET ROWS=*></FRAMESET>`	(* = relative size)
4.0*	Column Widths	`<FRAMESET COLS=,,,></FRAMESET>`	(pixels or %)
4.0*	Column Widths	`<FRAMESET COLS=*></FRAMESET>`	(* = relative size)
4.0*	Borders	`<FRAMESET FRAMEBORDER="yes\|no"></FRAMESET>`
4.0*	Border Width	`<FRAMESET BORDER=?></FRAMESET>`
4.0*	Border Color	`<FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>`
N3	Frame Spacing	`<FRAMESET FRAMESPACING=?></FRAMESET>`
4.0*	Define Frame	`<FRAME>`	(contents of an individual frame)
4.0*	Display Document	`<FRAME SRC="URL">`
4.0*	Frame Name	`<FRAME NAME="***"\|_blank\|_self\|_parent\|_top>`
4.0*	Margin Width	`<FRAME MARGINWIDTH=?>`	(left and right margins)
4.0*	Margin Height	`<FRAME MARGINHEIGHT=?>`	(top and bottom margins)
4.0*	Scrollbar?	`<FRAME SCROLLING="YES\|NO\|AUTO">`
4.0*	Not Resizable	`<FRAME NORESIZE>`
4.0*	Borders	`<FRAME FRAMEBORDER="yes\|no">`
4.0*	Border Color	`<FRAME BORDERCOLOR="#$$$$$$">`
4.0*	Unframed Content	`<NOFRAMES></NOFRAMES>`	(for non-frames browsers)
4.0	Inline Frame	`<IFRAME></IFRAME>`	(takes same attributes as FRAME)
4.0	Dimensions	`<IFRAME WIDTH=? HEIGHT=?></IFRAME>`
4.0	Dimensions	`<IFRAME WIDTH="%" HEIGHT="%"></IFRAME>`

SCRIPTS AND JAVA

Script <SCRIPT></SCRIPT>

Location <SCRIPT SRC="URL"></SCRIPT>

Type <SCRIPT TYPE="***"></SCRIPT>

Language <SCRIPT LANGUAGE="***"></SCRIPT>

4.0* Other Content <NOSCRIPT></NOSCRIPT> (if scripts not supported)

Applet <APPLET></APPLET>

File Name <APPLET CODE="***">

Parameters <APPLET PARAM NAME="***">

Location <APPLET CODEBASE="URL">

Identifier <APPLET NAME="***"> (for references)

Alt Text <APPLET ALT="***"> (for non-Java browsers)

Alignment <APPLET ALIGN="LEFT|RIGHT|CENTER">

Size <APPLET WIDTH=? HEIGHT=?> (in pixels)

Spacing <APPLET HSPACE=? VSPACE=?> (in pixels)

N4 Server Script <SERVER></SERVER>

SCRIPTS AND JAVA
	Script	`<SCRIPT></SCRIPT>`
	Location	`<SCRIPT SRC="URL"></SCRIPT>`
	Type	`<SCRIPT TYPE="***"></SCRIPT>`
	Language	`<SCRIPT LANGUAGE="***"></SCRIPT>`
4.0*	Other Content	`<NOSCRIPT></NOSCRIPT>`	(if scripts not supported)
	Applet	`<APPLET></APPLET>`
	File Name	`<APPLET CODE="***">`
	Parameters	`<APPLET PARAM NAME="***">`
	Location	`<APPLET CODEBASE="URL">`
	Identifier	`<APPLET NAME="***">`	(for references)
	Alt Text	`<APPLET ALT="***">`	(for non-Java browsers)
	Alignment	`<APPLET ALIGN="LEFT\|RIGHT\|CENTER">`
	Size	`<APPLET WIDTH=? HEIGHT=?>`	(in pixels)
	Spacing	`<APPLET HSPACE=? VSPACE=?>`	(in pixels)
N4	Server Script	`<SERVER></SERVER>`

MISCELLANEOUS

Comment  (not displayed by the browser)

Prologue <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Searchable <ISINDEX> (indicates a searchable index)

Prompt <ISINDEX PROMPT="***"> (text to prompt input)

Send Search <A HREF="URL?***"></a> (use a real question mark)

URL of This File <BASE HREF="URL"> (must be in header)

4.0* Base Window Name <BASE TARGET="***"> (must be in header)

Relationship <LINK REV="***" REL="***" HREF="URL"> (in header)

N4 Linked File <LINK TYPE="***" SRC="***"></LINK>

Meta Information <META> (must be in header)

Style Sheets <STYLE></STYLE> (implementations vary)

4.0 Bidirect Off <BDO DIR=LTR|RTL></BDO> (for certain character sets)

MISCELLANEOUS
	Comment	`<!-- *** -->`	(not displayed by the browser)
	Prologue	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">`
	Searchable	`<ISINDEX>`	(indicates a searchable index)
	Prompt	`<ISINDEX PROMPT="***">`	(text to prompt input)
	Send Search	`<A HREF="URL?***"></a>`	(use a real question mark)
	URL of This File	`<BASE HREF="URL">`	(must be in header)
4.0*	Base Window Name	`<BASE TARGET="***">`	(must be in header)
	Relationship	`<LINK REV="*" REL="*" HREF="URL">`	(in header)
N4	Linked File	`<LINK TYPE="*" SRC="*"></LINK>`
	Meta Information	`<META>`	(must be in header)
	Style Sheets	`<STYLE></STYLE>`	(implementations vary)
4.0	Bidirect Off	`<BDO DIR=LTR\|RTL></BDO>`	(for certain character sets)

Copyright ©1995-1999 Kevin Werbach. Redistribution is permitted, so long as there is no charge and this document is included without alteration in its entirety. This Guide is not a product of Bare Bones Software. More information is available at http://werbach.com/barebones.

Take 10 Minutes to Learn^(TM) - HTML

The 10 Minutes to Learn was prepared by Barry Floyd. This document may be found at http://www.geocities.com/SiliconValley/7331/ten_html.html
This tutorial does NOT include installation of tools needed to edit or display these pages. Once these tools are installed, start your timer...

You may copy and paste the code to your own files and test it yourself. Expand on these basic concepts, one step at a time, to create more complex pages.

Each section contains a fully formed code segment. No additions are necessary, though you may test your own additions within this basic framework. You may combine code segments by starting with the Minimum HTML framework and copying in the code found between any of the <BODY> tags.

Basic Framework	Minimum Framework		Lists
Links	Forms		Frames
Resources
WWW Consortium - HTML Standards		The Bare Bones Guide to HTML
Doctor HTML - On-Line document validation

Basic HTML Framework


<HTML>
  <HEAD>
    <TITLE> Title </TITLE>

    <META NAME="description" content="Basic HTML Framework.">
    <META NAME="keywords"    content="Barry Floyd BBF">
  </HEAD>

  <BODY BGCOLOR="#FFFBEC" 
           TEXT="#000000" 
           LINK="#0000FF" 
          ALINK="#5F9F9F" 
          VLINK="#BC8F8F">

    <A NAME="TOP"> <BR> </A>

    <H3 ALIGN=CENTER> Title </H3>

    <HR> <BR> 
    <P> Text </P>
    <BR> <BR> 

    <TABLE BORDER=2 CELLPADDING=5> 
      <TR> 
        <TD> Cell </TD> 
      </TR>
    </TABLE> 

    <BR> 

    <HR> <BR> 
    <A HREF="#TOP"> Return to the top of the document </A> 
    <BR> <BR>

  </BODY>
</HTML>

This code segment is much like the one used to create the page you are now reading. HTML (Hyper-Text Markup Language) employs tags embedded in < and > signs to specify kinds of text, images, etc. and their general placement within the page. Most tags are self-explanatory (e.g. <TITLE> is like the title of a book).

Many of the tags must be used in pairs, enclosing the text, images, etc. like parentheses. The opening tag and the closing tag differ only in the use of a / forward slash (e.g. <P> paragraph </P>, <TABLE> table </TABLE>, <TR> table row </TR>, and <TD> table cell </TD>).

Some tags are unmatched. These tags perform a single function unto themselves (e.g. <BR> is a line break, <HR> is a horizontal rule).

Return to top
Please send comments to Barry B. Floyd

Minimum HTML Framework

ALL HTML files should contain at least the following tags.


<HTML>
  <HEAD>
    <TITLE> Title </TITLE>
  </HEAD>

  <BODY>
    hello world!
  </BODY>
</HTML>

This code segment generates an extremely simple WWWeb page, displaying only a title and the words "hello world!". The <HEAD> is like the front-page of a book. The <BODY> is like everything that follows the table of contents in a book. Where books don't explicitly label the front-page and body, HTML documents use these tags to do so.

In the first code segment the <BODY> tag contained several modifiers. Most tags may include one or more modifiers placed following the opening tag name and before the > sign, separated by spaces. In this case the <BODY> tag may include color definitions and a background texture definition.

Return to top
Please send comments to Barry B. Floyd

HTML Lists


<HTML>
  <HEAD>
    <TITLE> Title </TITLE>
  </HEAD>

  <BODY>
    <!-- Bulletted List (aka Unordered List) -->
    <HR> <BR> 
    <UL>
       <LI> One
       <LI> Two
    </UL>

    <!-- Numbered List (aka Ordered List) -->
    <HR> <BR> 
    <OL>
       <LI> One
       <LI> Two
    </OL>

    <!-- Definition List -->
    <HR> <BR> 
    <DL>
       <DT> One
         <DD> Definition of One
       <DT> Two
         <DD> Definition of Two
    </DL>
  </BODY>
</HTML>

This code segment generates three extremely simple two-item lists. Each list is embedded in a pair of list identifiers. Each item is preceded by a single item identifier. In the case of the Definition List, there are two separate item identifiers - one for the definition term <DT>, and one for the definition <DD>.

This code segment also demonstrates the use of in-line coding comments. Comments about the code may be included by using the tag . Note, the tag name is effectively !-- and is followed by the comment, which is then followed by the closing --.

Return to top
Please send comments to Barry B. Floyd

HTML Links


<HTML>
  <HEAD>
    <TITLE> Title </TITLE>
  </HEAD>

  <BODY>
    <A NAME="TOP"> <BR> </A>

    <HR> <BR> 
    <A HREF="http://http://www.geocities.com/SiliconValley/7331/ten_html.html"> 
         Hi-lighted text </A>

    <HR> <BR> 
    <A HREF="#TOP"> Hi-lighted text </A>

    <HR> <BR> 
    <IMG SRC="http://www.geocities.com/SiliconValley/7331/books02.gif"
         ALT="Alternative text when image not displayed">

    <HR> <BR> 
    <A HREF="mailto:floydb@city-of-troy.com"> 
         <IMG SRC="http://www.geocities.com/SiliconValley/7331/books02.gif"
         ALT="Alternative text when image not displayed"> 
         send e-mail 
    </A>

    <HR> <BR> 
  </BODY>
</HTML>

This code segment shows three kinds of links. You may link to other HTML documents, to other locations within an HTML document, or to other non-HTML files. In order to link to other locations within an HTML document, you must define a corresponding name (e.g. <A NAME="TOP"> <BR> </A>).

Each active link is defined by the anchor tag pair <A> </A>, along with at least one embedded modifier (e.g. NAME="" and HREF=""). The type of server, supporting the link at the other end, is specified as part of the quoted text following the HREF= modifier. In this case an http server is specified. "http" along with the path information is commonly referred to as a URL or Universal Resource Locator. There are several standard URL types (e.g. http, ftp, telnet, mailto, etc.).

The in-line link to an image uses the <IMG SRC="..."> syntax. This does not result in a clickable spot on the page.

The fourth code sub-block demonstrates the use of an image as a clickable spot on the page, along with the text "send e-mail". The <IMG SRC="..."> is embedded within the <A HREF=""> </A> active link tag pair, thus making it part of the clickable area for this active link.

Return to top
Please send comments to Barry B. Floyd

Forms


<HTML>
  <HEAD>
    <TITLE> Title </TITLE>
  </HEAD>

  <BODY>
    <H3>Please sign the guest book.</H3>

    <HR>

    <FORM METHOD="post" ACTION="http://lpage.com/cgi-bin/wgb.pl/floydb">
          Name:	    <BR> <INPUT NAME="name"     SIZE=30 MAXLENGTH=60> <BR> 
          Email:    <BR> <INPUT NAME="email"    SIZE=40 MAXLENGTH=60> <BR> 
          Homepage: <BR> <INPUT NAME="homepage" SIZE=50 MAXLENGTH=60 
                      VALUE="http://"> 

      <BR>

          How did you find this guest book?: 
      <SELECT NAME="reference" >
        <OPTION>Lpage.Com
        <OPTION>Search Engine
        <OPTION>USENET NewsGroup
        <OPTION>Friend or colleague
        <OPTION selected>By Accident</SELECT> 

      <BR> 

      Comments:<BR>
      <TEXTAREA NAME="comments" COLS=50 ROWS=5></TEXTAREA> 

      <BR> 

      <INPUT TYPE="submit" VALUE="Sign Guest Book">
      <INPUT TYPE="reset"  VALUE="Clear">
    </FORM>
  </BODY>
</HTML>

This code segment displays a simple form that posts the data gathered to a (somewhat bogged down) guest book server at LPAGE.COM.

The form definition is embedded in the paired tags <FORM> and </FORM>. You may define input fields, text areas, selection buttons and option menus (among other things) using standard tags, user-defined labels, and user-defined variable names. You may also define the character length and height of data entry areas, and assign default values.

At this time, the data gathered through a form may only be processed via a CGI/bin script, typically stored on a WWWeb server. Thus, to use forms you need access to a WWWeb server, not merely a WWWeb browser. At some time in the future you may be able to simply post form data to an e-mail address, but not yet (mid 1996).

Return to top
Please send comments to Barry B. Floyd

Frames


<!-- file frames.html -->

<HTML>
  <HEAD>
    <TITLE>Example of Frames Usage</TITLE>
  </HEAD>

  <FRAMESET ROWS="10%,*"> 
    <FRAME SRC = "http://www.geocities.com/SiliconValley/7331/fr_head.html"
           NAME = "Header"
           MARGINHEIGHT = 0
           MARGINWIDTH = 0
           SCROLLING = "no">

    <FRAMESET COLS="25%,*"> 
      <FRAME SRC = "http://www.geocities.com/SiliconValley/7331/fr_menu.html"
             NAME = "Menu"
             MARGINHEIGHT = 0
             MARGINWIDTH = 0
             SCROLLING = "yes">

      <FRAME SRC = "http://www.geocities.com/SiliconValley/7331/fr_warn.html"
             NAME = "Info"
             MARGINHEIGHT = 5
             MARGINWIDTH = 5
             SCROLLING = "yes">
    </FRAMESET>
  </FRAMESET>

  <NOFRAMES>
    <BODY BGCOLOR="#FFFBEC" 
             TEXT="#000000" 
             LINK="#0000FF" 
            ALINK="#5F9F9F" 
            VLINK="#BC8F8F">

      <P>
      Frames and related tags currently (mid 1996) are not recognized by
      any standards making group. Examples of their use are for educational
      purposes. 
      </P>

      <P>
      Until such time as they are endorsed and widely supported, they
      should NOT be employed as the primary means of viewing and navigating
      through your WWWeb site.
      </P>
    </BODY>
  </NOFRAMES>
</HTML>


<!-- file fr_menu.html -->
<HTML>
  <HEAD>
    <TITLE> Title </TITLE>  
  </HEAD>

  <BODY>
<!-- various HTML tags not shown... -->

    <BR><A HREF="http://www.angelfire.com/pages0/floydb/"                      
           TARGET="Info"  >Bookmarks</A>

<!-- various HTML tags not shown... -->
  </BODY>
</HTML>

This code segment displays a simple set of three frames in a fairly traditional pattern. A header frame spans the width of the window with two frames below. The lower left frame is used for navigation and the lower right frame is used to display content. More than three frames and the non-content frames start taking up too much of the available window. You may view the frames.

Frames require one layout document and one or more content documents. In this example, the layout document is named frames.html and the three content documents are named fr_head.html, fr_menu.html, and fr_warn.html. File fr_head.html is a standard HTML document, containing only a <H1> Frame Header </H1> statement. File fr_warn.html contains the text found between the <NOFRAMES> tag pair. File fr_menu.html contains a simple set of links, with one additional modifier in each anchor (see paragraph six).

Instead of an HTML <BODY>, the layout document contains a <FRAMESET...> tag pair. These may be nested within each other. The layout document must not contain any HTML tags, or the <FRAMESET...> tags will be ignored. The exception to this rule involves usage of the <NOFRAMES> tag pair, between which you may include anything you would normally find within the HTML <BODY>. The <NOFRAMES> tags are available to accommodate WWWeb browsers that do not support frames.

The <FRAMESET...> tag is followed by a ROWS= and/or COLS= modifier. Much like a <TABLE> a frame is divided into one or more rows and columns. For each frame/cell (numbering ROWS * COLS in all) a separate <FRAME...> tag or (nested) <FRAMESET...> tag pair must be defined.

Each <FRAME...> tag may include one or more modifiers, minimally specifying the default SRC= file. It is also a good idea to name each frame, using the NAME= modifier, for future reference.

The TARGET= modifier, found in the anchor tags of content documents, enables you to specify which window is updated when a link is selected. In this example, the fr_menu.html content document includes several anchor tags with the TARGET= the Info frame (as defined with the NAME= modifier, found in frames.html). Thus, whenever a link found in the menu frame is selected, the Info frame is updated with the selected content. Compare this to standard HTML documents with one window (i.e. frame), where links are selected and content is updated.

NOTE: If you link directly to the fr_menu.html file (i.e. not within the frames context), the TARGET= modifiers will cause a new browser window/application to open. This new instance of the browser will become the named TARGET. Thus, files (often lists of links) developed for frames often aren't otherwise used in non-frame environments.

Return to top
Please send comments to Barry B. Floyd

THE BARE BONES GUIDE TO HTML

Take 10 Minutes to Learn(TM) - HTML

Basic HTML Framework

Minimum HTML Framework

HTML Lists

HTML Links

Forms

Frames

Take 10 Minutes to Learn^(TM) - HTML