Professional Documents
Culture Documents
s.no
1.
2.
Forms
3.
4.
Layers
5.
6.
Developing in a table
7.
8.
Frames
Calculator
10
11
12
Mouse events
13
14
15
1|Page
Page no
2|Page
3|Page
Aim:- forms
Sol
<html>
<head>
<title>forms</title>
</head>
<body bgcolor="pink">
<form>
first name
<input type="text"name="name"size="20"><br>
last name
<input type="text"name="name"size="20"><br>
email
<input type="text"name="name"size="20"><br>
password
<input type="password"name="name"size="20">
<br>
<age>
<input type="radio"name="age"value="yes">0-25
<input type="radio"name="age"value="yes">25-30
<input type="radio"name="age"value="yes">30-35
<input type="radio"name="age"value="yes">35-40
<input type="radio"name="age"value="yes">40+
<br>
<input type="submit"value="submit">
4|Page
</form>
</body>
</html>
5|Page
6|Page
7|Page
Aim:- layers
Sol;<html>
<head>
<title>Layers demo</title>
</head>
<body>
<div style="position:relative;
font-size:50px;
left:50;
top:10;
background-color:red;
z-index:1;">samuel</div>
<div style="position:relative;
font-size:50px;
left:150;
top:3;
background-color:green;
z-index:2;">pooja</div>
<div style="position:relative;
font-size:50px;
left:200;
top:-7;
background-color:blue;
z-index:3;">laxmi</div>
8|Page
</body>
</html>
9|Page
10 | P a g e
11 | P a g e
13 | P a g e
14 | P a g e
15 | P a g e
<html>
<head>
<link rel="stylesheet"
type="text/css" href="d:ex.css"/>
</head>
<body>
<h1 class="special"><center>
this page is created using external ss</center>
</h1>
<h2>
line is aligned left</h2>
<p>
it is a paragraph
</p>
<h3>
it's blue
<a href="colorname.html">color</a>line
</h3>
</body>
</html>
17 | P a g e
18 | P a g e
Aim :- Frames
<html>
<head>
<title>frames</title>
</head>
<frameset cols="150,*">
<frame src ="d:\bio data.html"name="left vertical">
<frameset rows="*,120">
<frame src="d:\frame1.html"name="right-top"
<frame src="d:\frame2.html"name="right-bottom"
</frameset>
</frameset>
</html>
19 | P a g e
20 | P a g e
Aim :- Calculator
<html>
<body><title>calculator</title>
<center><h1><u><big>calculator
<form name=<"calculator">
<table border=4>
<tr><td>
<input type="text"name="input"size="10">
<br></td><tr>
<tr><td>
<body bgcolor="green">
<input
type="button"name="one"value="1"Onclick="calcvalue+='1'">
<input
type="button"name="two"value="2"Onclick="calcvalue+='2'">
<input
type="button"name="three"value="3"Onclick="calcvalue+='3'">
<input
type="button"name="plus"value="+"Onclick="calcvalue+='+'">
<br>
21 | P a g e
<input
type="button"name="four"value="4"Onclick="calcvalue+='4'">
<input
type="button"name="five"value="5"Onclick="calcvalue+='5'">
<input
type="button"name="sixe"value="6"Onclick="calcvalue+='6'">
<input
type="button"name="x"value="*"Onclick="calcvalue+='*'">
<br>
<input
type="button"name="seven"value="7"Onclick="calcvalue+='7'">
<input
type="button"name="eight"value="8"Onclick="calcvalue+='8'">
<input
type="button"name="nine"value="9"Onclick="calcvalue+='9'">
<input
type="button"name="div"value="/"Onclick="calcvalue+='/'">
<br>
<input
type="button"name="%"value="%"Onclick="calcvalue+='%'">
22 | P a g e
<input
type="button"name="zero"value="0"Onclick="calcvalue+='0'">
<input
type="button"name="clear"value="c"Onclick="calcvalue+=''">
<input
type="button"name="doit"value="="Onclick="calcvalue+='='">
</br>
</center></body></html>
23 | P a g e
24 | P a g e
document.write(g);
</script>
</center>
</body>
</html>
26 | P a g e
27 | P a g e
28 | P a g e
29 | P a g e
30 | P a g e
31 | P a g e
32 | P a g e
<body bgcolor=pink>
<center>
<img src="C:\Documents and Settings\All
Users\Documents\My Pictures\Sample
Pictures\Sunset.jpg" width="200" height="150"
align="left">
<h1>my book store</h1>
<tr>
<td><a href="d:\webpages\login.html"
target="right-frame">login</a></td>
<td><a href="d:\webpages\registration.html"
target="right-frame">
</frameset>
</frameset>
</html>
Course page
<html>
<body bgcolor=green>
<li><a href="d:\\webpages\\mpcs.html"target="rightframeset">mpcs</a></li>
<li><a href="d:\\webpages\\mpc.html"target="rightframeset">mpc</a></li>
<li><a href="d:\\webpages\\cbz.html"target="rightframeset">cbz</a></li>
<<li><a
href="d:\\webpages\\ba.html"target="frameset">ba</a
></li>
</body>
34 | P a g e
</html>
Display page
<html>
<body bgcolor="blue">
<h1>content</h1>
<img src="C:\Documents and Settings\All
Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" width=200 height=150
align="left">
<h3>
<p>this website is for displaying various courses of this
college</p>
<p>the user of this site needs to login first</p>
</h3>
</body>
</html>
Login page
<html>
<body bgcolor=green><br><br><br>
<script language="javascript">
function validate()
{
35 | P a g e
if(document.form1.id.value="//document.form1.pwd.va
lue==" ")
{
alert("please fill up the information");
document.form1.id.focus();
}
}
</script>
<form name="form1">
<div align="center">
login:<input type=text name="id"><br>
password:<input type=password name="pwd">
<br><br/>
</div>
<br>
<br>
<div align="center">
<input type="submit"value="submit"on
submit="validate()">
<input type="reset"value="reset">
</div>
</form>
</body>
</html>
36 | P a g e
homepage
Login page
37 | P a g e
38 | P a g e
40 | P a g e
41 | P a g e
42 | P a g e