Scribd
Upload
29 views

Web Technology Lab

The document provides instructions for 7 assignments to write HTML, CSS, JavaScript, PHP, and JSP code to create tables, image maps, calculate temperatures, find minimum and maximum values, demonstrate GET and POST methods, and separate even and odd numbers in a range. It includes the name Angana Das, class and semester details for a web technology lab subject. Sample code and results are provided for each assignment.

Uploaded by

Monsta X
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

Web Technology Lab

The document provides instructions for 7 assignments to write HTML, CSS, JavaScript, PHP, and JSP code to create tables, image maps, calculate temperatures, find minimum and maximum values, demonstrate GET and POST methods, and separate even and odd numbers in a range. It includes the name Angana Das, class and semester details for a web technology lab subject. Sample code and results are provided for each assignment.

Uploaded by

Monsta X
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Name: Angana Das

Roll No: 81

Class: CSE 4B

Year: 4th Semester: 7th

Subject: Web Technology Lab

Subject Code: CS792C 


 

 
INDEX
Name..

Class.... .... Semester..... . Roll No .....

Paper Name .... ... Paper Cocde...

University Roll No. ... Year.

S.Nameof the Experiment Date of Date of Signature of


Experiment Submission Examiner
1) Write a single html program which implements image map concept using
‘usemap’ and <map>.
HTML Code:
Image.html
<!DOCTYPE html>

<title> image map </title>

<head> <li>Write a single html program which implements image map concept using ‘usemap’ and
<map></map></li> </head>

<body>

<h1>Click on the phone to see more!</h1>

<div>

<img src="img/phone.jfif" alt="phone" usemap="#imgmap" height="1220" width="1557">

<map name="imgmap">

<area shape="rect" coords="535,125,1023,1047" alt="connector" href="phone.html">

</map>

</div>

</body>

</html>

Phone.html
<!DOCTYPE html>

<title> More about Phone </title>

<head> <h1>Smart Phones</h1> </head>

<body>

<p> Smartphones have become a very important form of communication these days. It is
impossible for a rational person to deny the advantages of smartphones as they are devices suitable
for a wide variety of tasks. Let us try to understand smartphones along with their benefits with this
smartphone essay. </p>

<img src="img/phone2.jfif" alt="more phones" height="500" width="500">

</body>

</html>
Result:
Before clicking, initial page

After Clicking on the image


HTML Code:
<!DOCTYPE html>

<link rel="stylesheet" href="css/tabstyle.css">

<title>

Table2

</title>

<heading>

<li>Name: Angana Das</li>

<li>Assignment: 2. Write the HTML program to create the following table</li>

</heading>

<style>

table,td{

border:2px solid black;

border-collapse: collapse;

padding-block-start: 5%;

</style>

<body>

<table class="tab">

<tr>

<td colspan="2">Name</td>

<td colspan="2">Arnab</td>

</tr>

<tr>
<td colspan="2">Roll</td>

<td colspan="2">101</td>

</tr>

<tr>

<td >Subject</td>

<td >Max</td>

<td >Min</td>

<td >Obtain</td>

</tr>

<tr>

<td >Java</td>

<td >100</td>

<td >33</td>

<td >75</td>

</tr>

<tr>

<td >Python</td>

<td >100</td>

<td >33</td>

<td >70</td>

</tr>

</table>

</body>

</html>
CSS Code:
*{ margin:0%;

padding:0%; }

html { scroll-behavior: smooth; }

.tab{ margin: 12%;

border: 2px solid black;

border-collapse: collapse;

padding: 15%;

width: max-content; }

RESULT:
3) Write the HTML program to display the above table. Also insert an image
in the web page.
HTML Code:
<!DOCTYPE html>

<link rel="stylesheet" href="css/tabstyle.css">

<title> Table2 </title>

<heading>

<li>Assignment: 3. Write the HTML program to create the following table.Also insert an image in
the web page</li>

</heading>

<style>

table,td{ border:2px solid black;

border-collapse: collapse;

column-width: 12%;

width:75%;

padding-block-start: 5%; }

</style>

<body>

<div class="tb">

<table class="tab">

<tr>

<td colspan="2">Name</td>

<td colspan="2">Arnab</td>

</tr>

<tr>

<td colspan="2">Roll</td>

<td colspan="2">101</td>

</tr>
<tr>

<td >Subject</td>

<td >Max</td>

<td >Min</td>

<td >Obtain</td>

</tr>

<tr>

<td >Java</td>

<td >100</td>

<td >33</td>

<td >75</td>

</tr>

<tr>

<td >Python</td>

<td >100</td>

<td >33</td>

<td >70</td>

</tr>

</table>

