Vedanta Let's Log in Computer Science Book - 9.indd

Vedanta Let’s Log in Computer Science | Book 9

pointer along the edge you want to
trace.

Step 5 : Continue to trace the edge in the same
way until the target area is outlined.

Note: To deselect the selection - Press on Ctrl + D

Magic Wand Too

Unlike other selection tools, the Magic Wand tool selects
the pixels based on tone and color.

Follow the steps to select a part of an image using the Magic Want tool:

Step 1 : Open a required image file.

Step 2 : Select the Magic Wand tool in the Tools panel.

Step 3 : In the Options bar, uncheck
Contiguous if you want to
select nonadjacent areas
of similar color. Check
Contiguous if you want to
select only adjacent areas of
similar color.

Step 4 : Enter the Tolerance value (up to 255). Higher tolerance value
Step 5 : means, wider range of color selection.
Click the color in the image that you want to select.

In the given image of Nepal; Flag,
only the blue color is selected using
the Magic Wand tool.

101 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Adding or subtracting selection

These features are used when you have already selected a part of image and want
to add more part of the image to selection or remove some part of the selection.
Method #1:
Using the Options bar of selection tool

Remove from selection
Add to selection

To add:
Click on Add to selection button and click elsewhere on the image
To subtract:
Click on Subtract from selection button and click inside the selection.

Adding Selection with Magic Wand Tool

Method #2:
Using Keyboard Keys

To add: Press on Shift key and click elsewhere in the image
To subtract: Press on Alt key and click inside the selection.
Note:
These adding and subtracting features are applicable in Marquee and Lasso tools as well.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 102

Vedanta Let’s Log in Computer Science | Book 9

Cropping Images

Cropping is the process of removing portions of an image. Cropping images is one
of the most basic, but important, photo editing features available in Photoshop.
Adobe Photoshop provides you two methods for cropping an image..

Using Crop Tool

Step 1 : Open a required image.

Step 2 : Select the Crop tool from Tools panel or press on C to activate
Crop tool.

Step 3 : Select the area of the image that you want to preserve.

Original Image Cropping After Cropping

Step 4 : Click on Image Menu > Crop or Press Enter.

Using Selection Tool

Step 1 : Open a required image.

Step 2 : Select the part of image you want to preserve using any selection
tool.

Step 3 : Click on Image Menu > Crop.

Original Image Selecting the part of Image Cropped Image

103 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Painting Tools

Photoshop provides several tools for painting and editing image color. The Brush
tool and the Pencil tool work like traditional drawing tools by applying color with
brush strokes. The Gradient tool, Fill command, and Paint Bucket tool apply color
to large areas.

Paint with the Brush tool or Pencil tool
The Brush tool and the Pencil tool paint the current foreground color on an image.
The Brush tool creates soft strokes of color. The Pencil tool creates hard-edged
lines. Follow the steps to paint with Brush tool.

Step 1 : Create a new image document.
Step 2 : Choose a foreground color.
Step 3 : Select either the Brush tool or Pencil Tool
from Tools panel.
Step 4 : Choose a brush from the Brush Presets
picker.
Step 5 : Set tool option
for mode,
Step 6 : opacity, and
so on, in the
options bar.
Do one or more of the following:

Drag in the
image to paint.
To draw a
straight line,
click a starting
point in the
image. Then hold
down Shift and
click an ending
point.
While using the
Brush tool as an
airbrush, hold

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 104

Vedanta Let’s Log in Computer Science | Book 9
down the mouse button without dragging to build up color.

Drawing Tools

The drawing tools (the Pen and Shape tools) let you create and edit shapes. The
drawing tools provide an easy way to create buttons, navigation bars, and other
items.

Draw a custom shape
You can draw custom shapes by using shapes from the Custom Shape Tool from
the Tools bar. Follow the steps to draw a custom shape:

Step 1 : Create a new file (press Ctrl + N).
Step 2 : Select the Custom Shape Tool
The option bar for Custom Shape Tool appears.

Step 3 : Click on the Shape drop-
Step 4 : down button of the option
bar. Select the required
shape.
Drag in your image to draw
the shape.

105 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

POINTS TO REMEMBER

Computer graphics are simply images displayed on a computer screen.

Some popular image editing software includes Adobe Photoshop, GIMP, Adobe
Illustrator, CorelDraw, Paint.net, etc.

Mainly, there are two types of Graphical Format: Raster and Vector

Raster images are composed of tiny dots called pixels. JPG, GIF, BMP, TIF and PNG
are common raster formats.

Vector graphics are composed of paths or lines. AI, PDF, SVG and EPS are common
vector formats.

