You are on page 1of 48


Name of the Experiment


Font style for a text




Image and linking with a directory




Order list and unordered list


Developing in a table


External Style Sheet






Arithmetic operators using JavaScript


Printing a table using JavaScript


Mouse events


XML using external DTD


Static pages for online college details


Program for ASP


Text Menu Creation


Moving Images


Regular Expression Test


Exception Handling


JDBC connection using JSP


Page no

1.Font style for a text
<title>font style</title>
<font face="arial"size="50"color="red">
hai<br>welcome to<br>
<font face="arial"color="green"size="20">
3rd mpcs<br>



2. Forms
<body bgcolor="pink">
first name
<input type="text"name="name"size="20"><br>
last name
<input type="text"name="name"size="20"><br>
<input type="text"name="name"size="20"><br>
<input type="password"name="name"size="20">
<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+
<input type="submit"value="submit">


5|Page .

3.jpg"width="200"height="250"> <a href="D:\">D-directory</a> </body> </html> 6|Page .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.

7|Page .

background-color:green. left:50. font-size:50px.">Drn College</div> </body> </html> 8|Page .">Welcome to</div> <div style="position:relative.<html> <head> <title>Layers demo</title> </head> <body> <div style="position:relative. font-size:50px. z-index:2. z-index:3. top:10.Layers Sol. font-size:50px. z-index:1. left:200. background-color:blue. top:3. left:150. top:-7.">Hi</div> <div style="position:relative.4. background-color:red.

9|Page .

Order and Unorder List ordered list Sol.5.<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 .

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 .6.

15 | P a g e .

color:red.PROGRAM FOR EXTERNAL STYLE SHEET h1 { font-family:Arial } h2 { font-family:times new roman. } p { font-size:20pt.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 . font-family:Monotype Corsiva color:green. } special { color:green } <html> <head> <link rel="stylesheet" type="text/css" href="d:ex. left:20px } h3 { font-family:arial color:blue.7.

html">color</a>line </h3> </body> </html> 17 | P a g e .it is a paragraph </p> <h3> it's blue <a href="colorname.

18 | P a g e .

html"name="left vertical"> <frameset rows="*.html"name="right-top" <frame src="d:\frame2.Frames <html> <head> <title>frames</title> </head> <frameset cols="150.120"> <frame src="d:\frame1.*"> <frame src ="d:\bio data.8.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 .

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

24 | P a g e .

while(i<=10) { document.write("<tr><td>"+j+"</td><td>"+(j*i)+"</td></tr>"). i++. square value table <html> <head> <title>square value table convert</title> </head> <body> <table border="5" align=<"center"> <th>number</th><th>table</th> <script type="text/javascript"> i=1. } </script> </table> </body> </html> 25 | P a g e .j=2.11.

26 | P a g e .

Write a function that responds to a click anywhere on the page.bgColor='green'">brightgreen</a>] [<a href="/" onMouseOver="document.bgColor='Red'">RED</a>] [<a href="/" onMouseOver="document.bgColor='orange'">orange</a>] [<a href="/" onMouseOver="document.bgColor='seagreen'">seagreen</a>] </center> </body> </html> 27 | P a g e .bgColor='Green'">GREEN</a>] [<a href="/" onMouseOver="document.12. <html> <body> <center> [<a href="/" onMouseOver="document.

28 | P a g e .

13.dtd"> <student> <name>shiva</name> <std>mecs</std> <marks>369</marks> </student> Save it as stuentdemo. XML using External DTD <!ELEMENT student (name.std.0"?> <!DOCTYPE student SYSTEM "student.dtd” within double quotes <?xml version="1.marks)> <!ELEMENT name (#PCDATA)> <!ELEMENT std (#PCDATA)> <!ELEMENT marks (#PCDATA)> Save it as “student.xml And execute this xml file 29 | P a g e .

30 | P a g e .

html"name="top-frame"> <frameset cols="150.jpg" width="200" height="150" align="left"> <h1>my book store</h1> <tr> <td><a href="d:\webpages\login.*"> <frame src="d:\webpages\welcome.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.*"> <frame src="d:\webpages\course.Write a program using static pages for online college course details Sol:Home page <html> <head><title>book store</title></head> <frameset rows="250.html" target="right-frame"> </frameset> </frameset> </html> 31 | P a g e .14.html"name="left-frame"> <frame src="d:\webpages\display.html" target="right-frame">login</a></td> <td><a href="d:\webpages\registration.

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\ lue==" ") { alert("please fill up the information").form1.html"target="right-frameset">cbz</a></li> <<li><a href="d:\\webpages\\"target="right-frameset">mpc</a></li> <li><a href="d:\\webpages\\cbz.pwd.value="//document.html"target="right-frameset">mpcs</a></li> <li><a href="d:\\webpages\\mpc.form1.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.Course page <html> <body bgcolor=green> <li><a href="d:\\webpages\\mpcs. 32 | P a g e .

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 .form1.document.

homepage Login page 34 | P a g e .

write("your sub3 marks are :"&sub3 &"<br>") response.write("your rolno is :"&rno &"<br>") response.write("your average marks are :"&avg &"<br>") %> </body></html> 35 | P a g e .avg rno=33 name="venu" sub1=50 sub2=50 sub3=50 tot=sub1+sub2+sub3 avg=tot/3 response.sub2.write("your sub1 marks are :"&sub1 &"<br>")"your sub2 marks are :"&sub2 &"<br>") response.write("your name is :"&name &"<br>") response.tot.write("your total marks are :"&tot &"<br>") response. ASP program for student details <!DOCTYPE html> <html> <head> <title>student form</title> </head> <body> <% dim rno.sub1.write("your details are <br>") response.

