Home > Article > Web Front-end > Frame Tag in HTML

Frame Tag in HTML

王林Original: 2024-09-04 16:32:031128browse

An HTML frame tag is used to display multiple sites on a single web page in the form of sections. This tag allows designing a web page so that multiple web pages with different content can be combined and displayed individually on a single web page. This is achieved by dividing the single web page into different sections, which may be called a frame. The individual frames can be loaded separately. The frame tag is used along with the frameset tag, where frameset tags can be considered as container, and multiple frame tags in it will represent multiple sites.

Syntax:

The basic syntax of the frame tag is as below,

<frame src = "URL">

The src attribute specifies the source of a file. The tag supports some other attributes, but src is the main attribute.

As mentioned, the tag is used with the tag. The frameset can be considered as a collection of multiple frames where each frame will represent an individual site to be loaded on the same page. The frame tag will be used along with the frameset tag as below,

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

Note that the frameset tag has an end tag, but the frame tag has not.

Examples of Frame Tag in HTML

Examples of frame tag in html are given below:

Example #1 – Align frames Horizontally

There are three files frame1, frame2 and main.

Frame1.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Main.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "50%, 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</head>
<body>
</body>
</html>

Output: Here, we have used the cols attribute to specify them as a column, and the width of each frame has been set to 50%.

Frame Tag in HTML

Example #2 – Align frames Vertically

There are Four files frame1, frame2,frame3, and main.

Frame1.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Frame3.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>

Main.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset rows = "30%, 30%, 30%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
<frame src = "frame3.html" >
</frameset>
</head>
<body>
</body>
</html>

Output: Here, we have used the cols attribute over the frameset tag to divide the frames horizontally, and the height has been mentioned in percentage.

Frame Tag in HTML

Example #3 – Navigating different frames using links

For this example, three files, frame1.html, frame2.html, and frame3.html, are the same.

We will be using a name attribute with a frame tag.

Main.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "30%, * " >
<frame src = "menu.html" name = "menu" >
<frame name = "frame" >
</frameset>
</head>
<body>
</body>
</html>

menu.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>

Here In the frameset tag, we have divided two frames into a width of 30% for the first frame and the remaining all width for the second frame. The first frame will list out the menu in the form of hyperlinks. For the second frame, we have assigned a name for it, and in the menu.html, we have set the target as the frame name for every link. So, this link will direct the frame, and the content will be displayed on the same frame.

Output:

Frame Tag in HTML

Note: tag is not supported in a HTML5, instead