Kaye and Geoff's web page documentation
IntroductionFrames allow you to display multiple scrollable windows on a single screen, each window (frame) with its own distinct URL, so each one can be independently updated. This technique is particularly useful if you have pages that use a common menu or index. The section of the page that holds the index can be kept permanently on the screen while the content of other parts of the screen are changed.
How to implement framesAn HTML document with frames looks quite different from an HTML document without frames, and involves a bit more work on your part. As we already know, a standard document has this sort of structure:
As you can see, this example creates three frames on the screen - two rows, with two columns in the lower row. To get the two columns in the second row of frames we use nested <frameset> tags. This is different from a normal page - you are not allowed to nest <body>...</body> tags. Within each <frameset>...</frameset> block the individual frames are defined with <frame>...</frame> tags.
The first frameset sets up the two rows, the first (on the top) 100 pixels in height and the second taking up the rest of the window (indicated by the *). This first frame is named framehead and it will display the f1.html page, while the second part is defined by the second (nested) frameset. Note that the effect of setting the height in pixels is that the top frame will stay the same height independently of the overal window being resized. This is reinforced by the "noresize" and "scrolling=no" attributes. By contrast, the width of the first column is expressed as a percentage, so it can shrink or grow in proportion as the overall window is resized.
The second frameset has a division the other way, into columns. The first column is 30% of the available width and the second is whatever is left over. The first of the lower frames is called framemenu and it will contain the contents of f2.html. It also has some other attributes - margins are supressed and it is not allowed to have scroll bars. The second column is called framebody and will display f3.html.
The <noframes>...</noframes> block, as its name suggests, is only rendered by the browser if it does not support frames, and so is optional. For quite a few years now all browsers have been able to handle frames, so these days a noframes section is not really required.
Frameset and frame attributesThe commonly used attributes in <frameset> tags are rows and cols. As we have seen, the attribute value is a comma-separated sequence of heights or widths as appropriate, specified as an absolute number of pixels, or a percentage of the page size, or *, meaning whatever is left over.
The <frame> tag has a larger list. The commonly used ones are:
The target attributeAlthough a page containing frames displays rather like a single subdivided window, in fact each frame has most of the characteristics of a normal window; for example it can have its own scroll bars. This means that by default, a link within a frame, when activated, opens the new page within the same frame. If you want to open a page anywhere else, you need to add a target attribute to the anchor tag which defines the link. The value of the target attribute is the name of the frame which is the target of the link. For example here is the HTML from the menu file f2.html in our example; clicking on a menu item causes the adjacent frame (whose name is "framebody") to change:
MenuThis frame will have the menu which generally will be left hanging around
In the HTML above the target attribute "points" to a named frame. But there are other possible targets which can be used in anchor tags (and not necessarily just in pages involving frames). There is an example in the link above, which creates a new un-named window and displays the page specified in the href attribute in the new window. The old window remains. This is accomplished with the target attribute using the special value of "_blank", as in:
There are three other special values. "_top" fills the entire current page, even if it is made up of frames. The other two values are less commonly used. "_self" means the frame containing the anchor (which is the default action) and "_parent" is the frameset immediately "above" (in the heirarchy of framesets) the frame containing the anchor.
Inline frames are not widely used but they can be very useful in some circumstances. They have most of the features of individual frames, but their placement on the page is defined in a similar way to images. Here is an example:
You can see how the browser displays this inline frame on the right hand size of this page (or maybe above this line, since some browsers do not seem to support alignment; some also ignore the frame border attribute):
The frame attributes described above (except for noresize - resizing an inline frame is never allowed) are also used for inline frames and function in a similar way. The source of the frame contents is specified using a src attribute, and the height, width and alignment are specified and behave as they do in the <img> tag. The text within the <iframe> tags is not displayed by the browser unless it cannot display frames.
Lots of people do not like frames. There are some good reasons for this, for example: