Create Static Website with Form

17109001
DR. B.R. AMBEDKAR NATIONAL INSTITUTE OF

TECHNOLOGY JALANDHAR
WT Laboratory
CSX – 330
SESSION – JAN-JUN 2020
Submitted To: Submitted By:

Dr. Avatar Singh Abhay Singh
Assistant Professor 17109001
CSE
1
17109001
INDEX
S. TOPIC DATE PAGE NO REMARKS
NO
1. Practical-1: Write HTML/Java Script 09-01-2020 3

code to display your CV in Web
Browser.
2. Practical-2: Creation and annotation of 16-01-2020 7
static web pages using HTML editor.
3. Practical-3:Create a web page that 16-01-2020 17
includes a map and display the related
information when a hot spot is clicked in
map.
4. Practical-4:Create the several frames 23-01-2020 20
using HTML and display to the web
browser.
5. Create a Scientific Calculator in HTML 20-02-2020 22
using JavaScript.
2
17109001
Practical 1
AIM: - Write HTML/JavaScript code to display your CV in browser.
About HTML:
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be
displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS)
and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page semantically
and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other
objects such as interactive forms may be embedded into the rendered page. HTML provides a means
to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using
angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other
tags such as <p> surround and provide information about document text and may include other tags
as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the
page.
The below html code is used to display a resume. The entire code is kept under main div tag which
has been styles using internal CSS. Rest all the tags are normally used such as headings, paragraphs,
break line, table rows and columns and image tags etc.
HTML Code:-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Resume</title>
</head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
th {
text-align: left;
text-decoration: underline;
}
</style>
<body>
<table cellspacing="10px" style="border: 10px solid #ff9900;padding: 5px;">
<tbody>
<tr>
<th>
<center>
<h1>RESUME</h1>
</center>
3
17109001
</th>
</tr>

<tr>
<td>
<strong><u>Abhay Singh</u></strong><br>
E Mail:-<a href="mailto:abhays0026@gmail.com">abhays0026@gmail.com</a><br>
Contact No. -+91-8770724432<br>
<address>Gwalior (M.P)</address>
</td>
<td style="width: 100px;height:120px;background: url('Abhay.JPG') no-repeat center;background-size:
cover;">

</td>
</tr>

<hr>
<tr>
<th>Objective:</th>
</tr>
<tr>
<td>To associate with your vibrant organization to fully utilize my skills.
</td>
</tr>

<tr>
<th>Educational Qualification</th>
</tr>
<tr>
<td>
<table style="padding: 2px;">
<tbody>
<thead>
<tr>
<th>Course</th>
<th>Institute Name</th>
<th>Year</th>
<th>Percentage</th>
</tr>
</thead>
<tr>
<td>B.Tech</td>
<td>NIT Jalandhar</td>
<td>2021</td>
<td><a href="5TH.pdf">CGPA=8.96</a></td>
</tr>
<tr>
<td>10+2</td>
<td>Army Public School, Gwalior</td>
<td>2016</td>
<td><a href="+2Marksheet.pdf">92%</a></td>
</tr>
<tr>
<td>10<sup>th</sup></td>
<td>Army Public School, Gwalior</td>
<td>2014</td>
<td><a href="10Marksheet.pdf">CGPA-10</a></td>
</tr>
</tbody>
4
17109001
</table>
</td>
</tr>

<tr>
<th>Professional Skills</th>
</tr>
<tr>
<td>
<ul>
<li>C++</li>
<li>Data Structures and Algorithm</li>
<li>Databases - MySQL</li>
<li>Java</li>
<li>Android</li>
</ul>
</td>
</tr>


<tr>
<th>Projects</th>
</tr>
<tr>
<td>
<ul>
<li>Weather API</li>
<li>Hickers Watch</li>
</ul>
</td>
</tr>


<tr>
<th>Hobbies</th>
</tr>
<tr>
<td>
<ul>
<li>Reading</li>
<li>Coding</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
5
17109001
View in Browser:-
6
17109001
Practical 2
AIM: - Write HTML/JavaScript code to create a static website with form.
Description:
About Static Web Pages:
Static web pages are often HTML documents stored as files in the file system and made available by
the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However,
loose interpretations of the term could include web pages stored in a database, and could even
include pages formatted using a template and served through an application server, as long as the
page served is unchanging and presented essentially as stored.
Static web pages are suitable for the contents that never or rarely need to be updated, though modern
web template systems are changing this. Maintaining large numbers of static pages as files can be
impractical without automated tools, such as static site generators. Another way to manage static
pages is Online compiled source code playgrounds, e.g. GatsbyJS and GitHub may be utilized for
migrating a WordPress site into statics web pages. Any personalization or interactivity has to run
client-side, which is restricting.
Advantages of a static website
• Provide improved security over dynamic websites (dynamic websites are at risk to web shell
attacks if a vulnerability is present)
• Improved performance for end users compared to dynamic websites
• Fewer or no dependencies on systems such as databases or other application servers
• Cost savings from utilizing cloud storage, as opposed to a hosted environment
Disadvantages of a static website

• Dynamic functionality must be performed on the client side.
The below html code is used to display homepages and pages linked to it. The home page is a simple
page which has options to access and play audio and video file. It has an external link page
connected to it which is a form page.
Form page is a page which is used to understand various html input elements and their tags such as
button, text box, combo box, radio buttons etc.
HTML Code:-
Form.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<table>
<tr>
7
17109001
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username">
</td>
</tr>
<tr>
<td>
<label for="uemail">Email</label>
</td>
<td>
<input type="text" id="uemail" name="usermail">
<button type="button">Check</button>
</td>
</tr>
<tr>
<td>
<label for="age">Age</label>
</td>
<td>
<input type="text" name="userage" id="age" size="2" maxlength="2">
</td>
</tr>
<tr>
<td>
<label>Country</label>
</td>
<td>
8
17109001
<input type="text" value="India" name="country" disabled>
</td>
</tr>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="password" id="pass">
</td>
</tr>
<tr>
<td>
<label for="res">Resume</label>
</td>
<td>
<input type="file" id="res">
</td>
</tr>
<tr>
<td>
<label>Hobbies</label>
</td>
<td>
<label>
<input type="checkbox" checked> Cricket
</label>
<label>
<input type="checkbox"> Football
9
17109001
</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="f" name="gender"> Female</label>
<label>
<input value="m" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select id="city" name="city">
<option disabled selected>--Choose City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
<option>Channai</option>
<option>Kolkata</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
10
17109001
<option>Gurgram</option>
<option>Jalandhar</option>
<option>Bangluru</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
11
17109001
StaticWebsite.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<style>
body {
12
17109001
font-family: Arial, Helvetica, sans-serif;
.header {
padding: 40px;
text-align: center;
background: #1abc9c;
color: white;
.navbar{
overflow: hidden;
background-color: #333;
.navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
.navbar a.right{
float: right;
*{
box-sizing: border-box;
.row {
display: flex;
flex-wrap: wrap;
.side {
13
17109001
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
.main {
flex: 70%;
background-color: white;
padding: 20px;
.fakeimage {
padding: 20px;
text-align: center;
background: #ddd;
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
.footer {
padding: 20px;
text-align: center;
background: #ddd;
</style>
</head>
<body>
<div class="header">
<h1>Name of college</h1>
<p>address</p>
14
17109001
</div>
<div class="navbar">
<a href="#" class="right">login</a>
<a href="C:\Users\Abhay\Documents\sem6\WT LAB\form.html" class="right">Register</a>
<a href="file:///D:/Books/wt%20lab/india_map.html" class="right">Location</a>
<a href="#" >Departments</a>
<a href="#" >placements</a>
</div>
<div class="row">
<div class="side">
<h3>News</h3>
<ul style="list-style-type: circle;">
<li>news 1...</li>
<li>news 2...</li>
<li>news 3...</li>
</ul>
<h3>Photo Gallary</h3>
<div class="fakeimage" style="height: 60px;">Image</div>
<h3>Contact us</h3>
<p>
Dr B R Ambedkar
National Institute of Technology
G.T. Road, Amritsar Bypass,
Jalandhar (Punjab), India - 144011
Tel : +91-0181-2690301, 2690453, 3082000
</p>
15
17109001
</div>
<div class="main">
<h2>Vision</h2>
<p>"To build a rich intellectual potential embedded with inter-disciplinary knowledge,

human values and professional ethics among the youth, aspirant of becoming engineers and technologists, so
that they contribute to society and create a niche for a successful career."</p>
<h2>Students Corner</h2>
<ul style="list-style-type: square;">
<li>result</li>
<li>time table</li>
<li>sitting arrangements</li>
</ul>
<h2>Placements</h2>
<li>B.tech</li>
<li>M.tech</li>
</ul>
<h2>Downloads</h2>
<li>academic calender</li>
<li>list of holidays</li>
</ul>
</div>
</div>
<div class="footer">
</div>
</body>
16
17109001
Practical 3
AIM: Create a web page that includes a map and display the related information
when a hot spot is clicked in map.
Description:
Introduction to Hotspot Maps

Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable areas.
<imgsrc="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on
where in the image you click.
To create an image map you need an image, and a map containing some rules that describe the
clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other images is that you must
add a usemap attribute:
<imgsrc="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image map, and is used to
create a relationship between the image and the image map.
The Map
Then add a <map> element.
The <map> element is used to create an image map, and is linked to the image by using the name
attribute:
The name attribute must have the same value as the usemap attribute.
Note: You may insert the <map> element anywhere you like, it does not have to be inserted right
after the image.
17
17109001
The Areas
Then add the clickable areas.A clickable area is defined using an <area> element.
Shape
You must define the shape of the area, and you can choose one of these values:
• • rect - defines a rectangular region
• • circle - defines a circular region
• • poly - defines a polygonal region
• • default - defines the entire region
The below html code is used to display a solar system picture which is actually a HOTSPOT map.
The special feature of a hotspot map is that you link the areas on the map to different locations to
connect to it . That locations can be either photos or some other links to some other pages, and pages
linked to it. In the code on clicking on each planet’s photo on hotspot map, user navigates to another
photo which tells more about that planet.
CODE:
<html>
<head>
<title>Hotspot Map</title>
</head>
<body>
<img src="solar_sytem.PNG" alt="Workplace" usemap="#workmap" height="600" width="1500">
<area shape="circle" coords="330,260,25" alt="Mercury" href="mercury.PNG">

<area shape="circle" coords="390,305,35" alt="Venus" href="venus.PNG">
<area shape="circle" coords="515,257,40" alt="Earth" href="earth.PNG">
<area shape="circle" coords="595,327,20" alt="Mars" href="mars.PNG">
<area shape="circle" coords="800,310,65" alt="Jupiter" href="jupiter.PNG">
<area shape="circle" coords="910,180,55" alt="Saturn" href="saturn.PNG">
<area shape="circle" coords="1080,340,45" alt="Uranus" href="uranus.PNG">
<area shape="circle" coords="1240,220,45" alt="Neptune" href="neptune.PNG">
<area shape="circle" coords="1300,95,20" alt="Pluto" href="pluto.PNG">
</map>
</body>
</html>
18
17109001
View in Browser:
19
17109001
Practical 4
AIM: Create Several Frames Using HTML And display the web Browser.
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related
to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a
rectangular region within the document in which the browser can display a separate document,
including scrollbars and borders. An inline frame is used to embed another document within the
current HTML document.
The src attribute is used to specify the URL of the document that occupies the inline frame.
CODE:
Code for main page:

<!DOCTYPE html>
<html>
<head>
<title>Frames</title>
</head>
<body>
<iframe name="frame1" src="frame1.html" width = "300" height = "700">
</iframe>
<iframe name="frame2" src="frame2.html" width = "600" height = "700">
</iframe>
</body>
</html>
Code for frame 1:
<!DOCTYPE html>
<html>
<head>
<title>frame1</title>
</head>
<body>
<p>
<a href="C:\NITJ CSE\udemy web\project1.html" target="frame2"> ABOUT ME</a>
</p>
<p>
<a href="C:\NITJ CSE\udemy web\contactme.html" target="frame2"> CONTACT ME</a>
</p>
</body>
</html>
20
17109001
Code for frame 2:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
View in Browser:
21
17109001
EXPERIMENT-5
AIM- Create a Scientific Calculator in HTML using JavaScript.
HTML CODE-
calculator.html
<html>
<head>
<title>CALCULATOR</title>
<style>
div
{
margin: 50px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.2);
}
table
{
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
#data
{
height: 100%;
width: 100%;
font-size: 30px;
text-align: right;
}
td
{
height: 50px;
width: 80px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
button
{
font-size: 30px;
background-color: transparent;
color: blanchedalmond;
font-family: cursive;
border: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body style="background-color: rgb(6, 48, 58);color:
blanchedalmond;font-family: cursive;">
<div>
<p style="text-align: center;font-size: 50px;font-weight:
bold;">CALCULATOR</p>
22
17109001
<table>
<tr>
<td colspan="7" style="height: 70px;">
<input type="text" id="data" value="">
</td>
</tr>
<tr>
<td>
<button onclick="addChar('fact(', 'fact(');">x!
</button>
</td>
<td>
<button onclick="addChar('Π',
'Math.PI');">Π</button>
</td>
<td>
<button onclick="addChar('(', '(');">(</button>
</td>
<td>
<button onclick="addChar(')', ')');">)</button>
</td>
<td>
<button onclick="addChar('%', '%');">%</button>
</td>
<td>
<button onclick="clear_all()">AC</button>
</td>
<td>
<button onclick="clear_one()">CE</button>
</td>
</tr>
<tr>
<td>
<button onclick="addChar('sin(',
'Math.sin(');">sin</button>
</td>
<td>
<button onclick="addChar('cos(',
'Math.cos(');">cos</button>
</td>
<td>
<button onclick="addChar('tan(',
'Math.tan(');">tan</button>
</td>
<td>
<button onclick="addChar('7', '7');">7</button>
</td>
<td>
</td>
<td>
</td>
<td>
23
17109001
<button onclick="addChar('/', '/');">/</button>

</td>
</tr>
<tr>
<td>
<button onclick="addChar('arcsin(',
'Math.asin(')" id="sin_inv">sin<sup>-1</sup></button>
</td>
<td>
<button onclick="addChar('arccos(',
'Math.acos(')" id="cos_inv">cos<sup>-1</sup></button>
</td>
<td>
<button onclick="addChar('arctan(',
'Math.atan(')" id="tan_inv">tan<sup>-1</sup></button>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<button onclick="addChar('*', '*');">*</button>
</td>
</tr>
<tr>
<td>
<button onclick="addChar('e^', 'Math.E**')"
id="e_pow">e<sup>x</sup></button>
</td>
<td>
<button onclick="addChar('sqrt(',
'Math.sqrt(')">√x</button>
</td>
<td>
<button onclick="addChar('^',
'**')">x<sup>y</sup></button>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<button onclick="addChar('-', '-');">-</button>
</td>
24
17109001
</tr>
<tr>
<td>
<button onclick="addChar('e',
'Math.E')">e</button>
</td>
<td>
<button onclick="addChar('ln(',
'Math.log(');">ln</button>
</td>
<td>
<button onclick="addChar('log(',
'Math.log10(');">log</button>
</td>
<td>
</td>
<td>
<button onclick="addChar('.', '.');">.</button>
</td>
<td>
<button onclick="calculate()">=</button>
</td>
<td>
<button onclick="addChar('+', '+');">+</button>
</td>
</tr>
</table>
</div>
<script>
var text=document.getElementById("data");
text.value="";
var flag=false;
text.readOnly=true;
var expression="";
function addChar(ch1, ch2)
{
if(flag==true)
{
flag=false;
clear_all();
}
text.value=text.value+ch1;
expression=expression+ch2;
}
function clear_one()
{
if(text.value=="")
{
expression="";
return;
}
if(flag==true)
{
25
17109001
flag=false;
clear_all();
}
var ch=text.value.charAt(text.value.length-1);
if( (ch>='0' && ch<='9') || ch=='(' || ch==')' || ch=='.'
|| ch=='+' || ch=='-' || ch=='*' || ch=='/' || ch=='%' ||
ch.charCodeAt(0)==928)
{
text.value=text.value.slice(0, -1);
expression=expression.slice(0, -1);
}
else if(ch=='e')
{
}
else if(ch=='^')
{
}
else
{
var ch=text.value.substr(-2);
if(ch=='ln')
{
}
else
{
if(ch=='log')
{
}
else if(ch=='sin' || ch=='cos' || ch=='tan')
{
if(ch=='arcsin' || ch=='arccos' ||
ch=='arctan')
{
}
else
{
}
}
else
{
26
17109001
if(ch=='fact')
{
}
else if(ch=='sqrt')
{
}
}
}
}
}
function clear_all()
{
text.value="";
expression="";
}
function fact(num)
{
if(num==0 || num==1)
return 1;
let p=1;
for(i=2; i<=num; ++i)
p=p*i;
return p;
}
function calculate()
{
text.value=eval(expression);
flag=true;
}
</script>
</body>
</html>
WEBPAGE-
calculator.html
27
17109001
28

