Scribd
Upload
23 views30 pages

Grade 9 Chapter 3

Chapter 3 covers programming fundamentals for Grade 9, including definitions of key terms like WWW, Internet, HTML, and web applications. It explains website development, differentiates between static and dynamic websites, and contrasts front-end and back-end development. The chapter also delves into HTML structure, JavaScript usage, programming concepts like loops and functions, and the Document Object Model (DOM).

Uploaded by

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

Grade 9 Chapter 3

Chapter 3 covers programming fundamentals for Grade 9, including definitions of key terms like WWW, Internet, HTML, and web applications. It explains website development, differentiates between static and dynamic websites, and contrasts front-end and back-end development. The chapter also delves into HTML structure, JavaScript usage, programming concepts like loops and functions, and the Document Object Model (DOM).

Uploaded by

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

Chapter 3: Programming Fundamentals Grade 9

1. Define the following terms shortly: www, Internet, HTML, web, website, search engine
 WWW (World Wide Web): A system of interlinked hypertext documents and multimedia
accessed through the Internet.
 Internet: A global network of interconnected computers that allows for communication
and data exchange.
 HTML (Hypertext Markup Language): The standard language used to create and format
documents on the World Wide Web.
 Web: The collection of all accessible websites and resources on the World Wide Web.
 Website: A collection of related web pages under a single domain name, accessible
through a web browser.
 Search Engine: A tool that searches the web to find and display results relevant to user
queries. Examples include Google and Bing.

2. Define web applications and CRM.


Web Application: A web-based software program that runs on a web server and can be accessed
via a web browser. Unlike traditional software that’s installed on a computer, web applications
can be accessed from any device with internet access. Examples include email clients (like
Gmail), project management tools, and online banking.
CRM (Customer Relationship Management): A system or software that helps businesses
manage interactions and relationships with current and potential customers. CRM systems
organize customer information, track communications, and support sales, marketing, and
customer service functions to improve customer satisfaction and drive business growth.
Examples include Salesforce and HubSpot CRM.

3. Briefly explain website development.


A website establishes a digital presence, sharing information across single or multiple pages
without allowing viewer edits. For example, a personal website might showcase hobbies,
achievements, and photo albums. Visitors can view but cannot modify the content.
4. define and differentiate between static and dynamic websites.

A static website remains unchanged once created, and its content only updates when the
owner manually modifies it. These sites load directly from the server and are easy to
create and maintain. Once loaded, they don’t require a continuous server connection.

In contrast, a dynamic website updates its content based on user interaction or input,
enhancing visitor engagement. For example, online shopping sites use dynamic elements
to display customized offers, altering the page experience for each user. Dynamic sites
often use scripts like JavaScript, Python, PHP, and ASP.NET to achieve this interactive
functionality, making them adaptable to user preferences.

5. Contrast front-end and backend development.

Front-end development focuses on the visual, interactive parts of a website using


HTML, CSS, and JavaScript, making it user-friendly.
Chapter 3: Programming Fundamentals Grade 9

Back-end development manages server-side functions, using languages like Python and
PHP to handle data and support front-end operations.

Front-end is the user interface; back-end is the functional backbone.

6. Briefly explain html.


