Unit 1.4

Programming & Development Tools Introduction to Programming

UNIT

1.4
Introduction to Programming
Project Integration

OBJECTIVES
This unit explains how to integrate the projects created in various layouts.
At the end of this unit, you will be able to
Integrate projects created in various layouts
Create interactive presentations and web pages

Benchmark Standard
Create interactive web pages by integrating the projects created in
various layouts and publish them successfully.
Create and execute interactive presentations using the hyperlinks
without any errors.

Project Integration 1.4-1


Let us Revise!

1. Define Word Information Layout.
2. Which application is widely used for creating presentations?
3. Intersection of row and a column is known as ______.

Introduction
You are now familiar with creating document and presentations using Word,
Excel and PowerPoint. You will now learn to integrate these files to create
interactive web pages. Project integration means combining all the related
files in a project and test whether they are functioning properly.

1.4.1 Designing Interactive Web Page
Computo Sdn. Bhd. is a leading company in selling computer parts since
1985. They had introduced new products last year. As an assistant manager
of this company, you must prepare the detail list of the cost of these items and
the sales report for last year. You decide to prepare an interactive
presentation and publish this on web.

Hands-On!

Perform the following steps to create a document that lists the detail
description of the products with their cost and publish this document as web
page:
1. Open a blank document.
2. Change the view to Web Layout by choosing View Web Layout as
shown in Figure 1.4.1. The view of the document changes as shown in
Figure 1.4.2.

Figure 1.4.1: Changing the View to Web Layout



Figure 1.4.2: Document in Web Layout View

3. To make the web page appear attractive, change the background
colour of the document by choosing Format Background Fill
Effects as shown in Figure 1.4.3. Fill Effects dialog box appears as
shown in Figure 1.4.4.



Figure 1.4.3: Changing the Background of the Document

Figure 1.4.4: Fill Effects Dialog Box



4. Choose Texture tab and select Recycled paper texture (refer Figure
1.4.5). Click on OK button. Document appears as shown in Figure
1.4.6 and the corresponding source code is represented in Figure
1.4.7.

Figure 1.4.5: Selecting Recycled paper Texture



Figure 1.4.6: Document Window After Changing the Background

Figure 1.4.7: Source Code After Changing the Background



5. To insert the logo for the company, choose Insert Picture From
FiIe. Insert Picture dialog box appears.
6. From the Look in drop-down list, choose the location where the picture
is present.
7. Left click on the picture with the name Logo.
8. Click on the Insert button and centre align the logo. Figure 1.4.8 shows
the document window and the script editor after inserting the picture.

Figure 1.4.8: Document Window and Source Code After Inserting the
Logo

9. Below the logo, type the text Computo Sdn. Bhd.
10. Change the font to Book Antiqua, font size to 48 and font colour to red.
11. Below the text, type Your only solution for computer products.



12. Change the font to Arial, font size to 18 and font colour to black.
13. Draw a straight line below the text as shown in Figure 1.4.9.

Figure 1.4.9: Document Window After Entering the Text

14. Below the line, insert the pictures and type the text as shown in Figure
1.4.10.



Figure 1.4.10: Document Window After Inserting the Pictures

15. Select the text Computo and insert the bookmark by choosing Insert
Bookmark. Bookmark dialog box appears.
16. Type the name Home and click Add.
17. Press Enter six times and type the text About Us.
18. Change the font to Book Antiqua, font size to 48 and font colour to blue.
19. Insert the clip art by choosing Insert Picture Clip Art. Insert Clip
Art dialog box appears.
20. In the Search text text box, type business and click on Search.
21. Insert the picture as shown in Figure 1.4.11.



Figure 1.4.11: Document Window After the Clip Art

22. Type the following text below the picture:
We are one of the leading companies selling computer products since
1986.
We deliver high-quality, reliable and cost-effective products to clients
around the world.
23. Change the font to Arial, font size to 18, font colour to green and centre
align the text. Observe the change in source code as shown in Figure
1.4.12.



Figure 1.4.12: Source Code After Inserting the Text

24. Type the text Back below the text.
25. Change the font to Arial, font size to 16 and font colour to black. Align it
to left.
26. Select the text About Us and insert the bookmark by choosing Insert
27. Type the name About_Us and click Add. Observe the change in source
code as shown in Figure 1.4.13.



Figure 1.4.13: Source Code After Inserting the Bookmark

28. Press Enter six times and type the following text:
Branches
1. 30th Floors,
Putra World Trade Centre,
48 Jalan Tun Ismail,
50480 Kuala Lumpur,
Malaysia

