1. Create a simple webpage using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: absolute;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Simple Webpage</h1>
</header>
<main>
<h2>Hello, world!</h2>
Name- Shubh sharma Roll No-2400970140171
<p>This is a simple webpage created with HTML. You can add more content and styles to customize it
further.</p>
</main>
<footer>
<p>© 2025 My Simple Webpage</p>
</footer>
</body>
</html>
Output:-
2. Create a HTML page, which has properly aligned paragraphs with image along with it.
Name- Shubh sharma Roll No-2400970140171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aligned Paragraph with Image</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin-top: 50px;
}
.text {
flex: 1;
padding-right: 20px;
}
.image {
flex: 1;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<p>Lorem ipsum dolor sitamet, consecteturadipiscingelit. Cras auctor lectus nec eros vestibulum, at
vestibulum nisi luctus. Nam et tempor ante. Quisque at felis sit amet lorem euismodblandit.</p>
<p>Donec ut eros vitae leo gravida faucibus. Integer eget ligula uteratinterdumvenenatis a anunc. In
hac habitasseplateadictumst. Phasellusplaceratmauris vitae libero scelerisque, vel convallis
risusauctor.</p>
Name- Shubh sharma Roll No-2400970140171
</div>
<div class="image">
<imgsrc="https://via.placeholder.com/400" alt="Sample Image">
</div>
</div>
</body>
</html>
Output:-
3. Write a program to display list of items in different styles.
HTML, CSS, and JavaScript Example
Name- Shubh sharma Roll No-2400970140171
1. HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Items in Different Styles</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>List of Items in Different Styles</h1>
<p>Click on a button to change the list style.</p>
</header>
<main>
<!-- Buttons to change list styles -->
<div class="buttons">
<button onclick="changeStyle('basic')">Basic List</button>
<button onclick="changeStyle('card')">Card Style List</button>
<button onclick="changeStyle('grid')">Grid Style List</button>
</div>
<!-- List container -->
<ul id="item-list" class="basic">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Strawberry</li>
<li>Pineapple</li>
</ul>
</main>
<footer>
<p>© 2025 My Web Page</p>
</footer>
<script src="script.js"></script>
</body>
</html>
2. CSS (styles.css)
/* Basic reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
Name- Shubh sharma Roll No-2400970140171
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
header {
margin-bottom: 20px;
}
/* Style for the buttons */
.buttons button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.buttonsbutton:hover {
background-color: #45a049;
}
/* Basic list style */
.basic {
list-style-type: none;
padding: 0;
font-size: 1.2em;
}
.basic li {
padding: 8px;
margin-bottom: 8px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.basicli:hover {
background-color: #f4f4f4;
}
Name- Shubh sharma Roll No-2400970140171
/* Card style for the list */
.card {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card li {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
margin: 10px;
padding: 20px;
width: 150px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.cardli:hover {
transform: scale(1.05);
}
/* Grid style for the list */
.grid {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.grid li {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.gridli:hover {
transform: scale(1.05);
}
Name- Shubh sharma Roll No-2400970140171
footer {
margin-top: 20px;
font-size: 0.9em;
color: #666;
}
3. JavaScript (script.js)
// Function to change list style
function changeStyle(style) {
const itemList = document.getElementById('item-list');
itemList.className = style; // Update the class of the list
}
Output:-
Name- Shubh sharma Roll No-2400970140171
4. Use frames to Include Images and Videos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedding Images and Videos with Frames</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Embedding Media Using Frames</h1>
<p>Below are examples of embedding images and videos using frames.</p>
</header>
<main>
<!-- Section for Embedding Image -->
<section class="content">
<h2>Embedding an Image</h2>
<!-- Using an iframe to embed an image -->
<iframesrc="https://www.example.com/embedded-image.jpg" width="600" height="400" frameborder="0"
title="Embedded Image"></iframe>
</section>
<!-- Section for Embedding Video -->
<section class="content">
<h2>Embedding a Video</h2>
<!-- Using an iframe to embed a YouTube video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"
allowfullscreen></iframe>
</section>
</main>
<footer>
<p>© 2025 My Web Page</p>
</footer>
</body>
</html>
Output:-
Name- Shubh sharma Roll No-2400970140171
5. Add a Cascading Style sheet for designing the web page.
Name- Shubh sharma Roll No-2400970140171
Example HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<p>This is a sample webpage styled with CSS.</p>
</header>
<main>
<section class="content">
<h2>About Me</h2>
<p>Hello! I'm a web developer, passionate about coding and design.</p>
</section>
<section class="content">
<h2>My Projects</h2>
<ul>
<li>Project 1: Web Design</li>
<li>Project 2: JavaScript Game</li>
<li>Project 3: Portfolio Website</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 My Web Page</p>
</footer>
</body>
</html>
Example CSS (styles.css):
/* Reset default margin and padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styles */
Name- Shubh sharma Roll No-2400970140171
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 20px;
}
/* Header styles */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
}
header h1 {
font-size: 2.5em;
}
header p {
font-size: 1.2em;
}
/* Main content styles */
main {
margin-top: 20px;
}
.content {
background-color: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.content h2 {
color: #4CAF50;
}
.content ul {
list-style-type: none;
}
.content ul li {
padding: 5px 0;
}
Name- Shubh sharma Roll No-2400970140171
/* Footer styles */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 30px;
border-radius: 8px;
}
footer p {
font-size: 1em;
}
Output:-
6. Design a dynamic web page with validation using JavaScript.
<!DOCTYPE html>
<html lang="en">
Name- Shubh sharma Roll No-2400970140171
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="submit"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.error {
color: red;
font-size: 0.9em;
}
.success {
color: green;
font-size: 1.1em;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Student Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<div>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span>
Name- Shubh sharma Roll No-2400970140171
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span id="emailError" class="error"></span>
</div>
<div>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="e.g. 123-456-7890">
<span id="phoneError" class="error"></span>
</div>
<div>
<input type="submit" value="Register">
</div>
</form>
<div id="successMessage" class="success"></div>
</div>
<script>
// Function to validate the form fields
function validateForm() {
// Clear previous error messages
document.getElementById("nameError").innerText = "";
document.getElementById("emailError").innerText = "";
document.getElementById("phoneError").innerText = "";
document.getElementById("successMessage").innerText = "";
let isValid = true;
// Validate name
const name = document.getElementById("name").value;
if (name.trim() === "") {
document.getElementById("nameError").innerText = "Name is required.";
isValid = false;
}
const email = document.getElementById("email").value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email.trim() === "") {
document.getElementById("emailError").innerText = "Email is required.";
isValid = false;
} else if (!emailPattern.test(email)) {
document.getElementById("emailError").innerText = "Please enter a valid email.";
isValid = false;
}
const phone = document.getElementById("phone").value;
Name- Shubh sharma Roll No-2400970140171
const phonePattern = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/;
if (phone.trim() === "") {
document.getElementById("phoneError").innerText = "Phone number is required.";
isValid = false;
} else if (!phonePattern.test(phone)) {
document.getElementById("phoneError").innerText = "Please enter a valid phone number (e.g. 123-
456-7890).";
isValid = false;
}
// If all validations pass, show success message and prevent form submission
if (isValid) {
document.getElementById("successMessage").innerText = "Registration Successful!";
return false; // Prevent form submission for demonstration purposes
}
return false;// Return false to prevent form submission if validation fails
}
</script>
</body>
</html>
Output:-
Name- Shubh sharma Roll No-2400970140171
7. Write a program using JavaScript to demonstrate the concept of built-in array
methods.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Array Methods Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
h1 {
color: #444;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ccc;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>Built-in JavaScript Array Methods</h1>
<pre id="output"></pre>
<script>
const output = [];
let fruits = ["Apple", "Banana", "Cherry"];
output.push("Original array: " + fruits);
// push() - add to end
fruits.push("Date");
output.push("After push('Date'): " + fruits);
// pop() - remove from end
fruits.pop();
output.push("After pop(): " + fruits);
// unshift() - add to start
fruits.unshift("Apricot");
output.push("After unshift('Apricot'): " + fruits);
// shift() - remove from start
fruits.shift();
output.push("After shift(): " + fruits);
Name- Shubh sharma Roll No-2400970140171
// slice() - extract part of array
let sliced = fruits.slice(0, 2);
output.push("Sliced (0,2): " + sliced);
// splice() - remove and/or add elements
fruits.splice(1, 1, "Blueberry");
output.push("After splice(1, 1, 'Blueberry'): " + fruits);
// forEach() - loop through each element
output.push("Using forEach:");
fruits.forEach((fruit, index) => {
output.push(` ${index}: ${fruit}`);
});
// map() - create new array with transformed items
let upperFruits = fruits.map(fruit =>fruit.toUpperCase());
output.push("Mapped to uppercase: " + upperFruits);
// filter() - filter items
let filtered = fruits.filter(fruit =>fruit.startsWith("B"));
output.push("Filtered (starts with 'B'): " + filtered);
// reduce() - reduce array to single value
let totalLength = fruits.reduce((acc, fruit) => acc + fruit.length, 0);
output.push("Total length of all fruit names: " + totalLength);
// Display output
document.getElementById("output").innerText = output.join("\n");
</script>
</body>
</html>
OutPut:-
8. Write a program using JavaScript to demonstrate the concept of nested functions.
Name- Shubh sharma Roll No-2400970140171
<!DOCTYPE html>
<html>
<head>
<title>Nested Functions Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
h1 {
color: #333;
}
pre {
background-color: #f2f2f2;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>JavaScript Nested Functions</h1>
<pre id="output"></pre>
<script>
function outerFunction(name) {
let greeting = "Hello";
// Nested (inner) function
function innerFunction() {
return `${greeting}, ${name}! Welcome to nested functions.`;
}
// Call the inner function from within the outer function
return innerFunction();
}
// Call the outer function and display the result
const message = outerFunction("Alice");
document.getElementById("output").innerText = message;
</script>
</body>
</html>
Output:-
Name- Shubh sharma Roll No-2400970140171
9. Write programs using JavaScript for Web Page to display browsers information.
<!DOCTYPE html>
Name- Shubh sharma Roll No-2400970140171
<html>
<head>
<title>Browser Information</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
.info-box {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: fit-content;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Browser Information</h1>
<div class="info-box" id="browserInfo">
<!-- Browser info will be displayed here -->
</div>
<script>
function displayBrowserInfo() {
const browserData = {
"App Name": navigator.appName,
"App Version": navigator.appVersion,
"User Agent": navigator.userAgent,
"Platform": navigator.platform,
"Language": navigator.language,
"Cookies Enabled": navigator.cookieEnabled,
Name- Shubh sharma Roll No-2400970140171
"Online": navigator.onLine,
"Java Enabled": navigator.javaEnabled(),
};
let output = "<ul>";
for (const key in browserData) {
output += `<li><strong>${key}:</strong> ${browserData[key]}</li>`;
}
output += "</ul>";
document.getElementById("browserInfo").innerHTML = output;
}
// Run on page load
window.onload = displayBrowserInfo;
</script>
</body>
</html>
Output:-
10. Write a program using JavaScript to merge property of two objects.
<!DOCTYPE html>
<html>
Name- Shubh sharma Roll No-2400970140171
<head>
<title>Merge Objects with JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
h1 {
color: #333;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Merge Two Objects in JavaScript</h1>
<pre id="output"></pre>
<script>
const object1 = {
name: "Alice",
age: 25
};
const object2 = {
city: "New York",
age: 30 // This will override object1's age
};
// Method 1: Using Object.assign()
const merged1 = Object.assign({}, object1, object2);
// Method 2: Using Spread Operator (ES6)
const merged2 = { ...object1, ...object2 };
// Display results
let output = "";
output += "Object 1:\n" + JSON.stringify(object1, null, 2) + "\n\n";
output += "Object 2:\n" + JSON.stringify(object2, null, 2) + "\n\n";
output += "Merged (Object.assign):\n" + JSON.stringify(merged1, null, 2) + "\n\n";
output += "Merged (Spread Operator):\n" + JSON.stringify(merged2, null, 2);
document.getElementById("output").innerText = output;
</script>
</body>
Name- Shubh sharma Roll No-2400970140171
</html>
OutPut:-
11. Write a program using JavaScript to include a JS file into another JS file.
Name- Shubh sharma Roll No-2400970140171
Name- Shubh sharma Roll No-2400970140171
