EXP.
NO: 1 DATE:30/01/25
CREATE A WEBPAGE WHICH INCLUDES THE FOLLOWING USING HTML
AIM:
To create a webpage which includes the following using HTML:
▪ Import an image.
▪ Include check box and radio box.
▪ Use href tag.
ALGORITHM:
1. Set Up Your HTML Document:
Create a new HTML file (e.g., index.html) and include the basic structure. This should start with
the <!DOCTYPE html> declaration, followed the <html>, <head>, and <body> tags.
2. Import an Image:
Within the <body> section, use the <img> tag to import an image. Specify the src attribute
with the image URL and include an alt attribute for accessibility.
3. Add a Checkbox:
Use the <input> tag with type checkbox to include a checkbox in your form. Wrap it in
a <label> for better accessibility.
4. Include a Radio Button:
Similarly, add a radio button using the <input> tag with type radio. Ensure that all radio buttons
in the same group share the same name attribute
5. Use the Href Tag:
To create a hyperlink, use the <a> tag with the href attribute pointing to the desired URL. This
can be placed anywhere within the body.
PROGRAM:
<!DOCTYPE html>
J.AMIRTHA HARSHINI 221061101014
<html lang="en">
<head>
<title>Basic HTML Elements</title>
</head>
<body>
<h1>Web Page with Image, Checkbox, Radio Button, and Link</h1>
<!-- Import an Image -->
<img src="https://via.placeholder.com/150" alt="Sample Image" />
<h2>Options:</h2>
<!-- Checkboxes -->
<input type="checkbox" id="option1" name="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="option2">
<label for="option2">Option 2</label><br>
<!-- Radio Buttons -->
<input type="radio" id="choice1" name="choices">
<label for="choice1">Choice 1</label><br>
<input type="radio" id="choice2" name="choices">
<label for="choice2">Choice 2</label><br>
<!-- Hyperlink -->
<a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the HTML program was executed successfully and output is verified.
J.AMIRTHA HARSHINI 221061101014
EXP.NO: 2 DATE:06/02/25
CREATE A WEBPAGE WHICH INCLUDES THE FOLLOWING USING HTML
AIM:
To create a webpage with:
▪ Tables
▪ Types of list
▪ Use hover tag
ALGORITHM:
1. Set Up Your HTML Document:
Create a new HTML file (e.g., index.html) and include the basic structure with the <!DOCTYPE
html> declaration, followed by <html>, <head>, and <body> tags.
2. Create a Table:
Inside the <body> section, use the <table> tag to create a table. Include <tr> tags for rows
and <td> tags for cells. Optionally, use <th> tags for headers.
3. Add Types of Lists:
Include different types of lists such as an unordered list (<ul>) and an ordered list (<ol>) within
the body.
4. Implement Hover Effect:
Use CSS to create a hover effect for the table rows. This is done by adding a style rule in
the <style> section that changes the background color when a row is hovered over.
5. Finalize Your HTML Document:
Ensure all elements are properly closed and formatted, then save your HTML file. Open it in a
web browser to view your webpage with the table, lists, and hover effects.
PROGRAM:
<!DOCTYPE html>
J.AMIRTHA HARSHINI 221061101014
<html lang="en">
<head>
<title>Table, Lists, and Hover</title>
<style> td:hover { background-
color: yellow;
</style>
</head>
<body>
<h1>Table Example</h1>
<!-- Create a Table -->
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Aamir</td>
<td>21</td>
</tr>
<tr>
<td>parthiban</td>
<td>20</td>
</tr>
</table>
<h2>Types of Lists</h2>
J.AMIRTHA HARSHINI 221061101014
<h3>Ordered List</h3>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
<a href="https://nptel.ac.in/">Nptel</a>
</body>
</html>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the HTML program was executed successfully and output is verified.
J.AMIRTHA HARSHINI 221061101014
EXP.NO:3 DATE:13/02/25
GENERATE THE FIBONACCI SERIES USING PHP USER DEFINED FUNCTION
AIM:
To generate the Fibonacci series using PHP user defined function.
ALGORITHM:
1. Initialization:
Start with two initial Fibonacci series.
2. Input the value of N:
Give or specify the number of terms you need to generate for the
Fibonacci series.
3. Check for edge case:
If n=0 , return empty.
If n=1 , return only first number.
If n=2 , return first two numbers.
4. Generate Fibonacci Series: F(i)=f(i-1)+f(i-2)…….
5. Repeat until N terms are generated.
PROGRAM:
<?php
// Number of terms in the Fibonacci series
$terms = 10;
// First two terms of Fibonacci series
$a = 0;
$b = 1;
J.AMIRTHA HARSHINI 221061101014
// Print the Fibonacci series echo
"Fibonacci Series of $terms terms:\n";
echo "$a, $b";
for ($i = 3; $i <= $terms; $i++)
{ $next = $a + $b; echo ",
$next"; $a = $b;
$b = $next;
?>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the PHP program to generate Fibonacci series of N terms was generated
successfully and output was verified.
J.AMIRTHA HARSHINI 221061101014
EXP.NO: 4 DATE:20/02/25
APPLY ANY TWO PHP SORT FUNCTION EACH ON AN INDEXED ARRAY
AND AN ASSOCIATIVE ARRAY
AIM:
To apply any PHP sort function each on an indexed array and an associative array.
ALGORITHM:
Indexed Array:
1. Start
2. Initialize an empty array available.
3. Add elements to the array in the desired order
4.End
Associative Array:
1. Start
2. Initialize an empty array available.
3. Define the key value pairs where each key will point to a corresponding value.
4.End.
PROGRAM:
<?php
// Indexed Array
$indexedArray = array(5, 3, 8, 1,
2); echo "Original Indexed Array:\
n"; foreach ($indexedArray as
$value) { echo $value . "\n";
J.AMIRTHA HARSHINI 221061101014
// Sorting indexed array in ascending order
sort($indexedArray); echo "\nIndexed Array
sorted with sort():\n"; foreach
($indexedArray as $value) { echo $value . "\
n";
// Sorting indexed array in reverse order
rsort($indexedArray); echo "\nIndexed Array
sorted with rsort():\n"; foreach
($indexedArray as $value) { echo $value . "\
n";
// Associative Array
$assocArray = array("Rajesh" => 25, "Parthi" => 18, "Vijay" =>
30); echo "Original Associative Array:\n"; foreach ($assocArray
as $key => $value) { echo $key . " => " . $value . "\n";
// Sorting associative array by values (ascending)
asort($assocArray); echo "\nAssociative Array sorted with
asort() (by value):\n"; foreach ($assocArray as $key =>
$value) { echo $key . " => " . $value . "\n";
// Sorting associative array by keys (ascending)
ksort($assocArray); echo "\nAssociative Array sorted
J.AMIRTHA HARSHINI 221061101014
with ksort() (by key):\n"; foreach ($assocArray as $key =>
$value) { echo $key . " => " . $value . "\n";
?>
OUTPUT:
RESULT:
Thus the PHP program to generate Fibonacci series of N terms was generated
successfully and output was verified.
J.AMIRTHA HARSHINI 221061101014
EXP.NO:5 DATE:25/02/25
CREATE A WEBPAGE WITH THE FOLLOWING USING HTML
AIM:
To create a webpage in HTML to embed an image map to fix all hotspots, show all related
info when clicked.
ALGORITHM:
1. Create the image map in HTML.
2. Add an image of a map with all the place required.
3. Now add a hotspot to the location required.
4. Now add the information of the location using a href tag.
5. Repeat step 3 and 4 for the number required.
6. Now add a href tag to show all info when clicked.
J.AMIRTHA HARSHINI 221061101014
PROGRAM:
ImageMap.html
<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" > <map name="metroid"
id="metroid">
<area href="TamilNadu.html" shape="circle" coords="208,606,50" title="TamilNadu"/>
<area href="Karnataka.html" shape="rect" coords = "130,531,164,535" title ="Karnataka" />
<area href="AndhraPradesh.html" shape="poly" coords =
"227,490,238,511,230,536,198,535,202,503" title ="Andhra Pradesh" />
<area href="Kerala.html" shape="rect" coords = "154,606,166,621" title ="Kerala" /> </map>
</BODY>
</HTML>
TamilNadu.html
<HTML><HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER> <HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
J.AMIRTHA HARSHINI 221061101014
<LI>Population : 6,21,10,839</LI> </UL><hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>
Karnataka.html
<HTML>
<HEAD>
<TITLE>About Karnataka</TITLE> </HEAD>
<BODY>
<CENTER><H1>Karnataka</H1></CENTER>
<HR>
<UL>
<LI>Area : 1,91,791 Sq. Kms</LI>
<LI>Capital : Bangalore</LI>
<LI>Language : Kannada</LI>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>
AndhraPradesh.html
<HTML>
<HEAD>
J.AMIRTHA HARSHINI 221061101014
<TITLE>About Andhra Pradesh</TITLE> </HEAD>
<BODY>
<CENTER><H1>Andhra Pradesh</H1></CENTER> <HR>
<UL>
<LI>Area : 2,75,068 Sq. Kms</LI>
<LI>Capital : Hyderabad</LI>
<LI>Language : Telugu</LI>
<LI>Population : 7,57,27,541</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>
Kerala.html
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>
<HR>
<UL>
<LI>Area : 38,863 Sq. Kms.</LI>
<LI>Capital : Thiruvananthapuram</LI>
J.AMIRTHA HARSHINI 221061101014
<LI>Language : Malayalam</LI>
<LI>Population : 3,18,38,619</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY></HTML>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
TamilNadu:
Karnataka:
Andhra Pradesh:
Kerala:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the HTML program was executed successfully and output is verified.
J.AMIRTHA HARSHINI 221061101014
EXP.NO:6 DATE:06/03/25
Create a web page with all types of Cascading style sheets.
AIM:
To create a web page that displays college information using various style sheets.
ALGORITHM:
Step 1: Create a web page with frame sets consisting two frames
Step 2: In the first frame include the links
Step 3: In the second frame set display the web page of the link
Step 4: create a external style sheets
Step 5: create an inline and internal style sheets and make it link to the external
style sheets.
J.AMIRTHA HARSHINI 221061101014
PROGRAM:
XYZ.CSS:
h3{font-family:arial;font-
size:20;color:cyan} table{border-
color:green} td{font-
size:20pt;color:magenta} HTML CODE:
<html>
<head><h1><center>ALL STYLE SHEETS</center></h1>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS
</title>
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css">
.vid{font-family:verdana;fontstyle:italic;color:red;text-align:center} .ani{font-
family:tahoma;font-style:italic;fontsize: 20;text-align:center;} font{font-
family:georgia;color:blue;font-size:20}
ul{list-style-type:circle}
</style>
</head>
<body>
<ol style="list-style-type:lower-alpha">
<b>MEENAKSHI GROUP OF COLLEGES</b>
<li>Arulmigu Meenakshi Amman College of Engineering
<li>Meenakshi College of Engineering
<li>Sri Muthukumaran Institute of Technology
J.AMIRTHA HARSHINI 221061101014
</ol>
<p style="font-size:20pt;color:purple">MEENAKSHI GROUP OF COLLEGES</p>
<p class="ani">Meenakshi Group of colleges is owned by Radhakrishnan.<br>It is
approved by
AICTE(All India Council for Technical Education).It is afliated to Anna
University.<br></p>
<h2 class="vid">Arulmigu Meenakshi Amman College of Engineering</h2>
<br>
<font>It is an ISO certified Institution</font>
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>IT</li>
<li>CSE</li>
<li>Ece</li>
<li>Mech</li>
<li>EEE</li><li>ICE</li>
<li>BioTech</li>
<li>Chem</li>
<li>ME-CSE</li>
<li>ME_AE</li>
<li>MBA</li>
<li>MCA</li>
J.AMIRTHA HARSHINI 221061101014
</ul>
</font>
<h3>Results of IT Students</h3>
<table width="100%" cellspacing="2"cellpadding="2" border="5">
<tr>
<th>STUDENT NAMES</th>
<th>MARKS</th>
<th>RESULT</th>
</tr>
<tr>
<td align="center">Ram</td>
<td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Bala</td>
<td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Ramu</td>
<td align="center">98</td>
<td align="center">pass</td>
J.AMIRTHA HARSHINI 221061101014
</tr>
</table>
</body>
</html>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the program was executed successfully and output is verified sucessfully.
J.AMIRTHA HARSHINI 221061101014
EXP.NO: 7 DATE:13/03/25
CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM CONTROLS USING DHTML
AIM:
Dynamic HTML, or DHTML, is an umbrella term for a collection of
technologies used together to create interactive and animated web sites. by
using a combination of a static markup language (such as HTML),a client-side
scripting language (such as JavaScript), a presentation definition language
(such as CSS), and the Document Object Model.
ALGORITHM:
The form will include one text field called "Your Name", and a submit button.
• Validation script will ensure that the user enters their name before the form is
sent to the server.
• Open this page to see it in action.
• Try pressing the Send Details button without filling anything in the "Your Name"
field.
• You might like to open the source code for this form in a separate window
• The page consists of a JavaScript function called validate_form() that performs
the form validation, followed by the form itself.
PROGRAM CODE: FORM VALIDATION
<html>
<head>
<title>Student Registration Form</title> <script type="text/javascript">
Function validate()
{
if(document.signup.fname.value=="")
J.AMIRTHA HARSHINI 221061101014
{
alert("Please Enter First Name!");
return false;
}
if(document.signup.lname.value=="")
{
alert("Please Enter Last Name!");
return false;
}
if(document.signup.uname.value=="")
{
alert("Please Enter User Name!");
return false;
}
if(document.signup.pword1.value=="")
{
alert("Please Enter Password!");
return false;
}
if(document.signup.pword1.value<6)
{
alert("Please Enter min 6 characters!");
return false;
J.AMIRTHA HARSHINI 221061101014
}
if(document.signup.pword2.value=="")
{
alert("Please Enter Password Again!");
return false;
}
if(document.signup.pword2.value!=document.signup.pword1.value)
{
alert("Password Mismatch Reenter Password!");
return false;} alert("Details Entered
Successfully"); display();
}
function display()
{
document.writeln('<h2>'+"Details Entered:"+'</h2>');
document.writeln('<br/><fontcolor="#0066ff">'+"FirstName:"+'</font>'+docume
n t.signup.fnam
e.value);
document.writeln('<br/><fontcolor="#0066ff">'+"LastName:"+'</font>'+documen
t.signup.lnam
e.value);
document.writeln('<br/><fontcolor="#0066ff">'+"UseName:"+'</font>'+documen
t.signup.unam
e.value);
J.AMIRTHA HARSHINI 221061101014
document.writeln('<br/><fontcolor="#0066ff">'+"Country:"+'</
font>'+document.s ignup.country .value);
document.writeln('<br/><fontcolor="#0066ff">'+"AlternateEmail"+'</
font>'+docu ment.signup.a email.value);
}
</script>
</head>
<body align="center" bgcolor="green"> <table width="100%" height="100%">
<td colspan="2" width="15%">
</td> <td colspan="1" bgcolor="#ffffff" width="70%" height="100%"> <h1
align="center">
<font color="#0066ff">smail</font></h1>
<h2 align="center"><font color="#0066ff">New User Signup Form</font></h2>
<form name="signup"
onsubmit="return validate()">
<fontface="verdana,arial,helvetica,sanserif" color="#660000" size="2">
<p> *First Name:<input type="text" name="fname" size="20">
*Last Name:<inputtype="text"name="lname" size="20"></p> <p
style="border"> *User Name:<input type="text" name="uname"
size="20">@smail.com</p>
<p style="border"> *Password:<input type="password" name="pword1"
size="20"></p>
<p style="border"> *Confirm Password:<input type="password" name="pword2"
size="20"></p>
J.AMIRTHA HARSHINI 221061101014
<p> Gender:<input type="radio" name="gen" value="male">Male<input
type="radio" name="gen" value="female">Female</p>
<p> Country:<select name="country">
<option selected>Select Country</option><option name="country"
value="India">India</option>
<option name="country" value="Russia">Russia</option> <option
name="country"
value="France">France</option>
<option name="country" value="Italy">Italy</option>
</select>
</p>
<p> Language Known:<br>
<input type="checkbox" name="lang" value="English">English<br>
<inputtype="checkbox" name="lang" value="Tamil">Tamil<br>
<input type="checkbox" name="lang"value="Hindi">Hindi<br>
<input type="checkbox" name="lang" value="Malayalam">Malayalam<br>
</p>
<p style="border"> Alternate Email:<input type="text" name="aemail"
size="20"></p>
<p align="center"><input type="checkbox" name="agree">I Agree The Terms &
onditions</p>
<p align="center"><input type="submit" value="submit"> <input type="reset"
value="reset"></p>
</font> </form>
J.AMIRTHA HARSHINI 221061101014
</td>
<td colspan="2" width="15%"> </td>
</table></body>
</html>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
J.AMIRTHA HARSHINI 221061101014
EXP.NO: 8 DATE:20/03/25
Form Handling in PHP- Create a recruitment website where a job seeker can
upload his/her details
J.AMIRTHA HARSHINI 221061101014
AIM:
To create the Form Handling in PHP- Create a recruitment website where a job
seeker can upload his/her details.
ALGORITHM:
1. Display HTML Form
2. Check Request Method
3. Collect and Sanitize Form Data
4. Handle File Upload
5. Validate File Type
6. Store the File
7. Confirm Submission
8. If No File Uploaded
Display error message prompting the user to upload a file.
9. End
PROGRAM:
SQL
CREATE TABLE job_seekers ( id INT
AUTO_INCREMENT PRIMARY KEY, name
VARCHAR(100), email VARCHAR(100),
J.AMIRTHA HARSHINI 221061101014
phone VARCHAR(20), resume_path
VARCHAR(255),
uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
DATABASE
<?php
$host = "localhost";
$user = "root";
$password = ""; // Default password for XAMPP
$dbname = "recruitment";
$conn = new mysqli($host, $user, $password,
$dbname); if ($conn->connect_error) { die("Connection
failed: " . $conn->connect_error);
}
?>
INDEX
<!DOCTYPE html>
<html>
<head>
<title>Job Seeker Registration</title>
</head>
<body>
<h2>Upload Your Details</h2>
J.AMIRTHA HARSHINI 221061101014
<form action="upload.php" method="post" enctype="multipart/form-data">
<label>Name:</label><br>
<input type="text" name="name" required><br><br>
<label>Email:</label><br>
<input type="email" name="email" required><br><br>
<label>Phone:</label><br>
<input type="text" name="phone" required><br><br>
<label>Upload Resume (PDF only):</label><br>
<input type="file" name="resume" accept=".pdf" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
UPLOAD:
<?php
include 'db.php';
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$targetDir = "uploads/";
$resumeName = basename($_FILES["resume"]["name"]);
$targetFile = $targetDir . time() . "_" . $resumeName;
J.AMIRTHA HARSHINI 221061101014
$fileType = strtolower(pathinfo($targetFile,
PATHINFO_EXTENSION)); if($fileType != "pdf") { echo "Only PDF files
are allowed."; exit;
}
if (move_uploaded_file($_FILES["resume"]["tmp_name"], $targetFile)) {
$stmt = $conn->prepare("INSERT INTO job_seekers (name, email, phone,
resume_path) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $name, $email, $phone,
$targetFile); if ($stmt->execute()) { echo "Your details have been
submitted successfully!";
} else {
echo "Database error: " . $stmt->error;
}
$stmt->close();
} else {
echo "There was an error uploading your resume.";
}
$conn->close();
?>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the PHP program was executed successfully and output is verified.
EXP.NO: 9 DATE:22/03/25
Create an Employee database with two fields Employer’s Name, Employee’s
Name with MySql and insert two records into those fields using PHP code.
AIM:
To Create an Employee database with two fields Employer’s Name, Employee’s
Name with MySql and insert two records into those fields using PHP code.
ALGORITHM:
1. Start
2. Create Database and Table
J.AMIRTHA HARSHINI 221061101014
3. Set database server name, username, password, and database name.Create
a connection to MySQL using these credentials.
4. If the connection fails, display an error message and stop the program.
5. Insert Data
- Write an SQL `INSERT` query to add multiple employee records:
- ('ABC Corp', 'John Doe')
- ('XYZ Ltd', 'Jane Smith') - Execute the query.
6. If insertion is successful, print Records inserted successfully
7. Close the connection to the database.
8. End
PROGRAM:
CREATE DATABASE employee_db;
USE employee_db;
CREATE TABLE employees ( id INT
AUTO_INCREMENT PRIMARY KEY,
employer_name VARCHAR(255),
employee_name VARCHAR(255)
);
<?php
$servername = "localhost";
$username = "root"; // Change this based on your MySQL credentials
$password = ""; // Change this based on your MySQL credentials
$dbname = "employee_db";
J.AMIRTHA HARSHINI 221061101014
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection if ($conn->connect_error)
{ die("Connection failed: " . $conn->connect_error);
}
// Insert records
$sql = "INSERT INTO employees (employer_name, employee_name) VALUES
('ABC Corp', 'John Doe'),
('XYZ Ltd', 'Jane Smith')";
if ($conn->query($sql) === TRUE) { echo
"Records inserted successfully";
} else { echo "Error inserting records: " . $conn-
>error;
}
// Close connection
$conn->close();
?>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the PHP program was executed successfully and output is verified.
EXP:NO: 10 DATE:27/03/25
Develop a webpage using scripting languages with the help of CSS
AIM:
To Develop a webpage using scripting languages with the help of CSS.
ALGORITHM:
1. Start
2. On button click, call the function `toggleBackground()
3. Inside toggleBackground
4. Set the background size to cover
5. End
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Webpage</title>
<style> body { font-family: Arial,
sans-serif; text-align: center;
background-image:
J.AMIRTHA HARSHINI 221061101014
url('https://thumbs.dreamsti
me.com/b/silhouette-
person-silhouette-person-sunset-anime-k-wallpaper-silhouette-person-
sunset- serene-silhouette-349888736.jpg'); transition: background 0.5s;
}
.container {
max-width: 600px; margin: 50px auto;
padding: 20px; background: white;
box-shadow: 0 0 10px rgba(0, 0, 0,
0.1); border-radius: 8px;
}
button { padding: 10px 20px;
font-size: 16px; cursor:
pointer; background:
#007bff; color: white;
border: none; border-
radius: 5px; transition:
background 0.3s;
}
button:hover {
background: #0056b3;
}
</style>
J.AMIRTHA HARSHINI 221061101014
</head>
<body>
<div class="container">
<h1>Welcome to My Webpage</h1>
<p>Click the button below to change the background.</p>
<button onclick="toggleBackground()">Change Background</button>
</div>
<script> function toggleBackground()
{ document.body.style.backgroundImage =
document.body.style.backgroundImage ? '' :
"url('https://thumbs.dreamstime.com/b/anime-landscape-vivid-color-nice-
wallpaper-anime-landscape-vivid-color-338948064.jpg')";
document.body.style.backgroundSize = "cover";
}
</script>
</body>
</html>
OUTPUT:
J.AMIRTHA HARSHINI 221061101014
RESULT:
Thus the html program was executed successfully and output is verified.
J.AMIRTHA HARSHINI 221061101014
