1) write a program to create a html page which has properly aligned paragraphs with image
along with it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Page</title>
</head>
<body>
<h2>Welcome to Our Page</h2>
<table>
<tr>
<td>
<p>This is a sample paragraph aligned with an image.</p>
<p>Proper alignment improves readability.</p>
</td>
<td>
<img src="https://th.bing.com/th/id/OIP.Jg35DTU8xEFi-
BbUaql9CQHaEI?rs=1&pid=ImgDetMain " alt="Sample Image">
</td>
</tr>
</table>
</body>
</html>
OUTPUT
2) write a program to display list of items in different styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Styles</title>
</head>
<body>
<h2>Different List Styles</h2>
<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<h3>Definition List</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>
OUTPUT
3) write a html page to print hello world in bold and italic font
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1><b><i>Hello World</i></b></h1>
<p>Welcome to the world of web development.</p>
<p>This is a simple HTML page demonstrating text formatting.</p>
<p>You can use <b>bold</b> and <i>italic</i> styles to highlight important content.</p>
</body>
</html>
OUTPUT
4) display various text formatting methods available in html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting in HTML</title>
</head>
<body>
<h1>Text Formatting in HTML</h1>
<p><b>Bold Text</b></p>
<p><i>Italic Text</i></p>
<p><u>Underlined Text</u></p>
<p><strike>Strikethrough Text</strike></p>
<p><small>Small Text</small></p>
<p><big>Big Text</big></p>
<p><mark>Highlighted Text</mark></p>
<p><tt>Monospace Text</tt></p>
<p><sup>Superscript Text</sup> and <sub>Subscript Text</sub></p>
<p><code>Code Text</code></p>
<p><blockquote>This is a blockquote.</blockquote></p>
<p><pre>Preformatted text with spaces</pre></p>
</body>
</html>
OUTPUT
5) create html file using special characters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Special Characters in HTML</title>
</head>
<body>
<h1>Special Characters in HTML</h1>
<p>Copyright Symbol: ©</p>
<p>Registered Trademark: ®</p>
<p>Trademark: ™</p>
<p>Less Than: <</p>
<p>Greater Than: ></p>
<p>Ampersand: &</p>
<p>Euro Currency: €</p>
<p>Pound Currency: £</p>
<p>Yen Currency: ¥</p>
<p>Cent Symbol: ¢</p>
<p>Degree Symbol: °</p>
<p>Fraction 1/2: ½</p>
<p>Heart Symbol: ♥</p>
</body>
</html>
OUTPUT
6) create a html file which displays 3 images at left ,right and center respectively in browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Alignment</title>
</head>
<body>
<h1>Image Alignment Example</h1>
<p><img src="https://i.pinimg.com/originals/ba/0e/b8/ba0eb82dbe74fb21925083c2ea7475b4.jpg"
alt="Left Image" align="left" width="400px"></p>
<p style="text-align: center;"><img src="https://marketingaccesspass.com/wp-
content/uploads/2015/10/Podcast-Website-Design-Background-Image.jpg" alt="Center Image"
width="400px"></p>
<p style="text-align: right;"><img src="https://i.ibb.co/0tTMCTt/Website-Img.png" alt="Right
Image" width="250px"></p>
</body>
</html>
OUTPUT
7) create html file which contains hyperlinks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Hyperlinks in HTML</h1>
<p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
<p><a href="https://www.wikipedia.org" target="_blank">Go to Wikipedia</a></p>
<p><a href="https://www.github.com" target="_blank">Check GitHub</a></p>
<p><a href="page2.html">Go to Another Page</a></p>
</body>
</html>
OUTPUT
8) create html documents (tag,paragraphs ,headings,images,tags)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a sample paragraph demonstrating text content in HTML.</p>
<p>HTML provides various elements like headings, paragraphs, images, and links.</p>
<h3>Sample Image</h3>
<img src="https://thirdessential.com/wp-content/uploads/2022/02/Website-Development-
Designing.png" alt="Sample Image" width="300">
<h3>Hyperlinks</h3>
<p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
<p><a href="https://www.wikipedia.org" target="_blank">Go to Wikipedia</a></p>
<p><a href="https://www.github.com" target="_blank">Check GitHub</a></p>
<h3>List Example</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
OUTPUT
9) demonstrate following attributes using css color and background font text,border ,margin
and list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Attributes Demonstration</title>
<style>
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
margin: 20px;
h1 {
color: darkblue;
border-bottom: 2px solid black;
padding: 10px;
p{
font-size: 16px;
color: darkslategray;
margin-bottom: 15px;
img {
border: 5px solid gray;
margin: 10px;
}
a{
color: darkred;
text-decoration: none;
ul {
background-color: lightgray;
padding: 10px;
border-radius: 5px;
li {
color: navy;
margin: 5px;
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a sample paragraph demonstrating text content in HTML.</p>
<p>HTML provides various elements like headings, paragraphs, images, and links.</p>
<h3>Sample Image</h3>
<img src="https://thirdessential.com/wp-content/uploads/2022/02/Website-Development-
Designing.png" alt="Sample Image" width="300">
<h3>Hyperlinks</h3>
<p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
<p><a href="https://www.wikipedia.org" target="_blank">Go to Wikipedia</a></p>
<h3>List Example</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
OUTPUT
10) demonstrate use of external style sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Demonstration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a sample paragraph demonstrating text content in HTML.</p>
<p>HTML provides various elements like headings, paragraphs, images, and links.</p>
<h3>Sample Image</h3>
<img src="https://www.example.com/sample-image.jpg" alt="Sample Image" width="300">
<h3>Hyperlinks</h3>
<p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
<p><a href="https://www.wikipedia.org" target="_blank">Go to Wikipedia</a></p>
<h3>List Example</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Css content ----
<style>
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: darkblue;
border-bottom: 2px solid black;
padding: 10px;
p{
font-size: 16px;
color: darkslategray;
margin-bottom: 15px;
img {
border: 5px solid gray;
margin: 10px;
a{
color: darkred;
text-decoration: none;
ul {
background-color: lightgray;
padding: 10px;
border-radius: 5px;
li {
color: navy;
margin: 5px;
}
</style>
OUTPUT
11) To create an html page to explain the use of various predefined functions in an array
& Date object in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Array & Date Functions</title>
<script>
function demonstrateArrayFunctions() {
let numbers = [10, 20, 30, 40, 50];
document.getElementById("arrayOutput").innerHTML =
"Original Array: " + numbers + "<br>" +
"Length: " + numbers.length + "<br>" +
"Push (60): " + (numbers.push(60), numbers) + "<br>" +
"Pop: " + (numbers.pop(), numbers) + "<br>" +
"Join: " + numbers.join(" - ") + "<br>" +
"Reverse: " + numbers.reverse();
function demonstrateDateFunctions() {
let now = new Date();
document.getElementById("dateOutput").innerHTML =
"Current Date: " + now + "<br>" +
"Full Year: " + now.getFullYear() + "<br>" +
"Month: " + now.getMonth() + "<br>" +
"Date: " + now.getDate() + "<br>" +
"Day: " + now.getDay() + "<br>" +
"Hours: " + now.getHours() + "<br>" +
"Minutes: " + now.getMinutes();
</script>
</head>
<body>
<h1>JavaScript Array & Date Functions</h1>
<h2>Array Functions</h2>
<button onclick="demonstrateArrayFunctions()">Run Array Functions</button>
<p id="arrayOutput"></p>
<h2>Date Functions</h2>
<button onclick="demonstrateDateFunctions()">Run Date Functions</button>
<p id="dateOutput"></p>
</body>
</html>
OUTPUT
12) Write a Program to show use of alert, confirm and prompt box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Alert, Confirm, and Prompt</title>
<script>
function showAlert() {
alert("This is an alert box!");
function showConfirm() {
let result = confirm("Do you want to proceed?");
document.getElementById("confirmOutput").innerHTML = result ? "User clicked OK" :
"User clicked Cancel";
function showPrompt() {
let name = prompt("Enter your name:", "Guest");
if (name) {
document.getElementById("promptOutput").innerHTML = "Hello, " + name + "!";
} else {
document.getElementById("promptOutput").innerHTML = "No name entered.";
</script>
</head>
<body>
<h1>JavaScript Alert, Confirm, and Prompt</h1>
<button onclick="showAlert()">Show Alert</button>
<br><br>
<button onclick="showConfirm()">Show Confirm</button>
<p id="confirmOutput"></p>
<br>
<button onclick="showPrompt()">Show Prompt</button>
<p id="promptOutput"></p>
</body>
</html>
OUTPUT
13) Write JavaScript to perform the following operations:
a. to find highest from given three values
b. to calculate factorial of n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Operations</title>
</head>
<body>
<h2>Find Highest and Factorial</h2>
<label>Enter three numbers:</label>
<input type="number" id="num1" placeholder="First number">
<input type="number" id="num2" placeholder="Second number">
<input type="number" id="num3" placeholder="Third number">
<button onclick="displayHighest()">Find Highest</button>
<p id="highestResult"></p>
<label>Enter a number for factorial:</label>
<input type="number" id="factorialInput" placeholder="Number">
<button onclick="displayFactorial()">Calculate Factorial</button>
<p id="factorialResult"></p>
<script>
function findHighest(a, b, c) {
return Math.max(a, b, c);
function factorial(n) {
if (n < 0) return "Undefined for negative numbers";
if (n === 0 || n === 1) return 1;
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
return result;
function displayHighest() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let num3 = parseFloat(document.getElementById("num3").value);
if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
document.getElementById("highestResult").innerText = "Please enter valid numbers";
return;
}
document.getElementById("highestResult").innerText = "Highest: " + findHighest(num1,
num2, num3);
function displayFactorial() {
let n = parseInt(document.getElementById("factorialInput").value);
if (isNaN(n)) {
document.getElementById("factorialResult").innerText = "Please enter a valid number";
return;
document.getElementById("factorialResult").innerText = "Factorial: " + factorial(n);
</script>
</body>
</html>
OUTPUT
14) Write JavaScript to perform the following operations:
a.to calculate sum of 1 to n
b.to check whether given number is pollindrome or not
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum and Palindrome Check</title>
</head>
<body>
<h2>Calculate Sum and Check Palindrome</h2>
<label>Enter a number to find sum from 1 to n:</label>
<input type="number" id="sumInput" placeholder="Number">
<button onclick="displaySum()">Calculate Sum</button>
<p id="sumResult"></p>
<label>Enter a number to check palindrome:</label>
<input type="number" id="palindromeInput" placeholder="Number">
<button onclick="displayPalindrome()">Check Palindrome</button>
<p id="palindromeResult"></p>
<script>
// Function to calculate sum from 1 to n
function sumToN(n) {
if (n < 0) return "Invalid input";
return (n * (n + 1)) / 2;
// Function to check if a number is palindrome
function isPalindrome(num) {
let str = num.toString();
let reversedStr = str.split('').reverse().join('');
return str === reversedStr;
// Function to display the sum from 1 to n
function displaySum() {
let n = parseInt(document.getElementById("sumInput").value);
if (isNaN(n)) {
document.getElementById("sumResult").innerText = "Please enter a valid number";
return;
document.getElementById("sumResult").innerText = "Sum: " + sumToN(n);
// Function to display palindrome check result
function displayPalindrome() {
let num = document.getElementById("palindromeInput").value;
if (num === "" || isNaN(num)) {
document.getElementById("palindromeResult").innerText = "Please enter a valid number";
return;
document.getElementById("palindromeResult").innerText = isPalindrome(num) ?
"Palindrome" : "Not a Palindrome";
</script>
</body>
</html>
OUTPUT
15) Write a Java Script program to print current date & time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Date & Time</title>
</head>
<body>
<h2>Current Date & Time</h2>
<p id="dateTime"></p>
<button onclick="showDateTime()">Show Current Date & Time</button>
<script>
function showDateTime() {
let now = new Date();
let formattedDateTime = now.toLocaleString();
document.getElementById("dateTime").innerText = "Current Date & Time: " +
formattedDateTime;
</script>
</body>
</html>
OUTPUT
16) 1) Develop the jQuery Program with the scripting tag.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="demo">Hello World!</p>
<button id="btn">Click Me</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#demo").text("Text changed using jQuery!");
});
});
</script>
</body>
</html>
OUTPUT
16) 2) Develop the jQuery Program with the event methods.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Methods</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">Hover or click the button!</p>
<button id="btn">Click Me</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#text").text("Button was clicked!");
});
$("#btn").hover(function(){
$("#text").text("You are hovering over the button!");
});
});
</script>
</body>
</html>
OUTPUT
17) Create CD Catalogue Table in XML and display it using XSL Style Sheet
XML
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="cd_catalog.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<price>10.90</price>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<price>9.90</price>
</cd>
</catalog>
XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>CD Catalog</h2>
<table border="1">
<tr bgcolor="#cccccc">
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Price</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
<td><xsl:value-of select="country"/></td>
<td><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
OUTPUT
18) 1) Write a PHP script for Looping Structures
<?php
// Print numbers using for loop
echo "Using For Loop:<br>";
for ($i = 1; $i <= 5; $i++) {
echo "Count: $i <br>";
// Print even numbers using while loop
echo "<br>Using While Loop (Even Numbers):<br>";
$j = 2;
while ($j <= 10) {
echo "Even: $j <br>";
$j += 2;
// Print array items using foreach loop
echo "<br>Using Foreach Loop:<br>";
$fruits = ["Apple", "Banana", "Cherry"];
foreach ($fruits as $fruit) {
echo "Fruit: $fruit <br>";
?>
OUTPUT
Using For Loop:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Using While Loop (Even Numbers):
Even: 2
Even: 4
Even: 6
Even: 8
Even: 10
Using Foreach Loop:
Fruit: Apple
Fruit: Banana
Fruit: Cherry
18) 2) Write a PHP script for Switch Case statements
<?php
$day = "Monday";
switch ($day) {
case "Monday":
echo "Start of the week!";
break;
case "Tuesday":
echo "Second day!";
break;
case "Wednesday":
echo "Midweek!";
break;
case "Thursday":
echo "Almost there!";
break;
case "Friday":
echo "Weekend is near!";
break;
default:
echo "Not a valid day!";
?>
OUTPUT
Start of the week!
