New Gateway to Computer Science 9

Selector Declaration Blog

h1 { colour:red; font-size ; 20 px;}

Property value

Selector

Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.CSS selectors are used to select the content you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute, etc. There are several different types of selectors in CSS which are listed below.
 CSS element selector
 CSS Id selector
 CSS class selector
 CSS universal selector
 CSS group selector

Declaration Block: The declaration block can contain one or more declarations separated
by a semicolon. In the above example, there are two declarations and they are color: red
and font-size:20 px. Each declaration contains a property name and value, separated by
a colon.

Property: a Property is a type of attribute of HTML element. It could be color, border,
etc.

Value: Values are assigned to CSS properties. In the above example, value “red” is
assigned to color property.

CSS Measuring Units

CSS has several different units for expressing a length. Many CSS properties take “length”
values, such as width, margin, padding, font-size, etc. Length is a number followed by
a length unit, such as 10px, 2em, etc. You need these values while specifying various
measurements in your style rules. A whitespace cannot appear between the number and
the unit. However, if the value is 0, the unit can be omitted. For some CSS properties,
negative lengths are allowed. There are two types of length units. They are absolute and
relative length unit.

150 New Gateway to Computer Science Book -9

Absolute length : The absolute length units are fixed and a length expressed in any of
these will appear as exactly as that size. Absolute length units are not recommended for
use on screen. However, they can be used if the output medium is known, such as for print
layout. Some absolute length units are cm, mm, in (inches), px, pt, pc, etc. Let’s observe
the given table with CSS absolute length units.

Length Units Description
cm defines length in centimeters.
mm length unit in millimeters.
in inches (1in = 96px = 2.54cm).
px* pixels (1px = 1/96th of 1in).
pt points (1pt = 1/72 of 1in).
pc picas (1pc = 12 pt).

Relative length: Relative length units specify a length relative to another length property.
Relative length units scale better between different rendering mediums. Some relative
length units are em, ex, ch, rem, vw, vh, etc. Let’s observe the given table with CSS
relative length units.

Unit Description
%
It defines a measurement as a percentage relative to another value.
em
A relative measurement for the height of a font in em spaces. Because an em
ex unit is equivalent to the size of a given font, if you assign a font to 12pt, each
px "em" unit would be 12pt; thus, 2em would be 24pt.
This value defines a measurement relative to a font's x-height. The
x-height is determined by the height of the font's lowercase letter x.

Defines a measurement in screen pixels.

vmax Relative to 1% of viewport's largest dimension

ch Relative to width of the "0" (zero)

vw Relative to 1% of the width of the viewport

New Gateway to Computer Science Book -9 151

Let’s Review

 CSS stands for Cascading Style Sheets which is a language that describes the
style of an HTML document like how HTML elements are to be displayed on
screen.
 CSS can be used to define what each of those elements will look like by defining
a Rule.
 CSS rules can control many properties, called declarations, of an element.
 Many CSS properties take "length" values, such as width, margin, padding,
font-size, etc.
 The absolute length units are fixed and a length expressed in any of these will
appear as exactly as that size.
 Relative length units specify a length relative to another length property. Relative
length units scale better between different rendering mediums.

CSS Colors

CSS uses color values to specify a color. Typically, they are used to set a color either for
the foreground of an element or for the background of the element. They can also be used
to affect the color of borders and other decorative effects.

You can specify your color values in various formats. Following table lists all the possible
formats.

Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}

CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits
(RR) represent a red value, the next two are a green value (GG), and the last are the blue
value (BB). A hexadecimal value can be taken from any graphics software like Adobe
Photoshop or advanced paint brush.

152 New Gateway to Computer Science Book -9

CSS Colors - RGB Values

This color value is specified using the rgb ( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between
0 to 255 or a percentage.

CSS- Background

The background properties used to define the background effects for elements. Some of
the CSS background properties are given below.
Background-color :This property is used to set the background color of an element.

Sample 1

<!DOCTYPE html>
<html> <head>
</head>
<body>
<p style=”background-color:red;”>

This text has a red background color.
</p> </body> </html>

Background-image: This property is used to set the background image of an element.

Sample 2
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:url(“/publication matter/images/
computer.jpg”);
background-color:#ccddcc;
}
</style>
</head>
<body>
<h1> Learning CSS is FUN !</h1>
</body> <html>

New Gateway to Computer Science Book -9 153

Background Image Position: This property is used to set the background image
position of an element.

