Web Technologies
Slip1
Q.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. [Marks 30]
Solution
h1.html
<html><head>
<link rel="stylesheet" type="text/css" href="s.css"/>
</head>
<body>
<h1>Home Shopping</h1>
</body>
</html>
h2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="s.css"/>
</head>
<body>
<h1>Home & Kitchen appliances</h1>
<ul type="squre">
<a href="G:\BCA PAPER\TYBCA\Web Technology Practical\HTML\Slip1\h3.html" target="_top">
<li>Kitchen & Dining</li>
<li>Furnushings</li>
<li>Home decor</li>
<li>Home Improvement</li>
</ul>
</body>
</html>
h3.html
<html>
<head>
<link rel="stylesheet" type=text/css href="s.css"/>
</head>
<body>
<h1>Kitchen & Dining</h1>
<ol type="i">
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</body>
</html>
img.html
<html>
<body>
<img src="G:\vivek\ok.jpg" height=300 width=300 align="middle" border=3>
</body>
</html>
s.html
h1{text-align:center; color:red;}
<html>
<head>
<link rel="stylesheet" type=text/css href="s.css"/>
</head>
<body>
<h1>Kitchen & Dining</h1>
<ol type="i">
<li>Cookware</li>
<li>Kitchenware</li>
<li>Bakeware</li>
<li>Serveware</li>
</ol>
</body>
</html>
img.html
<html>
<body>
<img src="G:\vivek\ok.jpg" height=300 width=300 align="middle" border=3>
</body>
</html>
s.html
h1{text-align:center; color:red;}
frame.html
<html>
<frameset rows="20%,80%">
<frame src="G:\BCA PAPER\TYBCA\Web Technology Practical\HTML\Slip1\h1.html">
<frameset cols="50%,50%">
<frame src="G:\BCA PAPER\TYBCA\Web Technology Practical\HTML\Slip1\img.html">
<frame src="G:\BCA PAPER\TYBCA\Web Technology Practical\HTML\Slip1\h2.html">
</frameset>
</frameset>
</html>
Tags:
Web Technologies