CCBB

SSEE

Computer
ComputerApplications
Applications
ForClass
For IXIX
ClassX

Sarika Kaushal
Sarika
SarikaKaushal
Kaushal

Indiannica
IndiannicaLearning
LearningPrivate
PrivateLimited
Limited
Indiannica Learning Private Limited,
(formerly
(formerlyknown
knownasasEncyclopædia
EncyclopædiaBritannica
Britannica(India)
(India)Private
PrivateLimited),
Limited),
a subsidiary of Navneet Education Limited
a subsidiary of Navneet Education Limited
a subsidiary of Navneet Education Limited
New Delhi, India
New
NewDelhi,
Delhi,India
India

Computer Book-10_Prelims.indd 1 8/20/2019 5:55:50 PM

 CB
SE

Computer Applications
Published in India by
Indiannica Learning Private Limited,
a subsidiary of Navneet Education Limited. For Class IX
A-41, Mohan Cooperative Industrial Estate, Main Mathura Road, New Delhi 110044

© Indiannica Learning Private Limited 2019

The moral rights of the author/s have been asserted.

First Published 2011

Revised Edition 2020

All rights reserved. No part of this work may be reproduced or utilized in any form or by any means, electronic or
mechanical, including photocopy, recording, or by any information storage and retrieval system without permission
in writing from the publisher. Enquiries concerning reproduction outside the scope of the above should be sent to
the address above. You must not circulate this book in any other binding or cover and you must impose this same
condition on any acquirer.

ISBN: 978-93-88801-96-6

Illustrated by Sanjay Charadva

Printed in India by ……………………………………………………………

Sarika Kaushal

Indiannica Learning Private Limited

(formerly known as Encyclopædia Britannica (India) Private Limited),
a subsidiary of Navneet Education Limited
New Delhi, India

Computer Book-10_Prelims.indd 2 8/20/2019 5:55:51 PM

 Preface

Computer Applications in the school curriculum for class X deals with concepts related to
computer technology. Computers are an integral part of our lives, and it is essential for learners to
keep face with fast-changing computer technology. It is imperative to enable learners to apply the
computer technology tools and provide them ample scope to explore and experiment with these
tools. Computer Applications, an Indiannica Learning school book for class X, is based on the
2019 CBSE syllabus for Computer Applications (code 165), earlier Foundations of Information
Technology. The book communicates about information technology through an interactive and
hands-on approach.
All the application programs are based on the open-source software. The key concept behind this
book is its task-based approach which encourages learning through application. The chapters are
supplemented with examples which are given in a graded manner to make the process of learning
simple and effective. To indicate the specific skill to be evaluated icons have been inserted beside the
relevant text. These are coded as given below.

Life skills: t Thinking, s Social, e Emotional

Attitudes and values towards: t Teachers, m Schoolmates, p School programmes,

e Environment, v Values

Activity: l Literary, c Creative, s Scientific, p Performing arts and Clubs: Club

The book includes Python and Scratch and the add-ons are Try it out, Did you know, Word bank, HOTS,
Lab Activity, sample test papers along with lesson objectives and summary.
The expectations are that the book help learners make use of computer application tools with ease and
also make them future-ready. We look forward to your response to the book and to any suggestions
that you may have to improve it.
My thanks go to my family members for their continuous support and encouragement.
 Sarika Kaushal

Computer Book-10_Prelims.indd 3 8/20/2019 5:55:51 PM

 Contents

Unit—Networking • Creating HTML documents

1. Internet Basics 1
• Viewing HTML documents
• History and development of the internet
• Tags or elements in HTML 5
• How the internet works
• Basic structure of an HTML 5 document
• Data transmission over the internet
• Basic HTML elements
• Getting connected to the internet
• Attributes
• World Wide Web (WWW)
• Cascading style sheet
• Domain name or web address
• Background properties in CSS
• IP address
• Some more elements in HTML
• Domain name system
4. Formatting Elements in HTML 55
• Email address
• Formatting tags
• Uniform resource locator
• Text properties
• Uploading and downloading files
• Margin properties
• HTML
• Border properties
• Blogs
• Images and links in HTML
• Newsgroup
• The <img> tag
• Protocols
• CSS float property
• Remote login protocols
• Hyperlinks
• File transfer protocols
• The anchor <a> tag
2. Services on the Internet 24
• HTML global title attribute
• Information retrieval
5. Lists and Tables in HTML 81
• Search engines
• HTML lists
• Finding people on the internet
• Creating ordered lists
• Chat
• Creating unordered lists
• Email
• Definition or description lists
• Other internet services
• Nested lists
• Mobile technologies
• Tables in HTML
Unit—HTML
• Inserting an image in a table
3. Hypertext Markup Language 37
• HTML

Computer Book-10_Prelims.indd 4 8/20/2019 5:55:51 PM

 6. Forms 110 9. Programming with Scratch 162
• Inserting audio and video in HTML • Basic elements of Scratch
• Forms in HTML • Tempo
• Creating a form • Variables
• Input element • Events blocks
• Textarea element • Operators blocks
• Drop-down lists • Coordinate and conditionals
• Scrolling lists • Conditional statements
• Drawing with iteration
Unit—Cyberethics
• Iterative development and using ask and
7. Cyberethics 131
answer blocks
• Netiquette
• Creating a simple game
• Intellectual property rights
• Creating songs
• Plagiarism
Additional Examples: HTML 184
• Digital property rights
Additional Examples: Python 199
• Freedom of information
Additional Examples: Scratch 205
• Digital divide
Assignment on Website Designing 210
• Software licenses
Answers to Exercises 211
• E-commerce
Sample Question Papers 216
Unit—Scratch or Python
Appendix 224
8. Python 143
• Basics of Python—a recap
• Conditional statements
• Loops
• Some practice questions

Computer Book-10_Prelims.indd 5 8/20/2019 5:55:51 PM

 COMPUTER APPLICATIONS
CLASS X
(Code No.165)
2019-20
1. Learning Outcomes
1. Ability to create a simple website
2. Ability to embed images, audio and video in an HTML page
3. Ability to use style sheets to beautify the web pages.
4. Ability to write iterative programs with Scratch/Python.
5. Ability to Interface a web site with a web server and record the details of a user’s request.
6. Ability to follow basic cyber ethics
7. Ability to familiarize with network concepts
2. Distribution of Marks and Periods
Unit No. Unit Name Marks
1 Networking 5
2 HTML 12
3 Cyberethics 5
4 Scratch or Python Theory 8
5 Practical 70
Total 100

Unit 1: Networking
• Internet: World Wide Web, web servers, web clients, web sites, web pages, web browsers, blogs, news
groups, HTML, web address, e-mail address, downloading and uploading files from a remote site. Internet
protocols: TCP/IP, SMTP, POP3, HTTP, HTTPS. Remote login and file transfer protocols: SSH, SFTP,
FTP, SCP, TELNET, SMTP, TCP/IP.
• Services available on the internet: information retrieval, locating sites using search engines and finding
people on the net;
• Web services: chat, email, video conferencing, e-Learning, e-Banking, e-Shopping, e-Reservation,
e-Governance, e-Groups, social networking.
• Mobile technologies: SMS, MMS, 3G, 4G
Unit 2: HTML
• Introduction to web page designing using HTML: create and save an HTML document, access a web page
using a web browser.
• HTML tags: html, head, title, body, (attributes: text, background, bgcolor, link, vlink, alink), br (break),
hr(horizontal rule), inserting comments, h1..h6 (heading), p (paragraph), b (bold), i (italics), u (underline),
ul (unordered list), ol (ordered list), and li (list item). Description lists: dl, dt and dd. Attributes of ol (start,
type), ul (type).
• Font tags (attributes: face, size, color).
• Insert images: img (attributes: src, width, height, alt), sup (super script), sub (subscript).
• HTML Forms: Textbox, radio buttons, checkbox, password, list, combobox.

Computer Book-10_Prelims.indd 6 8/20/2019 5:55:51 PM

 • Embed audio and video in a HTML page.
• Create a table using the tags: table, tr, th, td, rowspan, colspan
• Links: significance of linking, anchor element (attributes: href, mailto), targets.
• Cascading style sheets: colour, background-colour, border-style, margin, height, width, outline, font (family,
style, size), align, float.
Unit 3: Cyber ethics
• Netiquettes.
• Software licenses and the open-source software movement.
• Intellectual property rights, plagiarism and digital property rights.
• Freedom of information and the digital divide.
• E-commerce: Privacy, fraud, secure data transmission.
Unit 4: Scratch or Python (Theory and Practical)
Alternative 1: Scratch
• Revision of the basics of Scratch
• Sprite, tempo, variables, and events
• Coordinates and conditionals
• Drawing with iteration
• Update variables repeatedly, iterative development, ask and answer blocks
• Create games, animated images, stories and songs
Alternative 2: Python (only for children with special needs)
• Revision of Python basics
• Conditionals: if, if-else statements
• Loops: for, while (e.g., sum of first 10 natural numbers)
• Practice simple programs
3. Lab Exercises
• Create static web pages.
• Use style sheets to enforce a format in an HTML page (CSS).
• Embed pictures, audio and videos in an HTML page.
• Add tables and frames in an HTML page.
• Decorate web pages using graphical elements.
• Create a website using several webpages. Students may use any open-source or proprietary tool.
• Work with HTML forms: text box, radio buttons, checkbox, password, list, combo box.
• Write a blog using HTML pages discussing viruses, malware, spam and antiviruses
• Create a web page discussing plagiarism. List some reported cases of plagiarism and the consequent
punishment meted out. Explain the nature of the punishment in different countries as per their IP
laws.
• Create simple stories with Scratch (involving at least two objects/characters) and iteration OR write
programs for finding the sum/product of first n natural numbers using Python

Computer Book-10_Prelims.indd 7 8/20/2019 5:55:51 PM

 Acknowledgements

Software: Windows is a registered trademark of Microsoft Corporation in the United States and other countries. Python®
is a registered trademark of Python Software Foundation (PSF). Scratch is designed and developed by the Lifelong
Kindergarten Group at MIT Media Lab.
Photos/Illustrations:
Cover and title page: (internet and information technology): © Nmedia/Dreamstime.com.
p. 47 (microprocessor): © Ericlefrancais/Dreamstime.com; p. 67 (microphone): © Elena Perminova/Dreamstime.com;
pp. 67, 68 (graphics tablet): © Maria Vazquez/Dreamstime.com; pp. 74, 75, 76, 99 (flower): © Fnadya76/Dreamstime.com;
p. 99 (elephant): © Ondšrej Prosický/Dreamstime.com; p. 103 (school building): © Tigatelu/Dreamstime.com; p. 107 (Taj
Mahal): © Julia Balakhonova/Dreamstime.com; p. 108 (tiger): © Levranii/Dreamstime.com.

Computer Book-10_Prelims.indd 8 8/20/2019 5:55:51 PM

 1 Internet Basics

We will learn about

• History and development of the • Email address
internet • Uniform resource locator
• How the internet works • Uploading and downloading files
• Data transmission over the internet • HTML
• Getting connected to the internet • Blogs
• World Wide Web (WWW) • Newsgroup
• Domain name or web address • Protocols
• IP address • Remote login protocols
• Domain name system • File transfer protocols

Communication is the process in which a person can share their ideas, thoughts, and feelings with
other people. Computer and communication technologies have transformed the way we exchange
information. Today, a person sitting in one part of the world can communicate with someone sitting
in another part of the world in a matter of seconds.
Today’s computers have the ability to communicate or exchange data or information with other
computers. However, to be able to communicate with each other, the computers need to be
connected. This interconnection of computers is called a network and the interconnection of networks
is called the internet.

1
Fig. 1.1: Internet—facilitating communication

Computer Application Grade 10.indb 1 8/20/2019 3:22:08 PM

 Thus, the internet is a global network of computers in which any computer can communicate with
any other computer, provided they both are in the same network.
As the internet is not restricted by any geographical boundaries, we can say that it has brought people
closer together virtually. We can chat with people sitting at distant places. Organizations use the
internet for communication purposes. People in different offices of the organization can connect to
one another using videoconferencing and share information instantly.
There are a number of other uses of the internet as well. From searching for some important
information to buying and selling things online, the internet is becoming more and more central to
our lives.

HISTORY AND DEVELOPMENT OF THE INTERNET

In 1957, the Soviet Union successfully launched the first satellite, Sputnik, into space. This
technological achievement prompted the US government to set up a special agency called the
Advanced Research Projects Agency (ARPA) under the Department of Defense. The purpose of
setting up this agency was to facilitate research in technology with potential military applications.
During the 1960s, ARPA was working on a project to develop a communication system that could
work in any kind of emergency. The advantage of such a network would be that even if a part of
the network was destroyed, the rest of the computers on the network could still communicate with
one another. The visionary thinkers associated with the project were able to connect the computers
through telephone lines.
The first network called the Advanced Research Projects Agency Network (ARPANET) became
operational in 1969. It initially linked computers at select universities and research laboratories to
assist researchers in conducting the basic research through information sharing.
Slowly, the network was made accessible to non-government agencies and the general public. People
therefore started using it for purposes like sending messages and files. By the end of 1970s, computer
networks became international.
ARPANET continued to grow, and in the 1980s, it connected hundreds of more computers at the
universities and corporate labs. Thereafter, the ARPANET was renamed as the internet.
[Note: See Appendix for the timeline of major internet events.]

Internet organizations
The internet has grown tremendously with millions of users connected to it from countries around
the globe. However, there is no single organization that owns, controls, or manages the internet.
Instead, several well-known organizations collectively participate in the research, development, and
management of the internet. Some of these organizations are described here.
• Internet Society (ISOC): The internet society was established in 1992. This society is responsible for
providing organizational infrastructure for the internet standard groups maintaining the internet
code of conduct.
• Internet Architecture Board (IAB): It oversees the development of the internet technology standards.
• Internet Engineering Task Force (IETF): It deals with the architecture of the internet. It defines the
standards and protocols for smoothly operating the internet.

Computer Application Grade 10.indb 2 8/20/2019 3:22:08 PM

 • Internet Research Task Force (IRTF): The aim of the IRTF is to conduct research into the long-term
future of the internet.
• Internet Corporation for Assigned Names and Numbers (ICANN): It deals with managing the domain
name systems and allocation of IP addresses.
• Internet Assigned Numbers Authority (IANA): It manages a diverse database of the internet protocol
parameters and values for the ICANN ensuring that they are assigned correctly and uniquely.
• Network Solutions Inc. (NSI): It manages the central domain name system database.

HOW THE INTERNET WORKS?

The internet is based on the client-server architecture. The Internet
server
client is a program that provides an interface to the user to

R
es
po
request services of the server and to display the results from

ns
e
the server. The server is a program that hosts and manages
the services available on the internet.
The clients reside on individual workstations or personal
computers. The servers reside elsewhere on the network,
usually on more powerful machines. However, sometimes

R
eq
the machines on which the client and server programs

ue
st
reside are themselves referred to as clients and servers. It is
the client that initiates the communication with the server. Client
The server waits for a request from the client and responds Fig. 1.2: Client-server architecture
to such requests.

DATA TRANSMISSION OVER THE INTERNET

For transmission of data, the internet uses the packet-switching technology. The packet switching
works in the following manner:
The larger messages are broken into smaller pieces, known as packets. Each packet is labelled with
the sequence number, destination address, and other relevant information. The packets then travel
independently over the network to the destination.
[Note: There is no dedicated network route for the packets. They may take any available network
route and may arrive in any sequence.]
At the destination, all the packets of the same file are reassembled to form the original message. The
advantage of such a system is that it operates and routes the messages even if a part of the network is
not functioning.

GETTING CONNECTED TO THE INTERNET

The basic requirements for connecting to the internet are:
• A computer
• A modem
• An account with an internet service provider (ISP)
• A network connection
• A browser
3

Computer Application Grade 10.indb 3 8/20/2019 3:22:08 PM

 Modem
A modem is a network device, which is generally used to connect to the internet via telephone lines.
A computer works on the digital signals whereas telephone lines carry analogue signals. Thus, to
connect to the internet, the digital signals must be converted into analogue signals. This process of
conversion is called modulation. Similarly, to receive data from the internet, the analogue signals carried
by the telephone wires must be converted into digital signals. This process is called demodulation.

The
internet

Modem
PC

Fig. 1.3:  Computer connected with a modem

A modem is a device that converts the digital signals into analogue signals and vice versa. It has derived its name from
two words—modulator (mo) and demodulator (dem).

Internet service provider

An internet service provider (ISP) is an organization that provides access to the internet and the related
services to the individuals and organizations. The ISP creates an account for each internet user and
assigns a unique user ID for accessing the internet. The ISP charges its users a fee that depends on the
type of the connection and the usage options chosen.
There are different ISPs operating in different geographical areas of India and other parts of the world.
Some of the well-known ISPs in India are BSNL, MTNL, Tata Communications, Airtel, and Reliance.

Types of internet connections

Depending on the cost, availability, and speed of data transfer, different types of internet connections
are available today.
Dial-up connection: This type of connection uses a modem and a telephone line to connect a
1. 
computer to the internet. The modem acts as an interface between the computer and the telephone
line. The computer dials a number (provided by the ISP) to connect to the internet. This is a slow
connection, and it also does not allow the user to make a phone call while accessing the internet.
However, it is the least expensive type of an internet connection.
The internet

Phone line

Internet service
Modem provider (ISP)

Internet user
Fig. 1.4:  Dial-up connection

Computer Application Grade 10.indb 4 8/20/2019 3:22:10 PM

 2. Wired broadband connection: A broadband connection uses a broad band (wide range) of
frequencies to transmit the data. It is a fast-speed internet connection that is always on. Wired
broadband connection can be obtained through the following methods:
Cable TV network: It uses the local cable TV line (a coaxial cable) and a cable modem to deliver
(a) 
the internet services. It offers a fast and reliable connection. Dedicated cables are spread from the
local cable TV operator to individual users. However, it is not possible to spread dedicated cable
line in places difficult to access.
(b) DSL: DSL stands for digital subscriber line. A DSL connection uses the ordinary telephone line
and a modem to connect to the internet. It carries both voice (telephone) and data (internet)
over a single wire. It is possible to surf the internet and use the telephone at the same time.
3. Wireless broadband connection: The wireless technology uses radio or microwave frequency
range for the transmission of data. This type of connection involves the use of technologies, such
as satellite, Wi-Fi, and WiMAX.
Internet user

Internet user
The internet
The internet

Telephone
Cable modem
DSL modem

(a)  Cable connection (b)  DSL connection

Fig. 1.5:  Wired internet connections

Satellite: In this type of connection, internet access is provided through communication

(a) 
satellites. This type of connection is quite fast. However, it is expensive and can be affected by
bad weather. But it can be a good connectivity alternative in places where there is difficulty in
laying cables.
(b) Wi-Fi: Wi-Fi is the name of a wireless technology that allows a wide range of devices, such
as PCs, laptops, mobile phones, and PDAs to communicate wirelessly. A Wi-Fi network
consists of a broadband (cable or DSL) modem that is connected to a wireless router. The
router establishes a wireless connection with multiple devices in its range by sending and
receiving high-frequency radio waves. It therefore acts as the access point (or base station) for
all the connecting devices. Each device connects to the access point using a wireless adapter.
Most laptops and smartphones today have built-in wireless adapters. The router allows the
connected devices to access the internet through the broadband modem. Nowadays, public
places like airports, hotels, colleges and universities, campuses, libraries, coffee shops, and
shopping centres use Wi-Fi technology to provide wireless internet access to people within the
network range. Such places offering Wi-Fi access are called Wi-Fi hot spots.

Computer Application Grade 10.indb 5 8/20/2019 3:22:12 PM

 WiMAX: WiMAX stands for worldwide interoperability for microwave access. It is a
(c) 
technology for delivering high-speed wireless broadband service over large geographical areas.
WiMAX can be used for setting up wireless MANs. It offers much higher data transfer rates
than Wi-Fi.

Modem
ISP The internet

Router

Laptop
Phone

Home Base station

Internet user LAN
Fig. 1.6:  Wi-Fi network Fig. 1.7:  WiMax network

Who pays for the internet?

There is no single agency that owns the internet. The internet users (individuals and institutions) pay their
local or regional ISPs for their share of services. These smaller ISPs, in turn, might purchase services from
an even larger network. So everyone who uses the internet, in some way or the other, pays for a part of it.

WORLD WIDE WEB (WWW)

The World Wide Web (WWW), or simply web, is a large
collection of online documents called web pages. These
Did You Know?

The Web was invented in

documents can contain text, pictures, audio and video clips,
1991 by Tim Berners-Lee,
and animations. WWW uses the HTTP for the transfer of
while consulting at CERN
these documents over the internet. Thus, we can say that
(now known as European
WWW is one of the services on the internet, which is used Organization for Nuclear
to access information over the internet. Research) in Switzerland.
The web uses the client-server architecture of the internet.
The documents are located on server machines (called web
servers) on the WWW. The client sends a request for a document to the web server. The server locates the
documents requested by the client and sends those documents to the client.

Web browser
The name browser comes from the word ‘browse’, which means to navigate. Thus, we can say that a
browser is an application program used to look at and interact with all the information on the WWW.
Microsoft Edge, Google Chrome, Mozilla Firefox, and Safari are some of the popular internet browsers.
They all have a graphical and user-friendly interface.
The browser works in the following way:
• It interprets the user’s request for a web page and sends it to the server.

Computer Application Grade 10.indb 6 8/20/2019 3:22:26 PM

 • It interprets the contents of the web page returned by the server and displays it in an appropriate
format to the user.
Figure 1.8 shows a browser window. Each browser has an address box. Here, the user has to type the
web address of the web page to be opened.

Fig. 1.8 
A browser has various tools for the convenience of the user. Let us have a look at some of the tools on
the toolbar of Firefox.
• Back  It takes you to the previously opened web page.
• Forward  It takes you to the next web page, which has already been visited.
• Stop  It stops the loading of the web page.
• Reload or Refresh  It fetches a fresh copy of the web page.
• Home  It returns you to the page at the start.
• Bookmarks or Favorites  A web browser has a Bookmarks or Favorites folder where you can
save links to your favourite or frequently visited sites. This allows you to quickly return to a website
simply by clicking on its link.

Web pages
A web page is a document on the WWW created using hypertext markup language (HTML). It may
contain different types of data like text, hyperlinks, images, videos, tables, and so on. The special element
of a web page is the hypertext. Hypertext acts as a hyperlink between the web pages. When a hypertext
is clicked, the person viewing the web page is taken to a different web page or to a different location on
the same web page. The presence of hypertext thus makes a web page a non-linear document.

Computer Application Grade 10.indb 7 8/20/2019 3:22:27 PM

 There are millions of web pages on the WWW located on various web servers. To access a web page, you
have to specify its URL in the address bar of the web browser. Figure 1.9 shows a web page.

Fig. 1.9
Websites
A website is a collection of related web pages on the WWW, identified by a unique name. The unique
name of the website is called its domain name. A website is hosted on a web server on the WWW. The
first page of the website is called its home page. Any individual or organization can create its website.
However, to host the website on a web server, it has to be first registered with a unique name. Hosting
a website means uploading it on a web server and making it available to the WWW users.
Figure 1.10 shows the home page of the website www.indiannicalearning.com.

Fig. 1.10

Computer Application Grade 10.indb 8 8/20/2019 3:22:27 PM

 The home page shown above is linked to a large number of other pages on the website www.
indiannicalearning.com. Figure 1.11 shows an example of a page linked to the home page.

Fig. 1.11

Web servers
A web server is a program on a server computer that hosts a large number of web pages and delivers
the requested web pages to the clients. Web servers are installed on fast and powerful machines
that host websites.
The features of the communication between a client and
a web server are given below:
In 1989, Tim Berners-Lee
• The server never initiates the communication proposed to his employer
with a client. It is always the client that starts the CERN a new project, which
communication with the server by requesting for a had the goal of easing the
web page. exchange of information
between scientists by using a
• On receiving the request for a web page, the web hypertext system. As a result
Did You Know?

server retrieves the requested web page and delivers it of the implementation of this
to the client. project, in 1990 Tim Berners-
• The web server can handle simultaneous requests from Lee wrote two programs:
multiple clients. (a) A browser called
WorldWideWeb.
• In addition to delivering web pages, the web server (b) The world’s first web server,
is capable of handling errors. In case the web server later known as CERN
encounters some problem in delivering a web page, it HTTPd, which ran on
sends an appropriate error message to the client. NeXTSTEP (Nextstep was
the original multitasking
There are many web servers programs available today.
operating system).
Listed below are a few examples of these web servers:

Computer Application Grade 10.indb 9 8/20/2019 3:22:27 PM

 • Apache web server—the HTTP web server
• Apache Tomcat
• lighttpd
• Jigsaw
• Oracle iPlanet Web Server
• Xitami
• Microsoft’s Internet Information Server (IIS)

DOMAIN NAME OR WEB ADDRESS

A domain name is the unique name that identifies a website on the internet. For example, google.co.in,
yahoo.com, and indiannicalearning.com are the domain names of some popular websites.
A domain name has two or more parts—Name and Extension. For example, in the domain name
indiannicalearning.com, ‘indiannicalearning’ is the name and ‘.com’ is the extension.
indiannicalearning.com

Name Extension
While the users can choose a domain name of their choice, they have to select the extension from
a list of predefined domain extensions only. Some examples of domain name extension are
as follows.

Domain name extension Description

.com Commercial sites
.edu Educational sites
.gov Government sites
.net Network administrative organisation
.mil Military sites
.org Organisations (which may include non-profitable
organisations)

It is possible to have a country-specific domain name extension. It is a two-letter abbreviation

for every country in the world. For example, in the domain name ‘www.nic.in’, the last two
letters ‘in’ stand for India. The following table shows some country-specific domain
name extensions.

10

Computer Application Grade 10.indb 10 8/20/2019 3:22:28 PM

 .ae UAE .jp Japan
.af Afghanistan .lk Sri Lanka
.au Australia .pk Pakistan
.br Brazil .qa Qatar
.bt Bhutan .ru Russia
.ca Canada .sa Saudi Arabia
.cn China .uk United Kingdom
.de Germany .us United States
.in India

There are certain conventions and rules that must be followed while deciding a domain name. So if
you create your website, you will have to remember a few rules before finalizing the domain name.
1. A domain name can have alphabets, numbers, or even a combination of alphabets and numbers.
2. The only special character allowed in the domain name is hyphen (-).
3. The length of a domain name cannot be more than 64 characters (including extensions like ‘.com’).
4. A domain name must have a valid domain extension. For example, ‘.com’, ‘.net’, or ‘.org’.

IP ADDRESS
Every TCP/IP network and a computer in a network should have a unique identity to avoid
connection and transmission errors. This unique identity of each computer on a network is provided
by assigning it a unique IP address. It is a numerical address given to every computer connected to the
internet for its unique identification.
An IP address is a 32-bit address represented in four
groups of numbers from 0 to 255. These groups are
Did You Know?

separated by periods. For example, 64.124.236.124 could To know the IP address of any
website, do the following:
be an IP address. These groups in an IP address are
Click Start Run
called octets. Each of the groups is an 8-bit field, which
In the Run command box, type
represents a byte of the address.
‘ping’ followed by the website
The ISP assigns its users either a static IP address (which name.
always remains the same) or a dynamic IP address (which
changes every time the user logs on).

IPv4 and IPv6

The 32-bit or 4-byte addressing system is known as IPv4 (internet protocol version 4). It provides 232
unique addresses, which is around 4 billion, on the network. These addresses might exhaust owing to
the rapid increase in the number of internet users around the world.
IPv6 (internet protocol version 6) is the successor of IPv4, which has enlarged the internet addressing
system. It allows 2128 address, which is approximately 3.8 × 1038 unique IP addresses. It uses 128 bits

11

Computer Application Grade 10.indb 11 8/20/2019 3:22:28 PM

 for the addressing system, which are arranged in 8 groups of 16 bits each. Each group is represented
by hexadecimal digits and are separated by colons.
For example, F2a0:bd00:0000:0ace:1345:0000:1254b:35ab could be a valid IPv6 address.

DOMAIN NAME SYSTEM

We know that every computer connected to the internet is given a unique IP address. This IP address,
which is a complicated string of numbers, is difficult to remember. It is rather easy to remember the
domain names.
The domain name system (DNS) is a system that coverts the domain names of web resources into the IP
addresses on the internet or on the local networks that use the TCP/IP protocol. For example, when you
type a URL of a website on the browser address bar, the DNS server maps the URL of the website with
the IP address associated with it and returns the IP address. For example, the website address www.abcxyx.
com would be converted into the IP address ‘126.0.1.51’.

EMAIL ADDRESS
Email stands for electronic mail. It is a system for
sending and receiving messages electronically over a Try it out t s
computer network. In order to send or receive emails, a Find the IP address of your favourite
user must first get a unique email address. website. Now, try to open it by typing
An email address is the combination of a unique in the IP address instead of the
username followed by the domain name. The username domain name.
is separated from the domain name by the symbol ‘@’.
The domain name specifies which server the email should
be delivered to, and the username tells the server the
name of the mailbox where the email will be deposited.
For example, [email protected] is a valid email address.
An email address has three parts:
• a username (which is abc in the above example);
• an ‘at’—@—sign; and
• the address of the server (which is example.com in this case).

UNIFORM RESOURCE LOCATOR

A Uniform Resource Locator (URL) is the address or location of a resource (for example, a web page) on
the WWW.
On the WWW, the request for a web resource is made by typing its URL in the address bar of the
browser. The browser takes the address and connects to the server to retrieve the desired web page.
Remember that a web address is the name of the website, say google.co.in, while the URL is the
address of a document stored in the website.

12

Computer Application Grade 10.indb 12 8/20/2019 3:22:28 PM

 A URL consists of the following three parts.
http://www.indiannicalearning.com/school-solutions

1 2 3
1—specifies the protocol used for the transfer of the resource
2—specifies the domain name or IP address of the web server
3—specifies the path or location of the resource on the web server
Here, you will notice that the protocol identifier and the resource name are separated by a colon.

UPLOADING AND DOWNLOADING FILES

You can transfer files from one computer to another on the internet. Uploading a file means to
transfer a file from a local computer to a remote computer. Downloading a file means to transfer a file
from a remote computer to the local computer.
In general reference, uploading a file means to transfer a file from one computer to another, and
downloading a file means to receive a file from another computer.

BLOGS
A blog is a website that allows users to share opinions and discuss various topics in the form of an
online journal. A blog is generally based on a particular topic or theme. The readers may leave
comments on the posts. A blog is updated frequently and generally contains text, images, and links to
other blogs.

Features of a blog
• A blog is normally a single page of entries.
• A blog is organized in reverse-chronological order, from the most recent entry to the least recent.
• A blog is normally public—the whole world can see it.
• The entries in a blog usually come from a single author.

NEWSGROUPS
The internet is not only about chatting, emailing, or exploring. It provides a large number of other
services to its users. One such service is that it allows to communicate with people who share common
interests. For example, if someone wants to discuss or learn about the latest developments in IT, he or
she can join an IT group. Such a group on the internet where one can share ideas on a specific topic with
other people is called a newsgroup. It is like an electronic bulletin board.
On a newsgroup, you can search for a specific topic and find posts or messages related to that topic.
You can view these posts, respond to them, or submit your own posts. However, to post messages on a
newsgroup, you will have to first become its member. The advantage of this type of medium is that the
messages stay on the ‘board’ for others to view and respond to for a minimum of 24 hours up to one
week. You can search for any topic you can think of in a newsgroup. From computer products to medical
technologies to the latest happenings on your favourite program, newsgroup is available for every topic.
13

Computer Application Grade 10.indb 13 8/20/2019 3:22:28 PM

 PROTOCOLS
Different types of computers are connected to the internet. To enable these computers to communicate,
certain rules and conventions have to be established for the efficient exchange of data between them. A set
of such rules and conventions that specify how the data will be transferred between the computers on a
network is called a protocol.
The internet uses different protocols to establish a connection and facilitate exchange of information
between the computers. Some of these protocols are detailed below.

Transmission control protocol/internet protocol (TCP/IP)

TCP/IP is the combination of two protocols—transmission control protocol (TCP) and internet
protocol (IP). TCP/IP is used for transferring data between the computers on a network. It works in
the following manner:
1. TCP establishes a connection between the computers that want to communicate. It further divides
the file or message to be transmitted into small and individual units called packets. In addition, it
sequences the packets.
2. IP labels the source and destination address on each packet. It also decides how each packet will
be sent across the network—that is, it decides the routing of the packets. It is not necessary that all
the packets will follow the same path and reach the destination in the same sequence in which they
were despatched.
3. At the destination computer, the TCP reassembles the received packets. It ensures that the packets
are reassembled in the same sequence in which they were despatched. This way, TCP is able to
deliver the complete message in the original form.

Simple mail transfer protocol

The simple mail transfer protocol (SMTP) is a part of transmission control protocol/internet protocol
(TCP/IP). It is used for sending electronic mails over the computer network.
The main job of SMTP is to initiate a set of communication rules on the servers so that the messages,
which include audio, video, and text, can be sent to one or many recipients. Many mail servers
nowadays support extended simple mail transfer protocol (ESMTP), which supports transferring of
multimedia messages through emails.

POP3
POP3 stands for post office protocol (version 3). It is based on the client-server architecture. It is a
standard protocol used to receive emails from a server.
The POP3 protocol allows us to download an email message on our local machines. Every time, when
we connect to our email client using POP3, emails gets downloaded on the local machines and are
removed from the server. One of the most commonly used POP3 clients is Microsoft Outlook.

Hypertext transfer protocol

The hypertext transfer protocol (HTTP) allows the transfer of hypertext documents on the World
Wide Web (WWW). It works on the client-server model as follows:

14

Computer Application Grade 10.indb 14 8/20/2019 3:22:28 PM

 1. A browser requests for a resource on WWW by sending an HTTP request to a web server.
2. The web server responds by transferring the requested resource to the browser in the form of an
HTTP response.
3. The browser interprets the content and displays in a format understandable by the user.
Thus, the browser acts as an HTTP client whereas the web server acts as an HTTP server.
When a request is made from a client computer to view a web page, HTTP transfers the contents of
the web page to the browser for viewing. When the HTTP appears in a URL, it suggests that the user
is connecting to a web server.

Hypertext transfer protocol secure (HTTPS)

In HTTP, when the communication happens on the computer network between the browser and
the server, the transfer of data occurs, which is not secure. The sensitive information can be easily
accessed by the hackers. On the other hand, in HTTPS, when the data is transferred over the
computer network, it is first encrypted using certain encryption techniques, such as secure socket
layer (SSL) or transport layer security (TLS), and then it gets transferred. This prevents hackers from
reading and modifying the sensitive data.
Thus, HTTPS is more secure than HTTP and provides faster communication as encrypted data is
smaller in size. Due to such advantages, most of the websites that deal with sensitive data, such as
banking management systems and email logins, use HTTPS.

REMOTE LOGIN PROTOCOLS

