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
[Link]. 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="[Link]">
</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;
[Link]("nameError").textContent = "";
[Link]("emailError").textContent = "";
[Link]("phoneError").textContent = "";
const name = [Link]("name").value;
if ([Link]() === "") {
[Link]("nameError").textContent = "Name is required.";
isValid = false;
const email = [Link]("email").value;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if () {
[Link]("emailError").textContent = "Please enter a valid email.";
isValid = false;
const phone = [Link]("phone").value;
const phonePattern = /^\d{10}$/;
if () {
[Link]("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="[Link]">
</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="[Link]" alt="Product 1">
<h3>Girls Shoes</h3>
<p>price. 1000</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="[Link]" alt="Product 2">
<h3>Girls Smart watch</h3>
<p>price. 2000</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="[Link]" 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>© 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="[Link]">
</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="[Link]">
</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="[Link]">
</head>
<body>
<header>
<h1>Amna Khatoon </h1>
<p class="contact">Email: amnakhatoon793@[Link] | Phone: 7858023095</p>
</header>
<section>
<h2>Personal Information</h2>
<ul>
<li>Name: Amna Khatoon</li>
<li>Email: amnakhatoon793@[Link]</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="[Link]">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<input type="text" id="display" readonly>
<div class="button_container">
<button class="button" onclick="currentDisplay = '';
[Link]('#display').value = currentDisplay;">c</button>
<button class="button" onclick="currentDisplay = currentDisplay + '1';
[Link]('#display').value = currentDisplay;">1</button>
<button class="button" onclick="currentDisplay = currentDisplay + '2';
[Link]('#display').value = currentDisplay;">2</button>
<button class="button" onclick="currentDisplay = currentDisplay + '+';
[Link]('#display').value = currentDisplay;">+</button>
<button class="button" onclick="currentDisplay = currentDisplay + '3';
[Link]('#display').value = currentDisplay;">3</button>
<button class="button" onclick="currentDisplay = currentDisplay + '4';
[Link]('#display').value = currentDisplay;">4</button>
<button class="button" onclick="currentDisplay = currentDisplay + '-';
[Link]('#display').value = currentDisplay;">-</button>
<button class="button" onclick="currentDisplay = currentDisplay + '5';
[Link]('#display').value = currentDisplay;">5</button>
<button class="button" onclick="currentDisplay = currentDisplay + '6';
[Link]('#display').value = currentDisplay;">6</button>
<button class="button" onclick="currentDisplay = currentDisplay + '*';
[Link]('#display').value = currentDisplay;">*</button>
<button class="button" onclick="currentDisplay = currentDisplay + '7';
[Link]('#display').value = currentDisplay;">7</button>
<button class="button" onclick="currentDisplay = currentDisplay + '8';
[Link]('#display').value = currentDisplay;">8</button>
<button class="button" onclick="currentDisplay = currentDisplay + '/';
[Link]('#display').value = currentDisplay;">/</button>
<button class="button" onclick="
currentDisplay = eval(currentDisplay);
[Link]('#display').value = currentDisplay;">=</button>
<button class="button" onclick="currentDisplay = currentDisplay + '9';
[Link]('#display').value = currentDisplay;">9</button>
<button class="button" onclick="currentDisplay = currentDisplay + '0';
[Link]('#display').value = currentDisplay;">0</button>
<button class="button" onclick="currentDisplay = currentDisplay + '.';
[Link]('#display').value = currentDisplay;">.</button>
</div>
</div>
<script>
let currentDisplay = '';
[Link]('#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 = [Link]("inputText").value;
let cleanedInput = [Link](/[^A-Za-z0-9]/g, "").toLowerCase();
let reversedInput = [Link]("").reverse().join("");
if (cleanedInput === reversedInput) {
[Link]("result").innerHTML = "Yes, it's a palindrome!";
[Link]("result").[Link] = "green";
} else {
[Link]("result").innerHTML = "No, it's not a palindrome!";
[Link]("result").[Link] = "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="[Link]">
</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="[Link]">
</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="[Link]
</iframe>
</div>
<div class="media-container">
<h2>Embedded Audio</h2>
<audio controls>
<source src="[Link] 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('[Link]
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;
}
