The document provides information about programming and development tools for an introduction to programming course. It discusses Word information layout and how to create documents using text and images. Formatting text, inserting clipart and pictures, and drawing objects in Word are demonstrated. The objectives are to create documents using text layout, workbooks using data layout, and presentations using presentation layout, and publish them as web pages.
Programming & Development Tools Introduction to Programming - Create and publish documents, workbooks and presentations as web pages
1. Programming & Development Tools Introduction to Programming
UNIT
1.3
Introduction to Programming
Process and Information Layout
OBJECTIVES
This unit explains about various information layouts.
At the end of this unit, you will be able to
Create documents using text and information layout
Create workbooks using data information layout
Create simple presentations using presentation layout
Publish the documents, workbooks and presentation as web
pages
Benchmark Standard
Create and publish documents, workbooks and presentations as
web pages.
Create interactive web pages and presentations and execute them
successfully.
Process and Information Layout 1.3-1
2. Programming & Development Tools Introduction to Programming
Let us Revise!
1. List any four tags used in Microsoft Script Editor.
2. Body tag specifies the ___________ and _______ of the document.
3. ___________ tag is used for creating paragraphs.
Introduction
Microsoft Office XP is a feature-rich, office productivity suite developed by
Microsoft Corporation. It provides a family of programs or applications that
help in performing almost all the basic tasks in a working environment,
effectively and efficiently. The applications in the Office suite include powerful
tools and user-friendly interface that enables you to create professional-
looking documents, manipulate data, develop eye-catching presentations,
maintain databases etc. In this unit you will learn about various office
applications such as Word, Excel and PowerPoint.
1.3.1 Word Information Layout
Definition: Word information layout helps in creating documents.
1.3.1 (A) Introduction to Word Processor
Word processor is an application that enables the user to create documents
that contain text and pictures. There are many word processors available in
market which includes Microsoft Word, Star Office and WordPerfect.
Microsoft Word is one of the most widely used word processor application. It
is a product of Microsoft Office. It provides user with the tools that enable to
write, edit and format text and pictures. You can create notes, memos, letters,
business documents, books and web pages.
1.3.1 (B) Text and Image Information
You know that word processors are used to create documents. It is important
to create documents that are attractive. For this purpose you will have to
change the way the document appears and insert images along with the text.
Formatting Text
Formatting refers to changing the appearance of the text in the document.
You can enhance the appearance of the document by aligning the text,
changing the colour, size and style of the text in the document. To format any
text, select the text, choose Format and the respective formatting option as
shown in the Figure 1.3.1.
Process and Information Layout 1.3-2
3. Programming & Development Tools Introduction to Programming
Figure 1.3.1: Format Menu
Hands-On!
Perform the following steps to format a document:
1. Open the document Malaysia.doc. Figure 1.3.2 shows the document
window.
Figure 1.3.2: Document Window
Process and Information Layout 1.3-3
4. Programming & Development Tools Introduction to Programming
2. Open the Microsoft Script Editor and observe that the text appears
within the paragraph tags. Figure 1.3.3 shows the script editor.
Figure 1.3.3: Microsoft Script Editor
3. Select the text in the document and apply Arial font. Figure 1.3.4
shows the document window after changing the font.
Figure 1.3.4: Document Window after Changing the Font
Process and Information Layout 1.3-4
5. Programming & Development Tools Introduction to Programming
4. In the script editor, shown in Figure 1.3.5, you will notice that a new
style namely font-family is added in the code. This will change the font
of the text.
Figure 1.3.5: Script Editor Before and after Changing the Font
5. To apply bold format to the title, select the title and apply bold
formatting. Figure 1.3.6 shows the document window after applying
bold formatting.
Process and Information Layout 1.3-5
6. Programming & Development Tools Introduction to Programming
Figure 1.3.6: Document Window After Applying Bold Formatting
6. In Figure 1.3.7, you notice that a new tag <b> has been added in the
code. This will make the text appear bold.
Process and Information Layout 1.3-6
7. Programming & Development Tools Introduction to Programming
Figure 1.3.7: Script Editor Before and After Applying Bold Formatting
7. To change the font size of the title, select the title and change the font
size to 18. Figure 1.3.8 shows the document window after changing the
font size.
Process and Information Layout 1.3-7
8. Programming & Development Tools Introduction to Programming
Figure 1.3.8: Document Window After Changing the Font Size
8. In Figure 1.3.9, you notice that a new style font-size added to the code.
This will change the font size.
Figure 1.3.9: Script Editor Before and After Changing the Font Size
Process and Information Layout 1.3-8
9. Programming & Development Tools Introduction to Programming
9. To align the title to centre, select the title and click on Center button
( ) on the Formatting toolbar.
10. Document will appear as shown in Figure 1.3.10.
Figure 1.3.10: Document Window After Aligning the Title to Centre
11. In Figure 1.3.11, notice that a new style text-align added to the code to
align the title to the centre.
Process and Information Layout 1.3-9
10. Programming & Development Tools Introduction to Programming
Figure 1.3.11: Script Editor Before and After Applying Center Align
12. To raise a text above the base line and make the font appear small is
called superscript. To apply this option, select the text as shown in
Figure 1.3.12.
Process and Information Layout 1.3-10
11. Programming & Development Tools Introduction to Programming
Figure 1.3.12: Selecting the Text to Apply Superscript Effect
13. Choose Format Font and check the Superscript check box in the
Effects section. Document appears as shown in Figure 1.3.13.
Figure 1.3.13: Document Window After Applying Superscript Effect
14. In Figure 1.3.14, notice that a new tag <sup>…</sup> added to the
code. This tag enables to added superscript effect to the text.
Process and Information Layout 1.3-11
12. Programming & Development Tools Introduction to Programming
Figure 1.3.14: Script Editor Before and After Applying Superscript Effect
15. Save and close the document.
Tip
To switch between document window and script editor, you can use key combination of
Alt+Tab.
Note
Whenever you make changes in the document, click on Refresh button to see the change in
code.
Process and Information Layout 1.3-12
13. Programming & Development Tools Introduction to Programming
Activity 1.3.1 (a)
Perform the following steps and identify the change in code in the script
editor.
Step 1: Open a new document.
Step 2: Open the script editor and observe the code.
Step 3: Type your name in the document window.
Step 4: Identify the change in code in the script editor.
Step 5: Change the font to Arial and identify the change in code.
Activity 1.3.1 (b)
Perform the following steps and identify the change in code in the script
editor.
Step 1: Open a new document.
Step 2: Open the script editor and observe the code.
Step 3: Type the text Fall seven times, stand up eight in the document window.
Step 4: Identify the change in code in the script editor.
Step 5: Change the font size to 20 and the colour to red.
Step 6: Identify the change in code.
Activity 1.3.1 (c)
Perform the following steps and identify the change in code in the script
editor.
Step 1: Open a new document.
Step 2: Open the script editor and observe the code.
Step 3: Type the text log10 in the document window.
Step 4: Identify the change in code in the script editor.
Step 5: Select the text 10 and apply subscript effect to it.
Step 6: Identify the change in the document and the code.
Process and Information Layout 1.3-13
14. Programming & Development Tools Introduction to Programming
Lab Exercise
Lab Exercise 1: Open a blank document. Type the following text and save the document with
the name Text.doc.
Life is wonderful
Identify the change on source code.
Lab Exercise 2: Open the file Text.doc. Underline the text and save the document. Identify
the change in source code.
Inserting Images
To enhance the document, you can insert objects such as shapes, pictures,
and charts. This will make the document more impressive and more attractive.
Images come in various formats such as .jpg and .bmp.
Table 1.3.1 describes the difference between .jpg and .bmp files:
The .jpg Files The .bmp Files
Joint Photographic Experts Bitmap
Group
Resolution will be low and Resolution will be high and
hence file size is less hence file size is more
Used in Web Used in Windows
environment
Table 1.3.1: Difference Between .jpg and .bmp Files
Inserting ClipArt
Definition: Clipart is a collection of images that can be inserted into the
document.
There are many ways through which you can insert ClipArt into a document.
The easiest way is to use the menu bar.
Hands-On!
Perform the following steps to insert ClipArt:
1. Open the document Malaysia.doc.
2. Open the Microsoft Script Editor.
Process and Information Layout 1.3-14
15. Programming & Development Tools Introduction to Programming
3. Switch to the document and choose Insert Picture ClipArt.
(Refer Figure 1.3.15). Insert Clip Art task pane is displayed (Refer
Figure 1.3.16).
Figure 1.3.15: Inserting ClipArt
Figure 1.3.16: Insert ClipArt Task Pane
4. In the Search text text box, type the file name or the description of the
clip you want to insert.
Process and Information Layout 1.3-15
16. Programming & Development Tools Introduction to Programming
5. For example, you want to insert the picture of a phone to be inserted
into the document, on the Search text box, type the text globe.
6. Click on the Search button.
7. From the Results box (Refer Figure 1.3.17) click on the picture you
want to insert.
Figure 1.3.17: Result Box
8. Figure 1.3.18 shows the document window after inserting the ClipArt.
Process and Information Layout 1.3-16
17. Programming & Development Tools Introduction to Programming
Figure 1.3.18: Document Window After Inserting the ClipArt
9. In Figure 1.3.19, notice that a new tag <img> is added in the code.
This tag is used for inserting the image into the document. You will also
notice that the description of the image is given in the XML code (green
colour above the tag).
Process and Information Layout 1.3-17
18. Programming & Development Tools Introduction to Programming
Figure 1.3.19: Script Editor After Inserting ClipArt
10. Save and close the document.
Note
To modify the search or to start a new search, below the Result box, click on the Modify
button.
Tip
You can use Clip Organizer in the Insert Clip Art task pane, to view and organise all the clips.
Note
Generally Clip Art will have the extension .wmf.
Process and Information Layout 1.3-18
19. Programming & Development Tools Introduction to Programming
Inserting Picture from File
Use menu bar to insert a picture into the document.
Hands-On!
Perform the following steps to insert picture:
1. Open the document Malaysia.doc.
2. Click at the end of the paragraph and press Enter.
3. Open the Microsoft Script Editor.
4. Switch to the document and choose Insert Picture From FiIe.
(Refer Figure 1.3.20). Insert Picture dialog box appears as shown in
Figure 1.3.21.
Figure 1.3.20: Inserting a Picture From File
Process and Information Layout 1.3-19
20. Programming & Development Tools Introduction to Programming
Figure 1.3.21: Insert Picture Dialog Box
5. From the Look in drop-down list, choose the location where the picture
is present.
6. Left click on the picture with the name Map.
7. Click on the Insert button.
8. Figure 1.3.22 shows the document window after inserting the picture.
Process and Information Layout 1.3-20
21. Programming & Development Tools Introduction to Programming
Figure 1.3.22: Document Window After Inserting the Picture
9. In the script editor, the code changes as shown in the Figure 1.3.23.
Process and Information Layout 1.3-21
22. Programming & Development Tools Introduction to Programming
Figure 1.3.23: Script Editor After Inserting the Picture
10. Save and close the document.
Activity 1.3.2 (a)
Perform the following steps and identify the change in code in the script
editor.
Step 1: Open a new document.
Step 2: Open the script editor and observe the code.
Step 3: Switch to the document and choose Insert Picture ClipArt.
Step 4: In the Search text box, type the text phone and click on the Search
button.
Step 5: From the Results box click on the picture you want to insert.
Step 6: Identify the change in the document and the code.
Activity 1.3.2 (b)
Perform the following steps and identify the change in code in the script
editor.
Step 1: Open a new document.
Step 2: Open the script editor and observe the code.
Step 3: Switch to the document and choose Insert Picture From FiIe.
Process and Information Layout 1.3-22
23. Programming & Development Tools Introduction to Programming
Step 4: Choose the picture data file Building.
Step 6: Click on the Insert button.
Step 7: Identify the change in the document and the code.
Lab Exercise
Lab Exercise 3: Open the blank document. Insert any clipart of your choice and identify the
change in source code.
Lab Exercise 4: Open the blank document. Insert the picture data file Building. Identify the
change in source code.
Drawing Objects
Word allows you to draw objects such as circle, square and line. To draw an
object you must use the drawing toolbar.
Hands-On!
Perform the following steps to draw objects:
1. Open a new document.
2. To view the drawing toolbar, choose View Toolbars Drawing.
Drawing toolbar appears as shown in Figure 1.3.24. Table 1.3.2 lists
the commonly used drawing tools.
Figure 1.3.24: Drawing Toolbar
Button Description
Used for drawing line.
Used for drawing arrow.
Used for drawing rectangle.
Used for drawing oval.
Used for drawing text box.
Table 1.3.2: Commonly Used Drawing Tools
Process and Information Layout 1.3-23
24. Programming & Development Tools Introduction to Programming
3. To draw a rectangle, choose click on the rectangle button. Drawing
canvas will appear.
4. Draw a rectangle. Document appears as shown in Figure 1.3.25.
Figure 1.3.25: Document Window After Drawing the Rectangle
5. Similarly, draw a line and two circles as shown in Figure 1.3.26.
Process and Information Layout 1.3-24
25. Programming & Development Tools Introduction to Programming
Figure 1.3.26: Document Window After Drawing a Line and Circles
6. Now choose the text button and click within the circles and write the
text Beaches and Hill Stations as shown in Figure 1.3.27.
Figure 1.3.27: Document Window Typing the Text
Process and Information Layout 1.3-25
26. Programming & Development Tools Introduction to Programming
7. Save the document with the name Choice.doc.
8. Close the document.
Activity 1.3.3
Open the data file Choice.doc and observe the source code that appears in the
script window.
Inserting a File into Another File
It is possible to insert a file into another file in Word.
Hands-On!
Perform the following steps to insert a file into another file:
1. Open the document Malaysia.doc.
2. Place the insertion point at the end of the document and press Enter.
3. To insert from another file, choose Insert File as shown in Figure
1.3.28. Insert File dialog box appears as shown in Figure 1.3.29.
Figure 1.3.28: Inserting from File
Process and Information Layout 1.3-26
27. Programming & Development Tools Introduction to Programming
Figure 1.3.29: Insert File Dialog Box
4. Choose the file Choice.doc and click on Insert button. File is inserted as
shown in the Figure 1.3.30.
Figure 1.3.30: Document Window After Inserting the File
Process and Information Layout 1.3-27
28. Programming & Development Tools Introduction to Programming
5. Save and close the document.
Activity 1.3.4
Open the file Malaysia.doc and identify the change in source code after
inserting a file into it.
1.3.1 (C) Single Document Information Layout
It is possible to divide a document into number of columns. The documents
you have created so far had single column. You will now learn to divide a
document into two columns.
Hands-On!
Perform the following steps to divide the document into two columns:
1. Open the document Beaches.doc.
2. Go to page 2.
3. To divide the column into two, choose Format Columns. Columns
dialog box appears as shown in Figure 1.3.31.
Figure 1.3.31: Columns Dialog Box
4. Choose Two column format from the Presets section and This point
forward from the Apply To drop-down list. Click on OK button. This
Process and Information Layout 1.3-28
29. Programming & Development Tools Introduction to Programming
will apply two column format starting from page 2. Document will
appear as shown in Figure 1.3.32.
Figure 1.3.32: Document Window with Two Columns
5. Initially the document had two sections (two pages). When the
document is divided two columns, you will notice that a new section is
added in the code as shown in Figure 1.3.33.
Process and Information Layout 1.3-29
30. Programming & Development Tools Introduction to Programming
Figure 1.3.33: Script Window After Dividing the Document into Two
Columns
Activity 1.3.5
Perform the following steps:
Step 1: Open a blank document.
Step 2: Divide the document into four columns and identify the change in
source code.
Changing the Picture Layout
When you insert an image into a document, the image remains in line with the
text. In other words, it lies in the same layer as that of a text. By changing the
picture layout you can move the picture to the desired position in the
document.
Hands-On!
Perform the following steps to change the layout of the inserted image:
1. Open the document Malaysia.doc.
2. Select the Globe image.
Process and Information Layout 1.3-30
31. Programming & Development Tools Introduction to Programming
3. Choose Format Picture. Format Picture dialog box appears as
shown in Figure 1.3.34.
Figure 1.3.34: Format Picture Dialog Box
4. Select the Layout tab as shown in Figure 1.3.35.
Figure 1.3.35: Layout Tab
Process and Information Layout 1.3-31
32. Programming & Development Tools Introduction to Programming
5. Choose Tight from the Wrapping Style and click on Ok button.
6. Move the picture as shown in Figure 1.3.36. The text will automatically
adjust as you move the picture.
Figure 1.3.36: Document Window After Formatting the Picture
7. Open the source code and identify the change.
Inserting Bookmark
Definition: Bookmark is used for marking a particular location in a document.
When working in long documents, you might find it difficult to find a particular
section in the document. Bookmark helps in searching the location easily.
Hands-On!
Perform the following steps to insert bookmark:
1. Open the document Beaches.doc.
2. Click on the title Teluk Chempedak.
Process and Information Layout 1.3-32
33. Programming & Development Tools Introduction to Programming
3. To insert the bookmark, choose Insert Bookmark as shown in
Figure 1.3.37. Bookmark dialog box appears as shown in Figure
1.3.38.
Figure 1.3.37: Inserting Bookmark
Figure 1.3.38: Bookmark Dialog Box
4. In the Bookmark name text box, give the name as Teluk.
5. Click on Add button.
6. In Figure 1.3.39, notice that a new tag <a> will be added to the code.
This is an anchor element that helps in adding hyperlink to an object.
Process and Information Layout 1.3-33
34. Programming & Development Tools Introduction to Programming
Figure 1.3.39: Script Editor After Adding the Bookmark
7. Similarly add a bookmark to the topic Chendor Beach with the name
Chendor and identify the change in the code.
8. Now move to the beginning of the document.
9. To move to the location Teluk Chempedak, choose Edit Goto. Find
and Replace dialog box appears as shown in Figure 1.3.40.
Figure 1.3.40: Find and Replace Dialog Box
Process and Information Layout 1.3-34
35. Programming & Development Tools Introduction to Programming
10. From the Go to what list box, choose Bookmark as shown in Figure
1.3.41.
Figure 1.3.41: Choosing Bookmark
11. From the Enter bookmark name list box, select Teluk and click on Go
To button. The cursor automatically moves to the specified location.
12. Save and close the document.
Tip
Shortcut key to invoke Go To dialog box is Ctrl+G.
Inserting Hyperlink
Definition: Hyperlink is an element that links one object to another either in
the same document or across documents.
Hands-On!
Perform the following steps to create a hyperlink within a document:
1. Open the document Beaches.doc.
2. On the first page select the text Teluk Chempedak.
3. To insert the hyperlink, choose Insert Hyperlink. Insert Hyperlink
dialog box appears as shown in Figure 1.3.42.
Process and Information Layout 1.3-35
36. Programming & Development Tools Introduction to Programming
Figure 1.3.42: Insert Hyperlink Dialog Box
4. From the Link to section, choose Place in This Document option.
5. From the Bookmark section (refer Figure 1.3.43), choose Teluk and
click on OK button.
Figure 1.3.43: Choosing Bookmark
6. Similarly, for Chendor Beach choose Chendor.
7. Holding the control key click on Teluk Chempedak. Notice that the cursor
automatically moves to the specified location.
Process and Information Layout 1.3-36
37. Programming & Development Tools Introduction to Programming
8. In Figure 1.3.44, notice that the anchor tag has been added to the code
to create the hyperlink.
Figure 1.3.44: Script Editor After Inserting Hyperlink
9. Save and close the document.
Tip
Shortcut key to invoke Insert Hyperlink dialog box is Ctrl+K.
Lab Exercise
Lab Exercise 5: Open the data file Hill Stations.doc. Starting from page two convert the
document into two column format. Save the document as Hill Stations1.doc.
Lab Exercise 6: Open the file Hill Stations1.doc. Create hyperlink for the corresponding hill
stations and identify the change in code.
Process and Information Layout 1.3-37
38. Programming & Development Tools Introduction to Programming
1.3.1 (D) Multiple Documents Information Layout
You are familiar with creating hyperlinks with a document. You will now learn
to create hyperlink across documents.
Hands-On!
Perform the following steps to create hyperlink across documents:
1. Open the document Malaysia.doc.
2. Select the text Beaches present within the text box.
3. Open the Insert Hyperlink dialog box.
4. Select the location of the file from Look in text box.
5. Select the file Beaches.doc and click on OK button.
6. Holding the control key click on the text Beaches. Notice that the file
Beaches.doc opens.
7. Save and close the file.
Activity 1.3.6
Open the data file Beaches.doc and identify the changes in code that have
occurred.
Hands-On!
Perform the following steps to create hyperlink to open another application:
1. Open the document Malaysia.doc.
2. Click on the globe picture.
3. Open the Insert Hyperlink dialog box.
4. Select the application mspaint present in the location
c:windowssystem32mspaint.exe and click on OK button.
5. Holding the control key click on the picture. Notice that the mspaint
application opens.
6. Figure 1.3.45 shows the script editor window.
Process and Information Layout 1.3-38
39. Programming & Development Tools Introduction to Programming
Figure 1.3.45: Script Editor After Inserting Hyperlink
7. Save and close the application.
1.3.1 (E) Publishing the Document as Web Page
Now that you have created a document, you can convert this document into
HTML format and publish the document on web.
Hands-On!
Perform the following steps to publish the document as web page:
1. Open the file Malaysia.doc.
2. Choose File Save as Web Page. Save the file. This file will have the
file extension as .html.
3. Close the application
4. Go to the location of the file and open the file. The file will open on the
browser as shown in Figure 1.3.46.
Process and Information Layout 1.3-39
40. Programming & Development Tools Introduction to Programming
Figure 1.3.46: Document Published as Web Page
5. To view the source code, choose View Source (in the browser). The
source code will be displayed in a notepad as shown in Figure 1.3.47.
Process and Information Layout 1.3-40
41. Programming & Development Tools Introduction to Programming
Figure 1.3.47: Source Code
Self-Check Exercise 1.3.1
1. Identify the purpose of the following tags:
a. <b>
b. <img>
c. <a>
2. How do you align a text to the centre of the line?
3. List any two formats of image file.
4. To raise a text above the base line and make the font appear small is called
__________.
5. It is possible to insert only ClipArt images in a document (T/F).
6. How will you link two documents?
Process and Information Layout 1.3-41
42. Programming & Development Tools Introduction to Programming
1.3.2 Data Information Layout
Definition: Data information layout in creating spreadsheets.
Spreadsheet is an application that has rows and columns, which contain text,
numbers and formulas. There are many spreadsheet applications that are
available which includes Microsoft Excel, Lotus 1-2-3 and Quattro.
Microsoft Excel is one of the most widely used spreadsheet application. It
provides various tools to perform calculations, analysis and other related
operations.
1.3.2 (A) Spreadsheet Basics
When you open Microsoft Excel, the application window appears as shown in
Figure 1.3.48.
Cell Number Box Active Cell Formula Box
Scroll Buttons Worksheet Tabs Cell Column Row
Figure 1.3.48: Excel Workbook
Each excel file can be considered as a workbook, which is a collection of
worksheets. A worksheet consists of number of rows and columns present in
Process and Information Layout 1.3-42
43. Programming & Development Tools Introduction to Programming
it. The intersection of a row and a column is defined as a cell. There are
65,536 rows and 256 columns in a worksheet. Each column is represented
with an alphabet and each row with a number. These alphabets and numbers
help in identifying the corresponding cell is termed as label. Active cell will be
highlighted with a rectangular box and the active cell number is displayed in
the cell number box. To move from one sheet to another sheet in a workbook,
use either the worksheet tabs or the scroll buttons.
1.3.2 (B) Single Excel Sheet
You know that a workbook is a collection of worksheets. You will now learn to
work on a single worksheet.
Hands-On!
Perform the following steps to format the text and change the column width in
the worksheet:
1. Open the file Form4_ Results.xls. The worksheet will appear as shown in
the Figure 1.3.49.
Process and Information Layout 1.3-43
44. Programming & Development Tools Introduction to Programming
Figure 1.3.49: Worksheet
2. Open the script editor and observe the code.
3. Select the text Test 1 and change the font size to 20 and make it bold.
4. Identify the change in source code as shown in Figure 1.3.50.
Process and Information Layout 1.3-44
45. Programming & Development Tools Introduction to Programming
Figure 1.3.50: Source Code Before and After Formatting
5. Now to change the width of the column C, click anywhere on column C.
6. Choose Format Column Width. Column Width dialog box
appears as shown in Figure 1.3.51.
Figure 1.3.51: Column Width Dialog Box
7. Change the width to 18 and click on OK button. In Figure 1.3.52, notice
the change in the column width.
Process and Information Layout 1.3-45
46. Programming & Development Tools Introduction to Programming
Figure 1.3.52: Worksheet After Adjusting the Width
8. Save and close the workbook.
Tip
You can adjust the column width by placing the cursor directly over the vertical borders of the
columns you want to modify.
Process and Information Layout 1.3-46
47. Programming & Development Tools Introduction to Programming
Entering Formulas
Excel allows you to perform various calculations easy with the help of built-in
formulas. This is one feature of excel that makes it powerful. Table 1.3.3 list
the commonly used formulas.
Formula Name Description
SUM Calculates the total of all the selected values.
AVERAGE Calculates the average of the selected values.
MAX Returns the largest value for the selected values.
MIN Returns the smallest value for the selected values.
COUNT Counts the number of cells that contains the specified
value.
PRODUCT Multiplies all the selected values and returns their
product.
Table 1.3.3: List of Commonly Used Formula
Hands-On!
Perform the following steps to perform calculations such as sum and average:
1. Open the file Form4_ Results.xls.
2. To find the total marks scored by Mahathir Mohamad, click on the cell
I14.
3. To apply the formula, choose Insert Function (Refer Figure 1.3.53).
Insert Function dialog box appears as shown in Figure 1.3.54.
Figure 1.3.53: Inserting Function
Process and Information Layout 1.3-47
48. Programming & Development Tools Introduction to Programming
Figure 1.3.54: Insert Function Dialog Box
4. Choose SUM from the list box and click on OK. Function Argument
dialog box appears as shown in Figure 1.3.55.
Figure 1.3.55: Function Arguments Dialog Box
5. As the columns E14 to H14 are already select, click on OK button. The
sum is displayed as shown in Figure 1.3.56.
Process and Information Layout 1.3-48
49. Programming & Development Tools Introduction to Programming
Figure 1.3.56: Worksheet After Finding the Sum
6. Figure 1.3.57 shows the source code after adding the formula.
Figure 1.3.57: Source Code After Entering the Formula
Process and Information Layout 1.3-49
50. Programming & Development Tools Introduction to Programming
To find the sum for other students, simply copy the content of the cell I14 and
paste it in the other cells. This will copy the formula in that cell and apply it to
the other cells.
7. To calculate the average of the student, click on the cell K14.
8. On the Formula Bar, type the formula as =average(e14,f14,g14) (Refer
Figure 1.3.58), where e14, f14 and g14 are the cells for which you are
calculating the average. Press Enter. The average will be calculated.
Figure 1.3.58: Typing the Formula in the Formula Bar
9. Copy the formula to the other cells. The worksheet will appear as
shown in the Figure 1.3.59.
Process and Information Layout 1.3-50
51. Programming & Development Tools Introduction to Programming
Figure 1.3.59: Worksheet After Calculating the Average
10. Save and close the workbook.
Activity 1.3.7
Perform the following steps:
Step 1: Open the data file Sales.xls.
Step 2: Calculate the total number of Music CDs sold by typing the formula
=sum(f11,f18,f25) on the cell F34.
Step 3: Copy this formula to other cells to calculate the total number of Movies
and Games CDs sold.
Step 4: Save the workbook and identify the change in code.
Formatting the Cells
It is possible to change the way a text or number that appears in a cell by
formatting the cell. This is to enhance the appears of the worksheet.
Process and Information Layout 1.3-51
52. Programming & Development Tools Introduction to Programming
Hands-On!
Perform the following steps to format the cell:
1. Open the file Form4_ Results.xls.
2. To convert the numbers (average) to two decimal places, select the
cells as shown in Figure 1.3.60.
Figure 1.3.60: Selecting the Cells for Formatting
3. Choose Format Cells. Format Cells dialog box appears as shown
in Figure 1.3.61.
Process and Information Layout 1.3-52
53. Programming & Development Tools Introduction to Programming
Figure 1.3.61: Format Cells Dialog Box
4. Select Number from the Category list box.
5. Enter the number of decimal places as 2 in the Decimal places text
box (Refer Figure 1.3.62) and click on OK button. The worksheet will
appear as shown in Figure 1.3.63.
Figure 1.3.62: Setting the Decimal Place to Two
Process and Information Layout 1.3-53
54. Programming & Development Tools Introduction to Programming
Figure 1.3.63: Worksheet After Setting the Decimal Place
6. Figure 1.3.64 shows the source code.
Figure 1.3.64: Source Code After Setting the Decimal Place
Process and Information Layout 1.3-54
55. Programming & Development Tools Introduction to Programming
7. Save and close the workbook.
Activity 1.3.8
Perform the following steps:
Step 1: Open the data file Perso_Detail.xls.
Step 2: Enter your name, date of birth (dd/mm/yyyy) and birth time in the
corresponding columns.
Step 3: Change the format of the F14 such that DOB will be displayed as
<dd>-<month in words>-<yy> by choosing Format Cells Date
14-Mar-01.
Example: 19/10/1986 19-oct-86
Step 4: Change the format of the F15 such that time of birth will be displayed
in 24hrs clock by choosing Format Cells Time 13:30.
Example: 1:30 pm 13:30
Step 5: Save the file and identify the changes in the code.
Lab Exercise
Lab Exercise 7: Open the data file Drinks.xls and perform the following:
a. In the Total column, calculate Cost/Item * Total Item.
b. Calculate the total cost and store it in the column J21.
c. Apply the formatting and change the columns F and J such that the
cost will be displayed as R<cost>. Key: Use Format Cells.
d. Identify the changes in the code.
Creating Charts
It is easy to understand and analyse data in pictorial form rather than text.
Charts are the graphical representation of the data.
Hands-On!
Perform the following steps to create a chart:
1. Open the file Form4_ Results.xls.
2. To create a chart for analysing the marks scored by students in
English, select the cells that has the necessary data as shown in
Figure 1.3.65.
Process and Information Layout 1.3-55
56. Programming & Development Tools Introduction to Programming
Figure 1.3.65: Selecting the Desired Data for the Chart
3. Choose Insert Chart. Chart Wizard dialog box appears as shown in
Figure 1.3.66. You can choose the necessary type of chart from the
Chart type section.
Figure 1.3.66: Chart Wizard
Process and Information Layout 1.3-56
57. Programming & Development Tools Introduction to Programming
4. Choose Column chart and click on Next button. Second screen of the
chart wizard appears as shown in Figure 1.3.67. This screen will help
you to choose the data you want for the chart. As you have already
selected the data, you can skip this step and click on Next button.
Third screen of the chart wizard appears as shown in Figure 1.3.68.
Figure 1.3.67: Second Screen of Chart Wizard
Figure 1.3.68: Third Screen of Chart Wizard
Process and Information Layout 1.3-57
58. Programming & Development Tools Introduction to Programming
5. Give the title as English Marks in the Chart Title text box and click on
Next button. Final screen of the chart wizard appears as shown in
Figure 1.3.69.
Figure 1.3.69: Final Screen of Chart Wizard
6. Click on Finish button. Chart will appear as shown in Figure 1.3.70.
Figure 1.3.70: Inserted Chart in the Worksheet
Process and Information Layout 1.3-58
59. Programming & Development Tools Introduction to Programming
7. You can move the chart by simply dragging and place it in the desired
location.
8. In the script editor notice that the chart details will be enclosed within
XML code.
9. Save the workbook as Form4_ Results_chart.xls and close the workbook.
Lab Exercise
Lab Exercise 8: Open the workbook Form4_ Results.xls. Create bar chart for the Maths
marks.
1.3.2 (C) Multiple Excel Sheets
You are now familiar working with single excel sheet. You will now learn to
work with multiple excel sheets.
When you have data in two excel sheets in a workbook, you can perform
calculation using the data present in both the sheets. This can be achieved by
using the format sheetname!cellname.
Hands-On!
In a work book, sheet1 stored the marks scored in test1 and sheet2 stores the
marks scored in test2. Perform the following steps to compare the marks
obtained by each student in the English tests and store the maximum mark in
the third sheet:
1. Open the file Form4_ Results_Multiple.xls. Notice that in sheet1, test1
results are displayed and in sheet2, test2 results are displayed as
shown in Figure 1.3.71.
Process and Information Layout 1.3-59
60. Programming & Development Tools Introduction to Programming
Figure 1.3.71: Sheet1 and Sheet2
2. To find the maximum marks scored in English by each student, open
sheet3.
3. Select the cell E14.
4. In the formula bar (Refer Figure 1.3.72), type the formula as
=max(sheet1!e14,sheet2!e14). English mark of Mahathir Mohamad in test 1
is present in the e14 cell of sheet 2. Similarly English mark of Mahathir
Mohamad in test 2 is present in the e14 cell of sheet2.
Process and Information Layout 1.3-60
61. Programming & Development Tools Introduction to Programming
Figure 1.3.72: Inserting the Formula in the Formula Bar
5. Press Enter. Notice that when comparing the two marks 56 and 66, 66
is the maximum mark obtained which I stored in the cell E14.
6. Copy the formula and paste it for other cells. Sheet3 will be displayed
as shown in Figure 1.3.73.
Process and Information Layout 1.3-61
62. Programming & Development Tools Introduction to Programming
Figure 1.3.73: Sheet Three With the Maximum Marks Obtained
7. Open the script editor. To view the source code of sheet three, double-
click on sheet3 in the Project Explorer window as shown in the Figure
1.3.74.
Figure 1.3.74: Project Explorer in Script Editor
Process and Information Layout 1.3-62
63. Programming & Development Tools Introduction to Programming
8. Save and close the workbook.
Note
If the Project Explorer window is not visible, choose View Project Explorer.
Activity 1.3.9
Perform the above steps for the Form5_ Results_Multiple.xls.
Creating Hyperlink Across Worksheets
It is possible to create hyperlink across worksheets with a workbook.
Hands-On!
Perform the following steps to create hyperlink across worksheets in a work
book:
1. Open the workbook Form4_ Results_Hyperlink.xls. Notice that sheet1
has two options Test1 and Test2. Sheet 2 and 3 has test results of
test1 and test2 as shown in Figure 1.3.75.
Process and Information Layout 1.3-63
64. Programming & Development Tools Introduction to Programming
Figure 1.3.75: Work Sheets
2. To create hyperlink between sheets, highlight the cell D17 in sheet1.
3. Choose Insert Hyperlink. Insert Hyperlink dialog box appears as
shown in Figure 1.3.76.
Figure 1.3.76: Insert Hyperlink Dialog Box
Process and Information Layout 1.3-64
65. Programming & Development Tools Introduction to Programming
4. Choose Place in This Document from the Link to Section.
5. Choose Sheet2 from Cell Reference and click on OK button as shown
in Figure 1.3.77.
Figure 1.3.77: Selecting Sheet2
6. Similarly, link the cell D19 to sheet3.
7. Now click on the cell D17. This will open sheet2.
8. Figure 1.3.78, highlights the changes in the code of sheet1 after
inserting the hyperlink.
Process and Information Layout 1.3-65
66. Programming & Development Tools Introduction to Programming
Figure 1.3.78: Script Editor
9. Save and close the workbook.
1.3.2 (D) Multiple Workbook
You can create hyperlinks across workbooks.
Hands-On!
Perform the following steps to create hyperlink across workbooks:
1. Open the workbook Test_ Results.xls. The worksheet appears as shown
in Figure 1.3.79.
Process and Information Layout 1.3-66
67. Programming & Development Tools Introduction to Programming
Figure 1.3.79: Worksheet
2. Highlight the cell C11 and choose Insert Hyperlink. Insert
Hyperlink dialog box appears.
3. Choose the file Form4_ TResults.xls and click on OK button.
4. Similarly hyperlink cell C12 to Form5_ TResults.xls.
5. Click on cell C11. Notice that the file Form4_TResults.xls opens.
6. Open the script editor and identify the change in code as shown in
Figure 1.3.80.
Process and Information Layout 1.3-67
68. Programming & Development Tools Introduction to Programming
Figure 1.3.80: Script Editor After Linking the Documents
7. Save and close the workbook.
1.3.2 (E) Publishing the Workbook as Web Page
Now that you have created a workbook, you can convert this workbook into
HTML format and publish the document on web.
Hands-On!
Perform the following steps to publish the workbook as web page:
1. Open the file Test_Results.xls.
2. Choose File Save as Web Page. Save the file. This file will have the
file extension as .html.
3. Close the application.
4. Go to the location of the file and open the file. The file will open on the
browser as shown in Figure 1.3.81.
Process and Information Layout 1.3-68
69. Programming & Development Tools Introduction to Programming
Figure 1.3.81: Workbook Published as Web Page
5. To view the source code, choose View Source (in the browser). The
source code will be displayed in a notepad.
Self-Check Exercise 1.3.2
1. Intersection of a row and a column is called:
a. Cell
b. Field
c. Data
d. Formula
2. The cell labeled F2 refers to
a. column F row 2
b. row F column 2
c. Function key F2
d. Formula in the cell
3. It is possible to insert image files into Excel sheet (T/F).
4. Using the data present in sheet 2, can you perform calculations in sheet 1.
5. How will you insert chart into an Excel sheet?
Process and Information Layout 1.3-69
70. Programming & Development Tools Introduction to Programming
1.3.3 Presentation Information Layout
Definition: Presentation information layout helps in creating presentations.
Presentation software is an application that will help in adding visual effects to
the presentation. It allows you to insert pictures and graphics. You can enrich
the presentation by adding sound effects and animating the presentation. It is
very easy to customise the presentation. That is, it is easy to decide where a
picture or text should appear.
Microsoft PowerPoint is widely used presentation software. It is a product of
Microsoft Office. It helps in creating handouts, charts and other instructional
materials. But this application is widely used for presenting electronic
presentations.
1.3.3 (A) Understanding the Interface
When you open Microsoft PowerPoint, the application window appears as
shown in Figure 1.3.82.
Slides and
Outline
Tabs
Slide
Working
Area
Views
Notes
Window
Figure 1.3.82: PowerPoint
1. Slide Working Area is the area where you enter text and insert
images.
2. Slides and Outline Tabs is the area where the miniature version of
the slides and the text typed on the slides can be viewed.
Process and Information Layout 1.3-70
71. Programming & Development Tools Introduction to Programming
3. Views are screen layouts, which can be used to edit and view the
slides when creating a presentation.
4. Notes Window is the area where you can add notes to your slides.
This will help you to remember key pointes in the slide.
Views
In addition to the slide show, PowerPoint offers three more screen layouts.
These layouts are useful when constructing the presentation. You can select
the screen layout by choosing View menu < Screen layout> (Refer Figure
1.3.83).
Figure 1.3.83: Various Views Available in PowerPoint
Normal View
In Normal view, the screen is divided into three partitions. The screen will
have the outline on the left, slide on the main window and notes at the bottom
(Refer Figure 1.3.84). You will be able to work on one slide at a time in this
view. This view can be made use of when organising things on a slide and
adding notes to the same.
Process and Information Layout 1.3-71
72. Programming & Development Tools Introduction to Programming
Figure 1.3.84: Normal View
Notes Page View
In notes page view, you will be able to view the slide along with the notes
(Refer Figure 1.3.85). This view can be made use of for adding notes to the
slide.
Process and Information Layout 1.3-72
73. Programming & Development Tools Introduction to Programming
Figure 1.3.85: Notes Page View
Slide Sorter View
In slide sorter view, you will be able to see the miniature version of all the
slides (Refer Figure 1.3.86).
Process and Information Layout 1.3-73
74. Programming & Development Tools Introduction to Programming
Figure 1.3.86: Slide Sorter View
This view is useful for rearranging slides and adding transition effects to the
slides. To rearrange the slides, follow the given steps:
Step 1: If you want to move the 3rd slide before the 2nd slide, on the slide
sorter view, select the 3rd slide.
Step 2: Hold the left mouse button and drag the slide before the 2nd slide and
leave the button.
1.3.3 (B) Single .ppt Slide
A presentation may contain a single or multiple slides. Most of the time, a
presentation has more than one slide. You will now learn to work on single
slide.
Hands-On!
To create a simple presentation, follow the given steps:
1. Open the PowerPoint application.
Process and Information Layout 1.3-74
75. Programming & Development Tools Introduction to Programming
2. Step 2: Choose Blank Presentation from the New Presentation task
pane.
3. Step 3: The first slide in the presentation is always the Title slide. This
is for adding the title for your presentation. To add a title, simply click
on the area, which says Click to add title (Refer Figure 1.3.87). Type
the title for the presentation as Malaysian Festivals. Click anywhere in
the slide, to come out of the text box.
Figure 1.3.87: Title Slide
4. Step 4: If you wish to add a subtitle, you can follow the same steps as
mentioned earlier. If you want to delete this subtitle text box, simple
click on the dotted lines and press Delete key.
5. Step 5: Save the presentation with the name Malaysian Festivals.ppt.
6. Step 6: To run the slide show, choose Slide Show View Show as
shown in Figure 1.3.88. This will begin the slide show.
Figure 1.3.88: To Run the Slide Show
Process and Information Layout 1.3-75
76. Programming & Development Tools Introduction to Programming
7. Step 7: Open the script editor and identify the change in code as
shown in the Figure 1.3.89.
Figure 1.3.89: Script Editor
Note
You can start the slide show by clicking on the slide show button ( ) present in the left-
bottom corner of the window.
1.3.3 (C) Multiple .ppt Slides
When you are creating the presentations, you will be using more than one
slide. You will now learn to insert and work with multiple slides.
Hands-On!
To insert a new slide, perform the following steps:
1. Open the presentation Malaysian Festivals.ppt.
2. To insert a new slide, choose Insert New Slide. In the outline tab,
notice that you will now have two slides in the presentation as shown in
Figure 1.3.90.
Process and Information Layout 1.3-76
77. Programming & Development Tools Introduction to Programming
Figure 1.3.90: Inserting New Slide
3. Give the title as Malaysia is the Land of Festivals.
4. Remove the bullet from the text box given below. To remove the bullet,
click anywhere on the text box and press Backspace.
5. Type the following content in the text area.
Malaysia has a rich mixture of cultural races. These include Malays,
Indians, Chinese and others. The variety of religions found is a
direct reflection on the number of festivals.
6. To view the slide, choose Slide Show View Show.
7. To move to the next slide press Enter or right arrow key.
8. To move to the previous slide press the Backspace or left arrow key.
9. When the last slide is reached, the show will automatically end.
10. To end the show in between, press Esc key.
11. You can also use Slide Navigator to navigate through the slides. To
use slide navigator, right-click anywhere on the screen (in the slide
show). The short-cut menu appears as shown in Figure 1.3.91.
Process and Information Layout 1.3-77
78. Programming & Development Tools Introduction to Programming
Figure 1.3.91: Short-Cut Menu
12. Choose Go Slide Navigator. Slide Navigator dialog box appears
as shown in Figure 1.3.92). Choose the slide title and press Go To.
Figure 1.3.92: Slide Navigator
13. Save the presentation and observe the script editor as shown in Figure
1.3.93.
Process and Information Layout 1.3-78
79. Programming & Development Tools Introduction to Programming
Figure 1.3.93: Script Editor
Tip
To insert a new slide, press Ctrl+M.
Lab Exercise
Lab Exercise 9: Create a presentation with the following specifications and identify the
change in code:
• The presentation must include 3 slides in it.
• The first slide must have the title as Animals.
• The second slide must have the title as Carnivorous.
• The third slide must have the title as Herbivorous.
• Insert two slides between the 2nd and 3rd.
• Title them as Lion and Tiger.
• Similarly insert two slides after Herbivorous.
• Title them as Elephant and Horse.
• Insert a slide after Animals and title it as What is an Animal?
• Add the following text in it:
Process and Information Layout 1.3-79
80. Programming & Development Tools Introduction to Programming
Animal is a living creature different from Plants and Humans.
It can be categorized as:
Carnivorous
Herbivorous
• On the Carnivorous slide, type the following text.
Carnivorous is a flesh-eating animal.
• On the Herbivorous slide, type the following text.
Herbivorous is a plant-eating animal.
• Save the presentation and name it as Animals.
• View the slide show.
• You can now close the presentation and exit from the application.
Slide arrangements are as follows:
Slide 1 - Title Slide – Animals
Slide 2 - What is an Animal?
Slide 3 - Carnivorous
Slide 4 - Lion
Slide 5 - Tiger
Slide 6 - Herbivorous
Slide 7 - Elephant
Slide 8 - Horse
Design Template
Template refers to preset format. The font size, the font colour, the
background colour and such things are already defined. When you apply this
template, the slides are automatically formatted. You can apply design
template to a presentation at the time of creation by choosing From Design
Template from the New Presentation task pane as shown in Figure 1.3.94.
Process and Information Layout 1.3-80
81. Programming & Development Tools Introduction to Programming
Figure 1.3.94: Choosing Design Template From New Presentation Task
Pane
Hands-On!
To add design template to the existing presentation perform the following
steps:
1. Open the file Malaysian Festivals.ppt.
2. To apply design template to this presentation, choose Format Slide
Design. Slide Design task pane appears as shown in Figure 1.3.95.
Figure 1.3.95: Slide Design Task Pane
Process and Information Layout 1.3-81
82. Programming & Development Tools Introduction to Programming
3. In the Slide Design task pane, choose the template Fireworks.
4. Save the presentation and identify the change in the project explorer as
in Figure 1.3.96. You will notice that TitleMaster1 is added. This is for
the first (title) slide.
Figure 1.3.96: Project Explorer
Notice the difference in the template for the title slide and the other
slide as shown in Figure 1.2.97.
Figure 1.3.97: Slides
5. Close the presentation.
Note
To change the colour of the existing design template, use Colour Schemes in the Slide
Design task pane.
Activity 1.3.10 (a)
Process and Information Layout 1.3-82
83. Programming & Development Tools Introduction to Programming
Perform the following steps;
Step 1: Open the PowerPoint application.
Step 2: Choose From Design Template from the New Presentation task
pane.
Step 3: Choose the Design Template Glass Layers form the Slide Design task
pane.
Step 4: Include another slide to the presentation and observe the template.
Step 5: Save the presentation as My_Template.ppt and close.
Activity 1.3.10 (b)
Perform the following steps;
Step 1: Open My_Template.ppt presentation.
Step 2: Switch to Slide Design task pane by choosing Format Slide
Design.
Step 3: Choose Curtain Call template.
Step 4: Save the presentation.
Slide Layout
Slide layout will show how things are arranged on a slide. That is, where a
text should appear, where to insert an image etc. You can change the layout
of an existing slide by selecting the slide and choosing Format Slide
Layout.
Hands-On!
To apply slide layout for a slide, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. To insert a new slide, select the second slide and choose Insert
New Slide or click on in the Standard toolbar. Slide Layout
task pane appears as shown in Figure 1.3.98.
Process and Information Layout 1.3-83
84. Programming & Development Tools Introduction to Programming
Text Area
Title
Picture
Figure 1.3.98: Slide Layout
3. Choose the layout (Title, Text, and Content) from the Slide Layout
task pane.
4. Similarly, insert two more slides and apply the layouts.
5. Title the slides 3, 4 and 5 as Hari Raya Puasa, Chinese New Year and
Deepavali respectively.
6. Identify the change in code as shown in Figure 1.3.99.
Process and Information Layout 1.3-84
85. Programming & Development Tools Introduction to Programming
Figure 1.3.99: Script Editor Before and After Changing the Layout
7. On the text area of slide 3, type the following:
Hari Raya Puasa is one of the most important festival celebration for
Muslims.
It signifies the end of the fasting month of Ramadan.
8. On the text area of slide 4, type the following:
Chinese New Year is the most important festival for the Chinese.
This is the time when spirits are appeared and offerings are made to Gods.
9. On the text area of slide 5, type the following:
Deepavali is a Hindu festival.
It is the festival of lights.
10. Save and close the presentation.
Process and Information Layout 1.3-85
86. Programming & Development Tools Introduction to Programming
Activity 1.3.11
Perform the following steps:
Step 1: Open My_Template.ppt presentation.
Step 2: Insert three new slides by choosing Insert New Slide.
Step 3: Select the first slide.
Step 4: Choose Format Slide Layout and apply Title Only layout.
Step 5: Similarly, apply Title, Text and Clip Art layout for the second slide.
Step 6: Apply Title, Media Clip and Text layout to the third slide.
Step 7: Apply Picture Only layout to the last slide.
Step 8: Save the presentation and identify the change in code.
Step 9: Close the presentation.
Slide Master
Assume that you need to change the style of all the slides in a presentation.
You will have to go through each slide to do so. Instead, you can use Slide
Master to change the style of all the styles. Slide master is an element of the
design template that stores all the information about the template. Any change
in the slide master reflects in global change. In other words, it changes in all
the slides.
Hands-On!
To change the font of the title in the slides, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. To open the slide master, choose View Master Slide Master
(Refer Figure 1.3.100).
Process and Information Layout 1.3-86
87. Programming & Development Tools Introduction to Programming
Figure 1.3.100: Opening Slide Master
Slide Master View dialog box opens along with the master slide as shown in
the Figure 1.3.101.
Figure 1.3.101: Slide Master
Process and Information Layout 1.3-87
88. Programming & Development Tools Introduction to Programming
3. On the slide master, select the title text box and change the font to
Bookman Old Style. Also apply bold formatting.
4. Similarly, on the title master, select the title text box and change the
font to Bookman Old Style. Also apply bold formatting.
5. On the Slide Master View dialog box, click Close Master View.
6. Notice that the changes occur in all the slides.
7. Save and close the presentation.
Inserting Picture
To enhance the presentation, you can insert pictures into sides.
Hands-On!
To insert a picture in the slide, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. Select the third slide. This slide will have the title as Hari Raya Puasa.
3. Click on picture ( ) button present in the slide. The Insert Picture
dialog box appears.
4. Choose the file Hari Raya Puasa and click on Insert button.
5. Similarly, in slide 4 and 5, insert the pictures Chinese New Year and
Deepavali.
6. Identify the change in code.
7. Save and close the presentation.
Lab Exercise
Lab Exercise 10: To the Animals presentation, which you have created in your previous lab
session, make the following changes and identify the change in code:
• On the title slide, in the subtitle text area, type the following text:
Project done by
< Your name >
• Change the colour of the title Animals to red and that of subtitle text to
blue.
• Title must be bold.
• For rest of the slides, the title should be left align and bold.
• On the text area of Lion slide, type the following text:
Process and Information Layout 1.3-88
89. Programming & Development Tools Introduction to Programming
o A large carnivorous mammal.
o A brave person is referred as Lion.
• On the text area of Tiger slide, type the following text:
o A large carnivorous mammal.
o An aggressive person is referred as Tiger.
• On the text area of Elephant slide, type the following text
o A large herbivorous mammal.
o A person who can remember things is referred as Elephant.
• On the text area of Horse slide, type the following text
o A hoofed mammal.
o The engine power is measured in terms of horsepower.
• Move the Horse slide before Elephant and Tiger slide before Lion.
• On the Carnivorous slide, add the following note:
o Some examples are Tiger, Lion and Panther.
• On the Herbivorous slide, add the following note in the notes window:
o Some examples are Horse, Elephant and Giraffe.
• On the Tiger slide, add the following note in the notes window:
o Mammal refers to warm-blooded animal.
• Apply the design template, Stream.
• Change the layout of the slides with the title Tiger, Lion, Horse and
Herbivorous, respectively, to Title, Content and Text format.
• Change the title font to Book Antiqua in all the slides except for the
title slide.
• In the title slide, change the title colour to green.
• Insert the picture data files Lion, Tiger, Elephant and the Horse in the
corresponding slides.
• Save the presentation.
• View the slide show.
• Close and exit the application.
Animating Objects
To enhance the presentation and to make the presentation more interesting
and active, you can animate the objects on the slides. Animation is used to
bring objects to view in a sequential manner.
Process and Information Layout 1.3-89
90. Programming & Development Tools Introduction to Programming
Warning
Do not use too much animation effect, as it will make the presentation bulky and also it will
reduce the professionalism of the presentation.
To animate an object, you can either use the predefined set of animation
effects, which already exist or you can define you own animation settings.
Animation Schemes
Animation Schemes are predefine set of animation effects. That is, the
animation effects for the slide and its objects are already defined. To use the
predefine animation schemes, follow the given steps:
1. Select the slide to which you want to apply the animation scheme.
2. Choose Slide Show Animation Schemes as shown in Figure
1.3.102.
Figure 1.3.102: Choosing Animation Schemes From Slide Show Menu
3. In the Slide Design task pane, choose the animation scheme you want
to apply (Refer Figure 1.3.103).
Process and Information Layout 1.3-90
91. Programming & Development Tools Introduction to Programming
Figure 1.3.103: Selecting Animation Schemes From Slide Design Task
Pane
Notice that when you select the animation effect from the Slide Design task
pane, you will be able to see the preview of the effect on the slide.
Custom Animation
When you use the predefined set of animation effects, the same effect is
applied to all the objects and the slide. If you want to change this predefine
set or if you would like to define your own set, you can use custom animation.
This will allow you to customize your own animations.
Hands-On!
To apply animation to the presentation, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. Select the first slide, title slide, from the Slides tab.
3. Click on the title.
Process and Information Layout 1.3-91
92. Programming & Development Tools Introduction to Programming
4. Choose Slide Show Custom Animation. Custom Animation task
pane appears as shown in the Figure 1.3.104.
Figure 1.3.104: Custom Animation Task Pane
5. In the Custom Animation task pane, choose Add Effect Entrance
More Effects Crawl In as shown in the Figure 1.3.105.
Process and Information Layout 1.3-92
93. Programming & Development Tools Introduction to Programming
Figure 1.3.105: Choosing Animation Form Add Effect Drop-down List
Box
6. Select the second slide.
7. Click on the title and choose Add Effect Entrance More Effects
Wipe.
8. Click on the text area and choose Add Effect Entrance More
Effects Grow and Turn.
9. Click on the picture and choose Add Effect Entrance More
Effects Zoom.
10. Similarly, apply the animation effects for the other slides also.
11. Save the presentation and view the slide show.
12. Identify the change in the code as shown in the Figure 1.3.106.
Process and Information Layout 1.3-93
94. Programming & Development Tools Introduction to Programming
Figure 1.3.106: Script Editor Before and After Apply Animation
Figure 1.3.106 show the change in code for the animation effect of the picture
in slide 5.
Note
You can still customise the animation effect by adjusting the Modify Effect in the Custom
Animation task pane.
Process and Information Layout 1.3-94
95. Programming & Development Tools Introduction to Programming
Animating Slide Transition
You learnt to animate the objects. Similarly, you can also animate a slide. You
can specify how a slide should enter into the show. This can be achieved
thought slide transition effect.
Hands-On!
To apply slide transition, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. Choose Slide Show Slide Transition. Slide Transition task pane
appears as shown in Figure 1.3.107.
Figure 1.3.107: Slide Transition Task Pane
3. Choose Cover Right effect from the Slide Transition task pane.
4. Click on Apply to All Slides button.
5. View the slide show.
Process and Information Layout 1.3-95
96. Programming & Development Tools Introduction to Programming
6. Save the presentation and identify the change in source code as
shown in Figure 1.3.108.
Figure 1.3.108: Script Editor Before and After Applying Transition Effect
7. Close the presentation.
Note
If you want to apply different transition effect to each slide, do not click Apply to All Slides
button. Instead select each slide and apply transition effect.
Process and Information Layout 1.3-96
97. Programming & Development Tools Introduction to Programming
Lab Exercise
Lab Exercise 11: To the Animals presentation, which you have created in your previous lab
session, make the following changes and identify the change in code:
• Apply the effect Raise Up to the title in each slide.
• Apply the effect Unfold to the text area in each slide.
• Apply the transition effect Random Bars Horizontal to the slides.
Action Buttons
Action buttons are buttons that is used for navigation purpose. They can also
be used for creating hyperlinks. You can create hyperlinks within the
presentation or across presentations using these action buttons.
Hands-On!
To create hyperlink within the presentation using action buttons, perform the
following steps:
1. Open the file Malaysian Festivals.ppt.
2. To create action buttons, choose Slide Show Action Buttons. A
menu with different buttons appears as shown in the Figure 1.3.109.
Figure 1.3.109: Action Buttons Menu
3. Select the Home button. Mouse cursor changes to a crosshair.
4. Place the cursor where you want to draw the button, holding the left
mouse button drag the mouse and release the button. Action Settings
dialog box appears as shown in Figure 1.3.110.
Process and Information Layout 1.3-97
98. Programming & Development Tools Introduction to Programming
Figure 1.3.110: Action Settings Dialog Box
5. The button you have placed is a Home button, which by default will
take you to the first slide in the presentation. Click OK button.
6. Similarly, place Beginning, Back, Forward and End buttons as shown
in Figure 1.3.111.
Process and Information Layout 1.3-98
99. Programming & Development Tools Introduction to Programming
Figure 1.3.111: Action Buttons Placed on the Slide
7. Copy the buttons to the other slides.
8. Save the presentation and run the slide show.
9. Identify the change in the code as shown in Figure 1.3.112.
Process and Information Layout 1.3-99
100. Programming & Development Tools Introduction to Programming
Figure 1.3.112: Script Window Before and After Placing the Action
Buttons
10. Close the presentation.
Process and Information Layout 1.3-100
101. Programming & Development Tools Introduction to Programming
Hands-On!
To create hyperlink to another presentation using action button, perform the
following steps:
1. Open the file Malaysian Festivals.ppt.
2. To create action buttons, choose Slide Show Action Buttons. A
menu with different buttons appears.
3. Choose Custom button and place it on the 5th slide as shown in the
Figure 1.3.113. Action Settings dialog box appears.
Figure 1.3.113: Custom Button Placed on 5th Slide
4. Click on Hyperlink to radio button and choose Other PowerPoint
Presentation from the drop-down list box. Hyperlink to Other
PowerPoint Presentation dialog box appears as shown in Figure
1.3.114.
Process and Information Layout 1.3-101
102. Programming & Development Tools Introduction to Programming
Figure 1.3.114: Hyperlink to Other PowerPoint Presentation Dialog Box
5. Choose Other Festivals.ppt from the data file and click OK button.
6. Click OK button on the Action Settings dialog box.
7. Save and Run the presentation.
8. Identify the change in code and close the presentation.
Hands-On!
To create hyperlink to web sites, perform the following steps:
1. Open the file Other Festivals.ppt.
2. Select the text Mooncake Festival and choose Insert Hyperlink.
Insert Hyperlink dialog box appears.
Process and Information Layout 1.3-102
103. Programming & Development Tools Introduction to Programming
3. Select Browsed Pages option and type
http://www.geographia.com/malaysia/holmooncake.html in the Address
drop-down list box as shown in Figure 1.3.115.
Figure 1.3.115: Insert Hyperlink Dialog Box
4. Click OK button.
5. Similarly, hyperlink Gawai Festival and Christmas to
http://www.geographia.com/malaysia/holgawai.html and
http://www.geographia.com/malaysia/holchristmas.html respectively.
6. Save the presentation and run the slide show.
7. Identify the change in code as shown in Figure 1.3.116 and close the
presentation.
Process and Information Layout 1.3-103
104. Programming & Development Tools Introduction to Programming
Figure 1.3.116: Script Window Before and After Inserting Hyperlink
Lab Exercise
Lab Exercise 12: To the Animals presentation, include the action buttons to navigate through
slides and identify the change in codes.
Pack and Go Option
Pack and Go option helps you to pack your presentation, so that you can run
the presentation on another computer. When you pack your presentation,
other files that are linked to this presentation will automatically be included.
Process and Information Layout 1.3-104
105. Programming & Development Tools Introduction to Programming
Hands-On!
To pack the presentation, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. Choose File Pack and Go. Pack and Go Wizard appears as shown
in the Figure 1.3.117.
Figure 1.3.117: Pack and Go Wizard
3. Click on Next button. Pick files to pack page appears as shown in
Figure 1.3.118. You can choose the files you wish to pack in this page.
Process and Information Layout 1.3-105
106. Programming & Development Tools Introduction to Programming
Figure 1.3.118: Pick files to pack Page
4. To pack the active presentation, click Next button. Choose
destination page appears as shown in Figure 1.3.119. You can
choose the destination where you want to save you packed file.
Figure 1.3.119: Choose destination Page
5. Click on Choose destination radio button and click on Browse button.
Choose Directory dialog box appears as shown in Figure 1.3.120.
Process and Information Layout 1.3-106
107. Programming & Development Tools Introduction to Programming
Figure 1.3.120: Choose Directory Dialog Box
6. Choose the directory where you want to save the files and click on
Select button.
7. Click on Next button. Links page appears as shown in Figure 1.3.121.
This page will automatically include all the files that are linked to the
presentation.
Process and Information Layout 1.3-107
108. Programming & Development Tools Introduction to Programming
Figure 1.3.121: Links Page
8. Click on Next button. Viewer page appears as shown in Figure
1.3.122. This page allows you to include PowerPoint Viewer If the
destination computer does not have PowerPoint installed.
Figure 1.3.122: Viewer Page
9. Click on Next button. Finish page appears as shown in Figure 1.3.123.
Process and Information Layout 1.3-108
109. Programming & Development Tools Introduction to Programming
Figure 1.3.123: Finish Page
10. Click on Finish button. PowerPoint will pack the presentation and save
it in the specified destination. You can unpack this presentation in the
destination computer and run the presentation.
Note
To run the presentation on another computer, you can choose floppy drive as destination in the
Choose destination page of the Pack and Go Wizard.
Lab Exercise
Lab Exercise 13: Pack the presentation Animals in a floppy and run it in a different machine.
Publishing Presentation as Web Page
You can publish the presentation as web page.
Hands-On!
To publish the presentation as web page, perform the following steps:
1. Open the file Malaysian Festivals.ppt.
2. Choose File Save as Web Page. Save As dialog box appears.
3. Choose the destination and click on Save button. Presentation will be
saved as a web page.
Process and Information Layout 1.3-109
110. Programming & Development Tools Introduction to Programming
4. Open the web page from its destination. Presentation appears as
shown in figure 1.2.124.
Figure 1.3.124: Presentation on Web
5. Identify the source code of the presentation.
Lab Exercise
Lab Exercise 14: Publish the presentation Animals on web.
Self-Check Exercise 1.3.3
1. List the steps to start the slide show.
2. Slide navigator helps in navigating through slides in normal view (T/F).
3. ____________ refers to preset format.
Process and Information Layout 1.3-110
111. Programming & Development Tools Introduction to Programming
Technical Terminologies
Animation - A technique used to bring objects to view in a sequential
manner.
Bookmark - An identity used for marking a particular location in a
document
Cell - The intersection of a row and a column.
ClipArt - The collection of images provided by Office applications
that can be inserted into the document.
Design Template - A file that contains all the preset formats for a
presentation.
Formatting - The technique used for changing the appearance of the
text in the document.
Hyperlink - An element that links one object to another either in the
same document or across documents.
Label - The alphabets and numbers that help in identifying the
corresponding cell.
Slide Layout - The template that shows how things are arranged on a
slide.
Slide Master - An element of the design template that stores all the
information about the template.
Superscript - An effect that raises the text above the base line.
Template - A file that defines the layout of the document.
Workbook - A collection of worksheets.
Worksheet - A sheet that consists of number of rows and columns to
enter data.
Summary
In this unit, you learnt that:
Word information layout helps in creating documents.
Microsoft Word is one of the most widely used word processor
application.
Formatting refers to changing the appearance of the text in the
document.
To raise a text above the base line and make the font appear small
is called superscript.
Images come in various formats such as .jpg and .bmp.
Process and Information Layout 1.3-111
112. Programming & Development Tools Introduction to Programming
Clipart is a collection of images that can be inserted into the
document.
Bookmark is used for marking a particular location in a document
It is possible to link pages within a document and across documents
using hyperlink.
Hyperlink is an element that links one object to another either in the
same document or across documents.
Data information layout helps in creating spreadsheets.
Workbook is a collection of worksheets.
A worksheet consists of number of rows and columns present in it.
The intersection of a row and a column is defined as a cell.
Alphabets and numbers help in identifying the corresponding cell is
termed as label.
Presentation information layout helps in creating presentations.
A presentation can have one or more slides.
Design template is a file, which contains all the preset formats for a
presentation.
Slide master is an element of the design template that stores all the
information about the template.
Slide layout will show how things are arranged on a slide.
Animation is used to bring objects to view in a sequential manner.
Action buttons are used for navigation purpose.
Pack and Go option helps to pack the presentation, so that you can
run the presentation on another computer.
Assignment
1. What is a bookmark?
2. How do you insert a hyperlink across documents?
3. What is the need for formatting the text?
4. Describe the following functions:
a. SUM
b. MAX
c. COUNT
5. What is the need for a slide master?
Process and Information Layout 1.3-112
113. Programming & Development Tools Introduction to Programming
Criterion Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.
Name:
Subject: Programming and Development Tools
Unit: Process and Information Layout
Please tick [ √ ] the appropriate box when you have achieved the respective
competency.
Date Process and Information Layout
C1 C2 C3 C4 C5 C6 C7 C8 C9 C10 C11 C12 C13
Comment
Competency codes:
Word Information Layout
C1 = Identify the tags such as <img> and <b> used in the source code.
C2 = Create documents and publish as web page.
C3 = Insert image into a document.
C4 = Insert a file into another file.
C5 = Create hyperlink with a document and across documents.
C6 = Create workbooks and publish as web page.
C7 = Link worksheets within the workbook.
C8 = Create hyperlink across workbooks.
C9 = Insert images into presentation.
C10 = Insert actions buttons in slides.
C11 = Use slide master to perform functions that are common to all slides.
Process and Information Layout 1.3-113
114. Programming & Development Tools Introduction to Programming
C12 = Create simple interactive presentations with various animation
schemes and publish as web page.
C13 = Create hyperlink across presentations.
Process and Information Layout 1.3-114