Scribd
Upload
901 views43 pages

Practical 1: HTML Codes For Displaying Image and Demonstrate Hyper-Linking Code

The document contains code for several HTML practical exercises: 1) Displaying an image and creating a hyperlink 2) Embedding a video 3) Creating a feedback form using inputs and selects 4) Creating a contact form with inputs laid out in a table 5) Creating a static webpage for Parul University with navigation links between pages for login, registration, contact, and feedback.

Uploaded by

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

Practical 1: HTML Codes For Displaying Image and Demonstrate Hyper-Linking Code

The document contains code for several HTML practical exercises: 1) Displaying an image and creating a hyperlink 2) Embedding a video 3) Creating a feedback form using inputs and selects 4) Creating a contact form with inputs laid out in a table 5) Creating a static webpage for Parul University with navigation links between pages for login, registration, contact, and feedback.

Uploaded by

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

DWPD (3350702) 156380307529

Practical 1

Aim: - HTML codes for displaying image and demonstrate hyper-linking


Code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<img src = "C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg" image"


width = "125" height = "100"/>

<a href = "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwiN-


9SQhPLiAhWXfisKHRF-CrQQjRx6BAgBEAU&url=https%3A%2F
%2Fsearchengineland.com%2Fgoogle-dropped-google-instant-search-
279674&psig=AOvVaw1Se8I-
nsvFPYddNtreYu1K&ust=1560912978222276"/>image</a>

</body>

</html>

Output

PIET-DS Page 1
DWPD (3350702) 156380307529

Practical 2

Aim: - Write html code to attach video on webpage using embed in html

<html>

<head>

<title> video </title>

</head>

<body>

<embed src="C:\Users\Public\Videos\Sample
Videos\Wildlife.wmv"height="450"width="250"/>

</body>

</html>

Output

PIET-DS Page 2
DWPD (3350702) 156380307529

Practical 3

Aim: - Create feedback form using form handling

<html>

<head>

<title>Feedback Form</title>

</head>

<body>

<form method="post" action="//submit.form" >

<div style="width: 400px;">

</div>

<div style="padding-bottom: 18px;font-size : 24px;">Student Feedback</div>

<div style="padding-bottom: 18px;font-size : 18px;">Please help us improve our courses by


filling out this form.</div>

<div style="display: flex; padding-bottom: 18px;width : 500px;">

<div style=" margin-left : 0; margin-right : 1%; width : 49%;">Teacher / Instructor first


name<br/>

<input type="text" id="data_3" name="data_3" style="width: 100%;" class="form-control"/>

</div>

<div style=" margin-left : 1%; margin-right : 0; width : 49%;">Teacher / Instructor last


name<br/>

<input type="text" id="data_4" name="data_4" style="width: 100%;" class="form-control"/>

</div>

</div><div style="display: flex; padding-bottom: 18px;width : 500px;">

<div style=" margin-left : 0; margin-right : 1%; width : 49%;">Subject<br/>

<input type="text" id="data_5" name="data_5" style="width: 100%;" class="form-control"/>

</div>

<div style=" margin-left : 1%; margin-right : 0; width : 49%;">Course code<br/>

<input type="text" id="data_6" name="data_6" style="width: 100%;" class="form-control"/>

PIET-DS Page 3
DWPD (3350702) 156380307529

</div>

</div><div style="padding-bottom: 18px;">Why did you chose this course?<br/>

<select id="data_7" name="data_7" style="width : 500px;" class="form-


control"><option>Degree requirement</option>

<option>Personal interest</option>

</select>

</div>

<div style="padding-bottom: 18px;">Level of knowledge on start of course<br/>

<select id="data_9" name="data_9" style="width : 500px;" class="form-


control"><option>Very good</option>

<option>Good</option>

<option>Fair</option>

<option>Poor</option>

<option>Very poor</option>

</select>

</div>

<div style="padding-bottom: 18px;">Level of effort invested in course<br/>

<select id="data_10" name="data_10" style="width : 500px;" class="form-


control"><option>Very good</option>

<option>Good</option>

<option>Fair</option>

<option>Poor</option>

<option>Very poor</option>

</select>

</div>

<div style="padding-bottom: 18px;">Level of knowledge at the end of the course<br/>

<select id="data_11" name="data_11" style="width : 500px;" class="form-


control"><option>Very good</option>

PIET-DS Page 4
DWPD (3350702) 156380307529

<option>Good</option>

<option>Fair</option>

<option>Poor</option>

<option>Very poor</option>

</select>

</div>

<div style="padding-bottom: 18px;">Level of communication<br/>

<select id="data_12" name="data_12" style="width : 500px;" class="form-


