Scribd
Upload
6 views

WebTechLab

The document outlines a series of HTML and programming exercises for a Web Technology Lab course (CS792C). It includes examples of HTML programs demonstrating various concepts such as anchor tags, tables, image maps, JavaScript functions, and PHP for form handling. Additionally, it covers XML parsing, ASP.NET, and JSP programs, along with database interaction using Servlets.

Uploaded by

seothi1701
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

WebTechLab

The document outlines a series of HTML and programming exercises for a Web Technology Lab course (CS792C). It includes examples of HTML programs demonstrating various concepts such as anchor tags, tables, image maps, JavaScript functions, and PHP for form handling. Additionally, it covers XML parsing, ASP.NET, and JSP programs, along with database interaction using Servlets.

Uploaded by

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

List of Experiments: Web Technology Lab (CS792C)

1. Write a single html program through which you can explain -


a) anchor tag, b)’img’ tag with ‘src’ attribute, c) paragraph, d) heading.
Program:
<html>
<body>
<h2>Click on the JISCE Logo...</h2>
<p>It will redirect you to JISCE website</p>
<a href="https://www.jiscollege.ac.in/"
><img
src="https://www.jiscollege.ac.in/assets/images/logo.png"
alt="jisce"
/></a>
</body>
</html>

Output:
2. Write a single html program through which you can draw a table which
consists of 3 row and 4 columns where 1st row contains 4 different column
fields of a student’s information with red text color and Calibri font style
with font 12. Rest cells of whole table contain values with blue text colors and
Times new roman font style with font 10.
Program:
<html>
<style>
th {
color: red;
font-family: "Calibri";
font-size: 12pt;
border: solid black;
}
td {
color: blue;
text-align: center;
font-family: "Times New Roman";
font-size: 10pt;
border: solid black;
}
</style>
<body>
<h2 style="text-align: center">HTML Table</h2>
<table style="width: 100%">
<tr>
<th>Name</th>
<th>Roll</th>
<th>Dept.</th>
<th>Email</th>
</tr>
<tr>
<td>Rahul Nath</td>
<td>123190803067</td>
<td>CSE</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Subham Dutta</td>
<td>123456789101</td>
<td>IT</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>
Output:

3. Write a single html program where 1st paragraph can collect its specified
style from internal stylesheet describes inside that html program and 2nd
paragraph can collect its specified style from another file (external
stylesheet).
Program:
<html>
<head>
<style>
#p1 { color: red; background-color: yellow; text-align: center; }
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="p1">This is the 1st paragraph.</p>
<p id="p2">This is the 2nd paragraph.</p>
</body>
</html>

External-CSS –
style.css
#p2 {
color: yellow;
background-color: red;
text-align: center;
}

Output:
4. Write a single html program which implements image map concept
using ‘usemap’ and <map>.
Program:
<html>
<body>
<h2>Image Maps</h2>
<p>Click on Laptop/Smartphone/Coffee Cup for a new page:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="32,43,272,348" alt="Laptop"
href="https://en.wikipedia.org/wiki/Laptop">
<area shape="rect" coords="290,172,333,250" alt="Smartphone"
href="https://en.wikipedia.org/wiki/Smartphone">
<area shape="circle" coords="336,300,45" alt="Coffee"
href="https://en.wikipedia.org/wiki/Coffee">
</map>
</body>
</html>

Output:
5. Write a html program to find out Celsius temperature of a given
Fahrenheit temperature using JavaScript.
Program:
<html lang="en">
<head>
<title>Q5. Fahrenheit to Celsius</title>
<script>
var num;
function fun() {
num = parseInt(document.getElementById("num").value);
document.getElementById("resPara").style.display = "block";
return (document.getElementById("res").innerHTML = Math.abs(5*((num-
32)/9)).toFixed(2));
}
</script>
</head>
<body>
<p>
Enter Fahrenheit Temperature: <input id="num" /><button onclick="fun()">
Check
</button>
</p>
<p id="resPara" style="display: none">
The Celsius Temperature is: <span id="res"></span>
</p>
</body>
</html>

Output:
6. Write a html program to find out m to the power n (m, n valid integer no)
using a function using JavaScript.
Program:
<html lang="en">
<head>
<title>Q5. M to the Power N</title>
<script>
var m, n;
function fun() {
m = parseInt(document.getElementById("m").value);
n = parseInt(document.getElementById("n").value);
document.getElementById("resPara").style.display = "block";

return (document.getElementById("res").innerHTML = m ** n);


}
</script>
</head>
<body>
<p>
Enter M: <input id="m" /> N: <input id="n" />
<button onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
M to the Power N is: <span id="res"></span>
</p>
</body>
</html>

