Scribd
Upload
20 views

WD-I Lab file

Uploaded by

makotoyg7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

WD-I Lab file

Uploaded by

makotoyg7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

INDEX

S.No TOPICS DATE SIGN.


WAP that illustrate the use of RGB color values to style our html elements.
Code:
. <!DOCTYPE html>
<html>
<head>
<title>RGB Color Values Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: rgb(240, 240, 240);
margin: 20px;
}
h1 {
color: rgb(255, 0, 0);
}
p{
color: rgb(0, 128, 0);
}
.blue-box {
background-color: rgb(0, 0, 255);
color: white; /
padding: 15px;
border: 2px solid rgb(0, 0, 139);
margin: 20px 0;
}
.yellow-box {
background-color: rgb(255, 255, 0);
color: rgb(255, 69, 0);
padding: 15px;
border: 2px solid rgb(255, 215, 0); /
margin: 20px 0;
}
</style>
</head>
<body>

<h1>Using RGB Color Values</h1>

<p>This paragraph uses <span style="color: rgb(0, 0, 255);">blue text</span> to illustrate


RGB color values.</p>

<div class="blue-box">
This box has a blue background and white text. The border is dark blue.
</div>

<div class="yellow-box">
This box has a yellow background with red-orange text. The border is gold.
</div>

<p>RGB values are specified as <code>rgb(red, green, blue)</code>, where each value
ranges from 0 to 255.</p>

</body>
</html>
WAP that illustrates the use of CSS color, font family and font size properties.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
background-color: rgb(240, 240, 240);
}
h1 {
color: rgb(34, 193, 195);
font-size: 30px;
}
p{
color: rgb(51, 51, 51);
font-size: 18px;
}
.highlight {
color: rgb(255, 99, 71);
font-size: 20px;
font-family: 'Georgia', serif;
}
</style>
</head>
<body>
<h1>CSS Color, Font Family, and Font Size</h1>
<p>This is a paragraph with a default font size and color. You can change the color, font
family, and size using CSS.</p>

<p class="highlight">This highlighted text uses a different font family, color, and size.</p>

</body>
</html>
WAP that illustrate the use CSS Table properties.
Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>

<title>CSS Table Properties Example</title>


<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Product List</h1>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>150</td>
</tr>
<tr>
<td>Cherry</td>
<td>$2.00</td>
<td>75</td>
</tr>
</tbody>
</table>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1 {
text-align: center;
}

table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}

thead {
background-color: #f2f2f2;
}

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

th {
background-color: #4CAF50;
color: white;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:hover {
background-color: #f1f1f1;
}
WAP to create a 3D Groove border using CSS.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Groove Border Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="groove-box">
<h1>3D Groove Border</h1>
<p>This box has a 3D groove border effect created using CSS!</p>
</div>
</body>
</html>

Style.css
.groove-box {

padding: 20px;

margin: 20px;

background-color: #fff;

border: 6px groove #4CAF50; /* Groove border */

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);

border-radius: 10px; /* Rounded corners */

text-align: center;

}
WAP to dynamically change color by percentage CSS.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Color Change</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="colorBox" class="color-box">Percentage: <span
id="percentageText">0%</span></div>
<input type="range" id="percentageInput" min="0" max="100" value="0">
<script src="script.js"></script>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}

.color-box {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
transition: background-color 0.5s ease;
}

Script.js
const percentageInput = document.getElementById('percentageInput');
const colorBox = document.getElementById('colorBox');
const percentageText = document.getElementById('percentageText');

percentageInput.addEventListener('input', () => {
const percentage = percentageInput.value;
percentageText.textContent = `${percentage}%`;

// Calculate the color based on the percentage


const red = Math.floor((255 * percentage) / 100);
const green = Math.floor((255 * (100 - percentage)) / 100);
colorBox.style.backgroundColor = `rgb(${red}, ${green}, 0)`;
});
WAP to set the order of the flexible items using CSS.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Order Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
</div>
</body>
</html>
Style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
.flex-container {
border: 5px solid green;
display: flex;
width: 80%;
justify-content: space-around;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
margin: 10px;
border-radius: 5px;
flex: 1; /* Each item takes equal space */
}

/* Setting the order of the items */


