|
This article shows how to divide a page into four parts using HTML frames. This can be used to represent the header, sidebar, footer, and main content. The frames are created using the <frame> tag. We will have to use four HTML files for each of the portions.
Syntax<frameset>
// frame elements
</frameset> Example 1: This example will demonstrate the approach to create the four parts of the page.
HTML
// Home.html
<html>
<head>
<title>Header</title>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to the home page</h1>
</body>
</html>
// Sidebar.html
<html>
<head>
<title>Sidebar</title>
</head>
<body>
<h3>Sidebar</h3>
<a href="html_content.html" target="B">
HTML
</a><br>
<a href="css_content.html" target="B">
CSS
</a><br>
<a href="js_content.html" target="B">
JS
</a><br>
<a href="php_content.html " target="B">
PHP
</a>
</body>
</html>
// header.html
<html>
<head>
<title>Header</title>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
// footer.html
<html>
<head>
<title>Footer</title>
<style>
h4 {
text-align: center;
}
</style>
</head>
<body>
<h4>
All Rights Reserved
</h4>
</body>
</html>
// html_content.html
<html>
<head>
<title>
HTML content
</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>Hyper Text Markup Language</p>
</body>
</html>
//css_content.html
<html>
<head>
<title>CSS</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>Cascading Style Sheets</p>
</body>
</html>
//js_content.html
<html>
<head>
<title>JS content</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>JavaScript</p>
</body>
</html>
//php_content.html
<html>
<head>
<title>PHP Content</title>
</head>
<style>
p {
text-align: center;
}
</style>
<body>
<p>Hypertext Preprocessor</p>
</body>
</html>
Output:
 We will now create the HTML pages of the four sections and the content of the main page separately.
Output:
Example 2:Implementation to show how to divide an HTML page into four parts by using images.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Frame into 4 parts</title>
</head>
<frameset rows="250px, 250px" cols="250px, 250px">
<frame src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108153811/fadein1.gif"
name="frame1">
<frame src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108153519/fadeout1.gif"
name="frame2">
<frame src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108152900/Factor-Tree-of-20.png"
name="frame3">
<frame
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108153420/Prime-Factorization-of-20.png"
name="frame4">
</frameset>
</html>
Output:
|
