Solved Multiple Choice Questions with Explanations & Tips
1. Which of the following tag is not a correct HTML tag?
- (a)
<div> - (b)
<span> - (c)
<head> - (d)
<footer>
✅ Answer: None of these (All are correct HTML tags)
🔹 Explanation:
All four options (<div>, <span>, <head>, <footer>) are valid HTML tags. <div> and <span> are used for structuring and styling, <head> contains metadata, and <footer> represents the footer section of a webpage.
💡 Tip: Always check the latest HTML specifications for valid tags. You can refer to MDN Web Docs for updated information.
2. What does CSS stand for?
- (a) Cascading Style Sheets
- (b) Computer Style Sheets
- (c) Creative Style Sheets
- (d) Colorful Style Sheets
✅ Answer: (a) Cascading Style Sheets
🔹 Explanation:
CSS stands for Cascading Style Sheets, which is used to define the presentation of HTML documents, including layout, colors, and fonts.
💡 Tip: The word “Cascading” refers to how styles are applied in a hierarchy, from external stylesheets to inline styles.
3. Which of the following tag is used to create a hyperlink in HTML?
- (a)
<link> - (b)
<a> - (c)
<href> - (d)
<nav>
✅ Answer: (b)<a>
🔹 Explanation:
The <a> (anchor) tag is used to create hyperlinks in HTML. The href attribute inside the <a> tag specifies the link’s destination.
💡 Tip: Use the target="_blank" attribute to open links in a new tab, like this: <a href="https://example.com" target="_blank">Click Here</a>.
4. Which property is used to change the background color in CSS?
- (a) color
- (b) background-color
- (c) bgcolor
- (d) background
✅ Answer: (b) background-color
🔹 Explanation:
The background-color property is used to set the background color of an element in CSS.
💡 Tip: Use color for text color and background-color for background color. Example:
body {
background-color: lightblue;
}
5. Which HTML attribute is used to define inline styles?
- (a) class
- (b) style
- (c) font
- (d) styles
✅ Answer: (b) style
🔹 Explanation:
The style attribute allows inline CSS styling directly in an HTML tag.
💡 Tip: Avoid excessive use of inline styles; instead, use external CSS for better maintainability.
Example:
<p style="color: red;">This is a red text.</p>
6. Which of the following is the correct syntax for a CSS rule?
- (a) selector {property: value;}
- (b) selector: {property=value;}
- (c) selector {property=value}
- (d) selector: {property: value;}
✅ Answer: (a) selector {property: value;}
🔹 Explanation:
CSS rules follow the syntax:
selector {
property: value;
}
💡 Tip: Always end CSS statements with a semicolon (;) to avoid errors.
7. In JavaScript, which markup is used for comments?
- (a)
/* */ - (b)
// - (c)
<– - (d)
/* */
✅ Answer: Both (a) and (b)
🔹 Explanation:
- Single-line comments:
// This is a comment - Multi-line comments:
/* This is a multi-line comment */
💡 Tip: Use comments to explain code but avoid excessive commenting in obvious cases.
8. How do you include JavaScript in an HTML document?
- (a)
<script src="script.js"></script> - (b)
<java src="script.js"></java> - (c)
<js src="script.js"></js> - (d)
<code src="script.js"></code>
✅ Answer: (a)<script src="script.js"></script>
🔹 Explanation:
JavaScript is included in HTML using the <script> tag, either inline or by linking an external file.
💡 Tip: Place <script> before the closing </body> tag to improve page load speed.
9. Which HTML tag is used to create an unordered list?
- (a)
<ol> - (b)
<ul> - (c)
<li> - (d)
<list>
✅ Answer: (b)<ul>
🔹 Explanation:
The <ul> tag is used for unordered (bulleted) lists, whereas <ol> is for ordered (numbered) lists.
💡 Tip: Use <li> inside <ul> or <ol> to define list items.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
10. Which tag is used to display a horizontal line in HTML?
- (a)
<br> - (b)
<hr> - (c)
<line> - (d)
<hline>
✅ Answer: (b)<hr>
🔹 Explanation:
The <hr> (horizontal rule) tag creates a horizontal line in HTML, typically used to separate content.
💡 Tip: Customize the appearance using CSS, e.g.:
hr {
border: 2px solid black;
}
Solved Short Questions (Simple & Easy Language)
1. What is the purpose of the <head> tag in HTML?
The <head> tag contains important information about the web page that is not visible to users. It includes:
- The title of the page (
<title>) - Links to CSS files (
<link>) - Meta information (
<meta>) - JavaScript files (
<script>)
2. Explain the difference between an ordered list and an unordered list in HTML.
- Ordered List (
<ol>): It shows items in a numbered format (1, 2, 3…). - Unordered List (
<ul>): It shows items with bullet points (●, ■, ○).
Example:
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
3. How do you add a comment in CSS?
In CSS, we use /* */ for comments.
Example:
/* This is a comment */
p {
color: blue; /* This line changes text color to blue */
}
Comments are ignored by the browser and are used to explain code.
4. What are the different ways to apply CSS to an HTML document?
There are three ways to apply CSS:
- Inline CSS – Written inside the HTML tag using the
styleattribute.<p style="color: red;">Hello</p> - Internal CSS – Written inside the
<style>tag in the<head>section.<style> p { color: blue; } </style> - External CSS – Written in a separate
.cssfile and linked using<link>.<link rel="stylesheet" href="style.css">
5. How can you include JavaScript in an HTML file?
We can include JavaScript in two ways:
- Inline JavaScript: Inside the
<script>tag in the HTML file.<script> alert("Hello World!"); </script> - External JavaScript: Linking a separate JavaScript file (
.js).<script src="script.js"></script>
6. Describe the syntax for creating a hyperlink in HTML.
A hyperlink is created using the <a> tag with the href attribute.
Example:
<a href="https://www.google.com">Visit Google</a>
This will create a clickable link that opens Google.
7. What is the function of the <div> tag in HTML?
The <div> tag is used to group other HTML elements together. It helps in styling and layout design.
Example:
<div style="background-color: lightgray; padding: 10px;">
<p>This is inside a div.</p>
</div>
It is like a container for other elements.
8. How do you link an external CSS file to an HTML document?
We use the <link> tag inside the <head> section.
Example:
<link rel="stylesheet" href="style.css">
This connects an external style.css file to the HTML page.
9. What is the use of the <table> tag in HTML?
The <table> tag is used to create tables to display data in rows and columns.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>15</td>
</tr>
</table>
This will create a simple table with a border.
10. Explain the box model in CSS.
The CSS box model explains how elements are displayed on a webpage. It includes:
- Content – The main text or image inside the box.
- Padding – Space inside the box, around the content.
- Border – The outer edge of the box.
- Margin – Space outside the box, separating it from other elements.
Example:
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
This defines a box with content, padding, border, and margin.
💡 Tip for Students: Keep practicing with small HTML and CSS examples to understand better. 🚀
Solved Long Questions (Simple & Easy for Class 9)
1. Discuss the fundamental differences between HTML, CSS, and JavaScript in the context of web development.
In web development, HTML, CSS, and JavaScript work together to create a complete website. Here’s how they differ:
| Feature | HTML | CSS | JavaScript |
|---|---|---|---|
| Purpose | Structure of a webpage | Styling and design | Makes the webpage interactive |
| What it does | Defines headings, paragraphs, images, tables, etc. | Changes colors, fonts, layout, and animations | Adds buttons, forms, and real-time interactions |
| Example | <h1>Heading</h1> | h1 { color: red; } | document.write("Hello!"); |
🔹 Simple Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: blue; }
</style>
<script>
function showMessage() {
alert("Hello, this is JavaScript!");
}
</script>
</head>
<body>
<h1>Welcome to Web Development</h1>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
✅ HTML creates the heading and button.
✅ CSS makes the heading blue.
✅ JavaScript makes the button show an alert when clicked.
2. Explain the process of setting up a development environment for web development.
To start web development, you need some basic software and tools:
1. Text Editor (for writing code)
- Notepad++ (Simple and easy)
- VS Code (Popular among developers)
2. Web Browser (for testing webpages)
- Google Chrome (Best for development)
- Mozilla Firefox
3. Local Web Server (for testing advanced web pages)
- XAMPP (For PHP and databases)
4. Steps to Set Up
- Install VS Code and a web browser.
- Open VS Code and create an
index.htmlfile. - Write a basic HTML page and save it.
- Open the file in a web browser to see your webpage.
💡 Tip: Always save your file with .html extension before testing.
3. Create a basic HTML page that includes a header, a paragraph, an image, and a hyperlink.
✅ Code for a simple webpage:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage. I am learning HTML!</p>
<img src="image.jpg" alt="A beautiful scenery" width="300">
<br>
<a href="https://www.google.com">Click here to visit Google</a>
</body>
</html>
💡 Save this as index.html and open it in a browser.
4. How do you style a table using CSS? Create a sample table and apply styles to it.
✅ HTML Table with CSS Styling
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: lightblue;
}
tr:nth-child(even) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Student Marks</h2>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Ali</td>
<td>85</td>
</tr>
<tr>
<td>Sara</td>
<td>90</td>
</tr>
</table>
</body>
</html>
💡 Tip: Use border-collapse: collapse; to remove space between table borders.
5. Describe the different CSS selectors and provide examples of each.
| Selector Type | Example | Description |
|---|---|---|
| Element Selector | p { color: red; } | Styles all <p> tags. |
| Class Selector | .highlight { color: blue; } | Styles elements with class="highlight". |
| ID Selector | #title { font-size: 20px; } | Styles an element with id="title". |
| Group Selector | h1, h2 { text-align: center; } | Styles multiple elements together. |
✅ Example:
#main {
color: green;
}
.highlight {
background-color: yellow;
}
💡 Tip: Use classes when styling multiple elements and IDs for unique elements.
6. Explain the process of creating a responsive web page using CSS.
A responsive webpage adjusts its layout for different screen sizes.
✅ Example using Media Queries:
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 12px;
}
}
🔹 Explanation:
- The font size is 16px by default.
- When the screen width is 600px or smaller, the font size reduces to 12px.
💡 Tip: Use flexbox and grid for better responsive design.
7. Write a JavaScript function that changes the background color of a web page when a button is clicked.
✅ HTML + JavaScript Code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<button onclick="changeColor()">Click to Change Color</button>
</body>
</html>
🔹 Explanation:
- The
onclickevent runs thechangeColor()function when the button is clicked. document.body.style.backgroundColor = "lightblue";changes the background color.
💡 Tip: You can use "random" colors using Math.random().
8. How do you add animations and transitions using CSS?
✅ Example of a simple animation:
@keyframes move {
from { left: 0px; }
to { left: 200px; }
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear infinite;
}
✅ Example of a button with transition:
button {
background-color: blue;
color: white;
padding: 10px;
transition: background-color 0.5s;
}
button:hover {
background-color: green;
}
🔹 Explanation:
- Animation moves a box from left to right.
- Transition smoothly changes button color when hovered.
💡 Tip: Use ease-in-out for smoother effects.
🔥 Conclusion: Learning HTML, CSS, and JavaScript step by step helps in building amazing websites. Keep practicing and experimenting with code! 🚀