Sample 3
<!DOCTYPE html>
<html> <head>
<style>
body{
background-image:url("/publication matter/images/
computer.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p> LEARNING CSS IN HTML is always fun</p>
</body> </html>

Background-Repeat: This property is used to control the repetition of an image in the
background.

Sample 4

<!DOCTYPE html>
<html> <head>
<style>
body{
background-image:url(“/publication matter/images/
computer.jpg”);
background-repeat: repeat;
}
</style>
</head>
<body>
<p> Learning HTML</p>
</body> </html>

154 New Gateway to Computer Science Book -9

Background-Attachment: Background attachment determines whether a background
image is fixed or scrolled with the rest of the page or not.

Sample 5

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url(“/publication matter/images/
computer.jpg”);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the
page.</p>
</body> </html>

CSS- Font

The font property is a shorthand property for font-style, font-variant, font-weight, font-
size, font-family, etc.

Property/Value Description

font-style It specifies the font style. Default value is "normal".

font-variant It specifies the font variant. Default value is "normal".

font-weight It specifies the font weight. Default value is "normal".

f o n t - s i z e / l i n e - It specifies the font size and the line-height. Default value is

height "normal".

font-family It specifies the font family. Default value depends on the browser.

caption It uses the font that are used by captioned controls (like buttons,
drop-downs, etc.).

icon It uses the font that are used by icon labels.

status-bar It uses the fonts that are used by the status bar.

status-bar It uses the fonts that are used by the status bar.

New Gateway to Computer Science Book -9 155

Font Style

Sample 6
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “font-family:tiplo;”>

We are in grade nine , We are learning about CSS <br>
Learning CSS is fun.
</p>
</body>
</html>

Font Variant

Sample 7
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style=”font-variant:small-caps;”>

Learning HTM and CSS.
</p>
</body>
</html>

Font Weight: The font-weight property provides the functionality to specify how bold a
font is. Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, etc. are
the possible values for font weight.

156 New Gateway to Computer Science Book -9

Sample 8
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pstyle=”font-weight:bold;”>

This font is bold.
</p>
<pstyle=”font-weight:bolder;”>

This font is bolder.
</p>
<pstyle=”font-weight:500;”>

This font is 500 weight.
</p> </body> </html>

Font Size: The font-size property is used to control the size of fonts. Possible values
could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size
in pixels or in %.

Sample 9
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style=”font-size:20px;”>

This font size is 20 pixels
</p>
<p style=”font-size:small;”>

This font size is small
</p>
<p style=”font-size:large;”>

This font size is large
</p> </body> </html>

New Gateway to Computer Science Book -9 157

Font Size Adjust: The font size adjust property enables you to adjust the
x-height to make fonts more legible. Possible value could be any number.
Sample 10

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style=”font-size-adjust:0.61;”>

This text is using a font-size-adjust value.
</p>
</body>
</html>

Short Hand Property: You can use the font property to set all the font properties at once.
Sample 11
<!DOCTYPE html>
<html
<head>
</head>
<body>
<p style=”font:italic small-caps bold 15pxgeorgia;”>
Applying all the properties on the text at once.
</p>
</body>
</html>

158 New Gateway to Computer Science Book -9

CSS – TEXT 159

You can set the following text properties of an element.
Text Color
Sample 12

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style=”color:red;”>
Text appear in red colour.
</p>
</body>
</html>

Text Direction

Sample 13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style=”direction:rtl;”>

This text will be rendered from right to left
</p>
</body>
</html>

New Gateway to Computer Science Book -9

Space between Characters

Sample 14
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style=”letter-spacing:5px;”>

Text is having space between the letters.
</p>
</body> </html>

Space between Words

Sample 15
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “word-spacing:5px;”>

This text is having space between words.
</p>
</body> </html>

Text Shadow

Sample 16
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px red;">

If your browser supports the CSS text-shadow
property,this text will have a red shadow.
</p> </body> </html>

160 New Gateway to Computer Science Book -9

Text Indent

Sample 17
<!DOCTYPE html>
<html>

<head>

</head>

<body>

<p style = “text-indent:5cm;”>

The font-weight property provides the functionality to
specify how bold a font is. Possible values could be
normal, bold, bolder, lighter, 100, 200, 300, 400,

500, 600, 700, 800, 900.

</p>

</body>

</html>

Text Alignment

Sample 18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “text-indent:5cm;”>
The font-weight property provides the functionality to
specify how bold a font is. Possible values could be
normal, bold, bolder, lighter, 100, 200, 300, 400,
500, 600, 700, 800, 900.
</p>
</body>
</html>

New Gateway to Computer Science Book -9 161

Text Cases

Sample 19
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">

This will be capitalized
</p>
<p style = "text-transform:uppercase;">

This will be in uppercase
</p>
<p style = "text-transform:lowercase;">

This will be in lowercase
</p>
</body>
</html>

White Space between Text

Sample 20
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “white-space:pre;”>
CSS uses color values to specify a color.
Typically, these are used to set a color
either for the foreground of an element or for
the background of the element. They can also
be used to affect the color of borders and other
decorative effects.
</p>
</body>
</html> 

162 New Gateway to Computer Science Book -9

Let’s Review

 CSS uses color values to specify a color. Typically, they are used to set
a color either for the foreground of an element or for the background of the
element.
 CSSbackground properties are used to define the background effects for elements.
 CSS background properties are Background-color, Background-image, Background
Image Position, Background-repeat and Background-attachment.
 CSS- Font property is a shorthand property for font-style, font-variant,
font-weight, font-size, font-family, etc.
 The font-weight property provides the functionality to specify how bold a font is.
 The font-size property is used to control the size of fonts.
 Font size adjust property enables you to adjust the x-height to make fonts more
legible.

CSS – Images

Images play an important role in any webpage. It plays a good role to control
image display. You can set the following image properties using CSS.
 Border: This property is used to set the width of an image border.
 Height: This property is used to set the height of an image.
 Width: This property is used to set the width of an image.
 Moz-opacity: This property is used to set the opacity of an image.

Border Property

It is an image which is used to set the width of an image border. This property can
have a value in length or in percentage.

Sample 21
<!DOCTYPE html>
<html> <head>
</head>
<body>
<img style = “border:0px;” src = “logo.png” />
<br/>
<img style = “border:3px dashed red;” src = logo.png” />
</body> </html>

New Gateway to Computer Science Book -9 163

Height Property

The height property of an image is used to set the height of an image. This property
can have a value in length or in percentage.

Sample 22
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style = “border:1px solid red; height:100px;” src =
“logo.png” />
<br/>
<img style = “border:1px solid red; height:50%;” src =
“logo.png” />
</body>
</html>

Width Property
The width property of an image is used to set the width of an image. This property
can have a value in length or in percentage.

Sample 23
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style = “border:1px solid red; width:150px;” src =
“/css/images/logo.png” />
<br>
<img style = “border:1px solid red; width:100%;” src = “/
css/images/logo.png” />
</body>
</html>

164 New Gateway to Computer Science Book -9

Moz-opacity Property

The -moz-opacity property of an image is used to set the opacity of an image. This
property is used to create a transparent image.
Sample 24

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style = “border:1px solid red; -moz-opacity:0.4;
filter:alpha(opacity=40);” src = “logo.png” />
</body> </html>

CSS – Links

Website contains a hyperlink inside a web page or any other website. The <link> tag
defines a link between a document and an external or even internal resource.The <link>
tag is used to link to external style sheets.All the link properties are kept in the header part
of the HTML document.There are four link states which are listed below.
 a:link:This link is a normal and unvisited link
 a:visited: This links where the user has visited
 a:hover:The link on which the user shows the pointer over it
 a:active: The link that is clicked by the user.

Setting Color for the Links

Sample 25
<!DOCTYPE html>
<html>
<head>
<style type = “text/css”>
a:link {color:#000000}
</style>
</head>
<body>
<a href = “”>Click here for Link</a>
</body> </html>

New Gateway to Computer Science Book -9 165

Setting Color for Visited Links

Sample 26
<!DOCTYPE html>
<html>
<head>
<style type = “text/css”>
a:visited {color: #006600}
</style>
</head>
<body>
<ahref = “”>Click here for Link</a>
</body> </html>

Change the Color of the Links when Mouse is Over

Sample 27
<!DOCTYPE html>
<html> <head>
<style type = “text/css”>
a:hover {color: #FFCC00}
</style> </head>
<body>
<a href = “”> Click here for Link</a>
</body> </html>

CSS –Table

Let’s discuss various table properties that we can use in CSS.
Border-collapse: It specifies whether the browser should control the appearance of the
adjacent borders that touch each other or whether each cell should maintain its style.
Border-spacing: It specifies the width that should appear between table cells.
Caption-side: The captions are presented in the <caption> element. By default, these are
rendered above the table in the document.
Empty-cells: It specifies whether the border should be shown if a cell is empty or not.
Table-layout: It allows browsers to speed up layout of a table.

166 New Gateway to Computer Science Book -9

Sample 28

<!DOCTYPE html>
<html>
<head>
<style type = “text/css”>

table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;

}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;

}
</style>
</head>
<body>
<table class = “one”>
<caption> Collapse Border Example</caption>
<tr><td class = “a”> Cell A Collapse Example</td></tr>
<tr><td class = “b”> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = “two”>
<caption> Separate Border Example</caption>
<tr><td class = “a”> Cell A Separate Example</td></tr>
<tr><td class = “b”> Cell B Separate Example</td></tr>
</table>
</body>
</html>

New Gateway to Computer Science Book -9 167

CSS - Borders

The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border.

Border-Color: It specifies the color of a border.The border color property allows you to
change the color of the border surrounding an element.

Sample 29
<!DOCTYPE html>
<html> <head>
<styletype=”text/css”>

p.example1 {
border:1px solid;
border-bottom-color:#009900;/* Green */
border-top-color:#FF0000;/* Red */
border-left-color:#330000;/* Black */
border-right-color:#0000CC;/* Blue */
}

p.example2 {
border:1px solid;
border-color:#009900;/* Green */
}
</style>
</head>
<body>
<pclass=”example1”>

This example is showing all borders in different colors.
</p>
<pclass=”example2”>

This example is showing all borders in green color only.
</p> </body> </html>

Border-Style: It specifies whether a border should be solid, dashed line, double line,
or one of the other possible values. The border-style property allows you to select one of
the styles of border like none, solid, dotted, etc.

168 New Gateway to Computer Science Book -9

Sample 30
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “border-width:4px; border-style:none;”>

This is a border with none width.
</p>
<p style = “border-width:4px; border-style:solid;”>

This is a solid border.
</p>
<p style = “border-width:4px; border-style:dashed;”>

This is a dashed border.
</p>
<p style = “border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;”>

This is a border with four different styles.
</p>
</body>
</html>

Border-Width: It specifies the width of a border. The border-width property is
used to set the width of an element border. The value of this property could be
either a length in px, pt or cm or it should be set to thin, medium or thick.

New Gateway to Computer Science Book -9 169

Sample 31
<!DOCTYPE html>
<html> <head>
</head>
<body>
<p style = “border-width:4px; border-style:solid;”>

This is a solid border whose width is 4px.
</p>
<p style = “border-width:thin; border-style:solid;”>

This is a solid border whose width is thin.
</p>
<p style = “border-bottom-width:4px;border-top-
width:10px;
border-left-width: 2px;border-right-width:15px;border-
style:solid;”>

This is a border with four different width.
</p>
</body> </html>

Let’s Review
 We can set the border, height, width, moz-opacity properties using CSS.
 Border Property is an image used to set the width of an image border.
 The width property of an image is used to set the width of an image
 The height property of an image is used to set the height of an image.
 The -moz-opacity property of an image is used to set the opacity of an image.
 The <link> tag defines a link between a document and an external or even internal
resource.
 The <link> tag is used to link to external style sheets.
 Border-spacing specifies the width that should appear between table cells.
 Empty cells specifies whether the border should be shown if a cell is empty or not.

CSS - Margins

The margin property defines the space around an HTML element. We have the following
properties to set an element margin.

Margin: It specifies a shorthand property for setting the margin properties in one
declaration.

170 New Gateway to Computer Science Book -9

Sample 32

<!DOCTYPE html>
<html> <head>
</head>
<body>
<p style = “margin:10px 2%; border:1px solid black;”>
Top and bottom margin will be 10px, left and right margin
will be 2% of the total width of the document.
</p>
<p style = “margin: 10px 2% -10px auto; border:1px solid
black;”>
Top margin will be 10px, right margin will be 2% of the
total width of the document, bottom margin will be -10px,
left margin will be set by the browser
</p> </body></html>

Margin-Bottom: It specifies the bottom margin of an element. The margin-bottom
property allows you set bottom margin of an element. It can have a value in length, % or
auto.

Sample 33

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pstyle=”margin-bottom:15px; border:1px solid black;”>

This is a paragraph with a specified bottom margin
</p>
<pstyle=”margin-bottom:5%; border:1px solid black;”>

This is another paragraph with a specified bottom
margin in percent
</p> </body> </html>

New Gateway to Computer Science Book -9 171

Margin-Top: It specifies the top margin of an element.The margin-top property allows
you set top margin of an element. It can have a value in length, % or auto.

Sample 34
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pstyle=”margin-top:15px; border:1px solid black;”>

This is a paragraph with a specified top margin
</p>
<pstyle=”margin-top:5%; border:1px solid black;”>

This is another paragraph with a specified top
margin in percent
</p>
</body>
</html>

Margin-Left: It specifies the left margin of an element. The margin-left property allows
you to set left margin of an element. It can have a value in length, % or auto.

Sample 35
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “margin-left: 15px; border:1px solid black;”>

This is a paragraph with a specified left margin
</p>
<p style = “margin-left: 5%; border:1px solid black;”>

This is another paragraph with a specified top
margin in percent
</p>
</body>
</html>

172 New Gateway to Computer Science Book -9

Margin-Right: It specifies the right margin of an element. The margin-right
property allows you set right margin of an element. It can have a value in length, % or
auto.

Sample 36
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = “margin-right: 15px; border:1px solid black;”>

This is a paragraph with a specified right margin.
</p>
<p style = “margin-right: 5%; border:1px solid black;”>

This is another paragraph with a specified right
margin in percent.
</p>
</body>
</html>

CSS - Scrollbars

There may be chances when an element’s content might be larger than the amount of
space allocated to it. CSS provides a property which is called overflow that tells the
browser what to do if the box’s contents are larger than the box itself. Let’s discuss the

scrollbars values and its description.

Value Description
visible
hidden It allows the content to overflow the borders of its containing element.

scroll The content of the nested element is simply cut off at the border of the
containing element and no scrollbars is visible.
auto
The size of the containing element does not change, but the scrollbars are
added to allow the user to scroll to see the content.

The purposes of auto is the same as scroll, but the scrollbar will be shown
only if the content overflows.

New Gateway to Computer Science Book -9 173

Sample 37

<!DOCTYPE html>
<html>
<head>
<style type = “text/css”>

.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;

}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = “scroll”>

There may be a case when an element’s content might
be larger than the amount of space allocated to it.
CSS provides a property called overflow which tells
the browser what to do if the box’s contents is
larger than the box itself.
Let’s discuss the scrollbars values and its
description.
</div>
<br />
</body>
</html>

174 New Gateway to Computer Science Book -9

Let’s Review

 CSS – Borders properties allow you to specify how the border of the box
representing an element should look.
 There are three properties of a border they are Border-color, Border-style
and Border-width.
 Border-width specifies the width of a border. The border-width property is
used to set the width of an element border.
 The margin property defines the space around an HTML element.
 CSS provides a property which is called overflow that tells the browser
what to do if the box's contents are larger than the box itself.

Expand your knowledge

 In 1971 AD. the first microprocessor Intel 4004 was invented.
 Intel Celeron was introduced in April 1998 AD.
 Pentium were introduced on March 2, 1993 AD.
 Xeon Processor is a 400 MHz Pentium processor from the Intel for use in
workstation and enterprise servers.
 In August 2006, Xeon Dual-core processor was introduced.
 The first practical form of RAM was the Williams Tube starting in 1947 AD.

Assignment

1. Select the correct answer from the given options.

a. Which of the following indicates the HTML element you want to style.

i.Selector ii. Declaration iii. Property iv. Value

b. A type of attribute of HTML element which could be colour, border, etc.

i. Value ii. Property iii. Declaration iv. All of the above

c. Which of the following unit defines a measurement as a percentage relative to
another value?

i. Ex ii. % iii. ch iv. Em

New Gateway to Computer Science Book -9 175

d. In hex code #RRGGBB what is the first two RR represent?

i. Red colour ii. Green colour iii. Blue colour iv. None of them

e. Which of the following specifies the font weight with default normal value?

i. Font style ii. font colour iii. font weight iv. All of them.

f. Which of the following CSS-Image property is used to set the height of an image?

i. Border ii. Height iii. Moz opacity iv. Width

2. Fill in the blanks with suitable words.

a. CSS stands for …………………………

b. ………………… can be used to define what each of those elements will look like
by defining a Rule.

c. The ……………………….. are fixed and a length expressed in any of these will
appear as exactly as that size.

d. CSS ………………. used to define the background effects for elements.

e. CSS- ………………… is a shorthand property for font-style, font-variant, font-
weight, font-size/line-height, font-family, etc.

f. The ………………… of an image is used to set the width of an image.

g. The …………….. tag defines a link between a document and an external or even
internal resource.

h. CSS …………. allow you to specify how the border of the box representing an
element should look.

3. State whether the given statements are true or false.

a. CSS rules can control many properties, called declarations, of an element.

b. Many CSS properties take "length" values, such as width, margin, padding, font-
size, etc.

c. Relative length units specify a length relative to another length property. Relative
length units scale better between different rendering mediums.

d. CSS does not uses color values to specify a color.

e. CSS background properties are Background-color, Background-image,
Background Image Position, Background-repeat and Background-attachment.

f. The font-size property is used to control the size of image.

g. Border property is an image which is used to set the width of a table border.

176 New Gateway to Computer Science Book -9

h. The height property of an image is used to set the height of an image.

i. The -moz-opacity property of an image is used to set the size of an image.

j. There are three properties of a border. They are Border-color, Border-style and
Border-width.

4. Write down the function of following CSS commands.

a. <p style> b. <img style> c. a: link d. <style type>

5. Answer the following questions.

a. What is CSS? What can it control?

b. What are the different types of selector sin CSS?

c. What does a declaration box contain?

d. What are the CSS measuring units? What are absolute length and relative length?

e. What is the use of CSS-Background properties?

f. What are the various CSS font properties?

g. Write down the different image properties used in CSS.

h. What is the use of CSS link? Write down the four link properties.

i. List out the table properties of CSS.

j. Explain the CSS-scrollbars with their properties description.

New Gateway to Computer Science Book -9 177

Computer Programming

4Unit

This unit covers the following topics:

Lesson 10: General Concept of Programming
Lesson 11: Programming Techiniques
Lesson 12: Programming in QBASIC
Lesson 13: QBASIC Statements
Lesson 14: Program Flow and Control Structures
Lesson 15: Library Functions in QBASIC
Lesson 16: Arrays in QBASIC
Lesson 16: Arrays in QBASIC

178 New Gateway to Computer Science Book -9

10Lesson General Concept of Programming

Inside the Lesson

 Introduction to programming
 Programmer and programming language
 Types of programming language
 Low level programming language
 High level language
 Middle level programming language
 Fourth generation language
 Fifth generation language
 Translator program and its types
 Program development cycle

Computer is an electronic device that accepts data, processess them and generates the
required output. It can perform both simple and complex tasks with high accuracy.
However, a computer cannot perform task itself. It needs instructions to perform the task.
A set of instructions that instruct the computer the way the task is to be performed is
called a program. Computer program is a set of instructions written for performing a
specific task.

Computer programs are collections of instructions that tell a computer how to interact
with the user, interact with the computer hardware and process data.

Programmer and Programming

A programmer needs to write programs for the computers or even for the machines.
We can define a programmer as a person who designs the algorithms and writes the
necessary codes to create a computer program. A programmer must have the knowledge
of programing language to develop a program. Computer programmers write and test
the code that allows computer applications and programs to function. Programming
language is the tool or means used by the programmer. Programming is the way of giving
instructions about what they should do next. These instructions are known as code, and
computer programmers write code to solve problems or perform a task.

New Gateway to Computer Science Book -9 179

Programming language

To communicate with a person, we need a language. Like the same if you want to
communicate with the computer, you need a programming language. Without any
programming language, you cannot communicate with the computer.Thus, programming
language is the medium of communication between a person and a computer system. It is
a set of instructions written in a specific code to instruct the computer to do some specific
tasks.

Computer programming is the process of developing and implementing various sets of
instructions to enable a computer to do a certain task. These instructions are considered
computer programs and help the computer to operate smoothly. A programming language
is a set of commands, instructions, and other syntax used to create a software program.

Let’s Review

 A set of instructions that instruct the computer that the way the task is to be
performed is called a program.
 Computer programs are collections of instructions that tell a computer how
to interact with the user, interact with the computer hardware and process data.
 A programmer must have the knowledge of programing language to develop
a program.
 Without any programming language you cannot communicate with the computer.
 A programming language is a set of commands, instructions, and other syntax use
to create a software program.

Types of Programming Languages

There are various types of computer programming languages. Let’s discuss some of them
in detail.

Low Level Programming Languages

Low Level programming language programs are faster than high level programming
language. Low level languages are machine dependent programming languages such as
binary and assembly language. Machine code does not need any interpreter or compiler
to convert language in any form because the computer understands these signals directly.
The codes written in such kind of languages are difficult to write, read, edit and understand.
The programs are not portable to any other computer system.The popular examples of
low level languages are explained below.

180 New Gateway to Computer Science Book -9

Assembly Language

Assembly languages are low level languages. Only few programmers write programs in
low level assembly language. It is still used for developing code for special hardware,
such as device drivers. It contains few recognisable human words but lots of mnemonic
code.

Advantages of Assembly Language

 It can make use of special hardware or special machine-dependent instructions.
 The translated program requires less memory.
 The code can be executed faster.
 It has total control over the code.
 It can work directly on memory locations.

Disadvantages of Assembly Language

 It is a machine independent language.
 Coding in this language is much time consuming.
 It is very difficult to understand.

Machine Language

Machine Language is the only language that is directly understood by the
computer. It does not need any translator program. We also call it machine code and it is
written as strings of 1's (one) and 0’s (zero). When this sequence of codes is fed to the
computer, it recognizes the codes and converts them into electrical signals needed to run
it. It is not an easy language to learn because it is difficult to understand. It is efficient
for the computer but very inefficient for programmers. It is considered to be the first
generation language. It is also difficult to debug the program written in this language.
Let's discuss a few advantages and disadvantages of machine language.

Advantages of Machine Language

 It makes fast and efficient use of the computer.
 It doen not require translator to translate the code.

 It is directly understood by the computer.

Disadvantages of Machine Language

 It is very difficult to program in machine language.
 The programmer has to know details of hardware to write the program.
 The programmer has to remember a lot of codes to write a program.
 It is difficult to debug the program.

New Gateway to Computer Science Book -9 181

High Level Programming Languages

High level programming languages are the machine independent programming
languages, which are easy to write, read, edit and understand.The languages like Ada,
FORTRAN, Pascal, BASIC, COBOL, C++, C, C#,Java, .Net, etc. are the popular high
level languages. High level programming languages have some special keywords and
functions. By using them we can easily build a program for the computer. Computer
does not understand program written in such languages directly. We must have some
programming translators to convert a high level program into machine code.

Features of High Level Programming Languages

 The programs written in high level programming languages are independent.

 The programs written in high level language can be run on any other system.

 The programs are easy to learn, use and understand.

 The programs written in high level programming languages are easy to code,
read and edit.

 We can edit programs written by other programmers easily.

 High level language programs are slower than low level language programs.

Middle Level Programming Languages

The programming languages that have features of low level and high level programming
languages are called middle level language. We can say that the programming languages
which have the features of low level as well as high level programming languages known
as "Middle Level" programming language.C programming language is the best example
of middle level programming languages as it has both features of low level and high level
programming languages. These languages do not provide all the built-in functions found
in high level languages, but provide all building blocks that we need to produce the result.
Java, C++, C, FORTH, Macro-assemble, etc. are the popular middle level languages.

Fourth Generation Language (4GL)

Fourth generation languages are more closer to human language than other high-level
languages and are easily accessible. These are the computer languages that consist of
statements similar to human language. Fourth generation languages are commonly used
in database programming and scripts such as Perl, PHP, Python, Ruby, and SQL. 4GLs are
more programmer-friendly and enhance programming efficiency with usage of English-
like words and phrases.

182 New Gateway to Computer Science Book -9

Advantages of Fourth Generation Languages

 It allows the efficient use of data by implementing various databases.
 They require less time, cost and effort to develop different types of software
applications.
 The programs developed in these languages are highly portable as compared to the
programs developed in the languages of other generation.

Fifth Generation Language (5GL)

A fifth-generation programming language is a programming language based on problem
solving. The major fields in which the fifth generation programming languages are
employed are Artificial Intelligence (AI) and Artificial Neural Network (ANN). AI is a
branch of the computer science in which the computer system is programmed to have
human intelligence characteristics. It helps to make computer system so intelligent that it
can take decisions on its own while solving various complicated problems. On the other
hand, ANN refers to a network that is used to imitate the working of human brain. It is
widely used in voice recognition system, image recognition system and industrial robotics.
Prolog, OPS5, and Mercury are the popular examples of fifth-generation languages. This
generation language uses a visual or graphical development interface to create source
language that is usually compiled with a 3GL or 4GL language compiler.

Advantages of fifth generation languages

 These languages can be used to query the database in a fast and efficient manner.
 In this generation of language, the user can communicate with the computer system
in a simple and an easy manner.

 Programmers can use English language while interacting with the computer system.

Let’s Review

 Low level languages are machine dependent programming languages.
 Machine code does not need any interpreter or compiler to convert languages.
 Assembly languages are low level languages.
 High level programming languages are the machine independent programming
languages, which are easy to write, read, edit and understand.
 The programming languages that have features of low level and high level
programming languages are called middle level language.
 Fourth generation languages are commonly used in database programming
and scripts such as Perl, PHP, Python, Ruby, and SQL.
 AI is a branch of the computer science in which the computer system is
programmed to have human intelligence characteristics.
 Fifth generation language uses a visual or graphical development interface to
create source language that is usually compiled with a 3GL or 4GL language
compiler.

New Gateway to Computer Science Book -9 183

Translator Programs

A translator takes a program written in source language as input and converts it into
a program in target language as output. It also detects and reports the error during the
translation process. A translator is a programming language that converts a computer
program from one language to another. It takes a program written in source code and
converts it into machine code. There are several types of translator programs, each are
able to perform different tasks.

Translator translates high-level language program into a machine language that the central
processing unit (CPU) can understand. It also detects errors in the program.

Compiler

A compiler is used to convert high-level programming language to low-level programming
language. It converts the whole program at a time and reports errors detected after the
conversion. A compiler is processor-dependent and platform-dependent. But it has been
addressed by a special compiler, a cross-compiler and a source-to-source compiler. Let’s
discuss some advantages and disadvantages of the compiler:

All Complier Object Code
High Level (Execulable)
Source Code
Error Report

Advantages

 The whole program is validated so there are no system errors.
 The executable file is enhanced by the compiler, so it runs faster.
 Users do not have to run the program on the same machine it was created.

Disadvantages

 It is slow to execute as you have to complete the whole program.
 It is not easy to debug as errors are shown at the end of the execution.
 It works on specific machine language and architecture.

Interpreter

An interpreter is used to convert high-level programming language to low-level
programming language. It converts the program one at a time and reports errors detected

184 New Gateway to Computer Science Book -9

at once, while doing the conversion. It is more easier to detect errors than in a compiler.
An interpreter is more faster than a compiler as it immediately executes the code upon
reading the code.

It is often used as a debugging tool for software development as it can execute a single
line of code at a time. An interpreter is also more portable than a compiler.

1 line of Interpreter Out
High Level (Temporary)
source Code
Stop:
Error Error Report

Advantages

 Program can be run before it is completed so you get partial results immediately.
 You can work on small parts of the program and link them later into a whole
program.

Disadvantages

 Program is not enhanced and may encounter data errors.
 It may be slow because of the interpretation in every execution.

Assembler

An assembler is a translator used to translate assembly language to machine language. It
is like a compiler for the assembly language but interactive like an interpreter. Assembly
language is difficult to understand as it is a low-level programming language. An
assembler translates an assembly language to an even lower-level language, which is the
machine code. The machine code can be directly understood by the CPU.

Advantages

 The symbolic programming is easier to understand.
 It is easier to fix the errors.
 Efficiency in execution of program just like in a machine level language.

Disadvantages

 It is machine dependent so it cannot be used in other architecture.
 A small change in design can invalidate the whole program.
 It is difficult to maintain.

New Gateway to Computer Science Book -9 185

Let’s compare compiler, interpreter and assembler.

Compiler Interpreter Assembler
It translates high-level It temporarily executes It translates low-level
language into machine high-level language, one assembly code into
code. statement at a time. machine code.

An executable file of No executable file of An executable file of
machine code is produced. machine code is produced machine code is produced.

Error report is produced at Error message is produced One low-level language
once when entire program immediately. statement is usually
is compiled. translated into one machine
code instruction.

Let’s Review

 A translator is a programming language that converts a computer program from
one language to another.
 A translator translates high-level language program into a machine language
program.
 A compiler is a program that translates source code into object code.
 An interpreter is used to convert high-level programming language to low-level
programming language.
 An assembler is a translator used to translate assembly language to machine
language.
 An assembly language is difficult to understand as it is a low-level programming
language.

Program Development Cycle

The process of developing software, according to the desired needs of a user,
by following a basic set of interrelated procedures is known as program
development life cycle. It is a step by step process where each stage is a building block
of an effective and efficient program. When we want to develop a program using any
programming language, we follow a sequence of steps. These steps are called phases in
program development. The program development life cycle is a set of steps or phases that
are used to develop a program in any programming language. The following are the steps
in the program development life cycle.

186 New Gateway to Computer Science Book -9

Analyzing the Problem

The computer user must point out the problem, and then decide how to resolve it. In this
phase, we have to define the problem statement and we need to decide the boundaries of
the problem. In this phase we need to understand what is our requirement, what should
be the output of the problem solution. These are defined in this first phase of the program
development life cycle. Let’s summarises these steps.
 Understand the problems
 Have multiple solutions
 Select a solution

Designing the Program

Program design starts by focusing on the main goal that the program is trying to achieve.
This approach of program design is called top-bottom program design or modular
programming. The first step involves identifying main routine, which is the one of the
major activities of program. From that point, programmers try to divide various
components of the main routine into smaller parts called modules. For each
module, programmer draws a conceptual plan using an appropriate program design tool
to visualize how the module will do its assigned job. While designing the program, it
requires three steps.
 Algorithm: It is written, with step by step explanation of the solution.
 Flowchart: It is a pictorial description of an algorithm. The solution is represented
diagrammatically, for easy understanding and clarity.
 Pseudo code: It is written for the selected solutions. It uses the structured
programming constructs. The pseudo code becomes an input to the next phase.

Coding and Documentation of the Program

This phase uses a programming language to write or implement actual programming
instructions for the steps defined in the previous phase. In this phase, we construct an
actual program. That means we write the program to solve the problem using programming
languages. Coding the program means translating an algorithm into specific programming
language. The technique of programming using only well-defined control structures is
known as structured programming. The programmer must follow the language rules.
Violation of any rule causes error. These errors must be eliminated before going to the
next step.

Testing & Debugging

During this phase, we check whether the code written in previous step is solving the
specified problem or not. That means, we test the program whether it is solving the
problem for various input data values or not. We also test that whether itis providing the
desired output or not.

New Gateway to Computer Science Book -9 187

Documenting the Program
After testing, the software project is almost complete. The structure charts, pseudocodes,
flowcharts and decision tables developed during the designphase become documentation
for others who are associated with the software project. This phase ends by writing a
manual that provides an overview of the program’s functionality. It also provides
depth explanations of major program features, reference documentation of all program
commands and description of the error messages generated by the program.
Maintenance
During this phase, the program is actively used by the users. If any enhancements are
found in this phase, all the phases are to be repeated again to make the enhancements.
That means, in this phase, the solution is used by the end user. If the user encounters any
problem or wants any enhancement, we need to repeat all the phases from the starting.

Let’s Review
 The process of developing software, according to the desired needs of a user, by
following a basic set of interrelated procedures is known as Program
Development Life Cycle.
 Program Development Life Cycle is a step by step process where each stage is
a building block of an effective and efficient program.
 The computer user must figure out the problem, and then decide how to resolve
it.
 While designing the program, it requires three steps. They are algorithm, flowchart
and pseudo code.
 Coding the program means translating an algorithm into specific programming
language.
 During the maintenance phase, the program is actively used by the users.
 If any enhancements are found in the maintenance phase, all the phases are to be

repeated again to make the enhancements.

188 New Gateway to Computer Science Book -9

Assignment

1. Select the correct answer from the given options.

a. Which of the following language is directly understood by the machine?

i. Machine language ii. High level language

iii. Assembly Language iv. Fourth generation language

b. Which of the following language is difficult to understand by the user?

i. High level language ii. Fourth generation language

iii. Machine language iv. All of them

c. Which of the following is a language translator?

i.Compiler ii. Assembler iii. Interpreter iv. All of them

d. Which of the following language is used to translate assembly language into
machine language?

i. Compiler ii. Interpreter iii. Assembler iv. None of them

e. Which of the following is used to design the program?

i. Algorithm ii. Flowchart iii. Pseudo code iv. All of them

f. Which of the following is the first phase of program development cycle?

i. Testing & debugging ii. Maintenance

iii. Analyzing the problem iv. Coding and documentation

2. Fill in the blanks with suitable words.

a. A set of instructions that instruct the computer that the way the task is to be
performed is called a …………….

b. A …………….. must have the knowledge of programing language to develop a
program.

c. A ………………. is a set of commands, instructions, and other syntax use to
create a software program.

d. Machine code does not need any …………. or ………….. to convert language in
any form.

e. Assembly languages are …………….

f. ……………………….. are the machine independent programming languages,
which are easy to write, read, edit and understand.

New Gateway to Computer Science Book -9 189

g. ……………. uses a visual or graphical development interface to create source
language that is usually compiled with a 3GL or 4GL language compiler.

h. A translator translates ……………… into a machine language program that the
CPU can understand.

i. …………… is a program that translates source code into object code.

j. An assembler is a translator used to translate …………………. to machine
language.

k. The process of developing software, according to the desired needs of a user, by
following a basic set of interrelated procedures is known as ……………………..

3. State whether the given statements are true or false.

a. Computer programs are collections of instructions that tell a computer how to
interact with the user.

b. Without any programming language, you cannot communicate with the computer.

c. High level languages are machine dependent programming languages such as
binary and assembly language.

d. Machine Language does not need any translator program.

e. The programming languages that have the features of low level and high level
programming languages are called assembly language.

f. Fourth generation languages are more closer to human language than other high-
level languages.

g. AI is a branch of the computer science in which the computer system is programmed
to have human intelligence characteristics.

h. A translator is a programming language processor that converts a computer
program from one language to another.

i. A compiler is used to convert high-level programming language to low-level
programming language.

j. An assembly language is difficult to understand as it is a high-level programming
language.

4. Write appropriate technical terms for the followings.

a. The collections of instructions that tell a computer how to interact with the user,
interact with the computer hardware and process data.

b. The process of developing and implementing various sets of instructions to enable
a computer to do a certain task.

190 New Gateway to Computer Science Book -9

c. A set of commands, instructions, and other syntax used to create a software
program.

d. The machine independent programming languages, which are easy to write, read,
edit and understand.

e. It is a branch of the computer science in which the computer system is programmed
to have human intelligence characteristics.

f. A programming language processor that converts a computer program from one
language to another.

g. The process of developing software, according to the desired needs of a user, by
following a basic set of interrelated procedures.

h. During this phase, we check whether the code written in previous step is solving
the specified problem or not.

5. Answer the following questions.

a. What is a programming language? Write its types.

b. What is a low level programming language? Name some low level programming
languages.

c. Define an assembly language with its advantages.

d. What is a machine language? Write its advantages and disadvantages.

e. What is a high level programming language? Write any four features of high level
language.

f. Write down the advantages of fourth and fifth generations languages.

g. What is a translator program? Name the types of translator programs.

h. Define a compiler with its advantages and disadvantages.

i. What are assembler and interpreter?

j. Write any two advantages and disadvantages of an assembler and an interpreter.

k. What is a program development cycle? Write proper phases of program
development cycle.

Project Work

Conduct a presentation about the program development cycle in the class

New Gateway to Computer Science Book -9 191

Lesson

11 Programming Techniques

Inside the Lesson

 Introduction to programming techniques
 Algorithm with its advantages
 Characteristics of an algorithm
 Sample algorithm
 Flowchart with its advantages
 Types of flowcharts
 Symbols used in flowcharts
 Flowchart structure with lots of samples

Programming is telling a computer how it should do its job. A program is a sequence of
instructions that tell a computer how to do a task. When a computer follows the instructions
in a program, we say it executes the program. Programming is writing computer code to
create a program, to solve a problem. Programs are created to implement algorithms.
Algorithms can be represented as pseudo code or a flowchart, and programming is
the translation of these algorithms into a computer program. To tell a computer to do
something, a program must be written to tell it exactly what to do and how to do it. If
an algorithm is designed, the computer program will follow this algorithm, step-by-step,
which will tell the computer exactly what it should do. In this lesson we are going to
discuss about the programming techniques.

Algorithm

An algorithm is a set of instructions, which is also called a procedure or a function that
is used to perform a certain task. An algorithm is defined as a step-by-step procedure or
method for solving a problem by a computer in a finite number of steps. It is a sequence
of instructions that when executed in the specified sequence, gives the desired results.
Steps of an algorithm definition may include branching or repetition depending upon
what problem the algorithm is being developed for. While defining an algorithm steps are
written in human understandable and are language and independent of any programming
language. We can implement it in any programming language of our choice.In order
to qualify to be an algorithm, a sequence of instructions must possses the following
characteristics.

192 New Gateway to Computer Science Book -9

 Each instruction should be clear and definite.
 Each instruction should be executed in a finite number of times.
 No instruction should be repeated infinitely.
 After executing the instructions, the desired results are obtained.

Algorithms can be expressed in many different notations, including natural languages,
pseudocode, flowcharts and programming languages.

Advantages
 It is a step wise step representation of a solution to a given problem, which makes
it easy to understand.
 An algorithm uses a definite procedure.
 It is not dependent on any programming language.
 It is easy to understand for anyone even without the knowledge of programming
languages.
 Every step in an algorithm has its own logical sequence so it is easy to debug.
 The problem is broken down into smaller pieces or steps so that it is easier for
a programmer to convert it into an actual program.

Characteristics of an Algorithm

A good algorithm must have the following characteristics:
 Input: An algorithm must have well defined inputs.
 Output: An algorithm must have well defined outputs, and should match with the
desired output.
 Feasibility: An algorithm must be terminated after a finite number of steps.
 Independent: An algorithm must have step-by-step directions which must be
independent from programming code.
 Unambiguous: An algorithm must be unambiguous and clear. Each of their steps
and input/outputs must be clear.

Algorithm Samples

Sample 1: Write an algorithm to add any two numbers entered by the user.
Step 1: Start
Step 2: Declare the variables num1, num2 and sum.
Step 3: Read the values of num1 and num2.
Step 4: Add num1 and num2 and assign the result to sum.

New Gateway to Computer Science Book -9 193

Sum = num1+num2
Step 5: Display sum
Step 6: Stop

Sample 2: Write an algorithm to calculate the interest of amount.
Step 1: Start
Step 2: Read amount,
Step 3: Read years,
Step 4: Read rate,
Step 5: Calculate the interest with formula "Interest=Amount*Years*Rate/100"
Step 6: Print interest
Step 7: Stop

Sample 3: Write an algorithm to multiply the two numbers x and y and

display the result in z.

Step 1: Start

Step 2: Declare three integers x, y & z

Step 3: Define the values of x & y

Step 4: Multiply the values of x & y

Step 5: Store the output of step 4 in z variable.

Step 6: Print z

Step 7: Stop

Sample 4: Write an algorithm to determine whether the given number is even
or odd.
Step 1: Start
Step 2: Read the number N,
Step 3: Set remainder as N module 2,
Step 4: If remainder is equal to 0 then number N is even, else number N is odd,
Step 5: Print the output.

Step 6: Stop

Sample 5: Write an algorithm to find the largest number among three different
numbers.
Step 1: Start

Step 2: Declare variables a,b and c.

194 New Gateway to Computer Science Book -9

Step 3: Read variables a,b and c.
Step 4: If a>b
If a>c

Display a is the largest number.
Else

Display c is the largest number.
Else

If b>c
Display b is the largest number.

Else
Display c is the greatest number.

Step 5: Stop

Let’s Review

 An algorithm is defined as a step-by-step procedure or method for solving a
problem by a computer in a finite number of steps.
 Algorithms can be expressed in many different notations, including natural
languages, pseudocode, flowcharts and programming languages.
 Every step in an algorithm has its own logical sequence so it is easy to debug.
 An algorithm must be terminated after a finite number of steps.
 An algorithm must have step-by-step directions which is independent of any
programming code.

Flowchart

A flow chart is a graphical representation of a system that details the sequencing
of steps required to create an output. A flow chart is comprised of different
symbols and control lines to connect those symbols. It uses a set of basic
symbols to represent various functions, and shows the sequence and
interconnection of functions with lines and arrows. Each flow chart is concerned
with one particular process or system. It begins with the input of data
into the system and traces all the procedures needed to convert the input
into its final output form. Flow charts are an important tool for the improvement of
processes. By providing a graphical representation, they help project teams to identify
different elements of a process and understand the interrelationships among various steps.

New Gateway to Computer Science Book -9 195

Flowcharts are extremely useful in programming because it simplifies the complicated
algorithm and converts it into the understandable pictorial representation.With the help
of the flowchart, the application designer can easily separate different components of the
process.

Advantages
 The flowchart is a good way of conveying the logic of the system.
 It facilitates the analysis of the problem.
 It provides a proper documentation.
 Easy identification of the errors and bugs.
 It directs the program development.
 Maintenance of the program becomes easy.

Let’s Review
Differences between algorithm and flowchart
 An algorithm involves a combination of sequential steps to interpret the logic of
the solutionwhereas a flowchart is the pictorial illustration of the algorithm.
 A flow chart is more understandable as compared to the algorithm.
 The algorithm is written in a language that can be perceived by humans.
The flowchart is made up using different shapes and symbols.
 There are no stringent rules implemented in the algorithms while the flowchart
is abided by predefined rules.
 Errors are easily detected in the algorithm as compared to the flow charts.
 Flow charts are simple to create but the construction of the algorithm is complex.

Types of Flowcharts

System Flowcharts

System flowcharts display how data flow inside a system and the execution
of decisions to control events. It is the graphical representation of the flow of data in the
system, and represents the work process of the system. Various symbols are used in the
flowchart to designate specific actions. System flowchart is the graphical representation
of the flow of data in the system, and represents the work process of the system.

Program Flowcharts

Program flowchart is a diagram which uses a set of standard graphic symbols to represent
the sequence of coded instructions. It is a great tool to improve the work efficiency. There
are four basic symbols in a program flowchart. They are start, process, decision and end.
Each symbol represents a piece of code written for the program.

196 New Gateway to Computer Science Book -9

The advantages of program flowchart are as follows:

 Program flowchart can help programmers to find the errors in the process before
carrying out the process.

 It works as a blueprint when analyzing the systems and developing programs, which
makes coding more efficient.

 It improves programmers’ efficiency in maintaining the operating program.

 With the help of program flowchart, communicating the logic of a system to all
concerned gets much easier.

Symbols Used in Flowchart

Different symbols are used for different purposes in a flowchart. The table below
describes all the symbols that are used in making flowchart.

Symbol Purpose Description
Terminal(Stop/Start) Box
Used to represent start and end of
flowchart.

Input/Output Box Used for input and output operation.

Processing Box Used for arithmetic operations and
Decision Box data manipulations.

Used to represent the operation in
which there are two alternatives, true
and false.

On page Connector Used to join different flow line

Off page Connector Used to connect flowchart portion on
different page.
Predefined Process/Func-
tion Used to represent a group of state-
ments performing one processing
Flow lines task.

Used to indicate the flow of logic by
connecting symbols.

New Gateway to Computer Science Book -9 197

Flowchart Structure

Sequence Structure

The sequence control structure is defined as the straight forward execution of one
processing step after another. Sequence structure is a series of actions or steps performed
in sequential order. The sequence of operations carry input, process and output steps.
The flow of logic is from top to bottom in this structure. The general form of a sequence
structure is as given below.

start

get first number

get second number

total= first number+
second number

display "the sum two
number is"; total

end

Selection Structure False/No Raining True/Yes

Selection structure is used in Put on Take
flowchart to determine which suncream umbrella
particular step or set of steps is to
be executed. This is also called a New Gateway to Computer Science Book -9
‘decision structure’. A selection
statement can be used to choose
a specific path dependent on a
condition.

The selection control structure
can be defined as the presentation
of a condition, and the choice

198

between two actions depending on whether the condition is true or false. The general
form of the selection structure is given at the right hand side.

Repetition Structure

When a program goes through a loop for certain False Condition
times repeatedly, it is known as repetition.
Repetition is the process of repeating one or more True
steps in a process. The branching decision is based Process
on a condition at the time that the branching test
is performed. The condition is normally based on
the value of a single variable known as the control
variable. The steps to be repeated are referred
to as the loop body.The step at which the body
starts is known as the loop entrance and the step
at which the test to branch back fails is known as
the loop exit.

Let’s Review

 A flow chart is a graphical representation of a system that details the sequencing
of steps required to create an output.

 Flow chart uses a set of basic symbols to represent various functions, and
shows the sequence and interconnection of functions with lines and arrows.

 Each flow chart is concerned with one particular process or system.

 Flowcharts are extremely useful in programming because it simplifies the
complicated algorithm and converts it into the understandable pictorial
representation.

 With the help of the flowchart, the application designer can easily separate
different components of the process.

 There are two types of flowcharts. They are system flowcharts and program
flowchart.

 System flowchart is the graphical representation of the flow of data in the system,
and represents the work process of the system.

New Gateway to Computer Science Book -9 199