.item1 {
order: 3;
}
.item2 {
order: 1;
}
.item3 {
order: 4;
}
.item4 {
order: 2;
}
WAP to create reflection effect using HTML and CSS.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reflection Effect Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="reflection-box">
<img src="mushroom.jpeg" alt="Reflection Image" class="reflect-image">
</div>
</div>
</body>
</html>
Style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}

.container {
position: relative;
}

.reflection-box {
position: relative;
overflow: hidden;
}

.reflect-image {
display: block;
width: 300px;
/* Set your desired width */
}

.reflect-image::after {
content: '';
display: block;
position: absolute;
top: 100%; /* Position below the image */
left: 0;
width: 100%;
height: 100%; /* Same height as the image */
background: inherit; /* Inherit background color */
background-image: url('https://via.placeholder.com/300'); /* Same image for reflection
*/
transform: scaleY(-1); /* Flip the image vertically */
opacity: 0.5; /* Adjust transparency */
filter: blur(4px); /* Optional: add blur effect */
}
WAP to create Image Folding Effect using HTML and CSS.
Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Folding Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="folding-image">
<img src="mushroom.jpeg" alt="Folding Image">
</div>
</div>
</body>
</html>
Style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.container {
perspective: 1000px;
}

.folding-image {
width: 300px; /* Set the width of your image */
height: 200px; /* Set the height of your image */
overflow: hidden;
cursor: pointer;
}
.folding-image img {
width: 100%;
height: auto;
transition: transform 0.6s ease;
display: block;
}

.folding-image:hover img {
transform: rotateY(180deg);
}
WAP to design a Parallax Webpage using HTML & CSS.
Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>Welcome to Our Parallax Webpage</h1>
<p>This is a simple example of a parallax effect using HTML and CSS.</p>
<p>Scroll down to see the effect in action!</p>
</div>
<div class="parallax"></div>
<div class="content">
<h2>More Content Here</h2>
<p>Parallax scrolling creates a 3D effect by moving background images at a different
speed than the foreground content.</p>
</div>
<div class="parallax"></div>
</body>
</html>

Style.css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

.parallax {
background-image: url('mushroom.jpeg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.content {
height: 400px; /* Set the height of content sections */
padding: 20px;
background: white;
text-align: center;
}

.content h1, .content h2 {


margin-bottom: 20px;
}

.content p {
margin: 10px 0;
}
WAP to create RGB color generator using HTML CSS and JavaScript.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB Color Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>RGB Color Generator</h1>
<div class="color-display" id="colorDisplay"></div>
<button id="generateColor">Generate Color</button>
<p id="rgbValue">RGB: (255, 255, 255)</p>
</div>
<script src="script.js"></script>
</body>
</html>

Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}

.color-display {
width: 300px;
height: 300px;
background-color: white;
border: 2px solid #ccc;
margin: 20px auto;
transition: background-color 0.5s;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #007BFF;
color: white;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}

Script.js
document.getElementById('generateColor').addEventListener('click', function() {
// Generate random RGB values
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);

// Set the background color


const colorDisplay = document.getElementById('colorDisplay');
colorDisplay.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;

// Display the RGB value


const rgbValue = document.getElementById('rgbValue');
rgbValue.textContent = `RGB: (${r}, ${g}, ${b})`;
});
WAP to use Google material icon as list-style in a webpage using HTML and
CSS.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Icons as List-Style</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}

ul {
list-style: none; /* Remove default list style */
padding: 0;
}

li {
position: relative; /* Position for absolute icon */
padding-left: 30px; /* Space for the icon */
margin-bottom: 10px; /* Space between items */
}

li::before {
content: 'check_circle'; /* Material icon name */
font-family: 'Material Icons';
position: absolute;
left: 0;
top: 0;
color: #4CAF50; /* Icon color */
font-size: 24px; /* Icon size */
}
</style>
</head>
<body>

<h1>My To-Do List</h1>


<ul>
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
<li>Task 4</li>
</ul>

