EDUCENTER DELHI

NIOS Class 12 th

Web Designing (622)

Question Paper Solution
Note : (i) Section A contains 15 questions of 1 mark each.
(ii) Section B contains 8 question of 2 marks each.
(iii) Section C contains 8 questions of 3 marks each.
(iv) Section D contains 5 questions of 5 marks each.
SECTION A
1. Email addresses have two main parts separated by @.
2. In HTML websites, we can link to another document or
website using hyperlinks.
3. Multiple views of an HTML document are presented in a
web browser.
4. Dynamic websites are always connected to a database.
5. A website disclaimer is a common method used to limit the
liability of the owner.
6. Center alignment is the default alignment for the CAPTION
element.
7. The FRAMESET tag defines the number of columns and
rows in a frameset.
8. In Dreamweaver, one can view both the Design and Code
views in Split view.
9. In Flash, each drawing is known as a vector graphic.
10. A graphic or button in Flash is known as a symbol.
11. Moving an object in Flash is known as animation.
12. Stroke color of Flash gives an outline color to the object.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
13. Autism is a disability related to social communication and
interaction.
14. Click areas are made large for users who cannot control a
mouse with precision.
15. A screen reader is software that reads out the contents of
a website for visually impaired users.
Section B
16. Sahil is accessing the desktop computer for the first time.
He wants to store all his files in a folder name “MY FILES” in
D drive. Help him by writing all the steps to create a new
folder named “MY FILES” on the D drive of a desktop.
Ans. Steps to create a new folder named "MY FILES" on the D
drive of a desktop:
1. Click on the File Explorer icon on the taskbar or press
Windows Key + E to open File Explorer.
2. Navigate to the D drive by clicking on it in the left pane or
typing "D:\" in the address bar and pressing Enter.
3. Right-click on an empty space in the D drive window and
select "New" from the context menu, then select "Folder."
4. Type "MY FILES" as the name of the new folder and press
Enter.

17. Comment on the statement “Functioning of Switch is

better than Hub.” Support your answer with reason also.
Ans. The statement "Functioning of Switch is better than Hub" is
generally true. The main reason for this is that a switch can
provide dedicated bandwidth to each device connected to it, while
a hub shares the bandwidth among all connected devices. This
means that if several devices are sending or receiving data
simultaneously, a hub can become congested and slow down the

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
network. On the other hand, a switch can direct traffic only to the
intended device, reducing the likelihood of collisions and
increasing the overall network speed. Therefore, a switch is a
better choice for modern networks where high-speed data transfer
and low latency are important.

18. Write one advantage and one disadvantage of DSL.

Ans. One advantage of DSL (Digital Subscriber Line) is that it
provides a dedicated and reliable connection to the internet,
which is not shared with other users in the same area. This
means that the speed of the internet connection remains
consistent even during peak hours, unlike cable internet which
can slow down due to high usage in the area.
One disadvantage of DSL is that its speed and performance can
be limited by the distance of the user from the telephone
exchange or DSLAM (Digital Subscriber Line Access Multiplexer).
As the distance increases, the signal strength weakens, resulting
in slower internet speeds and lower performance.

19. Based on the two lines of HTML code write the answer to
the questions.
<A HREF="C:\desktop\states.html"> #line 1
<A HERF="#SPORTS"> #line 2
(a) Which feature of webpage is used in both lines of HTML
code ?
(b) Are both features same ? If no, write one difference
between them.
Ans.
(a) The feature of the webpage used in both lines of HTML code
is hyperlinking.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
(b) The features are not the same. The first line of code creates a
hyperlink to a web page named "states.html" located on the C
drive of the local computer. The second line of code creates a
hyperlink to an anchor with the ID "SPORTS" within the same
HTML document.

20. Explain in brief about any two common methods of

Scripting.
Ans. Two common methods of scripting are:
1. JavaScript: A programming language used to create
interactive and dynamic web pages. JavaScript can be used
to add functionality such as form validation, pop-up alerts,
and animations to a webpage.
2. PHP: A server-side scripting language used to create
dynamic web pages that interact with a database. PHP can
be used to create login systems, dynamic content, and
interactive forms on a webpage.

21. “Data synchronization is a very important feature of