Remote login refers to accessing a computer or a network from a remote location as an authorized user.
We can access a computer without being present physically. There are two most commonly used remote
login protocols.

Secure shell (SSH)

The secure shell (SSH) protocol also works on the client-server architecture. It allows a user to
login from a remote computer and provides a secure communication over a network. It ensures that
the communication between the two remote computers occur in the encrypted manner so that the
communication and data transfer is safe.
There is an SSH client and SSH server. When the SSH client communicates over the internet with
the SSH server, an authentication is required either using a password or cryptographic public or
private key. When the communication is initiated by the SSH client, the SSH server authenticates
the client by the security key. Once it is done, the secure shell provides a secure data or file transfer
between the client and the server. This feature is often used by the administrators of the companies
who require to access the company’s confidential data.

Telnet
TELNET stands for TELetype network. It is a network protocol that allows a user to log into a remote
host and execute commands on it as if they were logged in locally.
[Note: A remote host is a computer in a remote location to which you do not have physical access.]

15

Computer Application Grade 10.indb 15 8/20/2019 3:22:28 PM

 To start a telnet session:
• You should know the name or address of the machine to which you want to connect.
• You should have a valid user ID and password that authorizes you to work on that machine.
The command for connecting to a remote telnet host is:
> telnet <host name>
> telnet <host address>
These commands will open a connection to the telnet host.
Telnet is generally used by software developers and by those who need to use specific applications or
data located on a particular host computer.

FILE TRANSFER PROTOCOLS

The file transfer protocol (FTP) is a protocol used to transfer files between the computers on a
network. Using FTP, files can be uploaded to or downloaded from an FTP server to a local computer.
Most of the FTP servers require users to log on to the server in order to transfer the files.

SFTP
It is a secure way of transferring a file, hence the name secure file transfer protocol. It allows FTP to
first use the secure shell protocol to establish a secure connection and then the file gets transferred
over the network. The encrypted version of the file gets transferred making it safe and secure. FTP
should only be used on the networks you trust. In FTP, even if the user has to provide a password for
transferring the files, the password is sent in a text format which can easily be accessible and hacked,
but it is not the case with SFTP as the security key is encrypted. Thus, SFTP is always preferred over
FTP.

SCP
It stands for secure copy protocol. It is basically a file transfer protocol that is used to transfer files
between the host and the server over a computer network. It also uses the secure shell protocol to get
the secure connection for file transfer and works like SFTP.
The similarities between SCP and SFTP are that they both use SSH and support transferring of larger
files. But the difference lies in the speed of transferring the files. It is much higher in SCP than SFTP.
This is due to the file transfer algorithm of SCP, which is highly efficient. Secondly, SCP provides
less functionality in terms of file management such as creating directories and adding, removing, or
renaming the files. SCP is basically used for transferring the files securely. SFTP, on the other hand,
provides these functionalities apart from transferring the files, and therefore SFTP not only transfers
the files, it also manages the files.

Wordbank

Internet The interconnection of global networks of computers

Client A program that provides an interface to the user to request services of the
server and to display the results returned from the server

16

Computer Application Grade 10.indb 16 8/20/2019 3:22:28 PM

 Server A program that hosts and manages the services available on the internet
Modem A device that converts the digital signals into analogue signals and vice versa
ISP The company that provides internet connections to individuals and
organizations
WWW A service on the internet that allows us to access and view information
over the internet
Web page A document on the WWW that contains text, graphics, audio and video
elements, and hypertext
HTML A markup language used to create web pages
Hypertext A piece of text that is linked to other documents on the WWW
Domain name A unique name that identifies a website on the internet
IP address A numerical address given to every computer connected to the internet for
its unique identification
Domain name A system that translates domain names into IP addresses on the internet or
system on local networks that use the TCP/IP protocol
Website A collection of related web pages under the same domain name
Uniform resource The address or location of a resource on the WWW or the internet
locator (URL)
Email A system for sending and receiving messages electronically over a
computer network
Protocol A set of rules and conventions that specify how the data will be transferred
between the computers on a network
Blog A website that allows users to share opinions and discuss various topics in
the form of an online journal
Newsgroup A service of the internet where users can read, post, and respond to
messages of their interests

We have learned

• The internet is the largest network that connects millions of individual computers and smaller
networks together.
• The internet grew out of a special project of the US Department of Defense called
ARPANET.
• The internet is based on the client-server architecture.
• The internet operates and routes messages even if a part of it is damaged.
• The World Wide Web (WWW) contains information in the form of hypertext documents.

17

Computer Application Grade 10.indb 17 8/20/2019 3:22:28 PM

 • WWW uses HTTP for transfer of documents.
• A web page is created using the hypertext markup language (HTML).
• The transmission control protocol (TCP) establishes a connection between the computers
that want to communicate. At the source, it divides messages into data packets. At the
destination, it reassembles data packets in the original order.
• The internet protocol (IP) addresses the data packets and decides the network route for them.
• A browser sends a user’s requests to the server.
• To send or receive emails, a user must have a unique email address.

Solved Examples
   1. Explain the term ‘internet’.    6.  What does an ISP do?
Ans. The internet is an interconnection of networks. Ans. An ISP (internet service provider) is the
It connects thousands of networks and millions company that provides internet access to
of individual computers together across the individuals and organizations for a fee. The ISP
globe. creates an account for each internet user and
assigns a user ID and password for accessing the
   2. How is data transmitted over the internet? internet.
Ans. The internet uses the packet-switching
technology for the transmission of data. In    7. What is the protocol used by WWW?
packet switching, large messages are broken Ans. The WWW (World Wide Web) uses the
into smaller pieces, known as packets. hypertext transfer protocol (HTTP) for the
Each packet is labelled with the sequence transfer of documents.
number, destination address, and other
relevant information. The packets then travel    8. Name the protocol used for transfer of
independently over the network to the target electronic mail over the internet?
destination. At the destination, the packets are Ans. Simple mail transfer protocol (SMTP)
reassembled to form the original message.
   9. How does the TCP/IP work?
   3. What is a blog? Ans. The TCP/IP works in the following ways:
Ans. A blog is a website that allows users to share
(a) TCP establishes a connection between the
opinions and discuss various topics in the form
computers that want to communicate. It
of an online journal.
divides the file or message to be transmitted
   4. What is a web server? into small units called packets. It also
sequences the packets.
Ans. A web server is a program on a server computer
that hosts a large number of web pages and (b) IP labels source and destination addresses
delivers the requested web pages to the clients on each packet. It decides the route through
(web browsers). which packets are forwarded towards the
destination. It is not necessary that all the
   5. What is the role of DNS? packets will follow the same path and reach
Ans. DNS or domain name system is a system that the destination in the same sequence in
translates domain names into IP addresses on which they were despatched.
the internet or on local networks that use the (c) At the destination computer, TCP
TCP/IP protocol. reassembles the received packets. It ensures

18

Computer Application Grade 10.indb 18 8/20/2019 3:22:28 PM

 that the packets are reassembled in the same • A computer
sequence in which they were despatched.
• A modem
This way, TCP is able to deliver the complete
message in the original form. • An account with an internet service provider
(ISP)
  10. What are the requirements of connecting to the
• A network connection
internet?
Ans. The basic requirements for connecting to the • A browser
internet are as follows:

Exercises
t 1. Match the columns.

(a) IP (i) It is a popular protocol for transferring emails.

(b) TCP (ii) It provides an address to each packet of data sent on the network.
(c) HTTP (iii) It is the web extension for commercial sites.
(d) SMTP (iv) It deals with the transfer of the hypertext documents.
(e) HTML (v) It handles transferring of files on the internet.
(f) DNS (vi) It is the language used to create web pages.
(g) Home Page (vii) This protocol divides and reassembles the data from the host
computer to the destination computer.
(h) FTP (viii) It is the address of a web resource.
(i) .com (ix) It converts the domain name to an IP address on the internet.
(j) URL (x) It is the first page of any website.

t 2. Fill in the blanks.

(a) The term WWW stands for _____________. (g) The secure shell protocol works on the
_____________ architecture.
(b) The _____________ button in the browser
fetches a fresh copy of the web page. (h) The four groups in an IP address are called
_____________.
(c) _____________ is a program which delivers
web pages to the browsers. (i) The _____________ protocol is the most
commonly used protocol to receive emails.
(d) The name that identifies a website is called
its _____________. (j) The _____________ protocol used to
transfer documents over the web.
(e) DNS stands for _____________.
(k) URL refers to _____________ resource
(f) A _____________ is a set of rules that
locator.
specifies how data should be transferred
from one computer to another on the
network.
19

Computer Application Grade 10.indb 19 8/20/2019 3:22:29 PM

 t 3. State the following as true or false.
(a) The internet is restricted by geographical (h) A modem is generally used to connect to
boundaries. other computers on a LAN.
(b) The ARPANET was designed to work even (i) SMTP is the protocol used to transfer files
if a part of it was destroyed. over the internet.
(c) The server is a program that hosts and (j) An IP address consists of a set of four groups
manages the services available on the that contain numbers from 0 to 255.
internet.
(k) A website is a single document on the web
(d) It is the server that initiates the created by HTML.
communication with the client.
(l) The client waits for a request from the server
(e) In packet-switching technology, large and responds to such requests.
messages are broken into smaller pieces,
(m) A domain name is the unique numeric code
known as packets.
that identifies a website on the internet.
(f) The transmission control protocol is used to
(n) SCP is a file transfer protocol that is used to
address data packets.
transfer files between the host and the server
(g) FTP is a protocol used to view web pages on over a computer network.
the WWW.

t 4. Answer the following questions. [Very short answer type]

(a) Give full forms of the following: (c) Write web extensions given to sites of the
following types of organizations:
(i) HTTP
(ii) SMTP (i) Network organizations

(iii) TCP/IP (ii) Government agencies

(iv) FTP (iii) Educational organizations

(v) SCP (iv) Commercial sites

(vi) URL (v) Indian sites

(b) Write expansions of the following web (d) Name the remote login protocols.
extensions: (e) Expand the term ISP. Name any two ISPs
(i) .net operating in India.

(ii) .com (f) How many bits does an IPv4 address use?
(iii) .org
(iv) .edu

t 5. Answer the following questions. [Short answer type]

(a) How is the internet different from WWW? (c) Differentiate between the following:
Give any two advantages of the internet.
(i) Web page and home Page
(b) Explain the differences between IPv4 and (ii) Uploading and downloading
IPv6.
(iii) Web browser and web server
(iv) Email address and website address
20

Computer Application Grade 10.indb 20 8/20/2019 3:22:29 PM

 (d) What service is primarily provided by a web (m) Explain the following terms.
server?
(i) Network
(e) How is FTP different from SFTP? (ii) Protocol
(f) What is the role of the internet service (iii) WWW
provider?
(iv) Web browser
(g) Write one advantage and one limitation of
(v) Web server
email over traditional mail.
(vi) Website
(h) What is a protocol? Name any one protocol
used on the internet? (vii) HTTP
(viii) FTP
(i) How the refresh or reload option is different
from the stop option in a web browser? (ix) Domain name
(j) What is DNS? (x) TCP/IP

(k) What is a web browser? Name two (n) What is a home page?
commonly used web browsers. (o) What is a web server?
(l) What is Telnet? (p) What do you understand by URL? Give
examples.
(q) Explain the differences between HTTP and
HTTPS.

t 6. Select the correct alternative(s).

(a) What is the global interconnection of (iii) Brendon Lee
computers called? (iv) Tom Lee
(i) WWW (e) The ISP can provide you two types of IP
(ii) Internet addresses, one is static and the other is
(iii) LAN (i) super static.
(iv) URL (ii) constant.
(b) The button in a browser window used to (iii) local.
cancel or hold the loading of a web page is (iv) dynamic.
(i) reload. (f ) FTP stands for
(ii) favourite. (i) fully transitional protocol.
(iii) stop. (ii) fractional transfer protocol.
(iv) forward. (iii) file transition protocol.
(c) Which one of the following is not a browser? (iv) file transfer protocol.
(i) Microsoft Edge (g) The first page of a website is called
(ii) IIS (i) IP.
(iii) Google Chrome (ii) page 1.
(iv) Firefox Mozilla (iii) home page.
(d) The WWW was invented by (iv) web server.
(i) Tom Cruise

21
(ii) Tim Berners-Lee

Computer Application Grade 10.indb 21 8/20/2019 3:22:29 PM

 (h) DNS stands for (iii) domain-exchanging technology
(i) data network service. (iv) address-switching technology
(ii) device network service. (n) Which of the following protocols are used on
the internet?
(iii) domain network system.
(iv) domain name system. (i) TCP/IP

(i) ARPANET became operational during (ii) FTP

(iii) HTTP
(i) 1960
(iv) All the these
(ii) 1959
(o) The protocol used for transferring the
(iii) 1969
electronic mails on the internet is
(iv) 1991
(i) FTP.
(j) The agency set up to develop a
communication network that could work in (ii) HTTP.
any kind of emergency was called (iii) SMTP.
(i) advance project agency. (iv) TCP.
(ii) project research agency. (p) The transfer of documents on the WWW
takes place using
(iii) advance project research agency.
(iv) advance research project agency. (i) FTP.

(k) Which of the following organizations are (ii) HTTP.

responsible for the development of the (iii) FTP
internet? (iv) POP3.
(i) Internet Architecture Board (q) An IPv6 address contains
(ii) Internet Society (i) 28 bits.
(iii) Internet Engineering Task Force (ii) 32 bits.
(iv) All of these (iii) 64 bits.
(l) The server
(iv) 128 bits.
(i) sends a request for a service. (r) A DNS server translates
(ii) responds to a request.
(i) an IP address to a domain name.
(iii) provides an interface to the user.
(ii) a domain name to an IP address.
(iv) connects a client to the web server.
(iii) IPV4 to IPv6.
(m) For transmission of data, the internet uses
(iv) HTTP to HTTPS.
(i) circuit-switching technology.
(ii) packet-switching technology.

22

Computer Application Grade 10.indb 22 8/20/2019 3:22:29 PM

 l Lab Exercise
c (a) Create a presentation in OpenOffice on the application (Photoshop or GIMP) and then
services available on the internet. printed on a hard copy.
(b) Create a presentation in OpenOffice on (d) Divide the class into groups of four students,
different protocols. The presentation must and each group can be given a topic
include all the protocols discussed in the (For example, WWW, Uses of internet,
chapter (one slide for each protocol). Protocols, and so on). Each group will
have to prepare an oral presentation on one
(c) Create a collage on the different web
of the given topics and present it in the
browsers with the distinct features they are
class. The group coordination, speaking,
providing to make surfing better. The collage
or communication skills can be observed
can either be on a sheet of chart paper or it
through this activity.
can be first created using an image editing

• You want to have an internet connection at your home. Apart from the computer, which
other hardware units will you need?
• You have created a website of your own, and now you want to register your site. s
What web extension would you apply for? Give reason.

23

Computer Application Grade 10.indb 23 8/20/2019 3:22:29 PM

 2 Services on the Internet

We will learn about

• Information retrieval • Email
• Search engines • Other internet services
• Finding people on the internet • Mobile technologies
• Chat

The internet offers a host of services to its users. It is rapidly widening its reach among people.
Thus it has become a powerful medium of communication in today’s world. In this chapter, we will
discuss some of the most popular and commonly used services available on the internet.

INFORMATION RETRIEVAL
The World Wide Web (WWW) is considered a storehouse of information. It contains information
about almost any topic in the form of web pages. These web pages are located on many web servers
on the internet. To retrieve information, we need a browser to send a request. The browser directs the
request to the web server and then displays the retrieved information.
To access a specific web page,
you need to enter its URL
(address of the web page) on
the address bar of the browser.
The web page is displayed
in the document window
of the browser. The web
page may contain hyperlinks
that may guide you to other
pages containing additional
information.
For example, enter the address
www. indiannicalearning.
com in your browser. On the
displayed web page, click on the
Fig. 2.1
SCHOOL SOLUTIONS link.

24

Computer Application Grade 10.indb 24 8/20/2019 3:22:30 PM

 After clicking on the link, you will notice the checkboxes with labels related to the products on the left
side. Check the Computer science box, and the corresponding web page will open.

Fig. 2.2
In case you do not know the address of a specific web page containing the information you need, you
can use a search engine to search for the relevant information.

SEARCH ENGINES
A search engine is an application that is used to search the content on the Web with the help of
specific keywords.
The search engines generally contain the following components:
1. A computer program, called crawler or spider, to crawl the pages on the Web and log information,
such as keywords and URLs, in a database or an index
2. A database or index of information such as keywords and URLs
3. An algorithm to search its database and return a page containing links to the pages related to the
keyword(s) provided by a user
Some commonly used search engines are Google, Yahoo, Bing, Lycos, Excite, Alta Vista, and
Go.com.

Using a search engine

The search engine contains a search box. You can type the keyword(s) related to the information you
want to search into the ‘search box’. The search engine scans its database and displays a file containing
links to the web pages related to the keyword(s) supplied by you.
Databases maintained by the search engines are so large that a query often shows thousands of results.
This makes searching for relevant information very difficult. To get proper search results, you should use
appropriate search techniques.

25

Computer Application Grade 10.indb 25 8/20/2019 3:22:30 PM

 Advance search techniques
To get better search results, you should enter specific information into the search box. The following
search techniques will help you in making efficient use of a search engine.
Using quotation marks
When you are looking for information containing an exact phrase, type the phrase in the search box
and enclose it in double quotation marks (“ ”). For example, the search query “Bengal Tiger” will
display pages where both the words ‘Bengal’ and ‘Tiger’ appear together in the given order. If no sites
are found that contain both the terms, then the sites that contain either term will be displayed.
Using Boolean And
When you join the words in the search box by AND, you get links to web pages containing the two
words, but not necessarily together or in the given order. For example, if you type ‘Rocket AND
Science’ in the search box, the search engine returns web pages that contain both the words ‘Rocket’
and ‘Science’. Sometimes the plus symbol (+) is also used in place of AND.
Using Boolean Not
When you use a minus sign (–) to join the words in the search box, you get links to web pages not
containing the word following the minus sign. For example, if you type ‘Rocket –science’ in the
search box, the results will contain links to pages containing ‘Rocket’ but not ‘science’ (see Fig. 2.3).
Some search engines may take the word NOT instead of minus sign.

Fig. 2.3
Using Boolean OR
When you use the word OR to join the search words, you get links to web pages containing either
of the two words. For example, if you type ‘Rocket OR Science’ in the search box, the search engine
returns web pages that contain either word ‘Rocket’ or ‘Science’.

26

Computer Application Grade 10.indb 26 8/20/2019 3:22:30 PM

 Using multiple Boolean commands
It is possible to combine the Boolean commands AND, OR, and NOT. For example, the search
‘rocket OR science –moon’ will show pages that contain either of the words ‘rocket’ and ‘science’ but
do not contain the word ‘moon’.
Using Wildcards
A wildcard search uses the wildcard character asterisk (*) in the search box. It widens the scope of
search. For example, the search for ‘astro*’ will yield web pages containing words that begin with
‘astro’ (e.g. astrology, astronomy, and astrophysics). Similarly, the search for ‘astro*y’ will yield pages
containing words that begin with ‘astro’ and end with ‘y’ (e.g. astrology and astronomy).

FINDING PEOPLE ON THE INTERNET

The internet offers a lot of free resources that can help you find people online. You can use search
engines, social networking sites (like Twitter and Facebook), and specific people search sites
(like Lycos People Search and Yahoo People Search) to find contact information of your friends and
relatives.

CHAT
Chatting is a way of communicating on the internet by means of exchanging text messages. It is one of
the most commonly used services of the internet. It allows users to exchange messages in real-time.
Some websites also provide a chat facility to their registered users. Two people can chat with each
other online if they use the same chat program and are logged in at the same time. These websites
are called chat sites, and the group of people with a common interest to share ideas and views are
called chat rooms.
A chat program operates in the following way:
• The first-time users need to register to get the username and password.
• To start chatting, log into the chat program by using the registered username and password.
• Select a chat room of your choice from the list of available chat rooms.
• After selecting a chat room, a list of users in that chat room is displayed.
• Type your messages in the text box provided, and press the send button.
• The messages of all the users are visible in the display area for everyone to see.
• You can also send private messages in a chat.
[Note: Private messages are only visible to the user to whom they are sent.]

EMAIL
Electronic mail, or email, is used to send messages electronically to individuals or groups of people.
You can send or receive attachments, such as text documents, pictures, audio, and video, with the
messages.
Email provides a fast, efficient, and cost-effective way to communicate with distant friends, family
members, or colleagues. You can send an email to a person in the same building or any part of the
world.

27

Computer Application Grade 10.indb 27 8/20/2019 3:22:30 PM

 The email programs provide the facilities to send, receive, store, and delete mails. To start using the
email service, one must first create an email account. After creating an email account, the user can use
their username and password to log in the account. On logging in the account, the email interface
opens. It generally contains the following tabs.
Compose Mail or Write Mail: Clicking on this link allows you to write a new email message and send it.
Inbox: This folder contains the incoming mails. The incoming mails will remain in this folder till you
delete them.
Outbox: This folder contains all the mails that are waiting to be sent. The outgoing mails remain in
this folder till they are sent.
Sent: This folder contains the mails sent from your account. These mails remain in this folder till you
delete them.
Trash or Deleted Mail: This folder contains all the deleted mails.
Spam or Junk Mail: This folder contains all the mails identified by your mailbox as junk mails.
The interface for writing or composing an email looks like the given Fig. 2.4.

Fig. 2.4
An email is divided into two parts: header and body.
• The header contains the following fields.
o To: This field contains the email addresses of the recipients of the mail.
[Note: An email address has the form ‘username@hostname’. For example, in the email address
[email protected], ‘abc’ is the username and ‘example.com’ is the hostname.]
o Cc: The term ‘Cc’ stands for carbon copy. This field contains the email addresses of the recipients
who will also get a copy of the mail.
o Bcc: The term ‘Bcc’ stands for blind carbon copy. The recipients in this field will receive the mail
without any of the other recipient knowing about it.
o Subject: This field contains the subject of the message.

28

Computer Application Grade 10.indb 28 8/20/2019 3:22:30 PM

 o The header also contains information about the email, such as the date and time of the message
when it was sent, the email address of the sender of the message, and the route details.
• The body of the mail contains the actual message being sent.
Once the message has been composed and all the relevant header information has been provided, click
on the ‘Send’ button to send the message to the destination.

OTHER INTERNET SERVICES

There are many other services available on the internet for the users, some of which are described
below.

Videoconferencing
Videoconferencing is a method of real-time visual communication between two or more users. Any
number of people can video chat regardless of their locations. A videoconferencing involving two
locations is known as point-to-point, while a videoconferencing involving more than two locations is
called a multipoint conference.
Advantages of videoconferencing
• Videoconferencing is a useful method as it saves time and travel expense.
• It allows people in different locations to hold a face-to-face meeting.
• It can be used for job training sessions, interviews, and company meetings.

E-learning
E-learning, also known as electronic learning, refers to a teaching and learning system that can be
obtained through the internet by using a computer. It is often referred to as online education or online
learning. Teachers and students can connect from different locations simultaneously without the need
for them to be physically present at the location. Anyone can take the lessons anytime anywhere.
Advantages of e-learning
• E-learning is available at a less expensive cost.
• There are no geographical constraints to use the e-learning system. Therefore, it offers
opportunities in situations where traditional education is difficult to pursue for the students.
• E-learning is more flexible in terms of time. So students can take the learning sessions according to
their schedules.
• Universities or colleges can give online courses without having to bear the infrastructural cost.

E-banking
E-banking is referred to as electronic banking (internet banking). It is a service that makes use of
electronic and telecommunications network for providing banking functions. It lets customers access
their bank accounts and carry out banking transactions using their computers, laptops, tablets, or
smartphones. There are two categories of e-banking services.

29

Computer Application Grade 10.indb 29 8/20/2019 3:22:30 PM

 • Transactional: It lets customers perform a financial transaction, such as transfer money, pay a bill,
and open a new bank account.
• Non-transactional: It allows customers to only view their bank statements.
Advantages of e-banking
• The e-banking service is available 24 ×7. Customers can access their accounts and do financial
transactions anytime and anywhere.
• There are no geographical barriers as customers can perform the transactions irrespective of
their locations.
• The customers do not have to visit their branch, which is quite time-saving.
Disadvantages of e-banking
• E-banking requires a high set-up, which includes high cost of the hardware and software units,
internet installation, and modems. Also, the maintenance cost is quite high.
• It requires trained and qualified staff for the support and operation purposes. Shortage of trained
staff may become a barrier to smooth functioning of the system.
• There is always a threat to security. The accounts of the customers can be accessed and hacked by
unknown people.

E-shopping
The process of selling and buying things on the internet is called e-shopping. It has become very
popular among users. People can buy various things, such as toys, stationery items, clothes, cosmetics,
and household items.
Benefits of e-shopping to customers
• Online shopping is very convenient for people who are busy. They can order things online from
their home, office, or any other location.
• Online shopping also saves time as going from stores to stores and comparing prices is a challenging
and time-consuming task.
• Customers can choose from the extensive range of products available online.
• Customers can scrutinize the prices of the products from various stores by sitting in one place.

E-reservation
E-reservation means making a reservation for a service via the internet. Nowadays, e-reservation has
become more popular. A variety of tasks can be accomplished using e-reservation by sitting in one
place. We can book a hotel room, air, train or a cinema ticket, or a cab. It is also possible to even book
an appointment with a doctor. The e-reservation system saves a lot of time as it eliminates the need of
going to places and manually book tickets or make reservations.

30

Computer Application Grade 10.indb 30 8/20/2019 3:22:30 PM

 Fig. 2.5
E-groups
An e-group is a group where people with common interest meet. The e-group can be an email group
or a group on social networking sites. The users of the group can share messages, music, photos, links,
and many more features. Organizations and companies use e-groups to share information and to
establish communication between the employees.

E-governance
E-governance can be defined as the use of information and communications technology (ICT) tools to
make government services available for public, integrate existing services between the government and
the citizens, and provide information portals to the citizens in an efficient and transparent manner.
Benefits of e-governance
• The communication becomes faster because of the use of technology.
• The e-governance system is more efficient than the traditional paper-based system. The paper-based
system requires more printers and stationery items, which incur a lot of money.
• The e-governance system offers more flexibility, transparency, and accountability.
• It also provides better accessibility to public services.

Social networking
Social networking is a way of connecting with friends, family, customers, colleagues, or clients using
the internet. The social networking sites provide an online platform to share ideas and interests with
one another. Facebook, Google+, and Twitter are some of the popular social networking apps. Some
social networking sites, such as Socialcast, LinkedIn, and Yammer, also provide platforms for business
interactions.
To access a social networking site platform, users first need to create their accounts and digital profiles.
They can then choose to follow other members as their contacts.

31

Computer Application Grade 10.indb 31 8/20/2019 3:22:31 PM

 MOBILE TECHNOLOGIES
When mobile phones first came into existence, they were only used for voice communication. Since
then the mobile communications have undergone tremendous changes, and there has been a massive
growth in the mobile communication technology. This growth is represented in terms of generations
(G). Every generation has some new techniques, capabilities, and features that are different from the
previous one.

2G
The second-generation (2G) mobile technology was used for voice communication as well as text
messaging (SMS), picture messaging, and MMS.
SMS
SMS stands for short messaging service. It is a service that is used to send short text messages from
one mobile phone to another.
MMS
MMS stands for multimedia messaging service that is used to send messages with audio, image, and
video.

3G
The third-generation (3G) of mobile technology offered higher data transmission rates. It was used to
access the internet and for video chatting.

4G
The fourth-generation of mobile technology offers higher rates of data transmission than the third
generation. This technology is used for watching high definition television (HDTV) content and
high-quality audio and video calls.

Wordbank

Search engine A service that is used to search content on the Web with the help of
keywords
Crawler A computer program used by search engines to crawl the pages on the
web and log information in a database
Chatting A way of communicating on the internet by exchanging text messages
Videoconferencing A real-time video and audio communication between two or more persons
Email An electronic message sent or received from one computer to another
using an email id
Cc A feature that allows a user to send email messages to various people at
the same time
Bcc A feature that allows a user to send email messages to various people at
the same time without letting other recipients know

32

Computer Application Grade 10.indb 32 8/20/2019 3:22:31 PM

 We have learned

• A browser is required to retrieve information from the Web and display the same.
• In response to a query, a search engine scans its database and returns a file containing links
to web pages related to the keyword(s) supplied.
• To search for a specific phrase, enclose it within double quotation marks (“”).
• A minus sign(–) or the Boolean NOT operator is used to exclude a word from the search.
• The Boolean AND operator is used to get links to web pages containing both the words
separated by AND, not necessarily together or in the given order.
• The Boolean OR operator is used to get links to web pages containing either of the two
words separated by OR.
• When the search is not very specific, a wildcard character asterisk (*) can be used.
• The internet also provides services to send messages to people in real-time.
• Email is one of the most commonly used services of the internet.
• An email address has the form‘username@hostname’.
• The internet offers various e-services, such as videoconferencing, e-learning, e-banking,
e-shopping, e-reservation, e-governance, and e-groups.
• The social networking sites provide a medium to interact with other people to share ideas
and interests.
• Mobile technologies have evolved over time. The changes are marked as generations of
mobile technologies.

Solved Examples
   1. Name the information retrieval service on the    5. What is information retrieval service?
internet. Ans. Information retrieval refers to accessing and
Ans. World Wide Web (WWW) retrieving information on the internet. WWW is
the information retrieval service of the internet.
   2. Name any three popular internet services other It contains information in the form of web
than WWW. pages. To retrieve a specific web page, we need a
Ans. Search engine, chat, and email web browser and the URL of the web page.

   3. Explain the form of an email address.    6. What is a search engine?
Ans. An email address has the form ‘username@ Ans. A search engine is a service that is used to
hostname’. For example, in the email address search content on the web with the help of
[email protected], ‘abc’ is the username and specific keywords.
‘example.com’ is the hostname.
   7. Explain the term ‘e-banking’.
   4. What are the different parts of an email Ans. E-banking is the internet service that allows
message? a customer to get connected to their bank’s
Ans. An email message consists of two parts: header website and perform financial transactions.
and body. The header contains the information
   8. What do you mean by videoconferencing?
about the recipients, such as the email address
of the recipients of the message, date, and Ans. Videoconferencing refers to real-time video
subject. The body contains the actual message and audio communication between computers
that is being sent. at different locations using the internet.

33

Computer Application Grade 10.indb 33 8/20/2019 3:22:31 PM

 Videoconferencing is an extremely useful    9. What does the term ‘2G’ stand for?
method of communication because it saves Ans. The term 2G stands for second-generation of
time and travel expense of people and can mobile technology. This generation offered
often accomplish many of the things a physical voice communication along with text, picture,
meeting can. and video messaging.

Exercises
t 1. Match the columns.

(a) Chatting (i) Searching information on the web

(b) MMS (ii) Retrieving information
(c) Search engine (iii) Third-generation of mobile technology
(d) Browser (iv) Messaging service involving audio, video, and images
(e) 3G (v) Communication involving the exchange of text messages

t 2. Fill in the blanks.

(a) In the term ‘e-banking’, the letter ‘e’ stands (d) The _____________ folder contains all the
for _____________. mails that are to be sent.
(b) URL refers to _____________ resource (e) The _____________ system refers to a
locator. teaching and learning system that can be
(c) The _____________ keyword can be used to obtained through the internet.
get links to web pages containing two given (f) The process of buying and selling things on
words. the internet is called _____________

t 3. State the following as true or false.

(a) MMS is a service that is used to send voice (d) Social networking is a way of connecting
messages from one mobile phone to another. with friends, family, customers, colleagues,
(b) A search engine uses an algorithm to search or clients using the internet.
its database and displays a page containing (e) The recipients in the ‘Bcc’ field will receive
links to the related pages. the mail without any of the other recipient
(c) Videoconferencing refers to the real-time use knowing about it.
of audio and video means of communication (f) The fourth-generation of mobile technology
on the internet. offers higher data transmission rates.

34

Computer Application Grade 10.indb 34 8/20/2019 3:22:31 PM

 t 4. Answer the following questions. [Very short answer type]
(a) Name any two popular search engines. (d) Name any two social networking apps.
(b) Define the term ‘crawler’. (e) Expand the terms SMS and MMS.
(c) Which symbol is used for the
wildcard search?

t 5. Answer the following questions. [Short answer type]

(a) Define the following terms: (d) Explain the Boolean NOT search technique.
(i) Videoconferencing (e) What is the difference between the terms
(ii) Chatting ‘Cc’ and ‘Bcc’?

(b) Name the two parts of an email address with (f) Explain e-governance.
the help of an example.
(c) State one advantage of videoconferencing
over personal face-to-face business meetings.

t 6. Answer the following questions. [Long answer type]

(a) When using a search engine, what does a (d) Write the advantages and disadvantages of the
minus sign used with the keywords in the e-banking system.
search box signify? Explain briefly with the
(e) What do you understand by the following
help of an example.
terms?
(b) Explain the benefits of an e-learning system.
(i) E-group
(c) How is videoconferencing helpful? (ii) Search engine

t 7. Select the correct alternative(s).

(a) The real-time use of audio and video means (c) An email address is made up of
for communication on the internet is called
(i) one part.
(i) e-shopping. (ii) two parts.
(ii) chatting. (iii) three parts.
(iii) videoconferencing. (iv) four parts.
(iv) emailing. (d) The incoming email messages are stored
(b) The websites that help you search the in the
content on the Web with the help of
(i) sent box.
keywords are called
(ii) outbox.
(i) web servers.
(iii) inbox.
(ii) search engines.
(iv) trash.
(iii) blogs.
(iv) browsers.
35

Computer Application Grade 10.indb 35 8/20/2019 3:22:31 PM

 (e) The information retrieval service on the (ii) OR.
internet refers to (iii) NOT.
(i) TELNET. (iv) NOR.
(ii) FTP. (h) Chatting is a way of communicating on the
(iii) WWW. internet through
(iv) SMTP. (i) videoconferencing.
(f) Which of the following is not a search (ii) voice interaction.
engine? (iii) text messages.
(i) Google (iv) audio messages.
(ii) Alta Vista (i) Which of the following is not an internet
(iii) Rediff.com service?
(iv) Yahoo (i) Videoconferencing
(g) The Boolean search command that returns (ii) E-learning
links to pages not containing a specific word (iii) Email
is
(iv) Courier
(i) AND.

l Lab Exercise
c Prepare a presentation on the various services available on the internet.
• You want some reference or help on certain topics from the internet. Which
specific sites will you search on? What are such sites called?
s
• While chatting you must have used characters like ‘:-)’. What do these characters
signify? What are they called?
• While using a social networking site, you must have noticed a term called ‘report
abuse’. What does it mean? Is it useful in any way?

36

Computer Application Grade 10.indb 36 8/20/2019 3:22:32 PM

 Hypertext Markup
3 Language

