Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Web Application Class 12

Download as pdf or txt
Download as pdf or txt
You are on page 1of 288

Web Applications

Students Handbook

CLASS
XII

CENTRAL BOARD OF SECONDARY EDUCATION


Shiksha Kendra, 2, Community Centre, Preet Vihar, Delhi-110301
Web Applications

Students Handbook, Class XII

Price: ` 75/-

First Edition: October 2015, CBSE

Copies: 5,000

Paper Used : 80 gsm CBSE Watermark White Maplitho

"This book or part thereof may not be reproduced by


any person or agency in any manner.”

Published By : The Secretary, Central Board of Secondary Education,


Shiksha Kendra, 2, Community Centre, Preet Vihar,
Delhi-110301

Design & Layout : Multi Graphics, 8A/101, WEA Karol Bagh, New Delhi-110005
Phone: 011-25783846, 47503846

Printed By : Vijaylakshmi Printing Works Pvt. Ltd.,


B-117, Sector-5, Noida-201301(U.P.)
Phone: 0120-2421977, 2422312
Preface
As the Information Technology (IT) industry evolves to meet the technology demands of today's
workplace, different challenges are arising and IT professionals are striving to meet them. IT
has created a revolution in each and every field. CBSE has introduced IT course in class-XI
(Level-3) and XII (Level-4), aligned with National Skill Qualification Framework (NSQF), an
initiative of Government of India to set common principles and guidelines for a nationally
recognized qualification system covering the schools, colleges and universities.

This Students Handbook titled "Web Applications" for class - XII prepared by CBSE for the
benefit of the students for a complex understanding of the ways in which the web functions, and
of the skills needed to generate web content, is essential for successful participation in nearly all
professions.

A special care has been taken to align the subject with National Occupation Standards (NOS)
which are competency based standards identified by the IT industry to train Sr. Secondary
students in knowledge and skills that equip students to perform effectively with confidence.

Relevant examples in programming, pictorial illustrations, tables and simplified concepts help
the students to learn with ease and comfort way.

This book is authored by competent educationists in the field of Information Technology under
supervision of CBSE with focus on helping the students to learn without any difficulty and use
this book as a tool for easy learning.

I congratulate everyone who is associated in developing this book which is a very useful
resource for the benefit of the students.

Chairman, CBSE
Acknowledgements
ADVISORS
Chairman, CBSE
Sh. M. V. V. Prasada Rao, Director (Voc & Edusat), CBSE

MATERIAL PRODUCTION GROUP

Authors
Dr. Manoj Kumar, Associate Professor & HOD (CSE)
Ambedkar Institute of Advanced Communication
Technologies & Research, Govt. of NCT of Delhi - Convener

Ms. Manju Khari, Assistant Professor (CSE)


Ambedkar Institute of Advanced Communication
Technologies & Research, Govt. of NCT of Delhi

Dr. Pradeep Sharma, Associate Professor


Maulana Azad National Urdu University (MANUU), Hyderabad

EDITING & COORDINATION


Dr. Biswajit Saha, Additional Director, (Voc. Education), CBSE
Content
Chapter 1 Movie Editing Tools 1
1.1 Movie Editing Tools 1
1.2 Familiarization of Interface Components 12
1.3 Importing Pictures, Audio and Video Clips Pictures into 15
Windows Movie Maker
1.4 Splitting, Joining and Trimming Movie Clips 16
1.5 Adding Titles in Windows Movie Maker 20
1.6 Publishing Movie in Windows Movie Maker 23

Chapter Customizing and Embedding Multimedia 30


2 Components in Web Pages
2.1 Customizing and Embedding Multimedia 30
Components in Web Pages
2.2 Compatible Multimedia File Formats for Web Pages 32
2.3 Embedding Audio in Web Pages 36
2.4 Embedding Video in Web Pages 44
2.5 Embedding Flash Files in Web Pages 50

Chapter 3 Web Scripting - Java Script 54


3.1 Java Script Review 54
3.2 Functions 73
3.3 Object 86
3.4 String Object 86
3.5 Math Object 91
3.6 Array Object 98
3.7 Events 107
3.8 Case Studies 110

Chapter 4 Advanced Features of Web Design 114


4.1 Code View , Add-ins, Snippets and Page Transitions 114
4.2 Dynamic Web Templates 120
4.3 SEO- Search Engine Optimization 125
4.4 Forms- Advanced 127
4.5 Publishing Webpages or Websites - I 133
4.6 Publishing Webpages or Websites - II 138
4.7 Authoring Tools 146
4.8 CSS Templates 148
Chapter - 1: Movie Editing Tools
Learning Objectives:
After Studying this unit the students will be able to:
 Understand the concept of Movie Editing Tool
 Get familiarize with multiple Movie Editing Tools
 Get depth knowledge of window movie maker tool
 Get familiarize with Interface Components
 Can perform splitting and combining of various Clips
 Can add titles and publish movie in Window Movie Maker

Introduction

There are many free video editing software programs available for download today, but not all of
them are good. Many programs simply don't do what the manufacturers say that they will do,
and others don't provide enough - or any support. Of course, most free software does not
include the same level or quality of support that you would expect to find with software that you
purchase commercially.

Movie Editing tools are editing software and we can also say them as application software which
handles the post – Production video editing of digital video sequences on a computer non-linear
editing system (NLE).

Hardware: Computer system

Software: Window Movie maker tool

1.1 Movie Editing Tools

There are many free video editing software programs available for download today, but not
all of them are good. Many programs simply don't do what the manufacturers say that they
will do, and others don't provide enough - or any support.

Of course, most free software does not include the same level or quality of support that
you would expect to find with software that you purchase commercially.

While it is true that you get what you pay for, there really are some good free video editing
software available out there. Here are the top frequently used, that we have found:

1
Windows Movie Maker 2.6: The first release of Windows Movie Maker was included with
Windows ME in 2000, but it was not available in Windows 2000, which was released
months before Windows ME.

Version 1.1 was included in Windows XP a year later, and included support for creating
DV AVI and WMV 8 files. Version 2.0 was released as a free update in November 2002,
and added a number of new features. Version 2.1, a minor update, is included in Windows
XP Service Pack 2. Windows XP Media Center Edition 2005 introduced a new version of
Windows Movie Maker, 2.5, with more transitions and support for DVD burning.

Microsoft has made version 2.6 of Movie Maker available for download, and it runs on both
Windows Vista and Windows 7. While advanced users are likely using a more
sophisticated video editing program, there’s no denying that Movie Maker is an excellent,
full-featured option for the average home user. Snapshot of window movie maker is
depicted in Figure 1.1.

Figure-1.1: Snapshot of Window Movie Maker

VirtualDub: VirtualDub is a video capture/processing utility for 32-bit and 64-bit Windows
platforms (98/ME/NT4/2000/XP/Vista/7), licensed under the GNU General Public License
(GPL). It lacks the editing power of a general-purpose editor such as Adobe Premiere, but
is streamlined for fast linear operations over video. It has batch-processing capabilities for
processing large numbers of files and can be extended with third-party video filters.
VirtualDub is mainly geared toward processing AVI files, although it can read (not write)

2
MPEG-1 and also handle sets of BMP images. In Figure 1.2 VirtualDub snapshot is
represented.

Figure-1.2: Snapshot of VirtualDub

T@b ZS4 Video Editor: ZS4 Video Editor is free to download and use. It is video editing
and compositing software which aims to provide media experts with a facility to combine a
variety of media types (currently photos, videos and audio files) into one or more output
files. In figure 1.3 snapshot of this editor is represented.

Figure-1.3: Snapshot of T@b ZS4 Video Editor

3
Wax: Wax is a high performance and flexible video compositing and special effects
software. The idea for Wax is to be very general purpose and flexible in video compositing
and effects, so that you can compose your dream video sequence with ease every time.
Wax can create 2D & 3D special effects and can work in two modes – as a standalone
application which would appeal for home users/beginners, and as a “plug-in” to video
editors/NLEs which would be more useful for professional editors. In figure 1.4 snapshot of
this editor is represented.

Figure-1.4: Snapshot of Wax. 5

Cinefx Jashaka: Cinefx is an offline playback, editing, encoding, animation and visual
effects tool based on the Jahshaka technology that allows you to create professional
digital media on your desktop. Use the tools that hollywood uses to create blockbuster
films and special effects. In figure 1.5 snapshot of this editor is represented.

4
Figure-1.5: Snapshot of Cinefx Jashaka

Blender: Blender is the free open source 3D content creation suite, available for all major
operating systems under the GNU General Public License. It is one of the powerful, multi-
use editing/compositing and modeling tool. This tool allows you to edit, create 3D
graphics, sound effects, add special effects and much more. In figure 1.6 snapshot of this
editor is represented.

Figure-1.6: Snapshot of Blender

5
Avidemux: Avidemux is a free video editor designed for simple cutting, filtering and
encoding tasks. It supports many file types, including AVI, DVD compatible MPEG files,
MP4 and ASF, using a variety of codes. Tasks can be automated using projects, job
queue and powerful scripting. In figure 1.7 snapshot of this editor is represented.

Figure-1.7: Snapshot of Avidemux 7

MovieStorm: Moviestorm is the complete 3D movie making software application for all
abilities. Whether your movie interest is cartoons, crime, music, horror etc., you can create
awesome animation effects using this software. In figure 1.8 snapshot of this editor is
represented.

Figure-1.8: Snapshot of MovieStorm

6
Movica: Movica is just a graphical user interface that uses some fine programs to edit
movie files. A great deal of emphasis has been placed on keyboard shortcuts to make the
job of editing easier. Basically, it is meant for editing the kind of movies that VirtualDub
won’t. V-Dub is primarily an AVI editor, Movica will work on .wmv, .flv, .rm and .mpg files.
This makes it more versatile than Virtualdub. In figure 1.9 snapshot of this editor is
represented.

Figure-1.9: Snapshot of Movica

VideoSpin: VideoSpin, free editor based on Studio, does a pretty darn good job
compared with most free video tools. It doesn’t match the qualities of paid software's but
perform basic editing and output movies pretty easily. In figure 1.10 snapshot of this editor
is represented.

Figure-1.10: Snapshot of Video Spin

7
AVIedit: It is a great tool to work with .AVI files. Regardless of small executable size, this
avi editor offers you unlimited power of digital video processing. AVI edit allows you to join
and split avi files, extract frames and do whatever you want. You can capture video by
number of ways, 9 including one-frame-per-minute (web camera) option, workaround
annoying 2 GB file size limit, send your videos to printer, heavy compress it and post to
your webpage. In figure 1.11 snapshot of this editor is represented.

Figure-1.11: Snapshot of AVIedit

StoryBoard Pro Software: Atomic Learning’s FREE Video StoryBoard Pro is designed to
give teachers, students, and home movie makers a tool to plan ahead when creating video
projects. It features the ability to enter shot titles and descriptions, complete with planned
lengths and edited order, indicate shot types: video, still, audio, music, or titles and much
more. In figure 1.12 snapshot of this editor is represented.

Figure-1.12: Snapshot of StoryBoard Pro Software

8
AVI Trimmer: The AVI Trimmer is a free video editor for fast and lossless AVI editing.
This freeware AVI editor is small, smart, easy to use and involves no encoding/decoding
processes. No video / audio degradation and out of sync problem arises after editing. All
AVI file types of any size and video / audio content are supported. In figure 1.13 snapshot
of this editor is represented.

Figure-1.13: Snapshot of AVI Trimmer

Zwei-Stien Video Editor: Zwei-Stein 3.01 is a freeware non-linear, non-destructive video


compositing and editing system which offers many advanced features unavailable
elsewhere. With Zwei-Stein you can edit up to 256 video, audio and still image clips, each
with up to 64 effects chained serially. Cropping, panning and custom effects are easy with
automatic key frames. In figure 1.14 snapshot of this editor is represented.

Figure-1.14: Snapshot of Zwei-Stien Video Editor

9
DVDVideoSoft Free: A pretty basic software to edit video and audio files. Free Studio is a
single package which bundles all free software from DVDVideoSoft to work with DVD,
video and audio files. With this free software you can convert video and audio files
between different formats and to iPod, PSP, iPhone, BlackBerry and other portable
devices; burn and rip DVDs and audio CDs; upload and download videos and music to
your computer, iPod, PSP, iPhone and BlackBerry; perform basic editing of audio and
video files. In figure 1.15 snapshot of this editor is represented.

Figure-1.15: Snapshot of DVDVideoSoft Free

AVITricks Video Editor: AviTricks is a non-linear, non-destructive AVI video editor with
real-time preview. It makes cutting and joining footage easy and includes a wide range of
built-in adjustable effects that can be used separately or in combination. (Effects include
dissolves, mirror image, sepia, iris effects, fades, TV-shop and many more.) Besides the
preview screen, the video you are working on is also represented clearly 12 and
graphically on a timeline and a tree-structure. Both of these fields are active and easy to
work. In figure 1.16 snapshot of this editor is represented.

Figure-1.16: Snapshot of AVITricks Video Editor

10
DVD Knife: DVD Knife is a simple tool for extracting DVD clips from your DVD’s. The clips
will be stored in VOB format only. This is the simplest and fastest tool in its category which
has ability to extract long VOB clips in few seconds. It's so simple that only three steps can
extract the clip i.e. “Select start” – “Select end” – “Save”. So get your favorite movie or film
scenes stored separately now. It is compatible with Windows XP. I hope this little free tool
will come for Vista or 7 in the future. In figure 1.17 snapshot of this editor is represented.

Figure-1.17: Snapshot of DVD Knife

Mewa Film: It is a non-linear editing tool, called montage (this name might change) where
video files are shown as a sequence of images layed off horizontally. The video files can
then be assembled and cutted using intuitive actions as “drag and drop” and “rubber band
selection”. In figure 1.18 snapshot of this editor is represented.

Figure-1.18: Snapshot of Mewa Film

11
Assessment:
Answer the following questions:
Q1. Differentiate between the features of virtual dub, wax, movica and moviestorm.
Q2. Explain the non linear editing tool which does horizontal layering.
Q3. Which tool should be used for .avi files?
Q4. Explain two non destructive and non linear tools for video editing

1.2 Familiarization of Interface Components

Windows Movie Maker is a feature of Windows Vista that enables us to create home
movies and slide shows on our computer, complete with professional-looking titles,
transitions, effects, music, and even narration. We can use Windows Movie Maker to
publish our movie and share it with our friends and family.

Understanding the Windows Movie Maker Tools


Windows Movie Maker is divided into three main areas: the panes, the
storyboard/timeline, and the preview monitor is mentioned in figure 1.19.

Figure-1.19: The Main Areas of Windows Movie Maker

About the Panes

Windows Movie Maker provides several different panes that are:

 The Tasks pane lists the common tasks that may be needed to perform while making a
movie, including importing files, editing, and publishing your movie.

12
 The Collections pane displays our collection folders, which contain clips. The collection
folders appear in the Collections pane on the left, and the clips in the selected
collection folder are displayed in the Contents pane on the right. The following picture
shows the Collections pane in figure 1.20:

Figure-1.20: Collections Pane

 The Contents pane shows clips, effects, or transitions that are working with while
creating our movie, depending on the view being worked with. We can change the
view to show thumbnails or details.

We can drag clips, transitions, or effects from the Contents pane or a collection from the
Collections pane to the storyboard/timeline for your current project. We can also drag clips
to the preview monitor to play them. If you make changes to a clip, those changes are only
reflected in the current project; they do not affect the source file.

About the Storyboard and Timeline

The area where the project is created and edited is displayed in two views, the storyboard
and the timeline. We can switch between these two views while making a movie.

 Storyboard. The storyboard is the default view in Windows Movie Maker. We can use
the storyboard to look at the sequence or ordering of the clips in your project and
easily rearrange them, if necessary. This view also let us see any video effects or
video transitions that have been added. Audio clips that have added to a project are
not displayed on the storyboard, but we can see them in the timeline view. The
following picture shows the storyboard view in Windows Movie Maker (figure 1.21):

13
Figure-1.21: Storyboard View

Timeline: The timeline view provides a more detailed view of our movie project and
allows us to make finer edits. Using this timeline view, we can:-
1) Trim video clips, adjust the duration of transitions between clips, and view the
audio track.
2) Review or modify the timing of clips in your project. Use the timeline buttons to
switch to storyboard view, zoom in or out on details of your project, narrate the
timeline, or adjust the audio levels.

The following picture shows the timeline view in Windows Movie Maker i.e. figure 1.22:

Figure-1.22: Timeline View

About the Preview Monitor

The preview monitor enables us to view individual clips or an entire project. By using the
preview monitor, we can preview our project before publishing it as a movie. We can use
the buttons underneath the preview monitor to play or pause a clip, or to advance or
rewind a clip frame-by-frame. The Split button allows us to split a clip into two parts at the
point displayed in the preview monitor.

The preview monitor can be made larger or smaller by clicking View, pointing to Preview
Monitor Size, and choosing a size. The window can be dragged to make it larger or
smaller.

Assessment:
Answer the following questions:
Q1. Which is the default view in movie maker?
Q2. What are the functions of various movie panes of the windows movie maker?

14
1.3 Importing Pictures, Audio and Video Clips Pictures into Windows Movie
Maker

We can import files with the following file name extensions into Windows Movie Maker to
use in your project:
 Video files: .asf, .avi, .dvr-ms, .m1v, .mp2, .mp2v, .mpe, .mpeg, .mpg, .mpv2, .wm,
and wmv
 Audio files: .aif, .aifc, .aiff .asf, .au, .mp2, .mp3, .mpa, .snd, .wav, and .wma
 Picture files: .bmp, .dib, .emf, .gif, .jfif, .jpe, .jpeg, .jpg, .png, .tif, .tiff, and .wmf

We can also import files into Windows Movie Maker that have a different extension from
the ones listed above, but not all file types will work when you we try to use them to make
a movie.

Microsoft Recorded TV Show files (with a .dvr-ms file name extension) that are not
protected using digital rights management can be imported into Windows Movie Maker if
your computer is running Windows Vista Home Premium or Windows VistaUltimate.

Steps to Import Files into Windows Movie Maker


1) Click File, and then click Import Media Items.
2) Navigate to the location that contains the digital media files you want to import, and
then click Import.

Special Tips
 We can import several video clips at once. For consecutive clips, click the first video
clip in the list, press and hold down the SHIFT key, and then click the last clip in the
list. For video clips that are not consecutive, press and hold down the CTRL key, and
then click each clip that you want to import into Windows Movie Maker.
 We can also import video files and pictures by dragging the files from Windows Photo
Gallery into Windows Movie Maker.

Examples: One by one picture representation of steps are mentioned in figure 1.23

15
Figure-1.23: Snapshot of Importing Video

Assessment:
Answer the following questions:
Q1. What does .mp2 and .mp3 stand for?
Q2. What are the commonly used file extensions for images?
Q3. Can we import more than one clip at a time?
Q4. What does .jpeg stand for?

1.4 Splitting, Joining and Trimming Movie Clips

After the files are imported into Windows Movie Maker, we can start the main part of
moviemaking - editing. Using Windows Movie Maker, where we can edit clips in a variety
of different ways. We can split a long clip into two shorter clips, combine two clips into a
single clip, trim the beginning or ending of a clip, and even create new clips.

Split and Combine Clips

We can manually split video and audio clips into smaller clips to make your clips easier to
work with.

We can combine contiguous video clips on the storyboard or in the Contents pane (before
adding the clip or clips to the storyboard/timeline).

16
Steps to Split a Clip:
1) In the Contents pane or on the storyboard/timeline, click the video or audio clip that
need to be split.
2) Under the preview monitor, click the Play button.
3) When the clip reaches a point near the place you want to split the clip, click Pause.
4) Under the preview monitor, use the playback controls to find the point where we want
to split the clip.
5) Under the preview monitor, click the Split button.

Tip: The playback indicator can be dragged on the seek bar to the exact spot where you
want to split the clip.

To Combine Clips
1) In the Contents pane or on the storyboard, hold down the CTRL key, and then click
the contiguous clips which need to be combined.
2) Click Clip, and then click Combine.

The name and property information of the first clip in the group is used for the new clip and
the time is adjusted accordingly.
Tip: We can combine more than two clips at a time as long as they are consecutive. To
select multiple clips, click the first clip, press and hold down the SHIFT key, and then click
the last clip.

Trim (Hide) Parts of a Video Clip


When a clip is to be trimmed, a new start and/or end trim point is made. The start trim
point determines when the clip will begin to play, and the end trim point determines when
the clip will stop playing in our project and final movie. When we trim a clip, the trimmed
part of the clip is not actually removed from the source file; it's just hidden so the trimmed
part doesn't appear in our project or published movie as mentioned in figure 1.24.

Figure-1.24: A Trimmed Video Clip with the Trimmed Part Highlighted

17
Steps to trim a video clip
1) While in the storyboard view, click View, and then click Timeline.
2) On the timeline, click the clip that wished to be trim.
3) Use the playback controls under the preview monitor to find the point where you want
to trim the clip.
4) Do the following:
 When the playback indicator is at the point where we want the selected video or
audio clip to start playing back, click Clip, and then click Trim Beginning.
 When the playback indicator is at the point where we want the selected video or
audio clip to stop playing back, click Clip, and then click Trim End.

Notes:

 We can also drag the trim handles on a clip to set the start and end trim points. Trim
handles appear as small black triangles at the beginning and end of a clip after we
click the clip on the timeline. When you hold your pointer over a trim handle, the
pointer changes to a red double-headed arrow. Drag a trim handle to set the new start
or end point of the clip as shown in figure 1.25.

Figure-1.25: Trimming a Clip with the Trim Handle

 The Zoom Timeline In button one is used to see clips more clearly on the timeline. The
Zoom Timeline In button appears on the timeline toolbar as a magnifying glass with a
plus sign (+) in it.

To Undo a Trimmed Clip


1) While being in storyboard view, click View, and then click Timeline.
2) Click the trimmed clip on the timeline, click Clip, and then click Clear Trim Points.

18
Create Clips

We can also create several smaller, more manageable clips from a single existing video
clip to make it easier to work with the project. Windows Movie Maker creates clips in
different ways, depending on the clip's source. If the source clip is from a digital video (DV)
camera, Windows Movie Maker creates clips that are based on the time stamps that the
DV camera inserts when the source video is originally recorded, as well as significant
frame changes in the video.
1) In the Contents pane, select the video clip for which you want to create clips.
2) Click Tools, and then click Create Clips.

Note:

Clips can be created automatically for Windows Media Video (WMV) files and Audio-Video
Interleaved (AVI) video files that use the DV codec. For other video file formats, clips
cannot always be created automatically using clip creation, so the video file appears as
one large video clip in Windows Movie Maker. For these large video clips, split the clip
manually to separate the large video clip into smaller clips.

Examples:

For example, if we have a video clip that has two different scenes, you might want to split
the video clip at the point where the one scene ends and the other begins, and then insert
a transition between the two clips in figure 1.26.

Figure-1.26: A Video Clip that’s been Split into Two Clips

Conversely, a file that was divided into smaller clips that can be combined. However, only
contiguous clips cab be combined. "Contiguous" means that the start time of the second
clip immediately follows the end time of the first clip. For example, if we have a video or
audio file that was divided into clips when it was imported into Windows Movie Maker, and
the clips are named Clip 1, Clip 2, and Clip 3, in that order, we could combine Clip 1 and
Clip 2, or Clip 2 and Clip 3, but we cannot combine Clip 1 and Clip 3.

19
Exercise:
Q.1 Perform trimming on your video clip as follows:
 Click view, and then click timeline (all in storyboard view)
 On the timeline, click the clip that you want to trim
 Use the playback controls under the preview monitor to find the point where you
want to trim the clip.
 When the playback indicator is at the point where we want the selected video or
Audio clip to start playing back, click clip, and then click trim beginning. When the
playback indicator is at the point where we want the selected video or audio clip
to stop playing back, click clip, and then click trim end.

Assessment:
Answer the following questions:
Q1. What are contiguous clips?
Q2. How is a clip split?
Q3. What do you mean by trimming a clip?
Q4. Can you undo the trimming changes?

1.5 Adding Titles in Windows Movie Maker


With Windows Movie Maker, we can add a title, your name, the date, credits, and other
text to your movie. For example, you might want to add a title to introduce a person or
scene that appears in your movie.
You can add title text to various places in your movie: at the beginning or end, before or
after a clip, or overlaying a clip. The title plays for the specified amount of time, either on
the screen by itself or overlaying the video as it plays, and then the title disappears and
the video clip or picture continues.
The following picture shows in figure 1.27, a project with a title that appears before a video
clip:

Figure-1.27: Beginning Title on the Timeline

20
The following picture shows i.e. figure 1.28 a project with a title that overlays a video clip
as the clip plays in:

Figure-1.28: Overlay Title on the Timeline

The following picture i.e. figure 1.29 shows a project with credits that appear at the end of
the project:

Figure-1.29: Credits on the Timeline

1) Click that location on the storyboard/timeline where title or credit is to be inserted.


2) Click Tools, and then click Titles and Credits.
3) Click the link that corresponds to location where title or credit is to be inserted..
4) In the Enter text for title box, type the text that you want to appear as the title or credit.
After you type the text, the monitor displays the default animation and format for the
title or credit need to be inserted.
5) To change the title animation, click Change the title animation, and select a title
animation from the list.
6) To change the font and color for your title, click Change the text font and color, and
then choose the font, font color, formatting, background color, transparency, font size,
and position of the title to your liking.
7) Click Add Title.

21
Steps to Edit an Existing Title
1) On the storyboard/timeline, click the title need to be edited.
2) Click Edit, and then click Edit Title.
3) Make the changes, and then click Add Title.

Steps to Change the Title Duration


1) To make sure that you are in timeline view, click the View menu, and then click
Timeline.
2) Select the title whose duration you want to change.
3) Do the following:
 To extend the playback duration of the title, drag the end trim handle toward the
end of the timeline.
 To reduce the playback duration of the title, drag the end trim handle toward the
beginning of the timeline.

Steps to Remove a Title


1) On the storyboard/timeline, click the title that need to be removed.
2) Click Edit, and then click Remove.

Note: Trim handles appear as black triangles at the beginning and end of a clip. The
pointer changes to a red double-headed arrow when we hold it over a trim handle.

Examples: Once you click a button for the type of title you want you will be brought to a
screen to add your text. Figure 1.30(a) represented a snapshot of screen appear enter text
for title and figure 1.30(b) represented a snapshot of screen where we have to enter text
for title

Figure-1.30(a): Snapshot of Screen Appear Enter Text for Title

22
Figure-1.30(b): Snapshot of Screen we Enter Text for Title

As you add the text you will have the opportunity to preview your titles in the preview
screen. If you want to make a change to the way the title animation looks you can click on
Change the title animation link under more options. Under more options is also where you
can Change the text font and color.

Exercise:
Q1. Edit the existing title as follows:
 On the timeline, click the title that needs to be edited.
 Click Edit, and then click Edit Title.
 Make the changes, and then click Add Title.

Assessment:
Answer the following questions:
Q1. Explain the Steps needed to Change the Title Duration of your video.
Q2. How can you burn your movie into a CD?
Q3. How will you save your movie, once compiled?
Q4. How can the title be removed from the video?

1.6 Publishing Movie in Windows Movie Maker

After finishing working on a project, we can publish the project as a movie. A movie is a
Windows Media file with a .wmv file name extension or an Audio-Video Interleaved (AVI)
file with an .avi file name extension. This published movie in Windows Movie Maker can
also be shared with others in a number of ways - through our computer, on a recordable
CD, on a recordable DVD, as an attachment in an e-mail message, or on videotape in a
DV camera.

23
Steps to Publish a Movie to your Computer
1) Click File, click Publish Movie.
2) Click This computer, and then click Next.
3) In the File name box, type a name for your movie.
4) In the Publish to box, choose where ever want to save the movie once it's published,
and then click Next.
5) Choose the settings to be used to publish the movie, and then click Publish.
6) To watch the movie after it has been published, select the Play movie after clicking
Finish check box.
7) Click Finish.

Steps to Publish and Burn a Movie to DVD


To publish and burn a movie to a DVD, you must have Windows DVD Maker, which is
included in Windows Vista Ultimate and Windows Vista Home Premium. You also need a
DVD burner.
1) Insert a blank recordable or rewritable DVD into your DVD burner.
2) Open a project in Windows Movie Maker.
3) Click File, and then click Publish Movie.
4) Click DVD, and then click Next. Windows DVD Maker opens.
5) Complete the steps to create a DVD using Windows DVD Maker.

Steps to Publish and Burn a Movie to a Recordable CD


1) Insert a blank recordable CD or a rewriteable CD into your CD burner.
2) Click File, and then click Publish Movie.
3) Click Recordable CD, and then click Next.
4) In the File name box, type a name for your movie.
5) In the CD Name box, type a name for the CD, and then click Next.
6) Choose the settings to be used to publish the movie, and then click Publish.
7) To publish and burn the movie to another recordable CD, select the Publish this
movie to another recordable CDcheck box, and then click Next. Replace the
recordable CD with another recordable CD, and then repeat steps 4 through 6.

Steps to Send a Movie as an E-mail Attachment in an E-mail Message


1) Click File, and then click Publish Movie.
2) Click E-mail, and then click Next.

24
3) After the movie is published, do any of the following:
 To play the movie in the default player before sending it, click Play the movie.
 To save a local copy of the movie on your computer in addition to sending it as
an e-mail attachment, click Save a copy of my movie on my computer, enter a
movie file name in the File name box, and then click Save.
4) To attach the movie to an e-mail message, click Attach Movie.
5) In the default e-mail program, enter the e-mail address of the person to which movie
need to be send, add any additional text to the body, and then send the message.

Steps to Record a Movie to a Videotape in a Digital Video Camera


1) Switch your digital video (DV) camera on and verify that it is in playback mode (often
labeled VCR on the camera).
2) Click File, and then click Publish Movie
3) Click Digital video camera, and then click Next.
4) If more than one digital video device powered on and detected by Windows Movie
Maker, on the Choose a digital video camera page, choose the digital video device
that contains the videotape to which the movie is recorded, and then click Next.
5) When we see the Cue your tape page, using the transport controls on our camera,
rewind or fast-forward the tape to the point where the movie is to be recorded, and
then click Next.
 Warning: There should not be any overwriting a portion of the tape that contains
recorded video.
6) To begin recording the movie back to tape, click Yes.
Wait for the movie to be published and then recorded to the videotape. The time it
takes to create and record the movie to tape depends on the length of the movie and
the system resources on your computer. You can preview the movie in the LCD
display of your DV camera as your movie is recorded to tape.
7) Click Finish.

Steps to Change Where Movies are Temporarily Saved


Windows Movie Maker uses a temporary file storage location in the following ways:
 When we publish a movie, the audio or movie file is held in the temporary file location
until the file is published.
 When we record an audio narration, a temporary file is stored in the temporary file
storage location, and then removed after the audio file is saved.
 When we publish a movie that you want to attach to an e-mail message, a copy of the
movie file is stored in the temporary file location until the movie is sent successfully.

25
 When we send a movie to a tape in a digital video (DV) camera, the temporary movie
file that is created is stored in this location until the movie is recorded to the tape.

We can change the default file storage location in Windows Movie Maker. For example, if
we have a storage location that has more available disk space. If our hard disk has two
partitions, we want to choose the drive that has more storage space.
1) Click Tools, and then click Options.
2) Click the General tab, and then in the Temporary storage box, choose the default
location where temporary audio and movie files are to be saved temporarily.

Steps to Avoid Including the Title, Author, Copyright, Rating, and Comments
Information in the Published Movie File
Always remember not to include information such as the title, author, copyright, rating, and
comments in your published movie files so that our name and other metadata information
is not displayed when someone else plays back our movie in a media player.
To choose not to include metadata in your finished movie, do the following:
1) Click Tools, and then click Options.
2) Click the General tab, and then select or clear the Do not include the title, author,
copyright, rating, and comments information in the published movie file check box,
depending on whether we want personally identifiable information to be removed with
the published movie file.

Examples:
Movie Maker has created a series of wizards to help you save your movie in a way to
share it with other people. In figure 1.31 shows the content of finish movies.

Figure-1.31: Content of Finish Movie

Simply click on the type of movie you want to save your project as, and this will start the
wizard. For this example we will use the Save to my computer wizard. Note: Depending on
the length of your movie this process can take a long time. So make sure you have
something to do for a while.
Step 1: The first step is to give the movie a name, and tell the wizard where you would like
to save the movie as represented in figure 1.32. Now go ahead and click Next.

26
Figure-1.32: Snapshot of Movie Wizard

Step 2: The second step is to determine how the output of the movie will be shown in
figure 1.33. The safest way to export your movie is to choose Best quality for playback on
my computer (recommended).

Figure-1.33: Second Step of Movie Wizard

27
Now go ahead and click Next. This will start the creation of your movie.

Step 3: The next window will show the progress of the movie being exported as
represented in figure 1.34.

Figure-1.34: Third Step of Movie Wizard 34

Step 4: When Movie Maker is done exporting the film the finish screen will be seen like
this as shown in figure 1.35.

Figure-1.35: Snapshot of Fourth Step of Movie Wizard

At the end open up the file, and watch the epic film.

28
Exercise:
Q1. Publish your movie to your computer by following the steps listed below:
 Click file
 Click publish movie.
 Click this computer, and then click next.
 In the file name box, type a name for your movie.
 In the publish to box, choose where ever want to save the movie once it's
published, and then click next.
 Choose the settings to be used to publish the movie
 Click on publish.

Assessment:
Answer the following questions:
Q1. Explain the various Steps to save and publish the video generated.
Q2. Explain the information which the Published movie should not contain.
Q3. Can you avoid adding the credits to your video?
Q4. Is there any difference between saving and publishing?

29
Chapter - 2: Customizing and Embedding
Multimedia Components in Web Pages
Learning Objectives
After studying this unit the students will be able to:
 Understand the definition of Multimedia and what it means to use it. Its format.
 Discover the kinds of media used in multimedia and understand how to combine them.
Learn about formats of Multimedia.
 Describe the different methods of defining images, video and flash on Web pages.

Introduction

Multimedia is many things rolled into one. What do you think of when you hear the word
Multimedia? Is it merely a mash up of media elements? Or is it everything we see, hear, read,
and touch in websites, video games, phone, phone apps, retail kiosks, and bank ATMs? There
are all forms of multimedia, and the list of uses grows daily. We are drawn into multimedia at
every run, whether we like it or not. The goal of this content is to demystify the meaning and
process of creating digital multimedia.

Multimedia has become an inevitable part of any presentation. It has found a variety of
applications right from entertainment to education. The evolution of internet has also increased
the demand for multimedia content.

Multimedia is the media that uses multiple forms of information content and information
processing (e.g. text, audio, graphics, animation, video, interactivity) to inform or entertain the
user. Multimedia also refers to the use of electronic media to store and experience multimedia
content. Multimedia is similar to traditional mixed media in fine art, but with a broader scope.
The term “rich media” is synonymous for interactive multimedia.

Resource Requirement
Hardware: A computer system
Software: Simple web pages does not required any software.

2.1 Customizing and Embedding Multimedia Components in Web Pages

Introduction: Multimedia comes in many different formats. It can be almost anything you
can hear or see.

Examples: Pictures, music, sound, videos, records, films, animations, and more.

30
Modern Web pages have often embedded multimedia elements, and modern browsers
have support for various multimedia formats.

Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension. When
a browser sees the file extension .htm or .html, it will treat the file as an HTML file. The
.xml extension indicates an XML file, and the .css extension indicates a style sheet file.
Pictures are recognized by extensions like .gif, .png and .jpg.

Multimedia files also have their own formats with different extensions like: .swf, .wav,
.mp3, and .mp4.

Advantages & Disadvantages of Using Multimedia on Web Pages:

Since the introduction of the Mosaic Web browser in 1993, Web designers have added
multimedia elements to Web pages. What started as the simple addition of a few images
expanded to include different types of multimedia and immersive environments. However,
usability experts like Dr. Jakob Nielsen of the Nielsen Norman Group have expressed
concerns about the negative impact of multimedia on the Web.

Advantages:

 Greater Immersion: Adding multimedia elements to a Web page make it easier to


draw in viewers. While video is the most popular multimedia addition, sites also add
audio and interactive content to attract and hold the attention of the viewers.

 Enhanced Page Rankings for SEO: While the value of multimedia remains
controversial in the search engine optimization world, surveys conducted by Forrester
Research indicate that video content, done correctly, is a major benefit to a site's
overall SEO strategy. The company discovered in 2010 that websites with videos were
53 times more likely than text-based websites to appear on the first page of search
engine results.

 Better Branding: While HTML 5 text-based sites are more elaborate than websites of
the past, they are still limited in many ways. It is hard to represent a brand's image
without including audio or video content to support it. As such, multimedia sites are
frequently preferred by marketing departments because of their ability to completely
present branding.

Disadvantages:

 Potential Damage to Search Engine Rankings: While video content can help a site
with search engines, images that are not handled correctly can damage a sites
ranking. Sites lacking links an automated "spider" program can follow end up being
ignored by search engines. Creators of multimedia content who do not keyword-

31
optimize the content negate any SEO work on the non multimedia portion of the site.
As a result, the site appears lower in search results, which affects its overall traffic
flow.

 Loading Times: While the days of measuring page load times on a slow, dial-up
modem are over, multimedia content still takes longer to load than static content.
Presenting a user who visits a site with a screen that says "Please Wait. Loading"
frequently results in a viewer clicking away to a different page.

 Compatibility: Every browser can display at least some subset of HTML. Multimedia
elements not as widely supported. The best example of this is the absence of Flash
multimedia on Apple's mobile devices. As of the middle of 2012, the devices still did
not support Flash, causing sites that depend upon Flash to display incorrectly on iPads
and iPhones. This problem applies to other types of multimedia, as well. A site that
uses the Windows Media format for its multimedia content will frequently not work
correctly for users on computers that lack a plug-in for Windows Media.

Assessment:
Answer the following questions:
Q1. Define multimedia and its various types?
Q2. Advantages and Disadvantages of multimedia in web pages?
Q3. Why we need internet browser? Also explain web page?
Q4. List 5 internet browser which supports multimedia?
Q5. Full form of HTML is ____________ and XML is_____________?

2.2 Compatible Multimedia File Formats for Web Pages

Images

A single still video image, whether created by a drawing or paint program or scanned from
a book or grabbed with a video camera, can be stored in any of a wide variety of file
formats. The data will be stored in a raster or a vector file format. A raster image is one
composed of a field of pixels, each characterized by a color, and is usually created in paint
programs, by scanning a picture or by grabbing an image. A vector format is created
almost always by a drawing/CAD program and consists not of pixels, but objects such as
curves, shades, and characters.

Raster formats can be generally separated into two categories. Lossy formats lose
resolution (sharpness) when converted to, while lossless formats preserve image
information. For example, when converting from a GIF (lossless) to a JPEG (lossy), some
information is lost. However, lossy formats tend to be much smaller than their lossless

32
counterparts, and for most photographic images, there will be almost no subjective
difference.

The following list of image file formats is not inclusive, but describes the formats that
comprise the majority of files encountered on the Internet. All of the following formats are
raster formats unless otherwise stated.

1) .gif: GIF, which stands for Graphics Interchange Format, is a graphics file format
originally popularized by CompuServe. GIF files are encoded, 256 color (8-bit) images
which use a lossless compression technique and can be opened by almost all
graphics programs including xv, Lview, and Photoshop.

2) .jpg, .jpeg, .jfif: JPEG stands for Joint Photographic Experts Group. JPG (more
accurately JFIF) files are true color (16.7 million colors, or 24-bit) images that are
compressed using a lossy compression algorithm called JPEG. This means that files
may degrade in quality when they are JPEG encoded. However, this degradation is
not noticeable for most scanned photographs and images with smoothly colored
areas. Do not use JPEG encoding on line art or cartoon images. JPEG files are
significantly smaller than most other formats and can be opened and saved with many
graphics programs on all platforms.

3) .ps, .eps, .epsi: Postscript (PS), Encapsulated Postscript (EPS), and Encapsulated
Postscript with preview image (EPSI) are all vector graphics file formats. They are
mainly used to store printed or printable documents and are in widespread use.

4) .pdf: PDF stands for Portable Document Format and is created by Adobe Acrobat. An
Enhancement of the Postscript language, PDF files contain all the same text and
page layout information but can include many WWW features such as images, links,
and heading references. PDF files can be viewed using Adobe Acrobat software.

5) .tif, .tiff: TIFF (Tagged Image File Format) files are uncompressed true color images.
Most graphics programs allow you to store TIFFs with compression. These files can
be opened by many graphics programs including xv, Lview, and Photoshop.

6) .tga: TGA (Targa) files, like TIFFs, are uncompressed true color (24-bit) images. They
can be opened by many graphics programs including xv, Lview, and Photoshop.

7) .pict: A PICT file is a standard Macintosh image file format and can be either a raster
image or a vector image, depending on the program that created it. Most Macintosh
applications will open them.

8) .bmp: BMP files are Windows Bitmap files. They are usually 8-bit color images (256
colors) and can be viewed by many programs including Windows Paintbrush. BMP
files can be used as backgrounds for the Windows desktop.

9) .pcx: A PCX is a Zsoft paint file. PCXs are openable by Windows Paintbrush.

33
10) .pbm,.ppm,.pgm: Portable Bitmap, Portable Pixmap, and Portable Graymap are all
file formats used by the PBMtools set of Unix graphics utilities. Most commonly used
on Unix workstations, they are openable by Photoshop in addition to xv.

11) .psd: PSD signifies an Adobe Photoshop graphic file. They are openable on Pentium
and Macintosh systems by Adobe Photoshop.

12) .cvs: A CVS is a vector graphic file format and is openable by Canvas.

13) .cgm: A Computer Graphics Metafile, CGM, is also a vector format and can be
opened by Canvas and ClarisDraw.

14) .wpg: WPG are WordPerfect graphics files that can be opened with Lview.

15) .wmf: WMF files are Windows MetaFiles that can be opened by Canvas.

16) .xpm, .xbm: X PixMap or X bitmap files are usually small files used in the X Window
System.

Different file formats work with different programs, although almost all drawing/paint
programs will read and write JPEG, GIF, and TIFF formats. GIF and JPEG formats are
popular for FTP and the WWW because they are much smaller than other formats, so
more of them can be stored. GIF and JPEG formats are not compressible, so it is
generally a waste of effort to run a compression program on them. However, other file
formats often compress by large amounts. PICT and TIFF formats work best with word
processing and desktop publishing programs like Microsoft Word 6.0 and Adobe
Pagemaker 6.0.

Movies

Movies, as they are labelled here, consist of a series of still images, sometimes with
embedded audio information, united in such a way as to produce a single playable file.
MPEG and QuickTime are the two most commonly encountered movie formats on the
Internet.

1) .avi: AVI is a file format developed by Microsoft and primarily used in Windows. AVIs
are compressed movies that can be viewed in Windows environments with Media
Player and on Unix workstations with xanim.

2) .flc, .fli: An FLC is an Autodesk Flick movie and is a raw, uncompressed series of
frames. They take up more space than other formats, but the image quality is higher.
You can play them within Windows with Media Player.

3) .mov, .MooV, .qt: Any of these file extensions means that the file is an Apple
Quicktime movie. Applications that can view QuickTime video include: Simple Text,
WordPerfect, and Microsoft Word. Flattened QuickTime video clips can be viewed on

34
Unix workstations with xanim and on IBM-compatible personal computers with Media
Player.

4) .mpg, .mpeg: MPEG files use the MPEG-1 video compression routine, a universal
protocol for creating and displaying time coded data created by the Motion Picture
Experts Group. MPEG video clips can be viewed with mpeg_play on Unix
workstations, Sparkle on Macintoshes, and MPEG_PLAY on IBM-compatible
personal computers.

Sound

Files containing data used to recreate audio on a computer are called audio files and are
also available in many different formats. Similar to image formats, audio files can either
store a digital sampling of the sound wave (sound files, like a raster image) or contain a
digital encoding of the type, shape, and timing of all the notes used in the composition
(music files, like vector images).

1) .au: An AU is an audio sound file native to Sun workstations. It is playable by wplany


on Pentium computers or with Netscape's built-in AU player.

2) .iff : An IFF is a sound file playable on Pentium computers with wplany and on Unix
workstations with xanim.

3) .mid, .rmi: MIDI files can be played with the Windows MIDI sequencer. They are
music files that conform to the MIDI standard. Play them with Media Player on the
Pentium computers, or load them into MusicProse or Finale on a Macintosh.

4) .mod: A MOD file is a music file format originally from the Commodore Amiga, but
which is now popular on IBM-compatible computers.

5) .qt: A QuickTime movie can contain just sound and no video. Any program that can
play QuickTime can play QT sound files.

6) .snd: An SND is a Macintosh clickable sound format. It is playable on any Macintosh


and on Pentium computers with wplany.

7) .voc: VOC (voice) files were originally popularized by Creative Labs. They are sound
files similar to WAV. These files are openable on Pentium computers with wplany.

8) .wav: WAV (wave) files are Microsoft's native audio sound format. WAV files can
include 8-bit or 16-bit sound, in mono or stereo. They can be played on Pentium
computers with Media Player and wplany.

Music software packages such as MusicProse and Finale, can also be used to compose
music, but they use their own proprietary music formats.

35
Multimedia on the Web

Once you have the appropriate software, you have to configure your WWW browser to
automatically play/display any downloaded multimedia file. This procedure varies by both
platform and software, but is somewhat similar.

Helper applications are programs which can stand on their own but are referred to from
within a WWW browser to enhance its capability to play/display multimedia file formats.
Normally, you must tell your browser which programs to use for which file format
encountered. Since Netscape Navigator is the most popular WWW browser for most
computer platforms, its method of setting and using helper applications is be described
below.

Netscape for Macintosh or IBM-compatible computers can be customized to automatically


respond to almost any file format encountered. To do this:

Pull down the Options menu and select Preferences.

From the selection box at the top of the window that opens, choose Helper Applications.

Now, find the row corresponding to the multimedia file format you wish to automate with a
helper application, and select the radio button corresponding to the action you wish
Netscape to take: save, launch helper application, or use Netscape's built-in viewer.

If you want Netscape to open a helper application, you must click once on Browse and
select an appropriate program.

Assessment:
Answer the following questions:
Q1. How can you differentiate between music, image and sound data without open?
Q2. Why today’s web site containing more and more multimedia?
Q3. Write tags which are used in to add images in web page?

2.3 Embedding Audio in Web Pages

Introduction

Embedding a sound on a page means to include the sound commands in the HTML
document. It will be nice to hear a background music while working with html files. And
now it is very simple to include an audio file into HTML page. There are different syntax for
different browsers.

For example, Internet Explorer support the BGSOUND and Netscape support an embed
tag for embedding music.

36
We have observed many times that free music downloads are available at various sites
which we can listen. Those websites will give us a trail to download and hear the music at
glance. We can just use those files for embedding in our html pages. In such cases, the
embed tag is used much for the simplicity.

In Internet Explorer (IE) the audio can be included using <BGSOUND> tag. bgsound tag
works only in IE and not in any other browsers.

Example Code: <bgsoundsrc="he-knows.wav" LOOP="-1" >


The audio can be included using <embed> tag for Netscape like browsers.

Example Code: <EMBED SRC="he-knows.mp3" HIDDEN="true" AUTOSTART="true"


LOOP="infinite" Height=145 width=160></EMBED>

This will include back-ground music into our webpage. If we want to display the audio
controls in the browser, we can set the hidden attribute to false. Here in the above
example we have used Loop=-1 which will play the file again and again. If you want to play
it only once just set the loop to false.

Various Quick and Easy Ways to Embed MP3 Files into the Site

Now, we are going to look at some easy ways to embed MP3 files into our website. All of
these methods are free and take mere minutes to implement.

Simple Player with Editable Parameters

a) Using the Object Tag:


Apart from the non standard Embed tag, we can also use the <object> tag for
embedding various media into our web pages. But, it is not still effective for cross-
browser functions.

You can specify some parameters related to the document with the param tag.
Parameters can be height, width, background color, loop, and autoplay. IE
sometimes needs a src parameter to understand the location

Example Code:
<object data="music.wav" type="audio/x-mplayer2" width="320" height="240">
<param name="src" value="music.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
<param name="bgcolor" value="#FFFFFF">
Hear the sound : <a href="music.wav">music</a>
</object>

37
Type attribute specifies the application/media player type you are using. We can use
the following types for our media player:
1) Windows Media Player : type="application/x-mplayer2".
2) Quicktime: type="video/quicktime".
3) RealPlayer: type="audio/x-pn-realaudio-plugin".

Step by Step Implementation to Embed Sound in the Web Page.

We would require HTML Editor to edit the web page and Sound file that is to be
embedded in the system

Below Steps should be Processed to Embed the Audio Files:

1) Open the Web page in an HTML editor. HTML editor must have the ability to
edit the source code to follow these steps.
2) Start with an object element:
<object>

3) We'll add 4 parameters to the object. The first is "src" that tells the browser
where to find the sound file. In this example, the sound file is eureka.wav and
is found in the same directory as the Web page:
<param name="src" value="eureka.wav" />

4) If you want the sound file to play immediately after it's loaded, make the auto
start parameter "true" otherwise make it "false":
<param name="autostart" value="true" />

5) The parameter autoplay is similar to autostart, just used by other browsers,


set it the same as the autostart parameter:
<param name="autoplay" value="true" />

6) Use the controller parameter to tell the browser if a controller should be


displayed to give your readers more control over the sound:
<param name="controller" value="true" />

7) Inside the <object></object> element, add an embed element:


<embed />

8) Add the following four attributes that are the same as the parameters to the
object:
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True" />

9) Add the correct MIME type for your sound file into the type attribute:

38
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" />
10) Add the pluginspage attribute so that people who don't have the correct
plugin for your sound file can go download it. For WAV files, I recommend
QuickTime:
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" pluginspage="http://www.apple.com/quicktime/download/" />
11) When you're done, your HTML should look like this:
<object>
<param name="autostart" value="true">
<param name="src" value="eureka.wav">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" />
</object>
There are Some Important Tips and Measure which should be taken Care of, to
make this Procedure Work:
1) Don't validate your Web page with the embed tag. It won't validate because that
tag is not part of the specification. But only Safari supports the object tag for
sound.
2) Check out the embed tag for additional attributes. Many of them you can use as
parameters on your object as well.
3) I recommend always setting the controller="true" attribute. That way, if someone
doesn't want to hear sound on your Web page, they can turn it off.
4) For the most accessible (and valid) sound, just link to your sound file.
<a href="eureka.wav">Eureka sound file</a>
That gives your customers the choice to listen or not.

b) Google Reader MP3 Player


Google Reader has an inbuilt MP3 player that is pretty much the same as Gmail
player but it also works on non-Google websites. Google has an advantage that it is
a free resource. This player has volume controls, no Google branding and it auto-
detects the duration of the music file so our readers know how long the song will last.
Here’s a live example followed by the HTML embed code:
To use this MP3 player on our website or blog, write the following code and replace
the MP3_FILE_URL with the link to your MP3 file.

39
<embed type="application/x-shockwave-
flash"flashvars="audioUrl=MP3_FILE_URL"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400px"
height="27px" quality="best"></embed>

<audioUrl=http://LINK" width="400" height="27" allowscriptaccess="never"


quality="best" bgcolor="#ffffff" wmode="window"
flashvars="playerMode=embedded">

Example:
<embed height="27px" width="400px"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="playerMode=embedded" wmode="transparent" bgcolor="#ffffff"
quality="best" allowscriptaccess="never"
src=http://www.google.com/reader/ui/3523697345-audio-
player.swf?audioUrl=MP3_FILE_URL

type="application/x-shockwave-flash" classname="audio-player-embed"/>

c) Yahoo! MP3 Player (inactive)

Yahoo! offers a code generator (Easy Listener) to help us to create a Flash based
MP3 player that matches our website color theme and layout. Though this Easy
Listener MP3 player requires you to pass the address of the web page that contain
the MP3 file(s), we can directly pass the MP3 link and it will work just fine.

It supports auto play and we can decide where the meta data associated with the
MP3 file should be displayed.

Example:
<embed src="http://webjay.org/flash/dark_player" width="400" height="40"
wmode="transparent" flashVars="playlist_url=MP3_FILE_URL&amp;skin_color_1=-
145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />

d) Yahoo Media Player

The Yahoo Media Player takes a drastically different approach by presenting viewers
with a very minimal piece of text and a play button instead of a full-fledged player.
However, when we click the play button, a floating player pops up that stays on
screen as we scroll.

If we maintain an MP3 blog or run a podcast and regularly link to MP3 files, it makes
little sense to embed a separate Flash player with every MP3 file. It is would
therefore recommend using the Yahoo Media Player that auto-detects links to MP3
files in our web pages and creates an embedded player for each link.

40
All we have to do is to insert the following link in our blog template and all MP3
hyperlinks will be converted into inline MP3 players. This also has the shuffle feature
and visitors can easily skip to any song in the playlist.
For the Yahoo player, it works similar to Yahoo Media Player, we first insert
following link in our blog template and all MP3 hyperlinks will be converted into inline
MP3 player.
<script type="text/javascript"
src="http://mediaplayer.yahoo.com/js"></script>
Also note that even before we click the play button, the Yahoo player is docked and
ready to go at the bottom left of the window. Just click on the arrow to slide it out.

e) Odeo MP3 Player (inactive)


Odeo offers a pretty impressive MP3 player that works perfect in web pages as well
as RSS readers but a small issue is that Odeo Player requires you to type the exact
duration of the song in the embed code. You can skip this step but then the progress
bar won’t reflect the true status when you play the song. And there are no volume
controls.
To use Odeo MP3 player in your website, add the following code replacing
MP3_FILE_URL and DURATION with relevant values.
<embed type="application/x-shockwave-flash"
src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400"
height="52" allowScriptAccess="always" wmode="transparent"
flashvars="audio_duration=DURATION&amp;external_url=MP3_FILE_URL" />

f) MixPod
MixPod creates a free flash widget to embed into our site. There are pros and cons
to using this service compared to those above. The cons are that we have to sign up
(free) and the player displays a link to MixPod. The pros are that we get a plethora of
great design options, embedded song information including artist and song name,
the ability to adjust the color scheme to match that of our site, and access to popular
songs and playlists.
Setting up a MixPod is super easy and requires no knowledge of coding beyond
where to paste the snippet of code they give us. All we do is paste in our MP3 link,
insert the artist/track info for all the songs in your playlist, and choose your skin and
colors. Then MixPod provides you with a rather large chuck of code to paste into the
site. The result is pretty slick.
MixPod is just one of many providers of free flash players you can embed into your
site.

41
g) Helper Applications - A New search

When the World Wide Web first got started, back when Mosaic was the browser and
this new thing called Netscape 1.0 came out, sounds were available, but they were
played with the use of a helper application.

Helper applications were programs that attached to the Netscape browser. In order
to play a sound file, like .wav, .au, or .aiff, you will need to attach an application that
the browser can use to play the sound.

We can use a program called WHAM. It's great and it plays a great many types of
sound files.

What Happens is this:


 The browser gets the sound file and downloads the entire thing.
 Once the download is complete, the helper application is launched.
 The browser loads the sound file into the application.
 The application plays the sound.

Offering a Sound Via Helper Application

If we have a sound, would like to offer, follow this format:

<A HREF="http://www.yoursite.com/filename.wav"> Click Here</A>

Notice it's nothing more than a simple link pointing to the sound file. Place the sound
file in the same directory as the page that calls for it and the browser will take it from
there. Just need to be take care of and must be sure to FTP transfer the sound file
to our site as "binary" or "raw data," as any other way can corrupt it.

By making the hypertext link to a sound file we are taking the chance that the person
viewing the page on our site has an appropriate helper application.

h) Using a Plug-in

Plug-ins are programs that helps browser to perform at a higher level. A sound plug-
in does basically the same thing the helper application does, except it works inside
the Netscape Navigator window rather than starting up as a whole other program.
Instead of WHAM popping up and Netscape being pushed to the back while the
sound runs, a sound plug-in works inside of Netscape Navigator allowing user to
continue playing with the page while the sound is running.

i) MIDI

It's an acronym that stands for Musical Instrument Digital Interface. That's a program
that acts as a go-between for an instrument and something that creates the sound.
Sort of like running a guitar through a computer and then out a speaker.

42
A midi file over the Web works as a program that runs the sound card. The midi file is
not simply read and reproduced like a .wav or an .au file. The midi file sort of "plays"
the sound card. It tells the sound card what note to produce and for what duration.
Put enough of these notes together and it sounds like music. Most of the midi music
that we hear sounds like a bad little Casio keyboard. Probably because that's the
level at which our sound card can reproduce the sounds. Higher level sound cards
can reproduce the MIDI just as clear as any instrument could. It's really amazing
when you hear it.

Format for an Embed:

<EMBED SRC="peanuts.mid" AUTOSTART=FALSE LOOP=FALSE WIDTH=145


HEIGHT=55 ALIGN="CENTER">
</EMBED>

Important Points:

 Embed tells the browser an embed sound is here -- go get the plug-in.
Remember, embed commands are associated with plug-ins.

 Note: If no plug-in is available, the browser will do one of three things:


1) Do nothing. This is true of very early level browsers or browsers other than
Netscape.
2) Put up a dialogue box asking you how you want to handle the file.
3) Tell you a plug-in is needed and ask you if you'd like to go get it.

 Height/Width deals with the plug-ins control panel size on the page. The control
panel at the top of the page was giving a size of 145 pixels wide by 55 pixels
high.
If we do not want a panel, add the command HIDDEN="yes" or set the height
and width to zero.
 Src stands for "source." It tells the browser where to go to get the audio file.
 Autostart deals with whether we want the sound to play by itself or by the viewer
starting the file after the plug-in box pops up. Its value can be either TRUE or
FALSE.
True starts the file straight away. It will play the sound when the page loads.
False prompts the viewer. It will wait for the user to click on the play button.
Note: we used "false" above. "True" would have started the file straightaway
upon load.
 Loop works the same way. The default value is FALSE which plays the file only
once. Setting this to TRUE will play the sound continuously. "True" loops the
sound so it plays forever. Make the loop "false" if you only want it played once.

43
2.4 Embedding Video in Web Pages

Different Ways to Embed Video into a Web Page

Since digital camcorders and video editing software became accessible to the large
audience, it's no longer a challenge for anybody to make a video. This fact underlies a lot
of web trends, namely the sky-rocketing popularity of video sharing portals and
widespread use of video content across websites and blogs. A good piece of video can
help us to deliver our message more effectively, educate readers, stimulate discussion
and get our brand going far beyond our own domain. Happily, it's not a problem nowadays
to integrate a video into a web page, as there's a lot of different tools to assist with this
task. Some of them are free, others are pricey. Here is a roundup of the most popular
means of web video embedment.

 Youtube Embed Code


If anyone run a branded channel on YouTube, there’s a good opportunity to use
YouTube embedding facilities.
There are some obvious marketing benefits of this method:
Once submitted, our video gets involved into the full cycle of YouTube life with its
views, search queries, comments, ratings, playlists, etc. Thus, it increases the
chances of our video content attracting visitors to our resource.
The embedment procedure is fast and easy:
We upload a video to our channel, go to the player, acquire the embed code and
paste it into our web page. YouTube also provides additional options to customize the
player like play in HD, switch to HTTPS, suggest other videos, etc.

Figure-2.1

44
 Vimeo Embed Code

Vimeo is YouTube's main rival, especially in the area of video embedment options.
Vimeo videos are also viewed by thousands of web users and can be easily
integrated into other websites or blogs. Vimeo player is very handsome and
streamlined. The blue “Embed” button in the upper right of the video leads to a dialog
box with the embedding options. Basic account holders are allowed to customize
player size, text colors and add other elements, while Vimeo Plus members enjoy the
complete control over the player, including options to choose what happens next and
where the video can appear.

Figure-2.2

 Facebook Video Integration

Facebook doesn't officially provide any video embedding options, still if a video is
available only on Facebook, there is a workaround. Each video on Facebook has an
id which shows in the URL, e.g.

http://www.facebook.com/video/video.php?v=2894326448598. Copy the last digits


and paste them into the following code instead of xxx in the video link:

<objectwidth="400"height="224">
<paramname="allowfullscreen"value="true"/>

45
<paramname="allowscriptaccess"value="always"/>
<paramname="movie"value="http://www.facebook.com/v/xxx"/>
<embedsrc="http://www.facebook.com/v/xxx"type="application/x-shockwave-flash"
allowscriptaccess="always"allowfullscreen="true"width="400"height="224">
</embed>
</object>

Then we can put that code on any web pages and the Facebook video will play just
like any other Flash video. We can optionally change the player size, add more
parameters like autoplay or loop.

 Html5 Video

HTML5 is one of the most straightforward new techniques of video embedment. The
new <video> tag in HTML5 markup allows web developers to add videos into a web
page without any special plugins. To make the most of HTML5 video, we have to
prepare the video in three variants – H.264, Theora OGG and WebM, since different
web browser support this or that video codec for the new HTML5 standard. The
sample code for HTML5 video looks like this:

<videowidth="320"height="240"controls autoplay poster="video.jpg">


<sourcesrc="movie.mp4"type="video/mp4"/>
<sourcesrc="movie.ogg"type="video/ogg"/>
Your browser does not support the video tag.
</video>

This method has one obvious disadvantage – HTML5 video isn't supported by old
versions of Internet Explorer (5, 6, 7, 8) which are still used by the majority of web
users. So the old-style Flash embedding code inside the HTML5 video element is
often provided as fallback.

 Freemake Video Converter

If we don't want to outsource video hosting to third-party websites, it's possible to


make a video web-ready with the help of Free Video Converter from Freemake.com.
This video converter outputs to Flash FLV and SWF formats. The main advantage of
this tool is that it provides ready HTML code and step-by-step instructions on how to
embed it. Alternatively, we can convert the videos to HTML5 supported format, the
converter will prepare all three video variants in a batch and show how to integrate
them into HTML5 markup. The software is for Windows only.

46
Figure-2.3

 Oembed

OEmbed is an open standard for embedding videos and images into a website. We
can use the video URL available on YouTube, Vimeo, Dailymotion, Flickr, Scribd,
Hulu and supported resources. The simple API allows websites to display embedded
content when a user posts a link to that resource, without having to parse the
resource directly. So we don't have to copy and paste HTML code from a hosting
website every time we wish to embed a video. The best example of OEmbed
integration is Facebook’s status update: when we paste a YouTube link in the status
bar, it is automatically rendered in the video player. OEmbed easily integrates into
WordPress via Shortcode API, the instructions are provided.

 Quick Media Converter

Quick Media Converter is another Windows-based converter for audio and video. It
outputs to Flash, QuickTime, RealMedia, H.264, OGG, so it is possible to make a
streaming video for HTML or HTML5 web integration. Video parameters are easily
customizable. However, no embed code or batch mode conversions are provided.

47
Figure-2.4

 Free Video Coding

Free Video Coding is an online service which helps us to create a web video player.
Once we enter the website, we get into the FreeVideoCoding wizard. We just need to
answer simple questions and the app will create custom HTML video codes based
on the answers. Then we can choose WMV, MOV, SWF, FLV, RM, MPEG, and even
AVI for the output.

Figure-2.5

48
 Video Lightbox

Video LightBox is a wizard program for Windows and Mac that helps users easily
insert video to the website or blog, in a few clicks without writing a single line of code.
It is free for non-commercial use, business licenses need to purchase it. To embed a
video, we need to add a video URL (from YouTube, Facebook, Google Video,
Metacafe, Vimeo, MySpace) or drag and drop a desktop video file, then select the
template and publish the result to our website via a built-in FTP client.

Video LightBox offers a wide range of video player templates: rounded, rectangular,
in Polaroid, Mac, Facebook or even a yellow sticker style.

Figure-2.6

 Easy HTML 5 Video

Easy HTML5 Video, as the name hints, is developed to convert videos into HTML5
supported WebM, MP4, and OGG formats. It provides all formats in a batch, embed
code and Flash fallback. Plus, it features additional options such as the ability to
publish video from the software interface, specify controls for the HTML5 video
player, select the video thumbnail, resize video and add a watermark. The program
works for Windows and Mac OS, to use it for business purpose, it is required to buy
a license for the same.

49
Figure-2.7

The methods listed above are well suited for both novice and savvy web developers, each
of them having their own pros and cons. Thus, if you opt for a third-party video hosting,
keep in mind that the existence of the videos will be fully dependent on the video channel
policy. Self-hosted videos can hardly be deleted or republished outside our own resource,
but we won't reap the marketing benefits of additional video broadcasting. So it's up to us
to decide which method of video embedding to pursue. Still don't forget that posting videos
on a regular basis will surely diversify our web content and maximize our online business
presence.

2.5 Embedding Flash Files in Web Pages

There are many ways to insert your Flash project into a web page. This page will cover
several different methods, including using the Adobe Dreamweaver program, or doing it
manually by writing out the code.

Different ways to Embed Flash file into a Web Page

 Inserting Flash into a Dreamweaver Page

Inserting Flash into Dreamweaver is a pretty straightforward process. Within


Dreamweaver, pull down the Insert menu and select Media, then select Flash

50
Figure-2.8

Dreamweaver will present us with an accessibility box. Use the title field to describe
the project.

Figure-2.9

 Inserting Flash into Web Pages Manually with Code

There are times, particularly when using a content management system, where we
will have to insert some Flash media into a web page by typing out the code
manually. To insert Flash onto a web page or content management system
manually, we must first upload the SWF file to a web server using a protocol called
FTP or through an upload form on the content management system.

Once we have the URL to our SWF file on the web, we can use the code samples
below, simply swapping out somefilename.swf for our own URL, and change the
width and height to the dimensions of our own Flash project. The code below can
appear complex, but works for all Flash content. Here is the gist of the code:

<object width="550" height="400">


<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

51
This above block of code uses two primary tags:
1. The <object> tag, and
2. The <embed> tag.

The <object> tag is the web standard for embedding content on to a web page, but
the <embed> is a carryover from the days of the Netscape browser, and is not
actually a valid tag in web standards. However, it is still widely used today to embed
Flash content due to its wide compatibility with multiple browsers. Many popular sites
like YouTube still offer embed code follows the above format.

 Embedding Flash Media so it Validates

A much better alternative, that is standards compliant, is to include what are


called comment tags that are used by Internet Explorer browsers. This method is a
pseudo hack, but conforms to the W3 standard and helps to achieve a
standardization across the World Wide Web.

<!--[if !IE]> -->


<object type="application/x-shockwave-flash" data="somefilename.swf"
width="300" height="200">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=6,0,0,0"
width="300" height="200">
<param name="movie" value="somefilename.swf" />
<!-->
</object>
<!-- <![endif]-->

Note that in each of these examples, there are two locations we must swap out with
the URL to our flash file. Also, we should remember to set the correct width and
height (there are two locations in each of the examples above). We can also create
our own web standards embed code using the Validifier Online Tool.

A third method for embedding Flash content is to use some JavaScript programming
code to embed Flash content. This is generally seen as the best method, as it
circumvents lots of issues and bugs with embedding Flash across multiple browsers;
such as the notorious click-to-activate security features in some Internet Explorer
browsers that forces the user to click on the Flash content to activate it before they
can interact with it. Often, this method is not possible to do within a content

52
management system by a user, unless the feature is built into the CMS. The code to
do this is beyond the scope of this tutorial, but the more popular tools to do this is
called SwfObject.

Steps for Embedding Flash Files (SWF files) is Shown below:


Step 1: Upload the SWF file(s) to an external Web host.

We need find a Web host (e.g. FTP server) and upload our SWF on it. Generally, an
account and password are required.

Step 2: Once we have successfully uploaded the SWF files to an external Website,
add the following code to any of the sections in the Web page, Blog, MySpace or
even a post:

&lt;script language="javascript">
document.write('&lt;objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=9.0.0.0" width=" 720" height="540" ID="swf" VIEWASTEXT>');
document.write(' &lt;param name="movie"
value=http://www.wondershare.com/pro/flash-gallery-factory-deluxe.html />');
document.write(' &lt;param name="quality" value="high" />');
document.write(' &lt;param name="wmode" value="window" />');
document.write(' &lt;param name="allowScriptAccess" value="always" />');
document.write(' &lt;param name="allowFullScreen" value="True" />');
document.write(' &lt;embedsrc=http://www.flash-slide-show.com/demo.swf
quality="high" name="sf" allowScriptAccess="always" allowFullScreen="true"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash"
width="720" height="540">&lt;/embed>');
document.write('&lt;/object>');
&lt;/script>

Step 3: Replace the SWF file link http://www.wondershare.com/pro/flash-gallery-


factory-deluxe.html with your own path and file name. Save the changes.

Assessment:
Answer the following questions:
Q1. Write tags used in to add audio file in web page?
Q2. Write tags used in to add video file in web page?
Q3. Write tags used in to add flash file in web page?
Q4. What is CSS and what are the current version available of it?

53
Chapter - 3: Web Scripting - Java Script
Introduction
JavaScript is an interpreted computer programming language. It was originally implemented as
part of web browsers so that client-side scripts could interact with the user, control the browser,
communicate asynchronously, and alter the document contents. Nowadays, JavaScript has
become very useful in both game development and the creation of desktop applications.

JavaScript was developed in 1995 by Brendan Eich, at Netscape, and first released with
Netscape 2 early in 1996. It was initially called as LiveScript, but was renamed as JavaScript in
order to capitalize the popularity of Sun Microsystem's Java language. JavaScript's use in
applications outside of web pages also like in PDF documents, site-specific browsers, and
desktop widgets and other useful applications.

JavaScript was formalized in the ECMAScript language standard and is primarily used as part of
a web browser (client-side JavaScript). This enables programmatic access to computational
objects within a host environment. JavaScript very quickly gained widespread success as a
client-side scripting language for web pages. Microsoft introduced JavaScript support in its own
web browser, Internet Explorer, in version 3.0, released in August 1996.

3.1 Java Script Review


JavaScript is a cross-platform, object-oriented scripting language. JavaScript is a small,
lightweight language. It is not useful as a standalone language, but is designed for easy
embedding in other products and applications, such as web browsers. Inside a host
environment, JavaScript can be connected to the objects of its environment to provide
programmatic control over them.
Core JavaScript contains a core set of objects such as Array, Date, Math, and a core set
of language elements such as operators, control structures, and statements. Core
JavaScript can be extended for a variety of purposes by supplementing it with additional
objects.

 Client-side JavaScript extends the core language by supplying objects to control a


browser (Navigator or another web browser) and its Document Object Model (DOM).
For example, client-side extensions allow an application to place elements on an
HTML form and respond to user events such as mouse clicks, form input, and page
navigation.

 Server-side JavaScript extends the core language by supplying objects relevant to


running JavaScript on a server. For example, server-side extensions allow an
application to communicate with a relational database, provide continuity of
information from one invocation to another of the application, or perform file
manipulations on a server.

54
Standardization

In November 1996, Netscape announced that it had submitted JavaScript to European


Computer Manufacturers Association (ECMA) for consideration as an industry standard,
and subsequent work resulted in the standardized version named ECMAScript. ECMA is
an international standard organization for information and communication system. In June
1997, ECMA International published the first edition of the ECMA-262 specification. A year
later, in June 1998, some modifications were made to adapt it to the ISO/IEC-16262
standard, and the second edition was released. The third edition of ECMA-262 is the
version most browsers currently use.

Fourth edition of ECMAScript standard was not released and does not exist. Fifth edition
of the ECMAScript standard was released in December 2009. The current edition of
ECMAScript standard is 5.1 and it was released in June 2011. This way, JavaScript has
become one of the most popular programming languages on the web.

Applications

Developing Multimedia Applications


The users can use JavaScript to add multimedia elements. With JavaScript you can show,
hide, change, resize images and create images rollovers. You can create scrolling text
across the status bar, thus making multimedia applications more interactive.

Create Pages Dynamically


Based on the user’s choice, the date or other external data, JavaScript can produce pages
that are customized to the user.

Interact with the User


JavaScript can do some processing of forms and can validate user input when the user
submits the form.

JavaScript Objects are Similar to Dictionaries


In JavaScript, objects are just collections of name-value pairs. JavaScript objects are
considered as a dictionary with string keys. The users can get and set the properties of an
object using either the familiar "." (dot) operator, or the "[ ]" operator, which is typically
used when dealing with a dictionary.

Features of JavaScript
Browser Support
All browsers have accepted JavaScript as a scripting language and provide integrated
support for it. For example, to access flash content, you need to install flash plug-in in your
browser. But to use JavaScript, you don't have to use any plug-in at all.

55
JavaScript can be used on Client Side as well as on Server Side
JavaScript has access to Document Object Model DOM of browser. You can change the
structure of web pages at runtime. Thus, JavaScript can be used to add different effects to
WebPages. On the other hand, JavaScript could be used on the server side as well.
Functional Programming Language
In JavaScript, function could be assigned to variables just like any other data types. A
function can accept another function as a parameter and can also return a function. You
can have functions with no name as well. This provides you the ability to code in functional
programming style.
Support for Objects
JavaScript is an object oriented language. However, the way JavaScript handles objects
and inheritance is bit different from conventional object oriented programming languages
like C++/ Java. JavaScript supports most of the object oriented concepts while being
simple to learn and use.
Run-time Environment
JavaScript typically relies on a run-time environment (e.g. in a web browser) to provide
objects and methods by which scripts can interact with "the outside world". In fact, it relies
on the environment to provide the ability to include/import scripts (e.g. HTML <script>
elements). This is not a language feature as such but it is common in most JavaScript
implementations.
Vendor-specific Extensions
JavaScript is officially managed by Mozilla Foundation, and new language features are
added periodically. However, only some JavaScript engines support these new features.
Object based Features Supported by JavaScript
JavaScript supports various features related to object based language and JavaScript is
sometimes referred to as an object-based programming language. Some robust features
which JavaScript supports related to object based are as follows:
Object Type
JavaScript supports the development of object types and in this context JavaScript
supports both predefined and user-defined objects. It is possible to assign objects of any
type to any variable. It is possible to instantiate the defined object types to create object
instances in JavaScript, which is a very powerful feature of Object based language.
Object Instantiation
In order to carry out the process of creating specific object instances available in
JavaScript, you can make use of a new operator. These two powerful, object-based
features supported by JavaScript described above make this an object model language. In

56
JavaScript, the object types are defined by properties and methods. Properties of Objects
are used to access the data values contained in an object. You can make use of the
properties of JavaScript objects for editing as well as reading depending on the object’s
nature. That is, if you want to carry out functions on the object, this is achieved by using
methods that make use of the object’s properties.
These are some of the features that give JavaScript an ability to handle simple as well as
complex tasks. This way, JavaScript has remained as the most popular programming
language for a long time. It is also a good language for web designers who want to learn
computer programming as it supports object oriented as well as function concepts and to
use it, you just need a browser and a text editor.

Writing Java Script

JavaScript code is typically embedded in the HTML, to be interpreted and run by the
client's browser. Here are some tips to remember when writing JavaScript commands.
 JavaScript code is case sensitive
 White space between words and tabs are ignored
 Line breaks are ignored except within a statement
 JavaScript statements end with a semi- colon;

The Script Tag


The <SCRIPT> tag alerts a browser that JavaScript code follows. It is typically embedded
in the HTML.
<SCRIPT language = "JavaScript">
statements
</SCRIPT>

Examples
Variables in JavaScript can be defined using the var keyword:
var x;
//defines the variable x, although no value is assigned to it by default
var y = 2;
//defines the variable y and assigns the value of 2 to it

Note the comments in the example above, both of which were preceded with two forward
slashes.

There is no built-in I/O functionality in JavaScript as such. It is the runtime environment


which provides I/O functionality. The ECMAScript specification in edition 5.1 mentions.

57
Actually, there are no provisions in this specification for input of external data or output of
computed results. However, most runtime environments have a console object that can be
used to print output. Here we elaborate with the help of a Hello World program:

console.log("Hello world!");

Relationship Between JavaScript Versions and ECMAScript Editions

The following table describes the relationship between JavaScript versions and
ECMAScript editions.

Table : JavaScript versions and ECMAScript editions

JavaScript Relationship to ECMA Script edition


version

JavaScript 1.1 ECMA-262, Edition 1 is based on JavaScript 1.1.

JavaScript 1.2 ECMA-262 was not complete when JavaScript 1.2 was released.
JavaScript 1.2 is not fully compatible with ECMA-262, Edition 1, for the
following reasons:
 Netscape developed additional features in JavaScript 1.2 that were
not considered for ECMA-262.
 ECMA-262 adds two new features: internationalization using
Unicode, and uniform behavior across all platforms. Several
features of JavaScript 1.2, such as the Date object, were platform-
dependent and used platform-specific behavior.

JavaScript 1.3 JavaScript 1.3 is fully compatible with ECMA-262, Edition 1.


JavaScript 1.3 resolved the inconsistencies that JavaScript 1.2 had with
ECMA-262, while keeping all the additional features of JavaScript 1.2
except == and !=, which were changed to conform with ECMA-262.

JavaScript 1.4 JavaScript 1.4 is fully compatible with ECMA-262, Edition 1.


The third version of the ECMAScript specification was not finalized
when JavaScript 1.4 was released.

JavaScript 1.5 JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.

Why JavaScript?

JavaScript is a simple scripting language invented specifically for use in web browsers to
make websites more dynamic. On its own, HTML is capable of outputting more-or-less
static pages. Once you load them up your view doesn't change much until you click a link
to go to a new page. Adding JavaScript to your code allows you to change how the

58
document looks completely, from changing text, to changing colours, to changing the
options available in a drop-down list and much more.

JavaScript is a client-side language, which means all the action occurs on the client's
(reader's) side of things. This means that no trips to the server are required for JavaScript
to kick into operation, which would slow down the process enormously. JavaScript
operations are usually performed instantaneously. In fact, JavaScript is often used to
perform operations that would otherwise encumber the server, like form input validation.
This distribution of work to the relatively quick client-side service speeds up the process
significantly.

JavaScript is integrated into the browsing environment, which means they can get
information about the browser and HTML page, and modify this information, thus changing
how things are presented on your screen. This access to information gives JavaScript
great power to modify the browsing experience. They can also react to events, such as
when the user clicks their mouse, or points to a certain page element. This is also a very
powerful ability.

Browser Compatibility
JavaScript is supported by Netscape 2+, Internet Explorer 3+, Opera 3+ and most of the
other modern web browsers. Each new version of the main browsers has supported new
generations of JavaScript commands, each more complex than the earlier one. However,
script compatibility can still be a problem, as the language is not as standardised as
HTML.

Writing First JavaScript


How are the users going to get JavaScript into web pages? JavaScript is written in the
same way as HTML in a text-editor. JavaScript implementation is quite similar to CSS
(Cascading Style Sheets). The users can link to outside files (with the file extension .js), or
write blocks of code right into your HTML documents with the <script> tag.

Let us consider a simple example with an embedded script. This will simply print a line of
text to the web page.
<script type="text/javascript">
<!--
document.write("<i>Hello World!</i>");
//comment line ………this is comment
</script>

When you place that in your code the text Hello World will appear on your screen
wherever you put it. Like so:

Hello World!

59
The script tag encloses any script code you want to use. The type attribute we have to
alert the browser to the type of script it is about to deal with, and so helps it to interpret the
code.

The comments around the script code are there so that old browsers that don't understand
the script tag won't display the code as text on the page. Any browser that can do
JavaScript will disregard the comments. Also note that for Netscape's benefit, the end of
the comment is itself commented out using a JavaScript comment (two forward-slashes
to comment out the rest of the line). This stops errors from occurring in old versions of
Netscape.

External Scripts

To import scripts from external JavaScript files, save the code in a text file with the .js
extension without the script tags and comments. In this case the code would just be the
document.write("Hello World!"). The users can link to this document in the page's <head>
with the following code.
<script type="text/ javascript"
src="simplemethods.js"></script>

Now all the methods and variables that are in that file are available to use in the page. The
users should always place includes in the head so that the browser is ready to execute
scripts when the user calls for them. If a user clicked a button that called for a script that
browser wasn't aware of yet, you may get an error. Having them in the head body means
they're always ready before they're needed.

A Simple Script
<script type="text/javascript">
<!--
document.write("<i>Hello World!</i>");
//-->
</script>

Document object uses its write( ) method to output some text to the page-document. The
text inside the double quotes is called a string, and this string will be added to the page.
To use an object's methods or properties we write the object's name, a dot [. ] and then
the method/property name. Each line of script ends with a semicolon. JavaScript isn't very
forgiving that is if you make any mistakes in typing, the users will get a script error.

Example for creating some HTML and text.


<script type="text/javascript">
<!--
document.write("<h1>Main Title</h1>");
document.write("<p align='right'>Body</p>");

60
//-->
</script>

Note that when quoting attribute values, you have to use single quotes, as if you used
double quotes the write method would think the string was over prematurely, and you'd get
an error.

How to Save and Run your Program in JavaScript


1. Open any editor like notepad and write the program
2. Save the program in a file with .html extension in a proper folder or subfolder on a
drive.
3. Open the web browser like internet explorer or Mozilla Firefox
4. Open the file you created and save in step 2, to execute the program like to execute
C:/JAVA/firstprogram.html
Where C is the drive, JAVA is the folder name and firstprogram.html is the name of
program which is saved in the Java folder

Programming using JavaScript


JavaScript language has no concept of input or output. It is designed to run as a scripting
language in a host environment. It is up to the host environment to provide mechanisms
for communicating with the outside world. The most commonly used host environment is
the browser. Although, JavaScript interpreters can also be found in other formats such as
Adobe Acrobat, Photoshop, Yahoo!'s Widget engine, and server side environments.
JavaScript programs manipulate values, and these values all belong to a type. Different
JavaScript's types include Number, String, Boolean and Objects.

Objects provide a great deal of utility in writing more maintainable code. If a function relies
on one or two other functions that are not useful to any other part of your code, you can
nest those utility functions inside the function that will be called from elsewhere. This
keeps the number of functions that are in the global scope down.

Note: When writing complex code it is often tempting to use global variables to share
values between multiple functions, which leads to code that is hard to maintain. Nested
functions can share variables in their parent, so you can use this mechanism to couple
functions together when it makes sense without disturbing your global namespace
'local/global' if you desire so. This approach should be applied with caution, but it's a
useful ability to have for potential users.

Operators
JavaScript operators can be used to perform various operations such as:
 Arithmetic Operators
 Comparison Operators
 Logical Operators

61
 Relational Operators
 Assignment Operators
 Conditional Operators

The Arithmetic Operators:


There are following arithmetic operators supported by JavaScript language: Assume
variable A holds 10 and variable B holds 20 then:

Operator Description Example


+ Adds two operands A + B will give 30
- Subtracts second operand from the first A - B will give -10
* Multiply both operands A * B will give 200
/ Divide numerator by denominator B / A will give 2
% Modulus Operator and remainder of after an integer B % A will give 0
division
++ Increment operator, increases integer value by one A++ will give 11
-- Decrement operator, decreases integer value by one A-- will give 9

The Comparison Operators: There are following comparison operators supported by


JavaScript language. Assume variable A holds 10 and variable B holds 20 then

Operator Description Example


== Checks if the values of two operands are equal or not, (A == B) is not
if yes then condition becomes true. true.
!= Checks if the values of two operands are equal or not, (A != B) is true.
if values are not equal then condition becomes true.
> Checks if the value of left operand is greater than the (A > B) is not
value of right operand, if yes then condition becomes true. true.
< Checks if the value of left operand is less than the (A < B) is true.
value of right operand, if yes then condition becomes
true.
>= Checks if the value of left operand is greater than or (A >= B) is not
equal to the value of right operand, if yes then true.
condition becomes true.
<= Checks if the value of left operand is less than or equal (A <= B) is true.
to the value of right operand, if yes then condition
becomes true.

62
The Logical Operators: There are following logical operators supported by JavaScript
language. Assume variable A holds 10 and variable B holds 20 then:

Operator Description Example


&& Called Logical AND operator. If both the operands are (A && B) is true.
non-zero then condition becomes true.
|| Called Logical OR Operator. If any of the two operands (A || B) is true.
are non-zero then condition becomes true.
! Called Logical NOT Operator. Use to reverses the ! (A && B) is
logical state of its operand. If a condition is true then false.
Logical NOT operator will make false.

The Bitwise Operators: There are following bitwise operators supported by JavaScript
language. Assume variable A holds 2 and variable B holds 3 then:

Operator Description Example


& Called Bitwise AND operator. It performs a Boolean (A & B) is 2.
AND operation on each bit of its integer arguments.
| Called Bitwise OR Operator. It performs a Boolean OR (A | B) is 3.
operation on each bit of its integer arguments.
^ Called Bitwise XOR Operator. It performs a Boolean (A ^ B) is 1.
exclusive OR operation on each bit of its integer
arguments. Exclusive OR means that either operand
one is true or operand two is true, but not both.
~ Called Bitwise NOT Operator. It is a unary operator and (~B) is -4.
operates by reversing all bits in the operand.
<< Called Bitwise Shift Left Operator. It moves all bits in (A << 1) is 4.
its first operand to the left by the number of places
specified in the second operand. New bits are filled
with zeros. Shifting a value left by one position is
equivalent to multiplying by 2, shifting two positions is
equivalent to multiplying by 4, etc.
>> Called Bitwise Shift Right with Sign Operator. It moves (A >> 1) is 1.
all bits in its first operand to the right by the number of
places specified in the second operand. The bits filled
in on the left depend on the sign bit of the original
operand, in order to preserve the sign of the result. If
the first operand is positive, the result has zeros
placed in the high bits; if the first operand is negative,
the result has ones placed in the high bits. Shifting a

63
value right one place is equivalent to dividing by 2
(discarding the remainder), shifting right two places is
equivalent to integer division by 4, and so on.
>>> Called Bitwise Shift Right with Zero Operator. This (A >>> 1) is 1.
operator is just like the >> operator, except that the
bits shifted in on the left are always zero,

The Assignment Operators: There are following assignment operators supported by


JavaScript language:

Operator Description Example


= Simple assignment operator, Assigns values from right C = A + B will
side operands to left side operand assigne value
of A + B into C
+= Add AND assignment operator, It adds right operand to C += A is
the left operand and assign the result to left operand equivalent to
C=C+A
-= Subtract AND assignment operator, It subtracts right C -= A is
operand from the left operand and assign the result to left equivalent to
operand C=C-A
*= Multiply AND assignment operator, It multiplies right C *= A is
operand with the left operand and assign the result to left equivalent to
operand C=C*A
/= Divide AND assignment operator, It divides left operand C /= A is
with the right operand and assign the result to left equivalent to
operand C=C/A
%= Modulus AND assignment operator, It takes modulus C %= A is
using two operands and assign the result to left operand equivalent to
C=C%A

Miscellaneous Operator
 The Conditional Operator (? :)
There is an operator called conditional operator. This first evaluates an expression
for a true or false value and then execute one of the two given statements depending
upon the result of the evaluation.

Operator Description Example


?: Conditional Expression If Condition is true?
Then value X:
Otherwise value Y

64
 The Type of Operator

The type of is a unary operator that is placed before its single operand, which can be
of any type. Its value is a string indicating the data type of the operand.

The type of operator evaluates to "number", "string", or "boolean" if its operand is a


number, string, or boolean value and returns true or false based on the evaluation.

Here is the list of return values for the type of Operator:

Type String Returned by Type of

Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"

Data Types
A data type is a classification of the type of data that a variable or object can hold. Data
type is an important factor in virtually all computer programming languages, including
visual basic, C#, C/C++ and JavaScript. When programmers create computer applications,
both desktop and web-based, data types must be referenced and used correctly to ensure
the result of the application's functions is correct and error-free. There are various data
types discussed in details as given below:

Numbers
Numbers in JavaScript are double-precision 64-bit format. The standard numeric
operators are supported, including addition, subtraction, modulus (or remainder) arithmetic
and so forth. There's also a built-in object called Math to handle more advanced
mathematical functions and constants.
Syntax: var num=new Number(value);

We can convert a string to an integer using the built-in parseInt() function. This takes the
base for the conversion as an optional second argument, which you should always
provide:
parseInt("123", 10)
123

65
parseInt("010", 10)
10

If you don't provide the base, you can get surprising results in older browsers:
parseInt("010")
8

It happens because the parseInt() function decided to treat the string as octal due to the
leading 0.

If you want to convert a binary number to an integer, just change the base:
parseInt("11", 2)
3

Similarly, we can parse floating point numbers using the built-in parseFloat() function
which uses base 10 .
You can also use the unary + operator to convert values to numbers:
+ "42"
42

A special value called NaN (short for "Not a Number") is returned if the string is non-
numeric:
parseInt("hello", 10)
NaN
NaN is toxic: If we provide it as an input to any mathematical operation the result will also
be NaN,
NaN + 5
NaN

We can test for NaN using the built-in isNaN() function:


isNaN(NaN)
true

JavaScript also has the special values +Infinity and -Infinity:


+1 / 0
+Infinity
-1 / 0
-Infinity

66
We always can test for +Infinity, -Infinity and NaN values using the built-in isFinite()
function:
isFinite(1/0)
false
isFinite(-Infinity)
false
isFinite(NaN)
false

Note: The parseInt() and parseFloat() functions parse a string until they reach a character
that isn't valid for the specified number format, then return the number parsed up to that
point. However the "+" operator simply converts the string to NaN if there is any invalid
character in it.

Strings

Strings in JavaScript are sequences of characters. More precisely, they're sequences of


Unicode characters, with each character represented by a 16-bit number. If we want to
represent a single character, we just need to use a string of length 1.

To find the length of a string, access its length property:


"hello".length
5 //length of given string “hello”

The strings are represented using objects and they have methods as well:
"hello, world".replace("hello", "goodbye") //by using replace() method
goodbye, world
"hello".toUpperCase() //by using toUpperCase() method
HELLO

Other types

JavaScript distinguishes between null, which is an object of type 'object' that indicates a
deliberate non-value, and undefined, which is an object of type 'undefined' that indicates
an uninitialized value.

In JavaScript it is possible to declare a variable without assigning a value to it. If we do


this, the variable's type is undefined.

JavaScript has a boolean type, with possible values true and false (both of which are
keywords). Any given value can be converted to a boolean according to the following
rules:
1) false, 0, the empty string (" "), NaN, null, and undefined all become false
2) all other values become true

67
You can perform this conversion explicitly using the boolean() function:
boolean("")
false
boolean(234)
true
Variables
New variables in JavaScript are declared using the var keyword:
var a;
var name = "Student_Name";

If we declare a variable without assigning any value to it, by default its type is undefined.

Note: An important difference from other languages like Java is that in JavaScript, blocks
do not have scope; only functions have scope. So if a variable is defined using var in a
compound statement (like inside an if control structure), it will be visible to the entire
function.

Control Structures

JavaScript has a similar set of control structures similar to other languages like C\C++ and
Java. Conditional statements are supported by if and else,
var name = "kittens";
if (name == "puppies") {
name += "!";
} else if (name == "kittens") {
name += "!!";
} else {
name = "!" + name;
}
name == "kittens!!"

JavaScript has while loops and do-while loops. The first is good for basic looping; the
second for loops to ensure that the body of the loop is executed at least once:
while (true)
{
// an infinite loop!
}
var input;

68
do
{
input = get_input();
} while (inputIsNotValid(input))

JavaScript's for loop is the same as that in C\C++ and Java which provides the control
information for the loop on a single line.
for (var i = 0; i < 5; i++)
{
// this loop will execute 5 times
}

The && and || operators are logical operators i.e., they will execute their second operand
dependent on the first. This is useful for checking null objects before accessing their
attributes:

var name = o && o.getName();


Or for setting default values:

var name = otherName || "default";


JavaScript has a ternary operator for conditional expressions:
var allowed = (age > 18) ? "yes" : "no";
The switch statement can be used for multiple branches based on a number or string:
switch(action) {
case 'draw':
drawit();
break;
case 'eat':
eatit();
break;
default:
donothing();
}

If we don't add a break statement, execution will "fall through" to the next level. In fact it's
worth specifically labelling deliberate fallthrough with a comment :
switch(a)

69
{
case 1: // fallthrough
case 2:
eatit();
break;
default:
donothing();
}

The default clause is optional. We can have expressions in both the switch part and the
cases, comparisons take place between the two using the “==” operator:
switch(1 + 3)
{
case 2 + 2:
yay();
break;
default:
neverhappens();
}

Objects

JavaScript objects are simply collections of name-value pairs. The "name" part is a
JavaScript string, while the value can be any JavaScript value including more objects.

There are two basic ways to create an empty object:

var obj = new Object( ); and var obj = { };


These are semantically equivalent, the second is called object literal syntax, and is more
convenient. Once created, an object's properties can again be accessed in one of two
ways:
obj.name = "Simon";
var name = obj.name;
And...
obj["name"] = "Simon";
var name = obj["name"];

70
These are also semantically equivalent. The second method has the advantage that the
name of the property is provided as a string, which means it can be calculated at run-
time.It can also be used to set and get properties with names that are reserved words:
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
obj["for"] = "Simon"; // works fine
Object literal syntax can be used to initialise an object :
var obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}
Attribute access can be chained together:
To find the color of the given object,
obj.details.color

Output: Orange
To get the size of the given object,
obj["details"]["size"]

Output: 12
Arrays
Arrays in JavaScript are actually a special type of object. They work similar to regular
objects but they have one magic property called 'length'. The length of the array (size of
the array) is always one more than the highest index in the array. The traditional way of
creating arrays is as follows:
Example:
var a = new Array();
a[0] = "dog";
a[1] = "cat";
a[2] = "hen";
a.length

71
Output: 3
A more convenient notation can be used while dealing with arrays:
Example:-
var a = ["Apple", "Mangoes", "Orange", “Banana”];
a.length

Output: 4
Note: Leaving a trailing comma at the end of an array literal is inconsistent across
browsers, so don't do it. The length of the array is one more than the highest index.
However, the array.length isn't necessarily the number of items in the array.
Example:
var a = ["dog", "cat", "hen"];
a[100] = "fox";
a.length

Output: 101
If we query a non-existent array index, we get undefined,
Example:
typeof a[90]
Output: undefined
If we take the above example into account, we can iterate over an array using the
following:
for (var i = 0; i < a.length; i++)
{
// Do something with a[i]
}
Arrays and string come with a number of methods:

Method Name Description


substring() Extracts the characters from a string, between two specified indices
concat() Joins two or more strings, and returns a copy to the joined strings
join() Joins all elements of an array into a string
pop() Removes and returns the last item.
push() Push adds one or more items to the end.
reverse() Reverses the order of an element in an array

72
shift() Removes the first element of an array and returns that element
slice() Returns a sub-array.
sort() Takes an optional comparison function.
splice() Modify an array by deleting a section and replacing it with more items.
unshift() Prep ends items to the start of the array.

3.2 Functions
Functions are the core component for understanding JavaScript. A simple basic function
can be declared as:
function add(x, y) {
var total = x + y;
return total;
}

A JavaScript function can take 0 or more named parameters. The function body can
contain as many statements and can declare its own variables which are local to that
function. The return statement can be used to return a value at any time, or terminating the
function. If no return statement is used (or an empty return with no value) JavaScript
returns undefined.

We can call a function without passing the parameters it expects, in which case they will
be set to undefined.
add()
NaN // We can't perform addition on undefined
add(2, 3, 4)
5 // added the first two; 4 was ignore

Functions have access to an additional variable inside their body called arguments, which
is an array-like object holding all of the values passed to the function. Let's re-write the
add function to take as many values:
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}

73
Output:
add(2, 3, 4, 5)
14
That's really not any more useful than writing 2 + 3 + 4 + 5 though. Let's create an
averaging function:
function avg() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum / arguments.length;
}

Output:
avg(2, 3, 4, 5)
3.5
In this example, avg() function takes a comma separated list of arguments — but if we
want to find the average of an array we could just write the function as follows:
function avgArray(arr) {
var sum = 0;
for (var i = 0, j = arr.length; i < j; i++)
{
sum += arr[i];
}
return sum / arr.length;
}

Output:
avgArray([2, 3, 4, 5])
3.5
JavaScript allows reusability feature by calling a function with an arbitrary array of
arguments, using the apply() method of any function object.

Output:
avg.apply(null, [2, 3, 4, 5])
3.5

74
JavaScript allows us to create anonymous functions.
var avg = function() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum / arguments.length;
}
This is semantically equivalent to the function avg() form.
JavaScript allows us to call functions recursively. This is particularly useful for dealing with
tree structures, such as we get in the browser DOM (Document Object Model).
function count Chars(elm)
{
if (elm.nodeType == 3) { // TEXT_NODE
return elm.nodeValue.length;
}
var count = 0;
for (var i = 0, child; child = elm.childNodes[i]; i++) {
count += count Chars(child);
}
return count;
}

Inner Functions
JavaScript function declarations are allowed inside other functions. An important feature
of nested functions in JavaScript is that they can access variables in their parent function's
scope:
function betterExampleNeeded() {
var a = 1;
function oneMoreThanA() {
return a + 1;
}
return oneMoreThanA();
}

75
List of Some Common Programs Using JavaScript

A Simple Program: Printing a Line of Text in a Web Page Using JavaScrip


<html>
<body>
(h1>my first web page</h1>
<script>
Document.write(“Hello World!”)
</script>
</body>
</html>

Output:

Figure – 3.1

Variables: JavaScript variables are “containers” for storing information. Creating a


variable is most often referred to as “declaring” a variable.
 To declare variables, use the keyword var and the variable name:
var username.

76
 To assign values to variables, add an equal sign and the value:
var userName = "JOHN"
var price = 50
Example:
//Program to show date and time. This is a comment line.
<html>
<body>
<script>
var d=new Date();
document.write(d);
</script>
</body>
</html>

Output:

Figure – 3.2

Functions - Predefined
A function is a block of code that will be executed when someone calls it. With functions,
you can give a name to a whole block of code, allowing you to reference it from anywhere
in your program. JavaScript has built-in functions for several predefined operations. Here
are three some functions.

77
 alert("message")
 confirm("message")
 prompt("message”)

Example: Alertbox
//Program to show the alertbox.
<html>
<head>
<script>
function myFunction()
{
alert("HELLO!");
}
</script>
</head>
<body>
<input type="button"onclick="myFunction()"value="show me the alert box"/>
</body>
</html>

Output:

Figure – 3.3

78
//Program to show the confirm box.
<html>
<head>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">try it</button>
<p id="demo"></p>
<script>
function myFunction()
{var x;
var r=confirm("press a button");
if(r==true)
{
x="you pressed OK";
}
else
{
x="you pressed cancel";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Output:

Figure – 3.4

79
Output continues…….

Figure – 3.5

//Program to show the prompt box.


<html>
<body>
<p><strong>Click the button to demonstrate the prompt box.</strong></p>
<button onclick="myFunction()">try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var person;
person=prompt("please enter your name"," ");
if(person!=null)
{
x=("hello" +person+ "!how are u today?");
}
document.getElementById("demo").innerHTML=x;
}

80
</script>
</body>
</html>

Output:

Figure – 3.6

Output continues…..

Figure – 3.7

81
Functions – User Defined

With user-defined functions, you can name a block of code and call it when you need it.
You define a function in the HEAD section of a web page. It is defined with the function
keyword, followed by the function name and any arguments.
function functionName(argument)
{
statements
}
//Program to call a function.
<html>
<head>
<script>
function myFunction()
{
confirm("Welcome!!!");
}
</script>
</head>
<body>
<button onclick="myFunction()">try it</button>
<p><strong>By clicking the above button,a function will be called.The function will confirm
a message.</strong></p>
</body>
</html>

Output:

Figure – 3.8

82
//Program to show function with an argument.
<html>
<body>
<p>click the button to call a function with arguments</p>
<button onclick="myFunction('The Earth','around the Sun')">try it</button>
<script>
function myFunction(name,object)
{
alert(name+"revolves"+object);
}
</script>
</body>
</html>

Output:

Figure – 3.9

83
//Function that returns a value.
<html>
<head>
<script>
function myFunction()
{
return("Have a nice day!!!");
}
</script>
</head>
<body>
<script>
document.write(myFunction());
</script>
</body>
</html>

Output:

Figure – 3.10

84
//Function with arguments that returns a value.
<html>
<body>
<p>Function with arguments that returns the result</p>
<p id="demo"></p>
<script>
function myFunction(x,y)
{
return x+y;
}
document.get ElementById("demo").innerHTML=myFunction(5,8);
</script>
</body>
</html>

Output:

Figure – 3.11

85
3.3 Objects
JavaScript supports programming with objects. Objects are a way of organizing the
variables. The different screen elements such as Web pages, forms, text boxes, images,
and buttons are treated as objects.

Properties and Methods


Every object has its own properties and methods.
 Properties define the characteristics of an object. Examples are color, length, name,
height, width etc.
 Methods are the actions that the object can perform or that can be performed on the
object. Examples are alert, confirm, write, open, close etc.

Naming Objects
 Objects are organized in a hierarchy: to refer to an object use object Name
 To refer to a property of an object use: object Name. property Name
 To refer to a method of an object use: object Name. method Name()

Built-In Objects
Some of the built-in language objects of JavaScript offer more advanced operations such
as:
 String – provides for string manipulation,
 Math-provides for maths calculations,
 Array-provides the collection of similar data types.

3.4 String Object


The String object provides methods and properties for string manipulation and formatting.
Format: stringName.method()
//Program to find the length of the array
<html>
<body>
<p>Length of the given string =
<script>
var txt="Hello world";
document.write(txt.length);
</script>
</p>
</body>
</html>

86
Output:

Figure – 3.12

//Program to find the position of the first occurrence of a text in a string using indexOf()
<html>
<body>
<p id="demo"><strong>click the button to locate where in the string a specified value
occurs.</strong></p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
var str="hello! welcome to my world";
var n=str.indexOf("world");
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>

87
Output:

Figure – 3.13

Output continued…….

Figure – 3.14

88
//Program to search for a text in a string and return the text if found using match()
<html>
<body>
<script>
var str="Honesty is the best policy";
document.write(str.match("policy")+"<br>");
document.write(str.match("Police")+"<br>");
document.write(str.match("pollicy")+"<br>");
document.write(str.match("policy")+"<br>");
</script>
</body>
</html>

Output:

Figure – 3.15

89
//Program to replace characters in a string using replace()
<html>
<body>
<p>click the button to replace the characters</p>
<p id="demo">hello prachi</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("hello","good morning");
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>

Output:

Figure – 3.16

90
When we click the button the output will be……

Figure – 3.17

3.5 Math Object

The Math object provides methods for many mathematical calculations like abs(), log(),
pow(), random(), round(), sqrt() etc.

Format: Math.method(#)

 round() method
The round() method returns a number to the nearest integer.
Syntax:
Math.round()
//Program to round off any number using round()
<html>
<body>
<p id="demo">click the button to round the no.to its nearest integer.</p>

91
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.round(8.7896);
}
</script>
</body>
</html>

Output:

Figure – 3.18

92
Output continues….

Figure – 3.19

 random()
The random() method returns a random number from 0(inclusive) up to but not
including 1(exclusive).
Syntax:
Math.random()
//Program to return a value random number between 0 and 1 using random()
<html>
<body>
<p id="demo">click the button to display a number</p>
<button onclick="myFunction()">try it</button>
<script>

93
function myFunction()
{
document.getElementById("demo").innerHTML=Math.random();
}
</script>
</body>
</html>

Output:

Figure – 3.20

Output continues…….

On pressing try it key continuously we got various random numbers

94
Figure – 3.21

 max()
The max() method returns the number with the highest value.
Syntax:
Math.max(n1,n2,n3……..nx)
//Program to return the number with highest value of two specified numbers using
max()
<html>
<body>
<p id="demo">Click the button to return the highest no. between 5 and 10.</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.max(5,10);
}
</script>
</body>
</html>

95
Output:

Figure – 3.22

Figure – 3.23

96
 min()
The min() method returns the number with the lowest value.
Syntax:
Math.min(n1,n2,n3……….nx)
//Program to return the number with the lowest value of two specified number using
min().
<html>
<body>
<p id="demo">Click the button to return the lowest no. between 77 and 9.</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.min(77,9);
}
</script>
</body>
</html>

Output:

Figure – 3.24

97
Output continues……

Figure – 3.25

3.6 Array object:


The array object is used to store multiple values in a single variable.
//Program to create an array.
<html>
<body>
<script>
var i;
var fruits=new Array();
fruits[0]="apple";
fruits[1]="banana";
fruits[2]="orange";
for(i=0;i<fruits.length;i++)

98
{
document.write(fruits[i]+"<br>");
}
</script>
</body>
</html>

Output:

Figure – 3.26

//Program to join two arrays using concat().


<html>
<body>
<p id="demo">Click the button to join three arrays</p>
<button onclick="myFunction()">Click me</button>

99
<script>
function myFunction()
{
var fruits=["Apple","Orange"];
var vegetables=["Cucumber","Carrot","Raddish"];
var grains=["Wheat","Maize"];
var mix=fruits.concat(vegetables,grains);
var x=document.getElementById("demo");
x.innerHTML=mix;
}
</script>
</body>
</html>

Output:

Figure – 3.27

100
Output continues……..

Figure – 3.28

//Program to remove the last element from the array by using pop()
<html>
<body>
<p id="demo">Click the button to remove the last array element.</p>
<button onclick="myFunction()">Click me</button>
<script>
var name=["John","Mary","Oliver","Alice"];
function myFunction()
{
name.pop();
var x=document.getElementById("demo");
x.innerHTML=name;
}
</script>
</body>
</html>

101
Output:

Figure – 3.29

Figure – 3.30

102
//Program to add a new element to the array using push().
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Click me</button>
<script>
var name=["Alice","Henry","John","Leo"];
function myFunction()
{
name.push("Aayush");
var x=document.getElementById("demo");
x.innerHTML=name;
}
</script>
</body>
</html>

Output:

Figure – 3.31

103
Output continues on clicking the button………..

Figure – 3.32

//Program to reverse the order of the elements in the array.


<html>
<body>
<p id="demo">Click the button to reverse the order of the element in the array.</p>
<button onclick="myFunction()">Click me</button>
<script>
var alphabet=["z","k","j","h","e"];
function myFunction()
{
alphabet.reverse();
var x=document.getElementById("demo");
x.innerHTML=alphabet;
}
</script>
</body>
</html>

104
Output:

Figure – 3.33

Output continues……

Figure – 3.34

105
//Program to sort the array.
<html>
<body>
<p id="demo">Click the button to sort the array</p>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction()
{
var fruits=["Banana","Orange","Apple","Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

Output:

Figure – 3.35

106
Output continues……

Figure – 3.36

3.7 Events

The objects in Web pages are organized in a hierarchical structure. All objects have
properties and methods. In addition, some objects also have "events". Events are things
that happen, usually user actions that are associated with an object. The "event handler" is
a command that is used to specify actions in response to an event. Below are some of the
most commonly used events:
 onLoad - occurs when a page loads in a browser
 onUnload - occurs just before the user exits a page
 onMouseOver - occurs when you point to an object
 onMouseOut - occurs when you point away from an object
 onSubmit - occurs when you submit a form
 onClick - occurs when an object is clicked

//Execution of javascript immediately after a page has been loaded.


<html>
<head>
<script>

107
function myFunction()
{
confirm("Welcome to the loaded browser");
}
</script>
</head>
<body onload="myFunction()">
<h1>Event handling!</h1>
</body>
</html>

Output:

Figure – 3.37

108
//Execute a javascript when a button is clicked.
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<p>Click the button</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>

Output:

Figure – 3.38

109
3.8 Case Studies

Case Study I: Online Shopping

In this section we consider the scenario of online shopping web-site. Online shopping
deals with purchasing products or services over the Internet any time anywhere. Online
shopping or e-shopping is a form of electronic business which allows consumers to directly
buy goods or services from a seller over the Internet using a web browser. Alternative
names are: e-web-store, e-shop, e-store, Internet shop, web-shop, web-store, online store,
online storefront and virtual store. Online shopping has grown in popularity over the years,
mainly because people find it convenient and easy to bargain shop from the comfort of
their home or office. The students can use the concept of Java Script for designing a
commercial web-site. Students may design the online web-site with the following
specifications:

 Create a home page using java scripts specifying login page and products details.
The home page includes details of the user account with products details and
description of items and their availability with price tags and discounts if any (for
some specific offer).

 Either user can login or register to the websites as per the choice of shoppers/users.

 For Registration page javascript will be used – which will check for user validation
such as having a valid e-mail_id to check the authenticity of the user.

 After login page – link the other pages with home page which will display about
products and transaction details.

 A fresh session starts for each user after login for some specific time which will
expires once you log out or leave the web page idle for some time.

 User can select product for purchasing from product list provided on the home page.

 After that the user will be redirected to payment page / online payment.

 Payment can be done either using cash on delivery or e-payment (online transaction
through some payment gateway i.e., Online bill pay is an electronic payment service
that allows you to set up a secure online account to make one time or recurring bill
payments for online transactions)

 Generate a receipt for each transaction or combined transactions with payment


details and item details to be dispatch to the user which can be used in case of
transaction failure or if items not received with desired descriptions as per the user’s
requirements.

 Host the web-site.

110
Case Study – II: Designing a Web-site for your School
One of the most important steps involved in creating a school web site is deciding what
content will be included and how it will be organized. Building a school web site provides a
unique addition to the curriculum. In the development phase, students and teachers
should discuss the kinds of materials they want to add to the site. Students may consider
the following issues while designing web-site for your own school.

 School Information: General information such as the school’s telephone number


and address along with driving directions should be included. Making mention of the
school boundaries is also useful. The school’s history, mission statement, and
awards received are interesting and serve to promote a feeling of community. The
names of the administration and faculty along with their school email addresses may
also be added. Other information about the office hours, the bell and bus schedules,
and after-school care may also be included.

 School Policy: The school policy is a very important document that may be made
readily available by posting it on the school site. School policy information might
include use of the Web in school, admission procedures / requirements, dress code,
absences, and behaviour expectations. Publishing school policies on your site can
help increase awareness and access to this information.

 Calendar of Events: A calendar of events provides parents, teachers and students


with an easy way to keep up-to-date with the happenings at the school. Special
events such as school plays, sports, field trips, and standardized tests are just a few
examples of what may be included. The school lunch menu may be added to the
calendar as well. Calendars are easily updated each month and this method of
showing events cuts down on the amount of paper and printing that needs to be
done. In addition, parents can always have access to the most recent calendar
without worrying about it becoming lost.

 Extracurricular Activities: School clubs or organizations involved in organizing


special events may create their own pages describing their purposes and anticipated
activities for the entire year. Meeting and event schedules with detailed information
are useful for informing students and gaining their interest.

 Newsletters: Newsletters written by the students are another great way to relay
information about the school. Students may submit articles, reports on class trips,
and special school events. Involving students gives them a chance to share their
thoughts in writing and build school spirit. A message from the principal that provides
motivation and encouragement to students and promoters parents involvement may
be included.

 Parent Involvement: An excellent way to encourage parent involvement is to keep


them informed of opportunities such as volunteering, PTA meetings, and fundraising

111
activities. By providing a wide range of choices, the school can help parents find the
activities that fit their time and schedule constraints as well as their interests.

 Links: There are many excellent resources available on the Web for teachers,
students and parents. Providing links to some of these sources is very helpful. Be
sure to check the links periodically to make sure the resources are still available.
Teachers can have easy access to learning communities and lesson plan ideas.
Students can link to reference or ask-an-expert sites and sites with virtual museums.
Links of interest to parents can also be included.

Exercise:
Q1. Define the characteristics of JavaScript? Is java and java script both are similar?
Write the difference between both of them.

Q.2. Point the errors in the following code and write the corrected script:
<SCRIPT LANG="JavaScript">
var A=10;
var B=6;
switch A%B
{
case 0;
document.write("The input is:");
break;
case 1;
document.write("The colour is:")
break;
else;
document.write("You didn't choose")
}
</SCRIPT>

Q3. Give the output of the following code segment:


<BODY>
<SCRIPT LANGUAGE="JavaScript">
var sum = new Array(6);
var Total = 0;
sum[0] = 0;

112
for(var icount = 1; icount < 4; icount++)
{
Total += icount;
sum[icount] = Total;
document.write(sum[icount]+"<br>");
}
document.write(Total);
</SCRIPT>
</BODY>

Q4 (a) Explain the functions and arrays in javascript with example?


(b) How the forms are handled in javascript? Explain.

Q5. How can javascript make a website easier to use? That is, are there certain
javascript techniques that make it easier for people to use a website?

Q6. How do you convert numbers between different bases in javascript?

Q7. How do we get javascript on a web page explain?

Q.8 Write a program in javascript using various data types to find the round off integer
values?

Q9. Write the program in javascript to solve the given polynomial:


x3 + 2x2.y + 3x.y2 + y3 = 0

Q10. Design a home page of your school. Include some images/pictures and other events
of an academic calendar for session 2013-2014. Also include some audio/video
features to make your web-site more interactive.

113
Chapter - 4: Advanced Features of
Web - Design
4.1 Code View, Add-Ins, Snippets ad Page Transitions

Working with CODE View

Though most tasks can be completed using GUI, at times you may have to insert code
manually (for example when you want to integrate with your website, a third party web
application, provided as code).

IntelliSense is a feature that automatically provides you a list of codes and attributes as a
popup when you work in the code view mode. To understand how to use it, do the
following:
1) Create a new HTML page.
2) Select Code View.
3) Place the cursor after the <body> tag.
4) Type angle bracket < to open the tag. Notice the list of elements displayed (image
below).
5) Select a element from the list, for example: h1.
6) Now place the cursor after the element and press spacebar. Notice the list of attribute
related to this element is displayed. Select align, (notice the attribute added), select =
on your keyboard. Notice the value corresponding to this attribute is selected. Select
Center.
7) Close the tag using >. Notice the end tag is automatically added.

Though code view can be difficult to use in the beginning, once you have adequate
practice, you will gain total control of the coding environment!

To view IntelliSense settings, do the following:

1) Select Tools > Page Editor Options….

2) Select the tab IntelliSense.

114
Figure-4.1

3) Notice the settings. Note that you need additional technical expertise to work with this
area. Do NOT change any setting here.

Add-ins

Add-ins extends the capability of the main program by adding enhanced custom
commands and specialized features. You can download a variety of Add-ins from:
 http://msdn.microsoft.com/en-us/expression/jj873995.aspx
 http://www.webassist.com/go/xweb-add-ins
 http://www.expressionextras.com/products/lightbox.htm
 http://www.dotnetcurry.com/ShowArticle.aspx?ID=534
 Of Course, Use Google to find more Add-ins!

Once you have downloaded an Add-in, use the following procedure to install the Add-in:
1) Select Tools > Add-ins. The Manage Add-ins dialog box appears.
2) Select Install…. Browse and select the Add-in and then click Open.
3) Select Yes.
4) Repeat the procedure to include more Add-ins.

Note: Add-ins may need to be installed through a special procedure. Refer to Add-ins help
file for detailed instructions.

115
Using Snippets
Snippets are pieces of programs re-used by most developers. Snippets are useful as you
can keep reusing the code created many times across multiple web pages or web sites
saving enormous amount of time and effort. To view and insert the available snippets, do
the following:

1) Select Panels > Snippets. Notice the list of snippets available separated into
categories such as CSS, HTML, JavaScript, JQuery, etc.

Figure-4.2

2. To insert a snippet, do the following:


a) Create a new page. Place the cursor where you want the snippet to be placed.
b) Select View > Page > Code. (Snippets can be inserted only in Split or Code
View).
c) Expand HTML, expand Hyperlink folder.
d) Double-click on a snippet, for example: Add to favorites. Notice the code is
added to the web page.
e) Save and preview this page in browser (F12). Switch to MEW and see the source
code.
Note: You may require following additional instructions for some of the snippets listed
here. Refer to the help file for detailed instructions.

PSD Templates
As a web designer, you need to create pages that are attractive and simple. Remember
that along with showcasing content to a visitor and the design also needs to be pleasant,
encouraging them to repeat their visit to the website.
When it comes to Web design, you need to maintain a balance between visual design and
code. Though it is possible to create simple web designs using standard HTML, it is

116
always a good practice to research on good designs. Components of some of the
attractive websites are usually created using Adobe Photoshop and later integrated into
the web site for additional functionality such as text content, forms, etc.

You can import certain parts (or layers) or entire images into your website using MEW.
Given here is a list of websites where you can find Photoshop templates (some of them
are free!):
 http://www.psdtemplates.com/templates/
 http://www.freepik.com/free-psd/web-templates

You can browse, select, download and use these files. Refer to website terms and
conditions for license information.

LINK PSD & MEW

Also there is a special feature that can be used for updating an image whenever the
original (.PSD) Photoshop image is modified. To understand how to use this feature, do
the following:

Import a .PSD (Photoshop files use this extension) file and do the following:
1) Create a new web page, save the file as psd.html.
2) Select File > Import > Adobe Photoshop (.psd)….
3) Browse and select the file. Click Open. Import Adobe Photoshop File dialog box
appears (figure below).

Figure-4.3

4) You can select the layers you want to import using the options in the left pane. Select
Compatibility Image located at right bottom and click OK.

117
5) Click Save when prompted.
6) Right-click on the image, notice the menu item Adobe Photoshop (.psd) (figure
below).

Figure-4.4

7) You can update this image whenever the original image is updated by selecting
Update from Source…. This is possible because MEW maintains a link between the
image and the original source. This is one feature that is useful for both web
developers (who write code) and web designers (who design sites)!

Page Transitions
You can apply special effects to web pages just as in presentation software. This helps
present special effects to visitors.
To add transitions, do the following:
1) Create a new page, save the file as trans.html.
2) Select Format > Page Transition…. The Page Transitions dialog box appears
(figure below).

Figure-4.5

118
3) You need to select an event to which the effect should be applied. Select Site Enter
from Event: dropdown and select Circle In from Transition effect: list.
4) Type 5 in Duration (seconds): box and click OK.
5) Save and preview this page in browser (F12). Switch to MEW and see the source
code.
Note: Page Transitions will work only on Internet Explorer 5.5 or above.

Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Download and use the following Add-ins:
a) PayPal ecommerce Toolkit
b) WordPaste Add-in
c) Insert Bing Map Add-in
So think DHTML Menu Addon
2. Include different snippets in web pages created in earlier sessions.
3. Set the following transition effects for each web page created in
earlier sessions:
a) Random dissolve
b) Blend
c) Box Out
d) Split horizontal in

Assessment:
Answer the following questions:
Q1. Explain the purpose of Add-ins.
Q2. List any three website that offer Add-ins for download (use Google).
Q3. Explain the purpose of snippets with an example.
Q4. Explain the procedure to import a PSD file with an example.
Q5. Explain the purpose of Page Transitions with an example.

Fill in the blanks:


1. Add-ins is available _____ menu.
2. Snippets can be accessed from ________ menu.
3. PSD can be imported from _____ menu.
4. Page Transitions is available _____ menu.

119
4.2 Dynamic Web Templates

Relevant Knowledge

Templates help you organize the entire website to have a consistent look and feel. This is
very helpful when you work with large number of web pages.

On your website, you may have some common items displayed on all pages such as the
logo, copyright & organization details, navigation menu, etc. but the content may vary on
each page. Here, you can create a dynamic web template (DWT) with fixed positions for
common elements and modifiable designated portions on each web page.

Unlike standard templates, Dynamic Web templates have the following features:

1) When you update the DWT, all web pages in the website are automatically updated to
changes.

2) You can create multiple DWT and keep changing just the template that affects the
entire website.

3) You can allow only specific portions of the pages to be edited instead of whole web
page resulting in better control and reduced chances of mistakes. This feature is very
useful when multiple developers work on the same website.

Creating a Dynamic Web Template

To create a dynamic web template, do the following:

1) Create a new web page (to be used as template).

2) Add common elements such as a logo (picture), company name, copyright notice at
the bottom of the web page, etc.

3) You need to add editable regions and that will be the only area in which the content
can be modified. To create editable region, do the following:

a) Place the cursor where you need to place content (remember, this will be the
only area where the content can be placed or changed). Right-click and select
Manage Editable Regions…. The Editable Regions dialog box appears (figure
below).

b) Type a name, for example: Content. Click Add.

c) Click Close.

120
Figure-4.6

4. Select File > Save. Select Dynamic Web Template from the Save as type:
dropdown menu (figure below). Type a file name, for example: MyTemplate and click
Save

Figure-4.7

Using a Dynamic Web Template


You have created a DWT template. If you want to create web page based on this
template, do the following:
1. Select File > New > Create from Dynamic Web Template…. (figure below)

Figure-4.8

121
2. Notice the template displayed in the list. Select the template, for example:
MyTemplate and click Open. A web page based on this template will be created and
displayed.

Figure-4.9

3. Notice that you are able to type content only in the editable region specified earlier
and rest of the area are not editable. Now type some content in the “Content” area.
Save this page as a normal web page. For example,
Page01.html.

4. Create at least 2-3 pages based on this DWT. Save the files.

Editing a Dynamic Web Template

When you edit the DWT, it automatically updates the changed layout to all the pages
created using the DWT (for example, when you want to change to a different layout or
update the company logo without affecting the content). To edit a DWT, do the following:

1. Locate the Dynamic Web Template you created earlier (it will be displayed with the
file extension .dwt) and double-click on it.

2. Now add another editable region by placing the cursor elsewhere in the web page.
Name the region as “Photos”.

3. Now save this DWT (CTRL+S). Notice the message displayed (figure below).

Figure-4.10

4. Select Yes. Automatically all the web pages created using this template are updated.
5. Open any of the web pages created using this template and notice the changes.
6. Insert an image in the “Photo” region. Save the web page.

122
Sometimes you may have to use a completely different layout for entire website. In such
cases you can create a new dynamic web template and associate all the web pages to this
new DWT. This in turn will (in no time) apply the new structure to all the web page
eliminating the need for making layout changes to each web page!

To create a new DWT and associate all web pages (or selected web pages), do the
following:
1. Create a new DWT by swapping the “Content” and “Photos” regions:
a) Create a region for “Photos” (at the top)
b) Create a region for “Content” (below Photo)
2. Save this as DWT with a new file name, example: MyTemplate02.

Note: You need to include the region names as the content has to be retained but placed
according to the new layout. Use the same region names when you want to work with
different DWTs. Otherwise content may not swap properly leading to issues.

Now, to use this new DWT, associate the web pages to the new template.
1. Select all the web pages (Page0x.html) using the folder view (left pane). Use
CTRL+Click to select multiple pages.
2. Select Format > Dynamic Web Template > Attach Dynamic Web Template…
(figure below).

Figure-4.11

3. Attach Dynamic Web Template dialog box appears (figure below).

Figure-4.12

123
4. Select the second template, for example: MyTemplate02 and click Open.

5. Notice the results displayed. Content from “Photos” and “Content” are automatically
swapped based on the new template.

Remove DWT association with selected or all web pages

When you no longer need to use DWT or are using a HTML editor that may not have
support for DWT, you can detach the DWT linked with selected or all web pages.

Note this procedure only removes the relationship and is a one-way process. Content and
the layout are left undisturbed. However if you want to associate with a DWT you need to
start all over again! If you decide at some point to remove the relationship of DWT and
selected or all web pages, do the following:
1. Select all the web pages (Page0x.html) using the folder view (left pane).

2. Select Format > Dynamic Web Template > Detach from Dynamic Web Template.
3. Notice the message displayed, select Close.

Exercise:
Perform the following activities till you are confident:

S. No. Activities

1. 1. Create a dynamic web template using the following guidelines:


 Use a table to link different pages in a website for navigating to other
pages.
 Use a table for the content area.
 Insert copyright notice at the bottom and a hyperlink to the
homepage (default.html)

Assessment:
Answer the following questions:
Q1. Explain the purpose of dynamic web template with an example.
Q2. Explain the procedure to link and remove DWT with multiple pages.

Fill in the blanks:


1. Acronym for DWT ___________________________.
_____________________ from the Save as type: dropdown menu should be used for
creating DWT.

124
4.3 SEO - Search Engine Optimization
Relevant Knowledge
Search Engine Optimization or SEO refers to the process that affects the website visibility
or ranking when displaying search results. Search Engines search contents of a web page
and create indexes to display results. As a web developer, you need to understand how
search engines work and how to get better search ranking. SEO Checker built-in with the
HTML Editor gives detailed reports that help you optimize the website for better ranking.

Anatomy of a Search Engine


Search engines crawl a website (and hence referred to as Spiders) to create index of
content. This index helps find a matching web page or link based on keywords entered by
visitors.
Search engines index the following components of a web page:
1. Page Title (only the first 70 characters are displayed in search results!)
2. Page Description (at least first 156 characters are displayed in search results!)
3. Page Keywords
4. Page headers (H1)
5. Links to other pages
6. Strong text (bold)
7. Phrases
8. ALT Text in images
9. And many more….

Note: You need to learn more about SEO before taking decisions on optimizing a website.
You need to refer to the SEO process of each search engine at their respective websites.
However, you can use the SEO Checker to understand what needs to be optimized for a
better ranking.
1. Select Tools > SEO Reports…. SEO Checker dialog box appears (figure below).

Figure-4.13

125
2. Select All Pages, and the select Check .Notice the results (figure below).

Figure-4.14

You can click on each message displayed in the list to find out and fix related issues.
For example for a message as “The Description is missing”, you can add a
description using the META tags to correct it. Once errors are identified and fixed, run
the SEO Checker again to confirm if the website is optimized.

Exercise:
Perform the following activities till you are confident:

S. No. Activities

1. Verify the website created earlier using SEO Checker.

Assessment:

Answer the following questions:


Q1. Explain the purpose of SEO.
Q2. Explain the purpose of SEO Checker with an example.

Fill in the blanks:


1. Acronym for SEO ____________________________________.
2. SEO reports can access from _______ menu.

126
4.4 Forms - Advanced

Relevant Knowledge
So far, you have been using HTML and CSS for creating simple web pages. These are
referred to as Static Web pages. While static web pages are good enough for creating
basic web sites, you need to learn and use technologies such as ASP, PHP, etc. for
creating dynamic websites. Dynamic Websites allow visitors to search and locate
information (such as a search feature of search engines or database listing), submit
information (such as feedback, rating, voting) etc.

Advanced Forms
You can create a fully functional form using MEW. Data filled using a form can be stored in
a database or sent to a specific email address. But these features require proper support
from the web hosting provider, primarily the support for FrontPage Server Extensions.

Special Note:
FrontPage Server Extensions is a technology that provides special functionalities on web
servers created using Microsoft FrontPage or Microsoft Expression Web. Though this
technology was used for over a decade, it is considered obsolete due to the evolution of
other equivalent or better technologies. You may still find a few web hosting providers
extending their support to this almost obsolete technology.
Microsoft Expression Web replaced Microsoft FrontPage. Most of the activities in this
module can also be done using Microsoft FrontPage. However, Microsoft FrontPage has
a limited support for recent developments in web technologies such as CSS3, HTML5,
etc. Yet, you can use form functionalities outlined in this module if your web hosting
provider supports only FrontPage Server Extension.
If you want to create a form for your Intranet or if your web hosting provider supports
FrontPage Server Extensions, you can use procedure in this session to create the form,
configure it to save the data in a database and later publish it to the remote computer.

Web Server
You can use the web server in-built with the operating system. Windows includes IIS
(Internet Information Services) in both client and server operating systems. IIS in-built with
client operating system such as Windows XP, Vista & 7 is usually sufficient for websites
having few visitors. You can install IIS on Windows Vista & 7. Use the help file for detailed
instructions.

Note: FrontPage Server Extensions is not available in Vista / Windows 7 & Windows
2008. You may download an evaluation copy of FrontPage Server Extensions (FPSE)
from www.iis.net. Some web hosting providers still give support for FPSE and you will be
able to publish using FPSE.

127
Creating Forms
You can create forms and use additional functionalities of MEW. To create a form and
store the details in a database, do the following:
1) Select File > New > ASP and save this page as dform.asp.
2) Insert a form and add the following:
a) Insert Input (Text), for visitor’s name.
b) Insert Input (Text), for visitor’s email address.
c) Insert Drop-Down Box, for collecting visitor’s favorite color.
d) Insert Input (Submit).

Now your form should look similar to the one below:

Figure-4.15

You need to customize this form before it is displayed to the visitor. Now to customize
the fields, do the following:
3) Double-click on the first Input (Text) field. Type Name in Name:, click OK.

4) Double-click on the second Input (Text) field. Type Email in Name:, click OK.

5) Double-click on the drop-down box. Drop-down Box Properties dialog box appears.

6) Since you are collecting details of visitor’s favorite color, you need to add dropdown
values for visitor to select.

a) Notice there is a default dropdown with null value (no value); you can remove
that by selecting Remove.
b) Click Add…, Type Red in Choice:, Click OK.
c) Click Add…, Type Blue in Choice:, Click OK.
d) Click Add…, Type Green in Choice:, Click OK.
e) Now change the Name: (Select1) by replacing the text to Color.

128
Figure-4.16

7) Click OK.

Creating a Database

To save the details collected from the form, you need to have a database with
corresponding fields ready. MEW can create a database for you and link these fields to the
database automatically. To create and link the database automatically, do the following:
1) Right-click on the form, select Form Properties. The Form Properties dialog box is
displayed.
a) Select Send to database (Note: Requires FrontPage Server Extensions).
b) Select Options…. The Options for Saving Results to Database dialog box
appears (figure below).

Figure-4.17

129
c) To create the database, select Create Database…. MEW automatically creates
an Access database (only format supported for automatic creation). Click OK to
close the popup.

Figure-4.18

2) Select Saved Fields tab. Note the fields are mapped from form to database
automatically. Click OK twice

Figure-4.19

Now the form is ready but you need to publish the form to a server that supports
FrontPage Server Extensions; otherwise this form will not work. Once publishing is
complete, you can use the published URL to view the webpage.

Publish the Form to a Website


Note: Forms are published automatically along with other files in a website.
1) Select Site > Publishing Settings….

130
2) Select Add….
a) Type a friendly name in Name:
b) Select FrontPage Server Extensions from Connection Type: dropdown menu
c) Type the remote location, for example: www.example.com
d) Type the credentials (Username and password) provided by the hosting provider.
e) Click Add.

3) Click OK.

4) Select Site > Publish All Files to…NAME (IP address of the server or computer
that supports FPSE).

Note: Publishing may take some time.

Viewing the Webpage

Visitors can now view the website or webpage. When they click on the URL that takes
them to the form, the form will appear.

Figure-4.20

Visitors can fill the form by entering the details and when they click submit, they will see a
confirmation page similar to the one below:

Figure-4.21

131
The database is stored in a special folder with the name fbdb; this folder is hidden for
security purposes and is not accessible to visitors.

You can open this database using your database software to view or modify information
within this database. This could be useful when you want to collect all the email addresses
and send a newsletter to visitors.

Note: Use Windows Explorer to navigate to the folder that contains this website if you are
using a web server within LAN; Access database is stored in a special folder named fpdb.
If you are using MEW, then the access database can be retrieved from the fpdb folder in
folder list view.

Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Create a detailed form for the following fields and configure it to save the details
in a database.
a) First Name
b) Last Name
c) Age
d) Email Address
e) Favorite Car (Include at least three different vendors, allow selection
through Checkboxes – Single Selection)
f) City (Create a list and display using a dropdown menu)
g) State (Create a list and display using a dropdown menu)
h) Pin Code
i) Comments

Assessment:

Answer the following questions:


Q1. Explain the procedure to create a form that will be saved in a database.
Q2. Explain the purpose of FrontPage Server Extensions.

Fill in the blanks:


1) ________ is the product was replaced by Microsoft Expression Web.
2) Acronym for IIS ____________________________.
3) Create Database option is available in _____________________ dialog box of form
properties.

132
4.5 Publishing Webpages or Websites - I
Relevant Knowledge
Preparing for publishing
Before you publish a website, you need to verify the website’s functionality. Hyperlinks
(internal & external) should be checked and replaced if necessary. Given here is a list of
standard procedures to be followed prior to site publishing.

Examining Structure of a website


Create a visual diagram of hyperlinks of a website. This helps you understand the
navigation structure or to trap any broken links. To view the structure of a website, do the
following:
1) Open the website
2) Select View > Site > Hyperlinks. Notice the visual diagram (sample below).

Figure-4.22

3) You can further expand and understand the links to other pages. Select the plus
symbol next to the link ( ). Notice the results displayed (figure
below).

Figure-4.23

133
Estimating Size of a website

If you know the size occupied by files in a website, you can determine if you have
sufficient web space (as allocated by an ISP) or even determine the time. Time taken to
download before visitor can view the web page..

1) Select View > Site > Site Summary (figure below).

Figure-4.24

2) Notice the results displayed (sample below). Look at the list of items analyzed and
given below Name, Count, Size and Description.

Figure-4.25

Removing slow pages

You can now decide to remove items that may possibly slow down a page.

1) Select Site > Problems > Slow Pages (figure below)

134
Figure-4.26

2) By default, HTML editor assumes and displays only the pages that take more than 30
seconds to load. You can change the value to 3 seconds to list web pages that take
more than 3 seconds to download. Select 3 Seconds from the dropdown (figure
below).

Figure-4.27

3) Notice the results displayed (sample below).

Figure-4.28

HTML calculates based on two parameters; the amount of bandwidth and time taken to
download within the set bandwidth. To modify this setting, do the following:
1) Select Tools > Application Options…. Application Option dialog box will be
displayed (figure below).

Figure-4.29

135
2) Select Reports View tab (figure below)

Figure-4.30

3) Notice the values of “Slow Pages” take at least and Assume connection speed of
(indicated in kilobits per second)
Note: This is not YOUR connection speed. This refers to the connection speed available at
the web hosting end.

DWT

If you have used Dynamic Web Template to create the website, check for updates made
to the template. Also you can update all the pages by selecting the Format > Dynamic
Web Template > Update All Pages option to ensure all page layouts are up to date.

Code Optimization

Before you publish, you need to cleanup your web page for any unnecessary code that
can result in reducing page size. This in turn will help in faster downloads. You can use the
in-built optimizer tool to remove unnecessary code by:
1) Select Tools > Optimize HTML…. The Optimize HTML dialog box appears.
2) During development you may have left behind some code such as comments. These
might have to be removed before you present the website to an audience. To do so,
select All HTML Comments in Remove Comments section and then select OK. All
the comments will be removed automatically.

To optimize a web page, do the following:


1) Open an existing page (at least 5-10 KB in size, record the size for comparison).
2) Select all the items under Remove Components list.
3) Click OK. Notice the difference in file size.

136
Figure-4.31

Fixing Errors
Before you publish the website, you need to verify if there are any pending issues. This
helps you save time and unnecessary problems that may arise post publishing the
website.

To verify and fix (if there are any errors), do the following:
1) Open the Website.
2) Select Tools > Recalculate Hyperlinks. The Recalculate Hyperlink dialog box is
displayed (figure below).

Figure-4.32

3) Click Yes. If there are any issues, they will be automatically fixed.

137
Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Create a visual diagram of any of the websites created earlier. Share it with your
classmates.
Optimize the HTML code in your website, remove all unnecessary code

Assessment:
Answer the following questions:
Q1. Explain the procedure to create a visual diagram of a website.
Q2. Explain the purpose of Site Summary with an example.
Q3. Explain the purpose of Code Optimization with the procedure.
Q4. Explain the procedure to fix errors in a web page automatically.

Fill in the blanks:


1) Structure of website can be viewed using ____ option in ____ drop down menu of
____ menu.
2) Site summary is available in ____ dropdown menu of ____ menu.
3) Optimize HTML is available in _____ menu.
4) Recalculate Links is available in _____ menu.

4.6 Publishing Webpages or Websites - II

Relevant Knowledge

Web Hosting

When you want others to see your content designed using HTML, you need to host the
content in a web server to be viewed by the public. There are several free web hosting
providers that provide free web space for your content. Though there may be restrictions
on the total web space or advertisements posted within your website, the web space is
usually sufficient for hosting small websites or practicing HTML! Use Google or other
search engines to find a free web hosting provider.

Web hosting providers usually allow publishing through FTP Some web hosting providers
allow other methods such as SFTP, WebDAV, etc. which you can use to upload your
website. Some of them allow other methods such as SFTP (secure FTP), WebDAV,
FrontPage Server Extensions, etc. and these are detailed usually in the page that displays
various plans for comparison.

138
For web pages created using HTML, you can use any provider that supports FTP.

Note: You can also use your own web server if you have a 24/7 active Internet connection
and a static public IP address. Though you need to host the content in a web server for
others to view, web pages made with HTML can be viewed from even a folder on your
computer by sharing the folder in a LAN environment. Share the folder and provide the
UNC path for others to view.

Publishing your website

Once you have created the website, you need to publish it to computers that will be
available 24x7 for visitors to view. When you sign up with a hosting provider, generally,
you will be given multiple options to publish the content such as FTP, WebDAV,
FrontPage Server Extensions, etc.

To publish a website using FTP, do the following:


1) Open the website that you need to publish.
2) Select Site > Publishing Settings…. The Site Settings dialog box appears.
3) Prior to publishing, you need to add details such as the destination computer’s IP
addresses or domain name, settings and credentials. For example if you have signed
up with a web hosting provider who has given you an IP address 192.168.1.200 and
FTP as the method for publishing, do the following:
a) Click Add…. The Connection Settings dialog box is displayed.
b) Enter the following details:
(i) Type a name in the Name: textbox (usually your domain name or
destination computer name or IP address of the destination).
(ii) Select FTP from the Connection Type: dropdown menu.
(iii) Hosting providers will provide a path for publishing, for example:
ftp.domainame.ext. Type the path in Location: textbox.
(iv) Specify the folder where the content will be stored (Usually directory is
auto-selected for websites, use this only if required).
(v) Enter the username and password in Credentials: section. This will be
used when you publish from the HTML editor. Generally multiple files are
transferred simultaneously between HTML editor and destination resulting
in faster transfers. Leave this setting as it is or contact hosting provider for
this detail only if required.
(vi) Click Add.

c) Notice the change in the Publishing tab (figure below) indicating the remote site
is added to the list.

139
Figure-4.33

4) Click OK.

Now MEW is ready with the remote site settings for publishing content. Whenever you
want to publish (first time or periodic updates), do the following:

5. Select Site > Publish All files to [NAME].

Note that it may take a while for publishing the content depending on the number of
files, the size of each file and the connection speed (Upload) you have. Once
uploaded, MEW will indicate successful or failed publishing through a popup message
similar to the one below.

Figure-4.34 Failed Publishing

To view the website, do the following:


1) Open the web browser.
2) Type the web server IP address, for example: 192.168.1.200.
3) Select Go. Notice the website displayed in the web browser.

140
Web Packages
Another method to take your website to a remote computer is by using the Web Package
feature. You can use the Web Package feature to transfer contents of your entire website
(preserving the structure) to a remote computer. This is useful when you want to send your
website (including the complete structure) for being hosted from a remote computer or, if
the existing structure is to be used for creating another website.
To export existing website to a web package, do the following:
a) Open the website
b) Select Site > Export to Web Package…. (figure below).

Figure-4.35

3) Export Web Package dialog box appears.


4) You can select individual files or folders or, package the entire website. To package
the entire website,
a) Place the cursor at the top (image above). Click Add. Notice the entire website is
added to the right pane.

Figure-4.36

141
b) You can use a friendly name for this package. Select Properties…,and the Web
Package Properties dialog box appears.

c) You can enter company name, author, a suitable title for this package. External
dependencies: has a list of external resources that this website uses. This is
helpful when you are using any files, folder or links that need to be verified before
sending the package to someone.
(i) Enter a title in Title: textbox, for example: WEBPACKAGE.
(ii) Enter a description in Description: textbox, for example: created using
MEW.
(iii) Enter your name in the Author: textbox
(iv) Click OK.

Figure-4.37

5. Click OK.

6. When prompted to save this Web Package, type a filename for example:
MyFirstWebsite_DATE. Click Save. Notice the result displayed (figure below).

7. Click OK.
Navigate to the folder where you saved this web package and notice the entire website
packed as a single file (figure below).

142
Figure-4.38

Note: Replace the Date by specifying current date or a version number to easily identify
the package.

Importing Web Package


If you want to import this web package on another computer, do the following:
1) Create a New Site (Empty Site), name this website for example:
MySecondWebsite.
2) Select Site > Import > Import from Web Package… (figure below).

Figure-4.39

3) Browse and select the Web Package, select Open. The Import Web Package dialog
box appears (figure below).

143
Figure-4.40

4) You can either select individual files or folders, or the entire website. Click Import.

5) Select Yes to All.

6) Click OK.

Now you can edit web pages within this website. Also you can keep a copy of the Web
package as a backup for future use.
Backup Websites

It is a highly recommended practice to take periodic (daily, weekly, etc.) backups of


websites either using special backup tools or publishing it to another internal source.
Whenever you attempt to perform an update on a website, ensure you take a backup of
the current site before touching it.
If you only have HTML content (static web pages), use the following procedure to take a
backup of the website:
1) Go the location where your website is stored (default location is My Documents).

2) Select the folder that has the complete website.

3) Copy and paste it in another location such as a pen drive or to a folder on another
computer.

144
Exercise:

Perform the following activities till you are confident:

S. No. Activities
1. Compare different hosting providers using the worksheet below:
Feature Provider 1 Provider 2 Provide 3
ISP
Monthly Price
Setup Fee
Disk Space
Monthly Traffic
Ads
Languages
ASP
PHP
Databases
Access
MySQL
Microsoft SQL
Email
POP3/SMTP
IMAP
Web Mail
Sub-Domains
Templates
FTP Access
Statics IP Address

Assessment:
Answer the following questions:
Q1. Explain the procedure to add a remote host for publishing.

145
Q2. Explain the procedure to publish a website with an example.
Q3. Explain the purpose of Web packages with an example.
Q4. Explain the procedure to backup a website with an example.

Fill in the blanks:


1) Publishing Settings is available in ____ menu.
2) Web package option should be accessed from _____ menu.
3) Import from Web Package is available in _______ dropdown menu of ____ menu.

4.7 Authoring Tools


Relevant Knowledge
You have learnt to work with Expression Web in earlier sessions. There are a variety of
other web authoring tools available for use and most of them have similar functionality.
Some of the popular authoring tools are discussed in this module.

KompoZer
KompoZer is an open source WYSIWYG HTML editor. KompoZer complies with the
W3C's web standards.
1) Download KompoZer from www.kompozer.com.
2) Follow the on-screen instructions and complete installing the software.
3) Select Start > Programs > KompoZer.

Figure-4.41: KompoZer version 0.8b3

Note: Screen grabs are from kompozer-0.8b3.en-US.win32 (Version).


Now you have installed, create & save pages and view them using different web browsers.

146
To create a page using KompoZer, do the following:
1) Select File > New…. The Create a new document or template dialog box is
displayed (figure below).

Figure-4.42

2) Select A blank template, select Create.


3) Type some content, select Source to view the source code.
Use the help file (F1) to learn about using KompoZer.

Dreamweaver
Adobe Dreamweaver is another popular authoring tool used widely. Adobe Dreamweaver
supports a variety of scripting languages such as JavaScript, VBScript, ASP.NET, PHP,
etc. apart from standard support for HTML & CSS.
1) Download Trial edition of Dreamweaver from adobe.com.
2) Follow the on-screen instructions and complete installing the software.
3) Select Start > Adobe > Dreamweaver.

Figure-4.43: Adobe Dreamweaver CS6

Use the help file (F1) to learn about using Adobe Dreamweaver.

147
Exercise:
Perform the following activities till you are confident:

S. No. Activities

1. Download, install and work with Net Objects Fusion.

Assessment:

Answer the following Questions


Q1. List any three web authoring tools.
Q2. Compare the features of at least two web authoring tools.

Fill in the blanks


1) Examples of web authoring tools are (list three):
a) ______________________________________________________________.
b) ______________________________________________________________.
c) ______________________________________________________________.

4.8 CSS Templates

Relevant Knowledge

Designing a good looking interface can be quite difficult at times as it requires creativity.
Also you need to learn additional software to create such designs while focusing on
delivering websites that are standard complaint.

When you design websites, you don’t have to design a web page from scratch. You can
use templates that are available for free or a free to save time and efforts. Though you
have learnt to create templates using HTML editors, you can still find and use creative
designs for your websites.

CSS Templates

Instead of creating dull and boring websites, you can use templates that are available on
the Internet. Popularly referred to as CSS Templates or XHTML/CSS Templates these
templates look attractive while meeting certain standards. Following is a list of websites
that offer such templates for your reference:

 http://html5up.net

 http://www.cssportal.com/css-templates/

 www.freecsstemplates.org

148
 www.free-css.com

 www.templatemo.com

 www.oswd.org

 www.openwebdesign.org

 and many more….

To use a CSS template, do the following:

1) Visit any of the website mentioned above (or use a search engine to locate one)

2) Browse and select a template.

3) Most website provides an entire site structure consisting of web page(s), style sheets
and accompanying images as a single compressed package. Download the
compressed file and unzip them to a folder. Also you may notice a link for live
preview that allows you to view the template in action before downloading. Always
check the design before you download.

4) Once you download open the homepage. Homepage is usually titled with names as
index.htm, default.htm or home.htm.

Note: Some website may require you to sign up and even have certain terms and
conditions. Check the website for requirements.

Customizing Templates

You can use a simple text editor to modify the template. However, if you find it difficult, you
can use an HTML editor such as MEW. Also note that if the template is of a recent
standard and if the HTML editor does not support that standard, entire template will
appear distorted. Confirm if the HTML editor support the standard used in a template.

To work with a template using MEW, do the following:

1) Launch MEW.
2) Create a New Site (always test the template in a new website).

3) Copy all the files from the template folder. (or use import wizard).
4) Paste in within the HTML editor (You may receive prompt for files to be overwritten,
click yes).

5) Open the Homepage (index or default.htm) (sample below).

149
Figure-4.44: Cool Web Template from CSSPORTAL.COM

6) Customize the website.


7) To view the source code, select View > Page > Code.

Following is provided as a courtesy:


CSS can also be used for developing attractive navigation menus (sample below).

Figure-4.45; Sample Navigation Menus

You can use CSS Tab designer (http://www.highdots.com/products/css-tab-designer/) to


create navigation menus such as the ones above.

150
Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Download a CSS template. Use this template as a design for the website
created in earlier sessions.
2. Download CSS Tab designer, create a navigation menu for a website.

Assessment:
Answer the following Questions
Q1. Explain the purpose of using CSS templates.
Q2. Explain the procedure to download and use a template in an HTML editor.

Fill in the blanks:

1) List any three websites that offer free CSS templates (write complete URL).

a) ______________________________________________________________.

b) ______________________________________________________________.

c) ______________________________________________________________.

151
152
Employability Skills
Textbook for Class XII
About the Textbook

Employability skills can be defined as soft skills, which employers look


for in a potential employee. These are the skills that equip employees
to carry out their responsibilities to the best of their abilities, ensuring
client satisfaction. For example, the ability to explain what someone
means in a clear and concise way through written and spoken means
helps in fostering better relationship with the client or customer.
Similarly, handling stress that comes with deadlines for completing
a work or target and ensuring that a person meets the deadlines can
be done through effective self-management training. It can also be
done by working cordially with other people from different disciplines,
backgrounds and expertise to accomplish a task or goal.
In today’s digital age, employers expect that employees are able to make
use of elementary functions of information and communication technology
to retrieve, access, store, produce, present and exchange information in
collaborative networks using the Internet.
Students need to develop entrepreneurial skills so that they can
develop necessary knowledge and skills to start their own businesses,
thus, becoming ‘job creators’ rather than ‘job seekers’. Potential employees
need to develop green skills, which are technical skills, knowledge, values
and attitudes needed in the workforce to develop and support sustainable
social, economic and environmental outcomes in business, industry and
community. Thus, as a student, one is expected to acquire a range of
skills so that the person can meet the skill demands of the organisation
that one would be working for or to set up and run one’s own business.
This textbook on ‘Employability Skills’ covers communication,
self-management, information and communication technology,
entrepreneurial and green skills. It has been developed as per the learning
outcome-based curriculum. The employability skills are embedded in
the Qualification Packs of the different job roles in various sectors under
the National Skill Qualification Framework. The textbook aims to provide
learning experience through a blended approach of text and video-based
interactive e-learning lessons. Running these e-learning lessons in
classrooms would require a computer with Internet connection, projector
and sound system, which the school needs to provide to teachers and
students. The teachers will guide the students to actively participate
in class. The students can ask and answer questions, and follow the
instructions to complete the exercises and activities.

Vinay swarup MeHrotra


Professor and Head
Curriculum Development and Evaluation Centre
and National Skill Qualification Framework Cell,
PSSCIVE, Bhopal

vi
Contents
Foreword iii
About the Textbook v
Unit 1: Communication Skills 1
Session 1 Active Listening 2
Session 2 Parts of Speech 9
Session 3 Writing Sentences 16
Unit 2: Self-management Skills 23
Session 1 Motivation and Positive Attitude 23
Session 2 Result Orientation 28
Session 3 Self-awareness 32
Unit 3: Information and Communication Technology Skills 39
Session 1 Getting Started with Spreadsheet 39
Session 2 Performing Basic Operations in a Spreadsheet 44
Session 3 Working with Data and Formatting Text 50
Session 4 Advanced Features in Spreadsheet 57
Session 5 Presentation Software 63
Session 6 Opening, Closing, Saving and 66
Printing a Presentation
Session 7 Working with Slides and Text in a Presentation 69
Session 8 Advanced Features used in Presentation 74
Unit 4: Entrepreneurship Skills 78
Session 1 Entrepreneurship and Entrepreneur 79
Session 2 Barriers to Entrepreneurship 91
Session 3 Entrepreneurial Attitudes 96
Session 4 Entrepreneurial Competencies 98
Unit 5: Green Skills 111
Session 1 Green Jobs 112
Session 2 Importance of Green Jobs 119
Answer Key 123
Glossary 125
Unit 1
Communication
Skills

IntroductIon
Communication is a two-way process through which
information or message is exchanged between
individuals using language, symbols, signs or
behaviour. Speaking, listening, reading and writing
are the parts of communication, which help us to
understand others. To learn a language, one needs
to develop four key skills, namely listening, speaking,
reading and writing as shown in Figure 1.1.

Figure. 1.1: Key communication skills

Speaking more than one language can help a person


communicate well with people around the world.
Learning English can help one communicate with
people who understand English, besides the language
the person has been exposed to since birth. The ability
to communicate effectively is an essential skill in today’s
information age. Communication skills are needed to
communicate effectively with people and customers.
This Unit on communication skills aims to help you
to understand the importance of various aspects of
communication and develop effective communication
skills. You should try to learn as many languages as
possible as it will help you to understand others’ culture.
It will also equip you with knowledge and skills, which
are necessary to take advantage of the opportunities the
twenty-first century offers. If you know many languages,
you will be able to converse with people and read signage
while travelling to different places.
Communication involves a sender, who encodes and
sends a message through a channel, and a receiver,
who decodes the message and gives feedback as shown
in Figure 1.2. Feedback is important in communication
as it helps in knowing whether the receiver has
understood the message or not.

Figure 1.2: Elements of communication

SeSSIon 1: ActIve LIStenIng


Effective communication involves skills that can be
utilised to send messages that are clear, concise and
accurate. Let us now try to understand what we mean
by clear, concise and accurate.
A clear statement is one which conveys the exact
message that you are trying to convey to the other person.
Here, we have two sentences. Now, which one do you
think is a clear statement?
(i) He went to his manager and said, “Please allow me
to reach office at 11 AM on Tuesday, 11 June 2019,
as I have an appointment with a dentist.”
(ii) He went to his manager and said, “Please allow me to
reach late to the office on Tuesday, 11 June 2019,
as I have an appointment with a dentist.”

2 Employability SkillS – ClaSS Xii


In the first sentence, you must have noticed that the noteS
time is mentioned, which makes the statement clear.
A concise statement is appropriately brief or to the point.
Now, let us consider the two sentences given below.
(i) The manager replied, “Alright, you may come late.”
(ii) The manager replied, “Alright, you may come
late. But it is a matter of great concern that most
employees come late and you are also developing
the same habit.”
Now, you can see that in the second sentence, there
is no need to tell the employee about the concern that
the employer had at the moment. This could have been
shared at a different forum or separately.
An accurate statement is one that is factual, i.e., its
correctness can be verified.
Now, once again, let us learn through examples.
(i) She informed the office that 50 per cent of the
books given for binding have been completed.
(ii) She informed the office that most of the books
given for binding have been completed.
Now, you can see that in the first sentence, a
measurable information is mentioned, which makes the
sentence accurate.
It is, thus, important to ensure that our communication
is clear, concise and accurate. Effective communication
skills help us to communicate the message correctly,
precisely and completely. Lack of communication skills
can result in confusion, frustration, wasted effort and
missed opportunities.
Listening skill
Every effective conversation starts with listening.
Listening skill is one of the most important skills in
communication. It is important to learn to give undivided
attention to a person with whom a conversation is
taking place.
Given below are some reasons why listening
attentively is important.
• We listen to obtain information.
• We listen to understand.

CommuniCation SkillS 3
noteS • We listen to enjoy.
• We listen to learn.
• We listen to build and maintain relationships.
• We listen to resolve conflicts.
Without the ability to listen attentively, messages
can be easily misunderstood. Thus, communication
breaks down and the sender of the message can easily
become frustrated or irritated.
Active listening
Active listening is an art, which comprises both a desire
to comprehend, as well as, offer support and empathy
to the speaker. It can affect your job effectiveness, the
quality of your relationship with others, and hence,
your overall well-being. Active listening allows you to
understand the problems and collaborate to develop
solutions. The various factors that affect active listening
are as follows.
• Eye contact: It is a form of body language.
It is one of the most important aspects in the
communication process. Maintaining an eye
contact with the person you are talking to sends
a signal to the speaker that “Yes, I am talking
to you or listening to you”. Avoiding eye contact
could mean that you do not want to listen to the
person speaking to you.
• Gestures: These indicate to the speaker if you
are listening or not. Keep your hand and feet still
while talking to someone.
• Avoiding distractions: You need to identify the
things that distract you. You must physically
remove the distractions in order to listen attentively.
For example, reducing the ringtone of your
mobile phone or switching it off while attending
a meeting or listening to someone will avoid
distraction. Another example is that you should
avoid glancing at the wristwatch frequently.
• Giving feedback: Feedback can be positive or
negative. But in both the cases, one needs to be
polite so that the person to whom the feedback is
being given is not hurt or offended.
4 Employability SkillS – ClaSS Xii
Stages of active listening
The best kind of listening is ‘active listening’. It happens
when you hear, understand, respond and remember
what is being said. The five stages of active listening are
as follows.
1. Receiving: It involves listening attentively.
2. Understanding: It is an informed agreement
about something or someone.
3. Remembering: It refers to the retrieval or recall
of some information from the past.
4. Evaluating: It is about judging the value, quantity,
importance and amount of something or someone.
5. Responding: It is about saying or doing
something as a response to something that has
been said or done.
How to ensure active listening?
You can remember the acronym ‘RESPECT’ to ensure
active listening (Table 1.1). Now, let us see what each
letter stands for.
Table 1.1: Active listening

R Remove distractions that may hamper listening. For


example, reducing the volume of television, radio or mobile
phone while talking to a person.

E Eye contact refers to looking at the speaker while listening.

S Show that you are listening attentively to the speaker


through gestures.

P Pay attention and focus on what the speaker is saying.

CommuniCation SkillS 5
E Empathise and feel the emotions of the speaker. Empathy
is the ability to share someone’s feelings or experiences
by imagining what it would be like to be in that person’s
situation.

C Clarify doubts. Ask questions to clarify doubts.

T Tune yourself to the timing of the speaker, i.e., wait for the
speaker to finish, and then, respond.

You have learned about various factors and stages


of active listening. Now, let us try to understand how to
overcome these barriers (Table 1.2).

Table 1.2: Overcoming barriers to active listening

Factors How a factor can How to overcome the barrier?


become a barrier?

Being pre-occupied When pre-occupied, Do not let emotions take over your mind.
you may not be Keep away phones and digital devices.
listening to a person
carefully.

Noise and visual You may not be able to Create a conducive environment to avoid
distractions hear the other person misinterpretations and distractions.
clearly in a noisy
environment.

Past experiences You may have Avoid developing biases and be objective in
or mindset developed biases or your approach when interacting with others.
prejudices based on
past experiences and
interactions.

Personal factors Your personal feelings Allow the other person to finish speaking,
may affect your and then, respond.
listening, for example,
your preconceptions
about the other person.

6 Employability SkillS – ClaSS Xii


noteS
Practical Exercise
The teacher will facilitate these activities by showing you the
e-learning lesson at http://www.psscive.ac.in/Employability_
Skills.html. This will include videos and e-content for the above
topics, as well as, detailed instructions for some activities
given below.
Initial thinking activity
After watching the initial video in the e-learning lesson for this
topic, write the answer of the question — why is it important to
listen actively?
Activity 1
Group discussion
Factors affecting active listening
Material required
Notebook, pen, etc.
Procedure
• Form groups of three students each.
• Each group selects any one of the factors (as given in
Table 1.2), which acts as a barrier to active listening.
• Discuss how it can affect or become a barrier to active
listening in the following situations.
(i) Family gathering for a wedding ceremony
(ii) At a busy retail store
(iii) Team discussion during sports day at school
(iv) Birthday celebration of a friend
• Each group shares its experiences and ways to overcome
these barriers.
Activity 2
Poster making
Active listening
Material required
Chart paper, pencil, sketch pens, etc.
Procedure
• Make a poster on either of the below mentioned scenarios
using the acronym RESPECT, which you have studied in
this Session for practising active listening.
(i) Depicting a conversation between two friends
(ii) Parent–child conversation

Activity 3
Role-play
Negative effects of not listening actively
Material required
Notebook, pen, etc.
Procedure
Scenario: Kapil works in an organisation. His manager Sunita
is having a discussion with him regarding a marketing plan. As

CommuniCation SkillS 7
noteS soon as Kapil enters the meeting room, he sits in a slouched
position. He has not kept his phone on silent mode and keeps
looking at it frequently. Even though he is listening to Sunita,
his thoughts seem to be elsewhere. At the end of the session,
Sunita feels Kapil is disinterested and hands over the marketing
plan to some other employee.

Check Your Progress


A. Multiple choice questions
Read carefully the questions given below and choose the
correct option.
1. You work at the front desk of a telecom company.
A customer approaches you while you are working.
The customer has a query regarding a bill. What would
you do?
(a) Not pay attention to the customer
(b) Keep the work aside and help the customer
(c) Continue doing your work while talking
inattentively to the customer
(d) Ask the customer to talk to someone else
2. Which of the following can be a barrier to
active listening?
(a) Noisy environment
(b) Not maintaining an eye contact with the speaker
(c) Not being attentive
(d) All of the above
3. Which of the following is not a stage of active listening?
(a) Receiving
(b) Understanding
(c) Non-responding
(d) Evaluating
4. What are the characteristics of an ideal message?
(a) Clear
(b) Concise
(c) Accurate
(d) All of the above

B. Short answer question (80–100 words)


1. Write down a situation you faced at school, wherein,
you overcame a barrier and practised active listening.

What have you learnt?


After completing this Session, you will be able to:
• identify the barriers to active listening.
• identify the stages of active listening.
• follow the steps towards removing barriers for
active listening.

8 Employability SkillS – ClaSS Xii


SeSSIon 2: PArtS of SPeech
Introduction
In any language, parts of speech are the categories of
words based on their function within a sentence. These
are the ‘building blocks’ of a language.
When we speak or write, we use sentences to
express ourselves. Therefore, sentences are important.
A ‘sentence’ is a group of words that communicates
a complete meaning, thought or action. For example,
Raju goes to school.
A group of words, which does not make complete
sense, is known as a ‘phrase’, for example, Raju goes.
A sentence always begins with a capital letter, and
ends with a full stop, question mark or exclamation
mark. Read aloud the examples given below.
• Did you work on your project?
• I completed it yesterday.
• That is good!

Using capitals
We know that all sentences begin with a capital letter. It
is easy to know what to capitalise if you remember the
acronym ‘MINTS’. MINTS is a set of simple rules that
help you to capitalise words correctly. Each letter in the
word MINTS refers to one capitalisation rule as shown
in Table 1.3.
Table 1.3: Capitalisation rules

Alphabet M I N T S
Months I Names Titles Starting letter of
sentences
Rule Capitalise CapitaliseCapitalise the Capitalise the Capitalise the
the first the letterfirst letter in the first letter in first letter in
letter in ‘I’ when names of people, the titles used every sentence.
the names used as a places, rivers, before people’s
of all word. seas and oceans, names.
months. mountains,
islands and days.
Example I will go to Every This Tuesday, Dr Shah and The cat ran out
college in day, I play Vidya is in Mr Patel work of the house.
June. tennis Rajasthan. together.
with him.

CommuniCation SkillS 9
Punctuation
There are 15 basic punctuation marks or signs used
in English. These include full stop or period, comma,
question mark, exclamation mark, apostrophe, colon,
semi-colon, dash, hyphen, parenthesis, quotation mark,
bracket, brace, ellipsis and bullet point (Table 1.4).
Table 1.4: Punctuation marks

Punctuation Sign Use Example


mark
Full stop . It shows the end of a sentence. It is This is a sentence. This is
also used to show short form of long another sentence.
words. For example, ‘Professor’ can be Sanjay is a Professor.
shortened as Prof., when used as His patients call him
a title before a name. Prof. Sanjay.
Comma , Sometimes, we use comma to indicate After the waiter gave me the
pause in a sentence. menu, I ordered food.
We can also use comma to separate I bought apples, oranges
items when we are listing more than and grapes.
two items in a row.
Question ? We use question mark at the end of What is your designation?
mark a question. How much is your work
experience?
Exclamation ! We use an exclamation mark at the What a pleasant surprise!
mark end of a word or sentence to indicate You are late!
a strong feeling, such as surprise,
shock or anger.
Apostrophe (’) We use an apostrophe followed by That is Divya’s desk.
an ‘s’ to show that something belongs Are these Abdul’s books?
to someone.
We also use an apostrophe to indicate Let’s go instead of Let us go!
the shortened form of some words in He isn’t here instead of He is
informal speech. not here.

Basic parts of speech


The different types of words we use in
sentences are called parts of speech. The
basic parts of speech are nouns, pronouns,
adjectives, verbs and adverbs (Table 1.5).

Figure 1.3: Basic parts of speech

10 Employability SkillS – ClaSS Xii


Table 1.5: Basic parts of speech

Parts of What they do Example sentence Example


speech words

Noun Nouns are words that refer to In the sentence: “Reema wrote Dog
a person, place, thing or idea. a letter.” Both Reema and India
They are ‘naming words’. letter are nouns. Sanjay

Pronoun A pronoun is a word used in In the second sentence: I


place of a noun. “Reema wrote a letter. She is They
tired.” She is used in place He
of the noun Reema. It is a You
pronoun.

Adjective Adjective is a word that In the sentence: “Reema wrote Small


describes other words. a long letter.” Long is an Blue
adjective that describes the Sharp
noun ‘letter’. Loud

Verb Verb is a word that shows In the sentence: “Reema wrote Run
action. a letter.” Wrote is a verb. It Eat
tells what action Reema did. Think
Sit

Adverb Adverb is a word that adds In the sentence: “Reema Easily


meaning to a verb, adjective, quickly wrote a letter.” Quickly Always
or other adverb. It answers is an adverb. It tells us how Inside
the questions — how? how Reema did the action (writing). Before
often? when? and where?

Sometimes, the same words can be used differently.


Will you book a movie for 3 pm? ‘Book’ is used as an adverb.
I need to find my English book. ‘Book’ is a noun.

His total cricket score was 145. ‘Total’ is an adjective.

That is totally awesome. ‘Totally’ is an adverb.

She is always watching a football match. ‘Football’ is an adjective.


She got a new football for her birthday. ‘Football’ is a noun.

The experienced sailor was able to hold up the ‘Sail’ is a noun.


sail despite heavy storm.
Satish was able to sail through despite the storm. ‘Sail’ is a verb.

Kapil promised his father that he will be a good boy. ‘Promised’ is a verb.
Kapil was unable to keep the promise given to his father. ‘Promise’ is a noun.

CommuniCation SkillS 11
Let us now see how these words are used. Read out
aloud the sentence given below.
Wow! Reema went to the studio and met a famous actor.
We already know that Reema, studio and actor are
nouns. Famous is an adjective because it describes the
actor (noun) and the words went and met are verbs
because they describe an action.
What about the remaining words in this sentence —
wow, to, the, and? What are these words called? We use
such supporting words to join the main parts of speech
together and to add information to the sentences that
we frame. Let us now look at supporting parts of speech.

Figure 1.4: Supporting parts of speech

Supporting parts of speech


Along with the main ‘Parts of Speech’, there are some
more words we need for connecting words, phrases,
clauses or sentences. Such words are called ‘supporting
parts of speech’. (Figure 1.4 and Table 1.6).
Table 1.6: Supporting parts of speech
Supporting Use Example
parts of speech
Articles • The words ‘a’, ‘an’ and ‘the’ are The car stopped suddenly because
known as articles. a cat ran in front of it.
• Articles are, generally, used A book
before nouns. An apple
• ‘An’ is used before words with a An umbrella
vowel (a, e, i, o, u) sound. The sun
• ‘A’ is used before nouns starting
with a consonant (all except
those starting with a, e, i, o and u)
sound.
• ‘The’ is used to refer to specific or
particular words.

12 Employability SkillS – ClaSS Xii


Conjunctions Conjunctions are words that join Instead of – Sheela went to the
two nouns, phrases or sentences. market. I went to the market.
Some common conjunctions are Sheela and I went to the market.
‘and’, ‘or’ and ‘but’. Instead of – Do you want oranges?
Do you want apples?
Do you want oranges or apples?
Prepositions • Prepositions connect one word The cat is on the roof.
with another to show the The shop is at the end of the road.
relationship between them. They, Rahul is standing under the tree.
usually, answer the questions I live in Delhi.
‘where’, ‘when’ and ‘how’.
• Some common prepositions are
‘on’, ‘at’, ‘under’ and ‘in’.
Interjections These words express strong Wow!
emotions, such as happiness, Oh!
surprise, anger or pain. They have Oh no!
an exclamation mark at the end. Thanks!
Help!

Practical Exercise
The teacher will facilitate these activities by showing you the
e-learning lesson at http://www.psscive.ac.in/Employability_
Skills.html. This will include videos and e-content for the above
topics, as well as, detailed instructions for the following activities.
Initial thinking activity
After watching the initial video in the e-learning lesson for this
topic, write down what do you think was wrong with Seema’s letter.

Activity 1

Group practice
Identifying ‘parts of speech’
Material required
Notebook, pen, etc.
Procedure
• Form groups of four students each. Read aloud the
paragraph given below.
“on sunday, i have an appointment to meet dr. patel in delhi.
my house is near dr. patels clinic i went to a shop near the clinic
on friday to buy vegetables I bought potatoes onions carrots
and a cabbage dr. patel is a friendly man have you met him”
• This paragraph contains examples of parts of speech that
you have learnt about in this Session. Identify as many parts
of speech as you can and mark them. Discuss what was
difficult in this activity. Write the paragraph with correct
capitalisation and punctuation. A member of one group

CommuniCation SkillS 13
noteS volunteers and presents before the class what the group
marked. The person writes the paragraph on the classroom
board with the punctuations. The other students point out
the mistakes, if any.
Activity 2
Group practice
Constructing sentences
Material required
Notebook, pen, etc.
Procedure
• Form pairs of students.
• List the five basic parts of speech that you have
learnt in this Session.
• Select one of them and form two simple sentences, which
use these parts of speech. For example, if you have chosen
adjectives, form two sentences that have adjectives. For
each part of speech, a volunteer reads out the sentences
the group has framed.
• The other students say if it is correct or not.

Check Your Progress


A. Multiple choice questions
Read carefully the questions given below and choose the
correct option.
1. What is a sentence?
(a) A group of ideas that form a complete paragraph
(b) A group of words that communicates a
complete thought
(c) A set of rules that we must follow to write correctly
(d) A set of words that contains basic
punctuation marks
2. Which of these sentences is capitalised correctly?
(a) I am Hungry.
(b) Divya and sunil are reading.
(c) The bucket is Full of water.
(d) She lives in Delhi.
3. Which of these sentences is punctuated correctly?
(a) Where are you going.
(b) I have a pen a notebook and a pencil.
(c) I am so happy to see you!
(d) This is my house.

14 Employability SkillS – ClaSS Xii


B. Fill in the blanks noteS
1. Fill in the correct nouns and verbs as given at the top of
the table to complete the following sentences.

Nouns Verbs
girl, girls, boy, milk, dog, skipping, riding,
student running, studying,
drinking, barking
(a) The ____________ is
_________________.

(b) The ____________ are


_________________.

(c) The ____________ is


_________________.

(d) Raju is ____________


_________________.

(e) The ____________ is


_________________.

(f) The ____________ is


_________________.

C. Short answer question


1. Identify conjunctions and prepositions (remember,
conjunctions join two sentences, while prepositions
help answer the words ‘where’, ‘when’ and ‘how’) from
the list given below and write them in the following
columns.
Under, and, in, at, or, up
Conjunctions Prepositions

CommuniCation SkillS 15
noteS What have you learnt?
After completing this Session, you will be able to:
• identify the basic parts of speech, such as nouns,
pronouns, adjectives, verbs and adverbs.
• use capitalisation and punctuation rules for sentences.
• explain the usage of parts of speech and identify them
in a sentence.
• identify supporting parts of speech, such as articles,
conjunctions, prepositions and interjections.

SeSSIon 3: WrItIng SentenceS


Introduction
A sentence is a group of words, which together expresses
a complete idea that has meaning. A sentence is formed
by putting together a group of words in sequence. This
means that a sentence must be understood by others.
A sentence, typically, contains a subject and an object,
conveying a statement, question, exclamation, or
command. Writing is constructed by putting sentences
in sequence so that they are understandable.

Simple sentence
A simple sentence is one that has only one subject and
one predicate or has only one finite verb.

Complex sentence
A complex sentence is one, which consists of two or
more coordinate clauses, joined by a
coordinating conjunction.
As you have studied in English classes, almost all
sentences have a subject and a verb. Some also have
an object.
• A subject is a person or thing that does
an action.
• Verb describes the action.
• Object is the person or thing that receives the
action. For example, read aloud the simple
sentence — “Nisha sells a laptop”. Let us see the
different parts of the sentence in Figure 1.5.

16 Employability SkillS – ClaSS Xii


A subject is a An object is the
person or thing person or thing that
that performs an receives the action.
action. The question, Nisha Sells a Laptop The question, “who
“who performed the received the action?”
action?” will help you will help you find
find the subject. In Subject Verb Object the object. In this
this sentence, ‘Nisha’ sentence, ‘a laptop’ is
is the subject. the object.
Verb describes the action. The
question, “what is the action?”
will help you find the verb. In this
sentence, ‘sells’ is the verb.

Figure 1.5: Parts of a sentence


Read aloud the sentences given in Table 1.7 to
understand about subject, verb and object.
Table 1.7: Parts of a sentence

Sentence Subject Verb Object

I wrote a letter. I wrote a letter

He called the He called the


customer. customer

She packed the She packed the product


product.

Dia and Sanjay Dia and booked a cab


booked a cab. Sanjay

Types of object
The object in a sentence can be either direct or indirect.
Direct objects are the ones directly ‘acted on’ by the
action word (verb). If we ask — “What does Nisha sell?”,
the answer is ‘laptop’, which is direct object. A direct
object answers the question ‘what?’.
An indirect object answers the questions, such as
“to whom” and “for whom”.
For example, in the sentence — “Abdul gave a gift
to his mother.” The verb is ‘gave’. What did Abdul
give? A gift. To whom did Abdul give the gift? To his
mother. Here, ‘gift’ is direct object and ‘his mother’ is
indirect object.
Some sentences only have direct objects, while some
have both direct and indirect objects.
Read out aloud the examples given in Table 1.8.

CommuniCation SkillS 17
Table 1.8: Direct and indirect objects

Sentence Verb Verb + Verb + by Direct Indirect


what? whom/to object object
whom?
Reema bought bought stationery stationery
stationery.
Fatima and Sonia played tennis tennis
played tennis.
He offered a coffee offered coffee me coffee me
to me.
The manager assigned projects us projects us
assigned us projects.

Types of sentences —
Category I

Active and passive sentences


What is the difference between
the following two sentences?
1. Sanjay broke the glass.
Figure 1.6: Types of sentences
2. The glass was broken
by Sanjay.
The action (verb) in both the
sentences is breaking of the
glass. But the ‘subject’ in both the
sentences is different. In the first
sentence, the subject (Sanjay)
does the action. In the second
sentence, the subject (the glass)
receives the action.
Read the sentences in
Figure 1.7: Active and passive sentences
Figure. 1.7 again.
Sentences, where the subject does an action, are
known to be in active voice.
Sentences, in which the subject receives an action,
are known to be in passive voice.

18 Employability SkillS – ClaSS Xii


Table 1.9: Active and passive sentences

Active voice Passive voice

She wrote an email. An email was written by her.


He opened the door for The door was opened by him
the customer. for the customer.
Mohan sold a bike. The bike was sold by Mohan.

Examples of active and passive sentences

Active Passive
I did not beat him. He was not beaten by me.
Kapil made a profit A profit was made by Kapil
yesterday. yesterday.
The tiger was chasing The deer was being chased by
the deer. the tiger.

Types of sentences — Category II


There are mainly four types of sentences, i.e.,
declarative, interrogative, exclamatory and imperative.
Each of these have been described in Table 1.10.
Table 1.10: Types of sentences — Category II

Statement or Question or Emotion, reaction or Order or


declarative sentence interrogative exclamatory sentence imperative
sentence sentence
It provides This type of An exclamatory These sentences
information or states sentence asks a sentence expresses a show an order,
a fact. It always question. It always strong emotion, such command, request
ends with a full stop ends with a question as joy, sadness, fear or or advice. It
(.). This is the most mark (?). wonder. It always ends can end with a
common type of with an exclamation full stop or an
sentence. mark (!). exclamation mark
(. or !).
Read aloud the examples given below.
I go to office. Did you go to office? I received the prize for Go to office today.
the best employee!
It is very cold. How is the weather? Oh, it’s very cold! Wear your sweater.

I completed my Did you complete I completed my project! Complete your


project. your project? project.

CommuniCation SkillS 19
Examples of types of sentences — Category II
Sentence Type
Where is my I-card? Interrogative
My arms ache from planting Exclamatory
those saplings!
Reading mythology will make Declarative
you more aware.
Come with us right now. Imperative
No way! I don’t want a tattoo! Exclamatory

Get out of the bed immediately! Imperative

Figure 1.8: Types of sentences — Category II


You can see that each of these sentences have a
different purpose.
Paragraph
A group of sentences forms a paragraph. While writing
a paragraph, make sure the sentences have a common
idea. When you want to write about a different idea, make
a new paragraph. For example, if you are writing about
your school, the first paragraph can be of sentences
about the name, location, size and other such details. In
the next paragraph, you can use sentences to describe
what you like about your school.
I go to Government Higher Secondary School, Balachadi.
It is not a very big school but has many good teachers.
There are about 100 students in my school. My school is
on the main road, very close to the city railway station.
I love going to school and learning about new things. My
school has a small playground, where I play cricket with
my friends after the classes are over. It has a library also.
I love my school.

20 Employability SkillS – ClaSS Xii


noteS
Practical Exercise
The teacher will facilitate these activities by showing you the
e-learning lesson at http://www.psscive.ac.in/Employability_
Skills.html. This will include videos and e-content for the
above topics, as well as, detailed instructions for some activities
given below.
Initial thinking activity
After watching the initial video in the e-learning lesson for this
topic, write if you think Sanjay and Dia were able to frame correct
sentences.
Activity 1
Pair work
Making sentences
Material required
Notebook, pen, etc.
Procedure
• Form pairs of students.
• First, write three sentences having direct objects.
• Then, write three more sentences, containing both direct
and indirect objects.
• Use different colours to mark the different parts of each
sentence (subject, verb and object).
Activity 2
Pair work
Active and passive voice
Material required
Notebook, pen, etc.
Procedure
• With same pairs as above, write a paragraph on any topic.
The paragraph should have at least two sentences in active
voice and two in passive voice. One student reads out the
paragraph that the person has written before the class.
• The class gives the feedback.
Activity 3
Pair work
Types of sentences
Material required
Notebook, pen, etc.
Procedure
• With the same pairs as above, make a list of minimum eight
sentences. These should have at least two sentences of each
type: declarative, interrogative, exclamatory and imperative.
• For each type of sentence, different volunteers read out
their sentences before the class.
• The class, then, gives feedback on the correctness of
the sentences.

CommuniCation SkillS 21
noteS Check Your Progress
A. Multiple choice questions
1. Identify the subject in the sentence, “The children
played football”.
(a) The children
(b) children played
(c) played
(d) football
2. Identify the object in the sentence, “The children
played football.”
(a) The children
(b) children played
(c) played
(d) football
3. Which of these sentences has/have both indirect and
direct objects?
(a) I am working on a presentation.
(b) She bought a blue pen.
(c) The girls played cricket.
(d) He wrote a letter to his sister.
4. Which of these sentences is/are in passive voice?
(a) They are watching a movie.
(b) The clock was repaired by Raju.
(c) He is sleeping in the room.
(d) My pet dog bit the postman.
B. Short answer questions
1. Write one sentence of each type — statement, question,
exclamatory and order.
2. Which job role do you wish to pursue? Write two
paragraphs (about 100–150 words) about that industry
and your career preferences. Make sure you follow
all rules about sentences and paragraphs that you
have learnt.

Practice work
• Practise speaking in complete sentences with
your classmates.
• Practise speaking with proper punctuations.
• Practise writing paragraphs on different topics.

What have you learnt?


After completing this Session, you will be able to:
• identify the different parts of a sentence.
• differentiate between active and passive voice.
• compose different types of sentences.

22 Employability SkillS – ClaSS Xii


Unit 2
Self-management
Skills

IntroductIon
Self-management, which is also referred to as
‘self-control’, is the ability to control one’s emotions,
thoughts and behaviour effectively in different situations.
This includes motivating oneself, and working towards
achieving personal and academic goals.
Students with strong self-management skills are
better at doing certain things well, such as coming to
class on time, paying attention, obeying teachers, parents
and elders, working with discipline, etc. It helps a person
to do better in studies or work. In order to do well at work
and life, in general, one must be able to manage and
improve oneself in various skills, including timeliness,
discipline, problem solving and work habits. To manage
oneself well, a person needs to develop the following.
• Positive thinking: to think that one can get things
done and be happy.
• Result orientation: to dream big and achieve the
desired or set results.
• Self-awareness: to be aware of one’s personality
traits and make the best out of one’s strengths.

SeSSIon 1: MotIvatIon and PoSItIve attItude


Motivation and positive thinking can help us overcome
fears and take up new challenges. Similarly, optimism,
which is a mental attitude, reflecting a belief or hope,

2020-21
can lead to positive and desirable outcomes. It helps
us to achieve our dreams, continue working hard
towards achieving success and live a happy life with a
positive mindset.
“Optimism is the faith that leads to achievement. Nothing
can be done without hope and confidence.”
— Helen Keller

Motivation
Motivation is derived from the word ‘motive’. Thus,
directing behaviour towards certain motive or goal is the
essence of motivation. An individual’s motivation may
come from within (intrinsic motivation) or be inspired
by others or events (extrinsic motivation).
Intrinsic motivation
It includes activities for which there is no apparent reward
but one derives enjoyment and satisfaction in doing
them. It occurs when people are internally motivated
to do something because it brings them pleasure. They
think it is important or feel what they are learning is
significant. Incentives related to the motive or goal can
satisfy one’s needs.
Extrinsic motivation
It arises because of incentives or external rewards. Lack
of motivation or incentives may lead to frustration, for
example, employees who are kept on contractual basis for
a long time may get frustrated and leave an organisation.
Positive attitude
A positive attitude makes a person happier, and helps
build and maintain relationships. It even increases one’s
chances of success. In addition, it can help the person
make better decisions. People, who maintain a positive
or optimistic attitude in life situations and challenges,
are able to move forward than those with a negative
attitude. Positive attitude helps improve mental and
physical health.
Ways to maintain positive attitude
It can take a little time and effort to build a positive
attitude (Figure 2.1). Following are some ways that can
help one maintain a positive attitude.

24 Employability SkillS – ClaSS Xii

2020-21
• Start the day with a morning routine. Say positive
affirmations, smile often and think about the
tasks to be accomplished during for the day.
• Feed the mind with positivity, read motivating
books, listen to music with uplifting lyrics, watch
inspiring movies, etc.
• Be proactive. A proactive person decides how one
must feel regardless of what may be going around
or what the day may bring.
• Focus on constructive and positive things. Do not
approach life with ‘problems’. Approach it with
‘solutions’.
• Learn from failures. Think what could have been
better and work towards the goals.
• Learn to focus on the present. Negativity mostly
stems out from anxiety of the past and
future events.
• Move towards your goals and
dreams. Be cheerful and work
hard to achieve the dreams. Figure 2.1: Positive attitude

Here are some more techniques that can help you to


maintain a positive outlook in the long run.
• Physical exercise and fresh air: Following
a healthy lifestyle is essential for students.
Practising yoga, meditation and deep breathing
exercises help improve blood circulation and relax
the body. Taking a walk or playing in the park
helps one to get a lot of fresh air, which helps in
becoming more active.
• Healthy diet: A healthy and balanced diet is
important for a healthy body and mind. Eating a
balanced diet, such as daal, roti, green vegetables
and fruits provides the strength required to do
daily work efficiently.
• Organise academic life: By keeping class
notes organised, completing assignments on
time and keeping track of all deadlines, stress
can be reduced to a great extent. When you are
not stressed, you can channelise your mind to
achieve the goals.

Self-management SkillS 25

2020-21
• Adequate sleep: A good night sleep for at least
seven hours is important so that the mind and
body can get recharged to function better the
next day.
• Holidays with family and friends: Visiting a
relative’s place, such as grandparents’ house or a
new place during summer vacation can help one
break the the monotonous normal routine and
come back refreshed.
Positive attitude is of immense value in a student’s
life. There are various situations that the student will
encounter in life, wherein staying positive will keep
the child going. The most common example would be
during exam results. At times, a student does not get
the desired result in exams. But it is important not to
lose hope, accept the result gracefully and work harder
with a positive attitude for the next exam.
Even during an interview for a dream job, a
candidate may not get selected in the first attempt.
However, with a positive attitude and persistent
efforts, all dreams can be achieved. Thus, it becomes
imperative for a child to learn to practise positive
attitude in life at all times.

What is stress and how to manage it?


Stress is a state of feeling upset, annoyed and hopeless.
There are times when we feel nothing is working right,
we are not able to achieve our goals and feel hopeless.
During such times, if we manage and control our
emotions, it helps us to sail through. Some of the ways
to manage stress are given below.
• Stay positive and analyse what is going wrong in
a certain situation. Resolving the situation is easy
once understood.
Figure 2.2: Stress
• Maintain an accomplishment sheet and enter
even small achievements.
• Keep your thoughts in present. Pondering over
past issues makes us feel upset and helpless.
• Talk to friends and family for comfort.
• Practise meditation and yoga.
• Whenever you feel negative thoughts are taking
over, take a look at your accomplishment sheet.

26 Employability SkillS – ClaSS Xii

2020-21
By managing stress effectively and maintaining a noteS
positive attitude, one can overcome any challenge and
achieve heights in career. Managing stress effectively helps
one maintain a healthy work – life balance.

Practical Exercise
The teacher will facilitate these activities by showing you the
e-learning module for this lesson via http://www.psscive.ac.in/
Employability_Skills.html. The module will include videos and
e-content for the above topics, as well as, detailed instructions
for some activities given below.
Activity 1
Role-play
Avoiding stressful situation
Material required
Pen or pencil, notepad or sheets of paper, etc.
Procedure
• Form groups of three Choose any one scenario from below.
Situation 1: You have missed your school bus and are
getting late. What will you do? Will you panic or call for
help or try to find a way?
Situation 2: You have to perform your best in a cricket
match so that you get a chance to play for your school
at the national level. You have been anxious (worried or
stressed). Will you lose your sleep worrying about it or go
to the field and practice?
• Prepare a skit and perform within your groups. Two
members will perform the skit and one member will
observe and share the feedback.
Activity 2
Self-reflection
Material required
Pen or pencil, etc.
Procedure
• Complete the table given below by listing situation(s) that
cause negative thinking, for example, not performing well
in an exam. List how you can manage the situations.

Situations causing How to turn around


negative thinking for positivity

Self-management SkillS 27

2020-21
noteS Check Your Progress
A. Short answer questions

1. Describe the ways you can make positive thinking a


habit in life.
2. List the importance of positive thinking. Describe how
it can help someone achieve one’s goals.

What have you learnt?


After completing this Session, you will be able to:
• explain the meaning of motivation.
• describe the type of motives.
• differentiate between intrinsic and extrinsic motivation.
• describe the meaning of positive attitude.
• identify the steps for being positive in life.

SeSSIon 2: reSult orIentatIon


Result orientation is a term used to describe a person’s
ability to recognise what results are important and the
steps needed to be taken to achieve them. It means to
focus on the result of an assigned task. If you know
the result you want to achieve, you can focus on the
efforts required to achieve it. Hence, result orientation
describes an individual or organisation that focusses on
outcome rather than the process that has been used to
produce a product or deliver a service.
An ideal employee needs to be proactive and result
driven. The person must always take necessary steps to
achieve the set goals or targets.
How to become result oriented?
(i) Set clear goals: Setting clear and accurate goals is
the first step one needs to take to meet the targets.
(ii) Prepare an action plan: An action plan describes
the way a person or an organisation will meet the set
objectives. It gives a detail of the steps to be taken
to achieve the target. Therefore, it consists of several
actions or steps that need to be taken, and changes
that need to be made. Each action, step or change
should include the following information.

28 Employability SkillS – ClaSS Xii

2020-21
• What changes will occur after the actions? noteS
• Who will carry out the changes?
• When will the changes take place?
• How long will the changes stay?
• What resources are needed to carry out
the changes?
• Who should know and what should be
communicated?
(iii) Use the right resources and tools: One must
evaluate the resources and tools needed to
achieve those results and whether they are
available. For example, you may want to clear the
college entrance exam with 70 per cent marks.
Do you have the books to study for the exam?
If not, from where and how can you get them?
(iv) Communicate with mentors and peers: One
must talk to teachers, seniors and mentors for
help in setting realistic goals.
(v) Make a calendar: One must make a calendar to
monitor the progress at regular intervals.
(vi) Work hard: One must work hard and believe in
one’s dreams.

Goal setting
Goal setting helps us to understand what we want,
how to achieve it and how do we measure our success.
Writing a goal requires that we should understand its
purpose and objective. Let us try to understand how to
define a goal.
• Identify what the goal is about, for example,
customer satisfaction, speeding up the delivery
process, etc.
• How the goal would make a difference? For
example, will it enhance customer satisfaction,
will it result in an increase in demand of a product
or service, speed up the delivery process and
result in better loyalty and quality of the product.
Use the acronym SMART to set goals. Let us see what
each letter in SMART implies.

Self-management SkillS 29

2020-21
noteS • S: Specific
Goals should be stated in specific terms. Vague goals
are difficult to attain. Specific goals give us a concrete
target. Hence, a goal should have a specific purpose.
• M: Measurable
Goals should always be measurable. If we do not set
our goals in measurable terms, it is difficult to assess
whether we have achieved them or not.
• A: Action-oriented
Goals do not just come true on their own. Effective goal
setting should include action-based steps that one will
follow to achieve the goal.
— Actions that I am already taking towards achieving
this goal
— Actions that I am not currently taking but will
take towards achieving this goal
— Actions that I am not currently taking and need
help to achieve the goal
— People and places from whom I can get help to
achieve the goal
• R: Realistic
There are few things more damaging to our sense of
self-efficacy than setting ourselves up for failure. Goals
must always be realistically attainable.
• T: Timely
Goals must have deadlines. However, deadlines may
change. But one must always set a deadline to get the
job done within a specified time limit.

Examples of result-oriented goals


Examples of result-oriented goals are as follows.
• A student may set a goal of scoring high marks
in an exam.
• An athlete may run five miles a day.
• A traveller may try to reach a destination city
within three hours.

30 Employability SkillS – ClaSS Xii

2020-21
noteS
Practical Exercise
The teacher will facilitate these activities by showing you the
e-learning lesson at http://www.psscive.ac.in/Employability_
Skills.html. This will include videos and e-content for the above
topics, as well as, detailed instructions for the activity given below.
Activity 1
Pair and Share
Aim in life
Material required
Pen or pencil, notepad, etc.
Procedure
• Form pairs of students.
• Make a list of things that you can do well.
• Write your aim in life.
• Share your notes with your partner and discuss
your personal characteristics.
• One student volunteers and reads out the notes before
the class.
Here is the format to do the activity.
– List what you believe you are as a person by starting the
sentence with ‘I am’.
– Next, list what you can do well by starting the sentence
with ‘I can’ (I can sing well).
– List what you plan to do by starting the sentence with ‘I
will’ (I will train myself in classical music).
– Finally, state your aim in life. Start the sentence with ‘My
aim is’ (My aim is to become a singer).
– Making a list will help you to become self-aware and
result oriented.

Check Your Progress


1. Fill in the table given below, which can help you to
prepare an action plan to achieve the set results.

Results I want What am I What should I do


to achieve doing for to achieve the
achieving results?
the results?
I want to score I study for I should study for
80 per cent in two hours three hours and
quarterly exam. daily. practise sample test
papers.

Self-management SkillS 31

2020-21
noteS What have you learnt?
After completing this Session, you will be able to:
• identify ways to be result oriented.
• make an action plan.

SeSSIon 3: Self-awareneSS
Self-awareness is about understanding one’s own
needs, desires, habits, traits, behaviours and feelings.
Let us try to understand this with a short story.
“A monk slowly walks along a road when he hears a
galloping horse. He turns around to see a man riding the
horse moving in his direction. When the man comes closer,
the monk asks, “Where are you going?” To which the man
replies, “I don’t know, ask the horse” and rides away.
When we are not aware of ourselves, then we tread
in a direction about which we are not clear. Therefore, it
is important that we must be aware of ourselves. When
one becomes self-aware, the person starts to become
aware of everything and looks at things or situations
objectively. It plays a critical role in how we understand
ourselves and relate to others and the world around us.

Steps towards self-awareness


• The first step for practising self-awareness is
gaining a greater awareness of one’s emotions
(Figure 2.3).

Figure 2.3: Various emotions a person experiences

• The second step to practising self-awareness is


making a habit of tracking one’s feelings.

32 Employability SkillS – ClaSS Xii

2020-21
• The third step for practising self-awareness is noteS
expanding one’s practice to areas of life beyond
the person’s feelings.
Personality and personality traits
Personality is a cluster of thoughts, feelings and
behaviours that make a person unique and different
from others.
Personality traits are defined as relatively lasting
patterns of thoughts, feelings and behaviours that
distinguish individuals from one another. Hence,
personality development is the development of an
organised pattern of behaviours and attitudes that
makes a person distinctive. Personality development
occurs by the ongoing interaction of temperament,
character and environment. Culture also plays an
important role in shaping personalities.
One’s personality also affects the person’s
relationships with others. A positive personality can
lead to better performance, increased productivity and
cordial relationships with others.
There are five parameters that describe an
individual’s personality. These five dimensions are also
called the ‘Big Five Factors’ and the model is referred
to as the ‘Five Factor Model’, which is abbreviated
as FFM (Figure 2.4).
• Openness: Individuals with openness to
experience are, generally, creative, curious, active,
flexible and adventurous. If a person is interested
in learning new things, meeting new people and
making friends, and likes visiting new places, the
person can be called open-minded.
• Consciousness: Individuals, who listen to their
conscience, are self-disciplined, do their work on
time, take care of others before themselves and
care about others’ feelings.
• Extraversion: Extroverts are individuals, who
love interacting with people around and are,
generally, talkative. A person, who can easily
make friends and make any gathering lively, is
confident and an extrovert.

Self-management SkillS 33

2020-21
noteS

Figure 2.4: The ‘Big Five Factors’


or Five Factor Model

• Agreeableness: Individuals having such a trait are,


generally, kind, sympathetic, cooperative, warm
and considerate. They accommodate themselves
in any situation. For example, people who help
and take care of others are, generally, agreeable.
• Neuroticism: Neuroticism is a trait, wherein,
individuals show tendency towards anxiety,
self-doubt, depression, shyness and other similar
negative feelings. People, who have difficulty in
meeting others and worry too much about things,
show signs of neuroticism.

Common personality disorders


Personality disorders involve long-term patterns
of thoughts and behaviour that are unhealthy and
rigid. A personality disorder is a way of thinking,
feeling and behaving that deviates from worldly
expectations and causes distress, which lasts
over time.
Cluster A: Suspicious
People falling under this cluster always mistrust others
and are suspicious, even when there is no need to do
so. For example, Varsha is a homemaker. A maid has
been working at her house for two years. Despite having
CCTV cameras installed at home, Varsha is always
suspicious about the maid. She follows her all the time
and keeps a tab on her movements. This causes stress
between Varsha and her maid.

34 Employability SkillS – ClaSS Xii

2020-21
• Paranoid personality disorder: Paranoid noteS
personality disorder is characterised by distrust
for others, including friends, family members
and partners. People with such a disorder mostly
hold grudges against others.
• Schizoid personality disorder: The term
‘schizoid’ refers to the natural tendency to direct
attention toward one’s inner life away from the
external world. A person with schizoid personality
disorder is detached and aloof, and prone to
introspection and fantasy. The person shows
little interest in forming personal relationships
and seems to be emotionally cold.
• Schizotypal personality disorder: People with
this type of personality disorder believe that they
can influence other people or events with their
thoughts. They often misinterpret behaviours.
This causes them to have inappropriate emotional
responses. They may consistently avoid having
intimate relationships.

Cluster B: Emotional and impulsive


This personality disorder is characterised by unstable
moods and behaviours, which lead to unhealthy and
unstable relationships, emotional instability and feeling
of worthlessness. For example, Sunny is a student
in a high school. Whenever he gets low marks, he is
depressed and fights with his friends. He, also, does not
try to learn from mistakes. His parents and teachers have
tried talking with him but he feels angry, worthless and
shouts at them.
• Antisocial personality disorder: People with
antisocial personality disorder disregard social
rules and obligations. They are irritating and
aggressive, and act impulsively. They tend to lack
guilt and fail to learn from experience. They may
lie, steal or abuse, and may also get addicted to
alcohol or drugs.
• Borderline personality disorder: People with
borderline personality disorder essentially lack a
sense of self-worth, and thus, experience feelings
of emptiness and fears of abandonment. There is a

Self-management SkillS 35

2020-21
noteS pattern of emotional instability, violent outbursts
and impulsive behaviour. Suicidal threats and
acts of self harm are common in people with such
a personality disorder. They may have difficulty
in dealing with stressful events.
• Histrionic personality disorder: People with
histrionic personality disorder frequently try to
gain more attention by being overly dramatic. They
are extremely sensitive to criticism or disapproval,
and can be easily influenced by others.
• Narcissistic personality disorder: People with
narcissistic personality disorder believe that
they are more important than others. They lack
empathy for other people and tend to exaggerate
their own achievements.

Cluster C: Anxious
This personality disorder is characterised by feelings of
worry, anxiety or fear, which have the potential to affect
one’s daily routine. For example, Shikha is an elderly
woman. She stays with her family. She has a habit of
washing her hands at least 20 times a day. Even after
washing her hands, she feels they are not clean, and
continues rubbing or washing them. She neither talks
to her grandchildren, nor does she participate in any
family activity.
• Avoidant personality disorder: People with this
type of disorder are socially inept, unappealing or
inferior, and constantly fear being embarrassed,
criticised or rejected. They avoid meeting others
and often experience feelings of inadequacy,
inferiority or unattractiveness.
• Dependent personality disorder: People with
such a disorder are characterised by lack
of self-confidence and an extra need to be
looked after. They need a lot of help in making
everyday decisions and surrender important
life decisions to the care of others. They are
heavily dependent on other people for their
emotional and physical needs, and thus,
usually, avoid being alone.

36 Employability SkillS – ClaSS Xii

2020-21
• Obsessive-compulsive personality disorder: noteS
People with such a disorder strongly stick to
rules and regulations. They can be characterised
by a general pattern of excessive concern with
orderliness, perfectionism and attention to details.
They feel extremely uncomfortable when unable to
achieve perfection. They may even neglect personal
relationships to focus on making a project perfect.

Steps to overcome personality disorders


• Talk to someone. Most often, it helps
to share your feelings.
• Look after your physical health. A healthy body
can help you maintain a healthy mind.
• Build confidence in your ability to handle
difficult situations.
• Engage in hobbies, such as music, dance and
painting. These have a therapeutic effect.
• Stay positive by choosing words like ‘challenges’
instead of ‘problems’.

Practical Exercise
The teacher will facilitate these activities by showing you the
e-learning module for this lesson via http://www.psscive.ac.in/
Employability_Skills.html. The module will include videos and
e-content for the above topics, as well as, detailed instructions
for the activity given below.
Activity 1
Group discussion
Self-awareness
Material required
Pen or pencil, notepad, chart paper, etc.
Procedure
• Form groups of three.
• Choose any one of the following situations and write down
the personality disorders associated with these.
— Kapil studies in a school. He disregards the rules set
by the school, is irritable and does not talk much with
either friends or family.
— Jaya has been feeling fearful and empty for the last
few days. She even tried to harm herself. What kind of
personality disorder is this? How can you help her?

Self-management SkillS 37

2020-21
noteS Check Your Progress
A. Multiple choice questions
Read the questions carefully and put a tick mark against the
correct option.
1. Which of the following is not a parameter to describe an
individual’s personality?
(a) Self-confidence
(b) Openness
(c) Neuroticism
(d) Agreeableness
2. Which of the following is characterised by an extreme
feeling of self importance?
(a) Narcissistic personality disorder
(b) Borderline personality disorder
(c) Dependent personality disorder
(d) None of the above
3. Ravi has feelings of emptiness, abandonment and
suicide. What type of personality disorder is this?
(a) Borderline
(b) Dependent
(c) Avoidant
(d) Obsessive
4. Mona is helping her sister to overcome a personality
disorder. What should she do?
(a) Talk to her sister
(b) Engage her in hobbies
(c) Help her build confidence
(d) All of the above

What have you learnt?


After completing this Session, you will be able to
• explain the meaning of personality.
• describe basic personality traits.
• describe common personality disorders.

38 Employability SkillS – ClaSS Xii

2020-21
Unit 3 Information
and Communication
Technology Skills

IntroductIon
Information and Communication Technology, called
ICT in short, has become an integral part of our life.
One must develop the ability to use digital technology
and communication tools to access, manage, integrate,
evaluate, create and communicate. In this Unit, you
will learn about how to use spreadsheets and make
presentations using a software.

SeSSIon 1: GettInG Started wIth SpreadSheet


How do people generally maintain their expenses? They
write down all expenses, such as school fee of their
children; grocery, gas and electricity bills; money spent
on festivals and clothes, etc., in a diary. Then, they note
down how much was spent on each item. Finally, the
total is calculated to find out how much they have spent
in a month. But nowadays, people who know how to use
a computer can use software to maintain an account of
their expenses.
Let us now learn about spreadsheets, which are used
for doing calculations on a computer.
A spreadsheet is an electronic document, which has
rows and columns. It is used to store data in a systematic
way and do calculations. For example, a grocery shop

2020-21
has many items. The shopkeeper keeps a track of the
total quantity of each item, quantity sold, cost and
selling price of each item, etc. All these details can be
maintained using a spreadsheet as shown in Table 3.1.
It will also help the shopkeeper do difficult calculations
easily, such as finding out profit or loss.
Table 3.1: Goods in a grocery store
Item Total Quantity Quantity Cost Selling
quantity sold (kg) left (kg) `/kg price
(kg) `/kg
Wheat atta 250 115 135 28 31
Rice 160 57 103 46 50
Arhar daal 70 45 25 60 68
Sugar 200 145 55 40 45

Having understood what spreadsheets are, let us


now understand the types of spreadsheet.

Types of spreadsheet
There are many types of spreadsheet available that have
been created by different companies. Some of the most
popular ones are given in Figure 3.1.
Microsoft Excel LibreOffice Calc Google Sheets

Figure 3.1: Popular spreadsheet software

In this Session, we will be learning how to use


LibreOffice Calc. Most functions in different spreadsheets
are same. If you know how to use one, you can easily
use any other spreadsheet.

Steps to start LibreOffice Calc


1. The first thing you need to ensure is that
LibreOffice must be installed on your computer.

40 Employability SkillS – ClaSS Xii

2020-21
2. Type LibreOffice Calc in the search bar
of Windows.
3. Select LibreOffice Calc from the search results as
shown in Figure 3.2. LibreOffice Calc will open a
blank sheet as shown in Figure 3.3.
4. You can start typing and entering data as soon as
you open the spreadsheet. However, to start using
the spreadsheet, first you need to understand
the components of a spreadsheet.

Components of a spreadsheet
Figure 3.2: Select LibreOffice
In the spreadsheet, you can see a worksheet with cells Calc from the search results
placed in rows and columns. Now, let us learn what
these are.
1. A row is an arrangement of cells in a horizontal
(sleeping) manner. As shown in Figure 3.4, all
marks for maths are in row number 3.
2. A column is an arrangement of cells in a vertical
(standing) manner. As shown in Figure 3.4,
Rajvir’s marks are in column B.

Figure 3.3: LibreOffice Calc blank sheet Figure 3.4: Rows and columns in a spreadsheet

3. A cell is a rectangle shaped box, where the row and


column meet. You can enter text, numbers, date,
formula, etc., in a cell. The cell that is selected
appears highlighted. In Figure 3.4, the selected
cell is B3 — the cell in column B on row 3 — and
it contains Rajvir’s marks for maths.

InformatIon and CommunICatIon teChnology SkIllS 41

2020-21
Whatever you type in, a cell
appears in the area called formula
bar as shown in Figure 3.5.
You also enter or edit data
and formula directly into the
Formula Bar.
4. The name box shows the
location of the selected cell.
The location of the cell is a
combination of column and
row. For example, A1, where
Figure 3.5: Formula bar in a spreadsheet A is the column name and 1
is the row number.
5. A worksheet is a collection of cells in the form
of a grid (a network of lines that intersect each
other, making rectangles). When you open a
spreadsheet for the first time, you see a blank
worksheet with the name ‘Sheet1’.
6. A workbook is a spreadsheet that has one or
more worksheets.

Practical Exercise
Run e-learning lesson at http://www.psscive.ac.in/
Employability_Skills.html. This will include videos and
e-content for the above topics. Based upon the e-learning,
do the following activity.
Initial thinking activity
How do you think a shopkeeper maintains a record of
earnings and expenses?
Practical group exercise
Run the e-learning lesson to get details on how to
run the activity.
Activity 1
Group practice
Working with LibreOffice Calc
Material required
Pen or pencil, notebook and computer with LibreOffice Calc, etc.
Procedure
• Divide the class into groups, depending on the number
of computers available. Choose a group leader, who will
direct this activity.
• The leader will start LibreOffice Calc on the computer as
per the instructions given in the Session.

42 Employability SkillS – ClaSS Xii

2020-21
• Each member of the group identifies one component of the noteS
spreadsheet. The other members should give feedback as
to what is correct and what is not. The rest of the group
members can also make notes of the components identified
and make sure that none is left out.
• Write down the answers to the questions given below
in your notebook. Then, run the e-lesson to see
these questions.

Check Your Progress


A. Multiple choice questions
1. A _____________ is an electronic document used to store
data in a systematic way and perform calculations just
like an expense sheet.
(a) spreadsheet
(b) worksheet
(c) workbook
(d) name box
2. Which of the following functions can be performed with
the help of spreadsheets?
(1) Maintaining records
(2) Creating videos
(3) Analysing data
(4) Performing financial calculations
(5) Writing letters
(a) 1, 2, 3, 4, 5
(b) 1, 3, 4
(c) 1, 3, 5
(d) 3, 4, 5
3. Match the columns, and then, choose the correct answer.

1. Grid of horizontal rows and A. Row


vertical columns
2. Horizontal arrangement of cells B. Workbook
numbered 1, 2, 3, 4
3. Where rows and columns meet C. Columns
or intersect
4. Which contains one or more D. Cell
worksheets
5. Vertical arrangement of cells E. Worksheet
named A, B, C, D

(a) 1-E, 2-A, 3-B, 4-D, 5-C


(b) 1-E, 2-B, 3-C, 4-D, 5-A
(c) 1-A, 2-B, 3-C, 4-D, 5-E
(d) 1-E, 2-A, 3-D, 4-B, 5-C
4. A _______ is an arrangement of cells in a horizontal manner.
(a) column (b) row
(b) cell (c) worksheet

InformatIon and CommunICatIon teChnology SkIllS 43

2020-21
What have you learnt?
After completing this Session, you will be able to
• explain the importance and usage of spreadsheet.
• list different spreadsheet applications.
• open LibreOffice Calc and create a spreadsheet.
• identify components (parts) of a spreadsheet.

SeSSIon 2: performInG BaSIc


operatIonS In a SpreadSheet
A spreadsheet can be used to perform various functions.
Let us see how to enter, edit, delete data and use data
functions effectively.
Steps to enter data
The steps to enter data in a particular cell in a
spreadsheet are given below.
1. Click on the cell where you want to enter data
as shown in Figure 1. For example, we click
cell A1.

Figure 1: Click on a cell

2. Type text or number. As you type, you can see


the data in the Formula Bar as well. Press Enter
when you complete typing.

Figure 2: Type text or number

3. The cursor is set on the next cell, in this case A2.


You can continue entering other data.

4. Notice that data in the cell will automatically


(by default) be left aligned (near the left edge of
the cell) as you have entered text as shown in
Figure 3. If you enter numbers, they are right
aligned in the cell. Remember that text is aligned
to the left of the cell, while number is aligned to
Figure 3: Text alignment
the right.

44 Employability SkillS – ClaSS Xii

2020-21
5. You can enter a formula in a cell by starting
with ‘=’ equal-to symbol as shown in Figure 4.
This will do the calculations as given and display
the results.

Figure 4: Use ‘=’ for formula

Type of data
There are three main type of data — text, numbers
and formula. Nowadays, it is also possible to enter
pictures, audio, video and shapes in a spreadsheet.
Let us see what they are used for. Raghu owns a
shop. He keeps a record of all items, such as wheat,
rice, daal, sugar, etc. He enters the name of the
items, date of purchase, quantity purchased, cost
price, selling price, etc. Using a spreadsheet, he can
use text to enter names, numbers to enter quantity
and date to show when an item was purchased.
Editing data in a cell
If Raghu wants to name the item ‘Basmati rice’ instead
of ‘rice’, he can edit (correct) it in the spreadsheet.
There are various ways in which one can edit a cell
as shown in Figure 3.6.
Method 1
1. Double click on the cell you want to edit.
Then, type additional text in the cell or in the Figure 3.6: Editing text in a cell
Formula Bar.
2. Press Enter.
Method 2
1. Click on the cell you want to edit.
2. Correct the text in the Formula Bar.
3. Press Enter.
Method 3
(If you want to completely change the text in the cell,
then do the following.)
1. Click on the cell.
2. Type the new text.
3. Press Enter.
InformatIon and CommunICatIon teChnology SkIllS 45

2020-21
Deleting data in a cell
You can delete the value stored in a
particular cell as shown in Figure 3.7.
The steps to delete data in a cell are
as follows.
1. Click on the cell.
Figure 3.7: Deleting value in a cell 2. Press Delete key on the keyboard.
This deletes the text entry of that
cell making it blank.
Selecting multiple cells
Now, if Raghu wants to delete the entire row related to
‘basmati rice’, he can select the entire row, and then,
press ‘Delete’. After selecting multiple cells, a function
will be performed on the cells that are selected. When
a single cell is selected it is called active cell. When a
number of cells is selected, it is called cell range. There
are several ways in which multiple cells can be selected
as shown in Table 3.2.

Table 3.2: Selecting multiple cells

To select an entire row, click the To select a full column, click the
row heading. column heading.

To select an entire worksheet, click the grey To select a range of cells, click on the
rectangle on the upper left corner of starting cell, then hold down the mouse
the worksheet. button and drag it till you have selected
all the cells you want. Release the
mouse button.

46 Employability SkillS – ClaSS Xii

2020-21
To select two or more rows that are not next to each other, select one row and hold down the
Control key, and then, select the next row as shown in the figure given below.

Saving the spreadsheet in various formats


After entering data, you can save the spreadsheet in the
same way as a Notepad or any other word file. Click File,
and then, Save as shown in Figure 3.8. This will open a
Save As dialog box. Type the file name and click Save.
The default Save as type is ODF Spreadsheet (.ods)
but you can save the spreadsheet in other types, such
as Microsoft Excel 2003 (.xls) as shown in Figure 3.9.

Figure 3.8: Saving the spreadsheet Figure 3.9: Saving in other formats

Closing the spreadsheet


Once you have saved the data, you can
close the spreadsheet by clicking File, and
then, Close as shown in Figure 3.10.
Figure 3.10: Closing the spreadsheet

InformatIon and CommunICatIon teChnology SkIllS 47

2020-21
Opening a spreadsheet
Click File, and then, select Open. This will show a dialog
box with a list of existing files. Select the one you want
to open and click Open as shown in Figure 3.11.

Figure 3.11: Opening a spreadsheet

Printing the spreadsheet


To print a spreadsheet, you can click File, and
then, select Print from the drop-down or press
Ctrl+P on the keyboard as shown in
Figure 3.12.
A Print dialog box appears. Select the
printer, range of pages and number of copies
to be printed, and click OK as shown in
Figure 3.13.

Figure 3.12: Printing the spreadsheet Figure 3.13: Print dialog box

48 Employability SkillS – ClaSS Xii

2020-21
noteS
Practical Exercise
Run e-learning lesson at http://www.psscive.ac.in/Employability
_Skills.html. This will include videos and e-content for the above
topics. Based upon the e-learning, do the following activity.
Initial thinking activity
How do you think a shopkeeper will delete an entry in his record
book? How do you think a teacher deletes the name of a student,
who has left the school, from the register?
Practical group exercise
Run the e-learning lesson to get details on how
to run the activity.
Activity 1

Group practice
Working with data in LibreOffice Calc
Material required
Pen or paper, computer with LibreOffice Calc installed, etc.
Procedure
• Divide the class into groups, depending on the number of
computers available. Select a group leader.
• The leader opens a spreadsheet. Each member enters one’s
name, roll number and date of birth in the spreadsheet.
• Other members watch and give feedback on what is done
correctly and what could be done better.
• Your spreadsheet should look like the table given below.

Name Roll No. Date of Birth


Sushil Kumar 123 15/10/01
Meera Rao 124 26/12/03

Check Your Progress


A. Multiple choice questions
1. The correct order of steps for entering data in a
spreadsheet is:
(a) type the data, click the cell and press Enter.
(b) click the cell, type the data and press Enter.
(c) press Enter, click the cell and type the data.
(d) click the cell, press Enter and type the data.
2. What will you do to select an entire worksheet in
a spreadsheet?
(a) Click the File tab and select properties from the list
(b) Click the grey row heading
(c) Click the grey rectangle in the upper left corner
of the spreadsheet
(d) Click the grey column heading

InformatIon and CommunICatIon teChnology SkIllS 49

2020-21
What have you learnt?
After completing this Session, you will be able to:
• identify type of data.
• open a spreadsheet.
• enter, edit and delete data.
• select multiple cells.
• save and close a spreadsheet.
• print a spreadsheet.

SeSSIon 3: workInG wIth data


and formattInG text
Data stored in a spreadsheet can be used in calculations,
graphical representation and display of information. Let
us learn more about working with data.

Using spreadsheet for addition


Ms Sharma is a teacher and has just started using a
computer spreadsheet instead of her manual marks
register. She has entered the marks of her students
in various subjects as shown in Figure 3.14. Now, she
wants to find out the total marks for each student. What
should she do?
To find out the total marks for each
student, she needs to add the marks
in each subject. The symbol (operator)
used for addition in a spreadsheet is
‘+’ (plus). There are various ways to
do addition in a spreadsheet. Let us
Figure 3.14: Students’ marks explore them.

Adding values directly


To do any calculation in a spreadsheet,
you need to use ‘=’ (equal-to) symbol,
which tells the spreadsheet that a
formula has been entered. Only then
the spreadsheet will perform the
calculation and display the result.
Ms Sharma can add values directly
Figure 3.15(a): Entering formula for each student, i.e., add the numbers
directly, such as ‘=73+89+78’ as shown
in Figure 3.15(a).

50 Employability SkillS – ClaSS Xii

2020-21
When you type this in a cell and
press Enter, the result, i.e., 240 will be
displayed. Notice that the formula is
displayed in the Formula Bar as shown
in Figure 3.15(b).
Adding using cell address Figure 3.15(b): Formula displayed in Formula Bar

Ms Sharma realised that she had


entered the wrong marks for English.
Now, she has to re-enter the total
formula. That is a lot of work since
there are 40 children in her class.
Spreadsheet gives you a better way to
calculate the total. Instead of using
direct numbers in the formula, you Figure 3.16(a): Formula using cell address
can use cell addresses as shown in
Figure 3.16(a).
For example instead of entering
‘=73+89+78’, she can enter the cell
addresses ‘=B2+C2+D2’. This will also
give the same result. The advantage
here is that even if there is a change in
the marks, there is no need to type the
numbers again in the Total field as
Figure 3.16(b): Total of three cells
shown in Figure 3.16(b).
All Ms Sharma needs to do is
change the English marks. The total
will automatically be calculated again.
No change has to be made to
the formula.
Notice in Figure 3.16(c), the
English score for Rohit has changed
from 73 to 66. The total changes
to 233 automatically, even though
there is no change in the formula
i.e., ‘=B2+C2+D2’ as shown in
Figure 3.16(c). Figure 3.16(c): Total remains the same

Using mouse to select values in a formula


Now, to write the formula, Ms Sharma has to find out
the cell address of each cell with marks and type it.
This requires some effort. Spreadsheet makes the task

InformatIon and CommunICatIon teChnology SkIllS 51

2020-21
easier for Ms Sharma. Using a mouse,
she can simply select the cell to be used
in the formula instead of typing the cell
addresses as shown in Figure 3.17. The
steps are as follows.
1. Type ‘=’ in the cell where you
Figure 3.17: Using a mouse to select a cell want to calculate the total.
2. Click the cell, which has English marks for
Rohit. B2 will appear in the formula.
3. Type ‘+’.
4. Click the cell, which has maths marks for Rohit.
C2 will appear in the formula.
5. Type ‘+’.
6. Click the cell (D2), which has science marks
for Rohit.
7. Press Enter.
This will enter the same formula as before without
Ms Sharma having to type the cell addresses for marks
scored in each subject. This method is much easier,
especially, when there may be many subjects.

Using Sum() function


Spreadsheet also gives you some
functions that make it easier to do
calculations. To add numbers, we have
the Sum() function. This helps in adding
Figure 3.18(a): Using SUM() function the numbers in separate cells or in a cell
range. In the example given in Figure
3.18(a) and (b), marks for Rohit are in
one row, one after the other. As shown
in Figure 3.18(a) and 3.18(b), the steps
to use the SUM() function are as follows.
1. Type ‘=Sum(' in E2 where you
want the total.
2. Now, click on English marks, i.e.,
B2, hold the left mouse button
and drag till science marks, i.e.,
D2. This will select the marks for
all three subjects.
Figure 3.18(b): Steps to use SUM() Function 3. Type ‘)’ and press Enter.

52 Employability SkillS – ClaSS Xii

2020-21
This displays the results in cell number E2 and the
formula in the Formula Bar.
Copying and moving formula
Now, Ms Sharma has used the Sum()
function to calculate the total for
Rohit. Does she need to do the same
steps 40 times for all 40 students? No!
Spreadsheets provide a way to copy the
formula from one cell to another. The Figure 3.19: Copy formula
values are automatically adjusted in the
new cells. The steps to copy a formula are as follows.
1. Click on the cell with the formula.
2. Right-click and select Copy as shown in
Figure 3.19 or press Ctrl+c on the keyboard. If
you wish to move the formula to a new cell, i.e.,
delete it from the existing cell, select Cut or press
Ctrl+x on the keyboard.
3. Click on the first cell, where you have to copy
the formula.
4. Keeping the left mouse button down, drag till you
reach the last cell, where you want the formula.
Release the left mouse button.
5. Right-click and select Paste as
shown in Figure 3.20 or press
Ctrl+v on the keyboard.
6. The formula will be copied to all
selected cells. It will calculate the
total for each student. Figure 3.20: Paste formula
Ms Sharma is happy now. Spreadsheets have made
her work simple. Now, all she has to do is enter the
marks for all her students for each subject and the rest
will be done by the spreadsheet. And, if some of the
marks change, she does not have to do the calculations
all over again.

Need to format cells and content


Geeta makes very neat notes in her copy. She underlines
the headings and uses a black pen to write the
sub-topics. Sometimes, she writes important words in
capital letters to make them stand out. She even has a
neat rough work column on the side. Everybody wants

InformatIon and CommunICatIon teChnology SkIllS 53

2020-21
her notes as they are easy to read and understand, and
the important points are clearly highlighted.
Electronic spreadsheets have many options to make
your content look neat and and easy to read. This is
called ‘formatting’. There are many ways in which you
can format the content in a spreadsheet. Let us work
with some of them.

Change text style and font size


In case you want to give a different style
or a bigger size to the heading, you can
change the text style using the Font
drop-down as shown in Figure 3.21.
Figure 3.21: Change font You can choose the style you like
from the drop-down. The text in all
selected cells will change.
Similarly, you can change the size
of the text from from the font-size
drop-down.
As you can see in Figure 3.22, the font
Figure 3.22: New font and size and size of the heading have changed.

Align (arrange) text in a cell


Sometimes, we see that text is placed in the centre of
the cell. How does this happen? In a spreadsheet, you
can position the text in a cell to the left, right or center.
This is the alignment feature of spreadsheet.
You can use the given icons on the
Tool Bar to align the text.
In Figure 3.23, the text in cell A1,
B1 and C1 has been aligned to the
centre. You can see that only the
selected cells have been aligned to
Figure 3.23: Align text the center.

Highlight text
We make headings of our documents and tables
bigger and bolder than the rest of the text to make
them stand out. We also underline important words or
italicise them so that they, too, stand out. As shown in
Table 3.3, there are many ways in which we can highlight
the text in a spreadsheet.
54 Employability SkillS – ClaSS Xii

2020-21
Table 3.3: Highlighting text

Action Shortcut keys Tool Bar icon

To make text bold Ctrl+b

To underline text Ctrl+u

To make text italic Ctrl+i


or slanting

Practical Exercise
Run the e-learning lesson at http://www.psscive.ac.in/
Employability _Skills.html. This will include videos and e-content
for the above topics. Based upon the e-learning, do the
following activities.
Initial thinking activity
Why do you think we need to format content in a spreadsheet?
Practical group exercise
Run the e-learning lesson to get details on how to
run the activity.
Activity 1
Group practice
Formatting spreadsheets in LibreOffice Calc
Material required
Pen, computer with LibreOffice Calc installed, etc.

InformatIon and CommunICatIon teChnology SkIllS 55

2020-21
noteS Procedure
• Divide the class into groups, depending on the number of
computers. Choose a leader, who will direct the activity.
• The leader creates a table as shown in Figure 1. One
member center aligns the Roll No. and Name columns.
• Another member makes all column headings bold. Now,
some other member underlines the column headings.
Another member can increase the size of column B to
make the full name visible.

Figure 1: Activity 1 sample

Activity 2

Group practice
Basic calculations in LibreOffice Calc
Material required
Pen, paper, computer with LibreOffice Calc installed, etc.
Procedure
• Divide the class into groups, depending on the number of
computers available. Each group will select a leader.
• The leader opens a spreadsheet. As shown in Figure 1, each
member enters one’s roll number, name, marks obtained
in English, Hindi, maths and science, and calculates the
total marks in column G.
• Each member can use a different method to calculate the
total. Other members watch and give feedback on what
was done correctly and what could have been done better.
Your spreadsheet should look like the table given below.

Figure 1: Activity 2 sample

56 Employability SkillS – ClaSS Xii

2020-21
Check Your Progress noteS
A. Multiple choice questions
1. What is the default alignment of numbers in a cell?
(a) Left aligned
(b) Right aligned
(c) Center aligned
(d) Randomly aligned
2. “By default, the text in a cell is left aligned.”
State whether this is true or false.
(a) True
(b) False
3. What is the shortcut key to underline text in
a spreadsheet?
(a) Ctrl+b
(b) Ctrl+i
(c) Ctrl+l
(d) Ctrl+u
4. Which of the following features is used to
perform addition in spreadsheets?
(a) Format option
(b) Charts
(c) Graphs
(d) Formula
5. Which of the following signs define a formula?
(a) +
(b) /
(c) =
(d) +

What have you learnt?


After completing this Session, you will be able to:
• add values directly in a spreadsheet.
• add values using formulas.
• add values using Sum() function.
• align (arrange) text in a cell.
• fit text into a cell.
• highlight the text.

SeSSIon 4: advanced featureS


In SpreadSheet
Let us take an example of 500 students in a school.
Now, if the teacher wants to find the marks of a particular
student, for example ‘Seema’, she will have to look
through the entire list. It is a difficult process and may

InformatIon and CommunICatIon teChnology SkIllS 57

2020-21
take a long time as the teacher has to go through all 500
names. Now, if she arranges the names alphabetically,
i.e., putting names starting with ‘A’ first, then names
with ‘B’, and so on, finding a name will be easier. One
knows that the name ‘Seema’, starting with the letter
‘S’, will come in the middle. This sorting or arrangement
of words in order can help one find a particular word or
name easily.
Sorting data
Let us take another example.
Ms Sharma has all her students’
subject marks and their totals in a
spreadsheet as shown in Figure 3.24.
If she wants to find out three students
with the highest marks, she will have
to search the entire list. This is even
more difficult if there are 100 or more,
students, for example, in the entire
Figure 3.24: Unsorted data batch or school.
To make it easy, she can sort the data on the total
marks so that she knows the rank of the students in the
class. The steps to sort data are as follows.
1. Select all rows and columns that have to be sorted
as shown in Figure 3.25.
2. Click on Data, and then, select Sort as shown in
Figure 3.26.

Figure 3.25: Select data to be sorted Figure 3.26: Click on Data, and then, select Sort

58 Employability SkillS – ClaSS Xii

2020-21
3. This will give a Sort dialog box as
shown in Figure 3.27. Click on Sort
Key 1 and select total from the
drop-down. By default the order is
Ascending, which means from the
lowest to the highest. We will change
it to Descending. This will sort the
data in the total field.
Figure 3.27: Sort dialog box
4. Click on OK.
5. As shown in Figure 3.28, the data will
get rearranged in the entire list and the
name of the student with the highest
total marks will appear at the top,
and then, the student with the next
highest marks, and so on. Therefore,
the names of top three students will
appear in the beginning of the list
Figure 3.28: Sorted data
and the name of the student with the
lowest total marks will appear last.

Filtering data
Figure 3.29 has students from different
sections and Ms Sharma wants to see the
marks of students only from Class XII-A,
what will she do?
To do this, Ms Sharma can use another
feature of spreadsheet — ‘Filters’.
The steps to apply filter to a table are
as follows.
Figure 3.29: Unfiltered data
1. Click on the AutoFilter icon on
the Tool Bar.
2. This will put filters at the top of each
column as shown in Figure 3.30.
3. Click on the filter for ‘class’ column.
4. The drop-down will show a list of all
the values in that column, for example,
Class XII-A and XII-B.
5. By default, all values are checked or
selected. Figure 3.30: Filters added

InformatIon and CommunICatIon teChnology SkIllS 59

2020-21
6. If you want to see the data of students
only from Class XII-A, uncheck Class XII-B
as shown in Figure 3.31.
7. Click on OK.
8. Data of students only from Class XII-A will
be dispalyed as shown in Figure 3.32.

Figure 3.32: Filtered data


Figure 3.31: Selecting Class XII-A

Protecting spreadsheet with password


If Ms Sharma is sharing the computer with other
teachers and staff, she may want to protect her
data. She may not want anyone
else to open and make changes
to her work. She can do this
by protecting her spreadsheet
using a password. The steps
to protect a spreadsheet are
as follows.
1. Click on Tools and select
Protect Spreadsheet as
Figure 3.33: Protecting spreadsheet
shown in Figure 3.33.
2. A Protect Document dialog box
appears as shown in Figure 3.34.
3. Type in a password.
4. Type the same password in the
Confirm textbox.
5. Click on OK.
6. Now, when you close the file and open
it again, it will ask for the password.
Figure 3.34: Protect Document dialog box
Remember this password so that you can
open the file.

60 Employability SkillS – ClaSS Xii

2020-21
Another way of protecting a spreadsheet is
as follows.
1. Click on File, and then, Save As.
2. A Save As dialog box will appear as shown in
Figure 3.35.

Figure 3.35: Save As dialog box


3. Type the file name and click Save with password.
4. Click on Save.
5. A Set Password dialog box appears as shown in
Figure 3.36.

Figure 3.36: Set password dialog box

6. Type a password in the first


textbox, and then, type the
same password in the
Confirm textbox.
7. Click on OK.
8. Now, when you try to open
the file, it will ask for a
password as shown in
Figure 3.37.
9. Type the password and Figure 3.37: Enter password to open a file
click on OK.

InformatIon and CommunICatIon teChnology SkIllS 61

2020-21
noteS
Practical Exercise
Run the e-learning lesson at http://www.psscive.ac.in/
Employability _Skills.html. This will include videos and
e-content for the above topics. Based on the e-learning, do the
following activity.
Initial thinking activity
Why do you think we need to sort content in a spreadsheet?
Practical group exercise
Run the e-learning lesson to get details on how to
run the activity.
Activity 1

Group practice
Sorting data in LibreOffice Calc
Material required
Pen or pencil, computer with LibreOffice Calc, etc.
Procedure
• Divide the class into groups, depending on the number of
computers. Choose a leader, who will direct the activity.
• Open a new workbook. Enter your monthly expenses as
shown in Figure 1. Sort the data in alphabetical order.
Filter data to show expenses above `100.

