Let's Log In Computer Science Book 8 Revised (2078).indd

Vedanta Let’s Log in Computer Science | Book 8

Disadvantages of computer network

Networks can be expensive to set up in an organization.
A hacker can get unauthorised access by using various tools.
Computer viruses spread most easily through network.
Well trained technical support is required to run the network effectively.

Communication channels

The media that are used to transfer data between the computers in the
networks are called transmission media or communication channels. There
are two types of media used in the network. They are:

1. Wired media (guided or bounded media)
2. Wireless media (unguided or unbounded media)

1. Wired (Guided or Bounded) media

Cables are the most common transmission media. Two or more devices
are connected directly using cables. Three types of cables are used in
computer networking. They are:

Twisted pair cable

Twisted copper cable is used only for lower bandwidth. It consists of
UTP (Unshielded Twisted Pair) and STP (Shielded Twisted Pair)
cable.

Co- axial cable

A co-axial carries higher bandwidth than twisted pair: it is easy to
connect two devices using such cable.

Fiber Optic cable

Fiber optic cable is a thin filament of glass fiver wrapped in a protective
jacket. It consists of strands of glass like thread, each about the diameter
of a human hair. It offer high-speed data transmission rate because data

151 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

travel as high-speed pulses of light.

Twisted Pair Cable Co-axial Cable Fiber Optic Cables

RJ-45 BNC ST Connector

Copper wire - RJ-11 (Telephone)
Twisted Pair Cable - RJ-45
Coaxial Cable - BNC (Bayonet Neill-Concelman) T-connector
Fiber Optics Cable - ST Connector

2. Wireless (Unguided) Media

It is used to transfer data within a large geographical area or globally
without the use of interconnecting wires or cables. It uses other components
such as radio signals, microwaves, or infrared to connect network.

Network Components

There are different components of a computer network. Following are the
basic components of computer network.

Server Workstation Network Adapter

Network Connecting Device Network Operating System

152Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8 Server

Server

A server computer is a Powerful computer that
controls and manages other computers and
computing devices on the network. It provides
services such as print service, file service, web
service, etc. to the other computers on the
network. The important data or information
can be stored on the server computer and
other computers on the network can access
the data whenever needed.

Workstation

A workstation computer is a computer on the Workstation computers
network that uses the services provided by the
server computer. It is the computer which is
used by client in order to perform application
tasks and also known as client computer. The
client is less powerful than server.

Network Adapter

Network adapter or network interface card (NIC) is a circuit board with the
components necessary for sending and receiving data. The NIC provides
the physical connection between the network and the computer workstation
through communication media. Most NICs are internal, with the card fitting
into an expansion slot inside the computer. Nowadays, it is built-in on the
computer motherboard.

Network Cards

153 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Network Connecting Devices

Physical parts and devices used to connect computers in network environment
are called network devices. Some basic network connecting devices are
discussed below:

MODEM (Modulator-Demodulator)

Modem is a device that directly converts digital signal from a computer
or other digital devices into analog form for transmission over analog link
i.e. telephone line and vice versa. MODEM stands for Modulation and
Demodulation.

Modulator/Demodulator

The different modems are:

Analog Modem
Digital Subscriber Line (DSL) Modem
Integrated Services Digital Network (ISDN) Modem
Cable Modem
Asymmetric Digital Subscriber Line (ADSL) Modem

Hub

Hubs are connectivity devices, which contain
multiple ports for connecting to network
components. Hubs connect the computers in a
star topology. It lies between server and clients
computers.

Hub

154Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8 Switch

Switch

A switch is a network connecting device
that has multiple connecting ports like
a hub. It is used to connect computers,
network devices and network segments.
It can determine source and destination
so it can forward data to the particular
computer only. So, it reduces the
amount of unnecessary network traffic
and improves the network performance.
Because of this smart feature, switch
is also known as smart Hub.

Repeater

Repeater is a network connecting device that accepts weak signals and
regenerates them, then sends the message on their way. It make possible
for long distance data transfer. So, it boosts the data signals that receive
from network.

Repeater

Network Operating System (NOS)

Network Operating System (NOS) is the software which supports network
environment and allows multiple computers to communicate, share files, and
hardware devices with one another. Some examples of network operating
systems include Novell NetWare, Microsoft Windows NT, Microsoft Windows
2000, Microsoft Windows XP, Sun Solaris, Linux, etc.

155 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Type of Computer Network

On the basis of size, physical, and geographical division, computer network
can be categorized into three types. They are:

Local Area Network (LAN)
Metropolitan Area Network (MAN)
Wide Area Network (WAN)

Local Area Network (LAN)

The Local Area Network (LAN) is a small network of computers that are
relatively near with each other. LAN is type of computer network where
computers are connected within room, building or local area with the help
of wire or wireless medium to share resources among each other. The LAN
where wireless media are used is known as Wireless Local Area Network
(WLAN). The networks of computers in an office room, bank are the examples
of the LAN.

Local Area Network

Features of LAN

Owned by a single organizations.
Diameter of not more than three kilometers.
It is not affected by environmental factors.

156Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Metropolitan Area Network (MAN)

The way of connecting computers inside a metropolitan area is called MAN.
The area may be a part of city, valley, and district. Radio wave is used to
transmit the data for communication between the workstation and server
in the system. The network between bank and its branches, school and its
branches within city, or neighboring cities are examples of the MAN.

Metropolitan Area Network

Features of MAN

Owned by a single or multiple organizations.
The transmission speed can be higher for shorter distances.
It includes one or more LANs as well as telecommunication equipments.

Wide Area Network (WAN)

The interconnection of computers within a country, neighbouring countries
or continents is known as Wide Area Network (WAN). The WAN covers a
very large geographic area, i.e. whole world. In the WAN, computers are

157 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

interconnected using telephone line, microwave, radio wave, or satellite
communication system. Internet is an example of Wide Area Network.

Wide Area Network

Features of WAN

Owned by multiple organizations.
Covers a large geographical area.
It may be disturbed by environmental factors.

Network Topologies

The cabling structure of interconnected computers in LAN is known as
network topology. It is also known as LAN topology. The LAN topology
describes how the computers are connected with the help of wires and the
data flow from one computer to another. There are three basic topologies.
They are Bus, Ring, and Star.
158Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

1. Bus Topology

Bus topology is a type of LAN topology where all the nodes on the
network are connected through single communication line called bus or
trunk in linear form. It uses a common backbone to connect all the network
devices in the network. A single cable is actually the small segment of the
coaxial cables connected with the help of T-connectors at the both side of
the main cable.

Bus Topology Ring
Topology
2. Ring Topology
Ring Topology
A ring topology is a network
topology where all the nodes on
the network are connected to
each other in the form of ring or
circle without any end point. In
this topology, the signal travels
in a circle passing through each
computer on the network because
there are no terminated ends
to the cable. Each node handles
every message that flows through
the ring. Each node in the ring
has a unique address. It supports
coaxial, twisted pair, and fiber
optic cables.

159 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

3. Star Topology

In this type of topology all the computers are connected to a single
hub through a cable. This hub is the central node and all others nodes are
connected to the central node. In the computer networking world the most
commonly used topology in LAN is the star topology. In this topology, all the
nodes are separately connected with the help of different length of twisted
pair cables.

Desktop PC Printer

Laptop

Switch Desktop PC

Printer

Desktop PC Laptop

Desktop PC

Star Topology

Network Architecture/Model

Network architecture defines how the computers communicate and interact
with each other on network. It is combined form of topologies and data
transmission mode between the different computers in the network. The
main two types of network architecture are:

1. Peer to Peer Peer to Peer Network Architecture

In this type of network, all computers
on network have equal responsibilities. It
is also called work group networking which
can share data, hardware, and software with
each other. It is suitable for small area such
as small offices, small room, building, etc.
Windows 95/98, NT Workstation, Windows
XP, Vista, Windows 7/8/10, Ubuntu Desktop,
etc. are the common examples of P2P OS.

160Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

2. Client / Server

A network model where one or more powerful computers (servers)
provide the different network services and all other users of computer network
(clients) access those services to perform user’s tasks is known as client
server network. In such networks, there exists a central controller called
server. A server is a specialized computer that controls the network resources
and provides services to other computers in the network. Novell Net Ware,
Windows Server 2003, Window NT, Linux, etc. are the common examples
operating system of client server network.

Rcelqieunetst by Database
Response Printer

Server Scanner

Client / Server Network Architecture

Internet

Internet is the largest computer network that connects millions of computers
around the world. Internet is a global collection of high powered computers
that are connected to each other with network cables, telephone lines,
microwave, satellites, etc. It is known as network of networks. The internet
is an information superhighway and it has logically connected the world
into a cyber village.

Services of the Internet

Some important services provided by Internet are:

161 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

World Wide Web Electronic Mail
E-commerce Video conference
Internet Relay Chat Uploading and Downloading

World Wide Web

The World Wide Web (WWW) is one of the most
popular services of Internet. WWW is a huge
collection of pages of information linked to
each other around the globe on various topics.
It allows the user to exchange and share data
through Internet using a protocol known as
a Hypertext Transfer Protocol (HTTP). The World Wide Web

information on the web is presented in the form of web pages. Each page
can be a combination of text, pictures, audio clips, video clips, animations,
and other electronically presentable hyperlinked material.

E-mail

E-mail or Electronic mail is one of the most popular services provided by the
Internet. It can be defined as the exchange of messages and computer files
between computers over a computer network.

Gmail
162Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

E-commerce

E-Commerce is also one of the E-commerce
important services of Internet through
which you can sell or buy goods. In
simple terms, it is doing business
through Internet or doing business
virtually. Some e-commerce sites
are: kaymu.com.np, muncha.com.
np, ebay.com, amozon.com, alibaba.
com daraz.com.np, hamrobazar.com,
sastodeal.com, etc.

Video Conference

Video conference is popular and extends service of the internet through
which the people at different locations can communicate with each other
in real time face to face. It uses same technology of IRC including text and
pictures. Some examples of video conferencing tools are Google Meet, Zoom
and Microsoft Teams.

Video Conference

163 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Uploading and Downloading Downloading and Uploading

