Scribd
Upload
24 views36 pages

Web 40

WEB Practical file

Uploaded by

Jignasha V Soni
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
24 views36 pages

Web 40

WEB Practical file

Uploaded by

Jignasha V Soni
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/ 36

WEB Programming (3160713)

PRACTICAL – 1
AIM: DESIGN A SIMPLE HTML.
PRACTICAL - 1.1
AIM: WAP IN HTML CONTAINING FOLLOWING TAG.
-<h1 to h6></h1 to /h6>
-<p></p>
-<br> and </hr>
-&ndsp;
-<!-->
Code:
<html>
<head>
<title>Html tags</title>
</head>
<body>
<h1>WEB PROGRAMING USED TO</h1>
<h2>Create websites</h2>
<h3>Online stores</h3>
<h4>Web applications</h4>
<h5>Online services </h5>
<h6>Handle data</h6>
<p>What is html?<br>
HTML is the standard markup language for creating Web pages.<hr>
HTML stands for Hyper Text Markup Language.&nbsp;
<!-- learn for web design-->
</p>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
1
WEB Programming (3160713)
PRACTICAL- 1.2
AIM: WAP IN HTML WHICH DEMONSTRATE ALL FORMATTING TAG.
Code:
<html>
<body>
<b> -This is Bold text</b><br>
<strong>-This is Important text</strong><br>
<i>-This is Italic text</i><br>
<em>-This is Emphasized text</em><br>
<mark> -This is Marked text</mark><br>
<small>-This is Smaller text</small><br>
<del>-This is Deleted text</del><br>
<ins>-This is Inserted text</ins><br>
<sub>-This is Subscript text</sub><br>
<sup>-This is Superscript text</sup>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
2
WEB Programming (3160713)
PRACTICAL -1.3
AIM: WAP IN HTML WHICH DEMONSTRATE <FONT> TAG.
Code:
<html>
<head>
<title>font tag</title>
</head>
<body>
<font size="5" face="Times New Roman" color="#a8005b">Font tag use in html4 not for
html5.</font><br>
<font size="4" face="Times New Roman" color="#ee00ee">In Font tag Size, Face, Color is
attribute.</font>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
3
WEB Programming (3160713)
PRACTICAL- 1.4
AIM: WAP IN HTML WHICH DEMONSTRATE ALL TYPE OF LIST.
Code:
<html>
<head>
<title> Lists</title><style type="text/css">
li.circle{list-style-type: circle;}
li.square{list-style-type: square;}
li.disc{list-style-type: disc;}
li.none{list-style-type: none;}
li.decimal{list-style-type: decimal;}
li.ualpha{list-style-type: upper-alpha;}
li.lalpha{list-style-type: lower-alpha;}
li.uroman{list-style-type: upper-roman;}
li.lroman{list-style-type: lower-roman;}
</style></head>
<body>
<h2>Unordered List of vegetables</h2>
<ul>
<li class="circle">Potato</li>
<li class="square">Carrot</li>
<li class="disc">Beens</li>
<li class="none">Spinch</li>
</ul>
<h2>Ordered List of vegetables</h2>
<ol>
<li class="decimal">Potato</li>
<li class="ualpha">Carrot</li>
<li class="lalpha">Beens</li>
<li class="uroman">Spinch</li>
<li class="lroman">Cucumber</li>
VIEAT/B.E/SEM-IV/220943107040
4
WEB Programming (3160713)
</ol></body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
5
WEB Programming (3160713)
PRACTICAL -1.5
AIM: WAP IN HTML WHICH DEMONSTRATE COLOR AND BACKGROUND
FACILITY.
Code:
<html>
<head>
<title>Color and background</title>
</head>
<body>
<h1 style="color: white; background-color: black;">what is web browser?</h1>
<p style="color: green;">The Web Browser is one of the most used tool for browsing the web
pages.</p>
<p style="border: 2px solid yellow;">Web brwoser is kind of software to uses resource on the
web.</p>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
6
WEB Programming (3160713)

PRACTICAL - 1.6
AIM: WAP IN HTML WHICH DEMONSTRATE USE OF <IMG> AND
<AREA> TAG.
Code:
<html>
<head>
<title>image and area</title>
</head>
<body>
<img src="earth.jpg" alt="earth" usemap="earth" width="300" height="300">
<map name="earth">
<area shape="rect" coords="34,44,270,350" href="pr1.5.html">
</map>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
7
WEB Programming (3160713)

PRACTICAL- 1.7
AIM: WAP IN HTML WHICH DEMONSTRATE TIME TABLE DOCUMENT
USING FULLY <TABLE>TAG.
Code:
<html>
<head>
<title>Time Table</title>
<style type="text/css">table,th,td{
border: 1px solid black;
}</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll.num</th>
<th>Contact.num</th>
<th>City</th>
</tr>
<tr>
<td>Maya</td>
<td>A123</td>
<td>1111</td>
<td>Banglore</td>
</tr>
<tr>
<td>Riya</td>
<td>A124</td>
<td>2222</td>
<td>California</td>

VIEAT/B.E/SEM-IV/220943107040
8
WEB Programming (3160713)
</tr>
</table>
</table>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
9
WEB Programming (3160713)

PRACTICAL - 1.8
AIM: WAP IN HTML WHICH DEMONSTRATE <FRAMESET><FAMRE><NO
FARME>AND<IFRAME>.
Code:
<html>
<head>
<title>Frames</title>
</head>
<body>
<frameset cols="20%,60%,20%">
<iframe name="top" src="earth.jpg"></iframe>
<iframe name="main" src="earth.jpg"></iframe>
<frame name="bottom" src="earth.jpg"></frame>
<noframes>
<body>The browser you are working does not
support frames.</body>
</noframes>
</frameset>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
10
WEB Programming (3160713)

VIEAT/B.E/SEM-IV/220943107040
11
WEB Programming (3160713)
PRACTICAL – 2
AIM: DESIGN A SIMPLE HTML FORM FOR
PRACTICAL- 2.1
AIM: STUDENT REGISTRATION
Code:
<html>
<head>
<title>Student Registration Form</title>
</head>
<body bgcolor="skyblue">
<h1>Student Registration Form</h1>
<br>
<form>
<label>User Name:</label><br>
<input type="text" name="Uname" placeholder="Enter your Username"><br><br>
<label>Middle Name:</label><br>
<input type="text" name="mname" placeholder="Enter your Middle name"><br><br>
<label>Last Name:</label><br>
<input type="text" name="lname" placeholder="Enter your Last name"><br><br>
<label>Course:</label><br>
<select>
<option>Select your course here</option>
<option>BE</option>
<option>ME</option>
<option>BCA</option>
<option>MCA</option><br>
</select><br><br>
<label>Gender:</label><br>
<input type="radio" name="Male">Male<br>
<input type="radio" name="Female">Female<br>
<input type="radio" name="Other">Other<br><br>
<label>Phone Number:</label><br>
<input type="number" name="Number" placeholder="+91 123456789"><br><br>
<label>Email Id:</label><br>
<input type="email" name="email" placeholder="xyz@mail.com"><br><br>
<label>Password:</label><br>
<input type="password" name="Password" placeholder="********"><br><br>
<input type="submit" name="Submit">
</form>
</body>
</html>
VIEAT/B.E/SEM-IV/220943107040
12
WEB Programming (3160713)
Output:

VIEAT/B.E/SEM-IV/220943107040
13
WEB Programming (3160713)
PRACTICAL 2.2
AIM: RAILWAY RESERVATION
Code:
<html>
<head>
<title>Railway Reservation Form</title>
</head>
<body bgcolor="lightgreen">
<h1>Railway Reservation form</h1>
<form>
<label>User Name:</label><br>
<input type="text" name="Uname" placeholder="Enter your Username"><br><br>
<label>Phone Number:</label><br>
<input type="number" name="Number" placeholder="+91 123456789"><br><br>
<label>Person:</label><br>
<input type="number" name="Number" placeholder="1-2"><br><br>
<label>Child:</label><br>
<input type="number" name="Number" placeholder="1-2"><br><br>
<label>Email Id:</label><br>
<input type="email" name="email" placeholder="xyz@mail.com"><br><br>
<label>From:</label><br>
<input type="text" name="Uname" placeholder="Enter your Username"><br><br>
<label>To:</label><br>
<input type="text" name="Uname" placeholder="Enter your Username"><br><br>
<label>Set:</label><br>
<select>
<option>Genral</option>
<option>Ladies</option>
<option>SR.Citizin</option>
<option>Person with disability</option>
<option>Premium</option><br>
</select><br><br>
<label>Class:</label><br>
<select>
<option>AC</option>
<option>First Class</option>
<option>Sleeper</option>
<option>BCA</option>
<option>MCA</option><br>
</select><br><br>
<input type="date" name="date"><br><br>
<input type="submit" name="Submit">
VIEAT/B.E/SEM-IV/220943107040
14
WEB Programming (3160713)
</form>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
15
WEB Programming (3160713)
PRACTICAL – 3
AIM: WRITE XHTML TO GENERATE A STRUCTURE LIKE RESUME WITH
ALL REQUIRED DETAILS AND CANDIDATE PHOTO.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resume document</title>
</head>
<body bgcolor="pink">
<table>
<td width="50%" bgcolor="red" align="center">
<div >
<img src="avtar.png" width="30%" height="30%" align="center">
<h2>Contact</h2><hr>
<h4><u>Phone</u></h4>
<p>+91 123456789</p>
<h4><u>Email</u></h4>
<p>xyz@gmail.com</p>
<h4><u>Address</u></h4>
<p>Adajan, Surat, Gujarat-395009</p>
<h2>Education</h2><hr>
<p><u>2019</u></p>
<p>Diploma Computer Engineer</p>
<p><u>2024</u></p>
<p>Bachlor in Computer Engineer 6<sup>th</sup> sem</p>
</div></td>
<td width="50%" bgcolor="skyblue"><div>
<h2>Er. Jignasha Soni</h2><hr color="black">
<p>Jr. Business Development Executive</p>
<h2><u>About Me</u></h2>
<p>Business Development Executive (Rremote worked)with a demonstrated history of
working in the IT industry. Skilled in Graphic Design, Web Design, English, and Data Entry.</p>
<h2><u>Skills</u></h2>
<table>
<tr>
<th>Commmunication</th>
<th>Visual</th>
<th>Clint Convertion</th>
</tr>

VIEAT/B.E/SEM-IV/220943107040
16
WEB Programming (3160713)
<tr>
<td><img src="star.png"><img src="star.png"><br><img
src="star.png"></td>
<td><img src="star.png"><img src="star.png"></td>
<td><img src="star.png"><img src="star.png"><img
src="star.png"><br><img src="star.png"></td>
</tr>
</table>
<h2><u>Expertise</u></h2>
<p>Visual Design</p>
<p>Prposal</p>
<h2><u>Language</u></h2>
<p>Gujrati, Hindi, English</p>

</div></td>
</table>
</body>
</html>

VIEAT/B.E/SEM-IV/220943107040
17
WEB Programming (3160713)
Output:

VIEAT/B.E/SEM-IV/220943107040
18
WEB Programming (3160713)
PRACTICAL – 4
AIM: DEVELOP HTML PAGE USING CSS WHICH COVERS IMAGE,
COLOR, TEXT, FONT, BORDER, BOX, AND MARGIN.
PRACTICAL 4.1
AIM : INTERNAL
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Work</title>
<style type="text/css">
img{
width: 200px;
height: 200px;
margin: 0 140px;
}
h5{
color: #3314b8;
font-family: open-sans;
font-size: 20px;
font-weight: 500;
margin: 10px;
text-align: center;
}
p{
color: #000000;
font-style: italic;
border: 2px solid #25d5d2;
margin: 20px;
text-align: center;

VIEAT/B.E/SEM-IV/220943107040
19
WEB Programming (3160713)
}
</style>
</head>
<body>
<div>
<img src="css3.png">
<h5>Cascading Style Sheet</h5>
<p>Cascading Style Sheets is a style sheet language used for specifying the presentation and styling
of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology
of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
20
WEB Programming (3160713)
PRACTICAL - 4.2
AIM : EXTERNAL
Code:
Pr4.css
<style type="text/css">
img{
width: 200px;
height: 200px;
margin: 0 140px;
}
h5{
color: #3314b8;
font-family: open-sans;
font-size: 20px;
font-weight: 500;
margin: 10px;
text-align: center;
}
p{
color: #000000;
font-style: italic;
border: 2px solid #25d5d2;
margin: 20px;
text-align: center;
}
</style>