Figure 1: Activity 1 sample

Check Your Progress


A. Multiple choice questions
1. Which menu option will you use to sort data?
(a) Tools
(b) Data
(c) Format
(d) View
2. Mr Gupta has a spreadsheet with a list of 500 items in
his shop. A customer comes and asks for a particular
item. How should he arrange the data so that he can
find that item fast? What would Mr Gupta do? He will:
(a) apply filter.
(b) sort the data.
(c) use password.
(d) format data.

62 Employability SkillS – ClaSS Xii

2020-21
3. Mr Verma shares the computer in his office with other noteS
colleagues. He wants to make sure no one sees the
financial data he saves on the computer. What should
he do?
(a) Lock the computer in a cupboard
(b) Change the password of his computer so
that no one can use it
(c) Apply password to the financial data sheet
(d) Leave it as it is and hope that no one will open it

What have you learnt?


After completing this Session, you will be able to:
• sort data.
• add filters.
• protect spreadsheet with a password.

SeSSIon 5: preSentatIon Software


Ms Sharma wants to explain water cycle to her
students. Mr Chaudhary wants to explain the
working of a product to his clients and Dr Suman
wants to give a lecture on her new research. All these
people need to make an impact on their audience.
They can use handmade charts or printed slides or
make a digital presentation using a computer and
presentation software.
Presentation software is being widely used to make
digital presentations. It has many advantages, which
are as follows.
1. They are interesting as they have features like
images, videos, animation and music.
2. Making changes in digital presentations is easy.
3. A digital presentation can be shown to a much
larger audience by projecting on a screen.
4. The presentation can be printed and distributed
to the audience.
Presentation software available
There are a number of presentation software available,
such as
1. LibreOffice Impress
2. Microsoft Office – PowerPoint

InformatIon and CommunICatIon teChnology SkIllS 63

2020-21
3. OpenOffice Impress
4. Google Slides
5. Apple Keynote
Most features in all these software are same. We
will be discussing and using LibreOffice Impress to
create presentations in this Session as it is a free and
open software.

Steps to start LibreOffice Impress


1. First, you must ensure that LibreOffice Impress
is installed on your computer.
2. Type ‘LibreOffice Impress’ in the search bar
of Windows.
3. Select LibreOffice Impress from the search
results as shown in Figure 3.38(a).
4. LibreOffice Impress will open. Cancel the
‘Select a template’ dialog box.
5. A blank presentation will open [Figure 3.38(b)].

Figure 3.38(a): Select LibreOffice Figure 3.38(b): Open LibreOffice Impress


Impress from the search results

Adding text to a presentation


By default, there are two textboxes in the first slide.
The top one is for the title and the lower (bigger) one for
other details. We can click on the title box and type in
a title. Similarly, we can click on the lower box and type
in some details as given in Figure 3.39.

64 Employability SkillS – ClaSS Xii

2020-21
noteS

There are three main steps in water cycle.

Figure 3.39: Adding text to a slide


In this way, we can start using LibreOffice Impress
to make a presentation.

Practical Exercise
Run the e-learning lesson at http://www.psscive.ac.in/
Employability_Skills.html. This will include videos and
e-content for the above topics. Based upon the e-learning,
do the following activity.
Initial thinking activity
How do you make your projects?
Practical group exercise
Run the e-learning lesson to get details on how to run
the activity.
Activity 1

