Implementing Frames in HTML
Previously we have seen, Using an Image as a link, button, or background. Now we are going to learn about Implementing Frames in HTML Web-pages. So let's get started...
Frames in HTML
In HTML, a frame is used to display multiple web pages in the same web
page, at a time. Each frame in a window may be separated from the others
with a border.
The frames can be defined with <frame> tag. Frames not only contain
web pages but also contains different data. Frames can be a combination of related information.
Basic concept behind Frames :
- Use the <frameset> element in place of the <body> element in an HTML.
- Use the <frame> element to create frames for the content of the web page.
- Use the "src" attribute to define the source which must be loaded in the frame.
- Create different files with the contents for each frame.
Structure of Frame HTML Document
<!DOCTYPE html>
<html>
<head>
<title> Stucture of Frame HTML Document</title>
</head>
<frameset cols="Partitions in Percentage" rows="Partitions in Percentage">
<frame src="Source path of Webpage"></frame>
<frame src="Source path of Webpage"></frame>
<frame src="Source path of Webpage"></frame>
</frameset>
<noframes>
<body>
The browser you are working with, does not support Frames
</body>
</noframes>
</html>Attributes of Frameset & Frame
| Elements Name | Attributes |
|---|---|
| <frameset> | cols | rows | bordercolor | frameborder |
| <frame> | src | name | bordercolor | frameborder | scaling | noresize | marginwidth |
Frames of Vertical Columns
To create a set of four vertical columns, use the frameset element with
the "cols" attribute. The cols attribute is used to define the number and
size of columns the frameset will contain. The value of "*" will cause it
to be automatically sized to fill available space. The cols always define
the size of the frame in percentage or in character "*".
Example :
<!DOCTYPE html>
<html>
<head>
<title> Frames of Vertical Columns </title>
</head>
<frameset cols="33%, 33%, 33%">
<frame src="https://www.computertipstricks.tech/p/frame-01.html"></frame>
<frame src="https://www.computertipstricks.tech/p/frame-02.html"></frame>
<frame src="https://www.computertipstricks.tech/p/frame-03.html"></frame>
</frameset>
<noframes>
<body>
The browser you are working with, does not support Frames
</body>
</noframes>
</html>
Output :
Frames of Horizontal Rows
The rows of frames can be created by using the "rows" attribute rather
than the "cols" attribute. The rows also always define the size of the frame in percentage or in
character "*".
Example :
<!DOCTYPE html>
<html>
<head>
<title>Frames of Horizontal Columns</title>
</head>
<frameset rows="33%, 33%, 33%">
<frame src="https://www.computertipstricks.tech/p/frame-01.html"></frame>
<frame src="https://www.computertipstricks.tech/p/frame-02.html"></frame>
<frame src="https://www.computertipstricks.tech/p/frame-03.html"></frame>
</frameset>
<noframes>
<body>
The browser you are working with, does not support Frames
</body>
</noframes>
</html>
Output :
Frames of Mixed - Rows & Columns
Columns and Rows of frames can both appear on the same web page by nesting
one frameset inside of another. To do this, first create a parent frameset
and then nest a child frameset within the parent element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Frames of Mixed Rows & Columns</title>
</head>
<frameset cols="50%, 50%">
<frame src="https://www.computertipstricks.tech/p/frame-01.html"></frame>
<frameset rows="50%, 50%">
<frame src="https://www.computertipstricks.tech/p/frame-02.html"></frame>
<frameset cols="50%, 50%">
<frame src="https://www.computertipstricks.tech/p/frame-03.html"></frame>
<frame src="https://www.computertipstricks.tech/p/frame-04.html"></frame>
</frameset>
</frameset>
</frameset>
<noframes>
<body>
The browser you are working with, does not support Frames
</body>
</noframes>
</html>
Output :
So, now it's time to end the session. See you guys Next Time, stay
tuned for further updates on HTML Programming Languages...!!!
I hope, our website will definitely help you to improve your
Programming Skills and Knowledge.
Thanks for Visiting...!!!
0 Comments
Please do not add Any Spam link in Comments !