Class 9 Computer Science Notes Chapter 8

Chapter 8: Web Development with HTML, CSS and JavaScript

Exercise Solution

PART I: MULTIPLE-CHOICE QUESTIONS (MCQs)

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

(a) The source options are missing or corrupted in the provided text.
(b) The source options are missing or corrupted in the provided text.
(c) The source options are missing or corrupted in the provided text.
(d) The source options are missing or corrupted in the provided text.

Correct Answer: The provided source states that all listed tags are valid HTML tags, but the actual tag names are missing or corrupted in the text.

Q2. What does CSS stand for?

(a) Cascading Style Sheets
(b) Computer Style Sheets
(c) Creative Style Sheets
(d) Colorful Style Sheets

Correct Answer: (a) Cascading Style Sheets

Q3. Which of the following tags is used to create a hyperlink in HTML?

(a) The tag options are missing or corrupted in the provided text.
(b) The tag options are missing or corrupted in the provided text.
(c) The tag options are missing or corrupted in the provided text.
(d) The tag options are missing or corrupted in the provided text.

Correct Answer: (b) <a>

Q4. Which property is used to change the background color in CSS?

(a) color
(b) background-color
(c) bgcolor
(d) background

Correct Answer: (b) background-color

Q5. Which HTML attribute is used to define inline styles?

(a) class
(b) style
(c) font
(d) styles

Correct Answer: (b) style

Q6. 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;}

Correct Answer: (a) selector {property: value;}

Q7. In JavaScript, which markup is used for comments?

(a) /***/
(b) //
(c) The option is missing or corrupted in the provided text.
(d) /**/

Correct Answer: (b) // (for single-line comments)

Q8. How do you include JavaScript in an HTML document?

Correct Answer: (a) <script>

Q9. Which HTML tag is used to create an unordered list?

Correct Answer: (b) <ul>

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

Correct Answer: (b) <hr>

PART II: SHORT QUESTIONS

Q1. What is the purpose of the <head> tag in HTML?

Answer: The <head> tag acts as a container for metadata, the page title, links to stylesheets using the <link> tag, and scripts using the <script> tag.

Q2–Q5. The questions and answers for these numbers are not included in the provided source text.

Q6. Describe the syntax for creating a hyperlink in HTML.

Answer: Hyperlinks are created using the anchor tag <a> with the href attribute specifying the target URL.

Syntax:

<a href="https://www.example.com">Visit Example</a>

Q7. What is the function of the <div> tag in HTML?

Answer: The <div> tag is a block-level container used to group other HTML elements together for styling with CSS or manipulation with JavaScript.

Q8. How do you link an external CSS file to an HTML document?

Answer: An external CSS file is linked by placing a <link> tag inside the <head> section of the HTML document.

Syntax:

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

Q9. What is the use of the <table> tag in HTML?

Answer: The <table> tag is used to structure and display tabular data in rows (<tr>) and columns using table header cells (<th>) or table data cells (<td>).

Q10. Explain the box model in CSS.

Answer: The CSS box model describes how every HTML element is rendered as a rectangular box comprising four main layers:

Content: Text or images inside the element.
Padding: Space around the content inside the border.
Border: The outer edge surrounding the padding.
Margin: Outer space separating the element from others.

PART III: LONG QUESTIONS

Q1. Discuss the fundamental differences between HTML, CSS, and JavaScript in the context of web development.

Answer:

HTML (HyperText Markup Language): Provides the foundational structure, content, and semantic layout of a web page. It acts as the skeleton of the page.
CSS (Cascading Style Sheets): Controls the visual presentation, styling, colors, fonts, and responsive layout of elements. It acts like the skin and clothing of a page.
JavaScript: Adds dynamic behavior, user interaction, logic, data processing, and asynchronous updates. It acts like the nervous system and muscles of a page.

Q2. Explain the process of setting up a development environment for web development by discussing the necessary software and tools.

Answer:

Code Editor: Install a modern code editor such as Visual Studio Code (VS Code), Sublime Text, or WebStorm to write HTML, CSS, and JavaScript.
Web Browser: Install modern browsers such as Google Chrome, Mozilla Firefox, or Microsoft Edge. These browsers include Developer Tools (F12) for debugging and testing layouts.
Extensions: Use helpful VS Code extensions such as Live Server to automatically refresh web pages during local development.

Q3. Create a basic HTML page that includes a header, a paragraph, an image, and a hyperlink.

Answer:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>

    <p>This is a paragraph introducing web development concepts.</p>

    <img src="sample.jpg" alt="Sample Image">

    <a href="https://www.example.com">
        Click here to visit our partner site
    </a>
</body>
</html>

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

Answer: Tables can be styled using CSS properties for borders, background colors, padding, and text alignment.

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styled Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Subject</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ali</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Sara</td>
            <td>Mathematics</td>
        </tr>
    </table>
</body>
</html>

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

Answer:

Element/Tag Selector: Targets elements by tag name.
Example:
```
p {
    color: blue;
}
```
Class Selector: Targets elements sharing a specific class attribute, prefixed with a period (.).
Example:
```
.highlight {
    background-color: yellow;
}
```
ID Selector: Targets a single unique element with a specific ID attribute, prefixed with a hash (#).
Example:
```
#main-header {
    font-size: 24px;
}
```
Descendant Selector: Targets elements nested inside another element.
Example:
```
div p {
    color: green;
}
```

Q6. Explain the process of creating a responsive web page using CSS with the help of examples and explanations.

Answer: Responsive web design ensures that web pages render well across various screen sizes, including mobile phones, tablets, and desktops. It uses fluid grid layouts, flexible images, and CSS media queries.

Example:

/* Default desktop style */
body {
    font-size: 16px;
    background-color: white;
}

/* Media query for screens smaller than 600px wide */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: #f0f0f0;
    }
}

Explanation: The default styles apply to the page, while the media query changes the font size and background color when the screen width is 600 pixels or less.

Q7. Write a JavaScript function that changes the background color of a web page when a button is clicked. Provide the complete code and explain how it works.

Answer:

HTML and JavaScript Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Background Color</title>
</head>
<body>
    <button onclick="changeColor()">Change Background Color</button>

    <script>
        function changeColor() {
            document.body.style.backgroundColor = "lightblue";
        }
    </script>
</body>
</html>

Explanation: When the button is clicked, its onclick event triggers the JavaScript function changeColor(). The function accesses the document’s body object and modifies its style.backgroundColor property to "lightblue".

Q8. How do you add animations and transitions using CSS? Provide examples and explain the properties involved.

Answer:

Transitions: Transitions allow property changes to occur smoothly over a specified duration rather than instantly.

Important properties include:

transition-property
transition-duration
transition-timing-function

Example:

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: green;
}

Animations: Animations enable complex, multi-step changes using keyframes defined with @keyframes.

Important properties include:

animation-name
animation-duration
animation-iteration-count

Example:

@keyframes slideIn {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(0);
    }
}

div {
    animation: slideIn 2s infinite;
}

Explanation: The transition example smoothly changes a button’s background color when the pointer moves over it. The animation example moves a div from 100 pixels to the left of its starting position to its normal position over two seconds and repeats the animation indefinitely.

Notes by Sir Dilawar

For more notes, visit QuranEducationPoint.com