Output:
7. Write a xml parsing technique through which parse a text string into an
XML DOM object, and extract the info from it with JavaScript.
Program:
<html lang="en">
<head>
<title>Q7. XML DOM</title>
</head>
<body>
<p>Name: <span id="n"></span></p>
<p>Roll: <span id="r"></span></p>
<p>Email: <span id="e"></span></p>
<script>
var parser, xmlDoc;
var txt =
"<id>" +
"<name>Rahul Nath</name>" +
"<roll>123190803067</roll>" +
"<email>[email protected]</email>" +
"</id>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(txt, "text/xml");
document.getElementById("n").innerHTML =
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("r").innerHTML =
xmlDoc.getElementsByTagName("roll")[0].childNodes[0].nodeValue;
document.getElementById("e").innerHTML =
xmlDoc.getElementsByTagName("email")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

Output:
8. Write a simple php program through which you can find out maximum
and minimum among three no’s specified by the user.
Program:
<?php
function smallest($a,$b,$c)
{
$min;
if($a<=$b && $a<=$c){$min = $a;}
elseif ($b<=$a && $b<=$c) {$min=$b;}
else{$min=$c;}
return $min;
}
function largest($a,$b,$c)
{
$max;
if($a>=$b && $a>=$c){$max = $a;}
elseif ($b>=$a && $b>=$c) {$max=$b;}
else{$max=$c;}
return $max;
}

$x = (int)readline("Enter x: ");
$y = (int)readline("Enter y: ");
$z = (int)readline("Enter z: ");

echo "Smallest is: ".smallest($x,$y,$z)."\n";


echo "Largest is: ".largest($x,$y,$z);
?>

Output:
9. Write a simple php program through which you can implement the
concept of GET & POST method w.r.t PHP Form handling.
GET Method-
Program:
Form.html
<html>
<body>
<form action="get.php" method="get">
Name : <input type="text" name="name" /> <br /><br />
Roll : <input type="text" name="roll" />
<input type="submit" />
</form>
</body>
</html>

Get.php
<html>
<body>
Welcome <?php echo $_GET["name"]; ?> </br>
Your Roll is: <?php echo $_GET["roll"]; ?>
</body>
</html>

Output:
POST Method-
Program:
Form2.html
<html>
<body>
<form action="post.php" method="post">
Dept. : <input type="text" name="dept" /> <br /><br />
Year : <input type="text" name="year" />
<input type="submit" />
</form>
</body>
</html>

Post.php
<html>
<body>
Your dept. is : <?php echo $_POST["dept"]; ?> </br>
You are in : <?php echo $_POST["year"]; ?>th year
</body>
</html>

Output:
10. Write a simple program in ASP.net through which you can create a login
page of your own website.
Program:
Output:

11. Write a simple JSP program through which you can print even and odd
no separately within a given range.
Program:
Output:
12. Create an Online Registration form for individual user of a website using
Servlet.
Program:
Create a table in Database–
create table GfgLogin
(
name varchar(60),
email varchar(60),
pass varchar(100)
)

Web.xml –
<web-app version="3.0"
xmlns="..."
xmlns:xsi="..." xsi:schemaLocation="..." >
<servlet>
<servlet-name>GfgRegister</servlet-name>
<servlet-class>GfgRegister</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GfgRegister</servlet-name>
<url-pattern>/GfgRegister</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

GfgRegister.java –
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class GfgRegister extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

String name = request.getParameter("name");


String email = request.getParameter("email");
String pass = request.getParameter("pass");

try {
// loading drivers for mysql
Class.forName("com.mysql.jdbc.Driver");
// creating connection with the database
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/geeksforgeeks",
"root", "root");
PreparedStatement ps = con.prepareStatement("insert into gfglogin
values(?,?,?)");
ps.setString(1, name);
ps.setString(2, email);
ps.setString(3, pass);
int i = ps.executeUpdate();
if (i > 0) {
out.println("You are successfully registered at
geeksforgeeks");
}
} catch (Exception se) {
se.printStackTrace();
}
}
}

Index.html –
<html>
<head>
<title>GeeksForGeeks Register form</title>
</head>
<body>
<center>
<form method="post" action="GfgRegister">
Name:<input type="text" name="name" /><br/><br/>
Email ID:<input type="text" name="email" /><br/><br/>
Password:<input type="text" name="pass" /><br/><br/>
<input type="submit" value="GfgRegister" /><br/>
</form>
</center>
</body>
</html>

Output:
13.Write a html program to find out the factorial of a number using a
function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q13. Factorial</title>
<script>
var num;
function fun() {
num = parseInt(document.getElementById("num").value);
document.getElementById("n").innerHTML = num;
document.getElementById("resPara").style.display = "block";
t = 1;
for (var i = 2; i <= num; i++) t = t * i;
return (document.getElementById("res").innerHTML = t);
}
</script>
</head>
<body>
<p>
Enter the Number Limit: <input id="num" /><button onclick="fun()">
Check
</button>
</p>
<p id="resPara" style="display: none">
The Factorial of <span id="n"></span> is: <span id="res"></span>
</p>
</body>
</html>