Group practice
Creating presentation in LibreOffice Impress
Material required
Pen, notebook, computer with LibreOffice Impress, etc.
Procedure
• Divide the class into groups, depending on the number
of computers.
• Choose a leader, who will direct the activity.
• Start LibreOffice Impress and create a new presentation
with the title ‘Advantages of using the Internet’.

Check Your Progress


A. Multiple choice questions
1. You have a summer vacation project on how to make
biogas. You have done a lot of research, clicked pictures
of biogas plants and taken videos of people, who use
biogas. Now, you have to make a presentation before
the class. What would you use?
(a) Chart paper
(b) Word document
(c) Presentation software
(d) Spreadsheet

InformatIon and CommunICatIon teChnology SkIllS 65

2020-21
2. What do you need to install on your computer to be able
to run Impress?
(a) Google
(b) Microsoft Office
(c) LibreOffice
(d) Apple iOS
3. How many textboxes does the first slide of LibreOffice
Impress have by default?
(a) 1
(b) 2
(c) 3
(d) 4

What have you learnt?


After completing this Session, you will be able to:
• describe the advantages of digital presentation.
• list various presentation software.
• list features of a presentation.
• create a new presentation.

SeSSIon 6: openInG, cloSInG, SavInG


and prIntInG a preSentatIon
In this Session, we will learn about opening, closing,
saving and printing a presentation.

Steps to save a presentation


A digital presentation can be saved as a file on the
computer. This can be opened later, viewed, edited,
shared with friends and colleagues, and printed. It
is important to save the presentation several times
while working so that you do not lose data in case the
computer shuts down or there is a power cut.
The steps to save a presentation for
the first time are as follows.
1. Click on File.
2. Select Save As or Save from
the drop-down. This displays a
Save As dialog box as shown in
Figure 3.40.
3. You can select a folder where
you want to save the file, for
Figure 3.40: ‘Save As’ dialog box example Desktop.

66 Employability SkillS – ClaSS Xii

2020-21
4. By default, the File name is ‘Untitled#’ (# is
a number). You can change it to the name of
your choice.
5. The default Save As type is .ods. You can select
other file types from the Save As type drop-down.
You can save the file as MS Excel or HTML or
text file.
6. Click on Save.
This will save the presentation on the computer.
Later while working, you can simply click File>Save or
press Ctrl+s on the keyboard to save the presentation.

Steps to close a presentation


The steps to close a presentation are as follows.
1. Click on File.
2. Select Close from the drop-down.
3. If you have not saved the
changes before closing the file,
it will prompt you with a ‘Save
Document?’ dialog box as
shown in Figure 3.41. You can
decide whether you want to save Figure 3.41: Save Document dialog box
or not or cancel.