We will learn about

• HTML • Basic HTML elements
• Creating HTML documents • Attributes
• Viewing HTML documents • Cascading style sheet
• Tags or elements in HTML 5 • Background properties in CSS
• Basic structure of an HTML 5 • Some more elements in HTML
document

Today, the internet has become a popular medium for the exchange of information. It is rightly called
the global information system (GIS). Whether we want to communicate with our friends, share ideas,
or search for some information, we are just a click away.
The internet allows us to do the following:
• Keep in touch and communicate with our family members and friends using email and chatting
• Gather information on any topic of interest, which can be in the form of text, image, audio,
or video
• Stay up to date with news, sports, weather, and current affairs around the world
• Locate and download computer software programs and other products that are available in
cyberspace
• Listen to music and watch films
The internet is made up of millions of computers linked together around the world. This has made it
possible to send information from a computer to any other computer across the world 24 hours a day.
The internet is a much broader term. The WWW is a part of the internet that presents information
in a graphical interface. The WWW is a collection of online documents stored on servers (computers
where data is stored) around the world that are connected to the internet. These documents are
written in a language called Hypertext Markup Language (HTML).

37

Computer Application Grade 10.indb 37 8/20/2019 3:22:32 PM

 HTML
HTML is largely based on the standard generalized markup language (SGML), which is the mother
of all the markup languages. HTML is a simple text formatting language used to create hypertext
documents for the WWW. These hypertext documents (called web pages) can be viewed with the help
of a web browser.

A hypertext is a text which when clicked takes the reader to a different location in the same
document or to a different document, which may be located on a different server.

A markup language encloses a piece of text between a pair of elements called tags to apply appropriate
encoding on it.

Need for HTML and its invention

HTML was developed by Tim Berners-Lee in 1990 while working at the European Organization
for Nuclear Research (CERN), Geneva. He came up with the idea to link research documents
of scientists so that they can benefit from each other’s documents. He then developed HTML, a
language that allowed him to connect documents using links (which are called hypertext links). It was
a path-breaking invention as it led to the development of the World Wide Web (WWW).
The hypertext links, or hyperlinks, in HTML can link documents that are on a computer or on
different computers connected together on a network. These can even link different portions of text
in the same document.

CREATING HTML DOCUMENTS

HTML documents can be created with the help of any text editor application, such as Notepad and
WordPad of Microsoft or TextEdit of macOS. The following steps demonstrate how to create HTML
documents with Notepad.
1. Type ‘notepad’ in the search bar, and double-click on the option when it appears on the Start menu.
2. The Notepad window appears. Type the desired code.

Fig. 3.1

38

Computer Application Grade 10.indb 38 8/20/2019 3:22:32 PM

 3. To save the HTML file so that you can view it on the browser, click on the File → Save As option.
4. The Save As dialogue box appears. Select the appropriate folder (say desktop) where you want to
save your HTML file.
5. Enter the ‘File name’ and save the file with the extension ‘.htm’ or ‘.html’. In this example, the file
name given is ‘first.html’.

Fig. 3.2
6. The file is saved on the desktop.
Viewing an HTML Document
HTML documents are viewed with the help of a software application called web browser. A web
browser interprets the HTML document, formats it as per the formatting instructions provided in the
document, and displays it in the browser’s document window on the screen. Some of the commonly
used browsers are as follows:
• Microsoft Edge
• Mozilla Firefox
• Apple Safari
• Google Chrome
The steps to view an HTML document in the Google Chrome are as follows:
1. Open Google Chrome.
2. Press Ctrl + O keys. The Open dialogue box opens.
3. Locate and select the file that you want to open.

39

Computer Application Grade 10.indb 39 8/20/2019 3:22:32 PM

 Fig. 3.3
4. Click on Open. The file will open in the browser.

Fig. 3.4

TAGS OR ELEMENTS IN HTML 5

An HTML document consists of tags or elements. A tag begins with a less than symbol (<)
followed by a tag name and closes with a greater than symbol (>). For example, the tag for making
text bold in an HTML document is <b>.
Most of the HTML elements will have a start tag and an end tag. The end tag contains a forward
slash ‘/’ before the tag name. For example, the end tag for <b> is </b>.
Thus, the pair of <b> and </b> constitute one HTML element. The text to be formatted is
enclosed between the start and end tags.
For example, the output of
<b> This text becomes bold. </b>
will be
This text becomes bold.

40

Computer Application Grade 10.indb 40 8/20/2019 3:22:33 PM

 The HTML elements that appear in pairs and contain some parameters (or content) between their
start and end tags are called container elements. For example, the <b> tag explained above is a
container element. There are, however, some elements that do not have an end tag. These tags are
called empty elements. For example, the <br> tag used for inserting a new line and the <hr> tag
used for inserting a horizontal rule are empty elements.

Some important things about HTML

• HTML is not a case-sensitive language. This means that the HTML commands can be written
either in lower case or upper-case letters.
• An HTML document is saved with the file extension .htm or .html.
• An HTML document is written using text editors like Notepad or WordPad. However, there are
some editors available that have graphical tools and elements that require a little or no knowledge
about HTML. These editors are called What You See Is What You Get (WYSIWYG). These let you
drag and drop the graphical elements and see the output without having to type the code.
• The space between the tags does not matter because it does not affect the appearance of the
document.
• There should be no space between the letters of the tag name. For example, <t i t l e> is not
the same as <title>. The program will not run.

BASIC STRUCTURE OF AN HTML 5 DOCUMENT

The basic structure of an HTML document is given below.
<!DOCTYPE html>
<html>
<head>
<title> … </title>
</head>
<body> … </body>
……………………
……………………
</html>
Let us now discuss these elements in detail.

<!DOCTYPE html>
This element is an empty element. It tells the browser about the version of the markup language being
used. It is included at the top of the web page before all the other elements.

41

Computer Application Grade 10.indb 41 8/20/2019 3:22:33 PM

 <html>
This element is a container element. It identifies the document as an HTML document. It does not,
in any way, affect the appearance of the document but gives a hint to the browser that the document is
an HTML document.

<head>
This element is also a container element. It defines the HTML header and does not affect the
appearance of the document. The header contains information about the document rather than the
information displayed in the document. The browser displays none of the information in the header,
except for the text contained by the sub-element <title>.

<title>
This element specifies the title of the document. It contains the text, which is displayed at the title
bar of the browser window. It is a container element, and every HTML document must contain this
element.

<body>
This element has the main content of the document. So, whatever appears in the browser window is
written within the <body> tag. It is also a container element.

ATTRIBUTES
The attributes of a tag are the properties associated with it. For example, consider the given line of
code.
<hr color=“red”>
Here, color is the attribute of the <hr> tag. It will show a line with red colour.
Now let us write a sample HTML code to create a web page.
<!DOCTYPE html>
<html>
<head>
<title> Creating a web page </title>
</head>
<body>
Intellectual Property Rights <br>
Intellectual property rights (IPR) are the rights assigned to the
creators of intellectual properties, which include inventions,
artistic and literary works, symbols, logos, images, names of the
companies or organizations, and designs. It is up to the creator,

42

Computer Application Grade 10.indb 42 8/20/2019 3:22:33 PM

 which may be an individual or organization, to decide whether their
ideas can further be used by others or not.
</body>
</html>

Fig. 3.5
In the above code, note the use of the <br> tag. It is used for inserting line breaks in HTML
documents. As HTML does not accept the normal line breaks or white spaces in text, we have to use
specific elements or tags for any kind of formatting.

CASCADING STYLE SHEETS

We know that HTML is the language used to create web pages. To beautify the web pages in terms
of formatting the text, modifying the background or foreground colours, or even getting the borders
around the text, we use cascading style sheets (CSS). The CSS is a language that has a set of rules to
present the elements on a web page.
The advantages of CSS are as follows:
• The styles for the web pages are not required to be written individually for individual web pages. A
separate CSS file can be created and can be used to embed styles in the web pages of a website.
• The CSS is not dependent on HTML.
• It is compatible with most of the browsers.

Syntax of CSS
A CSS contains style rules that are interpreted by the browser and then applied to the corresponding
element in an HTML document. A style rule has the following three parts:
• Selector: It is the name of the HTML tag element to which a style is applied—for example, <h1>
and <b>.
• Property: It is the type of an attribute of HTML tag—for example, color and font size.
• Value: It is the value of a property—for example, the color property can have values as red,
green, or blue.
When the selector, property, and value combine, it makes a rule. The syntax of a rule is as follows:
selector {property: value}

43

Computer Application Grade 10.indb 43 8/20/2019 3:22:33 PM

 CSS with HTML 5
There are three ways to embed CSS in a document.
• Inline: Here the CSS commands are provided with the tags. For embedding the styles with an
HTML tag, the style attribute is used.
• Internal or embedded: Here the styles are specified in the beginning of the HTML document.
In this way of embedding CSS styles, the <style> tag is used. It has an attribute type=“text/
css”. Also, this tag is used in the <head> tag.
• External: Here a separate CSS file is created and joined with the web pages to embed the styles.
In this case, an external CSS file is created, which is then linked to the HTML document. The
<link> tag is used within the <head> tag in this case as given below.
<link rel=“stylesheet” type=“text/css” href=“Path To stylesheet.css”>
Here
• the ‘rel’ attribute specifies the relation between the html and the CSS file and
• the ‘href ’ attribute is used to specify the name of the CSS file, which is to be embedded to the html
document.
Let us now learn about some background properties using the internal CSS method.

BACKGROUND PROPERTIES IN CSS

CSS has background properties for setting the background style of the HTML elements.

Setting the background colour

The background-color property is used to specify the colour of the background. The syntax of
the property is as follows:
background-color:value
Here ‘value’ is the colour name or its hexadecimal value. The hexadecimal colour value has a
format—#RRGGBB, where RR specifies the red component, GG specifies the green component, and
BB specifies the blue component of a colour. The values of RR, GG, and BB must be between 0 and
FF. For example, background-color:00FFFF will set the background colour to cyan.
Example
<!DOCTYPE html>
<html>
<head>
<title> Using background properties </title>
<style>
body {background-color:00FFFF}
</style>
</head>

44

Computer Application Grade 10.indb 44 8/20/2019 3:22:33 PM

 <body>
Intellectual Property Rights
Intellectual property rights (IPR) are the rights assigned to the
creators of intellectual properties, which include inventions,
artistic and literary works, symbols, logos, images, names of the
companies or organizations, and designs. It is up to the creator,
which may be an individual or organization, to decide whether their
ideas can further be used by others or not.
</body>
</html>

Fig. 3.6

Setting the background image

There are various properties associated with the background image of an HTML page. Let us learn
about them.
The background-image property
This property is used to set an image as a background image. The syntax of the background-
image property is as follows:
background-image:url(path of the image)
Here URL is the path of the image where it is stored.
The background-size property
This property is used to specify the size of the image. The syntax is as follows:
background-size:value
Here value = auto|length|percentage
• auto: It is the default value of the property. The image is displayed in its original size.
• length: It is used to specify the width and height of the image. The first value sets the width
and the second value sets the height of the image. If only one value is given, the second value is
automatically taken as ‘auto’.
• percentage: This value is used to specify the height and width of the image in percentage. The first
value sets the width and the second value sets the height of the image. If only one value is given, the
second value is automatically taken as ‘auto’.
45

Computer Application Grade 10.indb 45 8/20/2019 3:22:33 PM

 The background-repeat property
This property is used to specify whether the background image is to be repeated or not. The syntax of
the property is as follows:
background-repeat:value
Here value = repeat|repeat-x|repeat-y|no-repeat Try it out t s
• repeat: It is the default value. It specifies that the image Create a web page on ‘Birds’. Place
will be repeated in both the directions, horizontally and any image showing birds as a
vertically. background image. The image should
• repeat-x: It specifies that the image will be repeated scroll while scrolling the HTML page.
horizontally.
• repeat-y: It specifies that the image will be repeated vertically.
• no repeat: It specifies that the image will not be repeated.
The background-attachment property
This property is used to specify whether a background image is fixed or scrolls with the page. The
syntax is as follows:
background-attachment:value
Here value = fixed|scroll
• fixed: It specifies that the image will not scroll with the HTML page.
• scroll: It specifies that the image will scroll with the HTML page.
The background-position property
This property is used to specify the position of the background image. The syntax is as follows:
background-position: value
Here value = xpos ypos|x% y%|[top|bottom|center]|[left|center|right]
• xpos ypos: It specifies the horizontal and vertical positions respectively in units of length.
• x% y%: It specifies the horizontal and vertical positions respectively in percentage.
• [top|bottom|center]|[left|center|right]: These specify the values of the vertical and
horizontal positions respectively. These values must be chosen in conjunction from both the sets.
Let us now write an HTML program to show the usage of all the background image properties.
<!DOCTYPE html>
<html>
<head>
<title> Using background properties </title>
<style>
body {background-image:url(“ipr.jpg”); background-size:300px 300px;
background-repeat:no-repeat; background-position:left center}

46

Computer Application Grade 10.indb 46 8/20/2019 3:22:33 PM

 </style>
</head>
<body>
Intellectual Property Rights<br>
Intellectual property rights (IPR) are the rights assigned to the
creators of intellectual properties, which include inventions,
artistic and literary works, symbols, logos, images, names of the
companies or organizations, and designs. It is up to the creator,
which may be an individual or organization, to decide whether their
ideas can further be used by others or not.
</body>
</html>

Fig. 3.7

SOME MORE ELEMENTS IN HTML

Now we know how to create an HTML document. Let us now learn about some more elements in
HTML to enhance our web page.

The <p> tag

The <br> tag just shifts the text that follows to the new line. It does not add any extra line space
between the two lines. If we want to present our text in the form of paragraphs, then simply using
<br> tag will not help. HTML has a paragraph element, represented by the <p> tag for this purpose.
The text to be displayed as a paragraph is enclosed between the paragraph start and end tags. The <p>
tag inserts a line break as well as some extra space in the beginning of the paragraph.
Note: The <p> tag always leaves a blank line in the beginning of every paragraph.

47

Computer Application Grade 10.indb 47 8/20/2019 3:22:33 PM

 The heading <hn> tag
Sometimes you need to change the appearance of text in terms of its size or thickness. This is
generally required when you want some content to look different from the rest of the text.
The heading element is written as <hn>…</hn>, where n is the level of the heading. It can take
values from 1 to 6. The <h1> heading level gives the most prominent heading, while the <h6> gives
the least prominent. Headings are usually displayed in bolder, larger font than the normal text.
<!DOCTYPE html>
<html>
<head>
<title> Creating a web page </title>
</head>
<body>
<h1> Heading level one </h1>
<h2> Heading level two </h2>
<h2> Heading level three </h3>
<h2> Heading level four </h4>
<h2> Heading level five </h5>
<h2> Heading level six </h6>
</body>
</html>

Fig. 3.8
Remember three things about the heading tag.
• The <hn> tag changes the size of the text. The <h1> heading level gives the maximum size and
<h6> gives the minimum size.
• The <hn> tag makes the text bold—that is, the thickness of text increases.
• The <hn> tag leaves one blank line above and one blank line below text. So this tag automatically
gives paragraph break.

48

Computer Application Grade 10.indb 48 8/20/2019 3:22:34 PM

 The <hr> tag
The <hr> tag draws a horizontal line across the document frame or window. It can be used to visually
divide information or sections of a document. As the <hr> tag does not have an end tag, it is an empty
element.

The comment <!-- … --!> Tag

This tag is used to give comments in an HTML document. The comments are not displayed in the
output on the browser. The comments are used by programmers to write notes explaining parts of
the program. This will help those looking at the source code of the program to understand what the
program is doing. It will also help the programmer if he or she later wants to edit the source code.
Now let us rewrite our previous program using these HTML elements.
<!DOCTYPE html>
<html>
<head>
<title> Using HMTL Elements </title>
<style>
body {background-color:green}
</style>
</head>
<body>
<h1>Intellectual Property Rights</h1><hr>
<p>Intellectual property rights (IPR) are the rights assigned to
the creators of intellectual properties, which include inventions,
artistic and literary works, symbols, logos, images, names of the
companies or organizations, and designs. It is up to the creator,
which may be an individual or organization, to decide whether their
ideas can further be used by others or not. </p>
</body>
</html>

Fig. 3.9
49

Computer Application Grade 10.indb 49 8/20/2019 3:22:34 PM

 Wordbank

HTML A simple text formatting language used to create hypertext documents

for the World Wide Web
Tag A pair of elements in an HTML document that comprises a less than
symbol (<), a tag name, and a greater than symbol (>)
Container element An HTML element that comprises start and end tags
Empty element An element that does not have an end tag
Attributes The properties associated with a tag
<head> The element that defines the header information of a document
<title> The element used to define the title of a document
<body> The element that contains the entire content of a document
CSS A language that has a set of rules to specify the styles to present the
elements on a web page

We have learned

• HTML was developed in 1990 by Tim Berners-Lee.

• HTML is not a case-sensitive language.
• An HTML document is saved with the file extension ‘.htm’ or ‘.html’.
• HTML documents are viewed with the help of a web browser.
• An HTML document contains the <head>, <title>, and <body> elements.
• The <br> tag is used to insert a line break.
• There are various background properties used to set the background style of a web page.
• The paragraph <p> tag is used to display the text as a paragraph.
• The <hn> element is used to include predefined heading levels in HTML.
• The horizontal rule <hr> tag is used to insert a horizontal rule.
• The comment <!--...--> tag is used to enclose text that is not to be displayed in
the output.

50

Computer Application Grade 10.indb 50 8/20/2019 3:22:34 PM

 Solved Examples
   1.  Name the language that is used to create web    8. Differentiate between empty and container
pages. elements.
Ans. HTML Ans. The HTML elements that appear in pair and
contain some parameter (or content) between
   2. Name the property used to set an image as the their start and end tags are called container
background. elements. For example, <head> and <title>
Ans. background-image are the container elements.

   3. Which tag is used to insert a line break in an The elements that do not have an end tag are
HTML document? called empty elements. For example, <br> and
Ans. The <br> tag is used to insert a line break. <hr> are empty elements.

   4. What is the extension of HTML files?    9. What is the <title> element used for?
Ans. HTML files are saved with ‘.htm’ or ‘.html’ Ans. The <title> element specifies the title of the
extension. document. The text to be displayed as the title
of the web page is given as a parameter to the
   5. Who invented HTML? <title> element. The title appears in the title
Ans. HTML was invented by Tim Berners-Lee, a bar of the browser.
scientist at CERN at the European Laboratory
for Particle Physics in Geneva, Switzerland. 10. What is a comment tag in HTML?
Ans. A comment tag (<!-- … --!>) is used to
   6. Define HTML. give comments in an HTML document. The
Ans. HTML is a simple text formatting language comments are notes written by the programmer
used to create hypertext documents for the to describe or explain parts of the HTML code.
World Wide Web. They are added to help the programmer or
other people reviewing the code to understand
   7. What is a hypertext? what the program is doing. Comments are not
Ans. A hypertext is a text that takes the reader to a displayed in the output on the web page.
different location in the same document or to a
different document, which may be located on a
different server.

Exercises
t 1. Match the columns.

(a) <html> (i) Contains the main content

(b) <hr> (ii) Specifies the web browser about the version of the language
(c) <body> (iii) Inserts a horizontal line
(d) <!doctype html> (iv) Defines style information for HTML elements
(e) <style> (v) The file extension of an HTML document
(f) .html (v) Identifies the document as an HTML document

51

Computer Application Grade 10.indb 51 8/20/2019 3:22:34 PM

 t 2. Fill in the blanks.
(a) HTML documents are viewed on a (d) The _________ tag is used to add comments
_________. in an HTML document.
(b) The tag which gives a line break is (e) The _________ property is used to set a
_________. background colour.
(c) The elements that consist of a pair of tags are (f) The <head> element encloses the
called _________ elements. _________ element.

t 3. State the following as true or false.

(a) HTML was developed in 1999 by Tim (f) The internal CSS method adds a link to the
Berners-Lee. CSS file in the <head> tag.
(b) HTML is a case-sensitive language. (g) The background-location property
specifies the position of the background
(c) The tag names cannot contain spaces.
image.
(d) The <br> and <hr> tags are container
(h) The <h1> heading level is the largest
elements.
heading level.
(e) The <!--...--> tag is used to display the
enclosed text in bold font.

t 4. Answer the following questions. [Very short answer type]

(a) Name the element that is used to define the <!--...-->
(iv)
title of an HTML document. <h1>
(v)
(b) Write the use of the following tags in (c) Write the functionality of the following:
HTML:
(i) comment tag
<br>
(i)
<p> tag
(ii)
<hr>
(ii)
(iii) background property
<p>
(iii)
(d) Write the syntax of the CSS rule.

t 5. Answer the following questions. [Short answer type]

(a) Differentiate between the following tags: (c) What are empty elements? Give examples.
<p> and <br>
(i) (d) What is the function of the <head>...</
<h1> and <h6>
(ii) head> element?

(b) What is the purpose of using the <body> tag (e) What is the <title> tag?
in HTML?

t 6. Answer the following questions. [Long answer type]

(a) What is the difference between container and (c) What is CSS? Explain the syntax of the CSS
empty elements? Explain with examples. rule.
(b) What are heading tags? Explain all the (d) Explain all the background properties.
heading tags in HTML.

52

Computer Application Grade 10.indb 52 8/20/2019 3:22:34 PM

 t 7. Select the correct alternative(s).
(a) Which sequence of HTML tags is correct? <br>
(i)
<html><head><title></title>
(i) <lb>
(ii)
</head><body></body></html>
<break>
(iii)
<html><head></head><body>
(ii) <b>
(iv)
<title></<title></body> (e) What is the correct HTML code for adding a
</html> background colour to a document?
<html><head><title></title>
(iii) background-color:yellow
(i)
<body></body></head></html> background-color=“yellow”
(ii)
<html><title></title><head>
(iv) <background>yellow
(iii)
</head><body></body></html> </background>

(b) Which of the following statements is bg-color:yellow

(iv)
incorrect about HTML? (f) Which of the following arrangements of tags
is correct?
(i) HTML is case-sensitive.
(ii) Spaces and tabs can be used anywhere <HTML><HEAD></HEAD><TITLE>
(i)
in the code because it does not affect </TITLE></HTML>

the appearance of the documents. <HTML><HEAD><TITLE></HTML>
(ii)
(iii) The HTML document is saved with the </HEAD></TITLE>

file extension ‘.htm’ or ‘.html’.
<HTML><HEAD><TITLE></TITLE>
(iii)
(iv) The HTML document is written in text
editors like Notepad or WordPad. </HEAD></HTML>

(c) Choose the correct HTML tag for the largest <HTML><HEAD><TITLE></HEAD>
(iv)
heading size. </TITLE></HTML>
(g) Which of the following tags is used to set the
<heading>
(i)
headings in a web page?
<h1>
(ii)
<b>
(i)
<head>
(iii)
<br>
(ii)
<h6>
(iv)
<hr>
(iii)
(d) What is the correct HTML tag for inserting a
line break? <hn>
(iv)

l Lab Exercise
c (a) Create an HTML document to develop a • Set the image of the school as the
web page for your school, keeping in mind background.
the following points. • Use appropriate section headings in the
• Give the title ‘My School’ to the document. Give different font styles
document. and colours to the text.

53

Computer Application Grade 10.indb 53 8/20/2019 3:22:35 PM

 • Make appropriate use of <hr> and page to publish the information. Help her in
<br> tags. creating a web page.
(b) Araadhya has gathered some information
about Cybersafety. She wants to create a web

• While working with HTML commands, you use logical and physical tags. What
are these tags? Name two tags of each category.
s
• Identify the error in the following code.
<style>
body {bg-color:red; bg-image:url(“img.jpg”)}
</style>
• Suneha has added an image to a web page. She wants to scroll down the image
while scrolling the web page. Help her write the code.

54

Computer Application Grade 10.indb 54 8/20/2019 3:22:35 PM

 Formatting Elements in
4 HTML

We will learn about

• Formatting tags • The <img> tag
• Text properties • CSS float property
• Font properties • Hyperlinks
• Margin property • The Anchor <a> tag
• Border properties • HTML global title attribute
• Images and links in HTML

In the previous chapter, we have studied about some of the basic tags of HTML. We have also learned
to integrate CSS with HTML. In this chapter, we shall study about the tags used to format text.

FORMATTING TAGS
There are various tags in HTML that are used to format text.

The bold <b> tag

This tag displays the enclosed text in bold face. The syntax of the tag is given as follows:
<b> text to be formatted </b>

The italics <i> tag

The italics tag displays text enclosed by it in italic. The syntax is as follows:
<i> text to be formatted </i>

The underline <u> tag

The <u> tag underlines text it encloses. The spaces between words in the enclosed text are also
underlined. The syntax of the underline tag is as follows:
<u> text to be formatted </u>

The subscript <sub> tag

The <sub> tag displays the enclosed text as a subscript. A subscript appears slightly below the
baseline (bottom edge) and in a smaller font. The syntax is of the tag is as follows:
_{text to be formatted}
55

Computer Application Grade 10.indb 55 8/20/2019 3:22:35 PM

 The superscript <sup> tag
The <sup> tag displays the enclosed text as a superscript. A superscript appears slightly above the top
of the preceding text and in a smaller font.
^{text to be formatted}
Example 1: An HTML program using text formatting tags
<!DOCTYPE html>
<html>
<head>
<title> Subscript and superscript tags</title>
<style type=“text/css”>
body {background-color:yellow}
</style>
<body>
<p><b><u>Solve the questions given below.</b></u><br></p>
<p>1. NaOH+SO₂</b><br> 2. (a+b)²<br>
3. (a-b)²<br></p>
</body>
</head>
</html>

Fig. 4.1

TEXT PROPERTIES
There are various text properties that are used to format text in HTML 5. Some of the properties are
described here.

56

Computer Application Grade 10.indb 56 8/20/2019 3:22:35 PM

 Color
The color property is used to set the colour of text. The syntax of the property is as follows:
color:value
Here the value can be the name of the colour, a corresponding hexadecimal colour code, or an RGB
colour code. The colour name is a predefined name of the colour available in HTML. The syntax of
the property is as follows:
color:yellow
color:orange

Did You Know?

The hexadecimal value
The hexadecimal colour value has a format—#RRGGBB, FF is equivalent to 255
where RR specifies the intensity of the red colour component, in decimal.
GG specifies the intensity of the green colour component, and
BB specifies the intensity of the blue colour component. The
values of RR, GG, and BB must be between 00 and FF, where
00 represents the lowest intensity and FF represents the highest
intensity of a colour. The syntax of using the color property with the hexadecimal code is as follows:
color:00FFFF
We can also specify the RGB colour code. The RGB value specifies the red, green, and blue
components of a colour. The values of these components must be from 0 to 255 or a percentage value
from 0% to 100%. The syntax of the color property with the RGB values is as follows:
color:rgb(255, 0, 0)
color:rgb(50%, 50%, 0%)

Text align
The text-align property is used to set the horizontal alignment of text. This property is applied to
a block of text. The syntax of the property is as follows:
text-align:value
Here the value can be left, right, center, or justify.

Direction
The direction property is used to set the direction of text. The syntax is as follows:
direction:value
Here the value can be ‘ltr’ or ‘rtl’.
The value ‘ltr’ renders text from left to right, and the value ‘rtl’ renders text from right to left.

Text decoration
This property is used to decorate text. The syntax of the property is as follows:
text-decoration:value

57

Computer Application Grade 10.indb 57 8/20/2019 3:22:35 PM

 Here the value can be none, underline, overline, blink, or line-through. Note that ‘none’ is the default
text decoration property.

Text indent
This property is used to indent the first line of text. The syntax of this property is as follows:
text-indent:value
Here the value can be a number in pixels or percentage.

Letter spacing
This property is used to increase or decrease the blank
Try it out t s
Create a heading level 2 and do the
space between the letters of a word. The syntax of the
following:
property is as follows:
• Set the font colour to yellow.
letter-spacing:value
• Underline text.
Here the value can be a number in pixels.
• Set the alignment of text to right.
Word spacing
This property is used to increase or decrease the space between the words of a sentence. The syntax of
the property is as follows:
word-spacing:value
Here the value can be a number in pixels.

Line height
The line-height property is used to specify the vertical space between two lines of text. The syntax of
the property is as follows:
line-height:value
Here the possible values can be numbers, percentages, lengths, or normal. The value ‘normal’ is the
default value of the line-height property.

Text transform
The text-transform property is used to specify the capitalization of text. The syntax of this
property is as follows:
text-transform:value
Here the possible values can be as follows:
• none—to keep text as it is
• capitalize—to capitalize the first letter of each word
• uppercase—to convert all letters into upper case
• lowercase—to convert all letters into lower case

58

Computer Application Grade 10.indb 58 8/20/2019 3:22:35 PM

 Text shadow
The text-shadow property is used to set the shadow around text. The syntax of the property is as
follows:
text-shadow:h-shadow v-shadow color
Here the value—
• ‘h-shadow’ specifies the distance of the horizontal shadow in pixels,
• ‘v-shadow’ specifies the distance of the vertical shadow in pixels, and
• ‘color’ specifies the colour of the shadow effect.
Example 2: An HTML program that makes use of the text properties
<html>
<head>
<title> Text formatting tags </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; color:red}
h1{color:navy; text-align:center; text-transform:uppercase; text-
decoration:underline; text-shadow:0.5px 0.5px white}
h4{color:navy}
</style>
<body>
<h1> Types of errors in programming</h1>
<h4>1. Syntax Errors</h4>
While writing a program, we follow certain rules in using words and
phrases. Syntax errors occur when these rules are not followed. These
errors are similar to grammatical or spelling mistakes in a language,
such as English. For example, the sentence<br>I going to play<br>is
syntactically incorrect as a verb is missing here.
<h4>2. Runtime Errors</h4>
Sometimes, even when there is no syntax error in a program, it might
not show any output. This is because of runtime errors. An error that
occurs during the execution of the program is called a runtime error.
<h4>3. Logical Errors</h4>
These errors occur when a program executes but does not produce the
intended result. The error is caused due to the wrong logic used in

59

Computer Application Grade 10.indb 59 8/20/2019 3:22:35 PM

 the program. No explicit error is shown and thus you have to find the
problem yourself and correct it.
</body>
</html>

Fig. 4.2

FONT PROPERTIES
The font properties are used to change the font, font style, and font size. The property is used in
different parts in the following ways.

Font
The font of text can be changed using the font-family property. The syntax of the font-
family property is as follows:
font-family:font name
Here ‘font name’ is the name of the font. For example, it can have values as ‘Arial’, ‘Times New Roman’,
‘Calibri’, and so on.

Font size
The size of text can be modified using the font-size property.
Did You Know?

The syntax of the property is as follows: The default font size of

the normal text is 16px.
font-size:value
Here the possible values that can be provided are xx-small, x-small,
small, medium, large, x-large, xx-large, smaller, larger. The value
can also be provided in pixels or percentage (%).

60

Computer Application Grade 10.indb 60 8/20/2019 3:22:36 PM

 Font style
The font-style property is used to change the style of the font. The syntax of the property is as
follows:
font-style:value
Here the possible values are italic or oblique.
Example 3: An HTML program that makes use of the font properties
<html>
<head>
<title> Font formatting tags </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; color:red; font-family:Calibri;
font-size:large}
h1{color:navy; text-align:center; text-transform:uppercase;
text-decoration:underline; text-shadow:0.5px 0.5px white}
h4{color:navy; font-style:oblique}
</style>
<body>
<h1> Types of errors in programming</h1>
<h4>1. Syntax Errors</h4>
While writing a program, we follow certain rules in using words and
phrases. Syntax errors occur when these rules are not followed. These
errors are similar to grammatical or spelling mistakes in a language,
such as English. For example, the sentence<br>I going to play<br>is
syntactically incorrect as a verb is missing here.
<h4>2. Runtime Errors</h4>
Sometimes, eve n when there is no syntax error in a program, it might
not show any output. This is because of runtime errors. An error that
occurs during the execution of the program is called a runtime error.
<h4>3. Logical Errors</h4>
These errors occur when a program executes but does not produce the
intended result. The error is caused due to the wrong logic used in
the program. No explicit error is shown and thus you have to find the
problem yourself and correct it.
</body>
</html>

61

Computer Application Grade 10.indb 61 8/20/2019 3:22:36 PM

 Fig. 4.3

MARGIN PROPERTY
The margin property is used to set the margin around text. The syntax of the property is as follows:
margin:left value right value top value bottom value
These values can be given in terms of px (pixels), cm (centimeter), pt (point), or % (percentage).
Note the following points about the margin property.
• If the margin property has only three values, say 5px
10px 15px, then the top margin is 5px; the right and
Try it out t s
left margins are 10 px; and the bottom margin is What will happen if you specify negative
15px. values in the margin property as given
below?
• If the margin property has only two values, say 5px
10px, then the top and bottom margins are 5px; and <style type=“text/css”>
the right and left margins are 10px. h1{margin: -100px -200px 100px
• If the margin property has only one value, say 5px, 200px}
then all the four margins are 5px. </style>
Example 4: An HTML program that makes use of
the margin properties
<html>
<head>
<title> Font formatting tags </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; color:red; font-family:Calibri;

62

Computer Application Grade 10.indb 62 8/20/2019 3:22:36 PM

 font-size:large; margin:80px 80px 80px 80px}
h1{color:navy; text-align:center; text-transform:uppercase;
text-decoration:underline; text-shadow:0.5px 0.5px white}
h4{color:navy; font-style:oblique}
</style>
<body>
<h1> Types of errors in programming</h1>
<h4>1. Syntax Errors</h4>
While writing a program, we follow certain rules in using words and
phrases. Syntax errors occur when these rules are not followed. These
errors are similar to grammatical or spelling mistakes in a language,
such as English. For example, the sentence<br>I going to play<br>is
syntactically incorrect as a verb is missing here.
<h4>2. Runtime Errors</h4>
Sometimes, even when there is no syntax error in a program, it might
not show any output. This is because of runtime errors. An error that
occurs during the execution of the program is called a runtime error.
<h4>3. Logical Errors</h4>
These errors occur when a program executes but does not produce the
intended result. The error is caused due to the wrong logic used in
the program. No explicit error is shown and thus you have to find the
problem yourself and correct it.
</body>
</html>

Fig. 4.4

63

Computer Application Grade 10.indb 63 8/20/2019 3:22:36 PM

 BORDER PROPERTIES
The border properties provide a way to set the border width, border colour, and border style of an
element in HTML.

Border style
The border-style property is used to set a border around four sides of an element. It can have
one to four values. The possible values are none, dotted, solid, dashed, double, groove, inset, outset,
and ridge.
Now, observe the syntax given below.
border-style:dotted solid dashed double
Here the top border is dotted, right border is solid, bottom border is dashed, and left border is double.
• If the border-style property has only three values, say dotted solid double, then the top border
is dotted; the right and left border styles are solid; and the bottom border style is double.
• If the border-style property has only two values, say dotted solid, then the top and bottom
border styles are dotted; and the right and left border styles are solid.
• If the border-style property has only one value, say dotted, then all the four borders are dotted.