Output:
14.Write a html program to find out the Fibonacci Series of a number using
a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q15. Fibonacci Series</title>
<script>
var num;
function fun() {
num = parseInt(document.getElementById("num").value);
document.getElementById("resPara").style.display = "block";
(n1 = 0), (n2 = 1), (ser = n1.toString() + " " + n2.toString());
if (num == 1) return (document.getElementById("res").innerHTML = 0);
else if (num == 2)
return (document.getElementById("res").innerHTML = 0 + " " + 1);
else {
for (var i = 3; i <= num; i++) {
next_num = n1 + n2;
ser = ser + " " + next_num.toString();
n1 = n2;
n2 = next_num;
}
return (document.getElementById("res").innerHTML = ser);}
}
</script>
</head>
<body>
<p>
Enter the Number Limit: <input id="num" /><button onclick="fun()">
Check
</button>
</p>
<p id="resPara" style="display: none">
The Fibonacci Series is: <span id="res"></span>
</p>
</body>
</html>

Output:
15. Write a html program to find out the whether a number is Armstrong
number or not using a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q15. Check Armstrong</title>
<script>
var num;
function fun() {
num = parseInt(document.getElementById("num").value);
document.getElementById("n").innerHTML = num;
document.getElementById("resPara").style.display = "block";
len = num.toString().length;
n = num;
sum = 0;
while (n != 0) {
sum = sum + Math.pow(n % 10, len);
n = Math.floor(n / 10);
}
if (num == sum) {
return (document.getElementById("res").innerHTML = "a Armstrong");
} else {
return (document.getElementById("res").innerHTML = "not a
Armstrong");
}
}
</script>
</head>
<body>
<p>
Enter the Number: <input id="num" /><button
onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
<span id="n"></span> is <span id="res"></span> Number
</p>
</body>
</html>

Output:
16. Write a html program to find out the whether a number is Strong
number or not using a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q16. Check Strong</title>
<script>
var num;
function fun() {
num = parseInt(document.getElementById("num").value);
document.getElementById("n").innerHTML = num;
document.getElementById("resPara").style.display = "block";
n = num;
sum = 0;
while (n != 0) {
t = 1;
for (var i = n % 10; i > 1; i--) {
t = t * i;
}
sum = sum + t;
n = Math.floor(n / 10);
}
if (num == sum) {
return (document.getElementById("res").innerHTML = "a Strong");
} else {
return (document.getElementById("res").innerHTML = "not a Strong");
}
}
</script>
</head>
<body>
<p>
Enter the Number: <input id="num" /><button
onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
<span id="n"></span> is <span id="res"></span> Number
</p>
</body>
</html>

Output:
17. Write a html program to find out the whether a number is Palindrome
number or not using a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q17. Check Palindrome</title>
<script>
var num;
function fun() {
num = document.getElementById("num").value.toString();
document.getElementById("n").innerHTML = num;
document.getElementById("resPara").style.display = "block";
for (var i = 0; i < num.length / 2; i++) {
if (num[i] != num[num.length - i - 1]) {
return (document.getElementById("res").innerHTML =
"not a Palindrome");
}
}
return (document.getElementById("res").innerHTML = "a Palindrome");
}
</script>
</head>
<body>
<p>
Enter the Number: <input id="num" /><button
onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
<span id="n"></span> is <span id="res"></span> Number
</p>
</body>
</html>

Output:
18.Write a html program to find out the whether a number is
positive/negative number or not using a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q18. Check Positive/Negative</title>
<script>
var num, temp;
function fun() {
num = document.getElementById("num").value;
document.getElementById("n").innerHTML = num;
if (num) {
document.getElementById("resPara").style.display = "block";
if (num >= 0)
document.getElementById("res").innerHTML = "a Positive";
else document.getElementById("res").innerHTML = "a Negative";
}
}
</script>
</head>
<body>
<p>
Enter the Number: <input id="num" /><button
onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
<span id="n"></span> is <span id="res"></span> Number
</p>
</body>
</html>

Output:
19. Write a html program to find out the whether a number is absolute
number or not using a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q19. Check Absolute</title>
<script>
var num;
function fun() {
num = document.getElementById("num").value;
document.getElementById("n").innerHTML = num;
if (num) {
document.getElementById("resPara").style.display = "block";
if (num >= 0)
document.getElementById("res").innerHTML = "an Absolute";
else document.getElementById("res").innerHTML = "not an Absolute";
}
}
</script>
</head>
<body>
<p>
Enter the Number: <input id="num" /><button
onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
<span id="n"></span> is <span id="res"></span> Number
</p>
</body>
</html>

Output:
20. Write a html program to find out the whether a number is even/odd
number or not using a function in JavaScript.
Program:
<html lang="en">
<head>
<title>Q20. Check Odd/Even</title>
<script>
var num;
function fun() {
num = parseInt(document.getElementById("num").value);
document.getElementById("n").innerHTML = num;
if (num) {
document.getElementById("resPara").style.display = "block";
if (num % 2 == 0) document.getElementById("res").innerHTML = "Even";
else document.getElementById("res").innerHTML = "Odd";
}
}
</script>
</head>
<body>
<p>
Enter the Number: <input id="num" /><button
onclick="fun()">Check</button>
</p>
<p id="resPara" style="display: none">
<span id="n"></span> is an <span id="res"></span> Number
</p>
</body>
</html>

Output:

You might also like