Scribd
Upload
50 views

HTML Lab Programmes

The document provides code for designing various static web pages for an online book store website. This includes code for the home page with top, left and right frames; a login page; catalogue page listing books; cart page; and registration page. It also provides JavaScript code to validate the registration form fields. The tasks include designing these basic pages with HTML and adding basic styling with CSS.

Uploaded by

David Johnson
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views

HTML Lab Programmes

The document provides code for designing various static web pages for an online book store website. This includes code for the home page with top, left and right frames; a login page; catalogue page listing books; cart page; and registration page. It also provides JavaScript code to validate the registration form fields. The tasks include designing these basic pages with HTML and adding basic styling with CSS.

Uploaded by

David Johnson
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Week:-1

Design the following static web pages required for an online book store web site.
1) Home page
The static home page must contain three frames
TOP FRAME: Logo and the college name and links to home page, login page, registration
page, catalogue page and cart page
LEFT FRAME: At least four links for navigation. Which will display the catalogue of
respective links.
RIGHT FRAME: The pages to links in the left frame must be loaded here initially this
page contains description of the web site:

Home page:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#f4f4f4">
<center>
<table border="2" width="100%" cellpadding="2" cellspacing="3" align="center">
<tr align="center">
<td><img src="Sunset.jpg" height="25" width="25"></td>
<td colspan="4">BookKart</td>
</tr>
<tr align="center">
<td><a href="home.html" target="abc">Home</a></td>
<td><a href="login.html" target="abc">Login</a></td>
<td><a href="registration.html" target="abc">Registration</a></td>
<td><a href="catalogue.html" target="abc">Catalogue</a></td>
<td><a href="cart.html" target="abc">cart</a></td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT:

Top Frame:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#f4f4f4">
<center>
<table border="2" width="100%" cellpadding="2" cellspacing="3" align="center">
<tr align="center">
<td><img src="Sunset.jpg" height="25" width="25"></td>
<td colspan="4">BookKart</td>
</tr>
<tr align="center">
<td><a href="home.html" target="abc">Home</a></td>
<td><a href="login.html" target="abc">Login</a></td>
<td><a href="registration.html" target="abc">Registration</a></td>
<td><a href="catalogue.html" target="abc">Catalogue</a></td>
<td><a href="cart.html" target="abc">cart</a></td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT:

Left Frame:
<html>
<head>
<title>Left</title>
</head>
<body bgcolor="#f4f4f4">
<a href="cse.html">CSE</a><br>
<a href="ece.html">ECE</a><br>
<a href="eee.html">EEE</a><br>
<a href="civil.html">CIVIL</a><br>
</body>
</html>

OUTPUT:

Right Frame:
<html>
<head>
<title>Left</title>
</head>
<body bgcolor="#f4f4f4">
<div align="right">
<a href="cse.html">CSE</a><br>
<a href="ece.html">ECE</a><br>
<a href="eee.html">EEE</a><br>
<a href="civil.html">CIVIL</a><br>

</body>
</html>

Output:

Login Page:
<html>
<head>
</head>
<body>
<form name="f1">
<center>
<table border="0">
<tr align="center">
<td>Login:</td>
<td><input type="text" name="t1"></td>
<tr>
<tr align="center">
<td>Password:</td>
<td><input type="password" name="p1"></td>
</tr>
<tr align="center">
<td><input type="submit" name="s1" value="Submit"></td>

<td><input type="reset" name="r1" value="Reset"></td>


</tr>
</table>
</center>
</form>
</body>
</html>

Output:

3. CATALOGUE PAGE:
<html>

<head>
</head>
<body>
<table border="1" width="100%">
<tr>
<td><img src="1.bmp"></td>
<td>
<pre>
Book : XML Bible
Author : Winston
Publication : Wiely
</pre>
</td>
<td>$40.5</td>
<td><img src="5.bmp"></td>
</tr>
<tr>
<td><img src="1.bmp"></td>
<td>
<pre>
Book : AI
Author : S.Russel
Publication : Princeton
hall</pre>
</td>
<td>$63</td>
<td><img src="5.bmp"></td>
</tr>
<tr>
<td><img src="3.bmp"></td>
<td>
<pre>
Book : Java 2
Author : Watson
Publication : BPB
publications
</pre>
</td><td>$35.5</td>
<td><img src="5.bmp"></td></tr>

<tr>
<td><img src="4.bmp"></td>
<td>
<pre>

Book : HTML in 24 hours


Author : Sam Peter
Publication : Sam
publication</pre>
</td>
<td>$50</td>
<td><img src="5.bmp"></td></tr>
</table>
</body>
</html>