Create Static Website with Form

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

Create Static Website with Form

Uploaded by

Copyright:

Available Formats

17109001

DR. B.R. AMBEDKAR NATIONAL INSTITUTE OF

Submitted To: Submitted By:

1. Practical-1: Write HTML/Java Script 09-01-2020 3

Disadvantages of a static website

<input type="text" id="uname" name="username">

<input type="text" id="uemail" name="usermail">

<input type="text" name="userage" id="age" size="2" maxlength="2">

<input type="text" value="India" name="country" disabled>

<input type="password" id="pass">

<input type="file" id="res">

<input type="checkbox" checked> Cricket

<input type="checkbox"> Football

<input type="radio" value="f" name="gender"> Female</label>

<input value="m" type="radio" name="gender"> Male</label>

<select id="city" name="city">

<option disabled selected>--Choose City--</option>

<textarea rows="4" cols="40"></textarea>

<input type="submit" value="Submit">

<meta name="viewport" content="width = device-width, initial-scale = 1">

font-family: Arial, Helvetica, sans-serif;

padding: 14px 20px;

@media screen and (max-width: 700px) {

<a href="#" class="right">login</a>

<a href="C:\Users\Abhay\Documents\sem6\WT LAB\form.html" class="right">Register</a>

<a href="file:///D:/Books/wt%20lab/india_map.html" class="right">Location</a>

<a href="#" >Departments</a>

<a href="#" >placements</a>

<ul style="list-style-type: circle;">

<div class="fakeimage" style="height: 60px;">Image</div>

<div class="fakeimage" style="height: 60px;">Image</div>

<div class="fakeimage" style="height: 60px;">Image</div>

National Institute of Technology

G.T. Road, Amritsar Bypass,

Jalandhar (Punjab), India - 144011

Tel : +91-0181-2690301, 2690453, 3082000

<p>"To build a rich intellectual potential embedded with inter-disciplinary knowledge,

<ul style="list-style-type: square;">

<ul style="list-style-type: square;">

<ul style="list-style-type: square;">

Introduction to Hotspot Maps

<imgsrc="workplace.jpg" alt="Workplace" usemap="#workmap">

How Does it Work?

<imgsrc="workplace.jpg" alt="Workplace" usemap="#workmap">

<img src="solar_sytem.PNG" alt="Workplace" usemap="#workmap" height="600" width="1500">

<area shape="circle" coords="330,260,25" alt="Mercury" href="mercury.PNG">

Code for main page:

<a href="C:\NITJ CSE\udemy web\project1.html" target="frame2"> ABOUT ME</a>

<a href="C:\NITJ CSE\udemy web\contactme.html" target="frame2"> CONTACT ME</a>

Code for frame 2:

<button onclick="addChar('/', '/');">/</button>

You might also like