Write HTML / Java Scripts To Display Resume' in Web Browser

1. Write HTML / Java scripts to display Resume’ in Web Browser.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center><h1>Resume'</h1></center>
<img style="float: left;" src="1.jpg" alt="myprofile" width=150px;
height=160px;>
&emsp;&emsp;
<h2>&emsp; Vaibhav Pandey</h2>
&emsp;&emsp;
A dreamer with incredible believe in himself. Loves to take
responsibilties . Never feel pressure under any condition.
<br><br><br><hr><br>
<h3>Personal Info:</h3>
&emsp;
<b>Father's Name:</b> Anil Kumar Pandey
<br><br>
&emsp;
<b>Mother's Name:</b> Vijay Lakshmi Pandey<br>
&emsp;
<b>Nationality:</b> Indian<br>
1|Page 16103092
&emsp;
<b>Date of Birth:</b> 15/10/1996<br>
&emsp;
<b>Sex:</b> Male<br>
&emsp;
<hr>
<h3>Interest:</h3><ol><li> ANDROID</li> <li>MACHINE
LEARNING</li><li>WEB DEVELOPING</li></ol>
&emsp;
<hr>
<h3>Hobby:</h3><ul><li>Fast Car Driving</li><li>Making People
laugh</li></ul>
<hr>
</body>
</html>
2|Page 16103092
3|Page 16103092
2. Creation and annotation of static web pages using any HTML
editor
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<caption>Marks List</caption>
<tr bgcolor="#000000" style="color :white;">
<th class="White">Name</th>
<th class="White">Class</th>
<th class="White">RollNo</th>
<th class="White">Marks</th>
4|Page 16103092
</tr>
<tr bgcolor="#FFFF00">
<td>Vaibhav</td>
<td>3rd year</td>
<td>16103092</td>
<td>90</td>
</tr>
<td>Rahul</td>
<td>3rd year</td>
<td>16103067</td>
<td>58</td>
</tr>
<td>Vikash</td>
<td>3rd year</td>
<td>16103094</td>
<td>88</td>
</tr>
</table>
</body>
</html>
5|Page 16103092
6|Page 16103092
3.Create a web page which includes a map and display the related
information when a hotspot is clicked in the map
<html>
<head>
</head>
<body>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!
1d6811.403117785623!2d75.53561109999995!3d31.394791600000
01!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4
v1547718969524" width="600" height="450" frameborder="0"
style="border:0" allowfullscreen></iframe>
</body>
</html>
7|Page 16103092
4.Create the several Frames using HTML and display to the web
browser
<!DOCTYPE html>
<html>
<frameset rows ="50%,*">
<frame src="lb1.html">
<frameset cols ="60%,*">
<frame src="lb2.html" scrolling="no">
<frame src="lab2_map.html" >
</frameset>
</html>
8|Page 16103092
5. Create Scientific Calculator using JavaScript
Html AND JavaScript part of code:

<!DOCTYPE html>
<html>
<head>
<title>Scientific Calculator</title>
<link rel="stylesheet" type="text/css" href="calc.css">
<script type="text/javascript">
function changeSign(input){
if(calculator.display.value.substring(0,1)=="-")
calculator.display.value=calculator.display.value.substring(1,calculat
or.display.value.length)
else
calculator.display.value="-"+calculator.display.value
}
</script>
</head>
<body>
<div id="container">
9|Page 16103092
<div class="screen"><form name="calculator"><input type="text"
name="display" id="scn" size="20" readonly
maxlength="50"></form></div>
<div class="btns">
<p>
<input type="button" value="SIN" class="button black"
onclick="calculator.display.value=Math.sin(calculator.display.value)"
>
<input type="button" value="COS" class="button black"
onclick="calculator.display.value=Math.cos(calculator.display.value)"
>
<input type="button" value="TAN" class="button black"
onclick="calculator.display.value=Math.tan(calculator.display.value)"
>
<input type="button" value="(-)" class="button black"
onclick="changeSign(calculator.display.value)" >
<input type="button" value="ABS" class="button black"
onclick="calculator.display.value=Math.abs(calculator.display.value)"
>
</p>
<p>
<input type="button" value="√" class="button black"
onclick="calculator.display.value=Math.sqrt(calculator.display.value)
">
10 | P a g e 16103092
<input type="button" value="SQR" class="button black"
onclick="calculator.display.value=Math.pow(calculator.display.value,
2)">
<input type="button" value="^" class="button black"
onclick="calculator.display.value=Math.pow(calculator.display.value,
calculator.display.value)">
<input type="button" value="LOG" class="button black"
onclick="calculator.display.value=Math.log(calculator.display.value)"
>
<input type="button" value="ln" class="button black"
onclick="calculator.display.value=Math.E">
</p>
<p>
<input type="button" value="CLR" class="button black"
onclick="calculator.display.value=''">
<input type="button" value="(" class="button black"
onclick="calculator.display.value+='('">
<input type="button" value=")" class="button black"
onclick="calculator.display.value+=')'">
<input type="button" value="M+" class="button black"
onclick="calculator.display.value+='M+'">
<input type="button" value="MOD" class="button black"
onclick="calculator.display.value+='%'">
</p>
<p>
11 | P a g e 16103092
<input type="button" value="7" class="button silver"
onclick="calculator.display.value+='7'">
<input type="button" value="DEL" class="button red"
onclick="calculator.display.value=calculator.display.value=calculator.
display.value.substring(0,calculator.display.value.length-1)">
<input type="button" value="EXIT" class="button red">
</p>
<p>
<input type="button" value="x" class="button silver"
onclick="calculator.display.value+='*'">
<input type="button" value="/" class="button silver"
onclick="calculator.display.value+='/'">
</p>
<p>
12 | P a g e 16103092
<input type="button" value="+" class="button silver"
onclick="calculator.display.value+='+'">
<input type="button" value="-" class="button silver"
onclick="calculator.display.value+='-'">
</p>
<p>
<input type="button" value="." class="button silver"
onclick="calculator.display.value+='.'">
<input type="button" value="EXP" class="button silver"
onclick="calculator.display.value+=Math.exp(calculator.display.value
)">
<input type="button" value="Pi" class="button silver"
onclick="calculator.display.value+=Math.PI">
<input type="button" value="=" class="button silver"
onclick="calculator.display.value=eval(calculator.display.value)">
</p>
</div>
13 | P a g e 16103092
</div>
</body>
</html>
CSS part of Code:

#container{
background-color: #D3D3D3;
height: 450px;
width: 300px;
border-radius: 8px;
position: relative;
top: 100px;
left: 40%;
}
.screen{
background-color: #ffff99;
height: 60px;
width: 270px;
position: relative;
top: 20px;
left: 15px;
}
14 | P a g e 16103092
.screen input{
background-color: #e5dfa0;
height: 56px;
width: 266px;
position: relative;
top: 3px;
left: 2px;
color:black;
font-size: 25px;
text-align: right;
}
.btns{
position: relative;
top: 20px;
left: 15px;
}
.button{
width: 40px;
height: 30px;
border: none;
border-radius: 7px;
margin-left: 10px;
15 | P a g e 16103092
cursor: pointer;
}
.button.black{
color: white;
background-color: black;
border-bottom: 2px solid #647489;
border-top: 2px black;
}
.button.silver{
color: white;
background-color: #647489;
border-bottom: 2px solid black;
}
.button.red{
color: white;
background-color: red;
border-bottom: 2px solid #647489;
}
p{
line-height: 20px;
}
16 | P a g e 16103092
17 | P a g e 16103092
6. To Design web page to create a real time clock with a timing
event using java script event handling mechanism
HTML-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Time Clock</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" type="text/css" media="screen"
href="main.css">
<script src="main.js"></script>
</head>
<body onload="time()">
<h1 id="heading"></h1>
<div >
<h1 id="clock">
</h1>
</div>
18 | P a g e 16103092
</body>
</html>
CSS-
h1{
text-align: center;
color: blue;
background-color:cornsilk;
}
h1#heading
{
color:red;
background-color:dimgray;
}
JAVASCRIPT-
function time() {
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
// document.getElementById('clock').innerHTML=h+":"+m+":"+s;
19 | P a g e 16103092
var t=setTimeout(callTime,1000,h,m,s);
}
function callTime(h,m,s) {
document.getElementById('heading').innerHTML="CLOCK";
var
cell=document.getElementById('clock').innerHTML=h+":"+m+":"+s;
s++;
s=s%60;
if(s==0) m++;
m=m%60;
if(m==0) h++;
h=h%24;
if(m<10) m="0"+m;
if(h<10) h="0"+h;
if(s<10) s= "0"+s;
var t=setTimeout(callTime,1000,h,m,s);
}
20 | P a g e 16103092
21 | P a g e 16103092
7.Create a web page that displays College information using
Stylesheet
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
<style media="screen">
h3#name{
text-align:center;
color: purple;
}
span#s1{
color:blue;
}
h3#adm{
color:#e6005c;
}
h3#camp{color:#1a75ff}
span#camp1
{
color:#003300;
22 | P a g e 16103092
}
</style>
</head>
<body>
<h3 id="name">Dr B R Ambedkar National Institute of Technology,
Jalandhar</h3>
<p>
<span id="s1">Dr. B. R. Ambedkar National Institute of
Technology Jalandhar (NIT Jalandhar or NITJ)</span>,
formerly Regional Engineering College Jalandhar, is a public
engineering institute located in Jalandhar, Punjab, India.
<span id="s1">It is one of the 31 National Institutes of
Technology of India.
</span>
It was founded as a joint venture between the governments of
Punjab and India, originally under the name Punjab Regional
Engineering College, Jalandhar (PREC).
</p>
<h3 id="adm"> Administration </h3>
<p>
Dr B R Ambedkar National Institute of Technology Jalandhar is an
autonomous Institution under the aegis of Ministry of Human
Resource Development, Govt. of India, New Delhi.
23 | P a g e 16103092
The Institution functions under the overall control and guidance
of the Board of Governors, the Director being the Executive Head of
the Institute.
The other administrative bodies of the Institute are the Senate,
the Finance Committee, and the Building and Works Committee - the
Registrar, being the Secretary.
There are five Deans viz. Academic Programmes, Research and
Consultancy, Infrastructure Planning and Development, Students
Welfare, Faculty Welfare.
</p>
<h3 id="camp"> Campus</h3>