OUTPUT:

WEEK:-2:
4. CART PAGE: The cart page contains the details about the books which are added
to the cart.
<html>
<head></head>
<body>
<table width="100%">
<tr align="center">
<th>Book name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th></tr>
<tr align="center">
<td>Java2</td>
<td>&35.5</td>
<td>2</td>
<td>$70</td></tr>
<tr align="center">
<td>XML Bible</td>
<td>&40.5</td>
<td>1</td>
<td>$40.5</td></tr>
<tr align="center">
<td colspan="3">Total amount</td>
<td>$130.5</td></tr>
</table></body>
</html>

OUTPUT:

5. REGISTRATION PAGE:
<html>
<head>
</head>
<body bgcolor="#f4f4f4">
<frame name="f2">
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="tx1"></td></tr>
<tr>
<td>Password:</td>
<td><input type="password" name="ps1"></td></tr>
<tr>
<td>Email:</td>
<td><input type="text" name="tx2"></td></tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="tx3"></td></tr>
<tr>
<td>Sex:</td>
<td>
<input type="radio" name="r1">Male
<input type="radio" name="r1">Female
</td></tr>
<tr><td>Date of Birth:</td>
<td>
<select name="s1">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>
<option>9</option><option>10</option>
<option>11</option><option>12</option>
<option>13</option><option>14</option>
<option>15</option><option>16</option>
<option>17</option><option>18</option>
<option>19</option><option>20</option>
<option>21</option><option>22</option>

<option>23</option><option>24</option>

<option>25</option><option>26</option>
<option>27</option><option>28</option>
<option>29</option><option>30</option>
<option>31</option>
</select>
<select name="s2">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>
<option>9</option><option>10</option>
<option>11</option><option>12</option>
</select>
<select name="s1">
<option>1982</option><option>1983</option>
<option>1984</option><option>1985</option>
<option>1986</option><option>1987</option>
<option>1988</option><option>1989</option>
<option>1990</option><option>1991</option>
<option>1992</option><option>1993</option>
<option>1994</option><option>1995</option>
<option>1996</option><option>1997</option>
<option>1998</option><option>1999</option>
<option>2001</option><option>2002</option>
<option>2003</option><option>2004</option>
<option>2005</option><option>2006</option>
<option>2007</option><option>2008</option>
<option>2009</option><option>2010</option>
<option>2011</option><option>2012</option>
</select> </td>
<tr>
<td>Languages Known:</td>
<td><input type="checkbox" name="c1">English
<input type="checkbox" name="c2">Telugu
<input type="checkbox" name="c3">Hindi
<input type="checkbox" name="c4">Tamil
</td></tr>
<tr>
<td>Address:</td>
<td><textarea cols="10" rows="3"></textarea></td></tr>
<tr>
<td><input type="submit" name="su1" value="Submit"></td>

<td><input type="reset" name="re1" value="Reset"></td></tr>


</table></form>
</body>
</html>

OUTPUT:

WEEK:-3:
VALIDATION
Write a JavaScript to validate fields fo the above registration page.
<html>
<head>
<script type="text/javascript">
function validate()
{
var uname=document.f2.tx1.value;
var pwd=document.f2.ps1.value;
var email=document.f2.tx2.value;
var mob=document.f2.tx3.value;
var r1=new RegExp("^[a-zA-Z0-9]{6,}$");
var r2=new RegExp("^[a-zA-Z0-9]+@[a-zA-Z]+.[a-zA-Z]{2,3}$");
var r3=new RegExp("^[0-9]{10}$");
if(r1.test(uname))
{
if(pwd.length>=6)
{
if(r2.test(email))
{
if(r3.test(mob))
{
alert("Registration Successful");
return(true);
}
else
{
alert("Invalid Mobile number");
return(false);

}
}
else
{
alert("Invalid email");
return(false);
}
}

else
{
alert("Invalid Password");
return(true);
}
}
else
{
alert("Invalid username");
return(false);
}
}
</script>
</head>
<body bgcolor="#f4f4f4">
<form name="f2">
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="tx1"></td></tr>
<tr>
<td>Password:</td>
<td><input type="password" name="ps1"></td></tr>
<tr>
<td>Email:</td>
<td><input type="text" name="tx2"></td></tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="tx3"></td></tr>
<tr>
<td>Sex:</td>
<td>

<input type="radio" name="r1">Male


<input type="radio" name="r1">Female
</td></tr>
<tr>
<td>Date of Birth:</td>
<td>
<select name="s1">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>