Steps to open a presentation


The steps to open a presentation are
as follows.
1. Open LibreOffice Impress.
2. Click on File.
3. Then, select Open from the
drop-down.
4. This will display the Open dialog
box as shown in Figure 3.42.
5. Browse and select the folder
where your file is saved, for Figure 3.42: Open dialog box
example Desktop.
6. Then, select the file, for example Water Cycle.

InformatIon and CommunICatIon teChnology SkIllS 67

2020-21
noteS 7. Click on Open.
8. This will open the ‘Water Cycle.ods’ in
LibreOffice Impress.
Steps to print a presentation
Before you try to print a file, please make sure that a
printer is connected to the computer. The steps to print
a presentation are as follows.
1. Click on File.
2. Select Print from the drop-down or you can press
Ctrl+p on the keyboard.
3. A Print dialog box is displayed.
4. A printer attached to the computer is displayed
in the dialog box.
5. Select the number of copies you want to print.
6. Select All, if you want to print all slides.
7. Select Slides, if you want to print few of them and
provide the slide numbers.
8. Click on OK.

Practical Exercise
Run the e-learning lesson at http://www.psscive.ac.in/
Employability_Skills.html. This will include videos and
e-content for the above topics. Based on the e-learning, do the
following activity.
Practical group exercise
Run the e-learning lesson to get details on how to run the activity.
Activity 1

