Basic Handson 1

Ex:No:1 Web Page using HTML
Program Code_102
First.html
<html>
<h5>312417104102</h5><br>
<img src=”world.jpg” usemap=”#world”>
<map name=”world”>
<area shape=”circle” coords=”208,322,40” href=”SouthAmerica.html”></area>
<area shape=”rect” coords=”541,194,724,370” href=”India.html”></area>
</map>
</html>
SouthAmerica.html
<html>
<h5>312417104102</h5><br>
<h1><center>South America </h1>
</html>
India.html
<html>
<h5>312417104102</h5><br>
<h1><center>India </h1>
</html>
Output
Result
Thus, the html document to create a new map and display the hotspots in that map is
written and executed. The output is displayed and verified successfully.
Ex:No:2 Web Page using CSS
Program Code_102
Home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="one.css">
<style>
p{
font-family:"Times New Roman",Times,serif;
text-align:center;
margin-top:150px;
font-style:bold;
font-size:30px;
}
</style>
</head>
<body>
<a style="color:blue; font-style:italic ;letter-spacing:2px;"><center>WE MAKE YOU
SHINE<a>
<h1 style="color:red ; "><center>ST.JOSEPH'S INSTITUTE OF TECHNOLOGY</h1>
<a style="color:blue; font-style:bold ;letter-spacing:2px;"><center>ST.JOSEPH'S GROUP
OF INSTITUTIONS<a>
<div>
<ul>
<li><a>HOME</a></li>
<li><a>COURSES</a></li>
<li><a>CONTACT</a></li>
<li><a>INFRASTUCTURE</a></li>
<li><a>ABOUT US</a></li>
</ul>
</div>
<p>
Our college is affiliated to the Anna University and approved by AICTE. The courses offered
from the inception (B.E. - CSE, ECE, EEE & Mech. Engg. & B.Tech. IT) have been
accredited by NBA in 2017 in the shortest span of 6 years since inception, which ascertains
our quality.
</p>
</body>
</html>
One.css
ul li {
margin:0px;
padding:0px;
line-style:none;
float:left;
width:200px;
height:40px;
background-color:black;
color:white;
line-height:40px;
text-align:center;
margin-right:20px;
cursor:pointer;
}
ul li a:hover{
color:pink;
backgorund-color:pink;
}
Output
Result
Thus, the webpage using the internal, external and inline modes of CSS is design and
executed. The output is displayed and verified successfully.
Ex:No:3 Validation using JavaScript
Program Code_102
Login.html
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.getElementById("fname").value;
var y = document.getElementById("pass").value;
if (x == "" || y=="") {
alert("EMPTY NOT ALLOWED"); return;
}
if(x.length < 6){
alert("username must have atleast 6 characters");
}if(y.length < 8 ){
alert("password must have atleast 8 characters");
}
if( y.length > 12){
alert("password must not contain < 12 characters");
}
var passw= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s)/;
if(y.match(passw))
{ alert('LOGIN SUCCESSFUL')
return true;
}else
{alert('Password must contain atleast 1 uppercase,lowercase and special character.!')
}}
</script>
</head>
<body><h5>312417104102<h5><br>
<h1><center>LOGIN PAGE</center></h1><br>
<hr><br>
<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname" id="fname"><br><br>
Password: <input type="password" name="pass" id="pass"><br><br>
<input type="submit" value="Submit">
</form>
<br>New User ? <a href="signup.html">SignUp</a>
</body>
</html>
Signup.html
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var fname = document.getElementById("fname").value;
var pass = document.getElementById("pass").value;
var name = document.getElementById("name").value;
var repass = document.getElementById("repass").value;
var mail = document.getElementById("mail").value;
var ph = document.getElementById("ph").value;
if (fname == "" || pass =="" || name == "" || repass == "" || mail == "" || ph == "") {
alert("EMPTY NOT ALLOWED"); return;
}
if(fname.length < 6){
alert("username must have atleast 6 characters");
}if(pass.length < 8 ){
alert("password must have atleast 8 characters");
}
if( pass.length > 12){
alert("password must not contain < 12 characters");
}
var passw= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s)/;
if(!pass.match(passw))
{ alert('Password must contain atleast 1 uppercase,lowercase and
special character.!')
}
if(!repass.match(pass)){ alert('Password not match')}
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
{
return (true)
}else{
alert("You have entered an invalid email address!")
return (false)
}
}</script>
</head>
<body><h5>312417104102<h5><br>
<h1><center>SIGNUP PAGE</center></h1><br>
<hr><br>
<form name="myForm" onsubmit="return validateForm()">
Name : <input type="text" name="name" id="name"><br><br>
Username : <input type="text" name="fname" id="fname"><br><br>
Password : <input type="password" name="pass" id="pass"><br><br>
Reconfirm Password: <input type="password" name="repass" id="repass"><br><br>
E-mail ID : <input type="text" name="mail" id="mail"><br><br>
Mobile Number : <input type="text" name="ph" id="ph"><br><br>
<input type="submit" value="Submit">
</form>
<br>Already registered ? <a href="form.html">Login</a>
</body>
</html>
Output
`
Result
Thus, to create a form with validation using JavaScript is written and executed. The
output is displayed and verified successfully.
Ex:No:4A Invoke Servlets form HTML forms
Program Code_102
Index.html
<html>
<head>
<title>EXP 4A</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<center>
<h1>LOGIN FORM</h1><br>
<hr><br>
<form action="servlet1" method="POST">
USERNAME : <input type="text" name="uname" value="" /><br><br>
PASSWORD : <input type="password" name="password" value="" /><br><br>
<input type="submit" value="SUBMIT" name="submit" />
</form>
</center>
</body>
</html>
Servlet1.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns = {"/servlet1"})
public class servlet1 extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet servlet1</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet servlet1 at " + request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
PrintWriter pw= response.getWriter();
String user= request.getParameter("uname");
String pass= request.getParameter("password");
if(user.equals("sindhu") && pass.equals("sindhu"))
{
pw.print("Hello "+user);
}
else
{
pw.print("Incorrect username or password");
}
}
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
Output
Result
Thus, the program to create a form and invoke servlets from this HTML is written and
executed. The output is displayed and verified successfully.
Ex:No:4B Invoke Servlets from HTML forms
Program Code_102
Index.html
<html>
<head>
<title>EXP 4B</title>
</head>
<body>
<center>
<hr><br>
USERNAME : <input type="text" name="uname" value="" /><br><br>
SECRET MSG : <input type="hidden" name="myhide" value="SHIVYAA KUTTY"
/><br><br>
</form>
</center>
</body>
</html>
Servlet1.java
} }
@Override
processRequest(request, response); }
@Override
PrintWriter pw= response.getWriter();
String user= request.getParameter("uname");
String pass= request.getParameter("password");
if(user.equals("sindhu") && pass.equals("sindhu"))
{ pw.print("Hello "+user); }
else { pw.print("Incorrect username or password"); }
}
@Override public String getServletInfo() {
}// </editor-fold>
}
Servlet2.java
private int hitcount = 1;protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
} }
@Override
PrintWriter pw = response.getWriter();
String hidemsg = request.getParameter("myhidden");
pw.print(hidemsg);
pw.print("<br>HitCount : " + hitcount);
hitcount++;
}
@Override
}
@Override
}// </editor-fold>
}
Output
Result
Thus, to find hitcount and display the hidden message using the session tracking
mechanism is written and executed. The output is displayed and verified successfully.
Ex:No:5 Web page to create Online Exam
Program Code_102
First.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello
<%
Cookie c[]=request.getCookies();
for(int i=0;i<c.length;i++){
if(c[i].getName().equals("username"))
{
out.print(c[i].getValue());
}
}
%></h1>
<br><hr><br>
1. What tag is used to create a line-break without an extra space between the text blocks?
<br>a). <input type="radio" name="grp1" value="1"/>br
<br>b). <input type="radio" name="grp1" value="2"/>break
<br>a). <input type="radio" name="grp1" value="3"/>line break
<br>b). <input type="radio" name="grp1" value="4"/>lb<br><br>
2. which helps to display horizontal line in HTML
<br>a). <input type="radio" name="grp2" value="1"/>hr
<br>b). <input type="radio" name="grp2" value="2"/>hline
<br>a). <input type="radio" name="grp2" value="3"/>horizontal line
<br>b). <input type="radio" name="grp2" value="4"/>hl<br><br>
3. What tags are used to indicate headings?
<br>a). <input type="radio" name="grp3" value="1"/>h1 - h6
<br>b). <input type="radio" name="grp3" value="2"/>header
<br>a). <input type="radio" name="grp3" value="3"/>heading
<br>b). <input type="radio" name="grp3" value="4"/>head<br><br>
4. What is the role of an attribute in HTML?
<br>a). <input type="radio" name="grp4" value="1"/>it serves just as a comment
<br>b). <input type="radio" name="grp4" value="2"/>it modifies the tag
<br>a). <input type="radio" name="grp4" value="3"/>the tag cannot have attributes
<br>b). <input type="radio" name="grp4" value="4"/>the tag can have
attributes<br><br>
5. What attribute is used to align the contents of an element to the right, center or
left?
<br>a). <input type="radio" name="grp5" value="1"/>direction
<br>b). <input type="radio" name="grp5" value="2"/>alignment
<br>a). <input type="radio" name="grp5" value="3"/>align
<br>b). <input type="radio" name="grp5" value="4"/>location<br><br>
6. What attribute should be used to add an image URL?
<br>a). <input type="radio" name="grp6" value="1"/>url
<br>b). <input type="radio" name="grp6" value="2"/>location
<br>a). <input type="radio" name="grp6" value="3"/>src
<br>b). <input type="radio" name="grp6" value="4"/>address<br><br>
7. Which attribute of the link tag contains the URL location that you are trying to link
to?
<br>a). <input type="radio" name="grp7" value="1"/>target
<br>b). <input type="radio" name="grp7" value="2"/>href
<br>a). <input type="radio" name="grp7" value="3"/>address
<br>b). <input type="radio" name="grp7" value="4"/>location<br><br>
8. What tag is used to create columns in a row?
<br>a). <input type="radio" name="grp8" value="1"/>cell
<br>b). <input type="radio" name="grp8" value="2"/>tc
<br>a). <input type="radio" name="grp8" value="3"/>column
<br>b). <input type="radio" name="grp8" value="4"/>td<br><br>
9. What attribute is used to expand a cell for two or more cells?
<br>a). <input type="radio" name="grp9" value="1"/>colspan
<br>b). <input type="radio" name="grp9" value="2"/>width
<br>a). <input type="radio" name="grp9" value="3"/>rowspan
<br>b). <input type="radio" name="grp9" value="4"/>strech<br><br>
10. The text in between the audio tags is:
<br>a). <input type="radio" name="grp10" value="1"/>for supporting multiple audio
type
<br>b). <input type="radio" name="grp10" value="2"/>for not supported browsers
<br>a). <input type="radio" name="grp10" value="3"/>ignored
<br>b). <input type="radio" name="grp10" value="4"/>for supported
browsers<br><br>
<center><input type="submit" value="Submit" /></center>
</form>
</body>
</html>
Index.html
<html>
<head>
<title>EXP 5</title>
</head>
<body>
<center>
<hr><br>
USERNAME : <input type="text" name="username" value="" /><br><br>
</form>
</center>
</body>
</html>
Servlet1.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.http.Cookie;
}
}
@Override
}
@Override
proteced void doPost(HttpServletRequest request, HttpServletResponse response)
String name = request.getParameter("username");
String pass = request.getParameter("password");
try {
Class.forName("org.apache.derby.jdbc.ClientDriver");
try {
Connection con =
DriverManager.getConnection("jdbc:derby://localhost:1527/login", "sindhu", "sindhu");
Statement st = con.createStatement();
ResultSet rs = st.executeQuery("SELECT * FROM LOGIN");
pw.print("Query executed");
if(name.equals("admin") && pass.equals("admin"))
{
response.sendRedirect("admin.jsp");
}
else{
while(rs.next()){
if(name.equals(rs.getString(1)) && pass.equals(rs.getString(1)))
{
pw.print("If executed");
Cookie c = new Cookie("username",name);
response.addCookie(c);
response.sendRedirect("first.jsp");
}
}
con.close();
}
}catch (SQLException ex) {
Logger.getLogger(servlet1.class.getName()).log(Level.SEVERE, null, ex);
}
}
catch (ClassNotFoundException ex) {
Logger.getLogger(servlet1.class.getName()).log(Level.SEVERE, null, ex);
}
}
}// </editor-fold>
}
Servlet2.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.http.Cookie;
}
}
@Override
}
@Override
String username = "";
String s1 = request.getParameter("grp");
String s2 = request.getParameter("grp2");
int mark =0;
Cookie c[]=request.getCookies();
for(int i=0;i<c.length;i++){
if(c[i].getName().equals("username"))
{
username=c[i].getValue();
}
}
if(s1.equals("YES"))
{
mark++;
} if(s2.equals("1"))
{
mark++;
}
if(s3.equals("1"))
{
mark++;
}
if(s4.equals("2"))
{
mark++;
}if(s5.equals("3"))
{
mark++;
}if(s6.equals("3"))
{
mark++;
}if(s7.equals("2"))
{
mark++;
}if(s8.equals("4"))
{
mark++;
}if(s9.equals("1"))
{
mark++;
}if(s10.equals("2"))
{
mark++;
}
try {
Connection con = DriverManager.getConnection("jdbc:derby://localhost:1527/login",
"sindhu", "sindhu");
st.executeUpdate("UPDATE SCORE SET MARK="+mark+" WHERE USERNAME
= '"+username+"'");
pw.print("Marks Updated successfully");
} catch (SQLException ex) {
System.out.println(ex);
}
}
@Override
}// </editor-fold>
}
Admin.jsp
<%--
Document : admin
Created on : 10 Feb, 2020, 6:35:59 AM
Author : Suppy
--%>
<%@page import="java.io.PrintWriter"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
Connection con = DriverManager.getConnection("jdbc:derby://localhost:1527/login",
"sindhu", "sindhu");
ResultSet rs = st.executeQuery("SELECT * FROM SCORE ");
while(rs.next()){
pw.print("NAME->"+rs.getString("username")+" "+"MARK-
>"+rs.getString("mark")+"<br>");
}
%>
</body>
</html>
Output
Result
Thus, the web page to create online examination system is written and executed. The
output is displayed and verified successfully

Basic Handson 1

Uploaded by

Copyright:

Available Formats

You might also like

Basic Handson 1

Uploaded by

Document Information

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

Basic Handson 1

Uploaded by

Copyright:

Available Formats

Ex:No:1 Web Page using HTML

You might also like