Practical: 1: 200860116002 Web Development

200860116002 Web Development
Practical: 1
Aim: Create a given table using HTML code.
a)Table without border:
<html>
<head>
<tile>Table1</tile><br><br>
</head>
<body>
<table>
<tr align="center">
<td><b>Sr No.</b></td>
<td><b>IT</b></td>
<td><b>CSE</b></td>
<td><b>MECH</b></td>
</tr>
<tr align="center">
<td>1</td>
<td>Ramesh</td>
<td>Suresh</td>
<td>Kanji</td>
</tr>
<tr align="center">
<td>2</td>
<td>Magan</td>
<td>Chhagan</td>
<td>Jagan</td>
</tr>
<tr align="center">
<td>3</td>
<td>Girish</td>
<td>Mukesh</td>
<td>Prakash</td>
</tr>
</table>
</body>
</html>Output:
PAGE|1
LIT/IT/2022-23/3151606
b) Time Table:
<html>
<head>
<title>Table2</title>
</head>
<body>
<h2 align="center">Time-Table</h2>
<table border=1 align="center">
<tr>
<td>Lecture</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<tr>
<td>1.</td>
<td>WD</td>
<td>CN</td>
<td>CS</td>
<td>PE</td>
<td>IPDC</td>
<td>ADA</td>
</tr>
<tr>
<td>2.</td>
<td>CN</td>
<td>CS</td>
<td>PE</td>
<td>IPDC</td>
<td>ADA</td>
<td>WD</td>
</tr>
<tr>
<td>3.</td>
<td>CS</td>
<td>PE</td>
<td>IPDC</td>
<td>ADA</td>
<td>WD</td>
<td>CN</td>
</tr>
<tr>
PAGE|2
LIT/IT/2022-23/3151606
<td>4.</td>
<td>PE</td>
<td>IPDC</td>
<td>ADA</td>
<td>WD</td>
<td>CN</td>
<td>CS</td>
</tr>
<tr>
<td>5.</td>
<td>IPDC</td>
<td>ADA</td>
<td>WD</td>
<td>CN</td>
<td>CS</td>
<td>PE</td>
</tr>
<tr>
<td>6.</td>
<td>ADA</td>
<td>WD</td>
<td>CN</td>
<td>CS</td>
<td>PE</td>
<td>IPDC</td>
</tr>
</table>
</body>
</html>
Output:
PAGE|3
LIT/IT/2022-23/3151606
c)Table using colspan and rowspan:

<html>
<head>
<title>Table3</title>
</head>
<body>
<h2 align="center">Table No.3</h2>
<table border=1 align="center">
<tr align="center">
<td rowspan=9>A</td>
<td rowspan=8>B</td>
<td rowspan=7>C</td>
<td rowspan=6>D</td>
<td rowspan=5>E</td>
<td rowspan=4>F</td>
<td colspan=2>AH</td>
<td rowspan=4>H</td>
<td rowspan=5>I</td>
<td rowspan=6>J</td>
<td rowspan=7>K</td>
<td rowspan=8>L</td>
<td rowspan=10>M</td>
</tr>
<tr align="center">
<td colspan=2>G</td>
</tr>
<tr align="center">
<td colspan=2>GH</td>
</tr>
<tr align="center">
<td colspan=2>N</td>
</tr>
<tr align="center">
<td colspan=4>O</td>
</tr>
<tr align="center">
<td colspan=6>P</td>
</tr>
<tr align="center">
<td colspan=8>Q</td>
</tr>
<tr align="center">
<td colspan=2>R</td>
<td>S</td>
<td>T</td>
<td colspan=2>U</td>
PAGE|4
LIT/IT/2022-23/3151606
<td>V</td>
<td>W</td>
<td>X</td>
</tr>
<tr align="center">
<td colspan=12>Y</td>
</tr>
<tr align="center">
<td colspan=2>Z</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan=2>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
Output:
PAGE|5
LIT/IT/2022-23/3151606
Practical: 2
Aim: Create a registration form using HTML.
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="#" method=post>
First Name:
<input type="text" name="f_name" placeholder="Enter Your First Name Only">
<br><br>
Last Name:
<input type="text" name="l_name" placeholder="Enter Your Last Name Only">
<br><br>
Gender:
<input type="radio" name="gen">Male
<input type="radio" name="gen">Female
<input type="radio" name="gen">Other
<br><br>
Address:
<textarea placeholder="Enter Your Full Address" cols=20 rows=5></textarea>
<br><br>
Mobile No.:
<input type="number" name="Mo_No" maxlength="10">
<br><br>
Branch:
<select>
<option>IT</option>
<option>CSE</option>
<option>MECH</option>
<option>CIVIL</option>
<option>AUTO</option>
</select>
<br><br>
Hobby:
<input type="checkbox" name="Hobby">Sports
<input type="checkbox" name="Hobby">Cultural
<input type="checkbox" name="Hobby">Technical
<input type="checkbox" name="Hobby">Study
<br><br>
Upload Your ID Proof:
<input type="file">
<br><br>
Select Color:
PAGE|6
LIT/IT/2022-23/3151606
<input type="color">
<br><br>
Date:
<input type="date">
<br><br>
Week:
<input type="week">
<br><br>
Month:
<input type="month">
<br><br>
<input type="SUBMIT">
<input type="Reset">
Output:
PAGE|7
LIT/IT/2022-23/3151606
Practical: 3
Aim: Write HTML code which describes types of CSS.
a)Inline:
<html>
<body>
<h1 style="color:blue;text-align:center;"><a>Welcome to Web Development</a></h1>
<h2 style="color:red;">Welcome to Web Development</h2>
<p style="color: yellow;background-color: purple">Agricultural marketing is defined as
consists of various operations or process, and the agencies
conducting them involved in the transfer of farm produced goods, raw materials and their
byproducts. The agricultural marketing system is a linkage of the farm and non-farm
sectors. The
development in agricultural sector is proportional to the changes in the marketing system.
</body>
</html>
Output:
b)Internal:
<html>
<head>
<style>
body {
background-color: linen;
}
h1{
color: maroon;
margin-left: 40px;
}
h2{
background-color: black;
color: white
}
p{
font-size: 30px;
text-shadow:1px 1px 20px;
}
</style>
</head>
<body>
PAGE|8
LIT/IT/2022-23/3151606
<h1><a>Welcome to Web Development</a></h1>

<h2>Welcome to Web Development</h2>
<p>Agricultural marketing is defined as consists of various operations or process, and the
agencies
conducting them involved in the transfer of farm produced goods, raw materials and their by
products. The agricultural marketing system is a linkage of the farm and non-farm sectors. The
</p>
</body>
</html>
Output:
c)External:
<html>
<head>
<title>type of css</title>
<link rel="stylesheet" href="table5.html">
<style>
table,p{
color: blue;
background-color: red
}
</style>
</head>
<body>
<h1><a>Welcome to Web Development</a></h1>
agencies
byproducts. The agricultural marketing system is a linkage of the farm and non-farm sectors.
The
</p>
PAGE|9
LIT/IT/2022-23/3151606
</body>
</html>
Output:
P A G E | 10
LIT/IT/2022-23/3151606
Practical: 4
Aim: Write HTML code which describes types of selectors.
a)Class selector:
<html>
<head>
<style>
.a{
background-color:cyan;
color:magenta;
}
</style>
<div>We'll make a website</div>
<h1 class="a">Welcome to Web Development</h1>
</head>
</html>
Output:
b)ID selector
<html>
<head>
<style>
#p{
text-align:center;
color: green;
background-color: black
}
</style>
<h2 id="p">Welcome to Web Development
<br></br>
P A G E | 11
LIT/IT/2022-23/3151606
1<br></br>
2<br></br>
3<br></br>
4<br></br>
</h2>
</head>
</html>
Output:
c)Universal selector
<html>
<head>
<style>
*{
background-color: violet;
color: yellow;
}
</style>
</head>
<body>
agencies
The
</p>
</body>
</html>
Output:
P A G E | 12
LIT/IT/2022-23/3151606
d)Group selector
<html>
<head>
<style>
h1,h2,p{
color: blue;
text-align: right;
}
</style>
</head>
<body>
agencies
The
</p>
</body>
</html>
Output:
e)Wild Card Selector
i) $
P A G E | 13
LIT/IT/2022-23/3151606
<html>
<head>
<style>
[class$="str"]{
background: green;
color: white;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p class="mystr">This is some text in a paragraph.</p>
</body>
</html>
Output:
ii) *
<html>
<head>
<style>
[class*="str"] {
background: green;
color: white;
}
h1 {
color:green;
}
body{
text-align:center;
width:60%;
}
</style>
</head>
<body>
<h1>I am Nens Patel.</h1>
P A G E | 14
LIT/IT/2022-23/3151606
<div class="first_str">There is much text</div>

<div class="second">There is some text</div>
<div class="my-strt">There is no text</div>
</body>
</html>
Output:
iii) ^
<html>
<head>
<style>
[class^="str"]{
background: green;
color: white;
}
h1 {
color:green;
}
body {
text-align:center;
width:60%;
}
</style>
</head>
<body>
<h1>I am Nens Patel.</h1>
<div class="strfirst">How are you</div>
<div class="strsecond">I am fine</div>
<p class="my">Not bad, not bad!!</p>
</body>
</html>
Output:
P A G E | 15
LIT/IT/2022-23/3151606
Practical: 5
Aim: Write HTML codes for setting different background properties using CSS.
a) Background color property
b) Background image property
c) Background attachment property
d) Background position property
<html>
<head>
<style>
body{
background-image:url("bugatti.jpg");
background-size: 500px;
background-repeat: no-repeat;
background-color: rgb(108, 104, 104);
background-attachment: fixed;
background-position:center;
}
.a{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h1 align="center">Bugatti</h1>
<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>
<img src="bugatti.jpg" class="a">
</body>
</html>
Output:
P A G E | 16
LIT/IT/2022-23/3151606
P A G E | 17
LIT/IT/2022-23/3151606
Practical: 6
Aim: Write HTML codes for setting different border property using CSS.
a) Border Style
b) Border width
c) Border Color
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
border-style: double;
border-color: rgb(113, 21, 101);
border-width: 10px;
}
.a{
color: green;
}
.b{
color: blue;
text-decoration: underline;
}
.c{
color: rgb(160, 117, 117);
}
</style>
</head>
<body>
<div class="card">
<h1 class="a">Most Beautiful Actress</h1>
<img src="amy.jpg" height="150vh" width=200vw">
<h1></h1>
<p style="font-size: 25px" class="b"><b>Amy Jackson</b></p>
<p style="font-size: 20px" class="c">Born: 31-Jan-1992<br>Citizenship: British
<br>Occupation: Actress model
<br>Years-Active: 2010-2018</p>
<img src="fbLogo.png" height="30vh" width="30vw">
<img src="instaLogo.jpg" height="30vh" width="30vw">
<img src="twitter.png" height="30vh" width="30vw">
</body>
P A G E | 18
LIT/IT/2022-23/3151606
</html>
Output:
P A G E | 19
LIT/IT/2022-23/3151606
Practical: 7
Aim: Write HTML code to demonstrate the following .
a) Pseudo-class
b) Span
c) Div
d) Margin
e) Padding
f) Float
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
border-style: double;
border-color: rgb(113, 21, 101);
border-width: 10px;
}
.a{
color: green;
}
.b{
color: blue;
text-decoration: underline;
}
.c{
color: rgb(160, 117, 117);
}
</style>
</head>
<body>
<div class="card">a) Float
<html>
<head>
<style>
.card{
box-shadow: 5px 4px 8px 0 rgba(171, 11, 11, 0.2);
font-family: arial;
max-width: 300px;
margin: 100px;
padding: 50px;
}
img{
P A G E | 20
LIT/IT/2022-23/3151606
float: right;
}
a:link{
color: red;
}
a:visited{
color:blue;
}
a:hover{
color: rgb(201, 130, 142);
}
a:active{
color: black;
}
</style>
</head>
<body>
<p><a href="index.html"><h1 align="center">google.com</h1></a></p>
<div class="card">
<img src="google.png" width="200px">
<br></br>
<br></br>
<p><b>IT Support</b><br>
Professional<br>
Certificate</p>
<br></br>
<span><b>Most Powerful Search-Engine</b></span><br></br>
<p>
<img src="glogo.png" width="70px">
It is the most popular company in the world.
Google is founded by Larry Page and Sergery Brin in 1998.
As we all know that it is the largest global market for search engine.
Google has created a global impact in the world.
</p>
</div>
</body>
</html>
<h1 class="a">Most Beautiful Actress</h1>

<img src="amy.jpg" height="150vh" width=200vw">
<h1></h1>
<p style="font-size: 25px" class="b"><b>Amy Jackson</b></p>
<p style="font-size: 20px" class="c">Born: 31-Jan-1992<br>Citizenship: British
<br>Occupation: Actress model
<br>Years-Active: 2010-2018</p>
<img src="fbLogo.png" height="30vh" width="30vw">
<img src="instaLogo.jpg" height="30vh" width="30vw">
<img src="twitter.png" height="30vh" width="30vw">
P A G E | 21
LIT/IT/2022-23/3151606
</body>
</html>
Output:
P A G E | 22
LIT/IT/2022-23/3151606
Practical: 8
Aim: Write code to perform CSS positioning.
a) Fix
b) Absolute
c) Relative
<html>
<head>
<style>
*{
background-image:url("glogo.png");
background-repeat: no-repeat;
background-size: 3000px;
}
.container1{ z-index: 3;
position: fixed;
background-color: greenyellow;
width: 650px;
}
position: absolute;
background-color: aqua;
padding-top: 50px;
}
position: relative; top: 400px;
width: 650px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container1"><img src="google.png"></div><br></br><br></br>
<br></br><br></br><br></br><br></br><br></br><br></br>
<div class="container2">
<img src="google.png">
</div>
<img src="google.png">
</div>
</body>
</html>
P A G E | 23
LIT/IT/2022-23/3151606
d) Absolute and Auto
<!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>
<style>
.container1{
z-index: 2;
position: absolute;
width: fit-content;
}
.container2{
z-index: 3;
position: auto;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container1"><h2>Blue-Coloured ABSOLUTE DIV</h2>
<h2>GREEN COLOURED AUTO Positioned DIV</h2>
P A G E | 24
LIT/IT/2022-23/3151606
<p>First, let's go over a brief history -- in 1994, Swarthmore College student Justin Hall
is credited with the creation of the first blog, Links.net. At the time, however, it wasn't
considered a blog … just a personal homepage.</p>
<p>In 1997, Jorn Barger, blogger for Robot Wisdom, coined the term "weblog", which
was meant to describe his process for "logging the web" as he surfed the internet. The term
"weblog" was shortened to "blog" in 1999, by programmer Peter Merholz.</p>
<p>In the early stages, a blog was a personal web log or journal in which someone could
share information or their opinion on a variety of topics. The information was posted reverse
chronologically, so the most recent post would appear first.</p>
<p>Nowadays, a blog is a regularly updated website or web page, and can either be used
for personal use or to fulfill a business need.</p>
</div>
</div>
</body>
</html>
Output:
e) Relative and absolute

<html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container1{
z-index: 2;
position: relative;
}
.container2{
z-index: 3;
position: absolute;
P A G E | 25
LIT/IT/2022-23/3151606
}
</style>
</head>
<body>
<div class="container1"><h2>Blue-Coloured Relative DIV</h2>
<h2>GREEN COLOURED Absolute DIV</h2>
<p>First, let's go over a brief history -- in 1994, Swarthmore College student
JustinHall is credited with the creation of the first blog, Links.net. At the time, however,
it wan't considered a blog … just a personal homepage.</p>
<p>In 1997, Jorn Barger, blogger for Robot Wisdom, coined the term
"weblog",which was meant to describe his process for "logging the web" as he surfed the
interet. The term "weblog" was shortened to "blog" in 1999, by programmer Peter
Merhol.</p>
<p>In the early stages, a blog was a personal web log or journal in which
someonecould share information or their opinion on a variety of topics. The information
was posed reverse chronologically, so the most recent post would appear first.</p>
<p>Nowadays, a blog is a regularly updated website or web page, and can either
beused for personal use or to fulfill a business need.</p>
</div>
</div>
</body>
</html>
Output:
f) Relative-relative
<html>
<!DOCTYPE html>
<html lang="en">
<head>
P A G E | 26
LIT/IT/2022-23/3151606
<style>
.container1{
position: relative;
background-color: aqua; }
.container2{
position: relative;
background-color: greenyellow; }
</style>
</head>
<body>
<div class="container1"><h2>Blue-Coloured Relative DIV</h2>
<h2>GREEN COLOURED nested Relative DIV</h2>
<p>First, let's go over a brief history -- in 1994, Swarthmore College student Justin
Hall is credited with the creation of the first blog, Links.net. At the time, however, it
wasn't considered a blog … just a personal homepage.</p>
<p>In 1997, Jorn Barger, blogger for Robot Wisdom, coined the term "weblog",
which was meant to describe his process for "logging the web" as he surfed the internet.
The term "weblog" was shortened to "blog" in 1999, by programmer Peter Merholz.</p>
<p>In the early stages, a blog was a personal web log or journal in which someone
could share information or their opinion on a variety of topics. The information was
posted reverse chronologically, so the most recent post would appear first.</p>
<p>Nowadays, a blog is a regularly updated website or web page, and can either be
used for personal use or to fulfill a business need.</p>
</div>
</div>
</body>
</html>
Output:
g) Absolute-absolute
<!DOCTYPE html>
<html lang="en">
<head>
P A G E | 27
LIT/IT/2022-23/3151606
<style>
.container1{
position: absolute;
background-color: aqua; }
.container2{
position: absolute;
background-color: greenyellow; }
</style>
</head>
<body>
<div class="container1"><h2>Blue-Coloured absolute DIV</h2>
<h2>GREEN COLOURED nested absolute DIV</h2>
<p>First, let's go over a brief history -- in 1994, Swarthmore College student
JustinHall is credited with the creation of the first blog, Links.net. At the time, however,
it wasn't considered a blog … just a personal homepage.</p>
</div>
</div>
</body>
</html>
P A G E | 28
LIT/IT/2022-23/3151606
Practical: 9
Aim: Write a code to show CSS animation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="box">
</div>
</div>
</body>
</html>
Output:
P A G E | 29
LIT/IT/2022-23/3151606
P A G E | 30
LIT/IT/2022-23/3151606
Practical: 10
Aim: Write a code to demonstrate CSS Transitions.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<p>Hover the red container: </p>
<div></div>
</body>
</html>
Output:
P A G E | 31
LIT/IT/2022-23/3151606
After Hover the Red Container:
P A G E | 32
LIT/IT/2022-23/3151606
Practical: 11
Aim: Write JavaScript code for the following.
a) To perform arithmetic operations.
<html>
<head>
<title>Task (a)</title>
</head>
<body>
<form name="my_cal">
Number 1: <input type="text" name="first">
<br>
Number 2: <input type="text" name="second">
<br><br>
<input type="button" value="ADD"
onclick="javascript:addition(Number(document.my_cal.first.value),Number(document.my_c
al.s econd.value));">
<input type="button" value="SUB"
onclick="javascript:subtraction(Number(document.my_cal.first.value),Number(document.m
y_ca l.second.value));">
<input type="button" value="MUL"
onclick="javascript:multiply(Number(document.my_cal.first.value),Number(document.my_c
<input type="button" value="DIV"
onclick="javascript:division(Number(document.my_cal.first.value),Number(document.my_c
<input type="button" value="MOD"
onclick="javascript:modulus(Number(document.my_cal.first.value),Number(document.my_c
<br><br>
Get Result: <input type="text" name="total">
</form>
<script>
function multiply(a,b){ c=a*b;
document.my_cal.total.value=c;
}
function addition(a,b){ c=a+b;
P A G E | 33
LIT/IT/2022-23/3151606
}
function subtraction(a,b){ c=a-b;
}
function division(a,b){ c=a/b;
}
function modulus(a,b){ c=a%b;
}
</script>
</body>
</html>
Output:
P A G E | 34
LIT/IT/2022-23/3151606
b) To check if the number is even or odd.