Group practice
Working on a presentation in LibreOffice impress.
Material required
Computer with LibreOffice Impress, pen, notebook, etc.
Procedure
• Divide the class into groups, depending on the number of
computers. Each group will perform the following activities.
– Save a presentation file by the name ‘Water Cycle Project’
– Close the file
– Open the file again
– Print the presentation
• Make sure that each student in the group gets a chance
to perform at least one activity. Other members can watch
and give feedback on what was done correctly and what
could be improved upon.

68 Employability SkillS – ClaSS Xii

2020-21
Check Your Progress noteS
A. Multiple choice questions

1. Which is the correct step to save a presentation?


(a) File>Save As>Type file name>Save
(b) File>Open>File name>Open
(c) File>Template>Save as Template
(d) File>Close>Save>OK
2. Which is the correct step to close a presentation?
(a) File>Save As>Type file name>Save
(b) File>Exit
(c) File>Close
(d) File>Export
3. Which is the correct step for printing a presentation?
(a) File>Print
(b) File>Print>Handout
(c) File>Print>Handout>OK
(d) File>OK

What have you learnt?


After completing this Session, you will be able to:
• save a presentation.
• close a presentation.
• open a presentation.
• print presentation slides.

SeSSIon 7: workInG wIth SlIdeS


and text In a preSentatIon
Let us assume you have to make a presentation about
a product in your office. The time assigned for the same
is five minutes. If you highlight the important points
in the presentation, you can easily depict important
information in a short span. Let us look at how we can
make our presentation more effective.
Adding slide to a presentation
Ms Sharma listed all three steps of Water Cycle in the
first slide. Now, she wants to explain each step. But
it is not a good idea to put more information on one
page. This will make the text jumbled, and difficult
to read and understand.
Ms Sharma can add a new slide. Slides are like new
pages, which are added to separate different topics in
a presentation. Ms Sharma can add one slide each for
InformatIon and CommunICatIon teChnology SkIllS 69

2020-21
evaporation, condensation and precipitation, and give
more details related to each topic in three different
slides. To add a new slide, do the following.
1. Click on Slide.
2. Select New Slide from the
drop-down as shown in Figure 3.43.
3. You can also press Ctrl+M on
the keyboard.
4. This will add a blank New Slide to
Figure 3.43: Adding a New Slide the presentation.
5. The layout or arrangement of
textboxes, etc., will be similar to
the previous one.

Deleting slides
The steps to delete a slide are as follows.
1. Select the slide that you want
to delete.
2. Click on Slide.
3. Select Delete Slide from the
Figure 3.44: Delete Slide
drop-down as shown in Figure 3.44.
4. The selected slide will be deleted.
5. You can press ‘Del’ key on the keyboard to delete
the selected slide.

Adding and formatting text


The default layout of a LibreOffice Impress slide has two
textboxes — one for the title and other for text. You can
add text by simply typing on the keyboard.
If you have a blank slide with no textbox, you can
insert a textbox using the option Insert>Textbox as
shown in Figure 3.45. You can make this textbox of any
size, and then, enter the text.

Figure 3.45: Formatting text

70 Employability SkillS – ClaSS Xii

2020-21
You can format the text in a presentation to make it noteS
look better or attractive.
There are many font styles available to change the
way a text appears. Click on the Font Style drop-down
to select a different style. This will change the way the
text is written (Figure 3.45).
You can also change the size of the text by clicking
on the Font Size drop-down and select the size
(for example, 8, 12, 14, 22, etc.). The font size of the title
is increased to make it stand out.

Highlighting text — bold, underline, italic


To highlight a text in LibreOffice, you can make it bold,
underlined or italic, depending on the requirement.
First, select the text that has to be highlighted.
Then, hover over the given icons in the Properties tab
as shown in Figure 3.46. Select the icon required to
perform the desired function, i.e., making it bold, italic,
underlined or strikethrough.

Figure 3.46: Highlighting text

Aligning text — left, right, center, justified


The text can be aligned either left, right, center or
justified. Using the Paragraph option in the Properties
tab as shown in Figure 3.47, the text can be aligned.

Figure 3.47: Aligning text

‘Left or right aligned’ means that text will be aligned


to the left or right margin, respectively. ‘Center’ aligns

InformatIon and CommunICatIon teChnology SkIllS 71

2020-21
noteS the text to the center of the page. ‘Justify’ aligns the text
to the right and left margins.

Changing text colour


You can make the presentation even more interesting
by giving different colours to the text.
The Font Color drop-down gives various colours from
which you can choose and change the colour of the text
as shown in Figure 3.48. Besides the Font Color
drop-down, there is a Highlight Color drop-down. If you
select a colour from the Highlight Color drop-down, it will
change the background colour of the text.

Figure 3.48: Changing text colour


In this way, you can make the presentation
interesting and meaningful.

Practical Exercise
Run the e-learning lesson at http://www.psscive.ac.in/
Employability_Skills.html. This will include videos and
e-content for the above topics. Based on the e-learning, do the
following activity.
Practical group exercise
Run the e-learning lesson to get details on how to run the activity.

Activity 1
Group practice
Working with font styles, types in LibreOffice Impress
Material required
Computer with LibreOffice Impress, notebook, pen, etc.
Procedure
• Divide the class into groups, depending on the number of
computers. Each group will perform the following activities.
1. Insert a new slide.
2. Type ‘LibreOffice Impress’.
3. Change the font to ‘Open Sans’.
4. Colour the text white.
5. Colour the background green.

72 Employability SkillS – ClaSS Xii

2020-21
6. The text should appear as given in Figure 1. noteS
7. Now, type ‘Google’.

Figure 1: Activity 1 sample 1


8. Change the font to ‘Bookman Old Style’.
9. Change the size to 54.
10. Colour the letters as given in the Figure 2.

Figure 2: Activity 1 sample 2

Make sure each student in the group gets a chance to perform


this activity. Other members can watch and give feedback on
what was done correctly and what could be improved upon.

Check Your Progress


A. Multiple choice questions

1. Which menu option do you use to insert a slide?


(a) Edit
(b) Insert
(c) Slide
(d) Tools
2. How will you, usually, align the title of a slide?
(a) Left
(b) Right
(c) Center
(d) Justify
3. Which option will you use to change the colour
of the text?
(a) Font Color
(b) Font
(c) Highlight Color
(d) Format

InformatIon and CommunICatIon teChnology SkIllS 73

2020-21
What have you learnt?
After completing this Session, you will be able to:
• add a slide to a presentation.
• delete a slide in a presentation.
• enter and edit text in a presentation.
• format text in a presentation.

SeSSIon 8: advanced featureS


uSed In preSentatIon
There are various advanced features used in a digital
presentation. The use of graphics, charts and images
can make the presentation more meaningful.

Inserting shapes in
presentation
You may want to use
arrows to show the
flow of a process in
a presentation. For
example, if you want to
show how Water Cycle
works — you can use
arrows. LibreOffice
provides numerous
Figure 3.49: Inserting shape in a slide shapes, such as lines,
square, circle, arrows,
symbols, etc., that can be
inserted into slides.
As shown in Figure 3.49, to insert an arrow, you
must click on Insert, and then, select Shape. This
has several options. Choose Arrow to see different
types of arrow. Select the one required for the
presentation, for example, ‘Circular Arrow’. In this
way, you can select any shape you want.
Once a shape is inserted in a slide, you can use
the Properties tab to make changes to the properties
of the shape, such as colour, size, position,
Figure 3.50: Using Properties tab direction, etc.

74 Employability SkillS – ClaSS Xii

2020-21
Inserting clipart and images in presentation
A picture speaks a thousand words. We use a lot of images
in a presentation to make it simple and interesting. The
steps to insert a clipart or an image are as follows.
1. Click on Insert from the menu.
2. Select Image as shown in
Figure 3.51.
3. An Insert Image dialog box
appears as shown in
Figure 3.52.
4. Browse through folders and
select the image you want to use. Figure 3.51: Select Image

Figure 3.52: Insert Image dialog box

5. Click on Open.
In this way, you can insert images in your presentation
slides and make it more interesting.

Figure 3.53: Images inserted in a slide

InformatIon and CommunICatIon teChnology SkIllS 75

2020-21
Changing slide layout
The default layout of a LibreOffice Impress slide contains
one textbox for the title and one for content. Layout
helps to arrange the slide content in an
organised way. However, you can change
the slide layout as per the requirement.
In case, you want to insert an image of
water cycle on one side and give the steps
on the other, you can select a layout with
one title and two boxes. You can do this
by simply selecting the slide, and then,
selecting the desired layout from the
Layouts tab as shown in Figure 3.54.
Figure 3.54: Selecting the desired layout Having a layout helps to align the content
from the Layouts tab in the desired way.

Practical Exercise
Run the e-learning lesson at http://www.psscive.ac.in/
Employability_Skills.html. This will include videos and
e-content for the above topics. Based upon the e-learning, do the
following activity.
Practical group exercise
Run the e-learning lesson to get details on how to run the activity.
Activity 1
Group practice
Working with slides in LibreOffice Impress
Time: 20 minutes
Material required
Computer with LibreOffice Impress, notebook, pen, etc.
Procedure
• Divide the class into groups, depending on the number of
computers. Each group will perform the following tasks.
– Set the layout of the slide to Title
and four content.
– Insert two different shapes on
the left, for example, star
and diamond
– Insert an image of star and
diamond on the right.
– Your slide should appear similar Figure 1: Activity 1
to the one given in Figure 1. sample
Make sure that each student in the group
gets a chance to perform at least one task. Other members can
watch and give feedback on what was done correctly and what
could be improved upon.

76 Employability SkillS – ClaSS Xii

2020-21
Check Your Progress noteS
A. Multiple choice questions

1. Which menu option will you click on to insert shapes


and images?
(a) Format
(b) Tools
(c) Edit
(d) Insert
2. What are the steps to insert a square shape in
a presentation?
(a) Insert > Shape> Line> Square
(b) Tools > Shape> Line> Square
(c) Insert > Shape> Basic > Square
(d) Format > Text > Basic> Square
3. What happens when you change the layout of a slide?
(a) The format of the text changes
(b) New slide is inserted
(c) The arrangement of content (text, images, shapes)
changes
(d) The title gets aligned to the center of the slide

What have you learnt?


After completing this Session, you will be able to:
• insert shapes.
• insert clipart and images.
• change slide layout.

further readInGS
• https://edu.gcfglobal.org/en/powerpoint2016/inserting-
pictures/1/
• https://www.gcflearnfree.org/excel2016/getting-started-
with-excel/1/
• https://www.webucator.com/tutorial/learn-microsoft-
excel/entering-data-microsoft-excel-worksheets.cfm
• https://www.gcflearnfree.org/excel2013/formatting-
cells/1/
• https://www.youtube.com/watch?v=sJqfvgD_qMI
• https://edu.gcfglobal.org/en/excel2013/filtering-data/1/
• https://edu.gcfglobal.org/en/powerpoint2016/creating-
and-opening-presentations/1/
• https://edu.gcfglobal.org/en/powerpoint2007/viewing-
and-printing-slides/1/
• https://edu.gcfglobal.org/en/powerpointxp/formatting-
text/1/

InformatIon and CommunICatIon teChnology SkIllS 77

2020-21
Unit 4
Entrepreneurship
Skills

IntroductIon
Entrepreneurs identify an innovation to seize an
opportunity, mobilise funds, raise capitals and take
calculated risks to open market or new business for
products, processes and services.
Entrepreneurship development refers to the process
of enhancing entrepreneurial skills and knowledge
through structured training and institution building
programmes. It focusses on an individual, who wishes
to start or expand a business. Promising entrepreneurs
need to be nurtured and helped to serve as role models
and mentors for their communities. An entrepreneurship
development programme must be designed in a way so
as to help aspiring entrepreneurs recognise and design
unique and innovative business opportunities based on
an analysis of local conditions and their own skills.
Business opportunity surveys may provide advice
to entrepreneurs but they must be analysed in the
context of specific market situation in each case. To
determine the market potential, it is useful to conduct
need assessment or demand survey before programme
formulation. Motivational intervention may be needed
for initiating growth and development of an enterprise.
Training in entrepreneurship development needs to
include support for — (a) entrepreneurship orientation
and awareness, (b) development of competencies
(knowledge, skills and attitudes) necessary to recognise noteS
a market opportunity and organise resources to meet it,
and (c) improvement of business performance for growth
and competitiveness. Motivation, besides increasing
need for achievement of potential entrepreneurs, also
helps them develop coping ability, tolerance to ambiguity
and influencing capability.
The National Institute for Entrepreneurship and Small
Business Development is a premier organisation of the
Ministry of Skill Development and Entrepreneurship,
Government of India, engaged in training, consultancy
and research to promote entrepreneurship and skill
development. The major activities of the Institute
include training of trainers, management development
programmes, entrepreneurship-cum-skill development
programmes, entrepreneurship development programmes
and cluster intervention.
SeSSIon 1: entrepreneurShIp
and entrepreneur
The word ‘entrepreneur’ is derived from the French word
entreprendre, which means ‘to undertake’. Cole defines
entrepreneurship as, “A purposeful activity to initiate,
maintain and aggrandise profit-oriented business.”
Stevenson and Jarillo define entrepreneurship as:
“The process by which individuals pursue opportunities
without regard to the resources they currently control.”
Entrepreneurship can, thus, be defined, as “an economic
process, where an idea is generated or an opportunity
is created, refined, developed and implemented, while
being exposed to uncertainty to realise a profit by
effective utilisation of resources”.
Economists define an entrepreneur as someone, who
brings in resources, labour, material and other assets
into profit making combinations.
Psychologists define an entrepreneur as a person,
who is, typically, driven by a psychological force, which
creates a desire to obtain or attain something.
Sociologists define an entrepreneur as a person,
whose actions would determine social status and
contribute to societal development.

EntrEprEnEurship skills 79
noteS Management gurus define an entrepreneur as a
person, who has a vision and generates an action plan to
achieve it.
Characteristics of entrepreneurship
On the basis of the above mentioned definitions,
the following are some of the characteristics of
entrepreneurship.
• It is an economic activity done to create, develop
and maintain a profit-oriented organisation.
• It begins with identifying an opportunity as a
potential to sell and make profit in the market.
• It deals with optimisation in utilisation
of resources.
• It is the ability of an enterprise and an
entrepreneur to take risks.

Entrepreneurship — art and science


Entrepreneurship is considered to be both an art and
a science. For a subject to be considered as science, it
needs to have a stepwise progression substantiated by
valid proof like chemistry or physics. There are steps
that need to be followed to attain a specific result. On
the other hand, some subjects are categorised as art,
where no specific way to attain a result is required
and the skill of using the subject matter is of prime
importance. An example of art is music. A musician can
play music notes in any combination to create soothing
and soulful music. Entrepreneurship is the perfect
combination of art and science as it requires specific
progression and procedures to be followed and also the
skill to digress when required, and yet make the entire
activity profitable and growth oriented.
An entrepreneur is someone, who has the capability
to start an organisation by organising various
resources required to make an opportunity purposeful.
Entrepreneurs are not necessarily motivated by
profit but may regard it as a standard for measuring
achievement or success.

80 Employability SkillS – ClaSS Xii


Qualities of a successful entrepreneur noteS
Let us now consider the qualities that make an
entrepreneur successful. There may be many qualities
needed to successfully run an enterprise. However, the
following qualities are considered important.
(a) Initiative: In the world of business, opportunities
come and go. An entrepreneur must be able to
initiate action and take advantage of an opportunity.
Once a person misses out on an opportunity, it
may not come again. Therefore, taking initiative
on the part of the entrepreneur is a must.
(b) Willingness to take risks: In any business,
there is an element of risk involved. It implies
that it is not necessary that every business
shall earn a profit. This deters individuals to
take up risks and start a business. However, an
entrepreneur always volunteers to take risks to
run a business and be successful.
(c) Ability to learn from experience: An entrepreneur
may make mistakes. However, once an error
is committed, it must be tried that it is not
repeated as it may lead to heavy losses. Therefore,
the person must have the ability to learn
from experience.
(d) Motivation: It is necessary for success in
every walk of life. Once you get motivated to do
something, you will not rest until you complete
it. For example, sometimes, you become
so intrested in reading a story or magazine
that you do not sleep until you complete it.
This kind of interest in work comes through
motivation. It is an essential quality to become a
successful entrepreneur.
(e) Self-confidence: For achieving success in
life, a person needs to have confidence in
oneself. Someone, who lacks confidence, may
not be able to achieve much in life or inspire
others to work. Self-confidence is reflected
in courage, enthusiasm and ability to lead.
Therefore, a successful entrepreneur must have
self-confidence.

EntrEprEnEurship skills 81
noteS (f) Hard work: There is no substitute for hard
work in life. While running a business, one
problem or the other may arise every day. The
entrepreneur has to be vigilant so as to identify
the problems and solve them as early as
possible. This requires hard work on the part
of the entrepreneur. The person cannot afford
to say: “The office hours are over now and I will
not work any longer.” In some situations, the
person may even have to work for the whole
night. Thus, hard work is the secret of success
for an entrepreneur.
(g) Decision making ability: In running an
enterprise, an entrepreneur has to take a number
of decisions. Therefore, the person must be
capable of making suitable and timely decisions.
In the present world, things move very fast. If an
entrepreneur does not have the ability to make
suitable and timely decisions, the person may
miss out on an opportunity and incur losses.

Type of entrepreneurs
There are many type of entrepreneurs, which include
the following.
Service entrepreneurs
These entrepreneurs either create a new market for
their services or provide a service in an existing market.
They spot an idea and convert it into a service, which
is unprecedented or not available in the market. It is
irrespective of the nature and size of operations but is
essentially a service.
Business entrepreneurs
These are entrepreneurs, who undertake business
and trading activities and are not concerned with the
manufacturing work. A business entrepreneur identifies
the potential of a product in a market. From that point
onwards, the business and trading entrepreneur is
responsible for stimulating demand for the product.
The product may be existent in a foreign market but
the person is able to stimulate demand for the same in
local market.

82 Employability SkillS – ClaSS Xii


Industrial entrepreneurs noteS
An industrial entrepreneur is, essentially, a manufacturer,
who identifies the needs of customers and creates products
or services to serve them. Such an entrepreneur is product
oriented, who starts through an industrial unit to create a
product like electronic industry, textile unit, machine tools,
manufacturing unit, etc.

Agricultural entrepreneurs
Agriculture has always been considered as a low-yielding
entrepreneurship. Agriculturists have now introduced
new and innovative technology to maximise the yield,
giving birth to agriculture entrepreneurship.

Technical entrepreneurs
The Industrial Revolution gave birth to technical
entrepreneurs, who use their technical expertise to
create and offer machines, tools and methods. They
constantly innovate to make industrial processes
seamless and efficient. Technical entrepreneurs use
their technical knowledge and skills to innovate.

Non-technical entrepreneurs
These entrepreneurs use their expertise in providing
services to create a market for technical entrepreneurs.
Their expertise is in non-technical aspects of a product
or service, i.e., they are not concerned with the
manufacturing process but have more to do with before
and after the manufacturing process.

Professional entrepreneurs
Such an entrepreneur starts a business, nurtures it
and makes it reach a point of self-sustenance. Once the
project reaches that point, the entrepreneur sells the
business and starts a new one, and then, follows the
same cycle.

IT entrepreneurs
People who take up entrepreneurship in the field of
Information Technology (IT) are called IT entrepreneurs.

EntrEprEnEurship skills 83
The difference between IT entrepreneurs and technical
entrepreneurs is that the latter work in the field
of electronics, mechanical devices or even civil
works, while IT entrepreneurs are confined to innovation
in the field of Information Technology.
Women entrepreneurs
As the name suggests, when women take up
entrepreneurship, they are called women entrepreneurs.
A number of women entrepreneurs are taking initiatives
in starting entrepreneurial activities and many of them
have even made it to the top.
Social entrepreneurs
Individuals, who focus on developing solutions that
benefit the society, are called social entrepreneurs.
They develop, fund and implement solutions that are
directed towards society, culture and environment. The
term ‘social innovator’ is used interchangeably with
social entrepreneurs.
Family business entrepreneurs
When a family or an individual runs a business
successfully and passes it on to the next generation,
then such an entrepreneur is, generally, termed as
family business entrepreneur. The person, who is
handed over the business or the functioning of an
enterprise, is not the first generation entrepreneur. The
person carries out all entrepreneurial activities as
inherited in the same manner or introduces certain
technological advancements to the existing way and
method of the family business.

First generation entrepreneurs


First generation entrepreneurs are
those who do not have any
entrepreneurship background. They
can be of different age groups and
backgrounds. An individual, who
starts at the age of 50 years without
any entrepreneurship background, is
also a first generation entrepreneur

84 Employability SkillS – ClaSS Xii


and someone else, who starts at the age of 17 years, is noteS
also a first generation entrepreneur.
Roles and functions of an entrepreneur
Some of the major functions performed by an
entrepreneur are as follows.
(a) Identifying entrepreneurial opportunity: There
are many opportunities in the world of business.
These are based on human needs like food,
fashion, education, etc., which are constantly
changing. These opportunities are not realised
by the general public. But an entrepreneur
senses the opportunities faster than others. The
entrepreneur, therefore, has to keep one’s eyes
and ears open at all times. A person, who wants
to become an entrepreneur, requires imagination,
creativity and innovativeness.
(b) Turning ideas into action: Entrepreneurs must
be capable of turning ideas into reality. They
should be able to collect information regarding
ideas, products and practices to meet the
market demand.
(c) Feasibility study: Entrepreneurs conduct studies
to assess the market feasibility of a proposed
product or service. They anticipate problems
and assess quantity, quality, cost and sources
of inputs required to run the enterprise. Such a
blueprint of all activities is termed as a ‘business
plan’ or ‘project report’.
(d) Resourcing: An entrepreneur needs various
resources in terms of money, machine, raw
material and workforce to run an enterprise
successfully. An essential function of an
entrepreneur is to ensure the timely availability
of all these resources.
(e) Setting up an enterprise: For setting up an
enterprise, the entrepreneur may need to fulfil
some legal formalities. The person must also try to
find a suitable location, design the premises, install
machinery and do many other works.

EntrEprEnEurship skills 85
(f) Managing the enterprise: One of the important
functions of an entrepreneur is to run the
enterprise. The person has to manage the
workforce, material, finance and organise the
production of goods and services. The person
has to market each product and service, after
ensuring appropriate returns (profits) of the
investment. Only a well-managed organisation
yields the desired results.
(g) Growth and development: Once the enterprise
achieves the desired results, the entrepreneur
has to explore another higher goal for its growth
and development. The person is not satisfied only
with achieving a set goal but constantly strives
for achieving excellence.

What motivates an entrepreneur?


Every human has a nature to create and pro-create,
and to dream and work to fulfill those dreams. But not
every human is able to handle failures. An entrepreneur,
on the other hand, has the potential and willingness
to overcome every hurdle that comes in way of the
person’s entrepreneurial endeavours. The person finds
out ways and means to pursue one’s dreams and fulfil
the goals.
Following are some of the qualities that motivate
an entrepreneur.
Standard of excellence
An entrepreneur constantly sets
high standards and strives to
attain the standard of excellence
by working hard and showing
innovativeness.
Uniqueness
For an entrepreneur, one of the
most important qualities is to
remain unique in everything the
person does and the way it is done.

86 Employability SkillS – ClaSS Xii


Focus on long-term goals
Long-term goals are those that are distant in terms of
time period. An entrepreneur focusses more on what
is to be achieved in distant future rather than in near
future. The person will plan and work patiently to
achieve the long-term goals.
Need to influence
The entrepreneur perceives one’s ideas as revolutionary
and expects them to influence the world in a substantial
way. For most entrepreneurs, their ideas have impacted
the world and some have completely changed the look
of the world.
A wage employed person is someone, who works
for an individual or organisation and gets paid for the
same. An entrepreneur is a self-employed person, who
strives to make the business better by taking risks and
trying new ideas.
Entrepreneurship is the act of setting up and running
a business, and taking risks in order to earn profits.
Nutan always had a passion for cooking. As a child,
she had an accident and became wheelchair bound. It
was a difficult situation. But it did not stop her from
pursuing her dreams. Nutan got an internship in
her neighbour’s restaurant and learnt to work in the
kitchen. Two years after working there, she decided to
start a dabba (tiffin) service. She would prepare and
send lunch to 100 people in an office building nearby.
Eventually, she introduced a menu from where people
could choose what food they wanted to have instead of
everyone getting the same food. Here are some things
you would have learnt from Nutan’s story.
1. When she was working in her neighbour’s
restaurant, she was a wage employed person
because she was working for someone.
2. She set up her food business. She was an
entrepreneur as she was taking a risk by trying
new ideas and introducing a menu.
3. Where there is a will, there is a way! We can do
anything, if we decide.

EntrEprEnEurship skills 87
Identifying opportunities and risk taking
A key question faced by budding entrepreneurs is finding
the business opportunity that is right for them. Should
the new venture focus on a new product or service?
Should the venture select an existing product or service
from one market and offer it in another, where it may
not be available?
Some ways by which aspiring entrepreneurs can
identify new business opportunities and evaluate their
potential and risks are as follows.
• Community concerns: Look for issues that
concern your community. Sometimes, starting
locally can reap huge benefits. Identify the
inefficiencies, analyse how an idea can help and
evaluate the risks involved.
• Personal experiences: Many powerful world
changing ideas come from the experiences and
challenges an entrepreneur faces in life. If you
aspire to become an entrepreneur, you must
listen to the personal stories of successful
entrepreneurs and draw inspiration. Their
experiences may teach you powerful lessons
in entrepreneurship and give an insight into
some business strategies that you may adopt to
become successful.
• Research with others: Speak to like-minded
people, get involved through social groups and
join local startup groups. Many a time, discussion
with others opens various doors of opportunities.
It also helps to learn the nuances of business.
For an entrepreneur, it is all about spotting the
right opportunity and taking the leap of faith. Mark
Zuckerberg thought about a simple idea of connecting
with his college friends through Internet. His simple
idea sparked the ‘social movement’, and today, almost
all of us are connected through ‘Facebook’.

Startups
A startup is a company that is in the first stage of
its operations. A startup and a traditional business

88 Employability SkillS – ClaSS Xii


