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.
Step 1: CREATE HTML FILES.
-------------------------------------------------------------------------------
Flie 1: Name this file as f.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1> Furnishing </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 2: Name this file as hd.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1>Home Decor </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 3: Name this file as heading.html
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1 align=center>Home Shopping</h1>
</body>
</html>
-------------------------------------------------------------------------------
Flie 4: Name this file as hi.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1>Home Improvement </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 5: Name this file as image.html
<html>
<img src="kit.jpg" alt="image not found">
</html>
-------------------------------------------------------------------------------
Flie 6: Name this file as kd.html
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<h1> Kitchen & Dinning </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 7: Name this file as link.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h2><i>Home & Kitchen Appliences</i><h2>
<ul>
<li><a href="kd.html" target=use_blank>Kitchen and Dinning</a>
<li><a href="f.html" target=use_blank>Furnishing</a>
<li><a href="hd.html" target=use_blank>Home Decor</a>
<li><a href="hi.html" target=use_blank>Home Improvement</a>
</ul>
</html>
-------------------------------------------------------------------------------
Flie 8: Name this file as main1.html
<html>
<head>
<title>slip1</title>
</head>
<frameset rows="20,80">
<frame src="heading.html"></frame>
<frameset cols="30,70">
<frame src="image.html"></frame>
<frame src="link.html"></frame>
</frameset>
</frameset>
</html>
-------------------------------------------------------------------------------
Create Cascading Style Sheet Document style.css file
ul {
font-size: 18;
list-style-type:square;
}
ol{ font-size: 20;
list-style-type:lower-roman;
}
h1{
color:red;
}
-------------------------------------------------------------------------------
Save below image as kit.jpg
-------------------------------------------------------------------------------
Flie 1: Name this file as f.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1> Furnishing </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 2: Name this file as hd.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1>Home Decor </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 3: Name this file as heading.html
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1 align=center>Home Shopping</h1>
</body>
</html>
-------------------------------------------------------------------------------
Flie 4: Name this file as hi.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1>Home Improvement </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 5: Name this file as image.html
<html>
<img src="kit.jpg" alt="image not found">
</html>
-------------------------------------------------------------------------------
Flie 6: Name this file as kd.html
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<h1> Kitchen & Dinning </h1>
<ol>
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</html>
-------------------------------------------------------------------------------
Flie 7: Name this file as link.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h2><i>Home & Kitchen Appliences</i><h2>
<ul>
<li><a href="kd.html" target=use_blank>Kitchen and Dinning</a>
<li><a href="f.html" target=use_blank>Furnishing</a>
<li><a href="hd.html" target=use_blank>Home Decor</a>
<li><a href="hi.html" target=use_blank>Home Improvement</a>
</ul>
</html>
-------------------------------------------------------------------------------
Flie 8: Name this file as main1.html
<html>
<head>
<title>slip1</title>
</head>
<frameset rows="20,80">
<frame src="heading.html"></frame>
<frameset cols="30,70">
<frame src="image.html"></frame>
<frame src="link.html"></frame>
</frameset>
</frameset>
</html>
-------------------------------------------------------------------------------
Create Cascading Style Sheet Document style.css file
ul {
font-size: 18;
list-style-type:square;
}
ol{ font-size: 20;
list-style-type:lower-roman;
}
h1{
color:red;
}
-------------------------------------------------------------------------------
Save below image as kit.jpg
Comments
Post a Comment