<html>
<head>
<title>Task (b)</title>
</head>
<body>
<h2>Check wether the Number is Even/Odd</h2>
<form name="my_form">
Enter Number : <input type="text" name="num" style="width:80px;">
<br><br>
<input type="button" value="CHECK"
onclick="check(Number(document.my_form.num.value));">
<br><br>
Entered Number is : <input type="text" name="ans" style="width:50px;">
</form>
<script>
function check(a){ if (a % 2 == 0){
document.my_form.ans.value="Even";
}else{ document.my_form.ans.value="Odd";
}
}
</script>
</body>
</html>
Output:
P A G E | 35
LIT/IT/2022-23/3151606
c) Which takes input n and displays the first n odd number,divisible by 7.
<html>
<head>
<title>Task (b)</title>
</head>
<body>
<h2>Enter N to display first N odd numbers divisible by 7</h2>
Enter Number : <input type="text" id="num" style="width:80px;">
<br><br>
<input type="button" value="CHECK" onclick="check()">
<br><br>
Result : <span id="ans"></span>
</form>
<script>
function check(){
let num = document.getElementById('num').value; for(i=1;i<=num;i++){
if (i % 2 != 0 && i % 7 == 0){ document.getElementById('ans').innerHTML +=`${i} `;
}
}
}
</script>
</body>
</html>
Output:
P A G E | 36
LIT/IT/2022-23/3151606
d) To perform numeric validation.

<html>
<head>
<title>Task (c)</title>
</head>
<body>
<h2>Numeric Validation Program</h2>
Enter Value : <input type="text" id="num" style="width:80px;">
<br><br>
<br><br>
</form>
<script>
function check(){
var required = /^[0-9]+$/;
let num = document.getElementById('num').value; if (num.match(required)){
document.getElementById('ans').innerHTML =`You entered Numeric value`;
}else{
document.getElementById('ans').innerHTML =`You entered Non-Numeric value`;
}
}
</script>
</body>
</html>
Output:
P A G E | 37
LIT/IT/2022-23/3151606
h) To perform password matching.
<html>
<head>
<title>Task (d)</title>
</head>
<body>
<h2>Password Matching</h2>
Enter Password : <input type="password" id="pas1" style="width:80px;">
<br><br>
Enter Again : <input type="password" id="pas2" style="width:80px;">
<br><br>
<br><br>
P A G E | 38
LIT/IT/2022-23/3151606

</form>
<script>
function check(){
let pas1 = document.getElementById('pas1').value; let pas2 =
document.getElementById('pas2').value; if (pas1 == pas2){
document.getElementById('ans').innerHTML =`Both value are Matching`;
}else{
document.getElementById('ans').innerHTML =`Both value are not Matching`;
}
}
</script>
</body>
</html>
Output:
P A G E | 39
LIT/IT/2022-23/3151606
i) To perform Email validation.

