Html Frame Tag: How To Use Frame In Html Coding With Examples

Html Frames:

The html frame is a powerful feature. It enables you to divided the browser window into different independent unique sections. Each section is called frame. Each section is used to open a web page and can be operated independently without depending on other HTML frames. So multiple web pages can be opened at the same time into a browser window by using HTML frames.

For example, you can divide the browser window into three sections as shown in figure below.

Usually the top section is used to display the name of company/organization and its logo. The left section is used for navigation links. The right section is usually a larger section which is used for displaying information of web pages.

Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

Advantages of using HTML frames:

The main advantages of using HTML frames are:

• By using HTML frames, multiple web pages can be displayed in the same browser window.
• HTML frames can be used to reduce server load, as there is no need to reload all the pages when ever a new page is visited.
• Navigation links and company name and logo remain visible, while visiting different pages linked with the  frame page.

Disadvantages of using HTML frames:

The major disadvantages of using HTML frames are:

• It is difficult to print the contents of all HTML frames when compared to a full size web page.
• Some browsers don’t support HTML frames, so we need to place the contents separately for the people who don’t have HTML frames using <noframes> and </noframes> tags.
• We cannot bookmark individual pages using browser’s favorites menu.

HTML frameset tag:

The <frameset> tag is used to divide the browser screen into HTML frames. It may include the number of frames, locations and their other characteristics.

HTML frameset Tag Attributes:

The most important and commonly used attributes of HTML frameset tag are as follows:

Rows:

This attribute is used to divide the screen horizontally i.e. into multiple rows. The numbers and dimensions of the horizontal HTML frames are specified as a list of values separated by commas. The list of values indicates the heights of HTML frames. These values can be specified as:

• Number of pixels
• Percentage of the screen
• ‘*’ this symbol indicates the remaining space.

For example, to divide browser screen into two horizontal HTML frames (rows) with height 200 pixels and 400 pixels, the <frameset> tag is written as;

<frameset rows = “200, 400”>

Similarly, to divide screen into three rows 25% of screen for first frame, 45% of screen for second frame and remaining space for third frame,  <frameset> tag is written as;

<frameset rows = “ 25%, 45%, *”>

To divide the browser window into three equal horizontal frames (sections). <frameset> tag is written as;

<frameset rows= “33%, 33%, 33%”>

Col:

This attribute is used to divide the screen vertically i.e. into multiple columns. The numbers and dimensions of the vertical frames are specified as a list of values separated by commas. The list of values indicates the widths of HTML frames these values can be specified as;

• Number of pixels
• Percentage of the screen
• ‘*’ this symbol indicates the remaining space.

For example, to divide browser screen into two vertical frames (columns) with width 150 pixels and 200 pixels the <frameset> tag is written as;

<frameset cols= “150, 200 “>

Similarly, to divide screen into three columns, 25% of screen for first HTML frame, 30% of screen for second HTML frame and remaining space for third HTML frame, <frameset> tag is written as;

<frameset cols= “25%, 30%, *”>

Border:

This attribute is used to specify the thickness of all borders (in number of pixels) of the HTML frames defined within the HTML frameset.

For example:

<frameset cols= “25%, 30% ,*” border =5>

BorderColor:

It is used to specify the color of borders of all the HTML frames.

HTML frame Spacing :

It is used to specify the space (in number of pixels) between HTML frames within the browser window.

HTML frame Tag:

The <frame> tag is used to specify the characteristics of HTML frame. Once the browser window is divided into sections (using HTML frame tag), the following  characteristics for each section can be specified:

• A unique name of the section.
• Web page address that will be displayed in the HTML frame.
• Many other attributes.

HTML frame Tag Attributes:

The most important and commonly used attributes of HTML frame tag are as follows:

SRC:

It is used to specify the source file name (relative or absolute location of a document) to be displayed within the defined frame.

Name:

It is used to give a unique name of the HTML frame. This name can be used to load other documents into the HTML frame. The name of HTML frame is used with target attributes of  <A> tag to open the page into the specified HTML frame. The name of HTML frame can also used in scripts to control the characteristics of the specified HTML frame.

NoResize:

It is used to disable the resizing capability of HTML frame. By default, if a frame’s borders are visible, the users can resize the frame by selection the border and dragging with mouse.

Scrolling:

It is used to specify whether scrollbars appear within a frame when text dimensions exceed the dimensions of the HTML frame. Its possible values are: Yes, No, and Auto.

Border:

It is used to specify the thickness of the border (in number of pixels) around the HTML frame. Set its value 0 to specify a frame with no border.

BorderColor:

It is use to specify  the color for border of the HTML frame.

MarginWidth:

It is used to specify the amount of white space to the left and right of the HTML frame. It value is given in number of pixels.

MarginHeight:

It is used to specify the amount of white space to the top and bottom of the HTML frame. Its value is given in number of pixels.

Example write code to divide browser screen into two horizontal frame, one occupying 25% of the screen and other occupying the remaining space. Load document “header.html” into first frame and “links.html” into the second frame.

For this example first we create two html files named header.html and links.html as mentioned in example

“header.html file code”

“links.html file code”

Now we create file named index.html to include all files in the index.html. and make sure that the HTML frame attribute don’t work in Firefox web browser.

“Index.html”

Example write html, code to divide browser screen into two vertical frames, left frame occupying 30% of the screen and right frame occupying the remaining space. Load document “links.html” into left frame and https://www.programmingdigest.com into right frame.

Targeting Named Frame:

A document can be opened in a frame using the <A> tag. the target attribute of <A> tag is used to specify the target frame where you want to open the web page this attribute is frequently used with HTML frames.

The following information will have to be supplied with the <A> tag:

• Document name (along with path) that has to be opened.
• The name of the frame where the document has to be opened.

Suppose you created three frames named  as ‘header’ , links’ and ‘index’. To open a document ‘abc.html’ into ‘index’ frame, the <A> tag is written as;

<a href = “abc.html’ target=”index”> click me<A>

Example write html code to create two vertical frames of 30% and 70% of the browser window. The left frame should display different links. When one of the links Is clicked, it should be opened in the right frame:

Note: the  target= “right_frame” (right_frame is the name of the right frame as created in the code attribute is used in all links of “links.html” document such as

“links.html file code”

“Index.html file code”

Click one of the links on left frame. The clicked link will be opened in the right frame. Note that the content of left is not changed, while the contents of right frame changes. It is because the linked page is opened In the right frame.

Nested HTML frameset:

A frameset within another HTML frameset is called nested frameset. Nested HTML framesets are used to further divide the sections of browser’s screen.

For example, to divide the screen into two rows such as frame1 and frame2, the html code are written as:

“Index.html file code”

The above html code will create the following output:

The frame1 (top row) is 25%, while frame2 is 75% of the browser’s screen. Now if you want to divide the frame2 into two columns (i.e. to divide frame2 into two frame vertically), the above html code can be modified as:

“Index.html file code”

In the above code, another <frameset> tag is used in placed of “frame2” to convert it into two columns (or frames vertically named left and right), left frame of 30% and right of  70%. The inner frameset is enclosed inside the outer frameset. So inner frameset is called nested frameset. The above html will create three frames named as ‘frame1’ ‘left’ and ‘right’. So the output of the above code will be as follows: