Vous êtes sur la page 1sur 40

SWARNANDHRA INSTITUTE OF ENGINEERING AND TECHNOLOGY

SEETHARAMAPURAM, NARSAPURAM-534280
B TECH III YEAR II SEM
SUBJECT: WT LAB MANUAL BRANCH: CSE

EXPERIMENT -1
AIM : Design the following static web pages required for an online book store web site.
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 pageand 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 “MCA” the catalogue for MCA 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
descriptionof the web site.

TopFrame.html

<!DOCTYPE html>
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="cyan">
<table border="1" width="100%" color="cyan">
<tr>
<th width="14%">
<img src="swarnandhra.jpg" width="100" height="50"/>
</th>
<th> SIET ONLINE BOOK STORE</th>
</tr>
</table>
<table border="1" width="100%" color="blue">
<tr>
<th><a href="rightframe.html" target="rframe">HOME</a></th>
<th><a href="login.html" target="rframe"> LOGIN</a> </th>
<th><a href="registration.html" target="rframe">REGISTRATION</a></th>
<th><a href="catalogue.html" target="rframe">CATALOGUE</a></th>
<th><a href="cart.html" target="rframe">CART</a></th>
</tr>

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

OUTPUT:
LeftFrame.html

<!DOCTYPE html>
<html>
<head>
<title>leftframe</title>
</head>
<body bgcolor="lightgreen"align="center">
<center>
<br><br><br>
<h4><a href="mca.html" target="rframe">MCA</a>
</h4>
<h4><a href="mba.html" target="rframe">MBA</a>
</h4>
<h4><a href="bba.html" target="rframe">BBA</a>
</h4>
</center>
</body>
</html>

Output:
RightFrame.html

<!DOCTYPE html>
<html>
<head>
<title>Right frame</title>
</head>
<body bgcolor="pink"align="center">
<center>
<br><br><br><br> WELCOME TO BOOK STORE
</center>
</body>
</html>

OUTPUT:

Home.html

<!DOCTYPE html>
<html>
<head>
<title>HOME PAGE</title>
</head>
<frameset rows="18%,*">
<frame src="Top Frame.html" scrolling="no"/>
<frameset cols="15%,*">
<frame src="leftframe.html" noresize="noresize"/>
<frame src="Right frame.html" name="rframe"/>
</frameset>
</frameset>
</html>

OUTPUT:
1(B)
AIM: LOGIN PAGE: Login page must contain Login field, Password field, Submit and reset buttons.

login.html

<!DOCTYPE html>
<html>
<head>
<title> USERNAME PASSWORD </title>
</head>
<body bgcolor="pink" align="center">
<center>
<h1>LOGIN PAGE </h1>
<form action=" ">
<p> USERNAME:</p>
<input type="text" name="textusername" size="20" value=" " maxlength="20"/><br>
<p> PASSWORD:</p>
<input type="PASSWORD" name="pwdpassword" size="20" value=" " maxsize="20"/><br>
<input type="submit" value="LOGIN"/>
<input type="reset" value="RESET"/>
</form>
</center>
</body>
</html>
Output:
1(C) AIM: CATALOGUE PAGE:
The catalogue page should contain the details of all the books available in the web site in a table.
The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

catalogue.html
<html>
<head>
<title> Catalogue Page</title>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><img src="xmlb.gif" height="100" width="100"/></td>
<td>Book: XML Bible
<br>Author: Winston
<br>Publication: Wiely</td>
<td>$40.5</td>
</tr> <td><img src="adc.gif" height="100" width="100"/></td>
<tr>
<td><img src="ai.gif" height="100" width="100"/></td>
<td>Book: AI
<br>Author: S.Russel
<br>Publication: Princeton hall</td>
<td>$63</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
<tr>
<td><img src="java2.gif" height="100" width="100"/></td>
<td>Book: Java 2
<br>Author: Watston
<br>Publication: BPB publications</td>
<td>$35.5</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
<tr>
<td><img src="html.gif" height="100" width="100"/></td>
<td>Book: HTML in 24 hours
<br>Author: Sam Peter
<br>Publication: Sam publications</td>
<td>$100</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
</table>
</body>
</html>
OUTPUT:
Mca.html

<!DOCTYPE html>
<html>
<head>
<title>MCA catalogue </title>
</head>
<body bgcolor="pink">
<table width="100%" height ="100%" border="1">
<tr>
<th height="10%" width="10%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="10%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="10%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="10%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td>
<img src="Bible.jpeg" height="50%" width="50%"/></td>
<td>
BOOK:XML BIBLE <br>
AUTHOR:WINSTON <br>
PUBLICATION:WIELY</td>
<td>$40.5</td>
<td><img src="cart1.jpeg" height="50%" width="50%"></td>
</tr>
<tr>
<td><img src="html24.jpeg" height="50%" width="50%"></td>
<td>
BOOK:HTML IN 24 HOURS <br>
AUTHOR:SAM PETER<br>
PUBLICATION:SAM PUBLICATION<br>
</td>
<td>$100</td>
<td>
<img src="cart1.jpeg" height="50%" width="50%"></td>
</tr>
</table>
</body>
</html>
Output:
Mba.html

<!DOCTYPE html>
<html>
<head>
<title>MBA catalogue </title>
</head>
<body bgcolor="pink">
<table width="100%" height ="100%" border="1">
<tr>
<th height="10%" width="10%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="10%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="10%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="10%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td>
<img src="operation.jpeg" height="50%" width="50%"/></td>
<td>
BOOK:OPERATION RESEARCH <br>
AUTHOR:ER PREM KUMAR <br>
PUBLICATION:S.CHAND</td>
<td>$40.5</td>
<td><img src="cart1.jpeg" height="50%" width="50%"></td>
</tr>
<tr>
<td><img src="personalmba.jpeg" height="50%" width="50%"></td>
<td>
BOOK:THE PERSONAL MBA <br>
AUTHOR:JOSH KAUF MAN<br>
PUBLICATION:S.CHANDbr>
</td>
<td>$100</td>
<td>
<img src="cart1.jpeg" height="50%" width="50%"></td>
</tr>
</table>
</body>
</html>

Output:
Bba.html

<html>
<head>
<title>BBA CATALOGUE </title>
</head>
<body bgcolor="pink">
<table width="100%" height ="100%" border="1">
<tr>
<th height="10%" width="10%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="10%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="10%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="10%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td>
<img src="business.jpeg" height="50%" width="50%"/></td>
<td>
BOOK:BUSINESS STATISTICS <br>
AUTHOR:SC SHARMA VEENA JAIN<br>
PUBLICATION:ARYA</td>
<td>$40.5</td>
<td><img src="cart1.jpeg" height="50%" width="50%"></td>
</tr>
<tr>
<td><img src="finance.jpeg" height="50%" width="50%"></td>
<td>
BOOK:FINANCIAL ACCOUNTING FOR BBA <br>
AUTHOR:S N MAHESWARI<br>
PUBLICATION:ARYA
</td>
<td>$100</td>
<td>
<img src="cart1.jpeg" height="50%" width="50%"></td>
</tr>
</table>
</body>
</html>
Output:
1(D)AIM: REGISTRATION PAGE:
Create a “registration form “with the following fields
1) Name (Text field)
2) Password (password field)
3) E-mail id (text field)
4) Phone number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (check boxes – English, Telugu, Hindi, Tamil)
8) Address (text area)

registration.html

<!DOCTYPE html>
<html>
<head>
<title>REGISTRATION</title>
</head>
<body bgcolor="pink">
<h1 align="center">REGISTRATION PAGE</h1>
<table bgcolor="lightblue" align="center" border="1">
<tr>
<td>NAME:<input type="text" name="name" size="20" maxsize="30"/></td>
</tr><tr>
<td>PASSWORD:<input type="text" name="password" size="20" maxsize="30"/></td>
</tr>
<tr>
<td>EMAIL ID:<input type="text" name="mail id" size="20" maxsize="30"/></td>
</tr>
<tr>
<td>PHONE NO:<input type="text" name="phone number" size="20" maxsize="50"/></td>
</tr>
<tr>
<td>GENDER:<input type="radio" value="male" name="gender"/>MALE<input type="radio" value="female"
name="gender" >FEMALE</td>
</tr>
<tr>
<td> DATE OF BIRTH
<select name="Day">
<option>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="Month">
<option>MONTH</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July/option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>

<select name="year">
<option> year</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</td>
</select>
</tr>
<tr>

<td>
<input type="checkbox" name="languages known" value="ENGLISH"/>ENGLISH
<input type="checkbox" name="languages known" value="TELUGU"/>TELUGU

<input type="checkbox" name="languages known" value="HINDI"/>HINDI


<input type="checkbox" name="languages known" value="TAMIL"/>TAMIL
</td>
</tr>
<tr>
<td>
<p> Address:</p>
<textarea name="txtaddress" rows="5" cols="60">
</textarea>
</td>
</tr>
<br>
<tr>
<td>
<input type="submit form" value="submit form"/>
<input type="Reset" value="clear form"/>
</td>
</tr>
</table>
</body>
</html>

Output:
EXPERIMENT -2

AIM: Design a web page using CSS (Cascading Style Sheets) which includes the following:

A)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.

styles.css

h1
{
color:red;
font-
family:caStellar;
font-size:22pt;
text-decoration:underline;
}
h2
{
color:blue;
font-
family:Chiller;
font-size:18pt;
text-decoration:overline;
}
p
{
color:magenta;
font-family:Trebuchet
MS;font-size:14pt;
font-style:italic;
}

fontstyles.html

<html>
<head>
<title>Usage of different font,styles and colors </title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1>This header is in red</h1>
<h2>This header is in blue</h2>
<p>This is normal text</p>
</body>
</html>
OUTPUT:

B)set a background image for both the page and single elements on the

page

bg_image.html

<html>

<head>

<title>Setting background image</title>

<style type="text/css">

body

background-image:url("image.jpg");

</style>

</head>

<body text="#ee78a2">

<h1>Life is beautiful!!!</h1>

</body>

</html>
OUTPUT:

C) Control the repetition of the image with the background-repeat

property.

bg_repeat.html

<html>
<head>
<title>Controlling the background image</title>
<style type="text/css">
body
{
background-image:url("image.jpg");
background-repeat:no-repeat;
}
</style>
</head>
<body text="#fe78a2">
<h1>Life is beautiful!!!</h1>
</body>
</html>
OUTPUT

EXPERIMENT -3

AIM: Design a dynamic web page with validation using JavaScript.

3.html

<html>
<head>
<script>
function DYNAMIC()
{
var name =document.forms["RegForm"]["Name"];
var email =document.forms["RegForm"]["EMail"];
var phone =document.forms["RegForm"]["Telephone"];
var what =document.forms["RegForm"]["Subject"];
var password =document.forms["RegForm"]["Password"];
var address =document.forms["RegForm"]["Address"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}

if (address.value == "")
{
window.alert("Please enter your address.");
address.focus();
return false;
}

if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}

if (password.value == "")
{

window.alert("Please enter your password");


password.focus();
return false;

if (what.selectedIndex < 1)
{
alert("Please enter your course.");
what.focus();
return false;
}

return true;
}
</script>
<style>
div
{
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}

form
{
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" action="/submit.php"onsubmit="return DYNAMIC()" method="post">
<p>Name: <input type="text"size="65" name="Name" /></p>
<br />
<p>Address: <input type="text"size="65" name="Address" />
</p><br />
<p>E-mail Address: <input type="text"size="65" name="EMail" /></p>
<br />
<p>Password: <input type="password"size="65" name="pwdpassword" /></p>
<br />
<p>Telephone: <input type="text"size="65" name="Telephone" /></p>
<br />
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>MTECH</option>
</select>
<br />
<br />
Comments: <textarea cols="55" name="Comment"> </textarea>
<br><br><input type="submit" value="LOGIN"/>
<input type="reset" value="RESET"/>
</form>
</body>
</html>

Output 1:
Output 2:

EXPERIMENT -4
AIM: Design a HTML having a text box and four buttons viz Factorial, Fibonacci, Prime, and Palindrome.
When a button is pressed an appropriate java script function should be called to display
a. Factorial of that number
b. Fibonacci series up to that number
c. Prime numbers up to that number
d. Is it palindrome or not
fact.html

<!DOCTYPE html>
<html>
<head>
</head>
<body style = "text-align: center; font-size: 20px;">
<h1>FIND THE FACTORIAL OF THAT NUMBER</h1>
Enter a number: <input id = "num">
<br><br>
<button onclick = "fact()"> Factorial </button>
<p id = "res"></p>
<script>
function fact()
{
var i, num, f;
f = 1;
num = document.getElementById("num").value;
for(i = 1; i <= num; i++)
{
f = f * i;
}
i = i - 1;
document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;
}
</script>
</body>
</html>
fibb.html

<html>
<head>
<title> Fibonacci Series </title>
</head>
<body>
<script>
// declaration of the variables
var n1 = 0, n2 = 1, next_num, i;
var num = parseInt (prompt (" Enter the limit for Fibonacci Series "));
document.write( "Fibonacci Series: ");
for ( i = 1; i <= num; i++)
{
document.write (" <br> " + n1); // print the n1
next_num = n1 + n2; // sum of n1 and n2 into the next_num
n1 = n2; // assign the n2 value into n2
n2 = next_num; // assign the next_num into n2
}

</script>
</body>
</html>

prime.html

<!DOCTYPE html>
<html>
<head>
<title>
Check a number is Prime or not using JavaScript
</title>
<script type="text/javascript">

// Function to check prime number


function p()
{
var n, i, flag = true;
// Getting the value form text
// field using DOM
n = document.myform.n.value;
n = parseInt(n)
for(i = 2; i <= n - 1; i++)
if (n % i == 0)
{
flag = false;
break;
}

// Check and display alert message


if (flag == true)
alert(n + " is prime");
else
alert(n + " is not prime");
}
</script>
</head>
<body>
<center>
<h1>Prime numbers up to that number</h1>
<form name="myform">
Enter the number:
<input type="text" name=n value=""><br><br>
<input type="button" value="Check" onClick="p()">
<br>
</form>
</center>
</body>

</html>

pali.html

<html>
<head> <title> JavaScript Palindrome </title>
</head>
<body>

<!-- Use JavaScript programming code to validate the Palindrome numbers or strings. -->
<script>

function validatePalin(str)
{

// get the total length of the words


const len = string.length;

// Use for loop to divide the words into 2 half


for (let i = 0; i < len / 2; i++)
{

// validate the first and last characters are same


if (string[i] !== string[len - 1 - i]) {
alert( 'It is not a palindrome');
}
}
alert( 'It is a palindrome');
}

// accept the string or number from the prompt


const string = prompt('Enter a string or number: ');

const value = validatePalin(string);

console.log(value);
</script>
</body>
</html>
Final.html

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

<style>
.button
{
background-color: #1c87c9;
border: none;
color: white;
padding: 20px 34px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<center><br><br><br>
<a href="fact.html" class="button">FACTORIAL</a><br>
<a href="fibb.html" class="button">FIBBONACCI</a><br>
<a href="pali.html" class="button">PALINDROME</a><br>
<a href="prime.html" class="button">PRIME</a><br>
</center>
</body>
</html>

OUTPUT 1:
OUTPUT 2:

OUTPUT 3:

OUTPUT 4:
OUTPUT 5:
EXPERIMENT -5

AIM: Write JavaScript programs on Event Handling


a. Validation of registration form
b. Open a Window from the current window
c. Change color of background at each click of button or refresh of a page
d. Display calendar for the month and year selected from combo box
e. On Mouse over event

validation_registration.html

<html>
<script >
function reset1()
{
x=confirm("It will clear all the text entered")
if(x==true)
{
document.form1.t1.value=""
document.form1.t2.value=""
document.form1.ta.value=""
document.form1.t3.value=""
document.form1.r1[0].checked=false
document.form1.r1[1].checked=false
document.form1.c1.checked=false
document.form1.c2.checked=false
document.form1.c3.checked=false
document.form1.c4.checked=false
document.form1.c5.checked=false
document.form1.c6.checked=false
document.form1.t1.focus()
}
}
function check()
{
if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value))))
{
alert("please enter the correct name")
document.form1.t1.value=""
document.form1.t1.focus()
}
else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value)))
{
alert("please enter the age correctly")
document.form1.t2.value=""
document.form1.t2.focus()
}
else if(document.form1.t2.value>40)
{
alert("Sorry you age is beyound the limit")
document.form1.t2.value=""
document.form1.t2.focus()
}
else if(document.form1.ta.value=="")
{
alert("please enter the address")
document.form1.ta.focus()
}
else
if((document.form1.r1[0].checked==false)&&(document.form1.r1[1].checked==false))
{
alert("please select the radio button")
document.form1.r1[0].focus()
}
else

if((document.form1.c1.checked==false)&&(document.form1.c2.checked==false)&&(document.form1.c3.ch
ecked==false)&&(document.form1.c4.checked==false)(document.form1.c5.checked==false))
{
alert("please select the the languages known")
document.form1.c1.focus()
}
else if(document.form1.t3.value=="")
{
alert("please enter the password")
document.form1.t3.focus()
}
else
if((document.form1.t1.value!="")&&(document.form1.t2.value!="")&&(document.form1.t3.value!="")&&(d
ocument.form1.ta.value!="")&&((document.form1.r1[0].checked!=false)||(document.form1.r1[0].checked
!=false))&&((document.form1.c1.checked!=false)||(document.form1.c2.checked!=false)||(document.form
1.c3.checked!=false)||
(document.form1.c4.checked!=false)||(document.form1.c5.checked!=false)))
{
x=confirm("you have entered the datas correctly,want to submit the form")
f(x)
{
document.lay.visibility="show"
}
}
}
</script>
<body bgcolor="lightblue" text="red" style="font-size:15pt;fontfamily:Garamond"
onload=document.form1.t1.focus()><center>
<h2>ENTRY FORM</h2></center>
<form name=form1 method=post >
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input type=text name=t1 size=18>
<tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input type=text name=t2 maxlength=3
size=18>
<tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea name=ta rows=5
cols=15></textarea>
<tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1
value="female">Female<br>
<input type=radio name=r1 value=male>Male</td>
<tr><td align=left><h2>Languages Known :</h2> </td><td align=left><center>(select more than
one)</center>
<input type=checkbox name=c1 value=c>C<br>
<input type=checkbox name=c2 value=c++>C++<br>
<input type=checkbox name=c3 value=python>VB<br>
<input type=checkbox name=c4 value=java>JAVA<br>
<input type=checkbox name=c5 value=dbms>ASP<br>
<input type=checkbox name=c6 value=others>OTHERS<br></td>
<tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input
type=password name=t3 size=18>
</table><center>
<input type=button value=" reset " onClick=reset1()>
<input type=button value=" check " onClick=check()>
<h3>Before submitting the datas please click the check Button</h3>
<input type="submit" value="submit "></center>
</form>
</body>
</html>
Output 1:

Output 2:
Openwindow.html

<html>
<head>
<script language="javascript">
function openwin()
{

msg=window.open("","Displaywindow","height=200,width=200,status=yes,toolbar=yes,directories=no,men
ubar=yes,location=yes");

msg.document.write("<html><title>A new Window</title>");


msg.document.write("<img src='dog.jpeg'><p><form><input type=button value=close
onclick=self.close()></form></html>");
}
</script>
</head>
<body bgcolor="blue">
<form>
<input type=button value=click name=b1 onclick=openwin()>
</form>
</body>
</html>

Output 1:

Output 2 :
Changecolor.html

<html>
<head>
<script type="text/javascript">
function get_random_color()
{
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
document.body.style.background= color;
}
</script>
</head>
<body onclick="get_random_color()">
<b>Click me to change my color!</b>
</body>
</html>

Output 1:

Output 2:
Displaycalendar.html

<html>
<head>
<script language="javascript" type="text/javascript">
var i=0,j,cnt=0,c;
var days=["sun","mon","tue","wed","thu","fri","sat"];
var yr,k,mn;
var last=[31,28,31,30,31,30,31,31,30,31,30,31];
var
mn=["January","February","March","April","May","June","July","August","September","October","Novemb
er","December"];
function my()
{
yr=document.form1.qual.value;
k=document.form1.qual1.value;
if(yr%4==0&&yr%100==0||yr%400)
{
last[1]=29;
}
document.write("<table width='50%' height='60%' border='9'bgcolor='cyan'>");
document.write("<tr><td colspan='7'><center>"+ mn[k]+""+yr+"</center></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
{
document.write("<td>"+days[i]+"</td>");
}
document.write("</tr>");
var date2=new Date(yr,k,1);
var daz=date2.getDay();
cnt=0;
for(i=0;i<=daz-1;i++)
{
document.write("<td></td>");
cnt=cnt+1;
}
for(j=1;j<=last[k];j++)
{
c=cnt%7;
if(c==0)
{
document.write("</tr><tr><td><a href=\"diary.html\"target=\"new\">"+j+"</a></td>");
cnt++;
}
else
{
document.write("<td><a href=\"diary.html\"target=\"new\">"+j+"</a></td>");
cnt++;
}
}
document.write("</tr></table>");
}
</script>
</head>
<body bgcolor="green">
<form name="form1">
<select name="qual">
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option> </option>
</select>
<select name="qual1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>

</select>
<input type="button" value="ok" onclick=my()></input></form>
</body>
</html>

Output 1:

Output 2:
Mouse.html

<html>
<head>
<script language="javascript">
function preload()
{
topon=new Image(100,50);
topon.src="baby.jpeg";
topoff=new Image(260,280);
topoff.src="teddy.jpeg";
}
function myMouseOn(n)
{
preload();
imageON=eval(n+"on.src");
document.images[n].src=imageON;
}
function myMouseOff(n)
{
imageOFF=eval(n+"off.src");
document.images[n].src=imageOFF;
}
</script>
</head>
<body >
<h1> Demo for mouse over</h1>
<a href="#" onMouseOut="myMouseOff('top')";
onMouseOver="myMouseOn('top')";>
<img src="dog.jpeg" alt="Show Next" name="top">
</a>
</body>
</html>

Output 1:
Output 2:

EXPERIMENT -6
Write an XML file which will display the Book information which includes the following:
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price
a) Write a Document Type Definition (DTD) to validate the above XML file.
b) Write a XML Schema Definition (XSD) to validate the above XML file

catalog.dtd

<!ELEMENT Catalog (Book)*>


<!ELEMENT Book (Title, Author, Publication ,Edition, ISBN, Price)>
<!ELEMENT Title (#PCDATA)>
<!ELEMENT Publication (#PCDATA)>
<!ELEMENT Edition (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT Price (#PCDATA)>

library.css

Catalog
{
font-family:arial;
color:blue;
font-size:16pt;
}
Book
{
font-family:times new roman;
color:blue;
table-layout:auto;
font-size:14pt;
}
Title
{
font-family:arial;
color:green;
margin-left:20pt;
font-size:12pt;
}
Author
{
font-family:arial;
color:magenta;
}
Publication,Edition,ISBN,Price
{
display:block;
font-family:arial;
color:black;
font-size:10pt;
margin-left:40pt;
}

Cataloguedemo.xml
<?xml version="1.0" encoding="UTF-8" standalone=”no”?>
<?xml-stylesheet type="text/css" href="library.css" ?>
<!DOCTYPE Catalog SYSTEM "catalog.dtd">

<Catalog">
<Book>
<Title>XML Bible</Title>
<Author>Winston</Author>
<Publication>Wiely</Publication>
<Edition>Fifth Edition</Edition>
<ISBN>0-7645-4760-7</ISBN>
<Price>$40.5</Price >
</Book>
<Book>
<Title>Artificial Intelligence</Title>
<Author>S. Russel</Author>
<Publication> Princeton Hall </Publication>
<Edition> Sixth Edition</Edition>
<ISBN> 0-13-1038-5-2 </ISBN>
<Price>$63</Price>
</Book>
<Book>
<Title>Java 2</Title>
<Author>Watson</Author>
<Publication>BPB Publications</Publication>
<Edition>Third Edition</Edition>
<ISBN>0-41-1058-7-2</ISBN>
<Price>$63</Price>
</Book>
<Book>
<Title>HTML in 24 hours </Title>
<Author> Sam Peter</Author>
<Publication> SAM Publications </Publication>
<Edition>Fifth Edition</Edition>
<ISBN> 0-672-32841-0 </ISBN>
<Price> $50 </Price >
</Book>
</Catalog>
Output:

Vous aimerez peut-être aussi