Web Technologies Lab Manual:
1. Design a HTML page using suitable table tags and attributes.
Aim: To design a HTML page using suitable table tags and attributes.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
<img src="image.jpg" alt="A Sample Image">
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Output:
2. Design a HTML page with a form containing various controls.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Form Controls</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Surya"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Siva Kumar"><br>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br>
<input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
Output:
3. Design a HTML page on iframes.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe
Example"></iframe>
<p><a href="https://www.webtech.com" target="iframe_a">W3Schools.com</a></p>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>
Output:
4. Exercise on CSS style.
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<h2 style="font-size:300%;">This is a heading</h2>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Output:
5. Exercise on designing an XML document.
Code:
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Output:
6.Exercise on Javascript functions.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Output:
7.Exercise on JavaScript arrays.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Output:
8. Write a program on mouse events using J Query.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouse Events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 200px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="box">Move mouse here</div>
<p>Mouse event: <span id="event-type"></span></p>
<p>Mouse coordinates: <span id="coordinates"></span></p>
<script>
$(document).ready(function(){
$("#box").on({
mouseenter: function(event){
$("#event-type").text("mouseenter");
$(this).css("background-color", "lightgreen");
},
mouseleave: function(event){
$("#event-type").text("mouseleave");
$(this).css("background-color", "lightblue");
},
mousemove: function(event){
$("#event-type").text("mousemove");
$("#coordinates").text("X: " + event.pageX + ", Y: " + event.pageY);
},
mousedown: function(event){
$("#event-type").text("mousedown");
$(this).css("background-color", "yellow");
},
mouseup: function(event){
$("#event-type").text("mouseup");
$(this).css("background-color", "orange");
},
click: function(event){
$("#event-type").text("click");
$(this).css("background-color", "red");
},
dblclick: function(event){
$("#event-type").text("dblclick");
$(this).css("background-color", "purple");
}
});
});
</script>
</body>
</html>
Output:
9. Design a webpage to apply the Effects of J Query to HTML elements.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Effects Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
<button id="fadeIn">Fade In</button>
<button id="fadeOut">Fade Out</button>
<button id="slideUp">Slide Up</button>
<button id="slideDown">Slide Down</button>
<button id="animate">Animate</button>
<div id="box"></div>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#box").hide();
});
$("#show").click(function(){
$("#box").show();
});
$("#toggle").click(function(){
$("#box").toggle();
});
$("#fadeIn").click(function(){
$("#box").fadeIn();
});
$("#fadeOut").click(function(){
$("#box").fadeOut();
});
$("#slideUp").click(function(){
$("#box").slideUp();
});
$("#slideDown").click(function(){
$("#box").slideDown();
});
$("#animate").click(function(){
$("#box").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</body>
</html>
Output:
10. Exercise on changing background color using css () function in J Query.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>
Output:
11. Install the following on local machine: x Apache Web server x My SQL x PHP and configure it to work
with Apache Web server and MySQL.
Procedure:
A. Install Apache Web Server
1. Download Apache HTTP Server from https://httpd.apache.org/.
2. Run the installer or compile from source (for Linux/macOS).
3. Configure Apache (typically httpd.conf file):
o Location:
▪ Windows: C:\Program Files\Apache Group\Apache2\conf\httpd.conf
▪ Linux: /etc/httpd/conf/httpd.conf or /etc/apache2/apache2.conf
4. Start the Apache service:
o Windows: via Services or httpd.exe
o Linux/macOS: sudo systemctl start apache2
5. Test Apache:
o Open a browser and go to http://localhost
o You should see the Apache test page or a "It works!" message.
B. Install MySQL Server
1. Download MySQL from https://dev.mysql.com/downloads/.
2. Run the installer and follow the steps:
o Set root password
o Choose default configurations
3. Start the MySQL service:
o Windows: services.msc or MySQL Workbench
o Linux: sudo systemctl start mysql
4. Verify:
o Open terminal and run: mysql -u root -p
C. Install PHP
1. Download PHP from https://www.php.net/downloads.
2. Extract and configure PHP:
o Edit php.ini file (enable mysqli, pdo_mysql, etc.)
3. Configure Apache to use PHP:
o Edit httpd.conf:
apache
CopyEdit
LoadModule php_module "path/to/php/php8apache2_4.dll"
AddType application/x-httpd-php .php
PHPIniDir "path/to/php"
o Ensure index.php is in the DirectoryIndex:
apache
CopyEdit
DirectoryIndex index.php index.html
4. Restart Apache to apply changes.
D. Test PHP and MySQL Integration
1. Create a file named info.php in Apache htdocs directory:
php
CopyEdit
<?php
phpinfo();
?>
2. Open browser and go to: http://localhost/info.php
o You should see PHP configuration page.
3. Create a test script to connect to MySQL:
php
CopyEdit
<?php
$conn = new mysqli("localhost", "root", "your_password", "test");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully!";
?>
Result:
The installation and configuration of Apache, MySQL, and PHP were successfully completed. The setup is
verified to work correctly on the local machine.
12. Exercise on PHP arrays.
Code:
<!DOCTYPE html>
<html>
<body>
<?php
// function example:
function myFunction() {
echo "This text comes from a function";
}
// create array:
$myArr = array("Volvo", 15, ["apples", "bananas"], myFunction);
// calling the function from the array item:
$myArr[3]();
?>
</body>
</html>
Output:
13. Design a form and access the elements of form using PHP.
Code:
<!DOCTYPE HTML>
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Output:
14. Write PHP program to perform various operations on a database table using functions.
Code:
Create Student table in MySQL:
create table student
( sno integer(10),
sname varchar(25),
branch varchar(15));
conn.php
<html>
<?php
$host = "127.0.0.1";
$user = "root";
$pwd = "";
$db = "test";
$db_handle = mysql_connect($host,$user,$pwd);
$db_found = mysql_select_db($db,$db_handle);
if(isset($_POST['sno']))
{
if($db_found)
{
$in='INSERT INTO student VALUES(' . $_POST['sno'] .'," '. $_POST['sname'] . '"," ' .
$_POST['branch'] . ' ")';
if(isset($in))
{
mysql_query($in);
$sql = "select * from student order by sno";
$res = mysql_query($sql); ?>
<table border ="0" rules="all">
<tr>
<th> RNO </th>
<th> SNAME </th>
<th> BRANCH </th>
</tr>
<?php
while($row = mysql_fetch_assoc($res))
{ ?>
<tr>
<td><?php echo $row['sno']; ?></td>
<td><?php echo $row['sname']; ?></td>
<td><?php echo $row['branch']; ?></td>
</tr>
<?php } ?>
</table>
<?php mysql_close($db_handle);
}
}
else
echo "$db not found";
}
?>
<body>
<form name="f1" method="POST" action="conn.php">
<table border="1">
<tr> <th> Data Entry Form</th> </tr>
<tr>
<td> ROLL NO:<input type="text" name="sno"/></td>
</tr>
<tr>
<td> SNAME : <input type="text" name="sname"/></td>
</tr>
<tr>
<td> BRANCH :<input type="text" name="branch"/></td>
</tr>
<tr>
<td align="center"><input type="Submit" name="Submit1" value="Insert"/></td>
</tr>
</table>
</form>
</body></html>
Output:
15. Write a PHP program to set a cookie.
Code:
<?php
$cookie_name = "user";
$cookie_value = "vvit";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); //
86400 = 1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>
</body>
</html>
Output:
