[go: up one dir, main page]
Scribd
Upload
13 views44 pages

HTML...

This document is a laboratory manual for a Web Designing Lab course at K.L.N. Arts & Science College, detailing exercises for creating web pages using HTML. It includes various topics such as text formatting, navigation between web pages, style sheets, image maps, semantic elements, tables, and a registration form. Each exercise outlines the aim, procedure, and expected results for the web design tasks.

Uploaded by

aruncollege2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views44 pages

HTML...

This document is a laboratory manual for a Web Designing Lab course at K.L.N. Arts & Science College, detailing exercises for creating web pages using HTML. It includes various topics such as text formatting, navigation between web pages, style sheets, image maps, semantic elements, tables, and a registration form. Each exercise outlines the aim, procedure, and expected results for the web design tasks.

Uploaded by

aruncollege2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

1

K.L.N. ARTS & SCIENCE COLLEGE

(Affiliated to Alagappa University, Karaikudi)


Pottapalayam – 630 612, Sivagangai District, Tamilnadu

I Year B.Sc., Information Tecnology


II Semester

WEB DESIGNING LAB


(23BCEA3)
LABORATRY MANUAL
2
3

TABLE OF CONTENTS

SNO DATE NAME OF THE PROGRAM PAGE NO. STAFF


SIGNATURE
4

1. Text Formatting
<html>
<head>
<title>
title> Text Formatting </title>
</head> <body
bgcolor=cyan>

<h1>Text Formatting Tags</h1>

<p><b>This is bold text</b></p>


<p><i>This is Italic text</i></p>
<p><u>This is underline text</u></p> <p>This
is <q>quoted text</q></p>

<p><mark>This
This is marked text</mark></p>
<p><code>This is code text</code></p>
<p><del>This is deleted text</del></p> <em>This
text is emphasized</em>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>This is <sup>superscripted</sup> text.<br><br


