Scribd
Upload
30 views15 pages

Class 9 CS CH 3

The document provides a comprehensive overview of programming fundamentals for 9th-grade computer science students, covering key concepts such as the difference between websites and web applications, HTML tags, CSS, and JavaScript functionalities. It includes short response questions (SRQs) and extended response questions (ERQs) with detailed answers and code examples for practical understanding. Topics discussed include the Document Object Model (DOM), CSS incorporation methods, event handling in JavaScript, and techniques for embedding media in web pages.

Uploaded by

jaiselhussain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views15 pages

Class 9 CS CH 3

The document provides a comprehensive overview of programming fundamentals for 9th-grade computer science students, covering key concepts such as the difference between websites and web applications, HTML tags, CSS, and JavaScript functionalities. It includes short response questions (SRQs) and extended response questions (ERQs) with detailed answers and code examples for practical understanding. Topics discussed include the Document Object Model (DOM), CSS incorporation methods, event handling in JavaScript, and techniques for embedding media in web pages.

Uploaded by

jaiselhussain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Class:9th Unit 3: Programming Fundamentals Subject: Computer Science

Give short answers to the following short response questions (SRQs).


Q.1) Contrast between website and web application.
Ans: A document which exists and is accessible through the internet is a webpage, while a set of
webpages is termed a Website.
On the other hand, a computer program which offers a service or executes tasks via a browser and
internet connection, remotely accessing a server, is called a web application.
Q.2) What is ‘href refer to and how to use it?
Ans: The href attribute in HTML stands for “Hypertext Reference” and specifies the destination of a
hyperlink. The general syntax for defining a link is like “link text”, where href refers to the address
along with the path and link-text is for user information. It is used with anchor <a> tag e.g.

<a href="https:www.fbise.edu.pk">fbise</a>

Q.3) Enlist the optional parameters to open a webpage.


Here are the common optional parameters for the target attribute:
i. _self’: Opens the linked document in the same window/tab (default behaviour).
ii. _blank’: Opens the linked document in a new window/tab.
iii. ‘_parent’: Opens the linked document in the parent frame.
iv. ‘_top’: Opens the linked document in the full body of the window.
v. Custom frame name: Opens the linked document in the specified frame.
Q.4) List out the frequent tags used in the text of a webpage and what they are used for.
Ans: Frequent tags used in the text of a webpage include:
1. <h1> to <h6>: Headings, with <h1> as the highest level.
2. <p>: Paragraphs.
3. <b>: To make characters bold
4. <i>: Text is shown in italics
5. <u>: Underline a text
6. <a>: Hyperlinks.
7. <br>: Line breaks.
8. <ul>: Unordered lists.
9. <ol>: Ordered lists.
10. <li>: List items.
Q.5) Explain the role of tag-pair in a document.

1
Ans: Tag-pairs in an HTML document define the start and end of an element. The opening tag (e.g.,
<p>) marks the beginning, and the closing tag (e.g., </p>) marks the end. This structure ensures that
browsers properly understand the content.
Q.6) How the event-based code is used in JavaScript?
Ans: Event-based code in JavaScript allows you to create interactive, dynamic web pages by
responding to user actions and other events. By attaching event listeners to DOM (Document Object
Model) elements, you can define how your application should react when specific events occur,
enhancing user experience and functionality.
Q.7) Infer about the External CSS? Where are External CSS generally used?
Ans: External CSS (Cascading Style Sheets) refers to a method of styling web pages where the CSS code
is written in a separate file with a CSS extension and linked to HTML documents using the <link> tag.
Usage of External CSS:
Multiple Pages: External CSS is commonly used when styling multiple HTML pages. Instead of
repeating CSS code in every HTML file, it’s centralized in one external CSS file.
Ease of Maintenance: It makes updating styles across multiple pages easier. A single change in the
external CSS file affects all linked HTML pages.
Faster Loading: External CSS files can be cached by the browser, potentially leading to faster page
loading times for subsequent visits to the website.
Give Long answers to the following Extended Response Questions (ERQs).
Q.1) What is the Document Object Model? Explain with the help of an example.
Ans: The Document Object Model (DOM) is a standard that provides mutual interpretation. It allows
the grammar of a language to be associated with and coexist on various operating systems. In HTML,
every file is interpreted as a DOM tree, where the hierarchy of the file is defined. A tree consists of
nodes and links, so every object and component of HTML is treated as a node.
Example:
Here’s an explanation with an example:
Consider the following simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Welcome to DOM Example</h1>