<html>
<head>
<title>Task (c)</title>
</head>
<body>
<h2>E-Mail Validation Program</h2>
Enter E-Mail Id : <input type="text" id="email" style="width:250px;">
<br><br>
<br><br>
</form>
<script>
function check(){
var required = /^[\w._%+-]+@[\w.-]+\.[a-zA-Z]{2,4}$/; let num =
document.getElementById('email').value;
if (num.match(required)){
document.getElementById('ans').innerHTML =`Your Email Id is VALID`;
}else{
document.getElementById('ans').innerHTML =`Your Email Id is INVALID`;
}
}
</script>
</body>
</html>
Output:
P A G E | 40
LIT/IT/2022-23/3151606
P A G E | 41
LIT/IT/2022-23/3151606
Practical: 12
Aim: Write a PHP program for the following.
a) To print “HELLO PHP”
<?php
echo "Hello PATEL";
?>
Output:
b) To print pattern
<?php
$alpha = range('A', 'Z');
for ($i=5; $i>=1; $i--) { for($j=0; $j<=$i; $j++) {
echo ' ';
}
$j--;
for ($k=0; $k<=(5-$j); $k++) { echo $alpha[$k];
}
echo "<br>\n";
}
?>
Output:
c) To find factorial of a given number.
<html>
<head>
P A G E | 42
LIT/IT/2022-23/3151606
</head>
<body>
<form name="form" action="#" method="get">
<h2>Find Factorial of number.</h2>
Enter Number : <input type="number" name="subject">
<br>
<input type="submit" name="submit">
</form>
<?php if(isset($_GET['submit']))
{
$num= $_GET['subject'];
$ans=1; for($i=$num;$i>0;$i--)
{
$ans=$ans*$i;
}
echo "Factorial of ".$_GET['subject']." is : ".$ans;
}
?>
</body>
</html>
Output:
d) To find a given number is even or odd.

<html>
<head>
</head>
<body>
<form name="form" action="#" method="get">
<h2>Find Given Number is ODD/EVEN</h2>
Enter Number : <input type="number" name="subject">
<br>
P A G E | 43
LIT/IT/2022-23/3151606
<input type="submit" name="submit">

</form>
<?php
if(isset($_GET['submit']))
{
$num= $_GET['subject'];
if($num%2==0){echo "Given Number ".$_GET['subject']." is : EVEN";} else{echo
"Given Number ".$_GET['subject']." is : ODD";}
}
?>
</body>
</html>
Output:
e) To create and display arrays.

<html>
<body>
<?php
echo "Indexed arrays"; echo "<br>";
$cars = array("Mustang", "mahendra", "Toyota"); echo "Array Values : ";
foreach($cars as $value){ echo $value."&nbsp";
}
P A G E | 44
LIT/IT/2022-23/3151606
echo "<br>";
echo "Total : ".count($cars); echo "<hr>";
echo "Associative arrays"; echo "<br>";
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43"); echo "Array Values : ";
foreach($age as $value){ echo $value."&nbsp";
}
echo "<br>";
echo "Total : ".count($age); echo "<hr>";
echo "Multi-Dimensional arrays"; echo "<br>";
$gadi = array ( array("xuv700",22,18), array("fortuner",15,13), array("Mustang",5,2),
array("G-wagon",17,15)
);
echo "Total : ".count($gadi); echo "<br>";
echo "Array Values : <br>";
for ($row = 0; $row < 4; $row++) { echo "Row number $row";
for ($col = 0; $col < 3; $col++) {

echo "<li>".$gadi[$row][$col]."</li>";
}
}
?>
</body>
</html>
Output:
P A G E | 45
LIT/IT/2022-23/3151606
f) To perform string operation.