Image size refers to the length and width of a digital image, also called pixel
dimensions.

Resolution refers to the number of pixels in an image.

Adobe Photoshop is a professional image editing software that can be used to create
a new image or edit an existing one.

Different selection tools available in Photoshop are Marquee Tool, Lasso Tool and
Magic Wand Tool.

Cropping feature allows the user to remove unwanted outer parts of image.
The Brush tool and the Pencil tool work like traditional drawing tools.
The drawing tools (the Pen and Shape tools) let you create and edit shapes.

Exercise

1. Answer the following questions.
a. Define Computer Graphics.
b. Differentiate between Raster format and vector format.
c. What are the things to be considered while using web graphics?
d. Mention the list of Graphical softwares.
e. Differentiate between JPG, GIF, and PNG file formats.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 106

Vedanta Let’s Log in Computer Science | Book 9

2. Give full forms of the following abbreviations:

a) AI b) BMP c) DPI d) EPS e) GIF f) GIMP g) JPEG
m) TIF
h) PDF i) Pixel j) PNG k) PPI l) SVG

3. Tick (√) the correct options:

a. Which is NOT the image editing software?

(i) Adobe Photoshop (ii) CorelDraw (iii) GIMP (iv) MS-PowerPoint

b. Which one of the following formats supports raster graphics?

(i) AI (ii) SVG (iii) JPG (iv) EPS

c. Which is NOT true about PNG file format?

i) It supports transparency. ii) supports animation.

iii) It supports 16 million colors. iv) It supports lossless compression.

d. Which one of the following tools is not available in Tools panel of Photoshop?

i) Lasso Tool (ii) Crop Tool (iii) Type Tool (iv) Copy Tool

e. Shortcut key to open “Save As” dialog box in Photoshop is ………..

i) Shift+Ctrl+S (ii) Shift+Ctrl+A (iii) Ctrl+S (iv) Shift+Alt+S

4. Write down the keyboard shortcuts to accomplish the following tasks in Adobe
Photoshop.

a. To deselect the selection. b. To create a new image file.

c. To add selection d. To remove a part of selection

e. To activate Crop tool f. To activate Type tool

5. Match the following: Group “B”
Group “A” (i) GIF
a. Vector Graphic (ii) EPS
b. Lossless Compression (iii) JPG
c. 256 colors (iv) PNG
d. Raster Graphics (v) TIF
e. Supports Transparency

107 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Lab Activities

i) Open any image file in Photoshop and change its width to 800 pixels. Maintain its
proportions.

ii) Design a New Year Card by inserting various images on to it. Use the various tools you
have learnt to make it beautiful and save it in JPG format.

iii) Search for a few jpg files in your computer. Open any one of them and save the same
file in PNG format.

iv) Open any graphic file in Photoshop and add some text in that file.

v) Open any graphic file and demonstrate the uses of different selection tools.

vi) Open any one JPG file. Remove some unwanted portion using Crop tool and save it in
GIF format.

vii) Run MS-Paint. Create a graphic file and save in BMP format. Open the same file in
Photoshop and save it in JPG format.

Working with Graphics Worksheets

1. Calculate the document size from the below screenshot.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 108

Vedanta Let’s Log in Computer Science | Book 9

2. Suppose you have a 41-megapixel Smartphone. The aspect ratio of the image file is
3:2. Calculate the maximum image size this Smartphone can take.

[Refer “What is a megapixel” section of this chapter in your book]

3. Open any graphic file in Photoshop and find the information below about the file.
a) Image Size in Pixels
b) Document Size in Inches
c) Resolution
d) Format
e) File Size in KB

4. Complete the following tasks using Adobe Photoshop.
a) Take a screenshot (using Print Screen key) of any application or website.
b) Run Photoshop and create a new file.
c) Paste the screenshot into the workspace.
d) Use Crop tool and remove unwanted parts.
e) Use Type tool and place a suitable text on the image.
f) Save the image file in PNG format.

109 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Group

C

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 110

Vedanta Let’s Log in Computer Science | Book 9

Unit

3.1

Chapter Includes:

Evolution of Internet
Contemporary Internet Technologies
Internet Terminologies

Introduction

Internet, also called network of networks, is an Information Super Highway to
access information over the web. 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.

111 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Evolution of Internet 1966
ARPA called for several research
1957 institutions to come together to build a
The Soviet Union launched Sputnik, the computer network.
first manmade satellite
1969
1958 ARPANET launched the first computer
Establishment of Advanced Research network with 4 computers
Project Agency Network (ARPANET) by
US department of Defense (DoD) 1977
The network grew to 111 computers.

