Example : How to create/use Vertical Frame in Html?
Frame.html
<!DOCTYPE html>
<html>
<head>
<title>The Concept of Frame</title>
</head>
<frameset cols="33%,34%,33%">
<frame src="first.html"></frame>
<frame src="second.html"></frame>
<frame src="third.html"></frame>
</frameset>
<body></body>
</html>
----------------- OR ------------------
<!DOCTYPE html>
<html>
<head>
<title>The Concept of Frame</title>
<frameset cols="33%,34%,33%">
<frame src="first.html"></frame>
<frame src="second.html"></frame>
<frame src="third.html"></frame>
</frameset>
</head>
<body></body>
</html>
NB: (i)frameset can not be included in body tag of html.
(ii)Run the Frame.html page to see the result.
(iii)Put all the html files in same folder.
(iv) frame tag does not supproted by html5 hence iframe tag is used in place, if any.
____________________________________________________________________________________
first.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: blue;
height: 500px;
}
</style>
</head>
<body>
<div>
<h3>Contents of first frames can be added here</h3>
</div>
</body>
</html>
---------------------------------------------------------------------
second.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: green;
height: 700px;
}
</style>
</head>
<body>
<div>
<h3>Contents of second frames can be added here</h3>
</div>
</body>
</html>
---------------------------------------------------------------------
third.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
height: 350px;
}
</style>
</head>
<body>
<div>
<h3>Contents of third frames can be added here</h3>
</div>
</body>
</html>
Example : How to create/use Horizontal Frame in Html?
Frame.html
<!DOCTYPE html>
<html>
<head>
<title>The Concept of Frame</title>
</head>
<frameset rows="33%,34%,33%">
<frame src="first.html" name="frame1">
<frame src="second.html" name="frame2">
<frame src="third.html" name="frame3">
</frameset>
<body></body>
</html>
----------------- OR ------------------
<!DOCTYPE html>
<html>
<head>
<title>The Concept of Frame</title>
<frameset rows="33%,34%,33%">
<frame src="first.html">
<frame src="https:\\www.codershelpline.com">
<frame src="third.html">
</frameset>
</head>
<body></body>
</html>
----------------- OR ------------------
<!DOCTYPE html>
<html>
<head>
<title>The Concept of Frame</title>
<frameset cols="400,300,700">
<frame src="first.html" noresize name="frame1">
<frame src="https:\\www.codershelpline.com" noresize name="frame2">
<frame src="third.html" noresize name="frame3">
</frameset>
</head>
<body></body>
</html>
----------------- OR ------------------
<!DOCTYPE html>
<html>
<head>
<title>The Concept of Frame</title>
<frameset cols="400,300,700">
<frame src="first.html" noresize name="frame1">
<frame src="https:\\www.codershelpline.com" noresize name="frame2">
<frame src="third.html" noresize name="frame3">
<noframes>Used to show message (as alt in img tag) when frame tag does not supported by the browser</noframes>
</frameset>
</head>
<body></body>
</html>
NB:
(i)Here, noresize=for rigid/fix boundary.
_______________________________________________________________________________
first.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: blue;
height: 500px;
}
</style>
</head>
<body>
<div>
<h3>Contents of first frames can be added here</h3>
</div>
</body>
</html>
---------------------------------------------------------------------
second.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: green;
height: 700px;
}
</style>
</head>
<body>
<div>
<h3>Contents of second frames can be added here</h3>
</div>
</body>
</html>
---------------------------------------------------------------------
third.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
height: 350px;
}
</style>
</head>
<body>
<div>
<h3>Contents of third frames can be added here</h3>
</div>
</body>
</html> Example : How to create/use iFrame in Html?
<!DOCTYPE html>
<html>
<head>
<title>The Concept of iFrame</title>
</head>
<body>
<iframe src="https://www.codershelpline.com/" height="500px" width="500px"></iframe>
<iframe src="https://www.codershelpline.com/" height="80%" width="50%"></iframe>
<iframe src="https://www.codershelpline.com/" style="height:500px;width:500px;border:none"></iframe>
<iframe src="https://www.codershelpline.com/" style="height:500px;width:500px;border:2px solid red"></iframe>
</body>
</html> Example : How to set iFrame as target for a link/page in Html?
iframe1.html
<!DOCTYPE html>
<html>
<head>
<title>The Concept of iFrame</title>
</head>
<body>
<iframe height="500px" width="500px" name="iframe1"></iframe>
<div><a href="https://www.codershelpline.com" target="iframe1">Click this Link to Open Site inside iFrame</a></div>
</body>
</html>
----------------- OR ------------------
iframe1.html
<!DOCTYPE html>
<html>
<head>
<title>The Concept of iFrame</title>
</head>
<body>
<iframe height="500px" width="500px" src="first.html" name="iframe1"></iframe>
<div><a href="https://www.codershelpline.com" target="iframe1">Click this Link to Open Site inside iFrame</a></div>
</body>
</html>
first.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
height: 500px;
}
</style>
</head>
<body>
<div>
<h3>Default page as background in iFrame</h3>
</div>
</body>
</html>
0 Comments