Mangalmay Institute of Engineering & Technology

WD LAB FILE

Department of Computer Science & Engineering CSE

Session: 2024 - 25
Year: 2nd
Semester:3rd

Submitted to: Submitted by: Amna Khatoon

Tapash Kumar Saha Roll No: Lateral Entry
Assistant Professor Name: Amna Khatoon
CSE , MIET Greater Noida Branch: CSE

1
2
 Index
S.No. Experiment Title Page Date Sign
No.

1. Simple Form Validation 6 - 11

 Description: Design a simple HTML form
with the following fields:
o Name (text input)
o Email (email input)
o Phone number (text input with a
pattern for validation)
o Submit button
 Implement JavaScript to perform client-side
form validation:
o Ensure that the name field is not
empty.
o Check if the email field contains a
valid email format.
o Validate the phone number format
using regular expressions.
o Show appropriate error messages if
the validation fails.

 Technologies: HTML (forms), CSS

(styling), JavaScript (validation)
2. Create a Simple Web Page 12 - 18

 Description: Design a basic web page with

the following components:
o A header with a navigation bar
containing links to different sections
on the page (e.g., Home, About,
Contact).
o An image of your choice (e.g., a logo
or photo) inserted using the <img>
tag.
o A footer with contact information or
copyright details.
o The page should include at least one
paragraph of text and a list of your
favorite hobbies or interests (use an
unordered or ordered list).

 Skills Tested: Basic HTML structure, image

embedding, links, lists, footer creation.
3. Create a Table for a Product List 19 - 22

 Description: Create a table that displays a

 list of products. Each row should include the
product name, description, price, and
availability status (in-stock/out of stock).
Use the <table>, <tr>, <th>, and <td> tags.
o Include headers for each column
(e.g., Product, Description, Price,
Availability).
o Add at least five products with
different information in each
column.
o Ensure the table has a simple and
clear design (you can use inline CSS
for basic styling if required).

 Skills Tested: Using tables, rows, and cells

in HTML, creating headers for tables.
4. Create an Ordered and Unordered List 23 - 25

 Description: Create a web page that

contains:
o An unordered list (<ul>) with at least
five items, representing your top five
favorite foods, hobbies, or travel
destinations.
o An ordered list (<ol>) with at least
five items, representing steps to
complete a task (e.g., how to make a
cup of tea or how to prepare a
sandwich).

 Skills Tested: Lists (ordered and

unordered), organizing content using HTML
elements.
5. Create a Navigation Bar 26 - 28

 Description: Create a horizontal navigation

bar that contains the following links:
o Home
o About Us
o Services
o Contact
 Make sure that the navigation links are
styled (using inline or internal CSS) so that
they appear horizontally and have a hover
effect (e.g., change color when hovered).

 Skills Tested: Creating links, working with

navigation bars, basic CSS for styling (if
needed)
6. Create an HTML Resume Page 29 - 32

 Description: Create a simple resume page

that contains the following sections:
o A personal information section
(name, contact details).
o An education section with the names
of institutions, years attended, and
degrees earned.
o A work experience section with job
titles, companies, and employment
dates.
o A skills section listing your top
skills.
o Use semantic HTML elements where
possible, such as <section>, <article>,
<header>, <footer>, and <ul>.

 Skills Tested: Resume formatting with

HTML, using semantic tags, creating
structured content.
7. Simple Calculator 33 - 37

 Description: Create a simple calculator

using JavaScript that performs basic
arithmetic operations (addition, subtraction,
multiplication, division). The calculator
should have:
o Number buttons (0-9).
o Operation buttons (+, -, *, /).
o A display screen that shows the
current value.
o A button to clear the display.
o The calculator should update the
display as numbers and operations
are clicked.

 Skills Tested: DOM manipulation, event

handling, basic JavaScript operations.
8. Palindrome Checker 38 - 40

 Description: Create a function that checks

if a given word or phrase is a palindrome.
The function should:
o Accept user input (a string).
o Ignore spaces, punctuation, and case
sensitivity.
o Return true if the input is a
palindrome, and false otherwise.
 o Display the result on the webpage
(e.g., "Yes, it's a palindrome!" or
"No, it's not a palindrome!").
 Skills Tested: Strings, loops, conditionals.

9. Create a Form with Stylish Input Fields 41 - 45

 Description: Design a form with the

following input fields:
o Full Name (text input)
o Email (email input)
o Message (textarea)
o A Submit button
 Use CSS to style the form:
o Add padding, borders, and a
background color to the input fields.
o Style the submit button with hover
effects.
o Make the form visually appealing
(e.g., rounded corners, subtle
shadows).
o Add focus styles for the input fields
when clicked.
 Skills Tested: Form styling, button styling,
input focus states.

10 Create a Web Page with Embedded Media 46 - 49

 Description: Create a webpage that

includes:
o An embedded YouTube video (use
the <iframe> tag).
o An audio file embedded using the
<audio> tag.
o A background image for the
webpage (using the <body> tag with
an inline style or the <style> tag).
 Skills Tested: Embedding media,
background images, understanding the
<iframe> and <audio> tags.
 PRACTICAL-1
1. Simple Form Validation

 Description: Design a simple HTML form with the following fields:

o Name (text input)
o Email (email input)
o Phone number (text input with a pattern for validation)
o Submit button
 Implement JavaScript to perform client-side form validation:
o Ensure that the name field is not empty.
o Check if the email field contains a valid email format.
o Validate the phone number format using regular expressions.
o Show appropriate error messages if the validation fails.
 Technologies: HTML (forms), CSS (styling), JavaScript (validation)
 Form Validation
HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>Simple Form Validation</title>

<link rel="stylesheet" href="required.css">

</head>

<body>

<h1>Simple Form Validation</h1>

<form id="myForm" onsubmit="return validateForm()">

<label for="name">Name:</label>

<input type="text" id="name" name="name" placeholder="Enter your name">

<div id="nameError" class="error"></div>

<label for="email">Email:</label>

<input type="email" id="email" name="email" placeholder="Enter your email">

<div id="emailError" class="error"></div>

<label for="phone">Phone Number:</label>

<input type="text" id="phone" name="phone" placeholder="Enter your phone number"

pattern="^\d{10}$">

<div id="phoneError" class="error"></div>

<button type="submit">Submit</button>

</form>
JAVASCRIPT

<script>

