Working With Frames in HTML

Article

Introduction

This article shows how to create FRAMESET documents that define one or more frame sizes and properties for FRAMESETs and frame elements.

Getting Started

Frames allow multiple HTML documents to be present as independent windows within a main browser. They allow you to present two or more documents at once.

Example

<HTML>
<HEAD>
<TITLE>FRAME EXAMPLE</TITLE>
</HEAD>
<frameset cols="25%,*,25%">
<frame src="FRAME1.html">
<frame src="FRAME2.html">
<frame src="FRAME3.html">
</frameset>
</HTML>

Frames Document

A Frames document can be declared using the <FRAMESET> element. A regular HTML Frameset document has a start element and an end element. This element can contain one or more elements. The SRC attribute of the frameset element points to the document that you want to display in a frame.The ROWS AND COLS attributes of frameset elements define the layout of the frame.

<HTML>
<HEAD>
<TITLE>FRAM EXAMPLE</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
</FRAMESET>
</HTML>

Type of Frame

There are two types of frames based on their layout.

Vertical Frames

For vertical frames the COLS attribute is used within the frameset elements. The COLS attribute contains the width of the column. Each column's width is a value separated by commas.

Example

<HTML>
<HEAD>
<TITLE>FRAME EXAMPLE</TITLE>
</HEAD>
<FRAMESET cols="25%, 75%,25%">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
</HTML>

In the preceding example, there are three columns in the frameset, the first and third columns occupy 25 percent and 75 percent of screen space respectively. Scince there are four parts of the request, the first and third columns occupy one-quarter of the windows and the second takes half of the window.

Horizontal Frames

The ROWS attribute creates horizontal frames in HTML, such as the COLS attribute. It also takes a value for the height of the row.

Example

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
</HTML>

Grid of Frames

The ROWS and COLUMNS attribute creates a grid in frames. The FRAMEBORDER attribute is for setting the border width of the grid and the BORDERCOLOR attribute sets the color of the grid. The value 0 of FRAMEBOARDER removes the border from the frame.

<HTML>
<HEAD>
<TITLE>FRAME EXAMPLE</TITLE>
</HEAD>
<frameset cols="25%,*,25%">
<frame src="FRAME1.html" border="yellow" frameborder="1">
<frame src="FRAME1.html" border="Red" frameborder="0">
<frame src="FRAME2.html">
<frame src="FRAME3.html">
</frameset>
</HTML>

The margin of a frame can also be set using MARGINHEIGHT and MARGINWIDTH. The MARGINHEIGHT attribute for setting the margin of the top and bottom and MARGINWIDTH for the left and right.

Resize able FRAME and Scroll Bar in frame

Normally the size attribute creates a resizeable grid. Sometimes you will want to set the frame size to big or small by dragging the frame border. The SCROLLING attribute allows the frame scroll bar to be visible and hidden. The yes value of the scrolling attribute sets the scroll visibility on and No hides the scroll. The value Auto sets the scroll to visible and it is hidden based on the contents.

Example