Multimedia.” Comment on it and give one example in support
of your answer.
Ans. Data synchronization is indeed a very important feature of
multimedia. It ensures that all media elements in a project, such
as video, audio, text, and graphics, are properly coordinated and
play back in sync. One example of data synchronization in
multimedia is in video editing software. When editing a video, the
editor can synchronize the audio and video tracks to ensure that
the sound is perfectly in sync with the visuals. This is crucial for
professional-quality video production.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
22. What is the difference between INSTANCE NAME and
SWAP properties of Button Symbol of Flash.
Ans. The INSTANCE NAME and SWAP properties of a Button
Symbol in Flash have different utilities. The INSTANCE NAME is
used to identify a specific instance of a button symbol in a Flash
project, whereas the SWAP properties are used to create different
versions of the button symbol that change appearance when
clicked. The INSTANCE NAME is used to reference the button
symbol in ActionScript code or to apply effects and animations to
the button. The SWAP properties are used to create visual
feedback when the button is clicked, such as changing the color
or shape of the button.

23. What is the utility of

(a) Swatches of Photoshop ?
(b) Style palette of Photoshop ?
(a) The swatches of Photoshop are used to store and organize
colors that are frequently used in a project. Swatches can be
created by selecting a color and adding it to the Swatches palette.
Swatches can also be imported or exported to share with other
users. This feature allows designers to easily apply consistent
colors across multiple designs and projects, which can save time
and ensure brand consistency.
(b) The Style palette of Photoshop is used to apply layer styles,
such as drop shadows, bevels, and strokes, to a layer or group of
layers. The Style palette allows designers to create and save
custom styles, apply multiple styles to a single layer, and easily
modify the settings of an existing style. This feature can be a
time-saving tool for creating complex and visually appealing
designs.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
Section C

24. Correct the HTML code using the attributes of FONT tag.
<FONT STYLE = “ARIAL” WIDTH=12
RANG=“GREEN”>AZADI KA AMRIT MOHATSAV</FONT>
Ans. Here's the corrected HTML code with the proper attributes of
the `FONT` tag:

<FONT STYLE="font-family: Arial; font-size: 12px; color:

green;">AZADI KA AMRIT MOHATSAV</FONT>

Note that the `WIDTH` attribute is not a valid attribute of the

`FONT` tag. Instead, the `font-size` property is used to specify the
size of the font.

25. Let’s Enjoy Sleep company wants to create a website for

their Sleep Disorder Clinic. What are the first three steps of
planning of the website and explain the utility of each step ?
Ans. The first three steps of planning a website for Let's Enjoy
Sleep company's Sleep Disorder Clinic and their utility:

1. Define the purpose and goals of the website: The first step in
planning a website is to define its purpose and goals. This
involves identifying the target audience and the specific services
or information the website will provide. By having a clear purpose
and goals, the website can be designed to effectively meet the
needs of its intended audience.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
2. Develop a site map and wireframe: A site map is a visual
representation of the website's structure and content, while a
wireframe is a blueprint of the website's layout. These tools help
to organize the content and layout of the website, making it easy
to navigate and use. The site map and wireframe also ensure that
the website is designed with the user experience in mind, making
it easier for visitors to find the information they need.

3. Choose a Content Management System (CMS): A CMS is a

software platform that allows for the creation, editing, and
management of website content. Choosing the right CMS is
important because it can affect the website's ease of use,
security, and scalability. By selecting a suitable CMS, the website
can be managed more efficiently and effectively.

The utility of each of these steps is as follows:

1. Defining the purpose and goals of the website ensures that

the website is designed to meet the needs of its intended
audience. By having a clear understanding of the website's
purpose, its content can be organized and designed to
effectively communicate with visitors.

2. Developing a site map and wireframe allows for a clear and

organized structure of the website. This makes it easier for
visitors to navigate and find the information they need.
Additionally, a wireframe ensures that the website's design is
consistent and user-friendly.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
3. Choosing a CMS helps to streamline the management of the
website's content. It allows for easy updates and edits, which
can save time and reduce errors. A good CMS also ensures
the security and scalability of the website.

26. Define Copyright policy. Write any two works that are
included in Copyright policy.
Ans.Copyright policy is a set of legal rules and regulations that
grant exclusive rights to the creators of original works to control
how their works are used and distributed. It specifies the
conditions under which the work can be used and protected from
unauthorized use. Copyright laws apply to various types of
creative works, such as literary works (e.g., books, articles, and
poems), artistic works (e.g., paintings, photographs, and
sculptures), and musical works (e.g., compositions and sound
recordings). In addition to these traditional categories, copyright
protection also extends to newer forms of creative works, such as
software, multimedia content, and digital publications. Copyright
laws aim to promote creativity and protect the rights of the
creators and owners of intellectual property.

27. Define CSS. What is the effect of a:visited {color:green}

pseudo-class selector ? Write another example of link
selector.
Ans. CSS stands for Cascading Style Sheets, which is a
stylesheet language used for describing the presentation of a
document written in HTML or XML. CSS is used to define the
visual styles, layout, and formatting of web pages, including
colors, fonts, sizes, spacing, and positioning of HTML elements.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
The pseudo-class selector a:visited {color:green} is used to
change the color of visited links to green. When a user clicks on a
link and visits the linked page, the color of the link will change
from the default color to green. This selector is useful for
indicating to users which pages they have already visited on a
website.

Another example of a link selector is a:hover, which changes the

style of a link when the mouse cursor hovers over it. This can be
used to highlight links and provide visual feedback to users,
indicating that the link is clickable and will take them to another
page. For example, a:hover {text-decoration: underline;} will
underline the link text when the user hovers over it.

28. Write any three features of Adobe Dreamweaver.

Ans. Adobe Dreamweaver is a popular web development
software that provides a range of features to help web developers
design, develop and maintain websites. Here are three key
features of Adobe Dreamweaver:

1. Code editor: Dreamweaver provides a code editor with syntax

highlighting, code suggestions, and auto-completion features to
help developers write clean and efficient code. It supports various
programming languages, including HTML, CSS, JavaScript, and
PHP.

2. Live Preview: Dreamweaver has a live preview feature that

allows developers to view the changes they make to a web page
in real-time. This feature enables developers to see how the

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
website will look and function in the browser, without having to
switch between the code and browser windows.

3. Responsive Design: Dreamweaver provides a responsive

design feature that enables developers to create web pages that
are optimized for different screen sizes and devices. It offers pre -
built templates and media query options that allow developers to
create websites that look great on desktop, tablet, and mobile
devices. Dreamweaver also provides a visual layout mode that
enables developers to create responsive designs without writing
code.

29. Write a Javascript program to calculate the ONLINE

SHOPPING bill. A sample of the report is shown below :
Name of the Item - <name of any of the item purchased by
you>
Residential address - <your address>
Cost of 1 item - <rate>
Quantity - <number of items bought>
Total Bill -
Discount amount - 250
Total final amount - <total amount – discount amount>

Store item name, address, units consumed and cost of 1 item

in different variables. The customer is given a rebate of < 250
on the total bill. Calculate the total bill, total final amount and
print them.
Ans. Javascript program that calculates the online shopping bill,
based on the inputs of item name, address, cost, and quantity:

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
Javascript code
// Store item details in variables
var itemName = "T-Shirt";
var address = "123 Main St, Anytown, USA";
var costPerItem = 25.99;
var quantity = 3;

// Calculate total bill

var totalBill = costPerItem * quantity;

// Apply discount of 250

var discountAmount = 250;
var finalAmount = totalBill - discountAmount;

// Print the report

console.log("Name of the Item - " + itemName);
console.log("Residential address - " + address);
console.log("Cost of 1 item - " + costPerItem);
console.log("Quantity - " + quantity);
console.log("Total Bill - " + totalBill);
console.log("Discount amount - " + discountAmount);
console.log("Total final amount - " + finalAmount);

In this program, we store the details of the item, address, cost,

and quantity in separate variables. We then calculate the total bill
by multiplying the cost per item with the quantity. We apply a
discount of 250 and calculate the final amount by subtracting the
discount from the total bill. Finally, we print the report using
console.log() statements.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
30. Write the HTML code to display the number from 1 to 100.
Ans. To display numbers from 1 to 100 in HTML, we can use an
ordered list element, which is represented by the <ol> tag. Within
the <ol> tag, we can use the <li> tag to create each list item and
display the numbers. Here's the HTML code to display the
numbers from 1 to 100:

HTML Code
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<!-- and so on, up to 100 -->
<li>100</li>
</ol>

This code will create an ordered list that displays the numbers
from 1 to 100 in a vertical list. Each number will be displayed in a
separate list item, which is represented by the <li> tag. The
ordered list will automatically number the items sequentially from
1 to 100.

31. Why do we need adjustment layer in Photoshop ? Write

the purpose of Layer mask, Layer lock and Layer styles.
Ans. We need adjustment layers in Photoshop because they
allow us to make non-destructive adjustments to our images.
Unlike direct adjustments made to image layers, adjustment
layers create a separate layer that affects the layers below it. This

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
means that we can make adjustments without permanently
altering the original image or affecting other layers.

Layer masks in Photoshop allow us to selectively show or hide

parts of a layer. They enable us to create complex image
composites and manipulate the transparency of different layers.
Layer masks are also useful for creating special effects, like
gradient fades and vignettes.

Layer locks allow us to protect layers from accidental changes. By

locking layers, we can prevent them from being moved, edited, or
deleted.

Layer styles in Photoshop are pre-designed effects that can be

applied to a layer with a single click. They allow us to add
shadows, bevels, and other effects to our layers quickly and
easily. Layer styles are customizable and can be saved and
reused across multiple layers, saving time and effort.

Section D

32. Define Ring topology. Draw the diagram of it. Give one
advantage and disadvantage of Ring topology.
Ans. Ring topology is a type of network topology in which devices
are connected in a circular loop, with each device connected to
the next one in the loop. Data flows around the ring in one
direction, and each device listens for data addressed to it before
passing it along to the next device.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI

One advantage of ring topology is that it is efficient and can

support a large number of devices. Because data flows in only
one direction, collisions and data packet collisions are less likely
to occur, which helps to improve network performance.
Additionally, ring topology allows for easy installation and
expansion, as new devices can be added to the network by
simply connecting them to the ring.

One disadvantage of ring topology is that it is less fault-tolerant

than other topologies. If any device in the ring fails, the entire
network may be affected, as data cannot flow around the ring.
Additionally, troubleshooting and diagnosing problems in a ring
topology can be more difficult than in other topologies, as it may
not be immediately apparent which device is causing the issue.
Finally, ring topology can be slower than other topologies, as data
must pass through each device in the ring before reaching its
destination.

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
33. Write HTML code to display the webpage as shown in the
figure :

(a) The background color of the page is gray and text in blue
color.
(b) The text style is TAHOMA and of size 5.
(c) The heading of the page is HAR GHAR TIRANGA.
(d) Image of harghar.jpeg on the center of the page.
(e) Add a paragraph with a H3 heading “OUR UNKNOWN
WARRIORS of INDEPENDENCE” in bold.
(f) Display a list of name of 5 warriors of Indian
independence.
Ans. <!DOCTYPE html>
<html>
<head>
<title>HAR GHAR TIRANGA</title>
<style>
body {
background-color: gray;
color: blue;
font-family: Tahoma, sans-serif;
font-size: 5em;

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
}
h1 {
text-align: center;
}
h3 {
font-weight: bold;
}
</style>
</head>
<body>
<h1>HAR GHAR TIRANGA</h1>
<img src="harghar.jpeg" alt="Har Ghar Tiranga"
style="display:block;margin:auto;width:50%;">
<p><h3>OUR UNKNOWN WARRIORS of
INDEPENDENCE</h3></p>
<ul>
<li>Bhagat Singh</li>
<li>Subhas Chandra Bose</li>
<li>Sardar Vallabhbhai Patel</li>
<li>Chandrashekhar Azad</li>
<li>Rani Lakshmibai</li>
</ul>
</body>
</html>

34. Write the HTML code to create the following table :

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI

Ans.
<table>
<caption>AGRI STARTUPS</caption>
<thead>
<tr>
<th>Sl. No.</th>
<th>NAME</th>
<th>HEADQUARTERS</th>
<th>Founded in</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>SFarmsIndia</td>
<td>Hyderabad</td>
<td>2018</td>
</tr>
<tr>
<td>2.</td>
<td>KhetiGaadi</td>
<td>Pune</td>
<td>2018</td>
</tr>

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
<tr>
<td>3.</td>
<td>Farm2Fam</td>
<td>Mumbai</td>
<td>2019</td>
</tr>
</tbody>
</table>