2. 24, Jalan PGD 8/7,
Dataran Mentari,
46150 Petaling Jaya.

3. 823 West Seventh Street,
Suite 320, Los Angeles,
CA 90018, USA

Back
29. Select the text Branches and change the font to Book Antiqua, font size
to 48 and font colour to blue.
30. Change the font of the address to Arial, font size to 18 and font colour
to black.
31. Change the font of the text Back to Arial, font size to 16 and font colour
to black. Align it to left.



32. Select the text Branches and insert the bookmark by choosing Insert
33. Type the name Branches and click Add.
34. Similarly, enter the following details and format them:

Client List

1. Amith Technologies
2. Boreal Technologies
3. CNB Access
4. Ethyl Snd. Bhd.
5. Laser Image Infosys
6. M & L Chemicals
7. Razz Snd. Bhd.
8. Topfoto
9. Zippore

Back

Contact Us

Company Name: Computo Snd. Bhd.
Head Office: C-8-9, Punchak Prima,
Dasa Sriharthamas,
Kualalumpur - 50481
Directors: Abdul Rahim
Tel No: 016 - 2473246
Fax No 016 - 2874343
E-Mail: com@computo.com

Back

35. Select the text Client List and insert the bookmark by choosing Insert
36. Type the name Client_List and click Add.
37. Select the text Contact Us and insert the bookmark by choosing Insert
38. Type the name Contact_Us and click Add.



39. Select the text Back and choose Insert Hyperlink. Insert Hyperlink
dialog box appears.
40. Click on Bookmark button. Select a place in Document dialog box
appears.
41. Select Home and click OK.
42. Click OK on Insert Hyperlink dialog box.
43. Similarly, create hyperlinks for the other text Back wherever it appears.
44. Select the text About Us in page 1 and hyperlink this text to the
bookmark About_Us.
45. Similarly, hyperlink the text Branches, Client List and Contact Us with the
respective bookmarks.
46. Save the document as Home_Page_Word.doc.
47. Save the document as webpage with the name
Home_Page_Webpage.html.
48. Close the application.

Hands-On!

Perform the following steps to create spreadsheet to store the sales details:
1. Open a blank workbook.
2. On the cell D5 type the text Sales Figure of Computer Parts. Change the
font size to 26 and make it appear bold. Figurer 1.4.14 shows the
spreadsheet and the source code.



Figure 1.4.14: Spreadsheet and Source Code After Entering the Text

3. From D10 enter the following details:

D E F G H I
10 Month Hard Disk Pen Drive Mouse Keyboard RAM
11 January 25 38 15 23 21
12 February 12 23 32 12 33
13 March 23 45 43 22 17
14 April 8 33 32 24 32
15 May 18 23 10 8 13
16 June 12 17 16 22 21
17 July 15 14 16 26 32
18 August 23 34 24 26 23
19 September 12 24 23 32 15
20 October 7 19 21 16 18
21 November 18 25 14 21 13
22 December 22 23 40 23 25



Spreadsheet appears as shown in Figure 1.4.15

Figure 1.4.15: Spreadsheet After Entering Data

4. Now to change the width, select the columns D to I.
5. Choose Format Column Width. Column Width dialog box
appears.
6. Change the width to 15 and click on OK button. In Figure 1.4.16, notice
the change in the column width and the source code.



Figure 1.4.16: Spreadsheet and Source Code After Changing the Column
Width

7. Select row 5 and click on Merge and Center ( ) button on the
Formatting toolbar.
8. To calculate the total number of items sold, on D24 type Total and
make it bold.
9. To find the total number of hard disk pieces sold, click on the cell E24.
10. To apply the formula, choose Insert Function. Insert Function
dialog box appears.
11. Choose SUM from the list box and click on OK. Function Argument
dialog box appears.
12. As the columns E11 to E23 are already select, click on OK button. The
sum is displayed.
13. Centre align row 24. Figurer 1.4.17 displays the spreadsheet and the
source code after entering the formula.



Figure 1.4.17: Spreadsheet and Source Code After Calculating the Sum

14. Copy the formula to the other cells.
15. To create a chart for analysing the sales for the year, select the cells
D10 to I23.
16. Choose Insert Chart. Chart Wizard dialog box appears.
17. Choose Column chart from Chart type and click on Next button twice.
Screen 3 appears.
18. Give the chart title as Sales Report, X axis as Month and Y axis as No. of
Pieces Sold. Click on Next button and in the final screen, click on Finish
button. Adjust the chart to the desired size and location. Chart appears
as shown in Figure 1.4.18.



