Scribd
Upload
10 views15 pages

Unit 3 Exercise Question-Answers

The document covers programming fundamentals, focusing on web development concepts such as the difference between websites and web applications, the use of the 'href' attribute in HTML, and the structure of URLs. It explains the Document Object Model (DOM), external CSS, and various methods to incorporate CSS into HTML. Additionally, it provides examples of JavaScript functionality and styling techniques for HTML elements.

Uploaded by

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

Unit 3 Exercise Question-Answers

The document covers programming fundamentals, focusing on web development concepts such as the difference between websites and web applications, the use of the 'href' attribute in HTML, and the structure of URLs. It explains the Document Object Model (DOM), external CSS, and various methods to incorporate CSS into HTML. Additionally, it provides examples of JavaScript functionality and styling techniques for HTML elements.

Uploaded by

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

Unit 3 Programming Fundamentals

Programming Fundamentals

MCQ’s Answer:

1 C 6 C

2 C 7 C

3 C 8 D

4 C 9 B

5 D 10 C

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


Q. 1 Contrast between website and web application.

Aspect Website Web Application


Definition A collection of static or dynamic pages A dynamic platform allowing users to
providing information to users. perform specific tasks online.

Purpose To inform, educate, or entertain users. To enable users to perform specific tasks or
services.
Technology Built with HTML, CSS, and basic Built with complex technologies like
JavaScript. server-side scripting.

User Straightforward navigation to access Due to security checks, user authentication is


Experience content. required.

Examples School website with information about Online learning platform for accessing
events, history, and contact details. lessons, submitting assignments, and
receiving grades.

Q. 2 What is ‘href’ refers to and how to use it?


What is href?

• The term href stands for "Hypertext Reference."


• It is an attribute used in HTML to define the destination of a link.
• When we click on a link on a webpage, the href tells our browser where to go next.

1 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals

How is href Used?

• The href attribute is used inside an <a> tag, ‘a’ stands for "anchor." The <a> tag creates a hyperlink that we
can click on.
• The href value is the URL (Uniform Resource Locator) of the page that we want to link to.
• Example of Using href:
<a href="https://www.google.com">Goto the Google Website</a>
Q. 3 Enlist the optional parameters to open a webpage.
A URL (Uniform Resource Locator) is the address used to access a webpage, an image, or a file on the
internet. It is composed of several parts. Here’s a breakdown of the parts of a URL:

https://www.example.com:8080/folder/page.html?search=query&category=books#section1
• https:// Protocol (Optional)
• www.example.com: Domain Name
• :8080 Port Number (Optional)
• /folder/page.html: Path (Optional)
• ?search=query&category=books Query String (Optional)
• #section1 Fragment (Optional)
Each part plays a crucial role in guiding the browser to the correct resource and displaying it appropriately.
Q. 4 List out the frequent tags used in text of a webpage and what are they used for?

Tag Task performed

<p> Paragraph, sentence

<b> To make the characters bold

<i> Text is shown in italics

2 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
<em> When we need to emphasize a word but with italics.

<strong> When emphasizing a word but with bold.

<sup> Superscript, helpful in formula and footnotes

<sub> Subscript, helpful in formula and footnotes.

<u> Underline the text.

<small> Smaller text size, like a footnote.

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


The <body> tag-pair in an HTML document plays a crucial role in defining the main content displayed in a
web browser. The <body> tag encloses all the visible elements on a webpage, such as text, images, videos, tables,
links, forms, and other content. Anything that should be displayed to the user is placed inside the <body> tag. The
<body> tag is a child of the <html> tag and exists alongside the <head> tag.
For Example:
<html>
<head>
<title> Example Page </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> This is a simple example of a webpage. </p>
</body>
</html>
Q. 6 How is the event-based code used in JavaScript?
Event-based programming is a key concept in JavaScript, allowing us to create dynamic and interactive web
pages. The functions (event handlers or listeners) are executed in response to specific events triggered by user
actions. Events are actions or occurrences that happen in the browser, such as clicks, key presses, mouse movements,
form submissions, or page loads. These events can be captured and responded to by using JavaScript code.

3 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals

Common Events in JavaScript:


• click: Triggered when an element is clicked.
• mouseover: Triggered when the mouse pointer is moved over an element.
• keydown: Triggered when a key is pressed.
For Example: < button onclick = "alert ( ' Button clicked! ' ) " > Click Me </button>

Q. 7 Infer about external CSS? Where is external CSS generally used?


External CSS refers to a separate CSS file that contains all the styles for an HTML document or multiple
documents. The CSS file is linked to the HTML document via a <link> tag within the <head> section of the HTML.
Using external CSS is a best practice for web development due to its ability to separate (HTML) content from (CSS)
presentation.
The CSS is stored in a separate file with a .css extension, such as styles.css. This file only contains CSS rules and
no HTML.

External CSS is commonly used in the following scenarios:


1. Websites with Multiple Pages:
• For websites with multiple pages, external CSS allows for consistent styling across all pages.
2. Large Projects:
• In large web projects, external CSS helps keep the codebase organized.
3. Collaboration:
• When multiple developers are working on a project, external CSS makes collaboration easier.
4. Optimized Loading:
• Once a CSS file is downloaded, it can be reused across multiple pages without re-downloading.
This reduces the load time and improves performance.
5. Responsive Design:
• External CSS is essential for implementing responsive design techniques. External CSS files are used
to apply different styles based on the screen size, orientation, and other characteristics of the user's
device.

Give Long answers to the following extended response questions (ERQs)

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

The Document Object Model (DOM) is a programming interface for web documents. It represents the
structure of a document (like an HTML or XML document) as a tree of objects, allowing programs and

4 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
scripts to dynamically access, modify, and update the content, structure, and style of the document.

Key Concepts of DOM:

Tree Structure: The DOM represents the document as a tree structure where each node is an object
representing a part of the document (like elements, attributes, or text).

1. Nodes: The primary components of the DOM. These include:


• Element Nodes: Represent HTML tags (e.g., <div>, <p>, <img>)
• Text Nodes: Represent the text within elements.
• Attribute Nodes: Represent attributes of elements (e.g., class, id).
• Document Node: The top-level node representing the entire document.
2. Manipulation: Through the DOM, we can:
• Access elements using methods like getElementById, getElementsByClassName,
• Modify content or structure (e.g., changing text, adding/removing elements).
• Change styles dynamically.

Example of DOM:

<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="main-heading">Hello, World!</h1>
<p class="description">This is a paragraph about the DOM.</p>
<button onclick="changeText()">Click Me</button>

<script>
function changeText()
{
// Access the element with id 'main-heading'
var heading = document.getElementById("main-heading");

// Change the text content of the heading


heading.textContent = "DOM Manipulation is fun!";
}
</script>
</body>
</html>

Explanation:

5 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
1. HTML Structure: The HTML document includes a heading, a paragraph, and a button.

2. DOM Representation:
• The DOM represents this document as a tree with a root node (<html>).
• The <html> node has two child nodes: <head> and <body>.

• The <body> node contains child nodes like <h1>, <p>, and <button>.

2. Manipulation via JavaScript:


• The changeText function accesses the <h1> element using document.getElementById("main-
heading").
• It then modifies the text content of the <h1> element, demonstrating how the DOM can be
manipulated dynamically.
This example illustrates how the DOM serves as a bridge between HTML content and JavaScript, allowing
for dynamic interaction and changes to web pages.

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

Here’s an HTML example that visually differentiates between different heading levels (<h1> to <h6>)
using CSS styling: <h1> is the biggest and <h6> is the smallest heading.

<!DOCTYPE html>
<html>
<head>
<title>Differentiate Headings</title>
<style>
/* Styling each heading type with different colors and sizes */

h1 {
color: red;
font-size: 32px;
}
h2 {
color: blue;
font-size: 28px;
}
h3 {
color: green;
font-size: 24px;
}
h4 {
color: orange;
font-size: 20px;
}
h5 {

6 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
color: purple;
font-size: 18px;
}
h6 {
color: brown;
font-size: 16px;
}
</style>
</head>
<body>
<!-- Different Heading Levels -->
<h1> Heading Level 1 (H1) </h1>
<h2> Heading Level 2 (H2) </h2>
<h3> Heading Level 3 (H3) </h3>
<h4> Heading Level 4 (H4) </h4>
<h5> Heading Level 5 (H5) </h5>
<h6> Heading Level 6 (H6) </h6>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>

<body>

<h2> Background Cover </h2>


<p> Set the background-size property to "cover" then the background image will cover the entire element,
</p>

</body>

7 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
</html>

To add a background image on an HTML element, use the <style> element, in the <head> section. If we want
the entire page to have a background image, we must specify the background image on the <body> element.
If the background image is smaller than the element, the image will repeat itself horizontally and vertically
until it reaches the element's end.
To avoid the background image from repeating itself, set the background-repeat property to no-repeat. If we
want the background image to cover the entire element, we can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed:
This way, the background image will cover the entire element, with no stretching (the image will keep its
original proportions).
Q. 4 With the help of simple code, highlight different methods to incorporate CSS code in an
HTML webpage.

There are three methods via which we can incorporate CSS code in an HTML page.

1. Inline CSS
Any CSS attribute that we want to incorporate can be added by using an HTML tag in the body section.

<P style =”color : red; font-size : 40px; font-style : italic; text-align : center;”>
My teaching academy
</p>

2. Embedded (Internal) CSS


Instead of assigning the styles for every heading, paragraph and other element separately, a better approach
is to outline the style of every element in the head tag by using a pair tag of <style> </style>. Moreover, it
will make it easy to change the style of any element that will reflect throughout in that element.
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;

8 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
}
</style>
</head>
<body>

<h1> My First CSS Example </h1>


<p> This is a paragraph. </p>

</body>
</html>

3. External CSS
A file with the extension “.CSS” can be made to apply all the styles. Once, the HTML file is finalized, just
attach that CSS file in the head section of HTML by passing the link. External CSS is used with large
projects.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css"> // rel: Specifies the relationship between the current
document and the linked document
</head>
<body>

<h1> This is a heading </h1>


<p> This is a paragraph. </p>

</body>
</html>

Here is how the "mystyle.css" file looks

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

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

We can apply borders and color to a table by using CSS. For this purpose, we initially need to state
the “style” pair tag just before starting the table. We need to set which style and where to apply it. For the
border, we’ll define it for the table, table header cells, and every other cell.

9 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals

<style>
table, th, td
{
border: 1px, solid Black;
}
</style>

We can also designate a background color for the table by adding the following code.
<style>
th, td
{
background-color: aqua;
}
</style>

Q. 6 Discuss the functionality JavaScript can provide in a webpage with the help of a suitable
example code.
JavaScript is an exciting language primarily used in the development of web pages and scripts. It
doesn’t consume much memory that is why it is used at the client end in developing websites for making
pages dynamic. JavaScript code can be embedded in HTML with a paired tag of “script”. There is no
limitation of where to place the code inside an HTML file.
In website development, the easiest way to introduce dynamicity is to allow some events to occur and respond
accordingly. Alert is commonly used functionality that JavaScirpt provides to inform the user about his
action.
Code Example:

<!DOCTYPE html>
<html>
<head>
<script>
function msgsure( )
{
alert ("Are you Sure?")
}
</script>
</head>
<body>

<h2> Do you mind, clicking on the button? </h2>

<input type="button" onclick="msgsure ( )" value = "Be sure" />

</body>
</html>

10 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals

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


Steps to Create Scrolling Text on a Webpage:
1. Open an HTML File:
• Open a text editor (like Notepad++, VS Code, or Sublime Text).
• Create a new file and save it with a .html extension.
2. Add the HTML Structure:
• Start by writing a basic HTML structure with the <html> declaration, and include the opening and
closing <head>, <title> and <body> tags.
3. Use the <marquee> Tag for Scrolling Text:
• The <marquee> tag is a deprecated HTML element, but it can still be used to create scrolling text.
• Insert the text you want to scroll inside the <marquee> tag in the <body> section of the HTML file.
4. Customize Scrolling Behavior (Optional):
• You can customize the scrolling direction, speed, and more using attributes like direction, behavior, and
scrollamount.
5. Save and Open the File in a Browser:
• Save the HTML file and open it in a web browser to see the scrolling text in action.

Example Code:

<html>
<head>
<title> Scrolling Text Example </title>
</head>
<body>
<!-- Simple Scrolling Text -->
<marquee> Welcome to our website! This text is scrolling. </marquee>
<!-- Scrolling Text with Customizations -->
< marquee direction="right" scrollamount= "10" > This text is scrolling from right to left! </marquee>

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

Steps to Add a Video Clip to a Website That Auto-Plays on Page Load:


1. Open a Text Editor:
o Use a simple text editor like Notepad++, VS Code, or Sublime Text to create an HTML file.

11 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals

2. Create a Basic HTML Structure:


o Start your HTML file by writing the basic structure with <html> and include the <head>, <title>
and <body> tags.
3. Use the <video> Tag:
o The <video> tag is used to embed video clips into a webpage. Inside the <video> tag, you can add
various attributes to control how the video behaves.
4. Set the autoplay Attribute:
o To make the video start playing as soon as the webpage loads, add the autoplay attribute to the
<video> tag.
5. Add the controls Attribute (Optional):
o You can add the controls attribute if you want to provide users with play, pause, and volume control
options.
6. Link the Video File:
o Inside the <video> tag, use the <source> tag to specify the location of the video file. The src
attribute defines the video file path, and the type attribute defines the video format.
7. Save and Open the File in a Browser:
o Save the HTML file with a .html extension, and open it in a web browser to see the video start
playing automatically.

Example Code:

<html>
<head>
<title> Auto-Play Video Example </title>
</head>
<body>
<video width="600" height="400" autoplay>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>

12 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals

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

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


1. Collect Exam Data:
o Gather the results of your last examination. You should have information like student names,
subjects, marks, and total grades.
2. Open a Text Editor:
o Open a text editor such as Notepad++, VS Code, or Sublime Text to create your HTML file.
3. Create Basic HTML Structure:
o Write the basic HTML structure, including the <html>, <head>, <title> and <body> tags.
4. Use the <table> Tag:
o Inside the <body> section, use the <table> tag to create a table. The <table> tag will hold the rows
and columns that display your data.
5. Create the Table Header:
o Use <th> tags to define the headers of your table. Each <th> will represent a column heading, such
as "Student Name", "Subject", "Marks", and "Grade".
6. Add Table Rows and Data:
o Use the <tbody> tag and insert rows using the <tr> (table row) tag. Within each <tr>, use <td>
(table data) tags to add individual cells with the data for each student.
7. Style the Table (Optional):
o You can use the <style> tag inside the <head> section to add some basic CSS styles to make the
table look better, such as adding borders, padding, or background colors.
8. Save the HTML File:
o Save the file with a .html extension and open it in a web browser to view the results in tabular form.

Example Code:

<html>
<head>
<title> Exam Results </title>
<style>

13 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2 style="text-align: center;"> Exam Results </h2>
<table>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
<tbody>
<tr>

14 Waseem Hassan
HOD (Dept. of Computer Science)
Unit 3 Programming Fundamentals
<td>Muhammad Ali</td>
<td>Math</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>Ibrahim Khalil</td>
<td>Science</td>
<td>78</td>
<td>B</td>
</tr>
<tr>
<td>Muhammad Tariq</td>
<td>English</td>
<td>92</td>
<td>A</td>
</tr>
<tr>
<td>Sharjeel Khan</td>
<td>History</td>
<td>67</td>
<td>C</td>
</tr>
</tbody>
</table>

</body>
</html>

15 Waseem Hassan
HOD (Dept. of Computer Science)

You might also like