VIEAT/B.E/SEM-IV/220943107040
21
WEB Programming (3160713)
Pr4.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Work</title>
<link rel="stylesheet" type="text/css" href="pr4.css">
</head>
<body>
<div>
<img src="css3.png"></img>
<h5>Cascading Style Sheet</h5>
<p>Cascading Style Sheets is a style sheet language used for specifying the presentation and styling
of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology
of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
22
WEB Programming (3160713)
PRACTICAL- 4.3
AIM: INLINE STYLE SHEET
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Work</title>
</head>
<body>
<div>
<img src="css3.png" style="width: 200px;height: 200px;margin: 0 140px;">
<h5 style="color: #3314b8;font-family: open-sans;font-size: 20px;font-weight: 500;margin:
10px;text-align: center;">Cascading Style Sheet</h5>
<p style="color: #000000;font-style: italic;border: 2px solid #25d5d2;margin: 20px;text-align:
center;">Cascading Style Sheets is a style sheet language used for specifying the presentation and
styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
23
WEB Programming (3160713)

PRACTICAL – 5
AIM:- CREATE ONE BOX MODEL WITH ITS ALL STYLE PROPERTIES.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Box model</title>
<style type="text/css">
div {
margin: 20px;
padding: 20px;
border: 2px solid #079797;
width: 400px;
background-color: #dcededee;
}
</style>
</head>
<body>
<h3>Box model in CSS</h3>
<div>
The CSS box model is essentially a box that wraps around every HTML element. It consists
of: content, padding, borders and margins.
</div>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
24
WEB Programming (3160713)

PRACTICAL – 6
AIM:- MAKE AN APPLICATION WHICH CHECK USERNAME AND
PASSWORD WITH JAVASCRIPT. AND USERNAME AND PASSWORD ARE
CORRECT THEN NAVIGATE NEXT PAGE.
Code:
<html>
<head>
<title> js page </title>
</head>
<script>
function verifyPassword() {
var pw = document.getElementById("pswd").value;
var un= document.getElementById("username").value;
if (un=="") {
document.getElementById("message").innerHTML="Fill the Username!!";
return false;
}
if(pw == "") {
document.getElementById("message").innerHTML = "Fill the password please!";
return false;
}
if(pw.length < 8) {
document.getElementById("message").innerHTML = "Password length must be atleast 8
characters";
return false;
}
if(pw.length > 15) {
document.getElementById("message").innerHTML = "Password length must not exceed 15
characters";
return false;

VIEAT/B.E/SEM-IV/220943107040
25
WEB Programming (3160713)
} else {
alert("Password is correct");
window.open("https://www.google.com/");
}}
</script>
<body>
<h1 style="color:#1e95cb">Student login!!</h1>
<form onsubmit ="return verifyPassword()">
<td> Enter Username </td>
<input type="text" name="username" id="username"><br><br>
<td> Enter Password </td>
<input type = "password" id = "pswd" value = "">
<span id = "message" style="color:red"> </span> <br><br>
<input type = "submit" value = "Submit" style="background-color: #fff">
</form>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
26
WEB Programming (3160713)

VIEAT/B.E/SEM-IV/220943107040
27
WEB Programming (3160713)

VIEAT/B.E/SEM-IV/220943107040
28
WEB Programming (3160713)
PRACTICAL – 7
AIM:- WRITE A JAVASCRIPT THAT USES LOOP, WHICH SEARCHES A
WORD IN SENTENCE HELD IN AN ARRAY, RETURNING THE INDEX OF
THE WORD.
Code:
<!DOCTYPE html>
<html>
<head>
<title>loop and array</title>
</head>
<script type="text/javascript">
function search(form1) {
var sentence=form1.input.value;
var pattern=prompt("Enter the word to searach:","");
alert(pattern);
temp=sentence.split(" ");
for (var i = 0; i<temp.length; i++) {
if(temp[i]==pattern){
alert("the word is at position"+(i+1));
}
}
}
</script>
<body>
<center>
<form name="form1">
<br><br><b style="margin: 20px; padding: 10px; font-size: 20px; color: #0a6d93">Enter the
sentence:</b>
<input type="text" name="input" style="border:2px solid; border-radius: 5px; width: 200px;
height: 40px;"><br><br>

VIEAT/B.E/SEM-IV/220943107040
29
WEB Programming (3160713)
<input type="button" value="Click me" onclick="search(form1)" style="border: 2px solid
#000; border-radius: 5px; padding: 10px; background: #acd7f2">
</form>
</center>
</body>
</html>
Output:

VIEAT/B.E/SEM-IV/220943107040
30
WEB Programming (3160713)
PRACTICAL – 8
AIM:- WRITE A JAVASCRIPT THAT HANDLES THE FOLLOWING
MOUSE EVENTS ADD NECESSARY ELEMENTS.
(i) JAVA SCRIPT GIVES THE KEY CODE FOR THE KEY PRESSED,
(ii) IF THE KEY PRESSED IS “A”, “E”, “I”, “O”, “U” THE SCRIPT
SHOULD ANNOUNCE THAT VOWEL IS PRESSED.
(iii) WHEN THE KEY IS RELEASED BACKGROUND SHOULD CHANGE
TO BLUE.
Code:
<!DOCTYPE html>

<html>

<head>

<title>Mouse Events</title>

<style>
body {

background-color: white;

</style>

</head>

<body>

<script>

document.addEventListener("keydown", function (event) { var


keyCode = event.keyCode;

if (

VIEAT/B.E/SEM-IV/220943107040
31
WEB Programming (3160713)

String.fromCharCode(keyCode).toLowerCase() === "a" ||


String.fromCharCode(keyCode).toLowerCase() === "e" ||
String.fromCharCode(keyCode).toLowerCase() === "i" ||
String.fromCharCode(keyCode).toLowerCase() === "o" ||
String.fromCharCode(keyCode).toLowerCase() === "u"
){

alert("A vowel is pressed!"); }


});

document.addEventListener("keyup", function (event) {

// Change background color to blue when key is released


document.body.style.backgroundColor = "blue"; });

</script>

</body>

</html>
</html>
Output:

33
VIEAT/B.E/SEM-IV/220943107040
WEB Programming (3160713)

PRACTICAL – 9
AIM:- WRITE PHP PROGRAM TO FIND WHETHER ENTERED
YEAR IS LEAP YEAR OR NOT.
Code:
<?php
$year = 2019;
if ($year % 400 == 0) {
echo $year." is a leap year.";
} elseif ($year % 100 == 0) {
echo $year." is not a leap year.";
} elseif ($year % 4 == 0) {
echo $year." is a leap year.";
} else {
echo $year." is not a leap year.";
}
?>
Output:

34
VIEAT/B.E/SEM-IV/220943107040
WEB Programming (3160713)

PRACTICAL – 10
AIM:- WRITE PROGRAM TO SUM AND MULTIPLY TWO NUMBERS
USING JAVASCRIPT.
Code:
var a,b,c,d,e,f;
var string;
var mul;
a=2;
b=6;
c=a+b;
d=5;
e=9;
f=d*e;
string="The result is=";
document.write("performing addition of 2 and 6 is:");
document.write(string);
document.write(c);
mul="The result is=";
document.write("performing multiplication of 5 and 9 is:");
document.write(mul);
document.write(f);
Output:

35
VIEAT/B.E/SEM-IV/220943107040
WEB Programming (3160713)

PRACTICAL – 11
AIM:- INTRODUCTION TO PHP.
PHP:
PHP was created by Rasmus Lerdorf in 1994 and initially stood for “Personal Home Page.” Over the
years, it evolved into “PHP: Hypertext Preprocessor.”

PHP is a widely-used open source general-purpose scripting language that is especially suited for web
development and can be embedded into HTML.

For example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>

<?php
echo "Hi, I'm a PHP script!";
?>

</body>
</html>

Instead of lots of commands to output HTML (as seen in C or Perl), PHP pages contain HTML with
embedded code that does "something" (in this case, output "Hi, I'm a PHP script!"). The PHP code is
enclosed in special start and end processing instructions <?php and ?> that allow you to jump into and
out of "PHP mode."

What distinguishes PHP from something like client-side JavaScript is that the code is executed on the
server, generating HTML which is then sent to the client. The client would receive the results of running
that script, but would not know what the underlying code was. You can even configure your web server
to process all your HTML files with PHP, and then there's really no way that users can tell what you have
up your sleeve.

The best part about using PHP is that it is extremely simple for a newcomer, but offers many advanced
features for a professional programmer. Don't be afraid to read the long list of PHP's features. You can
jump in, in a short time, and start writing simple scripts in a few hours.

Although PHP's development is focused on server-side scripting, you can do much more with it.

36
VIEAT/B.E/SEM-IV/220943107040
WEB Programming (3160713)

PRACTICAL – 12
AIM:- WRITE A PROGRAM TO ADDITION OF TWO NUMBERS
USING PHP.
Code:
<?php
$a=6;
$b=8;
$c=$a+$b;
print("Addition of 6 and 8 is:");
print($c);
?>

Output:

37
VIEAT/B.E/SEM-IV/220943107040

You might also like