36 | P a g e .

37 | P a g e .menuHead { font-weight: bold.0 Transitional//EN" "http://www. left: 210px.getElementById ? DOMCapable = true : DOMCapable = false).} #menu2 {position: absolute. top: 10px.getElementById(menuName+"choices").dtd"> <html xmlns="http://www. left:"choices"). charset=utf-8" /> <style type="text/css"> /* set the menu style */ .TextMenu Creation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.} . font-size: larger. width: a {color: #000000. left:"> <head> <title>Simple CSS Based Pulldowns</title> <meta http-equiv="content-type" content="text/html.} .menuChoices { background-color: #DCDCDC.} #menu3 {position: absolute.} /* position your menus */ #menu1 {position: absolute. top: width: 200px. } } function show(menuName) { if (DOMCapable) { var theMenu = document.visibility = 'visible'. width: 200px. function hide(menuName) { if (DOMCapable) { var theMenu = document. width: 200px.visibility = 'hidden'. text-decoration: none.} </style> <script type="text/javascript"> /* we'll only allow DOM browsers to simplify things*/ (document. top: 10px. a:hover {text-decoration: underline.16. theMenu.w3.} .style. background-color: #A9A9A9.

} } </script> </head> <body> <div id="menu1" class="menu" onmouseover="show('menu1').com</a><br /> </div> </div> <div id="menu3" class="menu" onmouseover="show('menu3')." onmouseout="hide('menu2')." onmouseout="hide('menu3')."> <div class="menuHead">Book Releated Sites</div> <div id="menu3choices" class="menuChoices"> <a href="/">JavaScriptRef</a><br /> <a href="/">W3C</a><br /> <a href="/">PINT</a><br /> </div> </div> <script type="text/javascript"> /* Don't hide menus for JS off and older browsers */ 38 | P a g e ." onmouseout="hide('menu1')."> <div class="menuHead">E-commerce Sites</div> <div id="menu2choices" class="menuChoices"> <a href="/">Amazon</a><br /> <a href="/">Ebay</a><br /> <a href="/">Buy."> <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 id="menu2" class="menu" onmouseover="show('menu2').

} </script> </body> </html> 39 | P a g e .if (DOMCapable) { hide("menu1"). hide("menu2"). hide("menu3").

40 | P a g e .

Jpg" width="150" height="150" alt="no image" /></marquee> <marquee behavior="slide" direction="right" scrollamount="10" >Hi girls<img src="D:\weblab2015\images8.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="up" >Hi girls<img src="D:\weblab2015\images8.Jpg" width="50" height="50" alt="no image" /></marquee> <marquee behavior="scroll" direction="left" >Hi girls<img src="D:\weblab2015\images7.jpg" width="50" height="50" alt="no image" /></marquee> <marquee behavior="alternate" direction="down" >Hi girls<img src="D:\weblab2015\images10.jpg" width="50" height="50" alt="no image" /></marquee> <marquee behavior="scroll" direction="right" >Hi girls<img src="D:\weblab2015\images7.jpg" width="50" height="50" alt="no image" /></marquee> </body> </html> 41 | P a g e .17.

42 | P a g e .

value).result.regex.Regular Expression <SCRIPT LANGUAGE="JavaScript"><!-function demoMatchClick() { var re = new RegExp(document.demoMatch.replace(re. } else { alert("No match").value). "g").exec(document.value.value.demoMatch. } } function demoReplaceClick() { var re = new RegExp(document. } alert(s).value).subject. if (m == null) { alert("No match").match(re)) { alert("Successful match").subject. document.demoMatch.length.regex.demoMatch.subject.demoMatch. for (i = 0. document. i < m.value). var m = re. } } function demoShowMatchClick() { var re = new RegExp(document. i++) { s = s + m[i] + "\n". } // --> </SCRIPT> <FORM ID="demoMatch" NAME="demoMatch" METHOD=POST ACTION="javascript:void(0)"> 43 | P a g e .value = document. } else { var s = "Match at position " + m. if (document.18.regex.value.demoMatch.replacement.demoMatch.demoMatch.index + ":\n".

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

try { if(b==0) { throw("Divide by Zero Error"). var b=0. } else { var c.Expectional Handling <html> <head> <script type="text/javascript"> function divide() { var a=100. } } </script> </head> <body> <p>click to see the result</p> <form> <input type="button" value="Click Me" onClick="divide(). } } catch(e) { alert("Error :"+e). } finally { alert("i always Execute").19."/> </form> </body> </html> 46 | P a g e . c=a/b.

47 | P a g e .

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