Unit 1.2

  • 87 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
87
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Programming & Development Tools Introduction to Programming UNIT 1.2Introduction to ProgrammingIntroduction to Source CodeOBJECTIVESThis 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 effectBenchmark 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
  • 2. Programming & Development Tools Introduction to ProgrammingLet 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.IntroductionOffice is an application that is based on GUI. It helps the user to createdocuments and presentations with a mouse click. However, each command inthis application is coded using programming languages and other scriptinglanguages. You can view the source code of each command using theMicrosoft Script Editor. In this unit you will learn the basic tags used for thecoding purpose.1.2.1 Backbone of Office ApplicationsWhen you see the source code of an office document in the Microsoft ScriptEditor, you will see lot of information that appears. It has both XML and HTMLcodes. XML data is stored within the HTML code. XML is used to describe thedata and HTML is used to format the data. Figure 1.2.1 displays the sourcecode of a Word document.Introduction to Source Code 1.2-2
  • 3. Programming & Development Tools Introduction to Programming Figure 1.2.1: Source Code of a Word DocumentIn Figure 1.2.1, XML code is used to describe the document properties suchas 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.Introduction to Source Code 1.2-3
  • 4. Programming & Development Tools Introduction to Programming Figure 1.2.2: HTML Code in the DocumentYou will notice that the HTML code describes the way the document is goingto appear. In the figure, the font size is defined to be 20. Therefore, in thedocument, the font size of the text Malaysia will be 20. Notice that the HTMLcode 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>.Introduction to Source Code 1.2-4
  • 5. Programming & Development Tools Introduction to ProgrammingSignificance of the Colours in the Microsoft Script EditorTable 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 ExerciseLab 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 TagsDefinition: Tags are the instructions that specify how the document appears.(a) Head TagThe head tag provides information that does not affect the document butprovides 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.1Open the data file Malaysia.doc. Identify the head tag and the data enclosedwithin this tag.Introduction to Source Code 1.2-5
  • 6. Programming & Development Tools Introduction to Programming(b) Body TagThe 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 TagThe paragraph tag is used for creating paragraphs. The paragraph text mustbe enclosed with the tags <p> and </p>.Introduction to Source Code 1.2-6
  • 7. Programming & Development Tools Introduction to Programming 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 TagHeading 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.Introduction to Source Code 1.2-7
  • 8. Programming & Development Tools Introduction to Programming 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. Specifies the beginning and HTML <html> ... </html> end of the HTML code. Provides information to the Head <head> ... </head> browser. Specifies the beginning and 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 EditorIntroduction to Source Code 1.2-8
  • 9. Programming & Development Tools Introduction to ProgrammingTable 1.2.3 lists the other commonly used tags in the script editor. You willlearn more about tags in Unit 3. Tag Description Code Specifies that the text must B <b> ... </b> be bold. Specifies that the text must I <i> ... </i> be italics. Specifies that the text must U <u> ... </u> be underlined. IMG Inserts image into the file. <img> Table 1.2.3: Tags Used in Script Editor Activity 1.2.2Identify 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 ExerciseLab 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.Introduction to Source Code 1.2-9
  • 10. Programming & Development Tools Introduction to Programming Technical TerminologiesTag – The instructions that specify how the document appears.SummaryIn 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>Introduction to Source Code 1.2-10
  • 11. Programming & Development Tools Introduction to ProgrammingCriterion Referenced TestInstruction: Students must evaluate themselves to attain the list of competencies to be achieved.Name:Subject: Programming and Development ToolsUnit: Introduction to Source CodePlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency. Date Introduction to Source Code C1 C2 CommentCompetency 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.Introduction to Source Code 1.2-11