control"><option>Very good</option>

<option>Good</option>

<option>Fair</option>

<option>Poor</option>

<option>Very poor</option>

</select>

</div>

<div style="padding-bottom: 18px;">Would you recommend this course to other students?


<br/>

<select id="data_8" name="data_8" style="width : 500px;" class="form-


control"><option>Yes</option>

<option>No</option>

<option>Not sure</option>

</select>

</div>

<div style="padding-bottom: 18px;"><input name="skip_Submit" value="Submit"


type="submit"/></div>

<div style="padding-bottom: 18px;"><input name="skip_reset" value="reset"


type="reset"/></div>

</form>

</body>

PIET-DS Page 5
DWPD (3350702) 156380307529

</html>

Output:-

PIET-DS Page 6
DWPD (3350702) 156380307529

Practical 4

Aim: - Create feedback form using form handling

<html>

<head>

<title>Untitled Document</title>

</head>

<body bgcolor="black" style="color:#CC3300">

<h3> Contact form</h3>

<p> <pre>Please don't hesitate to contact me ifyou have ane question,comments</br>or


messages. I'll try to respond toeverything!</pre></p>

<div align="left">

<form action="#">

<table>

<tr>

<td>Name:</td>

<td> &nbsp;<input type="text" name="txt"/></td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Contact Information</b></td>

</tr>

<tr>

<td>Email: </td>

<td>&nbsp;<input type="email" name="em"/></td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Telephone: +475637458 </td>

PIET-DS Page 7
DWPD (3350702) 156380307529

</tr>

<tr>

<td>Subject:</td>

<td>&nbsp;<input type="text" name="sub"/></td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email: [email protected] </td>

</tr>

<tr>

<td>Message:</td>

<td>&nbsp;<textarea rows="10" cols="21"></textarea></td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: metro road,vadodara. </td>

</tr>

<tr>

<td>

<input type="submit" name="send" value="send"/>

</td>

</tr>

</table><br />

</form>

<p align="right ">hello</p>

</div>

PIET-DS Page 8
DWPD (3350702) 156380307529

</body>

</html>

Output:-

PIET-DS Page 9
DWPD (3350702) 156380307529

Practical-5

Aim:- Create static Parul University Webpage design using division tag

Code: Home page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>parul university</title>

</head>

<body background="pu1.PNG" >

<div>

<h1> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><center><a
href="login1.html"><b>Login</b></a><br />

<a href="regi.html"><b>Addmission form</b></a><br />

<a href="contact.html"><b>Contact Form</b></a></br>

<a href="student.html"><b>Feedfack</b></a></center>

</h1></div>

</body>

</html>

PIET-DS Page 10
DWPD (3350702) 156380307529

Output:-

Code: Login Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>parul university</title>

</head>

<body background="Home-page-2000-x-900-1.jpg" ></br></br></br></br>

<h1><center>Parul University </center></h1>

<form action="loginpage.html">

<center>

<table bgcolor="#FFFFFF" style="size:portrait">

<tr>

<td><b>Email:</b></td>

<td><input type="Email" name="Email"/></td>

</tr>
PIET-DS Page 11
DWPD (3350702) 156380307529

<tr>

<td><b>Password:</b></td>

<td><input type="Password" name="Password"/></td>

</tr>

<tr>

<td>

<a href="forgot.html">Forgot Password?</a>

</td>

<td>

<a href="regi.html">Sign up</a>

</td>

</tr>

</table>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp

<input type="Submit" name="Login" value="Login" /></center>

</form>

</body>

</html>

PIET-DS Page 12
DWPD (3350702) 156380307529

Output:-

Code:- Login successful

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Login page</title>

</head>

<body background="capture.jpg">

<h1><center>Login Successful</center></h1>

<p><h2><center>Welcome..! </br>

to the Parul University.</center></h2></pre>

</body>

</html>

PIET-DS Page 13
DWPD (3350702) 156380307529

Output:-

Code:- forgot password

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> forgot</title>

</head>

<body>

<h1><center> Enter your E-Mail ID</center></h1>

<form action="regi.html">

<center><table>

<tr>

<td>E-Mail ID:</td>

PIET-DS Page 14
DWPD (3350702) 156380307529

<td><td><input type="Email" name="Email"/></td>

</tr>

<tr>

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

</tr>

</table></center>

</form>

</body>

</html>

Output:-

PIET-DS Page 15
DWPD (3350702) 156380307529

Output:- registration Form

Output:- Contact Form

PIET-DS Page 16
DWPD (3350702) 156380307529

Output:- Feedback form

PIET-DS Page 17
DWPD (3350702) 156380307529

Practical:-6

