Web Lab (Ug)

Index
s.no
Name of the Experiment
1.
Font style for a text
2.
Forms
3.
Image and linking with a directory
4.
Layers
5.
Order list and unordered list
6.
Developing in a table
7.
External Style Sheet
8.
Frames
Calculator
10
Arithmetic operators using JavaScript
11
Printing a table using JavaScript
12
Mouse events
13
XML using external DTD
14
Static pages for online college details
15
Program for ASP
16
Text Menu Creation
17
Moving Images
18
Regular Expression Test
19
Exception Handling
20
JDBC connection using JSP
1|Page
Page no
1.Font style for a text

Sol
<html>
<head>
<title>font style</title>
<body>
<font face="arial"size="50"color="red">
hai<br>welcome to<br>
<font face="arial"color="green"size="20">
3rd mpcs<br>
</body>
</html>
2|Page
3|Page
2. Forms
Sol
<html>
<head>
<title>forms</title>
</head>
<body bgcolor="pink">
<form>
first name
<input type="text"name="name"size="20"><br>
last name
email
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">40+
<br>
<input type="submit"value="submit">
</form>
</body>
</html>
4|Page
5|Page
3.Image and linking with a directory

Sol:<html>
<head>
<title>image linking</title></head>
<body>
<img src="C:\Documents and Settings\drndc\My Documents\Sample
Pictures\Penguins.jpg"width="200"height="250">
<a href="D:\">D-directory</a>
</body>
</html>
6|Page
7|Page
4.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;">Hi</div>
font-size:50px;
left:150;
top:3;
background-color:green;
z-index:2;">Welcome to</div>
font-size:50px;
left:200;
top:-7;
background-color:blue;
z-index:3;">Drn College</div>
</body>
</html>
8|Page
9|Page
5.Order and Unorder List

ordered list
Sol;<html>
<head>
<title>order list</title></head>
<body><u><h1>orderlist</h1></u>
<ol type="a">
<li>mani</li>
<li>pooja</li>
<li>laxmi</li>
</ol>
<ol type="i">
<li>usha</li>
<li>pooja</li>
<li>laxmi</li>
</ol>
<ol type="1">
<li>sowjanya</li>
<li>pooja</li>
<li>laxmi</li>
</ol>
</body>
</html>
10 | P a g e
11 | P a g e
unordered list
Sol:<html>
<head>
<title>un order list</title></head>
<body><u><h1>un orderlist</h1></u>
<ul type="disc">
<li>mounika</li>
<li>pooja</li>
<li>laxmi</li>
</ul>
<ul type="circle">
<li>raju</li>
<li>pooja</li>
<li>laxmi</li>
</ul>
<ul type="square">
<li>mani</li>
<li>pooja</li>
<li>laxmi</li>
</ul>
</body>
</html>
12 | P a g e
13 | P a g e
6.Table Creation
<html>
<head>
<title>table</title>
</head>
<body><center><h1><u>table</u></h1>
<table
align="center"width="300"border="3"cellspacing="20"cellpading="10"bordercolor="
red">
<tr>
<td>mounika</td>
<td>laxmi</td>
<td>hema</td>
<td>kanchana</td>
</tr>
<tr>
<td>usha</td>
<td>maneesha</td>
<td>laxmi</td>
<td>yasoda</td>
</tr></table></body></html>
14 | P a g e
15 | P a g e
7.PROGRAM FOR EXTERNAL STYLE SHEET

h1
{
font-family:Arial
}
h2
{
font-family:times new roman;
color:red;
left:20px
}
h3
{
font-family:arial
color:blue;
}
p
{
font-size:20pt;
font-family:Monotype Corsiva
color:green;
}
special
{
color:green
}
<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>
16 | P a g e
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
8.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
9.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="calc-value+='1'">
<input type="button"name="two"value="2"Onclick="calc-value+='2'">
<input type="button"name="three"value="3"Onclick="calc-value+='3'">
<input type="button"name="plus"value="+"Onclick="calc-value+='+'">
<br>
<input type="button"name="four"value="4"Onclick="calc-value+='4'">
<input type="button"name="five"value="5"Onclick="calc-value+='5'">
<input type="button"name="sixe"value="6"Onclick="calc-value+='6'">
<input type="button"name="x"value="*"Onclick="calc-value+='*'">
<br>
<input type="button"name="seven"value="7"Onclick="calc-value+='7'">
<input type="button"name="eight"value="8"Onclick="calc-value+='8'">
<input type="button"name="nine"value="9"Onclick="calc-value+='9'">
<input type="button"name="div"value="/"Onclick="calc-value+='/'">
<br>
<input type="button"name="%"value="%"Onclick="calc-value+='%'">
<input type="button"name="zero"value="0"Onclick="calc-value+='0'">
<input type="button"name="clear"value="c"Onclick="calc-value+=''">
<input type="button"name="doit"value="="Onclick="calc-value+='='">
</br>
</center>
</body>
</html>
21 | P a g e
22 | P a g e
10.Arithematic operators using JavaScript