function validateForm() {

let isValid = true;

document.getElementById("nameError").textContent = "";

document.getElementById("emailError").textContent = "";

document.getElementById("phoneError").textContent = "";

const name = document.getElementById("name").value;

if (name.trim() === "") {

document.getElementById("nameError").textContent = "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 (!emailPattern.test(email)) {

document.getElementById("emailError").textContent = "Please enter a valid email.";

isValid = false;

const phone = document.getElementById("phone").value;

const phonePattern = /^\d{10}$/;

if (!phonePattern.test(phone)) {

document.getElementById("phoneError").textContent = "Please enter a valid 10-digit phone

number.";

isValid = false

}
return isValid;

</script>

</body>

</html>

CSS

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 50px;

form {

width: 350px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

background-color: #f9f9f9;

input {

width: 100%;

padding: 10px;

margin: 10px 0;

font-size: 1.2em

border: 1px solid #ccc;

 border-radius: 5px;

button {

width: 100%;

padding: 10px;

font-size: 1.2em;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

button:hover {

background-color: #45a049;

label{

font-size: 1.2em;

.error {

color: red;

font-size: 0.9em;

margin-top: 5px;

}
PRACTICAL-2
2. Create a Simple Web Page

 Description: Design a basic web page with the following components:

o A header with a navigation bar containing links to different sections on the page (e.g.,
Home, About, Contact).
o An image of your choice (e.g., a logo or photo) inserted using the <img> tag.
o A footer with contact information or copyright details.
o The page should include at least one paragraph of text and a list of your favorite hobbies
or interests (use an unordered or ordered list).
 Skills Tested: Basic HTML structure, image embedding, links, lists, footer creation.

Web Page
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Storefront</title>
<link rel="stylesheet" href="store.css">
</head>
<body>
<header>
<h1>My Online Store</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<section id="hero">
<h2>Welcome to the Best Online Store!</h2>
<p>Discover our range of products</p>
<a href="#products" class="cta-button">Shop Now</a>
</section>

<section id="products">
<h2 class="our">Our Products</h2>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Girls Shoes</h3>
<p>price. 1000</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Girls Smart watch</h3>
<p>price. 2000</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="product4.jpg" alt="Product 3">
<h3>Girls Top Frock</h3>
<p>price. 1200</p>
<button>Add to Cart</button>
</div>

</section>
</div>

</div>

<section id="about">
<h2>About Us</h2>
<p>Discover why millions of entrepreneurs chose Shopify to build their business — from hello
world to IPO.</p>
</section>
<footer>
<p>&copy; 2024 My Online Store. All rights reserved.</p>
</footer>
</body>
</html>

CSS
body {
font-family: Arial;
margin: 0;
padding: 0;

background-color: #f8f8f8;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}

nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s;
}
nav a:hover {
background-color: #555;
}
#hero {
 padding: 50px;
background-color: #e0e0e0;
text-align: center;
}

#hero h2 {
font-size: 2.5em;
margin-bottom: 10px;
}

.cta-button {
padding: 10px 20px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.cta-button:hover {
background-color: #555;
}
.our {
text-align: center;
justify-content: center;
font-size: 30px;
}
#products {
padding: 40px;
display: flex;
justify-content: space-around;
text-align: center;
flex-wrap: wrap;
gap: 10px;

.product {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;

.product img {
width: 100%;
height: 344px;
 margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;

border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #555;
}
.shop-section {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: #e2e7e6;
}

.box {
height: 450px;
width: 23%;
background-color: white;
padding: 20px 0px 15px;
margin-top: 15px;
}
.box-img {
height: 300px;
background-size: cover;
margin-top: 1rem;
margin-bottom: 1rem;
}

.box-content
{
margin-left: 1rem;
margin-right: 1rem;

.box-content button
{
color: #fff;

display: flex;
 justify-content: space-evenly;
text-align: center;
margin: auto;
}

.box-content button:hover {
background-color: #555;

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
 PRACTICAL-3

3. Create a Table for a Product List

 Description: Create a table that displays a list of products. Each row should include the product
name, description, price, and availability status (in-stock/out of stock). Use the <table>, <tr>, <th>,
and <td> tags.
o Include headers for each column (e.g., Product, Description, Price, Availability).
o Add at least five products with different information in each column.
o Ensure the table has a simple and clear design (you can use inline CSS for basic styling if
required).
 Skills Tested: Using tables, rows, and cells in HTML, creating headers for tables.
 Table for a Product List
HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Product List</h2>
<table>
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wireless Mouse</td>
<td>A sleek, ergonomic wireless mouse with adjustable DPI settings.</td>
<td>₹500</td>
<td>In-stock</td>
</tr>
<tr>
<td>Bluetooth Headphones</td>
<td>Noise-canceling headphones with long-lasting battery life.</td>
<td>₹3000</td>
<td>Out of stock</td>
</tr>
<tr>
<td>Smartphone Charger</td>
<td>Fast-charging USB-C charger with universal compatibility.</td>
<td>₹1000</td>
<td>In-stock</td>
</tr>
<tr>
<td>Monitor</td>
<td>High-definition monitor with vivid colors and adjustable stand.</td>
<td>₹8000</td>
<td>In-stock</td>
</tr>
 <tr>

<td>Gaming Keyboard</td>
<td>RGB mechanical keyboard with customizable keys.</td>
<td>₹9000</td>
<td>In-stock</td>
</tr>
</tbody>
</table>
</body>
</html>

CSS

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}

th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
color: #333;
}

td {
background-color: #fff;
}

h2{
text-align: center;
}
 PRACTICAL-4
4. Create an Ordered and Unordered List

 Description: Create a web page that contains:

o An unordered list (<ul>) with at least five items, representing your top five favorite foods,
hobbies, or travel destinations.
o An ordered list (<ol>) with at least five items, representing steps to complete a task (e.g.,
how to make a cup of tea or how to prepare a sandwich).
 Skills Tested: Lists (ordered and unordered), organizing content using HTML elements.

Ordered and Unordered List

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Favorite Things and Task Steps</title>
</head>
<body>

<h2>Top 5 Favorite Foods</h2>

<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Chocolate Cake</li>
<li>Spaghetti</li>
<li>Ice Cream</li>
</ul>

<h2>Top 5 Favorite Hobbies</h2>

<ul>
<li>Reading</li>
<li>Playing</li>
<li>Singing</li>
<li>Shopping</li>
<li>Sleeping</li>
</ul>

<h2>Top 5 Travel Destinations</h2>

<ul>
<li>Paris</li>
<li>Japan</li>
<li>USA</li>
<li>Dubai</li>
<li>Canada</li>
</ul>

<h2>How to Make a Cup of Tea</h2>

<ol>
<li>Boil water in a kettle.</li>
<li>Place a tea bag in a cup.</li>
<li>Pour the hot water into the cup.</li>
<li>Let the tea steep for 3-5 minutes.</li>
<li>Remove the tea bag and add sugar or milk if desired.</li>
</ol>

</body>
</html>
 PRACTICAL-5

5. Create a Navigation Bar

 Description: Create a horizontal navigation bar that contains the following links:
o Home
o About Us
o Services
o Contact
 Make sure that the navigation links are styled (using inline or internal CSS) so that they appear
horizontally and have a hover effect (e.g., change color when hovered).
 Skills Tested: Creating links, working with navigation bars, basic CSS for styling (if needed).
 Navigation Bar
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href="home.css">
</head>
<body>

<div class="nav">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>

CSS
.nav {
background-color: #333;
overflow: hidden;
height: 80px;
}
body {
background-color: #ddd;
}
.nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
margin-left: 70px;

}
.nav a:hover {
background-color: #ddd;
color: black;

}
 PRACTICAL-6

6. Create an HTML Resume Page

 Description: Create a simple resume page that contains the following sections:
o A personal information section (name, contact details).
o An education section with the names of institutions, years attended, and degrees earned.
o A work experience section with job titles, companies, and employment dates.

A skills section listing your top skills.

o Use semantic HTML elements where possible, such as <section>, <article>, <header>,
<footer>, and <ul>.
 Skills Tested: Resume formatting with HTML, using semantic tags, creating structured content.
 Resume
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Resume</title>
<link rel="stylesheet" href="resume.css">
</head>
<body>
<header>
<h1>Amna Khatoon </h1>
<p class="contact">Email: [email protected] | Phone: 7858023095</p>
</header>

<section>
<h2>Personal Information</h2>
<ul>
<li>Name: Amna Khatoon</li>
<li>Email: [email protected]</li>
<li>Phone: 7858023095</li>
</ul>
</section>

<section>
<h2>Education</h2>
<ul class="education">
<li><strong>University of Jamia Millia Islamia</strong> - Undergraduade of Science in Computer
Science (2021 - 2023)</li>
<li><strong>College of Mangalmay institute of Engineering & Technology</strong> - Bachelor of
Science in Computer Science (2024 - 2027)</li>
<li><strong>Bihar Board High School</strong> - 10th Board (2020)</li>
</ul>
</section>
<section>
<h2>Work Experience</h2>
<ul class="experience">
<li><strong>Software Engineer</strong> - Tech Company Inc. (2024 - Present)</li>
<li><strong>Intern</strong> - Web Solutions Ltd. (2024 - 2025)</li>
</ul>
</section>

<section>
<h2>Skills</h2>
<ul class="skills">
<li>JavaScript</li>
<li>Python</li>
<li>React</li>
 <li>SQL</li>
<li>Html</li>
<li>CSS</li>
<li>Problem-solving</li>
</ul>
</section>
</body>
</html>

CSS

body {
font-family: Arial, sans-serif;
margin: 40px;
line-height: 1.6;
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.contact {
font-size: 1.2em;
}
section {
margin-bottom: 30px;
}
h2 {
color: #333;
border-bottom: 2px solid #333;
padding-bottom: 5px;
}
.experience, .education, .skills {
list-style-type: none;
padding: 0;
}
.experience li, .education li {
margin-bottom: 10px;
}
footer {
text-align: center;
font-size: 0.9em;
color: #777;
margin-top: 30px;
}
 PRACTICAL-7

7. Simple Calculator

 Description: Create a simple calculator using JavaScript that performs basic arithmetic
operations (addition, subtraction, multiplication, division). The calculator should have:
o Number buttons (0-9).
o Operation buttons (+, -, *, /).
o A display screen that shows the current value.
o A button to clear the display.
o The calculator should update the display as numbers and operations are clicked.
 Skills Tested: DOM manipulation, event handling, basic JavaScript operations.
 Simple Calculator
HTML

<!DOCTYPE html>
<html lang="en">

<head>
<title>Calculator </title>
<link rel="stylesheet" href="calcu.css">
</head>

<body>
<h1>Calculator</h1>
<div id="calculator">
<input type="text" id="display" readonly>
<div class="button_container">
<button class="button" onclick="currentDisplay = '';
document.querySelector('#display').value = currentDisplay;">c</button>

<button class="button" onclick="currentDisplay = currentDisplay + '1';

document.querySelector('#display').value = currentDisplay;">1</button>

<button class="button" onclick="currentDisplay = currentDisplay + '2';

document.querySelector('#display').value = currentDisplay;">2</button>

<button class="button" onclick="currentDisplay = currentDisplay + '+';

document.querySelector('#display').value = currentDisplay;">+</button>

<button class="button" onclick="currentDisplay = currentDisplay + '3';

document.querySelector('#display').value = currentDisplay;">3</button>

<button class="button" onclick="currentDisplay = currentDisplay + '4';

document.querySelector('#display').value = currentDisplay;">4</button>

<button class="button" onclick="currentDisplay = currentDisplay + '-';

document.querySelector('#display').value = currentDisplay;">-</button>

<button class="button" onclick="currentDisplay = currentDisplay + '5';

document.querySelector('#display').value = currentDisplay;">5</button>

<button class="button" onclick="currentDisplay = currentDisplay + '6';

document.querySelector('#display').value = currentDisplay;">6</button>

<button class="button" onclick="currentDisplay = currentDisplay + '*';

document.querySelector('#display').value = currentDisplay;">*</button>

<button class="button" onclick="currentDisplay = currentDisplay + '7';

 document.querySelector('#display').value = currentDisplay;">7</button>

<button class="button" onclick="currentDisplay = currentDisplay + '8';

document.querySelector('#display').value = currentDisplay;">8</button>

<button class="button" onclick="currentDisplay = currentDisplay + '/';

document.querySelector('#display').value = currentDisplay;">/</button>

<button class="button" onclick="

currentDisplay = eval(currentDisplay);
document.querySelector('#display').value = currentDisplay;">=</button>

<button class="button" onclick="currentDisplay = currentDisplay + '9';

document.querySelector('#display').value = currentDisplay;">9</button>

<button class="button" onclick="currentDisplay = currentDisplay + '0';

document.querySelector('#display').value = currentDisplay;">0</button>

<button class="button" onclick="currentDisplay = currentDisplay + '.';

document.querySelector('#display').value = currentDisplay;">.</button>
</div>
</div>

<script>
let currentDisplay = '';
document.querySelector('#display').value = currentDisplay;
</script>
</body>

</html>

CSS
*{
padding: 0;
margin: 0;
}

body {
background-color: #424242;
font-family: Tahoma;
}

h1 {
color: #FFF;
text-align: center;
margin-top: 2px;
margin-bottom: 5px;
}
#calculator {
border: 1px solid rgb(197, 183, 183);
border-radius: 5px;
width: 300px;
margin: auto;

}
#display {
margin: 10px;
width: 85%;
font-size: 25px;
background-color: #FFF;

.button {
width: 70px;
height: 70px;
margin: 3px;
}
.button_container {
display: flex;
justify-content: center;
flex-wrap: wrap;

}
 PRACTICAL-8

8. Palindrome Checker

 Description: Create a function that checks if a given word or phrase is a palindrome. The
function should:
o Accept user input (a string).
o Ignore spaces, punctuation, and case sensitivity.
o Return true if the input is a palindrome, and false otherwise.
o Display the result on the webpage (e.g., "Yes, it's a palindrome!" or "No, it's not a
palindrome!").
 Skills Tested: Strings, loops, conditionals.
 Palindrome Checker
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Palindrome Checker</title>
</head>
<body>

<h1>Palindrome Checker</h1>
<p>Enter a word or phrase to check if it's a palindrome:</p>

<input type="text" id="inputText" placeholder="Enter text here">

<button onclick="checkPalindrome()">Check</button>

<div class="result" id="result"></div>

<script>

function checkPalindrome() {
let input = document.getElementById("inputText").value;

let cleanedInput = input.replace(/[^A-Za-z0-9]/g, "").toLowerCase();

let reversedInput = cleanedInput.split("").reverse().join("");

if (cleanedInput === reversedInput) {

document.getElementById("result").innerHTML = "Yes, it's a palindrome!";
document.getElementById("result").style.color = "green";
} else {
document.getElementById("result").innerHTML = "No, it's not a palindrome!";
document.getElementById("result").style.color = "red";
}
}
</script>

</body>
</html>
 PRACTICAL 9

9. Create a Form with Stylish Input Fields

 Description: Design a form with the following input fields:

o Full Name (text input)
o Email (email input)
o Message (textarea)
o A Submit button
 Use CSS to style the form:
o Add padding, borders, and a background color to the input fields.
o Style the submit button with hover effects.
o Make the form visually appealing (e.g., rounded corners, subtle shadows).
o Add focus styles for the input fields when clicked.
 Skills Tested: Form styling, button styling, input focus states.
 Form
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Stylish Form</title>
<link rel="stylesheet" href="form.css">
</head>
<body>

<div class="form-container">
<h2>Contact Us</h2>
<form action="#">
<div class="form-group">
<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full-name" placeholder="Your full name">
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your email address">
</div>

<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your message"></textarea>
</div>

<button type="submit">Submit</button>
</form>
</div>

</body>
</html>

CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.form-container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}

h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

label {
font-size: 1.1em;
margin-bottom: 8px;
display: block;
color: #555;
}

input[type="text"], input[type="email"], textarea {

width: 100%;
padding: 10px;
margin: 8px 0 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 1em;
background-color: #fafafa;
transition: border-color 0.3s, box-shadow 0.3s;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
border-color: #5cb85c;
box-shadow: 0 0 8px rgba(92, 184, 92, 0.6);
outline: none;
}
textarea {
resize: vertical;
height: 150px;
}

button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
font-size: 1.1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

button:hover {
background-color: #0056b3;
transform: scale(1.05);
}

button:active {
background-color: #00408d;
}

.form-group {
margin-bottom: 15px;
}
 PRACTICAL-10

10. Create a Web Page with Embedded Media

 Description: Create a webpage that includes:

o An embedded YouTube video (use the <iframe> tag).
o An audio file embedded using the <audio> tag.
o A background image for the webpage (using the <body> tag with an inline style or the
<style> tag).
 Skills Tested: Embedding media, background images, understanding the <iframe> and <audio>
tags.
 Web Page with Embedded Media
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page with Embedded Media</title>
<link rel="stylesheet" href="media.css">
</head>
<body>

<div class="content">
<h1>Welcome to My Web Page</h1>
<p>Enjoy the following media content:</p>

<div class="media-container">
<h2>Embedded YouTube Video</h2>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>

<div class="media-container">
<h2>Embedded Audio</h2>
<audio controls>
<source src="https://www.example.com/audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
</div>

</body>
</html>
CSS

body {
margin: 0;
padding: 0;
background-image: url('https://www.example.com/your-image.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: white;
font-family: Arial, sans-serif;
}

.content {
text-align: center;
padding: 50px;
background: rgba(0, 0, 0, 0.5);
}

h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

.media-container {
margin: 30px 0;
}

iframe {
width: 100%;
max-width: 800px;
height: 450px;
}

audio {
margin-top: 20px;
}