1989 2014
Tim Berners-Lee
invented the WWW 1 Billion Websites
on the Internet.
1991
The WWW became
available to the public

1983

The military sector of
ARPANET left the network to
become MILNET.

1985 - 86

5 supercomputer centers formed a
network called NSFNet (National
Science Foundation Network)

Many computer networks shifted
from ARPANET to NSFNet

This system of interconnected
computers became known as the
Internet.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 112

Vedanta Let’s Log in Computer Science | Book 9

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:

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, Tumbir, Pinterest, etc.

Pinterest

E-Commerce

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

Online Banking

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

Digital Wallet

It refers to an online service from where customers can
pay, send, and receive money from their mobile phone and
internet instantly. An individual’s bank account can also
be linked to the digital wallet. You can pay the bills of
electricity, school fees, etc. through digital wallet.

E-Learning Nepal Open University

E-Learning refers to an online service from which
you can learn various subjects without your
presence as in face-to-face classroom. Nepal Open
University has launched many online degrees such
as Masters in Economics, M.Phil. in Education,
etc. These courses are taught through the internet.

113 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

World Wide Web (WWW)

WWW is the combination of all resources and users
on the 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 an 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 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 Web Server

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.

Website

Website is a collection of interlinked
web pages on the WWW located under a
single domain name.

Some examples of websites are: http://
gorkhapatraonline.com/, www.facebook.
com, etc.

Gorkhapatraonline.com

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 114

Vedanta Let’s Log in Computer Science | Book 9

Web Browser

A web browser is a software application such Web Browser
as Mozilla Firefox, Google Chrome, Opera,
Microsoft Edge, etc. 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.

Cloud Computing Mosaic was the first
web browser.

The cloud is just a metaphor
for the internet. Cloud
computing refers to the use of
various services like software
development platform, servers,
storage over the internet. Cloud
computing is the practice of
using network of remote servers
hosted on the cloud (Internet) to
store data, process data rather
than in local server or personal Example of Cloud Storage – Google Drive

server. Cloud service has the ability to pay on demand and scale quickly the
resources according to the requirement. For example, with your Google account,
you can access Google Drive with 15 GB free space. You can save your files in
Google Drive like in Pen Drive through drive.google.com.

Different types of Cloud Services:
a. SaaS (Software as a Service)
b. PaaS (Platform as a Service)
c. IaaS (Infrastructure as a Service)

Internet of Things (IoT)

The interconnection via the internet of computing devices embedded in everyday
objects, enabling them to send and receive data.

– Oxford Dictionary

115 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Internet of Things (IoT) is Internet of Things (IoT)
considered as a system of
interrelated computing device
that are provided with the
unique identifiers or UID
and has ability to transfer
data over a network without
human-to-human or human
to computer interaction. The
interconnection of computing
device using the internet
embedded in everyday object
enabling them to send and
receive data.

A simple example of IoT is that you can switch on or off your bedroom lights from
anywhere through mobile devices.

Internet of Things (IoT) application areas:

The IoT affects almost all the areas of our daily lives. Some of the main application
areas are:

Home and Home appliances Health medical
Fitness and wellness Factory and industry
Agriculture Smart Cars and roads
Smart Cities

URL

URL stands for Uniform Resource Locator, the unique Internet address through
which we can visit different websites. URLs are used to address and access
individual web pages and web contents.

Protocol Top Level Domain Path

http://moe.gov.np/category/curriculums.html

Country Domain Document
Domain Name

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 116

Vedanta Let’s Log in Computer Science | Book 9

DNS

DNS stands for Domain Name Server. It is similar
to phonebook. Phonebook provides phone number
of a person; DNS is a server that maintains a
directory of domain names and translate them to
IP (Internet Protocol) addresses. For example, the
domain name vedantapublication.com.np might
translate to 139.59.19.146.

Home Page

The main or first page of a website which gives DNS

detailed information of its owner and provides
links to its other parts is called home page. A home page is the initial page someone
sees when he or she opens up a website on the Internet. Every website, regardless
of what type of site it is, has a home page. It is also known as index page.

HTTP

Hyper Text Transfer Protocol (HTTP) is a communication protocol that allows
users of the World Wide Web to exchange information found on web pages. The
HTTP is responsible for sending a request of client through a web browser to a web
server and transferring the requested document to the client computer through the
web browser. It was developed by the Netscape Communications Corporation to
facilitate a secure connection for the client/server model.

HTTPS

Hyper Text Transfer Protocol Secure (HTTPS) is the secure version of HTTP. It
is the protocol over which data is sent between browser and the web server are
encrypted. HTTPS keeps the information like password, credit card details, etc.
safe from hackers.