Border width
The border-width property is used to set the thickness of the border of all the four sides. The
syntax of the property is as follows:
border-width:value
Here the possible values can be thin, thick, medium, or a number in pixels. The default value is
medium.

Border color
The border-color property is used to set the colour of the border. The syntax of the property is as
follows:
border-color:value
Here the value can be a colour name or a hexadecimal colour code.
Example 5: An HTML program that makes use of the border properties
<html>
<head>
<title> Font formatting tags </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; color:red; font-family:Calibri; font-
size:large; margin:80px 80px 80px 80px}

64

Computer Application Grade 10.indb 64 8/20/2019 3:22:36 PM

 h1{color:navy; text-align:center; text-transform:uppercase; text-
decoration:underline; text-shadow:0.5px 0.5px white; border:dashed;
border-color:brown; border-width:thick}
h4{color:navy; font-style:oblique}
</style>
<body>
<h1> Types of errors in programming</h1>
<h4>1. Syntax Errors</h4>
While writing a program, we follow certain rules in using words and
phrases. Syntax errors occur when these rules are not followed. These
errors are similar to grammatical or spelling mistakes in a language,
such as English. For example, the sentence<br>I going to play<br>is
syntactically incorrect as a verb is missing here.
<h4>2. Runtime Errors</h4>
Sometimes, even when there is no syntax error in a program, it might
not show any output. This is because of runtime errors. An error that
occurs during the execution of the program is called a runtime error.
<h4>3. Logical Errors</h4>
These errors occur when a program executes but does not produce the
intended result. The error is caused due to the wrong logic used in
the program. No explicit error is shown and thus you have to find the
problem yourself and correct it.
</body>
</html>

Fig. 4.5
65

Computer Application Grade 10.indb 65 8/20/2019 3:22:36 PM

 IMAGES AND LINKS IN HTML
HTML gives us the ability to insert images in the web pages. Images not only make a web page
attractive but also enhances the information provided in the web page. Another tool given to us by
HTML is the ability to create links between different web pages. It is possible not only to link two
different web pages but also to link one part of a document to another part of the same document.

THE <IMG> TAG

The <img> tag allows us to display an image in an HTML document. It does not have a closing tag and
is therefore an empty element.

Attributes of <img> tag

The various attributes associated with the <img> tag are explained below.
The src attribute
The ‘src’ attribute is the most important attribute of the <img> tag because it specifies the location or
URL of the image to be displayed in the document. Once the URL has been specified, the location
of the image file should not be changed. It is always recommended to insert only those images that
occupy less space. This would make the uploading and downloading of images easy and less time-
consuming.
The most commonly used image file formats are as follows:
• JPEG/JPG (Joint Photographic Experts Group)
• GIF (Graphics Interchange Format)
• PNG (Portable Network Graphics)

Note: There are various ways of specifying the URL or location of the image file in the src
attribute of the <img> tag.
(i) Absolute URL: Here, you specify the complete path of the image file. For example, on your
local computer the code would look like src=“F:\Projects\sarikavimal\html examples\apple1.
jpeg”.
(ii) Relative URL: Here, you specify the path of the image file with respect to the HTML file.
(a) The image file and the HTML file are in the same folder: In this case, simply specify the
name of the image file. For example, src=“apple1.jpeg”.
(b) The image file is inside a sub-folder containing the HTML file: In this case, for example, if
the image file is in a folder ‘Examples’ whereas the HTML file and the Examples folder are
in the same folder, then the code would be like src=“/Examples/apple1.jpeg/”.

The alt attribute

This attribute provides alternative text for an image in case a user, due to some reason, is not able to
see the image. The alternative text should generally contain a description of the image.
The height attribute
This attribute specifies the height of the image. It takes its value in the form of an integer or as a

66

Computer Application Grade 10.indb 66 8/20/2019 3:22:36 PM

 percentage of the height of the window. To indicate a percentage, specify the value as an integer
followed by a percentage sign—for example, height=20%, where the value 20% is with respect to the
total height of the browser window.
The width attribute
This attribute specifies the width of the image either in the form of an integer (pixels) or as a
percentage of the total width of the window.
Now observe the following program. It illustrates the use of the <img> tag and its related attributes.
<!DOCTYPE html>
<html>
<head>
<title>Displaying image on a web page</title>
<style type=“text/css”>
img{border-style:dashed; border-color:red}
</style>
<body>
<p><b>This code displays images.</b></p>
<img src=“graphicstablet.jpg” height=200px width=200px alt=“This is an
image of a graphics tablet.”>
<img src=“microphone.jpg” height=200px width=200px alt=“This is an
image of a microphone.”>
<img src=“mouse.jpg” height=200px width=200px alt=“This is an image of
a mouse.”>
</head>
</body>
</html>

67
Fig. 4.6

Computer Application Grade 10.indb 67 8/20/2019 3:22:36 PM

 CSS FLOAT PROPERTY
The float property allows an element to float inside its parent tags. The placement is with respect to
text following it. The syntax of the float property is as follows:
float:value
Here the possible values can be ‘none’, ‘left’, and ‘right’.
The following example illustrates the use of the float property.
<html>
<head>
<style type=“text/css”>
img{border-style:solid; border-color:gray; float:left}
</style>
</head>
<body>
<h2>Graphics Tablet</h2>
<p>A graphics tablet, also known as a pen tablet, is an input device.
It lets a user to draw images and graphics digitally using a special
pen called stylus.</p>
<img src=“graphicstablet.jpg” height=200px width=200px>
<p>Just the way a user draws graphics using a pencil, a user draws
images using a stylus. The images are converted into a digital form
by a computer. The graphics tablet can also be used to capture
signatures.</p>
</body>
</html>

Fig. 4.7
68

Computer Application Grade 10.indb 68 8/20/2019 3:22:36 PM

 HYPERLINKS
A hyperlink or a link connects a web page to another web resource—for example, an image, a video
clip, a sound bite, a program, an HTML document, and an element within an HTML document. It is
a hypertext link that the user can click on to display the destination resource. Using anchors and links
together, we can display specific parts of the destination document (instead of displaying the beginning
part).

THE ANCHOR <A> TAG

The <a> tag, called the Anchor tag, is one of the most important elements in HTML. It is a container
element. It is used to create hyperlinks in HTML documents.

The href attribute

The href (hypertext reference) attribute is used to specify the destination (URL) of the link. The syntax
of the anchor <a> tag when used as a hyperlink is as follows:
<a href=“url”>Text that will appear as a hyperlink</a>
Let us observe the program given below that illustrates the use of hyperlinks.
Note: You can make necessary changes in this code (like providing URL of the files available on your
computer in the href attribute) and run it on a web browser to see the output.
<!DOCTYPE html>
<html>
<head>
<title>hypertext
demo</title>
</head>
<body>
Click at the links
given below to study
the chapters in
detail.
<a href=ch1.
html>chapter-
1:Introduction</a> Fig. 4.8
<br><a href=ch2.
html>chapter-2:Hardware</a>
<br><a href=ch3.html>chapter-3:Software</a>
</body>
</html>

69

Computer Application Grade 10.indb 69 8/20/2019 3:22:37 PM

 Using <a> as a bookmark
A bookmark is used to link to another section on the same web page. This is helpful to quickly jump
to the page a user is looking for. The bookmarks are also known as named anchors. The <a> tag uses
the ‘id’ attribute to give a name to a section of an HTML document.
Syntax
<p id=“anchor name”>Text</a>
Note: If you want to jump from one part of the document to another part of the same document, then
create an anchor at the destination and put a link at the source. The ‘href ’ attribute of the link should
contain the name of the destination anchor. The syntax of the link is as follows:
<a href=“#anchor name”>Text</a>
The # symbol lets the browser identify that the given destination address is a named anchor on the
same web page.
Now let us consider the following program to understand the concept of the named anchor in a better
way.
<!DOCTYPE html>
<html>
<head>
<title>Hypertext demo</title>
<style type=“text/css”>
body{background-color:lightgray; color:red; font-family:Calibri;
font-size:xlarge}
h1{color:navy; text-align:center; text-transform:uppercase;
text-decoration:underline; text-shadow:0.5px 0.5px white}
h4{color:navy; font-style:oblique}
</style>
</head>
<body>
<h1> <a id=“#top”>Types of errors in programming</a></h1>
<h4>1. Syntax Errors</h4>
While writing a program, we follow certain rules in using words and
phrases. Syntax errors occur when these rules are not followed. These
errors are similar to grammatical or spelling mistakes in a language,
such as English. For example, the sentence<br>I going to play<br>is
syntactically incorrect as a verb is missing here.
<h4>2. Runtime Errors</h4>
Sometimes, even when there is no syntax error in a program, it might
not show any output. This is because of runtime errors. An error that
70

Computer Application Grade 10.indb 70 8/20/2019 3:22:37 PM

 occurs during the execution of the program is called a runtime error.
<h4>3. Logical Errors</h4>
These errors occur when a program executes but does not produce the
intended result. The error is caused due to the wrong logic used in the
program. No explicit error is shown and thus you have to find the problem
yourself and correct it.
<br><br><br><a href=“#top”> Click here to go to the top of the page</a>
</body>
</html>

Fig. 4.9

Fig. 4.10

Target attribute of <a> tag

When you click on a hyperlink, it opens in a new window. To specify where the linked page should
appear, the ‘target’ attribute is used. The ‘target’ attribute defines the destination of the link. There are
four values of the attribute as listed below.
• _blank: Opens the linked document in a new window or tab

71

Computer Application Grade 10.indb 71 8/20/2019 3:22:37 PM

 • _self: Opens the linked document in the same window or tab
• _top: Opens the linked document in the full body of the window
• _parent: Opens the linked document in the parent frame

Link states
In HTML, by default, the links are indicated by different colours in all the web browsers. These are as
follows:
• An active link is red and underlined.
• A visited link is purple and underlined.
• An unvisited link is blue and underlined.
Using CSS properties, we can specify the colour of the link based on the action performed. There are
four link states as described here.
• a:link: a simple, unvisited link
• a:visited: a link that has been visited
• a:hover: a link when the user moves the mouse pointer over it
• a:active: a link that is active
Now take a look at the following code snippet to understand how to apply colours to links.
<style type=“text/css”>
a:link{color:blue}
a:visited{color:green}
a:hover{color:orange}
a:active{color:yellow}
</style>
Note: The a:active property must come after a:hover, and the a:hover property must come
after a:link and a:visited properties.

Creating email links

The ‘mailto’ attribute of the anchor <a> tag lets us create email links on web pages. It enables visitors
to send feedback through the website. But to be able to send emails from a web page, the visitor needs
to configure his email client. Otherwise, the email will not be sent.
Syntax
<a href=“mailto:[email protected]” alt=“Send your feedback to
[email protected]”>Click here to send your feedback</a>
The ‘alt’ attribute provides the alternate text to be displayed on the web page in case a browser is not
able to show the link.
The following program creates an email link.

72

Computer Application Grade 10.indb 72 8/20/2019 3:22:37 PM

 <!DOCTYPE html>
<html>
<head>
<title>Email link demo</title>
</head>
<body>
<a href=“mailto:[email protected]”> This is an email link. </a>
</body>
</html>

Fig. 4.11

Adding links through an image

Any object (whether it is a text or an image) can be made a hyperlink. We have already seen text being
used as a hyperlink. We can also use an image as a hyperlink. To create an image as a hyperlink, place
the <img> tag between the <a> and </a> tags.
Let us take an example to use an image as a hyperlink. Observe the code for small.html as given below.
It displays a smaller version of an image. When you click on this image, it will show the image in an
increased size.
Code for small.html
<!DOCTYPE html>
<html>
<head>
<title>An image as a hyperlink</title>
<style type=“text/css”>
body{background-color:lightgray}

73

Computer Application Grade 10.indb 73 8/20/2019 3:22:37 PM

 img{border-style:dotted}
hr{margin:0.5cm}
</style>
</head>
<body>
<a href=“big.html”> <img src=“flower.jpg” height=200px width=300px></a>
<hr>
<br> This is a smaller version of an image.
<br> Click on the image to get the full-size view.
</body>
</html>

Fig. 4.12
Code for big.html
<!DOCTYPE html>
<html>
<head>
<title> An image as a hyperlink </title>
<style type=“text/css”>
body{background-color:lightgray; color:blue}
img{border-style:double}
hr{margin:1cm}
</style>

74

Computer Application Grade 10.indb 74 8/20/2019 3:22:37 PM

 </head>
<body>
<a href=“small.html”><img src=“flower.jpg” height=400 width=400></a>
<hr>
<br> This is the bigger version of the image.
<br> You can click on the above image to go back.
</body>
</html>

Fig. 4.13

HTML GLOBAL TITLE ATTRIBUTE

The global title attribute provides the extra information about the tag. This attribute can be used with
a number of tags, such as <p>, <hr>, <a>, and <img>. It adds a small text pop-up to any HTML
element. This attribute works much like text pop-ups of word-processing programs. You may use the
‘title’ attribute with any HTML element, but the effect of this attribute will not be seen until you keep
your mouse over the element for a few seconds.
The following program illustrates the use of the global title attribute.
<!DOCTYPE html>
<html>
<head>
<title>flower</title>
<style type=“text/css”>

75

Computer Application Grade 10.indb 75 8/20/2019 3:22:37 PM

 body{background-color:lightgray; color:blue}
img{border-style:dashed}
hr{margin:1cm}
</style>
</head>
<body>
<hr>
<a href=“one.html” title=“Click on the image to get the full-size
view.”> <img src=“flower.jpg” height=200px width=200px></a>
<br> This is a bigger version of image.
<br> You can click on the above image to see its full size.
</body>
</html>

Fig. 4.14

Wordbank

Absolute URL The complete path or URL of a resource

Relative URL The URL of a resource with reference to the HTML file where the
URL is being referenced
Hyperlink A link that connects a web page to another web resource, such as
another web page, an image, a video clip, a sound bite, a program, or an
element within an HTML document

76

Computer Application Grade 10.indb 76 8/20/2019 3:22:37 PM

 We have learned

• The <img> tag is used to insert images on a web page. It does not have a closing tag and is
therefore an empty element.
• The src attribute is the most important attribute of the <img> tag because it specifies the
location or URL of the image to be displayed in the document.
• The alt attribute is used to specify alternate text for an image.
• The height and width attributes of the <img> tag are used to specify the height and width of
the image respectively.
• A hyperlink is created using the <a> tag. It is a container element.
• The href attribute of the <a> tag is used to specify the url of the destination.
• Any object (whether it is text or an image) can be made a hyperlink.
• A link is active when you have clicked on it but have not released the mouse button.

Solved Examples
   1.  Which tag is used to italicize text? Ans. The <a> tag is used to create links on a web
Ans. The <i> tag is used to italicize text. page.

   2. Which property is used to set the horizontal    7. What is the default colour of a link on a web
alignment of text? page?
Ans. The text-align property is used to set the Ans. Blue
horizontal alignment of text.
   8. Where do you specify the URL of the linked
   3. Name the property used to set the colour of the page in the <a> tag?
border. Ans. The URL of the linked page is given as the
Ans. The border-color property is used to set value of the ‘href ’ attribute in the <a> tag.
the colour of the border.
   9. Which global attribute is used to add a text pop-
   4. Which tag is used to insert an image on a web up to <a> tag?
page? Ans. The ‘title’ attribute can be used with the <a>
Ans. The <img> tag is used to insert images on a tag.
web image.
  10. How can we control the size of the image on
   5. Which attribute of the <img> tag is used to the web page?
specify the URL of the image file? Ans. The size of the image can be adjusted using the
Ans. The ‘src’ attribute is used to specify the URL of ‘height’ and ‘width’ attributes of the <img> tab.
the image file.
  11. Write the syntax to create an email link on a
   6. Name the tag that is used to create links on a web page.
web page. Ans. <a href=“mailto:[email protected]”>
Click on this link!</a>

77

Computer Application Grade 10.indb 77 8/20/2019 3:22:37 PM

 Exercises
t 1. Match the columns.

(a) Absolute URL (i) Specifies link URL

(b) _blank (ii) Alternative text
(c) src (iii) Opens a link in a new window
(d) href (iv) Complete path of a resource
(e) alt (v) Specifies image URL

t 2. Fill in the blanks.

(a) The property is used to specify (f) The attribute of the <a> tag
the capitalization of text. is used to create named anchors in a web
document.
(b) The property is used to change
the font size of text. (g) An is used to connect one part
of a document to another part of the same
(c) The property is used to specify
document.
the thickness of the border.
(h) The attribute of the <a> tag
(d) The size of the image inserted in an HTML
takes the URL of the linked file.
document can be modified horizontally and
vertically by using the and (i) The attribute is used to specify
attributes of the <img> tag. where to open a linked document.
(e) The attribute of the
tag is invoked when the image
is not found by the browser.

t 3. State the following as true or false.

(a) You can nest <u> tags within <i> tags. (f) The absolute URL lets you specify the URL
of a resource with reference to the web page
(b) The <b> tag is an empty element.
where it is being referenced.
(c) The font-family property is used to
(g) The <a> tag always takes you to the top of
change the font size and font style of the text.
the linked web page.
(d) The ‘src’ attribute of the <img> tag specifies
(h) It is not possible to specify margins for the
the URL of the image to be displayed on the
elements on a web page.
web page.
(e) It is always a good idea to keep changing
the location of the image file that has been
referenced on a web page.

78

Computer Application Grade 10.indb 78 8/20/2019 3:22:38 PM

 t 4. Answer the following questions. [Very short answer type]
(a) Name the property used to specify the (f) Name the attribute that is used to display
vertical space between the lines of text. alternate text for an image.
(b) Write the syntax of the margin property. (g) Write the expansions of the following tags
used in HTML.
(c) Name the tag used for inserting images on a
web page. <a>
(i)
(d) Which tag is used to create a hyperlink on a <img>
(ii)
web page?
(e) Which attribute of the <a> tag will you use
to add a text pop-up to an element on a web
page?

t 5. Answer the following questions. [Short answer type]

(a) Explain the difference between the letter (ii) href attribute of the <a> tag
spacing and word spacing properties. (iii) title attribute
(b) Define the anchor tag. Name any two (e) Write the HTML code to create an image
attributes of the anchor tag. named ‘Monument.gif ’ as a hyperlink to
(c) What is the significance of the ‘alt’ attribute ‘India.html’.
of the <img> tag?
(d) Give the functionality of the following:
(i) src attribute of the <img> tag

t 6. Answer the following questions. [Long answer type]

(a) Explain the color, direction, and text- (c) Explain any two attributes of the <img> tag.
shadow properties of text.
(d) Explain the function of the global title
(b) Explain the border properties with the help of attribute.
an example.

t 7. Select the correct alternative(s).

(a) Which of the following tags is used to display (b) Which of the following is the correct way of
text below the baseline? making text bold?
<subscript>
(i) <b>text
(i)
<sub>
(ii) <b>text</b>
(ii)
<superscript>
(iii) <bold>text
(iii)
<sup>
(iv) <bold>text</bold>
(iv)

79

Computer Application Grade 10.indb 79 8/20/2019 3:22:38 PM

 (c) Which of the following is the correct code (f) Which of the following is not an attribute of
to connect an HTML page with another the <a> tag?
HTML page?
(i) src
<a link=“page.html”></a>
(i) (ii) id
<a href=“page.html”></a>
(ii) (iii) title
<a connect=“page.html”></a>
(iii) (iv) href
<a attach=“page.html”></a>
(iv) (g) Which attributes of the <img> tag are used
(d) Which of the following is the correct to change the size of an image?
command to add an image?
(i) height and width
<image src=“url”>
(i) (ii) left margin and right margin
<img src=“url”>
(ii) (iii) size
<src img=“url”>
(iii) (iv) None of the these
<img srcimg=“url”>
(iv) (h) Which attribute shows text that contains
(e) What is the correct HTML command for some extra information related to the
inserting a named anchor? element?
<a href=image.html></a>
(i) (i) title
<a id=“#anchor1”></a>
(ii) (ii) head
<href=image.html></a>
(iii) (iii) body
<link=image.html></a>
(iv) (iv) id

l Lab Exercise
c (a) Write the HTML code to create a web page to ‘questionnaire.html’. Create a hyperlink on
show the information on reflection of light. this page that should be linked to another
Use a suitable background colour, font type, page, saved as ‘answers.html’, containing
and font size. Also insert images wherever answers to the questions.
required.
(c) Write the HTML source code on internet
(b) Create two linked pages in HTML. The first and its applications. Format text using
page should display multiple choice questions appropriate CSS properties. Also, add images
on HTML and CSS and should be saved as supporting text.

• Using the <a> tag you can also create a link to your email address. Can you
find out how?
s
• When you use the <a> tag, the link opens in the same window. Which attribute of the
<a> tag is used to open the hyperlink in a new browser window?

80

Computer Application Grade 10.indb 80 8/20/2019 3:22:38 PM

 Lists and Tables
5 in HTML

We will learn about

• HTML Lists • Nested Lists
• Creating ordered lists • Tables in HTML
• Creating unordered lists • Inserting an image in a table
• Definition or description lists

Sometimes we need to arrange our data items in the form of lists. A list helps to present information
in a better way.

HTML LISTS
In HTML, there are three different types of lists that can be created. These are ordered list, unordered
list, and description list.
An ordered list is used to generate a list of items in a specific order. An unordered list is used to create
a list where there is no specific preference for the items. The definition lists are used for generating a
lists of terms with their definitions, such as a glossary.

List item element

Inside a list, we need to describe each item of the list. HTML provides the <li> tag to individually
describe each list item. The <li> tag is used with both the ordered and unordered lists.
The syntax of the <li> tag is as follows:
<li> Item </li>

CREATING ORDERED LISTS

In HTML, the tag used for creating an ordered list is the <ol> tag, which stands for ‘ordered list’.
The <ol> tag is a container element.

Properties of the ordered list

Let us learn about the properties associated with the <ol> tag to format the lists.

81

Computer Application Grade 10.indb 81 8/20/2019 3:22:39 PM

 The list-style-type property
By default, an ordered list is preceded by a number or a letter. The default style is usually numbered,
but it may differ for different browsers. The style can be changed by using the list-style-type
property.
The syntax of the property is as follows:
list-style-type:value
Here, the possible values can be decimal, lower-alpha, upper-alpha, lower-roman, and upper-roman.
Observe the following program. It displays an ordered list in the web browser.
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
<style type=“text/css”>
body{background-color:lightgray}
p{font-size:large; font-family:arial}
ol{border-style:solid; outline:3px solid red; list-style-type:
upper-roman}
</style>
</head>
<body>
<p> List of students (in the alphabetical order) participating in
inter-house badminton championship</p>
<ol>
<li>Abdul</li>
<li>Abhinay</li>
<li>Kareena</li>
<li>Farha</li>
<li>Ojas</li>
<li>Yuvaan</li>
</ol>
</body>
</html>

82

Computer Application Grade 10.indb 82 8/20/2019 3:22:39 PM

 Fig. 5.1

Attributes of the <ol> tag

The various attributes associated with the <ol> tags are listed as follows.
The start attribute
The ‘start’ attribute indicates the starting number for the list. The syntax of the attribute is as follows:
<ol start=“value”>
Here, the value must be a positive integer. For example, <ol start=“5”> will begin the list from
5.
The reversed attribute
This attribute is used to display a list in reverse order, such as 9, 8, 7… or C, B, A, … . The syntax of
the attribute is as follows:
<ol reversed>
The type attribute
The ‘type’ attribute defines the type of numbering sequence used for each list item. The syntax of the
property is as follows:
<ol type=“value”>
The table given below lists the possible values of the type attribute.

Value Output
1 1, 2, 3, ...
a a, b, c, ...
A A, B, C, ...
i i, ii, iii, ...
I I, II, III, ...

83

Computer Application Grade 10.indb 83 8/20/2019 3:22:39 PM

 Observe the code and its output given below.
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
<style type=“text/css”>
body{background-color:lightgray}
p{font-size:large; font-family:arial}
ol{margin:1cm; border-style:solid; outline:3px solid red}
</style>
</head>
<body>
<p> Top 5 sports liked by the Try it out t s
students! </p>
Write the HTML source code to generate
<ol reversed> the following result:
<li>Hockey</li><br> III. Orange
<li>Squash</li><br> IV. Guava
V. Banana
<li>Cricket</li><br> VI. Apple
<li>Badminton</li><br>
<li>Tennis</li><br>
</ol>
</body>
</html>

Fig. 5.2

84

Computer Application Grade 10.indb 84 8/20/2019 3:22:39 PM

 CREATING UNORDERED LISTS
The <ul> tag is used to generate a list of items which are not to be placed in a specific order. It
displays a bulleted list. The <ul> tag is also a container element.

Properties of unordered lists

The various properties associated with the <ul> tag are as follows:
The list-style-type property
The list-style-type property is used to specify the type of unordered list. The syntax of the property
is as follows:
list-style-type:“value”
Some of the possible values are as follows:
• circle—specifies a hollow bullet
• disc—specifies a solid round bullet
• square—specifies a square bullet
Example: The following program displays an unordered list with hollow circular bullets.
<!DOCTYPE html>
<html>
<head>
<title>Unordered lists</title>
<style type=“text/css”>
body{color:navy; background-color:lightgreen}
ul{list-style-type:circle}
</style>
</head>
<body>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Litchi</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>
</html>

85

Computer Application Grade 10.indb 85 8/20/2019 3:22:39 PM

 Fig. 5.3
The list-style-position property
This property is used to specify the position of the list items markers. The syntax of the property
is as follows:
list-style-position:“value”
Here the possible values are inside and outside.
The list-style-image property
This property is used to display an image as a list marker. It uses the URL of the image as its value.
The syntax of the property is as follows:
list-style-image:url(‘imagename’)
The following program displays an image as a list item marker.
<!DOCTYPE html>
<html>
<head>
<title>Unordered lists</title>
<style type=“text/css”>
body{color:navy; background-color:lightgreen}
ul{list-style-image:url(‘image.jpg’)}
</style>
</head>
<body>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Litchi</li>
<li>Banana</li>

86

Computer Application Grade 10.indb 86 8/20/2019 3:22:39 PM

 <li>Orange</li>
</ul>
</body>
</html>

Fig. 5.4

DEFINITION OR DESCRIPTION LISTS

Definition lists are used for creating a glossary, which contains various terms and their definitions.
The definition list differs from the ordered and unordered lists in a way that each definition list item
contains two parts—a term and a definition.
HTML provides the <dl> tag for generating definition lists. The data term is given in the <dt> tag,
and the data description is given in the <dd> tag.
Example
The following program displays a list of computer related terms and their description.
<!DOCTYPE html>
<html>
<head>
<title>Definition list demo</title>
<style type=“text/css”>
dd{margin:12px}
dt{background-color:darkblue; color:white; width:60px}
dd{background-color:lightblue}
</style>
</head>
<body>
<dl>

87

Computer Application Grade 10.indb 87 8/20/2019 3:22:39 PM

 <dt>RAM</dt>
<dd>Random access memory; a volatile memory</dd>
<dt>ROM</dt>
<dd>Read-only memory; a non- volatile memory</dd>
<dt>CPU</dt>
<dd>Central processing unit; the brain of the computer</dd>
</dl>
</body>
</html>

Fig. 5.5

NESTED LISTS
Nested lists refer to lists within lists. Nesting happens when some list item in a list may further
contain a sub-list. In HTML, we can nest one type of list within another.
Let us write a code to show nesting of lists.
<!DOCTYPE html>
<html>
<head>
<title>list demo</title>
<style type=“text/css”>
body{color:purple}
</style>
</head>
<body>
<ol type=A>
<li>Introduction</<li>

88

Computer Application Grade 10.indb 88 8/20/2019 3:22:39 PM

 <ol type=i>
<li>Computer definition</<li>
<li>RAM and ROM</<li>
<li>IPO cycle</<li>
</ol>
<li>Windows</<li>
<ol type=i>
<li>Desktop</<li>
<li>Icons</<li>
<li>Files and folders</<li>
</ol>
</ol>
</body>
</html>

Fig. 5.6
Example 1: Program to display nesting of unordered lists inside the ordered lists
<!DOCTYPE html>
<html>
<head>
<title>Nested list demo:nesting dissimilar lists</title>
<style type=“text/css”>
body{color:purple}
ul{list-style-type:circle}
</style>
</head>

89

Computer Application Grade 10.indb 89 8/20/2019 3:22:39 PM

 <body>
<ol type=A>
<li>Introduction</li>
<ul>
<li>Computer definition
<li>RAM and ROM
<li>IPO cycle
</ul>
<li>Windows</li>
<ul>
<li>Desktop</li>
<li>Icons</li>
<li>Files and folders</li>
</ul>
</ol>
</body>
</html>

Fig. 5.7
Example 2: Program to demonstrate the nesting of a definition list inside an ordered list
<!DOCTYPE html>
<html>
<head>
<title>Nested list involving definition lists</title>
<style type=“text/css”>
body{color:purple}
ul{list-style-type:circle}

90

Computer Application Grade 10.indb 90 8/20/2019 3:22:39 PM

 </style>
</head>
<body>
<h3>Nesting of Lists</h3>
<ol type=A>
<li><b>Some internet related terms</b>
<dl><dt><i>World Wide Web</i>:</dt>
<dd>The World Wide Web is a combination of all the resources that
use HTTP.</dd>
<dl><dt><i>Web site</i>:</dt>
<dd>A web site is a collection of related web pages.</dd>
<dl><dt><i>URL</i>:</dt>
<dd>A uniform resouce locator or URL is the address of the resources
on the World Wide Web.</dd>
</dl>
<li><b>Some formatting tags in HTML</b>
<dl><dt><i>The &ltu&gt tag</i>:</dt>
<dd>The &ltu&gt tag is used for underlining the text. It is a
container element.</dd>
<dl><dt><i>The &lti&gt tag</i>:</dt>
<dd>The &lti&gt tag is used to italicize the text.</dd>
</ol>
</body>
</html>

Fig. 5.8

91

Computer Application Grade 10.indb 91 8/20/2019 3:22:39 PM

 Note: To display HTML tags as plain text, replace the
less than symbol (<) with ‘&lt’ and greater than symbol Try it out t s
(>) with ‘&gt’. Write the source code to generate the
following output:
TABLES IN HTML I. List Item 1
A table is used to arrange data in the form of rows and a. Nested List Item 1
columns. When data is arranged in a table, it looks more
organized. For example, if your class teacher tells you to b. Nested List Item 2
create a class list with a provision of columns that can II. List Item 2
store marks in different subjects, then the best way to do
o
Nested List Item 1
the task is to use tables. An example of a table is shown
below.

Adm No. Name Class Percentage scored

12341 Neha 10 88%
26765 Vaibhav 10 96%
67544 Zainab 10 75%

HTML 5 table tags

The process of creating tables in HTML is easy. HTML provides various tags to create a table. Let us
now learn how to create and add tables on a web page using the tags.
The <table> element
The <table> tag is the basic HTML element for creating a table. It is a container element.
The <tr> element
The <tr> tag is a container element, which is used to define each row of a table. It is used inside the
<table> tag. In other words, it is the parameter of the <table> tag. The number of rows in a table
corresponds to the instances of the <tr> element within the <table> element.
The <td> element
The <td> tag specifies text in a cell of a table. It is a container element. This tag is used inside the
<tr> tag, which is nested inside the <table> tag. The number of columns in a table depends on the
number of the <td> elements within the <tr> element.
The <th> element
The <th> tag is used to create headings in a table. This is a container element. It specifies a table cell
whose contents are usually displayed in a bolder font than those of the regular table cells.
The only difference between the <td> and the <th> tag is that the text is displayed in a roman font
(not bold) in <td>, while it is displayed in the bold font by the <th> tag.
The <caption> element
The <caption> tag is a container element that is used to specify a caption to the table. This tag is
placed within the <table> tag.

92

Computer Application Grade 10.indb 92 8/20/2019 3:22:40 PM

 The following code illustrates how to create a simple table in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
<style type=“text/css”>
body{color:purple}
table{background-color:yellow}
</style>
</head>
<body>
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr> Fig. 5.9
<td>A1</td>
<td>A2</td>
<td>A3/td>
</tr>
</table>
</body>
</html>
As you can see there are no borders around the table. To format the table, we can use CSS properties.

CSS <table> properties

There are various CSS properties associated with the <table>, <td>, and <th> tags that can be
used to format a table. Let us learn about these properties.
The border property
The border property is used to specify all the border properties within one single statement. It is also
applicable for <th> and <td> tags.

93

Computer Application Grade 10.indb 93 8/20/2019 3:22:40 PM

 The border-collapse property
This property specifies whether to merge the borders of a table and its cells or to show them
separately.
The width and height properties
These properties are used to specify the width and height of a table or cells respectively. The value is
specified in terms of percentage, pixels, centimetre, or point. These properties can also be used with
the <tr>, <td>, and <th> tags.

CSS <td> properties

The text-align property
This property is used to specify the horizontal alignment of text. It can also be used with the <th>
tag. The possible values are left, center, and right.
For <td>, the default text alignment is left, while for <th>, the default text alignment is center.
The vertical-align property
This property is used to specify the vertical alignment of text. The possible values are top,
middle, and bottom. It can also be used with the <th> tag. For both <td> and <th>, the default
value is middle.
The padding property
This property is used to adjust the space between the defined border and the content in a table. It can
also be used with the <th> tag.
<!DOCTYPE html>
<html>
<head>
<title>tables</title>
<style type=“text/css”>
table{border:solid; background-color:lightblue; border-
collapse:collapse; width:12cm; height:4cm}
th,td{border:solid; text-align:center; vertical-align:middle}
td{padding:0.5cm}
caption{text-align:center}
</style>
</head>
<body>
<table>
<caption> <h4>A sample table</h4></caption>
<tr>
<th>Product</th>

94

Computer Application Grade 10.indb 94 8/20/2019 3:22:40 PM

 <th>Quantity</th>
<th>Cost per unit</th>
<th>Total cost</th>
</tr>
<tr>
<td>Soap</td>
<td>100</td>
<td>₹15</td>
<td>₹1500</td>
</tr>
<tr>
<td>Shampoo</td>
<td>60</td>
<td>₹75</td>
<td>₹4500</td>
</tr>
<tr>
<td>Toothbrush</td>
<td>200</td>
<td>₹25</td>
<td>₹5000</td>
</tr>
Fig. 5.10
<tr>
<td>Toothpaste</td>
<td>175</td>
<td>₹50</td>
<td>₹8750</td>
</tr>
</table>
</body>
</html>

95

Computer Application Grade 10.indb 95 8/20/2019 3:22:40 PM

 Common attributes of <td> and <th> tags
The common attributes associated with the <td> and <th> are listed below.
Rowspan
The ‘rowspan’ attribute is used to merge two or more rows into a single row. The syntax of the
attribute is as follows:
<td rowspan=“value”> OR <th rowspan=“value”>
Where value is a positive integer.
The following program demonstrates the use of the rowspan attribute.
<!DOCTYPE html>
<html>
<head>
<title>Table: Using Colspan Attribute</title>
<style type=“text/css”>
caption{padding:0.5cm}
body{color:purple}
table{border:solid; background-color:lightblue; border-
collapse:collapse; width:400px; height:50px}
th,td{border:solid; text-align:center; vertical-align:middle;
background-color:lightblue}
td{padding:0.5cm}
tr{background-color:lightgreen}
</style>
</head>
<body>
<table>
<caption>Table 1.1</caption>
<br><tr>
<th rowspan=“2”>Company A</th>
<td>Shampoo</td>
</tr>
<tr>
<td>Soap</td>
</tr>
Fig. 5.11
<tr>

96

Computer Application Grade 10.indb 96 8/20/2019 3:22:40 PM

 <th>Company B</td>
<td>Toothpaste</td>
</tr>
</table>
</body>
</html>
Colspan
This attribute is used to merge two or more columns in a row. The syntax of the attribute is as
follows:
<td colspan=“value”> OR <th colspan=“value”>
Where value is a positive integer.
Now observe the HTML code and its output given below to understand the effect of the colspan
attribute.
<!DOCTYPE html>
<html>
<head>
<title>Table:Using Colspan Attribute</title>
<style type=“text/css”>
caption{padding:0.5cm}
body{color:purple}
table{border:solid; background-color:lightblue; border-
collapse:collapse; width:400px; height:200px}
th,td{border:solid; text-align:center; vertical-align:middle;
background-color:lightblue}
td{padding:0.5cm}
tr{background-color:lightgreen}
</style>
</head>
<body>
<table>
<caption>Table 1.2</caption>
<tr>
<th colspan=“2”>Company A</th>
<th>Company B</th>

97

Computer Application Grade 10.indb 97 8/20/2019 3:22:40 PM

 </tr>
<tr>
<td>Shampoo</td>
<td>Soap</td>
<td>Toothpaste</td>
</tr>
</table>
</body>
</html>

Fig. 5.12

INSERTING AN IMAGE IN A TABLE

It is also possible to insert an image in a table cell. The <img> tag is used to insert an image in a table.
Let us observe the following HTML code to see how images are inserted in a table.
<!DOCTYPE html>
<html>
<head>
<title>Table:Using Colspan Attribute</title>
<style type=“text/css”>
caption{padding:0.5cm}
body{color:purple}
table{border:solid; background-color:lightblue; border-
collapse:collapse; width:400px; height:200px}
th,td{border:solid; text-align:center; vertical-align:middle;
background-color:lightblue}

98

Computer Application Grade 10.indb 98 8/20/2019 3:22:40 PM

 td{padding:0.5cm}
tr{background-color:lightgreen}
</style>
</head>
<body>
<table>
<caption>Table 1.3</caption>
<tr>
<th colspan=“2”>Inserting images in a table</th>
</tr>
<tr>
<td><img src=“flower.jpg” height=200 width=200> An image of a flower</
td>
<td><img src=“elephant.jpg” height=200 width=300>An image of an
elephant</td>
</tr>
</table>
</body>
</html>

Fig. 5.13

99

Computer Application Grade 10.indb 99 8/20/2019 3:22:40 PM

 Wordbank

Rowspan To span across two or more rows

Colspan To span across two or more columns
Padding The space between the content and the defined border

We have learned

• The ‘start’ attribute of the <ol> tag indicates the starting number for an ordered list.
• The ‘type’ attribute of <ul> list defines the type of bullet used for each list item.
• Definition lists are used for creating a glossary, which contains various terms and their
definitions.
• A table is used to arrange data in the form of rows and columns.
• The ‘border’ property is used with the <table>, <th>, and <td> tags to specify the border
around the cells or a table.
• The ‘padding’ property is used to specify the spacing between the border and content of the
cell.
• The <caption> tag is a container element, which is used to give a caption to the table.
• The ‘colspan’ attribute of the <th> or <td> tag is used to merge two or more columns in a
row.
• The ‘rowspan’ attribute of the <th> or <td> tag is used to merge two or more rows in a
column.

Solved Examples
   1. Which CSS property is used with the <table>    4. Name the tags used to create numbered and
tag to adjust the space between the cell content bulleted lists.
and its border? Ans. The <ol> tag is used to create a numbered list,
Ans. The ‘padding’ property is used to adjust the while the <ul> tag is used to create a bulleted
space between the cell content and its border. list.

   2. Name the attribute of the <ol> tag that is used    5. What is the use of a definition list?
to specify the starting number of a list. Ans. Definition lists are used for creating a glossary,
Ans. The ‘start’ attribute is used to specify the which contains various terms and
starting number of a list. their definitions.

   3. Which CSS property is used with the <ul> tag    6. What is a nested list?
to change the type of list? Ans. When one or more items of a list contain a
Ans. list-style–type:disc|square| sublist, the list is called a nested list.
circle

100

Computer Application Grade 10.indb 100 8/20/2019 3:22:40 PM

    7. Which tag is used to create a table on a web    9. Explain the <tr> element.
page? Ans. The <tr> element is used to define each row
Ans. The <table> tag is used to create a table. for a table and is a container element. The
<tr> tag is used inside the <table> tag.
   8. What is the use of the ‘text-align’ property?
Ans. This property is used to specify the horizontal   10. Which tag is used to define the headers in a
alignment of text. It can be used with tags like table?
<td> or <th>. Ans. The <th> tag is used to define headers in a
table.

Exercises
t
1. Match the columns.

(a) colspan (i) Definition list

(b) vertical-align (ii) Merges two rows
(c) ol (iii) Sets the vertical alignment of the text
(d) dl (iv) Merges two columns
(e) rowspan (v) Ordered list

t 2. Fill in the blanks.

(a) The ‘colspan’ attribute is associated with the (g) To specify the type of the list in a specific
_______ and _______ tags. order, the _______ tag is used.
(b) The three values of the ‘text-align’ property (h) The _______ tag is used to create a glossary
are _______, _______, and _______. of important terms.
(c) The _______ property determines the (i) A _______ list is formed when one or more
distance between the border and content of items of a list consist of a sublist.
the cell.
(j) The _______ attribute of an ordered list
(d) The _______ property is used to set the specifies the starting number of the list.
border of the table.
(k) The background colour of a table can be set
(e) The _______ tag is used to give a heading or through the _______ property.
description to a table.
(f) To merge two or more columns in a table,
the _______ attribute is used.

101

Computer Application Grade 10.indb 101 8/20/2019 3:22:40 PM

 t 3. State the following as true or false.
(a) The <dl> tag is used to create an ordered list. (d) The <caption> element is a container
element that gives a caption to the table.
(b) The ‘text-align’ property of the <td> tag
specifies the vertical alignment of the text in (e) This ‘colspan’ attribute is used to merge two
a table row. or more rows into a single row.
(c) The ‘color’ property when used with the
<li> tag changes the background color of
the list.

t 4. Answer the following questions. [Very short answer type]

(a) What tag would you use to create lists of the (c) Which property in CSS is used to specify the
following type? type of bullet in an unordered list?
(i) Ordered list (d) Name the element that is used to create a
(ii) Unordered list table in HTML.

(iii) Definition list (e) Which property is used to specify the vertical
alignment of data in a cell?
(b) Write the expansions of the following tags
used in HTML: (f) Name the element that defines the caption of
a table.
<ol>
(i)
<li>
(ii)

t 5. Answer the following questions. [Short answer type]

(a) Differentiate between the following: (c) Write the steps to create a definition list with
an example.
<td> and <th>
(i)
<ul> and <dl>
(ii) (d) How can you merge two rows in an HTML
table?
(iii) colspan and rowspan
(e) Is it possible to display column headings in a
(b) Give the functionality of the following:
table? Explain with an example.
<li> tag
(i)
(ii) start attribute of <ol> tag

t 6. Answer the following questions. [Long answer type]

(a) How can you increase the space between a (d) Write the HTML source code to generate the
cell border and its content? following outputs.
(b) Explain any two properties that can be (i) TABLE TITLE
associated with the <tr> tag along with an
Column A Column B
appropriate example.
Data 1 Data 2
(c) Explain ordered list with all its attributes. Data 3 Data 4
Data 5 Data 6
102

Computer Application Grade 10.indb 102 8/20/2019 3:22:41 PM

 (ii) (vi)
• Coffee
My OfficeStock • Tea
   o  Black tea
Year Current
   o  Green tea
ITEMS 2019 year Demand Extrs
    n China
Computers 988 1098 1100 26     n Africa
Stationery 10977 11773 18000 996 • Milk
Telephones 30 32 35 2
Tables 1455 1500 1550 187 (vii)
Chairs 1566 1700 2000 129 Money spent on.... January February
Clothes ` 7000 ` 1000
(iii) Make-Up ` 1230 ` 100
Food ` 1730 ` 510
Sum ` `
Rubber Baby She Sells
Buggy Bumpers sea Shells (e) Identify errors in the following HTML codes.
(i)
(iv)
<html>
<head>
<title>Tables</title>
table{caption-side:bottom;
width=150px; height=100px;
border:solid}
caption{padding:0.5cm}
</style>
School is a very important phase of one’s
life. Some of the most beautiful moments </head>
of our lives are spent here. We cherish these
<body>
moments throughout our lives. The school
life shapes our destiny. <caption>Table 1</caption>
Some of the things we learn in a school are as <tr>
follows:
<th>Data 1</th>
• Educating ourselves
<th>Data 2</th>
• Making friends
<tr>
• Living in a group
• Helping the needy <td>A1</td>

(v) <td>A2</td>
</tr>
Top
middle up <tr>
way left way right
middle down <td>B1</th>

103

Computer Application Grade 10.indb 103 8/20/2019 3:22:41 PM

 <td>B2</th> <li>Modem</li>
</table> </ol>
</body> <b>Web Languages
</html> <ul>
<li>HTML<li>
(ii)
<li>Javascript</li>
<html> <li>PHP</li>
<body> <li>Java<li>
<h4>a nested list:</h4> </ul>
<ul> </body>
<li>coffee</li>
<li>tea (iv)
<ul>
<li>black tea <html>

<li>green tea <head>

</li> <title>Online Social

Networking<title>
</li>
</head>
<li>milk
<h1><img href=“social_
</head> networking.jpg” width=“75”
</html> height=“100” alt=“social
networking”>Online social
(iii) networking is the way”
<html> <p>In order to stay in touch
with friends, family, and
<head>
other relatives, one way
<style type=“text/css”> to do it is through social
ol{list-type:upper-alpha} networking online. Among most
popular websites are the
ul{list-type:sqaure} following:<p>
<body> <ul>
<b>Hardware devices <li>Facebook</li>
<ol> <li>Twitter</li>
<li>CD-ROM drive</li> <li>Instagram</li>
<li>DVD drive</li> </body>
<li>Hard disk</li>

104

Computer Application Grade 10.indb 104 8/20/2019 3:22:41 PM

 t 7. Select the correct alternative(s).
(a) Which of the following tags are <table> (e) Which of the following will create a lower-
tags? case roman numeral list starting at (iii)?
<thead><body><tr>
(i) <ol start=3 type=i>
(i)
<table><head><tfoot>
(ii) <ol start=3 type=1>
(ii)
<table><tr><tt>
(iii) <ol start=1 type=i>
(iii)
<table><tr><td>
(iv) <ol start=3 type=I>
(iv)
(b) What is the correct HTML tag for creating a (f) Identify the tag used to create headings in a
cell in a table? table.
<dc>
(i) <td type=heading>
(i)
<tr>
(ii) <thead>
(ii)
<th>
(iii) <th>
(iii)
<td>
(iv) <head>
(iv)
(c) How can you make a list that displays the (g) The tag used to give caption to a table is
items with numbers?
<Table caption>
(i)
<ul>
(i) <tcaption>
(ii)
<list>
(ii) <caption>
(iii)
<dl>
(iii) (iv) None of these
<ol>
(iv) (h) The correct code to merge two columns in a
(d) Which tag is used to generate a list which is table is
not in any specific order?
<td span=2>.
(i)
<dl>
(i) <td columnspan=2>.
(ii)
<list>
(ii) <td colspan=2>.
(iii)
<ul>
(iii) <colspan=2>.
(iv)
<ol>
(iv)

105

Computer Application Grade 10.indb 105 8/20/2019 3:22:41 PM

 l Lab Exercise
c (a) Write the HTML code to generate a web page in the format given below.
GET TOGETHER
(find your batchmates and friends)
1.  Batch Mates
  o  School List
  o  College List
2. Friends
  n  Area or Location Wise
  n  Profession Wise
Create your e-mail id as mailto:[email protected]

Consider the following while writing the HTML code.

(i) The background colour of the page (vi) Save the linked pages as given below:
should be ‘yellow’. • School List as ‘school.html’
(ii) The title of the page is ‘GetTogether’. • College List as ‘college.html’
(iii) The font type should be ‘Arial’. • Area or Location Wise as ‘area.html’
(iv) The text colour of the main heading
• Profession Wise as ‘profession.html’
should be ‘black’.
• The last line of the message should
(v) The Link colour of the page should be
be center-aligned and with font
‘blue’ and visited link colour should be
size 2.
‘red’.

(b) Write the HTML code to generate the web page given here.

106

Computer Application Grade 10.indb 106 8/20/2019 3:22:41 PM

 Consider the following while writing the (v) Use the concept of the nested list to
HTML code. display the given list.
(i) The background colour of the page (vi) Save the linked pages as given below:
should be ‘yellow’ and active link colour • JPEG as ‘JPG.html’
should be ‘purple’.
• GIF as ‘Graphics.html’
(ii) The title of the page should be ‘Google’.
• AAJTAK as ‘Anews.html’
(iii) The font type should be ‘Arial’.
• NDTV as ‘Nnews.html’
(iv) Each letter of the main heading
• CNN as ‘Cnews.html’
‘GOOGLE’ should be in a different
colour, the font should be ‘Comic Sans • TUTORIALS as ‘Info.html’
MS’, and font size should be 40.

(c) Write the HTML code to generate the web page given below.

Consider the following while writing the HTML code.

(i) The background colour of the page (iv) The text ‘County Holidays’ should be
should be ‘pink’ and visited link colour in ‘red’.
should be ‘green’. (v) Save the linked pages as given below:
(ii) The font type should be ‘Arial’. • Agra Packages as ‘agra.html’
(iii) The text colour of the main heading • Rajasthan Packages as ‘raj.html’
should be ‘maroon’.

107

Computer Application Grade 10.indb 107 8/20/2019 3:22:42 PM

 (d) Create the following web pages with the specifications given below.

(i) The title of the web page should be • Burgers as ‘burgers.html’

‘Count Down Restaurant’. • Hot Dogs as ‘hotdog.html’
(ii) The background colour of the page • Chowmein as ‘chowmein.html’
should be ‘blue’,
(vi) The text ‘Vegetarian’ and ‘Non-
(iii) The font type should be ‘Comic vegetarian’ should be displayed in white
Sans Ms’. colour.
(iv) The body text colour of the main (vii) The link colour should be ‘green’,
heading should be ‘red’. visited link colour should be ‘yellow’,
and active link colour should be ‘black’.
(v) Save the linked pages as given below:
(viii) The message at the bottom should be of
• Pizzas as ‘pizza.html’ size 2.
(e) Write the command to generate the web page given below.

Consider the following while writing the HTML code.

(i) The title of the page should be (iii) The font type should be set to ‘Arial’.
‘Wildlife’. (iv) Save the linked pages as given below:
(ii) The background colour of the page • Wildlife in the park as ‘wild.html’
should be ‘silver’, link colour should be
‘maroon’, visited link colour should be • Birdlife in the park as ‘bird.html’
‘red’.

108

Computer Application Grade 10.indb 108 8/20/2019 3:22:42 PM

 (f ) Write the command to generate the web page given below.

Consider the following while writing the HTML code.

(i) The background colour of the page (vi) Save the linked pages as given below:
should be ‘yellow’ and visited link • Clothing and accessories as ‘cloth.
colour should be ‘green’. html’
(ii) The title of the page is ‘Stop n Shop’.
• Home appliances as ‘house.html’
(iii) The colour of the text of the main
• Electronic products as ‘electronics.
heading should be ‘maroon’.
html’
(iv) The font type should be ‘Arial’.
(v) Use the concept of the nested list to
display the given list.

• How can you add an image to the background of every cell in a table?
s
• How can you view more than one HTML document in one browser window?

109

Computer Application Grade 10.indb 109 8/20/2019 3:22:42 PM

 Forms
6
We will learn about
• Inserting audio and video in • Input element
HTML • Textarea element
• Forms in HTML • Drop-down lists
• Creating a Form • Scrolling lists

INSERTING AUDIO AND VIDEO IN HTML

In HTML, it is possible to insert an audio or a video file and display it on the web browser. The
audio and video clips can enhance the presentation of a web page. For example, a tutorial video on an
e-learning website helps to engage the learners more than static text.

Inserting an audio clip

The <audio> tag is used to insert an audio clip. The following attributes are associated with the
<audio> tag.
• src: The ‘src’ attribute is used to specify the URL of the audio file to be embedded.
• autoplay: The ‘autoplay’ attribute is used to play the audio automatically when a page is loaded.
• controls: The ‘controls’ attribute adds control buttons, such as play, pause, forward, rewind, and
volume, on an audio player.
• loop: The ‘loop’ attribute is used to replay the audio again and again when it is finished.
The following code depicts how to embed an audio file on a web page.
<html>
<head>
<title> Inserting audio </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; color:red}

110

Computer Application Grade 10.indb 110 8/20/2019 3:22:42 PM

 h1{color:navy; text-align:center; text-transform:uppercase; text-
decoration:underline; text-shadow:0.5px 0.5px white}
h4{color:navy}
</style>
<body>
<h1> Types of errors in programming</h1>
<h4>1. Syntax Errors</h4>
While writing a program, we follow certain rules in using words and
phrases. Syntax errors occur when these rules are not followed. These
errors are similar to grammatical or spelling mistakes in a language,
such as English. For example, the sentence<br>I going to play<br>is
syntactically incorrect as a verb is missing here.
<h4>2. Runtime Errors</h4>
Sometimes, even when there is no syntax error in a program, it might
not show any output. This is because of runtime errors. An error that
occurs during the execution of the program is called a runtime error.
<h4>3. Logical Errors</h4>
These errors occur when a program executes but does not produce the
intended result. The error is caused due to the wrong logic used in
the program. No explicit error is shown and thus you have to find the
problem yourself and correct it.
<h4> Click on the play button below to listen to the transcript
audio.</h4>
<audio src=“audiofile.mp3” controls=“controls”>
</body>
</html>

Fig. 6.1
111

Computer Application Grade 10.indb 111 8/20/2019 3:22:42 PM

 Inserting a video clip
The <video> tag is used to insert a video clip into a web page. The attributes associated with the
<video> tag are as follows:
• src: The ‘src’ attribute is used to specify the URL of the audio file to be embedded.
• autoplay: The ‘autoplay’ attribute is used to play the video automatically when a page is loaded.
• controls: The ‘controls’ attribute adds control buttons, such as play, pause, forward, rewind, and
volume, on a video player.
• height: The ‘height’ attribute specifies the height of the video player.
• width: The ‘width’ attribute specifies the width of the video player.
The code given below depicts how to embed a video file and a player on a web page.
<html>
<head>
<title> Inserting video </title>
</head>
<style type=“text/css”>
h2{color:navy; text-transform:uppercase; text-decoration:underline;
text-shadow:0.5px 0.5px white; margin:30px}
h4{color:navy}
</style>
<body>
<h2> Inserting a Video
Clip</h2><br>
<h4>Click on the play
button below to watch the
video.</h4>
<video src=“videofile.
mp4” controls=“controls”
height=“300” width=“400”>
</body>
</html> Fig. 6.2

FORMS IN HTML
There are times when we need to accept input from a user on a webpage. For such tasks, we use
HTML Forms. Take an example of accepting a user id and password while logging into an email

112

Computer Application Grade 10.indb 112 8/20/2019 3:22:42 PM

 account or filling up the details while doing an online transaction, we fill the fields with the required
information. These fields are created using HTML.

CREATING A FORM
A form begins with the <form> tag and ends with the </form> tag. All the other content is placed
between these two tags. The general syntax of the <form> tag is as follows:
<form name=“form name” method=“get|post” action=mailto:“email
address”></form>

Attributes of the <form> tag

Let us now discuss the attributes of the <form> tag.
The name attribute
The ‘name’ attribute is used to provide a name to the form. This is needed as there can be multiple
forms in a single HTML document.
The method attribute
The ‘method’ attribute has two possible values—GET or POST. It specifies how the form should be
sent to the server when it is submitted. When the ‘get’ method is used, the form data appears along
with the URL of the form, while with the ‘post’ method, the form data is sent to the server directly. It
is used when the form contains sensitive data like passwords.
The action attribute
The ‘action’ attribute is used to specify the address where the form has to be sent when it is submitted.
Thus, its value is ‘mailto:URL’. For example, if the form has to be sent to [email protected], then
the attribute will be ‘action=mailto:[email protected]’.

THE INPUT ELEMENT

The input field lets us specify different types of input fields, such as, text input field, password input
field, radio button, checkbox, submit button, or reset button. We will learn how to create these fields
one by one.

Text Field
To accept a single-line text entry, the <input> tag is used, where its ‘type’ attribute has a value of text.
The text includes user id, password, or name of the file to be uploaded. The syntax of the <input>
tag is as follows:
<input type=“text” name=“t1” value=“data” maxlength=“maximum length”
size=“size of the input box”>
The tag has the following attributes.
• type: This attribute of the input tag specifies what type of input is required to be accepted. In this
case, it is the single-line input field, which is used to take inputs like user id, name, and so on.
Hence type=“text”.

113

Computer Application Grade 10.indb 113 8/20/2019 3:22:42 PM

 • name: This attribute is used to give a name to the input field as there can be multiple input fields in
a form.
• value: This attribute specifies the default value that should appear inside the textbox when the form
is loaded on the web browser.
• maxlength: This attribute specifies the maximum number of letters or characters an input box
can contain. For example, we can restrict the number of digits to 3, when specifying the age. Thus,
maxlength=“3”.
• size: This attribute is used to specify the number or characters visible in a textbox. So if
size=“5”, then the number of characters seen will be 5. If you try to enter more characters, the
characters will scroll to the left side.
Let us now write an example to show input fields on the browser.
<html>
<body>
<form name=“form1” method=“post” action=“mailto:sarikakaushal
@gmail.com”><br>
Name: <input type=“text” size=“20” maxlength=“30” value=“Enter your
name!”><br>
Age:<input type=“text” size=“20” maxlength=“3” value=“Enter your
age!”>
</form>
</body>
</html>

Fig. 6.3
In the above example, the first textbox has the size of ‘20’, which means it can show a maximum of 20
letters. It has the default value as ‘Enter your name!’, which gets displayed when the form is loaded on
the browser. The attribute ‘maxlength’ has the value of 15, which means that it permits only 15 letters
to be entered. The same is the case with the second textbox.

114

Computer Application Grade 10.indb 114 8/20/2019 3:22:43 PM

 Password field
The password field is similar to the text field. The only difference is that when a user types some text
in the password field, the characters are shown as asterisks or dots. The password field is also a single-
line text field. It is specified using the <input> tag, and the ‘type’ attribute has the value of password.
The following line of code shows the syntax of specifying a password field.
<input type=“password” name=“t1” value=“data” maxlength=“maximum
length” size=“size of the input box”>
• type: This attribute specifies the type of input required to be accepted in a form. In this case, it is
the single line input field which is used to take password. Hence type=“password”.
• name: This attribute is used to give a name to the input field as there are multiple inputs in a form.
It can be any name.
• value: This attribute specifies the default value that should appear inside the textbox when the form
is loaded in the web browser. In the case of password field, the text cannot be read as it is in the
form of asterisks.
• maxlength: This attribute specifies the maximum number of letters or characters an input box can
contain.
• size: This attribute is used to specify the number or characters visible in a textbox. So, if
size=“5”, then the number of letters shown in the form of asterisks will be 5, and if you try to
enter more characters, the characters will scroll to the left side.
Look at the program given below. It displays a password field.
<html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br>Password:<input type=“password” size=“20”>
</form>
</body>
</html>

Fig. 6.4
115

Computer Application Grade 10.indb 115 8/20/2019 3:22:43 PM

 Radio Buttons
The radio button option lets us choose one option from a given set of options. The syntax of creating
radio buttons is as follows:
<input type=“radio” name=“r1” checked value=“value”>
Let us learn about the attributes of the <input> tag.
• name: This attribute is used to give a name to the radio button as there are multiple buttons in a
form. It can be any name. It is very important to note that the group of radio buttons must be given
the same name so that a single value can be selected.
• value: The value of this attribute for the selected radio button is sent to the server when a form is
submitted.
• checked: This attribute is specified for the radio button, which is required to be shown selected by
default, when the form gets loaded on the browser.
Look at the example given below:
<html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id : <input type=“text” size=“20” maxlength=“30” value=“--
Enter id here--”>
<br><br>Password : <input type=“password” size=“20”>
<br><br>Name : <input type=“text” size=“20” maxlength=“30” value=“--
Enter name here--”>
<br><br>Gender :<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female
<input type=“radio” name=“r” value=“other”>Other
</form>
</body>
</html>

Fig. 6.5

116

Computer Application Grade 10.indb 116 8/20/2019 3:22:43 PM

 Since the name of all the three radio buttons is the same, if you select the other option from the given
options, the previously checked option will be deselected.

Checkbox
When we need to choose one or more options from a predefined set of options, we use checkboxes.
The syntax of creating checkboxes is as follows:
<input type=“checkbox” name=“c1” checked value=“value”>
• name: This attribute is used to give a name to the checkbox as there are multiple checkboxes in a
form. It can be any name. Different names are given to different checkboxes.
• value: The value of this attribute for the selected checkbox is sent to the server when a form is
submitted.
• checked: This attribute is specified for the checkbox which is required to be shown selected by
default, when the form gets loaded on the browser.
Now observe the following example.
<html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br> <br>Name: <input type=“text” size=“20” maxlength=“30” value=“--
Enter name here--”><br>
<br><br>Gender:<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female
<input type=“radio” name=“r” value=“other”>Other <br>
<br>Sports I like:<br>
<input type=“checkbox” name=“c1” value=“cricket”>Cricket<br>
<input type=“checkbox” name=“c2” value=“football”>Football<br>
<input type=“checkbox” name=“c3” value=“tennis”>Tennis<br>
<input type=“checkbox” name=“c4” value=“badminton”>Badminton<br>
<input type=“checkbox” name=“c5” value=“chess”>Chess<br>
<input type=“checkbox” name=“c6” value=“basketball”>Basketball<br>
</form>
</body>
</html>

117

Computer Application Grade 10.indb 117 8/20/2019 3:22:43 PM

 Fig. 6.6

Submit button
This type of input field is used to send the form to the email address specified in the ‘action’ attribute
of the <form> tag. The <input> tag is used to create a submit button. The ‘type’ attribute has the
value ‘submit’.
<input type=“submit”>
The other attributes of the button are as follows:
Did You Know? In HTML, the <button> tag
• name: It is used to give a name to the button.
is used to create clickable
• value: It is the text that appears on the button. buttons. For example,
The following program illustrates how to use a <button> Click here
submit button. </button> will create
a button.
<html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br> <br>Name: <input type=“text” size=“20” maxlength=“30” value=“--
Enter name here--”><br>
<br><br>Gender:<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female
<input type=“radio” name=“r” value=“other”>Other <br>
<br>Sports I like:<br>
<input type=“checkbox” name=“c1” value=“cricket”>Cricket<br>

118

Computer Application Grade 10.indb 118 8/20/2019 3:22:43 PM

 <input type=“checkbox” name=“c2” value=“football”>Football<br>
<input type=“checkbox” name=“c3” value=“tennis”>Tennis<br>
<input type=“checkbox” name=“c4” value=“badminton”>Badminton<br>
<input type=“checkbox” name=“c5” value=“chess”>Chess<br>
<input type=“checkbox” name=“c6” value=“basketball”>Basketball<br>
<br><input type=“submit” value=“Submit”>
</form>
</body>
</html>

Fig. 6.7

Reset button
The reset button is used to clear the data in the fields of the form entered by a user. The reset button
can be created in a similar way as the submit button, using the <input> tag. The only difference is
that the ‘type’ attribute has the value reset.
The following program illustrates how to create a reset button.
<html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br> <br>Name: <input type=“text” size=“20” maxlength=“30” value=“--
Enter name here--”><br>
<br><br>Gender:<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female

119

Computer Application Grade 10.indb 119 8/20/2019 3:22:43 PM

 <input type=“radio” name=“r” value=“other”>Other <br>
<br>Sports I like:<br>
<input type=“checkbox” name=“c1” value=“cricket”>Cricket<br>
<input type=“checkbox” name=“c2” value=“football”>Football<br>
<input type=“checkbox” name=“c3” value=“tennis”>Tennis<br>
<input type=“checkbox” name=“c4” value=“badminton”>Badminton<br>
<input type=“checkbox” name=“c5” value=“chess”>Chess<br>
<input type=“checkbox” name=“c6” value=“basketball”>Basketball<br>
<br><input type=“submit” value=“Submit”>
<input type=“reset” value=“Reset”>
</form>
</body>
</html>

Fig. 6.8

TEXTAREA ELEMENT
To enter multiline text, the <textarea> input control element is used. It lets users enter more than
one line of text. The best example of multiline input field is the comment section in a form where
you can write in more than one line. The multiline input field can be created using the <textarea>
element. The syntax of the <textarea> element is as follows:
<textarea name=“name” rows=“number of lines” cols=“number of
characters in a line”></textarea>
The attributes of <textarea> are as follows:
• name: This attribute is used to give a name to a textarea field as there can be multiple textarea fields
in a single HTML form.

120

Computer Application Grade 10.indb 120 8/20/2019 3:22:43 PM

 • cols: This attribute is used to specify the number of characters visible in a single line. If more
characters are written, they get scrolled to the next line.
• rows: This attribute specifies the number of lines visible in the textarea field. If you try to write
more lines, the scrollbar appears.
The following example illustrates the use of the textarea element.
<html>
<body>
<form name=“form1” method=”post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br> <br>Name: <input type=“text” size=“20” maxlength=“30”
value=“Enter name here--”><br>
<br><br>Gender:<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female
<input type=“radio” name=“r” value=“other”>Other <br>
<br>Sports I like:<br>
<input type=“checkbox” name=“c1” value=“cricket”>Cricket<br>
<input type=“checkbox” name=“c2” value=“football”>Football<br>
<input type=“checkbox” name=“c3” value=“tennis”>Tennis<br>
<input type=“checkbox” name=“c4” value=“badminton”>Badminton<br>
<input type=“checkbox” name=“c5” value=“chess”>Chess<br>
<input type=“checkbox” name=“c6” value=“basketball”>Basketball<br>
</form>
Comments<br><textarea name=“t” rows=“10” cols=“30”>Write your comments
here.</textarea>
</form>
</body>
</html>

121

Computer Application Grade 10.indb 121 8/20/2019 3:22:43 PM

 Fig. 6.9

DROP-DOWN LISTS
Drop-down lists are useful when there are several options to choose from. It is also referred to as the
pull-down menu or list. On clicking the drop-down arrow, a menu appears with multiple option. You
can select the desired option from the menu.

Select element
To create a drop-down list, the <select> element is used. It is a container element. The syntax of
the <select> element is as follows:
<select name=“list name” size=“number of options visible”
multiple></select>
The following attributes are associated with the <select> element.
• name: This attribute is used to give a name to a drop-down list as there can be multiple lists in a
single HTML form.
• size: This attribute specifies the number of options visible in a drop-down list. By default, only one
option is visible at a time in a drop-down list.
• multiple: Only one option can be selected in a drop-down list, by default. But to choose multiple
options (by pressing the Ctrl key), the multiple option should be specified.

Option tag
To specify options in a drop-down list, the <option> tag is used. It is used inside the
<select> tag.
Let us observe the example given below, which creates a drop-down list.

122

Computer Application Grade 10.indb 122 8/20/2019 3:22:43 PM

 <html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br> <br>Name: <input type=“text” size=“20” maxlength=“30”
value=“--Enter name here--”><br>
<br><br>Gender:<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female
<input type=“radio” name=“r” value=“other”>Other <br>
<br><br>Select your favourite colour:<select name=“s1”>
<option>Violet</option>
<option>Indigo</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Orange</option>
<option>Red</option>
<option>White</option>
<option>Black</option>
<option>Pink</option>
</select>
<br><br><input type=“submit” value=“Submit”>
<input type=“reset” value=“Reset”>
</form>
</body>
</html>

123

Computer Application Grade 10.indb 123 8/20/2019 3:22:43 PM

 Fig. 6.10

SCROLLING LISTS
The scrolling lists are the lists that display two or more available options in a list at a time. Two
arrows—up and down—are displayed in the control. The user is required to click on these arrows to
view all the available options. If all the options are displayed, the scroll arrow buttons disappear.
The scrolling list can also be created using the <select> and <option> tags. The attributes that
are required to create a scrolling list are as follows:
• size: The ‘size’ attribute is used to specify the number of options that a scrolling list should show.
For example, if size=“3”, then only two options will be shown in a scrolling list.
• selected: This attribute is used to specify or show the default option. The default option will be
displayed when the web page is loaded.
The program given below will display a scrolling list when run on a web browser.
<html>
<body>
<form name=“form1” method=“post” action=“mailto:[email protected]”>
<br>User id:<input type=“text” size=“20” maxlength=“30” value=“--Enter
id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br><br>Name: <input type=“text” size=“20” maxlength=“30” value=“--
Enter name here--”><br>
<br><br>Gender:<input type=“radio” name=“r” value=“male”>Male
<input type=“radio” name=“r” value=“female” checked>Female
<input type=“radio” name=“r” value=“other”>Other <br>

124

Computer Application Grade 10.indb 124 8/20/2019 3:22:43 PM

 <br><br>Select your favourite colour:<select name=“s1” size= “4”>
<option>Violet</option>
<option>Indigo</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Orange</option>
<option>Red</option>
<option>White</option>
<option>Black</option>
<option>Pink</option>
</select>
<br><br><input type=“submit” value=“Submit”>
<input type=“reset” value=“Reset”>
</form>
</body>
</html>

Fig. 6.11

125

Computer Application Grade 10.indb 125 8/20/2019 3:22:43 PM

 Wordbank

Input element The tag used to specify different types of input fields
Textarea element The tag used to enter multiple lines of text
Drop-down list A list with several options
Scrolling list A list that displays two or more available options in a list at a time

We have learned

