Q.1. Write an html program to create ordered and unordered list.
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
<li>Dates</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Eat breakfast</li>
<li>Go to work</li>
</ol>
</body>
</html>
Output:
Q.2. Write an HTML program to create the following table:
Name Subject Mark
Arun Java 70
C 80
Ashis Java 75
h
C 69
<!DOCTYPE html>
<html>
<head>
<title>Student Marks Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h3>Student Marks Table</h3>
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="2">Arun</td>
<td>Java</td>
<td>70</td>
</tr>
<tr>
<td>C</td>
<td>80</td>
</tr>
<tr>
<td rowspan="2">Ashish</td>
<td>Java</td>
<td>75</td>
</tr>
<tr>
<td>C</td>
<td>69</td>
</tr>
</table>
</body>
</html>
Output:
Q.3. Write an HTML program to create webpage using Frameset Tag and
Frame tag.
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<!-- Replaces <body> when using frames -->
<frameset rows="30%,70%">
<frame src="header.html" name="headerFrame" />
<frameset cols="25%,75%">
<frame src="menu.html" name="menuFrame" />
<frame src="content.html" name="contentFrame" />
</frameset>
</frameset>
</html>
Output:
Q.4. Write a HTML program to create to demonstrate hyper linking
between two web pages.
Page 1
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>Welcome to Page 1</h1>
<p>This is the first web page.</p>
<a href="3page2.html">Go to Page 2</a>
</body>
</html>
Page 2
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to Page 2</h1>
<p>This is the second web page.</p>
<a href="page1.html">Back to Page 1</a>
</body>
</html>
Output:
Q.5. Design a web-page, insert an image on to the web-page such that
image is of height 300 and width 300 pixels. The image should have a alt
text in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Web Page with Image</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is an example of an image with specified dimensions and alt
text.</p>
<!-- Image with height and width of 300 pixels -->
<img src="D:\sahil\a.jpg" width="300" height="300">
<img src="one.png" width="300" height="300">
</body>
</html>
Output:
+
Q.6. WRITE AN HTML PROGRAM TO CREATE REGISTRATION FORM ?
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/submit" method="post">
First Name: <input type="text" name="first_name"><br><br>
Last Name: <input type="text" name="last_name"><br><br>
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="password"><br><br>
Confirm Password: <input type="password"
name="confirm_password"><br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other<br><br>
Date of Birth: <input type="date" name="dob"><br><br>
Phone Number: <input type="tel" name="phone"><br><br>
Address: <textarea name="address" rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Register">
<input type="reset" value="Reset">
</form>
</body>
</html>
OUTPUT -
Q.7. WRITE CSS CODE EXPLAIN SELECTOR (ELEMENT,ID,CLASS) ?
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Element selector will apply (blue text) -->
<p>This is a regular paragraph.</p>
<!-- ID selector will override element (red bold text) -->
<p id="special">This is a special paragraph.</p>
<!-- Class selector adds background and padding -->
<p class="highlight">This paragraph is highlighted.</p>
<!-- ID + Class = both apply (class + ID style + element) -->
<p id="special" class="highlight">Special and highlighted!</p>
</body>
</html>
OUT PUT -
Q.8. WRITE CSS CODE TO EXPLAIN BACKGROUND PROPERTIES
(BACKGROUND-COLOUR, BACKGROUND-IMAGE)?
/* This sets the background color of the entire page (body) to a light gray */
body {
background-color: #f0f0f0;
}
/* This div uses a solid background color */
.color-box {
width: 300px;
height: 150px;
background-color: #4CAF50; /* green background */
color: white;
text-align: center;
line-height: 150px;
margin-bottom: 20px;
}
/* This div uses a background image */
.image-box {
width: 300px;
height: 150px;
background-image: url('https://via.placeholder.com/300x150'); /* example
image */
background-size: cover; /* makes sure the image covers the whole box */
background-repeat: no-repeat;/* prevents the image from repeating */
background-position: center; /* centers the image */
color: white;
text-align: center;
line-height: 150px;
}
Q.9. WRITE CSS CODE TO EXPLAIN TEXT PROPERTIES ?
<!DOCTYPE html>
<html>
<head>
<title>Text Properties</title>
<style>
body { font-family: Arial; padding: 20px; }
.box {
background: #f0f0f0;
margin: 10px 0;
padding: 10px;
}
.color { color: red; }
.size { font-size: 20px; }
.align { text-align: center; }
.transform { text-transform: uppercase; }
.spacing { letter-spacing: 3px; }
</style>
</head>
<body>
<h2>CSS Text Properties</h2>
<div class="box color">This text is red (color)</div>
<div class="box size">This text is 20px (font-size)</div>
<div class="box align">This text is centered (text-align)</div>
<div class="box transform">this will be uppercase (text-transform)</div>
<div class="box spacing">Spaced letters (letter-spacing)</div>
</body>
</html>
OUTPUT-
Q.10.WRITE CSS CODE TO EXPLAIN FONT PROPERTIES?
<!DOCTYPE html>
<html>
<head>
<title>Font Properties</title>
<style>
body { font-family: Arial; padding: 20px; }
.box { background: #eee; margin: 10px 0; padding: 10px; }
.family { font-family: 'Courier New', monospace; }
.size { font-size: 20px; }
.style { font-style: italic; }
.weight { font-weight: bold; }
.variant { font-variant: small-caps; }
</style>
</head>
<body>
<h2>Font Properties</h2>
<div class="box family">Font Family: Courier New</div>
<div class="box size">Font Size: 20px</div>
<div class="box style">Font Style: Italic</div>
<div class="box weight">Font Weight: Bold</div>
<div class="box variant">Font Variant: Small Caps</div>
</body>
</html>
OUTPUT-
Q.11.WRITE CSS CODE TO EXPLAIN LIST PROPERTIES?
<!DOCTYPE html>
<html>
<head>
<title>List Properties</title>
<style>
body { font-family: Arial; padding: 20px; }
ul, ol { margin-bottom: 20px; }
.disc { list-style-type: disc; }
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.decimal { list-style-type: decimal; }
.none { list-style-type: none; }
.inside { list-style-position: inside; }
.outside { list-style-position: outside; }
</style>
</head>
<body>
<h2>CSS List Properties</h2>
<p><b>1. list-style-type</b> (changes the bullet or number style):</p>
<ul class="disc"><li>Disc</li></ul>
<ul class="circle"><li>Circle</li></ul>
<ul class="square"><li>Square</li></ul>
<ol class="decimal"><li>Decimal</li></ol>
<ul class="none"><li>No bullet</li></ul>
<p><b>2. list-style-position</b> (bullet inside or outside the text box):</p>
<ul class="inside"><li>Bullet inside</li></ul>
<ul class="outside"><li>Bullet outside</li></ul>
</body>
</html>
OUTPUT-
Q.12. Write css code to explain table properies.
<table>
<thead> <tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>10</td>
<td>$5</td>
</tr>
<tr>
<td>Bananas</td>
<td>8</td>
<td>$4</td>
</tr>
<tr>
<td>Oranges</td>
<td>12</td>
<td>$6</td>
</tr>
</tbody>
</table>
Output:-
Q.13. Write css code to explain box modal.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Model Example</title>
<link rel="stylesheet" href="new13.css">
</head>
<body>
<div class="box">Box Model Example</div>
</body>
</html>
Css code
/* The Box Model: content, padding, border, margin */
.box {
width: 400px; /* Content width */
height: 200px; /* Content height */
padding: 20px; /* Space inside the border */
border: 5px solid blue; /* Border around padding */
margin: 30px; /* Space outside the border */
background-color: lightyellow;
color: black;
font-family: Arial, sans-serif;
text-align: center;
line-height: 100px; /* Center text vertically */
}
:-Output
Q.14. WRITE A JAVASCRIPT PROGRAM TO SHOW THE USE OF WINDOW
OBJECT METHODS (alert(),Confirm(),prompt())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window Object Methods Example</title>
<script>
function showWindowMethods() {
// 1. alert()
alert("Welcome to the Window Object Methods Demo!");
// 2. prompt()
let name = prompt("What is your name?");
// Handle if user clicks Cancel (name will be null)
if (name) {
// 3. confirm()
let isSure = confirm("Are you sure your name is " + name + "?");
if (isSure) {
alert("Great! Nice to meet you, " + name + "!");
} else {
alert("Oops! Maybe try again.");
}
} else {
alert("You didn't enter your name.");
}
}
</script>
</head>
<body>
<h2>JavaScript Window Object Methods</h2>
<button onclick="showWindowMethods()">Click to Start</button>
</body>
</html>
:-Output
Q.15. Write a JavaScript program to output text (inner HTML, write ()).
<!DOCTYPE html>
<html>
<head>
<title>Simple Output Example</title>
</head>
<body>
<h2>Output using JavaScript</h2>
<!-- Output target for innerHTML -->
<div id="output"></div>
<script>
// Method 1: Using document.write()
document.write("This is output using <b>document.write()</b><br>");
// Method 2: Using innerHTML
document.getElementById("output").innerHTML = "This is output using
<b>innerHTML</b>";
</script>
</body>
</html>.
:-Output
Q.16. Write a JavaScript program to show the use of onclick() event.
<!DOCTYPE html>
<html>
<head>
<title>onClick Event Example</title>
</head>
<body>
<h2>Click the Button</h2>
<!-- Button element -->
<button onclick="showMessage()">Click Me!</button>
<!-- Place to show the message -->
<p id="message"></p>
<script>
// JavaScript function triggered on button click
function showMessage() {
document.getElementById("message").innerHTML = "Hello! You clicked
the button.";
}
</script>
</body>
</html>
:-Output
Q.17. Write a JavaScript program to validate a form.
<!DOCTYPE html>
<html>
<head>
<title>Simple Form Validation</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
if (name === "") {
alert("Name is required.");
return false;
}
if (email === "") {
alert("Email is required.");
return false;
}
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!email.match(emailPattern)) {
alert("Please enter a valid email address.");
return false;
}
if (password === "") {
alert("Password is required.");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</body>
</html>
:-Output
Q.18. Write a PHP program to use arithmetic operator.
<?php
// Declare two numbers
$num1 = 20;
$num2 = 6;
// Addition
$sum = $num1 + $num2;
echo "Addition: $num1 + $num2 = $sum<br>";
// Subtraction
$difference = $num1 - $num2;
echo "Subtraction: $num1 - $num2 = $difference<br>";
// Multiplication
$product = $num1 * $num2;
echo "Multiplication: $num1 * $num2 = $product<br>";
// Division
$quotient = $num1 / $num2;
echo "Division: $num1 / $num2 = $quotient<br>";
// Modulus
$remainder = $num1 % $num2;
echo "Modulus: $num1 % $num2 = $remainder<br>";
?>
Output:-
Q.19. Write a PHP program to find largest from 3 numbers.
<?php
// Define three numbers
$num1 = 25;
$num2 = 42;
$num3 = 17;
// Find the largest number
if ($num1 >= $num2 && $num1 >= $num3) {
$largest = $num1;
} elseif ($num2 >= $num1 && $num2 >= $num3) {
$largest = $num2;
} else {
$largest = $num3;
}
// Output the result
echo "The largest number among $num1, $num2, and $num3 is: $largest";
?>
Output
Q.20. Create a script using for loop to add all the integer between 0 and
30 and display the total.
<?php
// Initialize total sum to 0
$total = 0;
// Loop through numbers from 0 to 30 (inclusive)
for ($i = 0; $i <= 30; $i++) {
$total += $i;
}
// Display the result
echo "The total sum from 0 to 30 is: " . $total;
?>
Output
Q.21. WRITE A RECURSIVE FUNCTION TO CALCULATE THE FACTORIAL
OF A NUMBER IN PHP?
<?php
function factorial($n) {
// Base case: factorial of 0 or 1 is 1
if ($n <= 1) {
return 1;
}
// Recursive case
return $n * factorial($n - 1);
}
// Example usage
echo factorial(5); // Output: 120
?>
OUTPUT-
Q.22. Write A Php Program Using Any Five String Function?
<?php
// User's name
$name = "Jonathan";
// 1. Get the length of the name
$name_length = strlen($name);
echo "Length of the name '$name': $name_length<br>";
// 2. Convert to uppercase
$upper_name = strtoupper($name);
echo "Uppercase: $upper_name<br>";
// 3. Convert to lowercase
$lower_name = strtolower($name);
echo "Lowercase: $lower_name<br>";
// 4. Reverse the name
$reversed_name = strrev($name);
echo "Reversed: $reversed_name<br>";
// 5. Replace 'Jon' with 'Sam'
$replaced_name = str_replace("Jon", "Sam", $name);
echo "Replaced 'Jon' with 'Sam': $replaced_name<br>";
?>
OUTPUT-
Q.23. WRITE A PHP PROGRAM USING ANY FIVE ARRAY FUNCTION?
<?php
// Initial array
$fruits = ["Apple", "Banana", "Cherry"];
// 1. Count the number of elements
$number_of_fruits = count($fruits);
echo "There are $number_of_fruits fruits in the array.<br>";
// 2. Add two more fruits to the array
array_push($fruits, "Orange", "Grape");
echo "Fruits after adding two more: ";
print_r($fruits);
echo "<br>";
// 3. Remove the last fruit
$removed_fruit = array_pop($fruits);
echo "Removed fruit: $removed_fruit<br>";
// 4. Reverse the array
$reversed_fruits = array_reverse($fruits);
echo "Fruits in reverse order: ";
print_r($reversed_fruits);
echo "<br>";
// 5. Check if 'Banana' is in the array
if (in_array("Banana", $fruits)) {
echo "Yes, Banana is in the array.<br>";
} else {
echo "No, Banana is not in the array.<br>";
}
?>
OUTPUT-
Q.24. Write a PHP program using for each loop in Associative array.
<?php
// Define an associative array
$person = array(
"name" => "Alice",
"age" => 28,
"city" => "New York",
"email" => "[email protected]"
);
// Use foreach loop to iterate through the array
foreach ($person as $key => $value) {
echo ucfirst($key) . ": " . $value . "<br>";
}
?>
Q.25. Write a PHP program to access data from multivalue field.
<?php
// Associative array with multiple values per key (array of arrays)
$students = array(
"John" => array("Math" => 85, "Science" => 90, "English" => 78),
"Alice" => array("Math" => 92, "Science" => 88, "English" => 95),
"Bob" => array("Math" => 70, "Science" => 75, "English" => 80)
);
// Accessing data from multi-value fields
foreach ($students as $name => $subjects) {
echo "<strong>$name's Scores:</strong><br>";
foreach ($subjects as $subject => $score) {
echo "$subject: $score<br>";
}
echo "<br>";
}
?>
OUTPUT:-
Q.26. Write a PHP program to upload an image file.
<!DOCTYPE html>
<html>
<body>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {
$target = "uploads/" . basename($_FILES["image"]["name"]);
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target)) {
echo "Image uploaded successfully!";
} else {
echo "Failed to upload image.";
}
}
?>
<form method="post" enctype="multipart/form-data">
Select image: <input type="file" name="image">
<input type="submit" value="Upload">
</form>
</body>
</html>
OUTPUT:-
Q.27. Write a PHP program to create session and cookie
<?php
// Start the session
session_start();
// Set session variable
$_SESSION["username"] = "JohnDoe";
// Set cookie (name, value, expiration time)
setcookie("user", "JohnDoe", time() + (86400 * 7)); // 7 days
?>
<!DOCTYPE html>
<html>
<body>
<h2>Session and Cookie Example</h2>
<?php
echo "Session username is: " . $_SESSION["username"] . "<br>";
if (isset($_COOKIE["user"])) {
echo "Cookie 'user' is: " . $_COOKIE["user"];
} else {
echo "Cookie is not set.";
}
?>
</body>
</html>
OUTPUT:-
