Class 9 Computer Science – Chapter 3: Programming Fundamentals

Board: Federal Board (FBISE)

Section I: Multiple-Choice Questions (MCQs)

1. Everything in HTML is identified on the basis of ______.

a) Brackets
b) Title
c) Tags
d) Image

Correct Answer: c) Tags

2. The output of HTML code is visible in ______.

a) Notepad
b) File
c) Browser
d) Spreadsheet

Correct Answer: c) Browser

3. The name of a web page can be given using the ______ tag.

a) Body
b) Title
c) Head
d) Footer

Correct Answer: b) Title

4. The main parts of a document are arranged in the ______ tag.

a) Head
b) Title
c) Body
d) Line Break

Correct Answer: c) Body

5. The heading tag pair for a fifth-level heading is ______.

a) <h5 .. h5>
b) <h5 .. /h5>
c) h5> .. </h5
d) <h5> .. </h5>

Correct Answer: d) <h5> .. </h5>

6. Span is used to provide ______ to a line.

a) Font
b) Border
c) Style
d) Color

Correct Answer: c) Style

7. The first row of a table in HTML is called the ______.

a) Title Row
b) Top Row
c) Header Row
d) Upper Row

Correct Answer: c) Header Row

8. The <p> tag pair is used for ______.

a) Print
b) Page Align
c) Page Break
d) Paragraph

Correct Answer: d) Paragraph

9. A variable cannot start with a ______.

a) Alphabet
b) Number
c) Character
d) String

Correct Answer: b) Number

10. The first value assigned to a variable after declaration is called ______.

a) Beginning Value
b) Starting Value
c) Initialization
d) Substitution

Correct Answer: c) Initialization

Section II: Short Response Questions (SRQs)

1. Contrast between a website and a web application.

A website primarily delivers static content for users to view and read without complex user interactions. A web application is an interactive software program that allows users to perform tasks, manipulate data, and receive dynamic responses.

Websites mainly focus on displaying information, whereas web applications focus on user participation and workflow processing.

2. What does ‘href’ refer to, and how is it used?

The href (Hypertext Reference) attribute defines the destination URL or file path for a hyperlink. It is used inside the HTML anchor tag <a> to connect web pages.

Example:

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

This code creates a clickable link to the specified web address.

3. Enlist the optional parameters to open a webpage.

Optional parameters in link target attributes and JavaScript window.open() include:

• Target: _blank, _self

• Window dimensions: Width and height

• Display features: Toolbar, location, and resizable

These parameters control where and how the target document opens and customize navigation behavior across windows or browser tabs.

4. List the frequently used tags in the text of a webpage and explain their uses.

Common HTML text tags include:

• <p>: Defines paragraphs.

• <br>: Creates line breaks.

• <b> or <strong>: Makes text bold.

• <i> or <em>: Makes text italic for emphasis.

• <h1> to <h6>: Define headings according to their hierarchical importance.

5. Explain the role of the <body> tag pair in a document.

The <body>...</body> tag pair encloses all the visible content of an HTML web document. It contains elements such as headings, paragraphs, images, tables, hyperlinks, and embedded multimedia. Browsers display the content within this section on the screen.

6. How is event-based code used in JavaScript?

Event-based code in JavaScript executes functions automatically in response to user actions or system events. It uses event listeners or inline event handlers, such as onclick and onmouseover, on HTML elements.

When a specified event occurs, the associated script executes and can update the webpage dynamically.

7. Explain External CSS. Where is External CSS generally used?

External CSS stores style declarations in a separate .css file linked to HTML documents using the <link> tag.

It is generally used in multi-page websites to maintain visual consistency and centralize website design. Modifying a single external stylesheet can update the appearance of all connected web pages.

Section III: Extended Response Questions (ERQs)

Q1. What is the Document Object Model? Explain with the help of an example.

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a webpage as a logical tree, where every element, attribute, and text section is treated as an object (node) that scripts can modify dynamically.

Key Features:

• It enables programming languages such as JavaScript to read, add, modify, or delete HTML elements and attributes.

• It organizes elements hierarchically, starting from the root document node and continuing through elements such as <html>, <body>, and individual paragraph tags.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h2 id="heading">Original Text</h2>
    <button onclick="changeText()">Click to Change</button>

    <script>
        function changeText() {
            // Using DOM to target and modify the heading element
            document.getElementById("heading").innerText = "Text Updated via DOM!";
        }
    </script>
</body>
</html>

Q2. Write code to differentiate between different types of headings in HTML.

HTML provides six levels of headings, ranging from <h1> (the most important and largest heading) to <h6> (the least important and smallest heading).

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Headings Demo</title>
</head>
<body>
    <h1>Heading Level 1 - Main Title (Largest)</h1>
    <h2>Heading Level 2 - Section Heading</h2>
    <h3>Heading Level 3 - Sub-section Heading</h3>
    <h4>Heading Level 4 - Sub-sub-section Heading</h4>
    <h5>Heading Level 5 - Minor Heading</h5>
    <h6>Heading Level 6 - Smallest Heading</h6>
</body>
</html>

Q3. Explain the steps and provide code to load a background image on a webpage.

Steps:

1. Save the desired background image in your website project directory, for example, background.jpg.

2. Use CSS to apply the background image through the background-image property, targeting the body tag.

3. Add properties such as background-size: cover; and background-repeat: no-repeat; to ensure proper fitting across different screen resolutions.

HTML and CSS Code:

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Example</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <h1 style="color: white;">Webpage with Background Image</h1>
</body>
</html>

Q4. With the help of sample code, explain different methods of incorporating CSS code into an HTML webpage.

