Scribd
Upload
4 views

Wdw Lab Assignment(1-9)

The document outlines a series of assignments focused on designing a homepage for an online bookstore, including a login page, catalogue page, cart page, and a registration form. Each assignment specifies the HTML structure and functionality required, such as frames for navigation, JavaScript for interactivity, and XML for book data management. The final assignment includes a detailed registration form with various input fields for user information.

Uploaded by

kripadasi635
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Wdw Lab Assignment(1-9)

The document outlines a series of assignments focused on designing a homepage for an online bookstore, including a login page, catalogue page, cart page, and a registration form. Each assignment specifies the HTML structure and functionality required, such as frames for navigation, JavaScript for interactivity, and XML for book data management. The final assignment includes a detailed registration form with various input fields for user information.

Uploaded by

kripadasi635
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

ASSIGNMENT -1

OBJECTIVE: Design a homepage required for an online book store website .

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 (the description of these pages will be given below).

Left frame: At least four links for navigation, which will display the catalogue of respective
links . For e.g.: When you click the link “IT” the catalogue for IT Books should be displayed in
the Right frame.

Right frame: The pages to the links in the left frame must be loaded here.

Initially this page contains description of the web site.

home.html:

<html>

<frameset rows="15%,9%,76%" bodycolor="pink">

<frameset cols="20%,80%" borderwork="red">

<frame src="logo.html" scrolling="no">

<frame src="title.html" >

</frameset>

<frame src="menu.html" name="f2" scrolling="no">

<frameset cols="15%,85%" bordercolor="red">

<frame src=" branches.html" name="f31">

<frame src="homedes.html" name="f32">

</frameset> </frameset> </html>


Output: home page

logo.html <html>

<body>

<img src=" C:\Documents and Settings\satish\Desktop\monday2\monday\Sunset.jpg" >

</body>

</html> title.html

<html>

<body>
<center<i> ONLINE BOOK SHOP </i> </font></center>

</body>

</html>

branches.html

<html>

<table cellspacing=15>

<tr><td> <a href="csechecktest.html" target="f32">CSE </a></td></tr>

<tr><td><a href="ecechecktest.html" target="f32"> ECE </a> </td></tr>

<tr><td><a href="eeechecktest.html" target="f32">EEE </a></td></tr>

<tr><td><a href="civilchecktest.html" target="f32"> Civil </a> </td></tr>

</table>

</body>

</html>

Output: left frame


menu.html <html>

<body>

<table width="100%">

<tr>

<td> <a href="homedes.html" target="f32">Home </a></td>

<td> <a href="login.html" target="f32">Login </a></td>

<td> <a href="registration.html" target="f32">Registration</a></td>

<td> <a href="catalogue.html" target="f32">Catalogue </a></td>

<td> <a href="cart.html" target="f32">Cart </a></td>

</tr>

</table>

</body> </html>

homedes.html

<html>

<body>

<center> <u> ONLINE BOOK SHOP </u></center>

<p>This website contains various books. </body></html>

Output: top frame


ASSIGNMENT-2
OBJECTIVE: Create a login page.

login.html

<html>

<head> <title> Login Page </title>

</head>

<body>

<form name="login"> <h3> <u> Login Page </u>

</h3> username: <input type="text" name="uname"

><br> password: <input type="password" name="pwd"

><br>

<input type="submit" value="Submit" >

<input type="reset" value="reset">

</center> </form>

</body></html>
Output: login page(we will get this output when you click on login in home page)
ASSIGNMENT-3

OBJECTIVE: To design a CATOLOGUE PAGE. The catalogue page should contain the details of all the
books available in the website in a table.

catalogue.html

<HTML>

<HEAD>

<TITLE> lOADING xml dOCUMENT </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function fun()

window.alert("You have selected the book");

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var xmldoc; xmldoc = new

ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("book.xml");

arr=xmldoc.getElementsByTagName("ITEM");

for(i=0;i<arr.length;i++)

