1.
CREATE A WEB PAGE USING HTML
PROGRAM:
[Link]
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the Hotspots to go to a new page and read more about the Places:</p>
<img src="[Link]" alt="Workplace" usemap="#workmap" width="209" height="242">
<map name="workmap">
<area shape="rect" coords="83,41,57,63" alt="delhi" href="[Link]">
<area shape="rect" coords="149,129,124,83" alt="calcutta" href="[Link]">
<area shape="rect" coords="89,184,56,226" alt="tamilnadu" href="[Link]">
</map>
</body>
</html>
[Link]
<html>
<body bgcolor="SKYBLUE">
<font face="Times New Roman" size="10" color="RED">
<center><b><i>Calcutta is the wealthy city in WEST BENGAL<br> and <br>It has Famous
"Sunderbans Forests"</i></b></center>
<a href="[Link]">Home Page</a>
</font>
</body>
</html>
[Link]
<html>
<body bgcolor="SKYBLUE">
<font face="Arial" size="10" color="RED">
<center><b><i><tt>Delhi is the capital of our INDIA<br> and <br>More IT companies are
Camped at Delhi</tt></i></b></center>
<a href="[Link]">Home Page</a>
</font>
</body>
</html>
[Link]
<html>
<body bgcolor="cyan">
<font face="Times New Roman" size="10" color="orange">
<center>Chennai is the capital of Tamil Nadu<br> and <br>More IT companies are camped at
Chennai</center>
<a href="[Link]">Home Page</a>
</font></body></html>
OUTPUT
2. 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
PROGRAM:
Inline style sheets.
[Link]:
<html>
<head>
<title>inline sheet</title>
</head>
<body>
<h1> <center>INLINE STYLE SHEETS </h1>
<p style="font-family:Showcard Gothic">Welcome user..</p>
<p style="font-size:24pt;font-family:Microsoft sans serif">Gmail</p>
<p style="font-size:20pt;color:red;font-family:arial">The worlds largest spam free Email provider</p>
<p style="font-size:15pt;color:blue;font-family:Kristen ITC">Login here...</p>
<h4 style="font-family:Lucida Handwriting">
User Name:<input type="text" value="">
Password:<input type="password" value=""></h4>
<input type="submit" value="login">
<input type="reset"value="cancel"><br><br>
</body>
</html>
Embedded style sheets.
[Link]:
<html>
<head>
<title> Embedded style sheet </title>
<style type="text/css">
h1
font-family:times new roman;
color:green;
h2
font-family:arial;
color:red;
left:20px;
h3
font-family:agency fb;
color:blue;
font-size:14pt;
font-family:consolas;
text-align:center;
</style>
</head>
<body>
<h1> <center>EMBEDDED STYLE SHEET </h1>
<h2> CSE </h2>
<h3>Computer Science and Engineering</h3>
<p>
Computer Science & Engineering (CSE) is an academic program
at many universities
which comprises scientific and engineering
aspects of computing.
</p>
</body>
</html>
External style sheets.
[Link]:
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body> <center>
<h1> EXTERNAL STYLE SHEETS</h1></center>
<h2><center>ANNA UNIVERSITY</center></h2>
<h3>Our Institution consists of various departments :<br>
1. CSE<br>
2. ECE<br>
3. MECH<br>
4. EEE<br>
5. MECHT<br>
6. CIVIL<br>
7. IT<br> </h3>
</body>
</html>
[Link]:
h1{
font-family:times new roman;
color:red;}
h2
font-family:consolas;
color:blueviolet;
font-size: 35;}
h3{
font-family:agency fb;
font-size: 30;
color:palevioletred;
text-align: center;
}
OUTPUT:
3. CLIENT-SIDE SCRIPTS FOR VALIDATING WEB FORM CONTROLS USING DHTML
PROGRAM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Forms</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
form {
display: inline-block;
text-align: left;
margin-top: 50px;
form-group {
margin: 10px 0;
label {
float: left;
width: 40%;
text-align: right;
padding-right: 10px;
}
input, select, textarea {
width: 50%;
float: right;
input[type="submit"] {
margin-top: 20px;
width: auto;
clear: both;
clearfix::after {
content: "";
display: table;
clear: both;
</style>
<script type='text/javascript'>
function formValidator() {
var firstname = [Link]('firstname');
var lastname = [Link]('lastname');
var addr = [Link]('addr');
var zip = [Link]('zip');
var Countries = [Link]('Countries');
var username = [Link]('username');
var email = [Link]('email');
var dd = [Link]('dd');
var mm = [Link]('mm');
var yyyy = [Link]('yyyy');
var comment = [Link]('comment');
var password = [Link]('password');
if (isAlphabet(firstname, "Please enter only letters for your First name")) {
if (isAlphabet(lastname, "Please enter only letters for your Last name")) {
if (isNumeric(dd, "Please enter a date")) {
if (madeSelection(mm, "Please choose a month")) {
if (isNumeric(yyyy, "Please enter a year")) {
if (isAlphanumeric(addr, "Enter numbers and letters only for the address")) {
if (isNumeric(zip, "Please enter a valid zip code")) {
if (madeSelection(Countries, "Please choose a country")) {
if (lengthRestriction(username, 6, 8)) {
if (isAlphanumeric(password, "Enter numbers and letters only for the
password")) {
if (emailValidator(email, "Please enter a valid email address")) {
if (notEmpty(comment, "Please fill in the comment")) {
alert("Successful Entry!!");
return true;
}
}
return false;
function notEmpty(elem, helperMsg) {
if ([Link] === 0) {
alert(helperMsg);
[Link]();
return false;
return true;
function isNumeric(elem, helperMsg) {
var numericExpression = /^[0-9]+$/;
if ([Link](numericExpression)) {
return true;
} else {
alert(helperMsg);
[Link]();
return false;
function isAlphabet(elem, helperMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if ([Link](alphaExp)) {
return true;
} else {
alert(helperMsg);
[Link]();
return false;
function isAlphanumeric(elem, helperMsg) {
var alphaExp = /^[a-zA-Z0-9\s-]+$/;
if ([Link](alphaExp)) {
return true;
} else {
alert(helperMsg);
[Link]();
return false;
function lengthRestriction(elem, min, max) {
var input = [Link];
if ([Link] >= min && [Link] <= max) {
return true;
} else {
alert("Please enter between " + min + " and " + max + " characters");
[Link]();
return false;
function madeSelection(elem, helperMsg) {
if ([Link] === "Please Choose") {
alert(helperMsg);
[Link]();
return false;
return true;
function emailValidator(elem, helperMsg) {
var emailExp = /^[\w\-.]+@([\w-]+\.)+[\w-]{2,4}$/;
if ([Link](emailExp)) {
return true;
} else {
alert(helperMsg);
[Link]();
return false;
</script>
</head>
<body>
<h1>Web Form Example</h1>
<form action="#" onsubmit="return formValidator();">
<div class="form-group clearfix">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
</div>
<div class="form-group clearfix">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname">
</div>
<div class="form-group clearfix">
<label for="dd">Date of Birth:</label>
<input type="text" id="dd" name="dd" size="2" maxlength="2" placeholder="DD">
<select id="mm" name="mm">
<option>Please Choose</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<input type="text" id="yyyy" name="yyyy" size="4" maxlength="4" placeholder="YYYY">
</div>
<div class="form-group clearfix">
<label for="addr">Address:</label>
<input type="text" id="addr" name="addr">
</div>
<div class="form-group clearfix">
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip">
</div>
<div class="form-group clearfix">
<label for="Countries">Country:</label>
<select id="Countries" name="Countries">
<option>Please Choose</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<!-- Add more countries as needed -->
</select>
</div>
<div class="form-group clearfix">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group clearfix">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div class="form-group clearfix">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
</div>
<div class="form-group clearfix">
<label for="comment">Comment:</label>
<textarea id="comment" name="comment"></textarea>
</div>
<div class="form-group clearfix">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
OUTPUT
4. INSTALLATION OF APACHE TOMCAT SERVER
OUTPUT:
5a. INVOKING SERVLET FROM HTML FORMS
PROGRAM
[Link]
<html>
<head>
<title>Processing get requests with data</title>
</head>
<body>
<br />
<form action = "Servlet3" method = "get">
<b><p><label>Enter Your name Please!!
<input type = "text" name = "firstname" />
<input type = "submit" value = "Submit" />
</label></p></b>
</form>
</body>
</html>
[Link]
import [Link];
import [Link];
import [Link]; import [Link]; import
[Link];
import [Link];
import [Link];
public class Servlet3 extends HttpServlet {
protected void doGet(HttpServletRequest request, httpServletResponseresponse)
throws ServletException, IOException {
String firstName = [Link]( "firstname");
[Link]( "text/html" );
PrintWriter out = [Link]();
// send XHTML document to client
// start XHTML [Link]( "<html>" );
// head section of [Link]( "<head>" );
[Link]("<title>Processing get requests with data</title>");
[Link]( "</head>" );
// body section of [Link]( "<body>" );
[Link]( "<h1>Hello " + firstName + ",<br />");
[Link]( "Welcome to Servlets!</h1>" );
[Link]( "</body>" );
// end XHTML document [Link]( "</html>" );
[Link](); // close stream to complete the page
public String getServletInfo() { return "Short description";
}
5b. SESSION TRACKING
PROGRAM
[Link]
import [Link].*;
import [Link].*;
import [Link].*;
import [Link].*;
// Extend HttpServlet class
public class GfgSession extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
// Create a session object if it is already not
// created.
HttpSession session = [Link](true);
// Get session creation time. Date createTime
= new Date([Link]());
// Get last access time of this web page. Date lastAccessTime
= new Date([Link]());
String title = "Welcome Back to geeksforgeeks"; Integer visitCount = new Integer(0);
String visitCountKey = new String("visitCount"); String userIDKey = new String("userID");
String userID = new String("GFG");
// Check if this is new comer on your web page. if ([Link]()) {
title = "Welcome to GeeksForGeeks"; [Link](userIDKey, userID);
else {
visitCount = (Integer)[Link]( visitCountKey);
visitCount = visitCount + 1; userID
= (String)[Link](userIDKey);
[Link](visitCountKey, visitCount);
// Set response content type [Link]("text/html"); PrintWriter out = [Link]();
String docType= "<!doctype html public \"-//w3c//dtd html 4.0 "+ transitional//en\">\n";
[Link](
docType + "<html>\n"
+ "<head><title>" + title + "</title></head>\n"
"<body bgcolor = \"#f0f0f0\">\n"
+ "<h1 align = \"center\">" + title + "</h1>\n"
+ "<h2 align = \"center\">Gfg Session Information</h2>\n"
+ "<table border = \"1\" align = \"center\">\n"
"<tr bgcolor = \"#949494\">\n"
+ " <th>Session info</th><th>value</th>"
+ "</tr>\n"
"<tr>\n"
+ " <td>id</td>\n"
+ " <td>" + [Link]() + "</td>"
+ "</tr>\n"
"<tr>\n"
+ " <td>Creation Time</td>\n"
+ " <td>" + createTime + " </td>"
+ "</tr>\n"
"<tr>\n"
+ " <td>Time of Last Access</td>\n"
+ " <td>" + lastAccessTime + "</td>"
+ "</tr>\n"
"<tr>\n"
+ " <td>User ID</td>\n"
+ " <td>" + userID + "</td>"
+ "</tr>\n"
"<tr>\n"
+ " <td>Number of visits</td>\n"
+ " <td>" + visitCount + "</td>"
+ "</tr>\n"
+ "</table>\n"
+ "</body>"
+ "</html>");
File: [Link]
Compile the servlet Session Track described above and add it to the [Link] file. When you
run [Link] for the first time, you should get the following
result:
OUTPUT
If we try to run the same servlet again, we will get the following result.
6a. ONLINE EXAMINATION
PROGRAM:
[Link]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to Online Examination!!!!</title>
</head>
<body>
Welcome to Online Examination!!!!
<form action="exam" method="get">
<label><p> Enter Your name Please!!<br/> <input
type="text"name="name"/>
<br/>
<input type="submit" name="SUBMIT"/>
</p></label>
</form>
</body>
</html>
[Link]
import [Link];import
[Link];
import [Link]; import
[Link];import
[Link];
import [Link]; import
[Link];public class
exam extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponseresponse)
throws ServletException, IOException
{[Link]("text/html");
PrintWriter out=[Link]();
String
name=[Link]("name");
[Link]("<html>");
[Link]("<head>");
[Link]("<title>Online Examination</title>");
[Link]("</head>");
[Link]("<body bgcolor=PINK>");
[Link]("<h2 align=center>Online Examination</h2><hr>");
[Link]("<h3 align=center> Welcome
Mr."+name+"</h3><hr>");[Link]("<h4><u>Terms and
Conditions:</u></h4>"); [Link]("<ul type=disc>");
[Link]("<li>The Paper consists a set of five questions.</li>");
[Link]("<li>Every question consists of two options.</li>");
[Link]("<li>All must be answered</li></ul><hr>");
[Link]("<center><h5><u>Your
Questions</u></h5></center>");[Link]("<hr>");
[Link]("<form method=get action=exam2>");
[Link]("<p>[Link] System is a..................</p>");
[Link]("<input type=radio name=q1
value=0>Hardware");[Link]("<br>");
[Link]("<input type=radio name=q1
value=1>Software");[Link]("<hr>");
[Link]("<p>[Link] of C Language is.................</p>");
[Link]("<br>");
[Link]("<input type=radio name=q2 value=0>Dennis
Richee");[Link]("<br>");
[Link]("<input type=radio name=q2 value=1>James
Thompson");[Link]("<hr>");
[Link]("<p>[Link] of the following is a multitasking,multi
user,multiprocessing);
[Link]("OS........ </p>");
[Link]("<br>");
[Link]("<input type=radio name=q3 value=0>MS
DOS");[Link]("<br>");
[Link]("<input type=radio name=q3 value=1>Windows
NT");[Link]("<hr>");
[Link]("<p>[Link] of Computers is..................</p>");
[Link]("<br>");
[Link]("<input type=radio name=q4 value=1>Charles
babbage");[Link]("<br>");
[Link]("<input type=radio name=q4 value=0>Charles
Dickson");[Link]("<hr>");
[Link]("<p>[Link] is the current generation of computers
?</p>");[Link]("<br>");
[Link]("<input type=radio name=q5
value=0>Fifth");[Link]("<br>");
[Link]("<input type=radio name=q5
value=1>Sixth");[Link]("<hr>");
[Link]("<input type=submit
value=Done>");[Link]("</form>");
[Link]("</body>");
[Link]("</html>");
}
public String getServletInfo()
{ return "A Servlet of theuser";
}
}
[Link]
import [Link];[Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];publicclass exam2 extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponseresponse)throws ServletException, IOException {
int count=0,j;
[Link]("text/html");
PrintWriter out=[Link]();
String q1=[Link]("q1");
String q2=[Link]("q2");
Stringq3=[Link]("q3");
String q4=[Link]("q4");
String q5=[Link]("q5");
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
[Link]("<html>");
[Link]("<head><title>Examination
Results</title></head>");[Link]("<body>");
[Link]("<h2 align=center<Online Examination</h2><hr>");
[Link]("<h3>Number of Questions answered
correctly:</h3>"+count);if(count>=3)
{
[Link]("<hr><h3>Congrats!!! You Have
Passed!!!</h3><hr>");
[Link]("<h4><b>Try Other Tests!!</b></h4>");}
else{
[Link]("<hr><h3>Sorry!!! You Have
Failed!!!</h3><hr>");[Link]("<h4><b>TryAgain:</b></h4>");
}
[Link]("</body>");
[Link]("</html>");}
public String getServletInfo()
{return "A Servlet of the
User";}
}
OUTPUT:
6b. DISPLAYING STUDENT MARKLIST USING JSP
PROGRAM:
[Link]:
<%@ page contentType="text/html" language="java" import="[Link].*"%>
<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style></head><body>
<h2>EXAMINATION RESULT</h2><hr/>
<%
String str=[Link]("regno");
[Link]("[Link]");
Connection con=[Link]("jdbc:odbc:markDS");
Statement stmt=[Link]();
ResultSet rs=[Link]("SELECT*FROM markTab WHERE rno="+str);
while([Link]())
{
%>
Register No:<%=[Link](1)%><br/>
Name:<%=[Link](2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th>
<tr><td>Network Programming and Management</td><td><%=[Link](3)%></td></tr>
<tr><td>Object Oriented Analysis and Design</td><td><%=[Link](4)%></td></tr>
<tr><td>Cryptography and Network Security</td><td><%=[Link](5)%></td></tr>
<tr><td>Embedded Systems</td><td><%=[Link](6)%></td></tr>
<tr><td>Web Technology</td><td><%=[Link](7)%></td></tr>
<tr><td>Software Requirement and Engineering</td><td><%=[Link](8)%></td></tr>
</table>
<%}
%>
<br/>
<a href="[Link]">Back</a>
</body></html>
[Link]:
<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>
<h2>EXAMINATION RESULT</h2><hr/>
<form name="f1" method"GET" action="[Link]">Enter
Your [Link]:
<input type="text" name="regno"/><br/><br/>
<input type="submit" value="SUBMIT"/>
</form>
</body>
<html>
DATABASE
OUTPUT
7. XML SCHEMA FOR STUDENT DETAILS
PROGRAM:
[Link]
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="[Link]"?>
<!DOCTYPE student SYSTEM "[Link]">
<students>
<student>
<sno>801041</sno>
<sname>[Link]</sname>
<dob>05/081991</dob>
<address>Neyveli</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
<student>
<sno>801049</sno>
<sname>[Link]</sname>
<dob>22/07/1990</dob>
<address>Pondicherry</address>
<m1>90</m1>
<m2>95</m2>
<m3>80</m3>
</student>
<student>
<sno>801037</sno>
<sname>[Link]</sname>
<dob>21/01/1991</dob>
<address>Kanyakumari</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
</students>
//[Link]
Student { [Link]:#aabbcc;width:100%;} Sno
{display:block; color:GREEN; [Link]:25pt; } Sname
{ display:block; color:BLACK; [Link]:20pt; }Dob
{ display:block; color:BLUE; [Link]:15pt; } Address
{ display:block; color:BLUE; [Link]:15pt; }m1
{ display:block; color:BLUE; [Link]:15pt; }
m2 { display:block; color:BLUE; [Link]:15pt; }m3
{display:block; color:BLUE; [Link]:15pt;}
//[Link]`
<?xml version="1.0"?>
<!ELEMENT students (student+)>
<!ELEMENT student (sno,sname,dob,address,m1,m2,m3)>
<!ELEMENT sno (#PCDATA)>
<!ELEMENT sname (#PCDATA)>
<!ELEMENT dob (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT m1 (#PCDATA)>
<!ELEMENT m2 (#PCDATA)>
<!ELEMENT m3 (#PCDATA)>
OUTPUT: