Scribd
Upload
109 views13 pages

Exercise 3

Uyt

Uploaded by

zulqinaina2007
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
109 views13 pages

Exercise 3

Uyt

Uploaded by

zulqinaina2007
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/ 13

UNIT 3 Exercise

Select the suitable answer for the following Multiple Choice Questions (MCQs)
1 Everything in HTML is identified on the basis of ______
A Brackets B Title
C Tags D Image
2 The output of HTML code is visible in ______
A Notepad B File
C Browser D Spreadsheet
3 Name of a webpage can be given using ______ tag
A Body B Title
C Head D Footer
4 Main parts of a document are arranged in ______ tag
A Head B Title
C Body D Line Break
th
5 The heading tag-pair 5 level heading is ______
A <h5 . . h5> B <h5 . . /h5>
C H5> . . </h5 D <h5> . . </h5>
6 Span is used to provide ______ to a line
A Font B Border
C Style D Color
7 First row of table in HTML is called ______
A Title row B Top row
C Header row D Upper row
8 p tag-pair is used for ______
A Print B Page align
C Page break D Paragraph
9 A variable cannot start with a ______
A Alphabet B Number
C Character D String
10 The first value assigned to a variable after declaration is called ______
A Beginning value B Starting value
C Initialization D Substitution
Give Short answers to the following Short Responsive Questions (SRQs)
Q1 Contrast between website and web application
Ans: A document which exists and is accessible through Internet is a webpage, while a set of
webpages is termed as website. On the other hand a computer program which offers a service
or executes tasks via browser and internet connection, remotely accessing a server, is called
web application.
Q2 What is “href” refers to and how to use it?
Ans: Links are helpful components of a webpage, that can you redirect to another webpage
or a document. Links are called Hyperlinks in html with ‘a’ tag-pair. 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. Example is as follows:
<a href =”https://www.nbf.org/“ target=”_blank”> National Book Foundation </a>
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
destination address will open in the same tab or window.
Q3 Enlist the optional parameters to open a webpage.
Ans: Webpages themselves don't have optional parameters, but URLs used to access them
can. These optional parameters are typically used to convey additional information to the
webpage, control its initial behavior, or track certain actions. A typical URL with optional
parameters looks like this:
Base URL + "?" + Parameter Name + "=" + Parameter Value (& Parameter Name 2 + "=" +
Parameter Value 2 ...)
 Base URL: This is the main address of the webpage.
 "?": This symbol marks the beginning of the optional parameter section.
 Parameter Name: This specifies what data you're passing.
 Parameter Value: This holds the actual data you want to send.
 "&": This symbol separates multiple parameters.
Q4 List out the frequent tags used in text of a webpage and what are they used for?
Ans: Here are some frequently used HTML tags and their purposes:
 Paragraph tag (<p>) - This defines a block of text as a paragraph. It creates space before
and after the text for readability.
 Heading tags (<h1> to <h6>) - These create headings of different sizes. h1 represents
the main title, while h2-h6 are subheadings with decreasing importance.
 Anchor tag (<a>) - This defines a hyperlink, clickable text that leads to another webpage
or a specific location within the current page.
 Image tag (<img>) - This inserts an image into the webpage.
 List tags (<ul> and <ol>) - These are used to create unordered (bulleted) and ordered
(numbered) lists, respectively.
 Division tag (<div>) - This is a generic container tag that can group other HTML elements
together. It's often used to create sections or layouts on the page.
 Bold tag (<b>) – To make character bold
 Italic tag (<i>) – Text is shown in italics
 Underline tag (<u>) – Underline a text
