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.
<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 >
|
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 >
|
HTML
// header.html
< html >
< head >
< title >Header</ title >
< style >
h1 {
color: green;
text-align: center;
}
</ style >
</ head >
< body >
< h1 >w3wiki</ h1 >
</ body >
</ html >
|
HTML
// footer.html
< html >
< head >
< title >Footer</ title >
< style >
h4 {
text-align: center;
}
</ style >
</ head >
< body >
< h4 >
All Rights Reserved
</ h4 >
</ body >
</ html >
|
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 >
|
HTML
//css_content.html
< html >
< head >
< title >CSS</ title >
< style >
p {
text-align: center;
}
</ style >
</ head >
< body >
< p >Cascading Style Sheets</ p >
</ body >
</ html >
|
HTML
//js_content.html
< html >
< head >
< title >JS content</ title >
< style >
p {
text-align: center;
}
</ style >
</ head >
< body >
< p >JavaScript</ p >
</ body >
</ html >
|
HTML
//php_content.html
< html >
< head >
< title >PHP Content</ title >
</ head >
< style >
p {
text-align: center;
}
</ style >
< body >
< p >Hypertext Preprocessor</ p >
</ body >
</ html >
|
We will now create the HTML pages of the four sections and the content of the main page separately.
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.w3wiki.net/wp-content/uploads/20240108153811/fadein1.gif" name = "frame1" >
< frame src =
"https://media.w3wiki.net/wp-content/uploads/20240108153519/fadeout1.gif" name = "frame2" >
< frame src =
"https://media.w3wiki.net/wp-content/uploads/20240108152900/Factor-Tree-of-20.png"
name = "frame3" >
< frame
src =
"https://media.w3wiki.net/wp-content/uploads/20240108153420/Prime-Factorization-of-20.png"
name = "frame4" >
</ frameset >
</ html >
|
Contact Us