Search Engine Google Search Engine

Search engine is one of the mostly used Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
online service that allows internet users
to search for web content (articles, data,
video, images, etc.) through the WWW.
User has to supply keywords or provide
a voice input into a search engine and

117

Vedanta Let’s Log in Computer Science | Book 9

receives a list of results with the link to the desired content. Top search engines
are Google, Bing, Yahoo Search, Ask.com, AOL.com, and Baidu.

Downloading and Uploading Downloading and Uploading

Downloading refers to copying the web contents like
document, image, video, etc. from website (stored in web
server on the internet) and saving it to your computer
locally. For example, downloading e-mail attachment.

Uploading refers to the transmission of your digital files
from your local computer to the web server to share
with other people. For example, posting photos on your
Facebook wall.

POINTS TO REMEMBER

Internet is an Information Super Highway, also called network of networks, to access
information over the web.

Contemporary Internet Technologies are Social Media, E-Commerce, Online Banking,
Digital Wallet, E-learning, etc.

WWW is a collection of interlinked HTML documents stored on a web server that can
be accessed through internet connected web browser.

We need to store our web documents on Web Server to make available them publicly.

Cloud Computing provides the online resources (software, platform, infrastructure)
on demand basis. Google Drive is an example of cloud storage.

IoT is a system of interrelated computing device to exchange information over a
network without human-to-human or human to computer interaction.

Search engine is an online service that allows the internet users to search for web
content. Google, Bing, Baidu are some popular search engines.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 118

Vedanta Let’s Log in Computer Science | Book 9

Exercise

1. Answer the following questions.

a. Define web page, home page, and website.
b. Define Search Engine with few examples of it.
c. What is cloud computing? Mention the different types of cloud services.
d. Differentiate between HTTP and HTTPS.
e. What is a Web Browser? Why is it needed? Give some examples of Web Browser.
f. Define downloading and uploading.
g. List out some of the popular contemporary Internet technologies.

2. Give full forms of the following abbreviations:

a) ARPANET b) DNS c) FTP d) HTML e) HTTP
i) IP j) NSFNet
f) HTTPS g) IaaS h) IoT n) URL o) WWW

k) PaaS l) SaaS m) TCP/IP

3. Tick (√) the correct options:

a. ............... is simply known as “the Web.”

(i) WWF (ii) WWW (iii) WWII (iv) WAN
(iv) IaaS
b. Which is not a Web Browser?

(i) Google Chrome (ii) Opera

(iii) Apple Safari (iv) iCloud

c. Which is not a Search Engine?

(i) Baidu (ii) Facebook

(iii) Google (iv) Bing

d. Which is not a cloud service?

(i) DaaS (ii) SaaS (iii) PaaS

119 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

e. Translates domain name into IP.

(i) DNS (ii) FTP (iii) DHCP (iv) TCP/IP

f. A communication protocol responsible for sending a request of user through a web
browser.

(i) TCP/IP (ii) SMTP (iii) HTTP (iv) POP

4. Write down the technical term for the following statements:
a. A computer that delivers web pages.
b. Collection of interlinked web pages.
c. A software that interprets and display the web documents.
d. A metaphor for the Internet.
e. Communication between devices without human-to-human interaction.
f. Unique Internet address of web contents.
g. The main page of a website.
h. Secure version of HTTP.
i. Online service that allows searching for web content.

5. Match the following: Group “B”
Group “A” i. Pay from Mobile phone
ii. Financial transaction through online
a. Social Media iii. Virtual Classroom
b. E-Commerce iv. Buying and selling online
c. Online Banking v. Share information
d. Digital Wallet
e. E-Learning

6. Write short notes on:
a) DNS
b) Internet of Things (IoT)
c) Evolution of Internet

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 120

Vedanta Let’s Log in Computer Science | Book 9

Internet and Web Technology Worksheets

1. Complete the crossword puzzle given below:

ACROSS 1 DOWN
1 From local computer to 2 Unique Internet address of any
4 web content
webserver 5
Computer network established
3 A digital wallet in 1958

5 The first page of a website Collection of interlinked
webpages
6 A type of cloud service
Protocol that communicate
7 Interconnection between securely
devices through the Internet

8 A Search Engine

12

3 4
5
6
8 7

121 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9HTTP

2. Browse any four websites that use HTTP protocol and four other websites that use
HTTPS protocol and fill the table below:
Name of Websites

1. .............................................................................................................
2. .............................................................................................................
3. .............................................................................................................
4. .............................................................................................................

HTTPS 1. .............................................................................................................
2. .............................................................................................................
3. .............................................................................................................
4. .............................................................................................................

3. Open Google Search Engine. Type the keywords below as query and write about the
results appeared in SERP (Search Engine Result Page).

Query Explanation

define: Cloud Computing

inurl:moe result

filetype:pdf internet history

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 122

Vedanta Let’s Log in Computer Science | Book 9

Unit

3.2

Chapter Includes:

Evolution of Internet
Contemporary Internet Technologies
Internet Terminologies

Introduction

HTML stands for Hyper Text Markup Language that Tim Berners Lee
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 in Geneva, Switzerland for presenting
information on the Internet. In 1994, World Wide Web
Consortium (W3C) was formed and this is the body, which
controls the HTML standards at present.

Basic Features of HTML

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.

123 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Types of HTML Tags

a) Container Tag
The container tag has both opening and closing tag.

b) Empty Tag
The Empty tag is used by itself.

Container Tag Empty Tag

Also called Paired Tag. Also called singular or stand-alone tag.

Come in pairs with opening and Does not have a companion tag.
closing tags.

Example: Example:

<B> Hello Friends </B> <img src = “images/1.jpg”>
<B> - Opening tag

</B> - Closing tag

Basic syntax of container tag:

<opening tag> ….…content to display……. </closing tag>

The starting tag activates the effect and the ending tag turns the effect off. <html>
………..</html>, <body>………..</body>, <font>……..</font>, <b>…..</b>, etc. are
some examples of container tags.
Example:

<U> Hello Friends </U>

Here, <U> refers opening tag and </U> refers closing tag to underline the text.

Basic syntax of empty tag:
<an empty tag>

It has a specific function assigned to it. It does not consists of end tag. <BR>,
<HR>, <IMG>, etc. are some examples of empty tags.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 124

Vedanta Let’s Log in Computer Science | Book 9

Example:
<BR>

Here, <BR> is an empty tag used to break the line. It does not have closing tag.

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.

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> Contains the
<title> web page title

Title of the web page Contains the information
</title> 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

125 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Basic HTML Tags

Basic tags are the main tags of a HTML. Every HTML file should contain atleast
these four tags: HTML, HEAD, TITLE, and BODY. These are called basic tags.

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 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>

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 126

Vedanta Let’s Log in Computer Science | Book 9

The <BODY> Tag
The <body> tag defines the document's body. 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.

Your first web page

Run Notepad and type the following HTML tags:

127 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

<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.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 128

Vedanta Let’s Log in Computer Science | Book 9

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:

129 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

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>

Attributes of HTML tags

Attributes provide additional information about HTML elements.

A tag may have one or more than one attribute.
An attribute is included within either a starting tag or an empty tag.
Ending tag cannot have attributes.
An attribute consists of two parts: attribute name and its value.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 130

Vedanta Let’s Log in Computer Science | Book 9

Syntax: Example:
<Tag Name attribute = “value”>
<BODY BGCOLOR = “red”>

This is the test page where the
background of the webpage appears in
red color.

</BODY>

Note: BGCOLOR is attribute of <body> tag and "red" is value of the attribute.

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 attribute. The default alignment of paragraph is left.

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>

131 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

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:

HTML Tags Description Example Output

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

Used to give Rapti
superscript effect to
the text.

Used to display big
text.

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

Used to give Teletype <TT> Mechi </TT> Mechi
format to the text.

Used to strike <STRIKE> Gandaki </ Gandaki
through text. STRIKE>

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 132

Vedanta Let’s Log in Computer Science | Book 9

Practice Yourself

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

<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>

133 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

<FONT> attributes Description
FACE
SIZE Sets the font to the specified font name.

COLOR Sets the size of the text. Size can take values between 1 and 7.
The default size is 3.
Sets the color 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>

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 the document by inserting
horizontal line. It is an empty tag.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 134

Vedanta Let’s Log in Computer Science | Book 9

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 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>

135 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

CENTER Tag

The <CENTER> tag is used to a text, lists, images, tables to the center of the page
Syntax:
<CENTER> text | image | table </CENTER>

Example:
<CENTER><H1>Hami Nepali, Hamro Nepal !!!</H1></CENTER>

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 will be 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. JPEG format image files are generally bigger
in size than the image in GIF format but have more natural look in comparison.

IMG Tag

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

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 136

Vedanta Let’s Log in Computer Science | Book 9

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

<IMG> attributes Description
SRC
ALT Specifies the URL (web address) of the image
ALIGN
BORDER Provides alternate text for an image, if the user is unable to view
HEIGHT the image

WIDTH Specifies position of the image: left and right

HSPACE: Specifies the size of the border

