Creating a Web Site for Online Shopping
(Experiment 3)
Aim:
To Re-design the online shopping website created in Experiment 2 using Cascading Style Sheet (CSS)
 |
Procedure:
- Define the internal styles using style tag <style> in the header part of the web page for various HTML elements
- Some of the styles can be defined inline using the style attribute of the particular HTML element
Implementation:
home.html
<html>
<head>
<title>Online Shopping Cart</title>
<style>
body
{
background-color: grey;
}
</style>
</head>
<frameset rows="25%,*" border="1">
<frame src="top_frame.html" noresize=noresize scrolling="no" color="grey">
<frame src="welcome.html" name="sub_frame">
</frameset>
</frameset>
</html>
top_frame.html
<html>
<head>
<title>TOP FRAME</title>
</head>
<body bgcolor="yellow">
<h1 align="center"><font color="black">ONLINE BOOK STORE</font></h1>
<table cellspacing="1" cellpadding="1" align="center" width="70%" border="1">
<tr>
<th align="center"><a href ="welcome.html" target="sub_frame"><font color="black">Home</font></a></td>
<th align="center"><a href ="login.html" target ="sub_frame"><font color="black">Login</font></a></td>
<th align="center"><a href ="reg_form.html" target ="sub_frame"><font color="black">Regitration</font></a></td>
<th align="center"><a href ="catalogue.html" target ="sub_frame"><font color="black">Catalogue</font></a></td>
<th align="center"><a href ="cart.html" target ="sub_frame"><font color="black">Cart</font></td>
</tr>
</table>
</body>
</html>
welcome.html
<html>
<head><title>Welcome Page</title>
<style>
body
{
background-color: yellow;
}
</style>
<body background="Online_Store.jpeg">
<h2 style="color:brown;text-align:center;">WELCOME TO ONLINE BOOK STORE</font></h2>
</body>
</html>
login.html
<html>
<head>
<title>LOGIN</title>
<style>
body {
background-color: yellow;
}
h3 {
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<h3>User Login</h3>
<table align="center" heigth="20%">
<tr>
<td align="right">User Name:</td>
<td align="left"> <input type="text" maxlength="30" size="20"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left"><input type="password" maxlength="30" size="20"></td>
</tr>
<tr>
<td></td>
<td><font color="black"><a href="reg_form.html">New User Clik
here</font></a></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="SUBMIT" value="SUBMIT"></td>
<td align="left"><input type="RESET" value="RESET"> </td>
</tr>
</table>
</body>
</html>
reg_form.html
<html>
<head>
<title>Registration Page</title>
</head>
<body bgcolor="yellow">
<h2 align="center">ONLINE REGISTRATION</h2>
<table align="center" cellspacing="12">
<tr>
<td align="right">First name</td>
<td align="left"><input type="text" maxlength="40" size="35" name="fname">
</tr>
<tr>
<td align="right">Last name:</td>
<td align="left"><input type="text" maxlength="40" size="35" name="lname">
</tr>
<tr>
<td align="right">PassWord:</td>
<td align="left"><input type="PassWord" maxlength="40" size="35" name="pw">
</tr>
<tr>
<td align="right">Confirm PassWord</td>
<td align="left"><input type="PassWord" maxlength="40" size="35" name="cp">
</tr>
<tr>
<td align="right">Gender:</td>
<form>
<td><input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female</td>
</form>
</tr>
<tr>
<td align="right">DATE OF BIRTH:</td>
<td align=”right”><input type=”date”></td>
<tr>
<td align="right">Email-ID:</td>
<td align="left"><input type="text" maxlength="40" size="35" name="ename">
</tr>
<tr>
<td align="right">Address:</font></td>
<td align="left"><textarea rows="6" cols="20" name="add"> </textarea> </td>
<tr>
<td align="right">Hobbies:</td>
<td align="left"><input type="checkbox" name="hb" value="pc">Playing Cricket</td>
<td align="left"><input type="checkbox" name="hb" value="pc1">Sleeping</td>
</tr>
<tr>
<td></td>
<td align="left"><input type="checkbox" name="hb" value="ea">Eating</td>
<td align="left"><input type="checkbox" name="hb" value="sh">Shopping</td>
</tr>
<tr> <td></td>
<td align="left"><input type="checkbox" name="hb" value="br">Bike Riding</td>
<td align="left"><input type="checkbox" name="hb" value="Mo">Movies</td>
</tr>
<tr><td></td>
<td align="left"><input type="checkbox" name="hb" value="mu">Music</td>
<td align="left"><input type="checkbox" name="hb" value="WT">Learning WT</td>
</tr>
<tr>
<td align="right">About u:</td>
<td align="left"><textarea rows="8" cols="30" name="abu"></textarea> </td>
</tr>
<tr>
<td></td>
<td align="left"><input type="checkbox" name="xx" value="yy">I Agree with terms and Conditions</td>
</tr>
<tr> <td></td>
<td align="left"><input type="SUBMIT" value="SUBMIT"></td>
<td align="right"><input type="RESET" value="RESET"></td>
</tr>
</table>
</body>
</html>
