Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML frameset Tag

HTML frameset Tag

WBOY
Release： 2024-09-04 16:30:32
Original
517 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels：
html html5 HTML Tutorial HTML Properties HTML tags
source：php
Previous article：THead Tag in HTML Next article：HTML checkbox Tag
Statement of this Website
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
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template