Scribd
Upload
5 views

Class 9 (Chap #3)

Uploaded by

baig93067
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Class 9 (Chap #3)

Uploaded by

baig93067
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

UNIT No 03 (Programming Fundamentals)

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


i. Comparison between Websites and Web Applications
Answer:
Feature Website Web Application

Purpose Primarily provides Offers interactive features and dynamic content


information or services

Structure Fixed structure with Dynamic structure that can change based on user input
predefined pages

Functionality Limited to displaying content Can perform complex tasks and interact with users

Technology Typically uses HTML, CSS, Often uses programming languages like PHP, Python, or Ruby,
and JavaScript along with HTML, CSS, and JavaScript

Examples Blog, online store, news portal Online banking, social media platforms, email services

ii. What is 'href' refers to and how to use it?

Answer: 'href' refers to HyperText Reference. It is used in HTML to specify the URL of a resource to
link to.

How to use it:

1. Place it within an <a> tag: This tag is used to create a hyperlink.


2. Set the value of the href attribute: The value should be the URL of the resource you want to link to.

Example:

HTML

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

In this example, clicking on the link will take you to the website https://www.example.com.

iii. Enlist the optional parameters to open a webpage

Optional Parameters to Open a Webpage:


Here are some common optional parameters that can be used with the <a> tag to control how a webpage is
opened:

 target="_blank": Opens the linked page in a new tab or window.


 target="_self": Opens the linked page in the same tab or window (default).
 rel="nofollow": Tells search engines not to follow the link.
 rel="noopener": Prevents the linked page from accessing the opener window's context.
 rel="noreferrer": Prevents the linked page from receiving the referrer information.
 title="Tooltip text": Adds a tooltip to the link that displays the specified text when the user hovers
over it.
Example:

HTML

<a href="https://www.example.com" target="_blank" title="Visit Example">Link to Example</a>

This link will open in a new tab or window and display a tooltip with the text "Visit Example."

iv. List out the frequent tags used in text of a webpage and what are they used for?

Common HTML Tags Used for Text


Here are some of the most frequently used HTML tags for text, along with their purposes:

Heading Tags

<h1> to <h6>: These tags are used to define headings of different levels. <h1> is the most
important heading, while <h6> is the least important.

Paragraph Tags

<p>: Defines a paragraph of text.

Inline Elements

 <span>: An inline element used to group text or other inline elements.


 <b>: Makes text bold.
 <i>: Makes text italic.
 <u>: Underlines text.
 <mark>: Highlights text.
 <del>: Marks text as deleted.
 <ins>: Marks text as inserted.

Text Formatting
 <strong>: Emphasizes text strongly.
 <em>: Emphasizes text.
 <small>: Renders text in a smaller font size.
 <big>: Renders text in a larger font size.
 <sub>: Subscripts text.
 <sup>: Superscripts text.

Other Text-Related Tags

 <q>: Defines a short quotation.


 <cite>: References a work (e.g., a book, article, or song).
 <abbr>: Defines an abbreviation or acronym.
 <address>: Defines the address of an author or organization.

These tags can be combined to create various text styles and formats for your web pages.

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

The <body> tag-pair in HTML defines the content of an HTML document. It contains all the visible
elements of the page, such as:

 Text: Paragraphs, headings, lists, etc.


 Images: <img> elements.
 Links: <a> elements.
 Forms: <form> elements.
 Tables: <table> elements.
 Divisions: <div> elements.
 Other elements: Any other HTML elements that you want to include on the page.

Essentially, everything that you want to display on the webpage goes inside the <body> tag-pair.

Here's a simple example:


HTML
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title> </head>
<body>
<h1>Welcome to my website!</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="An image">
</body>
</html>

In this example, the content of the page, including the heading, paragraph, and image, is contained
within the <body> tag-pair.

vi. How the event based code is used in JavaScript?

Event-based code in JavaScript is a programming paradigm where code execution is triggered by specific
events. This allows for more interactive and dynamic web pages.

Here's a breakdown of how it works:

1. Event Listeners: You attach event listeners to HTML elements using JavaScript. These listeners wait
for a specific event to occur.
2. Event Occurs: When the event happens (e.g., a button click, mouse hover, or key press), the associated
event listener is triggered.
3. Event Handler Function: The event listener calls a predefined function, known as an event handler,
to execute the desired code.
Example:

JavaScript

// Get a reference to the button element


const button = document.getElementById("myButton");

// Add a click event listener to the button


button.addEventListener("click", function()
{
// Code to be executed when the button is clicked
alert("Button clicked!");
});

In this example:
 We select the button element with the ID "myButton".
 We add a click event listener to the button.
 When the button is clicked, the anonymous function inside the addEventListener will be
executed, displaying an alert.

Common Events:
Click Mouseover Mouseout Keydown
Keyup Submit Change Focus Blur

Key Points:
 Event-based programming makes web pages more interactive and responsive.
 Event listeners can be attached to any HTML element.
 Event handlers can perform various actions, such as modifying the DOM, making AJAX
requests, or displaying alerts.

vii. Infer about the External CSS? Where are External CSS generally used?

External CSS is a separate file that contains Cascading Style Sheets (CSS) rules for styling HTML
elements. This allows you to define styles in a centralized location and reuse them across multiple HTML
pages.

Where External CSS is Generally Used:

 Large projects: For large websites with multiple pages, using external CSS helps to organize and
manage styles more effectively.
 Multiple pages: If you want to apply the same styles to multiple HTML pages, using an external CSS
file can save time and effort.
 Collaborative projects: When working with a team, external CSS can be managed and updated by
multiple developers without affecting the HTML content.
 Maintaining consistency: External CSS ensures that styles are consistent across all pages of a website.
 Performance optimization: External CSS files can be cached by browsers, which can improve page
loading speed.

How to Use External CSS:

1. Create a CSS file: Create a new file with a .css extension (e.g., styles.css).
2. Write CSS rules: Define your styles within the CSS file using CSS syntax.
3. Link the CSS file: In your HTML document, use the <link> tag to link the CSS file:

HTML

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

Replace "styles.css" with the actual filename of your CSS file.


By using external CSS, you can separate the content and structure of your HTML from the presentation,
making your code more organized and maintainable.

*********************************************************************
Give Long answers to the following extended response questions (ERQs). Q.1

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

Document Object Model (DOM):

The DOM is a programming interface that represents an HTML document as a tree structure. It allows
JavaScript to access and manipulate the elements, attributes, and text content of a web page. Think of it as
a hierarchical representation of the document, where each element is a node in the tree.
Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<button id="changeText">Change Text</button>
</body>
<script>
const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const button = document.getElementById("changeText");
button.addEventListener("click", () => {
heading.textContent = "New Heading";
paragraph.innerHTML = "<b>New Paragraph</b>"; });
</script>
</html>

In this example:

1. Document Node: The root node of the DOM is the <html> element.
2. Child Nodes: The <head> and <body> elements are child nodes of the <html> element.
3. Element Nodes: The <h1>, <p>, and <button> elements are element nodes.
4. Text Nodes: The text content within the <h1> and <p> elements are text nodes.

The JavaScript code uses the DOM to:


 Select elements using document.querySelector and document.getElementById.
 Modify the text content of elements using textContent and innerHTML.
 Add an event listener to the button using addEventListener.

***********************************************************************

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

Here's the HTML code to differentiate between different types of headings:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Heading Levels</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

************************************************************************

Q3. Elaborate steps and provide code to load a background image in a webpage.

Steps to Load a Background Image in a Webpage 1. Prepare the

Image: o Create or find the image you want to use as the

background.

o Ensure the image is in a suitable format (e.g., JPEG, PNG, GIF).


2. Create a CSS Style Rule: o Open your CSS file or create a new one. o Define a
CSS rule that targets the element you want to apply the background image to (usually
the <body> element).
o Use the background-image property to specify the URL of the image.
3. Link the CSS File: o In your HTML file, link the CSS file using the <link>
tag:

HTML
<link rel="stylesheet" href="styles.css">
1. Replace "styles.css" with the actual filename of your CSS file.

Example Code:

CSS
body {
background-image: url("path/to/your/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

In this example:

 background-image: url("path/to/your/image.jpg"); sets the background image to the specified URL.


 background-repeat: no-repeat; prevents the image from repeating.
 background-position: center center; positions the image in the center of the background.
 background-size: cover; scales the image to fit the background area while maintaining its aspect ratio.

Additional Considerations:

 You can use different background properties to customize the appearance of the image, such as
background-color, background-size, background-position, and background-attachment.
 For larger images, consider optimizing them for web use to reduce file size and improve loading times.
 Be mindful of image licensing and copyright laws when using images from external sources.

*******************************************************************************

Q4 With the help of sample code, highlight different methods to incorporate CSS code in a HTML
webpage.

Methods to Incorporate CSS Code in an HTML Webpage


1. Inline CSS:

 Directly embed CSS styles within an HTML element using the style attribute.
 Suitable for simple styling changes within a specific element.

Example:
HTML
<h1 style="color: blue; font-size: 36px;">This is a heading</h1>

2. Internal CSS:

 Define CSS rules within the <head> section of the HTML document using the <style> tag. 
Useful for styling multiple elements within the same page.
Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
h1 { color: red; font-size: 40px; }
p{ font-size: 18px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3. External CSS:

 Create a separate .css file and link it to the HTML document using the <link> tag.
 Best practice for larger projects and when styles need to be shared across multiple pages.

Example: styles.css:
CSS
h1 { color: green; font-size: 32px; }
p { font-size: 16px; }

HTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1> <p>This is a paragraph.</p>
</body>
</html>

*******************************************************************************

Q5 Sketch steps and provide code to apply border and color to a table in a webpage.

Steps and Code to Apply Border and Color to a Table in a Webpage Steps:

1. Create a Basic Table Structure: o Use the <table> tag to define the table. o
Use the <tr> tag to define table rows. o Use the <td> tag to define table cells.
2. Apply Border: o Set the border property on the <table> element to specify the width of
the border.
3. Apply Color:
o Use the border-color property on the <table> element to set the color of the border.
o Use the background-color property on the <table>, <tr>, or <td> elements to set the
background color.
Code Example:

HTML
<table>
<tr> <td> Cell 1 </td>
<td> Cell 2 </td> </tr>
<tr> <td> Cell 3 </td>
<td> Cell 4 </td> </tr>
</table>

With Border and Color:


HTML
<table border="1" style="border-color: black; background-color: lightgray;">
<tr> <td>Cell 1</td>
<td>Cell 2</td> </tr>
<tr> <td>Cell 3</td>
<td>Cell 4</td> </tr>
</table>

This code will create a table with a 1-pixel black border and a light gray background color. You can
customize the border width and colors to your preferences.

Additional Styling Options:

 Border style: border-style: solid; (or dotted, dashed, double, etc.) 


Border radius: border-radius: 5px; to create rounded corners.
 Cell padding: padding: 10px; to add space between the cell content and
the border.  Cell spacing: cell spacing: 5px; to add space between cells.

*******************************************************************************

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

JavaScript Functionality in Webpages


JavaScript is a versatile programming language that adds interactivity and dynamic features to web pages.
Here are some key functionalities it provides:

1. DOM Manipulation:

 Modifying HTML elements: JavaScript can change the content, attributes, and styles of HTML
elements.
 Creating and removing elements: You can dynamically add or remove elements from the DOM.

Example:
JavaScript
const heading = document.getElementById("myHeading");
heading.textContent = "New Heading";

const newParagraph = document.createElement("p");


newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

2. Event Handling:

 Responding to user interactions: JavaScript can handle events like clicks, key presses, mouse
movements, and form submissions.
 Creating interactive elements: You can build buttons, drop-down menus, and other interactive
components.
Example:

JavaScript
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("Button clicked!");
});

3. Form Validation:

 Validating user input: JavaScript can check if form data is valid before submitting it to the server.
 Preventing errors: You can ensure that users enter correct information.

Example:

JavaScript
function validateForm() {
const name = document.getElementById("name").value;
if (name === "") {
alert("Please enter your name.");
return false; }
return true; }

4. AJAX (Asynchronous JavaScript and XML):

 Making asynchronous requests: JavaScript can send and receive data from the server without
reloading the entire page.
 Dynamic content updates: You can update parts of the page without refreshing it.

Example:

JavaScript
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// Do something with the data }
};
xhr.send();

5. Cookies and Local Storage:

 Storing data locally: JavaScript can store data on the user's device using cookies or local storage.
 Persistent data: This data can be used to personalize the user experience or track user behavior.

Example:

JavaScript
localStorage.setItem("username", "John Doe");
const storedUsername = localStorage.getItem("username");

6. Animations and Effects:

 Creating visually appealing interfaces: JavaScript can be used to create animations, transitions, and
other visual effects.

Example:

JavaScript
const element = document.getElementById("myElement");
element.style.backgroundColor = "red";
element.style.transform = "scale(2)";

****************************************************************************** Q7

Articulate steps and write code to create a scrolling text on a webpage.

Creating Scrolling Text on a Webpage


Steps:

1. Create a Container Element: Create a <div> element to hold the scrolling text.
2. Set the CSS Properties:

 Apply overflow: hidden to the container to clip the text if it exceeds the container's width.
 Set the width and height of the container to control the visible area.
 Set white-space: nowrap to prevent the text from wrapping to the next line.
 Set animation to define the scrolling effect.
Code Example:

HTML
<div class="scrolling-text">
This is a scrolling text.
</div>

CSS
.scrolling-text {
overflow: hidden;
width: 200px;
height: 30px;
white-space: nowrap;
animation: scroll-text 10s linear infinite; }

@keyframes scroll-text {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
Explanation:

 The .scrolling-text class defines the container for the scrolling text.
 The overflow: hidden property hides any text that exceeds the container's width.
 The width and height properties set the dimensions of the container.
 The white-space: nowrap property prevents the text from wrapping to the next line.
 The animation property defines the scrolling effect using the scroll-text keyframe animation.
 The @keyframes rule defines the animation frames, specifying the transform: translateX() property
to move the text horizontally.

Customization:

 Speed: Adjust the animation-duration property in the @keyframes rule to control the scrolling
speed.
 Direction: Change the transform: translateX() property to transform: translateY() for vertical
scrolling.
 Looping: The infinite keyword in the animation property makes the scrolling effect continuous. You
can remove it for a single-pass effect.
 Easing: Use different easing functions (e.g., ease-in-out, linear) to control the acceleration and
deceleration of the scrolling.

*****************************************************************************
Q8

Enlist steps to add a video clip in a website which starts playing as the web page loads.

Steps to Add a Video Clip That Starts Playing on Page Load


1. Prepare the Video:

 Choose a format: Select a suitable video format (e.g., MP4, WebM, OGG) that is widely supported
by web browsers.
 Optimize the video: Compress the video to reduce file size without compromising quality. This will
improve loading times.

2. Embed the Video Using HTML:

 Use the <video> tag: Place the <video> tag within your HTML document where you want the video
to appear.
 Set the autoplay attribute: Add the autoplay attribute to the <video> tag to make the video start
playing automatically when the page loads.
 Specify the video source: Use the src attribute to link the video file.
 Provide alternative content: Add the controls attribute to display video controls (play/pause, volume,
etc.) and the poster attribute to show an image while the video is loading or if it cannot be played.

Example:

HTML
<video autoplay controls poster="video-thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

3. Consider Browser Compatibility:

• Multiple formats: Include multiple video sources with different formats (e.g., MP4, WebM)
to ensure compatibility with various browsers.
• Fallback content: Provide alternative content (e.g., a text description) for browsers that don't
support the <video> tag.

Additional Tips:

• Optimize video performance: Use a video player or CDN (Content Delivery Network) to
improve video streaming and playback.
• Mute audio by default: If you don't want the video to play audio automatically, add the muted
attribute to the <video> tag.
• User experience: Consider the user experience when autoplaying videos, as it can be
disruptive. Provide a way for users to pause or mute the video.

By following these steps, you can successfully embed a video clip in your webpage that starts
playing automatically when the page loads.

*******************************************************************************

Q9 Cite steps on compiling the result of your last examination in a tabular form and display it in
a webpage.

Steps to Compile and Display Exam Results in a Table on a Webpage


1. Gather Exam Data:

 Collect the exam results for each student, including their name, score, and any other relevant
information.

2. Create an HTML Table Structure:

 Set up a basic table structure using the <table>, <tr>, and <td>
tags.  Define the table headers (e.g., "Name", "Score") using <th>
tags.
3. Populate the Table with Data:

 Use JavaScript to dynamically populate the table cells with the exam results.
 Create a loop to iterate through the student data and add each student's information to a new

table row. 4. Format the Table (Optional):

 Apply CSS styles to customize the appearance of the table, such as adding borders, colors, or
padding.

Code Example:
Explanation:

1. The HTML structure creates a table with a header row and a body for the results.
2. The JavaScript code defines an array of student objects, each containing a name and score.
3. It iterates over the array, creates a new table row for each student, and populates the cells with
the student's name and score.
4. The populated rows are then appended to the table body.

You can customize the table's appearance using CSS styles, such as:

CSS

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

*********************************************************************************

Q10 In context of Fig. 40(d), add another button namely 'Revert' which when is pressed, it will
reverse both the color and index values.

Adding a "Revert" Button to


Fig. 40(d)

Here's a general approach assuming Fig. 40(d) involves changing the color of an element:

1. Identify the Element:


o Determine the HTML element (e.g., <div>, <p>) whose color you want to change.
2. Create a Color Array:
o Define an array of colors to cycle through.
3. Add a "Revert" Button: o Create a new button element in your HTML and assign it an ID.
4. Implement JavaScript Logic:
o Use JavaScript to:
 Keep track of the current color index.
 Handle the click event on the "Revert" button.
 Decrement the current color index and wrap around if necessary.
 Update the element's color using the new index.
Example Code:

HTML
<button id="changeColorButton">Change Color</button>
<button id="revertButton">Revert</button>
<p id="coloredText">This is some text</p>

JavaScript
const colors = ["red", "green", "blue", "yellow"];
let currentIndex = 0;

const changeButton = document.getElementById("changeColorButton");


const revertButton = document.getElementById("revertButton");
const coloredText = document.getElementById("coloredText");

changeButton.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % colors.length;
coloredText.style.color = colors [currentIndex];
});

revertButton.addEventListener("click", () => {
currentIndex = (currentIndex - 1 + colors.length) % colors.length;
coloredText.style.color = colors [currentIndex];
});

Explanation:

 The colors array contains the available colors.


 currentIndex keeps track of the current color index.
 The event listeners for the "Change Color" and "Revert" buttons update the currentIndex and
change the text's color accordingly.
 The % operator ensures that the index wraps around to the beginning of the array when it reaches
the end.

*********************************************************************

You might also like