HTML, CSS, and JavaScript Worksheet
1. Basic Tags for a Webpage
Question: What are the basic tags required to create a webpage? Write a simple
HTML page with a title and a heading.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
</body>
</html>
2. Paragraph in HTML
Question: Write the HTML code to display a paragraph with the text “Welcome to
Web Development.”
Answer:
<p>Welcome to Web Development.</p>
3. Fill in the Blanks
Question: Complete the following HTML structure.
<html>
<head>
<title>______</title>
</head>
<body>
<h1>______</h1>
<p>______</p>
</body>
</html>
Answer:
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
4. Fixing Errors in HTML
Question: Identify and correct the errors in the following HTML code:
<html>
<head>
<title>My Page</title>
<head>
<body>
<h1>Welcome to my page<h1>
<p>This is a paragraph<p>
</body>
</html>
Answer:
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to my page</h1>
<p>This is a paragraph.</p>
</body>
</html>
5. Browser Output
Question: What will be displayed on the browser when the following HTML is run?
<html>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Answer:
Heading: Hello, World!
Paragraph: This is my first webpage.
6. alt Attribute in <img> Tag
Question: What is the purpose of the alt attribute in the <img> tag? Write an
example.
Answer: The alt attribute provides alternative text for an image if it cannot be
displayed.
Example:
<img src="image.jpg" alt="A beautiful scenery">
7. Links in a New Tab
Question: Create a link using the <a> tag that opens in a new tab. What attribute is
used?
Answer:
<a href="https://example.com" target="_blank">Visit Example</a>
8. Ordered List
Question: Write HTML code to create an ordered list of your three favorite movies.
Answer:
<ol>
<li>Inception</li>
<li>The Dark Knight</li>
<li>Interstellar</li>
</ol>
9. Creating a Table
Question: Create a table to display the following data:
Nam Ag Professio
e e n
Ali 25 Developer
Babb
30 Designer
ar
Answer:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Ali</td>
<td>25</td>
<td>Developer</td>
</tr>
<tr>
<td>Babbar</td>
<td>30</td>
<td>Designer</td>
</tr>
</table>
10. ID vs Class Selectors
Question: What is the difference between an ID selector (#) and a class selector (.)?
Write CSS to style an element with the ID header and a class content.
Answer:
ID Selector: Targets a single unique element.
Class Selector: Targets multiple elements.
CSS Example:
#header {
font-size: 24px;
font-weight: bold;
}
.content {
font-size: 16px;
color: gray;
}
11. Styling <p> Elements
Question: How do you select all <p> elements in CSS? Write a rule to make their text
color blue.
Answer:
p {
color: blue;
}
12. Background Color
Question: Write CSS to set the background color of a webpage to light gray.
Answer:
body {
background-color: lightgray;
}
13. Completing CSS Code
Question: Complete the following CSS code to change the background color and text
color of a webpage:
body {
background-color: ______;
color: ______;
}
Answer:
body {
background-color: lightblue;
color: black;
}
14. Styling a Heading
Question: How would you style the text of a heading to be center-aligned, bold, and
in a font size of 24px?
Answer:
h1 {
text-align: center;
font-weight: bold;
font-size: 24px;
}
15. Fixing CSS Errors
Question: Find and fix the errors in the following CSS code:
body {
background: lightblue
font-size: 16px;
}
h1 {
color red;
text-align: center
}
Answer:
body {
background: lightblue;
font-size: 16px;
}
h1 {
color: red;
text-align: center;
}
16. Styling a <div>
Question: Write CSS to give a <div> a red border, 20px padding, and 10px margin.
Answer:
div {
border: 2px solid red;
padding: 20px;
margin: 10px;
}
17. CSS Effects
Question: What will be the effect of the following CSS on an HTML page?
p {
font-size: 20px;
color: green;
}
Answer: All <p> elements will have a font size of 20px and green text color.
18. Hover Effect on Button
Question: Create a button and use CSS to add a hover effect that changes its
background color.
Answer:
<button>Hover Me</button>
<style>
button:hover {
background-color: yellow;
}
</style>
19. Alert Box in JavaScript
Question: Write JavaScript to display an alert box with the message "Hello, World!"
Answer:
alert("Hello, World!");
20. Completing JavaScript Code
Question: Complete the following JavaScript code to display an alert message:
______("Welcome to JavaScript!");
Answer:
alert("Welcome to JavaScript!");
21. Logging a Message to the Console
Question: How would you log a message to the browser console? Write an example.
Answer:
console.log("This is a message in the console.");
22. Fixing JavaScript Errors
Question: Find and fix the errors in the following JavaScript code:
function sayHello() {
alert("Hello, World!)
}
sayHello;
Answer:
function sayHello() {
alert("Hello, World!");
}
sayHello();
23. Checking Age Condition
Question: Declare a variable named age and assign it a value of 25. Write JavaScript
to check if age is greater than 18.
Answer:
let age = 25;
if (age > 18) {
console.log("Age is greater than 18.");
}
24. var, let, and const
Question: What are the differences between var, let, and const? Provide examples.
Answer:
var: Function-scoped, allows re-declaration.
let: Block-scoped, does not allow re-declaration.
const: Block-scoped, must be initialized, and cannot be reassigned.
Examples:
var x = 10;
let y = 20;
const z = 30;
x = 15; // Allowed
// let y = 25; // Error
// z = 35; // Error
25. Output of JavaScript Code
Question: What will be the output of the following JavaScript code?
let x = 5;
let y = 10;
let sum = x + y;
console.log(sum);
Answer: Output: 15
26. Changing Text in JavaScript
Question: Write JavaScript to change the text of a <p> element with the ID demo to
"Welcome to JavaScript."
Answer:
// JavaScript code
let paragraph = document.getElementById("demo");
paragraph.textContent = "Welcome to JavaScript.";
27. Button with Alert
Question: How would you create a button that displays an alert when clicked? Write
the code.
Answer:
<button onclick="alert('Button clicked!')">Click Me</button>
28. Loop to Print Numbers
Question: Write a JavaScript loop to print numbers from 1 to 10 in the console.
Answer:
for (let i = 1; i <= 10; i++) {
console.log(i);
}
29. Check Even or Odd
Question: Write JavaScript to check if a number is even or odd and display the result
in the console.
Answer:
let number = 7; // Example number
if (number % 2 === 0) {
console.log("The number is even.");
} else {
console.log("The number is odd.");
}
30. Changing Image on Button Click
Question: Create a webpage with a heading, an image, and a button. Use JavaScript
to change the image when the button is clicked.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Change Image</title>
</head>
<body>
<h1>Image Changer</h1>
<img id="myImage" src="image1.jpg" alt="Image" width="300">
<br>
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
document.getElementById("myImage").src = "image2.jpg";
}
</script>
</body>
</html>
31. Simple Calculator
Question: Build a simple calculator using HTML, CSS, and JavaScript that can
perform addition, subtraction, multiplication, and division.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="Enter first
number">
<input type="number" id="num2" placeholder="Enter second
number">
<br><br>
<button onclick="calculate('+')">Add</button>
<button onclick="calculate('-')">Subtract</button>
<button onclick="calculate('*')">Multiply</button>
<button onclick="calculate('/')">Divide</button>
<br><br>
<p id="result">Result: </p>
</div>
<script>
function calculate(operator) {
let num1 =
parseFloat(document.getElementById("num1").value);
let num2 =
parseFloat(document.getElementById("num2").value);
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
result = "Invalid operation";
}
document.getElementById("result").textContent = "Result:
" + result;
}
</script>
</body>
</html>
32. Fixing Button Issues
Question: The following code does not work as intended. Fix the issues:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background: green;
color: white
}
</style>
</head>
<body>
<button onclick="alert('You clicked the button!)">Click
Me</button>
</body>
</html>
Answer:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background: green;
color: white;
}
</style>
</head>
<body>
<button onclick="alert('You clicked the button!')">Click
Me</button>
</body>
</html>