venture are different, most notably for the way they Activity
think about growth. A startup is often financed by the Can you think of any
founders until the business gets off the ground, and it startup around you?
gets outside finance or investments. Have you read about any
startup in newspapers?
We hear a lot about startups being founded these Discuss and list the
days. It can be in the field of technology, health care, names of three startups.
food, virtual reality, etc. Let us understand more
about startups.
• Startups can be started with
minimum investment. Most
startups thrive on an idea that
involve technology or offer
technology-driven solutions.
For example, a lot of startups
have started online food delivery. With the help
of a robust app, they partner with food service
providers or restaurants, and help in the home
delivery of food.
• Startups seek financial investment differently
than most small businesses. They rely on
capital that comes via angel investors or
venture capital firms, while small business
operations rely on loans and grants. A lot of
Indian startups, too, have received funding
from global investors.
• Startups come up with an innovative idea. At
the same time, they like to get guidance and
mentoring from an expert. Most people, who create
startups, join various groups at local and global
level for continued support by expert mentors and
investors. ‘Startup India’, a flagship initiative of
the Government of India, is intended to build an
ecosystem for the growth of startup business.
Startup policies have been formulated by the
States. Under this scheme, new startups in
India can avail regulatory and tax benefits,
capital gain exemption, as well as, access to
government funding, if they fulfil the criteria.
(Website: http://startupindia.in).

EntrEprEnEurship skills 89
noteS Practical Exercise
Activity 1

Group discussion
The topic for discussion is — ‘An entrepreneur is not born
but created’.
Material required
Notebook, pen, etc.
Procedure
• Divide the class into two groups.
• Each group brainstorms and states points — one for ‘an
entrepreneur is born’ and the other for ‘an entrepreneur
is created’.

Activity 2

Group practice
Entrepreneurship quiz
Material required
Notebook, pen, etc.
Procedure
In this activity, we will identify and differentiate between
entrepreneurs and wage employed people.
Instructions
1. Each row in the class shall be a group. Thus, we shall
have four groups in the class.
2. Each group shall assign one person to be the ‘buzzer’
person. You must have seen game shows, where the
person who wants to give an answer presses a button,
and a loud beep sound is produced. That is a buzzer. We
do not have a buzzer but we have benches! So, the ‘buzzer’
person from a group shall tap the bench if the person’s
group knows the answer.
3. The teacher will speak out aloud various professions.
Each group must guess if that person is an entrepreneur
or a wage employed person.
4. Discuss the difference between an entrepreneur and a
wage employed person with the group.
5. Here are the situations.
(a) Rama is a vegetable seller, who sells only organic
vegetables.
(b) Suresh runs a food delivery business that delivers
food between 12 noon and 5 am.
(c) Sahida is a manager in a software company.
(d) John is a school teacher in a village.
(e) Gurdeep has a yoga centre that conducts classes for
senior citizens.

90 Employability SkillS – ClaSS Xii


Check Your Progress
A. Multiple choice questions
1. Salman tries new ideas as a tailor in a garment factory.
Salman is a/an ______________.
(a) entrepreneur
(b) wage employed person
(c) labourer
(d) unskilled worker
2. Prashant works for Surabhi, who is a businesswoman.
Prashant is an ___________________.
(a) entrepreneur
(b) wage employed person
(c) skilled worker
(d) businessman
3. Ridhi owns a construction company and takes risky
decisions in her work everyday. Ridhi is an ___________ .
(a) entrepreneur
(b) wage employed person
B. Short answer question
1. Name an entrepreneur you admire and what do you
admire about the person.

What have you learnt?


After completing this Session, you will be able to:
• explain the qualities of an entrepreneur.
• what is entrepreneurship.

SeSSIon 2: BarrIerS to entrepreneurShIp


You must have watched a 100m hurdle race for women
or 110m hurdle race for men in school or stadium.
Some of them were obstacle races, in which there
would be hurdles — you would need to jump over to
get to the end line and if you ran fast enough, you
would win.
A business venture is a lot like hurdle race.
It, usually, involves risks. A risk is any situation,
which involves danger.
So, while running the race as an
entrepreneur, many hurdles, such as financial
constraints may come in way. These things
can stop the person from achieving success.
These are called ‘barriers’. One day while
going to school, a tree falls on road. It stops

EntrEprEnEurship skills 91
all vehicles. It is a barrier that is stopping you from
reaching school on time.
What do you think can be the barriers that
entrepreneurs may face while running their ventures?
Talk to some entrepreneurs in your area and find out.
After having spoken with the entrepreneurs, you would
have realised that they face a lot of barriers on their
path to success. Whether it is lack of knowledge or lack
of funding, there are various barriers that can prevent
one from pursuing one’s passion for entrepreneurship.
Here are some of the most common barriers.

Environmental barriers
One of the biggest barriers that entrepreneurs face is
environmental factors. Environmental factors can be
many. But the most common ones include the following.
• Lack of adequate resources or raw material
• Non-availability of skilled labour
• Lack of requisite machinery and other
infrastructure
• Unavailability of monetary resources on time
These barriers can be easily overcome by studying
the market well enough before taking a decision about
the venture. Research, market surveys and mentor
guidance can help overcome such barriers.
The Indian Government has come up with various
schemes to help small-scale entrepreneurs gain capital.
Some of these are:
• Government Mudra Yojana — https://
mudralsans.in/
• Credit Guarantee Scheme — https://www.cgtmse.in/
• Stand-Up India Scheme — https://www.
standupmitra.in/

No or faulty business plan

“A goal without a plan is just a wish.”


Every entrepreneur wants a successful business. But
if a person does not make an action plan, it may lead

92 Employability SkillS – ClaSS Xii


to a chaotic situation. Having a plan to reach the goal
helps the person in knowing one’s role in running a
successful business and pushes everyone associated
with it to work harder.
Personal barriers
How long will the business last? How much profit will
it make? Will my customers like my product? Will I
have enough money to support my family? These are
the questions that might go through an entrepreneur’s
mind before the person actually starts a business
venture. Establishing any new venture is a risk because
there is always a fear of what may go wrong. Secondly,
finding a suitable team is also a tedious job. A team of
careless and non-suitable workers may cause damage
to a business.
Self-doubt
It is easy to get discouraged when something goes
wrong in a business. One starts doubting oneself and
may even feel like giving up. Self-doubt comes when we
do not have confidence in ourselves and our abilities.
One of the best ways to deal with self-doubt is to
work towards one’s goals. When we lack motivation,
just looking at our goals and knowing that the tasks
we are doing today are contributing to our long-term
goals help us feel better. Having family and friends, who
know our goals and support us when we are doubting
ourselves, also help.
We are all scared of failing. We put in a lot of effort
into our idea and give it our best to make it happen.
Believing in ourselves is the first step towards crushing
the fear of failure.
Forming a team and teamwork
Finding suitable people and training them to put in
their best for the business is a tedious and dificult
exercise. As an entrepreneur, one must find people,
who think and feel like the rest of the team. When new
people fit into the culture of the team, work can happen
better and faster.

EntrEprEnEurship skills 93
noteS
Practical Exercise
Activity 1

Entrepreneur interview
Material required
Notebook, pen, etc.
Procedure
In this activity, we will speak to an entrepreneur about the
problems the person faces in business.
Instructions
1. Find an entrepreneur in your area.
2. Ask questions, such as how the person got the idea of
starting the business and “what were the major difficulties
that the person faced.
3. Note down the answers in your notebook.

Activity 2

Fishbowl of fears
Material required
Notebook, pen, etc.
Procedure
In this activity, we will talk about what we fear about
entrepreneurship.
Instructions
1. We have learnt about the barriers that entrepreneurs
face. Now, each one of us shall think about what we fear
might be the biggest barrier for us when we start our
business venture.
2. Sit in a circle.
3. Take a chit of paper and write down what barrier might
stop you when you start a venture. Do not write your
name on the chit.
4. Put all chits in the centre of the circle.
5. Each person will pick up a chit and read someone’s fear.
Then, the class will spend two minutes, and try to find
out solutions for that person’s fear. If the person wants to
reveal one’s name at this point, one can do so.
6. It is difficult to talk about one’s fears in front of everyone.
So, all students must listen to each other and extend
support. They must not laugh when someone is sharing
one’s story.

94 Employability SkillS – ClaSS Xii


Check Your Progress noteS
A. Match the situations in the columns to the
meaning of the word.

Situations Word

(a) Gauri has started a fashion designing (i) Barrier


store, where she sells clothes.

(b) Akshay wants to start more classes in (ii) Risk


his school but is finding it difficult to
hire teachers.

(c) Shubham has a business of selling (iii) Venture


groceries. He wants to open a store that
sells everything from clothes to shoes to
bags, along with groceries.

B. Multiple choice questions


Identify and put a tick mark () against the type of barrier in
each situation.
1. Mary believes that she will not have the ability to work
with a team when she starts her business. The barrier
she is facing is _____________________.
(a) getting capital
(b) self-doubt
(c) risk taking
2. Sayed knows what business he wants to do but does
not know what steps he has to take to get it running.
The barrier stopping him is _____________________.
(a) building the right team
(b) lack of plan
(c) risk taking
3. Harish has a rug business in India. He wants to start
exporting rugs to Canada but does not know if they
would sell there. The barrier he is facing is _____________.
(a) self-doubt
(b) lack of plan
(c) selecting the right business idea

What have you learnt?


After completing this Session, you will be able to:
• identify barriers and fears related to becoming
an entrepreneur.

EntrEprEnEurship skills 95
noteS SeSSIon 3: entrepreneurIal attItudeS
Entrepreneurs think and act differently from people
who are wage employed. But how are they different?
Let’s read Bitti’s story and understand.
Bitti is from the city of Bareilly in Uttar Pradesh.
She attends her cousin’s wedding but finds it very
boring because nobody is dancing. She starts talking
to people to find out the problem. Older uncles and
aunties tell her that other people would judge them
if they dance. Young people tell her that the DJ is
not playing the latest music. After attending five more
weddings, she realises that this is a problem that a
lot of people face at weddings. She sees a business
opportunity here.
Bitti, then, starts her wedding entertainment company.
The company has two parts — a dance academy and a
music business. The dance academy holds dance classes
for children in the morning and for people above the
age of 50 years in the evening. For the music business,
she hires young people in the age group of 16–30 years
to research on the latest popular music. At first, she
finds it hard because she has no prior experience of
running a business or working with a group of people
so different from each other. But that does not stop her
from putting in efforts into the business.
What did Bitti do or think differently from someone
else? Discuss with your partner and write it in
your notebook.
An attitude is a way of thinking or feeling about
something. It can be positive or negative, good
or bad. We shall learn about positive attitudes
of entrepreneurs.
The attitude an entrepreneur has is different from
that of a wage employed person. A wage employed person
has to do one’s job and not worry about the company.
But the entrepreneur thinks and acts differently. The
person not only thinks about one’s work but also about
the work of one’s employees and the work required for
the growth of the company.

96 Employability SkillS – ClaSS Xii


After reading Bitti’s story, the attitudes that make a
successful entrepreneur are given in Figure 4.1.

DECISIVENESS
Ability to make quick and
profitable decisions

ORGANISATIONAL
TAKING INITIATIVE What it takes SKILLS
Ability to take charge
and act in a situation to become an Ability to make the optimum use
of time, energy and resources to
before others entrepreneur? achieve the desired goals

INTERPERSONAL PERSEVERANCE
SKILLS Ability to continue to do
Ability to work something, even when it
with others is difficult

Figure 4.1: Attitudes of an entrepreneur

Check Your Progress


A. Multiple choice questions

1. The ability to continue to do something, even when it is


difficult is called _________________.
(a) initiative
(b) organisational skills
(c) perseverance
2. The ability to act in a situation before others do is
______________.
(a) interpersonal skills
(b) initiative
(c) perseverance
3. The ability to work with others is ______________.
(a) organisational skills
(b) interpersonal skills
(c) initiative

B. Short answer questions

1. What do you understand by attitude?


2. What do you understand by interpersonal skills? Share
an example where you displayed interpersonal skills.

EntrEprEnEurship skills 97
C. Match Bitti’s actions from the attitudes we have learnt
that an entrepreneur need to possess. Write them in the
table given below.

Attitudes an Bitti’s actions


entrepreneur need
to possess
Decisiveness She decides to start a dance
academy after seeing a need and
talking to people about it.
Initiative
Interpersonal skills
Perseverance
Organisational skills

What have you learnt?


After completing this Session, you will be able to:
• identify the attitudes that make an entrepreneur
successful.

SeSSIon 4: entrepreneurIal competencIeS


In the previous Session, we learnt about the attitudes
that an entrepreneur need to possess to become
successful. Here, we shall learn about the competencies
required by a person to build entrepreneurial attitude.
Competency is the ability to do something well. Figure 4.2
shows the attitudes and competencies required to
become a successful entrepreneur.
Attitudes and competencies

INTERPERSONAL ORGANISATIONAL
DECISIVENESS INITIATIVE SKILLS PERSEVERANCE SKILLS

Know yourself Realise that you Listening Not giving up Time


can take action management
Identify Believe you can Positive body Working hard Goal setting
opportunities take action language

Analyse the Take action! Positive attitude Learning from Efficiency


opportunity failures
Problem solving Stress Managing quality
management

Figure 4.2: Attitudes and competencies to become a successful entrepreneur


The journey to understand our competencies first starts
with understanding who we are. We grow and change
every single day. We understand what we like and what

98 Employability SkillS – ClaSS Xii


we do not. We make mistakes and learn from them. It is
important to stop and think about how we have changed
as people over the years.
Sometimes while thinking about our life, we might
judge ourselves too much. We do not like it when we
make mistakes and think that we cannot do something
because we have made a mistake. At those times, it is
important to remember to see ourselves from the point
of view of people around us. They may have positive
things to say about us.
Let us learn about the entrepreneurial attitudes
through different exercises.
Decisiveness
Decisiveness is the ability to make profitable and
quick decisions. How does a person become decisive as
an entrepreneur?
Decisiveness becomes the most important attribute
while setting up a business venture. It is about identifying
an opportunity and acting on it. An opportunity is a
chance to do something, generally, the right time or
moment to do something.
Decisiveness can be developed through the following
process as shown in Figure 4.3.

DECISIVENESS

Knowing yourself Identify opportunities


You must know what is important for you — Figuring out the right moment and place where a
What kind of problems do you want to solve? business will work is important.
What do you see around that bothers you? Who are the people you want to help?
What are you good at that can help you solve these problems? What problems do they have?
What ideas do you have to solve them?

Analyse the opportunity Problem solving


The next step is to study your idea. After studying the customers and market, you
If it works, why would it work? What problems may make changes to your idea.
could stop the idea from becomming successful? What would be the final idea? What makes it
What do the customers think about the idea? different from other ideas in the market?
What is the competition for that idea? How will you use your strengths to make the idea successful?

Figure 4.3: Solving the decisiveness dilemma

EntrEprEnEurship skills 99
noteS Let us look at Ankur’s entrepreneurial venture and
try to understand his decisiveness.
Ankur manufactures and sells towels in his village at
Dharamkot, Himachal Pradesh. For almost a year, his
towels would not get sold in his village. Disappointed,
he was about to shut down the business. That is when
someone suggested that he sell the towels in a city. He
showed some samples to people in Delhi. He realised
that the quality of towels and the price at which he was
producing was better suited for a city. The people in
his village found his products expensive. So, he started
producing softer towels for the city and cheaper ones for
his village. His customers in both the places were happy.
Can you analyse Ankur’s actions on four aspects of
decisiveness? Give an explanation for each aspect.
Example: Identifying opportunity — Ankur realised that
he could sell the towels in the city, as well as, his village.
Initiative
Initiative is the ability to take charge and act in a
situation before others. Once you have decided what
you want to do, the next step is taking action. There are
times when we recognise what action we have to take
but do not take it because we think we cannot do it. In
such times, it is important to reach out to people we are
working with to help us think about ideas and motivate
us to believe in our abilities.

TAKING
INITIATIVE

Realise that things are


in control and you can
take action in a given
situation.
Believe that you have
the ability to take
action in a situation.

Take action in
that situation!

Figure 4.4: Taking initiative

100 Employability SkillS – ClaSS Xii


Let us read story about Elton, who liked cutting and
styling people’s hair.
Elton was always interested in hairstyling. He knew
the latest international styles and would keep trying
them on his friends. But his family wanted him to work in
a software company. After years of struggling with what
to do, Elton spoke to his friends. They encouraged him
and made him realise that he should take charge as it
was his life. He gathered courage and spoke to his family.
He explained that he had the talent to style hair and the
skills to run an entrepreneurial venture because of what
he had learnt in school and at home about business.
His family was finally convinced and helped him set
up a salon. He is now well-known for his skills in and
around his town.
Discuss with your partner how Elton took the
initiative to start his venture. List the steps he had to
take to set it up.

Interpersonal skills
Interpersonal means dealing with relationships. It
is between two or more persons. Interpersonal skills,
thus, mean the competencies required to work with
other people.
In our everyday life, we are always talking to people
and working with them. Whether it is riding a bus or
sharing lunch in class, we are constantly interacting
with others. This is true for an entrepreneur as well.
Entrepreneurs work with people from different walks
of life. They might work with them because of their
talent and hard work. In such a case, the kind of people
who work in a team might be different. They might look
different, talk different and believe in different things. In
such a case, it becomes important for an entrepreneur,
as well as, every individual of the team to respect each
other and their differences.
Therefore, if the entrepreneur wants one’s business
venture to grow and do better, the person has to work
with a number of people. Thus, it becomes important
that we learn how to interact with people. Some ways to
do that are as follows.

EntrEprEnEurship skills 101


Listening
It is important to listen when someone talks. When
someone shares something, it is, generally, because the
person might have thought about it or it is how one
feels. Listening with interest to what someone is saying
helps build trust with the person.

Body language
How would you feel if someone had a frown on the face,
hands crossed and leaning back in the chair while
talking? If you cannot picturise it, tell someone in your
class to act it out and you shall know.
Our facial expressions, gestures and postures are
important while working with people. While listening,
if you show that you are interested in talking to the
person with a smile and leaning forward in the chair,
the person is likely to feel comfortable and talk more.

Positive attitude
Having a positive attitude, generally, implies being
optimistic about situations, interactions and oneself.
People with a positive attitude are hopeful and see the
best even in difficult situations. However, if you have
negative feelings, it is good to talk about it with someone
you trust and find out why you are feeling like that.
Having a positive attitude is important while
receiving and giving feedback. Feedback is giving
information or criticism to someone to say what can
be done to improve something. Feedback is important
in the communication process. Without feedback
no communication is complete. Therefore, during a
feedback conversation, it is important to speak in a
positive manner. One could start by talking about what
the person is doing well, and then, mention what one
can do better. In such a case, there are chances that
the other person will listen with interest. This applies
to you as well. It is important to stay open-minded in a
feedback conversation

102 Employability SkillS – ClaSS Xii


Stress management noteS
Have you ever been unable to sleep the night
before an exam because you were anxious
about how you would perform? That state of
mental pressure or tension is called ‘stress’.
Sometimes, one experiences stress while working
with other people. Because there are people with
different personalities working in a team, it can lead
to stress for all. In such cases, managing stress
becomes important for the health and well-being of
everyone. Stress management refers to the different
ways to deal with stress, so as to feel healthy, positive
and refreshed.
There are many ways people deal with stress. Some
of them are as follows.
1. Taking a walk in nature
2. Doing a physical activity like running
swimming, etc.
3. Practising deep breathing exercises
4. Practising meditation or yoga
Perseverance
Perseverance is the ability to continue to do something,
even when it is difficult. Let us read about it through
Ravi’s story.
After 20 years of being a successful entrepreneur in
Lucknow, Ravi decided to move back to his village in
Jaunpur. In his village, he decided to open a clothing
store. He thought that because he had gained so much
success in the city, he would open the shop with the
same clothing style in the village as well.
Initially, some people came to try out his store’s
clothes but they said that the style did not match
what they wanted. They wanted more variety and
brighter colours.
Ravi was not disappointed. He decided to learn from
the failure. He sold off the old clothes to his friend in a
city and bought good quality clothes from a local seller.
He also put posters outside his shop, so that people
would feel welcome.

EntrEprEnEurship skills 103


After reading Ravi’s story, you can understand that
perseverance can be built in the following ways.

Perseverance

Not giving up when there is a


difficult situation

Working hard to achieve the goal

Analysing failures and learning from them

Figure 4.5: Building perseverance

Organisational skills
Organisational skills refer to the ability of making
optimal use of one’s time, energy and resources to achieve
one’s goals. Becoming better at these organisational skills
would help an entrepreneur become successful. So, let
us test these skills for ourselves. Organisational skills
include the following.

Time management
Time management is the process of planning and
following a conscious control of time spent on specific
activities. It is the ability to use one’s time well. Time
management includes the following.
1. Planning well
2. Setting goals
3. Setting deadlines
4. Giving important work responsibilities to
other people in a team
5. Conducting the most important tasks first

104 Employability SkillS – ClaSS Xii


Goal setting
A goal is somewhere we want to reach. It is the aim or
result that we want from an activity. Goal makes us
work harder, motivates us to complete what we start
and achieve the target. It gives us direction, and usually,
makes us put in more effort. The biggest difference
between the first and second round of a game you
played was that you had a goal for a second round. It is
that goal, which would have made you work harder and
smarter in the second round.
Efficiency
Efficiency is the ability to do things well, successfully,
without wasting time. In the second round of the game,
you would have utilised the abilities of your team
members better. You would have divided work among
your team members to be able to achieve the goal.
Efficiency can be achieved by using material, i.e., the
team’s efforts, money and time well.
For example, Sama runs a manufacturing business.
When she started, she would do everything —
manufacturing, transportation and selling the material
door-to-door. Now that her business has expanded, she
takes care of the manufacturing section only to ensure
that the quality of the material being used is maintained.
Her team members take care of the transportation and
sale of the manufactured products.
Managing quality
Managing quality in a business means setting and
maintaining a standard of excellence for products or
services being provided to customers. When the business
venture starts growing, maintaining quality becomes the
most important part because of the number of products
being produced every day. In Ravi’s story, even when
he bought clothes from a local seller, he did not buy
cheap ones. He bought good quality clothes because his
customers were important to him.

EntrEprEnEurship skills 105


noteS
Practical Exercise
Activity 1

Who am I?

Material required
Notebook, pen, etc.
Procedure
• In this activity, we talk about ourselves with
the rest of the class.
Pre-work
On the day before the exercise is conducted, each student has
to think about and select one person whom the student thinks
knows one well. Once the student has that person in mind, get
an object that represents the personality of the person to class.
It can be the person’s scarf, spectacles, bag, etc.
Instructions
1. Place a chair in the centre of the class.
2. Each person comes in front of the class with the object
one has brought.
3. Each person shall use that object and stand behind
the chair. They have to act like the other person and
introduce themselves to the class. For example, if
Reshma chooses her mother as the person who knows
her best, she shall wear her dupatta, stand behind the
chair and introduce Reshma to the class. She shall
use these sentences like: “Reshma is my daughter.
She is 17 years old. She is a happy child”, etc. Every
person has two minutes to introduce oneself.
Tip: You are all going on a journey to know each other. So, it
becomes important to listen to each other with interest.

Activity 2
Group practice
Business ideas
Material required
Notebook, pen, etc.
Procedure
• In this activity, we shall come up with business ideas to
solve the problems of different people.
Instructions
1. Form groups of four.
2. Write about a person or people that you care about
and the problems they have.
3. Come up with solutions for those problems and write
them in the following table.

106 Employability SkillS – ClaSS Xii


noteS
Person
Problem
Ideas to solve
the problem

4. Now, it is time to talk to your customers. Speak to the


people for whom you come up with solutions. Fill in
the table given below while speaking to them.

Name of the person


Do you have this
problem?
Does my idea solve your
problem? Do you have
suggestions to make my
idea better?
Is there anyone else who
is solving your problem?
What are they doing?

5. Compare the ideas you have got from your customer


with the original idea. Come up with a new idea that
will be helpful to your customer.
6. Write down the strengths you have that will help
you to successfully execute this new idea. Write
them here.
My strengths .............................................

Activity 3
Group practice
Best out of waste
Material required
Notebook, pen, waste items for the activity, etc.
Procedure
• In this activity, let us make useful objects out of
waste material.
Pre-work
The students shall work in groups of five. Each group has to
bring any five items that have been lying as waste in their homes.
These five items should be such that an object can be made
out of them.
Instructions
1. Divide yourselves into your groups of five. Place the
items you have brought on the bench.
2. Surprise time! You have to give your items to the team
next to you.
3. You, now, have 15 minutes to make a useful object
out of the material your team has.
EntrEprEnEurship skills 107
noteS 4. After completion, each team shall get two minutes
to present one’s object before the class based on the
questions given below. Now, share your feelings on
successfully making an object.
• What was your original plan?
• How did you feel when your items were taken away
and a new set of items were given to you?
• How did you successfully complete the task and make
the object?

Activity 4
Pair and share
Let’s grow together!
Material required
Notebook, pen, etc.
Procedure
In this activity, we will talk and help each other become
better people.
Instructions
1. Find someone in class who knows you well.
2. Now, write down one thing that you see them do well.
Then, write down one thing that you feel they can
do better.
3. Now, share your opinion with each other, one-by-one.
4. You have five minutes to complete the activity.

Activity 5
Group practice
Snowball fight!
Material required
Notebook, pen, etc.
Procedure
• In this activity, we talk about a stress we have and
learn one method to deal with it.
Instructions
1. Close your eyes and spend two minutes just listening
to your breath.
2. After opening your eyes, write down a stressful feeling
you are having on a piece of paper. It can be about
your class, friends, home or anything else.
3. Crumple the sheet into a ball.
4. Now, gather in a circle and throw the paper balls at
each other. Laugh loudly — have fun!
5. Now, each person will pick up someone else’s ball and
read it out to the class.
Let’s exercise our interpersonal skills in this activity!

108 Employability SkillS – ClaSS Xii


Activity 6 noteS
Group practice
JAM — Just a Minute
Material required
Notebook, pen, etc.
Procedure
In this activity, let us see how much can we accomplish
in ‘Just a minute!’
Instructions
1. For the first round, take a pen and paper, and form
groups of five.
2. Prepare a list of things, which are either red or blue
in colour. You have one minute for this team activity.
3. Count the number of items you came up with in the
first round.
4. For the second round, write a goal on the top of your
team’s paper. Ensure this number is greater than
that of the first round. Example, if you had written
10 items as a team in round 1, try to set a goal of 15
items for round 2.
5. Now, write things, which are yellow or pink, in a
minute. Start!
6. What was the difference between round 1 and
round 2?
7. Were you able to achieve more in the second round?
If yes, why?

Activity 7
My entrepreneurial attitude
Material required
Notebook, pen, etc.
Procedure
• Here, the student and the person’s friend shall do an
activity on rating themselves for entrepreneurial qualities.
Instructions
1. Rate yourself on the following parameters (1 – lowest,
5 – highest).
• Interpersonal skills
• Taking initiative
• Decision making
• Hard work
• Time management
2. Now, with your friend, who knows you well, do the
activity. Ask your friend to rate you on each of the
above parameters.

EntrEprEnEurship skills 109


noteS 3. Find your score.
• 5–11: you have some entrepreneurial attitude. You
need to work on your skills.
• 12–18: you are halfway there! There are some
qualities you are very good at but there are also some
you have to work on.
• 19–25: you are entrepreneurial already! Keep working
on your qualities.
4. After reading your rating and your friend’s rating,
discuss it with your teacher.

Check Your Progress


A. Match the situations to the type of attitude that an
entrepreneur is showing.

Situation Attitude
(a) Aamir has been an entrepreneur (i) Decisiveness
for 15 years. His business has a
culture, where people working with
him are free to give feedback on
his work and share new ideas for
the business.
(b) Shanaya wants to start a sweet shop. (ii) Taking
After speaking to some people in her initiative
area, she finds out that nobody sells
healthy sweets. She decides to make
non-fried sweets.
(c) Malvika has a book selling business. (iii) Interpersonal
One day, a shipment of her books skills
gets lost. This creates a lot of
problems for her customers. She
apologises to them and works hard
for two days to get a new shipment
by the next day.
(d) Archana wants to start a 24×7 (iv) Perseverance
medical shop in her village.
However, she does not know
anything about medicines and has
doubts about her selling skills.
After talking to some people, she
realises how important it is. Finally,
she works with a pharmacist to set
up a medical store.

B. Short answer question


1. After taking your entrepreneurial report, you know
what you are good at and what can be improved upon.
How do you think you can improve? Write down three
steps that you shall take.

110 Employability SkillS – ClaSS Xii


Unit 5
Green Skills

IntroductIon
Today, we are experiencing unpredictable weather
conditions due to climatic changes and environmental
deterioration. Deterioration of the environment through
depletion of resources, such as air, water and soil is
taking place globally. Whether we work in a factory or
in field, we need to be aware of the factors and systems
that can be harmful to the environment. We must
adopt practices that are environment friendly and avoid
using processes that will harm our surroundings. For
example, pollution is a major problem in most cities.
We can check the rising pollution levels only if we are
aware of the various ways of controlling and minimising
it. We can plant trees near our houses, and use an
eco-friendly mode of transport, such as bicycle, electric
car, etc. We can take care of our environment in many
ways. For example, we must not leave the tap running
while brushing our teeth, use the leftover water in our
bottles for watering plants, use cloth bags instead of
plastic bags, buy eco-friendly products and reduce the
usage of paper.
Using non-toxic and natural products
for cleaning and washing
Cleaning products with sustainably sourced ingredients
and natural oils that are biodegradable and
available in eco-friendly packaging are conducive for
the environment.

2020-21
Using plants inside home and other
places for air purification
Plants, such as Areca palm and rubber absorb harmful
pollutants from the air.

SeSSIon 1: Green JobS


A way we can contribute to the environment is by
encouraging green jobs. Green jobs help protect and
restore the environment. Green jobs could be in any
sector or industry — traditional sectors, such as
manufacturing and construction, and new sectors,
such as renewable energy.
A green job is defined as one that helps bring about
and maintain transition to environmentally sustainable
forms of production and consumption. It
cuts across all sectors — energy, material,
water conservation, waste management and
pollution control.
According to the United Nations
Environment Program (UNEP), green jobs or
green collar jobs are works in agricultural,
administrative, research and development,
manufacturing and service activities that
contribute substantially to preserving or restoring
environmental quality. ‘Environmental quality’ is a set
of properties and characteristics of the environment,
either generalised or local, as they impinge on human
beings and other organisms.
A green collar worker is one who is employed in
the environmental sectors of the economy. Green
collar workers include professionals, such as green
building architects, environmental consultants, waste
management or recycling managers, environmental
or biological systems engineers, landscape architects,
solar and wind energy engineers and installers, green
vehicle engineers, organic farmers, environmental
lawyers and business personnel dealing with
green services or products. Green workers include
electricians who install solar panels, plumbers who
install solar water heaters, construction workers who
build energy-efficient green buildings, technicians

112 Employability SkillS – ClaSS Xii

2020-21
and workers involved in establishing wind power noteS
farms, and those working for clean and renewable
energy development.
At the enterprise level, green jobs can produce
goods or provide services that benefit the environment,
for example, green buildings or clean transportation.
However, these green outputs (products and services)
are not always based on green production processes
and technologies. Therefore, green jobs can also be
distinguished by their contribution to more environment
friendly processes. For example, green jobs can reduce
water consumption or improve recycling systems.
India has adopted several measures for ensuring
sustainability, renewable energy and energy efficiency
in various sectors, for example, efforts are being
made to reduce Carbon dioxide emission rates from
vehicles in automotive sector, promoting use of non-
fossil fuel (solar, hydro and wind) as energy sources
for power generation in the power sector and enabling
energy efficient technologies through the concept of
green buildings in the construction sector.
The government, in association with private
players, is also raising energy awareness, changing
consumer behaviour, setting energy codes, and
evolving energy efficiency design and technologies.
To address the skilled workforce issues associated
with sustainable development, the Ministry of Skill
Development and Entrepreneurship has set up the
‘Skill Council for Green Jobs’. It is working towards
developing competencies of people in the domain
of renewable energy, sustainable development and
waste management.
Green jobs that exist over an array of occupational
profiles of skills and educational backgrounds
constitute entirely new type of jobs, but most build
on traditional professions and occupations.
With the aim of providing a greener economy
and creating environment friendly employment
opportunities, the government is also providing
impetus for green jobs as part of restructured growth
strategies under its ‘Make in India’ campaign. ‘Make
in India’ is designed to facilitate investment, ensure

Green SkillS 113

2020-21
India’s first modern faster innovation, enhance skill development,
metropolitan rail transport protect intellectual property and build best in
system, Delhi Metro, not only class manufacturing structures.
has helped commuters in Delhi
save on commuting time per Benefits of green jobs
day but has also become the The greening of economy presents a major
first rail-based methodology opportunity to start new businesses, develop
to garner 90,000 voluntary new markets and lower energy costs. Green jobs
carbon credits for improving
that contribute to protecting the environment
energy efficiency. It has not
only created jobs for engineers, and reducing carbon footprint are becoming a
drivers, station attendants, key economic driver of the twenty-first century.
signal staff, ticketing, Green jobs help:
construction and maintenance • increase the efficiency of energy and
workers but also resulted in raw material.
greening existing occupations • reduce greenhouse gas emissions.
and creating new occupations.
• control waste and pollution.
• protect and restore ecosystems.
• support adaptation to the effects of
climate change.

Green jobs in agriculture


Organic gardening and farming is the process by which
we can grow plants and crops in an environment
friendly way. It prevents toxic runoff as no synthetic
pesticides are used. It prevents water pollution and soil
contamination as no chemical is added
to the soil. By using organic methods
of gardening, one can prevent death of
insects, birds, critters and other beneficial
soil organisms. Organic fruits and
vegetables are free from chemical residues
of synthetic fertilisers, and hence, are good
for our health.
Farmers’ cooperatives are one of the
most effective means of reducing the
risk in agriculture and strengthening the
livelihoods of small and marginal farmers. The process
involves mobilising farmers into groups of 15–20
members at the village level (called Farmer Interest
Groups or FIGs) and building their associations to an
appropriate federating point, i.e., Farmer Producer
Organisations (FPOs). FPOs are farmers’ collectives

114 Employability SkillS – ClaSS Xii

2020-21
with membership consisting mainly of small or
marginal farmers.
Some green jobs in the agriculture sector are in
organic farming, integrated pest management, farm
mechanisation and agriculture tourism. The Krishi
Vigyan Kendras (KVKs) set up by the government,
can be utilised to provide support activities like
technology dissemination, training awareness to
the local youth and farmers for collection, storage
and reuse of agro-waste.
Green jobs in transportation
Use of energy-efficient vehicles and alternate fuels like
Compressed Natural Gas (CNG) can help minimise
greenhouse gas emissions. The new biofuel Policy
announced by the Government of India on 10 August 2018
focusses on initiatives for enhanced use of biomass so as
to improve the availability of ethanol through starch and
sugar-based feedstock, develop ethanol technologies
and increase the production of biodiesel for blending.
Biofuels produced directly or indirectly from organic
material, including BioCNG, Bio-methanol, etc., can
generate green jobs.
The Energy Efficiency Services Limited (EESL),
under the Ministry of Power, has launched an ‘electric
vehicle programme’, which aims towards offering a
comprehensive solution to facilitate the adoption of
disruptive technology in India. The EESL seeks to
create market for electric vehicle, a technology poised
to boost e-mobility in the country. These encompass
road, rail, sea and air based vehicles that use electric
drive and take electric charge from an external source,
or hydrogen in case of fuel cell electric vehicle. Some
electric vehicle technologies are hybridised with fossil
fuel engines (for example, plug-in hybrid electric
vehicles, or PHEVs), while others use only electric power
via a battery (battery electric vehicles). The emergence
of electric drives as an alternate to internal combustion
engines has opened opportunities for new entrants in
the automotive market. Skill training of entrepreneurs
in handling and maintenance of e-rickshaws can create
more green jobs in the transportation sector.

Green SkillS 115

2020-21
Green jobs in water conservation
There are green jobs in water harvesting and
conservation. Rooftop rainwater harvesting refers to the
process where rainwater is collected in tanks to be used
later. It can be installed in all houses and buildings. It
can also help increase the water table. Cycle-run water
pumps are being used instead of electricity-run pumps.
These do not consume electricity and provide a way for
people to exercise.
Some common green jobs in the agriculture sector
are related to water quality testing, water conservation,
water management, etc.
Using bamboo channels for drip irrigation is an
eco-friendly way to irrigate the land. It uses water
efficiently without any wastage. It is cheaper to build,
and after 2–3 years when the bamboo rots, it can be
added to the soil as manure.
Green jobs in solar and wind energy
Solar and wind power plants
provide clean energy. A Solar
Photovoltaic Installer installs
and maintains solar panels
in homes, businesses or land.
A solar lighting technician
assembles, tests and repairs
different types of solar
photovoltaic home lighting
system and streetlights. Some
common jobs in this sector are roofer, solar panel
installation technician and field technician.
Green news Green jobs in eco-tourism
India is one of the
few countries where Eco-tourism is intended to provide an experience to
forest and tree cover visitors to understand the importance of conserving
has increased in resources, reducing waste, enhancing the natural
recent years. The environment and reducing pollution. This helps improve
total forest and tree
cover is 24 per cent
public image as the visitors feel good about being in an
of the country’s environment friendly place. Green jobs in eco-tourism
geographical area. include eco-tour guides and eco-tourism operators.

116 Employability SkillS – ClaSS Xii

2020-21
Green news
Green jobs in building and construction The Indian Green
Houses and buildings are becoming environment friendly. Building Council
(IGBC), part of the
They use sustainable building material, and follow eco-
Confederation of
friendly construction processes and green operations. Indian Industry (CII),
Green building design provides an integrated approach was founded in the
to utilisation of renewable and non-renewable resources. year 2001. The IGBC
It is important that future green building programmes offers services, which
and projects are established with strategies to address include developing
new green building
skill issues, including appropriate training. Skill
rating programmes,
development has a strategic role to play in promoting the certification services
development of green buildings. It is essential that there and green building
are enough workers equipped with appropriate skills so training programmes.
as to ensure that green buildings are developed on a
large scale. Areas for green jobs in this sector include
construction, landscape, gardening, maintenance of
green components, water management, etc.
Green jobs in solid waste management
Solid waste is defined as any discarded solid fraction,
generated from domestic units, trade centres,
commercial establishments, industries, agriculture,
institutions, public services and mining activities.
The Ministry of Urban Development, Government of
India, has classified solid waste in 14 categories based
on the source of origin and type of waste, i.e., domestic,
municipal, commercial, industrial, institutional,
garbage, ash, street sweepings, dead animals,
construction and demolition waste, bulky, hazardous
and sewage waste.
Solid waste management system includes collection,
segregation, transportation, processing and disposal of
waste. Green jobs related to waste management are in
areas like e-waste recycling, solid waste management,
waste reduction, waste auditing, waste control, etc.
Green jobs in appropriate technology
Appropriate technology is small-scale technology
that is environment friendly and suited to local
needs. Examples of appropriate technology are
bike-powered or hand-powered water pumps, solar lamps
in streetlights, solar buildings, etc. It is the simplest
Green SkillS 117

2020-21
noteS technology that can get a job done in an environment
friendly manner with locally available resources. The
green jobs in appropriate technology may include areas,
such as biogas production, water treatment filtration,
farm mechanisation, rainwater harvesting, sanitation,
lighting, food production, refrigeration, etc.

Practical Exercise
Activity
Group discussion
Green jobs
Material required
Pen, paper, etc.
Procedure
• Form groups, depending on the number of students
present in a class.
• Every student will describe one green job that one would
like to do. Each one of them will make a list and share it
with the rest of the class.

Check Your Progress


A. Multiple choice questions
Read carefully all questions given below and choose the
correct option.
1. Rita’s children fall sick very often. They have cold and
cough every month. What should Rita do?
(a) Grow organic food in kitchen garden
(b) Use air purifiers with HEPA filters
(c) Keep them inside the house all the time
(d) Paint her house with non-VOC paint
2. Jaanvi’s children have grown up. They have a lot of
clothes that are too small for them now. What should
Jaanvi do with these old clothes?
(a) Throw them in the trash can
(b) Burn them
(c) Keep using them even though they are too small
(d) Donate them or make bags out of them
B. Short answer question
1. Name any two green jobs in the following sectors.
(i) Construction
(ii) Renewable energy

What Have You Learnt?


After completing this Session, you will be able to:
• identify green jobs in various industries and sectors.

118 Employability SkillS – ClaSS Xii

2020-21
SeSSIon 2: Importance of Green JobS noteS
You have learnt that jobs are understood as green when
people working in these areas help reduce adverse
environmental impacts, and help build environmentally,
economically and socially sustainable enterprises
and economies.
Limiting greenhouse gas emissions
Some of the greenhouse gases are Carbon dioxide,
methane, Nitrous oxide, ozone and chlorofluorocarbons
(CFCs). These are emitted due to burning of fossil
fuels, using vehicles and refrigerants, and carrying out
agricultural activities, etc. These gases can trap heat
from the earth and prevent it from escaping into outer
space. This causes the earth to heat, leading to ‘global
warming’. To reduce the emission of greenhouse gases,
people are working towards reducing the use of fossil
fuels by finding less polluting energy sources, such as
Compressed Natural Gas (CNG).
Minimising waste and pollution
Instead of only thinking about how to recycle or reuse
waste, we must work towards finding solutions on how
to reduce the amount of waste produced. This will help
in waste management.
In manufacturing plants and factories, managers try
to find various ways to reduce the amount of waste
produced at every step of the process. Here are some of
the ways.
• Reusing scrap material
For example, in paper mills, damaged rolls are
sent back to the beginning of the production
line, i.e., they are added as raw material. In
manufacture of plastic items, off-cuts and scrap
are re-incorporated into new products.
• Ensuring quality control
If the quality of products is maintained, there will
be a decrease in rejected products, thus, reducing
waste. Automated monitoring equipment are now
being used, which can help identify production
problems at an early stage.
Green SkillS 119

2020-21
noteS • Waste exchange
This is where the waste product of one process
becomes the raw material for another. It
represents the way of reducing waste disposal
through re-use.
• Managing e-waste
With advanced technology, we have also
encountered problems in managing e-waste like
old mobile phones, laptops and television sets.
It is important to have sustainable development
and plan judiciously for recycling e-waste.
• Use of eco-friendly material
Scientists have discovered various material,
which are eco-friendly, for example, banana leaf
and paper plates that are easily disposable, etc.
These must be made easily available and their
use needs to be encouraged.

Protecting and restoring ecosystems


Ecosystem is the community of living and non-living
beings existing together, and interacting with and
supporting each other. It is the perfect balance where
every species can survive. Human activities, such
as excess felling of trees can lead to destruction of
the ecosystem, causing climate change and natural
disasters, making it difficult for living beings to survive.
People are working now to help conserve the
existing ecosystems and restore the degraded ones,
using natural solutions. Forests and vegetation help
stabilise slopes, and therefore, reduce the risk of
landslides. Wetlands can help control floods. Avoiding
cutting of forests, planting more trees, investing in
soil health and restoration can control the emission of
greenhouse gases.
Adapting to the effects of climate change
Climate will change based on the damage already done.
Even though people are trying to control the emission
of greenhouse gases, global warming will be there due

120 Employability SkillS – ClaSS Xii

2020-21
to the damage already done in terms of felling of trees noteS
and using land for agriculture, etc. So, we have to adapt
to those changes. This means, we must find ways to
survive in the new climatic conditions. For example, if
there is weather forecast of less rain, farmers will need
to grow crops that can survive in drought conditions.
The Government of India launched the National
Action Plan on Climate Change (NAPCC) in June 2008
to deal with climate change and related issues. The
NAPCC comprises eight missions in specific areas of
solar energy, enhanced energy efficiency, habitat, water,
sustaining Himalayan ecosystems, forestry, agriculture
and strategic knowledge for climate change, which
address issues relating to mitigation of greenhouse
gases and adaptation to the adverse impacts of climate
change on environment, forests, habitat, water resources
and agriculture.

Practical Exercise
Activity 1

Poster making
Material required
Chart paper, colour pencils, pictures, etc.
Procedure
• Form groups depending on the number of children present
in a class.
• Collect pictures of green jobs and make a poster. Organise
an exhibition in the front gate of your school.

Activity 2

Tree plantation
Material required
Seeds, soil, water, gloves, etc.
Procedure
• Identify an area where you can plant a sapling.
Coordinate with your teacher for the kind of plant that
can thrive at the selected location. For example, there
are various plants that require less water. Now, plant a
suitable seed or sapling. Name it if you want. Make sure
that you water the plant regularly and take care of it.

Green SkillS 121

2020-21
noteS Check Your Progress
A. Multiple choice questions
Read carefully the questions given below and choose the
correct option(s).
1. There is a garbage bin in your canteen and it, generally,
gets filled beyond capacity every day. What should
you do?
(i) Ask the canteen management to get a bigger bin
(ii) Suggest ways to reduce the amount of
garbage collected
(iii) Throw garbage on the floor and walk away
(iv) Talk to your friends about the problem
(a) (i), (ii), (iii)
(b) (i), (ii)
(c) (i), (iii), (iv)
(d) (i), (iv)
2. In a steel factory, a lot of utensils are being made. The
manager finds a number of defective pieces, which have
to be discarded. How can the person minimise the waste?
(a) Give it to kabaadiwala or scrapdealer
(b) Dump it in a landfill site
(c) Send it back to the production line — to be melted
(d) Sell it in market
B. Short answer questions
1. List some ways by which we can reduce the amount of
waste generated.
2. Explain the importance of green jobs in reducing the
emission of greenhouse gases.

What have you learnt?


After completing this Session, you will be able to:
• explain the role and importance of green jobs.

122 Employability SkillS – ClaSS Xii

2020-21
Answer Key
Unit 1: Communication Skills
Session 1: Active Listening
A. Multiple choice questions
1. (b) 2. (a), 3. (c) 4. (d)

Session 2: Parts of Speech


A. Multiple choice questions
1. (b) 2. (d) 3. (d)
B. Fill in the blanks
(a) The boy is running.
(b) The girls are skipping.
(c) The girl is riding.
(d) Raju is drinking milk.
(e) The boy is studying.
(f) The dog is barking.
Session 3: Writing Sentences
A. Multiple choice questions
1. (a) 2. (d) 3. (d) 4. (b)
Unit 2: Self-management Skills

Session 3: Self-awareness

A. Multiple choice questions


1. (a) 2. (a) 3. (a) 4. (d)
Unit 3: Information and Communication Technology Skills

Session 1: Getting Started with Spreadsheet

A. Multiple choice questions


1. (a) 2. (b) 3. (d) 4. (c)
Session 2: Performing Basic Operations in a Spreadsheet
A. Multiple choice questions
1. (b) 2. (c)

Session 3: Working with Data and Formatting Text


A. Multiple choice questions
1. (b) 2. (a) 3. (d) 4. (d) 5. (c)
Session 4: Advanced Features in Spreadsheet
A. Multiple choice questions
1. (b) 2. (b) 3. (c)

2020-21
Session 5: Presentation Software
A. Multiple choice questions
1. (c) 2. (c) 3. (b)

Session 6: Opening, Closing, Saving and Printing a Presentation


A. Multiple choice questions
1. (a) 2. (c) 3. (c)

Session 7: Working with Slides and Text in a Presentation


A. Multiple choice questions
1. (c) 2. (c) 3. (a)

Session 8: Advanced Features used in Presentation


A. Multiple choice questions
1. (d) 2. (c) 3. (c)
Unit 4: Entrepreneurship Skills
Session 1: Entrepreneurship and Entreprenur

A. Multiple choice questions


1. (b) 2. (b) 3. (a)

Session 2: Barriers to Entrepreneurship


A. Match the situations in the columns to the
meaning of the word
a. (iii) b. (i) c. (ii)
B. Multiple choice questions
1. (b) 2. (b) 3. (a)

Session 3: Entrepreneurial Attitudes


A. Multiple choice questions
1. (c) 2. (b) 3. (b)

Session 4: Entrepreneurial Competencies


A. Match the situations to the type of attitude
that the entrepreneur is showing
a. (iii) b. (i) c. (iv) d. (ii)
Unit 5: Green Skills
Session 1: Green Jobs
A. Multiple choice questions
1. (b) 2. (d)

Session 2: Importance of Green Jobs


A. Multiple choice questions
1. (b) 2. (c)

124 Employability SkillS – ClaSS Xii

2020-21
Glossary
Ability: is the physical and mental skill to do something.
Active cell: is the one that is selected.
Alignment: refers to the arrangement of text (left, right or
center aligned).
Attitude: is a way of thinking or feeling about something.
Barrier: refers to a problem, rule or situation that prevents
somebody from doing something, or makes something impossible.
Bold text: means making a text darker and thicker.
Capital: refers to the money available for starting a
business venture.
Cell: is the place where a row and column intersect.
Cell range: is a range of cells that are selected.
Column: refers to the vertical arrangement of cells.
Competence: refers to the ability to do something well.
Decisiveness: refers to the ability to make the right decisions at the
right time.
Digital presentation: is a presentation made on a computer using
a software, which has text, images, video and audio, and various
other features to make it attractive.
Efficiency: is the ability to do things accurately, successfully and
without wasting the available resources.
Feedback: is an advice, criticism or information about how good or
useful something or somebody’s work is. It aims to help someone
improve one’s work.
Filter: refers to filtering data, which means selecting and displaying
few records out of the total list.
Formatting text: refers to changing the look, size, colour, etc., of
the text.
Formula Bar: is the place, where data or formula can be entered in
the selected cell.
Goal: is the aim or target one wants to achieve.
Initiative: is the ability to take charge and act in a situation
before others.
Interpersonal: is connected with relationships between
two people.
Interpersonal skills: are the competencies required to work with
two and more people.
Italicise text: means making the text appear slanting to
the right.
Layout: is the arrangement of text, images, shapes, etc.,
on a slide.

2020-21
Operator: is the symbol used in a computer to perform
mathematical functions, such as addition(+), subtraction(-),
multiplication(×) and division(÷)
Opportunity: is a chance to do something, generally, the right time
or moment to do something.
Organisational skills: are the ability to use one’s time, energy and
resources well to be able to achieve one’s goals.
Perseverance: is the ability to continue to do something, even when
it is difficult.
Risk: is a situation, which has a chance of failure.
Row: is a horizontal arrangement of cells.
Sorting data: means arranging data in a particular order, for
example in alphabetical order.
Stress: refers to the state of mental pressure, tension or anxiety.
Stress management: includes techniques aimed at controlling
a person’s stress level so that the person feels healthy and
positive again.
Underline text: means drawing a line under the text.
Venture: is a new business activity that, usually, involves risks.
Wrap text: means adjusting the text within a cell so that it is fully
visible without changing the column size.

126 Employability SkillS – ClaSS Xii

2020-21

You might also like