VSPACE: Specifies the height of an image either in pixel value or percentage
of the browser’s window
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 target images in the sub-folder.
iv) Save your HTML document inside the folder of your name.
Note:
The image filename is case sensitive. Be Careful! Computer.JPG is not same as computer.
jpg.

137 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

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

<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.

HTML Lists

A list is a record of short pieces of information, such as people’s names, places or
item’s name presented in an order. The most commonly supported HTML lists are:
Ordered List and Unordered List.

Ordered List - <OL> Tag

An ordered list is also called numbered list or a sequential list. The list items
can be listed in various sequential formats: numerical, alphabetical, or roman
alphabetical. The default is numerical. The ordered list starts with <OL> tag and
closes with </OL> tag. Each item starts with <LI> tag.

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 138

Vedanta Let’s Log in Computer Science | Book 9

Syntax:
<OL START = value TYPE = value>

<LI> … </LI>
…..
</OL>

<OL> attributes Description
TYPE
START Set the type of numbering sequence used for list item. The
VALUE values can be assigned to the attribute are “A”, “a”, “I”, “i” and
“1”. Arabic numbers are the default.

Set the starting number for the list.

Change the numbering sequence in the middle of an order list. It
is to be specified with the <LI> tag.

Examples - Ordered List in HTML

<OL> <OL TYPE=A> <OL START = 10>
<LI>Keyboard</LI> <LI>Keyboard</LI>
<LI>Mouse</LI> <LI>Mouse</LI> <LI>Keyboard</LI>
<LI>Scanner</LI> <LI>Scanner</LI>
<LI>Joystick</LI> <LI>Joystick</LI> <LI>Mouse</LI>

</OL> </OL> <LI VALUE =
3> Joystick</LI>
1. Keyboard A. Keyboard <LI>Scanner</LI>
2. Mouse B. Mouse
3. Scanner C. Scanner </OL>
4. Joystick D. Joystick
10. Keyboard

11. Mouse

3. Joystick

4. Scanner

Unordered List - <UL> Tag

An unordered list is also called bulleted list. The list items in the lists are preceded
with bullets or symbols instead of numbers. The unordered list starts with <UL>
tag and closes with </UL> tag. Each item starts with <LI> tag.

139 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Syntax:
<UL TYPE = value>

<LI> … </LI>
…..
</UL>

<UL> attributes Description
TYPE
Specifies the type of bullet: disc, circle, and square. Default is
disc.

Examples - Unordered List in HTML

<UL> <UL TYPE = square> <UL TYPE = circle>
<LI>Football</LI>
<LI>Volleyball</LI> <LI>Football</LI> <LI>Football</LI>
<LI>Basketball</LI>
<LI>Tennis</LI> <LI>Volleyball</LI> <LI>Volleyball</LI>

</UL> <LI>Basketball</LI> <LI>Basketball</LI>
Football
Volleyball <LI>Tennis</LI> <LI>Tennis</LI>
Basketball
Tennis </UL> </UL>

Football Football

Volleyball Volleyball

Basketball Basketball

Tennis Tennis

Definition List - <DL> Tag

This tag is used to describe a term/name in conjunction with <DT> (Definition
Term) and <DD> (Definition Description) tags.

Syntax Example Output

<DL> <DL> Keyboard

<DT> Definition Term <DT> Keyboard An input device

<DD> Definition Description <DD> An input device Printer

<DT> …. <DT> Printer An output
<DD> ….
<DD> An output device device

……………. </DL>

</DL>

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 140

Vedanta Let’s Log in Computer Science | Book 9

HTML Links - Hyperlinks

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 three basic parts: start and end tags, the
link target and the link text.

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
another web page to point to a specific section.

Describe the contents of the link.

TARGET Allows to open linked page in current or new window.

HTML supports different types of links:

a) External Link

It links to an external web document of same or different website.

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.

141 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

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".

b) Internal Link

It links to the specific location of the same web page. To create an internal
link, we require at least two anchor tags:

i) One with NAME attribute to specify a location.
ii) Another with HREF attribute to create a link to the above location.

Syntax 1:
<A NAME = “location name”> </A>
[Note: This syntax is used to define location name.]

Syntax 2:
<A HREF = “#location name> Link Text </A>
[Note: This syntax is used to create link to the defined location]

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>

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 142

Vedanta Let’s Log in Computer Science | Book 9

<a name="up"></a>

<FONT SIZE=2><I>The name of this location is up.</I></FONT>

<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="#down">Go Down</a><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>

<a name="down"></a>

<FONT SIZE=2><I>The name of this location is down.</I></FONT>

<a href="#up">Go Top</a>

</BODY>

</HTML>

Inserting Table in HTML