Uploading and Downloading are the
important services of Internet that allow the
user to transfer a large volume of file from one
computer to another through File Transfer
Protocol (FTP). The process of copying a copy
of a file or document or program, etc. from a
user’s computer to the remote computer (Web
Server) is called uploading. The process of
copying a copy of a file or data or program,
etc. from a remote computer (Web Server) to
the requesting computer (user’s computer) is
called downloading.

POINTS TO REMEMBER

The process of transferring data or information between computers
called data communications.
A computer network is a logical or physical interconnection between
two or more computers such that they could communicate with each
other.
Simplex is one-way data transmission that takes place only from sender
to receiver.
Duplex is two-way data transmission that takes place both directions
over a communication channel.
The media that are used to transfer data between the computers in the
networks are called transmission media or communication channels.
Twisted copper cables are used only for lower bandwidth. It consists of
two isolated strands of copper wire twisted around each other.
A co-axial carries higher bandwidth than twisted pair: it is easy to
connect with each other.
Fiber optic cable is a thin filament of glass fiber wrapped in a protective
jacket.

164Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Wireless media is used to transfer data within a large geographical area
or globally without the use of interconnecting wires or cables.

The way of connecting two or more computers in a very limited area or
within a same building or a group of adjacent building is called LAN.

The way of connecting computers inside a metropolitan area is called
MAN.

The connection of computers of networks covering more distance or the
world by the help of wave, frequency, and satellite is called WAN.

Internet is worldwide collection of computer networks.

Network topology is the interconnected pattern of network elements.

Bus topology is a network type in which every computer and network
device is connected to single cable.

Ring topology is forms a ring as each computer is connected to another
computer, with the last one connected to the first.

In star topology, all the computers are connected to a single hub through
a cable. This hub is the central node and all others nodes are connected
to the central node.

Network Interface Card, connects each computer to the wiring to the
network.

Hubs are connectivity devices, which contain multiple ports for
connecting to network components.

Switch is a device that capable of forwarding packets directly to the
ports associated with particular network addresses.

Repeater is device used on communications circuits that decrees
distortion by amplifying or regenerating signals so that it can be
transmitted onward in its original strength and form as they pass
through a network cable.

Protocols are the set of rules and formats for sending and receiving
data.

A router is a device that is used to connect different LAN in the network.

The operating system, which can support network environment, is called
Network Operating System.

Internet is the millions of computers connected all over the world.

165 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Exercise

1. Answer the following questions
a) What is computer network? Write its four advantages.
b) What is transmission media? Write its types.
c) Differentiate between simplex and duplex mode of communication.
d) What is NOS? Give some examples.
e) Define LAN and write its two features.
f) Define MAN and WAN.
g) Draw and explain about star topology.
h) What is network topology? Write its types.
i) What is Internet? Write its services.
j) Define WWW and E-mail.
k) What is e-commerce? Name some e-commerce sites.
l) What do you mean by uploading and downloading?

2. State whether the following statements are true or false:
a) Telecommunication is a system of sounds, images, texts, or
data in the form of electronic signals.
b) Files can be transferred from one computer to another on
the network.
c) A workstation computer is a powerful computer that controls
and manages other computers on the network.
d) The NIC provides the physical connection between the
network and the computer workstation.
e) Guided Transmission Media transfers the data without using
any cables in the form of radio frequency signals.

166Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

f) Hub connects a personal computer to the network through
the telephone line.

g) Bus topology uses a common backbone to connect all the
network devices in a network.

h) WWW is a huge collection of pages of information linked to
each other.

i) E-Commerce is the services of Internet through which you
can sell or buy goods.

3. Fill in the blanks

a) The fastest growing field of telecommunication is …………………….

b) A ………….. is a group of interconnected computers through transmission
media.

c) ……… is the computer which is used by client in order to perform
application tasks.

d) A …………….. is a channel through which data or signals can be
transmitted from one point to another.

e) A ……………… is network connecting device with multiple points or
ports.

f) The cabling structure of interconnected computers in LAN is known
as……………

g) ………….. is a network topology where all the nodes on the network are
connected through central device.

h) ………………is the world’s largest electronic message system.

i) ……..….. is the process of copying data or program from a user’s
computer to the Web Server.

4. Write the technical terms for the following:

a) Connection between two or more than two computers.

b) Data transmission in one direction only that is to send or receive only.

c) Device used to connect a PC with a telephone line.

167 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

d) A computer that provides services to other computer.
e) A network limited with a room or building.
f) Cabling structure of LAN.
g) A device with multiple ports.
h) Operating system that can handle networks.
i) A cable that transmits light signals.
j) The network of networks.
k) A port on the back of system unit to connect a computer in network.
l) The largest computer network.
m) Business through Internet.
n) The process of copying a copy of a file or document from a user’s computer

to the remote computer.

5. Write the Full Form of the following:

a) NIC b) WAN c) MODEM d) DSL
h) LAN
e) ISDN f) ADSL g) NOS m) HTTP i) MAN

j) WLAN k) FTP l) WWW

Activities

1. Prepare a Power Point presentation on "Different Types of Computer
Network.”

2. Draw on chart paper “Types of a computer network” and paste in your class
room.