35. On the basics of Dreamweaver write the answer for the

following :
(a) Write the name of panel to insert a table.
Ans. To insert a table in Dreamweaver, you can use the "Insert"
panel. This panel can be accessed by clicking on "Insert" in the
top menu and then selecting "Table" from the drop-down menu.
Alternatively, you can use the keyboard shortcut "Ctrl+Alt+T"
(Windows) or "Cmd+Option+T" (Mac) to quickly insert a table.

(b) Write the name of the panel and sub option to create an
email link.
Ans. To create an email link in Dreamweaver, you can use the
"Common" panel, which is a part of the "Insert" panel. Click on
"Insert" in the top menu, and then select "Common" from the
drop-down menu. From there, select "Email Link" to create a link
that opens the default email client of the user. You can customize
the link's subject, body, and recipient's email address in the "Link"
dialog box that appears.

(c) Which tag helps to divide the web page into various
sections ?

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
Ans. The "div" tag (short for division) helps to divide the web page
into various sections. It is a container element that allows you to
group and style various elements together. You can use CSS to
apply styles to a "div" element, such as background color, border,
and margin.

(d) Write the name of the option to display a thick blue

coloured line.
Ans. To display a thick blue colored line in Dreamweaver, you can
use the "Properties" panel. First, select the element to which you
want to apply the line, such as a table or a paragraph. Then, click
on the "Border" property in the "Properties" panel, and set the
border width to a higher value, such as "3px". Next, click on the
"Border Color" property, and select the blue color from the color
picker. This will apply a thick blue border to the selected element.

35. You are starting a new startup to impart HYBRID learning

to students. After lots of research, you decided to start a
website for the same. The website must have all components
to make the learning interesting for the students. What
features will you add to the website ? Identify the best two
tools of Multimedia to create the interactive website. Also
explain how these tools will be helpful for the students.
Ans. As a startup that aims to provide hybrid learning to students,
there are several features that you can consider adding to your
website to make the learning experience engaging and
interactive. Here are a few suggestions:

1. Video lectures: You can create video lectures for each topic,
which students can watch at their own pace. You can also add

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
interactive elements to the videos, such as quizzes, pop-up text,
and annotations.

2. Virtual labs: You can create virtual labs, which allow students to
perform experiments and simulations online. This is especially
useful for science and engineering courses.

3. Discussion forums: You can create discussion forums, where

students can ask questions, share their opinions, and collaborate
with each other. This can foster a sense of community and help
students learn from each other.

4. Gamification: You can add gamification elements to the

learning experience, such as badges, leaderboards, and rewards
for completing assignments. This can motivate students to
engage with the material and strive for excellence.

5. Personalization: You can personalize the learning experience

for each student, based on their interests, learning style, and
performance. This can help students feel more engaged and
motivated, as they receive customized feedback and guidance.

For creating an interactive website, the best two tools of

multimedia are:

1. Adobe Animate: Adobe Animate is a powerful tool for creating

interactive animations, graphics, and multimedia content. It allows
you to create engaging animations and interactive elements that
can be embedded into your website. For example, you can create

All Rights Reserved © EDUCENTER DELHI

 EDUCENTER DELHI
interactive quizzes, games, and simulations using Adobe
Animate.

2. H5P: H5P is a free and open-source tool for creating interactive

HTML5 content, such as quizzes, presentations, and interactive
videos. It allows you to create interactive elements that can be
embedded into your website, without requiring any coding skills.
For example, you can create interactive drag-and-drop quizzes,
multiple-choice questions, and branching scenarios using H5P.

Using Adobe Animate and H5P, you can create interactive

elements that can make the learning experience more engaging
and interactive for the students. For example, you can create
interactive animations and simulations that explain complex
concepts in a visual and interactive way. You can also create
interactive quizzes and games that test students' knowledge and
reinforce their learning. These tools can be helpful for the
students, as they allow them to interact with the material and
receive instant feedback on their performance. They can also help
students learn at their own pace and in a way that suits their
individual learning style.

All Rights Reserved © EDUCENTER DELHI