Figure 1.4.18: Spreadsheet After Inserting Chart

19. On D50 type the text Home.
20. Select this text hyperlink it Home_Page_Webpage.html.
21. On I50 type the text Back.
22. Save the file as Sales_Excel.xls.
23. To save as web page, choose File Save as Web Page. Save the
file with the name Sales_Webpage.html.
24. Copy the details of the hard disk to a new workbook.
25. Create a Pie chart for this and save the workbook as Harddisk_Excel.xls.
The workbook appears as shown in Figure 1.4.19.



Figure 1.4.19: Spreadsheet After Inserting Chart

26. As done for Sales_Excel.xls, type the text Home and Back. Hyperlink
Home to Home_Page_Webpage.html.
27. Save this as web page with the name Harddisk_Webpage.html.
28. Similarly, create workbook for other products and save it with
appropriate file name.

1.4.2 Creating Interactive Presentation
Now that you have created interactive web pages, you will now learn to create
interactive presentation and integrate it with other web pages.

Hands-On!

Perform the following steps to create interactive presentation and save it as
web page:
1. Open a blank presentation. The default slide layout and its code is
represented in Figure 1.4.20.



Figure 1.4.20: Default Slide Layout and the Source Code

2. From the Slide Layout task pane choose Title and Content layout.
Figure 1.4.21 shows the slide and its source code after changing the
layout.



Figure 1.4.21: Slide Layout and the Source Code After Changing the
Layout

3. Give the title as Products.
4. To insert a table, click on the Insert Table icon ( ) on the slide.
Insert Table dialog box appears as shown in Figure 1.4.22.



Figure 1.4.22: Insert Table Dialog Box

5. Type the number of rows as 5 and click on OK button. Slide appears
as shown in Figure 1.4.23. Observe the source code where code for
table insertion appears.

Figure 1.4.23: Slide After Inserting the Table

6. Insert the pictures of the products and type the corresponding name as
shown in the Figure 1.4.24. When inserting the picture the layout of the
slide changes. It is therefore necessary to adjust the table and the
picture.



Figure 1.4.24: Slide After Inserting the Pictures

7. Insert five slides by clicking on New Slide button ( ) on the
Formatting toolbar.
8. Change the slide layout of these slides to Title and 2 Content format.
9. Give the title to these slides as Hard Disk, Pen Drive, Mouse, Keyboard
and RAM respectively. Figure 1.4.25 represents the slide and the
corresponding source code.



Figure 1.4.25: Slide and the Source Code

10. On the Hard Disk slide, click on the Insert Table icon and insert a table
with 2 columns and 4 rows.
11. Type the following content on the table:
Product Cost
Orange 40GB RM 500.00
Mapio 40GB RM 550.50
Mapio 80GB RM 680.00



12. Click on Insert Picture icon on the slide and insert the picture of the
hard disk as shown in Figure 1.4.26.

Figure 1.4.26: Slide After Inserting the Table and the Picture

13. Similarly, insert the table and picture in other slides as shown in Figure
1.4.27.



Figure 1.4.27: Other Slides

14. To apply design template to this presentation, choose Format Slide
Design. Slide Design task pane appears.
15. In the Slide Design task pane, choose the template Fading Grid. Slide
appears as shown in Figure 1.4.28.



Figure 1.4.28: Slide After Applying Design Template

You might have to adjust the table and the pictures after the applying
design template.
16. On the Products slide, select the text Hard Disk.
17. Choose Insert Hyperlink. Insert Hyperlink dialog box appears.
18. Select Place in this Document from the Link to section.
19. Select Hard Disk in the Select a place in this document section and
click on OK button. Figure 1.4.29 represents the slide and its source
code.



Figure 1.4.29: Slide and the Source Code After Inserting Hyperlink

20. Similarly, link the other products.
21. On slide 2, to create action buttons, choose Slide Show Action
Buttons. A menu with different buttons appears.
22. Insert the custom button on the left-bottom corner of the slide. Action
Setting dialog box appears.
23. Click on Hyperlink to radio button and choose First Slide from the
drop-down list box.
24. Click OK button on the Action Settings dialog box.
25. To give a name to the animation button, choose Text Box from
drawing toolbar and click on the animation button. Type the text BACK.
26. Copy this button to slide 3, 4, 5 and 6.



27. Similarly insert another custom button on the right-corner of slide 2 and
hyperlink this to the file Harddisk_Webpage.html.
28. To give a name to the animation button, choose Text Box from
drawing toolbar and click on the animation button. Type the text Sales
Chart. Slide appears as shown in Figure 1.4.30.

