What are frames and framesets horizontal and vertical frames in HTML?

Frames in HTML

During the development of web page, a situation may come when there is need to convert web page into smaller sections. These small sections obtain with the help of HTML frames. In other words, HTML frames show multiple HTML documents in separate sections on same page. So, HTML frames provide the facility to divide your browser window into multiple sections where each section can load a separate HTML document.

A collection of frames in the browser window is known as a frameset. The frames divide window in the same way as tables divide into rows and columns.

How to create frames in HTML?

To use frames on a page, we use <frameset> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. To show document in different section, we use <frame> tag.

Horizontal frames in HTML

Horizontal frames divide window into sections horizontally or into rows. The whole window convert into horizontal sections i.e in downward direction.

Let us now create three horizontal frames.

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "20%,60%,20%">
<frame name = "top" src = " https://programmingtutorial.in/category/c/" />
<frame name = "main" src = "https://programmingtutorial.in/category/html/" />
<frame name = "bottom" src = "https://programmingtutorial.in/category/ms-word/" />
 <noframes>
         <body>Your browser does not support frames.</body>
 </noframes>
 </frameset>
 </html>

The result of above code is shown below.

Horizontal frames in HTML, www.programmingtutorial.in

Here the window converted into three horizontal sections. The sections height depend on the percentage given by the developer.

Vertical frames in HTML

Vertical frames divide window into sections vertically or into columns. The whole window convert into vertical sections i.e in starting from left to right direction.

Let us take an example of vertical frame

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "20%,60%,20%">
      <frame name = "top" src = " https://programmingtutorial.in/category/c/" />
      <frame name = "main" src = "https://programmingtutorial.in/category/html/" />
      <frame name = "bottom" src = "https://programmingtutorial.in/category/ms-word/" />
 <noframes>
         <body>Your browser does not support frames.</body>
 </noframes>
 </frameset>
 </html>

The result of above code is shown below.

Vertical frames in HTML, www.programmingtutorial.in

Here the window converted into three vertical sections. The sections width depend on the percentage given by the developer.

Attributes of frameset

1 Cols in frameset

It specifies how many columns to be used in frameset and how to set size of each frame. There are four ways to set the attributes of frameset.

  1. Setting absolute values in pixels. For example, to create three vertical frames, use cols = “100, 500, 100”.
  2. Using percentage of the browser window. For example, to create three vertical frames, use cols = “20%, 70%, 10%”.
  3. Using a wildcard symbol. For example, to create three vertical frames, use cols = “10%, *, 10%”. In this case wildcard takes remainder of the window.
  4. By setting relative widths of the browser window. For example, to create three vertical frames, use cols = “3*, 2*, 1*”. Here the window is divided into six parts, the first column takes up half of the window, the second takes one third, and the third takes one sixth.

2 rows in frameset

It specifies how many rows to be used in frameset and how to set size of each frame. This attribute also works in the same way as cols attribute works except one change, it divides browser window into horizontal frames. For example, to create three horizontal frames, use rows = “10%, 80%”, 10%.

3 border in frameset

It specifies the width of each border in pixels and starts from 0 value onward. border=”0″ means no border.

4 frameborder

This is used to set a three dimensional border between frames. It takes the values either 1 means yes or 0 means no.

5 framespacing

framespacing is used to set the spacing between frames. It takes integer value to set the space. For example, framespacing=”10″ means spacing of 10 pixels.

Attributes of frame

1 src

src takes the file which is to be uploaded . Its value can be any URL. For example, src = “https://programmingtutorial.in/category/ms-word/” will load an HTML file available in html directory.

2 frameborder

It is used to set the border of frame. It takes the values 1 (yes) or 0 (no)

3 marginwidth

This attribute allows you to specify the width of the space between the left and right of the frame’s borders and the frame’s content. The value is given in pixels. For example marginwidth = “15”.

4 marginheight

This attribute allows you to specify the height of the space between the top and bottom of the frame’s borders and its contents. The value is given in pixels. For example marginheight = “15”.

5 noresize attribute

By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize = “noresize”.

6 scrolling attribute

This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either “yes”, “no” or “auto”. For example scrolling = “no” means it should not have scroll bars.

7 longdesc

This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = “description.htm”