UNIT NO 3 – Programming Fundamentals (NOTES)
Exercise Questions
Q2: Write short answers of the following questions.
1. Contrast between website and web application.
Website Web Application
A webpage is a document accessible via the A computer program which offers a service or
internet, and a website is a collection of executes tasks via a browser and internet
webpages. connection, remotely accessing a server, is
called a web application.
For example, the Associated Press of Pakistan For example, a Customer Relations
news website has various sections, each Management (CRM) system handles tasks like
section has at least one webpage. You can retailing, supplies, and promotions.
access a webpage using a web browser by
entering URL.
2. What is 'href' refers to and how to use it?
The href attribute stands for "Hypertext Reference" and is used in HTML to specify the URL or
location of a linked resource. It is used within <a> (anchor) tags to create hyperlinks. For
example:
<a href="https://example.com">Visit Example</a>
This creates a link that directs users to https://example.com when clicked.
3. Enlist the optional parameters to open a webpage.
The optional parameters to open a webpage are:
1._blank: Opens the link in a new tab or window.
<a href="https://example.com" target="_blank">Visit Example</a>
2._self: Opens the link in the same frame or window (default).
<a href="https://example.com" target="_self">Open in Same Window</a>
3._parent: Opens the link in the parent frame (if in a frame).
<a href="https://example.com" target="_parent">Open in Parent Frame</a>
4._top: Opens the link in the full window, breaking out of frames.
<a href="https://example.com" target="_top">Open in Full Window</a>
4. List out the frequent tags used in text of a webpage and what are they used
for?
There are some frequent HTML tags used for structuring text content on a webpage, like
Tags Uses
<p> It is used to define paragraph.
<h1> to <h6> It is used to define headings of different levels.
<strong> It is used to make text bold.
<em> It is used to make text italic.
<ul> and <ol> These are used for creating lists.
<ul> It creates a bullet-point list.
<ol> It creates a numbered list.
<li> It is used within <ul> or <ol> to define list items.
<a> It's used to create hyperlinks.
5. Explain the role of <body> tag-pair in a document.
The main part of the html is the 'body'. The <body> tag pair defines the main content area of an
HTML document, containing all the visible content and structural elements of the webpage, like
text, images, links, and forms. when you visit a site, you can see all these content and elements
in webpage. It starts with <body> and ends with </body> enclosing all the content visible on the
web page.
6. How is the event-based code used in JavaScript?
Event-based code, such as onclick, is used within HTML elements to trigger
JavaScript functions. The function code is usually placed within a <script> tag in the <head> or
<body> section of the HTML document.
<html>
<head>
<script>
function msgSure() {
alert('Button clicked!');
}
</script>
</head>
<body>
<input type="button" onclick="msgSure()" value="Be Sure"/>
</body>
</html>
In this example, clicking the button triggers the msgSure() function, which displays a message.
5. Infer about the external CSS? Where is the external CSS generally used?
External CSS is a separate stylesheet file linked to an HTML document, using the <link> tag in
the <head> section. It defines the style for multiple web pages, making it easier to maintain and
update the look of a website. External CSS is usually used in bigger projects to keep styles well-
organized and make sure the design looks the same on all pages of a website.
Q3: Give long answers to the following extended response questions
(ERQs).
1. What is a Document Object Model? Explain with the help of an example.
Document Object Model (DOM):
The Document Object Model (DOM) is a programming interface that represents an HTML
document as a tree of objects. where each node corresponds to a part of the document (such
as elements, attributes, and text). It allows programs like JavaScript to manipulate the structure,
style, and content of web pages dynamically. For example, you can use it to change text, add or
remove elements, or update styles on a webpage without reloading it.
HTML Document Representation:
In this example, the HTML structure is represented as a tree of nodes:
Root Node: The root node of the DOM tree is the document object, which contains the
<html> element.
Element Nodes: The element nodes of the DOM tree include <html>, <head>, <title>,
<body>, <h1>, <table>, <tr>, and <td>.
Text Nodes: These are the text content within the element nodes, such as "Welcome to
DOM Example" (inside the <h1> tag) and the numbers in the table cells ("1" and "2").
2. Write a code to differentiate between different types of headings in HTML.
In HTML there are six heading tags, from <h1> to <h6>. These tags are used to create headings
in a webpage. <h1> is the largest heading level and <h6> is the smallest heading level.
3. Elaborate steps and provide code to load a background image in a webpage.
Here's a step-by-step guide along with HTML and CSS code to load a background image in a
webpage:
Step 1: Choose an image
Select the image you want to use as the background. Ensure it is in a web-friendly format like
JPEG or PNG.
Step 2: Place the Image in Your Project
Create an images folder within your project directory and save the chosen image inside this
folder. For example, name it backgroundimage.jpg.
Step 3: Create an HTML file
Create an HTML file (e.g., index.html) and open it in a text editor (such as Notepad or a code
editor like Visual Studio Code).
Step 4: HTML Structure
Write the basic HTML structure including the <html>, <head>, and <body> tags.
Step 5: CSS Styling
Add CSS to the <style> section to set the background image for the <body> element.
Step 6: Save and View
Save your HTML file. Open the file in a web browser to view the background image applied to
the webpage.
4. With the help of sample code, highlight different methods to incorporate CSS
code in a HTML webpage.
There are three methods to incorporate CSS code into an HTML
1. Inline CSS:
CSS styles are applied directly within HTML elements using the style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:black">This is a paragraph</p>
</body>
</html>
2. Internal CSS:
CSS styles are defined within a <style> tag inside the HTML document's <head> section.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body
h1{color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. </p>
</body>
</html>
3. External CSS:
CSS styles are written in a separate .css file and linked to the HTML document using
the <link> tag.
5. Sketch steps and provide code to apply border and color to a table in a
webpage.
Here's a step-by-step guide along with HTML and CSS code to apply border and color to a table
in a webpage.
Step 1: Create HTML File
Create an HTML file (e.g., index.html) and open it in a text editor (such as Notepad or any code
editor).
Step 2: HTML Structure
Write the basic structure of an HTML document including <html>, <head>, and <body> tags.
Step 3: HTML Table Structure
Define the table structure with tags of <table> (Defines the table element),
<tr>(Defines a row within the table),<th>(Defines a header cell),
<td>(Defines a standard cell).
Step 4: CSS Styling
Apply CSS styles to add borders and colors to the table. Include styles for the table, table
headers (<th>), and table data cells (<td>).
<!DOCTYPE html>
<html>
<head>
<title>Styled Table </title>
<style>
body
table{ border: 4px solid black;}
tr, th{background-color:red;}
</style>
</head>
<body>
<table>
<tr>
<th>MATH</th>
<th>ENGLISH</th>
<th>PHYSICS</th>
</tr>
<tr>
<td>40</td>
<td>45</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Step 3: Save and View
Save your HTML file and open it in a web browser to see the styled table with borders
and colors.
6. Discuss the functionality JavaScript can provide in a webpage with the help of
a suitable example code.
JavaScript is a powerful language for web development that adds interactivity and dynamic
features to webpages. It allows you to:
Manipulate the DOM: Change webpage content and structure.
Handle Events: Respond to user actions like clicks and keystrokes.
Validate Forms: Check user input before sending it to the server.
Create Animations: Add animations and transitions for a better user experience.
Fetch Data: Get information from a server without reloading the whole page.
Store Data: Save information in the browser with local storage or session storage.
Example: Validate Form
Here, I will discuss validate form with the help of example.
The validateForm() function checks if the "Name" field in the form is empty. If it is empty, an
alert message is displayed and the form submission is prevented. If the field is filled, the form is
allowed to be submitted.
7. Articulate steps and write code to create a scrolling text on a webpage.
Creating scrolling text on a webpage involves using HTML and CSS to define the content and
appearance, and javascript to animate the scrolling effect.
There are some steps to create scrolling text.
Step 1. HTML Structure:
Define a container (<div>) for the scrolling text.
A <div> with class scrolling-text-container contains another <div> with class scrolling-text.
This structure isolates and controls the scrolling text.
Step 2.CSS styling:
Style the container to control its appearance and overflow behavior.
Step 3. JavaSript (Animation):
Use JavaScript to animate the scrolling effect by manipulating the position of the text within the
container.
The animation @keyframes scrollText defines how the text moves horizontally (translateX) from
right to left within its container.
When you open this HTML file in a browser, you'll see a box with a border containing scrolling
text.
The text continuously scrolls from right to left within its container due to the animation defined
in CSS (scroll text).
8. Enlist steps to add a video clip in a website which starts playing as the web
page loads.
There are some steps to add a video clip in a webpage:
Step 1: Choose a Video Clip
Select the video clip you want to use and ensure it is in a web-friendly format, such as MP4.
Step 2: Place the Video Clip in Your Project Folder
Save the video file in the same directory as your HTML file or in a subfolder within your project.
Step 3: Create an HTML File
Create an HTML file (e.g., index.html) and open it in a text editor (like Notepad or any code
editor).
Step 4: Write the HTML Structure
Write the basic HTML structure in your file. Use the <html>, <head>, and <body> tags to
build the document.
In the <head> section, include a <title> tag to define the page title.
In the <body>, add a heading <h1> and the <video> tag to embed the video. Use attributes
such as width, autoplay, muted, and controls as needed.
Include the <source> tag inside the <video> tag to specify the video file path and type.
Step 5: Save and View
Save your HTML file and open it in a web browser to view the video clip. The video should start
playing automatically if the autoplay attribute is set, and the muted attribute ensures it plays
without sound, which helps with autoplay functionality in some browsers.
9. Cite steps on compiling the result of your last examination in a tabular form
and display it in a webpage.
There are some steps to compile the result of your last examination in a webpage.
Step 1: Create an HTML File
Create an HTML file (e.g., results.html) and open it in a text editor (such as Notepad or any code
editor).
Step 2: Write the HTML Structure
Use the <html>, <head>, and <body> tags to build the document.
Define the title of the webpage using the <title> tag inside the <head> section.
HTML Table Structure:
Inside the <body>, add a heading <h1> and a <table> element.
Structure the table with <tr> for rows and <td> for cells.
Include table headers using <th>.
Step 3: CSS Styling
Apply internal CSS to style the table, including borders and colors.
Step 4: Save and View
Save your HTML file. Open the file in a web browser to view the examination results in a tabular
format.
10. In context of fig. 40(d), add another button namely 'Revert' which when is
pressed, it will reverse both the color and index values.
Activity: 1
For every subject mentioned in fig-18, create a link which opens in a new tab and assign main
contents of the said subject and display the title cover of the relevant book(s).
Activity: 2
Take a number as input from the user and write a program to calculate the grade of the
student in a particular subject. If the number is greater than equal to 90 then assign A+ grade,
for 80 and above but below 90, A- grade is designated. Similarly in the range of 70-79, B grade
needs to be awarded. If the number lies between 60- 69, C grade should be printed. In case
the number is between 50 and 59, D grade and less than 50, F grade should be displayed on
screen.
