</frameset>
</html>
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 below, the proportions look different because the screen display has been cropped to save space.) The line
<framesetcols="30%, 70%"frameborder="1">
could also be written
<framesetcols="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 interpreted as pixels rather than a percentage of the full window. Setting this frame size tocols="200,*"will produce a left-side frame that is always 200 pixels wide, regardless of the screen width and 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 docu- ment, frame1.htm and frame2.htm. These windows could be given names, but they don’t have to have names. The right-hand column is asso- ciated 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 homeFrameis a self-explanatory and therefore reasonable choice.
Documents 3.9b through 3.9d show the HTML code for each of the three frames.
Document 3.9b (homeFrame.htm)
<html>
<head>
<title>My Home Frame</title>
</head>
<bodybgcolor="lightgreen">
<h1><blink><font color="maroon"><b><i>Home page display goes here.</i></b></font></blink></h1>
3.6 HTML Frames 55
</body>
</html>
Document 3.9c (frame1.htm)
<html>
<head>
<title>Title Frame</title>
</head>
<bodybgcolor="pink">
<fontsize="+6"color="navy"><center><b><i>Frames
<br />Demo<br />
<ahref="frameDescription.htm"/><img src="frame.gif"
border="2"></i></b></center></a>
</font>
</body>
</html>
Document 3.9d (frame2.htm)
<html>
<head>
<title>Gossip Column</title>
</head>
<bodybgcolor="lightblue">
<fontsize="+3">
Links to other stuff...<br />
<a href="gossip.htm" target="homeFrame" /> Gossip Column</a>
<br />
<ahref="photoGallery.htm"target="homeFrame" />
Picture Gallery</a><br />
<ahref="homeFrame.htm"target="homeFrame" />home</a><br />
</font>
</body>
</html>
Document 3.9e is the HTML document referenced in Document 3.9c.
Document 3.9e (frameDescription.htm)
<html>
<head>
<title>How this image was created.</title>
</head>
<body>
This image was created in Windows′Paint program.
<ahref="frame1.htm" />Click here to return.</a>
</body>
</html>
Document 3.9d, 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 thetargetattribute, which links tohomeFrame, the name value given in Document 3.9a:
<ahref="gossip.htm" target="homeFrame">Gossip Column</a>
It is up to you to provide the gossip.htm and photoGallery.htm documents. Document 3.9d also includes a link back to the home page document. The image shown here is the result of clicking on the “Pic- ture Gallery”link to a document on the author’s computer; the page image has been cropped to save space.
Document 3.9b contains the code for the home frame that is displayed when the page isfirst accessed. (The blink element, which causes text to blink on and off, will be ignored by some browsers.) Document 3.9c, 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.9e), to be provided by
3.6 HTML Frames 57
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 toframe1.htm:
<a href="frame1.htm">Click here to return.</a>
HTML frames provide a great deal offlexibility 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 thatonly the main frame document (frameMain.htm) is 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 theframeMain.htmHTML code and then access separately the homeFrame.htm, frame1.htm, and frame2.htm documents to examine their HTML code.