document.write("<div align='left'><img src='Sunset.jpg' width='50' height='50'>


</div>");

document.write("<div
align='center'><b>NAME:</b>"+xmldoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValu
e+"<BR></div>");
document.write("<div
align='center'><b>AUTHOR:</b>"+xmldoc.getElementsByTagName("AUTHOR")[i].childNodes[0].nod
eValue+"<BR></div>");

document.write("<div
align='center'><b>PRICE:</b>"+xmldoc.getElementsByTagName("PRICE")[i].childNodes[0].nodeValu
e+"<BR></div>");

document.write("<div
align='center'><b>PUBLISHER:</b>"+xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[
0].nodeValue+"<BR></div>");

document.write("<div
align='center'><b>ISBN:</b>"+xmldoc.getElementsByTagName("ISBN")[i].childNodes[0].nodeValue+"
<BR></div>");

document.write("<div align='right'><input type='button' value='Add To Cart'


onclick='fun()'</div>"); document.write("<BR>");

</SCRIPT>

</BODY></HTML>

book.xml

<?xml version="1.0"?>

<BOOK>

<ITEM>

<NAME> JAVA </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> C++ </NAME>


<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

<ITEM>

<NAME> DigitalElectronics </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> opticalCommunication </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

<ITEM>

<NAME> Electric Theory1 </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>
<ITEM>

<NAME> Electric Theory2 </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

<ITEM>

<NAME> CIVIL THEORY1 </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> CIVIL THEORY2 </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

</BOOK>
Output: Catalogue page

csechecktest.html

<HTML>

<HEAD>

<TITLE> lOADING xml dOCUMENT </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function fun()

window.alert("You have selected the book");

}
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var xmldoc; xmldoc = new

ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("csebook.xml");

arr=xmldoc.getElementsByTagName("ITEM");

for(i=0;i<arr.length;i++)

document.write("<div align='left'><img src='Sunset.jpg' width='50' height='50'>


</div>");

document.write("<div
align='center'><b>NAME:</b>"+xmldoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValu
e+"<BR></div>");

document.write("<div
align='center'><b>AUTHOR:</b>"+xmldoc.getElementsByTagName("AUTHOR")[i].childNodes[0].nod
eValue+"<BR></div>");

document.write("<div
align='center'><b>PRICE:</b>"+xmldoc.getElementsByTagName("PRICE")[i].childNodes[0].nodeValu
e+"<BR></div>");

document.write("<div
align='center'><b>PUBLISHER:</b>"+xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[
0].nodeValue+"<BR></div>");

document.write("<div
align='center'><b>ISBN:</b>"+xmldoc.getElementsByTagName("ISBN")[i].childNodes[0].nodeValue+"
<BR></div>"); document.write("<div align='right'><input type='button' value='Add To Cart'

onclick='fun()'</div>"); document.write("<BR>");

</SCRIPT></BODY></HTML>
casebook.xml

<?xml version="1.0"?>

<CSEBOOK>

<ITEM>

<NAME> JAVA </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> C++ </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER><ISBN> 12346 </ISBN></ITEM></CSEBOOK>


Output: right frame(we will get this output when we click on cse which was in left frame)
ASSIGNMENT-4

OBJECTIVE : To design a CART PAGE that contains the details about the books which are
added to the cart.

Program for creating a CART page contains the details about the books which are added to the
cart.The cart page contains the fields: Book, name, Price, Quantity and Amount cart.html

<html>

<body >

<table cellspacing="50" cellpadding="20">

<tr>

<td>Book name</td>

<td>price</td>

<td>quantity</td>

<td>amount</td>

</tr>

<tr>

<td>java2</td>

<td>$35.5</td>

<td>2</td>

<td>$70</td>

</tr>

<tr>

<td>XML bible</td>

<td>$40.5</td>

<td>1</td>

<td>$40.5</td>

</tr> <tr>
<td></td>

<td></td>

<td>Total amount </td>

<td>130.5 </td>

</tr>

</body>

</html>

Output:
Program for creating DTD for the XML file(dtd.xml

<?xml version="1.0" ?>

<?xml:stylesheet type="text/xsl" href="Style.xsl"?>

<!DOCTYPE BOOKS[

<!ELEMENT BOOKS (INFORMATION)>

<!ELEMENT INFORMATION (Book)>

<!ELEMENT Book (book_name,Author_name,ISBN_number,publisher,Edition,Price)>

<!ELEMENT book_name (#PCDATA)>

<!ELEMENT Author_name (#PCDATA)>

<!ELEMENT ISBN_number (#PCDATA)>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT Edition (#PCDATA)>

<!ELEMENT price (#PCDATA)>

]>

<BOOKS>

<INFORMATION>

<Book>

<book_name>XML BIBLE</book_name>

<Author_name>RAJA</Author_name>

<ISBN_number>11530-115</ISBN_number>

<publisher>Pearson</publisher>

<Edition>I-Edition</Edition>

<Price>750</Price>

</Book>

<Book>

<book_name>HTML</book_name>
<Author_name>DIETL</Author_name>

<ISBN_number>11528-115</ISBN_number>

<publisher>wiley</publisher>

<Edition>III-Edition</Edition>

<Price>470</Price>

</Book>

<Book>

<book_name>JAVASCRIPT</book_name>

<Author_name>RANI</Author_name>

<ISBN_number>11525-115</ISBN_number>

<publisher>Techical</publisher> <Edition>IV-Edition</Edition>

<Price>270</Price>

</Book>

<Book>

<book_name>WEB TECHNOLOGIES</book_name>

<Author_name>PUNTAMBEKAR</Author_name>

<ISBN_number>11530-115</ISBN_number>

<publisher>Technical</publisher>

<Edition>I-Edition</Edition>

<Price>340</Price>

</Book>

</INFORMATION>

</BOOKS>
Style.xsl

<?xml version="1.0" ?>

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

<xsl:template match="/">

<html>

<body>

<h2 align="center">My BOOK Collection</h2>

<table border="1" align="center">

<tr bgcolor="GRAY">

<th><font color="white"> BOOK_NAME</font></th>

<th><font color="white"> Author</font></th>

<th><font color="white"> ISBN</font></th>

<th><font color="white"> Publisher</font></th>

<th><font color="white"> Edition</font></th>

<th><font color="white"> Price</font></th>

</tr>

<xsl:for-each select="BOOKS/INFORMATION/Book">

<tr>

<td><xsl:value-of select="book_name"/></td>

<td bgcolor="black"><b><font color="white">

<xsl:value-of select="Author_name"/></font></b></td>

<td><xsl:value-of select="ISBN_number"/></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:
ASSIGNMENT -5
OBJECTIVE : Create a“ Registration form“ having various fields.

1)Name (Text field)


2)Password (password field)
3) E-mailid(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(checkboxes–English, Telugu, Hindi, Tamil)
8) Address(text area)

HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<link rel="stylesheet" href="registration page.css">

<body>

<h1><B><U>REGISTRATION FORM</U></B></h1>

<form action="form.php" class="register">

<label for="na">Enter your name:</label>

<input type="text" placeholder="NAME" id="na" name="na"><br>

<label for="username">Username:</label>

<input type="text" id="username" name="username"><br>

<label for="pwd">Password:</label>

<input type="password" id="pwd" name="pwd"><br>

<label for="pno">Enter your phone number:</label>


<input type="text" id="pno" name="pno"><br>

Select Your Sex: <br>

<input type="radio" id="ma" name="SEX" value="MALE">

<label for="ma">Male</label>

<input type="radio" id="fe" name="SEX" value="FEMALE">

<label for="fe">Female</label>

<input type="radio" id="ot" name="SEX" value="OTHER">

<label for="ot">Others</label><br>

<label for="birthday">Date Of Birth:</label>

<input type="date" id="birthday" name="birthday"><br>

Select Your Preffered Language: <br>

<input type="checkbox" id="eng" name="eng" value="ENGLISH">

<label for="eng"> English</label>

<input type="checkbox" id="HIN" name="HIN" value="HINDI">

<label for="HIN"> Hindi</label>

<input type="checkbox" id="TEL" name="TEL" value="TELEGU">

<label for="TEL">Telegu</label><br>

<label for="ad">Enter your Address:</label>

<input type="text" placeholder="address" id="ad" name="ad"><br>

</form>

</body>

</html>

CSS code:

H1{
text-align: center;
font-size: 50PX;
}
.register{
text-align: center;
height: 300px;
font-size: 30px;
text-decoration: underline;
line-height: 2;
word-spacing: 5px;
}
input[type=text] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
}
input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
}

input[type=date] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
}
Output-

REGISTRATION FORM:
ASSIGNMENT -6
OBJECTIVE: Write JavaScript to validate the “name” and “password” fields of the registration page.

Program in JavaScript to validate the following fields of the above registration page.

1. Name (Name should contains alphabets and the length should not be less than 6
characters).

2. Password (Password should not be less than 6 characters length).

Program for validating the username (Name should contains alphabets and the length
should not be less than 6 characters).
1)NAME VALIDATION