text.<br><br>
(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>

<p>This is <sub>subscripted</sub> text.<br><br> Water molecular formula:


H<sub>2</sub>O</p>

</body>
</html>
5

Exercise no: 1 Date:

Aim: Design a web page using different text formatting tags.

Procedure:

First open a notepad and type the html script with necessary text formatting tags (<b> </b>,
<i> </i>, <u> </u> etc.,) and save the file as textformat.html (with extension .html)

Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully design a web page using different html tags for text formatting.
6

2. Navigation between web pages


<html>
<head> <style> ul {
list-style-type: none;
margin: 0; padding:
0; overflow: hidden;
background-color: #333;
}
li { float: left; }
li a {
display: block; color: white;
font-size: 150%; text-align:
align:
center; padding: 20px 60px;
text-decoration: none;
} li a:hover { background-
color: blue;
}
</style>
</head>

<body bgcolor=cyan>
<ul>
<li><a href="navbar.html">Home</a></li>
<li><a href="computer.html">Computer</a></li>
<li><a href="Phone.html">Phone</a></li>
</ul>
<h1>This is home page</h1>
</body>
</html>
7
computer.html

<html>
<head><title>Computer</title><
<head><title>Computer</title></head>

<body bgcolor=cyan>
<h1>Simple definition of Computer</h1>

<h3>
A computer is a machine that can be programmed to <br>
carry out sequences of arithmetic or logical operations<br>
(computation) automatically.
</h3>

</body></html>

phone.html

<html>
<head><title>Phone</title></head>

<body bgcolor=cyan>
<h1>Simple definition of Mobile Phone</h1>

<h3>
A mobile phone is a wireless handheld device that allows <br> users
to make and receive calls. <br>
Today's mobile phones
ones do a lot more, accommodating web browsers,<br>
games, cameras, video players and navigational systems. </h3>

</body></html>
8

Exercise no: 2 Date:

Aim: Design a web page with links to different pages and allow navigation between web
pages.

Procedure:

First open a notepad and type the html script with necessary navigation(<nav> </nav>) and
links tags

<li><a href="computer.html">Computer</a></li> and

save the file as navbar.html (with extension .html)

In addition, create two html files namely computer.html, phone.html with necessary
details and save in same folder.

Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:
Successfully design a web page using different html tags for text formatting.
9

3. Style Sheets

3.(a). Internal Style Sheet

<html>
<head>

<style> body {background


{background-
color:cyan;}
h1,h3 {color: blue;} Internal style method in <head> tag p {color:
red;} </style>

</head>

<body>

<h1>This is a heading with blue color.</h1>


<p>This is a paragraph with red color.</p>

<h3>List with green colorr using inline style method</h3>

<ol style="color:green"; type='A'> Inline style method at that place.


<li>Computer</li>
<li>Pendrive</li>
<li>Memord Card</li>
</ol>
</body>
10
11
Exercise no: 3 (a) Date:

Aim: Design a web page demonstrating Internal and Inline style sheet types.
Procedure:

First open a notepad and type the html script with necessary internal and inline style sheet
tags and save the file as InternalSS.html (with extension .html)

Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully design a web page using internal and inline style sheet html tags.
12

3 (b). External Style Sheet

<html>
<head>
<link rel="stylesheet" href="styles.css"> External style
method in <head> tag
</head> link with external file styles.css

<body>

<h1>This is a heading with blue color.</h1>


<p>This is a paragraph with red color.</p>

List with green color and Bold text


<ol>
<li>Computer</li>
<li>Pendrive</li>
<li>Memord Card</li>
<ol>

</body>
</html>
styles.css

body {backgroundcolor:cyan;} h1
{color: blue;} p {color: red;} ol
{color:green;font-weight:
weight: bold;}
13
Exercise no: 3 (b) Date:

Aim: Design a web page demonstrating External style sheet types.

Procedure:

First open a notepad and type the html script with necessary link tags. <link
rel="stylesheet"

href="styles.css"> and save the file as ExternalSS.html (with

extension .html).

In addition open another notepad and type the style tags and save the file as styles.css
(with extension .css) in same folder.

Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully design a web page using link tags and other html tags for external style
sheet.
14

4. Image map

<html>

<body bgcolor = "cyan">


<h2>Image Maps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read
more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="400">


height="400"

<map name="workmap">

<area shape="rect" coords="35,45,270,360" alt="Computer" href="computer.html">


</map>

</body>

computer.html

<html>

<head><title>Computer</title>

</head>

<body bgcolor=cyan>

<h1>Simple definition of Computer</h1>


mputer</h1>
15

<h3>
A computer is a machine that can be
programmed to <br> carry out sequences of
arithmetic or logical operations<br>
(computation) automatically.
</h3>
</body>
</html >
16

Exercise no: 4 Date:

Aim: Design a web page with image maps.

Procedure:

First open a notepad and type the html script with necessary image tags <img> </img>,
<map> </map> and <area> tags

<area shape="rect" coords="35,45,270,360" alt="Computer" href="computer.html"> and


save the file as imagemap.html (with extension .html)

In addition, create one html file namely computer.html with necessary details and save in
same folder.
Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully design a web page using image map tags to display the content details.
17

5. Semantics Elements

<html>
<head>
<title>Semantics Elements</title>

</head>

<body bgcolor=cyan>

<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a> </nav>

<br>

<details>
<summary>What is Computer? </summary>
<p>A computer is a machine that can be programmed to <br> carry
out sequences of arithmetic or logical operations<br>
(computation) automatically. </p>
</details>

<details>
<summary>What
What is Phone? </summary>
<p>A mobile phone is a wireless handheld device that allows <br>
users to make and receive calls. Today's mobile phones do a <br>
lot more, accommodating web browsers, games, cameras, <br>
video players and navigational systems.
systems.</p> </details>

<footer>
<p>Author: Hege Refsnes</p>
18

<p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

</body>
</html>
19

Exercise no: 5 Date:

Aim: Design a web page demonstrating different semantics tags.

Procedure:

First open a notepad and type the html script with necessary semantics tags such as
<header>, <footer>, <nav>, <details> and <summary> tags and save the file as
semantics.html (with extension .html)

Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:
Successfully design a web page using semantics tags to display the content details.
20

6. Creating a Tables
<html>
<head>
<title>HTML Different typs of tables</title>
</head>
<center><h2> Table Format<br><br></center>

<body bgcolor = "cyan">


<table border = "2" bordercolor = "green" bgcolor
= "white">

<tr>
<th> 1</th>
<th> 2 </th>
</tr>

<tr>
<td>Apple</td>
<td>Orange</td>
</tr>

<tr>
<td>Mango</td>
<td>Watermelon</td>
</tr>

</table>

<br><br>

<table border = "2" bordercolor = "blue"


bgcolor = "#55FF88">
<tr>
<th> 1</th>
<th> 2</th>
<th> 3</th>
</tr>

<tr>
<td rowspan = "2">R1</td>
<td>Apple</td>
<td>Mango</td>
</tr>
21

I Ii

<tr>
<td>Orange</td>
<td>Pomegrante</td>
</tr>

<tr>
<td colspan = "3">R2</td>
</tr>

</table>
</body>
</html>

21
22

Exercise no: 6 Date:

Aim: Design a web page with different tables.

Procedure:

First open a notepad and type the html script with necessary table tags such as <table>,
<th>, <tr>, <td>, <rowspan> and <colspan> tags and save the file as tables.html (with
extension .html)

Now that our HTML file is ready, all we need to do is open it using a web browser. Right-
click on the HTML file we created, select "Open with," and choose our preferred web browser
(e.g., Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully design a web page with different tables using table tags to display the
content details.
23

07. REGISTRATION FORM


Exercise no: 7 Date:

Aim:

To write a program to create a regeistartion form ..

Procedure:
• Start the execution of the program
• Basic Structure: A responsive registration form is created
using HTML and CSS for styling, with a simple layout and input fields.
• Form Inputs: The form includes inputs for first name, last name,
email, password (with validation pattern), contact number, and
gender selection.
• Styling: CSS is used for a modern, centered form layout with a clean
design, including background color, box-shadow, and input styling.
• Password Validation: A password pattern enforces strong security,
requiring at least one number, letter, symbol, and a minimum length
of 8 characters.
• Submit Button: A styled submit button is provided with a cursor:
pointer for user interaction.
• Stop the execution of the program

CODING :

<html>
<head>
<title>registration form</title>
</head>
<body bgcolor= Lightblue>
<form action="/cgi-bin/comments exe" method="past"
enctype="application/x-www.form unlecoded”
name: <input type = "text" name = "name"><br>
phone: <input type = "text" name "phone no"><br>
email: <input type "text" name: "email"> <br>
user name: <input type = "text" name = "user name"> <br>
24

password: <input type="text" name: "password"><br>


Gender: male <input type: "radio" name = "male”>female
<input type="radio" name = "female"> 2 <br>
address: <textarea name="address" rows= "5"
column="30"><1 text area>< br>
retype password: <input type="password"> <br>
hobbies
<select name = "hobbies>
<option> dance <option\>
<option> write <\option>
<option> read <\option>
<\select><br>
<input type="submit" name="finish"> <br>
<input type = "reset" value = "rebort"><br>
</form>
</body>
</html>
OUTPUT:

24
25

Result:
Thus the register form created in web successfully.
26

8.EMBADDING WITH MULTIMEDIA

Aim:
To write a program in web to eambadding with multimedia.

Procedure:

Embedding multimedia into your projects can enhance user experience


and engagement. Here's a general procedure for embedding
multimedia, such as audio, video, or interactive elements, into a
webpage:
1. Choose the Right Format: Ensure your multimedia files are in
formats supported by most browsers (e.g., MP4 for videos, MP3
for audio).
2. Use HTML Tags:
o For videos, use the <video> tag:

3. For audio, use the <audio> tag:


4. For embedding other multimedia, such as PDFs or interactive
content, use the <embed> tag:
5. Compress multimedia files to reduce load times.
6. Use responsive design techniques to ensure the content adapts to
different screen sizes.
7. Provide Accessibility:
o Add captions or subtitles for videos.
o Use the alt attribute for images and provide fallback text for
audio and video.
8. Test Across Browsers: Ensure compatibility by testing your
multimedia content on various browsers and devices.

Coding :
26
27

<html>
<head>
<title>HTML EMBAD TAF</title>
</head>
<body>
<p>
<h1>
Playing video using embad tag</h1>
<emad src=”song.mp4”type=”video/mp4”
Width=”450”height=”450”>
</embad></p>
<h1>
Here is an embad pdf documents</h1>
<object data=”file.pdf”type=”applications/pdf” width=”300”height=”400”
</object>
</p></body>
</html>
28

Output:

Result

Successfully the given embad with multimedia runned.

28
29

9. Factorial Number

Exercise no: 9 Date:

Aim:
To write a Recursive JavaScript function to calculate the factorial of a number.

Procedure:
• Start the execution of the program
• Create the function with name of factorial()
• Calculate the factorial values sing for loop
• Print the value of factorial
• Stop the execution of the program

Program:

<html>
<head>
<title>Factorial Numbers</title>
</head> <script>
function factorial()
{
var fact=1;
var a=prompt(“Enter a Number:”); for(i=1;i<-
a;i++)
{
fact=fact * I;
}
Document.write(“Factorial number is” +a” “, fact);
}
</script>
30

<form>
<input
input type=”button” value=”factorial” onclick=”factorial();”>
</form>
</body>
</html>

OUTPUT:

Result:

Thus the calculation of sum of array of integers program is developed and executed successfully.
30
31

10. Fibonacci Series

Exercise no: 10 Date:

Aim:
To write a Java script program and to calculate the Fibonacci series of a number.

Procedure:

• Start the execution of the program


• Create the variables n1,n2,num,I;
• Calculate the Fibonacci series using for loop
• Print the value of fibonacci
• Stop the execution of the program

Program:

<html>
<head>
<title> Fibonacci Series in JavaScript </title>
</head>
<body>
<script>
var n1 = 0, n2 = 1, num, i; var num1 = parseInt (prompt (" Enter
the limit for Fibonacci Series ")); document.write( "Fibonacci Series:
"); for ( i = 1; i <= num1; i++)
{
document.write (" <br> " +
n1); num = n1 + n2; n1 =
n2; n2 = num;
}
32

</script> </body> </html>

OUTPUT:

Result
Thus the calculation of sum of array of integers program is developed and executed
successfully.

32
33

11.Validation
<html>
<body bgcolor=cyan>

<h1>The input pattern attribute</h1>

<form action="submission.html">
Country code: <input type="text"
id="country_code"
name="country_code"
pattern="[A-Za-z]{3}"
z]{3}" title="Three
letter country code"><br>
<small>Format: Mdu</small><br
Mdu</small><br><br>

Password:
<input type="password" id="psw" name="psw" pattern="(?=.*
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A
z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and
at least 8 or more characters" required>

<h1>Display a Telephone
one Input Field</h1>

Enter a phone number:


<input type="tel" id="phone" name="phone" placeholder="123
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
9]{3}" required><br> <small>Format: 123
123-
45-678</small><br><br>

<input type=reset name=reset value="Clear">


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

</form>

</body>
</html>
34
Ex:11 date:

Aim: Design a form and validate all the controls placed on the form.

Procedure:

First open a notepad and type the html script with necessary basic <form>, <input> tags and
write the condition for country code (three letter), password (8 characters) and phone-
number pattern etc. and save the file as validate.html (with extension .html).

Now that our HTML file is ready, all we need to do is open it using a web browser. Right- click
on the HTML file we created, select "Open with," and choose our preferred web browser (e.g.,
Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully design a web page form and validate all the controls placed on the form

34
35
12. Prime Number

<html>
<head>
<title> Prime Number from 1 to 50 </title
</title>
</head>
<body style="background-color:cyan;">
color:cyan;">
<script>
document.write( "<h2>Prime Number between from 1 to 50</h2>");
// declaration of the variables for
(var i = 1; i <= 50; i++)
{
var a = false; for (var
j = 2; j < i; j++)
{ if (i % j == 0)
{
a = true;
break;
}
}
if (a == false)
{
document.write("<br>" + i);
}
}
</script>
</body>
</html>
11

Aim: Write a JavaScript program to


display all the prime numbers
between 1 and 50.

Procedure:

First open a notepad and type the html


script with necessary basic <input> tags
and JavaScript tags such as
36
<script>, JavaScript function for finding prime numbers and save the file as
primenumber.html (with extension .html).

Now that our HTML file is ready, all we need to do is open it using a web browser. Right- click
on the HTML file we created, select "Open with," and choose our preferred web browser (e.g.,
Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully write a JavaScript program to display all the prime numbers between 1
and 50

36
37
13. Sum of Digits
<html>
<head><title>Sum of digits</title>
</head>

<body style = "text-align:


align: center; font
font-size: 20px;background-color:cyan;">
<h1> Find the sum of digits of given number </h1>

Enter a number: <input id = "num"><br><br>


<button onclick = "sumofdigit( )"> Sum of Digits </button>
<p id = "res"></p>

<script>

function sumofdigit( )
{
var n,r,sum=0; n =
document.getElementById("num").value;
while(n>0)
{
r=n%10;
sum=sum+r;
n=Math.floor(n/10);
}
document.getElementById("res").innerHTML =
"Sum of digits of given number is: " + sum ;
}

</script
38
Ex:13 date:

Aim: Write a JavaScript program to accept a number from the user and display the sum of
its digits.
Procedure:

First open a notepad and type the html script with necessary basic <input> tags and
JavaScript tags such as <script>, JavaScript function for finding sum of digits and save the
file as sum_of_digits.html (with extension .html).

Now that our HTML file is ready, all we need to do is open it using a web browser. Right- click
on the HTML file we created, select "Open with," and choose our preferred web browser (e.g.,
Chrome, Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully write a JavaScript program to accept a number from the user and display
the sum of its digits.

38
39

14. To Display the Number of Words


<html>
<head>
<title>Number of Words</title>
</head>

<body style="text-align:
align: center; font
font-size: 20px;background-color:cyan;">
<h1> Find the no of words in given string </h1>

Enter the string: <input id = "str"><br><br>


<button onclick = "words( )"> Number of Words </button>

<p id = "res"></p>

<script>
function words( )
{
var text,count=1,ch,i;
text=document.getElementById("str").value;

for(i=0; i<text.length; i++)


{ ch=text[i]; if(ch == '
')
count++;
}
document.getElementById("res").innerHTML = "No of words in given string is " + count;
}
</script>

</body>
40

Exercise no: 14 Date:

Aim: Write a program in JavaScript to accept a sentence from the user and display the number of
words in it. (Do not use split ( ) function).

Procedure:

First open a notepad and type the html script with necessary basic <input> tags and JavaScript
tags such as <script>, JavaScript function for finding number of words from a sentence and save
the file as no_of_words.html (with extension .html).

Now that our HTML file is ready, all we need to do is open it using a web browser. Right- click on
the HTML file we created, select "Open with," and choose our preferred web browser (e.g., Chrome,
Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully write a program in JavaScript to accept a sentence from the user and display
the number of words in it.
41

15. Calculator
<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>

<style> h1 { text-align: center;


padding: 10px; background-
color: cyan;
color: blue;
}
#clear{ width:
280px;
border: 3px solid gray; borderradius:
3px; padding: 10px;
background-color: red;
}
.formstyle
{
width: 300px; height: 450px;
margin: auto; border: 3px
solid blue; border-radius:
5px; padding:
20px;
}
input
{
width: 60px; background-
color: green; color:
white; border: 3px solid
gray; border-radius: 5px;
padding: 16px; margin:
5px; font-size:
20px;
}

#calc
{
42

width: 250px; border:


4px solid black; border-
radius: 3px; padding:
20px; margin:
auto;
}

</style>

</head>
<body>

<h1> Calculator Program in JavaScript </h1>


<div class= "formstyle">
<form name = "form1">

<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->

<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">


<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' "> <input
type = "button" value = "+" onclick = "form1.answer.value += '+' ">

<br> <br>

<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">


<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' "> <input
type = "button" value = "-" onclick = "form1.answer.value += '-' ">

<br> <br>

<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">


<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">

br> <br>
<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">
43

<input type = "button" value = "0" onclick = "form1.answer.value += '0' "> <input
type = "button" value = "." onclick
nclick = "form1.answer.value += '.' ">

<!-- When we click on the '=' button, the onclick() shows the sum results on the calculator screen. -
>
<input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">

<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" > <br>

</form>
</div>
</body>
</html>
44

Exercise no: 15 Date:

Aim: Write a java script program to design simple calculator.

Procedure:

● First open a notepad and type the html script with necessary basic <input> tags for get
number and operators and JavaScript tags such as <script>, JavaScript function for do
arithmetic operation and save the file as calculator.html (with extension .html).

Now that our HTML file is ready, all we need to do is open it using a web browser. Right- click on
the HTML file we created, select "Open with," and choose our preferred web browser (e.g., Chrome,
Firefox, Edge, etc.).
The browser will interpret the HTML code and display the content accordingly.

Result:

Successfully Write a java script program to design simple calculator.

You might also like