<html>
<head>
<title>are thematic operators using JavaScript</title>
</head>
<body>
<center>
<script type="text/javascript">
var a,b;
a=5,b=4,c=0,d=0,f=0,g=0;
c=a+b;
d=a-b;
e=a%b;
f=a/b;
g=a*b;
string="the result=";
document.write("performing addition,subtraction,persentage,division,multiplicaton of
5 and 4"+"<br>");
document.write(string);
document.write(c);
document.write(d);
document.write(e);
document.write(f);
document.write(g);
</script>
</center>
</body>
</html>
23 | P a g e
24 | P a g e
11. square value table

<html>
<head>
<title>square value table convert</title>
</head>
<body>
<table border="5" align=<"center">
<th>number</th><th>table</th>
i=1,j=2;
while(i<=10)
{
document.write("<tr><td>"+j+"</td><td>"+(j*i)+"</td></tr>");
i++;
}
</script>
</table>
</body>
</html>
25 | P a g e
26 | P a g e
12. Write a function that responds to a click anywhere on the page.

<html>
<body>
<center>
[<a href="/" onMouseOver="document.bgColor='Green'">GREEN</a>]
[<a href="/" onMouseOver="document.bgColor='Red'">RED</a>]
[<a href="/" onMouseOver="document.bgColor='orange'">orange</a>]
[<a href="/" onMouseOver="document.bgColor='green'">brightgreen</a>]
[<a href="/" onMouseOver="document.bgColor='seagreen'">seagreen</a>]
</center>
</body>
</html>
27 | P a g e
28 | P a g e
13. XML using External DTD

<!ELEMENT student (name,std,marks)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT std (#PCDATA)>
<!ELEMENT marks (#PCDATA)>
Save it as student.dtd within double quotes
<?xml version="1.0"?>
<!DOCTYPE student SYSTEM "student.dtd">
<student>
<name>shiva</name>
<std>mecs</std>
<marks>369</marks>
</student>
Save it as stuentdemo.xml
And execute this xml file
29 | P a g e
30 | P a g e
14.Write a program using static pages for online college

course details
Sol:Home page
<html>
<head><title>book store</title></head>
<frameset rows="250,*">
<frame src="d:\webpages\welcome.html"name="top-frame">
<frameset cols="150,*">
<frame src="d:\webpages\course.html"name="left-frame">
<frame src="d:\webpages\display.html"name="ight-frame">
</frameset>
</frameset>
</html>
Welcome page
<html>
<head><title>home page</title></head>
<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>
31 | P a g e
Course page
<html>
<body bgcolor=green>
<li><a href="d:\\webpages\\mpcs.html"target="right-frameset">mpcs</a></li>
<li><a href="d:\\webpages\\mpc.html"target="right-frameset">mpc</a></li>
<li><a href="d:\\webpages\\cbz.html"target="right-frameset">cbz</a></li>
<<li><a href="d:\\webpages\\ba.html"target="frameset">ba</a></li>
</body>
</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()
{
if(document.form1.id.value="//document.form1.pwd.va
lue==" ")
{
alert("please fill up the information");
32 | P a g e
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>
33 | P a g e
homepage
Login page
34 | P a g e
15. ASP program for student details

<!DOCTYPE html>
<html>
<head>
<title>student form</title>
</head>
<body>
<%
dim rno,name,sub1,sub2,sub3,tot,avg
rno=33
name="venu"
sub1=50
sub2=50
sub3=50
tot=sub1+sub2+sub3
avg=tot/3
response.write("your details are <br>")
response.write("your rolno is :"&rno &"<br>")
response.write("your name is :"&name &"<br>")
response.write("your sub1 marks are :"&sub1 &"<br>")
response.write("your total marks are :"&tot &"<br>")
response.write("your average marks are :"&avg &"<br>")
%>
</body></html>
35 | P a g e
36 | P a g e
16.TextMenu Creation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple CSS Based Pulldowns</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* set the menu style */
.menuHead { font-weight: bold; font-size: larger; background-color: #A9A9A9;}
.menuChoices { background-color: #DCDCDC; width: 200px;}
.menu a {color: #000000; text-decoration: none;}
.menu a:hover {text-decoration: underline;}
/* position your menus */
#menu1 {position: absolute; top: 10px; left: 10px; width: 200px;}
</style>
/* we'll only allow DOM browsers to simplify things*/
(document.getElementById ? DOMCapable = true : DOMCapable = false);
function hide(menuName)
{
if (DOMCapable)
{
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility = 'hidden';
}
}
function show(menuName)
{
if (DOMCapable)
{
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility = 'visible';
37 | P a g e
}
}
</script>
</head>
<body>
<div id="menu1" class="menu" onmouseover="show('menu1');"
onmouseout="hide('menu1');">
<div class="menuHead">Search Sites</div>
<div id="menu1choices" class="menuChoices">
<a href="/">Google</a><br />
<a href="/">Yahoo</a><br />
<a href="/">Teoma</a><br />
<a href="/">MSN</a><br />
<a href="/">DMOZ</a><br />
</div>
</div>
<div class="menuHead">E-commerce Sites</div>
<a href="/">Amazon</a><br />
<a href="/">Ebay</a><br />
<a href="/">Buy.com</a><br />
</div>
</div>
<div class="menuHead">Book Releated Sites</div>
<a href="/">JavaScriptRef</a><br />
<a href="/">W3C</a><br />
<a href="/">PINT</a><br />
</div>
</div>
/* Don't hide menus for JS off and older browsers */
38 | P a g e
if (DOMCapable)
{
hide("menu1");
hide("menu2");
hide("menu3");
}
</script>
</body>
</html>
39 | P a g e
40 | P a g e
17.Moving images
<html>
<head>
<body>
<marquee behavior="scroll" direction="left" >Hi girls<img
src="D:\weblab2015\images10.Jpg" width="50" height="50" alt="no image"
/></marquee>
<marquee behavior="scroll" direction="left" >Hi girls<img
src="D:\weblab2015\images7.Jpg" width="150" height="150" alt="no image"
/></marquee>
<marquee behavior="slide" direction="right" scrollamount="10" >Hi girls<img
src="D:\weblab2015\images8.jpg" width="50" height="50" alt="no image"
/></marquee>
<marquee behavior="alternate" direction="down" >Hi girls<img
/></marquee>
<marquee behavior="scroll" direction="right" >Hi girls<img
/></marquee>
<marquee behavior="scroll" direction="up" >Hi girls<img
/></marquee>
</body>
</html>
41 | P a g e
42 | P a g e
18.Regular Expression
<SCRIPT LANGUAGE="JavaScript"><!-function demoMatchClick() {
var re = new RegExp(document.demoMatch.regex.value);
if (document.demoMatch.subject.value.match(re)) {
alert("Successful match");
} else {
alert("No match");
}
}
function demoShowMatchClick() {
var re = new RegExp(document.demoMatch.regex.value);
var m = re.exec(document.demoMatch.subject.value);
if (m == null) {
alert("No match");
} else {
var s = "Match at position " + m.index + ":\n";
for (i = 0; i < m.length; i++) {
s = s + m[i] + "\n";
}
alert(s);
}
}
function demoReplaceClick() {
var re = new RegExp(document.demoMatch.regex.value, "g");
document.demoMatch.result.value =
document.demoMatch.subject.value.replace(re,
document.demoMatch.replacement.value);
}
// -->
</SCRIPT>
<FORM ID="demoMatch" NAME="demoMatch" METHOD=POST
ACTION="javascript:void(0)">
43 | P a g e
<P>Regexp: <INPUT TYPE=TEXT NAME="regex" VALUE="\bt[a-z]+\b"

SIZE=50></P>
<P>Subject string: <INPUT TYPE=TEXT NAME="subject"
VALUE="This is a test of the JavaScript RegExp object" SIZE=50></P>
<P><INPUT TYPE=SUBMIT VALUE="Test Match"
ONCLICK="demoMatchClick()">
<INPUT TYPE=SUBMIT VALUE="Show Match"
ONCLICK="demoShowMatchClick()"></P>
<P>Replacement text: <INPUT TYPE=TEXT NAME="replacement"
VALUE="replaced" SIZE=50></P>
<P>Result: <INPUT TYPE=TEXT NAME="result"
VALUE="click the button to see the result" SIZE=50></P>
<P><INPUT TYPE=SUBMIT VALUE="Replace"
ONCLICK="demoReplaceClick()"></P>
</FORM>
44 | P a g e
45 | P a g e
19.Expectional Handling
<html>
<head>
function divide()
{
var a=100;
var b=0;
try
{
if(b==0)
{
throw("Divide by Zero Error");
}
else
{
var c;
c=a/b;
}
}
catch(e)
{
alert("Error :"+e);
}
finally
{
alert("i always Execute");
}
}
</script>
</head>
<body>
<p>click to see the result</p>
<form>
<input type="button" value="Click Me" onClick="divide();"/>
</form>
</body>
</html>
46 | P a g e
47 | P a g e
20.Jdbc connection through JSP

<%@page language="java" import="java.sql.*"%>
<%@page import="java.io.*"%>
<%
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","hr","venu
");
Statement stmt=con.createStatement();
stmt.executeUpdate("create table student(rno int,sname varchar2(30),course
varchar2(5))");
out.print("table created successfully");
%>
48 | P a g e

Web Lab (Ug)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab (Ug)

Uploaded by

Copyright:

Available Formats

Index

Name of the Experiment

Font style for a text

Image and linking with a directory

Order list and unordered list

External Style Sheet

Arithmetic operators using JavaScript

Printing a table using JavaScript

XML using external DTD

Static pages for online college details

Program for ASP

Text Menu Creation

Regular Expression Test

JDBC connection using JSP

1.Font style for a text

3.Image and linking with a directory

5.Order and Unorder List

7.PROGRAM FOR EXTERNAL STYLE SHEET

10.Arithematic operators using JavaScript

11. square value table

12. Write a function that responds to a click anywhere on the page.

13. XML using External DTD

14.Write a program using static pages for online college

15. ASP program for student details

<P>Regexp: <INPUT TYPE=TEXT NAME="regex" VALUE="\bt[a-z]+\b"

20.Jdbc connection through JSP

You might also like