<html>

<head>

<title>validating a textbox</title>

<script language="javascript">

function button_click()

{ var fname=f.fname.value; var spchar =

"!@#$%^&*()+=-[]\\\';,./{}|\":<>?~"; var

number="0123456789"; if(fname.length<6)

alert("first name atleast 6 characters");

} if(fname!="") { for (var

i=0;i<fname.length;i++)

{ if(spchar.indexOf(fname.charAt(i)) != -

1)

{ alert ("Userid should not have special

characters");
f.fname.value=" "; return

false;

} } if(fname!="") { for (var

i=0;i<fname.length;i++)

{ if(number.indexOf(fname.charAt(i)) != -

1)

{ alert ("Userid should not have

numbers");

f.fname.value=""; return

false;

}}

if(fname.length>=6)

alert("valid

username");

</script>

<body>

<center>

<form name="f">

<table>

<h2 align="center">USER NAME VALIDATION</h2>

<tr>

<td align="right">USERNAME:</td>

<td><input type="text" name="fname" maxlength=20 size=30></td>


</tr>

<br>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="button_click()"></td></tr>

</form>

</table>

</center>

</body>

</html>
OUTPUT:
Program for password field validation(should not be less than 6 characters)

(pwdvalid.html)

<html>

<head>

<title>PASSWORD VALIDATION</title>

<script language="javascript"> function

pass()

{ var pw=f.pw.value;

var cpw=f.cpw.value;

if(pw.length<6)

alert("PASSWORD MUST BE 6 CHARACTERS");

} if(pw!=cpw)

alert("PASSWORD DON'T MATCH");

} else

if(pw.length>=6)

alert("PASSWORD VALIDATION SUCCESS");

</script>

</head>

<body>

<form name="f">

<table align="center">

<h2 align="center">PASSWORD VALIDATION</h2>

<br>
<tr>

<td align="right">PassWord:</td>

<td align="left"><input type="PassWord" maxlength="10" size="30"name="pw"></td>

</tr>

<tr>

<td align="right">Confirm PassWord:</td>

<td align="left"><input type="PassWord" maxlength="10" size="30"name="cpw"></td>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="pass()"/></td>

</tr>

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

Output:
ASSIGNMENT -7
OBJECTIVE: Write JavaScript to validate the “Email ID ” and “Phone Number” fields of the
registration page.

Program for E-mail id validation(should not contain any invalid and must follow the standard
pattern-)(emailvalid.html)
<html>

<head>

<title>EMAIL ID VALIDATION</title>

<script language="javascript"> function

check()

{ if(f.txtname.value.indexOf('@')==-1)

{ alert("invalid");

else
if((f.txtname.value.indexOf('@')==0)||(f.txtname.value.indexOf('.')==0)||(f.txtname.value.indexOf('@'))>

(f.txtname.value.indexOf('.')))

{ alert("invalid email

id");

f.txtname.value=""; }

else alert("valid email

id");

</script>

</head>

<body>

<form name="f">

<table align="center">
<h2 align="center">EMAIL VALIDATION</h2>

<br>

<tr>

<td align="right">Email-ID:</td>

<td align="left"><input type="text" name="txtname" size=40>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="check()"/></td>

</tr>

</table>

</form>

</body>

</html>
Output:
Program for Phone number validation(Phone number should contain 10 digits
only)(phnvalid.html)
<html>

<head>

<title>PHONE NUMBER VALIDATION</title>

<script language="javascript"> function

phno()

{ var

ph=f.ph.value;

if(ph.length==10)

{ if(isNaN(ph)) alert("It is not a valid

Phone number"); else alert("It is a

valid Phone number");

} else alert("Please enter a valid phone

number");

</script>

</head>

<body>

<form name="f">

<table align="center">

<br><br><br><br>

<h2 align="center">PHONE NUMBER VALIDATION</h2>

<br>

<tr>

<td align="right">PHONE NO:</td>

<td align="left"><input type="text" maxlength="15" size="30"name="ph"></td>


</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="phno()"/></td>

</tr>

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

Output:
ASSIGNMENT -8
OBJECTIVE: Design a web page using CSS(Cascading Style Sheets) which includes Use of different
font, styles and background image.

1. Use different font styles:

In the style definition you define how each selector should work (font, color etc.).

Then, in the body of your pages, you refer to these selectors to activate the styles.

Program for creating inline style sheets

1) Inline.html

<head>

<title>inline style sheet</title>

</head> <body> normal bold:<b>web

technologies</b><br> after applying inline

style

<b style="color:red;font-size:22px;font-family:arial;text-decoration:underline">Web technologies</b>

</body>

</html>

Output:
2. Set a background image for both the page and single elements on the page.

Program for creating the background image(image.html)

<html>

<head>

<style type="text/css"> body

background-image: url(“C:\Documents and Settings\All Users\Documents\My Pictures\Sample


Pictures\Sunset.jpg"); background-repeat:no-repeat

</style>

</head>

<body>

<center>

<font color=fuchsia>

<h1>WebTechnologies</h1>

</center>

</body>

</html>
Output:
ASSIGNMENT -9
OBJECTIVE: Using CSS Control the repetition of the image with the background-repeat property and
define styles for links.

Control the repetition of the image with the background-repeat property.

As background-repeat: repeat

Tiles the image until the entire page is filled, just like an ordinary background image in

plain HTML.

Program for image repetition


<html>

<head>

<style type="text/css"> body{

background-image:url("C:\Documents and Settings\All Users\Documents\My Pictures\Sample


Pictures\Winter.jpg"); background-repeat:repeat

</style>

</head>

<body>

<center>

<font color=fuchsia>

<h1>satish</h1>

</font>

</center>

</body>

</html>
Output:

Define styles for links as A:link A:visited

A:active

A:hover

Defining styles using CSS(external.html)

<html>

<head>

<title>external style sheet</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body bgcolor="black">
<font color=white >normal bold : <b>Web technologies</b><br>after applied embedded style :

<b class="headline">Web Technologies</b><br>

<b>

<a href="login.html" class="xlink">CROSS LINK</a>

<br>

<a href="login.html" class="hlink">HELP LINK</a><br><br>

<a href="login.html">another LINK</a>

</b>

</font>

</body>

</html>

style.css

b.headline {color:green; font-size:22px; font-family:arial; text-decoration:underline}

.xlink {cursor:crosshair;color:cyan}

.hlink{cursor:help;color:purple}

A:link {text-decoration:none;color:green} /* unvisited link */

A:visited {text-decoration: none;color:yellow} /* visited link */

A:active {text-decoration: none;color:blue} /* selected link */

A:hover {text-decoration: underline; color: red} /* mouse over link */


Output:

You might also like