HTML Frames Tutorial
HTML Frames
Definition and Usage
·
HTML Frames used to split the browser window in several individual
frames that can contain a separate HTML web document.
·
Frame is use to improve appearance and usability of a site.
·
HTML document within frame include a other web pages link can be
opened in the desired frame.
Advantages of Frames
·
Frame Provides technical sophisticated appearance to the web site.
·
It facility to reduce downloading time and improves the usability
of the website.
·
Frames generally include navigation link, header or footers, which
help user to find and navigate to required information.
·
It separates content of website from navigation elements, which is
useful for website maintenance and content modification.
Disadvantages of Frames
·
The web developer must be track of more HTML documents linked with
main frame.
·
It is difficult to print the entire page, which is developed using
frame.
<frameset> tag Attributes
<body> tag is not used in any HTML webpage that contains
<frameset> tag.
|
Attributes
|
Value
|
Description
|
|
cols
|
"50%, 50%, *"
|
Set to specify the number
of column in which you divide on page. Its value supported pixels and
percentage.
* means define all other size assign. |
|
rows
|
"50%, 50%, *"
|
set to specify the number
of row in which you divide on page. Its value supported pixels or percentage.
* means define all other size assign. |
|
noresize
|
|
Used to you do not want to
frames resize.
|
|
border
|
"Size_px"
|
Display size of border
thickness.
|
|
frame bordercolor
|
"purple"
|
Display border color on
dived individual frames.
|
<frame> tag Attributes
Used to include the web page details into
the <frame> tag.
|
Attributes
|
Value
|
Description
|
|
src
|
"Specified_URL"
|
Use to specify URL to wish open the web document.
|
|
name
|
"alternate_name"
|
Use to specify the name to idenfity this frame to open document.
|
|
scrolling
|
"auto","yes","no"
|
Used to display on scrolling.
|
|
marginwidth
|
"Size_px"
|
Display margin of the width of left or right.
|
|
marginheight
|
"Size_px"
|
Display margin of the height of left or right.
|
|
noresize
|
|
Used to you do not want to frames resize.
|
Frame Examples
Example 1:
frame_example1.html
<html>
<head>
<title>Frameset
Example.1<title>
</head>
<frameset rows =
"35%, 65%">
<frame
src ="frame1.html" />
<frame
src ="frame2.html" />
</frameset>
</html>
frame1.html:
<html>
<body
style="background-color:#ff9900;">
<h2
align="center">This is my First frame. (frame1.html)</h2>
</body>
</html>
frame2.html:
<html>
<body bgcolor=”#ffcc00;">
<h2
align="center">This is my Second frame. (frame2.html)</h2>
</body>
</html>
Example 2:
frame_example2.html
<html>
<head>
<title>Frameset
Example.2<title>
</head>
<frameset rows =
"35%, 65%">
<frameset cols = "50%,
50%">
<frame src ="frame3.html" />
<frame src ="frame4.html"
/>
</frameset>
</frameset>
</html>
frame1.html:
<html>
<body
style="background-color:#ff9900;">
<h2
align="center">First frame (frame1.html)</h2>
</body>
</html>
frame3.html:
<html>
<body
style="background-color:#a08029;">
<h2
align="center">Second frame (frame3.html)</h2>
</body>
</html>
The Frame.3 (frame_4.html):
<html>
<body
style="background-color:#ffcc00;">
<h2
align="center">Third frame (frame4.html)</h2>
</body>
</html>
Remove
the Frame Border (Frame Example.3)
The frameset (frame_example3.html):
<html>
<head>
<title>Frame Example
3</title>
</head>
<frameset
rows="100,*,75" frameborder="0" border="0" >
<frame name="topNav"
src="top_nav.html">
<frameset
cols="200,*" frameborder="0" border="0">
<frame name="menu"
src="menu_list.html" scrolling="auto" noresize>
<frame name="content"
src="content.html" scrolling="auto" noresize>
</frameset>
<frame name="footer"
src="footer.html">
</frameset>
<noframes></noframes>
</html>
Top Navbar (top_nav.html):
<html>
<body
style="background-color:#CCCC00;color:white;font-family:verdana;
font-size:14px;">
<h3>Top
Navbar</h3>
</body>
</html>
Menu List (menu_list.html):
<html>
<body
style="background-color:#ff6600;color:white;font-family:verdana;
font-size:14px;">
<h3>Menu
List</h3>
</body>
</html>
Content (content.html):
<html>
<body
style="background-color:#ffcc00;color:white;font-family:verdana;
font-size:14px;">
<h2>Content</h2>
<ul>
<li><a
href="http://www.way2tutorial.com" target="_blank">
Online Web Developemnt
Tutorial</a></li>
</ul>
</body>
</html>
Footer (footer.html):
<html>
<body
style="background-color:#000000;color:white;font-family:verdana;
font-size:14px;">
<h3>Footer</h3>
</body>
</html>
Comments
Post a Comment