Vedanta Let’s Log in Computer Science | Book 9
<TEXTAREA> Element
This HTML form element allows user to input a multi-line text data.
HTML Tag
<textarea> … </textarea>
Example Output
<form>
<textarea rows="10" cols="30">
Type your comments here
</textarea>
</form>
Checkbox Element
This HTML form element is used when more than one option is required to be
selected.
HTML Tag
<input type=”checkbox”>
Example
<form>
<p><strong>Please select language that you speak:</strong></p>
<input type=”checkbox” name=”language” value=”nepali”>Nepali
<input type=”checkbox” name=”language” value=”english”> English
<input type=”checkbox” name=”language” value=”chinese”>Chinese
<input type=”checkbox” name=”language” value=”russian”>Russian
</form>
Output
151 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Submit & Reset Buttons
The submit button is used whenever you want to submit a form to the server and
the reset button is used to clear all inputs by the user.
HTML Tag
<input type=”reset”>
<input type=”submit”>
Example Output
<form>
First name: <input type=”text”
name=”firstname”><br><br>
Last name: <input type=”text”
name=”lastname”><br><br>
<input type=”reset” value=”Clear form”>
<input type=”submit” value=
“Submit now”>
</form>
Note:
You need to add server script such as PHP to submit the data into the web server. Here, you
only learn how to create a form using HTML.
Practice Yourself
Type the HTML code below in Notepad, save and check the output in a Web
Browser:
<html>
<head><title>A Sample HTML Form</title></head>
<body bgcolor=”#CCCCCC”>
<form>
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 152
Vedanta Let’s Log in Computer Science | Book 9
<table width=”600” border=”1” align=”center” cellpadding=”4” cellspacing=
“1”>
<tr><td colspan= 2>
<h1>Online Registration Form</h1></td></tr>
<tr><td>First Name</td>
<td><input type=”text” name=”fname” id=”fname” /></td></tr>
<tr><td>Last Name</td>
<td><input type=”text” name=”lname” id=”lname” /></td></tr>
<tr><td>Occupation</td>
<td><select name=”select” id=”select”>
<option value=”Student”>Student</option>
<option value=”Web Designer”>Web Designer</option>
<option value=”Software Developer”>Software Developer</option>
<option value=”Others”>Others</option>
</select></td></tr>
<tr><td>Gender </td>
<td><input type=”radio” name=”gender”>Male
<input type=”radio” name=”gender” value=”Female”>Female</td></tr>
<tr><td>Education</td>
<td><input name=”chk1” type=”checkbox” value=”Masters”>Masters
<input name=”chk2” type=”checkbox” value=”Graduate”>Graduate
<input name=”chk3” type=”checkbox” value=”Intermediate”>Intermediate</
td></tr>
<tr><td>Upload Your Photo</td>
<td><input type=”file” name=”fileField”></td></tr>
<tr><td valign=”top”>Write about yourself <br />
(not more then 200 words)</td>
<td><textarea name=”textarea” cols=”50” rows=”10”>
Type your text here</textarea></td></tr>
153 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
<tr><td align=”center” colspan=2><input type=”submit” name=”submit”
value=”Submit”>
<input type=”reset” name=”reset” value=”Reset” /></td></tr>
</table></form></body></html>t
Output of the HTML Code
Exercise
1. Answer the following questions.
a) Define HTML.
b) Mention the applications required to make web page using HTML.
c) What is HTML tag? List the types of HTML tags.
d) What are the basic HTML tags?
e) Differentiate between container tag and empty tag with examples.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 154
Vedanta Let’s Log in Computer Science | Book 9
f) What is hyperlink? Explain the types of hyperlink in HTML.
g) What is the use of <TABLE> tag in HTML? Write the attributes of <TABLE> tag.
h) Explain the different types of HTML list.
i) Explain the basic structure of an HTML document.
j) What is HTML editor? Give any two examples of it.
2. Choose the best answer:
a) A HTML tag is enclosed with ………..
i. ( ) ii. < > iii. { } iv. [ ]
b) Which is not the attribute of <BODY> tag?
i. Background ii. Text iii. Color iv. Link
c) <Body BGCOLOR = “pink”> tag is used to:
i. Set the Font color ii. Set the Cell Background
iii. Page Background iv. Set table background
d) The <OL> tag is related with………..
i. Font ii. Background iii. Ordered List iv. All of above
e) The <UL> tag can be used to specify the type of ………..
i. Bullet ii. Number iii. Font iv. Color
f) The <TR> tag is used to create ………..
i. Table ii. Table Row iii. Table Column iv. Table Border
g) The <TH> tag is used to create ………..
i. Table Border ii. Table iii. Table Row iv. Table Heading
h) Which is not a basic HTML tag?
i. <HEAD> ii. <BODY> iii. <TABLE> iv. <TITLE>
i) Unordered list is ………..
i. random ordered ii. numbered
iii. bulleted iv. alphabetically ordered
j) The extension of HTML document is ………..
i. .htl ii. .html iii. .tml iv. .hml
k) ……….. is the most important heading.
i. H6 ii. H1 iii. H7 iv. H9
155 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
3. State whether the following statements are True or False:
a) HTML is a high level programming language.
b) The HTML tags are the commands that are used to control the layout of the web page.
c) The <H6> tag is used for largest heading.
d) HTML allows linking to other HTML documents as well as images.
e) The <TR> tag sets off each cell in a row.
f) <TITLE> is a basic HTML tag.
g) <BODY> tag does not have any attribute.
h) HTML tables do not have border.
i) You must have the <HTML>, <HEAD>, <TITLE> and <BODY> tags in every HTML
document.
4. Fill in the Blanks
a) HTML stands for ………………………………………………
b) The …………… tag allows you to specify the size, color and font type of a section of
a text.
c) …………………. is the text that is slightly raised above a line.
d) The …………… tag allows you to display an image inside your web page.
e) MARQUEE tag allows you to move ………….. , …………… or other contents inside
the browser.
f) The ………………. tag gives title to the table.
5. Write the technical term for the following:
a) Language used to develop web page.
b) The software required for browsing and surfing web sites.
c) The tag used to move texts or pictures from one direction to another.
d) The HTML tag that displays the information in the form of rows and columns.
6. Write the purposes and syntaxes of the following HTML tags.
<B> <I> <U> <SUP> <SUB> <IMG> <BR> <HR>
<H1> <FONT> <CENTER> <MARQUEE> <OL> <LI>
<UL> <DL> <DT> <DD> <A> <TABLE> <TR> <TD> <TH>
<CAPTION> <FORM> <INPUT> <SELECT> <TEXTAREA>
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 156
Vedanta Let’s Log in Computer Science | Book 9
7. Write down the below HTML tags in their respective types.
<B> <I> <U> <SUP> <SUB> <IMG> <BR> <HR> <TH>
<H1> <FONT> <CENTER> <MARQUEE> <OL> <LI>
<UL> <DL> <DT> <DD> <A> <TABLE> <TR> <TD>
<CAPTION> <FORM> <INPUT> <SELECT> <TEXTAREA>
Container Tags Empty Tags
8. Lab Session (Project)
a) Write an HTML codes to display information of your school using necessary HTML tags
and attributes.
b) Create a web page using following HTML tags to describe the importance of “Computer
Education”.
Text formatting tags, Paragraph tag, Font tag, Center tag, Line break tag, and
Image tag.
c) Write a complete HTML Web page with the title “Vedanta Online”
a heading at the top which reads “Welcome to Vedanta Web Site,” followed by the horizontal
row and words, “A complete IT solution,” in italic type.
d) Write the HTML codes to describe festivals of Nepal. At least, this page should contain
the basic HTML structure tags, some formatting tags, line breaking tag, and two
different types of list with scrolling heading from up to down.
e) Write the HTML codes to prepare a web page to describe you and your family having
hyperlink and images. Include an internal CSS code also.
f) Write the HTML codes to present table in web page. You should include the following
features and information one after the other:
Largest heading with scrolling effect - “Advanced Academy”
Table caption - “Students Record”
Table background color - Red Table headings – Roll No, Name of Students,
Grade and Phone.
157 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Number of records – 5
Include an external CSS file.
g) Write the HTML codes to prepare a website of your school. At least, the web site
contains the following things.
It should have at least 3 pages.
It should have a home page with school’s picture.
It should have different levels of headings as required.
It should have scrolling effects as required.
It should include different font sizes and colors to present information in a web
page.
It should include links between pages.
It should include a table to display yearly activities.
Include an inline CSS.
Project Work Lab Activities
1. Create an HTML page to plan your picnic program.
a) Create an ordered list of friends who will attend the picnic program.
b) Create an unordered list of food items for the picnic.
c) Place an image of the picnic spot.
d) Create a table with two columns to display the list of tasks to be done by your friends.
Name Tasks
e) Create a suitable heading at the top of this web page.
2. Create the below table using HTML tags.
Gender height Average Maximum Age
5’6” weight
Male 5’2” 62 17
Female 47 15
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 158
Vedanta Let’s Log in Computer Science | Book 9
3. Create a table with information below:
UNESCO World Cultural Heritage Sites OF NEPAL
Kathmandu Durbar Square Bhaktapur Durbar Square Patan Durbar Square
Lumbini Changunarayan
Swayambhunath Pashupatinath Boudhanath
UNESCO World Natural Heritage Sites OF NEPAL
Chitwan National Park Sagarmatha National Park
Source: www.explorehimalaya.com
a) Apply the background color into each cell as mentioned.
b) Format the text in bold, italic with appropriate font size.
c) Set the text horizontal alignment “Center” and vertical alignment “Middle”.
d) Create an HTML link in the last row as mentioned.
4. Create a timetable below using HTML.
Time Table
Days Sun Mon Tue Wed Thu Fri
Subjects English Maths Music Lab
Maths Nepali Science Arts Economics English
Nepali Computer Computer Social
Economics Science
Lunch
English Maths Science
Maths
Maths English
5. Create an HTML document with the below instruction.
About My Country
About Nepal Mountains of Rivers of Nepal Tourist Places in
Nepal Nepal
159 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
a) Download four photos and places them in a table as above.
b) In the third row of the table, create hyperlinks to the below webpages.
i) About Nepal - https://en.wikipedia.org/wiki/Nepal
ii) Mountains of Nepal - https://en.wikipedia.org/wiki/List_of_mountains_in_Nepal
iii) Rivers of Nepal - https://en.wikipedia.org/wiki/List_of_rivers_of_Nepal
iv) Tourist Places in Nepal - https://www.welcomenepal.com/places-to-see.html
6. Create the “Employment Application Form” below using HTML.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 160
Vedanta Let’s Log in Computer Science | Book 9
Unit
3.3
Chapter Includes:
Introduction to CSS
CSS Syntax
CSS Measurement Units
CSS Types
CSS: Colors, Text, Fonts, Links, Borders, Background, Margins and Images
Introduction
You have already known how to create an HTML document. Cascading Style Sheet
or CSS is a presentation language, used to define the layout of HTML document.
CSS consists of various styles, which defines how to display HTML elements to
make the design of the website dynamic or attractive.
CSS is the language for describing the presentation of web pages, including colors,
layout, and fonts. Styles are normally stored in Style Sheets.
Advantages of using CSS
The layout of a web page is better controlled.
Reduction and reuse of code.
File size gets smaller.
Easy to apply several formatting actions in multiple web pages.
Reduced bandwidth and faster loading time.
A simple example of CSS:
<p style=”color:#ff0000; font-weight: bold”> Some text that is red and bold </p>
In the above example, font color and size of paragraph text is defined.
161 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
CSS Syntax
CSS in itself has no meaning unless it is associated with HTML elements or tags.
CSS is defined as a rule of styles associated with certain element or set of elements
of a HTML document.
The CSS syntax is made up of three parts:
a) a selector, b) a property, and c) a value
CSS Selectors
CSS selectors are used to select the desired HTML element based on the HTML
Element name, id, and class.
a) The Element Selector
Selector {property: value}
The selector is normally the HTML element or HTML tag one wishes to
define,
The property is the attributes one wishes to change and each property can
take value.
The value and property are separated by the colon (;) and surrounded by the
curly braces {}. Each property has a specific list of valid values defined for it.
A property paired with a value is called a CSS declaration. CSS declarations
are put within CSS Declaration Block { }.
CSS declaration blocks are paired with selectors to produce CSS ruleset or
rule.
Example:
H1{color:orange; font-size:40px;}
In the above example,
Selector Property Value Property Value
H1 {color:orange; font-size:40px;}
Declaration Declaration
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 162
Vedanta Let’s Log in Computer Science | Book 9
In the above example, <H1>
color, font-size
Selector orange, 40px
Property color:orange, font-size:40px
Values H1{color:orange; font-size:40px;}
Declaration
CSS rule
Some important rules:
a) If the value of a property is multiple words, put quotes around the value.
Example: {font-family:”sans serif”}
b) If there is more than one property in a ruleset, separate each property with a
semi-colon (;).
Example: {text-alignment:center;color:orange}
c) For clarity and readability, describe property on each line:
Example: {
text-align: center;
color: black;
font-family: Arial;
}
b) The Class Selector
You can use the class selector when you want to apply specific class attributes
for an HTML element. The class selector contains a dot (“.”) followed by a class
name. You can choose any name without spaces for the class.
Example:
.format {
font-weight: bold
text-align: center;
color: green;
}
163 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
In the above example, the name of class is “format” and all HTML elements with
class=”format” will be bold, green, and centrally aligned.
Let’s use the above class in HTML:
HTML Code with CSS Output
<html> Description
Here, the CSS class .format is
<head><title>Using CSS</title> defined in <style>..</style> tag
inside the <HEAD> of the HTML
<style> document.
.format class is applied to <H1>
.format { and <P> tag inside the <BODY>
of the document.
font-weight: bold; As a result, text are displayed in
bold, green and centrally aligned.
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1 class=”format”>Mount Everest</h1>
<p class=”format”>Mount Annapurna</p>
</body>
</html>
Note:
You can also apply class to only a specific HTML element.
Example:
p.format {
text-align: center;
}
In the above example, the .format CSS class can be applied to only <p> element.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 164
Vedanta Let’s Log in Computer Science | Book 9
c) The ID Selector
The ID selector is the most efficient way to select a single HTML element.
The ID selector consists of a hash symbol (#), followed by the ID name of a given
element.
Example:
#format {
font-weight: bold
text-align: center;
color: green;
}
Applying ID Selector in an HTML element:
<h1 ID=”format”>Mount Everest</h1>
Differences between Class Selector and ID Selector
Class Selector ID Selector
A period («.») precedes a Class selector. A hash character (“#”) precedes ID selector.
A class selector may apply to several An ID selector always applies to only ONE
elements on a page. element.
Example: Example:
.sample{ #sample{
background-color: green; background-color: green;
width:50%; width:50%;
height:20%; height:20%;
}}
Note:
You do not find any difference between Class and ID selector if you are using only HTML.
Like Class selector, you can call ID selector multiple times in a single web page. However, in
JavaScript, you can call ID selector for only one element.
165 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
<STYLE> Tag
The <style> tag is used to change the appearance and position of various elements
on a HTML document. It is used to place CSS code. Generally, <style> tag is placed
inside the <head> of the document to define different CSS selectors. It can also be
used as an attribute of an HTML element for applying inline CSS in the <body> of
a webpage.
As a tag As an attribute
<html>
<head><title>Using CSS</title> <body>
<style>
<p style=”color:green”>Here, style is
p{ used as an attribute.</p>
color:green;
} </body>
</style>
</head>
<DIV> Tag
The <div> tag is used to divide the HTML document into sections. It is simply an
empty container. This tag is suitable to group HTML elements to be styled with
CSS.
Example Output
<div style=”background-color:lightgreen; width:15%”>
<h3>Hello Nepal!</h3>
<h4>Hello Friends!</h4>
</div>
Practice Yourself
Type the HTML code below with CSS in Notepad, save and check the output in a
Web Browser:
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 166
Vedanta Let’s Log in Computer Science | Book 9
<html>
<head><title>Using CSS</title>
<style>
H1{color:orange; font-size:40px;}
.header1
{
color:blue;
text-align:center;
font-size:60px;
}
#headstyle1
{
color:green;
font-size:20px;
}
</style>
</head>
<body>
<H1>This is an example of Element Selector.</H1>
<H1 class="header1">This is an example of Class Selector.</H1>
<H1 ID="headstyle1">This is an example of ID Selector.</H1>
</body>
</html>
CSS Measurement Units
Before making any webpage using CSS, we should know about the different CSS
measurement units. CSS supports a number of measurement to express a length.
We need to specify “length” values such as width, height, margin, padding, font-
size, etc. Length is a number followed by a length unit, such as 5px, 3em, etc.
167 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
CSS supports two types of length units:
a) Absolute Length Units
The absolute length units are fixed. These units are used to specify font-size,
line-height, margin-bottom, etc.
Absolute Units Description Example
mm millimeters h1 {font-size: 15mm;}
p{
cm centimeters
font-size: 2cm;
in inches (1in = 96px = 2.54cm) line-height: 4cm;
}
px pixels h2 {font-size: 1in;}
(Normally, 1px = 1/96th of 1in) p{
font-size: 50px;
pt points (1pt = 1/72 of 1in) line-height: 70px;
}
pc picas (1pc = 12 pt) h1 {font-size: 50pt;}
p{
font-size: 4pc;
line-height: 4pc ;
}
b) Relative Length Units
Relative length units are the scalable units, used in web document. They
specify a length relative to another length property.
Relative Units Description
em
% An em unit is the computed font-size for the element. em unit
is applied on child elements and they inherit their font-size from
their parent element.
A % unit is also relative to its parent element.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 168
Vedanta Let’s Log in Computer Science | Book 9
Look at the example below: Description
Code In the example, the two CSS IDs “area1” and “area2”
are used in <div> element and its parent element is
<html> <body>. The base font is 20px set in the body element.
<head>
<title>CSS Units</title> Let’s calculate the font-size:
<style>
#area1:
body{ Base font=20px
font-family:arial; font-size:3em
font-size:20px; i.e.3x20px=60px
} #area2:
#area1 Base font size=20px
font-size:150%
{ i.e.150% of 20px = 30px
background: skyblue;
width:30%; Likewise, in both “area1” and “area2” IDs, width is set as
height:100px; 30% and 50%. It is used within <div> tag and its parent
font-size:3em; element is <body>. The base width is the width of the
border:1px solid black; window that is considered as 100%.
}
#area2 Width of the body = 100%
{ Width of <div id=area1>=30%
background: orange; i.e. 30% of the width of window
width:50%;
height:100px; Width of <div id=area2>=50%
font-size:150%; i.e. 50% of the width of window
border:1px solid black;
}
</style>
</head>
<body>
<div id=”area1”>
Hello Nepal !
</div><br>
<div id=”area2”>
Hello Friends !
</div>
</body>
</html>
169 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Output:
Types of CSS
There are different ways to apply CSS into HTML document.
a) Inline Style
Inline styles are CSS declarations that affect one element only, contained
within a style attribute. We define style in an individual element using the “style”
attribute.
Code Example
<html>
<head>
<title>My Inline CSS attempt</title>
</head>
<body>
<h1 style=”color:red; border: 4px dotted blue; width:25%”>Learning Inline CSS </h1>
</body>
</html> Output
Description
Here, the style for <H1> elements is set in
the same tag as below:
font color = red
border width = 4px
border style = dotted
border color = blue
element width = 25%
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 170
Vedanta Let’s Log in Computer Science | Book 9
b) Internal Stylesheet
An internal stylesheet is defined in the same HTML document inside the
<head> section using the <style> tag. This internal stylesheet is ideal when the
style has to be applied to a single webpage.
Code Example Description
<html> Here, internal stylesheet is defined in <style> tag of
<head> <head> section.
<style> h1 – An element selector
h1 {
Property Value
color: maroon;
} color maroon
.demo
{ demo – A class selector
font-size:20px;
font-weight:bold; Properties Values
color:green; font-size 20px
} font-weight bold
</style> color green
</head>
<body> In the <body> section, one <h1> tag is used and it
is displayed in maroon color.
Likewise, the class selector “demo” was used in <p>
tag. Therefore, all the styles defined in “demo” are
applied to the text places inside <p>…. </p> tag.
<h1>Learning Internal CSS</
h1>
<p class=”demo”>It is defined
using in the head section of
HTML document.</p>
</body>
</html>
Output
171 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
c) External Stylesheet
An external style sheet is ideal when the style is applied to many pages. With
an external style sheet, you can change the look of an entire website by changing
one file.
In external stylesheet, CSS style is defined in a separate file with an extension .css
and each page is lined to the .css file using the <link> tag inside the head section.
test.html mystyle.css
h1 {
<html> color: red;
<head> background-color: yellow;
<title>External CSS </title> border: 1px solid black;
<link rel= “stylesheet” href= “mystyle.css”> }
</head>
<body> p{
<h1>This is a heading with external CSS</h1> color: blue;
<p>This is a paragraph.</p> }
</body>
</html> Description
Description A separate file with an
extension .css should be
Here, the external CSS file “mystyle.css” created.
is linked to “test.html” using <link> tag in Here, two Element selector
<head> section. h1 and p are defined.
The <link> tag is used to link to external style The external CSS file
sheets in an HTML document. “mystyle.css” is linked to
The rel= “stylesheet” defines the relationship “test.html”.
between the current document and the linked All the styles defined in
document. this file is applied to “test.
The attribute href= “mystyle.css” specifies the html”
location of the linked document.
Output
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 172
Vedanta Let’s Log in Computer Science | Book 9
Note:
In the above example, both files “test.html” and “mystyle.css” should be saved in the
same folder; otherwise, you have to mention the full location in <link> tag as in <img>
element.
href stands for Hypertext REFerence
rel stands for relationship
CSS Colors
While creating HTML documents, you have to set text color,
background color, and border color of different HTML elements. In
CSS, colors are specified using predefined color names, or RGB and
HEX values.
Properties Some common CSS color properties
Example color
Description <p style=”color:Chocolate;”>Vedanta Publication</p>
Applied to – Paragraph text
Properties
Example Color applied – Chocolate (color name)
Description background-color
<h1 style=”background-color:FF897A;”> Computer Science </h1>
Properties Applied to – Background of Heading
Example
Description Color applied – #FF897A (hexadecimal values)
border
<h1 style=”border:3px solid rgb(67, 199, 45);”>Grade IX</h1>
Applied to – Border of Heading
Color applied – rgb(67, 199, 45) (RGB values)
Color Names
HTML supports 140 standard color names. Some of them includes:
Aqua, Azure, Bisque, BlueViolet, BurlyWood, CadetBlue, Coral, Crimson,
DarkGreen, DarkKhaki, DimGray, DeepPink, DodgerBlue, GoldenRod,
GreenYellow, HotPink, Khaki, Lime, Navy, Orchid, Salmon, Silver, Tan,
Teal, Tomato, etc.
173 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Color Values: RGB Value
A color can be specified as an RGB (red, green, blue) as in the format below:
The parameter (red, green, blue) accepts the value between 0 and 255. These values
define the intensity of the color.
Color format: rgb (red, green, blue)
For Example, rgb (0,255,0) is displayed as green because green parameter is set to
its highest value (255) while other are set to lowest. You can mix the RGB value to
get new color.
<h1 style=”background-color:rgb(167, 100, 255);”>rgb(167, 100, 255)</h1>
rgb(167, 100, 255)
Here, in the above example, background color of h1 element is set with the values
below:
Red = 167 | Green = 100 | Blue = 255
Color Values: HEX Value
This is also similar to RGB values. Instead of the values between 0 and 255, we put
hexadecimal number for Red, Green, and Blue values between 00 and FF.
Color format: #rrggbb
Where, rr (red), gg (green), and bb (blue) are the hexadecimal values between 00
and FF.
For Example, #FF0000 is displayed as red because red parameter is set to its
highest value (FF), while other are set to lowest. You can mix the RGB value to get
new color.
<h1 style=”background-color:#E08227;”>#E08227</h1>
#E08227
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 174
Vedanta Let’s Log in Computer Science | Book 9
Here, in the above example, background color of h1 element is set with the
hexadecimal values given below:
Red = E0 | Green = 82 | Blue = 27
CSS Text
CSS supports different text styles to format your textual data in an HTML
document.
Properties Some common CSS text properties
Example color
Description <h1 style=”color:green;”>Vedanta Publication</h1>
Properties Task: applies color to text
Example Here, the color of h1 is set to green.
Description text-align
<h1 style=”text-align:center”>Vedanta Publication</h1>
Properties Task: To set the alignment of the text.
Example Options: left | right | center | justify
Here, the text of h1 is aligned at center.
Description text-decoration
<h3 style=”text-decoration: overline Mount Everest
dotted red;”>Mount Everest</h3> Annapurna
<h3 style=”text-decoration: line- Kanchanjunga
through;”> Annapurna</h3>
<h3 style=”text-decoration: overline
underline;”> Kanchanjunga</h3>
Applied to set the underline or overline styles for text.
CSS Fonts
The CSS font properties are used to define the font family, boldness, size, and the
style of a text.
Properties Some common CSS font properties
font-family
175 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Example <p style=”font-family: Arial, Times, Serif;”>Hello World</p>
Description Task: sets the desired font
Properties Here, the font for the text “Hello world” is set on priority basis: It
Example sets “Arial” font, if not available then it sets “Times”. If the “Times”
Description is also not available then it sets “Serif”.
font-style
Properties <p style=”font-style:italic;”>Hello World</p>
Example Task: To specify the italic text
Description
Options: normal | italic | oblique
Properties
Example Here, the text “Hello World” is appeared in italic form.
Description font-size
<p style=”font-size:16px;”>Hello Friends!!!</p>
Task: To specify the size of the text
Here, the size of the text “Hello Friends!!!” is set as 16px. Other
supported units are mm, cm, in, %, em, pc, pt, etc.
font-weight
<p style=”font-weight:bold;”>Computer Science</p>
Task: To specify the weight of a font
Options: normal | bold
Here, the text “Computer Science” is appeared in bold form.
CSS Links
CSS links are used to change the layout of hyperlinks in HTML document.
Some CSS link properties: color, font-family, background
Four states of Hyperlink:
a) a:link - a normal, unvisited link
b) a:visited - a link the user has visited
c) a:hover - a link when the user brings mouse over it
d) a:active - a link when the clicked on it
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 176
Vedanta Let’s Log in Computer Science | Book 9
Code Example Description
<html>
<head> It creates a hyperlink with a text
<title>CSS Links</title> “Details of Author”.
<style>
a:link { The link is appeared in red color without
color: red; underline.
text-decoration:none; Note: text-decoration:none removes
} the link’s underline.
a:visited { When you visit the link, the color of the
color: green; link turns into green.
}
When you bring your mouse over the
link, its color will be changed into
brown with purple background.
When the link is being clicked on, it is
appeared in blue.
a:hover {
color: brown;
background-color: purple;
}
a:active {
color: blue;
}
</style></head>
<body>
<a href =”https://www.sushilupreti.
com.np” target=”_blank”> Details of
Author</a>
</body>
</html>
177 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
CSS Borders
The CSS border properties are used to specify the style, width, and color of an
HTML element’s border.
Properties Some common CSS border properties Nepal
Example
border-style
Description
Properties <h4 style=”border-style:dotted; width:45px;
Example text-align:center;”>Nepal</h4>
Description Task: To specify the border style of an HTML element
Properties
Example Some Options: dotted | dashed | solid | double
Description border-color
Properties
Example <h4 style=”border-style:double; Nepal
border-color:red;width:45px; text-
Description align:center;”>Nepal</h4>
Task: To specify the border color
Color can be specified using color name, RGB or HEX values
border-radius
<h4 style=”border-style:solid; border- Nepal
color:blue; border-radius:5px; width:145px;
text-align:center;”>Nepal</h4>
Task: To set the rounded border
border-width
<h4 style=”border-style:solid; Nepal
border-width:5px; width:45px; text-
align:center;”>Nepal</h4>
Task: To specify the width of the border
CSS Backgrounds
The CSS background properties are used to specify the background effects of an
HTML element.
Properties Some common CSS background properties
Example background-color
<body style=”background-color:blue”>Hello World</body>
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 178
Vedanta Let’s Log in Computer Science | Book 9
Description Task: To specify the background color of an HTML element
Properties Here, the background color of the body is set as blue.
Example
background-image
Description
Properties <style>
Example body {
background-image: url(“images/red_panda.jpg”);
Description }
</style>
Task: To specify an image to use as the background of an element.
Here, the image “red_panda.jpg” is set as a background of the <body>
section.
background-repeat
<style>
body {
background-image: url(“images/red_panda.jpg”);
background-repeat: repeat-x;
}
</style>
Task: To specify whether the image should repeat horizontally, vertically,
both, or none.
Here, the image is repeated horizontally only.
By default, the image is repeated horizontally and vertically.
repeat-y – repeated vertically only
repeat-none – appeared only one time
CSS Margins
The CSS margin properties are used to specify the space around the elements (top,
right, bottom, left).
Code Example Description
<p style=”margin: 200px;”> As the margin property has only one value, it sets all
Hello World!!! the four margins for <p> element as 200 px.
</p> As the margin property has two values, it sets the
following margins for <p> element;
<p style=”margin: 100px
200px;”> top and bottom margin: 100 px
left and right margin:200px
Hello World!!!
</p>
179 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
<p style=”margin: 50px 100px As the margin property has three values, it sets the
200px;”> following margins for <p> element;
Hello World!!! top-margin: 50px
</p> right and left margin:100px
bottom-margin: 200px
<p style=”margin: 100px 50px
75px 60px;”> As the margin property has four values, it sets the
Cascading Style Sheets is a following margins for <p> element;
style sheet language used for
describing the presentation of a top-margin: 100 px
document written in a markup right-margin: 50px
language like HTML. </p> bottom-margin:75px
left-margin:60px
CSS Styling Images
Using CSS, you can specify the different style of images in an HTML document.
Some examples of styling images using CSS:
<img style=”border-radius: 8px;”
src=”images/lumbini.jpg”>
Here, the border-radius property is used to create
a rounded image.
<img style=”border-radius:50%;” src=”imag-
es/everest.jpg”>
Here, the border-radius property is used to create
a circled image.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 180
Vedanta Let’s Log in Computer Science | Book 9
POINTS TO REMEMBER
CSS is the language for describing the presentation of web pages, including colors,
layout, and fonts.
The CSS syntax is made up of three parts: selector, property, and value.
Types of CSS selectors include element selector, class selector, and ID selector.
A period (“.”) precedes a class selector and a hash character (“#”) precedes ID
selector.
The <style> tag is used to change the appearance and position of various elements
on a HTML document.
CSS supports two types of length units: Absolute Length Units and Relative Length
Units.
Types of CSS includes Inline Style, Internal Stylesheet, and External Stylesheet.
The extension of external CSS file is .css.
Exercise
1. Answer the following questions:
a) What is CSS?
b) What are advantages of using CSS?
c) What are the components of CSS Style?
d) What is class selector? Describe its types.
e) Mention the different types of CSS with suitable examples.
2. Choose the best answer:
a) Which is not the part of CSS syntax?
i. selector ii. property
iii. title iv. value
181 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
b) The value and property are separated by a ……..
i. colon ii. comma
iii. semi-colon iv. period
c) A property paired with a value is called a CSS ……...
i. ruleset ii. definition
iii. selector iv. declaration
d) A ……... precedes ID selector.
i. . (period) ii. @ symbol
iii. # symbol iv. ; (semi-colon)
e) CSS declarations are put within ……...
i. [ ] ii. ( )
iii. < > iv. { }
f) The ……... tag is used to change the appearance and position of various elements on
a HTML document.
i. <style> ii. <div>
iii. <link> iv. <head>
g) Which is not the absolute length unit?
i. cm ii. em
iii. px iv. in
h) Which is not the state of hyperlink?
i. visited ii. active
iii. direct iv. hover
3. State whether the following statements are True or False:
a) We have to create a separate css file in inline css.
b) The CSS selector is normally an HTML element.
c) Each property must have a value.
d) CSS declaration blocks paired with selectors is called CSS ruleset.
e) A class selector must be applied to only one element.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 182
Vedanta Let’s Log in Computer Science | Book 9
4. Write the purposes of the following HTML tags:
a) <STYLE> b) <LINK> c) <DIV>
5. Fill the table below from the below CSS code:
p{text-align:center; color:blue; font-weight:bold;}
Selector
Property
Values
Declaration
CSS rule
6. Create a CSS class selector with the following features:
Text alignment – right
Text format – bold, italic and dotted yellow underline
Font size – 40px
font color – white
background color – brown
Use the above CSS class selector in one of the HTML element.
7. Create a CSS ID selector with the following features:
Top, Right, Left and Bottom margin – 30px, 75px, 100px, 50px
Border – Color:Orchid, Style:double, Width:5px
Text format – bold
Font size – 20px
font family – verdana
background color – Red (99), Green (104), Blue (200)
Use the above CSS ID selector in one of the HTML element.
8. One of your friend is trying to change the layout of hyperlink in an HTML document.
Your friend wrote the HTML below and CSS code. However, there are some mistakes.
Help your friend to design the webpage without any problem.
The hyperlinks should Your Friend’s Code:
have the layout below:
183 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Normal State: <html>
Font Color – Orange <head>
No Underline <title>CSS Links</title>
Background Color – Blue <style>
Font Size – 20px
a-link {
Visited State: color:orange;
Font Color – Yellow text-decoration:no underline;
Background Color – Red background-color:orange;
size:20px;
Hover State: a:visited {
Font Color – Blue color:orange
Underline background-color:red;
Background Color – Orange }
Font Size – 30px
Active state: a:hover {
Font Color – HotPink; color:blue;
text-style:underline;
size:30px
bgcolor: orange;
}
a:active {
font-color: HotPink;
}
</style>
</head>
<body>
<a href =”http://nepal.gov.np/” target=”_blank”>
Nepal</a>
</body>
</html>
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 184
Vedanta Let’s Log in Computer Science | Book 9
Lab Activities
a) Write an HTML codes to display information of your school using necessary HTML tags
and attributes.
b) Create a web page using following HTML tags to describe the importance of “Computer
Education”.
Text formatting tags, Paragraph tag, Font tag, Center tag, Line break tag, and
Image tag.
c) Write the HTML codes to describe festivals of Nepal. At least, this page should contain
the basic HTML structure tags, some formatting tags, line breaking tag, and two
different types of list with scrolling heading from up to down.
d) Write the HTML codes to prepare a web page to describe you and your family having
hyperlink and images. Create and include an internal CSS code as well.
e) Write the HTML codes to present table in web page. You should include the following
features and information:
Largest heading with scrolling effect - “Our Academy”
Table caption - “Students Record”
Table background color - Red
Table headings – Roll No, Name of Students, Grade and Phone.
Number of records – 5
Create and include an external CSS file.
f) Write the HTML codes to prepare a website of your school that must contain the
following things.
It should have at least 3 pages.
It should have a home page with picture of your school.
It should have different levels of headings as required.
It should have scrolling effects as required.
It should include different font sizes and colors to present information in a web
page.
It should include links between pages.
It should include a table to display yearly activities.
Include an inline CSS wherever necessary.
185 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Group
D
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 186
Vedanta Let’s Log in Computer Science | Book 9
Unit
4.1
Chapter Includes:
General Concept of Programming
Programming language and its Types
Language Processor
Software Development Life Cycle
Algorithm and Flowchart
a) Program and Programming
Computer Program
A computer program is a set of
sequential instructions prepared
by using a programming language
that are translated into machine
level language to obtain desired
result. In other words, a computer
program tells a computer what to
do and how to do.
The single command for a
computer to do one small specific
task is called an instruction, set
of instructions to do one task is a
program and a complete program made of many modules that is used to do certain
work is called software.
Instruction Program Software
Ask a number Calculate interest on Spreadsheet
from user given sum of money Software
187 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Computer Programming
Computer programming (often called programming or coding) is the process of
designing, writing, testing, debugging, and maintaining the source code of computer
programs. This source code is written in one or more programming languages (such
as QBASIC, C, C++, Java, etc.).
Programmer
A programmer, computer programmer, developer, or coder is a person who writes
computer software using one or more computer languages.
(b) Programming Language
A “programming language” is a language designed to describe a set of
consecutive actions to be executed by a computer. A programming language is,
therefore, a practical way for us (humans) to give instructions to computer.
Types of programming language Machine Language
i) Machine Language
Machine language is the numeric codes
for the operations that a particular computer
can execute directly. The codes are strings of 0s
and 1s, or binary digits (“bits”) only. Machine
language instructions typically use some bits to
represent operations, such as addition, and some
to represent operands, or perhaps the location of
the next instruction.
ii) Assembly Language Assembly Language
Assembly language is one level
above machine language. It uses short
mnemonic codes for instructions and
allows the programmer to introduce
names for blocks of memory that hold
data. Like machine language, assembly
language requires detailed knowledge
of particular internal computer
architecture.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 188
Vedanta Let’s Log in Computer Science | Book 9
iii) High Level Language
It is a simplified programming language High Level Language - QBASIC
written in simple English with some mathematical
notations. It does not require the detailed knowledge
of hardware. But, it is not directly understood by
computer. So, before execution the program written
in high level language must be translated into
machine language. QBASIC is one of the examples
of high level language.
4GL (Fourth Generation Language) 5GL (Fifth Generation Language)
4GLs are closer to human language than other 5GL is a problem solving programming
high-level languages and are accessible to language. It solves a problem without
people without formal training as programmers. a programmer. It is mainly used in
4GL simplifies the programing process. artificial intelligence research.
Generations of Computer Language:
First Second Third Fourth Fifth
Machine
Language Assembly Procedural Non-Procedural Intelligent
0–1 Language Language Language Language
Long, very Shorter Code Include Application NLP (Natural
difficult (Mnemonics), commands,
Still difficult needs to be Generators, Language
translated into
machine code Reduce Processing),
programming time Artificial
Intelligence
(c) Language processor
Language processor is a
program that performs tasks, such
as translating and interpreting,
required for processing a specified
programming language.
Assembler: It translates the program written in assembly language into
machine language and vice versa.
Compiler: It translates the whole program into machine language at once.
Interpreter: It translates one statement at a time.
189 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Difference between compiler and interpreter
Interpreter Compiler
It converts one statement at a time. It converts a whole program at once.
It does not create an object code file. It creates an object code file.
Program execution is slow. Program execution is fast.
Error detection is instant and easy. Error detection is comparatively difficult.
Example: QBASIC Example: C, C++
(d) Software Development Cycle
Application software development is the process of creating such software,
which satisfies the end user’s requirements and needs. The process of developing
the application software is called the Software Development Life Cycle (SDLC).
Problem Definition
Maintenance System Analysis
System Evaluation Software System Design
Development
Life Cycle
(SDLC)
Implementation Coding
System Testing
Steps involved in SDLC
SDLC consists of mainly the following steps:
i) Problem Definition
It involves the following tasks:
Defining the current problem
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 190
Vedanta Let’s Log in Computer Science | Book 9
Specifying the objectives of the program
Establishing the system boundaries
Input & Output requirements
ii) System Analysis
In this phase, main activities included:
Understanding the problem
Feasibility analysis or study
System requirements
iii) System Design
This phase consists of designing a solution of the problem identified in
the previous stages using different design tools such as Algorithm, Flowchart,
Pseudo Code, Decision Table, Decision Tree, Data Flow Diagram (DFD), Entity
Relationship (ER) Diagram, etc.
iv) System Development (Coding)
At this stage, the final program specification and the file design prepared in
previous phase is handed over to the programmer. The programmer then translates
the specification in programming language. Executable programs are the outputs
of this stage.
v) System Testing
Testing is a process of executing a program with the intent of finding an error
and fixing them. There are two types of errors (bugs) – syntax errors and logical
errors.
A syntax error is a violation of the rules of the programming language. The logic
error occurs when the programmer uses an incorrect calculation.
Testing is primarily divided into two types. They are: White Box Testing and Black
Box Testing.
vi) System Implementation
In this phase, the system or application is installed and used in day to day
activities of the organization.
191 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
GUIDELINES CONCEPTS Vedanta Let’s Log in Computer Science | Book 9
EXAMPLEvii) System Evaluation
The newly implemented system is evaluated at this stage that helps developers
and users to analyze and highlight the major strong and weak part of the system.
viii) System Maintenance
After the program is fully tested and brought into operation, it typically
requires maintenance to modify or update the system.
(e) Algorithm and Flowchart
Algorithm and Flowchart are the system design tools which are used to solve
different problems before coding.
System Design Tool: Algorithm
What is an Algorithm?
An algorithm is a precise rule (or set of rules) specifying how to solve a specific
problem in finite number of steps.
Features of a good algorithm
Be language independent.
Be simple, complete, unambiguous, and step-wise.
Have no standard format or syntax.
Be helpful to understand problems.
Algorithm to calculate the sum of any two numbers
Step 1 : Start
Step 2 : Ask any two numbers and stores into 'a' and 'b'
Step 3 : c = a + b
Step 4 : Display c
Step 5 : Stop
Other Examples:
Algorithm to cross a busy road
Step 1 : Start
Step 2 : Find zebra crossing
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 192
Vedanta Let’s Log in Computer Science | Book 9
Step 3 : See whether vehicles are coming or not
Step 4 : Is a vehicle coming?
If yes, Wait and repeat from step 2
Step 5 : If no, Cross the road
Stop
Algorithm to check whether the given number is odd or even.
Step 1 : Start
Step 2 : Ask any number and store as a.
Step 3 : Is a divisible by 2?
If yes, display “Even”
If no, display “Odd”
Step 4 : Stop
Algorithm to find the greater number among any two supplied numbers
Step 1 : Start
Step 2 : Ask any two numbers and stores into a and b
Step 3 : Is a>b?
If yes, display a
If no, display b
Step 4 : Check more?
If yes, go to step 2
If no, go to step 5
Step 5 : Stop
Algorithm to display the first 10 natural numbers
Step 1 : Start
Step 2 : N=1
Step 3 : Display the value of N.
Step 4 : Increase the value of N by 1.
Step 5 : Is N<=10?
If yes, go to step 3
If no, go to step 6
Step 6 : Stop
193 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
CONCEPTS Vedanta Let’s Log in Computer Science | Book 9
GUIDELINESSystem Design Tool: Flowchart
SYMBOLSWhat is a Flowchart?
A diagram of the sequence of operations in a computer program is called flowchart.
It uses few standard symbols.
Uses/Advantages of a Flowchart
To specify the method of solving a problem.
To plan the sequence of a computer program.
Communicate ideas, solutions.
Drawing a Flowchart
Identify input, and output.
Develop logic to solve the problem.
Draw the flowchart using the appropriate symbols and arrows to show the
sequence of steps in the solution.
Rounded Rectangle
Start/End block. Represents START and
END of the program.
Parallelogram
Input/output block. Represents input and
output of data.
Rectangle
Process block. Represents process,
formula or function.
Diamond Shape
Decision block. Represents any decision in
the program.
Circle
Connector. Used to link to segment of
flowchart.
Arrows
Flow lines. Used to show the direction of
flow of program.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 194
Vedanta Let’s Log in Computer Science | Book 9
Flowchart – To cross a busy road
Start
Find Zebra Crossing
See the Vehicles
Is a vehicle Yes
coming?
No
Cross the road
Stop
Example 1 – Sequential Control Structure:
Flowchart to find the sum of any two supplied numbers
Start
Read A,B
C=A+B
Cross the road
Stop
195 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
Example 2 – Selection Control Structure:
Flowchart to find the greater number among any two supplied numbers
Start
Read A,B
Is A>B? Yes
No Display A
Display B
Stop
Example 3 – Iteration Control Structure:
Flowchart to display the first 10 natural numbers
Start
N =1
Display N
Is Yes
N<=10? N =N+1
No
Stop
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 196
Vedanta Let’s Log in Computer Science | Book 9
POINTS TO REMEMBER
A computer program is a set of sequential instructions that tells the computer what
to do and how to do.
Computer programming is the process of designing, writing, testing, debugging, and
maintaining the source code of computer programs.
A “programming language” is a language designed to describe a set of consecutive
actions to be executed by a computer.
Language processor is a program that performs tasks, such as translating and
interpreting, required for processing a specified programming language.
Compiler translates the whole program at once where as interpreter translates one
statement at a time.
SDLC consists of different phases: Problem definition, System Analysis, System
Design, Coding, Testing, Implementation, Evaluation, and Maintenance.
An algorithm is a precise rule (or set of rules) specifying how to solve a specific
problem in finite number of steps.
A diagram of the sequence of operations in a computer program is called flowchart.
It uses few standard symbols.
Exercise
1. Tick (√) the correct options:
a) Understanding the problem is ...........
i) System Design (ii) System Analysis
(iii) Coding (iv) Maintenance
b) Converts one statement at a time.
(i) Assembler (ii) Compiler
(iii) Interpreter (iv) All of them
c) A computer can execute directly.
(i) Assembly Language (ii) 4GL
(iii) Algorithm (iv) Machine Language
197 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
d) Uses a standard set of symbols. ii) 5GL
i) Flowchart iv) Pseudocode
iii) Algorithm
ii) 5GL
e) Use mnemonics codes for instructions. iv) Assembly Language
i) 4GL
iii) Machine Language
2. Match the following ‘Purpose’ and ‘Use’:
Purpose Use Write the use in empty brackets.
1. Find a smaller number 1. .................... > ( )
among any two a) Loop
numbers.
2. Calculate the sum of b) Start 2. .................... > ( )
X,Y and Z. 3. .................... > ( )
3. Repeat a sequence of c) Process
steps.
4. Indicate that the 4. .................... > ( )
problem has been d) Input
solved. 5. .................... > ( )
6. .................... > ( )
5. Read three numbers. e) Stop
7. .................... > ( )
6. Print the sum. f) Decision
7. Indicate beginning
of a problem solving g) Output
flow.
3. Write down the technical terms for the following statement:
a) A step of instructions given to the computer to perform a specific task.
b) The process of designing, writing, testing, debugging, and maintaining the source code
of computer.
c) Translates the whole program into machine code at once.
d) Computer language written in simple English with some mathematical notation.
e) A step-by-step solution to a problem.
f) A graphical representation of a solution to a problem.
g) A flowcharting symbol used while taking decisions.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 198
Vedanta Let’s Log in Computer Science | Book 9
4. Arrange the below phases of SDLS in correct order.
Testing System Design
Maintenance System Analysis
Evaluation Coding
Problem Definition Implementation
5. Answer the following questions.
a) Define program and programming.
b) What is a programming language? Explain with its types.
c) What are language processors?
d) Differentiate between Compiler and Interpreter.
e) What do you mean by SDLC? Explain the various phases involved in SDLC.
f) What is an algorithm? List the features of a good algorithm.
g) What is a flowchart? List the common symbols of flowchart with their function.
h) List the advantages of flowchart.
Develop Yourself
1. Prepare algorithm and flowchart for the following problems:
a) To calculate Simple Interest and total amount.
b) To check whether a student passed or failed exam.
c) To find the smallest number among any 3 supplied numbers
d) To display the first 10 natural numbers in descending order.
199 Approved by Curriculum Development Centre, Sanothimi, Bhaktapur
Vedanta Let’s Log in Computer Science | Book 9
General Concept of Worksheets
Programming
1. The flowcharts below suggests whether you eat the served food item or not. Study
the flowchart and answer the given questions.
Start
Read the food item.
Are you Yes
Vegetarian?
Is it Veg- No
No item?
Enjoy the food.
Stop
a) Identify each element of the flowchart by putting ‘I’ for input, ‘O’ for output, ‘P’ for
process and ‘D’ for decision in the space provided next to the boxes.
Approved by Curriculum Development Centre, Sanothimi, Bhaktapur 200
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Vedanta Let's Log in Computer Science Book - 9.indd
Related Publications
Discover the best professional documents and content resources in AnyFlip Document Base.
Search