<option>9</option><option>10</option>
<option>11</option><option>12</option>
<option>13</option><option>14</option>
<option>15</option><option>16</option>
<option>17</option><option>18</option>
<option>19</option><option>20</option>
<option>21</option><option>22</option>
<option>23</option><option>24</option>
<option>25</option><option>26</option>
<option>27</option><option>28</option>
<option>29</option><option>30</option>
<option>31</option>
</select>
<select name="s2">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>
<option>9</option><option>10</option>
<option>11</option><option>12</option>
</select>
<select name="s3">
<option>1982</option><option>1983</option>
<option>1984</option><option>1985</option>
<option>1986</option><option>1987</option>
<option>1988</option><option>1989</option>
<option>1990</option><option>1991</option>
<option>1992</option><option>1993</option>
<option>1994</option><option>1995</option>
<option>1996</option><option>1997</option>
<option>1998</option><option>1999</option>
<option>2001</option><option>2002</option>
<option>2003</option><option>2004</option>
<option>2005</option><option>2006</option>
<option>2007</option><option>2008</option>

<option>2009</option><option>2010</option>
<option>2011</option><option>2012</option>
</select>
</td>
<tr>
<td>Languages Known:</td>
<td><input type="checkbox" name="c1">English
<input type="checkbox" name="c2">Telugu
<input type="checkbox" name="c3">Hindi
<input type="checkbox" name="c4">Tamil
</td></tr>

<tr>
<td>Address:</td>
<td><textarea cols="10" rows="3"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="su1" value="Submit" onclick="validate()"></td>
<td><input type="reset" name="re1" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT:

WEEK:-4
Design a web page using CSS(Cascading Style Sheets).
<html>
<head>
<style>
h1{font-family:Buxton Sketch;font-size:30}
a:link {color:red}
a:visited {color:green}
a:hover {color:black}
a:active {color:yellow}
.cls {background-color:orange;font-family:Segoe Print;font-size:25}
.cross{cursor:crosshair}
.help{cursor:help}
body{background-image:url(v.jpg);background-repeat:repeat}
</style>

</head>
<body><b>
<h1 align="center">This document is all about CSS</h1>
<a href="hai.html">This shows styles with css</a>
<br><br>
<a href="hai.html" class="cross">This shows CROSS LINK cursor</a>
<br><br>
<a href="hai.html" class="help">This shows HELP LINK cursor</a></b>
<div style="position:relative;font-family:Courier;font-size:30;z-index=20">LAYER1</div>
<div style="position:relative;font-family:Gabriola;font-size:32;zindex=1;top:50;left:5">LAYER2</div>
</body>
</html>

OUTPUT:

WEEK:-5:
Write XML file which will display the book information.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="sample.xsl"?>
<!DOCTYPE bookstore SYSTEM "sample.dtd">
<bookstore>
<book>
<name>Web Technologies Black Book</name>
<Author>Kogent Learning Solutions</Author>
<ISBN>10A91A0549</ISBN>
<publisher>veeru</publisher>
<edition>3</edition>
<price>500</price>
</book>
<book>
<name>C programming</name>
<Author>Forouzan</Author>
<ISBN>10A91A0543</ISBN>
<publisher>jaya</publisher>
<edition>2</edition>
<price>500</price></book>
<book>
<name>Advanced Computer Architecture</name>
<Author>Naresh Jotwani</Author>
<ISBN>10A91A0550</ISBN>
<publisher>kalayani</publisher>
<edition>2</edition>
<price>500</price>
</book>
<book>
<name>Advanced Computer Networks</name>
<Author>Forouzan</Author>
<ISBN>10A91A0556</ISBN>
<publisher>satya</publisher>
<edition>4</edition>
<price>500</price>
</book>
</bookstore>

Sample.xsl:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>
<xsl:template match="bookstore">
<html>
<body>
<table align="center" border="1" width="80%">
<tr bgcolor="grey">
<th>Title Of The Book</th>
<th>Author Name</th>
<th>ISBN number</th>
<th>Publisher Name</th>
<th>Edition</th>
<th>Price</th>
</tr>
<xsl:for-each select="book">
<tr>
<td><xsl:value-of select="name"/></td>
<td style="text-transform:uppercase;font-weight:bold;background-color:blue"><xsl:value-of
select="Author"/></td>
<td><xsl:value-of select="ISBN"/></td>
<td><xsl:value-of select="publisher"/></td>
<td><xsl:value-of select="edition"/></td>
<td><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

OUTPUT:

You might also like