JBD Computer Studies Book 8

Healilng Brush Tool

You can use the Healing Brush tool to paint with sampled pixels (the source)
from an image. The flawed area is called the destination. This tool also matches
the texture, lighting, transparency and shading of the sampled pixels.

• Open the image.

• Select the Healing Brush tool from the toolbox.

• From the Options bar, select the following:

i. Brush Size

ii. Brush Mode

iii. Select the type of source. Select Sampled to used pixels form the current
image. Choose Pattern to use pixels from a pattern you have selected
from the Pattern picker drop-down palette.

iv. Select Aligned to sample pixels continuously without losing the current
sampling point, even if you release the mouse button. Deselect this
option if you want to continue using the sampled pixels from the initial
sampling point each time you stop and resume.

v. Select Sample All Layers to sample data from all visible layers.

vi. Place the pointer on the image area to select the sample color. Press Alt
key and click the mouse to select the sample.

vii. Click and drag the image.

Clone Stamp Tool

The Clone Stamp tool is used for cloning or duplicating selected areas of an image.

• Open the image.

• Click on the Clone Stamp tool in the toolbox.

• Hold down the Alt key and click on the part of the image to be cloned. Then
release the Alt key.

• Click and drag the mouse over the area of the image to be replaced with the
cloned pixels.

• You can change the Opacity value, Brush size, etc. in the Options bar.

JBD
Computer Studies-8 151

Eraser Tool
The Eraser tool is used to erase portions of an image. Clicking on the down-arrow
of this tool, you get the following options.
i. Eraser Tool
ii. Background Eraser Tool
iii. Magic Eraser Tool
The steps to use the Eraser tools are:
• Open the image.
• Click on the Eraser tool in the toolbax.
• In the Options bar, select the eraser mode according to which the shape of the

Eraser tool changes.

i. Brush
ii. Pencil
iii. Block
• In the Options bar, set the value of Opacity. The higher the opacity value, the

more the number of pixels erased at a time.
• Click and drag on the area of the image to be erased.

Blur Tool
The Blur tool is used to make a part of an image blurred or softened.
• Open the image.
• Click on the Blur tool in the toolbox.
• In the Options bar, select the appropriate brush from the palette.
• Click and drag on the image to blur the pixels.

JBD
152 Computer Studies-8

Smudge Tool
The Smudge tool is used to create the effect of smudging wet paint with a finger.
• Open the image.
• Select the Smudge tool from the toolbox.
• Click and drag on the image to smudge an area.

Dodge Tool
The Dodge tool is used to lighten the pixels in an image. Using this tool, you can
make unnecessarily drak portions of an image lighter.
• Open the image.
• Select the Dodge tool from the toolbox.
• In the Options bar, Click the down-arrow button of the Brush option, and

select a softer-edged brush to get better results.
• In the Options bar, select the Range and set the value of Exposure option.
• Click and drag the mouse on the image area to lighten the pixels.

Burn Tool
The Burn tool is used to darken the pixels.
• Open the image.
• Make a selection to darken the area (using any of the selection tools),or you

can darken the whole image without using any of the selection tools.
• Select the Burn tool in the toolbox.
• In the Options bar, set the percentage for Exposure option.
Note: Exposure determines the extent of the area to be darkened.

JBD
Computer Studies-8 153

Working with Layers
One of Photoshop’s most powerful features is the use of layers. Each layer in a
Photoshop document is a separate image which can be edited apart from any
other layer. A layer can be envisioned as an image on a sheet of clear material.
Together, all the layers form a stack of images:
Layers Palette
The Layers palette lists all layers, groups, and layer effects in
an image. You can use the Layers palette to show and hide
layers, create new layers, delete layers, etc. To display the
Layers palette, select Window | Layers.
Background Layers
When you create a new image with a white background or a colored background,
the lowermost image in the Layers palette is called Background. An image can
have only one background. You cannot change the stacking order of a Background
or its opacity. But, you can convert a background layer to a regular layer.
Creating a New Layers
A new layer is always created above the selected layer. To create a new layer:
• Choose Layer | New Layer.

• The New Layer dialog box appears.

JBD
154 Computer Studies-8

Set the following options:

i. The default name of the new layer is Layer 1. You
can give an appropriate name to the layer.

ii. Click the down-arrow of the Color box and the
color for the layer.

iii. Set the Opacity value.

iv. Click on the OK button.

• A new blank layer will be created which can be seen in
the Layers palette.

Show / Hide a Layers
To show/hide a layer:
• In the Layers palette, click the eye icon next to a layer.

Selecting Layers

You can select one or more layers to work on them. For activities like painting,
drawing, editing you can work on only one layer at a time. A single selected layer
is called the active layer.

To select layers in the Layers palette, do one of the following:

i. Click a layer in the Layers palette.

OR

ii. To select multiple contiguous layers, click the first layer and then Shift-
Click the last layer.

iii. To select all layers, choose Select | All Layers.

Changing the Order of Layers
To change the order of layers:
• Click and drag the layer up or down in the Layers palette.
• Release the mouse button when the highlighted line appears where you

want to place the layer.

Rename a Layers
To rename a layers:
• Double-click the layer in the Layers palette.
• Type a new name.

JBD
Computer Studies-8 155

Delete Layers(s)
To delete a layer or layers, the steps are:
• Select one or more layers in the Layers palette.
• Do one of following:
i. Click the Delete icon in the Layers palette
ii. Choose Layer | Delete | Layer.

Flattening all Layers
Flattening reduces the file size by merging all visible layers into the background.
Any remaining transparent areas are filled white. The steps are:
• Make sure that all the layers are visible.
• Select Layer | Flatten Image.

Layer Effects
Photoshop provides a number of effects, such as, shadows, glows, bevels, etc.
that let you quickly change the appearance of a Layer’s contents. The steps to
apply Layer effects are:
• Select a layer in the Layer palette.
• Do one of the following:
i. Click the Layer Styles button at the bottom of the Layers palette

and choose and effect from the list.
ii. Choose an effect from the Layer | Layer Style submenu.

JBD
156 Computer Studies-8

• The Layer Style dialog box appears.

• Set effect options in the Layers Style dialog box.
• If desired, you can add another effect by clicking the check box to the left of

the effect name.
• Click on the OK button.
Working with Text
For typing text in a Photoshop document, we have to use the Type tool. Whenever
we type some text in Photoshop, it is created on a separate layer called the Type
Layer. The steps to add text to an image are:
• Open the image.
• Click the Type tool in the toolbox.
• In the Options bar, select:
Font
Size
Color

Set the font type

Set the font size
• Click the left mouse button of the image and type the text. Notice that the

type is created in a new layer.

JBD
Computer Studies-8 157

Moving the Text
You can move the text from one position to another on the image. The steps are:
• Select the Type layer in the Layers palette.
• Click on the Move tool in the toolbox.
• Keep the mouse pointer on the text. Click and drag it to the desired position

on the stage.
• Release the mouse button.

Warping Text
Warping lets you distort text to a variety of shapes. For example, you can warp
text in the shape of an arc or a wave. The steps are:
• Select the Type layer.
• Select the Type tool in the toolbox.
• Click Create tool in Warped Text button in the Options bar.

Create Warped Text button

• The Warp Text dialog box appears. Click the drop-down arrow of the Style
box and select a style.