Q5 Explain the role of <body> tag-pair in a document
Ans: The main part of the html is the ‘body’, all the main constituents of the documents are
arranged in the <body> tag=pair. It acts like a container that holds all the visible content a user
sees when they open the webpage.
Q6 How the event based code is used in JavaScript?
Ans: JavaScript code can be embedded in HTML with starting and ending tag of <script>, in a
webpage. There is no limitation of where to place the code inside a HTML file. In programming
everything that a user or another program does with your program that can be sensed and
activates some task to be done, is called an ‘event’. Events are important and critical in the
functioning and flow-control of your program. Similarly, in website development, easiest way to
introduce dynamically is to allow some event to occur and respond accordingly. ‘Alert’ and
‘onclick’ are examples of ‘event’ based code in JavaScript.
Q7 Infer about the External CSS? Where are External CSS generally used?
Ans: An external CSS file is a separate document typically saved with a .css extension. It
contains all the CSS code that defines styles for various HTML elements. The HTML document
links to this external CSS file using the <link> tag in the <head> section. This way, the styles
defined in the CSS file are applied to the HTML elements in the webpage. Example of External
CSS is: <link rel=”mystylesheet” href=”my_own_SS.css”/>
Give Long answers to the following Extended Responsive Questions (ERQs)
Q1 What is Document Object Model? Explain with the help of an example
Ans: 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 hierarchy of the
said file is defined. A tree consists of nodes and links, so is the case
here where every object and component of HTML is treated as node.
Hence, the file, components, features, script and even comments
which exist in a web page all are treated as object of HTML.
Simpler approach in locating any object in a web page via accessing
the DOM-tree is ‘element-id’. So we will call function like
‘getElementById()’ 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. In the following program / figure we will locate elements
using tag <p> via defining the IDs, ‘leid’(short for Locate Element by ID) and ‘hdom’ (short for
title of HTML Document Object Model. Thereafter, on the line 7 th and 8th two variables are
defined which store the located elements. Next, two ways are listed to print the values.
‘innerHTML’ is used for attaining (and if needed for updating) values of an element.

Example:
Consider a simple HTML webpage with a heading (h1), a paragraph (p), and a button:
HTML
<h1>Welcome to my Website</h1>
<p>This is a paragraph of text.</p>
<button> Click Me! </button>
In the DOM, this webpage would be represented as a tree-like structure with objects for each
element:
 The root object represents the entire document.
 There would be a child object for the <h1> element, containing properties for its text
content ("Welcome to my Website") and styles (font size, color, etc.).
 Similarly, there would be child objects for the <p> and <button> elements, each with their
respective properties and methods.
Using JavaScript to interact with the DOM:
JavaScript can access and manipulate the DOM objects using methods like:
 getElementById(): Retrieves an element by its unique ID.
 getElementsByTagName(): Retrieves a collection of elements with a specific tag name (e.g.,
all <p> elements).
 innerHTML: Gets or sets the HTML content within an element.
 style: Accesses and modifies the style properties of an element.
Here's an example of how JavaScript can change the text content of the paragraph in our
example:
JavaScript
const paragraph = document.getElementById("myParagraph"); // Get the paragraph element
paragraph.innerHTML = "This paragraph content has been changed by JavaScript!";

Q2 Write code to differentiate between different types of headings in HTML


Ans: 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 program is as follows:
Q3 Elaborate steps and provide code to load a background image in a webpage
Ans: An image can be set as background of a page using the background attribute in the
<body> tag. The syntax is: <body background = “image.jpg”>
If the image is smaller than the browser window then it will repeat itself till the entire window
is filled. The example/code to load a background image in a webpage is as:

Background Image in HTML

Background Image in CSS

Q4 With the help of sample code, highlight different methods to incorporate CSS code in a
HTML webpage
Ans: Cascading Style Sheet (CSS)
In the development of HTML webpage the scheme, an arrangement and presentation of whole
webpage along with the components are handled by spreadsheet language. There are various
stylesheet languages available like Cascading Style Sheets (CSS), Document Style Semantics and
Specification Language (DSSSL), Extensible Stylesheet Language (XSL), etc. The most common
and frequently used with HTML is CSS. So, this way the contents of the webpage are defined
through HTML while the look of different components is handled via CSS. This way, it is easier
to manage and troubleshoot your web designing code for extension and digging out the errors.
There are three ways, via which we can use CSS styles in out HTML webpage.
Inline CSS: Any CSS attribute that we want to incorporate can be added using HTML tag and
incorporated in the body section as shown in figure / code below:
Internal (Embedded) CSS
Instead of assigning styles for every heading and other component at the time of its first
occurrence in the code, a better approach is to outline all the styles in the header under the
tag-pair of ‘style’ as shown in code/figure. This way, all the presentation related CSS code is
separated and do not indulge (spoil) with the already written HTML code. Additionally, change
in one line in the CSS section will reflect throughout the respective components.

External CSS
An external CSS file is a separate document typically saved with a .css extension. It contains all
the CSS code that defines styles for various HTML elements. The HTML document links to this
external CSS file using the <link> tag in the <head> section. This way, the styles defined in the
CSS file are applied to the HTML elements in the webpage. Example/Code of External CSS is
Q5 Sketch steps and provide code to apply border and color to a table in a webpage
Ans: By using CSS, you can provide borders in table as well. For this purpose, we initially need
to state the ‘style’ tag–pair just before start of 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 cod, we are defining
border for table, table-header cells and every other cell in the table. Other than that, we can
also designated a background color for the table
Steps:
1. Define the table structure: Create your HTML table with rows (<tr>) and cells (<td>)
containing your data.
2. Target the table element: In your CSS code, use the selector table to target the entire
table element.
3. Set border properties: Use the border property to define the border style, width, and
color for the table.
Q6 Discuss the functionality JavaScript can provide in a webpage with the help of a
suitable example
Ans: Java Script
JavaScript is an exciting language primarily used in development of web pages and scripts. It
does not consume much of memory and that is why it is used at the client-end in developing
websites, for making pages dynamic. It easily works with programming languages like Java and
HTML on any operating system.
JavaScript code can be embedded in HTML with starting and ending tag of <script>, in a
webpage. There is no limitation of where to place the code inside a HTML file. For example, the
following JavaScript code embedded in the body, displays a sentence (string) using
‘document.write()’ function as shown below:

In the sentence displayed above we put additional spaces and tabs, which JavaScript simply
discarded.
In programming everything that a user or another program does with your program that can be
sensed and triggers some task to be done is called an ‘event’. Events are important and critical
in the functioning and flow-control of your program. Similarly, in website development, easiest
way to introduce dynamicity is to allow some even to occur and respond accordingly. Alert is
the commonly used functionality that JavaScript provides to inform user, about the result of his
action and notification. Event based code like ‘onclick’ are put between the start and end of
<head> tag.
Functionalities:
 DOM Manipulation: JavaScript can access and modify the Document Object Model
(DOM), the tree-like structure representing a webpage's content. This allows for
dynamic updates to the HTML content, style, and layout.
 User Interaction: JavaScript can respond to user actions like clicks, key presses, form
submissions, and mouse movements. This enables features like interactive buttons,
drop-down menus, form validation, and more.
 Asynchronous Operations: JavaScript can handle tasks that don't block the main thread,
like fetching data from servers or performing time-consuming calculations. This keeps
the webpage responsive while these tasks are ongoing.
 Animations and Effects: JavaScript can be used to create dynamic animations and visual
effects, enhancing the user experience and making webpages more engaging.
Q7 Articulate steps and write code to create a scrolling text on a webpage
While there are a few ways to achieve scrolling text on a webpage, using CSS animations is the
recommended approach for modern web development. Here's how to create scrolling text
using CSS animations:
Steps:
1. HTML Structure: Create a basic HTML structure with a container element (<div>) to hold the
text you want to scroll.
2. Text Content: Inside the container element, add the text you want to display with a scroll
effect.
3. CSS Styling:
o Container Style: Define styles for the container element. You can set its width, height,
background color, etc.
o Animation Style: Define an animation using the @keyframes rule. This animation will
specify how the text scrolls within the container.
o Apply Animation: Apply the defined animation to the container element using the
animation property.
Q8 Enlist steps to add a video clip in a website which starts playing as the web page loads
Here are the steps to add a video clip to a website that starts playing as the webpage loads:
1. Prepare your video:
 Ensure your video is in a web-compatible format like MP4. You can use online tools or
video editing software to convert your video if needed.
2. Upload the video:
 Upload your video clip to the same directory (folder) where your HTML file is located, or
to a subdirectory within your website's structure.
3. Add the HTML code:
 In your HTML file, use the <video> element to embed the video clip. Here's an example:
Q9 Cite steps on compiling the result of your last examination in a tabular form and
display it in a webpage
Compiling Exam Results into a Webpage Table
Here's how you can compile your exam results into a tabular form and display them on a
webpage:
1. Prepare your data:
 Ensure you have your exam results in a structured format, like a spreadsheet (e.g., Excel,
Google Sheets) or a CSV file. This will make it easier to extract and format the data for the
webpage.
 Each row in your data source should represent a single exam result. Columns could
represent details like: Student Name, Subject, Obtd Marks, Total Marks
2. Using HTML table element:
 This is a simple and straightforward approach suitable for basic tabular data.
Using HTML table
 Create an HTML file and define a basic structure with a <head> and <body> section.
 Inside the <body>, use the <table> element to create the table structure.
 Define table headers (<th>) for each column (e.g., Student Name, Subject, Marks).
 Use <tr> (table row) and <td> (table data) elements to populate the table with your exam
results from the prepared data source. Here's an example:

4. Display the webpage:


 Save your HTML file in the same directory.
 Open the HTML file in your web browser to view the compiled exam results table.
Q10 In context of Fig 40(d), add another button namely ‘Revert’ which when is pressed, it
will reverse both the color and index values

You might also like