LAB MANUAL
CSB331 - WEB TECHNOLOGY LABORATORY
EX.NO NAME OF THE EXPERIMENT PAGE
NO
11
1. Create a web page with the following.
a. Cascading style sheets.
b. Embedded style sheets.
c. Inline style sheets.
Use our college information for the web pages.
12
2. Create a HTML form for reading Name, Age, Gender, Address,
Payment Options, Phone number, Email address, preferred user
name, various Area of Interest etc from the user.
Write a Java Script program to validate the data including the
3. email id entered by the user in the above form are in correct
format. Display error message if input is not in correct format. 14
Call the script when the page is submitted.
Create web page to display the rule and regulations for University
4. Examination. Also display the information like last modified time
and date of file. Use JavaScript concept for the above task. 15
5. Create a HTML form with the following HTML5 controls –
(Color–Date-Email-Month –Range- Number (with inputs from 1 16
to 100) –URL).
A. Using Canvas in HTML5 write a program to draw line, arc,
6. rectangle and circle. Fill colors using gradient style. 19
B. Draw the same shapes using SVG in HTML5
Create a Webpage and insert Audio and Video using “embed” and
1
7. “object” element. 20
8. Write a simple Java Servlet Program to read the values entered
using HTML form controls and display the same. 22
9. Create a Java Servlet program for finding the biggest of three
numbers. Use AJAX to display the result without loading the 25
entire page.
Create a three-tier applications using servlets for displaying
10 student mark list. Fetch the results from the database using the 27
entered register number.
11 Create a three-tier applications using servlets for conducting on-
line examination. Create a login page and verify the user name
and password before allowing for examination. Use Session key
management for the same.
2
EX.No:1
AIM:
To write a HTML program for Creating a web page with the following.
a. Cascading style sheets.
b. Embedded style sheets.
c. Inline style sheets.
Use our college information for the web pages.
CODING:
External style sheet
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal style sheet
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
3
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline style
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
RESULT:
Thus the different types of CSS have been implemented.
EX. No: 2
4
AIM:
To Create a HTML form for reading Name, Age, Gender, Address, Payment Options, Phone
number, Email address, preferred user name, various Area of Interest etc from the user.
CODING:
<html>
<body>
<form>
Name:<br>
<input type="text" name="firstname"><br>
Age:<br>
<input type="text" name="lastname">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<textarea name="address" rows="10" cols="30">
</textarea>
<select name="payment">
<option value="Credit card">Credit card</option>
<option value="Debit card">Debit card </option>
<option value="Net banking">Net banking </option>
</select>
</datalist>
<input type="text" name="Phoneno">
<input type="text" name="Email">
<input type="text" name="Username">
<input type="text" name="Area of interest">
<input type="Submit">
<input type="Reset">
</form>
</body>
</html>
RESULT:
EX.No.3
AIM:
5
To Write a Java Script program to validate the data including the email id entered by the user in
the above form are in correct format. Display error message if input is not in correct format.
Call the script when the page is submitted.
CODING:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm();"
method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
RESULT:
EX. No. 4
AIM:
6
To Create web page to display the rule and regulations for University Examination. Also display
the information like last modified time and date of file. Use JavaScript concept for the above
task.
CODING:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <!-- Fig. 27.14: fig27_14.shtml -->
5
6 <html>
7 <head>
8 <title>Using Server Side Includes</title>
9 </head>
10
11 <body>
12 <h3 style = "text-align: center">
13 Using Server Side Includes
14 </h3>
15
16 <!--#EXEC CGI="/cgi-bin/fig27_15.pl" --><br />
17
18 The Greenwich Mean Time is
19 <span style = "color: blue">
20 <!--#ECHO VAR="DATE_GMT" -->.
21 </span><br />
22
23 The name of this document is
24 <span style = "color: blue">
25 <!--#ECHO VAR="DOCUMENT_NAME" -->.
26 </span><br />
27
28 The local date is
29 <span style = "color: blue">
30 <!--#ECHO VAR="DATE_LOCAL" -->.
31 </span><br />
33 This document was last modified on
34 <span style = "color: blue">
35 <!--#ECHO VAR="LAST_MODIFIED" -->.
36 </span><br />
37
38 Your current IP Address is
39 <span style = "color: blue">
40 <!--#ECHO VAR="REMOTE_ADDR" -->.
41 </span><br />
42
43 My server name is
7
44 <span style = "color: blue">
45 <!--#ECHO VAR="SERVER_NAME" -->.
46 </span><br />
47
48 And I am using the
49 <span style = "color: blue">
50 <!--#ECHO VAR="SERVER_SOFTWARE" -->
51 Web Server.
52 </span><br />
53
54 You are using
55 <span style = "color: blue">
56 <!--#ECHO VAR="HTTP_USER_AGENT" -->.
57 </span><br />
58
59 This server is using
60 <span style = "color: blue">
61 <!--#ECHO VAR="GATEWAY_INTERFACE" -->.
62 </span><br />
63
64 <br /><br />
65 <div style = "text-align: center;
66 font-size: xx-small">
67 <hr />
68 This document was last modified on
69 <!--#ECHO VAR="LAST_MODIFIED" -->.
70 </div>
71 </body>
72 </html>
RESULT:
EX.No.5
AIM:
To Create a HTML form with the following HTML5 controls – (Color–Date-Email-Month –
Range- Number (with inputs from 1 to 100) –URL).
8
CODING:
<!DOCTYPE html>
<html>
<body>
<form>
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<br>
Birthday:
<input type="date" name="bday">
<br>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
<br>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<br>
E-mail:
<input type="email" name="email">
<br>
Birthday (month and year):
<input type="month" name="bdaymonth">
<br>
9
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<br>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" >
<br>
Range:
<input type="range" name="points" min="0" max="10">
<br>
Search Google:
<input type="search" name="googlesearch">
<br>
Telephone:
<input type="tel" name="usrtel">
<br>
Select a time:
<input type="time" name="usr_time">
<br>
Add your URL
<input type="url" name="homepage">
<br>
Select a week:
<input type="week" name="week_year">
<br>
<input type="submit">
10
</form>
</body>
</html>
RESULT:
Ex.No.:6
AIM:
To create a web page Using Canvas in HTML5 write a program to draw line, arc, rectangle
and circle. Fill colors using gradient style and Draw the same shapes using SVG in HTML5.
CODING:
11
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
</canvas>
Line
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Arc
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Rectangle
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Using SVG
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fil
l="yellow" />
</svg>
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
RESULT:
EX. No: 7
AIM:
To Create a Webpage and insert Audio and Video using “embed” and “object” element.
CODING:
12
<!DOCTYPE html>
<html>
<body>
<embed src="horse.ogg">
<embed src="mov_bbb.ogg">
<br>
<object width="400" height="400" data="horse.ogg"> </object>
<object width="400" height="400" data="mov_bbb.ogg"> </object>
</body>
</html>
RESULT:
EX. No. 8
AIM:
Write a simple Java Servlet Program to read the values entered using HTML form controls and
display the same.
CODING:
<html>
<body>
<form action = "HelloForm" method = "POST">
13
First Name: <input type = "text" name = "first_name">
<br />
Last Name: <input type = "text" name = "last_name" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
Servlet program
// Import required java libraries
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
// Extend HttpServlet class
public class HelloForm extends HttpServlet {
// Method to handle GET method request.
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Set response content type
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String title = "Using GET Method to Read Form Data";
String docType =
"<!doctype html public \"-//w3c//dtd html 4.0 " +
"transitional//en\">\n";
out.println(docType +
"<html>\n" +
"<head><title>" + title + "</title></head>\n" +
"<body bgcolor = \"#f0f0f0\">\n" +
"<h1 align = \"center\">" + title + "</h1>\n" +
"<ul>\n" +
" <li><b>First Name</b>: "
+ request.getParameter("first_name") + "\n" +
" <li><b>Last Name</b>: "
+ request.getParameter("last_name") + "\n" +
"</ul>\n" +
"</body>
</html>"
);
}
14
// Method to handle POST method request.
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
RESULT:
EX. No. 9
AIM:
To Create a Java Servlet program for finding the biggest of three numbers. Use AJAX to display
the result without loading the entire page.
CODING:
<html>
<form action="http://localhost/examples/servlet/prime_no" name=form1 method=POST>
enter a number
<input type="text" name="t1">
<input type="text" name="t2">
15
<input type="text" name="t3">
<br>
<input type="submit" name="big "value="Biggest of 3 numbers">
</form>
</html>
Servlet program
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
publicclass prime_no extends HttpServlet
{
publicvoid doPost(HttpServletRequest req,HttpServletResponse res) throws
IOException,ServletException
{
try
{
String t1=req.getParameter("textbox1");
String t2=req.getParameter("textbox2");
String t3=req.getParameter("textbox3");
if((t1>t2) && (t1>t3))
{
big=t1;
}
else if((t2>t1) && (t2>t3))
{
big=t2;
}
else
big=t3;
out.println("<html>\n" +
"<head><title>" + title + "</title></head>\n" +
"<body bgcolor = \"#f0f0f0\">\n" +
"<h1 align = \"center\">" + title + "</h1>\n" +
" <li><b>big</b>: "
"</body>
</html>"
);
16
catch(Exception e)
{
System.out.println(e);
}
RESULT:
Ex.No.10:
AIM:
To Create a three-tier applications using servlets for displaying student mark list. Fetch the
results from the database using the entered register number.
CODING:
Procedure:
1. Create a database students which has the columns Rollno, Name, Marks
2. Create a servlet code to connect database
3. Read from the database and display the student details.
import java.io.*;
import java.sql.*;
17
import javax.servlet.ServletException;
import javax.servlet.http.*;
public class Search extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String rollno=request.getParameter("roll");
int roll=Integer.valueOf(rollno);
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con=DriverManager.getConnection(
"jdbc:oracle:thin:@localhost:1521:xe","system","oracle");
PreparedStatement ps=con.prepareStatement("select * from result where rollno=?"
);
ps.setInt(1,roll);
out.print("<table width=50% border=1>");
out.print("<caption>Result:</caption>");
ResultSet rs=ps.executeQuery();
/* Printing column names */
ResultSetMetaData rsmd=rs.getMetaData();
int total=rsmd.getColumnCount();
out.print("<tr>");
for(int i=1;i<=total;i++)
{
out.print("<th>"+rsmd.getColumnName(i)+"</th>");
}
out.print("</tr>");
/* Printing result */
while(rs.next())
{
out.print("<tr><td>"+rs.getInt(1)+"</td><td>"+rs.getString(2)+"
</td><td>"+rs.getString(3)+"</td><td>"+rs.getString(4)+"</td></tr>");
out.print("</table>");
}catch (Exception e2) {e2.printStackTrace();}
finally{out.close();}
18
}
}
RESULT:
EX. No. 11
AIM:
To Create a three-tier applications using servlets for conducting on-line examination. Create a
login page and verify the user name and password before allowing for examination. Use Session
key management for the same.
CODING:
Login page
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<input type="checkbox" checked="checked"> Remember me
19
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
RESULT:
20
21
