Unit 1.2

Programming & Development Tools Introduction to Programming

UNIT

1.2
Introduction to Programming
Introduction to Source Code

OBJECTIVES
This unit explains about the source code in office application.
At the end of this unit, you will be able to
List various tags used in the source code
Identify the tags used in the source code
Describe the function of the tags used in the source code
Manipulate the source code to see the effect

Benchmark Standard
Get familiar with source code used in Microsoft Script Editor.
Create new files and identify the appropriate tags used in them.
Execute the manipulated source code without any error.

Introduction to Source Code 1.2-1


Let us Revise!

1. Define Task Pane.
2. Explain the need for Microsoft Script editor.
3. __________ is a horizontal bar that appears at the top of the active
window which is associated with pull-down menus.
4. _______ is a collection of icons that provides easy access
commonly used menu commands.

Introduction
Office is an application that is based on GUI. It helps the user to create
documents and presentations with a mouse click. However, each command in
this application is coded using programming languages and other scripting
languages. You can view the source code of each command using the
Microsoft Script Editor. In this unit you will learn the basic tags used for the
coding purpose.

1.2.1 Backbone of Office Applications
When you see the source code of an office document in the Microsoft Script
Editor, you will see lot of information that appears. It has both XML and HTML
codes. XML data is stored within the HTML code. XML is used to describe the
data and HTML is used to format the data. Figure 1.2.1 displays the source
code of a Word document.



Figure 1.2.1: Source Code of a Word Document

In Figure 1.2.1, XML code is used to describe the document properties such
as author name, number of pages in the document and number of lines etc.
You will notice that the XML code is enclosed within the tags <xml> and
</xml>.

Figure 1.2.2 shows the HTML code in the word document.



Figure 1.2.2: HTML Code in the Document

You will notice that the HTML code describes the way the document is going
to appear. In the figure, the font size is defined to be 20. Therefore, in the
document, the font size of the text Malaysia will be 20. Notice that the HTML
code is enclosed between <html> and </html> tags.

Hands-On!

1. Open a blank document.
2. Open the script editor by choosing Tools Macro Microsoft
Script Editor.
3. Notice that the XML codes are enclosed within the tags <xml> and
</xml>.
4. Notice that the HTML codes are enclosed within the tags <html> and
</html>.



Significance of the Colours in the Microsoft Script Editor
Table 1.2.1 list the display item along with their colour in script editor.

Display Items Foreground Colour
Text Black
HTML Attribute Name Red
HTML Attribute Value Blue
HTML Comment Dark Green
HTML Element Name Maroon
HTML Tag Text Magenta

Table 1.2.1: Display Items and its Colour

Lab Exercise

Lab Exercise 1: Open a blank document. Observe the source code in Microsoft Script Editor.
Lab Exercise 2: Open a blank workbook. Observe the source code in Microsoft Script Editor.
Lab Exercise 3: Open a blank presentation. Observe the source code in Microsoft Script
Editor.

1.2.1 (A) Basic HTML Tags
Definition: Tags are the instructions that specify how the document appears.

(a) Head Tag
The head tag provides information that does not affect the document but
provides information to the browser when publishing the document on web.
The necessary codes have to be enclosed within the tags <head> and
</head>.

Activity 1.2.1

Open the data file Malaysia.doc. Identify the head tag and the data enclosed
within this tag.



(b) Body Tag
The body tag specifies the beginning and end of the document.

Hands-On!

1. Open the data file Food.doc.
2. Open the script editor and observe the code.
3. In Figure 1.2.3, the <body> marks the beginning of the document and
</body> marks the end of the document.

Figure 1.2.3: Body Tag in the Script Editor

(c) Paragraph Tag
The paragraph tag is used for creating paragraphs. The paragraph text must
be enclosed with the tags <p> and </p>.



Hands-On!

1. Open the data file About_Malaysia.doc.
2. Open the script editor. Editor opens as shown in the Figure 1.2.4.

Figure 1.2.4: Paragraph Tag in the Script Editor

3. Notice that the paragraphs are enclosed with the tags <p> and </p>.

(d) Heading Tag
Heading tag specifies different sizes and styles for the heading.

Hands-On!

1. Open the data file Heading.doc.
2. Open the script editor. In the editor, the code appears as shown in the
Figure 1.2.5.



Figure 1.2.5: Heading Tag in the Script Editor

3. Notice that for different heading styles different tags have been applied.

Table 1.2.2 shows various tags with their description.
Tag Description Code
Specifies the beginning and
XML <xml> ... </xml>
end of the XML code.
HTML <html> ... </html>
end of the HTML code.
Provides information to the
Head <head> ... </head>
browser.
Body <body> ... </body>
end of the document.
Paragraph Creates paragraphs. <p> ... </p>
Specifies different sizes and <h1> ... </h1>
styles for the heading. ...
Heading ...
...
<h6> ... <h6>

Table 1.2.2: Basic Tags Used in Script Editor



Table 1.2.3 lists the other commonly used tags in the script editor. You will
learn more about tags in Unit 3.

Tag Description Code
Specifies that the text must
B <b> ... </b>
be bold.
I <i> ... </i>
be italics.
U <u> ... </u>
be underlined.
IMG Inserts image into the file. <img>

Table 1.2.3: Tags Used in Script Editor

Activity 1.2.2

Identify any two pair of tags present in the following code:
<html>
<body lang=EN-GB style='tab-interval:.5in'>
<p class=MsoNormal><span lang=EN-US>COOL</span></p>
</body>
</html>

Self-Check Exercise 1.2.1

1. <body> specifies the ____________ of the document.
2. _________ provides information to the browser.
3. <h4> is a valid tag (T/F).

Lab Exercise

Lab Exercise 4: Open a blank document and type your name. Copy and paste the text five
times. Save the document as Name.doc. Identify the various tags used in
the source code.



Technical Terminologies

Tag – The instructions that specify how the document appears.

Summary
In this unit, you learnt that:
Tags are the instructions that specify how the document appears.
The head tag provides information that does not affect the
document but provides information to the browser when publishing
the document on Web.
The body tag specifies the beginning and end of the document.
The paragraph tag is used for creating paragraphs.
Heading tag specifies different sizes and styles for the heading.

Assignment

1. List any four tags used in script editor.
2. Identify any three tags in the following:
<html>
<body lang=EN-GB style='tab-interval:.5in'>
<h2><span class=GramE>
<span lang=EN-US>sadsha</span> </span></h2>
</body>
</html>



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

Name:
Subject: Programming and Development Tools
Unit: Introduction to Source Code

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

Date Introduction to Source Code
C1 C2

Comment

Competency Codes:

C1 = Identify the various tags such as head tag, body tag, paragraph tag and
heading tags used in Microsoft Script Editor.
C2 = List the various tags such as <xml>, <html> and <body> used in the
source code and describe functions.


Unit 1.2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (9)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Unit 1.2

Ähnlich wie Unit 1.2 (20)

Mehr von Intan Jameel

Mehr von Intan Jameel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Unit 1.2