• You can also select the orientation - Horizontal or Vertical.
• If required, specify the values for Bend, Horizontal Distortion, or Vertical

Distortion.
• Click on the OK button.

Using Filters
Filters are used to add a variety of special effects to our image. For example, you
can change the look of your image by giving them the appearance of mosaic tiles,
adding lighting or distortion. You can modify the image in a number of ways
using filters.

Applying Filter
To apply a filter, the steps are as given below.
• Do one of the following:
i. To apply a filter to an entire layer, make sure that the layer is active.
ii. To apply filter to a portion of a layer, select that area.

JBD
158 Computer Studies-8

• Choose a filter from the submenus in the Filter menu.
• If no dialog box appears, the filter effects is applied. If a dialog box appears,

enter values or select Options and then click OK. The selected filter effect will
be applied.

Filter Gallery
The Filter Gallery lets you apply filters cumulatively and apply individual filters
more than once.
You can also rearrange filter Gallery:
• Select Filters | Filter Gallery.
• Click a filter category name to display thumbailnails available filter effects.

Applying Filters from the Filter Gallery
To apply filters from the Filter Gallery, the steps are:
• Do one of the following:
i. To apply a filter to an entire layer, make sure that the layer is active or selected.
OR
iii. To apply a filter to an area of a layer, select that area.
• Select Filter | Filter Gallery.
• Click a filter name to add the first filter. The Filter name appears in the applied

filter list at the lower right corner of the Filter Gallery dialog box.
• Enter values or choose options for the filter you have selected.
• You can do the following;
i. To apply filters cumulatively, click the New Effect Layer icon and choose an

additional filter to apply. Repeat this step to add more filters.
ii. To remove applied filters, select a filter in the applied filter list and click the

Delete icon.
• After applying all the filters, click OK.

JBD
Computer Studies-8 159

C Dompu- ictionary

Graphics : Any computer device or program that makes a
computer capable of displaying and manipulating
pictures.

Graphics software : A program or collection of programs that enable a
person to manipulate visual images on a computer.

Adobe Photoshop : Graphics editing program developed and published
by Adobe Systems.

Retouching tools : Tools used to change or edit pixels arrangements in an
image.

Wrapping : To distort text to a variety of shapes like an arc, wave,
etc.
Recap

• Graphics software or image editing software is a program or collection of
programs that enable a person to manipulate visual images on a computer.

• Most popular graphic software are Adobe Illustrator, Corel Draw and
Photoshop.

• Adobe Photoshop is a graphics editing program developed and published by
Adobe Systems.

• Photoshop uses the foreground color to paint, fill and stroke selections.

• The background color is used to make gradient fills and fill in the erased areas
of an image.

• The Retouching tools available in Photoshop are used to change or edit the
pixel arrangements in an image.

• The Spot Healing Brush tool is used to remove blemishes, scars, spots and
other imperfections in your photograph.

• The Clone Stamp tool is used for cloning or duplicating selected areas of an image.

• The Eraser tool is used to erase portions of an image.

• The Blur tool is used to make a part of an image blurred or softened.

• The Smudge tool is used to create the effect of smudging wet paint with a
finger.

• The Dodge tool is used to lighten the pixels in an image.

• The Burn tool is used to darken the pixels.

• Layers allow you to work with one element of an image without disturbing the
others.

JBD
160 Computer Studies-8

Review Yourself

1. State whether the following statements are true or false.

a. Adobe Photoshop is a graphics editing application with a wealth of tools
and commands for working on digital images or bitmaps.

b. Photoshop allows you to work with the Foreground color and the
Background color.

c. The Clone Stamp Brush tool is used to remove blemishes, scars, spots,
and other imperfections in your photograph.

d. Layers allow you to work with one element of an image without
disturbing the others.

e. Filters are used to add a variety of special effects to our image.

2. Match the following.

Smudge tool used to remove blemishes, scars, spots, and
other imperfections in your photograph.
Spot Healing Brush tool
used for cloning or duplicating selected areas
Blur tool of an image.
Eraser tool
used to erase portions of an image.
Clone Stamp tool
used to make a part of an image blurred or
softened.

used to create the effect of smudging wet
paint with a finger.

3. Fill in the blanks.

a. The _______________ tools available in Photoshop are used to change or
edit the pixel arrangements in an image.

b. The _______________ tool is used to remove blemishes, scars, spots, and
other imperfections in your photograph.

c. The _______________ tool is used to erase portions of an image.

d. The ____________ tool is used to make a part of an image blurred or
softened.

e. The _____________ tool is used to create the effect of smudging wet paint
with a finger.

f. The ______________ tool is used to lighten the pixels in an image.

g. The _______________ tool is used to darken the pixels.

JBD
Computer Studies-8 161

4. Name the tools used for the following purposes.
a. Make free - form selections in the desired shape.
b. Moving an image, or a part of an image, from one location to another.
c. Fill a selected portion or an entire layer of an image with transitions of
one color to another.
d. Draw predefined shapes such as flowers, moon, arrows, leaves,etc.

5. Answer the following questions.
a. What is the default background color and the foreground color?
b. Name any three retouching tools available in Photoshop.
c. What is the use of layers?
d. What is the use of flattening the layers of an image?
e. What are filters used for?
f. What does the filter gallery help you do?
g. What is the difference between the Dodge tool?
h. For what purpose can you use the Healing Brush tool?

Hands-On Practice Time

a. Draw a car and fill it with gradient colours.
b. Download photos of different flowers and crop the unwanted parts of the

flowers.
c. Draw a house and paste the pictures of flowers from other files.
Use different tools of Photoshop and design a birthday card for your friend,
d. Scan your photo and apply different textures to the image.
e. Scan individual images of your family members and combine them to make

a family photograph.

JBD
162 Computer Studies-8

Chapter 14

HTML
Programming

Objectives

After completing this chapter, you will be able to:

y Define HTML and state the important features of HTML.
y Define HTML element and compare the two categories of HTML element.
y Differentiate between container elements and empty elements.
y Explain the basic structure of HTML document.
y Explain some of the basic elements used to create web page.
y Explain image element and describe the attributes of image element.
y Define hyperlink and explain anchor element.

C Ooncept verview

Hypertext Markup Language (HTML) is an authoring tool that is used in creating
Internet Web pages. It is a versatile language and can be used on any platform
or desktop. It was invented in 1990 by Tim Berners Lee, a scientist at CERN,
Switzerland, at the European Laboratory for Particle Physics. He laid down the
foundation of the World Wide Web.
The most important features of HTML are:
• It provides tags that help in changing the appearance of Web page.
• It allows images to be included on a Web page.
• It provides special tags that help text in the form of tables.
• It provides hyperlinks to connect different Web pages with one another.
• It uses style sheets to create documents that can be maintained and reused

easily.

JBD
Computer Studies-8 163

HTML Tags and Attributes
HTML page also has elements called Tags and Attributes which are marks that
are embedded in the text. These elements define the appearance of the page and
decide how the page
will appear in the browser. A tag consists of a left angle bracket (<) and a right
angle bracket (>). There are two types of tags: Start tags are used to begin an effect
and end tags are used to end that effect. End tags always repeat the keyword with
a slash in front. <head>, <I>and<font> are some of the examples of tags.

