search

Home >Web Front-end >HTML Tutorial >HTML frameset Tag

HTML frameset Tag

WBOY
WBOYOriginal
2024-09-04 16:30:32512browse

The tag in HTML combines multiple frames and displays them as a single web page. This document will consist of all the frames included in a frameset. Frames are nothing but similar to individual windows or websites. The frameset tag allows us to form multiple columns or rows and include the frames under them. This feature was available before HTML 5 and is useful to show various documents at once by combining them together. Each frame can contain its content; normally, these will be different web files such as HTML or images.

Syntax

Here the starting tag is as and ends with the end tag as . The tag may contain one or more multiple frame tags. Each frame tag starts with tag, with attribute names “src,” where we will pass our frame contents. As introduced, this content can be anything like web files such as HTML or passing images.

<frameset cols / rows = ", , , " >
<frame src = "source file name. . . " >
. . . . . .
. . . . . .
<frame src = "source file name. . . " >
</frameset>

Here, we have a starting tag frameset that contains attribute cols or rows. Generally, these two attributes will be used along with a frameset tag, as a frameset tag is used to combine multiple frames. These tags are nothing but allow to form rows or columns to position various frames. A simple frame tag then follows the starting tag. To display a file in a frame, use the “src” attribute in the frame tag and pass the file name as its value. We have shown that a single frame can contain multiple frames using the dots. And at last, the frameset tag is closed by closing tag .

Attributes of frameset Tag

Below is the list of attributes that are supported by the frameset tag:

1. cols: This attribute is used to position the frames inside. The cols attribute will divide the frameset into multiple columns, showing the frames vertically. This attribute also allows setting the width of each column in the frameset. We can set different values for each frame by passing the value to this attribute. The value can be passed in percentage, pixels, or relative length. The default value for this attribute is 100%.

2. rows: This attribute is also similar to the cols attribute. The rows attribute will divide the frameset into multiple rows, and frames will be shown horizontally one by one. We can pass the value similar to the cols attribute to set the height of each frame. By using both rows and cols, the desired outcome can be achieved. The default value for this attribute is also 100%.

3. border: This attribute is used over the frameset tag to define the width of each frame in a frameset.

4. framespacing: The frameset tag uses the “frame spacing” attribute to establish the gaps between the frames within it.

Examples to Implement HTML frameset Tag

Given below are the examples of HTML frameset Tag:

Example #1

It contains multiple Html files as we use different files as a frame in one parent window.

Code:

Main file:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset>
<frame src = "frame1.html" >
</frameset>
</html>

We have a single source file named frame 1.

frame1.html:

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.15) ;
}
</style>
</head>
<body>
<h2> Example of Frameset tag </h2>
<h1> Frame 1 </h1>
</body>
</html>

Output:

As we have only one file included as a single frame, the page will show the content of frame.html as a whole. The width and height of the frame are, by default, 100%; that’s why a single frame will occupy all the area.

HTML frameset Tag

Example #2

Let’s add one more frame into our example and divide it column-wise using the cols attribute and passing the value in percentage.

Code:

frame2.html:

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
</style>
</head
<body>
<h2> Hello World..! </h2>
<h1> Frame 2 </h1>
</body>
</html>

Main file:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset cols = "40% , 60 %" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>

Output:

Here, we have passed two frames and divided them using the cols attribute with values passed as 40% and 60%. Make the width of the first frame 40% and the width of the second frame 60%.

HTML frameset Tag

Example #3

Let’s divide the same frames horizontally by using the rows attribute. We will modify the same last example. The difference will be that the rows attribute will replace the cols attribute. The rows attribute also takes a value similar to the cols attribute. We can pass multiple values depending on the number of frames.

Code:

Main File:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset rows = "50% , 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>

Output:

Here the output will be two horizontal frames with the same height as 50%. Note that this height will correspond to the actual browser window.

HTML frameset Tag

Conclusion

We have learned about the frameset tag in HTML, its purpose, and how to utilize it. This tag aims to merge and showcase several frames on one display window. We can also define the frames’ position and size using the available attributes. This tag has been deprecated since HTML 5.

The above is the detailed content of HTML frameset Tag. For more information, please follow other related articles on the PHP Chinese website!

html define for include using Length Attribute number default this display position border column windows
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：THead Tag in HTMLNext article：THead Tag in HTML

Related articles

See more