3. Open Google.com in a web browser and type my ip, press enter, and note it
down. This is your public IP assigned by your ISP for connecting with Internet.

168Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Lesson

11

Introduction

Internet is also called network of networks. It is an Information Super
Highway to access information over the web. The Internet technology
refers to the collective form of devices, software, transmission medium, and
protocols used to connect computers together in order to send or receive data
around the world.

Web Design

Contemporary Internet Technologies

Internet covers almost every aspect of life. It provides almost all the services
to the people of any sector. Some popular Internet services are discussed
below:

169 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Social Media

Nowadays, it is a common platform for all the people to
access information, provide information, express views
and communicate with each other. Some popular social
media platforms are Facebook, Instagram, Twitter,
LinkedIn, Snapchat, Tumblr, Pinterest, etc.

E-Commerce Facebook

E-commerce refers to the
buying and selling of goods
or services over internet.
Some popular Nepal E-Commerce sites are daraz.com.np, hamrobazar.com,
sastodeal.com, muncha.com, and foodmandu.com.

Online Banking

Through internet, it is now possible to access our bank account and carryout
different financial transaction like balance check, fund transfer, payment
bills, etc.

Online Banking
170Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

World Wide Web (WWW)

WWW is the combination of all resources
and users on internet. These resources can
be accessed over the internet through a
web browser. The WWW is simply known
as “the Web.” It normally uses HTTP or
HTTPS protocol.

Web Server

A web server is a powerful computer that delivers the
requested web pages. The web sites are stored in web
servers. To access the web pages of a web server, a client
computer has to use a HTTP or HTTPS protocol. When
a client requests a website through web browser, the
web server allows the browser to download the pages of
the web sites to the client computer.

Web page Web Server

Web page is a document stored in an electronic form that contains
information in specific or single topic (organization, government agency,
personal, etc.) using text, graphics, sounds, animated pictures, hyperlinks,
etc. The information of the web page may be displayed on the user’s computer
using the web browser. Simply, the webpage is the electronic document or
softcopy, collection of related information found in internet. A web page may
have many hyperlinks to open other linked pages.

Web page

171 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Website

Website is a collection of interlinked web pages on the WWW located under
a single domain name.
Some examples of websites are: http://nepal.gov.np, http://gorkhapatraonline.
com/, www.facebook.com, etc.

gorkhapatraonline.com

Web Browser

A web browser is a software application such as Mozilla Firefox, Google
Chrome, Opera, and Microsoft Edge designed to find hypertext documents
on the Web and open the documents on the user’s computer. It is a client
application that enables the client computer to gain access to a web server
or other internet servers. Web browser interprets and displays the web
documents.

Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Brave

172Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Introduction to HTML

HTML stands for Hyper Text Markup
Language that is used to create web pages.
It is the building blocks of all basic websites.
It is the language developed by Tim Berners
Lee in 1990 at Geneva, Switzerland to
present information on Internet.

Basic Features of HTML Tim Berners Lee

HTML is not a programming language like QBASIC, C, C++. It is a
markup language.

HTML uses markup tags to describe the format and layout of text,
images, etc. in a webpage.

HTML Tags

HTML is a Tag based language. A tag is a piece of code that instructs a
web browser what to display and how to display. A web browser interprets
HTML tags. HTML tags are used to control the appearance, layout, and flow
of the web page. By convention, all HTML tags begin with an open left angle
bracket (<) and end with a close right angle bracket (>).

Note: HTML tags can be written either in uppercase or lowercase; so, tags are not
case sensitive. <HTML> is the same as <html>. For consistency, you must use
either the upper or the lower case.

Basic Structure of an HTML Document

An HTML document has mainly two main parts:

a) head

The head element contains title, scripts, styles, meta information of a
web document.

173 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

b) body

The body element contains the information that you want to display on
a web page.

<html> Indicates that this is
an HTML document
<head>
<title> Contains the
Title of the web page web page title
</title> Contains the information
about web page
</head>
Contains the main
<body> contents of web page
Content of web page
. Marks the
. end of web page
.

</body>

</html>

Basic structure of an HTML document

Basic HTML Tags

Basic tags are the main tags of an HTML page. Every HTML file should
contain at least these four tags: HTML, HEAD, TITLE, and BODY. These
are called basic tags.

174Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

The <HTML> Tag
This tag tells the browser that everything contained between the opening <HTML>
tag and the closing </HTML> tag is HTML. All the other tags and text are nested
within it. Thus, it is a container tag. The <HTML> and </HTML> tags should
always be the first and the last lines of code in your HTML document.
Syntax:
<HTML>

Tags and other contents of your page
</HTML>

The <HEAD> Tag
This tag contains information that is not displayed on the web page itself. It
usually includes the information about the HTML document itself.
Syntax:
<HTML>

<HEAD>
....
</HEAD>
....
</HTML>

The <TITLE> Tag
This tag is written within <HEAD> tag. It is used to specify the title of the HTML
document and display in the title bar of the web browser.
Syntax:
<HTML>

<HEAD>
<TITLE>Title of your web page. </TITLE>

</HEAD>
....
</HTML>

175 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

