Unit-3 PROGRAMMING FUNDAMENTALS

Q1. Identify and discuss the role of Web browsers, web pages, web servers, and search engines for
searching information.
Ans:
Web browser:
A web browser is a software application used to retrieve data from web pages or HTML files present in servers. A
Search Engine is a kind of website where a user can search for information, and the results based on the same are
displayed on the screen.

A search engine has three main components: Search index.

Some of the widely used web browsers are: Mozilla Firefox, Netscape Navigator, and Google Chrome.

Web page:
A web page is a simple document displayable by a browser. Such documents are written in the HTML language (which
we look into in more detail in other articles).

A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Edge, or
Apple Safari. These are also often called just "pages".

A web page can embed a variety of different types of resources such as:

 style information – controlling a page's look-and-feel

 scripts – which add interactivity to the page

 media – images, sounds, and videos.

Web server:
A web server is a computer hosting one or more websites. "Hosting" means that all the web pages and their
supporting files are available on that computer. The web server will send any web page from the website it is hosting
to any user's browser, per user request.

Search engine:
An Internet search engine is a web-based tool (a software) designed to search the content of web pages and to find
particular information on the Internet.

The most productive way to conduct a search on the internet is through a search engine. A web search engine is a
software system designed to search for information on the World Wide Web. The search results are generally
presented in a line of results often referred to as search engine results pages (SEROs). The information may be a mix of
web pages, images, and other types of files. Some search engines also mine data available in databases or open
directories.

Some popular search engines:

 Google

 Yahoo!

 Bing

 Ask.com

 Internet Explorer

 Baidu

 DuckDuckGo

 Yandex

1|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
 Q2. Define the terms HTML, CSS, and JavaScript.
 Ans:
HTML:
HTML stands for HyperText Markup Language. It is the language that defines how a page should
look. In addition to defining the layout of a page, HTML contains tags that describe what each section
of a webpage is about.
 CSS:
CSS stands for Cascading Style Sheets. It is a way to define the style of a webpage. CSS includes
rules that tell browsers how to display a webpage.
 JavaScript:
JavaScript is a scripting language that enables developers to add interactivity to web pages.
JavaScript is used to create animations, change styles, and even play sounds.
 Q3. What is the purpose of HTML?
 Ans:
HTML, HyperText Markup Language, is used to create Web pages and tells the browser how to
display them. It designs the basic layout and formatting of Web pages. HTML is made up of elements
or tags and attributes which work together to identify document parts and tell the browser how to
display them.
 Q4. What is the purpose of the main tag in HTML?
 Ans:
The <main> tag specifies the main content of a document. The content inside the <main> element
should be unique to the document. It should not contain any content that is repeated across
documents, such as sidebars, navigation links, copyright information, site logos, and search forms.
 Q5. What is the role of the HTML tag?
 Ans:
The basic purpose of this tag is to make the browser and text editor identify that the document is an
HTML document. This is a container element and does not affect the appearance of the document.
The element contains only the end elements which in turn contain a number of other elements.
 Q6. What is the purpose of the definition tag in HTML?
 Ans:
The <dfn> tag stands for the "definition element," and it specifies a term that is going to be defined
within the content. The nearest parent of the <dfn> tag must also contain the definition/explanation
for the term.
 Q7. What is the purpose of #tag?
 Ans:
People use tags to aid classification, mark ownership, note boundaries, and indicate online identity.
Tags may take the form of words, images, or other identifying marks. An analogous example of tags
in the physical world is museum object tagging.
 Q8. What is HTML?
 Ans:
HTML stands for HyperText Markup Language. It is the standard markup language used to create
and design web pages.
 Q9. Who invented HTML?
 Ans:
HTML was invented by Sir Tim Berners-Lee, a British computer scientist, in 1991.
 Q10. What is the purpose of HTML?
 Ans:
The purpose of HTML is to structure the content of web pages by using tags to define various
elements such as headings, paragraphs, images, links, and more.
 Q11. What are HTML tags?
 Ans:
HTML tags are elements used to mark up and define different parts of a web page. They are enclosed
in angle brackets (< >) and come in pairs, with an opening tag and a closing tag.
2|P ag e EMP SCHOOL RAWALPINDI 03130603330
 Unit-3 PROGRAMMING FUNDAMENTALS
 Q12. What is the structure of an HTML document?
 Ans:
An HTML document consists of several elements including the <!DOCTYPE> declaration, <html>
element, <head> section (containing metadata), and <body> section (containing the visible content).
 Q13. How do you create a heading in HTML?
 Ans:
You create a heading in HTML using the <h1> to <h6> tags, where <h1> represents the highest level
of heading and <h6> the lowest.
 Q14. What is the <p> tag used for in HTML?
 Ans:
The <p> tag is used to define paragraphs in HTML, indicating that the enclosed text is a separate
block of content.
 Q15. How do you insert an image in HTML?
 Ans:
You insert an image in HTML using the <img> tag, with the src attribute specifying the image file's
URL and the alt attribute providing alternative text for accessibility.
 Q16. What is the purpose of the <a> tag in HTML?
 Ans:
The <a> tag, also known as the anchor tag, is used to create hyperlinks in HTML, allowing users to
navigate between different web pages or sections within the same page.
 Q17. How do you create a hyperlink in HTML?
 Ans:
You create a hyperlink in HTML using the <a> tag, with the href attribute specifying the destination
URL and the enclosed text serving as the clickable link.
 Q18. What is semantic HTML?
 Ans:
Semantic HTML refers to using HTML elements that convey meaning about the content they contain,
making web pages more accessible, searchable, and understandable to both users and search engines.
 Q19. How do you create a list in HTML?
 Ans:
You create an ordered list in HTML using the <ul> tag and add list items using the <li> tag. For
ordered lists, you use the <ol> tag instead of <ul>.
 Q20. What is the purpose of the <div> tag in HTML?
 Ans:
The <div> tag is a generic container element used to group and style other HTML elements. It is
commonly used for layout purposes and to apply CSS styles.
 Q21. How do you add comments in HTML?
 Ans:
You add comments in HTML using the <!-- --> syntax. Anything placed between <!-- and -->
will be ignored by the browser and not displayed on the web page.
 Q22. What is the <br> tag used for in HTML?
 Ans:
The <br> tag, or line break tag, is used to insert a single line break in HTML, allowing you to create
space between lines or break lines of text.
 Q23. How do you create a table in HTML?
 Ans:
You create a table in HTML using the <table> tag, with additional tags such as <tr> for table rows,
<th> for table headers, and <td> for table cells.
 Q24. What is the purpose of the <form> tag in HTML?
 Ans:
The <form> tag is used to create interactive forms on web pages, allowing users to input data such as
text, checkboxes, radio buttons, and submit buttons.

3|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
 Q25. How do you create an input field in HTML?
 Ans:
You create an input field in HTML using the <input> tag, with the type attribute specifying the type
of input (e.g., text, password, email, number).
 Q26. What is the purpose of the <meta> tag in HTML?
 Ans:
The <meta> tag is used to provide metadata about the HTML document, such as character encoding,
viewport settings, author information, and keywords for search engines.
 Q27. How do you include external CSS stylesheets in HTML?
 Ans:
You include external CSS stylesheets in HTML using the <link> tag within the <head> section, with
the href attribute specifying the URL of the CSS file and the rel attribute set to 'stylesheet'.
 Q28. Analyze the role of HTML in Website Development?
 Ans:
Website Development:
Web development is the process of building and maintaining websites and web applications for the
Internet. Web development provides a wide range of advantages that help firms have a successful
online presence. The role of HTML in web development is to provide the backbone and structure of a
web page.
 With HTML, web developers can define the headings, paragraphs, lists, images, links, and other
elements that make up the content of a web page. They can also create forms for user input, embed
multimedia content like videos and audio, and design atomic elements for accessibility and search
engine optimization.
 In summary, HTML plays a vital role in web development by providing the foundational structure of
web pages, allowing developers to define and organize content, and forming the basis for further
enhancements with CSS and JavaScript.

Q29. Differentiate between Static and Dynamic Website?

Ans:
Difference between Static and Dynamic Website:

Static Website Dynamic Website

(i) The content of Web pages cannot be changed at (i) Web page content can be modified.
runtime.

(ii) There is no way to interact with the database. (ii) Database interaction is conceivable.

(iii) When compared to a dynamic website, it loads (iii) It takes longer time than a static webpage.
quicker.

(iv) Development expenses are lower. (iv) More development expenses.

4|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
(v) The website is built using HTML, CSS, and (v) PHP and Node.js are utilized as server-side languages.
JavaScript.

(vi) Every time the page is loaded, the same (vi) The content of the page may vary each time it is loaded.
content is provided.

(vii) The biggest advantage of a static website is its (vii) The key advantage of a dynamic website is Content
flexibility. Management System.

The following are some prominent examples of Static Websites:

 Resume websites

 Portfolio websites

 Brochure websites

 Blog websites

 Newsletter Contents

 Unique landing pages

 Website presentation

The following are some prominent examples of Dynamic Websites:

 E-commerce sites

 Twitter

 Netflix

 Facebook

 Amazon

 HubSpot

 Calendars, or to-do sites

Q30. Differentiate between Front-End and Back-End Development?

Ans:
Difference between Front-End and Back-End Development:

Aspects Front End Back End

Definition Front-end development involves the Back-end development involves the

visual components within a website/app. implementation of databases and other server-
side assets.

Skills Required HTML, CSS, SASS, and JavaScript Python, Ruby, Java, and PHP

Independence Cannot work independently of the back- Works independently of the front-end structure
end structure

Goal Accessibility and visual appeal Scalability and low latency

5|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Frameworks Angular, ReactJS, VueJS Django, Laravel, Ruby

Additional Skills UI/UX design proficiency Analytical and problem-solving approach

Required

Q31. What is the difference between frontend and backend development?

Ans:
The main difference lies in their focus areas; frontend development is concerned with the look and feel of a site or
app, while backend development is focused on the functionality, database management, and server-side logic that
supports the frontend.

Q32. Can a developer work on both frontend and backend?

Ans:
Yes, a developer who works on both frontend and backend is known as a full-stack developer. They have the skills
and knowledge to handle the entire development process, making them highly versatile.

Q33. What skills are required for frontend development?

Ans:
Frontend developers need to be proficient in HTML, CSS, JavaScript, and frameworks/libraries like React, Angular, or
Vue.js. Skills in responsive design and understanding UX/UI principles are also important.

Q34. What skills are necessary for backend development?

Ans:
Backend developers should be skilled in server-side languages like Python, Ruby, PHP, or Java and understand
database management systems such as MySQL, MongoDB, or PostgreSQL. Knowledge of server, API, and application
logic is crucial.

Q35. Which is more important, frontend or backend development?

Ans:
Both are equally important. The frontend is vital for user engagement and experience, while the backend ensures the
website or app functions correctly and securely. A successful project needs both to work seamlessly together.

Q36. How do frontend and backend developers work together?

Ans:
Frontend and backend developers collaborate closely to ensure the user interface is effectively integrated with the
server-side logic. They align on design insights, discuss functionalities, and ensure the seamless performance of the
entire application or website.

Q37. What are some common tools used in frontend development?

Ans:
Common tools include text editors (VS Code, Sublime Text), version control systems (Git), and frontend
frameworks/libraries (React, Angular, Vue.js) along with design tools (Adobe XD, Sketch).

Q38. What are some common tools used in backend development?

Ans:
Backend developers often use server-side frameworks (Django, Express.js), database management tools (MySQL,

6|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Workbench, MongoDB Compass), and testing frameworks (JUnit, Mocha) to build and maintain the server-side of an
application.

Q39. Is it better to specialize in frontend or backend development, or become a full-stack developer?

Ans:
It depends on your interests and career goals. Specializing allows you to become an expert in one area, while being a
full-stack developer offers versatility and a broader range of job opportunities. Both paths have their advantages.

Q40. What is the significance of <head> and <body> tag in HTML?

Ans:
The <head> tag provides information about the document. It should always be enclosed in the <html> tag. This tag
contains the metadata about the webpage and the tags which are enclosed by head tags like <link>, <meta>, <style>,
<script>, etc. are not displayed on the web page. Also, there can be only one <head> tag in the entire HTML
document and will always be before the <body> tag.

The <body> tag defines the body of the HTML document. It should always be enclosed in the <html> tag. All the
contents which need to be displayed on the webpage like images, text, audio, video, contents, using elements like
<p>, <img>, <audio>, <heading>, <video>, <div>, etc. will always be enclosed by the <body> tag. Also, there can be
only one body element in an HTML document and will always be after the <head> tag.

Q41. What are the various formatting tags in HTML?

Ans:
HTML has various formatting tags:

 <b> – makes text bold

 <i> – makes text italic

 <em> – makes text italic but with added semantics importance

 <big> – increases the font size of the text by one unit

 <small> – decreases the font size of the text by one unit

 <sub> – makes the text a subscript

 <sup> – makes the text a superscript

 <del> – displays as strikeout text

 <strong> – marks the text as important

 <mark> – highlights the text

 <ins> – displays as added text

Q42. What option do you have for customizing the Installing Visual Studio?

Ans:
Installing Visual Studio: For installing the latest Integrated Development Environment (IDE) of Microsoft Visual
Studio, visit https://visualstudio.microsoft.com/vs/ and download the installer. The installer is an executable file (.exe
extension), and you just need to double-click to start the installation.

Microsoft Visual Studio is a wide-ranging IDE which can be used for writing software for more than 30 languages.
Moreover, it allows you to choose the language environment. Once selected, click "install" and it will download and
install the IDE on your system (PC/Laptop). After the installation, you can run the IDE from your system.

7|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Q43. Discuss the role of element interface in the HTML Document Object Model including the properties for
assessing elements nodes?

Ans:
HTML Document Object Model:
The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical
structure of documents and the way a document is accessed and manipulated.

The Document Object Model (DOM) is a standard, which provides mutual interpretation where grammar of a
language can be associated with and can coexist on various operating systems.

In HTML, every file is interpreted as a DOM tree where the hierarchy of the said file is defined.