2
<p id=”demo”>This is a paragraph.</p>
<button onclick=”changeText()”>Click me</button>
<script>
function changeText() {
document.getElementById(“demo”).innerHTML = “Paragraph changed!”;
}
</script>
</body>
</html>
In this example, the DOM is used to dynamically update the content of the webpage in response to
user interaction. This demonstrates the core concept of the DOM: providing a structured
representation of the document that can be accessed and manipulated using scripting languages like
JavaScript.
Q.2) Write code to differentiate between different types of headings in HTML.
Ans: Here’s an example code in HTML that demonstrates the use of different heading levels:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1 > This is a level 1 heading </h1>
<h2> This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4> This is a level 4 heading</h4>
<h5> This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
</body>
</html>
In this example:
<h1> represents the highest level of heading and is typically used for main headings or page titles.
<h2> represents a level 2 heading and is used for subheadings under the main headings.
Similarly, <h3>, <h4>, <h5>, and <h6> represent lower levels of headings, each decreasing in
importance.

3
By using different heading levels, you can create a structured hierarchy of content on your webpage,
which is important for accessibility and search engine optimization.
Q.3) Elaborate steps and provide code to load a background image in a webpage.
Ans: Loading a background image on a webpage involves a few simple steps. Below is a step-by-step
guide along with the corresponding HTML and CSS code.
Step 1: Choose an Image:
First, you need to choose the image you want to use as the background. Make sure the image is
appropriate for your webpage and consider its size and aspect ratio for optimal display.
Step 2: Save the Image:
Save the chosen image file in an appropriate format (e.g., JPEG, PNG) and note its file path or URL.
Step 3: Create HTML Structure:
Create the basic HTML structure for your webpage. This typically includes a ‹head> section for
metadata and a <body> section for the content.
Step 4: Define CSS for Background Image:
Use CSS to set the background image for the webpage. You can apply the background image to the
entire page or to specific elements, depending on your design requirements.
HTML Code:
<IDOCTYPE html>
<html>
<head>
<title> Background Image Example</title>
<link rel=”stylesheet” href=”styles.css”>
<!– Link your CSS file ->
</head>
<body>
<– Your webpage content goes here ->
</body>
</html>
CSS Code (styles.css):
CSS
body {
background-image: url(‘path/to/your/image.jpg’); /* Specify the path to your image */
background-size: cover; /* Cover the entire background */
background-position: center; /* Center the background image */ /*

4
Additional background properties if needed */
}
In the CSS code:
background-image sets the background image for the webpage.
background-size specifies how the background image should be sized. The cover value ensures the
image covers the entire background.
background position centers the background image within the viewport.
Replace “path/to/your/image.jpg” with the actual path or URL of the background image.
With these steps and code, you should be able to successfully load a background image in your
webpage.

Q.4) With the help of sample code, highlight different methods to incorporate CSS code in an HTML
webpage.
Ans: CSS (Cascading Style Sheets) can be incorporated into an HTML webpage in several ways. Below
are the primary methods to include CSS in an HTML document, along with sample code for each.
1. Inline CSS
Inline CSS is applied directly to individual HTML elements using the style attribute.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style=”color: blue; text-align: center;”>This is an Inline CSS Example</h1>
<p style=”font-size: 18px; color: green;”>This paragraph is styled using inline CSS.</p>
</body>
</html>
2. Internal CSS
Internal CSS is defined within a <style> element inside the <head> section of the HTML document. This
method is suitable when you want to style a single page separately from the rest of your site.
<!DOCTYPE html>

5
<html lang=”en”>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: blue;
text-align: center; }
p{
font-size: 18px;
color: green; }
</style>
</head>
<body>
<h1>This is an Internal CSS Example</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
3. External CSS
External CSS involves linking an external .css file to the HTML document using the <link> element. This
method is preferred for larger projects where styles are shared across multiple pages, promoting
maintainability and reusability.
Example:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is an External CSS Example</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>

6
Q.5) Sketch steps and provide code to apply border and color to a table in a webpage.
Ans: Here are the steps along with the corresponding HTML and CSS code to apply a border and color
to a table in a webpage:
Step 1:Create HTML Table Structure
First, create the HTML structure for your table. This involves using the <table>, <tr> (table row), <th>
(table header), and <td> (table data) elements to define the rows and columns of the table.
Step 2: Add Content to the Table
Populate the table with content by adding data within the <th> and <td> elements.
Step 3: Apply CSS for Styling
Define CSS rules to style the table, including setting the border and color properties.
HTML Code:
html
< DOCTYPE html>
<html>
<head>
<title> Styled Table Example</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td> Data 3</td>
</tr>
<tr>
<td> Data 4</td>
<td> Data 5</td>
<td>Data 6</td>