The <BODY> Tag
The <body> tag defines the body in a document. The <body> element
contains all the contents of an HTML document. There is only one <body> tag
in an HTML document.
Syntax:
<BODY>

Contents of the web page here
</BODY>

Note: The <body> tag has several attributes. You will learn about attributes
later on.

Make your Own Webpage

To develop your own webpage, you require two applications:

a) HTML Editor

An HTML editor is a software
application for creating web pages.
You can use any text editor to write
HTML tags. The simplest editor is
Notepad, freely available on Windows OS. More sophisticated editors are
Adobe Dreamweaver, Notepad++, KompoZer, Google Web Designer, etc.

b) Web Browser

A Web Browser is also a software application which
reads the HTML document, interprets it, and displays
them as web pages. Some of the popular web browsers are
Google Chrome, Mozilla Firefox, and Microsoft Edge.
Here, Notepad (HTML Editor) and Google Chrome (Web
Browser) are used for demonstration.

176Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Your first web page

Run Notepad and type the following HTML tags:

<html>
<head>

<title> My First Web Page </title>
</head>
<body>

Hello Friends! This is my first web page. I am learning HTML.
</body>
</html>

Saving your HTML document

Step 1 : Go to File Menu and Click on Save. A Save As Dialog box
appears.

177 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Step 2:

Give name to your HTML document.
For Example: "first.html"

Step 3:
From Save as type:
Choose "All Files (*.*)

Step 4: Step 5:
Choose Encoding: UTF-8 Click on Save

Note: You must give file extension either .html or .htm. UTF-8 supports Unicode
characters.

Finally, open the file “first.html” by double clicking on it. It should look
something like this:

178Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Heading Tags

In the body part of the web page, we can define headings using <h1> to
<h6> tags. <h1> defines the most important heading. <h6> defines the least
important heading.

Example:
<HTML>

<HEAD>
<TITLE> Headings </

TITLE>
</HEAD>

<BODY>
<H1> Heading 1</H1>
<H2> Heading 2</H2>
<H3> Heading 3</H3>
<H4> Heading 4</H4>
<H5> Heading 5</H5>
<H6> Heading 6</H6>

</BODY>
</HTML>

Paragraph Tag

The <P> tag is used for inserting a block of text in your page by creating a
paragraph. It is a container tag. The paragraph can be aligned left, right,
center and justify by using the ALIGN attributes. The default alignment of
paragraph is left.

179 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Syntax:
<P ALIGN = “left” | “right” | “center” | “Justify”>
………text here……
</P>

Example:
<HTML>

<HEAD>
<TITLE> P Tag </TITLE>

</HEAD>
<BODY>

<P ALIGN=JUSTIFY> A good digital citizen is someone who understands the
rights and responsibilities that come with being online and someone who uses technology
in a positive way. </P>

<P> A good password should include Numbers, Symbols, Capital Letters, and
Lower-Case Letters. </P>
</BODY>
</HTML>

Text Formatting Tags

These tags allow you to format the text of your web page in different styles.
All these text formatting tags are container tags which are shown below:
180Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

HTML Tags Description Example Output

<B> Used to display the <B> Mahakali </B> Mahakali
<U> text in bold face.
<I>
<SUB> Used to underline <U> Bagmati </U> Bagmati
the text.
<SUP>
<BIG> Used to give italics <I> Karnali </I> Karnali
<SMALL> format to the text. HO
<TT>
<STRIKE> Used to give H<SUB> 2 </SUB>O 2
subscript effect to
the text. A2

Used to give Rapti
superscript effect to A<SUP>2 </SUP>
the text.

Used to display big <BIG> Rapti </BIG>
text.

Used to display <SMALL> Koshi </ Koshi
small text. SMALL>

Used to give <TT> Mechi </TT> Mechi
Teletype format to
the text. <STRIKE> Gandaki </ Gandaki
STRIKE>
Used to strike
through text.

Practice Yourself

Type the below HTML code in Notepad, save and check the output in a Web
Browser:

181 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

<HTML>
<HEAD>
<TITLE> Text formatting tags</TITLE>
</HEAD>

<BODY>
<H1>Effects of Text formatting tags</H1>
<P> <B> The text is in bold format. </B> <BR>
<I> The text is in italic format. </I> <BR>
<U> The text is underline </U> <BR>
<BIG> The text is in big format. </BIG> <BR>
<SMALL> The text is in small format. </SMALL> <BR>
<TT> The text is in teletype format. </TT> <BR>
<STRIKE> This text is in strike through format. </STRIKE>
</P>
<H2>Effects of subscript and superscript. </H2>
H<SUB> 2 </SUB>O ------- Subscript effect <BR>
A<SUP>2 </SUP> + B <SUP> 2 </SUP> --------- Superscript effect

</BODY>
</HTML>

Font Tag

The <font> tag specifies the font face, font size, and color of text.

Syntax:
<FONT SIZE = value COLOR = color-name FACE = font-name>

182Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

<FONT> attributes Description
FACE Sets the font to the specified font name.
SIZE Sets the size of the text. Size can take values between 1 and 7.
The default size is 3.
COLOR
Sets the colour of the text. COLOR can be set to an English
language color name or to a hexadecimal triplet.

