dna

insert an image in your html document with a relevant tag and given it height and
width of 300 and 400 px
<!DOCTYPE html>
<html>
<head>
<title>Image and Progress Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table width="640" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="image.jpg" alt="Image description" width="400"
height="300" id="image">
</td>
</tr>
</table>
<footer>
<div id="progress-bar">
<div id="progress"></div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
}
#progress-bar {
width: 100%;
height: 20px;
background-color: #ccc;
border-radius: 10px;
padding: 10px;
}
#progress {
width: 0%;
height: 100%;
background-color: #4CAF50;
border-radius: 10px;
}
design a navbar with home ,about and contact us page and write necessary code to
navigate to these pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Example</title>
<style>
/* Style the navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the links inside the navigation bar */

.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change the color of links on hover */

.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>


<div class="navbar">
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact Us</a>
</div>
</body>
</html>
set:-1
Create the output through html
•Apple
•Samsung
1.S21
2.S22
3.S23
•Oneplus
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product List</title>
</head>
<body>
<ul>
<li>Apple</li>
<li>Samsung
<ol>
<li>S21</li>
<li>S22</li>
<li>S23</li>
</ol>
</li>
<li>OnePlus</li>
</ul>
</body>
</html>
Make 4 boxes from div tag with height and width 200px and apply css to arrange
them in single line.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Four Boxes in a Single Line</title>
<style>
/* Style the container to center-align the boxes */
.container {
text-align: center;
}
/* Style the boxes */

.box {
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
margin: 10px; /* Add spacing between boxes */
transition: background-color 0.9s ease;
}
.box:hover{
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">

<div class="box"></div>
</div>
</body>
</html>
Set 2
Q1- Write a js program to print your name n number of times ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Print Aman Gupta</title>
</head>
<body>
<script>
// Prompt the user to enter a number
var n = prompt("Enter the number of times to print 'Aman Gupta':");
// Convert the input to a number

n = parseInt(n);
// Check if the input is a valid number

if (!isNaN(n) && n > 0) {
// Print 'Aman Gupta' n times
for (var i = 0; i < n; i++) {
document.write("Aman Gupta<br>");
}
} else {
// Display an error message if the input is not a valid number
document.write("Invalid input. Please enter a valid number greater than 0.");
}
</script>
</body>
</html>
Q2- Make a div with 200px height and width and align it in bottom right of the
webpage using css position property?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bottom Right Div</title>
<style>
/* Style the div */
.bottom-right {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>


<div class="bottom-right"></div>
</body>
</html>
Set 3
1) design login form with the following fields
-
- username with "enter username" field
- password with "enter password"field
- login button
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, Helvetica, sans-
serif; }
.container { width: 300px; padding: 16px; background-color: white; margin: 0
auto; margin-top: 100px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius:
5px; }
label { display: block; margin-bottom: 8px; }
input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px;

margin: 8px 0; box-sizing: border-box; border: 2px solid lightgray; border-radius:
5px; font-size: 16px; }
input[type="text"]:focus, input[type="password"]:focus { border-color:

dodgerblue; outline: none; }
button { background-color: dodgerblue; color: white; padding: 12px 20px;

border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #0069d9; } </style>
</head> <body> <div class="container"> <label

for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username"
name="uname" required> <label for="psw"><b>Password</b></label> <input
type="password" placeholder="Enter Password" name="psw" required> <button
type="submit">Login</button> </div> </body> </html>
design a div box with height as well as width of 200px each and background colour
should be red. When hovering over it it should be change to yellow in colour.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover Effect</title>
<style>
/* Style the box */
.box {
width: 200px;
height: 200px;
transition: background-color 0.3s ease; /* Smooth transition */
}
/* Apply hover effect */

.box:hover {
background-color: yellow;
}
</style>
</head>
<body>


</body>
</html>
Set - 5
1. Make an Array in JS which contains 5 car names. Write a program to print all the
elements of the array.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Car Names</title>
</head>
<body>
<h1>Car Names</h1>


<div id="carNames"></div>
<script>
// Array containing 5 car names
var cars = ["Toyota", "Honda", "Ford", "Chevrolet", "BMW"];
// Get the container element

var carNamesContainer = document.getElementById("carNames");
// Iterate through the array and print each car name

for (var i = 0; i < cars.length; i++) {
// Create a paragraph element for each car name
var para = document.createElement("p");
// Set the text content of the paragraph to the current car name
para.textContent = cars[i];
// Append the paragraph to the container
carNamesContainer.appendChild(para);
}
</script>
</body>
</html>
2. Make a div with height and width of 200px each and background color black and
align it to the center of the page vertically.
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#myDiv {
width: 200px;
height: 200px;
background-color: #000;
}
img {
height: 300px;
width: 400px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<img src="your-image.jpg" alt="Your Image">
</body>
</html>

dna

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

dna

Uploaded by

Copyright:

Available Formats

insert an image in your html document with a relevant tag and given it height and

width of 300 and 400 px

/* Style the links inside the navigation bar */

/* Change the color of links on hover */

/* Style the boxes */

// Convert the input to a number

// Check if the input is a valid number

label { display: block; margin-bottom: 8px; }

input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px;

input[type="text"]:focus, input[type="password"]:focus { border-color:

button { background-color: dodgerblue; color: white; padding: 12px 20px;

button:hover { background-color: #0069d9; } </style>

</head> <body> <div class="container"> <label

/* Apply hover effect */

// Get the container element

// Iterate through the array and print each car name

You might also like