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.

Preview:- Click on Image 
                
click me



Code:- 
Note - Save This File as index.html 

<html>
<frameset rows="20%,*">
<frame src="heading.html">
<frameset cols="20%,*">
<frame src="image.html">
<frame src="link.html">
</frameset>
</frameset>
</html>

Note - Save This File as link.html 

<html>
<body>
<h1>Kitchen & Dining</h1>
<font size=6>
  <ul>
    <a href="kitchen.html"><li>Kichen & Dining</li></a>
    <a href="furnishings.html"><li>Furnishings</li></a>
    <a href="homedecor.html"><li>Home Decor</li></a>
    <a href="homeimprovement.html"><li>Home Improvement</li></a>
  </ul>
</body>
</html>

Note - Save This File as kitchen.html 

<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1 class="kitchen">Kitchen & Dining</h1>
  <font size=6>
  <ol type="i">
    <li>Cookware</li>
    <li>kitchenware</li>
    <li>Bakeware</li>
    <li>Serveware</li>
  </ol></font>
</body>
</html>

Note - Save This File as image.html 
<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
<head>
<body>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSSe4JIEWAY8bkmg4A2uXYiFkQkvtg-JhoL8w&usqp=CAU" height=60% width=70%>
</body>
</html>

Note - Save This File as homeimprovement.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1 class="kitchen">Home Improvement</h1>
  <font size=6>
  <ol type="i">
    <li>Ladders</li>
    <li>Padlocks & Hasps.</li>
    <li>Furniture Hardware.</li>
    <li>Door Hardware & Locks.</li>
  </ol></font>
</body>
</html> 
Note - Save This File as homedecor.html
<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1 class="kitchen">Home Decor</h1>
  <font size=6>
  <ol type="i">
    <li>Wall Decor</li>
    <li>Wall hanging</li>
    <li>Wall painting</li>
    <li>Wall mirrors</li>
  </ol></font>
</body>
</html>

Note - Save This File as heading.html

<html>
<head>
 <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body class="heading">
   <font size=5><h1>Home Shopping</h1></font>
</body>
</html>

Note - Save This File as furnishing.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1 class="kitchen">Furnishings</h1>
  <font size=6>
  <ol type="i">
    <li>Curtains</li>
    <li>Pillows & Covers.</li>
    <li>Rugs & Carpets.</li>
    <li>Bed Linen.</li>
  </ol></font>
</body>
</html>

Note - Save This File as main.css
body.heading{
background-color: maroon;
}
h1{
color: white;
text-align: center;
}
img{
border-style: solid;
}
h1.kitchen{
color: #FF5733;
}

0 Comments