• The <audio> and <video> tags are used to insert audio and video respectively on a web
page.
• A form is created to take input from a user.
• The <form> tag is used to create a form.
• The <input> tag is used to create input fields, such as text, password, radio button,
checkbox, or submit and reset buttons.
• To create a drop-down list, the <select> tag is used.
• The <option> tag is used to define the items in a drop-down list. It is nested inside the
<select> tag.
• A scrolling list can be created using the <select> and <option> tags.

Solved Examples
   1. Differentiate between a radio button and a    3. What are the values of the ‘method’ attribute of
checkbox element in a form. the <form> tag?
Ans: A radio button in a form allows the user to Ans: The ‘get’ and ‘post’ are the two values of the
choose one out of the given choices. A selection method attribute of the <form> tag.
can be deselected by selecting the other radio
button in the group.    4. Name any two attributes of the <audio> tag?

A checkbox places a toggle on the form. Ans: The ‘src’ and ‘autoplay’ are the two attributes of
The user is allowed to select more than the <audio> tag.
one checkbox at a time. A checkbox can be
   5. Which tag is used to insert a video clip in
deselected by clicking on it once again.
an HTML based web page? Write any two
   2. Differentiate between the ‘maxlength’ and ‘size’ attributes of the tag.
attributes of <input type=“text”> field. Ans: The <video> tag is used to insert a video in
Ans: The ‘maxlength’ attribute specifies the an HTML-based web page. Its attributes are
maximum number of characters a textbox ‘autoplay’ and ‘src’.
can accept. The ‘size’ attribute specifies the
length of the input field in terms of number of
characters.

126

Computer Application Grade 10.indb 126 8/20/2019 3:22:44 PM



Exercises

t 1. Match the columns.

(a) Attributes of the <textarea> tag (i) Autoplay

(b) Attribute of the <audio> tag (ii) Cols and rows
(c) The name attribute of this type of (iii) Multiple
<input> is given the same value for a group
(d) The attribute of the <form> tag (iv) Radio
(e) Allows to choose more than one option (v) Enctype
in a drop-down list

t 2. Fill in the blanks.

(a) The _______ tag is used to insert an audio (d) The ‘method’ attribute has two values
file on a web page. _______ and _______.
(b) The _______ attribute of the <video> tag is (e) The _______ tag is used to enter multiple
used to describe the path of the video file. lines of text in a form.
(c) The _______ input control is most (f) The _______ attribute is used to show the
appropriate for questions requiring a simple visible width of a text area based on character
yes or no answer. width.

t 3. State the following as true or false.

(a) The value ‘post’ of the ‘method’ attribute (d) The <embedaudio> tag inserts an audio
sends information to the server. clip on a web page.
(b) To create a password element, the <input> (e) The <input> tag is used to create a drop-
tag has the value ‘password’. down list in a form.
(c) The checkbox element is used to select only (f) The <select> tag can be used to create a
one option at a time. scrolling list.

t 4. Answer the following questions. [Very short answer type]

(a) Name the tag used to take a password as an (d) What is the function of the ‘autoplay’
input from the user in a form. attribute of the <audio> tag?
(b) Name any one attribute of the <form> tag. (e) Name any two attributes of the <select>
tag.
(c) Explain the use of the <video> tag.
127

Computer Application Grade 10.indb 127 8/20/2019 3:22:44 PM

 t 5. Answer the following questions. [Short answer type]
(a) Define the following tags or attributes. (c) Explain <input type=“submit”> and
<select>
(i) <input type=“reset”>.
<input type=“submit”>
(ii) (d) How is a radio button different from a
<input type=“radio”>
(iii) checkbox?

(b) Differentiate between the following: (e) Which attribute of the <form> tag is
responsible for sending the form to the
<input type=“text”> and
(i)
destination email address?
<input type=“password”>
<input type=“text”> and
(ii)
<textarea>

t 6. Answer the following questions. [Long answer type]

(a) Explain the following tags. <input type= “radio”

name=“n2”>Number<br>
<select>
(i)
What do you use it for?<br>
<textarea>
(ii)
(b) Name and explain any two attributes of the <input type=“checkbox” checked>
following tags. Email<br>

<video>
(i) <input type=“checkbox”
checked>Research<br>
<form>
(ii)
<input type=“checkbox”
<input type=“submit”>
(iii)
checked>Games<br>
(c) How is <input type=“password”> tag
<textarea cols=10
different from <input type=“text”>?
rows=10>General information
Explain with the help of an example.
</textarea>
(d) Why do we need to give the same name to
</form>
the group of radio buttons?
</body>
(e) Give the output for the following HTML
code. </html>
<html> (f) Find the errors and correct the HTML codes
given below.
<body>
<html>
(i)
<form name=“n1”>
<head>
Enter your name
<title> Inserting video
<input type=“text” maxlength=10 </title>
size=6><br>
<style type=“text/css”>
Do you use computers?
h4{color:navy}
<input type=“radio” checked <h4>Click on the play
name=“n2”>Yes button to watch the

128

Computer Application Grade 10.indb 128 8/20/2019 3:22:44 PM

 video.</h4> name=r1>Male
<video=“video.mp4” <input type=radio
controls=“controls” name=r1>Female
height=“300” width=“400”> <input type=submit
</html> value=“Send”>
(ii) <html> <input type=reset
<head> <title> My details value=“Reset”>
</title></head> </form>
<body> </body>
<form> </html>
Name <input=text>
address <input type=text
<p> Gender <input=radio

t 7. Select the correct alternative(s).

(a) Which one is not the attribute of the (iii) multiple=“send”

<form> tag? (iv) multiple=“yes”
(i) enctype (d) Which of the following values is not
(ii) name associated with the <input> tag?
(iii) type (i) password
(iv) method (ii) text
(b) What value can be provided to the ‘method’ (iii) submit
attribute of the <form> tag? (iv) send
(i) Get (e) Which attribute of the <textarea> tag
(ii) Set specifies the number of visible lines?
(iii) Post (i) cols
(iv) both (i) and (iii) (ii) rows
(c) Which attribute is used to allow selection of (iii) lines
multiple options in a drop-down list? (iv) vline
(i) more
(ii) multiple

129

Computer Application Grade 10.indb 129 8/20/2019 3:22:44 PM

 l Lab Exercise
c (a) Create a web page for your school’s website. Embed the video of the annual function on the web page.
(b) Write the HTML code to generate the following output.

(c) Write the HTML code to create an email registration form as shown below.

