Scribd
Upload
94 views

Web Tech

The document contains the lab assignments for the Web Technologies course. It includes an index listing 9 assignments, an introduction to HTML, CSS, and JavaScript, and the source code for 3 sample assignments - creating a personal hobbies page, designing a webpage for Dairy Food Limited, and creating a menu/table of contents page. The assignments involve using HTML, CSS, and JavaScript to build various basic webpages.

Uploaded by

JHanvi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
94 views

Web Tech

The document contains the lab assignments for the Web Technologies course. It includes an index listing 9 assignments, an introduction to HTML, CSS, and JavaScript, and the source code for 3 sample assignments - creating a personal hobbies page, designing a webpage for Dairy Food Limited, and creating a menu/table of contents page. The assignments involve using HTML, CSS, and JavaScript to build various basic webpages.

Uploaded by

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

Delhi Technical Campus

Greater Noida

Web Technologies
LAB
BCA-204

Submitted By - Submitted To -

1|Page
INDEX

S.No Lab Assignment Page No Date of Execution Teacher’s


Signature

1 Write a program to create


your own page with favourite
hobbies

2 Write a program from


storyboard and design a
webpage of Dairy Food
Limited

3 Write a program for creating a


Menu or a Table of Content
Page.

4 Write a program to create a


webpage using ordered and
unordered lists.

5 Write a program to show


records of the college in the
form of a Table.

6 Write a program to design a


webpage of Dairy Food
Limited.

7 Write a program to create a


Frameset which is divided into
3 sections.

8 Write a program to create a


Calculator using JavaScript.

9 Write a program to create a


form using basic html.

2|Page
INTRODUCTION
HTML
 Create a basic HTML file Hyper Text Markup Language is a set of logical codes
(markup) in parentheses that constitute the appearance of a web document and
the information it contains. It is a language for creating static web pages.
 It specifies how the contents are to be presented on the web page. HTML is not a
case sensitive language so; HTML and html both are same.
 HTML is a text document with formatting codes and this document has the
suffix “.html” or “.htm”.
 This element contains two sub-elements, HEAD and BODY. These elements are
required to form any HTML document.
.

CSS
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

JavaScript
 JavaScript is a lightweight, cross-platform, and interpreted scripting
language.
 It is well-known for the development of web pages, many non-
browser environments also use it.
 JavaScript can be used for Client-side developments as well as
Server-side developments.

3|Page
Ques 1 – Write a program to create your own page with favourite hobbies.

//Source code

<!DOCTYPE html>

<html lang="en">

<title>My Hobbies</title>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-


awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}

.w3-bar,h1,button {font-family: "Montserrat", sans-serif}

.fa-anchor,.fa-coffee {font-size:200px}

</style>

<body>

<!-- Header -->

<header class="w3-container w3-purple w3-center" style="padding:128px 16px">

<h1 class="w3-margin w3-jumbo">Jhanvi Pathak's Hobbies</h1>

<p class="w3-xlarge">BCA 2nd Year Student</p>

<button class="w3-button w3-black w3-padding-large w3-large


w3-margin-top">35318002020</button>

4|Page
</header>

<!-- First Grid -->

<!-- <div class="w3-row-padding w3-padding-64 w3-container"> -->

<div class="w3-content">

<div class="w3-twothird">

<h1><font Face ="arial " Size ="4" color =" #003399"><b>List Of Hobbies </font></b></h1>

<h5 class="w3-padding-32">

<ul>

<li> <font Face ="arial " Size ="4" color ="red"> Photography </font></li>

<li> <font Face ="arial " Size ="4" color ="red"> canvas painting </font> </li>

<li> <font Face ="arial " Size ="4" color ="red"> Collecting Art </font> </li>

<li> <font Face ="arial " Size ="4" color ="red"> Music Festivals </font> </li>

<li> <font Face ="arial " Size ="4" color ="red"> Cooking </font> </li>

<li> <font Face ="arial " Size ="4" color ="red"> Movies </font> </li>

</ul>

</h5>

</div>

</body>

</html>

5|Page
//Outputs

6|Page
Ques 2 – Write a program to design a webpage of Dairy Food Limited.

//Source code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>Dairy Food Limited</title>

<link rel="stylesheet" href="style.css">

<style>

</style>

</head>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&display=swap"
rel="stylesheet">

<link rel="stylesheet" href="style.css">

<style>

/* CSS Reset */