Table is one of the main objects to control layout of a webpage. Tables allow you to
present data in rows and columns. When we store data in table, data is readable.
The table is a technique of data management.

143 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

<TABLE> Tag

The table in HTML starts with <TABLE> tag and closes with </TABLE> tag. The
table for HTML has mainly three parts. They are:
a) CAPTION: The title of table is called caption. It provides title for the table.
b) Heading: The field of table is called heading. Headings are column name in

which particular data are stored.
c) Data: The stored values below all the headings or fields are called data.

<TABLE> attributes Description
BORDER Specifies the border of the table. Default is 0.
BGCOLOR
CELLSPACING Example: <TABLE BORDER = 2>
CELLPADDING Specifies the background color for the entire table.

WIDTH Example: <TABLE BGCOLOR = RED>
Specifies the number of spaces between cells.
HEIGHT
BORDERCOLOR Example: <TABLE CELLSPACING = 4>
BACKGROUND Specifies the number of spaces within the cell.

ALIGN Example: <TABLE CELLPADDING = 5>

ALIGN Specifies the width of the table. Value can be either absolute (number
of pixels) or relative (percentage).

Example: <TABLE WIDTH = 400>

<TABLE WIDTH = 70%>

Specifies the height of the table. Value can be either absolute (number
of pixels) or relative (percentage).

Example: <TABLE HEIGHT = 200>

Sets the border color of the table.

Example: <TABLE BORDERCOLOR=Green>
Sets the background picture of the table.

Example: <TABLE BACKGROUND=”image1.jpg”>
Specifies the horizontal alignment of the table.

Example <TABLE

ALIGN=CENTER>

[Options: LEFT | CENTER | RIGHT]
Specifies the vertical alignment of the table.

Example: <TABLE VALIGN=CENTER>

[Options: TOP | MIDDLE | BOTTOM]

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 144

Vedanta Let’s Log in Computer Science | Book 9

Creating a Table

Creating a table requires you to use the following tags: TABLE, TR, TD, TH and
CAPTION.

The <TR> Tag

The <TR> tag is used to specify a table row. The contents of a row are placed
between <TR>……</TR> tags.
Note: Number of <TR> tags = Number of rows in a table

<TR> attributes Description
BGCOLOR Assigns a background color to a particular row.

Example: <TR BGCOLOR = red>

The <TD> Tag

The <TD> tag is used to define table data and must appear within table rows.
Table data must be written within <TD> and </TD> tags.

<TD> attributes Description
ALIGN
Specifies the horizontal position of the content of the cell. Possible
ALIGN values: left, center, and right.

WIDTH Specifies the vertical position of the content of the cell. Possible
values: top, middle, and bottom.
HEIGHT
Specifies the width of the cell. Value can be either absolute (no. of
BGCOLOR pixels) or relative (percentage).
COLSPAN
ROWSPAN Specifies the width of the cell. Value can be either absolute (no. of
pixels) or relative (percentage).

Assigns a background color to a particular cell.

Allows you to create a cell that spans a number of columns.

Allows you to create a cell that spans a number of rows.

The <TH> Tag

The <TH> tag is used to define table header for table data. Table header appears
bold, and center aligned by default. Table header must be written within the
<TH>….</TH> tags.

Note: The attributes of <TH> tag are same as <TD> tag.

145 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

The <CAPTION> Tag

The <CAPTION> tag gives title to the table. Table caption must be written within
<CAPTION> and </CAPTIOIN> tags.

Example 1 – Tables in HTML

<TABLE BORDER= 2 BGCOLOR=”PINK”> Output
<CAPTION><FONT SIZE=”5”
Students Record
COLOR=darkgreen>Students Record
</FONT></CAPTION> Symbol Name Class
Number
<TR BGCOLOR=”skyblue”>
<TH> Symbol Number </TH> 1001 Lakpa Sherpa 9
<TH>Name </TH>
<TH> Class </TH> 1002 Menuka Lama 9

</TR> 1003 Samir Silwal 9
<TR ALIGN=CENTER>
Description
<TD> 1001</TD>
<TD>Lakpa Sherpa</TD> Caption is “Students Record” appears
<TD> 9 </TD> in darkgreen color.
</TR>
<TR ALIGN=CENTER > Background color of the table is pink.
<TD> 1002</TD>
<TD>Menuka Lama</TD> Background color of first row is
<TD> 9 </TD> skyblue.
</TR>
<TR ALIGN=CENTER> Alignment of each row is center.
<TD> 1003</TD>
<TD>Samir Silwal</TD> The first row is table header.
<TD> 9 </TD>
</TR>
</TABLE>

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 146

Vedanta Let’s Log in Computer Science | Book 9

