Name - Neeraj Singh Course - Bca V Section - C Roll Number-1921105 Subject Name - Web Development Subject Code - PBC-501
Uploaded by
NoobToProytName - Neeraj Singh Course - Bca V Section - C Roll Number-1921105 Subject Name - Web Development Subject Code - PBC-501
Uploaded by
NoobToProytName - Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 1 : Write a program in HTML in design a Resume using appropriate tags.
OBJECTIVE: To understand basic HTML tags for making a resume and to understand the basic structure of html
document.
SOURCE CODE:
<html>
<title>Resume</title>
<head></head>
<body>
<h1>SAM</h1>
<p style="text-align:right;">
Ph:+91123456789<br>
Email:[email protected]<br>
</p>
<hr>
<h2><u>Objective</u></h2>
<p1>To work in a challenge and dynamic environment to keep value for the organization which I will
serve and represent myself to contribute to the best of my abilities</p1>
<h2><u>Professional Qualitfication</u></h2>
<p1>
<ul>
<li>Diploma in computer applications and designing from ESTC-ACEL</li>
<li>Certification in Google Ads provided by Google</li>
</ul>
</p1>
<h2><u> Academic Qualitfication</u></h2>
<p1>
<ul>
<li>Bachelor of Computer Applications from Graphic Era Hill University</li>
</ul>
</p1>
<h2><u>Article ship Training:</u></h2>
<p1>ABC and Co.</p1>
<p1>Time Perid:April 2004 to till date</p1>
<h2><u>Training Exposure-</u></h2>
<ul>
<li>Preparation of project report for dept syndication.</li>
<li>Sending proposal to bankers, meeting with project finance department to pursue the project loan.
</li>
<li>Colection & Analysis of data on behalf of ABC Ltd. for conducting Credit Rating. </li>
Name - Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
<li>Software Testing</li>
<li>A</li>
<li>Preparation and finalization of account. </li>
</ul>
<h2><u>Computer Proficiency-</u></h2>
<ul>
<li>Conversant with computer based environment-having knowledge in MS Office (Word, Excel &
PowerPoint),Internet Application, Accounting software (Tally).</li>
</ul>
<h2><u>Achievements-</u></h2>
<ul>
<li>Ranked 40th in the CA Final Examination. </li>
<li>Ranked Third in BCA Examination in the college.</li>
</ul>
<h2><u>Extra Curricular Activities</u></h2>
<ul>
<li>Participated in Quiz contests and Cultural activities at school level. </li>
<li> Listening music’s. </li>
<li>Played as Caption of School and College Cricket Team. </li>
</ul>
<h2><u>Personal information-</u></h2>
Date Of Birth *40 5 March 2000<br>
Nationality *40 Indian<br>
Language known *40 English and Hindi<br>
Address *40 Garhi Cantt, Dehradun,248141<br>
</body>
</html>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 3: To create a web page in HTML to show the Block Level Elements and Text Level
Elements.
OBJECTIVE : To understand block level elements bold italics underline and how to use formatting tags to format the
html document and use font tag for applying different styles and color to an html text.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Block and Tags</title>
</head>
<body>
<div>
<h1>This text is inside a div. Div is a block element</h1>
<p>The next line is a address block element used to show an address</p>
<address>Dehradun,Uttrkhand 248141</address>
<br>
<p1>The form is also a block level element</p1>
<form align="center">
<label for="fname">First Name</label><br>
<input type="text" id="fname">
</form>
</div>
<font size="10px">This text is size 10</font>
<br>
<font color="red" size="10px">This is a red text</font><br>
<font size="10px"><i>This is a italic text</i></font>
</body>
</html>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
Output:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 4 : Write a HTML code to draw figure (Hut).
OBJECTIVE: To understand the use of pre tag for making a specific figure like. a hut
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hut</title>
</head>
<body>
<center><pre>
/\--\ /\--\
/\\/\\
/____\--/____\__\
| oo | | oo | |
| __ | | __ |oo|
</pre></center>
</body>
</html>
OUTPUT-
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 5: WAP in HTML to create a web page to show various confectionary items using
ordered and unordered list.
OBJECTIVE: To understand the use of ordered and unordered list for making a list of items on webpage, these can b
numbered or bulleted.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CONFECTIONARY ITEMS</title>
</head>
<style type="text/css">
.secondary-text{
font-size: 18px;
}
</style>
<body style="margin:50px 50px 0px 50px">
<h1 align="center">CONFECTIONARY</h1>
<p1 class="secondary-text">Confectionery is the art of making confections, which are food items that are rich
in sugar and carbohydrates. Exact definitions are difficult.In general, however, confectionery is divided into tw
broad and somewhat overlapping categories: bakers' confections and sugar confections.The occupation of
confectioner encompasses the categories of cooking performed by both the French patissier (pastry chef) an
the confiseur (sugar worker).
<br>
Bakers' confectionery, also called flour confections, includes principally sweet pastries, cakes, and similar
baked goods. Baker's confectionery excludes everyday breads, and thus is a subset of products produced by
baker.</p1>
<h2>Confectionary Items List</h2>
<h3>Unodered List</h3>
<ul>
<li>Toffees</li>
<li>Cake</li>
<li>Choclates</li>
<li>Caramel</li>
<li>Donuts</li>
</ul>
<h3>Orderd List</h3>
<ol>
<li>Toffees</li>
<li>Cake</li>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
<li>Choclates</li>
<li>Caramel</li>
<li>Donuts</li>
</ol>
</body>
</html>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 6 : Design your time-table using all the table tags along with its attributes.
OBJECTIVE : To understand how to design the tabular data in html document which is in the format of rows and
columns for example :- making a time table.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bca 3C Time Table</title>
</head>
<body>
<center><img src="C:\Users\iaman\Downloads\logo.jpg" style="height: 100px; width: 400px;"></center>
<h4><center>SCHOOL OF COMPUTING</center></h4>
<h4><center>TIME-TABLE JULY-DECEMBER 2021</center></h4>
<table cellpadding="10" border="2" align="center" rules="all">
<tr>
<th align="center">Days</th>
<th align="center">9:00-9:55</th>
<th>9:55-19:50</th>
<th>11:10-12:05</th>
<th>12:05-1:00</th>
<th>1:00:1-55</th>
<th>1:55-2:50</th>
<th>3:10-4:05</th>
<th>4:05-5:00</th>
</tr>
<tr>
<td align="center">Mon</td>
<td align="center">TBC 501</td>
<td align="center">TBC 502</td>
<td align="center">TBC 504</td>
<td align="center">TBC 503</td>
<td align="center" rowspan="6"><b>L<br>u<br>n<br>c<br>h
<br><br>B<br>r<br>e<br>a<br>k</b></td>
<td align="center" colspan="3">Pbc 501</td>
</tr>
<tr>
<td align="center">Tue</td>
<td align="center">TBC 502</td>
<td align="center">TBC 501</td>
<td align="center">TBC 504</td>
<td align="center">TBC 505</td>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
<td align="center" colspan="3">Pbc 502</td>
</tr>
<tr>
<td align="center">Wed</td>
<td align="center">TBC 504</td>
<td align="center">TBC 503</td>
<td align="center">TBC 501</td>a
<td align="center">TBC 502</td>
<td align="center" colspan="3"></td>
</tr>
<tr>
<td align="center">Thur</td>
<td align="center">TBC 505</td>
<td align="center">TBC 506</td>
<td align="center">TBC 503</td>
<td align="center">XBC 501</td>
<td></td>
<td align="center" colspan="2"></td>
</tr>
<tr>
<td align="center">Fri</td>
<td align="center">TBC 506</td>
<td align="center">TBC 503</td>
<td align="center">XBC 501</td>
<td></td>
<td></td>
<td align="center" colspan="2"></td>
</tr>
<tr>
<td align="center">Sat</td>
<td align="center">SBC 501</td>
<td align="center">TBC 506</td>
<td align="center">TBC 505</td>
<td></td>
<td></td>
<td align="center" colspan="2"></td>
</tr>
<tr>
<th>CODE</th>
<th align="center" colspan="3">SUBJECTS</th>
<th colspan="4">Faculty</th>
<th align="center">LTPC</th>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
</tr>
<tr>
<td>TBC 501</td>
<td colspan="3" align="center">WEB TECHNOLOGY</td>
<td colspan="4" align="center">MS DEEPIKA SHARMA</td>
<td align="center">3003</td>
</tr>
<tr>
<td>TBC 501</td>
<td colspan="3" align="center">MOBILE APPLICATION DEVELOPMENT</td>
<td colspan="4" align="center">MS PRIYA KOHLI</td>
<td align="center">3003</td>
</tr>
<tr>
<td>TBC 502</td>
<td colspan="3" align="center">CRYPTOGRAPHY</td>
<td colspan="4" align="center">MS SAKSHI PAINULY</td>
<td align="center">3104</td>
</tr>
<tr>
<td>TBC 503</td>
<td colspan="3" align="center">SOFTWARE ENGINEERING</td>
<td colspan="4" align="center">MS NIDHI MEHRA</td>
<td align="center">3003</td>
</tr>
<tr>
<td>TBC 504</td>
<td colspan="3" align="center">INTERNET OF THINGS</td>
<td colspan="4" align="center">MR UMANG</td>
<td align="center">3003</td>
</tr>
<tr>
<td>TBC 505</td>
<td colspan="3" align="center">FINANCIAL ACCOUNTING</td>
<td colspan="4" align="center">DR MEGHA</td>
<td align="center">3003</td>
</tr>
<tr>
<td>TBC 506</td>
<td colspan="3" align="center">CAREER SKILLS-III</td>
<td colspan="4" align="center">MS ANCHAL</td>
<td align="center">2002</td>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
</tr>
<tr>
<td>PBC 501</td>
<td colspan="3" align="center">WEB TECH AND IOT LAB</td>
<td colspan="4" align="center">MS DEEPIKA/MR UMANG</td>
<td align="center">0042</td>
</tr>
<tr>
<td>PBC 502</td>
<td colspan="3" align="center">MOBILE APPLICATION DEVELOPMENT LAB</td>
<td colspan="4" align="center">MS PRIYA KOHLI</td>
<td align="center">0042</td>
</tr>
<tr>
<td>SBC 501</td>
<td colspan="3" align="center">SEMINAR</td>
<td colspan="4" align="center">MS SAKSHI PAINULY</td>
<td align="center">0021</td>
</tr>
</table>
</body>
</html>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 7: Create the table using appropriate tags:
OBJECTIVE : To understand how to design the tabular data in html document which is in the format of rows and
columns.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
</head>
<body>
<table border="2px" rules="all" align="center" style="margin-top: 50px;" cellpadding="20px">
<tr>
<th colspan="6">Time Table and Fare List</th>
</tr>
<tr>
<th rowspan="2">Name Of Train</th>
<th rowspan="2">Place</th>
<th rowspan="2">Destination</th>
<th colspan="2">Time</th>
<th rowspan="2">Fare</th>
</tr>
<tr>
<td>Arrival</td>
<td>Departure</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
<td></td>
</tr>
</table>
</body>
</html>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 8 : Write a HTML code to create a hyperlink from top of your page to the bottom of the
same page.
OBJECTIVE : To understand the concept of linking page from top to bottom.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Top-Bot</title>
</head>
<body>
<section id="header"></section>
<p align="center">This is the top of the page</p>
<center><a href="#footer">Go to bottom</a></center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
r><br><br>
<section id="Mid"></section>
<p>The mid of page</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
r><br>
<section id="footer"></section>
<p align="center">This is the bottom of page</p>
<center><a href="#header">Go to the top</a></center>
</body>
</html>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 9 : Write a HTML code to demonstrate the image in an news article.
OBJECTIVE: To understand the working of image in website content.
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>Article</title>
</head>
<body>
<img src="image.png" align=Left hspace=50 alt="">
<p>The finance ministry has given its go ahead to 8.5% rate of interest on provident fund deposit for 2020
paving way for the Employees' Provident Fund Organisation to credit the interest in accounts of over 60 millio
beneficiaries.
The move is expected to bring some cheer a week ahead of Diwali. Labour secretary Sunil Barthwal
confirmed the development to ET. "Approval was received from the finance ministry today. It will be notified
as soon as possible," he said.
The labour ..
The move is expected to leave EPFO with a surplus of Rs 300 crore compared to the preceding financia
year when it had a surplus of Rs 1000 crore.
The central board of trustees of EPFO, headed by the labour minister, had in March this year approved the
interest rate of 8.5% for 2020-21, same as the previous year. However, the labour ministry has to mandatorily
seek approval from the finance ministry on the proposed rate. The process was fast tracked after top officials
the labour mi ..
</p>
</body>
</html>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 10 : Write a HTML code to create a web page with four frames.
OBJECTIVE : To understand the concept of frames in HTML.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Frames</title>
</head>
<frameset rows = "10%,70%,10%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "mid" src = "/html/mid_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
<body>
</body>
</html>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 11: Write a HTML program to demonstrate the use of following tags.
i. DIV ii. SPAN
OBJECTIVE : To understand the use of DIV and SPAN tag.
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>Document</title>
</head>
<body>
<div>This text is inside a div. We can give this div a class and then use it in css. Div acts as a
container</div>
<span>This text is inside a span. Span helps us to give small breaks in text so we can format them
differently</span>
</body>
</html>
OUPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 12: Demonstrate all the type of CSS with the help of an example.
OBJECTIVE : To understand the use of CSS in creating web pages.
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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
h2{
color: yellow;
}
</style>
<body>
<h1 style="color: purple;">This text is formmated using inline css</h1>
<h2>This text is formmated using internal css</h2>
<h3>This text is formmated using external css</h3>
</body>
</html>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 13: Design a Student registration form with the use of form controls.
OBJECTIVE : To design a registration form to take the user input and collect the relevant info according to
the requirements of a particular organization or business.
DESCRIPTION :
SOURCE CODE:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SignUp Page</title>
</head>
<link rel="stylesheet" href="../styles/register.css">
<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=Glory:wght@100&display=swap" rel="stylesheet">
<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=Open+Sans:wght@300&display=swap"
rel="stylesheet">
<body>
<div class="container">
<form >
<h1 align="center">Sign Up</h1>
<div class="row">
<div class="col">
<label>Name</label>
<div class="input-box">
<input align="left" type="text" id="name" required>
</div>
</div>
<div class="col">
<label>Phone Number</label>
<div class="input-box">
<input align="right" type="number" required>
</div>
</div>
<div class="col">
<label>Email</label>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
<div class="input-box">
<input type="email" name="email" required>
</div>
</div>
<div class="col">
<label>Age</label>
<div class="input-box">
<input type="number" name="address" required>
</div>
</div>
<div class="col">
<label>Password</label>
<div class="input-box">
<input type="Password" name="Password" required>
</d
iv>
</div>
</div>
<div class="col">
<label>Confirm Password</label>
<div class="input-box">
<input type="Password" name="Password" required>
</div>
</div>
</div>
<div class="output"><p></p><p></p></div>
<input type="checkbox" id="agreement" style="height: 12px; width: 12px; box-shadow:
0px 0px" required>
<label style="display: inline-block;" for="agreement"> I agree to the <a href=""
style="text-decoration: none; color: #66c3ff;">term and conditions</a></label><br>
<center>
<button>
<a href="">
<span>Register</span>
</a>
</button>
</center>
<h4 align="center">Already a member <a href="../index.html" style=" text-decoration:
none; color:#66c3ff;">Login</h4>
</form>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
</div>
<script src="../script/script.js"></script>
</body>
</html>
CSS:
*:focus {
outline: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
body {
background: linear-gradient(45deg, #0F2027, #203A43,#2C5364);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: flex;
height: 95vh;
justify-content: center;
align-items: center;
}
h1{
font-weight: lighter;
font-family: Trebuchet MS;
color: whitesmoke;
margin-bottom: 40px;
}
.output{
display: flex;
justify-content: space-evenly;
margin-top: -30px;
}
form {
overflow: hidden;
max-width: 650px;
width: 100%;
margin: auto;
padding: 25px 30px;
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
border-radius: 15px;
color: whitesmoke;
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.5);
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
.col{
width: calc(100%/ 2 - 20px);
}
.input-box{
margin-bottom: 25px;
width: 100%;
border-bottom: 1px solid #fff;
background: transparent;
}
input{
height: 45px;
width: 100%;
font-size: 14px;
border: none;
background: transparent;
color: white;
font-family: 'Open Sans Regular 400', sans-serif;
}
label{
margin-bottom: 0px;
font-size: 18px;
font-family: Trebuchet MS;
}
h4{
margin-top: 20px;
margin-bottom: 0px;
font-family: Trebuchet MS;
}
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
button {
height: 50px;
width: 30%;
margin-top: 8px;
background: transparent;
outline: none;
border: 1px solid #fff;
}
button a{
text-decoration: none;
font-size: 18px;
color: white;
font-family: Trebuchet MS;
}
button:hover{
background: black;
}
@media (max-width: 700px){
form{
width: 400px;
font-size: calc(100% - 2px);
}
}
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
OUPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 14: Write a program to demonstrate Prompt Box,Confirmation Box and Alert
Box.
OBJECTIVE : To understand the types of dialogue boxes which can be use for poping messages or result of
JavaScript applied on any click of button.
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>Document</title>
</head>
<body>
<button onclick="prmpt()">Prompt</button>
<button onclick="cnfrm()">Confirm</button>
<button onclick="alrt()">Alert</button>
</body>
<script>
function prmpt()
{
prompt("Please Enter your name");
}
function cnfrm()
{
confirm("Do you wanna continue?");
}
function alrt()
{
alert("This is an alert");
}
</script>
</html>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
OUPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 15: Demonstrate the use of validation
.
OBJECTIVE : To understand how to validate the page before sending to client site by the use of different
validation verification and form validation.
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>Document</title>
</head>
<body>
<input type="password" placeholder="Enter a password">
<p></p>
</body>
<script>
let inp = document.querySelector('input');
let out = document.querySelector('p');
inp.addEventListener('keyup',function()
{
if((inp.value).length<8)
{
out.textContent = "Please enter a longer password";
}
else
{
out.textContent = "Password is acceptable";
}
})
</script>
</html>
OUPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 16: Create a calculator type form. It should contain three list boxes. The first and
third list boxes should list the number 0 through 9. The middle list box should list the following mathematical
operators: +,-,* and /. The user should be able to select the two numbers and the operations submit the form
be shown the answer.
OBJECTIVE : How to perform basic mathematical calculation by the use of JavaScript and DOM object.
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>Calc</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text">
<div class="row">
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div class="row">
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
</div>
<div class="row">
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
</div>
<div class="row">
<button>Clear</button>
<button>=</button>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
</div>
<script src="script.js"></script>
</body>
<script>
let button = document.querySelectorAll('button');
let input = document.querySelector('input');
for(let i=0; i<button.length-2; i++)
{
button[i].addEventListener('click',function()
{
input.value = input.value + button[i].textContent;
}
)
}
button[button.length-1].addEventListener('click',function()
{
input.value = eval(input.value);
})
button[button.length-2].addEventListener('click',function()
{
input.value = "";
})
</script>
</html>
OUPUT:
z
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 17: Demonstrate the use of XML with proper example
.
OBJECTIVE : To understand basic XML tags to demonstrate or use of XML .
SOURCE CODE:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
OUPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 18: Write a PHP program to find whether a number is odd or even.
i. Without user entered data
ii. With user entered data
OBJECTIVE : To understand how to find even and odd using PHP .
DESCRIPTION :
PHP: PHP ( PHP: Hypertext Pre-processor) is a widely-used open source general-purpose scripting language that is
especially suited for web development and can be embedded into HTML.
WITHOUT USER ENTERED DATA:
SOURCE CODE :
<?php
$number = 9;
if($number%2==0)
{
echo $number . " is Even";
}
else
{
echo $number . " is Odd";
}
?>
OUTPUT:
WITH USER ENTERED DATA:
SOURCE CODE :
<html>
<body>
<form method="post">
Enter a number:
<input type="number" name="number">
<input type="submit" value="Submit">
</form>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
</body>
</html>
<?php
if($_POST){
$number = $_POST['number'];
if(($number % 2) == 0){
echo "$number is an Even number";
}else{
echo "$number is Odd number";
}
}
?>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 19: Write a PHP program to find the factorial of a number.
i. Without user entered data
ii. With user entered data
OBJECTIVE : To understand how to find factorial using PHP .
WITHOUT USER ENTERED DATA:
SOURCE CODE :
<?php
$num = 5;
$sum = 1;
for($i=$num; $i>0; $i--)
{
$sum = $sum * $num;
$num--;
}
echo $sum;
?>
OUTPUT:
WITH USER ENTERED DATA:
SOURCE CODE :
<form method="post">
<input type="text" placeholder="Enter a number" name="num">
<button type="submit">Submit</button>
</form>
<?php
if($_POST)
{
$num = $_POST["num"];
$sum = 1;
for($i=$num; $i>0; $i--)
{
$sum = $sum * $num;
$num--;
}
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
echo $sum;
}
?>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 20: Write a PHP program to find the area of a triangle.
OBJECTIVE : To understand how to find area of traingle using PHP .
DESCRIPTION :
PHP: PHP ( PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is
especially suited for web development and can be embedded into HTML.
SOURCE CODE :
<?php
$height = 5;
$base = 10;
$area = ($height*$base)/2;
echo $area;
?>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 21: Write a PHP program to demonstrate the use of switch statement in PHP.
OBJECTIVE : To understand the working of switch statement in PHP .
DESCRIPTION :
PHP: PHP ( PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language
that is especially suited for web development and can be embedded into HTML.
SOURCE CODE :
<?php
$drink = "tea";
switch($drink)
{
case "tea":
echo "your fav drink is tea";
break;
case "coffee":
echo "your fav drink is coffee";
break;
default:
echo "your fav drink is neither tea nor coffee";
}
?>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 22: Write a PHP program to find the reverse of a string.
OBJECTIVE : To understand how to reverse a string in php.
DESCRIPTION :
PHP: PHP ( PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language
that is especially suited for web development and can be embedded into HTML.
SOURCE CODE :
<?php
$str = "name";
for($i=(strlen($str)); $i>-1; $i--)
{
echo $str[$i];
}
?>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 23: Write a PHP program to create a database in MYSQL GEHU containing
table course having three fields course name, course and course duration. Write a php code to insert values
the table course.
OBJECTIVE : To understand how to create database and insert the values in database using php .
DESCRIPTION :
MYSQL : PHP is the most popular scripting language for web development. It is free, open source and server-
side (the code is executed on the server). MySQL is a Relational Database Management System (RDBMS)
that uses Structured Query Language (SQL)
PHP: PHP ( PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language
that is especially suited for web development and can be embedded into HTML.
SOURCE CODE :
<form action="data.php" method="POST">
<input type="text" placeholder="Course Name" name="course_name" required>
<input type="number" placeholder="Course Id" name="course_id" required>
<input type="number" placeholder="Course Duration" name="course_duration" required>
<button type="submit">Submit</button>
</form>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "GEHU";
$c_name = $_POST["course_name"];
$c_id = $_POST["course_id"];
$c_dura on = $_POST["course_dura on"];
$conn = new mysqli($servername,$username,$password,$dbname);
$sql = "INSERT INTO COURSE(course_name,course_id,course_dura on) VALUES
(\"".$c_name."\",\"".$c_id."\",\"".$c_dura on."\");";
echo "form submmited";
$conn -> query($sql);
?>
OUTPUT:
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
PROBLEM STATEMENT - 24: Write a PHP program to retrieve values from the table course and display it.
OBJECTIVE : To understand how to retrieve the values stored in database.
DESCRIPTION :
MYSQL : PHP is the most popular scripting language for web development. It is free, open source and server-
side (the code is executed on the server). MySQL is a Relational Database Management System (RDBMS)
that uses Structured Query Language (SQL)
PHP: PHP ( PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language
that is especially suited for web development and can be embedded into HTML.
SOURCE CODE :
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "GEHU";
$conn = new mysqli($servername,$username,$password,$dbname);
$sql = "select * from course;";
$result = $conn -> query($sql);
echo "<table rules=all style=text-align:center; border=1><tr><th>Course Name</th><th>Course
ID</th><th>Course Duration</th></tr>";
while($row = $result->fetch_assoc())
{
echo
"<tr><td>".$row["course_name"]."</td><td>".$row["course_id"]."</td><td>".$row["course_duration"]."</td>
</tr>";
}
echo "</table>";
$conn->close();
?>
Name -Neeraj Singh Course - BCA V Section - C
Roll number- 1921105 Subject name - Web Development Subject code- PBC-501
OUTPUT:
You might also like
- Bcom-Iv-Sem-Web-Technologies Lab RecordNo ratings yetBcom-Iv-Sem-Web-Technologies Lab Record89 pages
- Equipment Type Manufacturer Model Type of Password Codes &password100% (4)Equipment Type Manufacturer Model Type of Password Codes &password3 pages
- Practical File Computer Applications Class 10 for 2024-25No ratings yetPractical File Computer Applications Class 10 for 2024-2523 pages
- Class 10 IT 402 Notes As Per 2024-25 Syllabus0% (3)Class 10 IT 402 Notes As Per 2024-25 Syllabus30 pages
- 01 135221 036 11730096161 13022024 103102pm 21022024 122045pmNo ratings yet01 135221 036 11730096161 13022024 103102pm 21022024 122045pm11 pages
- Abhishek Rai Web Technology Practical File100% (1)Abhishek Rai Web Technology Practical File33 pages
- The Federal Polytechnic, Ede: Practical Guide/AssignmentNo ratings yetThe Federal Polytechnic, Ede: Practical Guide/Assignment38 pages
- Name: Ketan Gupta Section: G Class Roll No: 30 University Roll No: 2019292No ratings yetName: Ketan Gupta Section: G Class Roll No: 30 University Roll No: 201929289 pages
- Sarthak - Srivastava - Web - Dev - LAB (Assignment 1)No ratings yetSarthak - Srivastava - Web - Dev - LAB (Assignment 1)13 pages
- The Thesis Writing Survival Guide: Research and Write an Academic Thesis with Less StressFrom EverandThe Thesis Writing Survival Guide: Research and Write an Academic Thesis with Less Stress1/5 (1)
- Pressurized Inspection Sheet: For Use With Cd15Nx & Cd30NxNo ratings yetPressurized Inspection Sheet: For Use With Cd15Nx & Cd30Nx2 pages
- Dell EMC PowerVault ME4 Series and VMware VsphereNo ratings yetDell EMC PowerVault ME4 Series and VMware Vsphere24 pages
- Exercise 1 - Introduction To Embedded SystemsNo ratings yetExercise 1 - Introduction To Embedded Systems3 pages
- Specification INFINITT Maintenance Service PACS /RIS More Than 70,000 ExamNo ratings yetSpecification INFINITT Maintenance Service PACS /RIS More Than 70,000 Exam5 pages
- Reference Architecture ABB Ability Platform V1.3 - CompleteNo ratings yetReference Architecture ABB Ability Platform V1.3 - Complete5 pages
- Ssmth2: Basic Calculus: Engr. Aaron John A. MorionesNo ratings yetSsmth2: Basic Calculus: Engr. Aaron John A. Moriones34 pages
- CIW Web Design Specialist Study Guide Vol1100% (3)CIW Web Design Specialist Study Guide Vol1576 pages
- OSN 500 550 580 V100R008C50 Alarms and Performance Events Reference 02100% (1)OSN 500 550 580 V100R008C50 Alarms and Performance Events Reference 021,109 pages
- Da Pacem Domine Canon Sheet Music For Vocals (Choral)No ratings yetDa Pacem Domine Canon Sheet Music For Vocals (Choral)1 page
- Introduction To Cybercrime and Environmental Laws and Protection100% (1)Introduction To Cybercrime and Environmental Laws and Protection87 pages
- ECommerce Application Thesis DocumentationNo ratings yetECommerce Application Thesis Documentation8 pages