HTML Element
HTML element is a fundamental component of the structure of an HTML text
document. It comprises of three parts: a start tag, the content and an end tag.

Container elements
The container elements are used in pair and have starting and ending tags. These
elements define how the matter contained within them should be formatted. The
syntax for container element is:
<TAG>....</TAG>

For example,
The HEAD element marks the position of the head section.

Empty elements
The empty elements do not have closing tags. These elements are stand-alone
elements and do not contain anything. The syntax for empty element is:
<TAG>

For example,
<BR> is an empty element and is used to insert a line break in the document.

Structure of an HTML
Every HTML page should contain certain standard HTML tags. There are three
tags required for every HTML page. They are HTML, HEAD and BODY. These are
the building blocks of any HTML document and are used in an orderly manner,
nested one tag inside another.

JBD
164 Computer Studies-8

The elements used in the basic structure are:

HTML Element
HTML is a container element which states that the document is an HTML
type document. A basic HTML document consists of opening (<HTML>)
and closing (</HTML>) tags. All the content of the Web page is contained
within these two tags.
The syntax is:
<HTML>
The document included here
</HTML>

HEAD Element
The HTML document has a pair of opening tag <HEAD> and closing tag </
HEAD>. The HEAD element marks the position of the head section. The head
section contains elements that define certain information about an HTML
document, such as what its title is and reference information about the document.
The <HEAD> tag contains the <TITLE> tag. The <TITLE> tag specifies the title of
the HTML document.
The syntax is:
<HEAD>
<TITLE>
The title is included here
</TITLE>
</HEAD>

BODY Element
The BODY element includes the entire content of the document. It is opened and
closed by the <BODY> and </BODY> tags. The text and images of the document
to be displayed by the Web browser should be placed within these two tags. The
syntax is:
<BODY>
The body is included here
</BODY>

JBD
Computer Studies-8 165

The following table displays the attributes used with the BODY element

Attribute Description
BACKGROUND
Defines the background design of a
BGCOLOR web page. It takes the entire path of a
picture as its value.
TEXT
Defines the background colour of a
web page. It takes a colour name as
its value.

Defines the colour of text on a web
page. It takes a colour name as its
value.

LEFTMARGIN To set the left-hand margin.

TOPMARGIN To set the top-margin of the document.
LINK
Specifies the colour used for hypertext
VLINK links.

Specifies the colour used for hypertext
links that have been previously visited
by the viewer.

ALINK Defines the colour of the link as it is
being clicked.

Creating and Saving a HTML File

To create HTML document, follow these steps:

• Click on the Start menu.

• Click on Programs and then choose Accessories.

• Choose Notepad.

• Type in the HTML code. The end result should resemble as shown below:

Example

<HTML>
<BODY>
His name was Wolstencroft. And he was no ordinary bear.
</BODY>
</HTML>

JBD
166 Computer Studies-8

Viewing the HTML File

To view HTML file, follow these steps
• Click on the Internet Explorer icon.
• In the address bar type the name of the HTML document giving the complete

path i.e. where it is located.
Or

Click the arrow key of the address bar to locate the file.
Or

• Click File | Open. The Open dialog box appears.
• Click the Browse window to view the Microsoft Internet Explorer Window.
• Locate the file and click Open.
• In the Open window, click OK.

Heading Element

Heading element briefly describes the topic of the section it introduces. There
are six levels of headings in HTML with H1 as the most important and H6 as the
least. The highest-level header format is <H1> and the lowest level is <H6>. All
the styles appear in boldface and the size of the heading depends on the level
chosen, i.e. <H1> to <H6>. The headings can be aligned with the ALIGN attribute,
which can be either LEFT, RIGHT, or CENTER as values for making the headings
left-aligned, right-aligned and center-aligned respectively.

Syntax:

<Hn align = “left”|”right”|”center”> ... </Hn>

Example

HTML>

<BODY>

<H1 ALIGN=”CENTER”> Human Body and Mind </H1>

<H2> The Brave Monkey </H2>

One day the pirate Modi was out running errands with his mom. They
shopped for groceries and ate peas at his favorite restaurant.

</BODY>

</HTML>

JBD
Computer Studies-8 167

Paragraph Element

Paragraph element indicates the start of a paragraph. Typically, paragraphs are
surrounded by a vertical space of one line or half a line. It uses (<P>...</P>) tags to
separate text into different paragraphs. The paragraph can be aligned left, right,
center and justify by using the ALIGN attribute. The default horizontal alignment
is the left alignment.

Syntax:

<P align=”left”|”right”|”center” |”justify” > ... </P>

Example

<HTML>
<HEAD>
<TITLE> Treasure </TITLE>
</HEAD>
<BODY>
<H1 ALIGN=”center”> Treasure </H2>
<P>
Ten steps from the porch and twenty steps from the rose bushes,”
growled Bluebeard in Jimmy’s dream one night. “There be treasure
there! Aawrgh.”
</P>
<P>
So the next day Jimmy began to dig. He dug until the hole was deep and
the dirt pile was high.
</P>
</BODY>
</HTML>

Line Break Element

Line break element is an empty element that moves any text following it to the
next text. It uses (<BR>) tag.

Syntax:

<BR>

JBD
168 Computer Studies-8

Example

<HTML>
<BODY>
a. Without friends no one would choose to live, though he had all other

goods. <BR>
b. Friendship make prosperity more shining and lessens adversity by

dividing and sharing it. <BR>
</BODY>
</HTML>

Center Element
Center element uses (<CENTER> ... </CENTER>) tags to center the content
between the current left and right margins. It can be used to center a whole chunk
of a document and it can be used to center tables.

Syntax:
<CENTER>...</CENTER>

Example

<HTML>
<HEAD>
Center Element
</HEAD>
<BODY>
<CENTER> QUOTATION <BR>
Everyone has limits on the time they can devote to exercise, and cross-
training simply....
~ Paula Newby-Fraser quotes
</CENTER>
</BODY>
</HTML>

JBD
Computer Studies-8 169

Horizontal Rule Element

Horizontal rule element is a divider between sections of text such as a full width
horizontal rule or an equivalent graphic display. The default rule is a shaded,
engraved line. It uses <HR> tag to draw a horizontal line across the page.
Syntax:

<HR

align = “left”|”right”|”center”

noshade

color=”colour name”

size=”pixels”

width=”pixels or percentage”>

Attribute Description
SIZE
Determines the thickness of the
horizontal line in pixels. The default is
2 pixels.

WIDTH Defines the horizontal width of the
ALIGN line. The default is the width of the
page. It can be specified with either a
numeric value or a percentage value.
For example,<HR WIDTH=20%>will
display the horizontal rule with a
width that is 20% of the page width.

Specifies the horizontal alignment of
lines. The alignment of the rule can be
set to left, right, or center.

NOSHADE Displays a solid black line that has no
COLOR shading.

Used to specify the colour of a
horizontal rule.

Character Formatting Elements

The character formatting elements are also called physical formatting elements.
In this kind of formatting, the author of the document does the formatting and
puts it effectively on the user’s screen. It is important to specify how a particular
text should be displayed on the screen.

JBD
170 Computer Studies-8

Bold element
Bold element (<B> and </B>) causes text to appear in a bold typeface.
For example:
<B> This text is bold. </B>
would display:
This text is bold.

Italics element
Italics element specifies that the text should be displayed in italics font style,
where available, otherwise the browser will display the text in any other form.
For example:
<I> The text is italicized. </I>
would display:
The text is italicized.

Underline element
Underline element states that the enclosed text should be displayed as underlined.
For example:
<U>HTML</U> is the language of home page.
would display:
HTML is the language of home page.

Big element
Big element specifies that the enclosed text should be displayed, if practical, by
using a bigger font as compared to the current font. The text to be displayed in
bigger font is to be enclosed in <BIG>...</BIG>. The <BIG> tag has the same effect
as <FONT SIZE=”+1”>.
For example:
<BIG> Treasure </BIG>
would display:

Treasure

Small element
Small element specifies that the enclosed text should be displayed, if practical, by

JBD
Computer Studies-8 171

using a smaller font as compared to the current font. The text should be enclosed
in <SMALL> ...</SMALL>. The <SMALL> tag has the same effect as <FONT
SIZE=”-1”>.
For example:
<SMALL> Treasure </SMALL>
would display:

Treasure

Strike element
Stike element (<STRIKE> and </STRIKE> or <S> and </S>) indicates that the
enclosed text should have a line drawn through the middle of the text.
For example:
<STRIKE> This text is strike through. </STRIKE>
would display:
This text is strike through.

Subscript element
Subscript element (<SUB> and </SUB>) specifies that the enclosed text should be
displayed as a subscript (a bit lower than regular text). This element is also useful
for mathematical formulas.
For example:
H<SUB>2</SUB>O
would display:
H2O

Superscript element
Superscript element (<SUP> and </SUP>) specifies that the enclosed text should
be displayed superscript (a bit higher than regular text).
For example:
a<SUP>2</SUP>b
would display:
a2b

Example

<HTML>

<BODY>

Being <B>friendless</B> taught me how to be a friend. <BR>

JBD
172 Computer Studies-8

(a+b)<SUP>2</SUP>=a<SUP>2</SUP>

+2ab+b<SUP>2</SUP> <BR>

H<SUB>2</SUB>SO<SUB>4</SUB>

</BODY>

</HTML>

Font Element

Font element uses the (<FONT> and </FONT>) tags to change the size, typeface
and colour of the font.

Syntax:
<FONT
size=value
color=”colour name”
face=”font name”>
...</FONT>

Attribute Description
SIZE
Used to specify the font size for the
COLOR enclosed text as a numeric value
between 1 and 7. The default size is 3.
FACE For example: <FONT SIZE=”+4”> JAY
</FONT>

Changes the colour of the text that
will appear on the screen. It can be
set with an RGB value or a colour
name supported by the browser. For
example: <FONT COLOR =
“blue”> WELCOME</FONT>

Specifies the font for the enclosed
text. If no match is found, the text is
displayed in the default type according
to the browser preference settings. It is
possible to specify a comma-delimited
list of fonts to try one by one before
defaulting to the normal proportional
or fixed width font

JBD
Computer Studies-8 173

Marquee Element

Marquee element uses <MARQUEE> ...</MARQUEE> creates a region on a
page that displays a horizontal scrolling text message. It highlights the scrolling
text.

Syntax:

<MARQUEE behavior =”scroll”|” slide”|”alternate” direction = “left”
|”right”|”up”|”down” bgcolor = “colour name or an RGB value” scrolldelay
= time in milliseconds> ... </MARQUEE>...</FONT>

Attribute Description
BGCOLOR
Sets a background colour for the
marquee with a colour name or an
RGB value

DIRECTION Specifies the direction in which the
text will scroll. The default direction is
LEFT. The text can be made to scroll
from the left to right by setting the
direction to RIGHT

SCROLL Sets an amount of time (in milliseconds)
DELAY between each successive scrolling of
the marquee text

SCROLL Enables you to specify the number of
AMOUNT pixels between each successive draw
LOOP of the marquee text

ALIGN Sets the number of times a marquee
will loop when activated. If n = -1 or
LOOP = INFINITE is specified, then
the marquee will loop infinitely

To specify the vertical alignment of the
marquee text. This attribute can be set
to TOP, MIDDLE, or BOTTOM

BEHAVIOR To set the movement of the marquee.
This can be set to SCROLL, SLIDE and
ALTERNATE

JBD
174 Computer Studies-8

List Elements

List elements are a great way to provide information in a structured, easy to read-
to-read format. These elements may be nested within another set of elements.
HTML offers authors several mechanisms for specifying lists of information.
All lists must contain one or more list elements. Lists may contain unordered
information and ordered information.

Ordered list

Ordered list is a list where the items are in a specific order and need to be
numbered. It displays the list that is preceded by Arabic numbers or letters or
Roman numerals. The ordered list must begin with <OL> tag and must end with
</OL> tag. Each list items start with the tag <LI>.

Syntax:

<OL start = “value”

type = “A”|”a”|”I”|”i”|”1”>

..... </OL>

Attribute Description
TYPE
Defines the type of numbering
sequence used for each list item.

START Indicates the starting number for the
Unordered List list. Arabic numbers are the default.

Unordered list element is used when the list items are not to be placed in specific
order. It has a bulleted symbol before a list item. It starts with the <UL> tag and
ends with </UL>. Each list item starts with the tag <LI>.

Syntax:

<UL type = “circle”|”disc”| “square”> ..... </UL>

Attribute Description
TYPE Specifies the type of bullet.

Image Element

Adding an image to a web page makes it more attractive. They can be linked
or inline. Linked graphics create a link to the image to be displayed whereas
inline graphics are inserted within a line of body text. There are a number of

JBD
Computer Studies-8 175

graphics format supported by the World Wide Web browsers. The most widely
used among them are:

Graphics Interchange Format (GIF) and Joint Photographic Experts Group
(JPEG). The image element which consists of the <IMG> tag is used to include
graphic images in the body of HTML document. It is an empty element.

Syntax:

< IMG src = “image_url” align = “top”|”middle”|”bottom”|”left”| “ r i g h t ” |
”center” width = “pixels” height = “pixels” border = “border width_value”>

Attribute Description
SRC
Used to specify the image to be inserted
ALIGN in the page. SRC is a mandatory
WIDTH attribute
HEIGHT
Controls the vertical alignment of the
text adjacent to the image

Specifies the width of the image in
pixels

Specifies the height of the image in
pixels

ALT Specifies an alternate text that can be
BORDER displayed in place of the image
HSPACE
Specifies the size of the border to be
placed around the image

Indicates the amount of space to the
left and right of the margin

VSPACE Indicates the amount of space to the
Anchor Element top and bottom of the margin

Website is collection of web pages which are linked to each other by HTML links
known as hyperlinks. Hyperlinks can take the user to some other part of the same
page or to another page. Every hyperlink appears blue in colour and hyperlink
text is underlined. A text can be linked to some other page or an image can be
linked to a page. The anchor element uses (<A>...</A>) tags to mark the text as a
hypertext link.

Syntax:

<A href = “url”> Text describing link </A>

JBD
176 Computer Studies-8

C Dompu- ictionary

HTML : An authoring tool that is used in creating Internet Web
Tag pages.
Browser
Web site : An instruction that is embedded directly into the text
Hyperlinks of the document.

Recap : A client software that allows users to display and
interact with a hypertext document.

: A collection of web pages under the control of a
particular person or a group.