Importance of DOM tree:

The DOM tree helps developers access and change different parts of the page, such as headings, paragraphs, images,
and forms.

Simpler approach in locating any object in a web page via accessing the DOM tree is 'element-id'. So, we will call
function like 'get Element By Id ('')' and it will either return the object of the element we seek if it is able to locate it
else a null value is returned.

Q44. Mention the purpose of <html> Tags in an HTML document and what elements are typically contain within it?

Ans:
Tags in HTML:
HTML tags are the keywords on a web page that define how your web browser must format and display your web
page. Almost all tags contain two parts, an opening and a closing tag. For example, <html> is the opening tag and
</html> is the closing tag.

HTML Tag:
Any html is identified with the <html> and </html> tag-pair, i.e. anything written between this tag-pair is recognized
as an html document.

8|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
An HTML-Document is arranged just like a simple document that you write and prepare in Notepad, Wordpad or MS
Word, etc., with headings, sub-headings, sentences, etc. Similar to <html> tag-pair, everything is characterized
according to its respective tag-pair. The file is saved with extension .html.

Head Tag:
The <head> tag-pair is defined, where tags can be placed which are not part of the main body of html, like the title of
the webpage.

Title Tag:
Just like every document has a name, the <title> tag-pair allows your webpage a name. This way, even if multiple
pages or tabs are open in the browser, a webpage is easily identifiable.

Body Tag:
The main part of the html is the body, all the 'main constituents' of the document are arranged in the <body> tag-
pair.

Tag for Headings:

The headings are of different levels provided by html and there are 6 defined levels, 1 being the biggest and 6 is the
smallest heading. The heading tag pair looks like <h2>...</h2>, for a second-level heading.

Tag for Line Break:

To split a sentence into multiple lines a <br> tag is used. If this tag is not used between 2 sentences, and even you
write the second sentence on a new line; html does not recognize this style and will put both the sentences in the
same line, one after the other.

The title of the page is between head tag-pair followed by the body, and is shown on the browser's tab in the output.
Note that everything written in the body is displayed on the webpage. Thereafter, you can assign suitable headings
and paragraphs, with necessary line breaks.
Tag for The Text:
Span is used to provide style and arrangement to a line. For multiple lines you need to assign the <span> tag-pair on
every line. Whereas, <div> provides the same effect to a set of lines present in the page. The style and classes, etc.
are generally applied in the div tag-pair.
The <i> tag-pair is used for a sentence to be in italics, like a note. The <em> tag-pair is for emphasis, whereas <b> and
<strong> tag-pair are used for display of bold and strong characters.

List of Frequent Tags used in Text:

Frequently used tags are listed in Table.

Tag-Pair For the Task

<p> Paragraph, sentence

<b> To make characters bold

<i> To show text in italics

<em> When you need to emphasize a word but with italics.

Q45. HTML treats bullets and numbering in the form of an unordered <ul> and ordered list <ol>, respectively in a
text. Explain.

9|P ag e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
Bullets & Numbering:
HTML treats bullets and numbering in the form of an unordered <ul> and ordered list <ol>, respectively. Bullets can
be of type circle, square, or disc. The numbered list has the option of numerals and alphabets to choose from, just
like a word editor.

Q46. How do you create a basic table structure in HTML (Student record with fee submitted)?

Ans:
Manipulating Data with Tables:
Tables in HTML:
Tables are a good way to enlist data which is visually appealing. HTML provides the <table> tag-pair to allocate and
designate data within the table. The first row of the table is the header row and is generally used for headings and is
defined with the <th> tag-pair.

Whereas data is manipulated through the <td> tag-pair.

Q47. Mention the purpose of HTML Tags to create a hyperlink to a resource in a Webpage / Website?

Ans:
Links to Resources:
Links are helpful components of a webpage, via which you can redirect to another webpage or a document. Links are
called Hyperlinks in HTML with <a> tag-pair. Hyperlinks are easy to identify on a webpage, as the mouse cursor
changes as soon as the cursor touches a link element. Hyperlinks can be associated not only to text but to images as
well.

The general syntax for defining a link is like <a href="url">link text</a>, where href refers to the address along with
the path and link-text is for user information. Target is an optional parameter but its value defines where to open the
webpage. If the value chosen is 'blank,' it will open in a new tab or window; however, for the value of 'self' the
selected webpage will open in the same tab or window.

Q48. What does CSS stand for?

Ans:
CSS stands for Cascading Style Sheets.

Q49. What is the purpose of CSS?

Ans:
The purpose of CSS is to style and format HTML elements on a web page, controlling aspects like layout, color, font,
and spacing.

Q50. Who invented CSS?

Ans:
CSS was proposed by Hakon Wium Lie and Bert Bos in 1996.

Q51. What is the advantage of using CSS?

Ans:
Using CSS allows for consistency, easier maintenance, faster loading times, and separation of content and
presentation.

Q52. How do you apply CSS to HTML elements?

10 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
CSS can be applied to HTML elements using inline styles, internal style sheets, or external style sheets.

Q53. What is the syntax for an inline CSS style?

Ans:
The syntax for an inline CSS style is to use the style attribute within an HTML element, like this: <p style="color:
blue;">.

Q54. What is the syntax for an internal CSS style?

Ans:
The syntax for an internal CSS style is to include CSS rules within a <style> element in the <head> section of an HTML
document.

Q55. What is the syntax for an external CSS style?

Ans:
The syntax for an external CSS style is to link to an external CSS file using the <link> element within the <head>
section of an HTML document.

Q56. What are CSS selectors?

Ans:
CSS selectors are patterns used to select and style HTML elements. They can target elements based on their tag
name, class, ID, attributes, or relationship with other elements.

Q57. How do you target an element by its class in CSS?

Ans:
You target an element by its class in CSS using a dot followed by the class name, like this: .classname {}.

Q58. How do you target an element by its ID in CSS?

Ans:
You target an element by its ID in CSS using a hash symbol followed by the ID name, like this: #idname {}.

Q59. What is the difference between a class and an ID in CSS?

Ans:
A class can be applied to multiple elements, while an ID should be unique within a document and can only be applied
to one element.

Q60. How do you add comments in CSS?

Ans:
Comments in CSS are added using /* to start the comment and */ to end it, like this: /* This is a comment */.

Q61. What is the CSS box model?

Ans:
The CSS box model describes the structure of HTML elements as having content, padding, borders, and margins.

Q62. What are the four values of the CSS display property?

Ans:
The four values of the CSS display property are block, inline, inline-block, and none.

Q63. How do you change the background color of an element in CSS?

11 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
You change the background color of an element in CSS using the background-color property, like this: background-
color: blue;.

Q64. How do you change the font color of an element in CSS?

Ans:
You change the font color of an element in CSS using the color property, like this: color: red;.

Q65. How do you change the font size of an element in CSS?

Ans:
You change the font size of an element in CSS using the font-size property, like this: font-size: 16px;.

Q66. How do you center an element horizontally in CSS?

Ans:
You can center an element horizontally in CSS by setting its margin property to auto.

Q67. How do you add padding to an element in CSS?