HTML (Hypertext Markup Language) is the standard language used to create and display
content on a webpage. It uses tags (e.g., <p> for paragraphs) to structure and define content,
allowing browsers to interpret and present it visually. HTML code can be written in a simple text
editor like Notepad and displayed in a web browser, or developed with tools like Visual Studio or
NetBeans for enhanced functionality and efficiency.
7. What is the purpose of the <html> tag in an HTML document?
The <html> tag encloses the entire HTML document, identifying it as an HTML file.
8. Describe the use of the <head> tag in HTML.
The <head> tag contains elements that are not displayed on the page but provide information
about the document, such as the title.
9. What does the <title> tag do?
The <title> tag gives the webpage a name, which is displayed on the browser tab and helps users
identify the page.
10. Where do the main visible elements of an HTML page go, and in which tag are they enclosed?
The main visible elements are placed inside the <body> tag.
11. How many levels of headings are available in HTML, and which is the largest?
HTML provides 6 heading levels, with <h1> being the largest.
12. What is the function of the <br/> tag?
The <br/> tag creates a line break in the text, allowing sentences to appear on separate lines.
13. Explain the purpose of the <span> and <div> tags.
<span> is used to style and arrange individual lines of text, while <div> applies styling to multiple
lines or a section.
14. Which tags are used to italicize and emphasize text?
The <i> tag italicizes text, and the <em> tag emphasizes text.
15. What tags are used to make text bold or strong?
<b> makes text bold, while <strong> emphasizes text with added weight, often for readability.
16. How would you create a second-level heading in HTML?
Use <h2> ... </h2> to create a second-level heading.
17. What tags are used to create tables in HTML, and how are headers and data defined?
In HTML, tables are created using the <table> tag. The first row, known as the header row, is
typically used for headings and is defined with the <th> tag. Table data cells are created using
the <td> tag.
18. Explain the use and effect of the target attribute in hyperlinks.
The target attribute in an anchor tag controls where the linked resource will open. If set to
_blank, the link opens in a new tab or window, providing a separate browsing context. If set to
_self, the linked page opens in the same tab or window, replacing the current page. The target
attribute enhances user experience by allowing control over navigation behavior.
Chapter 3: Programming Fundamentals Grade 9

19. Write the HTML code to create a hyperlink to "National Book Foundation" that opens in a new
tab.

The HTML code to create a hyperlink to "National Book Foundation" that opens in a new
tab is:

<a href="https://www.nbf.org/" target="_blank">National Book


Foundation</a>

20. How can a video clip be added to a website, and what are its common attributes?
A video clip can be added to a website using the <video> tag. Common attributes
include:
 width and height: To specify the video size in pixels.
 controls: To enable play, pause, and volume adjustment.
The <source> tag is used within the <video> tag to define the video file and
format. MP4 is the most commonly supported format across browsers.

21. What does the autoplay parameter do in the <video> tag?


The autoplay parameter automatically plays the video as the webpage loads. It does not provide
controls for volume or play/pause.
22. What additional features can be used with the autoplay parameter?
Additional features include:
muted: Plays the video with muted volume; users must unmute it manually.
looped: Repeats the video continuously in a loop until interrupted manually.
23. How can users intervene when autoplay is used without controls?
Users can access manual intervention options, like volume control or stopping the video, by
right-clicking on the video.
24. Write an example of a <video> tag with autoplay, muted, and looped attributes.
<video width="500px" height="500px" autoplay muted loop></video>
25. What is JavaScript, and why is it important in web development?
JavaScript is a lightweight programming language primarily used to add dynamic and interactive
elements to web pages. It works seamlessly with HTML and CSS, allowing developers to create
responsive user interfaces. JavaScript's ability to handle events, manipulate DOM elements, and
integrate with APIs makes it an essential tool for modern web development.
26. How can JavaScript code be embedded in an HTML file?
JavaScript code is embedded in an HTML file using the <script> tag, which can be placed
inside the <head> or <body> section. This flexibility allows developers to control when and how
the JavaScript executes on a webpage. For instance, a script in the <head> can handle events
like a button click even before the body content fully loads.

27. What is the document.write() function, and when is it used?


The document.write() function outputs content directly onto a webpage. It is often
used for simple tasks like displaying text or debugging during development. However,
Chapter 3: Programming Fundamentals Grade 9