Example 2 – Images inside Tables in HTML
<TABLE BORDER= 1>

<CAPTION><FONT SIZE=4><B> Endangered Species of Nepal
</B></FONT></CAPTION>
<TR>

<TD> <img src=”images/clouded_leopard.jpg”></TD>
<TD><img src=”images/red_panda.jpg”></TD>
<TD> <img src=”images/rhinoceros.jpg”> </TD>
</TR>
<TR ALIGN=CENTER >
<TD> Clouded Leopard</TD>
<TD>Red Panda</TD>
<TD> Rhinoceros </TD>
</TR>
</TABLE>

Output

Endangered Species of Nepal

Clouded Leopard Red Panda Rhinoceros

Example 3 – Merging Columns (COLSPAN) of Table in HTML
<TABLE BORDER= 1>

<TR><TD COLSPAN=6 ALIGN=CENTER> Time Table</TD></TR>
<TR><TD><B>Sun</B></TD><TD><B>Mon</B></TD>

<TD><B>Tue</B></TD><TD><B>Wed</B></TD>
<TD><B>Thu</B></TD><TD><B>Fri</B></TD></TR>
<TR><TD>English</TD><TD>Maths</TD><TD>Social</TD>

<TD>g]kfnL</TD><TD>Arts</TD><TD>Sports</TD></TR>

</TABLE>

147 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Output

Time Table Fri
Sun Mon Tue Wed Thu

English Maths Social g]kfnL Arts Sports

Description
In the first row, 6 columns have merged using COLSPAN attribute of <TD> tag.

Example 4 – Merging Rows (ROWSPAN) of Table in HTML

<TABLE BORDER= “2” BORDERCOLOR=FF2321 CELLSPACING=0>

<TR><TD><U>ID</U></TD><TD><U>Name</U></TD>

<TD><U>Subject</U></TD><TD><U>Marks</U></TD>

</TR>

<TR><TD ROWSPAN=3>1</TD><TD ROWSPAN=3>Uttara</TD>

<TD>English</TD><TD>85</TD></TR>

<TR><TD>Maths</TD><TD>95</TD></TR>

<TR><TD>Social</TD><TD>90</TD></TR>

<TR><TD ROWSPAN=3>2</TD><TD ROWSPAN=3>Atharva</TD>

<TD>English</TD><TD>87</TD></TR>

<TR><TD>Maths</TD><TD>98</TD></TR>

<TR><TD>Social</TD><TD>85</TD></TR>

</TABLE>

Output Description

ID Name Subject Marks In the second and third rows, the first and
English 85 second cells span 3 rows using ROWSPAN
95 attribute of <TD> tag.
1 Uttara Maths 90
Social 87 CELLSPACING attribute of <TABLE> tag
English 98 is also used to specify 0 space between
85 cells.
2 Atharva Maths
Social

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 148

Vedanta Let’s Log in Computer Science | Book 9

Forms in HTML

Have you filled up any form in a website? HTML form is required when you want to
collect some data from your visitors. HTML form or simply a web for allows a user
to enter the required data and it can be submitted to a server for processing. Let’s
create a similar form using HTML tags.
An HTML form contains various form elements like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.

<FORM> Tag

The <FORM> tag is used to create an HTML form.

Syntax: What are form elements?
<FORM>
Form elements are different types of input elements:
.....
Form Elements a) Textbox b) Radio Button
.....
</FORM> c) Checkbox d) Textarea

e) Select f) Submit and Reset Buttons

Text Input

This HTML form element allows user to input a one-line text data.

HTML Tag Output

<input type=”text”>

Example
<form>

First name: <input type=”text”
name=”firstname”><br><br>
Last name: <input type=”text”
name=”lastname”>
</form>

149 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur

Vedanta Let’s Log in Computer Science | Book 9

Radio Button Input

This HTML form element allows user to select ONLY one option from a limited
number of choices.

HTML Tag

<input type=”radio”>

Example Output

<form>

<input type=”radio” value=”eight”> Grade VIII<br>

<input type=”radio” value=”nine” checked> Grade IX<br>

<input type=”radio” value=”ten”> Grade X

</form>

<SELECT> Element

This HTML form element allows user to select one or more options from a drop-
down list.

HTML Tags Output

<select> <option> …. </option> …. </select>

Example
<form>

<p><strong>Select your favorite
colour</strong></p>
<select>

<option value=”red”>Red</option>
<option value=”blue”>Blue</option>
<option value=”green”>Green</option>
<option value=”orange”>Orange</option>
<option value=”purple”>Purple</option>
<option value=”yellow”>Yellow</option>
</select>
</form>

Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 150