7
</tr>
</table>
</body>
</html>
CSS Code (styles.css):
CSS
table {
border-collapse: collapse; /* Collapse the borders between cells */
width: 100%; /* Make the table width 100% of its container */
}
th, td {
border: 1px solid #ddd; /* Apply a 1px solid border with color #ddd to table cells */
padding: 8px; /* Add padding inside table cells */
text-align: left; /* Align text to the left within table cells */
}
Th {
background-color: #f2f2f2; /* Set background color for table headers */
}
Q.6) Discuss the functionality JavaScript can provide in a webpage with the help of a suitable
example code.
Ans: JavaScript provides a wide range of functionalities to enhance the interactivity and dynamism of
web pages. Here, we’ll discuss some key functionalities with the help of an example code.
i) Event Handling:
JavaScript allows you to respond to user actions, such as clicks, mouse movements, key presses, etc.
This enables interactive features on web pages.
Example Code:
html
<!DOCTYPE html>
<html>
<head>
<title>Event Handling Example</title>
<style>
button
padding: 10px 20px;

8
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button id=”myButton”>Click Me</button>
< script>
document.getElementById(“myButton”). addEventListener(“click”,function()
{ alert(“Button clicked!”);

})；
</script>
</body>
</html>
In this example, a button element is created, and JavaScript is used to add an event listener to it.
When the button is clicked, an alert message saying “Button clicked!” is displayed.
ii) DOM Manipulation:
JavaScript can dynamically update the content, structure, and style of web pages by manipulating the
Document Object Model (DOM).
Example Code:
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<p id=”demo”> This is a paragraph. </p>
<button onclick=”changeText)”>Change Text</button>
<script>
function changeText ( )
{ document.getElementById(“demo”).innerHTML = “Text changed!”;

｝
</script>
</body>
</html>

9
In this example, clicking the button triggers a JavaScript function that updates the content of a
paragraph element with the id “demo” to “Text changed!”.
iii. Form Validation:
JavaScript can validate user input in forms to ensure that it meets specific criteria before submitting it
to the server.
Example Code:
<html>
<head>
<title>Form Validation Example</title>
<script>
function validateForm() {
var name = document.forms [“myForm”][” name”].value;
if (name == “ ”){
alert(“Name must be filled out”);
return false;
}
}
</script>
</head>
<body>
<form name=”myForm” onsubmit=”return validateForm( )”>
Name: <input type=”text” name=”name”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
In this example, JavaScript is used to validate that the “Name” field in a form is not empty before
submitting the form. If the field is empty, an alert message is displayed, and the form submission is
prevented.
These examples demonstrate just a few of the many functionalities that JavaScript can provide in a
webpage, making it more interactive, dynamic, and user-friendly.

Q.7) Articulate steps and write code to create a scrolling text on a webpage.
Ans: Creating scrolling text on a webpage can be achieved using CSS animations

10
CSS Animation:
Step i:
Create HTML Structure:
<html>
<head>
<title>Scrolling Text with CSS Animation</title> <link rel=”stylesheet” href-“styles.css”>
</head>
<body>
<div class=”scrolling-text-container”>
<div class=”scrolling-text”>
This is a scrolling text example created with CSS animation. </div>
</div>
</body>
</html>
Step ii:
CSS
Define CSS Animation:
/* styles.css */
@keyframes scroll {
0%
transform: translate(100%);
}
100% {
transform: translate(-100%);
}
}
.scrolling-text-container
{ width: 100%;
overflow: hidden;
}
.scrolling-text {
white-space: nowrap;
animation: scroll 10s linear infinite; /* Adjust animation duration and timing as needed */
}

11
Q.8) Enlist steps to add a video clip in a website which starts playing as the web page loads.
Ans: Embedding a video clip in a website that starts playing as the web page loads involves a few
steps. Below, we’ll outline the process in detail:
i. Choose a Video:
First, select the video clip you want to embed on your website. Ensure that the video is in a format
that is widely supported by web browsers, such as MP4, WebM.
ii. Optimize the Video:
To ensure faster loading times, optimize your video for the web. This involves compressing the video
file without significantly reducing its quality.
iii. Upload the Video File:
Once your video is optimized, upload it to your web server or a reliable video nosting service. Make
sure you have the necessary permissions to use the video on your website, especially if it’s not your
own content.
iv. Prepare HTML Markup:
Now, you need to prepare the HTML markup to embed the video in your web page. You can use the
HTML <video> element for this purpose.
html
<video autoplay muted loop>
<source src=”your_video_file.mp4″ type=”video/mp4″>
</video>
* The autoplay attribute ensures that the video starts playing automatically when the page loads.
* The ‘muted attribute ensures that the video plays without sound, as auto playing videos with sound
can be disturbing and annoying for users.
v. Style the Video:
You can style the video element using CSS to control its appearance, size, and positioning on the web
page.
CSS
video {
width: 100%; /* Adjust width as needed */
height: auto; / Maintain aspect ratio */
}
vi. Test and Debug:
After adding the video to your web page, test it across different web browsers and devices to ensure it
works as expected. Check for any issues such as playback errors or layout problems.

