IST129: Chapter 12 - Frames

Like tables, frames allow you to segregate content for better readability of your HTML documents. Unlike tables, however, frames are individually scrollable and printable. Think of frames like window panes - each pane is separated visually and possibly physically from every other pane, yet all the panes together comprise just a single window. So it is with frames and your HTML document.

The documents that fit inside each frame (one document per frame) are actually separate HTML document files.

Please keep in mind that frames can only be viewed if the browser can handle frames. Thankfully, most browsers can handle frames. Unfortunately, Homepage can not handle frames!

Click here for frames (picture) Click here for another frames example (picture)

<frameset>...</frameset> tag:

The frameset tag encloses the definitions for frames in your HTML document. Attributes used include:

COLS - sets the width of frames
cols="50%,*"
...means that the first frame is to be 50% of the browser screen wide while other all other frames are to be divided in width equally from the last 50%.
Note: you may use pixel counts instead of percentages.

ROWS - sets the height of frames
rows="25%,50%,*" ...means that the first frame is to be 25% of the browser window high, the second is to be 50% high and all other frames are to be divided in height equally from the last 25%.
Note: you may use pixel counts instead of percentages as well as relative measurements.

FRAMEBORDER="yes | no"
Used on the FRAMESET tag, all borders around all are turned off if FRAMBORDER="no". "yes" is the default.

<frame> tag:

The frame tag defines the HTML document that is to be displayed within a frame. Attributes used include:

SRC - sets the name of the HTML document
src="//www.whocares.com/index.htm"
...means that this frame will hold the index.htm HTML document.

NAME - sets an internal name for this frame that can be referenced by any other HTML document in one of the frames. The NAME attribute is most often used for frames that acts as a table-of-contents to other pages on a WWW site.
name="BUBBA"
... means that the name "BUBBA" can be referenced in the <a HREF=..."> tag of another page using the "TARGET" attribute of <a> tag.

FRAMEBORDER="yes | no"
Used on the FRAME tag, borders around a single frame are turned off if FRAMBORDER="no". "yes" is the default.

NORESIZE
Prevents user from being able to shrink or enlarge a frame by clicking and dragging. NORESIZE is specified without any associated value. The default is to allow resizing.

SCROLLING = "yes | no | auto"
NO = means no scrollbars even fi you need them
YES = means you want a scrollbar if you need it
AUTO = let the browser decide if a scrollbar is needed

MARGINWIDTH=#pixels
Sets left/right margins of text within a frame in pixels.

MARGINHEIGHT=#pixels
Sets top/bottom margins of text within a frame in pixels.

<noframes>...</noframes> tag:

The noframes tag contains the text to display to a user should they (1) be using a browser that does not support frames or (2) the WWW site that your pages are on does not allow/support frames (ala HOMEPAGE).

So, do you wonder how a browser that can not handle frames knows what to with the <noframes>...</noframes> tag?

The answer is simple. Browsers ignore tags that they don't know about, right? A browser that can not handle frames ignores the <frameset> and <frame> tags as well as the <noframes>...</noframes> tag, right? Well, what the browser does not ignore is dumb text between the beginning and ending <noframes>...</noframes> tags. Voila! Now users with browsers that can't handle frames will get a textual message as the browser skips all the frame-related tags.

So, how many sets of <noframes>...</noframes> tags do you need in your FRAME document no matter how many nested <<frameset>...</frameset> you use? ... Ta-da! Only one set of <noframes>...</noframes> tags is needed because all other frame-related tages will be ignored.

<noframes> Your browser must support frames.</noframes>

Your task...

Create 4 HTML files called:htm1.htm, htm2.htm, etc. Within each of the HTML files put a H1 tag to visually ID each file to the reader.
Create a frame document called "frame.htm" to define 4 frames of equal size, 2 on the top and 2 on the bottom like this (picture).
Run the frame document.
Modify the frame document to display the 4 frames as:
- One frame along the top, 3 frames on the bottom like this (picture).
- 3 frames long the top, one frame on the bottom like this (picture).
- All four frames next to each other like this (picture).
- One frame to the left, the rest to the right atop each other like this (picture).

Target frames

You may dynamically load HTML files into named frames. This implies that you have a table-of-contents HTML file that contains links to other HTML files. It is those other HTML files that you will load into some target frame on-the-fly as the user selects different topics from your table-of-contents frame. Click here for an example or here for a picture.

Your task...

Using the HTML files you created above, create a table-of-contents HTML file called "toc.htm". Within "toc.htm", use an unordered list to create hyperlinks to each of the HTML files.

Your frame document must use the name attribute mentioned above.

Specifically, your FRAME document will have one FRAMESET tag with 2 FRAME tags. The second FRAME tag will have the attribute NAME="DOC".

The table-of-contents document ("toc.htm") must have the following anchor tag for the hyperlink:

<a> href="xxx.htm" target="DOC">...</a>

Floating Frames

Floating frames are respected only by MS-IE using the IFRAME tag. They allow you to create a frame outside of the FRAMESET statements in the FRAME document. Click here for an example or here for a picture.