Aim:-Write a code for design menu system of Notepad using list tag

Code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Menu System </title>

</head>

<body>

<font size="40"><h1> Notepad menu system</h1></font>

<font size="32">

<ol style="1">

<li><a href="file.html"> File</a></li>

<li><a href="edit.html">Edit</a></li>

<li><a href="format.html">Format</a></li>

<li><a href="view.html">View</a></li>

<li><a href="help.html">Help</a></li>

<ol></font>

</body>

</html>

PIET-DS Page 18
DWPD (3350702) 156380307529

Output:-

Code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Menu System </title>

</head>

<body>

<h1> File </h1>

<ul style="*">

<li> New </li>

<li> Open </li>

<li> Save </li>

<li> Save As </li>

<li> Close </li>

<li> Print </li>

PIET-DS Page 19
DWPD (3350702) 156380307529

</ul>

</body>

</html>

Output:-

Code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Menu System </title>

</head>

<body>

<h1> Edit </h1>

<ul style="*">

<li> Undo </li>

PIET-DS Page 20
DWPD (3350702) 156380307529

<li> Cut </li>

<li> Copy </li>

<li> Paste </li>

<li> Delete </li>

<li> Select All </li>

</ul>

</body>

</html>

Output:-

Code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Menu System </title>

</head>

PIET-DS Page 21
DWPD (3350702) 156380307529

<body>

<h1> Format </h1>

<ul style="*">

<li> Word wrap </li>

<li> Font </li>

</ul>

</body>

</html>

Output:-

Code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Menu System </title>

</head>

<body>

PIET-DS Page 22
DWPD (3350702) 156380307529

<h1> View </h1>

<ul style="*">

<li> Status bar </li>

</ul>

</body>

</html>

Output:-

Code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title> Menu System </title>

</head>

<body>

<h1> Help </h1>

<ul style="*">

<li> View help </li>


PIET-DS Page 23
DWPD (3350702) 156380307529

<li> About Notepad </li>

</ul>

</body>

</html>

Output:-

Practical 7
PIET-DS Page 24
DWPD (3350702) 156380307529

Aim:- Design Google Page using HTML 5


<html>

<head>

<title>Google</title>

</head>

<body>

<div style="margin-top:0px; margin-left:0px; margin-right:1000px; margin-bottom:100px;


padding-left:1300px"><a href="www.gmail.com">Gmail</a>

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

</div>

<center>

<img src="google.jpg" alt="google" height="200px" width="300px"/><br/>

<input type="search" size="80px" /><br/><br/>

<input type="submit" value="Google search"/>

<input type="submit" value="I'm feeling Lucky"/>

<br/>

<br/>

<label>Google Ofered in:</label>

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

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

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

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

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

</center>

</body>

</html>

OUTPUT

PIET-DS Page 25
DWPD (3350702) 156380307529

PIET-DS Page 26
DWPD (3350702) 156380307529

Practical 8
Aim: - Apply CSS formatting to created pages & use readymade CSS
template
<html>

<head>

<title>CSS Template</title>

<meta charset="utf-8">

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

<style>

box-sizing: border-box;

font-family: Arial, Helvetica, sans-serif;

body

margin: 0;

font-family: Arial, Helvetica, sans-serif;

.topnav

overflow: hidden;

background-color: #333;

.topnav a

float: left;

PIET-DS Page 27
DWPD (3350702) 156380307529

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

.topnav a:hover

background-color: #ddd;

color: black;

.content

background-color: #ddd;

padding: 10px;

height: 200px;

.footer

background-color: #f1f1f1;

padding: 10px;

</style>

</head>

<body>

<div class="topnav">

PIET-DS Page 28
DWPD (3350702) 156380307529

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

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

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

</div>

<div class="content">

<h2>CSS Template</h2>

<p>A topnav, content and a footer.</p>

</div>

<div class="footer">

<p>Footer</p>

</div>

</body>

</html>

Output:

PIET-DS Page 29
DWPD (3350702) 156380307529

Practical 9
Aim:- Write a php script to print welcome message and also make
calculator using operators
<?php

echo "<h1><b>Welcome</b></h1>";

$a=16;

$b=8;

echo "<h1><b>Arithmatic Operators</b></h1>";

$cal="add";

switch($cal)

case "add":

$c=$a+$b;

echo "addition of two number is $c";

break;

case "sub":

$c=$a-$b;

echo "subtraction of two number is $c";

break;

case "mul":

$c=$a*$b;

echo "multiplication of two number is $c";

break;

case "div":

$c=$a/$b;

echo "division of two number is $c";

break;

PIET-DS Page 30
DWPD (3350702) 156380307529

default:

echo "exit";

break;

$x=5;

$y=5.0;

echo "<h1><b>Comparision operator</b></h1>";

echo"The value of x = $x";

echo"<br/>";

echo"The value of y = $y";

echo"<br/>";

if($x===$y)

echo"Using = = = The number is same";

else

echo"Using = = = The number is not same";

echo"<br/>";

if($x==$y)

echo"Using = = The number is same";

else

echo"Using = = The number is not same";

PIET-DS Page 31
DWPD (3350702) 156380307529

echo "<h1><b>logical Operators</b></h1><br/>";

$a = 42;

$b = 0;

if( $a && $b )

echo "TEST1 : Both a and b are true<br/>";

else

echo "TEST1 : Either a or b is false<br/>";

if( $a and $b )

echo "TEST2 : Both a and b are true<br/>";

else

echo "TEST2 : Either a or b is false<br/>";

if( $a || $b )

echo "TEST3 : Either a or b is true<br/>";

PIET-DS Page 32
DWPD (3350702) 156380307529

else

echo "TEST3 : Both a and b are false<br/>";

if( $a or $b )

echo "TEST4 : Either a or b is true<br/>";

else

echo "TEST4 : Both a and b are false<br/>";

$a = 10;

$b = 20;

if( $a )

echo "TEST5 : a is true <br/>";

else

echo "TEST5 : a is false<br/>";

if( $b )

PIET-DS Page 33
DWPD (3350702) 156380307529

echo "TEST6 : b is true <br/>";

else

echo "TEST6 : b is false<br/>";

if( !$a )

echo "TEST7 : a is true <br/>";

else

echo "TEST7 : a is false<br/>";

if( !$b )

echo "TEST8 : b is true <br/>";

else

echo "TEST8 : b is false<br/>";

?>

Output

PIET-DS Page 34
DWPD (3350702) 156380307529

PIET-DS Page 35
DWPD (3350702) 156380307529

Practical 10
Aim: - Write a php script to get type of variable using gettype()
and settype()
<? php

$i=1;

echo gettype($i);

settype($i,"string");

echo "<br/>";

echo gettype($i);

?>

Output

PIET-DS Page 36
DWPD (3350702) 156380307529

Practical 11
Aim: - Write a php script to set type of variable using type casting
<?php

$x = "Hello world!";

$y = 'Hello world!';

echo $x;

echo "<br>";

echo $y;

?>

Output

PIET-DS Page 37
DWPD (3350702) 156380307529

Practical 12
Aim : - Write php script to generate result and display grade
<?php

$a=50;

echo "Your Grade : ";

switch($a)

case $a>=90:

echo " A <br>";

break;

case $a>=80:

echo " B <br>";

break;

case $a>=70:

echo " C <br>";

break;

case $a>=50:

echo " D <br>";

break;

default:

echo " You are Fail";

break;

PIET-DS Page 38
DWPD (3350702) 156380307529

?>

Output

PIET-DS Page 39
DWPD (3350702) 156380307529

Practical 13
Aim: - Write php script for Fibonacci series and maximum out of three
numbers
<?php

$num = 0;

$n1 = 0;

$n2 = 1;

echo "<h3>Fibonacci series for first 12 numbers: </h3>";

echo "\n";

echo $n1.' '.$n2.' ';

while ($num < 10 )

$n3 = $n2 + $n1;

echo $n3.' ';

$n1 = $n2;

$n2 = $n3;

$num = $num + 1;

?>

Output

PIET-DS Page 40
DWPD (3350702) 156380307529

Aim: - Maximum out of three numbers


<?php

$a=20;

$b=10;

$c=1;

if($a>$b && $a>$c)

echo "Maximum value is a=".$a;

else if($b>$a && $b>$c)

echo "Maximum value is b=".$b;

else if($c>$a && $c>$b)

echo "Maximum value is c=".$c;

else

echo"Dont Enter Equal Values";

?>

Output

PIET-DS Page 41
DWPD (3350702) 156380307529

Practical 14
Aim: - Write php script to add 2*2 matrices
<?php

$a1 = Array('0' => Array('0' => 1,'1' => 2),'1' => Array('0' => 4,'1' => 5));

$a2 = Array('0' => Array('0' => 1,'1' => 2),'1' => Array('0' => 4,'1' => 5));

$sumArray = array();

$result = array();

for($i=0; $i<=1; $i++)

for($j=0; $j<=1; $j++)

$result[$i][$j] = $a1[$i][$j] + $a2[$i][$j];

echo "<pre/>";print_r($result);

?>

Output

PIET-DS Page 42
DWPD (3350702) 156380307529

PIET-DS Page 43

You might also like