body {

/* color: white; */

margin: 0px;

padding: 0px;

7|Page
background-color:#F08080;

background-size: 100%;

font-family: 'Baloo Bhai 2', cursive;

.left {

color: black;

position: absolute;

left: 60px;

top: 20px;

/* border: 2px solid red; */

display: inline-block;

.left div {

text-align: center;

line-height: 45px;

font-size: 25px;

.mid {

display: block;

width: 36%;

margin: 20px auto;

/* border: 2px solid green; */

8|Page
}

.right {

position: absolute;

right: 34px;

top: 35px;

/* border: 2px solid yellow; */

display: inline-block;

.navbar {

display: inline-block;

.navbar li {

display: inline-block;

font-size: 27px;

.navbar li a {

color: black;

text-decoration: none;

padding: 34px 23px;

.navbar li a:hover, .navbar li a.active {

text-decoration: underline;

color: grey;

9|Page
}

.center {

display: block;

margin-right: auto;

margin-left: auto;

width: 100px;

.btn {

font-family: 'Baloo Bhai 2', cursive;

margin: 0px 9px;

background-color: black;

color: white;

padding: 4px 14px;

border: 2px solid grey;

border-radius: 10px;

font-size: 20px;

cursor: pointer;

.btn:hover {

background-color: rgb(71, 68, 68)

.container {

border: 2px solid black;

margin: 80px 80px;

padding: 60px;

10 | P a g e
width: 30%;

border-radius: 25px;

.container h1 {

text-align: center;

.form-group input {

text-align: center;

display: block;

width: 450px;

padding: 1px;

border: 2px solid black;

margin: 10px auto;

font-size: 25px;

border-radius: 10px;

font-family: 'Baloo Bhai 2', cursive;

.container button {

display: block;

width: 75%;

margin: 20px auto;

</style>

<body>

<header class="header"></header>

11 | P a g e
<!-- Left box for logo -->

<div class="left">

<img src="C:\Users\sriva\OneDrive\Desktop\WhatsApp Image 2022-04-19 at 5.51.38 PM.jpeg"


class="center" alt="">

<div><B>DAIRY FOOD LIMITED</B></div>

<!-- use filter: inver() function to convert an image from black to white colour and from white to
black colour -->

</div>

<!-- Mid box for navbar -->

<div class="mid">

<ul class="navbar">

<li><a href="#" class="active">PRODUCTS</a></li>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">REVIEWS</a></li>

</ul>

</div>

<div class="container">

<h1><I><U><B>FILL IN THE DETAILS TO BOOK YOUR PRODUCT NOW</I></U></B></h1>

<form action="noaction.php"></form>

<div class="form-group">

<input type="text" name="" placeholder="ENTER PRODUCT NAME">

</div>

<div class="form-group">

<input type="text" name="" placeholder="ENTER YOUR LOCATION">

</div>

12 | P a g e
<div class="form-group">

<input type="number" name="" placeholder="ENTER PIN CODE">

</div>

<button class="btn">SUBMIT</button>

</div>

<img src="C:\Users\sriva\OneDrive\Desktop\top-10-dairy-companies-in-the-world.jpg" class="right"


style="width:500px;height:700px;">

</body>

</html>

//Output

13 | P a g e
Ques 3 – Write a program to Create a Menu or a Table of Content Page. Each Menu item
should load a different web page.

//Source code

 Index.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="with=device-width, initial-

scale=1.0">

<title>Experiment 3</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<section class="header">

<h1><a href="index.html">Jhanvi's<span class="logo_colour">Blog</span></a></h1>

<h2>BCA 2nd Year (35318002020)</h2>

<nav>

<div class="nav-links">

<ul>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\index (2).html" target="_self"> Home </a></li>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\LatestNews.html" target="_self">Latest


News</a></li>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\TermsandCodition.html" target="_self">Terms


and Condition</a></li>

</ul>

14 | P a g e
</div>

</nav>

<div class="text-box">

<hl style="color: black;"> Welcome to my Blog! </hl>

<p>Welcome to the first blog post! My name is Jhanvi Pathak of DTC! and I am so excited to share
with you MORE of what BRSS has to offer! The amount of ideas, how-to’s and inspiration whirling
around in my head is ready to jump out. I wanted to start by telling you why I created this blog, what
you will be seeing more of in my posts, and my overall experience of revamping my website.

</p>

<div class="w3-third w3-center">

<img src="file:///C:/Users/hp/OneDrive/Desktop/blog/welcome.jpg" alt="blog"


style="width:650px;height:350px;">

</div>

</div>

 Latest News.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="with=device-width, initial-

scale=1.0">

<title>Experiment 3</title>

<link rel="stylesheet" href="style.css">

<style>

img {

display: block;

margin-left: auto;

15 | P a g e
margin-right: auto;

</style>

</head>

<body>

<section class="header">

<h1><a href="index.html">Jhanvi's<span class="logo_colour">Blog</span></a></h1>

<h2>BCA 2nd Year (35318002020)</h2>

<nav>

<div class="nav-links">

<ul>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\index (2).html" target="_self"> Home </a></li>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\LatestNews.html" target="_self">Latest


News</a></li>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\TermsandCodition.html" target="_self">Terms


and Condition</a></li>

</ul>

</div>

</nav>

<hl>Leave Policy</hl>

<p>

a. The Employee is entitled to ____ (___) days of paid casual leaves in a year and ____(___)
days of sick leave. In addition, the Employee will be entitled to _____ (__)public holidays mentioned
under the Leave Policy of the Employer.

b. The Employee may not carry forward or encash any holiday to the next holiday year.

16 | P a g e
c. In the event that the Employee is absent from work due to sickness or injury, he/she will
follow the Leave Policy and inform the designated person as soon as p

</p>

<div class="w3-third w3-center"> <br>

<img src="file:///C:/Users/hp/OneDrive/Desktop/blog/news.jpg" alt="blog"


style="width:650px;height:350px;">

</div>

</section>

</body>

</html>

 Terms and Conditions.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="with=device-width, initial-

scale=1.0">

<title>Experiment 3</title>

<link rel="stylesheet" href="style.css">

<style>

img {

display: block;

margin-left: auto;

margin-right: auto;

17 | P a g e
}

</style>

</head>

<body>

<section class="header">

<h1><a href="index.html">Jhanvi's<span class="logo_colour">Blog</span></a></h1>

<h2>BCA 2ND Year (35318002020)</h2>

<nav>

<div class="nav-links">

<ul>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\index (2).html" target="_self"> Home </a></li>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\LatestNews.html" target="_self">Latest


News</a></li>

<li><a href="C:\Users\hp\OneDrive\Desktop\blog\TermsandCodition.html" target="_self">Terms


and Condition</a></li>

</ul>

</div>

</nav>

<h1><br></h1>

<h1><br></h1>

<h1><br></h1>

<hl>Leave Policy</hl>

<p><br></p>

<p>a. The Employee is entitled to days of paid casual leaves in a year and days of sick leave. In
addition, the Employee will be entitled to public holidays mentioned under the Leave Policy of the
Employer.

18 | P a g e
<br>

b. The Employee may not carry forward or encash any holiday to the next holiday year.

<br>

c. In the event that the Employee is absent from work due to sickness or injury, he/she will
follow the Leave Policy and inform the designated person as soon as ps</p>

<p><br></p>

<p><br></p>

<p>

Leave Policy</p>

<p>

a. The Employee is entitled to days of paid casual leaves in a year and days of sick leave. In
addition, the Employee will be entitled to public holidays mentioned under the Leave Policy of the
Employer.

b. The Employee may not carry forward or encash any holiday to the next holiday year.

c. In the event that the Employee is absent from work due to sickness or injury, he/she will
follow the Leave Policy and inform the designated person as soon as p

10. Confidentiality

a. The Employee acknowledges that, in the course of performing and fulfilling his duties
hereunder, he may have access to and be entrusted with confidential information concerning the
present and contemplated financial status and activities of the Employer, the disclosure of any of
which confidential information to the competitors of the Employer would be highly detrimental to
the interests of the Employer.

b. The Employee further acknowledges and agrees that the right to

</p>

<div class="w3-third w3-center"> <br>

</div>

19 | P a g e
//Output

20 | P a g e
Ques 4– Write a program to create a webpage using ordered and unordered lists

//Source code

<!DOCTYPE html>

<html lang="en">

<title>Experiment</title>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/


font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}

.w3-bar,h1,button {font-family: "Montserrat", sans-serif}

.fa-anchor,.fa-coffee {font-size:200px}

</style>

<body>

<!-- Header -->

<header class="w3-container w3-purple w3-center" style="padding:128px 16px">

<h1 class="w3-margin w3-jumbo">Healthy Food and Unhealthy Food</h1>

<p class="w3-xlarge">BCA 2 Year Student</p>

<button class="w3-button w3-black w3-padding-large w3-large w3-margin-


top">35318002020</button>

</header>

21 | P a g e
<!-- First Grid -->

<!-- <div class="w3-row-padding w3-padding-64 w3-container"> -->

<div class="w3-content">

<div class="w3-twothird">

<h2>Unordered List</h2>

<h3><font Face ="Georgia (serif)l " Size ="4" color ="#22A9A8"><b>(Healthy


FOOD)</bold></font></h3>

<h5 class="w3-padding-32">

<ul>

<li> <font Face ="Georgia (serif)l " Size ="4" color ="blue"> Broccoli </font> </li>

<li><font Face ="Georgia (serif)l " Size ="4" color ="blue"> Apples </font> </li>

<li><font Face ="Georgia (serif)l " Size ="4" color ="blue"> Wheat germ is high in several
vital nutrients </font></li>

<li><font Face ="Georgia (serif)l " Size ="4" color ="blue"> Sweet potatoes </font></li>

</ul>

</h5>

</div>

<div class="w3-third w3-center">

<h2>Ordered List</h2>

<h3><font Face ="Georgia (serif)l " Size ="4" color ="#22A9A8"><b>(Unhealthy


Food)</bold></font></h3>

<h5 class="w3-padding-32">

<ol>

<li> <font Face ="Georgia (serif)l " Size ="4" color ="#FF5733"> Sugar </font> </li>

22 | P a g e
<li> <font Face ="Georgia (serif)l " Size ="4" color ="#FF5733"> caffeine </font> </li>

<li> <font Face ="Georgia (serif)l " Size ="4" color ="#FF5733"> Soft drinks </font> </li>

<li> <font Face ="Georgia (serif)l " Size ="4" color ="#FF5733"> Salt </font> </li>

</ol>

</h5>

</div>

</div>

</div>

</body>

</html>

//Output

Ques 5 – Write a program to create a to show record of the college in the form of a Table

//Source code

23 | P a g e
<!DOCTYPE html>

<html lang="en">

<title>WEB TECH. EXPERIMENT 5</title>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">

<!--<link rel="stylesheet" type="text/css" href="css/util.css">

<link rel="stylesheet" type="text/css" href="css/main.css">-->

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}

.w3-bar,h1,button {font-family: "Montserrat", sans-serif}

.fa-anchor,.fa-coffee {font-size:200px}

h1 {text-align: center;}

table

font-family: arial, sans-serif;

border-collapse: collapse;

width: 90%;

24 | P a g e
table.center

margin-left: auto;

margin-right: auto;

td, th

border: 2px solid black;

text-align: left;

padding: 8px;

background-color: #FFA07A;

</style>

<body>

<header class="w3-container w3-purple w3-center" style="padding:128px 16px">

<h1 class="w3-margin w3-jumbo">DELHI TECHNICAL CAMPUS</h1>

<p class="w3-xlarge">COLLEGE RECORDS</p>

<button class="w3-button w3-black w3-padding-large w3-large


w3-margin-top">BCA</button>

</header>

<h1><U><b>CLASS RECORD</b></U></h1>

<table class="center">

<tr>

25 | P a g e
<th>S NO.</th>

<th>SUBJECT CODE</th>

<th>SUBJECT NAME</th>

<th>SUBJECT TEACHER NAME</th>

</tr>

<tr>

<td>1.</td>

<td>BCA 202</td>

<td>Mathematics – IV</td>

<td>ABC</td>

</tr>

<tr>

<td>2.</td>

<td>BCA 204</td>

<td>Web Technologies</td>

<td>ABC</td>

</tr>

<tr>

<td>3.</td>

<td>BCA 206</td>

<td>Java Programming</td>

<td>ABC</td>

</tr>

26 | P a g e
<tr>

<td>4.</td>

<td>BCA 208</td>

<td>Software Engineering</td>

<td>ABC</td>

</tr>

<tr>

<td>5.</td>

<td>BCA 210</td>

<td>Computer Networks</td>

<td>ABC</td>

</tr>

</table>

</body>

</html>

//Output

27 | P a g e
28 | P a g e
Ques 6 – Write a program to Create a Frameset divided into 3 sections

//Source code

 Frameset.html

<!DOCTYPE html>

<html>

<head>

<title>Experiment</title>

</head>

<frameset cols="33%,33%,33%">

<frame name = "frame1" src="C:\Users\hp\OneDrive\Desktop\blog\index


(2).html"></frame>

<frame name = "frame2"


src="C:\Users\hp\OneDrive\Desktop\blog\LatestNews.html"></frame>

<frame name = "frame3" src="C:\Users\hp\OneDrive\Desktop\blog\


TermsandCodition.html"></frame>

</frameset>

</html>

 Index.html

From ques 8 index file

 LatestNews.html

From ques 8 latestnews file

29 | P a g e
 TermsandConditions.html

From ques 8 terms&conditions file

//Output

30 | P a g e
Ques 7 – Write a program to create a webpage which displays your County, City and State

//Source code

<!DOCTYPE html>

<html lang="en">

<title>Experiment</title>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-


awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}

.w3-bar,h1,button {font-family: "Montserrat", sans-serif}

.fa-anchor,.fa-coffee {font-size:200px}

</style>

<style>

.dropbtn {

background-color: #96D4D4;

color: blue;

padding: 16px;

font-size: 16px;

31 | P a g e
border: none;

.dropdown {

position: relative;

display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

32 | P a g e
</style>

<body>

<!-- Header -->

<center>

<header class="w3-container w3-cyan w3-center" style="padding:128px 16px">

<h1 class="w3-margin w3-jumbo">Improve your profile</h1>

<p class="w3-xlarge">Add Your Country, City, and State</p>

<button class="w3-button w3-black w3-padding-large w3-large w3-margin-top">NEXT


PAGE</button>

</header>

<!-- <div class="w3-row-padding w3-padding-64 w3-container"> -->

<h2>*All Mandatory</h2>

<div class="dropdown">

<button class="dropbtn">Select Country</button>

<div class="dropdown-content">

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

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

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

</div>

</div>

<div class="dropdown">

<button class="dropbtn">Select State</button>

<div class="dropdown-content">

<a href="#">New Delhi</a>

<a href="#">Tamil Nadu</a>

33 | P a g e
<a href="#">Gujarat</a>

</div>

</div>

<div class="dropdown">

<button class="dropbtn">Select City</button>

<div class="dropdown-content">

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

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

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

</div>

</div>

</div>

</div>

</center>

</body>

</html>

//Output

34 | P a g e
35 | P a g e
Ques 8– Write a program to create a Calculator using JavaScript

//Source code

<!DOCTYPE html>

<html lang="en">

<title>Experiment</title>

<meta charset="UTF-8">

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

<body bgcolor="#FFA07A">

<!-- Header -->

<center>

<h1><b><i><u>CALCULATOR</u></i></b></h1>

<button class="w3-button w3-black w3-padding-large w3-large w3-margin-


top">Using JavaScript</button>

</header>

<h5>

<FORM NAME="Calc">

<TABLE BORDER=6>

<TR>

<TD>

<INPUT TYPE="text" NAME="Input" Size="16">

<br>

</TD>

</TR>

36 | P a g e
<TR>

<TD>

<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value


+= '1'">

<INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value


+= '2'">

<INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value


+= '3'">

<INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value


+= ' + '">

<br>

<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value


+= '4'">

<INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value


+= '5'">

<INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value


+= '6'">

<INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value


+= ' - '">

<br>

<INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value


+= '7'">

<INPUT TYPE="button" NAME="eight" VALUE=" 8 "


OnCLick="Calc.Input.value += '8'">

<INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value


+= '9'">

<INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value


+= ' * '">

37 | P a g e
<br>

<INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="Calc.Input.value


= ''">

<INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value


+= '0'">

<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value


= eval(Calc.Input.value)">

<INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value


+= ' / '">

<br>

</TD>

</TR>

</TABLE>

</FORM>

</h5>

</div>

</div>

</center>

</body>

</html>

//Output

38 | P a g e
39 | P a g e
Ques 9 – Write a program to design a simple html form

//Source code

<!doctype html>

<Html>

<head>

<title> FORM </title>

</head>

<body bgcolor="#CCCCFF">

<hr>

<hr>

<h1> HTML form </h1>

<hr>

<hr>

<form>

<label> Firstname </label>

<input type="text" name="firstname" size="10"/> <br>

<label> Lastname: </label>

<input type="text" name="lastname" size="10"/> <br>

<label>

Course :

</label>

<select>

<option value="Course">Course</option>

40 | P a g e
<option value="BCA">BCA</option>

<option value="BBA">BBA</option>

<option value="MBA">MBA</option>

<option value="MCA">MCA</option>

</select>

<br>

<label>

Gender :

</label><br>

<input type="radio" name="male"/> Male <br>

<input type="radio" name="female"/> Female <br>

<label>

Phone :

</label>

<input type="text" name="country code" value="+91" size="2"/>

<input type="text" name="phone" size="10"/> <br> <br>

Address

<br>

<textarea cols="60" rows="3" value="address">

</textarea>

<br> <br>

Email:

<input type="email" id="email" name="email"/> <br>

<br>

41 | P a g e
Password:

<input type="Password" id="pass" name="pass"> <br>

<br>

<input type="button" value="Submit"/>

<hr>

<hr>

</form>

</body>

</html>

//Output

42 | P a g e

You might also like