</div>

</body>

</html>

CSS Code:
*{ margin:0%;

padding:0%; }

html{ scroll-behavior: smooth; }

.tab{

background: rgb(32, 31, 31) url(../img/tree.jpg);

background-blend-mode:color-dodge;

margin: 12%;

border: 2px solid black;


border-collapse: collapse;

padding: 15%;

width: 137%;

.tab td{

color:rgb(245, 249, 249);

text-decoration:solid;

.tb{

float:none;

width: 50%;

margin-right:0%;

RESULT:
4) Write a html program to find out Celsius temperature of a given
Fahrenheit temperature using JavaScript.

HTML & JS Code:

<!Doctype html>
<title>
F to C
</title>
<heading>
<h1>ANGANA DAS</h1>
<h3>. Write a html program to find out Celsius temperature of a given Fahrenheit
temperature using
JavaScript.</h3>
</heading>
<body>
<script>
var f=prompt("Enter temparature in Fahrenheit: ");
var c= (f-32)*(5/9);
document.write(c+" is the temparature in celsius");

</script>
</body>
</html>
RESULT:
Entering data

Showing Result
5) Write a simple php program through which you can find out maximum and
minimum among three no’s specified by the user.
HTML Code:
<!DOCTYPE html>
<title> Input </title>
<heading> Write a simple php program through which you can find out maximum and
minimum among three no specified by the user.<br> </heading>
<body>
<form action="test.php" method="get">
Variable1:<input type="int" name="Variable1"><br>
Variable2:<input type="int" name="Variable2"><br>
Variable3:<input type="int" name="Variable3"><br>
<button type="submit">Result</button>
</form>
</body>
</html>

PHP Code:
<!Doctype html>
<title> PHP MAX MIN program </title>
<heading>
<h1>Result</h1>

</heading>
<body>
<?php
$a=$_GET['Variable1'];
$b=$_GET['Variable2'];
$c=$_GET['Variable3'];
echo "Minimum of three: ";
echo(min($a,$b,$c));
echo "<br>";
echo "Maximum of three: ";
echo(max($a,$b,$c));
?>
</body>
</html>

RESULT:
Inserting values

Ultimate result
6) Write a simple php program through which you can implement the
concept of GET & POST method w.r.t PHP.
FOR METHOD GET
HTML code:
<!DOCTYPE html>
<title> Input </title>
<heading> Write a simple php program through which you can implement
the concept of GET & POST method w.r.t PHP.<br> </heading>
<body>
<form action="basic.php" method="get">
Name: <input type="text" name="V1"><br>
Department:<input type="text" name="V2"><br>
College:<input type="text" name="V3"><br>
<button type="submit">Result</button>
</form>
</body>
</html>
PHP Code:
<!Doctype html>
<title> GET METHOD </title>
<heading>
<h1>Application of GET method</h1>
</heading>
<body>
<?php
echo "Hello! <br>";
echo $_GET['V1'];
echo "<br> Your department is: ";
echo $_GET['V2'];
echo "<br>And you are from: ";
echo $_GET['V3'];
echo "<br>"; ?>
</body>
</html>
RESULT
Inserting data

Final Result
FOR METHOD POST
HTML Code:
<!DOCTYPE html>
<title> Input </title>
<heading> Write a simple PHP program through which you can implement
the concept of GET & POST method w.r.t PHP.<br> </heading>
<body>
<form action="basic.php" method="post">
Name: <input type="text" name="V1"><br>
Department:<input type="text" name="V2"><br>
College:<input type="text" name="V3"><br>
<button type="submit">Result</button>
</form>
</body>
</html>
PHP Code:
<!Doctype html>
<title> POST METHOD </title>
<heading> <h1>Application of POST method</h1> </heading>
<body>
<?php
echo "Hello! <br>";
echo $_POST['V1'];
echo "<br> Your department is: ";
echo $_POST['V2'];
echo "<br>And you are from: ";
echo $_POST['V3'];
echo "<br>";
?>
</body>
</html>
RESLUT
Inserting data

Ultimate result
7) Write a simple JSP program through which you can print even and odd no
separately within a given range.
HTML & JS Code:
<html><body>
<!DOCTYPE html>
<title> JSP Even odd prog </title>
<heading>
Finding out even and odd number with in a given range
</heading> <br>
<%
int r1=20;
int r2=30;
int i=0;
for(i=r1;i<=r2;i++)
{
if(i%2==0||i==0)
{
out.println("\nEven number is: "+i+"\n");
}
else
{
out.println("\nOdd Number is: "+i+"\n");
}
}
%>
</html>
RESULT:
Finding odd and even numbers with the range of 20 to 30.

You might also like