Figure 1.4.30: Slide with Custom Animation Button

29. Similarly, insert the button to other slides and link it to the
corresponding sales chart.
30. To insert a slide between slide 1 and slide 2, select slide 1 from the
outline tab. Insert a slide by clicking on New Slide button on the
Formatting toolbar.
31. Give the title as Products Sale.
32. To embed the sales chart created in excel, open the file Sales_Excel.xls.
Copy the chart and switch to PowerPoint presentation.
33. On the slide Products Sale, choose Edit Paste Special as shown in
Figure 1.4.31. Paste Special will help in embedding the clipboard
object into the file. Paste Special dialog box appears as shown in
Figure 1.4.32.



Figure 1.4.31: Choosing Paste Special

Figure 1.4.32: Paste Special Dialog Box

34. Click on OK button.
35. Insert the Back and Sales Chart custom buttons. Link Back button to
slide 1 and Sales Chart button to Sales_ Webpage.html. Chart appears as
shown in Figure 1.4.33 and the corresponding source code is shown in
Figure 1.4.34.



Figure 1.4.33: Slide After Embedding the Chart

Figure 1.4.34: Source Code

36. On slide 1, insert Home button and hyperlink this to the file
Home_Page_Webpage.html.
37. In the slide, insert a custom button Sales Chart and hyperlink it to the
next slide.



38. Save the presentation as Products_PowerPoint.ppt.
39. Run the slide show.
40. To save the presentation as webpage, choose File Save as Web
page. Save As dialog box appears. Give the name as
Products_Webpage.html and click on Save.

Hands-On!

Perform the following steps to integrate the projects created in various
layouts:
1. Open the file Home_Page_word.doc.
2. Select the text Products and hyperlink it with the file
Products_webpage.html.
3. Save the document and save the same as web page.
5. Open the file Sales_Excel.xls.
6. Hyperlink the text BACK with the file Products_Webpage.html.
7. Save the workbook and the corresponding web page.
8. Similarly, hyperlink the text BACK in other workbooks.
9. Save the web pages and close the application.
10. Open the file Home_Page_Webpage.html and browse through the pages.

Lab Exercise

Lab Exercise 1:
Ipoh youth association has various facilities that are offered. As a president of this association,
you are required to launch a web site that describes the about the club and the various facilities
offered. Using PowerPoint create a presentation that describes about the various facilities that
are offered. List the membership details in Excel. Integrate these details and launch a web site.



Creating WORD Document
Observe the following figures:

Page1:

Page2:

Format for the text in the document:
IPOH YOUTH ASSOCIATION Garamond 26 green.
Text Arial 12.



Create a Word document as shown in the figure and save it as Homepage_Word.doc. Also
save the document as web page with the name Homepage_Webpage.html.

Creating Excel Workbook
Observe the following figure:



Format for the cells in the workbook:
Merge D9 – I9.
Text Membership Details – Arial 26 bold.
Text Facility, Period and Fees – Arial 12 bold.
Column width of D, F and H must be 12.
Details must be center align.

Create a worksheet as shown in the figure and save it as Membership_Excel.xls. Also save the
worksheet as web page with the name Membership_Webpage.html.

Creating Presentation
Observe the following figure:
Slide1:



Slide2:

Slide3:



Slide4:

Slide5:

Format for the slide:
Design Template: Maple.

Create a presentation as shown in the figure and insert the corresponding images present in
the data file.
Save the presentation as Facilities_PowerPoint.ppt. Also save the same as web page with the
name Facilities_Webpage.html.



Integrating Projects
Open the presentation Facilities_PowerPoint.ppt and perform the following:
• On the first slide, hyperlink the text Home Page to Homepage_Webpage.html.
• Hyperlink the text Membership Details to Memebership_Webpage.html.
• Hyperlink the text Swimming to Slide2.
• Similarly, hyperlink the text Lawn Tennis to Slide3, Table Tennis to Slide4 and GYM to
Slide5.
• On each slide, hyperlink the text Back to Slide1.
• Save the document and the corresponding web page.

Open the workbook Membership_Excel.xls and perform the following:
• Hyperlink the text Home Page to Homepage_Webpage.html.
• Hyperlink the text Facilities to Facilities_Webpage.html.
• Save the workbook and the corresponding web page.

