The task is to create frames using HTML. HTML is HyperText Markup Language, and it is the standard markup language for creating web pages. It describes the shape of a web page and includes a sequence of elements.
Frames in HTML are used to divide your browser window into more than one section in which every phase can load a separate HTML report and a group of frames within the browser window is referred to as a frameset.
It is never recommended to use frames on your web page because of the following reasons.
- Smaller gadgets can’t deal with frames frequently due to the fact that their display isn’t always sufficient enough to be divided up.
- Due to different screen resolutions, your page will be displayed differently on different computers.
- It happens sometimes that your browser’s back button doesn’t work as the user hopes.
- There are few browsers that do not supports frame.
Let us see how we can create a frame using HTML.
Instead of using the <body> tag, you can use the <frameset> tag for using a frame. The <frameset> tag is used to define how to divide the window into frames. The horizontal frames are defined by the row attribute and the vertical frames are defined by the col attribute.
Approach:
- First, create three separate files. eg – frame1.html, frame2.html, and frame3.html.
- In the next step create the index.html file or main file to run the program after including all the above HTML frames.
- All the below HTML files are used in both examples.
<!DOCTYPE html> <html>
<body>
<h3>frame 1</h3>
<p> This content is in frame 1 </p>
</body>
</html>
|
<!DOCTYPE html> <html>
<body>
<h3>frame 2</h3>
<p> This content is in frame 2 </p>
</body>
</html>
|
<!DOCTYPE html> <html>
<body>
<h3>frame 3</h3>
<p> This content is in frame 3</p>
</body>
</html>
|
Example 1: The following example demonstrates the HTML <frameset> with cols attribute. The following code uses all of the above files i.e “frame1.html”, “frame2.html” and “frame3.html” as frames.
<!DOCTYPE html> <html>
<body>
<frameset cols="*,*,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</body>
</html>
|
Output:
column frames
Example 2: In the following example, just change the cols to rows in the <frameset> tag. The codes for “frame1.html”,”frame2.html”,”frame3.html” are given before the examples.
<!DOCTYPE html> <html>
<body>
<frameset rows="*,*,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</body>
</html>
|
Output:
row frameset