: A way of organizing Web files in which words or
images appearing in some files are connected to
another document.

• The html is a container element that states that the document is an HTML type
document.

• The head element marks the position of the head section.

• The body element includes the entire content of the document.

• The heading element briefly describes the topic of the section it introduces.

• The paragraph element indicates the start of a paragraph.

• The line break element is an empty element that moves any text following it to
the next text.

• The center element uses (<center> ... </center>) tags to center the content
between the current left and right margins.

• A horizontal rule element is a divider between sections of text such as a full
width horizontal rule or an equivalent graphic display.

• The font element uses the (<font> and </font>) tags to change the size, typeface
and colour of the font.

• The marquee element uses <marquee>...</marquee> creates a region on a page
that displays a horizontal scrolling text message.

• List elements are a great way to provide information in a structured, easy to
read-to-read format.

• An ordered list is a list where the items are in a specific order and need to be
numbered.

• The unordered list element is used when the list items are not to be placed in
specific order.

JBD
Computer Studies-8 177

Review Yourself

1. State whether the following statements are true or false.

a. A tag consists of a left angle bracket (<) and a right angle bracket (>).

b. The BODY is a container element that states that the document is an
HTML type document.

c. The highest-level header format is <H1> and the lowest level is <H6>.

d. The <SMALL> tag has the same effect as <FONT SIZE=”+1”>.

e. An ordered list is a list where the items are in a specific order and need
to be numbered.

2. Fill in the blanks.

a. _________________ was invented in 1990 by Tim Berners Lee, a scientist
at CERN, Switzerland, at the European Laboratory for Particle Physics.

b. The ______________ elements are used in pair and have starting and
ending tags.

c. The paragraph can be aligned left, right, center and justify by using the
__________ attribute.

d. ____________ elements are a great way to provide information in a
structured, easy to read-to-read format.

e. The __________________ list element is used when the list items are not
to be placed in specific order.

3. Match the following. An empty element that moves any text following it
Anchor to the next text
Image
A divider between sections of text such as a full
Line Break width horizontal rule or an equivalent graphic
Font display
Horizontal Rule
To change the size, typeface and colour of the font

To include graphic images in the body of HTML
document

To mark the text as a hypertext link

JBD
178 Computer Studies-8

4. Answer the following questions.
a. What is HTML and what are its features?
b. What are the three basic document tags?
c. What is the main difference between container and empty tag?
d. Name a few attributes of the BODY element.
e. What are HTML tags and where are they used?
f. What are the two types of lists that can be created in Web page?
g. What is the use of image element?
h. List the attributes of the IMG tag.
i. What is website?
j. What is hyperlink?

Hands-On Practice Time

Design a web page according to the following specifications:
a. Set the background colour of the web page as green.
b. Right align the paragraph.
c. Insert any suitable picture with a border.
d. Left align the image with respect to the surrounding text.
e. Centre the heading “Pirate’s Treasure”.
f. Set the font for the heading as Arial and font size as 3.

Pirate’s Treasure

“Ten steps from the porch and twenty steps from the rose bushes,” growled Bluebeard
in Jimmy’s dream one night. “There be treasure there! Aawrgh.” So the next day
Jimmy began to dig. He dug until the hole was deep and the dirt pile was high.

He kept digging. The hole got deeper and the dirt pile got higher. He dug until the hole
was deepest and the dirt pile was at its highest. He sighed. “I’m too tired. I can’t dig
anymore.” Then he spied something...

...but it was only one of Woofy’s bones. Instead of treasure, all Jimmy had was a dog
bone, a hole, and a big pile of dirt to fill it in with. He thought “That pirate lied to me!”
But when Jimmy’s mother saw what he had done, she clasped her hands and smiled a
smile from here to Sunday. “Oh, thank you, Jimmy. I always wanted a rhododendron
bush planted just there. Here’s $5.00 for digging that hole.”

JBD
Computer Studies-8 179

Chapter 15

Algorithm and
Flowchart

Objectives

After completing this chapter, you will be able to:

y Explain the most commonly used techniques in programming.
y Define algorithm and flowchart.
y List the advantages and disadvantages of using a flowchart.
y Explain the rules for designing a flowchart.
y Explain the three main types of flowchart.
y Define and explain pseudocode.

C Ooncept verview

Computers are problem solving devices. To facilitate a computer to solve
problems effectively, clear and concise instructions must be provided to it. For
this purpose, the logical solution to any problem is first outlined as a series of
steps in a convenient form. Any confusions and errors in the solution are sorted
out at this stage. There are basically two ways of specifying a logical solution to
a problem. They are:

Algorithm Algorithm is a logical sequence of discrete steps that
describe a complete solution to a given problem in a finite
amount of time.

Flowchart Flowchart is a pictorial representation of step by step
solution of a problem.

Pseudocode Pseudocode is an outline of a program, written in a form that
can easily be converted into real programming statements.

JBD
180 Computer Studies-8

Algorithm

The word algorithm originated from the name of a famous Arab mathematician,
“Abu Jafar Mohammad Ibn Musa Al-Khowrizmi”. The last part of his name
“Al-Khowarizmi” was converted and a new term was coined as “Algorithm”.
Algorithm is a logical sequence of discrete steps that describe a complete solution
to a given problem in a finite amount of time. It is composed of a finite set of
steps, each of which may require one or more operations. But there are certain
constraints to be placed on the type of operations as algorithm can include. These
are:
• Each operation must be definite i.e., it must be clearly defined what should

be done.
• Each operation must be effective i.e., each step must be such that it can be

done using pencil and paper in a finite amount of time.
• Each operation must be finite i.e., the algorithm should terminate after a finite

number of operations.

Flowchart

Flowchart is a pictorial representation of step by step solution of a problem. It is
often used by programmers as a problem-planning tool for organizing a sequence
of steps necessary to solve a problem by a computer. It uses different boxes linked
by arrows. In each box, the instruction to be carried out are mentioned. Arrows on
the lines connecting the boxes indicate the direction in which we should proceed.
The process of drawing a flowchart is known as flowcharting.

Advantages of a Flowchart

The following advantages may be obtained when flowcharts are used for the
purpose of program planning.
• Flowchart helps the programmer to explain the logic of a program to some

other programmer easily.
• It provides valuable documentation support.
• Once a flowchart is ready, programmers find it very easy to write the

corresponding program.
• Flowchart is very helpful in detecting, locating and removing bugs in a

program in a systematic manner.
• Flowchart proves to be very helpful in designing the test data for systematic

testing of program.
• It helps to detect deficiencies in the problem statement.
• It serves as a guide for program coding.

JBD
Computer Studies-8 181

Disadvantages of a Flowchart

In spite of their advantages, flowcharts have some limitations, which are as
follows:
• Flowcharts are cumbersome for programmer to write.
• Flowcharts are very time consuming, and laborious to draw with proper

symbols and spacing especially for large complex programs.
• Flowcharts are difficult to amend. Re-drawing of flowchart is

required.
• When there are complex branches and loops, flowchart becomes complicated.

Flowchart Rules

The American Standard Institute (ANSI), has recommended some general
principles to help standardize the designing of a flowchart. Some of the rules and
guidelines are as follows:

• First chart the main line of logic, then incorporate detail.

• After completing the main logic, concentrate on the branches and loops.

• Every flowchart must have start and end points.

• Be consistent in using names and variables in the flowchart.

• The flow of control can be shown with the help of arrows. But the flow lines
should not cross each other.

• The arrowheads are used to indicate the direction of flow of control in the
problem. The general direction of flow in any flowchart is from top to bottom
or from left to right.

• The connectors joining the different pages must be adequately referenced
while drawing a flowchart on more than one sheet of paper.


Flowchart Symbols

Flowchart consists of simple geometric symbols for different functions. Some of
the basic flowchart symbols are given below:

Terminal Box A terminal box is an oval box that is used to indicate the
beginning and end of a flowchart.

Input/Output Box An input/output box is a parallelogram, that is used to
accept input or display output.

JBD
182 Computer Studies-8

Process Box A process box is a rectangular box that is used to
manipulate or process data. Data manipulation , also
known as data processing, refers to:
Decision Box • arithmetic operation performed on data
• storing data/information for future use
Flowlines
A decision box is a rhombus. It is used to perform logical
Connectors operations. Logical operations involve comparisons
performed using relational operators that are represented
Comment box by >,< ,>= , <> and = symbols. Every logical operation
yields either true or false.

Flowlines are arrows that connect one box of a flowchart
with another and indicate the direction of flow of logic
in a flowchart. The sequence of logic in a flowchart may
be assessed from the flowlines. A flowchart follows a top
down approach. Thus, the logic always flows downwards
in a flowchart.

Connectors are circular in shape. They are used to connect
different parts of a flowchart that is split between pages.
A flowchart may contain multiple sets of connectors
joining different open ends of a flowchart on one page to
their corresponding parts on another page. Every set of
connectors has a unique name. The name of a computer
is written inside the circle representing the connector.

Comment box can be used to include any comments for
better documentation, clarity and in case of explanatory
notes.

Types of Logic used in Flowchart
The flowchart uses three types of logics. They are:

Sequence Logic
Sequence logic means that the statements are being executed sequentially. The
logic flow is from top to bottom. For example, if there are three steps A, B and C,
then these are executed in sequence-A followed by B and B followed by C.

JBD
Computer Studies-8 183

Algorithm Example Flowchart

Step 1 : Start Start

Step 2 : Read two numbers and store Read a and b
them in variables a and b.

Step 3 : Add a and b and store the c=a+b
result in variable c.

Step 4 : Display the value of variable c. Display c
Step 5 : Stop Stop

Entry

Selection logic True Condition False
Selection logic means the execution of
statement(s) depending upon a condition- Step A Step B
test. If a condition evaluates to true, a
course-of-action (a set of statements) is Exit
followed otherwise another course-of-
action (a different set of statements) is Example Flowchart
followed. This logic is also called decision Start
logic. The following figure explains
selection logic. Read a and b

Algorithm

Step 1 : Start

Step 2 : Read two numbers and store True Is a > b? False
them in variables a and b.

Step 3 : Compare a and b. If a is Display a Display b
greater than b then print a
otherwise print b.

Step 4 : Stop Stop

JBD
184 Computer Studies-8

Iteration Logic Entry

Iteration logic means repetition of a Condition False
set-of-statements depending upon a
condition-test. Till the time a condition True
is true (or false depending upon Step A
the loop), a set-of-statements are
repeated again and again. As soon as Exit
the condition becomes false (or true),
the repetition stops. The iteration Example Flowchart
logic is also called looping logic. Start
Following figure illustrates an iteration
logic. Count = 1

Algorithm Display Count

Step 1 : Start Count = Count + 1

Step 2 : Initialize the variable count True Is
to one. Count <=10?

Step 3 : Display the variable count.

Step 4 : Increase variable count by
one.

Step 5 : Check whether count
variable exceeds 10.

{If yes, goto step 3.

If no, goto step 6.}

Step 6 : Stop

False

Pseudocode Stop

Pseudocode is an outline of a program, written in a form that can easily be
converted into real programming statements. It cannot be compiled or executed,
and there are no real formatting or syntax rules. It is simply one step - an important
one - in producing the final code. The benefit of pseudocode is that it enables the
programmer to concentrate on the algorithms without worrying about all the
syntactic details of a particular programming language. In fact, you can write
pseudocode without even knowing what programming language you will use
for the final implementation.

JBD
Computer Studies-8 185

C Dompu- ictionary

Algorithm : A logical sequence of discrete steps that describe
a complete solution to a given problem in a finite
Flowchart amount of time.
Flowlines
: A pictorial representation of step by step solution of a
Pseudocode problem.
Selection logic
: Arrows that connect one box of a flowchart with
another and indicate the direction of flow of logic in a
flowchart.

: An outline of a program, written in a form that can
easily be converted into real programming statements.

: The execution of statement(s) depending upon a
condition-test.

Recap

• Algorithm is a logical sequence of discrete steps that describe a complete
solution to a given problem in a finite amount of time.

• Flowchart is often used by programmers as a problem-planning tool
for organizing a sequence of steps necessary to solve a problem by a
computer.

• Flowcharts are very time consuming, and laborious to draw with proper
symbols and spacing especially for large complex programs.

• A decision box is a rectangular box that is used to manipulate or process data.

• Flowlines are arrows that connect one box of a flowchart with another and
indicate the direction of flow of logic in a flowchart.

• Connectors are used to connect different parts of a flowchart that is split
between pages.

• Comment box can be used to include any comments for better documentation,
clarity and in case of explanatory notes.

• Sequence logic means the statements are being executed sequentially.

• Iteration logic means repetition of a set-of-statements depending upon a
condition-test.

• Pseudocode is an outline of a program, written in a form that can easily be
converted into real programming statements.

JBD
186 Computer Studies-8

Review Yourself

1. State whether the following statements are true or false.

a. The word algorithm originated from the name of a famous Arab
mathematician, “Abu Jafar Mohammad Ibn Musa Al-Khowrizmi”.

b. The process of drawing a flowchart is known as flowcharting.

c. Flowchart is very helpful in detecting, locating and removing bugs in a
program in a systematic manner.

d. Decision box indicates any calculation or manipulation.

e. Selection logic means repetition of a set-of-statements depending upon
a condition-test.

2. Fill in the blanks.
a. ___________ box marks the start and end points of a flowchart.

b. _______________ box indicates any calculation or manipulation.

c. ____________ box is used to show the steps involving comparison and
decision making steps.

d. ___________ are used for long flowchart that does not fit in the same
page.

e. ____________ are used to connect the flowchart symbols.

3. Match the following. A logical sequence of discrete steps that describe a
Flowchart complete solution to a given problem in a finite amount
of time.
Pseudocode
Algorithm A pictorial representation of step by step solution of a
Flowlines problem
Selection logic
Arrows that connect one box of a flowchart with another
and indicate the direction of flow of logic in a flowchart.

The execution of statement(s) depending upon a
condition-test.

An outline of a program, written in a form that can
easily be converted into real programming statements.

JBD
Computer Studies-8 187

4. Answer the following questions.
a. What is an algorithm? How was the word algorithm coined?
b. What do you understand by the term flowchart?
c. State the advantages and disadvantages of a flowchart.
d. Mention the rules for construction of a flowchart.
e. What are the different types of logic used in flowchart? Define each of
them.

