How to Use Implement Frames in HTML - A detailed guide with examples

This is A detailed guide with examples of how to use and implement frames in HTML. Frames allow for multiple .html documents to be displayed inside of one browser window at a time. This means that one page has no content on it, but rather tells the browser which web pages you would like to open. With the addition of CSS and PHP, frames have become outdated, but if you wish to use them, read on.

Frames - A Generic Frame Page

Frames are most typically used to have a menu in one frame, and content in another frame. When someone clicks a link on the menu, that link is then opened in the content page. Here is a classic example of a basic "index" frameset with a menu on the left and content on the right.

HTML Code:

<html>
  <body>
    <frameset cols="30%,*">
      <frame src="menu.html">
      <frame src="content.html">
    </frameset>
  </body>
</html>

Frame Set:

frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.
frameset cols="#%, *" - The width that each frame will have. In the above example, we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself (70%).
frame src="" - The URL of the web page to load into the frame.

A good rule of thumb is to call the page which contains this frame information "index.html", as that is typically a site's main page.

Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as follows:

HTML Code:

<html>
  <body>
    <frameset rows="20%,*">
      <frame src="title.html">
      <frameset cols="30%,*">
        <frame src="menu.html">
        <frame src="content.html">
      </frameset>
    </frameset>
  </body>
</html>

FrameBorder and FrameSpacing

You've probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag.

Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

frameborder="#" - Determines whether there will be a border.
border="#"- Modifies the border width.
framespacing="#" -Modifies the border width, used by Internet Explorer.

Here's an example of the same frameset without the borders.

HTML Code:

<html>
  <body>
    <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
      <frame src="title.html">
      <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
        <frame src="menu.html">
        <frame src="content.html">
      </frameset>
    </frameset>
  </body>
</html>

Frame Name and Frame Target

How nice would it be to make each menu link load into the content page? We do this by naming each frame and setting the correct base target inside "menu.html".

HTML Code:

<html>
  <body>
    <frameset rows="20%,*">
      <frame name="title" src="title.html">
      <frameset cols="30%,*">
        <frame name="menu" src="menu.html">
        <name="content" src="content.html">
      </frameset>
    </frameset>
  </body>
</html>

HTML Code:

<html>
  <head>
    <base target="content">
  </head>
  <body>
    <!-- Content Goes Here -->
  </body>
</html>

Frame Target:

We first named the content frame "content" on our frame page, and then we set the base target inside "menu.html" to point to that frame. Our frame page is now a perfectly functional menu and content layout!

Noresize and Scrolling

It's possible to further customize the <frame> tag using the noresize and scrolling attributes.

HTML Code:

<html>
  <body>
    <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
      <frame src="title.html" noresize scrolling="no">
      <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
        <frame src="menu.html" scrolling="auto" noresize>
        <frame src="content.html" scrolling="yes" noresize>
      </frameset>
    </frameset>
  </body>
</html>

Noresize and Scrolling:

noresize - Determines whether the frames can be resized by the visitor or not. (values "true" and "false")
scrolling - Determines whether scrolling is allowed in the frame or not (values "true" and "false")

We set the scrolling for our content frame to "yes" to ensure our visitors will be able to scroll if the content goes off the screen. We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.

Tips:

Frames can be simple and well-organized. However, they are usually viewed as unacceptable by most web designers.
Always set the scrolling and resize options to optimize load time.
Using a simple menu and content frame design can reduce updates to massive sites. Instead of updating the menu on each page, you could simply update the menu.html file and be done with it!

WebHQ

The Headquarters Of Web