HTML | <frame> Tag
HTML Frames are a powerful tool for dividing your web browser window into multiple sections, each capable of loading content independently. This is achieved using a collection of frames within a frameset tag. However, it’s important to note that the <frame> tag is deprecated in HTML 5.
Creating Frames:
Creating frames in HTML involves using the <frameset> tag instead of the <body> tag. Each frame is defined by the <frame> tag, which specifies the HTML document to be loaded into the frame. The row attribute is used to define horizontal frames, while the col attribute is used for vertical frames. Here’s an example of how to create three horizontal frames using the row attribute of the frameset tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
Output:
The above example basically used to create three horizontal frames: top, middle and bottom using row attribute of frameset tag and the noframe tag is used for those browser who doesn’t support noframe.
Example:
This example illustrates the col attribute of frameset tag.
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>
<frameset cols = "30%, 40%, 30%">
<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
Output:
The above example basically used to create three vertical frames: left, center and right using col attribute of frameset tag.
Attributes of Frameset tag:
cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically used to define the no of columns and its size inside the frameset tag. The size or width of the column is set in the frameset in the following ways:
Use absolute value in pixel Example:
<frameset cols = "300, 400, 300">
Use percentage value Example:
<frameset cols = "30%, 40%, 30%">
Use wild card values: Example:
<frameset cols = "30%, *, 30%">
rows: The rows attribute is used to create horizontal frames in web browser. This attribute is used to define no of rows and its size inside the frameset tag. The size of rows or height of each row use the following ways:
Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
Use percentage value Example:
<frameset rows = "30%, 40%, 30%">
Use wild card values Example:
<frameset rows = "30%, *, 30%">
border: This attribute of frameset tag defines the width of border of each frames in pixels. Zero value is used for no border. Example:
<frameset border="4" frameset>
frameborder: This attribute of frameset tag is used to specify whether the three-dimensional border should be displayed between the frames or not for this use two values 0 and 1, where 0 defines for no border and value 1 signifies for yes there will be border.
framespacing: This attribute of frameset tag is used to specify the amount of spacing between the frames in a frameset. This can take any integer value as an parameter which basically denotes the value in pixel. Example:
<framespacing="20">
It means there will be 20 pixel spacing between the frames
Attributes of Frame Tag:
name: This attribute is used to give names to the frame. It differentiate one frame from another. It is also used to indicate which frame a document should loaded into. Example:
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src = "C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
src: This attribute in frame tag is basically used to define the source file that should be loaded into the frame.The value of src can be any url. Example:
<frame name = "left" src = "/html/left.htm" />
marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels between the border and contents of left and right frame. Example:
<frame marginwidth="20">
marginheight: This attribute in frame tag is used to specify height of the spaces in pixels between the border and contents of top and bottom frame. Example:
<frame marginheight="20">
scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This is basically used to control the appearance of scrollbar. The value of this attribute can be yes, no, auto. Where the value no denotes there will be no appearance of scroll bar. Example:
<frame scrollbar="no">
Advantages of Frame Tag:
- It allows the user to view multiple documents within a single Web page.
- It load pages from different servers in a single frameset.
- The older browsers that do not support frames can be addressed using the tag.
Disadvantages of Frame Tag:
- Due to some of its disadvantage it is rarely used in web browser.
- Frames can make the production of website complicated.
- A user is unable to bookmark any of the Web pages viewed within a frame.
- The browser’s back button might not work as the user hopes.
- The use of too many frames can put a high workload on the server.
- Many old web browser doesn’t support frames.
Note:
This tag is not supported in HTML5.
Supported Browser:
The browser supported by <frame> tag are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Conclusion
Despite the <frame> tag being deprecated in HTML 5, understanding how it works can provide valuable insight into the evolution of web development. Today, similar results can be achieved using CSS and other modern techniques. Always remember to keep your web development skills up-to-date and adaptable to the ever-changing landscape of the web.
Contact Us