Chapter 8: Web Development with HTML, CSS, and JavaScript – Solved Exercise

By samreen Published February 21, 2025 1st year Chemistry

Solved Multiple Choice Questions with Explanations & Tips

1. Which of the following tag is not a correct HTML tag?

(a)
(b)
(c)
(d)

✅ Answer: None of these (All are correct HTML tags)

🔹 Explanation:
All four options (

, , ,

) are valid HTML tags.

and are used for structuring and styling, contains metadata, and

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?

(c)

(d)

✅ Answer: (b)

🔹 Explanation:
The (anchor) tag is used to create hyperlinks in HTML. The href attribute inside the tag specifies the link’s destination.

💡 Tip: Use the target="_blank" attribute to open links in a new tab, like this: Click Here.

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:

This is a red text.

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)
(b)
(c)
(d)
✅ Answer: (a)

🔹 Explanation:
JavaScript is included in HTML using the

💡 Tip: Place

💡 Tip: Use

 inside  or  to define list items.
Example:




  Item 1
  Item 2









10. Which tag is used to display a horizontal line in HTML?




(a) 




(b) 



(c) 



(d) 
✅ Answer: (b) 




🔹 Explanation:
The 
 (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  tag in HTML?



The  tag contains important information about the web page that is not visible to users. It includes:




The title of the page (</code>)</li>



<li>Links to CSS files (<code><link></code>)</li>



<li>Meta information (<code><meta></code>)</li>



<li>JavaScript files (<code><script></code>)</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>2. Explain the difference between an ordered list and an unordered list in HTML.</strong></h4>



<ul class="wp-block-list">
<li><strong>Ordered List (<code><ol></code>)</strong>: It shows items in a numbered format (1, 2, 3…).</li>



<li><strong>Unordered List (<code><ul></code>)</strong>: It shows items with bullet points (●, ■, ○).</li>
</ul><!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-137" data-inserter-version="2" data-placement-location="incontent_9"></div><script data-ezoic="1" data-no-optimize="1" data-no-defer="1">ezstandalone.cmd.push(function () { ezstandalone.showAds(137); });</script><!-- End Ezoic - wp_incontent_9 - incontent_9 -->



<p>Example:</p>



<pre class="wp-block-code"><code><ol>
  <li>First Item</li>
  <li>Second Item</li>
</ol>

<ul>
  <li>First Item</li>
  <li>Second Item</li>
</ul>
</code></pre>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>3. How do you add a comment in CSS?</strong></h4>



<p>In CSS, we use <code>/* */</code> for comments.<br>Example:</p>



<pre class="wp-block-code"><code>/* This is a comment */
p {
  color: blue; /* This line changes text color to blue */
}
</code></pre>



<p>Comments are ignored by the browser and are used to explain code.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>4. What are the different ways to apply CSS to an HTML document?</strong></h4>



<p>There are <strong>three</strong> ways to apply CSS:</p>



<ol class="wp-block-list">
<li><strong>Inline CSS</strong> – Written inside the HTML tag using the <code>style</code> attribute. <code><p style="color: red;">Hello</p></code></li>



<li><strong>Internal CSS</strong> – Written inside the <code><style></code> tag in the <code><head></code> section. <code><style> p { color: blue; } </style></code></li>



<li><strong>External CSS</strong> – Written in a separate <code>.css</code> file and linked using <code><link></code>. <code><link rel="stylesheet" href="style.css"></code></li>
</ol>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>5. How can you include JavaScript in an HTML file?</strong></h4>



<p>We can include JavaScript in two ways:</p>



<ol class="wp-block-list">
<li><strong>Inline JavaScript:</strong> Inside the <code><script></code> tag in the HTML file. <code><script> alert("Hello World!"); </script></code></li>



<li><strong>External JavaScript:</strong> Linking a separate JavaScript file (<code>.js</code>). <code><script src="script.js"></script></code></li>
</ol><!-- Ezoic - wp_incontent_10 - incontent_10 --><div id="ezoic-pub-ad-placeholder-138" data-inserter-version="2" data-placement-location="incontent_10"></div><script data-ezoic="1" data-no-optimize="1" data-no-defer="1">ezstandalone.cmd.push(function () { ezstandalone.showAds(138); });</script><!-- End Ezoic - wp_incontent_10 - incontent_10 -->



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>6. Describe the syntax for creating a hyperlink in HTML.</strong></h4>



<p>A hyperlink is created using the <code><a></code> tag with the <code>href</code> attribute.<br>Example:</p>



<pre class="wp-block-code"><code><a href="https://www.google.com">Visit Google</a>
</code></pre>



<p>This will create a clickable link that opens Google.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>7. What is the function of the <code><div></code> tag in HTML?</strong></h4>



<p>The <code><div></code> tag is used to group other HTML elements together. It helps in styling and layout design.</p>



<p>Example:</p>



<pre class="wp-block-code"><code><div style="background-color: lightgray; padding: 10px;">
  <p>This is inside a div.</p>
</div>
</code></pre>



<p>It is like a container for other elements.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>8. How do you link an external CSS file to an HTML document?</strong></h4>



<p>We use the <code><link></code> tag inside the <code><head></code> section.</p>



<p>Example:</p>



<pre class="wp-block-code"><code><link rel="stylesheet" href="style.css">
</code></pre>



<p>This connects an external <code>style.css</code> file to the HTML page.</p><!-- Ezoic - wp_incontent_11 - incontent_11 --><div id="ezoic-pub-ad-placeholder-139" data-inserter-version="2" data-placement-location="incontent_11"></div><script data-ezoic="1" data-no-optimize="1" data-no-defer="1">ezstandalone.cmd.push(function () { ezstandalone.showAds(139); });</script><!-- End Ezoic - wp_incontent_11 - incontent_11 -->



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>9. What is the use of the <code><table></code> tag in HTML?</strong></h4>



<p>The <code><table></code> tag is used to create tables to display data in rows and columns.</p>



<p>Example:</p>



<pre class="wp-block-code"><code><table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>15</td>
  </tr>
</table>
</code></pre>



<p>This will create a simple table with a border.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h4 class="wp-block-heading"><strong>10. Explain the box model in CSS.</strong></h4>



<p>The CSS <strong>box model</strong> explains how elements are displayed on a webpage. It includes:</p>



<ol class="wp-block-list">
<li><strong>Content</strong> – The main text or image inside the box.</li>



<li><strong>Padding</strong> – Space inside the box, around the content.</li>



<li><strong>Border</strong> – The outer edge of the box.</li>



<li><strong>Margin</strong> – Space outside the box, separating it from other elements.</li>
</ol><!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-140" data-inserter-version="2" data-placement-location="incontent_12"></div><script data-ezoic="1" data-no-optimize="1" data-no-defer="1">ezstandalone.cmd.push(function () { ezstandalone.showAds(140); });</script><!-- End Ezoic - wp_incontent_12 - incontent_12 -->



<p>Example:</p>



<pre class="wp-block-code"><code>div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
</code></pre>



<p>This defines a box with content, padding, border, and margin.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>💡 <strong>Tip for Students:</strong> Keep practicing with small HTML and CSS examples to understand better. 🚀</p>



<h3 class="wp-block-heading"><strong>Solved Long Questions (Simple & Easy for Class 9)</strong></h3>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><strong>1. Discuss the fundamental differences between HTML, CSS, and JavaScript in the context of web development.</strong></h3>



<p>In web development, <strong>HTML, CSS, and JavaScript</strong> work together to create a complete website. Here’s how they differ:</p><!-- Ezoic - wp_incontent_13 - incontent_13 --><div id="ezoic-pub-ad-placeholder-141" data-inserter-version="2" data-placement-location="incontent_13"></div><script data-ezoic="1" data-no-optimize="1" data-no-defer="1">ezstandalone.cmd.push(function () { ezstandalone.showAds(141); });</script><!-- End Ezoic - wp_incontent_13 - incontent_13 -->



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Feature</th><th>HTML</th><th>CSS</th><th>JavaScript</th></tr></thead><tbody><tr><td><strong>Purpose</strong></td><td>Structure of a webpage</td><td>Styling and design</td><td>Makes the webpage interactive</td></tr><tr><td><strong>What it does</strong></td><td>Defines headings, paragraphs, images, tables, etc.</td><td>Changes colors, fonts, layout, and animations</td><td>Adds buttons, forms, and real-time interactions</td></tr><tr><td><strong>Example</strong></td><td><code><h1>Heading</h1></code></td><td><code>h1 { color: red; }</code></td><td><code>document.write("Hello!");</code></td></tr></tbody></table></figure>



<p>🔹 <strong>Simple Example</strong>:</p>



<pre class="wp-block-code"><code><!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>
</code></pre>



<p>✅ <strong>HTML</strong> creates the heading and button.<br>✅ <strong>CSS</strong> makes the heading blue.<br>✅ <strong>JavaScript</strong> makes the button show an alert when clicked.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><strong>2. Explain the process of setting up a development environment for web development.</strong></h3>



<p>To start <strong>web development</strong>, you need some basic <strong>software and tools</strong>:</p>



<h4 class="wp-block-heading"><strong>1. Text Editor (for writing code)</strong></h4>



<ul class="wp-block-list">
<li><strong>Notepad++</strong> (Simple and easy)</li>



<li><strong>VS Code</strong> (Popular among developers)</li>
</ul><!-- Ezoic - wp_incontent_14 - incontent_14 --><div id="ezoic-pub-ad-placeholder-142" data-inserter-version="2" data-placement-location="incontent_14"></div><script data-ezoic="1" data-no-optimize="1" data-no-defer="1">ezstandalone.cmd.push(function () { ezstandalone.showAds(142); });</script><!-- End Ezoic - wp_incontent_14 - incontent_14 -->



<h4 class="wp-block-heading"><strong>2. Web Browser (for testing webpages)</strong></h4>



<ul class="wp-block-list">
<li><strong>Google Chrome</strong> (Best for development)</li>



<li><strong>Mozilla Firefox</strong></li>
</ul>



<h4 class="wp-block-heading"><strong>3. Local Web Server (for testing advanced web pages)</strong></h4>



<ul class="wp-block-list">
<li><strong>XAMPP</strong> (For PHP and databases)</li>
</ul>



<h4 class="wp-block-heading"><strong>4. Steps to Set Up</strong></h4>



<ol class="wp-block-list">
<li>Install <strong>VS Code</strong> and a web browser.</li>



<li>Open <strong>VS Code</strong> and create an <code>index.html</code> file.</li>



<li>Write a basic <strong>HTML</strong> page and save it.</li>



<li>Open the file in a web browser to see your webpage.</li>
</ol>



<p>💡 <strong>Tip:</strong> Always save your file with <code>.html</code> extension before testing.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><strong>3. Create a basic HTML page that includes a header, a paragraph, an image, and a hyperlink.</strong></h3>



<p>✅ <strong>Code for a simple webpage:</strong></p>



<pre class="wp-block-code"><code><!DOCTYPE html>
<html>
<head>
    <title>My First Webpage


    Welcome to My Website
    This is my first webpage. I am learning HTML!
    
    

    Click here to visit Google






💡 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






    


    Student Marks
    
        
            Name
            Marks
        
        
            Ali
            85
        
        
            Sara
            90
        
    






💡 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  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:






    


    






🔹 Explanation:




The onclick event runs the changeColor() 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! 🚀



	
	Tags: Chapter 8 Web Development Class 9th Computer Science Class 9th IT computer science solutions Federal Board HTML CSS Basics HTML CSS JavaScript new syllabus 2024 solved exercise Web Development Notes

One Reply to “Chapter 8: Web Development with HTML, CSS, and JavaScript – Solved Exercise”

trading platform
January 21, 2026 at 4:55 pm


Thanks for the good writeup. It if truth be told was once a leisure account it.
Look complicated to far added agreeable from
you! However, how can we be in contact?

Chapter 8: Web Development with HTML, CSS, and JavaScript – Solved Exercise

Solved Multiple Choice Questions with Explanations & Tips

1. Which of the following tag is not a correct HTML tag?

Welcome to My Website

4. How do you style a table using CSS? Create a sample table and apply styles to it.

Student Marks

5. Describe the different CSS selectors and provide examples of each.

6. Explain the process of creating a responsive web page using CSS.

7. Write a JavaScript function that changes the background color of a web page when a button is clicked.

8. How do you add animations and transitions using CSS?

One Reply to “Chapter 8: Web Development with HTML, CSS, and JavaScript – Solved Exercise”

Leave a Reply Cancel reply

Useful Links

Subscribe Now