Pakistan International School,Al-Khobar
Unit #3 Programming Fundamentals
Short Questions
1. Contrast between website and web application.
Ans. Website:
A website is like a book you rad [Link] visit it to get information, like reading articles or looking at
[Link] is mostly one-way communication. You can interact with it.
For example, website of dawn newspaper.
Web Application:
A web application is like a digital tool or service, where you can do things like chat with friends,place food
orders,or manage your money. You can interact with it,like filling out forms or clicking buttons to make things
happen. For example, hungerstation,online,banking,social media,federal board.
2. What does ‘href’ refer to and how to use it?
Ans. Href refers to ‘hypertext reference’ and is like an address for a link. It tells your browser where to go
when you click on it.
How to use href;
i. basic structure: <a href="URL">Link Text</a>
ii. example:
<a href="[Link] Example</a>
This creates a clickable link for the user.
3. Enlist the optional perimeters to open a webpage.
Ans.
Target: It decides where the linked webpage will open,like in the same tab or a new tab.
Rel: It specifies the relationship between the current and linked documents to search engines.
<link rel=”stylesheet” href=”[Link]”>
4. List out the frequent tags used in text of a web page and what are they used for?
Ans. Following is a list of frequent tags used in text of a website webpage and what they are used for.
p: For paragraphs or sentences.
b: To make text bold.
i: To make text italic.
em: To emphasize a word with italics.
strong: To emphasize a word but with bold.
<h1> to <h6>: It is used to define headings of different levels.
u: To underline a text.
small: For smaller text size.
<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 is used to create hyperlinks.
<br>: It is used to break a line within text.
<span>: It is used to apply styles to a specific section of text.
<div>: It is used for dividing content.
<blockquote>: It is used for quoting text.
[Link] the role of <body> tag-pair in a document.
Ans. 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 contents and elements in web browser.
[Link] the event-based code is used in JavaScript?
Ans. Event-based code in JavaScript is used to make webpages interactive by responding to user actions like
clicks,typing, or moving the mouse.
Examples:
▪ Button: By clicking the Date of birth button,shows the calendar that user can easily select the date of
birth.
▪ Select: By selecting a product from dropdown list shows the product types.
[Link] about External CSS? Where are External CSS generally used?
Ans. CSS stands for cascading style sheet.
External CSS refers to a method of styling webpages where the CSS code is written in separate file within a
.css extension and linked to an HTML document using the <link> tag. This separation of CSS code form HTML
allows for better organization, easier maintenance, and consistency across multiple webpages.
It’s generally used in bigger websites to keep things organized and consistent across multiple pages.
**END OF SHORT QUESTIONS**
Long Questions
[Link] is Document Object Model? Explain with the help of an example.
Ans. The Document Object Model (DOM) is a programming interface that represents a web page as a tree of
object. 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 om a
webpage without reloading it.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Welcome to DOM example </h1>
<ul>
<li>heading 1</li>
<li>heading 2</li>
<li>heading 3</li>
</ul>
</body>
</html>
In this HTML document:
Each element in the HTML document is represented by a node in the DOM tree. For example,
The root tree is the “Document” node.
The <html>, <head>, <body>, <h1>, <ul>, and <li> tags are all elements’ nodes in this tree.
The text within elements, such as “welcome to Dom example” is text node.
With the DOM, you can use JavaScript to access and manipulate these elements dynamically.
[Link] code to differentiate between different types of headings in html.
Ans. Here is the HTML code to differentiate between different types of headings:
<html>
<head>
<title>Headings Differentiation</title>
</head>
<body>
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
</body>
</html>
In this example,
Each heading element(<h1>…<h6>) represents a different level of importance or hierarchy on the webpage,
with <h1> being the most important and <h6> being the least important.
[Link] steps and provide code to load a background image in a webpage.
Ans. 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
First, choose the image you want to use as a background for your webpage.
Step2: place image in your project
Save the chosen image in your project directory.
Step 3: create html file
Create an html file([Link]) and open it in a text editor.
Write the basic structure of an html document and internal css code to apply the background image to the
<body> element.
Step 4: save and view
Save and view background image in a web browser
Example Code
<html>
<head>
<title>Background Image</title>
</head>
<style>
body{
background-image:url(“[Link]”); }
</style>
<body>
<h1>How to add background image</h1>
</body>
</html>
[Link] the help of a sample code, highlight different methods to incorporate CSS code in a HTML
webpage.
[Link] are several methods to incorporate CSS code into an HTML webpage:
Method 1: Inline CSS
Inline CSS is used directly within the HTML tags using the `style` attribute.
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color:red”>This is a heading</h1>
<p style="color:black">This is paragraph</p>
</body>
</html>
Method 2: Internal CSS
Internal CSS is placed within the `<style>` element in the `<head>` section of the HTML document.
<html>
<head>
<title>Internal CSS Example</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>
Method 3: External CSS
External CSS is saved in a separate `.css` file and linked to the HTML document using the `<link>` element.
<html>
<head>
<title>External CSS Example</title> [Link]
<link rel="stylesheet" type="text/css" body
href=”[Link]”> h1 {
</head> color: green;
<body> }
<h1>This is a heading</h1> p{
<p>This is a paragraph</p> color:black;
</body> }
</html>
In each method, the CSS rules are applied to html element to style them accordingly.
[Link] steps and provide code to apply border and color to a table in a webpage.
Ans. Step 1: Create html file
Create an html file([Link]) and open it in text editor.
Step 2: Create table
Write the basic structure of an html table and internal CSS code to apply the border and color to the <table>
element.
Step 3: Save and view
Save and view table in a web browser.
****CODE****
<html>
<head>
<title>Table</title> OUTPUT
</head>
<style>
body table { MATH URDU PHYSICS
border: 4px solid black; 40 55 45
}
tr,th {
background-color:red;
}
</style>
<body>
<table>
<tr>
<th>Math</th>
<th>Urdu</th>
<th>Physics</th>
</tr>
<tr>
<td>40</td>
<td>55</td>
<td>45</td>
</tr>
</table>
</body>
</html>
[Link] the functionality JavaScript can provide in a webpage with the help of a suitable example code.
Ans: JavaScript enhances webpages by providing interactive elements and dynamic [Link] is a simple
example to illustrate its functionality:
<body>
<html>
<h4>Registration Form </h4>
<head>
<label>Name</label>
<script type=”text/javascript”>
<input type=”text”/>
Function msgSure(){
<label>Email</label>
Alert(“Are your sure you want to submit?”);
<input type=”text”/>
}
<input type=”submit” onclick=”msgSure()”/>
</script>
</body>
</head>
</html>
In this webpage example, JavaScript is used to make the page interactive.
• When you click the button labelled “submit”, JavaScript shows a pop-up message asking “Are you sure
you want to submit?”
• The JavaScript code in the ‘<script>’ tag defines a function (‘msgSure()’) that displays this message.
<script type=”text/javascript”>
• The button’s onclick attribute tells the browser to run this function when the button is clicked.
This function demonstrates how JavaScript can msgSure(){
Function add interactive features to a basic webpage, making it
more engaging for users.
[Link] steps and write code to create aAlert(“Are
scrolling your
text sure
on ayou want to submit?”);
webpage.
Ans. Creating scrolling text on a webpage can} be achieved using HTML and CSS to define the content and
appearance, and JavaScript to animate the scrolling effect.
</script>
There are some steps to create scrolling text.
</head>
Step 1. HTML Structure:
Create outer <div class=”scrolling-text-container”> acts as a container to hold the scrolling text.
Create inner <div class=”scrolling-text”> is where the actual text content resides.
The text inside the inner <div> will appear on the webpage within the boundaries set by its container.
Step 2. CSS Styling:
Style the container to control its appearance and overflow behavior.
Step 3. JavaScript (Animation):
JavaScript is used 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 (translate) from right to left
within its container.
<html>
<head>
<title>Simple Scrolling Text Example</title>
<style>
.scrolling-text-container{
width:100%;
overflow:hidden;
white-space:nowrap;
border:1px solid red; }
.scrolling-text{
display:inline-block;
padding-left:100%;
animation:scrollText 10s linear infinite; }
@keyframes scrollText{
0% {transform:translate(100%);}
}
</style>
</head>
<body>
<div class=”scrolling-text-container”>
<div class=”scrolling-text”>
Start studying right now!!!
</div>
</div>
</body>
</html>
When you open this html file in a browser, you’ll see a box with aborder containing scrolling text.
The text continuously scrolls from right to left within its container due to the animation defined in CSS (scroll text).
[Link] steps to add a video clip in a website which starts playing as the webpage loads.
Ans. There are some steps to add avideo cliup in a webpage:
Step 1: Choose a video clip
First,choose the video clip which you want to use in your webpage.
Step 2: place video clip in ypur project
Save the chosen video clip in your project folder
Step 3: create html file
Create an html file ([Link]) and open it in a text editor.
<html>
<head>
<title> Video Clip</title>
</head>
<body>
<h1> video clip </h1>
<video width=”400” autoplay muted controls>
<source src-“cat.mp4” type=”videp/mp4”>
</video>
</body>
</html>
Step 4: HTML structure
Write the basic structure of an html document using <html>tag.
Write the title of the webpage using <title> tag in the <head> section.
Body content: inside <body> write heading <h1> and <video> tag for embedding videos, and specify
attributes like width,autoplay,muted and controls based on your requirements.
Use <source> attribute to specify the source and type of the video file.
Step 5: Save and view
Save and view video clip in a web browser which stars playing as the web page loads.
[Link] steps on compiling the result of your last examination in a tabular form and display it in a webpage.
Ans. There are some steps to compile the result of your last examination in a webpage.
Step 1. Create html file
Create an html file ([Link]) and open it in text editor.
Write the basic structure of an html document to compile the result of your last exam in a tabular form.
Step 2.:HTML Structure
1. Write the basic structure of an html document using <html> tag.
2. Write the title of the webpage using <title> tag in the <head> section.
3. Write the basic structure of an html table with multiple rows<tr> and columns <td> inside the <body> tag.
4. Apply internal CSS code for border and color to the <table> element.
Step 3: save and view
Save and view the result of your last exam in a webpage.
[Link] context of fig.40(d), add another button namely ‘Revert’ which when is pressed, it will reverse both
the color and index values.