Creation
of website with Frames and CSS
Frame File
<html>
<head>
<title>index</title>
</head>
<frameset rows=30%,45%,*>
<frame name="f1"
src="top.htm">
<frameset cols=30%,70%>
<frame name="f2"
src="left.htm">
<frame name="f3"
src="right1.htm">
</frameset>
<frame name="f4"
src="bottom.htm">
</frameset>
</html>
<html>
<head>
<title>this is a top
page</title>
<style
type="text/css">
<!--
body{background-color:"pink";};
h1{font-family:monotype
corsiva;color:brown;width:300;;position:absolute;left:400px};
b{font-family:monotype
corsiva;color:"black";};
-->
</style>
</head>
<body>
<h1>Welcome to the top
page</h1>
<br>
<b>this is a top
page</b>
</body>
</html>
<html>
Top file
<head>
<title>this is a left
page</title>
<style
type="text/css">
<!--
h1{font-family:monotype corsiva,
font-style;bold;color:brown;};
b{font-family:monotype corsiva,
font-style;italic;color:red;background-color:gray;}
-->
</style>
</head>
<body bgcolor="pink"
style="float: right">
<h1>Welcome</h1>
<b>this is a left
page</b>
<p><p><p>
<a href=right1.htm target=f3>
Right1 page</a><br>
<a href=right2.htm
target=f3>Right2 page</a><br>
<a href=right3.htm
target=f3>Right3 page</a><br>
</body>
</html>
Right1.html
<html>
<head>
<title>this is a right1
page</title>
<style
type="text/css">
<!--
body{
background:"orange";};
h1{font-family:monotype corsiva,
font-style;bold;color:brown;position:absolute;left:400;top:100;};
p{font-family:monotype
corsiva;color:red;position:relative;top:115;
font-size:19pt;}
-->
</style>
</head>
<body>
<h1> this is a right1
page</h1>
<p>this is a right1
page</p>
</body>
</html>
Right1.html
<html>
<head>
<title>this is a right2
page</title>
<style
type="text/css">
<!--
body{ background:"blue"};
h1{font-family:monotype corsiva,
font-style;bold;color:brown;position:absolute;left:400;};
p{font-family:monotype corsiva,
font-style;italic;color:red;position:absolute;top:115;
font-size:19pt;}
-->
</style>
</head>
<body>
<h1>Welcome to right2 page
</h1>
<p>this is a right2
page</p>
</body>
</html>
Right3.html
<html>
<head>
<title>this is a right3
page</title>
<style
type="text/css">
<!--
body{background:tan;}
h1{font-family:monotype corsiva,
font-style;bold;color:white;position:absolute;left:400;};
p{font-family:monotype corsiva,
font-style;italic;color:silver;position:absolute;top:115;
font-size:19pt;background-color:gray}--></style></head>
<body
bgcolor="black">
<h1> this is a right3
page</h1>
<p>this is a
right3page</p>
</body></html>
Bottom File
<html>
<head>
<title>bottom</title>
<style
type="text/css">
<!--
body{background-color:lavender;};
h1{font-family:times new roman,
font-color:indigo;position:absolute;left:400;};
p{font-family:monotype
corsiva;color:red;position:absolute;top:50;font-size:19pt;};
-->
</style>
</head>
<body >
<h1>Welcome to bottom
page</h1>
<p>This is a bottom
page</p>
</body>
</html>
thanks bro
ReplyDeleteoutput plz
ReplyDeleteOUTPUT PLS PLS ! REQUIRED FOR PROJECT HELP HELP
ReplyDeleteOUTPUT:
ReplyDelete1. Copy the code on notepad.
2. Go to File > Save as > Save as type: All files(*.*) > Filename: test.html > Save
3. Go to the files location and open it.
4. Output!
It's just basic html..
Thanks for sharing. It is very helpful for me. For responsive web design .Visit W3Schools.com
ReplyDelete