5. Write an algorithm for the following problems.
a. To calculate the volume of a box.
b. To print the first ten natural numbers.
c. To print the sum of the first ten even numbers.
d. To print the first 10 multiplication table of 2.
e. To accept the sides of ten squares and find their sum.

6. Draw a flowchart for the following problems.
a. To generate the first ten odd numbers.
b. To print the first ten natural numbers in the reverse order.
c. To find the sum of first 10 even numbers.
d. To print cubes of first 10 natural numbers.
e. To input an integer and find whether it is an even or an odd.

7. Write the name and use of the following symbols.

JBD
188 Computer Studies-8

Chapter 16

Basics of
QBASIC

Objectives

After completing this chapter, you will be able to:

y Define QBASIC.
y State the important features of QBASIC.
y Identify the important elements of QBASIC programming and explain each of

them.
y Define operator and describe the different types of operators in QBASIC.

C Ooncept verview

QBASIC is a high level computer language published by Microsoft. It is provided
with MS-DOS and has two important files: QBASIC.EXE and QBASIC.HLP. Since
then, nearly every PC user owns their own copy of QBASIC, making it a widely
known language. QBASIC environment includes a full screen syntax checking,
multi-file and multi-window editing, full debugging facilities, pull-down menus,
syntax-checking editor and a simple yet a powerful menu structure that can be
driven through either by the keyboard or a mouse. Once you are in the QBASIC
environment you can edit, run, debug and rerun the program without switching
programs.
The important features of BASIC can be summarized as under:
• suitable for conversational programming
• facility of manipulation of character strings
• dynamic program debugging ability to carry out arithmetic operations
• facility for allowing more sophisticated formats for results
• facility for real-time execution and task scheduling
• suitable for both mathematical and business problems

JBD
Computer Studies-8 189

Loading QBASIC
To start QBASIC, follow these steps:
• Turn on your computer to get DOS prompt (C: \>).
• Change the directory to QBASIC directory.
C: \>CD QBASIC
• Type QBASIC and press Enter.
C:\QBASIC>QBASIC
Or
• Turn on the computer to load Windows Operating System and locate the

QBASIC folder.
• Double click on the QBASIC folder.
• Double on the QBASIC icon.
Press the ESC key to hide the Welcome dialog box. The screen then appears as
shown below.

The First Program
Once you have launched the QBASIC interpreter, QBASIC interpreter screen will
appear, which has a blue background. The screen of QBASIC is called an IDE -
Integrated Development Environment because the editing and creation of the
program are done at the same place.
Type the following program in the QBASIC editor.
PRINT “City of Temples”

JBD
190 Computer Studies-8

Elements of QBASIC Programming
Like all programming languages, QBASIC is made up of some basic elements.
The important elements of QBASIC program are:
• Character set
• Variables
• Constants
• Operators
• Reserved words

Character Set
QBASIC character set is a set of valid characters that a language can recognise.
Character includes alphabetic, numeric and special characters.

Variables
Variables refer to a storage area whose contents can vary during processing.
All the variables are created in the memory of a computer. The data stored in a
variable can change during the execution of the program.
The variable names have the following properties:
• Any variable name may be up to 40 characters long.
• Variable names must begin with a letter ( A..Z, a..z ).
• Cannot contain characters other than letters, numbers, period, and the type

