Web Application Class 12
Web Application Class 12
Web Application Class 12
Students Handbook
CLASS
XII
Price: ` 75/-
Copies: 5,000
Design & Layout : Multi Graphics, 8A/101, WEA Karol Bagh, New Delhi-110005
Phone: 011-25783846, 47503846
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
Authors
Dr. Manoj Kumar, Associate Professor & HOD (CSE)
Ambedkar Institute of Advanced Communication
Technologies & Research, Govt. of NCT of Delhi - Convener
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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:
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.
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:
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.
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?
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.
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.
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.
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.
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.
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?
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:
The following picture i.e. figure 1.29 shows a project with credits that appear at the end of
the project:
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.
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
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?
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.
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.
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.
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).
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.
Step 4: When Movie Maker is done exporting the film the finish screen will be seen like
this as shown in figure 1.35.
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.
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.
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.
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:
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_____________?
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).
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.
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.
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?
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.
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.
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".
We would require HTML Editor to edit the web page and Sound file that is to be
embedded in the system
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" />
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.
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>
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"/>
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&skin_color_1=-
145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />
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.
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.
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.
Important Points:
Embed tells the browser an embed sound is here -- go get the plug-in.
Remember, embed commands are associated with plug-ins.
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
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.
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 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.
<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:
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.
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 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 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 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.
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.
50
Figure-2.8
Dreamweaver will present us with an accessibility box. Use the title field to describe
the project.
Figure-2.9
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:
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.
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.
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:
<script language="javascript">
document.write('<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(' <param name="movie"
value=http://www.wondershare.com/pro/flash-gallery-factory-deluxe.html />');
document.write(' <param name="quality" value="high" />');
document.write(' <param name="wmode" value="window" />');
document.write(' <param name="allowScriptAccess" value="always" />');
document.write(' <param name="allowFullScreen" value="True" />');
document.write(' <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"></embed>');
document.write('</object>');
</script>
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.
54
Standardization
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
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.
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;
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.
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!");
The following table describes the relationship between JavaScript versions and
ECMAScript editions.
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.
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.
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.
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.
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
62
The Logical Operators: There are following logical operators supported by JavaScript
language. Assume variable A holds 10 and variable B holds 20 then:
The Bitwise Operators: There are following bitwise operators supported by JavaScript
language. Assume variable A holds 2 and variable B holds 3 then:
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,
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.
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.
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
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
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.
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:
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.
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:
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
Output:
Figure – 3.1
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
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.
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.
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
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…….
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
98
{
document.write(fruits[i]+"<br>");
}
</script>
</body>
</html>
Output:
Figure – 3.26
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
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
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
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)
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 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.
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.
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>
112
for(var icount = 1; icount < 4; icount++)
{
Total += icount;
sum[icount] = Total;
document.write(sum[icount]+"<br>");
}
document.write(Total);
</SCRIPT>
</BODY>
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?
Q.8 Write a program in javascript using various data types to find the round off integer
values?
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
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!
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
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.
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.
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.
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).
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
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.
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
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.
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
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.
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.
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
Assessment:
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).
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.
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).
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:
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.
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..
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
You can now decide to remove items that may possibly slow down a page.
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
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.
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.
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.
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.
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:
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.
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
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.
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.
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
3) Copy and paste it in another location such as a pen drive or to a folder on another
computer.
144
Exercise:
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.
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.
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
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.
Use the help file (F1) to learn about using Adobe Dreamweaver.
147
Exercise:
Perform the following activities till you are confident:
S. No. Activities
Assessment:
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
1) Visit any of the website mentioned above (or use a search engine to locate one)
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.
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).
149
Figure-4.44: Cool Web Template from CSSPORTAL.COM
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.
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
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.
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
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.
T Tune yourself to the timing of the speaker, i.e., wait for the
speaker to finish, and then, respond.
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.
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.
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
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
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
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.
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.
Nouns Verbs
girl, girls, boy, milk, dog, skipping, riding,
student running, studying,
drinking, barking
(a) The ____________ is
_________________.
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.
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.
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
Types of sentences —
Category I
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.
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
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.
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.
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.
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
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.
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.
Self-management SkillS 27
2020-21
noteS Check Your Progress
A. Short answer questions
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.
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.
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.
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
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.
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.
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.
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
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.
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
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
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
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.
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.
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.
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.
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.
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.
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.
Figure 3.8: Saving the spreadsheet Figure 3.9: Saving in other formats
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.12: Printing the spreadsheet Figure 3.13: Print dialog box
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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) +
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
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
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.
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.
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.
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
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.
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 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’.
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
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.
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.
2020-21
Check Your Progress noteS
A. Multiple choice questions
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.
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.
2020-21
noteS the text to the center of the page. ‘Justify’ aligns the text
to the right and left margins.
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.
2020-21
6. The text should appear as given in Figure 1. noteS
7. Now, type ‘Google’.
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.
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.
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
5. Click on Open.
In this way, you can insert images in your presentation
slides and make it more interesting.
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.
2020-21
Check Your Progress noteS
A. Multiple choice questions
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/
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 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.
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.
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.
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
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.
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/
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.
Situations Word
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.
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
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.
INTERPERSONAL ORGANISATIONAL
DECISIVENESS INITIATIVE SKILLS PERSEVERANCE SKILLS
DECISIVENESS
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
Take action in
that situation!
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.
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
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
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.
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!
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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 3: Self-awareness
2020-21
Session 5: Presentation Software
A. Multiple choice questions
1. (c) 2. (c) 3. (b)
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.
2020-21