HTML Forms
HTML forms are used to pass data to a server.A form can contain input elements
like text fields, checkboxes, radio-buttons, submit buttons and more. A form
can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form are:
< form>
input elements
< /form>
The Input Element
The most important form element is the input element. It is used to select user
information.
It can vary in many ways, depending on the type attribute. An input element
can be of type text field, checkbox, password, radio button, submit button, and
more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text
into:
GREEN Computer Book-8 201
The form itself is not visible. Also note that the default width of a text field has
20 characters.
Password Field
<input type="password" /> defines a password field:
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select
ONLY ONE limited number of choices:
202 GREEN Computer Book-8
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select one
or more options of a limited number of choices.
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send data entered in form to a server. The data is
sent to the page specified in the form's action attribute. The file defined in the
action attribute usually does something with the received input:
< form name="input" action="html_form_action.asp" method="get">
Username:< input type="text" name="user" />
< input type="submit" value="Submit" />
< /form>
GREEN Computer Book-8 203
If you type some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called "html_form_action.
asp". The page will show you received input.
Some commonly used HTML Tags
TAGS ATTRIBUTES FUNCTIONS
BGCOLOR = " " Changes the colour of the
body background
<BODY> BACKGROUND = " "
</BODY> TOPMARGIN = " " Sets a picture as body
BOTTOMMARGIN = " " background
BOTTOMMARGIN = " "
LEFTMARGIN = “ ” Sets the top margin of a page
<HR> SIZE = " " Sets the bottom margin of a
page
<BR> WIDTH = " " Sets the bottom margin of a
COLOR = " " page
ALIGN = " "
Sets the left margin of a page
<P> ALIGN = " "
<!> Lets to set the size of the
horizontal line in pixels or
percentage
Sets the width of the
horizontal line in pixels
Sets the colour of the line
Sets the alignments of the line
in the page to left, right or
center
Sets the alignment of text in a
paragraph to left, right, center
or justify
Sets comments or remarks
FACE = " " Sets the font style of text
<FONT> SIZE = " " Sets the font size of text
</FONT> COLOR = " " Sets the font colour of text
204 GREEN Computer Book-8
SRC = " " Sets the path of a picture
Sets the alignment for a
ALIGN = " " picture to left, right or center
Sets the border of a picture
<IMG> </IMG> BORDER = " " Sets height of a picture
HEIGHT = " " Sets width of a picture
Displays text in case image is
WIDTH = " " not displayed by the user
ALT = " " Declares type of bulleted list
as fill round, disc, square,
<OL> </OL> TYPE = " " circle etc
START = " " Defines item list within a cell
Inserts a table into a web
<UL> TYPE = " " document
Sets the width of shaded
<LI> </LI> border around a table
Sets the colour of the border
<TABLE> BORDER = " " Defines the amount of space
</TABLE> BORDERCOLOR = " " between the cells in a table
CELLSPACING = " " Defines the amount of space
between the edges of the cell
CELLPADDING = " " and its content
Sets the height of a table
HEIGHT = " " Sets the width of a table
WIDTH = " " Defines a table row
Sets alignment to left, right or
<TR> </TR> Align = " " center
<TH> BACKGROUND = " " Sets background picture for a
BGCOLOR = " " cell
BORDERCOLOR = " " Sets background colour for a
cell
Sets the border colour of a cell.
Sets the table heading
GREEN Computer Book-8 205
ALIGN = " " Defines a cell containing data
VALIGN = " " Sets the alignment of text
inside the cell to left, right or
<TD> </TD> BACKGROUND = " " center
<A> </A> BGCOLOR = " "
COLSPAN = " " Sets the vertical alignment of
ROWSPAN = " " text in the cell to top, middle
BORDERCOLOR = " " or bottom
HREF = " " Sets background picture for a
cell
NAME = " "
Sets background color for a
TITLE = " " cell
<MARQUEE> BEHAVIOR = " " Combines number of columns
</MARQUE> DIRECTION = " " together
BGCOLOR = " " Combines number of rows
together
Sets border color of a cell
Creates a link with other
document/s or within the same
page
Specifies the path of webpage
file
Specifies name of the section
to be linked within the same
web page
Displays message on a link
while Mouse over
Scrolls text around a page
Sets movement behavior of
text as alternate, scroll or slide
Sets the direction of marquee
text movement, left or right
Sets background colour for
marquee text
206 GREEN Computer Book-8
POINTS TO REMEMBER
1. HTML is a Markup Language which means you use HTML to simply
"mark up" a text document with tags that tell a Web browser how to
structure it to display.
2. HTML Tags are the instructions which are used to create HTML
document that can be opened by the browsers and by other agents
worldwide if uploaded in WWW.
3. Attributes are the additional instructions that further define the behavior
of the element.
4. The BODY of the document contains the actual information.
5. On a web page, text flows continuously across the page regardless of
carriage returns or white spaces in the html code.
6. Table is the best tool for organizing data in rows and columns.
7. A horizontal rule is a dividing line placed across the page of the
document.
8. An input element can be of type text field, checkbox, password, radio
button, submit button, and more.
9. Links or hyperlinks are the most important part of the World Wide Web.
10. The description lists in which a word and their associated definitions are
paired together, as in a glossary, each with its own tag.
11. A form can contain input elements like text fields, checkboxes, radio-
buttons, submit buttons and more.
12. A submit button is used to send data entered in form to a server.
13. <HEAD> tag defines the information that would appear in the header
section of documents.
14. <TITLE> tag displays the title text on the Title bar of browser’s window.
15. Check boxes let a user one or more options of a limited number of choice.
Exercise
1. Answer the following questions:
a. What do you know about HTML?
b. What is the difference between tag and attributes?
c. Write importance of BODY tag in HTML.
d. What is the use of <IMG> tag?
GREEN Computer Book-8 207
e. How can we put link in a web page?
f. What is the use of <TABLE> tag?
g. Differentiate between <OL> and <UL> tag.
h. What is Tag in HTML? Write its type.
2. What are the following tags used for in HTML?
a. <FONT> b. <TABLE> c. <TR> d. <TD>
e. <BR> f. <HR> g. <TH>
3. State whether the following statements are TRUE or FALSE:
a. The horizontal rule tag is used to break a text in a paragraph.
b. Container tags are the ones which have only Start tag.
c. MARQUEE tag scrolls text top to button only.
d. The head section specifies the main content of an HTML document.
e. There are six levels of headings in HTML.
4. Fill in the blanks with the correct option:
a. HTML stands for ...........................
b. All HTML tags are enclosed within ........................... and ...........................
brackets.
c. Internet Explorer is a ...........................
d. The three types of lists that can be inserted in HTML are ...........................,
........................... and ...........................
e. We can insert images in an HTML document by using the
........................... tag.
f. We use ........................... tag to link to another document.
5. Write HTML tags to create following page.
TAGS ATTRIBUTES FUNCTIONS
208 GREEN Computer Book-8
LAB Practice1
1. Let us try to solve example.
A. Type the following codes in notepad:
<html>
<body>
<table width="100%" border="0" height="100%">
<tr height="25%">
<td colspan="2" bgcolor="#FFA500">
<h1>I love Nepal</h1>
</td>
</tr>
<tr height="50%" valign="top">
<td bgcolor="#FFD700" width="100px" align="top">
<a href="page3.htm">Mountains<br/></a>
<a href="page4.htm">Himalaya<br/></a>
Festivals<br/></a>
<a href="page5.htm">Tourism</a><br>
<a href="page6.htm">Photo Gallery</a>
</td>
<td bgcolor="#EEEEEE" height="200px" width="400px" align="top">
<h4> Festivals of Nepal </h4>
<OL>
<a href="dasain.htm"><li>Dashain</a>
<li>Tihar
<a href="Chhath.htm"><li>Lhosar</a>
<li>Udhauli Uvauli
<li>Holi
<li>Teej
GREEN Computer Book-8 209
<li>Dipawali
<li>Bakra Id
</ol></td>
</tr>
<tr height="15%">
<td colspan="2" bgcolor="#FFA500" align="center">
Copyright ©</td>
</tr>
</table>
</body>
</html>
B. Save the file as "yyy.htm".
Practical questions
1. Write HTML tags to create table and enter some data.
2. Write HTML tags to display data in ordered list.
3. Write HTML tags to display data in unordered list.
4. Prepare a webpage to describe your school.
5. Prepare a webpage to describe Dahain festival.
6. Prepare a webpage to describe the beautiful places of Nepal. Use hyperlink
and images in the webpage.
210 GREEN Computer Book-8
16 Multimedia
Introduction
Multimedia is an interactive Multi Many or more
media and provides than one
multiple ways to represent +
information to the user Media Media of
in a powerful manner. It communication
provides an interaction
between users and digital
information. It is a medium of communication. Some of the sectors where
multimedia is used extensively are education, training, reference material,
business presentations, advertising and documentaries.
By definition "Multimedia is a representation of information in an attractive
and interactive manner with the use of a combination of text, audio, video,
graphics and animation." In other words, we can say that multimedia is a
computerized method of presenting information by combining textual data,
audio, visuals (video), graphics and animations. For examples: E-mail, Yahoo
Messenger, Video Conferencing, and Multimedia Message Service (MMS).
Multimedia as the name suggests is the combination of Multi and Media
that is many types of media (hardware/software) used for communication of
information.
Hardware and Software Components of Multimedia
Hardware components of multimedia:
Capture devices: Video Camera, Video Recorder, Audio Microphone,
Keyboards, mouse, graphics tablets, 3D input devices, tactile sensors,
Digitizing/Sampling Hardware
Storage Devices: Hard disks, CD-ROMs, drives, DVDs, Blu-ray, etc.
GREEN Computer Book-8 211
Communication Networks: Ethernet, Token Ring, FDDI, Intranets, Internets.
Computer System: Multimedia Desktop Machines, Workstations,
MPEG/VIDEO/ Hardware.
Display Devices: CD, quality speakers, HDTV, SVGA, Hi-resolution
monitors, colour printers, etc.
Hardware
Software Required for Multimedia:
Multimedia software enables hardware components to perform various tasks
like texts and graphics manipulation, audio and video player and animating
graphics, etc.
Some of the multimedia software are: • MX player
• Window Media Player • Adobe Photoshop
• Animation Pro
Elements of Multimedia
Software
212 GREEN Computer Book-8
Elements of Multimedia:
• Text- All multimedia productions contain some amount of text. The text can
have various types of fonts and sizes to suit the profession at presentation
of the multimedia software.
• Graphics- Graphics make the multimedia application attractive. In many
cases people do not like reading large amount of textual matter on the
screen. Therefore, graphics are used more often than text to explain a
concept, present background information. “It is said that a picture speaks
a thousand of words”. etc. There are two types of Graphics:
Bitmap images- Bitmap images are real images that can be captured from
devices such as digital cameras or scanners. Generally bitmap images are
not editable. Bitmap images require a large amount of memory.
Vector graphics- Vector graphics are drawn on the computer and only
require a small amount of memory. These graphics are editable.
• Audio- A multimedia application may require the use of speech, music
and sound effects. These are called audio or sound element of multimedia.
• Video- The term video refers to the moving picture, accompanied by sound
such as a picture on television. Video element of multimedia application
gives a lot of information in small duration of time. Digital video is useful
in multimedia application for showing real life objects.
• Animation- Animation is a process of making a static image look like it
is moving. An animation is just a continuous series of still images that are
displayed in a sequence. Animation can be used effectively for attracting
attention. It also makes a presentation light and attractive. Animation is very
popular in multimedia application.
Applications of Multimedia:
The following are the common areas of applications of multimedia.
Multimedia in Business
Multimedia can be used in
many applications in a business.
Multimedia technology along with
communication technology has
opened the door for information
of global wok groups. Today the
team members may be working
anywhere and can work for various
GREEN Computer Book-8 213
companies. Thus the work place will become global. The multimedia network
should support the following facilities:
• Voice Mail
• Electronic Mail
• Multimedia Based FAX
• Office Needs
• Employee Training
• Sales and Other types of Group Presentation
• Records Management
Multimedia in Marketing and Advertising
Multimedia are extensively
used in marketing and
advertisement of new product
and services to promote sales
and revenue. Multimedia boosts
communication at an affordable
cost which opened the way for
the marketing and advertising
personnel. Presentations that have
flying banners, video transitions,
animations, and sound effects
are some of the elements used in
composing a multimedia based advertisement to appeal to the consumer in a
way never used before and promote the sale of the products.
Multimedia in Entertainment
Entertainment and multimedia
are inseparable. Almost all the
elements of multimedia are used
in the field of entertainment.
Multimedia is use in making feature
films, cartoon films and animation
films. Now a days highly animated
movies used multimedia to make
special characters and screen the
movies. Some of the animated
214 GREEN Computer Book-8
movies are Jurasic Park, Avatar, Bahubali, etc. Multimedia can be used by
music arranger and musician for music composition and record of music.
Multimedia in Education
Many computer games with focus on education are now available in market.
Consider an example of an educational game which plays various rhymes for
kids. Children can paint pictures, increase the reduced size of various objects
etc apart from just playing rhymes. Several other multimedia packages are
available in the market which provide a lot of detailed information and playing
capabilities to kids.
Multimedia in Banks
Bank is another public place where
multimedia is being more and
more applicable in recent times.
People go to a bank to open saving/
current accounts, deposit funds,
withdraw money, know various
financial schemes of the bank, obtain
loans, etc. Every bank has a lot of
information which it wants to impart
on its customers. For this purpose, it
can use multimedia in many ways. Bank also displays information about its
various schemes on a PC monitor placed in the rest area for customers. Today
on-line and Internet banking have become very popular. They use multimedia
extensively. Multimedia is thus helping banks give services to their customers
and also in educating them about the attractive finance schemes of a bank.
Multimedia in Hospital
Multimedia are used in hospital for
real time monitoring of the condition
of patients in critical cases such as
illness and accident. The conditions
are displayed continuously on
a computer screen and can alert
the doctor/nurse on duty if any
changes are observed on the screen.
Multimedia makes it possible to
consult a surgeon or an expert who
GREEN Computer Book-8 215
can watch an ongoing surgery live on his PC monitor and give online advice
at any crucial juncture.
Communication Technology and Multimedia Services
The advancement of high computing abilities, communication ways and
relevant standards have started the beginning of an era where you will be
provided with multimedia facilities at home. These services may include:
• Basic television services.
• Interactive entertainment.
• Digital audio.
• Video on demand.
• Home shopping.
• Financial transactions.
• Interactive multiplayer or single player games.
• Digital multimedia libraries.
• E-newspapers, e-magazines.
Careers in Multimedia
Careers in multimedia are as varied and as numerous as multimedia products.
Multimedia work is usually done by teams. List of some professions are given
below:
a. Art Director: S/he directs the creation of all art for the project.
This work involves a variety of original media, which are changed
to digital form for manipulation on the modern artists canvas, the
computer.
b. Animator: Animators use their finished work by photographing
models and sculptures or hand-drawn and painted pictures. 2-D and
3-D software are used specially for animation.
c. Graphics Designer: S/he designs and creates products using
graphics software such as Photoshop.
216 GREEN Computer Book-8
d. Videographer: S/he creates the video footage that interfaces with
the interactive technology of the product. Video is often the most
complex, time consuming and resource demanding medium to
create.
e. Technical Lead: S/he ensures that the technologies and the process
of a project works and that it accommodates all project components
and media.
POINTS TO REMEMBER
1. Multimedia is the combination of text, audio, video, graphics and animation.
2. Graphics make the multimedia application attractive.
3. The term video refers to the moving picture, accompanied by sound
such as a picture in television.
4. The text can have various types of fonts and sizes to suit the professional
presentation of the multimedia software.
5. Animation is a process of making a static image look like it is moving.
6. Multimedia software are: Adobe Photoshop, MX-player, Animation pro.
7. Hardware components include: Capture devices, storage devices,
communication networks, display devices and computer system.
8. Animators use their finished work by photographing models and
sculptures or hand-drawn and painted pictures.
Exercise
1. Answer the following questions:
a. Define the term multimedia.
b. List out the hardware components of multimedia.
c. List out the elements of multimedia.
d. What is the software component of multimedia? List commonly used
multimedia software.
e. What is animation?
f. List out the application of multimedia.
g. How is multimedia important in the field of education?
h. List out some professional carriers in multimedia
GREEN Computer Book-8 217
2. Match the following. moving picture
audio
Font graphics
Animation text
Animation pro static image looks like it is moving
Image multimedia software
Video
Sound
3. State whether the following statements are “True” or “False”.
a. Multimedia computers are capable of presenting text, graphics, video,
animation and sound in an integrated way.
b. Much of the content on the web today can be termed as hypermedia.
c. The information presented only in one form is better than the ones
which are presented in many formats.
d. Multimedia is used only in the field of entertainment.
e. Multimedia enhances the interactivity of information to the viewers.
4. Write correct technical terms for the following statements:
a. It is the combination of text, audio, video, graphics and animation.
b. It is a process of making a static image look like it is moving.
c. It is a moving picture, accompanied by sound such as a picture on
television.
d. They are real images that can be captured from devices such as digital
cameras or scanners.
e. They are drawn on the computer and only require a small amount of
memory.
Project Work :
Collect the name of highly animated movies and explain how multimedia is
used in those movies.
218 GREEN Computer Book-8
17 Graphics Application
(Adobe Photoshop)
Introduction
Graphic is a very powerful element of multimedia. It makes your document
attractive and meaningful. It is said that “A picture speaks a thousand words”.
Photoshop is a program that manipulates graphics.
Photoshop program is called effective and creative program. Adobe
Corporation develops this package. It is specially used for photo editing, cover
page designing, photo scanning and giving different types of effect to image.
It is not only gives different types of effects but also shapes in required images
and the process to decrease the image. It's not possible to publish any effect
without Photoshop program. It is a type of multimedia application program.
Loading Photoshop
• Click Start
• Select on Program
• Click on Adobe
• Click on Photoshop
Here you will be able to name
your file, set up the correct
page size, and orientation
for your document.
GREEN Computer Book-8 219
Page Size and Orientation
Change the page size by typing in new values for width and height. Page size
represents the final size you want after bleeds or trimming other marks outside
the page.
In the Preset dropdown menu, you can find such common sizes as letter, legal,
tabloid, etc. Typing in exact values for height and width gives you more control
over the size and orientation of your page.
Resolution
Resolution is a number of pixels on a printed area of an image. The higher the
resolution, the more pixels there are on the page, the better is the quality of the
image. However, high resolution increases the size of the file. The standard
recommended resolution for printed images is 150 - 300, for Web images - 72.
Color Mode
Choose a color mode that will best fit your project. For example, when making
a graphic for a web site, choose RGB. When making an image for print, choose
CMYK.
Background Contents
• Choose the background: white, color, or transparent.
• When you have entered all of your document settings, click OK.
• We will get new Photoshop Screen.
Opening an Image from a Disk
If the image you have is saved on a disk, select File > Open, and then Choose
the image file and click Open. To save your file, select File > Save As and type
in the new name of the file in the dialogue box.
220 GREEN Computer Book-8
Adobe Photoshop Interface
Menu Image name History
Toolbar
Info
Swatches
Layers
The image
Menu Bar:
If you look at the top of the screen you will see the Menu bar which contains all
the main functions of Photoshop, such as File, Edit, Image, Layer, Select, Filter,
View, Window, and Help.
Tool Bar:
Most of the major tools are located in the Tool bar for easy access.
The Image:
The image will appear in its own window once you open a file.
Image Name:
The name of any image that you open will be at the top of the image window
as shown above.
Palettes:
Palettes contain functions that help you monitor and modify images. By
default, palettes are stacked together in groups. These are the palettes that are
usually visible:
GREEN Computer Book-8 221
Navigator, Color, Histogram, Layer. If none of the palettes are visible, go to
Window in the Menu bar and choose palettes you need to work with.
Below is the description of the most commonly used palettes in Adobe
Photoshop CS3.
Navigator
The Navigator palette allows you to resize
and move around within the image.
• Drag the slider, click on the Zoom In
and Zoom Out icons, or specify the
percentage to navigate the image.
Colour, Swatches, Styles
The Colour palette displays the current
foreground and background colors and
RGB values for these colors. You can use
the sliders to change the foreground and
background colors in different color modes.
You can also choose a color from the
spectrum of colors displayed in the color
ramp at the bottom of the palette.
Swatches:
In the Swatches palette you can choose a
foreground or background color or add a
customized color to the library.
222 GREEN Computer Book-8
Styles:
The Styles palette allows you to view, select, and apply preset layer styles. By
default, a preset style replaces the current
layer style. You can use the styles in the
palette or add your own using the Create
New Style icon.
Layers
Layers let you organize your work into distinct levels that can be edited and
viewed as individual units. Every Photoshop CS3 document contains at least
one layer. Creating multiple layers lets you easily control how your artwork is
printed, displayed, and edited.
Layer Visibility:
The eye shows that the selected layer is
visible. Click on or off to see or to hide
a layer.
Layer Locking Options:
Click the checkered square icon to lock
Transparency; click the brush icon to
lock the Image; click the arrow icon to
lock the Position; click the lock icon to
lock all options.
Layer Blending Mode:
By choosing a particular blending
mode from the dropdown menu you
can create a variety of special effects.
Fill
Fill by typing in a value or dragging the color of the image or object.
GREEN Computer Book-8 223
Opacity:
By typing in a value or dragging a slider you can specify the transparency of
the entire layer.
Layer Lock
The icon shows when the layer is locked and disappears when it is unlocked.
Double-click the icon to unlock the layer.
Layer Options Menu
Click the black triangle to see the following options: New Layer, Duplicate
Layer, Delete Layer, Layer Properties, etc
Link Layers
Can be used to link layers together.
Layer Styles
If a layer has a style, an "F" icon is shown at the bottom of the Layers palette.
Click the little black triangle to see style options.
Layer Mask
A grayscale image, with parts painted in black hidden, parts painted in
white showing, and parts painted in gray shades showing in various levels of
transparency.
Layer Set
This option helps to organize images with multiple layers. Click the icon to
create a folder for several layers.
Create New Fill or Adjustment Layer
Click this icon to create a new layer.
Delete Layer
To delete a layer, select a layer in the Layers palette and drag it to the trash can
icon; or, select a layer and click the icon.
224 GREEN Computer Book-8
Tool Box
There are many tools but only the basic tools will be discussed here.
A
B
C
DE
F
G
Selection Tools
Marquee:
The Marquee Tools are used for selecting objects such
as rectangles, squares, and ellipses.
• Click the tool button, choose a rectangular or an
elliptical marquee.
GREEN Computer Book-8 225
• Drag the marquee over the area of the image you wish to select.
Move:
The Move Tool is used to move
selections, objects, and layers.
• Click the tool button, then click on
any object on the page you wish to
move.
Lasso:
There are several Lasso Tools which are
used to make irregular selections. There
is a polygonal lasso tool for polygon
selections, and a magnetic lasso tool
which automatically follows edges of
objects.
Magic Wand:
The Magic Wand Tool selects an area of similar colors in a
single click (such as the white in the cloud logo and here
in duck picture).
• Click the tool button, then
• Click on the area of the image you wish to select
Crop and Slice Tools
Crop Tool:
The Crop Tool allows users to redefine their active image area but not resize
the ENTIRE image. It’s sort of like cutting out a smaller picture from a larger
photo with a pair of scissors.
• Select and cut parts of an image.
• Click the tool button, then click and drag the tool over the part of the image
that you want to keep. Resize the selected area
• Drag the squares at the sides and corners. Click the RETURN key when
your crop box is sized correctly.
Slice Tool:
Used to cut images into slices, which can be exported to a web page.
226 GREEN Computer Book-8
Retouch Tools
Healing Tools:
There are several healing tools in Photoshop
which are used to repair imperfections in
images, or handle blemishes and red-eye.
Clone Stamp Tool:
With the Clone Stamp Tool, a user may select a
source starting point somewhere on an image,
and then paint elsewhere using that starting
point as a reference, effectively cloning the
source.
Eraser Tool:
The Eraser Tool can be used to erase parts of an
image, selection, or layer.
Sharpen Tool:
The Sharpen Tool is used to sharpen edges in
an image, while the Blur Tool blurs edges. The
Smudge Tool smudges an image, similar to
using the finger paint.
GREEN Computer Book-8 227
Dodge Tool:
The Dodge Tool lightens parts of an image
while the Burn Tool darkens. The Sponge Tool
is used to saturate, or de-saturate parts of an
image.
Painting Tools
Brush and Pencil:
The Brush and Pencil tools are used to paint
strokes in graphics. These tools can be highly
customized for very effective painting.
Fill Tools:
The Fill Tools are used to fill entire layers,
selections and areas with a solid color, or
gradient.
Drawing & Type Tools
Type Tools:
The Type Tools are used for creating and setting
type in an image. Both vertical and horizontal type
can be created.
228 GREEN Computer Book-8
Pen Tools:
The Pen Tools are used to create clear shapes and paths
which can be used as vector objects that can be scaled
to any size.
Custom Shapes:
Custom Shapes are vector objects that can be created
from a list of presets (including user created shapes).
Foreground / Background Color
A foreground color and background color can be set to be used
to paint with, color text, and fill objects among other things.
This view provides an easy way to see what colors are currently
selected, and allows for easy switching between two different
colors.
Saving
Saving Document
Remember to save your work often. Saving
frequently reduces the risk of losing the
work you have been doing. To save your
Photoshop document, do the following:
1. Click File > Save.
2. Navigate to the place you would like
your document to be saved by using
the dropdown menu and the navigation
window.
3. Enter the name of your document in the
Save As text field.
GREEN Computer Book-8 229
4. Choose a format to save your project from the Format dropdown menu.
5. Click the Save button in the bottom right corner of the dialogue box.
6. Check to make sure that your document is saved in the place you intended.
Note: If you save your file as PSD (default Photoshop saving format) your
layers will be preserved, but the file size will be large. If you save your file as
JPEG (a common image format) your layers will be flattened and become one
layer. The file size though will be significantly smaller.
Important shortcut keys Shortcut Keys
Ctrl+Shift+J
Photoshop Effect Ctrl+Alt+Shift+>/<
New layer via cut Ctrl+Shift+D
Increase or decrease size of selected text by 10pts Ctrl+U
Selecting Ctrl+Alt+A
Hue or Saturation Ctrl+Alt+Shift+E
Select all layers Cmd+T
Flatten layers Shift+F5
Free Transform Shift+J
Fill Shift+Ctrl+Alt+B
Content Aware Move Ctrl+plus(+)
Black and white dialog box Alt+Comma(,)
Zoom in Shift+plus(+) or
Select bottom layer minus(-)
Blending modes Opt+Shift+Ctrl+R
Shift+Alt+drag
Render Alt+Right/Left Arrow
Deselect all but the intersected area Ctrl+Shift+I
Increase or decrease kerning or tracking Ctrl+J
Invert selection
New layer via copy
230 GREEN Computer Book-8
Select a colour from an image Alt+Brush Tool
First or last brush </>
Show or Hide selection on selected type Ctrl+H
Copy multiple layers Shift+Ctrl+C
Close & go to bridge Ctrl+Shift+W
Change image size Ctrl+Alt+i
Deselect from the selection area Alt+drag
Toggle airbrush option Shift+Alt+P
Deselect the entire image Ctrl+D
Create clipping mask Ctrl+Alt+G
Auto Tone Shift+Ctrl+L
Saving and closing Ctrl+Shift+Alt+S
Show or Hide Polygons Opt+Ctrl+X
Color Balance Ctrl+B
Reveal All Opt+Shift+Ctrl+X
Move a selection Spacebar+Marquee
Tool
Zoom out Ctrl+Minus(-)
Viewing Ctrl+Alt+0
Align text left or center or right Ctrl+Shift+L/C/R
Previous or next brush ,/.
Lens correction Shift+Ctrl+R
Select individual channels Ctrl+3(red), 4(green),
5(blue)
Send layer back Ctrl+[
Bring layer to top of stack Ctrl+Shift+]
Text in Photoshop Ctrl+Shift+>/<
Increase or decrease brush size ]/[
Send layer to bottom of stack Ctrl+Shift+[
GREEN Computer Book-8 231
Desaturate Ctrl+Shift+U
Bring layer forward Ctrl+]
Fit on screen Ctrl+0
Camera Raw Filter Shift+Ctrl+A
Curves Ctrl+M
Merge visible Layers Ctrl+Shift+E
Content aware scale Ctrl+Shift+Alt+C
Increase or decrease brush hardness }/{
Select top layer Alt+Period(.)
Find the sizing handles Ctrl+T, then Ctrl+0
Adaptive Wide Angle Opt+Shift+Ctrl+A
POINTS TO REMEMBER
1. Photoshop is a type of multimedia software.
2. It is specially used for photo editing, cover page designing, photo
scanning and giving different types of effects to images.
3. Resolution is the number of pixels on a printed area of an image.
4. Palettes contain functions that help you monitor and modify images.
5. The Navigator palette allows you to resize and move around within the
image.
6. The Marquee Tools are used for selecting objects such as rectangles,
squares, and ellipses.
7. Lasso Tools are used to make irregular selections.
8. The Crop Tool allows users to redefine their active image area but not
resize the ENTIRE image.
9. The Sharpen Tool is used to sharpen edges in an image, while the Blur
Tool blurs edges.
10. The Brush and Pencil tools are used to paint strokes in graphics.
11. The Type Tools are used for creating and setting type in an image.
232 GREEN Computer Book-8
Exercise
1. Answer the following questions:
a. Define is graphics.
b. What is Adobe Photoshop?
c. Write steps to open Adobe Photoshop.
d. Write steps to save Photoshop document.
e. What is the function of the marquee tool?
f. What is layer? List out its options?
g. What are the functions of palette?
h. Define resolution. What is standard recommended, resolution for
printed image and web image?
2. Fill in the blanks.
a. ………….is used to sharpen edges in an image, while the Blur Tool
blurs edges.
b. ……………… tools are used to paint strokes in graphics.
c. ……………… palette allows you to resize and move around within
the image.
d. ………………. can be used to erase parts of an image, selection, or
layer.
e. …………………tools are used to paint strokes in graphics.
f. ………………….. are used for creating and setting type in an image.
3. Write the functions of the following shortcut keys:
a. Shift + F5 b. Ctrl + J c. Shift + J
d. CMD + T e. Ctrl + U f. Ctrl + (+)
g. Ctrl + M h. Ctrl + B i. Ctrl + [
j. Ctrl + D
4. Match the following. i. effectively cloning the source
a. custom shape ii. distinct level that can be edited viewed
b. clone stamp tool iii. vector objects that can be created from a list
c. crop tool
of presets
d. layer iv. select an area of similar colours
e. magic wand v. allow user to redefine their active image area
GREEN Computer Book-8 233
LAB Practice 1
This exercise can be solved using the following functions:
Paint Bucket Tool, Color Picker, Brush Tool
Use the Paint Bucket Tool to color the picture. Make sure to pick the right layer
before you use the tool.
1. Save the picture mypic.psd to your folder.
2. Open any picture that is in your computer in Photoshop. It should be in
.psd-format because it consists of several layers.
3. Use the Paint Bucket Tool to color each part of the picture. Read about how
to pick a color under Color Picker and Eye Dropper Tool in the Tools.
4. Use the Brush Tool to paint a face in it.
LAB Practice 2
This exercise can be solved using the following functions:
New Picture, Brush Tool, Layers, Eraser Tool
1. Create a new picture. Make it 300 pixels high and 400 pixels wide. The
resolution should be 72 pixels/inch. Read more about it under Create A
New Picture in the compendium.
2. Use the Brush Tool and various brushes to paint a picture on it. Read more
on how to pick different brushes under Brush Tool, and how to change
paint colors under Color Picker And Eye Dropper Tool.
3. Do not paint anything on the Background layer.
4. You will make mistakes. Try using the Eraser Tool on some of them to see
how it works.
5. Feel free to use several layers for every "thing" in the picture if you want.
6. Rename each layer as you see fit (except for the Background layer, which
you can't rename).
234 GREEN Computer Book-8
LAB Practice 3
This exercise can be solved using the following functions:
Transform, Move Tool, Opacity, Eraser Tool
Use the function Transform to change sizes, places and rotations of all the
things in this picture.
1. Save the picture change.psd to your folder.
2. Open any picture as given above the picture in Photoshop.
3. The picture consists of eight layers: seven things and one background. Your
task here is to move the things around and use the Transform function to
put them where you think they should be, and make them look the way
you want.
4. Put the diver out in the water. Use the Eraser Tool set on a medium Opacity
to make him look like part of him is below the water's surface.
LAB Practice 4
This exercise can be solved using the following functions:
Crop
1. Save the pictures crop1.jpg and crop2.jpg to
your folder. Open them in Photoshop.
2. Use the Crop Tool on the three pictures
to cut them the way you think they'll look
the best.
GREEN Computer Book-8 235
18 Program Development
Life Cycle (PDLC)
Introduction
Whatever things you create or develop, you need to undergo several processes
in order to get your work done correctly. If you are constructing a building,
you need to analyze several factors like the design of the house, cost of
materials required, number of rooms, numbers of storeys, etc. It is the same
with the development of a computer program. When you are going to develop
a new computer program, you have to accomplish few processes which have
been termed as Program Development Life Cycle. When programmers build
software applications, they just do not sit down and start writing codes. Instead,
they follow an organized plan, or methodology, that breaks the process into a
series of tasks.
Program Development Life Cycle
The process of developing software
according to the desired needs of a user Problem
Analysis
by following a basic set of interrelated
Testing
procedures is known as Program Maintenance and Problem
or redesign Design
Development Life Cycle. It is a tool used Debugging
Problem
to guide computer programmers through Coding
the development of an application. It is an
outline of each of the steps used to build
software applications. The different steps
of program development life cycle have Documentation
been defined as follows:
1. Problem Analysis
2. Program Design
3. Program Coding 4. Testing and Debugging
5. Documentation 6. Maintenance or Redesign
236 GREEN Computer Book-8
1. Problem Analysis
It is very difficult, even impossible to solve a problem by using a computer
without a clear understanding and identification of the problem. The process
of identifying the problems to be solved before a program is developed is
known as Problem Analysis. It is necessary to understand what the user wants
and what are the problems that are to be solved by a program. A programmer
specifies the kind of input, processing, and output required during this process.
This step is very critical for the completion of a satisfactory program. Inadequate
identification of a problem leads to the poor performance of the system.
The programmer should invest a significant portion of his time in problem
identification. If he does not spend enough time at this stage, he may find
that his well written program fails to solve the real problem. This step is the
process of becoming familiar with the problem. It starts when the programmer
is assigned a task. This step includes the collecting and finding requirements
and system. The process ends when all the programmer’s questions have been
resolved and the requirements of the program are understood.
2. Program Design
Once the problem has been identified, the next stage is the program design.
A computer is both fast and versatile, but it requires the careful specification
of what actions it should take. For the user, there is seldom an opportunity to
allow the computer to make an undirected decision. Therefore, the programmer
must decide, prior to writing his program, exactly which steps the computer
should take to solve an identified problem. Such a functional description of
the task is either called an algorithm or results in a diagram called flowchart.
Most of the program developers use tools such as pseudo code, flow chart, and
hierarchy chart to design programs.
3. Program Coding
The third step is the process of transforming the logic documents into a computer
language format. This stage translates the program design into computer
instructions. These instructions are the actual program or the software product.
During this step the programmer eliminates all the syntax and formal errors from
the program and all logic errors are detected and resolved during this process.
They use programming language like VB, C#, Java, ASP, etc.
GREEN Computer Book-8 237
4. Debugging and Testing
This stage is finding and correcting errors in program. Only few programs run
correctly for the first time, so debugging is an important and time consuming
stage of software development. Programming theorists often refer to program
debugging and testing as verification and validation, respectively. Verification
ensures that the program does what the programmer intends to do. Validation
ensures that the program gives the correct results for a set of tested data.
Testing refers to the validation of the program. Testing ensures that the program
performs correctly the required tasks. Program testing and program debugging
are closely related. Testing is essentially a later stage of debugging in which
the program is validated by trying it on a suitable set of cases. Program testing
is, however, more than a simple matter of exercising the program a few times.
In-depth testing of all possible cases is the best alternative, but this process is
usually impractical. Formal validation methods exist, but are only applicable
to very simple programs. Thus, program testing requires a choice of tested
cases. Among the rules that can aid in program testing are the following:
• Make the test plan part of the program design.
• Check all minor and special cases.
• Select test data on a random basis.
• Plan and document software testing just like hardware testing.
• Use the maximum and minimum values of all variables as tested data.
• Use statistical methods in planning and evaluating complex tasks.
There are two goals in preparing a test plan. Firstly, a properly detailed test
plan demonstrates that the program specifications are understood completely.
Second, the test plan is used during the program testing to prove the correctness
of the program. During this step, a general approach to the testing of the
program is prepared and documented, indicating the number of tests needed
and the purpose of each test.
5. Documentation
This stage is the documentation of the program so that those who use and
maintain it can understand it, and program can be extended to further
applications. Documentation is a stage of software development that is
often overlooked. Yet proper documentation is not only useful in the testing
and debugging stages, it is also essential in the maintenance and redesign
stages. A properly documented program can be easily reused when needed;
238 GREEN Computer Book-8
an undocumented program usually requires so much extra work that the
programmer might start from scratch. Among the techniques commonly used
in documentation are flowcharts, comments, memory maps, parameters and
definition lists, and program library forms.
Proper documentation combines all or most of the methods mentioned.
Documentation is a time consuming task that the programmer performs
simultaneously with the design, coding, debugging and testing stages of
software development. Good documentation simplifies maintenance and
redesign, and makes subsequent tasks simpler.
6. Program Maintenance
This stage is the updating and correcting of the program to account for
changing conditions or field experience. Proper testing and documentation
should significantly reduce the frequency and extent of required maintenance.
Unlike student programs that used for a long time, changes may occur due to:
• Newly discovered bugs.
• Specification changes.
• Specification expansion.
• New equipment.
The costs involved in program maintenance are usually grossly underestimated
by most programmers. It has been studied that in a typical programming
environment, over 50% of the time is spent on maintaining the existing
programs. So, it becomes really necessary to reduce the costs and the time
spent on maintenance. This can be done by the use of the following steps:
• Clarity and readability of code.
• Portability and generality.
• Structured code.
• Modularity.
• Debugging and testing.
• Documentation.
GREEN Computer Book-8 239
POINTS TO REMEMBER
1. 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.
2. The process of identifying the problems to be solved before a program
is developed is known as Problem Analysis.
3. Algorithm and flowcharts are Program Designing tools.
4. Coding is the process of transforming the logic documents into a
computer language format.
5. The process of finding and correcting of programming errors is known
as debugging.
6. Testing is the validation of the program to ensure that the program
performs the required tasks correctly.
7. Documentation of the program is done to facilitate those who use and
maintain it can understand and extend to further applications.
Exercise
1. State whether the following statements are TRUE or FALSE:
a. A programmer follows a series of steps before he/she starts coding
the program.
b. A software program is free of errors at its first design itself.
c. An algorithm and flowchart provides basic information to write a
program.
d. Documentation helps in testing and debugging of a software program.
e. Software programs may need to be extended or redesigned.
2. Answer the following questions:
a. What is PDLC?
b. What are the different stages of PDLC?
c. Why is problem analysis important in programming?
d. What are the different methods of program design?
e. Define debugging with examples.
f. Is it necessary to test a program? If yes, why?
g. What is documentation?
h. Explain the maintenance and redesign stage of PDLC.
i. Write any two differences between testing and debugging.
240 GREEN Computer Book-8
19 Algorithm and Flow
Chart
Introduction
A computer program is developed by programmers. There are so many
people who work behind it. Before writing the programming code, a problem
needs to be analyzed and designed. Algorithm and flow charts are designing
tools. They help in designing program in a sequential set of steps and pictorial
representation.
Algorithm
An algorithm can be defined as a set of clearly defined rules and instructions
in a sequence to solve a problem. It is a step-by-step procedure for solving
any particular kind of problem including computer oriented computational
problems. An algorithm can be written in different kinds of notation such as
natural languages and pseudo code. An algorithm helps a programmer in
writing a computer program to solve a problem. There is no hard and fast rule
for writing an algorithm.
Properties of an algorithm
1. There should be a finite number of steps.
2. All steps of an algorithm should be clear and understandable.
3. Steps specified in an algorithm should be applicable in a computer
program.
4. An algorithm should be capable of producing output from the given input
of instructions after the finite number of steps.
5. Stop the algorithm
GREEN Computer Book-8 241
Example: 1
An algorithm for preparing a cup of Milk tea (Tea Recipe)
Step 1 : Start.
Step 2 : Pour a cup of milk into a tea kettle.
Step 3 : Put the kettle on the fire.
Step 4 : Add tea leaves appropriately.
Step 5 : Wait for some time until the milk with tea leaves in the kettle boils.
Step 6 : Put sugar in a tea cup and pour the tea from the kettle.
Step 7 : Serve the tea and drink.
Step 8 : Stop.
The above example of an algorithm for preparing tea includes all necessary
instructions to prepare a cup of tea. It’s a recipe.
Let’s see another example that illustrates mathematical computations.
Example: 2
An algorithm for calculating and displaying a sum of two different numbers.
Step 1 : Start.
Step 2 : Read the first number and store in variable. (a)
Step 3 : Read the second number and store in variable. (b)
Step 4 : Add the a and b and store the calculated value to a variable sum.
(sum=a+b)
Step 5 : Display the calculated value as result. (sum)
Step 6 : Stop.
Example: 3
An algorithm to find the greatest of three different numbers.
Step 1 : Start.
Step 2 : Read the first number as A.
Step 3 : Read the second number as B.
Step 4 : Read the third number as C.
242 GREEN Computer Book-8
Step 5 : Is A greater than B and A greater than C?
If Yes: Print "A is the greatest".
If No: Go to Step 6.
Step 6 : Is B greater than A and B greater than C?
If Yes: Print "B is the greatest".
If No : Go to Step 7.
Step 7 : Print "C is the greatest".
Step 8 : Stop.
Example: 4
Write an algorithm to print first ten natural numbers
Step 1 : Start.
Step 2 : assign a value 1 to variable P (P=1).
Step 3 : is p is less than or equal to 10?
If “Yes” then .
Step 4 : print p.
Step 5 : Increase the value of P by 1 i.e. (P = P + 1) and repeat from step 3.
If “No” then go to step 6.
Step : 6: Stop.
Flowchart
A flowchart is a diagrammatic or graphical representation that illustrates
the sequence of operations to be performed with different symbols to get the
solution of a problem. In other words, a flowchart is pictorial representation
of an algorithm with different symbols. It presents the flow of instructions in
a pictorial way.
A flowchart plays a vital role in the programming of a problem in any high
level language.
GREEN Computer Book-8 243
Different processes or operations are represented in different symbols and
arrows are used to connect the symbols/boxes and to represent flow of control.
Flowcharts are used in analyzing, designing, documenting or managing a
process or program in various fields. There are different types of Flowchart
which are as follows:
The flowcharts can be categorized under different types. But we discuss only
about program flowchart.
1. Document Flowchart
2. Data Flowchart
3. System Flowchart
4. Program Flowchart
Symbols used in Flowchart
Name and Symbols Descriptions
Oval Start and Stop: They are ovals or rounded
rectangles that usually contain the word "Start" or
Parallelogram "End".
Input and Output: It is a parallelogram which
Rectangle represents the instruction about the input or
output in a flowchart.
Processing: Rectangle symbol allows you to write
the instruction of calculations and computations
within the symbol.
Decision making: Diamond symbol is used to
write conditions to make decision.
This symbol branches the control flow to different
parts of the flowchart responding ‘Yes’ or ‘No’.
Diamond Connector: Circle with label is used to represent
Circle a point at which the flowchart connects with
another process. The name or reference for the
other process should appear within the circle.
244 GREEN Computer Book-8
Annotation Annotation: It allows you to write remarks
Arrows or comments about symbols or logics used in
flowchart.
Flow lines: It allows you to connect different
symbols to show the flow of program. It shows
the flow of direction to up, down, left and right in
a flowchart.
Example 1
Draw a flowchart to find the sum and product of two numbers.
Start
Read two numbers (a, b)
Add a and b and store in sum (Sum
= A + b)
Display output (sum)
Stop
GREEN Computer Book-8 245
Example 2
Draw a flowchart to find the greatest number from two input numbers.
Start
Read a and b
Yes Is a > b? No
Print a is greater Print b is greater
Stop
Example 3
Draw a flowchart to print the sum of first 10 natural numbers.
Start
A = 1, S = 0
Yes Is No
A < = 10
Prin A Stop
S=S+A
A=A+1
246 GREEN Computer Book-8
Exercise
1. Answer the following questions.
a. What is an algorithm?
b. Why is an algorithm used by programmers?
c. List five major features of an algorithm.
d. What do you mean by a flowchart? List its types.
e. What is program flowchart?
f. What are the different types of flowcharts?
g. What is a system flowchart?
h. Draw and name the standard symbols of flowchart.
2. Write an algorithm and draw a flowchart for the following problems:
a. To calculate the area of a rectangle.
b. To calculate the area of a circle.
c. To calculate the volume of a cube.
d. To find profit or loss from the input Selling Price and Cost Price.
e. To find the sum and average of five input numbers.
f. To calculate simple interest.
g. To check whether an input number is "odd" or "even".
h. To print first 10 natural numbers.
i. To print first 10 odd numbers.
j. To print the multiplication table of 9.
3. Write True or False for the following statements:
a. An algorithm can be executed in a computer.
b. A flowchart is a video representation of an algorithm.
GREEN Computer Book-8 247
c. A system flowchart shows how an entire system works by
demonstrating how data flows and what decisions are made to
control this event.
d. A data flowchart illustrates how data pass through a system.
e. Document flow chart is a group of columns that are divided by
vertical lines.
4. Write the name and function of the following symbols.
Project work :
Assume that you are a system analyst. Now you have to gather information by
analyzing system of your school.
248 GREEN Computer Book-8
20 Fundamental of QBASIC
Introduction
BASIC stands for Beginners All-Purpose Symbolic Instruction Code and was
first invented by Professor J. G. Kemeny and T. E. Kurtz of Dartmouth College,
U.S.A. in 1964. As the name suggests, right from the beginning BASIC was
designed to be a beginners’ language but it can be used to write very complex
and useful programs. It is a very user-friendly language. BASIC facilitates to
develop customized software packages for business application, music and
games packages.
BASIC language is intended to be simple to learn and to use. It is a general-
purpose language, suited to a wide range of applications. Its mathematical
and character handling features are equally powerful. BASIC is intended to be
an interactive language. It facilitates the design of program, which permits a
‘conversion’ between the user and the computer. The graphics capabilities of
recent version have enhanced the features. There are various types of BASIC
programming. Some of them are: BASICA, GWBASIC, TURBO- BASIC,
Q-BASIC, QUICK BASIC, APPLE-BASIC etc.
QBASIC
QBASIC is a product of Microsoft Corporation and is available with MS-DOS
version 5. QBASIC has a simple user interface and menu structure. Its design
serves to aid the user in developing programs with the least number of steps.
The intelligent editor checks the syntax as the program lines are entered. The
program is compiled as it is typed. Errors are identified and reported in a way
that allows the user to correct immediately.
Features of QBASIC
QBASIC editor is called a smart editor because of the following features:
i. It checks the syntax of the statement as lines are entered. If mistakes are
found, it reports accordingly.
ii. It converts the reserved words into upper case if syntax is correct.
GREEN Computer Book-8 249
iii. It maintains the space between operator and operand.
iv. It provides online help about QBASIC reversed words.
iv. QBASIC programs are portable.
v. It allows us to write/test/debug the program.
Starting QBASIC
Make sure that QBASIC.EXE or QB.EXE file exists in your computer and
follow the steps.
1. Open the folder containing essential files of QBASIC .
2. Find and select the file QB.EXE
3. Double click on the filename or press Enter key.
Or
1. Create a shortcut of QB.EXE to your desktop.
2. Find and select the shortcut of QB.EXE.
3. Double click on it or press Enter key to open.
After loading QBASIC, you will see QBASIC window screen on your desktop
with Welcome Dialog box.
250 GREEN Computer Book-8
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Green-Computer-Book-8
Discover the best professional documents and content resources in AnyFlip Document Base.
Search