<?php
echo "<h3>String Operations</h3>"; echo "1) strstr() <br> Result: ";
echo strstr("Hello world!","world");
echo "<br>(Working : Finds the first occurrence of a string inside another string (case-
sensitive))";
echo "<hr>2) chr() <br> Result: "; echo chr(53);
echo "<br>(Working : Returns a character from a specified ASCII value)"; echo "<hr>3)
trim(Variable,target) <br> Result: ";
$str = "Hello World!"; echo trim($str,"Hed!");
echo "<br>(Working : Removes whitespace or other characters from both sides of a
string)"; echo "<hr>4) strrev() <br> Result: ";
echo strrev("Hello World!");
echo "<br>(Working : Reverses a string)";
?>
Output:
g) To create a session.
<?php
Session_Start();
$value = "PATEL NENS";
$_SESSION['Session_name']=$value;
if(isset($_SESSION["Session_name"])){
echo "Session_name: ".$_SESSION["Session_name"];
}
else{
P A G E | 46
LIT/IT/2022-23/3151606
echo "Session_name not found";

}
?>
Output:
h) To set cookie and fetching value for cookie.

<html>
<body>
<?php
setcookie("user","NENS",TIME()+360000);
if(!isset($_COOKIE['user']))
{
Echo"Sorry, Cookie is not found!";
}
else
{
echo"<br/> Cookie value:".$_COOKIE["user"];
}
?>
</body>
</html>
Output:
P A G E | 47
LIT/IT/2022-23/3151606
Practical: 13
AIM: Write a PHP program to store the data into a database and also retrieve the data
from it and display it on a webpage.
<?php
//create connection
if(isset($_POST['fname']) && isset($_POST['lname'])){
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$conn = mysqli_connect('localhost', 'root');
mysqli_select_db($conn, 'pr12');
$query = "insert into userdata(username, problems) values('$fname', '$lname')";
if(mysqli_query($conn, $query)){
echo "<script>alert('Data Added');</script>";
}
}
?>
<html>
<head>
<title>Mid-Result</title>
</head>
<body>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<form method="post">
Sr. No:
<input type="text" placeholder="user-number" name="fname">
<br><br>
Problems Solved:
<input type="text" placeholder="total number" name="lname">
<br><br>
<input type="submit">
<br><br>
RESULT :
</form>
<?php
$mysqli = new mysqli('localhost','root','','pr12');
$sql = " SELECT * FROM userdata ORDER BY score DESC ";

$result = $mysqli->query($sql);
?>
P A G E | 48
LIT/IT/2022-23/3151606
<table >
<tr >
<th>Sr. No.</th>
<th>Problems solved</th>
</tr>
<?php
while($rows=$result->fetch_assoc())
{
?>
<tr align="center">
<td><?php echo $rows['username'];?></td>
<td><?php echo $rows['problems'];?></td>
</tr>
<?php
}
?>
</table>
<br><br>
</body>
</html>
Output:
P A G E | 49
LIT/IT/2022-23/3151606
P A G E | 50
LIT/IT/2022-23/3151606

Practical: 1: 200860116002 Web Development

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical: 1: 200860116002 Web Development

Uploaded by

Copyright:

Available Formats

200860116002 Web Development

c)Table using colspan and rowspan:

<h1><a>Welcome to Web Development</a></h1>

e)Wild Card Selector

<div class="first_str">There is much text</div>

<h1 class="a">Most Beautiful Actress</h1>

d) Absolute and Auto

e) Relative and absolute

After Hover the Red Container:

b) To check if the number is even or odd.

c) Which takes input n and displays the first n odd number,divisible by 7.

d) To perform numeric validation.

h) To perform password matching.

Result : <span id="ans"></span>

i) To perform Email validation.

c) To find factorial of a given number.

d) To find a given number is even or odd.

<input type="submit" name="submit">

e) To create and display arrays.

for ($col = 0; $col < 3; $col++) {

f) To perform string operation.

echo "Session_name not found";

h) To set cookie and fetching value for cookie.

$sql = " SELECT * FROM userdata ORDER BY score DESC ";

You might also like