Specifying color using RGB values (Hexadecimal triplet)

The background color, text color, and link text color can be specified using
color name or RGB (Red, Green and Blue) color code. The color code can be
mentioned using hexadecimal values. The color name and their RGB values
are given below:

Colour Name RGB Value Colour Name RGB Value
White #FFFFFF Teal #008080
Black #000000 Pink #BC8F8F
Blue #0000ff Gray #C0C0C0
Silver #E6E8FA Purple #800080
Green #008000 Maroon #8E236B
Gold #CD7F32 Brown #A62AA2
Red #FF0000 Cyan #00FFFF
Yellow ##FFFF00 Lime #00FF00

Line Break Tag

The <BR> is a singular (empty) tag used for inserting a line break. When we
need to start a text from a new line without leaving a blank line, we have to
use <BR> tag.

Syntax:
Text <BR>

183 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Horizontal Rule Tag

A Horizontal Rule (HR) tag is a singular tag that produces a horizontal
line across the page. The <HR> tag is useful to divide the sections of your
document by inserting horizontal line. It is an empty tag.

Syntax:
<HR ALIGN = “left” | “right” | “center” SIZE = “pixels” WIDTH = “pixels or
percentage” COLOR = “color name”>

Example:
<HR ALIGN = center SIZE = 2 WIDTH = 30% COLOR = 8765FA>

Practice Yourself

Type the below HTML code below in Notepad, save, and check the output in
a Web Browser:

<HTML>
<HEAD>
<TITLE>Font Tag</TITLE>
</HEAD>

<BODY>
<H2> Using Font Tag </H2>
<FONT color = red SIZE = 7>Cyber Crime </FONT><BR>
<FONT SIZE = 6>Cybercrime, or computer-oriented crime is a crime that
involves a computer and a network. The computer may have been used in the
commission of a crime, or it may be the target.</FONT><BR>
<FONT COLOR = blue>Cyberbullying</FONT><BR>
<FONT COLOR = 990000 SIZE=2 FACE=arial>Cyberbullying is the use of
electronic communication to bully a person, typically by sending messages of an
intimidating or threatening nature.</FONT>
<HR ALIGN = center SIZE = 5 WIDTH = 200 COLOR = red >
<FONT FACE = verdana>Thank You!!! </FONT>

</BODY>
</HTML>

184Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

MARQUEE Tag

The <MARQUEE> tag provides the scrolling effects to the piece of text or
image displayed in the HTML document horizontally or vertically.

Syntax:
<MARQUEE BGCOLOR = color-name BEHAVIOR = scroll | slide | alternate
DIRECTION = left | right | up | down WIDTH=value HEIGHT=value> Scrolling
Text </MARQUEE>

Example:
<marquee>This is basic example of marquee. </marquee>
<marquee direction = "up">The direction of text is from bottom to top. </
marquee>

Inserting Graphics or Images

Images are the most important element of your web page. Images can
improve the design and the appearance of a web page. The most commonly
used image format for web page is GIF and PNG format. The other formats
supported by most graphical browsers are JPG and BMP format.

IMG Tag

The <IMG> tag allows you to insert an image into your web page. The
<IMG> is an empty tag.

Syntax:
<IMG SRC = "Image URL" ... attributes-list/>

185 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

<IMG> attributes Description

SRC Specifies the URL (web address) of the image
ALT
ALIGN Provides alternate text for an image if the user is unable to view
the image

Specifies position of the image: left and right

BORDER Specifies the size of the border
HEIGHT
WIDTH Specifies the height of an image either in pixel value or percentage
HSPACE: of the browser’s window
VSPACE:
Specifies the width of an image either in pixel value or percentage
of the browser’s window

Leaves a space of specified size to the left and the right of the
image

Leaves a space of specified size to the top and the bottom of the
image

Practice Yourself

Tasks to do:

i) Create a folder under your name in drive D: or E: .
ii) Create a sub-folder called images inside the above folder.
iii) Copy the required images in the sub-folder.
iv) Save your HTML document inside the folder of your name.

Note: The image file name is case sensitive. Be Careful! Computer.JPG is not same
as computer.jpg.

Type the HTML code below in Notepad, save, and check the output in a Web
Browser:

186Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

<HTML>
<HEAD>

<TITLE> Computer in Education </TITLE>
</HEAD>
<BODY>
<CENTER>
<MARQUEE BGCOLOR = teal BEHAVIOR = alternate DIRECTION = right
WIDTH=300> Welcome ! Welcome !! Welcome !!! </MARQUEE>
</CENTER><HR>
<H2 ALIGN = "center">Inserting images in HTML document </H2>
<CENTER>

<IMG SRC="images/image1.jpg" HEIGHT= 150 WIDTH=125 ALT="Computer
Education">
</CENTER><BR>
<IMG SRC="images/image2.jpg" BORDER=3>
</BODY>
</HTML>

Note: There must be two images image1.jpg and image2.jpg inside the sub-folder
images. Your file must be saved outside the sub-folder images.

Creating Links

The link is the process of relating one document to other documents for
communication. These links are called hyperlinks. Hyperlinks allow users
to navigate between web sites by clicking on words, phrases, and images.
You can create hyperlinks using text or images available on a webpage.

