HTML Frames

Introduction

Frame elements are rather unique because compared to elements presented in previous sections they are not placed in the body element but in the frameset, which replaces the body and functions as a container for the frames.

What is it?

frame and frameset are tags that determine elements dividing the browser's viewing area in smaller windows and allow the browser simultaneously display different HTML documents. Right, each frame is a viewing area that hosts an entire HTML document! The main frameset attributes are rows and cols, which can be specified in pixels or percents. The key frame attribute is the source src, which is the HTML document to be displayed. Frame sets can be nested into each other, creating irregular divisions of the browser's viewing area. To create two columns, save the following in an html file.


<!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
    xml:lang="en" lang="en">
   <head>
   <title>A Frame Application</title>
      <meta http-equiv="content-type" 
          content="text/html; charset=UTF-8" />
   </head>
   <frameset cols="20%,80%" rows="100%">
      <frame name="left" src="left.html" frameborder="0" />
      <frame name="right" src="right.html" frameborder="0" />
   <noframes>
      <body>
         Your browser does not support frames. 
         To view the requested pages choose 
         one of the options:
         <ul>
            <li>
               <a href="left.html">Content</a>
            </li>  
            <li>
               <a href="right.html">Main Page</a>
            </li>           
         </ul>
      </body>
   </noframes>
</frameset>
</html>

cols and rows attributes

In the example, the quoted argument cols says divide the frameset's viewing area in two parts, the first of which is 20% wide, the second is 80% wide. The values of cols and rows could be switched, in which case, the viewing area would contain two frames placed one in the top, the other in the bottom part of the window.

How to prevent resizing of the frames

By default, the frame borders can be resized using the mouse. To prevent that from happening, add noresize="noresize" to the attributes. The scrolling attribute with values yes, no and auto helps in controlling the scrollbar in a frame.

noframes attribute

noframes is an element that encloses the body of a HTML document displayed by browsers not supporting frames. It allows the user view the pages even in the case when frames are not available.

Referencing and linking frames

In practice, the upper left frame of the above example often contains a list of links, e.g. chapters of a book. On click of the link we want the proper chapter displayed in the right frame. To achieve that, add to the right frame element the name attribute with value RF. The result is thus


<frame src="right.html" name="RF"/>

If the topleft.html document contains the list below then then on click, each chapter is displayed in the right frame. For the meaning of the ul and li tags see the previous page of this tutorial.


<ul>
   <li> <a href="chap1.html" target="RF"> Chapter 1</a></li>
   <li> <a href="chap2.html" target="RF"> Chapter 2</a></li>  
   <li> <a href="chap3.html" target="RF"> Chapter 3</a></li> 
</ul>

The name/target can be an arbitrary string.

References

Web Design Group HTML Help and Web Authoring Reference, Web Design Group , 2006

Markup Validation Service, World Wide Web Consortium , 2006