Scribd
Upload
132 views

Web Technology LabFile

The document discusses creating static web pages using HTML, including a homepage with audio/video playback and an external linked form page using various HTML input elements. Static web pages are suitable for content that does not frequently change and have advantages like improved security and performance compared to dynamic pages. The code examples show how to build these static pages with HTML tags for structure, media embedding, and different form field types.

Uploaded by

Raj Nish
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
132 views

Web Technology LabFile

The document discusses creating static web pages using HTML, including a homepage with audio/video playback and an external linked form page using various HTML input elements. Static web pages are suitable for content that does not frequently change and have advantages like improved security and performance compared to dynamic pages. The code examples show how to build these static pages with HTML tags for structure, media embedding, and different form field types.

Uploaded by

Raj Nish
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

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>
<!-- BASICS -->
<tr>
<td>
<strong><u>Abhay Singh</u></strong><br>
E Mail:-<a href="mailto:[email protected]">[email protected]</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;">
<!-- <img style="width: inherit;" src="./IMG_6759.JPG"> -->
</td>
</tr>
<!-- OBJECTIVE -->
<hr>
<tr>
<th>Objective:</th>
</tr>
<tr>
<td>To associate with your vibrant organization to fully utilize my skills.
</td>
</tr>
<!-- EDUCATIONAL QUALIFICATION -->
<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>
<!-- PROFESSIONAL SKILLS -->
<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>

<!-- PROJECTS -->


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

<!-- Hobbies -->


<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>

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

<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>

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

<li>B.tech</li>

<li>M.tech</li>

</ul>

<h2>Downloads</h2>

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

<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:

<map name="workmap">

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">

<map name="workmap">

<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('&Pi;',
'Math.PI');">&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>
<button onclick="addChar('8', '8');">8</button>
</td>
<td>
<button onclick="addChar('9', '9');">9</button>
</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>
<button onclick="addChar('4', '4');">4</button>
</td>
<td>
<button onclick="addChar('5', '5');">5</button>
</td>
<td>
<button onclick="addChar('6', '6');">6</button>
</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(')">&#8730;x</button>
</td>
<td>
<button onclick="addChar('^',
'**')">x<sup>y</sup></button>
</td>
<td>
<button onclick="addChar('1', '1');">1</button>
</td>
<td>
<button onclick="addChar('2', '2');">2</button>
</td>
<td>
<button onclick="addChar('3', '3');">3</button>
</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>
<button onclick="addChar('0', '0');">0</button>
</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')
{
text.value=text.value.slice(0, -1);
expression=expression.slice(0, -6);
}
else if(ch=='^')
{
text.value=text.value.slice(0, -1);
expression=expression.slice(0, -2);
}
else
{
var ch=text.value.substr(-2);
if(ch=='ln')
{
text.value=text.value.slice(0, -2);
expression=expression.slice(0, -8);
}
else
{
var ch=text.value.substr(-3);
if(ch=='log')
{
text.value=text.value.slice(0, -3);
expression=expression.slice(0, -10);
}
else if(ch=='sin' || ch=='cos' || ch=='tan')
{
var ch=text.value.substr(-6);
if(ch=='arcsin' || ch=='arccos' ||
ch=='arctan')
{
text.value=text.value.slice(0, -6);
expression=expression.slice(0, -9);
}
else
{
text.value=text.value.slice(0, -3);
expression=expression.slice(0, -8);
}
}
else
{

26
17109001

var ch=text.value.substr(-4);
if(ch=='fact')
{
text.value=text.value.slice(0, -4);
expression=expression.slice(0, -4);
}
else if(ch=='sqrt')
{
text.value=text.value.slice(0, -4);
expression=expression.slice(0, -9);
}
}
}
}
}
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

You might also like