1)Write HTML and CSS code to design
a web page. Divide the browser screen into two frames. The first frame will
display the heading. Divide the second frame into two columns. The frame on the
right contains a image of “Home and Kitchen Appliances”. The frame on the left
contains a menu consisting of hyperlinks. Clicking on any one of these
hyperlinks will display related information in a new page as shown below.Use
External style sheet with appropriate attributes to display information of each
frame.
|
Home
Shopping
|
|
Kitchen
& Dining
i. Cookware
ii. Kitchenware
iii. Bakeware
iv. Serveware
|
|||||
|
Home & Kitchen appliances
§
Kitchen & Dining
§
Furnishings
§
Home Décor
§
Home Improvement
|
||||||
c1.css
body{background:pink;}
Main.html
<html><frameset
rows="20%,*"><frame
src="f1.html"target="frame1">
<frameset
cols="30%,*"><frame
src="f2.html"target="frame2">
<frame
src="f3.html"target="frame3"></frameset></frameset></html>
f1.html
<html><head><link
rel=stylesheet href="c1.css"></head>
<body><h1
align="center">Home Shopping</h1></body></html>
f2.html
<html><head><link
rel=stylesheet href="c1.css"></head><body>
<img
src="index.jpg"></body></html>
f3.html
<html><head><link
rel=stylesheet href="c1.css" type="text/css">
</head><body><h3
align="center">Home & Kitchen Application</h3>
<ul type="square">
<li><a href="f4.html"target="_BLANK">Kitchen
& Dining</a></li>
<li><a
href="f5.html"target="_BLANK">Furnishings</a></li>
<li><a
href="f6.html"target="_BLANK">Home
Decor</a></li>
<li><a
href="f7.html"target="_BLANK">Home
Improvement</a></li>
<li><a
href="f8.html"target="_BLANK">curtain</a></li>
</ul>
</body>
</html>
f4.html
<html><head><link
rel=stylesheet href="c1.css"></head>
<body><h3>Kitchen
Dining</h3>
<ol
type="i"><li>Cookware</li><li>Kitchenware</li><li>Bakeware</li><li>Serveware</li></ol>
</body>
</html>
f5.html
<html><head><link
rel=stylesheet href="c1.css"></head>
<body><h3>Furnishings</h3>
<ol
type="i"><li>Sofa</li><li>Bed</li><li>Chairs</li><li>Dining
Table</li></ol>
</body>
</html>
f6.html
<html><head><link
rel=stylesheet href="c1.css"></head>
<body><h3>Home
Decor</h3>
<ol
type="i"><li>Lighting</li><li>asd</li><li>gfdss</li><li>oursdfg</li></ol>
</body>
</html>
Create page same like f7.html
and f8.html.