Ans:
You add padding to an element in CSS using the padding property, like this: padding: 10px;.

Q68. Elaborate steps for Decorating Table with Cascading Style Sheets (CSS)?

Ans:
Decorating Tables with CSS:
By using CSS, you can provide borders in tables as well. For this purpose, we initially need to state the style tag-pair
just before the start of the table and later inside the block, we need to set which style to opt for and where to apply
it. As shown in the following code, as shown in the figure we are defining borders for the table, table header, cells,
and every other cell in the table. Other than that, we can also designate a background color for the table.

Q69. What is JavaScript?

12 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
JavaScript is a programming language used to create interactive and dynamic elements on web pages.

Q70. Who developed JavaScript?

Ans:
JavaScript was developed by Brendan Eich while working at Netscape Communications Corporation.

Q71. What is the purpose of JavaScript in web development?

Ans:
The purpose of JavaScript is to add interactivity, validate forms, manipulate HTML and CSS, create animations, and
develop dynamic web applications.

Q72. Where is JavaScript code typically placed in an HTML document?

Ans:
JavaScript code can be placed within the <script> tags in the <head> or <body> section of an HTML document.

Q73. How do you comment in JavaScript?

Ans:
In JavaScript, you can comment single-line using // or multi-line using /* */.

Q74. What are variables in JavaScript?

Ans:
Variables in JavaScript are used to store and manipulate data. They can hold various data types, such as numbers,
strings, arrays, and objects.

Q75. How do you declare a variable in JavaScript?

Ans:
You declare a variable in JavaScript using the var, let, or const keyword, followed by the variable name and optional
initial value.

Q76. What is the difference between var, let, and const in JavaScript?
Ans:
var is function-scoped, let is block-scoped, and const is block-scoped and cannot be reassigned.

Q77. How do you display output in JavaScript?

Ans:
You can display output in JavaScript using the console.log() function to log messages to the browser console or
document.write() to write directly to the HTML document.

Q78. What are data types in JavaScript?

Ans:
Data types in JavaScript include numbers, strings, booleans, arrays, objects, null, and undefined.

Q79. How do you concatenate strings in JavaScript?

Ans:
You can concatenate strings in JavaScript using the + operator or the concat() method.

Q80. What is an array in JavaScript?

13 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
An array in JavaScript is a data structure used to store multiple values in a single variable. It can hold elements of
different data types and is indexed starting from 0.

Q81. How do you access elements in an array in JavaScript?

Ans:
You access elements in an array using square brackets [] with the index of the element you want to retrieve.

Q82. What are conditional statements in JavaScript?

Ans:
Conditional statements in JavaScript, such as if, else if, and else, are used to execute different code blocks based on
certain conditions.

Q83. How do you create a loop in JavaScript?

Ans:
You can create loops in JavaScript using for, while, or do...while loops to execute a block of code repeatedly.

Q84. What is the purpose of functions in JavaScript?

Ans:
Functions in JavaScript are reusable blocks of code that perform a specific task. They help in organizing code,
improving readability, and reducing redundancy.

Q85. How do you define a function in JavaScript?

Ans:
You define a function in JavaScript using the function keyword followed by the function name, parameters (if any),
and the code block enclosed in curly braces {}.

Q86. What is a parameter in JavaScript functions?

Ans:
A parameter in JavaScript functions is a placeholder for data that the function expects to receive when it is called.
Parameters are specified within the parentheses of the function declaration.

Q87. How do you call a function in JavaScript?

Ans:
You call a function in JavaScript by using its name followed by parentheses (), optionally passing arguments inside the
parentheses if the function expects parameters.

Q88. What is an event in JavaScript?

Ans:
An event in JavaScript is an action or occurrence, such as clicking a button, hovering over an element, or pressing a
key, to which a script can respond.

Q89. How does JavaScript handle variable naming conventions, particularly regarding the first character of a
variable name?
OR
In what scenarios might developers encounter issues with variable scope in JavaScript?

Ans:
Variables:
A variable is an entity that stores some value for later use. In mathematics, a variable is generally represented by a

14 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
single character, but not limited to. Similarly, in programming languages, a variable should be named in a meaningful
manner. Additionally, the type of values the said variable can store is another important aspect. Such that the
developer after defining and assigning a variable, is later able to recall about the task and type of values the said
variable holds. The basic value that a variable can hold in JavaScript is either a number or a set of characters (called
string) or a Boolean which is either 'true' or 'false'. It is critical to note that variable.

Naming convention does not support a number to be the first character of the variable name. Since Javascript is case
sensitive, therefore, 'reward' and 'Reward' are two different variables.

Table 3-2: Basic Data Types of JavaScript

Data Type Sample Value

Number 7359

String JAVA

Boolean TRUE

Basic data types supported by Javascript with sample values.

A variable is declared with the "var" keyword, and multiple variables can be declared in the same line of code, too.
The first-ever assignment of a value to a variable in the lifespan of the program is called initialization. A good
programming practice is to declare and initialize the variable at the same time.

It is important to note that the sequence of instructions in programming matters. For example, let's look at the
following code, where we defined two variables and, keeping good practice in mind, declared and initialized a
variable name. in line 7. However, just to highlight how things can be alternatively done, we declared the reward
variable in line 8 but the initial value was assigned to it in the next line. In line 12 we print the statement using both
the variables, as shown in the figure.

This is due to the reason that the variable is defined after the write statement is using the variable. Unless the
variable is declared and holds a value, only then it can be used as per the programming sequence. Hence, the
sequence of instructions is important, and though you might have written a program syntax-wise correctly, the
change of sequence might lead you to unexpected bugs.

Q90. How does JavaScript support/handle arithmetic operators?

15 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
Operators:
JavaScript supports arithmetic operators to be used, which are Addition (+), Subtraction (−), Multiplication (*) and
Division (/). Other than this, the Modulus (%) operator can also be used, which gives the remainder of a division
operation.

The code shown in fig-25 takes 3 variables, namely, 'a', 'b', and reward. Only reward is initialized through a constant
value in line 5. In lines 6 and 7, the remainder of reward divided by 10 is stored in 'a' and 'b' is assigned the value
when reward is divided by 10, respectively.

Q91. JavaScript provides a set of comparison operators to be used for evaluating the conditional statement?
Discuss with the examples of school checks at the age of school child.

Ans:
Conditional Statement:
Conditional or selection statements are an essential part of the program where, amongst choices, the program
chooses based on some constraint. Applying an 'if statement' before one or more lines of code based on some
condition being met makes a typical selection scenario. That is, if the condition is met, then those line(s) will be
executed; otherwise, they will be skipped.

Now, to check the condition, JavaScript provides a set of comparison operators to be used for evaluating the
condition. The conditional operators are listed in the table.

For example, the admission office of a Montessori school checks the age of a child; if the kid is at least 4 years old,
then admission is granted. So, the code should look something like:

Operator Name Example

== Is equal x == y

!= Is not equal x != y

> Greater than x>y

< Less than x<y

16 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
>= Greater than or equal to x >= y

<= Less than or equal to x <= y

Q92. How 'if-else if' statements are used for checking different comparison operators?
Ans:
You may check it for different values of the variable and also for different comparison operators.

A better notion is to align both the scenarios, i.e., if the condition is met and vice versa. This is achieved using an 'if-
else' statement. This way, either of the two situations will definitely happen.

There are scenarios where more than two possibilities exist, and for that reason, we can modify our selection
statement to be an 'if-else if-else' statement. This way, the set of conditions applies, first with 'if' and thereafter with
'else if' statements. For any other condition that has not been catered for, 'else' will take care of it.

17 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS

Q93. How does the terminating condition of a "for loop" determine when the loop will stop iterating?

Ans:
Iterative Statement:
An iterative statement like a 'For Loop' is used to get a similar kind of task done. Rather than writing the same line of
code multiple times, the same task is achieved in much less time. The 'for loop' works on the basis of an index, which
you can initialize in the loop. Next is the terminating condition, which needs to be set for the loop to terminate.
Lastly, the step size needs to be defined, indicating how many steps the index will take after each iteration until the
terminating condition is met. In the following example 'for loop,' an index is initialized, and the value of the index will
increment by 1, and the loop will execute until the index value remains less than 10.

Alternatively, we can decrease the index value and set the condition accordingly; in the code, we increased the step
size, too.

Q94. Explain Nested Loops with the help of examples printing mathematical tables from 2-5?

Ans:
Nested Loops:
Multiple iterative tasks, if they can be related, can be incorporated in such a way that one loop can reside inside the
other and are termed as 'Nested Loop.' In a nested loop, initially, the outer loop will start, and then the inner loop will
run and finish. Thereafter, the index value of the outer loop will increment, and the inner loop will start and end
again, and so forth and soon, until the outer loop terminates.

The outer loop assigns the value for which the table is required, while the inner loop prints the table.

Q95. What is debugging?

Ans:
Debugging is the process of identifying and fixing errors, or "bugs," in computer code.

Q96. Why is debugging important in programming?

Ans:
Debugging is important because it ensures that programs work correctly and efficiently, leading to better
functionality and user experience.

18 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Q97. What are syntax errors?

Ans:
Syntax errors occur when code violates the rules of the programming language, such as missing semicolons or
incorrect variable names.

Q98. How can you identify syntax errors?

Ans:
Syntax errors are usually highlighted by the code editor or compiler and displayed as error messages with specific line
numbers.

Q99. What are runtime errors?

Ans:
Runtime errors occur while the program is running, typically due to unexpected conditions or incorrect logic.

Q100. How can you identify runtime errors?

Ans:
Runtime errors often result in program crashes, abnormal behavior, or error messages during execution.

Q101. What are logical errors?

Ans:
Logical errors occur when the code runs without syntax or runtime errors but produces incorrect results due to
flawed logic.

Q102. How can you identify logical errors?

Ans:
Logical errors require careful analysis and testing to identify discrepancies between expected and actual outcomes.

Q103. What is the process of debugging code?

Ans:
The process of debugging code involves identifying, isolating, and resolving errors through systematic testing,
analysis, and modification.

Q104. What is a breakpoint?

Ans:
A breakpoint is a marker set in the code that pauses program execution at a specific point, allowing developers to
inspect variables and step through code line by line.

Q105. How do you set breakpoints in code?

Ans:
Breakpoints can be set in code using debugging tools provided by integrated development environments (IDEs) or
text editors.

Q106. What is step-by-step debugging?

Ans:
Step-by-step debugging is the process of executing code line by line, allowing developers to monitor variable values
and control program flow.

Q107. What are debugging tools?

19 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Ans:
Debugging tools are software utilities or features that assist developers in finding and fixing errors in code, such as
breakpoints, watch lists, and console logs.

Q108. How can you use console.log() for debugging?

Ans:
console.log() is a debugging technique that outputs messages or variable values to the browser console, helping
developers track program behavior.

Q109. What is a watch list?

Ans:
A watch list is a debugging tool that allows developers to monitor the values of specific variables or expressions
during program execution.

Q110. How can you use the watch list for debugging?

Ans:
Developers can add variables or expressions to the watch list to track their values and identify changes or anomalies
during program execution.

Q111. What is error handling?

Ans:
Error handling is the process of anticipating and managing errors in code to prevent program crashes and provide
informative feedback to users.

Q112. How can you implement error handling in code?

Ans:
Error handling techniques include using try...catch blocks, validating user input, and providing meaningful error
messages.

Q113. What is the purpose of testing in debugging?

Ans:
Testing is an essential part of debugging that helps verify code functionality, identify errors, and ensure software
quality.

Q114. What are the different types of testing?

Ans:
Different types of testing include unit testing, integration testing, regression testing, and user acceptance testing.

Q115. How does the "Step In" feature in Visual Studio .NET assist in understanding the flow of code execution?
OR
How do you typically approach debugging when encountering complex or hard-to-find bugs?

Ans:
Debug the Code:
Debugging refers to locating an error or a bug in the code. In Visual Studio.NET, select Run from the menu and apply
choose 'Run Debugging.' Thereafter, you will get the Debugging menu with some buttons and a debug console.
Rather than every time accessing the menu and choosing options from there to debug the code, the debugging menu
is quite handy and allows you to 'Pause/Continue' your debugging code with the first button.

20 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
'Step In to' will go through the code line by line, as the program will normally execute so that you have a thorough
tracing capability of the code.

You can assign multiple breakpoints for the sake of traceability. While the code is executed in debug mode, the
execution halts at every breakpoint such that the behavior of the code according to the values can be analyzed. This
way, it becomes easier to trace a bug and fix it accordingly.

Q116. What is a dynamic website?

Ans:
A dynamic website is a site that generates content on-the-fly in response to user interactions or database queries,
allowing for personalized and interactive experiences.

Q117. What is the purpose of creating a dynamic website?

Ans:
The purpose of creating a dynamic website is to provide dynamic content, user interaction, and customization,
enhancing the user experience and making the site more engaging and functional.

Q118. What are the key components of a dynamic website?

Ans:
The key components of a dynamic website include server-side scripting languages, databases, content management
systems (CMS), and client-side scripting languages like JavaScript.

Q119. What is server-side scripting?

Ans:
Server-side scripting involves writing code that runs on the web server to dynamically generate web pages before
sending them to the client's browser.

Q120. What are some popular server-side scripting languages?

Ans:
Some popular server-side scripting languages include PHP, Python (with frameworks like Django and Flask), Ruby
(with Ruby on Rails), and Node.js (with JavaScript).

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

Ans:
A database stores and manages data used by the dynamic website, allowing for efficient retrieval, storage, and
manipulation of information.

Q122. What are some commonly used databases for dynamic websites?

Ans:
Some commonly used databases for dynamic websites include MySQL, PostgreSQL, MongoDB, and SQLite.

Q123. What is a content management system (CMS)?

Ans:
A content management system (CMS) is a software application that allows users to create, manage, and publish
digital content on the web without requiring advanced technical skills.

Q124. How does a CMS facilitate dynamic website creation?

Ans:
A CMS provides templates, themes, and plugins/extensions that enable users to customize the appearance and
functionality of their websites dynamically.

21 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Q125. What are the advantages of using a CMS for dynamic website development?

Ans:
Advantages of using a CMS include ease of content management, flexibility, scalability, and the availability of
community support and resources.

Q126. What is client-side scripting?

Ans:
Client-side scripting involves writing code that runs in the user's web browser, enabling dynamic interactions and
updates without requiring page reloads.

Q127. What are some examples of client-side scripting languages?

Ans:
Some examples of client-side scripting languages include JavaScript, HTML5, and CSS3.

Q128. How can JavaScript enhance the functionality of a dynamic website?

Ans:
JavaScript can be used to create interactive features such as form validation, animations, dynamic content updates,
and asynchronous data retrieval (AJAX).

Q129. What is AJAX?

Ans:
AJAX (Asynchronous JavaScript and XML) is a technique used in web development to update parts of a web page
asynchronously without reloading the entire page.

Q130. How does AJAX contribute to dynamic website development?

Ans:
AJAX enables dynamic content loading, form submissions, and data retrieval from the web server in the background,
improving the user experience by making the website more responsive and interactive.

Q131. What is responsive web design?

Ans:
Responsive web design is an approach to web development that ensures websites are optimized and display
optimally across various devices and screen sizes, including desktops, tablets, and smartphones.

22 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Short Question Answers from Exercise

Q1. Contrast between a website and a web application.

Ans:
Main differences between a web application and a website:

Aspect Website Web Application

Definition Contains static content Designed for interaction with users

User Interaction Can only read content, no Can read and manipulate data
manipulation

Deployment Doesn't need recompilation Requires recompilation before deployment

Function Simple functionalities Complex functionalities

Complexity

Interactivity Not interactive for users Highly interactive for users

Browser Requires high browser capabilities Uses high browser capabilities

Capabilities

Integration Simpler integration due to simplicity Complex integration due to functionality

complexity

Authentication Authentication not usually needed Often requires authentication

Examples Breaking News, Aktu website, etc. Amazon, Facebook, etc.

OR (Second Answer)

Main differences between a web application and a website:

 Functionality:
Websites are mainly designed to provide information, whereas web applications offer more sophisticated
features and interactivity.

 Technology:
Websites are typically developed using technologies such as HTML, CSS, and JavaScript, whereas web
applications may require the use of more complex technologies such as Node.js or React.

 Mobility:
Websites can be accessed from any device with internet access, while web applications may be optimized for
specific devices such as smartphones or tablets.

 Development and maintenance:

Developing and maintaining websites is generally easier than developing and maintaining web
applications.
 The choice between a website and a web application depends on the specific needs and requirements
of your business. If you just need to provide information, a website may be sufficient. However, if
you need a more sophisticated application with additional features and interactivity, a web application
may be a better choice.
 Conclusion:
A web application and a website are two different concepts that have their own features and
functions. A website is an interactive page on the Internet that contains information and the ability to
communicate with the user, while a web application is software that runs in a browser and provides
23 | P a g e EMP SCHOOL RAWALPINDI 03130603330
 Unit-3 PROGRAMMING FUNDAMENTALS
the user with the ability to perform certain tasks. It is important to understand this difference when
designing and using web products to ensure that they are effective and user-friendly.

Q2. What is "href" and how to use it?
Ans:
"href" is an attribute used in HTML (Hypertext Markup Language) to specify the destination of a
hyperlink. It stands for "Hypertext Reference."

<a href="https://www.example.com">Click Here</a>

In this example:

 <a> is the HTML anchor element, which creates a hyperlink.

 href="https://www.example.com" is the href attribute, specifying the URL where the hyperlink points to.

 "Click Here" is the text displayed for the hyperlink.

When a user clicks on "Click Here," the browser will navigate to the URL specified in the href attribute, in this case,
https://www.example.com.

Q3. Enlist the optional parameters to open a webpage.

Ans:
When opening a webpage using a hyperlink in HTML, the target attribute can be used to specify how the linked page
should be displayed.

Here are the common optional parameters for the target attribute:

(i) _self:
Opens the linked document in the same window/tab (default behavior).

(ii) _blank:
Opens the linked document in a new window/tab.

(iii) _parent:
Opens the linked document in the parent frame.

(iv) _top:
Opens the linked document in the full body of the window.

(v) Custom frame name:

Opens the linked document in the specified frame.

Example usage:

<a href="https://www.example.com" target="_blank">Click Here</a>

This will open the linked webpage (https://www.example.com) in a new window/tab.

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

Here are some frequent HTML tags used in the text of a webpage and their purposes:

24 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
(i) <p>:

Defines a paragraph.

(ii) <h1> to <h6>:

Defines headings of different levels.

(iii) <b> or <strong>:

Renders text in bold.

(iv) <i> or <em>:

Renders text in italics.

(v) <u>:

Renders text with an underline.

(vi) <br>:

Inserts a line break.

(vii) <hr>:

Inserts a horizontal rule (a horizontal line).

(viii) <a>:

Defines hyperlinks.

(ix) <span>:

Defines a section in a document for styling purposes.

(x) <div>:

Defines a division or a section in a document for styling purposes.

These tags are used to structure and format text content on a webpage, making it easier to read and understand for
users.

25 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
OR (Second Answer)

List of frequent Tags used in Text:

Tag-Pair For the Task

p Paragraph, sentence

b To make characters bold

i Text is shown in italics

em When you need to emphasize a word but with italics.

strong When you emphasize a word but with bold

sup Superscript, helpful in formulas and footnotes

sub Subscript, helpful in formulas and footnotes

u Underline a text

small Smaller text size, like a footnote

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

Ans:

The <body> tag pair in HTML defines the content of the webpage that is visible to users. It encapsulates all the visible
content such as text, images, links, videos, etc. contained within the webpage. The content within the <body> tag pair
is what users see and interact with when they visit the webpage. In short, it represents the main content area of the
webpage.

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

Ans:

Event-based code in JavaScript is used to create interactive web pages by responding to user actions or system
events.

Use add Event Listener() to register a function (event handler) to be executed when a specific event occurs on a
target element.

Event Handling

 Event Handling Function: A function defining the actions to be taken when an event (e.g., click, key press)
occurs.

 Event Types: Events triggered by user interactions (clicks, key presses) or other actions (page loading, form
submissions).

 Example: Demonstrates event handling using JavaScript, where a function ('myFunction') logs "Button
clicked!" to the console when a button with the ID 'myButton' is clicked.

External CSS

26 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
 External CSS (Cascading Style Sheets): A method for styling web pages by storing CSS code in a separate file
(with a .css extension) and linking it to HTML documents using the <link> tag.

 Usage:

o Multiple Pages: Efficiently style multiple HTML pages by centralizing CSS code in one external file,
ensuring consistency and easy maintenance.

o Ease of Maintenance: Simplifies updating styles across multiple pages as changes in the external CSS
file affect all linked pages.

o Faster Loading: External CSS files can be cached by the browser, potentially improving page load
times for subsequent visits.

Long Question Answers

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

Ans: The Document Object Model (DOM) is a programming interface for web documents. It represents the structure
of HTML or XML documents as a tree-like model, where each node corresponds to a part of the document. This
model allows scripts (like JavaScript) to dynamically access, modify, and manipulate the content, structure, and style
of a webpage.

Example:

Here's an explanation with an example: Consider the following simple HTML document:

HTML

<!DOCTYPE html>

<html>

<head>

<title>DOM Example</title>

</head>

<body>

<h1>Welcome to DOM Example</h1>

<p id="demo">This is a paragraph.</p>

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

<script>

function changeText() {

document.getElementById("demo").innerHTML = "Paragraph changed!";

</script>

</body>

</html>

27 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Use code with caution.

Let's break down how the DOM is utilized in this example:

1. HTML Structure: The HTML document defines a simple structure with a heading (<h1>), a paragraph (<p>),
and a button (<button>).

2. Script: Within the <script> tags, there's a JavaScript function changeText(). This function demonstrates how
to interact with the DOM.

3. Event Handling: The button has an onclick attribute that calls the changeText() function when clicked.

In essence, the DOM treats an HTML document as a tree of objects. Each element, attribute, and text content in
the document is represented as a node in this tree. JavaScript can then use DOM methods and properties to
navigate this tree and manipulate its elements, leading to dynamic and interactive web pages.

Accessing and Manipulating the DOM

 Inside the JavaScript function changeText(), document.getElementById("demo") is used to access the

paragraph element with the ID "demo".

 The innerHTML property of the paragraph element is modified to change its content to "Paragraph
changed!".

 When the button is clicked, the content of the paragraph dynamically updates, reflecting the interaction
between JavaScript and the DOM.

Key DOM Concepts

The DOM provides a structured representation of an HTML document that allows for dynamic updates in response to
user interactions. In the given example, JavaScript code accesses and modifies a specific element (the paragraph)
within the DOM to change the webpage's content when the user clicks a button. This demonstrates the core concept
of the DOM: enabling structured access and manipulation of web documents using scripting languages like JavaScript.

Differentiating Heading Levels in HTML

HTML provides six heading levels (<h1> to <h6>), each indicating different levels of importance in the document's
content hierarchy.

 <h1> is the highest-level heading, typically used for main headings or page titles.

 <h2> to <h6> represent progressively lower-level headings, with <h6> being the least important.

Example Code

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

28 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
<title>Heading

Example</title>

</head>

<body>

<h1>This is a level 1 heading</h1>

<h2>This is a level 2 heading</h2>

<h3>This is a level 3 heading</h3>

<h4>This is a level

4 heading</h4>

<h5>This is a level 5 heading</h5>

<h6>This is a level 6 heading</h6>

</body>

</html>

In this example:

 <h1> represents the highest level of heading and is typically used for main headings or page titles.

 <h2> represents a level 2 heading and is used for subheadings under the main headings.

 Similarly, <h3>, <h4>, <h5>, and <h6> represent lower levels of headings, each decreasing in importance.
By using different heading levels, you can create a structured hierarchy of content on your webpage, which is
important for accessibility and search engine optimization.

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

Ans: Loading a background image in a webpage involves a few simple steps. Below is a step-by-step guide along with
the corresponding HTML and CSS code:

Step 1: Choose an Image: First, you need to choose the image you want to use as the background. Make sure the
image is appropriate for your webpage and consider its size and aspect ratio for optimal display.

Step 2: Save the Image: Save the chosen image file in an appropriate format (e.g., JPEG, PNG) and note its file path or
URL.

Step 3: Create HTML Structure: Create the basic HTML structure for your webpage. This typically includes a <head>
section for metadata and a <body> section for the content.

Step 4: Link CSS File (Optional): While it's possible to apply CSS styles directly within the HTML file, it's generally
considered best practice to separate your styles into a separate CSS file. If you choose to do this, you'll need to link
your CSS file in the <head> section of your HTML document.

29 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Step 5: Define CSS for Background Image: Use CSS to set the background image for the webpage. You can apply the
background image to the entire page or to specific elements, depending on your design requirements.

HTML Code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Background Image Example</title>

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

</head>

<body>

</body>

</html>

CSS Code (styles.css):

CSS

body {

background-image: url('path/to/your/image.jpg'); /* Specify the path to your image / background-size: cover; / Cover
the entire background / background-position: center; / Center the background image / / Additional background
properties if needed */ }

 In CSS code:

 background-image sets the background image for the webpage.

 background-size specifies how the background image should be sized. The "cover" value ensures the image
covers the entire background.

 background-position centers the background image within the viewport.

 You should replace "path/to/your/image.jpg" with the actual path or URL of your background image.

 With these steps and code, you should be able to successfully load a background image in your webpage.

30 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Q4. With the help of sample code, highlight different methods to incorporate CSS code in an HTML webpage.

Ans: There are several methods to incorporate CSS code into an HTML webpage. I'll provide sample code for each
method along with an explanation:

i. Inline CSS: Inline CSS is applied directly to individual HTML elements using the style attribute.

HTML Code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Inline CSS Example</title>

</head>

<body>

<h1 style="color:

red;">This is a heading with inline CSS</h1>

<p style="font-size: 18px;">This is a paragraph with inline CSS</p>

</body>

</html>

iii. External CSS: External CSS is defined in a separate CSS file and linked to the HTML document using the <link>
element.

HTML Code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<title>External CSS Example</title>

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

</head>

31 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
<body>

<h1>This is a heading with external CSS</h1>

<p>This is a paragraph with external

CSS</p>

</body>

</html>

32 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Important MCQs

Serial Question Option A Option B Option C Option D Correct

No. Answer

1 Which of the Web server Search Engine Web Browser Web Page Option
following is the C
software used to
retrieve data from
web pages?

2 Which one of these is <head> tag <title> tag <html> tag <body> tag Option
the main content D
area of a web page?

3 Which of these is an <b> <strong> <u> <i> Option

HTML tag pair used D
for displaying the
text in italics?

4 Which of the <p> <h1> to <a> <br> Option

following tag pairs C
<h6>
are used to create
hyperlinks?

5 Which of the alt title src href Option

following attributes C
is used in HTML to
specify the URL of
the image file?

6 What is the purpose To define the To style and To add To structure Option
of CSS? content of a format HTML interactivity to a the content B
web page elements web page of a web page

7 What is the syntax to <style> p { .blue-text { color: <p style="color: // This is blue Option
add inline CSS? color: blue; } blue; } blue;">This is a text C
</style> paragraph.</p>

8 Which of the #elementID .elementClass elementName * Option

following is used to A
target a specific
element with a
unique ID in CSS?

9 What does the CSS Sets the Sets the Sets the size of Sets the Option
property background background the background position of A
background-color color of an image of an image. the
do? element. element. background
image.

33 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
10 Which of the HTML CSS JavaScript Python Option
following C
programming
languages is used to
add interactivity and
dynamic behavior to
web pages?

11 What is the purpose To define a new To output To declare a To create an Option

of the console.log() function. messages or variable. alert box. B
function in values to the
JavaScript? browser's
console for
debugging.

12 In JavaScript, which var let const None of the Option

keyword is used to above C
declare a variable
that cannot be
reassigned?

13 Which of the Number Boolean Object String Option

following data types D
in JavaScript is used
to store a sequence
of characters?

14 Which type of loop in while loop do...while loop for loop forEach loop Option
JavaScript is used C
when you know the
exact number of
times you want the
code block to
execute?

15 What does DOM Data Object Document Document Dynamic Option

stand for in web Model Output Model Object Model Object Model C
development?

16 Which symbol is used . (dot) $ (dollar sign) # (hash) @ (at symbol) Option
to access an element C
by its ID in CSS?

17 Which attribute is href data src link Option

used to specify the C
URL of an external
script file in HTML?

18 What is the correct /* This is a `` // This is a # This is a Option

way to comment a comment */ comment comment C
single line of code in
JavaScript?

34 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
19 In JavaScript, what is null represents null and null is a data null is used Option
the difference an empty or undefined are type, while for objects, A
between null and non-existent interchangeable undefined is a while
undefined? value, while and have the value. undefined is
undefined same meaning. used for
represents a variables.
variable that
has been
declared but
not yet
assigned a
value.

20 What is the output of 10 55 "55" An error will Option

the following occur. C
JavaScript code:
console.log(5 + "5");?

21 Which of the == (equal to) != (not equal to) > (greater than) << (left shift) Option
following is NOT a D
valid JavaScript
comparison
operator?

22 In JavaScript, what "array" "object" "list" "object" Option

does the typeof (Technically, D
operator return for arrays are
an array? objects in
JavaScript)

23 Which of the jQuery Bootstrap React Angular Option

following is a CSS B
framework for
designing responsive
web pages?

24 What is the output of "null" "undefined" "object" "object" (This

the following is a quirk in
JavaScript code: JavaScript)
console.log(typeof
null);?

35 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS

Test Paper 1
MCQs

Sr. Question Option A Option B Option C Option D

No.

1 What is the purpose of the To style the To contain repeated To specify the To add
<main> tag in HTML? main content content like unique main interactivity to
sidebars and content the web page
headers

2 What is the purpose of the # To create an To link to an To open the link To define a
symbol in an HTML link? internal link external website in a new tab fragment
within a page identifier for a
section

3 What is the primary To style web To add interactivity To manage data To structure the
function of HTML pages to web pages on a web server content of web
(HyperText Markup pages
Language)?

4 Which of the following is src alt width href

NOT a valid attribute for the
<img> tag in HTML?

5 Which CSS property is used text- font-family color background-color

to change the text color of decoration
an element?

6 In JavaScript, what is the They are all They have different They are used They are only
difference between var, let, the same. scopes and for different used in specific
and const? reassignment rules. data types. browsers.

7 What is the output of the "array" "object" "number" "list"

following JavaScript code:
console.log(typeof [1, 2,
3]);?

8 Which HTTP method is used GET POST PUT DELETE

to request data from a web
server?

9 What is the purpose of the To provide a To specify the To provide To style the
alt attribute in an HTML caption for the image format alternative text image
<img> tag? image for screen
readers

10 Which of the following is Server-side Static HTML files Database Content

NOT a core component of a scripting Management
dynamic website? System (CMS)

Export to Sheets

36 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
Short Questions

1. Explain the purpose of the <head> tag in an HTML document.

2. What is the role of a web browser in displaying web pages?

3. Briefly describe the concept of event handling in JavaScript.

4. How does CSS contribute to the visual presentation of web pages?

5. What is the difference between a static and a dynamic website?

6. Explain the use of comments in HTML, CSS, and JavaScript.

7. What are the advantages of using external CSS files?

8. What is the CSS box model?

9. How can you use JavaScript to change the content of an HTML element dynamically?

10. What are some common applications of AJAX in web development?

Long Questions

1. Explain the Document Object Model (DOM) with a suitable example. Discuss how JavaScript interacts with
the DOM to manipulate web page elements.

2. Elaborate the steps and provide code to load a background image on a webpage using CSS. Explain the
different background properties that can be used to customize the image display.

3. Describe the different methods for incorporating CSS into an HTML document. Provide examples for each
method and discuss their advantages and disadvantages.

4. Explain the concept of variables and data types in JavaScript. Provide examples of different data types and
how they are used in JavaScript code.

5. What is the importance of debugging in web development? Discuss various techniques and tools used for
debugging HTML, CSS, and JavaScript code.

Test Paper 2
MCQs

Sr. Question Option A Option B Option C Option D

No.

1 What is the purpose of the To define a new To mark up a To display code To create a
<dfn> tag in HTML? term term being snippets definition list
defined

2 In CSS, which property is used letter-spacing word-spacing text-indent line-height

to control the spacing
between lines of text?

3 Which JavaScript operator is * - . +

used to concatenate strings?

37 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
4 What is the purpose of the To iterate over To iterate over To iterate over To create a
for...in loop in JavaScript? the characters of the properties of the elements of countdown loop
a string an object an array

5 Which of the following is NOT Syntax error Runtime error Logical error Compilation
a type of error encountered error
during web development?

6 Which HTML tag is used to <audio> <source> <video> <embed>

embed a video in a web
page?

7 In CSS, what does the Overrides other Makes a rule Creates a new Hides an element
!important declaration do? CSS rules invalid CSS rule from view

8 Which JavaScript function is getDate() getTime() new Time() new Date()

used to get the current date
and time?

9 What does HTML stand for? Hypertext High-Level Home Tool Hyperlink and
Markup Markup Markup Text Markup
Language Language Language Language

10 Which of the following is NOT Inline scripting Internal scripting External External scripting
a valid way to include scripting using using <script>
JavaScript in an HTML <style>
document?

Export to Sheets

Short Questions

1. What is the difference between an ordered list (<ol>) and an unordered list (<ul>) in HTML?

2. How can you style a table using CSS to make it visually appealing?

3. Explain the concept of a nested loop in JavaScript with an example.

4. What is the difference between client-side and server-side scripting?

5. Explain the role of a database in a dynamic website.

6. What are some common debugging techniques used in JavaScript?

7. What is the purpose of the meta tag in HTML?

8. How can you add comments to CSS code?

9. What are the different ways to include JavaScript in an HTML document?

10. What are the advantages of using a CSS framework like Bootstrap?

Long Questions

1. Discuss the concept of the Document Object Model (DOM) and its importance in web development. Explain
how JavaScript can be used to interact with the DOM to modify the content and structure of a web page.

2. Explain the concept of events in JavaScript. Discuss the different types of events and how you can write event
handlers to respond to user actions on a web page.

38 | P a g e EMP SCHOOL RAWALPINDI 03130603330

 Unit-3 PROGRAMMING FUNDAMENTALS
3. Describe the process of creating a dynamic website. Discuss the roles of server-side scripting, databases, and
content management systems in dynamic website development.

4. What are some common errors that can occur during web development? Explain the different types of errors
(syntax, runtime, logical) and how they can be identified and resolved.

5. Explain the concept of responsive web design and its importance in the modern web landscape. Discuss the
techniques and tools used to create responsive web pages that adapt to different screen sizes and devices.

39 | P a g e EMP SCHOOL RAWALPINDI 03130603330