</body>
</html>
WAP to design a calendar using HTML and CSS?

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calendar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calendar">
<div class="header">
<h1>October 2024</h1>
</div>
<div class="days-of-week">
<div class="day">Sun</div>
<div class="day">Mon</div>
<div class="day">Tue</div>
<div class="day">Wed</div>
<div class="day">Thu</div>
<div class="day">Fri</div>
<div class="day">Sat</div>
</div>
<div class="dates">
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date">1</div>
<div class="date">2</div>
<div class="date">3</div>
<div class="date">4</div>
<div class="date">5</div>
<div class="date">6</div>
<div class="date">7</div>
<div class="date">8</div>
<div class="date">9</div>
<div class="date">10</div>
<div class="date">11</div>
<div class="date">12</div>
<div class="date">13</div>
<div class="date">14</div>
<div class="date">15</div>
<div class="date">16</div>
<div class="date">17</div>
<div class="date">18</div>
<div class="date">19</div>
<div class="date">20</div>
<div class="date">21</div>
<div class="date">22</div>
<div class="date">23</div>
<div class="date">24</div>
<div class="date">25</div>
<div class="date">26</div>
<div class="date">27</div>
<div class="date">28</div>
<div class="date">29</div>
<div class="date">30</div>
<div class="date">31</div>
</div>
</div>
</body>
</html>

Style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

.calendar {
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}

.header {
background-color: #007BFF;
color: white;
text-align: center;
padding: 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.days-of-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
background-color: #f9f9f9;
}

.day {
text-align: center;
padding: 7px;
font-weight: bold;
}
.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.date {
text-align: center;
padding: 15px 0;
border: 1px solid #e0e0e0;
transition: background-color 0.3s;
}
.date:hover {
background-color: #e6f7ff;
}
WAP to design Background color changer using HTML CSS and JavaScript.

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Background Color Changer</h1>
<button id="changeColor">Change Background Color</button>
</div>
<script src="script.js"></script>
</body>
</html>

Styel.css

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
transition: background-color 0.5s ease;
}

