Line

Frames

Line


Frames are easy to create. Unlike other HTML documents, there are no <BODY> tags in a frame document. There is a lot of versatility with frames, so frame documents may vary in appearance.


Columns

A basic frames document dividing your page in two columns will have these tags:

<HTML> Like other HTML documents, the <HTML> tag begins the frames document.
<HEAD> Next comes the heading tag.

<TITLE> Write the title of your frame here. </TITLE> Title tags are needed.

</HEAD> End your heading right after the title.

<FRAMESET COLS="number of pixels, *"> This tag begins a frame.

<FRAME SRC="document1_name.html" NAME="key_word1">

<FRAME SRC="document2_name.html" NAME="key_word2">

</FRAMESET> This tag ends a frame.

<NOFRAMES>

Sorry, this document can be viewed only with Netscape Navigator version 2.0 or later. Use this link to <A HREF="non_frames_document.html"> view this document </A> without frames.
</NOFRAMES>

</HTML> End your frames document with this tag.


Note in the tag <FRAMESET COLS="number of pixels, *">, COLS designates columns. /Number of pixels0 refers to the width of the column. The asterisk (*) tells the browser to use the left over space for the second column.

In the two tags shown below, FRAME SRC tells the browser what to put in the two columns. The document named in the first FRAME SRC will be displayed in the first column. The document named in the second FRAME SRC will be displayed in the second column. If the document is not in the same folder as the frames document the path will need to be included along with the name of the document. The key word used after NAME is essential later for directing documents (via anchors and links) into the specific frame.


<FRAMESET COLS=“Number of pixels, *”>
<FRAME SRC=“document1_name.html” NAME=“key_word1”>
<FRAME SRC=“document2_name.html” NAME=“key_word2”>
</FRAMESET>


Key Words

A different key word is given to each frame, or area, created by the frames document. Each key word is essential for directing documents into its specific frame. A link directs an HTML document to open inside a specific frame when the attribute TARGET=“key_word” is inside the <A HREF> tag.

<A HREF=“address/document.html” TARGET=“key_word”>Text to be seen</A>

Example tag for a TARGET=“key_word” attribute:
<A HREF=“links.html” TARGET=“content”>Favorite Links</A>

If you wish for an HTML document to show outside the frame you may use TARGET=“_TOP” as an attribute inside the link code. With the TARGET=“_TOP” attribute the document showing inside a frame may have a link to another HTML document that will open outside frames.

<A HREF=“address/document.html” TARGET=“_TOP”>Text to be seen</A>

Example tag for a TARGET=“key_word” attribute:
<A HREF=“links.html” TARGET=“_TOP”>Favorite Links</A>

Rows

Rows are essentially created the same way as columns; just substitute ROWS for COLS. Your basic frames document dividing your page in two rows will have these tags:

<HTML> Start your frames document with this tag.
<HEAD> Next comes the heading tag.

<TITLE> Write the title of your frame here. </TITLE>

</HEAD> End your heading right after the title.

<FRAMESET ROWS="number of pixels, *"> This tag begins a frame.

<FRAME SRC="document1_name.html" NAME="key_word1">

<FRAME SRC="document2_name.html" NAME="key_word2">

</FRAMESET> This tag ends a frame.

<NOFRAMES>

 Sorry, this document can be viewed only with Netscape Navigator version 2.0 or later. Use this link to <A HREF="non_frames_document.html"> view this document </A> without frames.

 </NOFRAMES>

</HTML> End your frames document with this tag.


Note in the tag <FRAMESET ROWS="Number of pixels, *"> ROWS designates rows. “Number of pixels” refers to the width of the row. The asterisk (*) tells the browser to use the left over space for the second row.

ROWS work fundmentally the same as columns. FRAME SRC tells the browser what to put into each row. The document named in the first FRAME SRC will be displayed in the first row. The document named in the second FRAME SRC will be displayed in the second row. The same rules regarding the TARGET=“key_word” attribute apply.


Multiple Rows

For more than two rows add additional row heights (in the form of numbers or asterisks separated by commas) inside the <FRAMESET> tag. Then add additional <FRAME SRC> tags (one for each row).

<FRAMESET ROWS=" number of pixels, number of pixels, *"> Three rows.

<FRAME SRC="document1_name.html" NAME="key_word1">
<FRAME SRC="document2_name.html" NAME="key_word2">
<FRAME SRC="document3_name.html" NAME="key_word3">

</FRAMESET>


Example of code for three rows:

<FRAMESET ROWS=" 100, 200, *"> First row 100 pixels tall.
Second row 200 pixels tall.
Third row takes up the remaining space.
<FRAME SRC="title.html" NAME="top_row">
<FRAME SRC="menu.html" NAME="middle">
<FRAME SRC="hobbies.html" NAME="bottom">

</FRAMESET>


If you want your rows evenly spaced use multiple asterisks )(* in the <FRAMESET> tag instead of numbers. All rows will take up the same amount of space.



Example of four rows evenly spaced:


<FRAMESET ROWS="*, *, *, *">
<FRAME SRC="title.html" NAME="top_row">
<FRAME SRC="menu.html" NAME="middle1">
<FRAME SRC="hobbies.html" NAME="middle2">
<FRAME SRC="pics.html" NAME="bottom">

</FRAMESET>



Multiple Columns

For more than two columns add additional column widths (in the form of numbers of asterisks separated by commas) inside the <FRAMESET> tag. Then add additional <FRAME SRC> tags (one for each column).

<FRAMESET COLS=" number of pixels, number of pixels, *"> Three columns.

<FRAME SRC="document1_name.html" NAME="key_word1">
<FRAME SRC="document2_name.html" NAME="key_word2">
<FRAME SRC="document3_name.html" NAME="key_word3">

</FRAMESET>


Example of code for four columns:

<FRAMESET COLS=" 100, 200, 100, *"> First column 100 pixels wide.
Second column 200 pixels wide.
Third column 100 pixels wide.
Fourth column takes up remaining space.

<FRAME SRC="menu.html" NAME="first">
<FRAME SRC="book_titles.html" NAME="second">
<FRAME SRC="authors.html" NAME="third">
<FRAME SRC="publishers.html" NAME="fourth">

</FRAMESET>



Example of code for five columns evenly spaced:

<FRAMESET COLS="*, *, *, *, *">

<FRAME SRC="menu.html" NAME="first">
<FRAME SRC="book_titles.html" NAME="second">
<FRAME SRC="authors.html" NAME="third">
<FRAME SRC="publishers.html" NAME="fourth">
<FRAME SRC="references.html" NAME="fifth">

</FRAMESET>


Mixing Rows and Columns - Nesting Frames

Rows and columns may be mixed by nesting. That means creating additional framesets between other <FRAMESET> tags. The order of the columns and rows depends on the order of the <FRAMSET> tags. There must be one ending </FRAMESET> tag for every starting </FRAMSET> tag. Indenting helps keep track of the tags.


Below is an example of a frames document mixing rows and columns by nesting:

<HTML> Start your frames document with this tag.
<HEAD> Next comes the heading tag.

<TITLE> Write the title of your frame here. </TITLE>

</HEAD> End your heading right after the title.

<FRAMESET ROWS=" 100, *, *"> This tag begins the overall frame.

<FRAMESET ROWS=" 40, *, *"> This tag begins the top frame.

<FRAME SRC="title.html" NAME="top_row">
<FRAME SRC="welcome.html" NAME="second_row">

</FRAMESET> This tag ends the top frame.

<FRAMESET COLS=" *, *, *"> This tag begins the bottom frame.

<FRAME SRC="menu.html" NAME="left_col">
<FRAME SRC="list.html" NAME="middle_col">
<FRAME SRC="photos.html" NAME="right_col">

</FRAMESET> This tag ends the bottom frame.

</FRAMESET> This tag ends the overall frame.

<NOFRAMES>

 Sorry, this document can be viewed only with Netscape Navigator version 2.0 or later. Use this link to <A HREF="non_frames_document.html"> view this document </A> without frames.

 </NOFRAMES>

</HTML> End your frames document with this tag.


Other Tips

When you do not want a scroll bar in one of your rows or columns include SCROLLING="no" inside the <FRAME SRC> tag.

<FRAME SRC="menu.html" NAME="left_col" SROLLING="no">

When referring to a document in your HTML code you will only need to name the document if the document is in the same folder or subdirectory. If it is in a different folder or subdirectory the path will need to be given.

<FRAME SRC="document.html" NAME="key_word1"> Same folder

<FRAME SRC="address/document.html" NAME="key_word1"> Different folder


<NOFRAMES> Tags

<NOFRAMES>

IInformation appearing between the two <NOFRAMES> tags will show up on browsers that are not capable of displaying frames. Include a small message with a link to a non frames document.

</NOFRAMES>


© Barbara Gibson, October 1996
Fourth Edition, January 1998



HTML Tutorial Table of Contents
Beginning your HTML Document/ Simple HTML Tags
Simple Anchors & Links/ The Hexadecimal System/ Wallpaper & Colors
Gathering Graphics for Your Web Page / Adding Graphics & Graphic Links / Tables / Forms
Frames/ Image Maps