since it overwrites the webpage if called after the page loads, it is typically avoided in
complex applications in favor of other DOM manipulation methods.
28. What are events in JavaScript, and how are they used?
Events in JavaScript are actions or occurrences, such as a mouse click or keypress, that the script
can detect and respond to. Using event handlers like onclick, developers can trigger specific
functions when an event occurs. This interaction allows webpages to become more dynamic and
responsive to user input.
29. Explain the difference between the alert() and prompt() functions in JavaScript.
The alert() function displays a simple message in a pop-up box to inform the user or provide
feedback. In contrast, the prompt() function not only displays a message but also collects input
from the user. Both functions are modal, meaning they pause the script execution until the user
interacts with the dialog box.
30. What is the purpose of the prompt() function, and how is it used?
The prompt() function is used to display a message box asking the user for input. It takes the
user's response and stores it in a variable for further processing. For example, developers can
use prompt() to collect a user's name and display a personalized greeting based on their input.
31. Why is JavaScript considered a client-side language, and what are its advantages?
JavaScript is considered a client-side language because it executes directly in the user's browser
without requiring server interaction. This reduces server load and improves the responsiveness
of web applications. Additionally, its ability to manipulate webpage elements dynamically
enhances the overall user experience.
32. What is meant by 'initialization' of a variable, and why is it considered good
practice to initialize variables upon declaration?
Initialization refers to the first assignment of a value to a variable. It is good practice to
initialize variables as it helps avoid undefined or unexpected values, which can lead to
errors in the program. Declaring and initializing a variable together also makes the code
cleaner and reduces the chances of forgetting to assign a value later.
33. What does the modulus (%) operator do in JavaScript?
The modulus (%) operator in JavaScript returns the remainder after dividing one number by
another. For example, if reward is divided by 10 using the modulus operator, it would yield the
remainder of that division, which can be useful in various calculations.

34. What is a conditional or selection statement in programming?


A conditional or selection statement allows a program to choose between different
actions based on a condition. If the specified condition is true, certain lines of code are
executed; otherwise, those lines are skipped.
35. How does an 'if-else' statement work in JavaScript?
An 'if-else' statement in JavaScript provides two options: if the condition is true, the code
within the 'if' block is executed; if it’s false, the code within the 'else' block runs. This
ensures that one of the two scenarios always occurs.
36. What is the purpose of using a 'for loop' in programming?
A 'for loop' is used to repeat a specific task multiple times without needing to write the
same code repeatedly. It helps achieve repetitive tasks efficiently by using an index that
defines the start, end, and step size for each iteration until a set condition is met.
Chapter 3: Programming Fundamentals Grade 9

37. How does a 'for loop' work, and what are its main components?
A 'for loop' operates with three main components: initialization, a terminating condition,
and a step size. The index is first initialized, then the loop continues running as long as
the condition is true, and the index is incremented by the step size after each iteration.
This process repeats until the condition is no longer met.
38. What is a nested loop, and when is it used?
A nested loop occurs when one loop is placed inside another. It is used for handling
multiple iterative tasks that are related. In a nested loop, the outer loop runs and each time
it iterates, the inner loop completes its entire cycle, making it useful for tasks involving
multiple dimensions, like processing rows and columns in a table.
39. What is an array, and why is it useful in programming?
An array is a data type that can store multiple values of the same type in a single variable. It is
useful because it allows us to handle large sets of related data efficiently, without needing to
declare numerous separate variables. Each value in an array can be accessed by its index, which
starts at 0.

40. What is the purpose of using functions in programming?


Functions allow for reusable code by segmenting commonly used sets of instructions into
a single block that can be called multiple times. This reduces the need to rewrite code,
making programs shorter, more organized, and easier to manage.
41. What is the difference between local and global variables in the context of
functions?
Local variables are defined within a function and are accessible only within that function.
Global variables, on the other hand, are defined outside any function and can be accessed
anywhere in the program.
42. How do arguments work in functions?
Arguments are variables passed to a function when it is called. They allow the function to
work with specific values each time it runs. These arguments are local to the function and
can be used only within its scope.
43.
44. ds
Long Questions

1. Explain the document object model in HTML.

The Document Object Model (DOM) in HTML is a standard that defines how the
structure and content of an HTML document can be interpreted, manipulated, and
accessed across various operating systems. The DOM organizes HTML files as a DOM-
tree, where each element, attribute, and even comment are treated as nodes within a
hierarchical structure. In this tree, each HTML component—such as tags, scripts, and text
content—is represented as an object or node.