Open the file Homepage_Word.doc and perform the following:
• On the text IPOH YOUTH ASSOSIATION insert a bookmark with the name
Home_page.
• On the text Contact us at, insert the bookmark Contact.
• When the user click on the text Contact Us (on page one), the address detail on page
two must appear.
• When the user click on the text Back, page one must appear.
• Hyperlink the text Facilities to Facilities_Webpage.html.
• Hyperlink the text Membership Details to Membership_Webpage.html.
• Save the document.
• Save the document as web page.



Lab Exercise 2:
7th International festival is going to take place next month. You have been selected from your
school to give a presentation on various museums present in your country. You decide to
launch a web site for the same. The user must be allowed to choose either HTML or
presentation format. Use Word to create a document to describe about the Museums present in
Malaysia. Create the same in PowerPoint for presentation format. Give the address and phone
numbers of the museums in Excel. Integrate these details and launch a web site.

Creating Entry Page Using Word Document

Entry Page:

Museums in Malaysia Garamond, 72, brown and center align.
Welcome to Museums in Malaysia Comic Sans MS, 14, black and center align
HTML Format and Presentation format Times New Roman, 20, black and center
align

Create a Word document as shown in the figure and save it as Entry_Page_Word.doc.



Creating Home Page Using Word Document
Home Page (Page1):

Museums in Malaysia Garamond, 72, brown and center align
Welcome to Museums in Malaysia Comic Sans MS, 14, black and center align
Museum names Comic Sans MS, 20, black and center align
Presentation Times New Roman, 20, black and right align



Page2:

National Museum Garamond, 36, red and left align
Description Arial, 16, bold, green and center align
Back Times New Roman, 20, black and left align
Other Details Times New Roman, 20, black and right align
Page3:

Same as Page2



Page4:

Same as Page2
Page5:

Same as Page2



Page6:

Same as Page2

Insert the following bookmarks:
• On page 1, insert the bookmark Home.
• On page 2, insert the bookmark National.
• On page 3, insert the bookmark Asian.
• On page 4, insert the bookmark Royal.
• On page 5, insert the bookmark War.
• On page 6, insert the bookmark it as Police.

Create the following hyperlinks:
• Link the museum names on page1to the appropriate bookmarks.
• Link the text Back that appears in all the pages to the bookmark Home.

Save the document as Home_Page_Word.doc.
Save the document as web page with the name Home_Page_Webpage.html.



Creating Excel Workbook

Book1:

Format for the text in the worksheet:
National Museum Georgia, 36, bold and red.
Time, Admission, Address and Phone Bookman Old Style, 16, bold and brown.
Description Bookman Old Style, 14 and green.
Back and Presentation Times New Roman, 16 and black.



Book2:

Same as for Book1.



Book3:

Same as for Book1.
Book4:

Same as for Book1.



Book5:

Same as for Book1.

Create the workbooks as specifies and the corresponding web pages.



Creating Presentation

Slide1:

Design Template Glass Layers
Slide Layout Title slide



Slide2:

Slide Layout Title and Text

Slide3:

Slide Layout Title, Text, and Content



Slide4:


Slide5:




Slide6:


Slide7:


Create a presentation as shown in the figure and save the presentation as Presentation.ppt.



Integrating the projects
Open the file Entry_Word.doc and perform the following:
• Hyperlink the text HTML with the file Home_Page_Webpage.html.
• Hyperlink the text Presentation with the file Presentation.ppt.

Open the file Home_Page_Word.doc and perform the following:
• Hyperlink the text Other Details with the respective web pages created using Excel.

Open the file National.xls, Asian.xls, Royal.xls, War.xls and Police.xls and perform the
following:

Technical Terminology

Merging - The technique of combining more that one cell to spread
data across cells.

Summary
In this unit, you learnt that
Through hyperlink and action buttons you can integrate projects
created in various layouts.
You can merge cells, to spread data across cells, using the merge
button present in the Standard toolbar.

Assignment

1. Can you spread data across cells in Excel. If yes, which option
would you use?
2. Is it possible to integrate web pages through action buttons?
3. Create an interactive web page describing about the places that
you have recently visited.



Criterion Referenced Test

Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development Tools
Unit: Project Integration

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.

Date Project Integration
C1 C2 C3 C4

Comment

Competency Codes:

C1 = Create interactive web pages using Word Information Layout
C2 = Create interactive web pages using Data Information Layout
C3 = Create interactive presentations using Presentation Layout
C4 = Integrate the web pages created using various layouts


Unit 1.4

More Related Content

What's hot

Viewers also liked

Similar to Unit 1.4

More from Intan Jameel

Recently uploaded

Unit 1.4