Anchor <A> Tag

The anchor tag starts with <A> tag and closes with </A> tag to mark the
text as a hypertext link. An anchor tag consists of four basic parts: start and
end tags, the link target and the link text.

187 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Syntax:
<A HREF = “url”> Text | Image </A

<A> attributes Description
HREF
href stands for Hypertext REFerence
NAME Specifies the URL or address of the linked object.
TITLE Allows making a link somewhere within the same web page or within
TARGET another web page to point to a specific section.

Describe the contents of the link.

Allows to open linked page in current or new window.

Syntax:
<A HREF = “target document”> Link Text | Image </A>

Example 1:

<A HREF = "downloads/notes.html”> Computer Notes </A>

It links to the web document "notes.html" of the folder "downloads" of the same
website.

Example 2:
<A HREF = "www.sushilupreti.com.np”> About Author </A>
It links to the external website www.sushilupreti.com.np.

Example 3:
<A HREF = "details.html”> <img src="images/info.jpg"> </A>
It is an example of image link where you have to click to visit the page "details.
html".

188Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Practice Yourself

Type the HTML code below in Notepad, save, and check the output in a Web
Browser:

<HTML>
<HEAD>
<TITLE>Digital Footprint</TITLE>
</HEAD>
<BODY>
<H3>About Digital Footprint</H3>
<p>A digital footprint is a trail of data you create while using the Internet. It includes
the websites you visit, emails you send, and information you submit to online services.
A "passive digital footprint" is a data trail you unintentionally leave online.</P>
<A HREF=”detail.html”> Examples of Digital Footprint </A>
<FONT SIZE=2><I>- It links to the webpage "detail.html" of the same website.</
I></FONT><br>
<A HREF=”https://techterms.com/definition/digital_footprint” target="_
blank"> More about Digital Footprint </A>
<FONT SIZE=2><I>- It links to the external webpage and opens in new tab by
target attribute</I></FONT><br><br><br>
<a href="contact.html"><img src="images/image1.jpg"></a>
<FONT SIZE=2><I>This is an example of image link</I></FONT>
<br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br>
<h2>Thank You!!!</h2>
</BODY>
</HTML>

189 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Exercise

1. Answer the following questions.

a) What is a Web Browser? Why is it needed? Give some examples of Web
Browser.

b) Define web page, home page, and website.

c) Define HTML. Mention the applications required to make web page using
HTML.

d) What is hyperlink?

e) Explain the basic structure of an HTML document.

f) What is HTML editor? Give any two examples of it.

2. Choose the best answer.

a) A HTML tag is enclosed with ………..

i. ( ) ii. < > iii. { } iv. [ ]

b) The extension of HTML document is ………..

i. .htl ii. .html iii. .tml iv. .hml

c) ……….. is the most important heading.

i. H6 ii. H1 iii. H7 iv. H9

d) Which is not the web browser?

i. Mozilla Firefox ii. Google Chrome

iii. Microsoft Edge iv. Google Play store

e) Which is the e-commerce site of Nepal?

i. ekantipur.com ii. sushilupreti.comnp

iii. muncha.com iv. Setopati.com

190Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

3. State whether the following statements are true or false:

a) HTML is a high level programming language.

b) The HTML tags are the commands that are used to control
the layout of the web page.

c) The <H6> tag is used for largest heading.

d) HTML allows linking to other HTML documents as well as
images.

e) <TITLE> is a basic HTML tag.

f) <BODY> tag does not have any attribute.

4. Write the purposes and syntaxes of the following HTML tags.

a) <P> b) <SUB> c) <HR> d) <A>

e) <BR> f) <IMG> g) <FONT> h) <B>

i) <u> j) <MARQUEE>

Lab Activities

a) Write HTML codes to prepare a web page to describe about your family.

b) Write HTML codes to display your school’s information using necessary
HTML tags and attributes.

c) Write an HTML codes to prepare a web page to describe about one of your
festivals with suitable marquee text, hyperlinks and images.

d) Create a web page using following HTML tags to describe the importance of
“Computer Education.”
Text formatting tags, Paragraph tag, Font tag, Center tag, Line break tag
and Image tag.

191 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Lesson

12

Introduction

Graphics can be defined as visual data in the form of images or designs
created to inform or communicate a message. Such visual images that are
generated by a computer are called Computer Graphics.

Computer generated images vary from line drawings to the complex 2-D/3-D
animated graphics. Varieties of Software programs are developed to draw
simple to complex graphics. Some popular image editing software are:

Adobe Photoshop
GIMP (GNU Image Manipulation Program)
Google Drawing
Adobe Illustrator
CorelDraw
Paint.net

192Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Different Graphics Format

Image files are composed of digital data. Graphic formats are the standards
used for organizing and storing digital images. The most common computer
graphic formats are:

JPG Joint Photographic Experts Group
GIF Graphics Interchange Format
PNG Portable Network Graphics
BMP Bitmap
TIF Tagged Image Format
PDF Portable Document Format

Graphics Editing

As you know, graphics is an important component of web design. Therefore,
a web designer should have a good knowledge about graphics editing. There
are many editing applications available to edit web graphics. Here, some
basic image editing techniques are discussed using the most popular photo-
editing tool – Adobe Photoshop.