The DOM allows elements within an HTML document to be accessed and manipulated
using their unique element IDs. For instance, the function getElementById() is used to
locate and retrieve an element by its ID. If the element is found, its object is returned;
otherwise, a null value is given. This approach enables web developers to dynamically
Chapter 3: Programming Fundamentals Grade 9

update and control web page content, such as changing text within an element using the
innerHTML property, which retrieves and updates element values.

2. Explain the basic structure of an HTML document.


The basic structure of an HTML document consists of essential tags that provide a
foundation for any web page. Here’s an outline of the main components:

a) <!DOCTYPE html>: This declaration specifies the HTML version used in the document
(typically HTML5) and helps browsers understand how to render the page.
b) <html> Tag: This is the root element that wraps all the content in the HTML document.
c) <head> Tag: Contains metadata (information about the page), links to stylesheets, scripts,
and other resources.
o <title>: Sets the page title displayed in the browser’s title bar or tab.
o <meta>: Provides metadata, such as character encoding and viewport settings for
responsive design.
o <link>: Links external resources, like stylesheets.
o <style> and <script>: Optionally include CSS or JavaScript directly within the
HTML document.
d) <body> Tag: Contains the visible content of the webpage, such as text, images, links, and
other multimedia.
o This is where elements like <header>, <nav>, <section>, <article>, <footer>,
<div>, and <p> (paragraphs) are structured to create the page layout and display
content.

Basic HTML Structure Example:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section>
<p>This is a paragraph in the main content area.</p>
</section>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>
Chapter 3: Programming Fundamentals Grade 9

3. What is CSS? explain internal, inline, and external stylesheets.

CSS (Cascading Style Sheets) is a styling language used to define the visual appearance and
layout of HTML elements on a webpage. CSS allows developers to separate content from design,
enabling them to easily modify the look and feel of a website without altering the underlying
HTML structure. CSS can control colors, fonts, spacing, and positioning, making webpages
more visually appealing and user-friendly.

Types of CSS Stylesheets

1. Internal Stylesheet
o Internal styles are defined within the <style> tag inside the <head> section of an
HTML document.
o This method is ideal when styling is unique to a single page and won’t be reused
elsewhere.
o Example:

html
Copy code
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>

2. Inline Stylesheet
o Inline styles are added directly within HTML elements using the style attribute.
o This method is typically used to apply unique styling to specific elements but is
less maintainable and recommended only for minimal styling.
o Example:

html
Copy code
<h1 style="color: navy; text-align: center;">Welcome to My
Website</h1>

3. External Stylesheet
o An external stylesheet is a separate CSS file linked to an HTML document via the
<link> tag in the <head> section.
o External stylesheets are ideal for applying a consistent style across multiple pages,
making updates easier and more efficient.
o Example:
Chapter 3: Programming Fundamentals Grade 9

html
Copy code
<head>
<link rel="stylesheet" href="styles.css">
</head>

In the styles.css file:

css
Copy code
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}

4. Next
Chapter 3 MCQs

1. What does HTML stand for?

o a) Hyper Trainer Marking Language

o b) Hyper Text Markup Language

o c) Hyper Text Marketing Language

o d) Hyper Text Markup Level


Answer: b) Hyper Text Markup Language

2. Which tag is used to create a hyperlink in HTML?

o a) <link>

o b) <a>

o c) <href>

o d) <url>
Answer: b) <a>

3. Which attribute is used to specify an image source in HTML?

o a) src

o b) href

o c) link

o d) img
Answer: a) src

4. What is the purpose of the <title> tag in HTML?

o a) To set the main heading

o b) To define the page title in the browser tab

o c) To display bold text

o d) To set hyperlinks
Answer: b) To define the page title in the browser tab

5. Which HTML tag is used to display a numbered list?

o a) <ul>

o b) <ol>

o c) <list>

o d) <li>
Answer: b) <ol>
Chapter 3 MCQs

CSS MCQs

