Scribd
Upload
6 views

FBISE Compter Notes Chapter 3 (Programming Fundamentals)

The document covers programming fundamentals, including HTML, CSS, and JavaScript, with exercises consisting of short and long questions. It provides explanations, code examples, and practical applications for various web development concepts such as the Document Object Model, CSS integration methods, and JavaScript functionalities. The content is structured into sections for easy navigation and understanding of web development basics.

Uploaded by

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

FBISE Compter Notes Chapter 3 (Programming Fundamentals)

The document covers programming fundamentals, including HTML, CSS, and JavaScript, with exercises consisting of short and long questions. It provides explanations, code examples, and practical applications for various web development concepts such as the Document Object Model, CSS integration methods, and JavaScript functionalities. The content is structured into sections for easy navigation and understanding of web development basics.

Uploaded by

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

Join Whatsapp Community Join Whatsapp Channel FaceBook Group

Unit 3: Programming Fundamentals


UNIT 3: PROGRAMMING FUNDAMENTALS ....................................................................................................... 1
SHORT QUESTIONS (EXERCISE)................................................................................................................................... 1
LONG QUESTIONS (EXERCISE) .................................................................................................................................... 3
EXTERA SHORT QUESTIONS (TOPIC WISE) .................................................................................................................. 16
3.1 INTRODUCTION ............................................................................................................................................... 16
3.2 HTML .......................................................................................................................................................... 16
3.3 CASCADING STYLE SHEETS (CSS) ........................................................................................................................ 17
3.4 JAVASCRIPT .................................................................................................................................................... 17
3.5 DEBUG THE CODE ........................................................................................................................................... 18
3.6 CREATE A DYNAMIC WEBSITE............................................................................................................................. 18
EXTERA LONG QUESTIONS (TOPIC WISE) ................................................................................................................... 20
MCQS................................................................................................................................................................ 24

Short Questions (Exercise)


1. Contrast between website and web application.
Answer:
- Website: A website is a collection of static web pages designed to display information. It focuses on
content delivery and user reading. Example: Blogs or news websites.
- Web Application: A web application is interactive, allowing users to perform tasks or manipulate
data. It involves dynamic user interaction. Example: Gmail, Google Docs.

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


Answer:
The href attribute in HTML stands for Hypertext REFerence. It is used in <a> (anchor) tags to specify
the URL of a link.
Syntax:
<a href="https://example.com">Visit Example</a>
This creates a hyperlink that directs the user to "https://example.com" when clicked.

3. Enlist the optional parameters to open a webpage.


Answer:
Optional parameters to open a webpage using JavaScript's window.open() method include:
1. URL: The address of the page to be opened.
2. Name: The target window's name.
3. Features: Specifies options like size, position, or scrollbars.
Example:
window.open("https://example.com", "_blank", "width=800, height=600");

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

4. List out the frequent tags used in text of a webpage and what are they used
for?
Answer:
Common HTML tags for text formatting and their uses:
1. <p>: Defines a paragraph.
2. <h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
3. <b> or <strong>: Makes text bold.
4. <i> or <em>: Makes text italicized or emphasized.
5. <u>: Underlines the text.
6. <br>: Inserts a line break.

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


Answer:
The <body> tag in an HTML document contains the main content of the webpage. It includes all
visible elements like text, images, links, videos, and scripts.
Example:
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph.</p>
</body>
Everything within the <body> tag is displayed on the browser.

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


Answer:
Event-based code in JavaScript allows the execution of specific code when an event occurs, such as a
button click, mouse hover, or form submission. Events are handled using functions or event listeners.
Example:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button Clicked!");
});
Here, clicking the button triggers the click event, displaying an alert.

7. Infer about the External CSS? Where are External CSS generally used?
Answer:
- External CSS: External CSS is a separate file containing CSS rules. It is linked to HTML using the
<link> tag in the <head> section.
- Usage: External CSS is generally used to maintain consistency across multiple web pages and to
improve code organization.
Example:
1. CSS File: style.css
body {
background-color: lightblue;
}
2. HTML Linking:
<link rel="stylesheet" href="style.css">

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

Long Questions (Exercise)

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

Answer:
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It
represents the structure of a document as a tree of objects, where each object corresponds to an
element in the document. The DOM allows developers to interact with and manipulate webpage
content dynamically using programming languages like JavaScript.

Key Points about DOM:

• The webpage is represented as a tree structure with nodes.

• Nodes can be elements, attributes, or text.

• It allows dynamic updates, such as changing content, style, or structure of the webpage.

Example:

Consider the following HTML document:

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<h1 id="heading">Hello, World!</h1>

<p>This is an example of DOM manipulation.</p>

<button onclick="changeText()">Click Me</button>

<script>

function changeText() {

document.getElementById("heading").innerHTML = "Hello, DOM!";

</script>

</body>

</html>

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

Explanation:

• In this example, the DOM tree includes the <html>, <head>, <body>, <h1>, <p>, and
<button> elements as nodes.

• When the button is clicked, JavaScript dynamically accesses the <h1> element using
document.getElementById("heading") and updates its content to "Hello, DOM!".

Output:
Before clicking: "Hello, World!"
After clicking: "Hello, DOM!"

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

Answer:
HTML provides six levels of headings, <h1> to <h6>, where <h1> is the largest and <h6> is the
smallest.

Code Example:

<!DOCTYPE html>

<html>

<head>

<title>HTML Headings</title>

</head>

<body>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

</body>

</html>

Explanation:

• <h1> is used for the most important heading and appears the largest.

• <h2> to <h6> gradually decrease in size and importance.

Output:
The headings will be displayed in decreasing font size from <h1> to <h6>.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

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

Answer:
To load a background image in a webpage using CSS, follow these steps:

1. Step 1: Create the HTML file structure.

2. Step 2: Use the background-image property in CSS to load the image.

3. Step 3: Link the CSS file to the HTML file or use inline or internal CSS.

Code Example:

<!DOCTYPE html>

<html>

<head>

<title>Background Image Example</title>

<style>

body {

background-image: url("background.jpg");

background-repeat: no-repeat;

background-size: cover; /* Ensures the image covers the screen */

</style>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This webpage has a background image.</p>

</body>

</html>

Explanation:

• The background-image property sets the image (background.jpg) as the webpage's


background.

• background-repeat: no-repeat; ensures the image does not repeat.

• background-size: cover; scales the image to cover the entire screen.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

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

Answer:
There are three main methods to incorporate CSS in an HTML webpage:

1. Inline CSS: CSS is written directly inside an HTML element.

2. <p style="color: blue; font-size: 20px;">This is an inline CSS example.</p>

3. Internal CSS: CSS is written inside the <style> tag in the <head> section.

4. <!DOCTYPE html>

5. <html>

6. <head>

7. <style>

8. p{

9. color: green;

10. font-size: 18px;

11. }

12. </style>

13. </head>

14. <body>

15. <p>This is an internal CSS example.</p>

16. </body>

17. </html>

18. External CSS: CSS is written in a separate file and linked to the HTML file.
CSS File (style.css):

19. p {

20. color: red;

21. font-size: 16px;

22. }

HTML File:

<!DOCTYPE html>

<html>

<head>

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

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

</head>

<body>

<p>This is an external CSS example.</p>

</body>

</html>

Explanation:

• Inline CSS: Quick styling for individual elements.

• Internal CSS: Applies styles to the entire page.

• External CSS: Recommended for large projects to maintain consistency across multiple
webpages.

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

Answer:
To apply borders and colors to a table using CSS, follow these steps:

1. Step 1: Create the HTML table structure.

2. Step 2: Use CSS to add borders and colors to the table, rows, and cells.

3. Step 3: Link the CSS file or use internal CSS.

Code Example:

<!DOCTYPE html>

<html>

<head>

<title>Table Styling Example</title>

<style>

table {

border: 2px solid black;

border-collapse: collapse;

width: 50%;

th, td {

border: 1px solid black;

text-align: center;

padding: 8px;

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

th {

background-color: lightblue;

td {

background-color: lightyellow;

</style>

</head>

<body>

<h1>Styled Table</h1>

<table>

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>Ali</td>

<td>20</td>

</tr>

<tr>

<td>Fatima</td>

<td>22</td>

</tr>

</table>

</body>

</html>

Explanation:

• border: Adds borders to the table and its cells.

• border-collapse: collapse; ensures that borders are not doubled.

• background-color: Adds color to the header (th) and data (td) cells.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

• padding and text-align: Improve table spacing and alignment.

Output:
A table with a black border, light blue header, and light yellow cells.

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

Answer:
JavaScript is a programming language that adds interactivity and dynamic functionality to
webpages. It enables features like animations, event handling, data validation, and DOM
manipulation.

Functionality Provided by JavaScript:

1. Dynamic content updates.

2. Event handling (e.g., button clicks, form submissions).

3. Form validation.

4. Animations and effects.

5. DOM (Document Object Model) manipulation.

Example Code – Displaying an Alert Message on Button Click:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Example</title>

</head>

<body>

<h1>JavaScript Functionality</h1>

<button onclick="showMessage()">Click Me</button>

<script>

function showMessage() {

alert("Hello! This is a JavaScript example.");

</script>

</body>

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

</html>

Explanation:

• When the button is clicked, the onclick event triggers the showMessage() function.

• The function displays an alert box with the message "Hello! This is a JavaScript example."

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

Answer:
To create scrolling text on a webpage, you can use the <marquee> tag (deprecated) or CSS
animations for a modern approach.

Steps to Create Scrolling Text Using CSS Animation:

1. Define the HTML structure for the text.

2. Use the @keyframes rule in CSS to create a scrolling effect.

3. Apply the animation to the text.

Code Example:

<!DOCTYPE html>

<html>

<head>

<title>Scrolling Text Example</title>

<style>

.scrolling-text {

width: 100%;

overflow: hidden;

white-space: nowrap;

box-sizing: border-box;

.scrolling-text p {

display: inline-block;

padding-left: 100%;

animation: scroll-left 10s linear infinite;

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

@keyframes scroll-left {

0% {

transform: translateX(0);

100% {

transform: translateX(-100%);

</style>

</head>

<body>

<div class="scrolling-text">

<p>This is a scrolling text created using CSS animations!</p>

</div>

</body>

</html>

Explanation:

• The @keyframes rule defines the movement from 0% to 100% horizontally.

• The text scrolls continuously from right to left using the transform: translateX property.

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

Answer:

To add a video clip to a website that starts playing when the webpage loads, follow these steps:

1. Use the <video> tag in HTML.

2. Add the autoplay attribute to start the video automatically.

3. Include the loop attribute if you want the video to replay continuously.

4. Use the controls attribute to provide play, pause, and volume options (optional).

Code Example:

<!DOCTYPE html>

<html>

<head>

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

<title>Auto-Playing Video</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<video width="640" height="360" autoplay loop muted>

<source src="example-video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

</body>

</html>

Explanation:

• The autoplay attribute starts the video as soon as the webpage loads.

• The loop attribute restarts the video once it ends.

• muted ensures the video plays without sound initially (required by modern browsers for
autoplay).

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

Answer:

To display examination results in a tabular format on a webpage:

1. Use the <table> tag in HTML.

2. Define table headers with <th> and rows with <tr>.

3. Add data to cells using <td> (table data).

4. Style the table with CSS for better presentation.

Code Example:

<!DOCTYPE html>

<html>

<head>

<title>Examination Results</title>

<style>

table {

width: 50%;

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

border-collapse: collapse;

margin: 20px auto;

th, td {

border: 1px solid black;

text-align: center;

padding: 8px;

th {

background-color: lightblue;

td {

background-color: lightyellow;

</style>

</head>

<body>

<h1>My Examination Results</h1>

<table>

<tr>

<th>Subject</th>

<th>Marks</th>

</tr>

<tr>

<td>Mathematics</td>

<td>90</td>

</tr>

<tr>

<td>Science</td>

<td>85</td>

</tr>

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

<tr>

<td>English</td>

<td>88</td>

</tr>

</table>

</body>

</html>

Explanation:

• A table is created with subject names and marks.

• border-collapse: collapse; ensures a clean table border.

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

Answer:

To add a "Revert" button that reverses the color and index values, use JavaScript to change styles
dynamically.

Code Example:

<!DOCTYPE html>

<html>

<head>

<title>Revert Button Example</title>

<style>

.box {

width: 200px;

height: 100px;

text-align: center;

line-height: 100px;

background-color: lightblue;

color: black;

margin: 20px auto;

</style>

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

</head>

<body>

<div class="box" id="box">Original</div>

<button onclick="revertChanges()">Revert</button>

<script>

function revertChanges() {

let box = document.getElementById("box");

box.style.backgroundColor = "black";

box.style.color = "white";

box.innerHTML = "Reverted";

</script>

</body>

</html>

Explanation:

• The onclick event on the "Revert" button calls the revertChanges() function.

• The function dynamically changes the box's background color, text color, and inner content
using style and innerHTML.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

Extera Short Questions (Topic Wise)

3.1 Introduction
1. What is programming?
Programming is the process of writing instructions (code) for a computer to perform specific tasks.
These instructions are written in programming languages like C, Python, or Java.

2. What is the role of a programming language?


A programming language provides a set of rules and syntax to communicate with computers,
enabling developers to write code for creating software, websites, and applications.

3. What are the main components of a computer program?


1. Input: Data given to the program.
2. Processing: Instructions to process the input data.
3. Output: Result after processing the data.

4. Why is programming important?


Programming is important as it:
- Automates tasks.
- Solves real-world problems.
- Creates software, applications, and websites.

3.2 HTML
1. What is HTML and what does it stand for?
HTML stands for HyperText Markup Language. It is used to create the structure and content of
webpages.

2. Write the basic structure of an HTML document.


```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
```

3. What is the purpose of the <head> and <body> tags?


The <head> tag contains meta information, links to CSS/JS files, and the page title. The <body> tag
contains visible content such as text, images, and links.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

4. What are the commonly used tags in HTML?


1. <h1> to <h6>: Headings.
2. <p>: Paragraph.
3. <a>: Hyperlink.
4. <img>: Image.
5. <ul> and <li>: Lists.

3.3 Cascading Style Sheets (CSS)


1. What is CSS and why is it used?
CSS stands for Cascading Style Sheets. It is used to style and format HTML elements, such as changing
colors, fonts, and layouts.

2. What are the three types of CSS?


1. Inline CSS: Written directly in the HTML element.
2. Internal CSS: Written in the <style> tag inside the <head>.
3. External CSS: Stored in a separate .css file and linked using <link>.

3. How do you change the background color of a webpage using CSS?


```css
body {
background-color: lightblue;
}
```

4. What is the difference between id and class selectors in CSS?


1. id Selector: Targets a single, unique element (#id).
2. class Selector: Targets multiple elements with the same class (.class).

3.4 JavaScript
1. What is JavaScript and why is it important?
JavaScript is a programming language that adds interactivity and dynamic behavior to webpages. It is
important for handling events, creating animations, and validating forms.

2. Write a simple JavaScript program to display an alert.


```html
<script>
alert("Hello, JavaScript!");
</script>
```

3. What is an event in JavaScript?


An event is an action triggered by a user, such as clicking a button, submitting a form, or hovering
over an element.

4. How do you link a JavaScript file to an HTML document?


You use the <script> tag to link an external JavaScript file:
```html

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

<script src="script.js"></script>
```

3.5 Debug The Code


1. What does debugging mean?
Debugging is the process of finding and fixing errors or bugs in a program to ensure it works as
intended.

2. What are the common types of errors in programming?


1. Syntax Error: Mistakes in code structure or spelling.
2. Logical Error: Incorrect logic leading to wrong results.
3. Runtime Error: Errors that occur during program execution.

3. Which tools can be used for debugging JavaScript code?


Tools for debugging JavaScript include:
1. Browser Developer Tools (F12).
2. console.log() for displaying messages in the console.

4. Write a JavaScript code snippet that uses console.log for debugging.


```javascript
let a = 10;
let b = 20;
console.log("Sum:", a + b); // Outputs: Sum: 30
```

3.6 Create a Dynamic Website


1. What is a dynamic website?
A dynamic website displays content that changes based on user interaction or server data. Example:
E-commerce websites.

2. Which technologies are used to create dynamic websites?


Technologies include:
1. HTML/CSS for structure and styling.
2. JavaScript for interactivity.
3. Backend languages like PHP, Python, or Node.js.

3. How can you use JavaScript to create a dynamic website feature?


Example: Button that changes text on click:
```html
<button onclick="changeText()">Click Me</button>
<p id="text">Original Text</p>
<script>
function changeText() {
document.getElementById("text").innerHTML = "Text Changed!";
}
</script>
```

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

4. What is the role of a database in a dynamic website?


A database stores user data (e.g., login details, product information) and retrieves it dynamically for
display on the website.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

Extera Long Questions (Topic Wise)

1. Explain the importance of HTML in web development with examples of its


basic structure and commonly used tags.
HTML (HyperText Markup Language) is the backbone of web development. It provides the structure
and layout for webpages, making it essential for creating any website.

Key Features of HTML:


1. It defines the webpage's content and layout using tags.
2. It supports multimedia elements like images, videos, and links.
3. HTML is easy to learn and compatible with all web browsers.

Basic Structure of HTML:


An HTML document begins with a specific structure:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of a basic HTML document.</p>
</body>
</html>
```

Commonly Used HTML Tags:


1. <h1> to <h6>: Define heading levels.
2. <p>: For text content.
3. <a>: Add hyperlinks.
4. <img>: Add images.
5. <ul> and <ol>: For unordered and ordered lists.

Importance in Web Development:


- HTML ensures the webpage is readable and accessible.
- It works seamlessly with CSS and JavaScript to create dynamic websites.
- Without HTML, web browsers would not be able to display content.

2. Describe CSS, its types, and its role in enhancing the appearance of
webpages. Include code examples.
CSS (Cascading Style Sheets) is used to design and style HTML elements. It enhances the webpage's
visual presentation by modifying layout, colors, fonts, and spacing.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

Role of CSS in Web Development:


- It separates content (HTML) from design.
- It improves user experience by adding aesthetics.
- It ensures consistency across webpages.

Types of CSS:
1. **Inline CSS:** Applied directly to an HTML tag.
```html
<p style="color: blue; font-size: 20px;">This is Inline CSS.</p>
```
2. **Internal CSS:** Defined within the `<style>` tag in the HTML document.
```html
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is Internal CSS.</p>
</body>
</html>
```
3. **External CSS:** Stored in a separate `.css` file and linked to the HTML file.

CSS File (`style.css`):


```css
body {
background-color: lightgray;
}
h1 {
color: red;
text-align: center;
}
```
HTML File:
```html
<link rel="stylesheet" href="style.css">
<h1>Styled with External CSS</h1>
```

Conclusion:
CSS plays a crucial role in creating visually appealing, responsive, and modern websites.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

3. Explain the role of JavaScript in adding interactivity to a webpage. Write a


sample script for a dynamic button click feature.
JavaScript is a programming language that makes webpages interactive and dynamic. It enables
features like event handling, animations, form validations, and real-time updates.

Key Features of JavaScript:


1. Adds behavior to webpages.
2. Handles user events like clicks, mouse movements, and keyboard input.
3. Modifies the Document Object Model (DOM) dynamically.
4. Works alongside HTML and CSS to build full-featured websites.

Example: Button Click Feature


This script changes the content of a paragraph when the button is clicked.

```html
<!DOCTYPE html>
<html>
<head>
<title>Button Click Example</title>
</head>
<body>
<h1>JavaScript Button Click Example</h1>
<p id="output">Original Text</p>
<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
document.getElementById("output").innerHTML = "Text Changed!";
}
</script>
</body>
</html>
```

Importance of JavaScript:
- It makes webpages more engaging and user-friendly.
- It enables real-time updates without refreshing the page (AJAX).
- It is widely used in modern frameworks like React, Angular, and Vue.

4. What is debugging? Discuss the common errors in programming and write an


example of debugging code using JavaScript.
Debugging is the process of finding and fixing errors (bugs) in a program to ensure it works as
expected. Debugging tools help programmers identify issues and resolve them efficiently.

Common Types of Errors:


1. **Syntax Error:** Occurs when the code violates programming language rules. Example: Missing
semicolon.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

2. **Logical Error:** Incorrect logic in code leads to wrong output. Example: Using `+` instead of `-`.
3. **Runtime Error:** Occurs during program execution, like division by zero.

Debugging Tools:
- **Browser Developer Tools:** Use `console.log()` to display output in the browser console.
- **Breakpoints:** Pause code execution to inspect variables.

Example of Debugging Using `console.log`:


```html
<!DOCTYPE html>
<html>
<head>
<title>Debugging Example</title>
</head>
<body>
<h1>Debugging with Console Log</h1>
<script>
let x = 5;
let y = 10;
let sum = x + y;

// Debugging the sum


console.log("The value of x is:", x);
console.log("The value of y is:", y);
console.log("The sum of x and y is:", sum);
</script>
</body>
</html>
```

Output in Console:
```
The value of x is: 5
The value of y is: 10
The sum of x and y is: 15
```

Conclusion:
Debugging ensures that programs run correctly by identifying and fixing errors. Tools like
`console.log` simplify this process, making it easier to inspect code behavior.

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

MCQS

1. What does HTML stand for?

a) Hyper Transfer Markup Language b) HyperText Markup Language (✓) c) HighText Machine
Language d) None of these

2. Which tag is used to display the largest heading in HTML?

a) <h6> b) <h1> (✓) c) <p> d) <head>

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

a) To add an image b) To display text in bold c) To set the title of the webpage (✓) d) To
add hyperlinks

4. How do you apply an external CSS file to an HTML document?

a) Using <style> tag b) Using <link> tag (✓) c) Using @import d) None of these

5. What does CSS stand for?

a) Common Style Sheet b) Computer Style Sheet c) Cascading Style Sheets (✓) d) Colorful
Style Sheets

6. What is the function of JavaScript?

a) To structure a webpage b) To add interactivity to a webpage (✓) c) To style a


webpage d) To store data

7. Which property is used to change the text color in CSS?

a) font-color b) color (✓) c) text-color d) background-color

8. What does the console.log() function do in JavaScript?

a) Displays an alert box b) Logs messages to the browser console (✓) c) Adds a
breakpoint d) None of these

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

9. Which HTML tag is used to create a hyperlink?

a) <link> b) <a> (✓) c) <href> d) <p>

10. What is debugging?

a) Writing code b) Finding and fixing errors in code (✓) c) Testing websites d) Adding styles

11. Which tag is used to insert an image in HTML?

a) <img> (✓) b) <image> c) <picture> d) <src>

12. What is the correct syntax to apply a CSS class to an element?

a) class="name" (✓) b) id="name" c) style="name" d) css="name"

13. How do you write comments in JavaScript?

a) <!-- Comment --> b) // Comment (✓) c) /* Comment */ d) Both b and c

14. What is the output of 2 + 2 in JavaScript?

a) "22" b) 4 (✓) c) 2 d) NaN

15. Which CSS property sets the background color?

a) color b) background-color (✓) c) text-color d) style

16. Which JavaScript keyword declares a variable?

a) var b) let (✓) c) const d) All of the above

17. Which tool is used to debug JavaScript code?

a) Notepad b) Visual Studio c) Browser Developer Tools (✓) d) Paint

18. How do you create an ordered list in HTML?

a) <ul> b) <ol> (✓) c) <li> d) <order>

Notes created by AiNotes.pk 03195654756


Join Whatsapp Community Join Whatsapp Channel FaceBook Group

19. What does id in CSS target?

a) All elements b) A unique element (✓) c) A group of elements d) Classes

20. What is a dynamic website?

a) A webpage with only images b) A webpage with content that changes dynamically (✓) c) A
webpage with no CSS d) None of these

21. How do you apply JavaScript to an HTML file?

a) Using the <style> tag b) Using the <script> tag (✓) c) Using the <link> tag d) None of
these

22. Which symbol is used for comments in CSS?

a) # b) /* */ (✓) c) // d) <!-- -->

23. What does the innerHTML property do?

a) Changes the style b) Changes the content of an HTML element (✓) c) Deletes an
element d) None of these

24. Which tag is used to create a form in HTML?

a) <table> b) <form> (✓) c) <div> d) <button>

25. What is the default file extension for a CSS file?

a) .html b) .js c) .css (✓) d) .txt

Notes created by AiNotes.pk 03195654756

You might also like