.container {
text-align: center;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #007BFF;
color: white;
border-radius: 5px;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

Script.js
document.getElementById('changeColor').addEventListener('click', function() {
// Generate random RGB values
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);

// Change the background color


document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
WAP to create Image Stack Illusion using HTML and CSS.

Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Stack Illusion</title>

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

</head>

<body>

<div class="image-stack">

<img src="mushroom.jpg" alt="Image 1" class="image">

<img src="IMG_20220616_165215.jpg" alt="Image 2" class="image">

<img src="mushroom.jpg" alt="Image 3" class="image">

<img src="mushroom.jpg" alt="Image 4" class="image">

</div>

</body>

</html>

Style.css

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;
background-color: #f0f0f0;

margin: 0;

.image-stack {

position: relative;

width: 300px; /* Adjust based on your images */

height: 400px; /* Adjust based on your images */

.image {

position: absolute;

width: 100%;

height: auto;

transition: transform 0.3s;

.image:hover {

transform: scale(1.1); /* Scale up the image on hover */

/* Optional: Add some z-index for a stacked effect */

.image:nth-child(1) { z-index: 4; }

.image:nth-child(2) { z-index: 3; }

.image:nth-child(3) { z-index: 2; }

.image:nth-child(4) { z-index: 1; }
WAP to create Hover animations on Button

<!DOCTYPE html>
<html>
<head>
<title>Button Hover Animation</title>
<style>

.button {
padding: 15px 30px;
font-size: 16px;
color: white;
background-color: green; /* Green */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
background-color: green;
transform: scale(1.05);
}

.button:active {
transform: scale(0.95);
}
</style>
</head>
<body>

<button class="button">Hover Me! For check effects</button>

</body>
</html>

Create a web page that contains the image of a human. Form an image map
such that the user clicks on any part of the body, a web page showing
information on that part of the body is displayed

Code:

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Human Body Image Map</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Click on the Body Parts</h1>
<img src="human-body.jpg" alt="Human Body" usemap="#bodymap" class="body-
image">

<map name="bodymap">
<area shape="rect" coords="34,44,270,350" href="head-info.html" alt="Head">
<area shape="rect" coords="80,350,220,500" href="torso-info.html" alt="Torso">
<area shape="rect" coords="50,500,150,750" href="left-leg-info.html" alt="Left Leg">
<area shape="rect" coords="200,500,300,750" href="right-leg-info.html" alt="Right
Leg">
<area shape="rect" coords="20,350,80,500" href="left-arm-info.html" alt="Left Arm">
<area shape="rect" coords="220,350,280,500" href="right-arm-info.html" alt="Right
Arm">
</map>
</body>
</html>

Ear.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ear Information</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Head</h1>
<p>The head houses the brain, eyes, ears, nose, and mouth, playing critical roles in
sensory perception
and communication.</p>
<a href="index.html">Back to Body Image</a>
</body>
</html>
Style.css
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
}

.body-image {
max-width: 100%;
height: auto;
}
Create a registration form for your institution which will ask first name, last
name, age, sex, date of birth, class, address, contact number, email id from
the candidate. When you submit the form it should display the confirmation
message that “You details are saved” (use JavaScript for displaying the
confirmation message.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.form-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: auto;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Registration Form</h2>
<form id="registrationForm">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" required>
</div>
<div class="form-group">
<label for="sex">Sex:</label>
<select id="sex" required>
<option value="" disabled selected>Select your sex</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" required>
</div>
<div class="form-group">
<label for="class">Class:</label>
<input type="text" id="class" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" id="address" required>
</div>
<div class="form-group">
<label for="contact">Contact Number:</label>
<input type="tel" id="contact" required>
</div>
<div class="form-group">
<label for="email">Email ID:</label>
<input type="email" id="email" required>
</div>
<button type="submit">Submit</button>
</form>
</div>

<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
alert('You details are saved!'); // Show confirmation message
});
</script>

</body>
</html>
Create an HTML page with a paragraph. Apply a style directly using inline
styles to change the color and font size. Then use internal CSS to change the
background color of the paragraph.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline and Internal CSS Example</title>
<style>
/* Internal CSS */
.paragraph {
background-color: Lightcyan;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<p style="color: Orange; font-size: 20px;" class="paragraph">
Html is language which is used for creating static wepages. It is case insensitive
language.
</p>

</body>
</html>
Create a nested HTML structure (e.g., a <div> containing a <p> and an <a>).
Apply CSS styles to the parent <div> and observe how styles are inherited by
child elements. Modify styles on child elements to see how inheritance
works.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested HTML Structure</title>
<style>
/* Parent styles */
.parent {
background-color: lightgray; /* Light gray background */
padding: 20px;
border: 2px solid green; /* Green border */
border-radius: 8px;
text-align: center;
font-family: Arial, sans-serif;
}

/* Child styles */
.child {
color: gray; /* Dark gray text */
font-size: 18px; /* Larger font size */
}

/* Child styles */
.child-link {
color: green; /* Green link color */
text-decoration: none; /* Remove underline */
}

/* Hover effect for <a> */


.child-link:hover {
text-decoration: underline; /* Underline on hover */
}
</style>
</head>
<body>

<div class="parent">
<p class="child">This is a paragraph inside the parent div.</p>
<a href="https://www.google.com" class="child-link">This is a link for google search</a>
</div>

</body>
</html>
Create a webpage that includes an iframe displaying another webpage.
Ensure the iframe has a set width and height, and add a border around it.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Iframe Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
text-align: center;
}

.iframe-container {
border: 2px solid #4CAF50; /* Green border */
width: 800px; /* Set width */
height: 600px; /* Set height */
margin: 0 auto; /* Center the iframe */
overflow: hidden; /* Clip any overflow */
}

iframe {
width: 100%; /* Full width of container */
height: 100%; /* Full height of container */
border: none; /* Remove default border */
}
</style>
</head>
<body>

<h1>Iframe Example</h1>
<div class="iframe-container">
<iframe src="https://www.youtube.com/" title="Example Webpage"></iframe>
</div>

</body>
</html>

Create an HTML page and use different types of CSS selectors (universal,
type, class, ID, attribute, descendant, child, sibling). Apply styles using these
selectors and Design an HTML table and use CSS to style it. Apply borders,
padding, background colors, and hover effects.

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>CSS Selectors and Styled Table</title>
<style>
/* Universal selector */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Type selector */
body {
font-family: Arial, sans-serif;
background-color: white;
padding: 20px;
}

/* Class selector */
.table-container {
margin: 20px auto;
width: 80%;
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ID selector */
#myTable {
width: 100%;
border-collapse: collapse;
}

/* Attribute selector */
th[data-type="header"] {
background-color: #4CAF50;
color: white;
padding: 10px;
}

/* Descendant selector */
.table-container td {
padding: 8px;
text-align: center;
}

/* Child selector */
.table-container tr:first-child td {
font-weight: bold;
}

/* Sibling selector */
tr:nth-child(even) {
background-color: #f2f2f2;
}

/* Hover effect */
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>

<div class="table-container">
<table id="myTable">
<tr>
<th data-type="header">Name</th>
<th data-type="header">Age</th>
<th data-type="header">City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Emily Johnson</td>
<td>35</td>
<td>Chicago</td>
</tr>
<tr>
<td>Michael Brown</td>
<td>40</td>
<td>Houston</td>
</tr>
</table>
</div>

</body>
</html>
Create an HTML page with a background image and a foreground text. Use
CSS to set the opacity of the background image.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image with Foreground Text</title>
<style>

.background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://example.com/your-image.jpg'); /* Replace with your image
URL */
background-size: cover;
background-position: center;
opacity: 0.5; /* Set the opacity of the background */
z-index: 1; /* Lower z-index */
}

.foreground {
position: relative;
z-index: 2; /* Higher z-index to stay above the background */
color: white;
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
</style>
</head>
<body>

<div class="background"></div>
<div class="foreground">
<h1>Welcome to My Page</h1>
<p>This is a foreground text over a background image.</p>
</div>
</body>
</html>

Design an HTML page with overlapping elements. Use CSS to apply different
z-index values to control the stacking order of the elements.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overlapping Elements with z-index</title>
<style>
body {
font-family: Arial, sans-serif;
position: relative;
height: 100vh;
margin: 0;
overflow: hidden;
}

.box {
width: 200px;
height: 200px;
position: absolute;
}

.box1 {
background-color: rgba(255, 0, 0, 0.7); /* Red */
top: 50px;
left: 50px;
z-index: 1; /* Lowest stacking order */
}

.box2 {
background-color: rgba(0, 255, 0, 0.7); /* Green */
top: 100px;
left: 100px;
z-index: 2; /* Higher stacking order */
}

.box3 {
background-color: rgba(0, 0, 255, 0.7); /* Blue */
top: 150px;
left: 150px;
z-index: 3; /* Highest stacking order */
}

h1 {
position: absolute;
top: 20px;
left: 20px;
z-index: 4; /* Above all boxes */
color: black;
}
</style>
</head>
<body>

<h1>Overlapping Elements</h1>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

</body>
</html>

Create a HTML form that has number of Textboxes. When the form runs in
the Browser fill the textboxes with data. Write JavaScript code that verifies
that all textboxes has been filled. If a textboxes has been left empty, popup
an alert indicating which textbox has been left empty.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textbox Verification Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input[type="text"] {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 300px;
}
button {
padding: 10px 15px;
}
</style>
<script>
functionverifyForm() {
const textboxes = [
{ id: 'Fname', name: 'Fname' },
{ id: 'Lname', name: 'Lname' },
{ id: 'Degree', name: 'Degree' },
{ id: 'textbox4', name: 'Textbox 4' },
{ id: 'textbox5', name: 'Textbox 5' }
];

for (const textbox of textboxes) {


const input = document.getElementById(textbox.id);
if (input.value.trim() === '') {
alert(`${textbox.name} has been left empty.`);
input.focus(); // Optional: focus on the empty textbox
return false; // Prevent form submission
}
}
alert('All textboxes are filled!');
return true; // Allow form submission
}
</script>
</head>
<body>

<h1>Fill the details</h1>


<form id="myForm" onsubmit="return verifyForm()">
<input type="text" id="Fname" placeholder="First name" required>
<input type="text" id="Lname" placeholder="Last name" required>
<input type="text" id="degree" placeholder="Degree name" required>
<input type="text" id="textbox4" placeholder="Father name" required>
<input type="text" id="textbox5" placeholder="Mother name" required>
<button type="submit">Submit</button>
</form>

</body>
</html>

Create an HTML page and use CSS media queries to apply different styles for
different screen sizes (e.g., mobile, tablet, desktop).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design with Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color:White;
}

h1 {
text-align: center;
color: charcoal;
}
p{
line-height: 1.6;
color: gray;
}

/* Mobile styles */
@media (max-width: 600px) {
body {
background-color: Lightblue ;
}

h1 {
font-size: 24px;
}

p{
font-size: 14px;
}
}

/* Tablet styles */
@media (min-width: 601px) and (max-width: 900px) {
body {
background-color: light yellow;
}

h1 {
font-size: 28px;
}

p{
font-size: 16px;
}
}

/* Desktop styles */
@media (min-width: 901px) {
body {
background-color: Aqua Spring;
}

h1 {
font-size: 32px;
}

p{
font-size: 18px;
}
}
</style>
</head>
<body>
<h1>Responsive Design with Media Queries</h1>
<p>This is an example of how to use CSS media queries to create a responsive layout. Resize
the browser window to see the changes in styles for different screen sizes.</p>
<p>Adjustments are made for mobile, tablet, and desktop views.</p>
</body>
</html>

Create a form having number of elements (Textboxes, Radio buttons,


Checkboxes,and so on). Write JavaScript code to count the number of
elements in a form
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Element Counter</title>

<script>

functioncountElements() {

const form = document.getElementById('myForm');

consttotalElements = form.elements.length;

const textboxes = form.querySelectorAll('input[type="text"]').length;

constradioButtons = form.querySelectorAll('input[type="radio"]').length;

const checkboxes = form.querySelectorAll('input[type="checkbox"]').length;

constnumberInputs = form.querySelectorAll('input[type="number"]').length;

const output = `

Total elements in the form: ${totalElements}

Textboxes: ${textboxes}

Radio buttons: ${radioButtons}

Checkboxes: ${checkboxes}

Number inputs: ${numberInputs}


`;

document.getElementById('output').textContent = output;

</script>

</head>

<body>

<h1>Form Element Counter</h1>

<form id="myForm">

<label for="text1">Fname:</label>

<input type="text" id="text1"><br><br>

<label for="text2">Lname:</label>

<input type="text" id="text2"><br><br>

<label>Choose an option:</label><br>

<input type="radio" name="options" value="Option 1"> Post graduate<br>

<input type="radio" name="options" value="Option 2"> Under-graduate<br><br>

<label>Select your hobbies:</label><br>

<input type="checkbox" name="hobbies" value="Reading"> Reading<br>

<input type="checkbox" name="hobbies" value="Traveling"> Traveling<br>

<input type="checkbox" name="hobbies" value="Cooking"> Cooking<br><br>

<label for="number">Enter a number:</label>

<input type="number" id="number"><br><br>


<button type="button" onclick="countElements()">Count Elements</button>

</form>

<h2 id="output"></h2>

</body>

</html>

write a javscript program that creates an array of 5 numbers. use array


methods to add a number to the end, remove a number from begining, and
find the index of a paritcular number.
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Array Manipulation</title>

</head>

<body>

<h1>Array Manipulation Example</h1>

<div>

<button onclick="manipulateArray()">Run Array Manipulation</button>

</div>

<pre id="output"></pre>

<script>

functionmanipulateArray() {
// Step 1: Create an array of 5 numbers

let numbers = [10, 20, 30, 40, 50];

let output = `Initial array: ${numbers}\n`;

// Step 2: Add a number to the end of the array

numbers.push(60); // Adding 60 to the end

output += `Array after adding 60: ${numbers}\n`;

// Step 3: Remove a number from the beginning of the array

numbers.shift(); // Removing the first element (10)

output += `Array after removing the first element: ${numbers}\n`;

// Step 4: Find the index of a particular number (e.g., 40)

let index = numbers.indexOf(40);

if (index !== -1) {

output += `Index of 40: ${index}\n`;

} else {

output += `40 is not found in the array.\n`;

// Display the output

document.getElementById('output').textContent = output;

</script>

</body>

</html>
Write a JavaScript function that change the background color of a div
element when a button is clicked. Provide multiple buttons to change to
different colors.
<!DOCTYPE html>

<html>

<head>

<title>Change Background Color</title>

</head>

<style>

#colorBox {

width: 300px;

height: 200px;

border: 1px solid black;

margin-bottom: 20px;

</style>

<script>

functionchangeColor(color) {

document.getElementById('colorBox').style.backgroundColor = color;

</script>

</head>

<body>

<div id="colorBox"><P>Clicked on button to see the color effect of colors</P></div>

<button onclick="changeColor('red')">Red</button>

<button onclick="changeColor('green')">Green</button>

<button onclick="changeColor('blue')">Blue</button>
<button onclick="changeColor('yellow')">Yellow</button>

<button onclick="changeColor('purple')">Purple</button>

</body>

</html>

You might also like