There are three ways to apply CSS rules in HTML:

1. Inline CSS: Applied directly using the style attribute inside individual HTML tags.

2. Internal (Embedded) CSS: Written inside a <style> block within the <head> section.

3. External CSS: Written in a separate file, such as styles.css, and linked using the <link> tag.

Sample Code:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Methods Example</title>

    <!-- Method 1: External CSS Link -->
    <link rel="stylesheet" href="styles.css">

    <!-- Method 2: Internal CSS -->
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!-- Method 3: Inline CSS -->
    <h1 style="color: red; text-align: center;">
        Inline Styled Heading
    </h1>

    <p>This paragraph is styled using Internal CSS.</p>
</body>
</html>

Q5. Explain the steps and provide code to apply borders and colors to a table on a webpage.

Steps:

1. Define the HTML table structure using <table>, <tr>, <th>, and <td> tags.

2. Use the CSS border property on table, th, and td elements to define border size, style, and color.

3. Use border-collapse: collapse; to merge double borders into a single border line.

4. Add background-color to header cells (th) or table cells (td) to apply colors.

HTML and CSS Code:

<!DOCTYPE html>
<html>
<head>
    <title>Styled HTML Table</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            border: 2px solid navy;
        }

        th {
            background-color: navy;
            color: white;
            border: 1px solid navy;
            padding: 8px;
        }

        td {
            border: 1px solid blue;
            background-color: #f2f2f2;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Marks</th>
        </tr>
        <tr>
            <td>101</td>
            <td>Ali</td>
            <td>95</td>
        </tr>
    </table>
</body>
</html>

Q6. Discuss the functionality JavaScript can provide in a webpage with the help of suitable example code.

Functionality:

JavaScript adds interactivity, logic, dynamic content rendering, form validation, and event handling to static HTML/CSS webpages.

Example Code (Interactive Counter):

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Functionality Demo</title>
</head>
<body>
    <h2>Counter Application</h2>
    <p>Current Count: <span id="count">0</span></p>
    <button onclick="increment()">Increase</button>

    <script>
        let counter = 0;

        function increment() {
            counter++;
            document.getElementById("count").innerText = counter;
        }
    </script>
</body>
</html>

Q7. Explain the steps and write code to create scrolling text on a webpage.

Steps:

1. Use the <marquee> tag (the classic HTML approach) or modern CSS animations using @keyframes.

2. Set movement properties such as direction, scrolling speed, or animation timing.

Code (Using Modern CSS Animations):

<!DOCTYPE html>
<html>
<head>
    <title>Scrolling Text</title>
    <style>
        .scroll-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            background-color: #333;
            color: yellow;
            padding: 10px 0;
        }

        .scrolling-text {
            display: inline-block;
            animation: scroll 10s linear infinite;
        }

        @keyframes scroll {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scrolling-text">
            Welcome to Computer Science Class 9 - Unit 3!
        </div>
    </div>
</body>
</html>

Q8. Enlist the steps to add a video clip to a website that starts playing as the webpage loads.

Steps:

1. Store your video file, for example, video.mp4, in your website folder.

2. Insert the HTML5 <video> tag into the webpage.

3. Add the autoplay attribute to start playback automatically when the page loads.

4. Add the muted attribute because browsers generally require videos to be muted for autoplay to work.

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Autoplay Video</title>
</head>
<body>
    <video width="640" height="360" autoplay muted controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Q9. Explain the steps to compile the results of your last examination in tabular form and display them on a webpage.

Steps:

1. Organize the subject marks data, including subject name, total marks, and obtained marks.

2. Construct an HTML table using <table>, <tr>, <th>, and <td> tags.

3. Add header row elements for titles and data rows for each subject’s scores.

4. Calculate and add a summary row displaying total marks and percentage.

HTML and CSS Code:

<!DOCTYPE html>
<html>
<head>
    <title>Examination Results</title>
    <style>
        table {
            border-collapse: collapse;
            width: 60%;
            margin: 20px auto;
        }

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

        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">Final Examination Results</h2>

    <table>
        <tr>
            <th>Subject</th>
            <th>Total Marks</th>
            <th>Obtained Marks</th>
        </tr>
        <tr>
            <td>Computer Science</td>
            <td>75</td>
            <td>70</td>
        </tr>
        <tr>
            <td>Mathematics</td>
            <td>75</td>
            <td>68</td>
        </tr>
        <tr>
            <td>Physics</td>
            <td>75</td>
            <td>65</td>
        </tr>
        <tr style="font-weight: bold;">
            <td>Total</td>
            <td>225</td>
            <td>203</td>
        </tr>
    </table>
</body>
</html>

Q10. In the context of Fig. 40(d), add another button named ‘Revert’ which, when pressed, reverses both the color and index values.

Logic and Code Solution:

Assuming an index and color toggling system, the Revert button triggers a JavaScript function that changes the background color back and decreases the current index value.

HTML, CSS, and JavaScript Code:

<!DOCTYPE html>
<html>
<head>
    <title>Toggle and Revert State</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div id="displayBox" class="box">Index: 0</div><br>

    <button onclick="applyChange()">Apply Change</button>
    <button onclick="revertChange()">Revert</button>

    <script>
        let index = 0;
        const box = document.getElementById("displayBox");

        function applyChange() {
            index++;
            box.style.backgroundColor = "lightgreen";
            box.innerText = "Index: " + index;
        }

        function revertChange() {
            index--;
            box.style.backgroundColor = "lightblue";
            box.innerText = "Index: " + index;
        }
    </script>

</body>
</html>

Notes by Sir Dilawar

For more notes, visit QuranEducationPoint.com