6. What does CSS stand for?

o a) Color Style Sheets

o b) Creative Style System

o c) Cascading Style Sheets

o d) Computer Style Sheets


Answer: c) Cascading Style Sheets

7. Which property is used in CSS to change the background color of an element?

o a) bgColor

o b) color

o c) background-color

o d) background
Answer: c) background-color

8. How do you select an element with the ID "header" in CSS?

o a) .header

o b) header

o c) #header

o d) *header
Answer: c) #header

9. Which CSS property controls the text size?

o a) font-style

o b) font-size

o c) text-size

o d) text-style
Answer: b) font-size

10. What is the purpose of using the margin property in CSS?

o a) To add spacing within an element

o b) To add space around elements

o c) To change font style


Chapter 3 MCQs

o d) To center text
Answer: b) To add space around elements

JavaScript MCQs

11. Which of the following is a JavaScript data type?

o a) Number

o b) String

o c) Boolean

o d) All of the above


Answer: d) All of the above

12. Which operator is used to assign a value to a variable in JavaScript?

o a) *

o b) =

o c) :

o d) %
Answer: b) =

13. Which keyword is used to declare a variable in JavaScript?

o a) var

o b) let

o c) const

o d) All of the above


Answer: d) All of the above

14. What is the output of console.log(2 + "2") in JavaScript?

o a) 4

o b) 22

o c) NaN

o d) Syntax Error
Answer: b) 22

15. Which method is used to display data in the browser console?

o a) display()
Chapter 3 MCQs

o b) console()

o c) alert()

o d) console.log()
Answer: d) console.log()

JavaScript Functions & Operators MCQs

16. Which keyword is used to create a function in JavaScript?

o a) func

o b) function

o c) method

o d) create
Answer: b) function

17. Which of the following is an arithmetic operator in JavaScript?

o a) &&

o b) %

o c) ===

o d) !=
Answer: b) %

18. What is the result of 5 % 2 in JavaScript?

o a) 2

o b) 0

o c) 1

o d) 5
Answer: c) 1

19. How can you add a comment in JavaScript?

o a) * Comment *

o b) // Comment

o c) # Comment

o d) <!-- Comment -->


Answer: b) // Comment
Chapter 3 MCQs

20. Which JavaScript function displays a message and a textbox to take input from the user?

o a) alert()

o b) confirm()

o c) prompt()

o d) console.log()
Answer: c) prompt()

JavaScript Loops & Arrays MCQs

21. Which loop will always execute at least once in JavaScript?

o a) for

o b) while

o c) do...while

o d) foreach
Answer: c) do...while

22. In a JavaScript array, what is the index of the first element?

o a) 1

o b) -1

o c) 0

o d) None
Answer: c) 0

23. Which method is used to add an element at the end of an array?

o a) push()

o b) pop()

o c) add()

o d) append()
Answer: a) push()

24. Which of the following loops can be used to iterate through an array?

o a) for

o b) foreach

o c) while
Chapter 3 MCQs

o d) All of the above


Answer: d) All of the above

25. What does the length property of an array represent?

o a) The value of the last element

o b) The maximum index of the array

o c) The number of elements in the array

o d) The size of the array in bytes


Answer: c) The number of elements in the array
Short Response Questions and Answers

1. What is the difference between a website and a web application?

A website is a collection of static web pages, typically used to provide information. It's
primarily designed for information consumption.
A web application is a dynamic application that interacts with the user and performs
specific tasks, often requiring a server-side component. It's designed for user interaction
and data processing.
2. What is the href attribute, and how is it used?
The href attribute stands for "Hypertext Reference." It's used within anchor tags ( <a>)
to specify the link's destination URL. Here's an example:
HTML
<a href="https://www.example.com">Visit Example Website</a>

3. What are the optional parameters to open a webpage in a different way?

You can use the following target attributes within the a tag to control how a linked page
is opened:
 _blank: Opens the link in a new tab or window.

 _self: Opens the link in the same window or tab (default).

 _parent: Opens the link in the parent frame.

 _top: Opens the link in the full body of the window.

