Scribd
Upload
11 views25 pages

WT Lab All Shubh

The document provides multiple examples of HTML code for creating simple webpages, including a basic webpage, a webpage with aligned paragraphs and images, a list of items displayed in different styles, and embedding images and videos using frames. Additionally, it includes a styled webpage using CSS and a dynamic registration form with JavaScript validation. Each example contains the necessary HTML structure, CSS for styling, and JavaScript for interactivity.

Uploaded by

ankitbhardwaj7294
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views25 pages

WT Lab All Shubh

The document provides multiple examples of HTML code for creating simple webpages, including a basic webpage, a webpage with aligned paragraphs and images, a list of items displayed in different styles, and embedding images and videos using frames. Additionally, it includes a styled webpage using CSS and a dynamic registration form with JavaScript validation. Each example contains the necessary HTML structure, CSS for styling, and JavaScript for interactivity.

Uploaded by

ankitbhardwaj7294
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

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>&copy; 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>&copy; 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>&copy; 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>&copy; 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

You might also like