Adobe Photoshop

Adobe Photoshop is a professional image Adobe Photoshop
editing software that can be used to create
a new image or edit an existing one. Most
of the graphic designers, web designers,
graphic artists, photographers, and creative
professionals use this popular tool.

Adobe Photoshop is a very popular software because of its different image
editing and retouching effects. Adobe Photoshop allows users to manipulate,
crop, resize, correct color, apply effects, add text, and many other editing
tasks.

193 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

How to Start Photoshop



Step 1 : Open the Run Window.
Step 2 : Type Photoshop.
Step 3 : Press on Enter or Click on OK.
[If Adobe Photoshop is installed in your computer, Photoshop
starts.]

Photoshop Workspace : It displays the name of the
application and other title
1 Photoshop Title Bar contents.
It shrinks the application window
2 Minimize Button : to a bar on the taskbar; you click
on its button on the taskbar to
3 Maximize/Restore Button : reopen it.
If the window is maximized (full
4 Close (Quit) Button : screen), a click changes it to
5 Menu Bar : windowed (not full screen) and
vice versa.
It closes the Adobe Photoshop
application.
It contains different menus. This
is the place where you can access
most of the commands and features
in Photoshop.

194Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8 4 3
2
51

5
6

8
7

6 Tools : It contains the various tools available to
create and edit images.

7 Image Window : The image appears in its own window once
you open a file. This is the main working
area.

8 Palettes : Palettes include Color, Layers, Character,
and other necessary palettes which provides
you a variety of related controls for working
with images. If none of the palettes are
visible, go to Window in the Menu bar and
choose palettes you need to work with.

195 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Opening an Image File

Follow the below steps below to open a file:

Step 1 : Click on File Menu > Open... (Keyboard Shortcut: Ctrl + O)
An Open dialog box appears:

Step 2 : Select the folder of your image file.
Step 3 : Select the required image file.
Step 4 : Click on the Open button.

Changing the Image Size

Image size refers to the length and
width of a digital image, also called
pixel dimensions. Follow the steps
below to change the image size:

Step 1 : Open the required
image file to change
the size.

196Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Step 2 : Click on Image Menu > Image Size… (Keyboard Shortcut:
Alt+Ctrl+I)

An Image Size
dialog box appears:

Here, the size of image is 900x900
pixels. Print size is 12.5 by 12.5 inch
and the resolution is 72.

Step 3 : Type the required
Width and Height in
the pixel dimension
section.

Note: In the above dialog box, Constrain
Proportions is checked. It means if you enter the value of Width, the value for Height
is proportionately set.

Step 4 : Change the value of
Width and Height
in Document Size
section if you want to
print it.

Note: Think about the resolution of image.
The output is in low quality if you increase
the size of low-resolution image.

Step 5 : Click on OK button
to accept the changes.

Note: The smallest addressable element of a Pixel (Picture Element), Resolution refers
to the number of pixels in an image.

197 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Changing the Image Format

Follow the below steps to change the image format:

Step 1 : Open the required
image file of which
you want to change
the format.

Step 2 : Click on File Menu >
Save As… (Shortcut
Key: Shift+Ctrl+S)

A Save As dialog box
will appear:

Step 3 : Type name in File
Name drop-down list box, if you want to give another name.

Step 4 : Select the desired folder, if you want to save in another
location.

Step 5 : Select the file format that you want to change.

Step 6 : Click on Save button.
198Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Creating a new image file

Follow the below steps to create a new image file:
Step 1 : Click on File Menu > New… (Shortcut Key: Ctrl+N)

A New dialog box will appear:

Step 2 : Type the required value for width, height and resolution
of your page.
Step 3 : Select Color Mode and Background Contents.
Step 4 : Click on OK.
Now, a blank image file will appear on the workspace.

Tools Panel

This palette contains some groups of tools that are used to edit and
manipulate images. Here, text tool and some selection tools of tools panel
are discussed below:

199 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 8

Rectangular Marquee Tool (M) Move Tool (V)
Lasso Tool (L) Magic Wand Tool (W)
Crop Tool (C) Slice Tool (K)
Brush Tool (B)
Spot Healing Brush Tool (J) History Brush Tool (Y)
Clone Stamp Tool (S) Paint Bucket Tool (G)
Eraser Tool (E) Dodge Tool (O)
Blur Tool (R) Horizontal Type Tool (T)
Pen Tool (P) Rounded Rectangle Tool (U)
Eyedropper Tool (I)
Path Selection Tool (A) Zoom Tool (Z)
Notes Tool (N)
Hand Tool (H) Background Color

Foreground Color

Edit in Quick Mask Mode (Q)
Jump to ImageReady (Ctrl+Shift-M)

Tools Panel

Note: The character in the bracket in Tools Panel is shortcut key to activate the required
tool. For example, press V to activate Move tool.

Type Tool

The Type tool is used to add text on to your image file. You might have
to add text while creating poster, invitation or any other graphical design.
You can also apply different effects to text in Photoshop.

200Approved by Curriculum Development Centre, Sanothimi, Bhaktapur