4. What are the common text tags used in HTML, and what are their purposes?

Here are some common text tags and their uses:

 <h1> to <h6>: Heading tags, used to define headings of different levels of

importance.
 <p>: Paragraph tag, used to define a paragraph.

 <b>: Bold tag, used to make text bold.

 <i>: Italic tag, used to make text italic.

 <u>: Underline tag, used to underline text.


 <br>: Line break tag, used to insert a line break.
5. What is the role of the <body> tag-pair in an HTML document?
The <body> tag-pair defines the visible page content. It contains all the visible elements
of a webpage, such as headings, paragraphs, images, links, and more.

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

In JavaScript, event-based programming involves defining functions that are triggered


by specific events, such as button clicks, mouse movements, or page loads. These
events allow for dynamic interactions with the webpage. Here's a simple example:

JavaScript
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

7. What is External CSS, and where is it typically used?

External CSS is a separate e file with a .css extension that contains all the styles
for a website. It's linked to the HTML document using the <link> tag.
External CSS is generally used for:

 Consistency: Maintaining a consistent style across multiple pages.


 Reusability: Easily reusing styles in different parts of the website.
 Maintainability: Separating styles from HTML for better organization and easier
updates.
Extended Response Questions

1. What is the Document Object Model (DOM)? Explain with an example.

The Document Object Model (DOM) is a programming interface for HTML, XML, and
other structured documents. It represents the document as a tree-like structure of
nodes, where each node represents a part of the document.

Example: Consider the following HTML code:


HTML
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>

The DOM representation of this HTML would be a tree-like structure:

html
head
title
body
h1
p

JavaScript can interact with the DOM to manipulate the structure, style, and content of a
webpage. For instance, you can change the text of an element, add or remove
elements, or modify the style of elements.

2. How can we differentiate between different types of headings in HTML?

HTML provides six levels of headings, from <h1> to <h6>. The level of importance
decreases as the number increases. Here's a basic example:
HTML
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Subheading 2</h3>
<h4>Subheading 3</h4>
<h5>Subheading 4</h5>
<h6>Subheading 5</h6>

3. How can we load a background image on a webpage?

To load a background image on a webpage, you can use CSS. Here's how:

1. Create a CSS file:


body { background-image: url('background.jpg'); background-repeat: no-repeat;
background-size: cover; background-attachment: fixed; }
2. **Link the CSS file to the HTML:**
```html
<head>
<link rel="stylesheet" href="style.css">
</head>

4. What are the different methods to incorporate CSS code in an HTML webpage?

There are three main ways to incorporate CSS into an HTML document:

1. Inline CSS:
HTML
<p style="color: blue; font-size: 20px;">This is a paragraph.</p>

2. Internal CSS:
HTML
<head>
<style>
p {
color: red;
}
</style>
</head>

3. External CSS: (As explained in the previous answer)

5. How can we apply a border and color to a table in a webpage?

HTML
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 15px;
text-align: left;
}

th {
background-color: #dddddd;
}
</style>

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

6. What kind of functionality can JavaScript provide in a webpage? Give a


suitable code example.

JavaScript can add dynamic behavior to webpages. Here are some examples:

 Dynamic content:
JavaScript
document.getElementById("demo").innerHTML = "Hello JavaScript!";

 Event handling:
JavaScript
document.getElementById("myButton").addEventListener("click",
function() {
alert("Button clicked!");
});
 Form validation:
function validateForm() { let x = document.forms["myForm"]["fname"].value; if (x == "")
{ alert("Name must be filled out"); return false; } }

### 7. How can we create scrolling text on a webpage?

```html
<marquee>This is scrolling text.</marquee>

8. How can we add a video clip to a website that starts playing as the page loads?

HTML
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

9. How can we compile the results of an exam into a tabular form and display it on
a webpage?

1. Create an HTML table structure:


HTML
<table>
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Subject 1</td>
<td>85</td>
</tr>
</table>

2. Use JavaScript to populate the table:


JavaScript
let results = [
["Subject 1", 85],
["Subject 2", 92],
// ...
];

let table = document.getElementById("myTable");


for (let i = 0; i < results.length; i++) {
let row = table.insertRow(i + 1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
cell1.innerHTML = results[i][0];
cell2.innerHTML = results[i][1];
}

Remember to replace background.jpg, style.css, movie.mp4, and other placeholders


with your actual file names and paths.
Project 1

Programming Fundamentals
Design a webpage for Annual Function of your school.
Provide with:
 Schedule of Events
 List of Invited Guest Speakers
 Major awards that will be distributed by Chief Guest.
Add some relevant text paragraphs and photographs for each point, along with
an
introductory paragraph.

Solution

Here's a basic HTML structure for your Annual Function webpage:


HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annual Function 2024</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<header>
<h1>Annual Function 2024</h1>
<h2>A Celebration of Excellence</h2>
</header>

<section class="schedule">
<h2>Schedule of Events</h2>
<ul>
<li>6:00 PM - 6:30 PM: Registration and Welcome Drink</li>
<li>6:30 PM - 7:00 PM: Inaugural Ceremony and Welcome Address
by the Principal</li>
<li>7:00 PM - 8:30 PM: Cultural Performances: A mesmerizing
blend of dance, music, and drama</li>
<li>8:30 PM - 9:00 PM: Guest Speaker Session: Inspiring words
from renowned personalities</li>
<li>9:00 PM - 9:30 PM: Award Ceremony: Honoring academic
excellence and extracurricular achievements</li>
<li>9:30 PM - 10:00 PM: Dinner and Networking</li>
</ul>
</section>

<section class="guests">
<h2>Invited Guest Speakers</h2>
<ul>
<li>
<h3>[Guest Speaker 1 Name]</h3>
[Brief bio about the guest speaker, their achievements,
and their contribution to the field]
</li>
<li>
<h3>[Guest Speaker 2 Name]</h3>
[Brief bio about the guest speaker, their achievements,
and their contribution to the field]
</li>
</ul>
</section>

<section class="awards">
<h2>Major Awards</h2>
<p>The Chief Guest will present the following prestigious
awards:</p>
<ul>
<li>Academic Excellence Awards</li>
<li>Sports Excellence Awards</li>
<li>Cultural Excellence Awards</li>
<li>Special Achievement Awards</li>
</ul>
<img src="annual_function_image.jpg" alt="Annual Function Image">
</section>

<footer>
<p>Join us for an unforgettable evening of celebration and
inspiration.</p>
<p>RSVP by [Date]</p>
</footer>
</body>
</html>

Note:
 CSS File (style.css): You can create a separate CSS file to style your webpage.
Use CSS to control the layout, colors, fonts, and overall appearance of your
website.
 Image: Replace annual_function_image.jpg with the actual path to your image
file.
 Content: Replace the placeholder text with your specific information, such as
guest speaker names, bios, and award details.
 Additional Features: You can enhance your webpage by adding more sections,
such as a countdown timer, a registration form, or a map to the venue.
By customising this basic structure and adding your own creative touches, you can
create a visually appealing and informative webpage for your Annual Function.
Project 2

Create a webpage about you and your hobbies (like stamp collecting, pets, etc.)
The webpage initially should highlight about your family background, your
personal
achievements and activities. Later, provide details about your every hobby for
creating awareness and motivation for others.
You may add some related links for others who want to start and opt for the same
hobbies.

Solution

Here's a basic HTML structure for a personal webpage highlighting your family
background, achievements, and hobbies:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>About Me</h1>
<img src="your_photo.jpg" alt="Your Photo">
</header>

<section class="personal-info">
<h2>Personal Information</h2>
<p><strong>Name:</strong> [Your Name]</p>
<p><strong>Age:</strong> [Your Age]</p>
<p><strong>Location:</strong> [Your Location]</p>
<p><strong>Hobbies:</strong> [List of your hobbies]</p>
</section>

<section class="family-background">
<h2>Family Background</h2>
<p>[Brief description of your family, their professions, and your
upbringing]</p>
</section>

<section class="achievements">
<h2>Achievements</h2>
<ul>
<li>[Achievement 1]</li>
<li>[Achievement 2]</li>
<li>[Achievement 3]</li>
</ul>
</section>

<section class="hobbies">
<h2>Hobbies</h2>
<h3>Stamp Collecting</h3>
<p>[Detailed description of your interest in stamp collecting,
including the history, different types of stamps, and your collection]</p>
<p><a href="https://www.stamps.com/" target="_blank">Start Your
Stamp Collection</a></p>

<h3>Pet Care</h3>
<p>[Detailed description of your love for pets, your pet(s), and
your experiences with pet care]</p>
<p><a href="https://www.aspca.org/" target="_blank">Learn More
About Animal Welfare</a></p>

</section>

<footer>
<p>&copy; [Your Name] [Year]</p>
</footer>
</body>
</html>

Remember to:
1. Customize the HTML: Replace the placeholder text with your specific
information.
2. Add a CSS file: Use CSS to style your webpage, making it visually appealing.
3. Add more sections: Create additional sections for other hobbies, such as
reading, writing, gardening, or painting.
4. Include images: Add images to enhance your webpage's visual appeal.
5. Consider using a CMS: If you want to easily update your website, consider using
a Content Management System (CMS) like WordPress or Wix.
By following these guidelines, you can create a personalized and informative webpage
that showcases your unique identity and interests.
Project 3

Create a webpage about you and your hobbies (like stamp collecting, pets, etc.)
The webpage initially should highlight about your family background, your
personal
achievements and activities. Later, provide details about your every hobby for
creating awareness and motivation for others.
You may add some related links for others who want to start and opt for the same
hobbies.

Solution
Here's a basic HTML structure and CSS styling for a home-made food website:

HTML Structure:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home-Made Delights</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Home-Made Delights</h1>
<p>Taste the Love, Home-Cooked</p>
</header>

<section class="hero">
<img src="hero_image.jpg" alt="Hero Image">
<p>Organic, Home-Made Goodness</p>
</section>

<section class="menu">
<h2>Our Menu</h2>
<div class="menu-item">
<h3>Dish 1</h3>
<img src="dish1_image.jpg" alt="Dish 1 Image">
<p>Ingredients: [List of ingredients]</p>
<p>Price: [Price]</p>
<p>Serves: [Number of servings]</p>
</div>
</section>
<section class="contact">
<h2>Contact Us</h2>
<p><strong>Phone:</strong> [Phone Number]</p>
<p><strong>Email:</strong> [Email Address]</p>
<p><strong>Address:</strong> [Address]</p>
<p><strong>Delivery Options:</strong> [Delivery options, e.g., self-
pickup, delivery within a certain radius]</p>
</section>

<footer>
<p>&copy; 2023 Home-Made Delights</p>
</footer>
</body>
</html>

CSS Styling (style.css):

CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('logo_background.jpg'); /* Replace with your logo
image */
background-size: cover;
background-repeat: no-repeat;
}

header {
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}

.hero {
text-align: center;
padding: 50px;
}

.menu {
text-align: center;
padding: 50px;
}

.menu-item {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}

footer {
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
Use code with caution.

Logo Design:

You can use a graphic design tool like Adobe Illustrator or Canva to create a logo that reflects
the home-made, organic nature of your food. Consider using a simple, clean design with natural
colors and fonts.

Key Points:

 High-Quality Images: Use high-quality images of your food to entice customers.


 Clear and Concise Information: Make sure your menu and contact information are easy
to understand.
 Mobile-Friendly Design: Ensure your website is optimized for mobile devices.
 SEO Optimization: Use relevant keywords in your content and meta tags to improve
search engine visibility.
 Social Media Integration: Add social media links to your website to connect with your
audience.
 Online Ordering: Consider integrating an online ordering system to streamline the
process.

You might also like