12
Q.9) Cite steps for compiling the result of your last examination in a tabular form and display it on a
webpage.
Ans. Following are the steps for compiling examination results into a tabular form and displaying it on
a webpage:
i. Prepare the Data:
Gather all the necessary data for the examination results. This typically includes student names, IDs,
and their corresponding scores or grades for each subject.
ii. Organize the Data:
Arrange the data in a structured format. You might organize it in a spreadsheet program like Microsoft
Excel or Google Sheets, with each row representing a student and each column representing a piece of
information (e.g., name, ID, scores for different subjects).
iii. Export the Data:
Once your data is organized, export it from the spreadsheet program into a format that can be easily
imported into your web development environment.
iv. Create an HTML File:
Start by creating a new HTML file where you’ll display the examination results. You can do this using a
text editor like Notepad (Windows), TextEdit (Mac), or any code editor of your choice.
v. Write HTML Markup:
Within your HTML file, write the necessary HTML markup to create a table structure. Use the <table>,
<tr>, <th>, and <td> tags to define the table, rows, header cells, and data cells, respectively.
html
<html>
<head>
</head>
<body>
<h1>Examination Results</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Student ID</th>
<th> Subject 1</th>
<th> Subject 2</th>
<– Add more columns for additional subjects if needed ->

13
</tr>
</thead>
<tbody>
<|– Datà rows will be dynamically generated ->
</tbody>
</table>
</body>
</html>
vi. Import Data:
Embed JavaScript within your HTML file to import the examination results data. You can use AJAX to
fetch data from a CSV or JSON file and dynamically populate the table with the results
vii. Generate Table Rows Dynamically:
Write JavaScript code to iterate over the examination results data and generate table rows
dynamically.
viii. Style the Table:
Apply CSS styles to the table to enhance its appearance and improve readability. You can use CSS to
set font styles, colors, borders, and spacing.
ix. Test and Debug:
Test the webpage across different browsers and devices to ensure that the examination results table
displays correctly and is accessible to all users.
x. Publish the web page:
Once you’re satisfied with the results, upload your HTML file along with any associated CSS and
JavaScript files to a web server to make it accessible online.

Q.10) In the context of Fig. 40(d), add another button namely ‘Revert’ which when is pressed, it will
reverse both the color and index values.
Ans. To add another button named ‘Revert’ which reverses both the color and index values when
pressed, you can follow these steps:
i. Define a new function revert Order() to handle the reverting of the order and color.
ii. Add the new button to the HTML that calls this function when pressed
Here’s the modified code including the new ‘Revert’ button:
<html>
<body>
<script type=”text/javascript”>

14
var index;
document.write(“For-Loop Starts After This … <br />”);
for(index = 0; index <10; index = index + 1)
{ document.write(“Index No. :”, index, “<br />”);
}
document.write(“For-Loop Stopped!”);
function descOrder(){
document.body.style.backgroundColor = “peachpuff”;
document.write(“<br /> Index printed in Descending Order: <br />”);
for (index = 10; index > 0; index = index – 1){
document. write(“Index No. :”, index, “<br />”);
}
}
function revertOrder()
{ document.body.style.backgroundColor = “white”;
document.write(“<br />Index printed in Ascending Order: <br />”);
for(index = 0; index < 10; index = index + 1)
{ document.write(“Index No. :”, index, “<br/>”);
}
}
</script>
<p id=”dynamicContent”>Click the button to change the output to Descending Order. </p>.
<button onclick=”descOrder”>Descending Order</button>
<button onclick=”revertOrder()”>Revert</button>
</body>
</html>
Explanation of the changes:
i. The revertOrder() function is defined to reset the background colour to white and print the index
numbers in ascending order.
ii. A new button with the text “Revert” is added which calls the revertOrder) function when clicked.
Now, when you press the ‘Revert’ button, it will change the background color back to white and print
the index numbers in ascending order, effectively reversing the changes made by the ‘Descending
Order’ button.

15

You might also like