Another way of organizing content in HTML documents is through the use of frames to divide a window into several separately addressable blocks of content. Frames are built using two elements, frame and frameset.
<frame /> … </frame>
Attributes: bordercolor, frameborder, marginheight, marginwidth, name, scrolling (yes, no, or auto), src
Provides a nameable window region, as defined by the frameset element, with a link to the content of that region. A value for the src attribute must be given, but the (continued)
63 3.7 Using HTML Frames
Consider the following screen display. It is divided into three sections. The upper left-hand corner contains a clickable image. The lower left-hand corner contains links to other HTML documents. The right-hand column will be used to display those documents.
When this page is first accessed, a “home page” document should be displayed.
Document 3.10a shows the first step in creating this page.
Document 3.10a (frameMain.htm)
<html>
<head>
<title>A simple frameset document</title>
</head>
<frameset cols="30%, 70%" frameborder="1">
<frameset rows="60%, 40%">
<frame src="frame1.htm" scrolling="no" />
<frame src="frame2.htm" />
</frameset>
<frame name="homeFrame" src="homeFrame.htm" />
</frameset>
</html>
other attributes are optional. The default value for the scrolling attribute is auto, which automatically provides a scroll bar if needed to display all of a window’s content.
<frameset> … </frameset>
Attributes: border, bordercolor, cols, frameborder, framespacing, rowsProvides specifications for dividing a web page window into two or more separately linkable sub-windows. All attributes are optional except cols and rows, which must have values of n pixels, n% of the available window, or * to fill the remaining window space.
(continued)
64 3 HTML Tables, Forms, Lists, and Frames
3
The frameset element is used to define the frames. In this case, the window is divided into two columns. The left-hand column occupies 30% of the page and the right-hand column occupies the remaining 70%. (In the graphic displayed previously, the proportions look different because the screen display has been cropped to save space.) The line<frameset cols="30%, 70%" frameborder="1">
could also be written
<frameset cols="30%, *" frameborder="1">
where the asterisk is interpreted as “fill the remaining portion of the screen with the right-hand column.” If the frame size is given as a number without the % sign, it is inter-preted as pixels rather than a percentage of the full window. Setting this frame size to cols="200,*" will produce a left-side frame that is always 200 pixels wide, regardless of the screen resolution.
The left-hand column is further divided into two sub-windows. The top window occupies the top 60% and the bottom window occupies the remaining 40%. Each window is associated with a separate HTML document, frame1.htm and frame2.htm. These windows could be given names, but they don’t have to have names. The right-hand column is associated with another HTML document, homeFrame.htm. This “home frame” will be the destination for content that will be linked from the frame in the lower left-hand corner. This frame needs a name to serve as a “target” for the other documents that will be displayed here. The name can be anything, but homeFrame is a self-explanatory and therefore reasonable choice.
Documents 3.10b–d show the HTML code for each of the three frames.
Document 3.10b (homeFrame.htm)
<html>
<head>
<title>My Home Frame</title>
</head>
<body bgcolor="lightgreen">
<h1><blink><font color="maroon"><b><i>Home page display goes here.</i></b></font></blink></h1>
</body>
</html>
Document 3.10c (frame1.htm)
<html>
<head>
<title>Title Frame</title>
65 3.7 Using HTML Frames
</head>
<body bgcolor="pink">
<font size="+6" color="navy"><center><b><i>Frames
<br />Demo<br />
<a href="frameDescription.htm" /><img src="frame.gif"
border="2"></i></b></center></a>
</font>
</body>
</html>
Document 3.10d (frame2.htm)
<html>
<head>
<title>Gossip Column</title>
</head>
<body bgcolor="lightblue">
<font size="+3">
Links to other stuff…<br />
<a href="gossip.htm" target="homeFrame" />Gossip Column</a>
<br />
<a href="photoGallery.htm" target="homeFrame" />
Picture Gallery</a><br />
<a href="homeFrame.htm" target="homeFrame" />home</a><br />
</font>
</body>
</html>
Document 3.10e is the HTML document referenced in Document 3.10c.
Document 3.10e (frameDescription.htm)
<html>
<head>
<title>How this image was created.</title>
</head>
<body>
This image was created in Windows' Paint program.
<a href="frame1.htm" />Click here to return.</a>
</body>
</html>
66 3 HTML Tables, Forms, Lists, and Frames
3
Document 3.10d, for the lower left-hand corner, contains links to several other documents, each of which can be displayed in the right-hand window. This is done by using the target attribute, which links to homeFrame, the name value given in Document 3.10a:
<a href="gossip.htm" target="homeFrame">Gossip Column</a>
It is up to you to provide the gossip.htm and photoGallery.htm documents.
Document 3.10d also includes a link back to the home page document. The image shown here is the result of clicking on the “Picture Gallery” link to a document on the author’s computer; the page image has been cropped to save space.
Document 310b contains the code for the home frame that is displayed when the page is first accessed. (The blink element, which causes text to blink on and off, will be ignored by some browsers.) Document 3.10c, for the upper left-hand frame, contains the clickable image, frame.gif, with a border drawn around it. Clicking on the image opens a link to descriptive file, frameDescription.htm (see Document 3.10e), to be provided by you. This document will be displayed in the “Frames Demo” window (not opened in a new window) and it should contain a link to return to frame1.htm:
<a href="frame1.htm">Click here to return.</a>
HTML frames provide a great deal of flexibility for displaying content, but there is one consequence that may not be immediately obvious. If you try these examples on your own computer, you will see that only the main frame document (frameMain.htm) is
67 3.8 More Examples
displayed as the URL link, regardless of which document is being displayed in the right-hand column. So, you cannot directly copy or bookmark the URL for a particular document. Accessing the “view source” option on your browser will display the HTML code only for frameMain.htm. If you wish to bookmark the “picture gallery” page, for example, you cannot do so directly. You can display the page separately by accessing the document separately:
http://... /photoGallery.htm
but doing that assumes you already know the name and location of this document.
This situation does not really hide all the code for these documents. You can look at the frameMain.htm HTML code and then access separately the homeFrame.htm, frame1.htm, and frame2.htm documents to examine their HTML code.