• Find out the type of audio and video file formats supported by HTML 5.
s
• There are various input types for form validation in HTML 5. Find out and prepare a
Word doc for the same. Also, write an HTML program to show the usage of the tags.
[Hint: input type=“email”>

130

Computer Application Grade 10.indb 130 8/20/2019 3:22:45 PM

 7 Cyberethics

We will learn about

• Netiquette • Freedom of information
• Intellectual property rights • Digital divide
• Plagiarism • Software licenses
• Digital property rights • E-commerce

The information technology (IT) has undergone through major advancements in recent past years.
The world has witnessed a digital revolution driven by these advancements. Today we communicate,
conduct business, learn, conduct research, and do lots of other things through the IT tools. The
internet, which is the driving force behind the IT revolution, has made our lives easy. As the internet
has become an important part of our lives, there are certain risks as well associated with its use.
Moreover, with the advancement in the technology, the level of threats and risks has also increased,
which pose a challenge for us. Thus, it has become the responsibility of every user to not only be
aware of the rules to work on the online platform but also to follow them. Cyberethics is a set of rules
or a code of behaviour a user must follow to make cyberspace a safe place.

NETIQUETTE
One must follow an appropriate code of conduct while writing emails, in chat rooms, and using the
social networking sites. A set of rules or behaviour among the internet users is called netiquette. These
rules describe how one should behave while using the online platform. Some of the general netiquette
one must follow are discussed further.
• Show respect to other users: It is very similar to how we expect others to treat us in real life. We
should be careful with the words we use while addressing people on the online platform and show
proper mannerism.
• Use appropriate language: We usually use informal language while interacting with our friends
and the similar habit continues when we interact within a close group or on social networking
websites. We must remember that we are judged on the online platform by what we write and post.
So, we must be very careful with the language we use online, especially on platforms like discussion
groups.

131

Computer Application Grade 10.indb 131 8/20/2019 3:22:45 PM

 • Make a good impression: Writing limited and meaningful and avoiding the use of emoticons are
some of the actions one must follow when connected online.
• Be careful with capital letters: Writing in capital letters is considered rude and appears as if you
are shouting. So, one should be careful while writing emails, posts, and comments.
• Be brief wherever possible: We should avoid sending unnecessary long emails and messages,
which are not significant. It is always advisable to be brief and to the point.
• Be careful while sending the attachments: As a responsible online user, we should never send
the attachments that we haven’t read or contain the useless information.
• Do not forward the content blindly: Before forwarding any email or material on the online
platform, make sure that you have read it and it does not hamper the safety of anyone. It should
also not hurt the sentiments of others. This means that one should not share or forward someone’s
personal data. Also make sure that the data to be forwarded is not the content of any published
material.

INTELLECTUAL PROPERTY RIGHTS

Intellectual property rights (IPR) are the rights assigned to the creators of intellectual properties,
which include inventions, artistic and literary works, symbols, logos, images, names of the companies
or organizations, and designs. It is up to the creator of the intellectual property, which may be an
individual or organization, to decide whether or not their ideas can further be used by others.
There are four forms of intellectual property rights.
• Copyright: It protects the creative work, such as literature, plays, books, images, films, music,
paintings, photographs, architectural designs, and computer software programs.
• Patents: It is a right granted for inventions and products, which gives protection from selling or
importing the original work. A patent owner has the right to give permission to other parties or sell
the invention for a certain period.
• Trademark: As the name suggests, it is a logo or symbol that distinguishes the goods or services
provided by a company from other similar companies.
• Industrial design right: It protects the visual design of a product, but it does not include the
functionality and features of the product.

PLAGIARISM
Plagiarism is an act of copying, stealing, or selling someone else’s original work or idea as one’s own.
It is the infringement of copyright. One of the most common examples of plagiarism is the easy
availability of the pirated CDs of films. The other areas where plagiarism is commonly seen is copying
someone’s original ideas from their text material, images, or website without a prior approval.
Some of the common types of plagiarism are discussed further.
• Paraphrasing plagiarism: This type of plagiarism happens when a person takes an author’s work,
makes a few changes in it, and uses it without citing the author or providing the corresponding
reference.

132

Computer Application Grade 10.indb 132 8/20/2019 3:22:45 PM

 • Accidental plagiarism: This type of plagiarism occurs when a person takes reference from a
website or from someone’s original material but forgets to mention the source in the form of the
website link or author’s name.
• Mosaic plagiarism: In this type of plagiarism, the person by replacing a few words republishes or
forwards the content as his or her own material.
• Direct plagiarism: It is also known as copy and paste plagiarism as in this case the person copies
the original idea or material from a source and republishes it as his or her own without making any
changes.
• Self-plagiarism: As the name suggests, here the authors copy their own published work and reuses
it. It can be intentional or unintentional.
Plagiarism shows dishonesty and is considered as stealing. Therefore, we should always remember
that whenever we take some reference from any source, the citation to the source must be given.

DIGITAL PROPERTY RIGHTS

The digital property includes data or files, such as emails, documents, graphics, online accounts,
websites, and software programs, that are of a great value to an individual or a company. The data
or files may be stored locally on one’s system’s hard disk drive, removable storage devices, or cloud
storage. In other words, the digital property is one’s digital asset.
Digital property rights are the rights that refer to gaining the control of and access to the digital
information. These rights ensure that the privacy of the data is maintained, and nothing is shared or
modified without the owner’s authorization.

FREEDOM OF INFORMATION
Freedom of Information (FOI), or the right to information, can be defined as the right to access
information held by public bodies. It is an integral part of the fundamental right of freedom of
expression, as recognised by Resolution 59 of the UN General Assembly adopted in 1946, as well as
by Article 19 of the Universal Declaration of Human Rights (1948).
This specifies that everyone who has access to information and communication technology (ICT) can
take the information available online. But sometimes this freedom of information is hindered by the
digital divide.

DIGITAL DIVIDE
The term ‘digital divide’ is used to refer to the gap between those who have access to information
and communication technology (ICT) and those who have limited or no access. The divide is quite
evident in developing countries like India. For example, people in urban areas have greater access
to ICT. On the other hand, people from economically or socially backward sections either do not
have access or do not have the resources. In rural areas, lower literacy rates and lack of skills to use
computers or technologies are also responsible for many people not being able to access ICT. The lack
of infrastructure in some areas, such as remote and hilly areas, can be a reason for people not being
able to access ICT.

133

Computer Application Grade 10.indb 133 8/20/2019 3:22:45 PM

 SOFTWARE LICENSES
A software license is a legal document or agreement that has the guidelines for the use and copyrights
of software. It usually contains information on whether or not the software can be installed multiple
times or redistributed to others.
There are two types of software licenses—proprietary
software and free and open-source software (FOSS).
Some proprietary software can
only function properly, if at all,

Did You Know?

Proprietary software
when used with other products
The proprietary software is software that is the exclusive owned by the same company.
property of an individual or a company that has developed An example of such a proprietary
it. The individual or company retains the rights of the product is Adobe Acrobat, whose
software. Microsoft Office and Adobe Photoshop are Portable Document Format (PDF)
examples of proprietary software. files can only be read with the
Acrobat Reader.
Free and open-source software
An open-source software program enables users to modify its source code and improve the
functionality. It also allows users to check and rectify the errors in the code, if any. Such software
programs are generally freely available to download. Some examples of open-source software are
Linux, GIMP (GNU Image Manipulation Program), Blender, and Mozilla Firefox.
Open-source software movement
In 1983, Richard Stallman of Massachusetts Institute of Technology (MIT) started a project to create
a Unix-like operating system that would be free and open source. It was named the GNU project,
where GNU meant GNU’s not Unix. This meant that GNU would be similar to Unix but not
actually Unix. Richard got help from various programmers around the world who freely contributed
to the project. Later, he founded the Free Software Foundation (FSF) and also defined the GNUs
General Public License (GPL).
In 1991, Linus Torvalds decided to build a new OS kernel called Linux and provide it as a source code
for others to modify and create new versions. Stallman and some members in the FSF group refer to
Linux as GNU Linux as much of Linux is built on top of the GNU project.
Open source initiative
The Open Source Initiative (OSI) is a non-profit corporation, which is formed to educate people
about the benefits of open-source software applications. This corporation also aims at bridging
gaps among different communities in the open-source community.

E-COMMERCE
E-commerce, also known as electronic commerce, is the process of buying or selling of goods and
services on the internet. In a simple language, e-commerce is the online business between two
parties where—
• the transaction is done under mutually acceptable conditions and
• the transaction depends on each other’s trust.
The e-commerce activities have increased rapidly over a last few years. Today, almost everyone with an

134

Computer Application Grade 10.indb 134 8/20/2019 3:22:45 PM

 internet connection must have used the Web to book tickets, purchase a product, or even sell an item.
But at the same time, e-commerce has been facing challenges from the hackers who steal money or
sensitive information of the business or a company. As a lot of people use their credit or debit cards for
doing online purchases, the information regarding the details of the stored cards can be accessed by
the hackers easily.

Internet privacy
Privacy or internet privacy refers to protecting sensitive data on the internet. Without the internet
privacy, someone can gain access to our personal data and may potentially cause problems. Internet
privacy is important as it keeps hackers away from accessing into and spying on our online accounts.
Almost all websites have a privacy policy, which helps users understand what information the websites
collect, why they collect it, and how the users can update or delete that information. Website owners
also collect information about the user’s web surfing habits using the cookies. It is advisable to delete
cookies as attackers could steal them to gain access to the online accounts.

Fraud
Online frauds have increased tremendously with increasing e-commerce transactions. Following are
some of the ways to secure data.
Spyware
Spyware is an offline software application that gets user’s personal information and crucial data
without the user’s knowledge. When the system is online, the data is sent to the spyware server.
Spyware may also harm computer’s performance by installing malicious software.
Phishing
Phishing is an act where a hacker steals user data, security PINs, account number, credit or debit card
details, and passwords. The hackers pretend themselves to be a trustworthy person. They can then
make online transactions or purchases using the credit or debit card of the victim.
Email web bugs
Email web bugs are small objects or images that are embedded in an email or a web page. They find
their way to a computer system when we click on the emails or the web pages. These bugs monitor
user’s activity when they are online. The bugs gather information and user’s IP address to target them
to steal their personal information.

Security of information
Security of information is a practice of preventing unlawful access, use, modification, and loss of
the sensitive information. People known as hackers may aim at stealing user’s private data. Some
malicious software, such as virus, trojan horse, and worm, may also get into the computer system to
corrupt data.
Hacking means unauthorized access to a computer system. A hacker, responsible for carrying out such
an act, is a person with an advanced knowledge of operating systems and programming languages.
Hackers can be of different types. Some hackers, known as white hat hackers, do not have intentions
to damage any data but have complete access to a computer. On the other hand, some hackers, known
as black hat hackers, have intentions to gain unauthorized access and destroy vital data or violate a
system’s integrity using remote machines.

135

Computer Application Grade 10.indb 135 8/20/2019 3:22:45 PM

 The following measures can be used to tackle the growing risk to security of information.
Password
We must create passwords to secure our data and prevent unauthorized access. The password we
create must be strong enough not to be easily cracked. It must be created with at least eight characters
and should have a combination of upper-case and lower-case letters, numbers, and symbols.
Firewall
A firewall is a network security system used to prevent unauthorized access to a private network
connected to the internet. It can be a software program, a hardware, or a combination of both. It
examines all incoming information and blocks the information that does not meet the specified
security criteria.
Antivirus
An antivirus is a software program that protects a computer from computer viruses. The first antivirus
program was designed specially to combat computer viruses. Most modern antivirus software,
however, can protect a computer against a wide range of malware.
An antivirus program uses several methods to identify a virus. Signature-based detection is a common
method. In this method, when the antivirus program scans a file for viruses, it checks the contents
of the file against a dictionary of known viruses. If a virus signature is found in the file, the antivirus
program removes the virus from the system. Symantec, McAfee, Kaspersky, Avira, AVG, and F-secure
are some of the well-known antivirus solutions.

Secure data transmission

Secure data transmission refers to transfer of data or information over a secure network. Some of the
vital requirements taken by e-commerce companies for safe data transactions are as follows:
Confidentiality: The information or data should be protected from an unauthorized person.
Integrity: The data should not be tampered during its transmission from one source to another over
a network.
Encryption: The data should be encrypted at the sender’s side and decrypted at the recipient’s side
by the intended user.
Authenticity: There should be a proper way to authenticate the sender and receiver of the data.

Security measures
Following security measures should be taken to ensure secured online transactions.
Encryption
Encryption is the method in which data is converted to an encoded form to protect it from an
unauthorized person. Data is encoded using some algorithms. The encoded data is referred to as
ciphertext. Data can be decoded only when a user has the decryption key. Decryption is the process of
converting the encoded data back to the plain text.
Two different keys called key pair are used in encryption and decryption. One of the keys is used to
encrypt the data and the other one is used to decrypt the data. The two keys in the pair are as follows:

136

Computer Application Grade 10.indb 136 8/20/2019 3:22:45 PM

 Private key: The private key must be kept private and is known only to the owner.
Public key: The public key can be shared with anyone who requests it.
Digital certificate
A digital certificate is a type of electronic password that allows entities (that may be a person or
an organization) to exchange data over the internet. It is issued by a certificate authority (CA) to
authenticate the identity of the certificate holder. A digital certificate contains the applicant’s public
key and the following information:
1. Name of the applicant or the certificate holder
2. Serial number that uniquely identifies the digital certificate
3. Expiration date
4. Digital signature of the certificate issuing authority

Wordbank

Cyberethics A set of rules or code of behaviour a user must follow to make cyberspace
a safe place
Netiquette A set of rules or behaviour among the internet users
Intellectual Legal rights assigned to the creators of intellectual properties, which
property rights include inventions, artistic and literary works, logos, images, names of the
companies or organizations, and designs
Copyright Rights that protect the creative work, such as literature, plays, books,
images, films, music, paintings, photographs, architectural designs, and
computer software programs
Patents A right granted for the inventions and products, which gives protection
from selling or importing the original work
Trademark A logo or symbol that distinguishes the goods or services provided by a
company from other similar companies
Industrial design Rights that protect the visual design of a product
rights
Plagiarism An act of copying, stealing, or selling someone else’s original work or idea
Digital property Rights that refer to gaining the control of and access to the digital
rights information
Digital divide The gap between those who have access to information and
communication technology (ICT) and those who have limited or no
access
Software license A legal document or agreement that has the guidelines for the use and
copyrights of software

137

Computer Application Grade 10.indb 137 8/20/2019 3:22:45 PM

 Proprietary A software program that is the exclusive property of an individual or a
software company that has developed it
Free and open- A software program that enables users to modify its source code and
source software improve the functionality
E-commerce A process of buying or selling of goods and services on the internet
Spyware An offline software application that gets user’s personal information and
crucial data without the user’s knowledge
Phishing An act where a hacker steals user data, security PINs, account number,
credit or debit card details, and passwords
Firewall A network security system used to prevent unauthorized access to a
private network connected to the internet
Antivirus A software program that protects a computer from computer viruses
Encryption A method of converting data into an encoded form to protect it from an
unauthorized person
Digital certificate A type of electronic password that allows entities to exchange data over
the internet

We have learned

• One should follow netiquette while using an online platform.

• There are different types of intellectual property rights. These are copyrights, patents,
trademarks, and industrial design rights.
• The act of plagiarism is considered as stealing of someone else’s work.
• Digital property rights ensure that privacy of data is maintained.
• Freedom of Information (FOI), or the right to information, can be defined as the right to
access information held by public bodies. It is an integral part of the fundamental right of
freedom of expression, as recognised by Resolution 59 of the UN General Assembly adopted
in 1946.
• The open software movement was started by Richard Stallman in 1983.
• The Open Source Initiative (OSI) is a non-profit corporation, which is formed to educate
people about the benefits of open-source software applications.
• E-commerce is the online business between two parties.
• All websites have a privacy policy to help users understand what information the website
collects and why do they collect it.
• Online frauds have increased due to spyware, phishing, and email web bugs.

138

Computer Application Grade 10.indb 138 8/20/2019 3:22:45 PM

 • Security of information is a practice of preventing unlawful access, use, modification, and loss
of the sensitive information.
• Various security measures should be taken to ensure secured online transactions.

Solved Examples
1. What do you understand by the term • Mosaic plagiarism: In this type of
‘netiquette’? plagiarism, the person by replacing a few
Ans. A set of rules or behaviour among the internet words republishes or forwards the content as
users is called netiquette. These rules describe his or her own material.
how one should behave while using an online
• Direct plagiarism: It is also known as copy
platform.
and paste plagiarism as in this case the person
2. What is an open-source software application? copies the original idea or material from the
Ans. An open-source software application contains source and republishes as his or her own
the source code of the program with the without making any changes.
license, which enables users to not only install • Self-plagiarism: As the name suggests,
and read it but also to edit and redistribute it here the authors copy their own published
with changes. work and reuses it. It can be intentional or
unintentional.
3. Give an example of an open-source operating
system. 5. Can your carelessness lead to a fraud in
Ans. Linux e-commerce? If yes, how?
Ans. Yes, carelessness can definitely lead to a fraud
4. Explain the types of plagiarism. in e-commerce. For example, while doing
Ans. Some of the common types of plagiarism are as an online purchase, if you share your credit
follows: or debit card details or store them on the
• Paraphrasing plagiarism: This type of computer, then the hackers can easily access
plagiarism happens when a person takes an them using malware leading to a fraud.
author’s work, makes a few changes in it, and
uses it without citing the author or providing 6. Explain the terms ‘encryption’ and ‘decryption’.
the corresponding reference. Ans. Encryption is the method in which data is
converted to an encoded form to protect it
• Accidental plagiarism: This type of from an unauthorized person. Data is encoded
plagiarism occurs when a person takes using some algorithms. The encoded data is
reference from a website or from someone’s referred to as ciphertext. Decryption is the
original material but forgets to mention the process of converting the encoded data back to
source in the form of the website link or the plain text.
author’s name.

139

Computer Application Grade 10.indb 139 8/20/2019 3:22:45 PM

 Exercises
t 1. Match the columns.

(a) Patent (i) Online business between two parties

(b) Antivirus (ii) A software program that protects a computer from computer viruses

(c) E-commerce (iii) A term commonly used under intellectual property right

(d) Mosaic (iv) An advantage of the open-source software

(e) Transparency (v) A type of plagiarism

t 2. Fill in the blanks.

(a) Every authorized software is provided with a (d) The ____________ hackers do not have
____________, which is a legal document or intentions to damage any data.
agreement. (e) ____________ refers to protecting sensitive
(b) In ____________ plagiarism, the author data on the internet.
copies his or her own published work either (f) The encoded data is referred to as
intentionally or unintentionally. ____________.
(c) A ____________ is a logo or symbol that (g) A digital certificate is issued by a
distinguishes the goods or services provided ____________.
by a company from other similar companies.

t 3. State the following as true or false.

(a) The right to privacy is not maintained in (e) Microsoft Office and Adobe Photoshop are
digital property rights. examples of proprietary software.
(b) Every comment you type and every mail you (f) Data can be decoded only when a user has
send is stored on the server, which can be the decryption key.
tracked and recovered whenever needed.
(g) A private key can be shared with anyone who
(c) Richard Stallman founded the Free Software requests it.
Foundation.
(h) A digital certificate has the digital signature
(d) Plagiarism shows dishonesty and is of the certificate issuing authority.
considered as stealing.

140

Computer Application Grade 10.indb 140 8/20/2019 3:22:46 PM

 t 4. Answer the following questions. [Very short answer type]
(a) Give one advantage of using an open-source (d) Define the term ‘e-commerce’.
software program. (e) What is a private key?
(b) Define the term ‘intellectual property rights’. (f) What is hacking?
(c) Name any two types of plagiarism.

t 5. Answer the following questions. [Short answer type]

(a) What is the advantage of purchasing a (d) What is a proprietary software program?
licensed software application? (e) What is a patent?
(b) Differentiate between accidental and direct (f) What is phishing?
plagiarism.
(g) What are email web bugs?
(c) Why are frauds common in e-commerce?
(h) What is a firewall?

t 6. Answer the following questions. [Long answer type]

(a) What measures can be taken by companies to (d) How is paraphrasing different from
secure their business online? accidental plagiarism?
(b) How is a copyright different from a (e) List some etiquette to be followed while
trademark? working on an online platform.
(c) Explain the four forms of intellectual (f) Explain the term ‘digital divide’.
property rights. (g) Write a short note on digital certificate.

t 7. Select the correct alternative(s).

(a) Which of the following types of plagiarism is (c) Which of the following options shows the
also known as a copy and paste plagiarism. general rules of netiquette?
(i) Accidental (i) Using appropriate language
(ii) Direct (ii) Being respectful
(iii) Self (iii) Avoiding to use capital letters
(iv) Mosaic (iv) All of these

(b) Who defined the GNUs General Public (d) Which of the following non-profit
License? corporations is formed to educate people
(i) Richard Stallman about the benefits of open-source software
programs?
(ii) Tim Berners-Lee
(i) GPL
(iii) Linus Torvalds
(ii) FSF
(iv) Charles Babbage
(iii) OSI
(iv) IPR

141

Computer Application Grade 10.indb 141 8/20/2019 3:22:46 PM

 (e) Which of the following statements is not (f ) Which of the following is an electronic
true? password that allows entities to exchange
(i) Data is encoded using some algorithms. data over the internet?

(ii) The encoded data is referred to as (i) Digital divide

digital signature. (ii) Digital certificate
(iii) Two different keys called ‘key pair’ are (iii) Digital signature
used in encryption and decryption. (iv) Digital authority
(iv) The private key must be kept private
and is known only to the owner.

l Lab Exercise
c Collect information on ‘How a digital certificate works’, and create a Word document.

• What is the importance of protecting or managing online identity?

• What is the need for a digital certificate?
s

142

Computer Application Grade 10.indb 142 8/20/2019 3:22:46 PM

 8 Python

We will learn about

• Basics of Python—a recap • Loops
• Conditional statements • Some practice questions

We have already studied Python. As we know, Python is a general-purpose, high-level programming

language. It was created by Guido van Rossum during 1985–1990. The syntax of the language is quite
simple. This makes it convenient for those who are learning the programming language for the very
first time.
Python is an interpreted language. This means that every time a Python program is executed, there
is no other intermediate file created, and each statement in the program is checked line by line. The
main advantage of Python is that its code can be written and used under different platforms.

BASICS OF PYTHON—A RECAP

Variables in Python
Variables are the named memory locations that are used to store data of different types, such as a number
or character. These locations are called variables because the values are allowed to change or vary.
In Python, there is no need to explicitly declare a variable. The declaration happens automatically
when we assign a value to a variable. The equal sign (=) is used to assign a value to a variable.
Observe the code in the image given below.

Fig. 8.1
143

Computer Application Grade 10.indb 143 8/20/2019 3:22:46 PM

 In this example, variable A is assigned a value 10 and variable B is assigned a value 20. The interpreter
performs the calculations based on the specified operator.

Multiple assignments in Python

Python also allows us to assign a single value to several variables simultaneously. Observe the
following statement.
a = b = c = 1
Here variables a, b, and c are assigned the same value.
It is also possible to assign several values to several variables in a single statement. The following
statement assigns three different values to three different variables.
a, b, c = 20, 30, “Python”

Data types
Data types are used to classify different types of data. A data type defines the type of operations that
can be performed on the data. The different data types in Python are listed below.
• int: Used for storing non-decimal integer values
• long: Used for storing long integers; can also be represented in octal and hexadecimal
• float: Used for storing floating-point real values
• string: Used for storing a set of characters represented in quotation marks
• list: Used for storing items separated by commas and enclosed within square brackets ([])
• tuple: Used for storing a number of values separated by commas
Note that unlike lists tuples are enclosed within parentheses. The main difference between lists and
tuples is that the elements and size can be changed in a list while a tuple cannot be updated.

Operators in Python
Python supports many operators for calculations or comparisons. The table given below describes
each type of operator.

Types of operators Operators

Arithmetic +, −, *, /, %, **, //
Relational <, >, <=, >=, ==, !=
Assignment =
Logical and, or, not
Compound +=, -=, *=, /=, %=, //=

144

Computer Application Grade 10.indb 144 8/20/2019 3:22:46 PM

 Operators precedence
The table given below lists all the operators from highest to lowest precedence.

Operators Descriptions
** Exponent (raise to the power)
+, − Unary plus and unary minus
*, /, //, % Multiply, divide, floor division, and modulus
+, − Addition and subtraction
<=, <, >, >= Comparison operators
==, != Equality operators
=, +=, -=, *=, %=, /=, //= Assignment operators
and, or, not Logical operators

Input statement
When we need to accept input into a variable, we use the input() function. The general syntax of the
input() statement is as follows:
A=input(“Enter a number”)
When this statement is executed, it will prompt the user to enter a number. The input provided by
the user gets stored in variable A. By default, the value given using the input function is a string or a
character value.
Now observe the code given below.

Fig. 8.2
In this example, when we tried to add the values stored in variable A, the interpreter concatenated
the value in variable A because it is stored as a string not a number. To convert a string value into an
integer, we use the int() function. The above program can be rewritten using the int() function as
shown in Fig. 8.3.

145

Computer Application Grade 10.indb 145 8/20/2019 3:22:47 PM

 Fig. 8.3

Print function (print())

The print() function displays the given object to the standard output device (screen) or to the text
stream file. For example, to display any message, the statement will be as follows:
>>>print(“It is Monday today.”)
>>>It is Monday today. #output
A comma (,) used with the print() statement prints the result separated by a space. A plus (+) sign
with the print command is used to combine the two values, which are written one after the other, if
they are string values; otherwise, it adds the two values if they are numerical values.
>>>print (“ABC”, “ABC”)
>>>ABC ABC #output
>>>print (“ABC” + “ABC”)
>>>ABCABC #output

Comments
Comments are the statements that are ignored by the interpreter and are not displayed as a part of the
output on the screen. It sometimes becomes difficult for the programmers to read and understand
large pieces of codes with hundreds or thousands of lines of code. Therefore, the programmers use
the comments to describe large pieces of code.
In Python, a comment is defined by the symbol hash (#). When a hash symbol is placed in the
beginning of a line of code, the Python interpreter takes it as a comment that does not execute the
line. For example, consider the following lines of code.
# This is a comment.
print (“Today is Sunday.”) #The print statement will display ‘Today is Sunday.’

CONDITIONAL STATEMENTS
In a programming language, whenever we need to make decisions based on a condition, we use the
conditional statements. For example, to check if variable Num has the value 5 or not, we provide a

146

Computer Application Grade 10.indb 146 8/20/2019 3:22:47 PM

 condition. There are two possibilities of a condition—True and False. Let us learn how to use the
conditional statements in Python.

The if statement
The if statement runs only if the condition is True. The syntax of the conditional statement is
as follows:
if expression:
statement(s)
Now observe the program given below that makes use of the if statement. The program checks if the
weight of the luggage entered by the user exceeds the given limit. If the limit exceeds, the message
‘Please pay `3000 for the extra luggage weight’ appears.

Fig. 8.4

The output of the program is given below.

Fig. 8.5

The if … else statement

The if … else statement has two blocks. One is the if block, which is the same as above, and the other is
the else block. If the condition in the if block evaluates to False, the code in the else block gets executed.
The syntax of the statement is as follows:
if expression:
statement(s)
else:
statement(s)
Note: It is very important to note the indentation after if and else. Since no punctuators (like curly
brackets) are used in Python to define the body of the code, the indentation specifies the statement(s)
that are a part of the if or the else blocks.

147

Computer Application Grade 10.indb 147 8/20/2019 3:22:47 PM

 Example 1: To check if the number entered by a user is even or odd

Fig. 8.6
In the above program, if the user enters a number that is divisible by 2, the message ‘It is an even
number.’ is displayed. If the user enters a number that is not divisible by 2, then the message ‘It is an
odd number.’ is displayed. The output of the program is given below.

Fig. 8.7
Example 2: To check if the number entered by a user is positive or negative

Fig. 8.8

The output of the above program is given below. Try it out t s

Accept a number N and find
out whether it is a multiple of 7
or not. Display the result with
Fig. 8.9 an appropriate message.

The if … else … if statement

This statement is used to handle several conditions together. There can be multiple elif blocks, but
there can be one if and else block in this type of statement. The syntax of the statement is given below.
if expression1:
statement(s)

148

Computer Application Grade 10.indb 148 8/20/2019 3:22:47 PM

 elif expression2:
statement(s)
else:
statement(s)

Example 3: To check whether a number is greater than, smaller than, or equal to another number

Fig. 8.10
In the above program, the if block checks if
the first number is greater than the second Try it out t s
number and displays the corresponding Accept temperature in degree Fahrenheit and
message. If the condition evaluates to False, convert it into degrees Celsius. Display the following
the control of the program goes to the elif messages according to the given conditions:
block. The condition in the elif block is
checked, and if it evaluates to True, the • If the temperature is between 5 and 15 degrees
corresponding message is displayed. If the Celsius, display ‘Cool’.
condition evaluates to False, the control • If the temperature is greater than 15 and less
jumps to the else statement, and the than 39 degrees Celsius, display ‘Moderate’.
corresponding message is displayed. The
• If the temperature is greater than 39 degrees
output of the above program is given below.
Celsius, display ‘Hot’.

Fig. 8.11

LOOPS
When we need to repeat a series of instructions, we use loops. In programming languages, loops
are used to execute a block of code for a specific number of times. There are two types of loops—for
and while.

149

Computer Application Grade 10.indb 149 8/20/2019 3:22:47 PM

 For loop
The for loop is used to repeat over a set of items. There are a number of ways of using the for loop.
The for loop with a collection of items
The for loop is used to iterate over a sequence of strings, lists, tuples, or dictionaries. The syntax of the
for loop is as follows:
for <variable name> in sequence:
statements(s)
For example, consider the examples given below.
Examples Output Description
x=“Python3.6” P The loop extracts the first letter from
variable x and stores it in ‘i’ and keeps
for i in x: y
on printing the value of ‘i’, as shown
print (i) t in the example.
h
o
n
3
.
6
x=[“Data”, 12, 3.4, “Num”] Data Here, the value is extracted from the
list and stored in ‘i’, which is further
for i in x: 12
printed.
print(i) 3.4
Num

The for loop over a range of items

The for loop can also be used with the range() function. The range() function accepts a range of
values in a sequence. It has three parameters—the start, end, and step. The table given below
describes each parameter.
Parameters Description
start It is an optional parameter, and it takes the initial value of the range. If its
value is not specified, then it takes 0 as default.
end It takes the final or the last value of the range. This number is not included
while checking the range. For example, in a range of numbers from 1 to 10,
the last number printed will be 9 as the end value is equal to 10. Thus, the last
value printed in the loop should be end−1.
step It is also an optional parameter. If it is not specified, then the step value is
taken as 1. However, any value can be given to specify the incremental value.

150

Computer Application Grade 10.indb 150 8/20/2019 3:22:47 PM

 The syntax of the for loop with the range() functions is as
follows:
for variable in range (start, end,

Did You Know?

A loop can be put inside
step): another loop. This is called
statements(s) nesting of loops. For example, a
for loop can be placed inside a
while loop or a for loop can be
placed inside another for loop.
The table given below shows a few examples of the for
loop with the range() function.

Examples Output Description

for i in range (1, 5, 1): 1 Here, the start parameter is 1, the end parameter is 5,
and the step value is 1. So the loop will be executed
print (i) 2
from 1 to 4.
3
4

for i in range(2, 4): 2 Here, start=2, end=4, and step=1 (by default) as it is
not specified. So the loop will be executed from 2 to 3.
print (i) 3

for i in range(4): 0 Here, the start parameter is not specified. So its default
value is 0. The end parameter is 4, and the default step
print (i) 1
value is 1. Thus, the loop will be executed from 0 to 3.
2
3

for i in range(2, 8, 3): 2 Here, start=2, end=8, and step=3. So the loop will
start from 2, and then as the step value 3 is added
print (i) 5
it will print 5. But when 3 is further added to 5, it
becomes 8. Since the last value printed should be
end−1, it will not be printed.

Break and continue statements

The break and continue statements are used when we do not want
Try it out t s
to check the test condition and want to come out or terminate Find the sum of first 10 even
the loop. numbers and display it.

Break statement
The break statement is used when we need to come out of the loop forcefully and need not continue
with the execution further. For example, consider the program given in the table. The program will
keep on printing the letters till the letter ‘e’ is encountered.

151

Computer Application Grade 10.indb 151 8/20/2019 3:22:47 PM

 Example Output Description
x=“Great” G As soon as ‘i’ gets the value ‘e’,
the loop is ended using the break
for i in x: r
command. Thus, the loop does not
if(i==‘e’): execute further.
break
else:
print(i)

Continue statement
The continue statement is used to skip the code inside a loop (while or for). It returns the control of
the loop to the top by skipping the rest of the statements inside the loop. For example, consider the
program given below. It will continue to print all the letters in the string except the letter ‘e’.

Example Output Description

x=“Great” G As soon as ‘i’ gets the value ‘e’, the loop
skips the rest of the statements and the
for i in x: r
else part will not be executed. Thus, the
if(i==‘e’): a letter ‘e’ will not be printed. The program
continue t control will move to the top and continue
to take the next value of the string to
else: execute further.
print(i)

Example 4: Program to skip the odd numbers and print only the even numbers in a given range of
values

Fig. 8.12 Fig. 8.13

152

Computer Application Grade 10.indb 152 8/20/2019 3:22:47 PM

 While loop
The while loop is similar to the for loop in terms of execution. It is also used to repeat a series of
instructions for a specific number of times as long as the specified condition is True. The syntax of
the while loop is as follows:
while condition:
statement(s)
Example 5: Program to print first the five natural numbers from 1 to 5 using the while loop

Fig. 8.14
In the above program, initially the value of variable x is equal to 1. The while statement checks if the
value of x is either less than or equal to 5. If the value is less than or equal to 5, the next blocks of
statements get executed. If the value is greater than 5, the program control gets out of the while loop
and executes the statements after the while loop. Here, the last print statement is not a part of the loop,
and so it is executed after the loop gets over. The output of the program is given below.

Fig. 8.15

Example 6: Program to print natural numbers from 5 to 1 (using the while loop)

Fig. 8.16 Fig. 8.17
153

Computer Application Grade 10.indb 153 8/20/2019 3:22:48 PM

 Example 7: Program to print first ten even numbers from 2 to 20 (using the while loop)

Fig. 8.18

Fig. 8.19

SOME PRACTICE QUESTIONS

Example 8: Write a program to accept a number from the user and check if it is a multiple of 5
or not.

Fig. 8.20

Fig. 8.21

Example 9: Write a program to accept the salary and years of service of an employee. If the number of
years is more than 5, then display the new revised salary by increasing it by 10%.

154

Computer Application Grade 10.indb 154 8/20/2019 3:22:48 PM

 Fig. 8.22

Fig. 8.23

Example 10: Write a program to find the sum of the first 10 natural numbers.

Fig. 8.24

Fig. 8.25

Example 11: Write a program to accept a number N and display the Fibonacci series till N terms.
(A Fibonacci series is the one where the next term is calculated as the sum of its two previous terms,
assuming that the first two terms are 1, 1. For example, if N=5, then the output generated should be
01123…)

155

Computer Application Grade 10.indb 155 8/20/2019 3:22:48 PM

 Fig. 8.26

Fig. 8.27

Example 12: Write a program to accept a year from the user, and check whether it is a leap year or not.

Fig. 8.28 Fig. 8.29

Wordbank

Arithmetic operators Operators used to perform mathematical operations

Comparison operators Operators used to compare the values
Variables The memory locations used to store values
List A sequence or list of items of different types that can be changed
Tuple A sequence of objects that can be changed unlike lists
input() function A function used to accept input from a user
Conditional statements The statements that are used to perform a task based on a decision
Looping statements The statements that are used to repeat of a task or a series of commands

156

Computer Application Grade 10.indb 156 8/20/2019 3:22:48 PM

 We have learned

• The print() function prints the given object to the standard output device (screen).
• Python supports different numerical data types, which are int, long, and float. It also supports
string, list, and tuple data types.
• Lists and tuples are used to store multiple values of different data types. The key difference
between these is that the values of a list are allowed to be modified while it is not allowed in a
tuple.
• The input() function is used to accept an input into a variable from a user.
• The conditional statements are used to take a decision based on the specified condition. The if,
if … else, and if … else … if are conditional statements.
• The for and while are the looping statements. These are used when we need to repeat a series of
instructions again and again.
• The break and continue statements are called the jump statements.
• The break statement is used to come out of the loop forcefully. The continue statement takes the
control of the loop (while or for) to the top by skipping rest of the statements inside the loop.

Solved Examples
1. What are variables? result with quotient as well as remainder,
Ans. Variables are the memory locations that are but the floor division operator gives only the
used to store data. The value stored in them is quotient as the result.
allowed to get varied, hence the name variable.
For example, the following code uses the
division and floor division operators.
2. In what format the data accepted using the
input command gets stored in a variable? a=7
Ans. The default format in which the data is stored
b=2
using the input command is string.
print (a/b)
3. What is a conditional statement?
print (a//b)
Ans. A conditional statement is the one that executes
a series of commands on the basis of the given Output of the above program is: 3.5 3
condition.
6. Is it possible to assign different values to
4. What are relational operators? Give examples. multiple variables in a single statement? If yes,
Ans. The relational operators are the operators that then give an example.
are used to compare values stored in variables. Ans. Yes, it is possible to assign different values to
For example, ‘>’ (greater than), ‘>=’ (greater multiple variables in a single statement.
than or equal to), ‘<’ (less than), and ‘<=’ (less For example, the following statement will
than or equal to) are some relational operators. assign three different values to three different
variables a, b, and c.
5. Differentiate between the division (/) and
floor division (//) operators with the help of an a, b, c = 12, 34, 12.4
example.
Ans. The division operator results in the accurate 7. What is the default value of the step keyword?
Ans. The default value of the step keyword is 1.
157

Computer Application Grade 10.indb 157 8/20/2019 3:22:48 PM

 Exercises
t 1. Match the columns.

(a) int() (i) Contains multiple items separated by commas

(b) list (ii) Used to find the power of a number

(c) int (iii) Also called a comparison operator

(d) == (iv) A function used to display the message

(e) print() (v) The data type for storing non-decimal integer values

(f) ** (vi) A function used to convert a given base to decimal

t 2. Fill in the blanks.

(a) The ____________ function is used to accept (e) The ____________ statement is used to
an input into a variable from the user. come out of the loop forcefully.

(b) The ____________ and ____________ are (f) The ____________ statement skips the rest
the two types of loops used in Python. of the statements in a loop and transfers the
program control to the top.
(c) The ____________ keyword is used with the
for loop to specify the increment value.

(d) The ____________ method is used to

convert a string value into a floating-point
value.

t 3. State the following as true or false.

(a) In Python, there is no need to explicitly (f) The statement ‘print(10%7)’ will generate
declare a variable. the output 1.

(b) A comment is defined by the symbol (g) The statement ‘print(int(‘12’)+12)’ will
dollar ($). generate the result 24.

(c) The if statement is used to repeat over a set (h) If the program is not properly indented, it
of items. may result to a syntax error.

(d) The int() function can accept an integer as (i) The while loop is used to repeat a series of
well as float values. instructions as long as the specified condition
is True.
(e) The statements ‘print(“1”+“1”)’ and
‘print(‘1’+‘1’)’ will give the same output,
which is 11.

158

Computer Application Grade 10.indb 158 8/20/2019 3:22:48 PM

 t 4. Answer the following questions. [Very short answer type]
(a) How do we accept data in a variable at the (d) Are the statements ‘print()’ and ‘Print()’ the
runtime? Give the syntax of the command same in Python?
along with an example.
(e) When does the else clause of the if … elif …
(b) What is a comment? else get executed?

(c) What is a loop? (f) What are the two jumping statements?

t 5. Answer the following questions. [Short answer type]

(a) Explain the difference between the input() (iii) a,b,c=10,20,30.0
and int() functions. print(a,b,c)
(b) Explain the for loop with the help of an (iv) print(“hi”*10);print(10*“hi”)
example.
(f) Find the syntax errors in the given program,
(c) What is the difference between the break and and rewrite the code after correcting the
continue statements? errors.

(d) Explain the range() function in Python. a=10,b=20,c=30

d=a+b+c
(e) Give the output of the following commands.
print(“sum”: d)
(i) a=10
If c>b+a
print(“num=”,a)
print (c,“greatest”)
print(“num=”,a+2)
Else
(ii) a=b=c=d=10
print(c,“is not greatest”)
print(a,b,c,d)

t 6. Answer the following questions. [Long answer type]

(a) Write the programs using the for loop to (c) Write the output of the following program.
generate the following output. P=1

(i) 3, 6, 9, 12, 15, 18, 21, 24, 27, 30 for I in range(40, 1, -5):
(ii) 0, -2, -4, -6, -8, -10 P=(P+1)%3
(b) Differentiate between lists and tuples in print(I, ‘:’, P)
Python. print(‘Final I:’, I)
print(‘Final P:’, P)

159

Computer Application Grade 10.indb 159 8/20/2019 3:22:49 PM

 t 7. Select the correct alternative(s).
(a) The +, *, /, // are the types of ___________ (f) Which of the following is the output of the
operators. given program?
(i) arithmetic i=4
(ii) relational while True:
if i%7==0:
(iii) comparison
break
(iv) logical print(i, end=“#”)
(b) The command in Python to accept a value i=i+1
during execution is ___________. (i) 1#2#3#
(i) get (ii) 5#6#
(ii) print (iii) 4#5#6#
(iii) input (iv) 4#5#6#7#
(iv) int (g) A syntax error in Python is detected by
(c) Which of the following declarations of _________at _________.
statements is not valid? (i) compiler, compile time
(i) a, b, c = 1, 2, 3 (ii) interpreter, run time
(ii) a = b = c = 1, 2 , 3 (iii) compiler, run time
(iii) a = 1, b = 2, c = 3 (iv) interpreter, compile time
(iv) a = 1; b = 2; c = 3 (h) What will be the output of the following
(d) Which of the following numerical data types code?
is supported by Python? i = 0
(i) long while i < 5:
print(i, end=“ ”)
(ii) int
i=i+1
(iii) decimal if i==3:
(iv) Both (i) and (ii) break
else:
(e) Which of the following is an example of a
print(i+1, end=“@”)
conditional statement?
(i) 0 2@1 3@2
(i) for loop
(ii) 0 2@2 3@2
(ii) if … else statement
(iii) 0 2@1 2@3
(iii) while statement
(iv) 0 2@1 3@3
(iv) All of these

160

Computer Application Grade 10.indb 160 8/20/2019 3:22:49 PM

 l Lab Exercise
c 1. Accept a number and find out if it is negative, positive, or zero.
2. Accept a number from a user, and display the sum of the digits of the number.
[For example, if the number is 1235, then the result generated should be 11.]
3. Write a python program to accept a number N, reverse its digits, and display the new number.
[For example, if the number is 123, then the output should be 321.]
4. Write a Python program to accept two numbers Low and High. Find the sum of all odd numbers
between Low and High. Display the result with an appropriate message.
[For example, if Low=2 and High=13, then the result should be 3+5+7+9+11=35.]

Accept a number N and display the following terms till N rows.

1
s
1 2
1 2 3
1 2 3 4 (if N=4)
(Hint: Use nested for loop.)

161

Computer Application Grade 10.indb 161 8/20/2019 3:22:49 PM

 9 Programming with
Scratch

We will learn about

• Basic elements of Scratch • Conditional statements
• Tempo • Drawing with iteration
• Variables • Iterative development and using
• Events blocks ask and answer blocks
• Operators blocks • Creating a simple game
• Coordinates and conditionals • Creating songs

Scratch is a visual programming language. It was developed by the Lifelong Kindergarten group at
the Massachusetts Institute of Technology. Using Scratch, we can create our own interactive stories,
games, and animations. We can work online as well as offline on Scratch.

BASIC ELEMENTS OF SCRATCH

The Scratch interface has the following components. Let us know about all these components.

Menu bar
The Menu bar is located at the top of the window. It shows the commands related to the projects you
create in Scratch.

Stage
It is the area where the execution of the code takes place. It is the background of a Scratch project. The
Scratch stage is 480 pixels wide and 360 pixels high.

Sprite
It is a small graphic element that can be moved around the screen. Its functions are controlled by
scripts. The default sprite is an orange cat. Scratch also has a library of inbuilt sprites. We can choose
any of the sprites from the library, or we can also draw our own sprite.

162

Computer Application Grade 10.indb 162 8/20/2019 3:22:49 PM

 Scripts area
The scripts area is the area where you develop your program using the blocks. A block of code is
called a script. A sprite is programmed using a script. The elements are dragged from the blocks
palette and dropped into the scripts area. The elements keep on joining when they are dropped into
the scripts area.

Menu bar

Stage Scripts area

Blocks palette
Sprites pane
Fig. 9.1

Blocks palette
This section contains the elements used to program the sprite. The elements can be dragged from the
palette to the scripts area. There are ten different categories of blocks in the blocks palette.

Sprites pane
The sprites pane shows thumbnails of all the sprites added to the project. To select a sprite, click on
the sprite in the sprites list. The letter ‘i’ on the top left of a sprite can be clicked to view its info. It
also shows the coordinates of the sprite on a Cartesian plane.

Costumes tab
This tab lets you change the appearance of a sprite. It also allows you to change the size of the sprite
and the direction it faces.

Sounds tab
The Sounds tab lets you add sound to a sprite. Click the sprite and then click the Sounds tab. It
displays various options to add sound.
163

Computer Application Grade 10.indb 163 8/20/2019 3:22:49 PM

 Executing the project
The script can be executed by clicking on the blocks added to the scripts area.

Block categories
The shapes we see on the Scratch interface to make a script or a program are called blocks. Depending
upon the nature of the program, these blocks are used. The different types of blocks are as follows.
Motion: The motion blocks are used to show the movement of a sprite.
Looks: These blocks are related to the appearance of the sprites.
Sound: These blocks have commands to play and control various sounds.
Pen: These blocks are related to the Scratch’s pen. These blocks help to turn the pen on and off and
adjust the various values of a pen.
Data: These blocks are used to store and access data. There are two sub-categories in this block—
Variables and Lists.
Events: These blocks are used to take a decision on the execution of the code when an event is
triggered. For example, what to do when the green flag is clicked or what should be executed when a
particular key from the keyboard is clicked.
Control: These blocks are used to control the execution of a script.
Sensing: These blocks allow us to enter input and detect actions. For example, these blocks can be
used to determine whether a sprite touches another sprite and the location of a mouse pointer.
Operators: These blocks contain the commands to perform mathematical calculations.
More: This category of block allows us to create our own blocks in Scratch.

TEMPO
The tempo block is basically the part of the Sound block, which is used to adjust the speed or tempo
of the sound to be played. Thus, it is used to increase or decrease the speed with which the music
should be played.
The lowest value of the tempo is 20 bpm and the highest value is 500 bpm. The term ‘bpm’ stands
for beats per minute, which is the unit for measuring the tempo of a sound. The higher the value of the
tempo, the faster the sound will play. The table given below describes the functions of the different
tempo blocks.

Blocks Functions
This block reports the value of the current
tempo.
This block is used to set the value of the
tempo in bpm.
This block is used to change the value of
the tempo by a specified value.

164

Computer Application Grade 10.indb 164 8/20/2019 3:22:49 PM

 Let us observe the script in Fig. 9.2 to understand the use of the tempo block. In this script, the tempo
is set to 150 bpm. The script will play the notes and drumbeats 5 times for 1 second each.

Fig. 9.2

Drag the blocks one after the other on the scripts area, and run the script to see the output.

VARIABLES
Variables are the memory locations that hold one value at a time, and this value can be changed
according to the requirement of the program. The variables are created under the Data block.

Creating a new variable in Scratch

When you click on the Data block, two options—Make a Variable and Make a List—appear. On
clicking the Make a Variable option, the New Variable dialogue box appears. Type in a variable name
in the Variable name input field. There are two radio buttons—For all sprites and For this sprite only.
The For all sprites option creates a global variable that can be used with all the sprites created, and the
For this sprite only option creates a local variable that can be used only for the current sprite.
Once you click on the OK button, the variable is defined. Five new blocks related to the variable
appears automatically in the blocks palette.

Fig. 9.3 Fig. 9.4

165

Computer Application Grade 10.indb 165 8/20/2019 3:22:49 PM

 Fig. 9.5

The table given below describes the Variable blocks with their functions.

Blocks Functions
This block reports the value of the variable created.

This block is used to set the value of the variable.

This block is used to change the value of the variable by a

specified value.
This block is used to show the value of the variable on the screen.

This block is used to hide the value of the variable from the stage.

Deleting or renaming the existing variable

To delete or rename an existing variable, just right-click on the variable name and choose the option of
deleting or renaming the variable.

Fig. 9.6
166

Computer Application Grade 10.indb 166 8/20/2019 3:22:50 PM

 Example to show the use of a variable
Let us see the script given below that makes use of a variable. It illustrates how the sprite is made to
move 100 times in a circular motion. The counting from 0 to 100 is done using the variable ‘start’,
which is initialized with the value 0, and the steps to move the sprite are repeated 100 times.

Fig. 9.7 Fig. 9.8
Note the variable ‘start’ appears at the top-left of the screen. The value of the variable will appear
changing when the script is run.

EVENTS BLOCKS
The Events blocks are brown-coloured blocks. These blocks trigger either a single script or multiple
scripts.
Blocks Functions
It runs the script when a key is pressed.

It runs the script when the sprite is clicked.

It runs the script when the backdrop changes to a specified

backdrop.
It runs the script when a value is greater than another value.

It runs the script when a specific message is received by a

sprite.
It allows scripts to send broadcasts without any pauses in the
scripts.
It allows scripts to send broadcasts and wait until the
specified time ends.

167

Computer Application Grade 10.indb 167 8/20/2019 3:22:50 PM

 OPERATORS BLOCKS
The Operators blocks are green-coloured blocks. These blocks are used to perform mathematical
operations.

Blocks Functions

It is used to perform addition.

It is used to perform subtraction.

It is used to perform multiplication.

It is used to perform division.

It compares two values. If the first value is less than the second
value, it returns True; otherwise, it returns false.

It compares two values. If the first value is greater than the second
value, it returns True; otherwise, it returns false.

It checks if the first value is equal to the second value. It returns

True if both the values are equal; otherwise it returns false.

It picks a random number between the first given number and the
second given number (the first and second number inclusive).

It joins the two given values and displays the result.

COORDINATES AND CONDITIONALS

The sprite is positioned in the stage area. For positioning a sprite, the coordinate system is used in
Scratch. It uses two coordinates—X-position and Y-position. The X-position decides the horizontal
position of the sprite from left to right, while the Y-position decides the vertical position of the sprite
from top to bottom.
The stage is divided into a grid of 480 × 360 pixels, where X-position has a total value of 480, varying
from −240 to 240. The extreme left side of the stage has the value as −240, while the extreme right
side of the stage has the value 240. Similarly, the Y-position has total value of 360, varying from −180
to 180. The top of the stage area has the Y-position as 180, while the bottom of the stage area has the
value −180. The coordinates are written in the form of (X, Y). The coordinates for the centre of the
stage is therefore (0, 0).
So, if we need to position the sprite to the bottom Try it out t s
right of the stage, then the X-position should hold a Find out the coordinates of the X- and
value nearer to 240 and the Y-position should hold a Y-positions if we need to position the
negative value nearer to −180. sprite to the bottom left of the stage.

168

Computer Application Grade 10.indb 168 8/20/2019 3:22:50 PM

 Fig. 9.9

CONDITIONAL STATEMENTS
Sometimes, we need to do a task or generate a result based on some response or input from the
user—for example, making a sprite move forwards if the key ‘a’ is pressed and move backwards if the
key ‘b’ is pressed. This means that based on the given conditions, some task is to be performed. This
decision-making is possible in Scratch using the Control blocks. The table given below describes the
functions of some of the Control blocks.

Blocks Functions

If the condition in the if block evaluates to

True, the code inside the block gets executed.
If not, the program control gets out of the
block.

If the condition in the if block evaluates to

True, the code inside the block gets executed.
If not, the code inside the else parts gets
executed.

This block waits until the condition is True

and then executes the code below it.

This block keeps on repeating the block(s)

inside it until the condition is True.

169

Computer Application Grade 10.indb 169 8/20/2019 3:22:50 PM

 Now observe the script shown in Fig. 9.10. It makes use of the if-then blocks. It moves the sprite
forward or backward by pressing specific keys.

Fig. 9.10
On clicking the green flag, the sprite will come to the centre of the stage. It will then glide to the
specified position for the specified amount of time. The if block will thereafter check if the sprite
touches the edge of the screen, and if this condition evaluates to True, the backdrop of the stage will
change.

DRAWING WITH ITERATION

Repeating a given task again and again is called iteration.
In other words, iteration means a repetition of a series of
Try it out t s
commands. The iteration commands appear under the Make the sprite move to the four
Control blocks. corners of the stage using the
four arrow keys.
Let us look at the following examples to understand the
iteration.
Examples Scripts Output
To draw a rectangle using the
repeat block (iteration)

170

Computer Application Grade 10.indb 170 8/20/2019 3:22:51 PM

 To draw a hexagon using
iterations

To create a beautiful
pattern using iterations

ITERATIVE DEVELOPMENT AND USING ASK AND ANSWER BLOCKS

Let us now create scripts using variables repeatedly and see how iterative development takes place.

Using variables in iteration

The iteration not only works with simple cases associated with
a sprite but can also work with the variables—for example, asking
the sprite to show the count from 1 to 10 or making the sprite Try it out t s
count the number of steps taken. Since we already know how to Display the first ten even
create a variable, we will use the same methodology in our numbers from 2 to 20.
next example.

171

Computer Application Grade 10.indb 171 8/20/2019 3:22:51 PM

 Example 1: To display the first ten natural numbers

Fig. 9.11

Sensing blocks
The Sensing blocks are used to detect some factors in a script. For example, these blocks can be used
to determine whether a sprite touches any colour or a mouse pointer and performs a task when a key
is pressed. The Sensing blocks are blue-coloured blocks.

Blocks Functions

This block evaluates to True if a sprite touches a

specific cooler.

This block evaluates to True if a sprite touches the

mouse pointer, another sprite, or edge of the stage.

It results True if a specific key is pressed.

It results True if a colour on its sprite touches

another colour.

It is used to ask a question from the user. It then

stores the input entered in the answer block.

It stores the most recent input entered by the user.

Ask and answer blocks

Sometimes, we need to make programs that need to take the value in a variable during the execution
of a script. For instance, a program that accepts a number and finds whether it is a positive or negative
number. For accepting a value into a variable, the ‘ask and wait’ block is used, which comes under the
Sensing block.

172

Computer Application Grade 10.indb 172 8/20/2019 3:22:51 PM

 For example, when we run the following script, we get the output as shown in Fig. 9.13.

Enter your
favourite novel.

Fig. 9.12 Fig. 9.13

In the above script, the input entered by the user cannot be used for
any purpose, and this input goes nowhere. So we need to store the
input using the block.

Fig. 9.14
Example 2: To accept a number and find out whether it is a positive
or negative number

Fig. 9.15
Output

Enter a number Enter a number -90 is a negative

of your choice. of your choice. number.

Fig. 9.16 Fig. 9.17 Fig. 9.18

173

Computer Application Grade 10.indb 173 8/20/2019 3:22:51 PM

 Example 3: To accept a number and display whether it is even or odd

Fig. 9.19
Output

Enter a number.

Fig. 9.20

87 is an odd
number.

Fig. 9.21

CREATING A SIMPLE GAME

By now you must have realized that working in Scratch is not only interesting but equally easy when
it comes to making a game.
Let us create a small ‘Escape Game’, where we have to protect the mouse from the ghosts.
Step 1
Choose a suitable background for the game by selecting the backdrop from the library. We will select
the ‘desert’ backdrop.

174

Computer Application Grade 10.indb 174 8/20/2019 3:22:51 PM

 Step 2
Choose a suitable sprite from the library. We will choose the Mouse1 sprite.
Step 3
Add the following code to the mouse to make it move left and right on the stage using the left and
right arrow keys.

Fig. 9.22 Fig. 9.23
Step 4
The next step is to add a new sprite, ghost, from the library.
Step 5
Now add the code (shown in Fig 9.24) to the ghost sprite. This code will first tilt the ghost to 180
degrees as it will appear to be pouncing on the mouse, and then make it fall starting from the random
X-position and keep on decrementing the value of the Y-position by −5. As soon as the sprite reaches
the value of −180, which means the bottom of the stage, reset it to the top by setting the value of the
Y-position to 180 and again randomly get the value of the X-position.

Fig. 9.24

Step 6
Duplicate the ghost sprite two times so that the multiple ghosts appear to be falling. Change the initial
value of the X-position so that all the ghosts come from different positions.

175

Computer Application Grade 10.indb 175 8/20/2019 3:22:51 PM

 Step 7
To show the score, create a variable Score. Set the Score to an initial value of 0. We need to protect the
mouse from the ghosts. As soon the ghost falls on the mouse, which means the two sprites intersect
with each other, you will lose 1 life. When three lives of the mouse are lost, the game should be over.
So, we will create another variable ‘Lives’ with initial value 3, and modify the code of the mouse (Fig.
9.25) and the ghosts (Fig. 9.26) as shown below.

Fig. 9.25 Fig. 9.26

Creating animated images

Animation is nothing but a combination of multiple pictures displayed in
a sequence. It is another interesting feature of Scratch where we can create
animated images.
Scratch provides different costumes for most of the sprites. A costume is
nothing but showing sprite in different positions.
To create an animated image, add a sprite with different costumes on the stage.
Now add the following script on the stage and click on the green flag. It will Fig. 9.27
appear as if the sprite is moving.
Creating a story using images
We can add multiple sprites and have different costumes and backdrops in an animation. Let us create
a story of our own. A spaceship lands on earth.
Pico, an alien, comes out of the spaceship. He is
lost as his spaceship has returned. He then meets
Tera in the desert.
The steps to create this story are as follows.
1. Add a new backdrop desert to the stage. Now
add three sprites—Spaceship, Pico walking,
and Tera. Fig. 9.28

176

Computer Application Grade 10.indb 176 8/20/2019 3:22:52 PM

 Note that there are two costumes for spaceship. Keep two costumes for pico.
2. Add the codes to Spaceship (Fig. 9.29), Pico (Fig. 9.30), and Tera (Fig. 9.31).

Fig. 9.29

Fig. 9.30

Fig. 9.31

177

Computer Application Grade 10.indb 177 8/20/2019 3:22:52 PM

 The story runs as shown below.

Fig. 9.32 Fig. 9.33 Fig. 9.34

Fig. 9.35 Fig. 9.36 Fig. 9.37

CREATING SONGS
We can create songs by using the blocks provided in the Sound block.
The code given alongside will play a tune.

Note: It requires a sound knowledge of notes and how they are played
on an instrument.

Fig. 9.38

Wordbank

Variable An element whose value can change

Script A program code created to perform a task
Coordinate The values in the (X, Y) pair used to fix the position of an object
Conditional statements The statements used to perform a task and take decisions based on
a specified condition
Iteration The repetition of a series of commands

178

Computer Application Grade 10.indb 178 8/20/2019 3:22:52 PM

 We have learned

• The Events block is used to take a decision on the execution of the code when an event is
triggered.
• The Sound block is used to adjust the speed or tempo of the sound to be played.
• The Data block is used to create variables in the scratch script.
• The Control block contains looping and conditional statement blocks which are used for
decision-making.
• In the if block, if the condition is True, the code inside the block gets executed.
• In the if-else block, if the condition is True, the code inside the if block gets executed.
Otherwise, the code inside the else block gets executed.
• The repeat block is used to repeat an action a specified number of times.
• The forever block repeats an action infinitely.
• The Sensing blocks are used when we need to ask for some input during the execution of a
program or for detecting certain factors, such as if a sprite is touching a specified colour.
• The ask and wait block is used to ask an input from a user. The answer block is used to store
the most recent input.

Solved Examples
1. 1. What is the file extension of a Scratch file? Ans. The commands to change the costumes of a
Ans. .sb2 sprite are found under the Looks block.

2. Which block is used for performing arithmetic 7. Look at the script given below. What should be
and comparison operations? done to repeat the given script 10 times?
Ans. Operators block

3. What are local and global variables in Scratch?

Ans. The variables that can be used for all the sprites
in a Scratch project are called global variables,
whereas those variables that are created for a
specific sprite are called local variables.

4. What do you understand by loops? Under Ans. We can use the repeat block in the following
which block the looping commands are found? manner.
Ans. The repetition of a series of commands again
and again is called looping. The looping
commands come under the Control block.

5. Define the term ‘sprite’.

Ans. A sprite is a small graphic element that can
be moved independently around the screen,
producing animated effects.

6. Under which block you can find the commands
to change the costumes of the sprite?
179

Computer Application Grade 10.indb 179 8/20/2019 3:22:52 PM

 Exercises
t 1. Match the columns.

(a) (i) Repeats the blocks inside it until the condition is True

(b) (ii) Changes the costume to the specified costume

(c) (iii) Reports True if a sprite touches the specified colour

(d) (iv) Stops the execution of the script

(e) (v) Takes a random number within the specified range

(f) (vi) Runs a script when a specified key is pressed

t 2. Fill in the blanks.

(a) The command is under (d) The ____________ block repeats an action
the ____________ block, where Count is the for a specified number of times.
name of the ____________ (e) The wait until block waits until the
(b) A general programming construct that condition is ____________ and then executes
allows a program to store a value is called a the code below it.
____________. (f) The ____________ blocks are used to carry
(c) The coordinates of the centre of the stage is out mathematical calculations.
____________. (g) Tempo is measured in terms of __________.

t 3. State the following as true or false.

(a) A sprite can have one or more costumes (e) The input entered by the user is stored using
allowing it to change its appearance as a the input block.
project executes. (f) The if block is executed when the condition
(b) The tempo block is used to adjust the speed is false.
of the sound. (g) The higher the value of the tempo, the faster
(c) The block the sound will play.
will make the sprite say 13. (h) The ask and wait block is found under the
(d) The X-position has the total value of 480, Motion block.
varying from -240 to 240.

180

Computer Application Grade 10.indb 180 8/20/2019 3:22:53 PM

 t 4. Answer the following questions. [Very short answer type]
(a) What is the function of the when green flag (d) What is the function of the block?
clicked block?
(e) Which blocks are used to detect factors in a
(b) What is the function of the move 10 steps script?
block?
(f) What are the coordinates of the centre of the
(c) Which block will you use to repeat a stage?
condition for a number of times?

t 5. Answer the following questions. [Short answer type]

(a) Explain the difference between the ask and (c) What is tempo? Under which block category
wait and answer blocks. it is found?
(b) How many times the code given below will (d) Create a script to display the first 20 even
be executed? numbers in the reverse order.
(e) What will be the output of the following
script?

What will be the change in the execution of
the program if the repeat block is replaced
with the forever block?

t 6. Answer the following questions. [Long answer type]

(a) What are variables in Scratch? Under which
and blocks? Explain with the help of
block variables are created in scratch?
(b) How do you accept a value in a text box an example.
during execution? How is that answer (d) Explain the until blocks.
transferred to a variable? (e) Create a script to accept two numbers from a
(c) What is the difference between the user, and display the sum and product.

t 7. Select the correct alternative(s).

(a) In Scratch, the location of a sprite is defined (iii) the location of the mouse pointer
by ___________. (iv) using the blocks
(i) the (X, Y) position on a Cartesian plane
(ii) it’s angle and radius in a cylindrical
coordinate
181

Computer Application Grade 10.indb 181 8/20/2019 3:22:53 PM

 (b) In Scratch, how can you create a walking (d) Which of the following blocks waits until the
animation? condition is True and then executes the code
(i) Using a loop to move a few steps at a below it?
time (i)
(ii) Creating two or more costumes
showing the sprite’s legs in different (ii)
positions and switching between them
(iii) Using the animation command (iii)
(iv) Including a video clip (iv)
(c) Which block will you select to store an input
given by a user? (e) What does the block do?
(i) (i) It stops the script in which it is used.
(ii) It stops all the scripts in a project.
(ii)
(iii) It stops the if-then block.
(iii) (iv) It stops the forever block.
(iv)

l Lab Exercise
c 1. arrow
Write a code to make the sprite move left and right on the stage when the user presses the left and right
keys.
2. Accept a number in a variable and display the message ‘It is a greater number.’ if the number is greater
than 100, otherwise display ‘It is a smaller number.’
3. Create a Scratch script to show children participating in a race.
4. The following script creates a pattern as shown in the image given below. Create a similar pattern in
Scratch.

182

Computer Application Grade 10.indb 182 8/20/2019 3:22:53 PM

 5. Create a Pong Ball game. The requirements for the game are listed below.
• A paddle that the user controls with the left and right arrow keys
• A ball that moves on its own
The conditions to be set for the game are as follows:
• The ball must bounce off the edges.
• The ball must bounce off the paddle.
• The ball should bounce back at a random angle.

• Rahul wanted to find out the square root of a number accepted by the user. He
created the following script, but he did not get the correct answer. Can you help
s
him find the error in the code?

• Observe the code given below. What change should be done in the code to display the
next five numbers from the number entered by the user?

183

Computer Application Grade 10.indb 183 8/20/2019 3:22:53 PM

 Additional Examples: HTML
Example 1:
Write an HTML code to create a simple web page showing information on an operating
system and its functions.

Solution:
<html>
<head>
<title> Operating system and its functions </title>
</head>
<body>
<h1> Operating System </h1>
<p>An operating system is a software program that controls the
operations of a computer and enables other programs to run on
it. It also provides the user with a medium, called interface,
to interact with the computer.</p>
<p>An operating system performs a number of functions. The
functions of operating system includes managing the interface,
input and output devices, processes, and computer memory.</p>
</body>
</html>

184

Computer Application Grade 10.indb 184 8/20/2019 3:22:53 PM

 Example 2:
Modify Example 1, and use CSS properties to format the text according to the specifications
given below.
• Set the font for the heading as Calibri and font colour as red. The heading should be
underlined.
• Set the heading in the centre of the web page.
• Set the font for the paragraph text as Times New Roman, font size as large, and font colour
as dark blue.
• Set the margins for each side to 50 px.
• Set the background colour to light gray.

Solution:
<!DOCTYPE html>
<html>
<head>
<title> Operating system and its functions </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; margin:50px}
h1{color:red; text-align:center; text-decoration:underline;
font-family:Calibri}
p{color:darkblue; font-size:large; font-family:Times New Roman}
</style>
<body>
<h1> Operating System</h1>
<p>An operating system is a software program that controls the
operations of a computer and enables other programs to run on
it. It also provides the user with a medium, called interface,
to interact with the computer.</p>
<p>An operating system performs a number of functions. The
functions of operating system includes managing the interface,
input and output devices, processes, and computer memory.</p>
</body>
</html>

185

Computer Application Grade 10.indb 185 8/20/2019 3:22:54 PM

 Example 3:
Modify Example 2, and format the text on functions of an operating system into a bulleted list.

Solution:
<!DOCTYPE html>
<html>
<head>
<title> Operating system and its functions </title>
</head>
<style type=“text/css”>
body{background-color:lightgray; margin:50px; color: darkblue;
font-size:large}
h1{color:red; text-decoration:underline; font-family:Calibri}
h3{color:green; text-decoration:underline; font-family:Calibri}
ul{font-family:Times New Roman; font-size:large}
p{font-family:Times New Roman}
</style>
<body>
<h1> Operating System</h1>
<p>An operating system is a software program that controls the
operations of a computer and enables other programs to run on
it. It also provides the user with a medium, called interface,
to interact with the computer.</p>

186

Computer Application Grade 10.indb 186 8/20/2019 3:22:54 PM

 <h3> Functions of an Operating System </h3>
An operating system performs a number of functions. These are as
follows:
<ul>
<li> Interface management </li>
<li> Device management </li>
<li> Process management </li>
<li> Memory management </li>
</ul>
</body>
</html>

Example 4:
Make changes in Example 3, and add a related picture in the document.

Solution
<!DOCTYPE html>
<html>
<head>
<title> Operating system and its functions </title>
</head>
<style type=“text/css”>

187

Computer Application Grade 10.indb 187 8/20/2019 3:22:54 PM

 body{background-color:lightgray; margin:50px; color: darkblue;
font-size:large}
h1{color:red; text-decoration:underline; font-family:Calibri}
h3{color:green; text-decoration:underline; font-family:Calibri}
ul{font-family:Times New Roman; font-size:large}
p{font-family:Times New Roman}
img{float:right}
</style>
<body>
<h1> Operating System</h1>
<p>An operating system is a software program that controls the
operations of a computer and enables other programs to run on
it. It also provides the user with a medium, called interface,
to interact with the computer.</p>
<h3> Functions of an Operating System </h3>
<img src=“OS.jpeg” alt=“diagram showing functions of operating
system”>
An operating system performs a number of functions. These are as
follows:
<ul>
<li> Interface management </li>
<li> Device management </li>
<li> Process management </li>
<li> Memory management </li>
</ul>
</body>
</html>

188

Computer Application Grade 10.indb 188 8/20/2019 3:22:54 PM

 Example 5:
Create an e-learning website. The home page of the website should display an array of
subjects. On clicking on the desired subject, the Table of Contents should appear. User should
be able to click on the desired chapter, and the corresponding content should appear on the
screen.

Solution:
homepage.html
<!DOCTYPE html>
<html>
<head>
<title>E-learning wesbite</title>
<style type=“text/css”>
p{font-size:x-large; color:brown}
table{border-spacing: 6px 6px}
h1{color:navy; text-decoration: ; text-align:center}
h2{color:darkgreen}
td{border:5px solid blue; text-align:center; vertical-
align:middle; padding:0.1cm; font-size:x-large}

189

Computer Application Grade 10.indb 189 8/20/2019 3:22:54 PM

 </style>
</head>
<body>
<h1> Welcome to the E-learning Website!!</h1>
<p> This e-learning website has content created by experts to
help learners in every way. Students can learn at their own pace
and accelerate their understanding of the concept. The video
tutorials make students understand the concepts in a better
way. There are worksheets along with the tutorials to test the
understanding of the learners. <p>
<hr>
<h2> Select your favourite subject. </h2>
<table>
<tr>
<td height=“150” width=“150”>
<a href=”math.html”>Mathematics</a>
</td>
<td height=“150” width=“150”>
<a href=“science.html”>Science</a>
</td>
<td height=“150” width=“150”>
<a href=“eng.html”>English</a>
</td>
<td height=“150” width=“150”>
<a href=“comp.html”>Computer Science</a>
</td>
</tr>
</table>
</body>

190

Computer Application Grade 10.indb 190 8/20/2019 3:22:54 PM

 math.html
<!DOCTYPE html>
<html>
<head>
<title>E-learning wesbite</title>
<style type=“text/css”>
ol{color:darkgreen}
</style>
</head>
<body>
<h2><center> Table of Contents-Class 10 </center></h2>
<hr>
<h3> Click on the desired chapter.</h3>
<ol>
<li><a href=“ch1.html”>Chapter 1: Real Numbers</a></li>
<li><a href=“ch2.html”>Chapter 2: Polynomials</a></li>
<li><a href=“ch3.html”>Chapter 3: Pair of Linear Equations in

191

Computer Application Grade 10.indb 191 8/20/2019 3:22:54 PM

 Two Variables</a></li>
<li><a href=“ch4.html”>Chapter 4: Quadratic Equations</a></li>
<li><a href=“ch5.html”>Chapter 5: Arithmetic Progressions</a></
li>
</ol>
</body>

Example 6:
Write an HTML code to embed audio and video on a web page.

Solution:
<!DOCTYPE html>
<html>
<head>
<title> Inserting Audio and Video </title>
</head>
<style type=“text/css”>
h4{color:navy; text-shadow:0.5px 0.5px white; margin:20px}
</style>
<body>
<h4> Click on the play button to listen to the audio.</h4>
<audio src=“a1.mp3” controls=“controls”></audio>

192

Computer Application Grade 10.indb 192 8/20/2019 3:22:54 PM

 <br><br><h4>Click on the play button to watch the video.</h4>
<video src=“v1.mp4” controls=“controls” height=“200”
width=“300”></video>
</body>
</html>

Example 7:
Create and display the following table on a web page using HTML.

193

Computer Application Grade 10.indb 193 8/20/2019 3:22:54 PM

 Solution:
<!DOCTYPE html>
<html>
<head>
<title>Creating a Table</title>
<style type=“vtext/css”>
caption{padding:0.2cm}
body{color:navy}
table{border:solid; background-color:lightgreen; width:500px;
height:30px}
th{border:dotted; text-align:center; vertical-align:middle;
font-size:large}
td{border:dotted; vertical-align:middle; padding:0.1cm}
tr{background-color:lightgreen}
</style>
</head>
<body>
<table>
<caption>Table A</caption><br>
<tr>
<th colspan=2>Computer Applications</th>
</tr>
<tr>
<td rowspan=5> Class 9</td>
<tr>
<td>Unit 1: Basics of Information Technology</td>
</tr>
<tr>
<td>Unit 2: Cybersafety</td>
</tr>
<tr>
<td>Unit 3: Office Tools</td>

194

Computer Application Grade 10.indb 194 8/20/2019 3:22:54 PM

 </tr>
<tr>
<td>Unit 4: Scratch or Python</td>
</tr>
<tr>
<td rowspan=5> Class 10</td>
<tr>
<td>Unit 1: Networking</td>
</tr>
<tr>
<td>Unit 2: HTML</td>
</tr>
<tr>
<td>Unit 3: Cyberethics</td>
</tr>
<tr>
<td>Unit 4: Scratch or Python</td>
</tr>
</table>
</body>

Example 8:
Create and display the following form in HTML.

195

Computer Application Grade 10.indb 195 8/20/2019 3:22:54 PM

 Solution:
<html>
<body>
<h2><center>Employee Form</center></h2>
<form name=“form1” method=“post” action=“mailto:form@indiannica.
com”>
<br>User id: <input type=“text” size=“20” maxlength=“30”
value=“--Enter id here--”>
<br><br>Password:<input type=“password” size=“20”>
<br><br>Name:<input type=“text” size=“20” maxlength=“30”
value=“--Enter name here--”><br>
<br><br>Gender:<input type=”radio” name=”r1” value=”male”>Male
<input type=“radio” name=“r1” value=“female” checked>Female
<input type=“radio” name=“r1” value=“other”>Other <br>
<br><br>Select your department:<select name=“s1”>
<option>Admin</option>
<option>Sales</option>
<option>HR</option>
<option>Editorial</option>
<option>Purchase</option>
</select>
<br><br><br>Select your preffered area:<br>
<input type=“checkbox” name=“c1” value=“northindia”>North
India<br>
<input type=“checkbox” name=“c2” value=“southindia”>South
India<br>
<input type=“checkbox” name=“c3” value=“eastindia”>East
India<br>
<input type=“checkbox” name=“c4” value=“westindia”>West
India<br>
<br><br><input type=“submit” value=“Submit”>

196

Computer Application Grade 10.indb 196 8/20/2019 3:22:54 PM

 <input type=“reset” value=“Reset”>
</form>
</body>
</html>

Example 9:
Create a web page in HTML that has two vertical frames. In the first frame, display an image,
and in the second frame, show the related content.
Note:
A browser window can be divided into multiple sections. These sections are called frames, and
each section can hold a distinct HTML document.
The <iframe> tag is used to create an inline frame in a web page, which is a container
element. The attributes associated with this tag are listed in the table given below.

Attribute Description

src It defines the URL of the web page to be displayed in the frame.

width It specifies the width of the frame.

height It specifies the height of the frame.

seamless It shows the frame as a part if the containing element.

Solution:
<!DOCTYPE html>
<html>
<head>
<title>Frames in HTML</title>
<style type=“text/css”>
body{backhround-color:lightgray}
h1{text-align:center; margin:30px}
</style>
</head>
<body>
<h1> Frames in HTML </h1>

197

Computer Application Grade 10.indb 197 8/20/2019 3:22:54 PM

 <iframe src=“OS.jpeg” height=400 width=500></iframe>
<iframe src=“q2.html” height=400 width=500></iframe>
</body>
</html>

198

Computer Application Grade 10.indb 198 8/20/2019 3:22:55 PM

 Additional Examples: Python
Example 1:
Write a program to accept the class and stream of a student and allot the section as per the
following criteria:
Class Stream Section
11 ‘S’ A
11 ‘C’ B
11 ‘H’ C
12 ‘S’ A
12 ‘C’ B
12 ‘H’ C

Solution:
cls=input(“Enter your class:”)
s=input(“Enter your stream:”)
if cls==“11” or cls==“12”:
if s==“S” or s==“s”:
print (“Your allotted section is ‘A’.”)
elif s==“C” or s==“c”:
print (“Your allotted section is ‘B’.”)
elif s==“H” or s==“h”:
print (“Your allotted section is ‘C’.”)
else:
print(“You have entered a wrong stream.”)
else:
print(“You have entered a wrong class.”)

Output:

199

Computer Application Grade 10.indb 199 8/20/2019 3:22:55 PM

 Example 2:
Write a program to accept a number N and print the next 10 consecutive numbers from the
number N.
(For example, if N=5, then the next 10 numbers printed should be 6, 7, 8 … 15)

Solution:
N=int(input(“Enter a number:”))
i=1
while i<=10:
print(N+i)
i=i+1

Output:

Example 3:
Write a program to accept a number N and find its factorial.
Note: A factorial of a number is the product of all numbers from N till 1. For example, if N=6, then its
factorial is 6 × 5 × 4 × 3 × 2 × 1.

Solution:
N=int(input(“Enter a number:”))
counter=1
for k in range(1, N+1):
counter=counter*k

print(“Factorial of” , N,“is”, counter, “.”)

200

Computer Application Grade 10.indb 200 8/20/2019 3:22:55 PM

 Output:

Example 4:
Write a program to accept a number N, and count the number of digits in it.

Solution
N=int(input(“Enter a number:”))
count=0
while N>0:
count=count+1
N=N//10
print(“The number of digits in the number are”, count, “.”)

Output:

Example 5:
Write a program to check if the number entered by the user is equal to zero, positive, or
negative.

Solution:
N=int(input(“Enter a number:”))
if (N == 0):
print(“The number is equal to zero.”)
elif (N > 0):
print(“It is a positive number.”)
201

Computer Application Grade 10.indb 201 8/20/2019 3:22:55 PM

 else:
if (N < 0):
print (“It is a negative number.”)

Output:

Example 6:
Write a program to print all numbers in a range divisible by a given number.

Solution:
l=int(input(“Enter the lower range limit:”))
u=int(input(“Enter the upper range limit:”))
n=int(input(“Enter the divisor:”))
for i in range(l, u):
if(i%n==0):
print(i)

Output:

Example 7:
Write a program to input a number from the user, and check whether the number is a
palindrome or not.
(A palindrome number reads the same when written forwards or backwards. For example, 11 is a
palindrome number.)

202

Computer Application Grade 10.indb 202 8/20/2019 3:22:55 PM

 Solution:
n=int(input(“Enter a number:”))
temp=n
rev=0
while(n>0):
num=n%10
rev=rev*10+num
n=n//10
if(temp==rev):
print(“The number is a palindrome.”)
else:
print(“The number is not a palindrome.”)

Output:

Example 8:
Write a program to show the following menu:
1. Circle
2. Rectangle
3. Square
4. Exit
Accept the choice from the user as 1, 2, 3, 4 and accordingly accept the side of the figure.
Calculate the area and display the result. The program should continue till the user doesn’t
select option 4.

Solution:
ch=0
while ch!=4:

203

Computer Application Grade 10.indb 203 8/20/2019 3:22:55 PM

 print(“Here are some of the choices:”)
print(“1. Calculate area of a circle”)
print(“2. Calculate area of a rectangle”)
print(“3. Calculate area of a square”)
print(“4. Exit”)
ch=int(input(“Enter your choice:”))
if ch==1:
side=float(input(“Enter radius of a circle:”))
print(“Area is: “, 3.14*side*side)

elif ch==2:
side1=float(input(“Enter length of a rectangle:”))
side2=float(input(“Enter breadth of a rectangle:”))
print(“Area is: “, side1*side2)

elif ch==3:
side3=float(input(“Enter side of a square:”))
print(“Area is: “,side3*side3)

elif ch==4:
print(“Exiting...”)

else:
print(“Wrong choice entered”)

Output:

204

Computer Application Grade 10.indb 204 8/20/2019 3:22:55 PM

 Additional Examples: Scratch
Question 1:
Create a script in Scratch to accept temperature in Fahrenheit and convert it into Celsius.

Solution:
The script

The stage

Question 2:
Create a project in Scratch to accept a number from the user, and tell the sprite to count the
next ten consecutive numbers starting from the number entered by the user.
For example, if the number entered by the user is 6, then the counting done by the sprite
should be from 6 to 15.

205

Computer Application Grade 10.indb 205 8/20/2019 3:22:55 PM

 Solution:
The script

The stage

Question 3:
Create a game in Scratch that counts the number of times a user touches or clicks on the
sprite, which is lost in space.

Solution:
The script

206

Computer Application Grade 10.indb 206 8/20/2019 3:22:55 PM

 The stage

Question 4:
Create a pong ball game. Add a paddle to hit the ball and bounce it off. The paddle should
move left and right with the movement of the mouse. End the game when the paddle misses
to hit the ball three times.

Solution:
The script

Script for the ball Script for the paddle

207

Computer Application Grade 10.indb 207 8/20/2019 3:22:55 PM

 The stage

Question 5:
Create a Scratch project to ask questions to a user. Increase the score by 1 for every correct
answer, and decrease by 1 for every incorrect answer. In the end, show the final score of the
user.

Solution:
The script

208

Computer Application Grade 10.indb 208 8/20/2019 3:22:56 PM

 The stage

209

Computer Application Grade 10.indb 209 8/20/2019 3:22:56 PM

 ASSIGNMENT ON WEBSITE DESIGNING

Students are requested to create the following websites based on the

specifications provided.
1. Create your own ‘personal blog’. Your website must include details like
(a) Name
(b) Photograph
(c) Areas of interest
(d) School
(e) State
(f) Country
Include the pictures of your areas of interest, and create hyperlinks. Make your site colourful and impressive.
2. Create a website on ‘your school’. Include topics like
(a) Infrastructure
(b) Facilities
(c) Uniform
(d) Motto
(e) School pictures
(f) Extra-curricular activities
(g) Subject and language options
For every topic, create a separate web page. Finally, connect all the web pages together to form a website.
3. Create a website on ‘travel and tourism’. Your website must include the complete information
about the areas your company is covering with all the packages offered. Try to include a lot of
pictures so that the user finds them interesting and goes for it. Provide incentives and get lots of
colours in your website.
4. Create a website on ‘Indian statistics’ on the following basis.
(a) State-wise area
(b) Population and literacy
(c) Gender ratio
5. Create a website on ‘environment’. The website must include the problems faced by the
environment and the measures we can take to protect it before things get out of our hands.
6. Create a website on ‘pollution’. Your website must discuss different types of pollutions and the
reasons as to why they are taking place.

210

Computer Application Grade 10.indb 210 8/20/2019 3:22:56 PM

 Answers to Exercises
Chapter 1
1. Match the columns.

(a) (ii) (b) (vii) (c) (iv) (d) (i) (e) (vi)
(f) (ix) (g) (x) (h) (v) (i) (iii) (j) (viii)

2. Fill in the blanks.

(a) World Wide Web (b) reload/refresh (c) Web server

(d) domain name (e) domain name system (f) protocol
(g) client-server (h) octets (i) POP3
(j) hypertext transfer protocol (k) uniform

3. State the following as true or false.

(a) False (b) True (c) True (d) False (e) True
(f) False (g) False (h) False (i) False (j) True
(k) False (l) False (m) True (n) True

6. Select the correct alternative(s).

(a) (ii) (b) (iii) (c) (ii) (d) (ii) (e) (iv)
(f) (iv) (g) (iii) (h) (iv) (i) (iii) (j) (iv)
(k) (iv) (l) (ii) (m) (ii) (n) (iv) (o) (iii)
(p) (ii) (q) (iv) (r) (ii)

Chapter 2

1. Match the columns.

(a) (v) (b) (iv) (c) (i) (d) (ii) (e) (iii)

2. Fill in the blanks.

(a) electronic (b) uniform (c) and

(d) outbox (e) e-learning (f ) e-commerce

3. State the following as true or false.

(a) False (b) True (c) True (d) True (e) True

(f) True

7. Select the correct alternative(s).

(a) (iii) (b) (ii) (c) (ii) (d) (iii) (e ) (iii)
(f) (iii) (g) (iii) (h) (iii) (i) (iv)

211

Computer Application Grade 10.indb 211 8/20/2019 3:22:56 PM

 Chapter 3

1. Match the columns.

(a) (vi) (b) (iii) (c) (i) (d) (ii) (e) (iv)
(f ) (v)

2. Fill in the blanks.

(a) web browser (b) <br> (c) container

(d) <!-- --> (e) color (f ) <style>

3. State the following as true or false.

(a) False (b) False (c) False (d) False (e) False
(f) True (g) True (h) False

7. Select the correct alternative(s).

(a) (i) (b) (ii) (c) (ii) (d) (i) (e) (i)
(f) (iv)

Chapter 4

1. Match the columns.

(a) (iv) (b) (iii) (c) (v) (d) (i) (e) (ii)

2. Fill in the blanks.

(a) text-transform (b) font-size (c) border-width

(d) height; width (e) alt; <img> (f ) id
(g) anchor (h) href (i) target

3. State the following as true or false.

(a) True (b) False (c) False (d) True (e) False
(f ) True (g) False (h) False

7. Select the correct alternative(s).

(a) (ii) (b) (ii) (c) (ii) (d) (ii) (e) (ii)
(f) (i) (g) (i) (h) (i)

Chapter 5

1. Match the columns.

(a) (iv) (b) (iii) (c) (v) (d) (i) (e) (ii)

212

Computer Application Grade 10.indb 212 8/20/2019 3:22:56 PM

 2. Fill in the blanks.

(a) <th> and <td> (b) left, center, and right (c) padding
(d) border (e) caption (f) colspan
(g) <ol> (h) <dl> (i) nested
(j) start (k) background-color

3. State the following as true or false.

(a) False (b) False (c) False (d) True (e) False

7. Select the correct alternative(s).

(a) (iv) (b) (ii) (c) (iv) (d) (iii) (e) (i)

Chapter 6

1. Match the columns.

(a) (ii) (b) (i) (c) (iv) (d) (v) (e) (iii)

2. Fill in the blanks.

(a) <audio> (b) src (c) radio

(d) get and post (e) <textarea> (f) size

3. State the following as true or false.

(a ) True (b) True (c) False (d) False (e) False
(f ) False

7. Select the correct alternative(s).

(a) (i) (b) (iv) (c) (ii) (d) (iv) (e) (i)

Chapter 7

1. Match the columns.

(a) (iii) (b) (ii) (c) (i) (d) (v) (e) (iv)

2. Fill in the blanks.

(a) license (b) self (c) trademark
(d) white hat (e) internet privacy (f) ciphertext
(g) certificate authority

213

Computer Application Grade 10.indb 213 8/20/2019 3:22:56 PM

 3. State the following as true or false.

(a) False (b) True (c) True (d) True (e) True
(f ) False (g) True

7. Select the correct alternative(s).

(a) (ii) (b) (i) (c) (iv) (d) (iii) (e) (ii)
(f ) (ii)

Chapter 8

1. Match the columns.

(a) (vi) (b) (i) (c) (v) (d) (iii) (e) (iv)
(f ) (ii)

2. Fill in the blanks.

(a) Input (b) for and while (c) step

(d) float() (e) break (f) continue

3. State the following as true or false.

(a) True (b) False (c) False (d) False (e) True
(f ) False (g) True (h) True (i) True

7. Select the correct alternative(s).

(a) (i) (b) (iii) (c) (ii) (d) (ii) (e) (ii)
(f) (iii) (g) (ii) (h) (i)

Chapter 9

1. Match the columns.

(a) (vi) (b) (v) (c) (iv) (d) (ii) (e) (iii)
(f ) (i)

2. Fill in the blanks.

(a) data; variable (b) variable (c) (0, 0)

(d) repeat (e) true (f) operators
(f) bpm

214

Computer Application Grade 10.indb 214 8/20/2019 3:22:56 PM

 3. State the following as true or false.

(a) True (b) True (c) True (d) True (e) False
(f ) False (g) True (h) False

7. Select the correct alternative(s).

(a) (i) (b) (i) (c) (iv) (d) (i) (e) (ii)

215

Computer Application Grade 10.indb 215 8/20/2019 3:22:56 PM

 SAMPLE QUESTION PAPER - I
Computer Applications
Class X
Theory Maximum Marks: 30

1. Fill in the blanks. [5]

(a)
__________ is the method in which data is converted to an encoded form to protect it from an
unauthorized person.
(b) The __________ property is used to set the horizontal alignment of the text.
(c) The term ‘SFTP’ stands for __________.
(d) The __________ tag is used to give a caption to a table.
(e) The __________ protocol is used to receive emails from a server.

2.
State the following as true or false. [5]

(a) The <hr> tag draws a horizontal line in an HTML document.

(b) A patent is a right granted for the inventions and products that gives protection from selling or
importing the original work.

(c) The <anchor> tag is used to create a hyperlink on a web page.

(d) A digital certificate has the digital signature of the issuing certificate authority.

(e) The font-size property is used to set the desired font size of the text.

3. Choose the correct options for the following.[5]

(a) A set of four numbers from 0 to 255 separated by periods(.) forms the

(i) e-mail address.

(ii) protocol.

(iii) IP address.

(iv) HTTP address.

(b) Which of the following non-profit corporations is formed to educate people about the benefits of
open-source software programs?

(i) GPL

(ii) FSF

(iii) OSI

(iv) IPR

216

Computer Application Grade 10.indb 216 8/20/2019 3:22:56 PM


(c) Which of the following tags is used to insert comments in HTML?
(i) <com>

(ii) <rem>

(iii) <!-- -->

(iv) <comments>

(d) Which of the following tags marks the beginning of an ordered list?

(i) <ordered>

(ii) <ol>

(iii) <ul>

(iv) <li>
(e) Which of the following attributes is used to merge two or more rows into a single row?

(i) rowspan

(ii) colspan

(iii) rspan

(iv) cspan

4.
Answer the following questions.

(a) Explain the following tags. [1]

(i) <td>

(ii) <img>
(b) Explain the term ‘digital divide’. [1]

(c) How is HTTP different from HTTPS?  [2]

(d) How can you insert an audio clip on a web page? Write the tags and the associated attributes. [3]

5. Answer the following questions based on Python.

(a) Give the output of the following statements. [2]

(i) print(“1+7”, 1+7, sep=“#”)

(ii) a, b, c=12, 13, 14

print(a + b, end=“@”)

print(b + c)

print(2**4,9**1, end=“Done”)

217

Computer Application Grade 10.indb 217 8/20/2019 3:22:56 PM

 (b) Explain the difference between the following with the help of examples. [3]

(i) for and while loops

(ii) if and if … else loops

(c) Find the syntax errors in the following code, and rewrite the correct codes.  [3]

a=10, b=20, c=30

d=a + b + c

print(“sum”: d)

If (c > b + a)

print (c,”is greatest.)

Else

print(c,”is not greatest.”)

OR

5. Answer the following questions based on Scratch.

(a) What are the dimensions of the Scratch stage? [1]

(b) Explain the local and global variables in Scratch. [2]

(c) What will be the output of the following script? [2]

(d) Explain the difference between the following blocks. [3]

(i) and

(ii) and

218

Computer Application Grade 10.indb 218 8/20/2019 3:22:56 PM

 Practical
1. Create two linked web pages. The first page should display information about one of the
Seven Wonders of the World. The second page should display a registration form. Use the appropriate
CSS properties to do the following: [15]

• set a background colour

• set an appropriate font
• set margins

2. Write a Python program to accept the name of the employee, employee number, and basic pay.
Calculate the HRA, DA, and total pay (basic pay + HRA + DA) of the employee as per the
following criteria. [15]

Basic pay HRA DA

>=50000 <= 100000 15% 7%
>100000 <=150000 9% 6%
>150000 <= 200000 7% 5%
>200000 5% 4%
OR

2. Create a new Scratch project, and do the following:

• Add fish and crab as sprites.

• Add a suitable background on the stage.
• Move the fish with the movement of the mouse pointer. When the fish meets the crab, they both say
‘Hello’ to each other.

219

Computer Application Grade 10.indb 219 8/20/2019 3:22:56 PM

 SAMPLE QUESTION PAPER - II
Computer Applications
Class X
Theory  Maximum Marks: 30

1. Fill in the blanks. [5]

(a) The __________ is a numerical address given to every computer connected to the internet for its
unique identification.

(b) The __________ tag is used in HTML for the largest heading level.

(c) The __________ attribute of the <td> tag specifies the number of rows a cell should span.

(d) The __________ attribute of the <img> tag is used to give an alternative text for the image to be
displayed.

(e) The __________ property is used to set margins on a web page.

2.
State the following as true or false. [5]

(a) A digital certificate is a type of electronic password that allows entities to exchange data over the
internet.

(b) Privacy or internet privacy refers to protecting sensitive data on the internet.

(c) The <li> tag marks the beginning of an unordered list.

(d) A firewall is a network security system used to prevent unauthorized access to a private network
connected to the internet.

(e) The fourth generation (4G) of mobile technology offers higher rates of data transmission and is used
for watching high definition television content.

3. Choose the correct options for the following.[5]

(a) Which of the following is not an attribute of the <a> tag?

(i) href (ii) src

(iii) name (iv) title

(b) Which of the following sets of tags is used to create a table in HTML?

(i) <td>, <ul>, <table>

(ii) <th>, <li>, <table>

(iii) <table>, <tr>, <td>

(iv) <table>, <tr>, <ol>

220

Computer Application Grade 10.indb 220 8/20/2019 3:22:57 PM

 (c) Which of the following statements is true?

(i) The term ‘Bcc’ stands for blind computer copy.

(ii) The ‘Cc’ option contains the email addresses of the recipients who will receive the mail without
any of the other recipient knowing about it.

(iii) The username and domain name in an email address are separated by the ‘&’ symbol.

(iv) The term ‘Cc’ stands for carbon copy.

(d) In which of the following methods data is converted into an encoded form to protect it from an
unauthorized person?

(i) Digital certificate

(ii) Encryption

(iii) Decryption

(iv) Digital divide

(e) Which of the following is a file transfer protocol?

(i) SFTP

(ii) SCP

(iii) SSH

(iv) HTTP

4.
Answer the following questions.

(a) What is spyware? [1]

(b) Differentiate between the <img> and <a> tags in HTML.  [2]
(c) How can you create a radio button? Write the syntax.  [3]

(d) What do the following extensions represent? [1]

(i) .gov

(ii) .org

5. Answer the following questions based on Python.

(a) Name the function that is used to accept values into a variable.  [1]

(b) Which loop is used to repeat a series of instructions as long as the condition is true? [1]

(c) Explain the for loop with the help of an example.  [2]

(d) Explain the range() function.  [2]

(e) Write the output of the following program.  [2]

221

Computer Application Grade 10.indb 221 8/20/2019 3:22:57 PM

 for x in [10, 13, 16, 19, 22, 25, 28, 31, 34, 37, 40]:

if(x%2!=0):

continue

else:

print(x)

OR

5. Answer the following questions based on Scratch.

(a) What does the command do? [1]

(b) Which block repeats a condition infinitely? [1]

(c) What are variables in Scratch? Under which block the variables are created? [2]

(d) Explain the difference between the following blocks. [4]

(i) and

(ii) and

222

Computer Application Grade 10.indb 222 8/20/2019 3:22:57 PM

 Practical
1. Write an HTML code to create the following list. [15]

List of Animals

(a) Mammals
1. Dogs
2. Cats
3. Horses

(b) Reptiles
1. Lizards
2. Snakes
3. Crocodiles

2. Create two linked web pages using HTML. Display information about books and their importance on
one page, and show a table showing different fiction and non-fiction books on the second page.
A sample table is shown below. [10]

Books Authors
Fiction books
Diary of wimpy kid Jeff Kinney
A wrinkle time Madeleine L’Engle
Non-fiction books
Hidden figures Margot Lee Shetterly
Little leaders: visionary women Vashti Harrison
around the world

3. Write a Python program to check the speed of the car driver. Take speed from the user, and display
the message according to the given conditions. [15]

• If speed is less than 60, it should print ‘It is OK.’

• Otherwise, for every 5 km above the speed limit (60), it should give the driver one demerit point and
print the total number of points. For example, if the speed is 70, it should print ‘Your points are 2 ’.
• If the driver gets more than 8 points, it should display ‘Your license is suspended.’

OR

3. Write a Scratch script to ask five questions from the user. If the user gives the correct answer, increase the score
by 1, and if not, decrease the score by 1.

223

Computer Application Grade 10.indb 223 8/20/2019 3:22:57 PM

 APPENDIX

Internet Basics: Major events in the internet development

1957 USSR launches Sputnik, first artificial satellite.

1961 First paper on packet switching by Leonard Kleinrock

1965 The first network experiment conducted: This was the first
time when two computers communicated with each other using
the packet-switching technology.

1966 ARPA communication project begins.

1969 First ARPANET becomes operational connecting four major

US universities.

1972 Email is introduced by Ray Tomlinson.

1978 Transmission control protocol/internet protocol is introduced.

1983 Domain name system (DNS) introduced. Domain name

extensions, such as .edu, .gov, .com, .mil, .org, .net, and .int,
created.

1985 ‘Symbolic.com’ becomes the first registered domain.

1986 NSFNET was created.

1990 • ARPANET ends.

• Tim Berners-Lee creates the World Wide Web.

1993 Mosaic web browser was developed by Marc Andreesen.

1995 Sun Microsystems releases Java.

2000 Fixed wireless, high-speed internet technology is now seen as

a viable alternative to copper and fibre optic lines placed in the
ground.

2006 The number of online websites reaches an estimated 92 million.

2007 The number of internet users reaches an estimated 1.114

billion.

224

Computer Application Grade 10.indb 224 8/20/2019 3:22:57 PM