<p>
The Institute campus is wide spread over an area of 154 acres. It
has many topographical features,various buildings of different
nature with clean and wide roads surrounded by a green belt.
The campus area has been broadly divided into different functional
zones:<br>
<span id="camp1">(i) institution zone for teaching
departments/centers/administration<br>
(ii) residential zone for the faculty and staff<br>
(iii) students’ hostel zone.<br></span>
Other amenities on the campus include a guest house, a community
centre, a dispensary, shopping centre, banks, post office, sports
complex, playgrounds, Tennis courts, Basketball courts, Volleyball
24 | P a g e 16103092
courts, open air theatre, central seminar hall and night canteen
etc.</p>
</body>
</html>
25 | P a g e 16103092
8.Create a Client side Scripts for validating web form controls using
DHTML
HTML-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
<link rel="stylesheet" type="text/css"href="webform.css"/>
<script src="webform.js">
</script>
</head>
<body >
<form >
<div>
<label for="name">Name:</label> <input placeholder="tarun"
type="text" id="name" name="user_name">
</div>
<div>
26 | P a g e 16103092
<label for="mail">E-mail:</label> <input
placeholder="3ktarun@gmail.com"type="email" id="mail"
name="user_mail">
</div>
<div>
<label for="msg">Message:</label> <textarea
placeholder="Send message to 3ktarun@gmil.com"id="msg"
name="user_message"></textarea>
</div>
<div class="button">
<button type="button" onclick="display()">Send your
message</button>
</div>
</form>
<h1 id="print"></h1>
</div>
</body>
</html>
27 | P a g e 16103092
CSS-
form {
margin: 0 auto;
width: 400px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
p{
display: block;
}
form div + div {
margin-top: 1em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
28 | P a g e 16103092
}
input, textarea {
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #999;
}
input:focus, textarea:focus {
border-color: #000;
}
textarea {
vertical-align: top;
height: 5em;
}
.button {
padding-left: 90px;
}
29 | P a g e 16103092
button {
margin-left: .5em;
}
h1#print
{
text-align:center;
color: rgba(11, 21, 153, 0.404);
}
JAvaScript-
function display() {
var name=document.getElementById("name").value;
var email=document.getElementById("mail").value;
var msg=document.getElementById("msg").value;
document.getElementById("print").innerHTML="Name:"+name+"
Email:"+email+" msg:"+msg;
}
30 | P a g e 16103092
31 | P a g e 16103092
9.Write a Java Servlet for HTTP Proxy Server.
// To save as "<TOMCAT_HOME>\webapps\hello\WEB-
INF\classes\HelloServlet.java"
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
@WebServlet("/sayhello")
public class HelloServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse
response)
throws IOException, ServletException {
// Set the response MIME type of the response message
response.setContentType("text/html");
// Allocate a output writer to write the response message into the
network socket
PrintWriter out = response.getWriter();
// Write the response message, in an HTML page
try {
out.println("<html>");
out.println("<head><title>Hello, World</title></head>");
out.println("<body>");
out.println("<h1>Hello, Vaibhav!</h1>"); // says Hello
// Echo client's request information
out.println("<p>Request URI: " + request.getRequestURI() + "</p>");
out.println("<p>Protocol: " + request.getProtocol() + "</p>");
out.println("<p>PathInfo: " + request.getPathInfo() + "</p>");
out.println("<p>Remote Address: " + request.getRemoteAddr() +
"</p>");
// Generate a random number upon each request
32 | P a g e 16103092
out.println("<p>A Random Number: <strong>" + Math.random() +
"</strong></p>");
out.println("</body></html>");
} finally {
out.close(); // Always close the output writer}}
33 | P a g e 16103092
10. Write a program to use JDBC connevtivity program for maintaining
database by sending queries.
// To save as "<TOMCAT_HOME>\webapps\hello\WEB-
INF\classes\QueryServlet.java".
import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
@WebServlet("/queryagain")
public class anotherquery extends HttpServlet { // JDK 1.6 and above
only
// The doGet() runs once per HTTP GET request to this servlet.
@Override
public void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
// Set the MIME type for the response message
response.setContentType("text/html");
// Get a output writer to write the response message into the network
socket
PrintWriter out = response.getWriter();
Connection conn = null;
Statement stmt = null;
try {
// Step 1: Allocate a database Connection object
Class.forName("com.mysql.jdbc.Driver"); // Needed for JDK9/Tomcat9
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/ebookshop?allowPublicKeyRetrieval=true
&useSSL=false&serverTimezon
e=UTC", "Vaibhav", "9858"); // <== Check!
34 | P a g e 16103092
// database-URL(hostname, port, default database), username,
password
// Step 2: Allocate a Statement object within the Connection
stmt = conn.createStatement();
20
16103092
// Step 3: Execute a SQL SELECT query
String sqlStr = "select * from books where author = "
+ "'" + request.getParameter("author") + "'"
+ " and qty > 0 order by price desc";
// Print an HTML page as the output of the query
out.println("<html><head><title>Query
Response</title></head><body>");
out.println("<h3>Thank you for your query.</h3>");
out.println("<p>You query is: " + sqlStr + "</p>"); // Echo for debugging
ResultSet rset = stmt.executeQuery(sqlStr); // Send the query to the
server
// Step 4: Process the query result set
int count = 0;
while(rset.next()) {
// Print a paragraph <p>...</p> for each record
out.println("<p>" + rset.getString("author")
+ ", " + rset.getString("title")
+ ", $" + rset.getDouble("price") + "</p>");
count++;
}
out.println("<p>==== " + count + " records found =====</p>");
out.println("</body></html>");
} catch (SQLException ex) {
ex.printStackTrace();
} catch (ClassNotFoundException ex) {
} finally {
35 | P a g e 16103092
out.close(); // Close the output writer
try {
// Step 5: Close the resources
if (stmt != null) stmt.close();
if (conn != null) conn.close();
} catch (SQLException ex) {
}
21
16103092
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Yet Another Bookshop</title>
</head>
<body>
<h2>Yet Another Bookshop</h2>
<form method="get" action="http://localhost:9999/hello/queryagain">
<b>Choose an author:</b>
<input type="checkbox" name="author" value="Tan Ah Teck">Ah Teck
<input type="checkbox" name="author" value="Mohammad Ali">Ali
<input type="checkbox" name="author" value="Kumar">Kumar
<input type="submit" value="Search">
</form>
</body>
</html>
36 | P a g e 16103092
37 | P a g e 16103092

Write HTML / Java Scripts To Display Resume' in Web Browser

Uploaded by

Document Information

Original Description:

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

Write HTML / Java Scripts To Display Resume' in Web Browser

Uploaded by

Copyright:

Available Formats

1. Write HTML / Java scripts to display Resume’ in Web Browser.

Html AND JavaScript part of code:

CSS part of Code:

<h3 id="camp"> Campus</h3>

You might also like