In this article, we will learn 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>
The below example will demonstrate the approach to create the four parts of the page.
index.html
<html>
<frameset rows="10%,80%,10%">
<frame name="A" src="header.html">
<frameset cols="80%,20%">
<frame name="B" src="home.html">
<frame name="C" src="sidebar.html">
</frameset>
<frame name="B" src="footer.html">
<frameset rows="100%">
</frameset>
</frameset>
</html>
|
Output: The page will now be divided like this.
We will now create the HTML pages of the four sections and the content of the main page separately.
header.html
<html>
<body>
<h1 style="color: green;
text-align: center">
GeeksforGeeks
</h1>
</body>
</html>
|
home.html
<html>
<body>
<h1 style="text-align: center">
Welcome to the home page
</h1>
</body>
</html>
|
sidebar.html
<html>
<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>
|
footer.html
<html>
<body>
<h4 align="center">
All Rights Reserved
</h4>
</body>
</html>
|
html_content.html
<html>
<body>
<p style="text-align: center">
Hyper Text Markup Language
</p>
</body>
</html>
|
css_content.html
<html>
<body>
<p style="text-align: center">
Cascading Style Sheets
</p>
</body>
</html>
|
js_content.html
<html>
<body>
<p style="text-align: center">
JavaScript
</p>
</body>
</html>
|
php_content.html
<html>
<body>
<p style="text-align: center">
Hypertext Preprocessor
</p>
</body>
</html>
|
Output:
Please Login to comment...