Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to divide HTML page into four parts using frame?
In the Frameset attribute of HTML, we can define the rows’ and columns' dimensions in percentage as well as in pixels. The collection of different frames is known as a frameset. To make a particular section of the frame it has to use the frame element. Each frame defines some uniqueness on it without disturbing any other frame. In this article, we are going to get a walkthrough of the process of dividing an HTML page into four Parts using this frameset.
Syntax
The following syntax is used in the examples −
<frameset rows = "25%, 25% " cols = "20%,70%">
A frameset is an HTML element that includes different frames. There are two types of an attribute in the frameset −
rows − Define the number of rows.
cols − Define the number of columns.
<frame src = "frame1.html"></frame>
The frame in HTML is used to divide the browser window into different sections where each section can load something to its frame.
Example 1
In this example, we will use the four different frames into one frameset that divides the particular section of the frame in HTML.
Frame.html
This is the main input of the program which includes four different frames using the <frame> tag. To set the position of the frames it has used two attributes- rows and cols.
<!DOCTYPE html> <html> <head> <title>Frame into 4 parts</title> </head> <frameset rows="25%, 25% " cols="20%,70%"> <frame src = "frame1.html" name = "frame1"> <frame src = "frame2.html" name = "frame2"> <frame src = "frame3.html" name = "frame3"> <frame src = "frame4.html" name = "frame4"> <body> </body> </html>
Frame1.html
This is the first frame whose body background-color sets to seagreen. To inform the first part it will use the h1 element.
<!DOCTYPE html> <html> <head> <title></title> </head> <body style = "background-color: seagreen; opacity: 0.5;"> <h1>First part</h1> </body> </html>
Frame2.html
This is the second part of the frame whose body background-color sets to powderblue. To inform the second part it will use h1 element.
<!DOCTYPE html> <html> <head> <title></title> </head> <body style = "background-color: powderblue; opacity: 0.5;"><h1>Second part</h1> </body> </html>
Frame3.html
This is the third part of the frame whose body background-color sets to orange. To inform the third part it will use the h1 element.
<!DOCTYPE html> <html> <head> <title></title> </head> <body style = "background-color: orange; opacity: 0.5;"> <h1>Third part</h1> </body> </html>
Frame4.html
This is the fourth part of the frame whose body background-color sets to #e1a5e8. To inform the fourth part it will use the h1 element.
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, initial-scale = 1"> <title></title> </head> <body style = "background-color: #e1a5e8; opacity: 0.5;"> <h1>Fourth part</h1> </body> </html>
Example 2
In the following example, we will set equal attribute values to the rows and cols in the element frameset. Then we will use the four frame elements that have the attribute src to separate the HTML page into four parts.
<!DOCTYPE html>
<html>
<head>
<title>Frame into 4 parts</title>
</head>
<frameset rows="250px, 250px " cols="250px,250px">
<frame src = "https://www.shutterstock.com/image-vector/flat-line-design-website-banner-600w-391212160.jpg" name = "frame4" name = "frame1">
<frame src = "https://image.shutterstock.com/z/stock-vector-flat-line-design-website-banner-of-health-plan-management-solutions-modern-vector-illustration-for-391212160.jpg" name = "frame2">
<frame src = "https://image.shutterstock.com/z/stock-vector-flat-line-design-website-banner-of-health-plan-management-solutions-modern-vector-illustration-for-391212160.jpg" name = "frame4" name = "frame3">
<frame src = "https://www.shutterstock.com/image-vector/flat-line-design-website-banner-600w-391212160.jpg" name = "frame4">
</html>
Conclusion
The above output shows the uniqueness of a particular section of four different frames in HTML. All the frames use the inline CSS to set the properties of background-color and opacity. The frameset is the main element which includes all the frames at once. For example- The browser window divides the different sections to load some uniqueness on it.
2K+ Views