declaration characters ($, %, #, &, and !).
• Cannot be a reserved words, although embedded reserved words are allowed.
• Variables may represent either numeric values or strings.
• Cannot begin with “FN” unless it is a function call.
The variables are of two types: numeric variable and string variable depending
on the kind of data item they represent.

• Numeric variable
Numeric variable always represents a numeric value. It can be formed by

alphabets and/or digits. It should however, always begin with an alphabet
and should not contain any special characters or spaces. Some of the valid
numeric variables are a24, a, m5 and b3y.

JBD
Computer Studies-8 191

• String variable

String variable is a string of characters or alphanumeric values. It should
always start with an alphabet and the last character must be a $ symbol.
Some of the valid string variables are k$, add$ and d2$.

Constants
Constant is a value stored in a program, which do not change during program
execution. There are two types of constant. They are numeric constant and string
constant

• Numeric constant
Numeric constant is any numeric value on which mathematical operations

such as addition, subtraction, multiplication and division can be performed.
It is made up of a sequence of digits, positive or negative, with or without a
decimal point. Some of the valid numeric constants are 50, -90, +716 and 19.

• String constant
String constant is a set of alphanumeric or special characters enclosed within

double quotes. Blank spaces can also be used in a string. The valid string
constants are “Play a Game” and “Kathmandu”.

Operators

Operators are symbols that are used to perform specific operations. They are
used to compute, compare values and test multiple conditions. QBASIC has four
types of operators. They are arithmetic operators, relational operators, logical
operators and string operator.

a. Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on numeric
constants and variables. Arithmetic operators recognized by QBASIC are:

Operator Name Example

+ Addition A+B

- Subtraction A - B

* Multiplication A*B

/ Division A/B

\ Integer Division A\B

Mod Modulus A mod B

^ Exponential A^B

JBD
192 Computer Studies-8

Operations within parenthesis are performed first. Inside the parenthesis, the
usual order of precedence is maintained.

The table given below shows sample algebraic expressions and their BASIC
counterparts:

Algebraic Expression BASIC Expression
2b+5 2*b+5
2x + 3
5c (2*x+3)/(5*c)
4x2+3
( 2a )b 4 * x^2 + 3
a+bcd a * ( -b )
a+b^(c*d)

b. Relational Operators

Relational operators are used to compare two values of same type, either both
numeric or both string. The relational operators supported by QBASIC are:

Operator Name Example

= Equal A=B

< Less than A<B

> Greater than A>B

<= Less than or equal to A<=B

>= Greater than or equal to A>=B

<> Not equal to A<>B

c. Logical Operators

Logical operators are used to connect two or more relational expressions to
evaluate a single value as True or False. The logical operators supported by
QBASIC are:

Operator Name Example

And Conjunction And A>B and A>C

Or Disjunction Or A>B or A>C

Not Negation A not B

Rules of logical operators

• The output of the logical AND operations is true if BOTH the logical
expressions are individually TRUE.

• The output of the logical OR operations is true if EITHER of the logical
expressions is TRUE.

JBD
Computer Studies-8 193

C Dompu- ictionary

Constants : The data items that never change their value during a
program execution.

Variables : A storage area whose contents can vary during
processing.

Expression : A programming language statement that has a value.

Keywords : The specific words that are reserved as programming
language commands.

Syntax : A set of rules that must be followed when constructing
a program.

Recap

• QBASIC is a high level computer language published by Microsoft.

• The QBASIC character set is a set of valid characters that a language can
recognise.

• The constants are data items that never change their value during a program
execution.

• The numeric constants are positive or negative numbers on which mathematical
operations such as addition, subtraction, multiplication, and division can be
performed.

• The string constant is a set of alphanumeric or special characters enclosed
within double quotes.

• Variables refer to a storage area whose contents can vary during processing.

• Numeric variable can be any single letter of the alphabet or any single letter of
the alphabet followed by one of the numerals.

• The string variable has a string of characters or alphanumeric as its value.

• An expression is a programming language statement that has a value.

• Operators perform mathematical or logical operations on values.

• Arithmetic operators are used for various mathematical calculations.

• Relational operators are used to compare two values of same type, either both
numeric or both string.

• The joining of two or more strings is called concatenation of strings.

• Keywords are specific words that are reserved as programming language
commands.

• Syntax is a set of rules that must be followed when constructing a program.

JBD
194 Computer Studies-8

Review Yourself

1. State whether the following statements are true or false.
a. QBASIC has dynamic program debugging ability to carry out arithmetic
operations.
b. The variables are data items that never change their value during a
program execution.
c. Mathematical calculations cannot be performed using string variables.
d. The output of the logical AND operations is true if BOTH the logical
expressions are individually FALSE.
e. The strings are connected by the string operator, which is the plus sign (+).

2. Answer the following questions.
a. What is QBASIC programming?
b. List any three special features of QBASIC?
c. What is a variable? What are the properties of variables in QBASIC?
d. What are the two types of string variable? Define each of them.
e. What is the function of operators?
f. What are arithmetic operators? Explain with examples.
g. What does the MOD operator do?

3. Write BASIC expressions for the following algebraic expressions.

i. nr2+KT ii. (F-32)2

iii. a2+b2 iv. m(1+r*100)

v. (a+b)2c vi. (9*5)C+2

4. For given values of a,b and c; evaluate the following expression.
a<b and a>c or c<b

i. a = 5, b = 2, c = 3
ii. a = 10, b = 20, c = 30
iii. a = 8, b = 10, c = 2
iv. a = 6, b = 12, c = 4
v. a = 7, b = 2, c = 3

JBD
Computer Studies-8 195

Chapter 17

QBASIC
Statements

Objectives

After completing this chapter, you will be able to:
y Define QBASIC statement.
y Differentiate between executable and non-executable statement.
y Identify the use and syntax of REM statements.
y Identify the use and syntax of CLS statements.
y Identify the use and syntax of LET statements.
y Identify the use and syntax of INPUT statements.
y Identify the use and syntax of READ...DATA statements.
y Identify the use and syntax of PRINT statements.
y Identify the use and syntax of LOCATE statements.

C Ooncept verview

Every command or instruction in QBASIC is called a statement. The statement
or instruction should be given according to the rules of the language in which
the program is written. The QBASIC statements are first stored in the memory
of the computer and executed only when the command RUN is given. Each
statement is classified as executable or nonexecutable. Executable statements
specify actions and form an execution sequence in an executable program. Non-
executable statements specify characteristics, arrangement and initial values of
data; contain editing information; specify statement functions; classify program
units; and specify entry points within subprograms. Non-executable statements
are not part of the execution sequence.

JBD
196 Computer Studies-8

REM statement

The REM statement is used to put a comment line in your program. It is a non-
executable statement which means that it is not translated into machine language
by the QBASIC language interpreter. The general format of REM statement is:
REM <remark>
Or
‘ <remark>
Where,
remark may be any series of characters

CLS statement

CLS statement is used to clear the screen and leaves the cursor at the top left
corner of the screen. The general format of CLS statement is:

CLS

LET statement

LET is used for storing a value in a variable. The value can be an expression or
a literal and must be the same type as the variable. The general format of LET
statement is:

LET <variable> = <expression>

Where,

variable is the name of a numeric or string variable that is to receive the
value.

expression is a numeric or string expression whose value will be assigned to a
variable.

The QBASIC keyword LET is optional in the syntax; the equal sign is sufficient.
The value of the expression on the right is assigned to the variable name on the
left.

Example

LET base = 20

LET height = 30

area = 1/2*(base*height)

PRINT “The area of a triangle is::: “; area

END

JBD
Computer Studies-8 197

INPUT statement

The INPUT statement is used to recieve input from the keyboard during program
execution. The general format of INPUT statement is:
INPUT [“definer”; | ,] list of variables
Where,
definer is a string constant, enclosed in quotation marks, that will be displayed
when the statement is executed.
list of variables contain the numeric or string variable that stores the data.
The input statement pauses the program, prints a question mark and waits for
input from the keyboard. Press Enter indicates the end of the input. If the value
entered is incorrect type, the compiler produces an error message “Redo from
start”.

Example

CLS
REM “To find the area of a rectangle”
INPUT “Enter length of a rectangle”; l
INPUT “Enter width of a rectangle”; w
Area = l * w
PRINT “Area of the rectangle is:::”; Area
END

READ...DATA statement

READ statement is used to read data from DATA statement into variables. The
purpose of DATA statement is to store the numeric and string constants that
are accessed by the program’s READ statement(s). The general format of READ
........... DATA statement is:
READ variable1[,variable2] ...
...
...
...
...
DATA constant1 [,constant2]...
Where,
variable is a numeric or string variable that is to recieve the value read from the
DATA statement.
constant may be any type of numeric constant or a string constant.

JBD
198 Computer Studies-8

PRINT statement

PRINT statement is used to display numeric or string data on the screen. A
question mark (?) may be used instead of the word PRINT. The general format of
the PRINT statement is:

PRINT [list of expressions] [, | ;]

Or

? [list of expressions] [, | ;]

Where,

list of expressions is a sequence of data items to be printed separately by either a
comma or a semicolon.

Print Positions

BASIC divides the line into print zones of 14 spaces. The position of each item
displayed on the screen is determined by the punctuation used to separate the
items in the list. The separator and print position is described below:

Separator Print Position
, Zone wise
; Side by side
space(s) Immediately after the
last value
Example

INPUT “Enter a length “; L
INPUT “Enter a breadth”; B
Perimeter = 2 * (L + B)
PRINT “Perimeter is “; Perimeter
END

TAB function

TAB function causes program output to shift to the right a specified number
of spaces. TAB is used only with PRINT and LPRINT statements. The general
format is:
TAB (n)
Where,
n is an integer expression in the range 0-32767. If n is negative, it produces the
same result as TAB (1). If n is out of range, an overflow error occurs.

JBD
Computer Studies-8 199

LOCATE statement
LOCATE statement is used to position the cursor on the screen and optionally to
define cursor attributes. It is commonly used with PRINT statement. The general
format is:
LOCATE[row][,[col][,[cursor][,[start][,stop]]]]
Where,
row is the screen line number, a numeric expression within the range of 1 to 25.
col is the screen column number, a numeric expression within the range of 1 to
40, or 1 to 80, depending upon screen width.
cursor is a boolean value indicating whether the cursor is visible;zero is off, non-
zero is on.
start is the cursor start scan line.
stop is the cursor stop scan line. A scan line is a line which defines the thickness
of the cursor.

Recap

• Every command or instruction in QBASIC is called a statement.
• Executable statements specify actions and form an execution sequence in an

executable program.
• Nonexecutable statements specify characteristics, arrangement, and initial

values of data; contain editing information; specify statement functions;
classify program units; and specify entry points within subprograms.
• The computer ignores anything following the word REM and it is used to put
remarks in the program.
• The CLS statement is used to clear the screen and leaves the cursor at the top
left corner of the screen.
• The LET is used for storing a value in a variable.
• The INPUT statement is used to receive input from the keyboard during
program execution.
• The READ statement is used to read data from DATA statement into variables.
• The purpose of DATA statement is to store the numeric and string constants
that are accessed by the program’s READ statement(s).
• The PRINT statement is used to display numeric or string data on the screen.
• The TAB function causes program output to shift to the right a specified
number of spaces.

JBD
200 Computer Studies-8