CDWP2203

Faculty of Science and Technology
CDWP2203
Introduction to
Web Programming
Copyright © Open University Malaysia (OUM)

CDWP2203
INTRODUCTION
TO WEB
PROGRAMMING
Mohd Juzaidin Abd Aziz
Zulkarnain Md Ali
Mohammad Faidzul Nasrudin

Project Directors: Prof Dato’ Dr Mansor Fadzil
Assoc Prof Dr Norlia T. Goolamally
Open University Malaysia
Module Writers: Mohd Juzaidin Abd Aziz

Zulkarnain Md Ali
Mohammad Faidzul Nasrudin
Universiti Kebangsaan Malaysia
Moderator: Dr Hamidah Ibrahim

Universiti Putra Malaysia
Developed by: Centre for Instructional Design and Technology

Open University Malaysia
First Edition, November 2008

Copyright © Open University Malaysia (OUM), December 2012, CDWP2203
All rights reserved. No part of this work may be reproduced in any form or by any means
without the written permission of the President, Open University Malaysia (OUM).
Copyright 
 © 
Open 
University 
Malaysia 
(OUM)
Table of Contents
Course Guide ix - xiii
Topic 1 Introduction to HTML 1

1.1 Methods in the Preparation of Hypertext Documents 1
1.2 Creating HTML Document 3
1.3 Headings, Paragraphs and Lists 6
1.3.1 Headings 6
1.3.2 Paragraphs 7
1.3.3 List 9
1.4 Modifying Text Format 11
1.5 Lines and Graphic 12
Summary 15
Key Terms 15
Topic 2 Hypertext Links 16

2.1 Links to Other Website Objects 16
2.2 Links to Several HTML Files 20
2.3 Links to Other Web Objects 24
Summary 26
Key Terms 26
Topic 3 Website Design 27

3.1 Adding Colours 27
3.2 Font Modification 32
3.3 Manipulating Images 35
3.4 Image Map 39
Summary 44
Key Terms 44
Topic 4 Using Tables 45

4.1 Creating a Text Table 45
4.2 Creating Graphical Tables 48
4.3 Table Appearance 52
4.4 Spanning Columns and Rows 58
Summary 63
Key Terms 63

iv  TABLE OF CONTENTS
Topic 5 Forms in Web Pages 64

5.1 Common Gateway Interface (CGI) Script 64
5.2 Form Tag 67
5.3 Form Elements 68
5.3.1 Input Box 68
5.3.2 Selection List 70
5.3.3 Radio Button 72
5.3.4 Check Box 73
5.3.5 Text Area 73
5.3.6 Hidden Field 75
5.4 Form Button 75
5.5 Form Submission 76
Summary 78
Key Terms 78
Topic 6 Introduction to Scripts 79

6.1 Client and Server 80
6.2 Client Programming 81
6.3 Programming at the Server-Side 82
6.4 Inserting Scripts into the Web Page 83
6.5 Event Scripts 86
Summary 87
Key Terms 88
Topic 7 Javascripts 89
7.1 Introduction to Javascript 89
7.2 Using Javascript in HTML Documents 90
7.3 Variables 91
7.4 Operations 92
7.4.1 Arithmetic 92
7.4.2 Accumulation 93
7.4.3 Relationships 93
7.4.4 Logical 94
7.5 Functions 94
7.6 Selection Control Structures 97
7.7 Looping Control Structures 99
Summary 101
Key Terms 101

TABLE OF CONTENTS  v
Topic 8 VBScripts 102

8.1 Introduction to VBScript 103
8.2 Using VBScript in HTML Documents 104
8.3 Variables 105
8.4 Operations 107
8.4.1 Arithmetic 107
8.4.2 Relationships 107
8.4.3 Logical 108
8.5 Functions 108
8.5.1 Sub Functions 108
8.5.2 Functions of Function 109
8.6 Selection Control Structures 112
8.7 Looping Control Structures 115
Summary 119
Key Terms 120
Topic 9 Active Server Pages 121

9.1 Introduction to Active Server Pages 121
9.2 Inserting ASP Script into the Web 123
9.3 Variables 124
9.4 Functions in ASP 127
9.5 Forms in ASP 128
Summary 130
Key Terms 130

vi  TABLE OF CONTENTS

COURSE GUIDE

COURSE GUIDE  ix
COURSE GUIDE DESCRIPTION

You must read this Course Guide carefully from the beginning to the end. It tells
you briefly what the course is about and how you can work your way through
the course material. It also suggests the amount of time you are likely to spend in
order to complete the course successfully. Please keep on referring to the Course
Guide as you go through the course material as it will help you to clarify
important study components or points that you might miss or overlook.
INTRODUCTION
CDWP2203 Introduction to Web Programming is one of the courses offered by
Faculty of Science and Technology at Open University Malaysia (OUM). This
course is worth 3 credit hours and should be covered over 8 to 15 weeks.
COURSE AUDIENCE
This course is offered to all students taking the Diploma in Information
Technology. All Information Technology students are required to attend this
course and master the subject well because todayÊs technology era is an era of
visual and web based computing. Students from other majors will also find this
course useful as web applications are widely used in numerous activities today.
As an open and distance learner, you should be able to learn independently and
optimise the learning modes and environment available to you. Before you begin
this course, please confirm the course material, the course requirements and how
the course is conducted.
STUDY SCHEDULE
It is a standard OUM practice that learners accumulate 40 study hours for every
credit hour. As such, for a three-credit hour course, you are expected to spend 120
study hours. Table 1 gives an estimation of how the 120 study hours could be
accumulated.

x  COURSE GUIDE
Table 1: Estimation of Time Accumulation of Study Hours
Study Activities Study Hours

Understanding the course contents and initial discussions 5
Reading 3 text units and completing the suggested exercises, with a
60
rate of 20 hours per exercise
Attending 5 tutorial sessions, with a 2 hour per session rate 10
Access to websites 12
Completion of 1 assignment with the rate of 15 hours 15
Revision 18
TOTAL 120
COURSE OUTCOMES
By the end of this course, learners should be able to:
1. Exposing students to the latest internet technology.

2. Exposing students to the technology which can be applied in web application
development.
3. Exposing students to methods of developing interactive and dynamic web
application.
COURSE SYNOPSIS
This course is divided into 10 topics. The synopsis for each topic is presented
below:
Topic 1 will expose you to basic static web development document which can be
linked to other static site through hypertext link. (HTML)
Topic 2 gives you basic understanding of web programming. (Hypertext link)
Topic 3 introduces you to the basic elements of design, such as colours, graphics
and fonts. (Website architecture)
Topic 4 discovers about tables and how to create tables to insert into your
website.

COURSE GUIDE  xi
Topic 5 explores forms, its elements and the method of retrieving values sent by
visitors.
Topic 6 explains some important concepts like the client-server concept, client-
side programming and server-side programming and the use of events.
Topic 7 explores further detail the characteristics of JavaScript, syntax like

variables, operations and expressions functions, control structures and loops for
JavaScript.
Topic 8 explores further the characteristics of VBScript, syntax like variables,

operations, expressions, functions, control structures and repetitions for VBScript.
Topic 9 learns basic ASP script programming at the same time will explore
characteristics and syntax for some primary objects in ASP.
TEXT ARRANGEMENT GUIDE

Before you go through this module, it is important that you note the text
arrangement. Understanding the text arrangement will help you to organise your
study of this course in a more objective and effective way. Generally, the text
arrangement for each topic is as follows:
Learning Outcomes: This section refers to what you should achieve after you
have completely covered a topic. As you go through each topic, you should
frequently refer to these learning outcomes. By doing this, you can continuously
gauge your understanding of the topic.
Self-Check: This component of the module is inserted at strategic locations

throughout the module. It may be inserted after one sub-section or a few sub-
sections. It usually comes in the form of a question. When you come across this
component, try to reflect on what you have already learnt thus far. By attempting
to answer the question, you should be able to gauge how well you have
understood the sub-section(s). Most of the time, the answers to the questions can
be found directly from the module itself.
Activity: Like Self-Check, the Activity component is also placed at various

locations or junctures throughout the module. This component may require you
to solve questions, explore short case studies, or conduct an observation or
research. It may even require you to evaluate a given scenario. When you come
across an Activity, you should try to reflect on what you have gathered from the
module and apply it to real situations. You should, at the same time, engage

xii  COURSE GUIDE
yourself in higher order thinking where you might be required to analyse,

synthesise and evaluate instead of only having to recall and define.
Summary: You will find this component at the end of each topic. This component
helps you to recap the whole topic. By going through the summary, you should
be able to gauge your knowledge retention level. Should you find points in the
summary that you do not fully understand, it would be a good idea for you to
revisit the details in the module.
Key Terms: This component can be found at the end of each topic. You should go
through this component to remind yourself of important terms or jargon used
throughout the module. Should you find terms here that you are not able to
explain, you should look for the terms in the module.
References: The References section is where a list of relevant and useful

textbooks, journals, articles, electronic contents or sources can be found. The list
can appear in a few locations such as in the Course Guide (at the References
section), at the end of every topic or at the back of the module. You are
encouraged to read or refer to the suggested sources to obtain the additional
information needed and to enhance your overall understanding of the course.
PRIOR KNOWLEDGE
Basic knowledge of the subject matter is not required for students who study this
module. However, programming knowledge will be an added advantage.
ASSESSMENT METHOD
Please refer to myINSPIRE.
REFERENCES
Deitel, P. J., & Deitel, H. M. (2007). Internet & world wide web: How to program.
New Jersey: Prentice Hall.
Sebesta, R. W. (2009). Programming the world wide web. Addison Wesley.
Copyright 
 © 
Open 
University 
Malaysia 
(OUM)
COURSE GUIDE  xiii
TAN SRI DR ABDULLAH SANUSI (TSDAS) DIGITAL

LIBRARY
The TSDAS Digital Library has a wide range of print and online resources for the
use of its learners. This comprehensive digital library, which is accessible through
the OUM portal, provides access to more than 30 online databases comprising e-
journals, e-theses, e-books and more. Examples of databases available are
EBSCOhost, ProQuest, SpringerLink, Books24x7, InfoSci Books, Emerald
Management Plus and Ebrary Electronic Books. As an OUM learner, you are
encouraged to make full use of the resources available through this library.

xiv  COURSE GUIDE

Topic  Introduction
1 to HTML
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Develop six HTML documents based on the example given; and
2. Use at least seven tags in HTML documents.
 INTRODUCTION
This topic will introduce you to the basic knowledge of Hypertext Markup
Language or more popularly known as HTML. To achieve this objective, you will
learn some important terminologies used in HTML including Head, Paragraph
and List.
1.1 METHODS IN THE PREPARATION OF

HYPERTEXT DOCUMENTS
Open a web browser (either Mozilla Firefox or IE) on your computer. Type
http://www.oum.edu.my in the Address/Location space. You have just opened
the main hypertext document of Open University Malaysia (OUM).
To create a hypertext document (web page) as the one above, you may:
(a) Use the What You See Is What You Get (WYSIWYG) tool; and
(b) Use Markup Language.
Let us discuss this further.

2  TOPIC 1 INTRODUCTION TO HTML
(a) What You See is What You Get (WYSIWYG) Tool

WYSIWYG tools like Microsoft Word and Arachnophilia are used to create
hypertext documents. WYSIWYG tools allow users to prepare hypertext
documents without learning the technical instructions used in hypertext
document preparation. By using these tools, users will be able to include
document content such as typing a normal document. These tools have the
„drag-and-drop‰ function and more. Typed document can be transformed
to hypertext format automatically and can be opened in any web browser.
The development of hypertext documents using the WYSIWYG approach is
suitable for users who do not have the knowledge or experience in
developing hypertext documents.
(b) The Markup Language

The second approach in preparing hypertext document is by using Markup
Language. What is Markup Language? Here is the definition:
Markup Language is a set of formal specifications used to define

information.
Markup Languages inherited a system called SGML (Standard Generalised

Markup Language). SGML itself originated from a product named GML
(Generalised Markup Language) and was established by the company, IBM.
SGML is actually a complex plan structure to describe Markup Language. In
the SGML terminology, a Markup Language according to SGML is called
DTD (Document Type Definition). So, Markup Languages like HTML and
XML are DTD based on SGML.
HTML is a popular Markup Language to develop a hypertext document.

Specifically,
HTML is a set of specifications (each one with an individual markup

tag) that can be used to define the elements of hypertext document. The
objective of HTML is to specify how a particular text should be
processed.
Web servers such as Internet Explorer will act as an engine that will interpret
HTML and display it in the correct form. The original HTML version was
developed by Tim Berners-Lee and he was one of the creators of the World
Wide Web (WWW). Although HTML has solid fundamentals, the standards

TOPIC 1 INTRODUCTION TO HTML  3
for new versions are still growing. You may find that each web server on the
market is able to support different HTML variations.
Note that the same hypertext documents will not be displayed in similar
forms if accessed through different web browsers. This is because each web
browser has different configurations for its components such as font type
size. The advantages of these differences are:
(i) Hypertext documents can be used in all platforms such as Microsoft

Windows and Unix.
(ii) Hypertext documents can be displayed faster because text specifications

following each individual computer will result in smaller files. Each file
will increase in size if each text requires different specifications.
However, the disadvantage is users are not able to preview their hypertext
document design in other types of web browsers or on other platforms.
Visit http://www.w3c.org. The w3c consortium is an organisation

comprising web programmers, IT representatives and researchers that
determine HTML specifications and standards. You should try to obtain the
HTML definition from the said website.
SELF-CHECK 1.1
What are the advantages and the disadvantages of using the WYSIWYG
and Markup Language approach in developing a hypertext document?
1.2 CREATING HTML DOCUMENT

In each hypertext document (website), there are two main elements that you need
to be familiar with: document content and tag.
Document content is information that you wish to display on the web

browser. Tag is the code that will determine how the document content will
be displayed.

Tag writing format and document content are as follows:
<Name Tag> Document Content</ Name tag>
Some examples of tags used in this Topic are as per Table 1.1 below.
Table 1.1: Examples of Tags
Opening Tag Closing Tag Explanation

<HTML> </HTML> Shows that the document is written in HTML code
<HEAD> </HEAD> Provides information on the website.
<TITLE> </TITLE> Displays the title on the web browser window.
<BODY> </BODY> Indicates the beginning and end of website content
body
Among the important issues that you must remember are that tags must be
placed in brackets (< >). All document contents must be in brackets with two tags
i.e the opening tag and the closing tag. You can insert specific properties that
have been specified in the tag, only for the opening tag. For example, the
properties for tag H1 is ALIGN.
<H1 ALIGN = “Center”>Ahmad Yusuf’s Website</H1>
Try the following Activity 1.1. This activity requires you to use the computer.
Follow the steps as instructed.

ACTIVITY 1.1
Creating HTML documents
(a) Insert the thumb drive into the computer drive.
(b) Create a ÂTopic 1Ê folder in the computer drive.
(c) Open text editor (similar to Notepad) in your system.
(d) Type the following codes.

<HTML>
<HEAD>
<TITLE>Ahmad Yusuf’s Website</TITLE>
</HEAD>
<BODY>
<H1>Curriculum Vitae</H1>
<H2>Ahmad Yusuf</H2>
</BODY>
</HTML>
(e) Save the file as activity1.htm in Topic 1 folder in your computer

drive.
The new file that you have created in Activity 1.1 is an example of a HTML file.
HTML files can also use .html extensions, other than .htm extensions. You must
make sure that there are no syntax or logical mistakes in completed HTML
documents. This can be done by displaying it to the web browser. Activity 1.2
below is the continuation from Activity 1.1.

ACTIVITY 1.2
Display HTML file on Web Browser
(a) Run the web browser that is on your system (example: Internet
Explorer).
(b) Choose File menu >Open.
(c) Locate file activity1.htm that you have saved in Activity 1.1. The file
is possibly located at the folder:\Topic1\activity1.htm.
(d) Click the OK button. Results will be displayed on your web browser
screen.
Open the activity1.htm file in the text editor. Modify the code so
that the words „Ahmad Yusuf‰ appear in two lines. Press Spacebar
to shift the word „Yusuf‰. Do the following editing:
<H2>Ahmad
Yusuf</H2>
Save and click on the refresh button on your web browser. What are
the changes that you can see? What is your conclusion?
Activity 1.3 will test your understanding. Answer the question below.
ACTIVITY 1.3
Why do you need to place the <HTML> tag in your website?
1.3 HEADINGS, PARAGRAPHS AND LISTS

Now, let us learn about headings, paragraph and lists.
1.3.1 Headings
Heading is normally text with bigger fonts than the rest of the text. HTML
contains six stages of headings from 1 to 6. You can use heading tags to increase
the size of text for example to create titles. The syntax is:
<Hx>Content Document</Hx>
x as the value from 1 to 6.

The characteristics of H1 tag is ALIGN. ALIGN= „Center‰ means that the web
browser will display the text in the centre of the screen. You are required to
complete Activity 1.4. This activity will sharpen your skills in constructing HTML
documents.
ACTIVITY 1.4
Inserting Heading into a Resume

(a) Run the text editor and open activity1.htm file.
(b) Save file as (Save As) activity2.htm in the same folder which is
Topic1.
(c) Add the following codes under code “<H2>Ahmad Yusuf</H2>”.
<H5>No 7, Jalan 3/2T, 43650 Bandar Baru Bangi,
Selangor</H5>
<H5> 03-89282394 &#183 ahmadyusuf@freemail.com
</H5>
<H2>Objective</H2>
<H2>Biodata</H2>
<H2>Education</H2>
<H3>Universiti Kebangsaan Malaysia(1998–2000)
</H3>
<H3>Universiti Teknologi Malaysia(1994 – 1997)
</H3>
<H2>Position</H2>
<H2>Additional Information</H2>
(d) Save the file.
(e) Return to the web browser and open file:\Topic1\activity2.htm.
1.3.2 Paragraphs
Texts arranged in paragraphs do not need a particular format. However, you can
use the <P> tag if you need one empty line before the next paragraph. The <BR>
tag or break can also be used to replace the return key to create an empty line
before and after a paragraph. Activity 1.5 will help you to differentiate the two
tags.

ACTIVITY 1.5
Inserting Paragraphs into a Resume

(a) Open file activity2.htm.
(b) Save file as (Save As) activity3.htm.
(c) Insert the following text on a new line after code
“<H2>Objective</H2>”
To secure a position in the field of web
programming in the Information Systems Department
at a multi-national company that provides a wealth
of experience in the field of R&D.
(d) Save file and take note of the changes that happen when the resume
is opened with the web browser.
(e) Insert the following text in a new line after the code
“<H2>Position</H2>”
<P>Technical Assistant (Media Lab Sdn. Bhd. 1/1997
– 6/1997): Assist in installation and
troubleshooting of PC Windows 95/98. Assist System
Analyst with laying of cables for LAN network.
</P>
Technician (CyberLodging Sdn. Bhd. 7/1997 –
12/1997): Operate customer services. Monitor and
repair LAN network.
<BR><BR>
Assistant System Analyst (Aneka IT Sdn. Bhd.
6/2000 – Present): Managing company data
operations. Managing customer demands and
assisting System Analyst in developing a web-based
information system for the company.
(f) Save file and click on the Refresh button on the web browser to see
the changes in the resume.

1.3.3 List
In HTML, there are two types of tags that you can use to generate lists ă ordered
list and unordered list. Ordered list, <OL> is a list that follows a number
sequence. The number begins with 1 and increases each time a new item is
inserted, for example:
1. item A
2. item B
3. item C
Meanwhile, an unordered list <UL> is a list that does not follow a particular
sequence. At the beginning of each item, a bulleted indentation symbol is
inserted:
 item A
 item B
 item C
Each item for the two lists must be preceded by an item list tag, which is <LI>
with no closing tag. Try Activity 1.7 below which will add the two lists in the
resume.

ACTIVITY 1.6
Inserting List into a Resume

(b) Save file as activity4.htm.
(c) Insert the following text in a new line after the code
“<H2>Biodata</H2>”:
<UL>
<LI> Age: 25 years
<LI> Race: Malay
<LI> Religion: Islam
<LI> Status: Single
<LI> Weight: 65kg
<LI> Height: 160cm
</UL>
(d) Insert the following text in a new line after the code
“<H3>Universiti Kebangsaan Malaysia (1998 —
2000)</H3>”:
<UL>
<LI>Graduated June 2000. BSc Computer Science
<LI>CGPA: 3.05.
<LI>President Students Society
<LI>Member Rowing Club
</UL>
(e) Insert the following text in a new line after the code
“<H3>Universiti Teknologi Malaysia (1994 —
1997)</H3>”:
<UL>
<LI>CGPA: 3.19
<LI>Secretary Computer Club
<LI>Member Rugby Club
</UL>
(f) Save file, run the web browser and reopen the file.

The aim of Activity 1.6 is to test your theoretical knowledge. Make sure you
answer the question below.
ACTIVITY 1.7
Discuss the syntax to create an ordered and unordered list.
1.4 MODIFYING TEXT FORMAT

Each font in a text can be modified to a particular format according to your needs.
For example, text size can be enlarged, thickened, slanted, etc. The syntax to
subscript text is as follows:
<SUB>Text that can be subscripted</SUB>
Among the tags that you can use to change the physical characteristic of the text
are as stated in Table 1.2.
Table 1.2: Examples of Tag to Modify Text Format
Tag Explanation
<B> Indicates text to be in bold.
<I> Indicates text to be slanted.
<BIG> Indicates text of a larger font size.
<SMALL> Indicates text of a smaller font size.
<SUB> Indicates text to be displayed as subscript.
<SUP> Indicates text to be displayed as superscript.
Once a tag has been opened, it must be closed to indicate the end of the format
modification of the text. You can combine several types of tags for the same text
format. You will modify the text format in Activity 1.8. Try using <B> tags on
your text editor and share the outcome of the modification.

ACTIVITY 1.8
Modifying Text Format

(a) Open activity4.htm file.
(b) Save file as activity5.htm in the same folder.
(c) Insert <B> and <I> tags before each position name in the resume.
Do not forget to close each tag. The codes required are:
<B><I>Assistant Technician</I></B>
<B><I>Technician</I></B>
<B><I>Assistant Systems Analyst</I></B>
(d) Save the file.
(e) Open the web browser and observe the changes to each of the
position names.
If you have done Activity 1.8, continue to answer Activity 1.9 to test your
understanding.
ACTIVITY 1.9
Can one or more tags be combined to format the same text?
1.5 LINES AND GRAPHIC

Lines in HTML refer to horizontal tag line; <HR>. You will find that
the line is a horizontal line. There are no vertical lines in HTML. Similar to tag
items in List, line tags do not need to be closed. For line tags, if you do not specify
the length of the line, the line will be the same length as the web browser display.
The line tag syntax is:
<HR ALIGN=”x” SIZE=”y” WIDTH=”z”>
where x is the margin format, whether Right, Left or Center; y represents

1 to 12, referring to the size/height of the line; z is the length of the line in pixel
or percentages.

The following tag example will draw the line in the centre of the display. The line
is 1 unit in thickness, with 50% length of the display width.
<HR ALIGN=”Center” SIZE=”1” WIDTH=”50%”
HTML is capable of displaying graphics. This is one of the factors that makes
HTML popular. There are two types of graphic format that you can use in HTML:
Graphics Interchange Format (GIF) and Joint Photographic Experts Group
(JPEG). The benefit of this format is the file size is smaller than other file formats
such as BMP and PCX. The tag syntax for graphics is as below:
<IMG SRC=”name_file_graphic”>
If you place graphic files in different folders from the folder that contains HTML
documents, make sure that you enter the folder name as shown below:
<IMG SRC=”name_folder/name_file_graphic”>
Try Activity 1.10 to add more lines and graphics in the resume.

ACTIVITY 1.10
Insert lines and graphics into a Resume

(a) Open file activity 5.htm.
(b) Save it as activity.6.htm.
(c) Press Enter to create an empty line between the telephone number,
e-mail and objective sections. Insert the following HTML code:
<HR SIZE=”1” WIDTH=”100%”>
(d) Save the file. Open the web browser. A new line will be displayed.
(e) Obtain Ahmad YusufÊs picture that you will insert into the resume.
Name it Ahmad Yusof.gif and save it in Topic 1 folder in drive A.
(You can also insert other pictures in gif. or jpg. format).
(f) Return to text editor and press Enter to create an empty line on the
line tag “<HR SIZE=”1” WIDTH = “100%.”>”.
(g) Enter the following HTML code:
<P ALIGN=”Center”><IMG SRC=”AhmadYusuf.gif”></P>
(h) Open the web browser and view the picture displayed.
(i) Notice that the picture is in the centre, while the text „curriculum
vitae, name, address‰ is placed at the left margin. To standardise the
text, you will need to enter ALIGN= “Center” function at each
heading tag, as follows:
<H1 ALIGN=”Center”>Curriculum Vitae</H1>
<H2 ALIGN=”Center”>Ahmad Yusuf</H2>
<H5 ALIGN=”Center”>No 7, Jalan 3/2T, 43650 Bandar
Baru Bangi, Selangor</H5>
<H5 ALIGN=”Center”>03-89282394 ahmadyusuf@freemail.com
</H5>
(j) Save this file.
(k) Open the web browser and observe the changes in the resume.

 You have succeeded in completing a resume in the form of a website for

Ahmad Yusuf.
 However, the website is not complete as it lacks document links from the
resume to other websites.
 You will learn how to insert links in the following topic.
Document Content Markup Language

HTML WYSIWYG

Topic  Hypertext
2 Links
LEARNING OUTCOMES
1. Create two elements to link the HTML document;
2. Create two links between two different HTML documents;
3. Differentiate between absolute path and relative path; and
4. Create one link to other web objects.
 INTRODUCTION
Information management is important in website development. Websites that are
properly managed will give a positive image to the company or individuals who
are responsible for developing the website. Websites that are not properly
managed will be difficult to navigate, and in the process, will disappoint visitors
to the website.
In Topic 1, you have learnt the structure of a website. With proper structure and
links, visitors to your website will find it easier to obtain information and
navigate the website. In this Topic, you will be taught several structures and
methods of creating links between HTML documents.
2.1 LINKS TO OTHER WEBSITE OBJECTS

As discussed in Topic 1, websites can contain links to display documents or other
topics. Usually, links are selected by clicking the computer mouse. By inserting
links into websites, visitors can access relevant documents easily. Besides that,

TOPIC 2 HYPERTEXT LINKS  17
you can use links to draw a visitorÊs attention to an important and interesting
concepts.
In the resume that you have been designing, the windows display is limited as it
depends on the size of your web browser. This means information such as
Objective, Education and Position cannot fit into one page. Therefore, a visitor
will have to scroll down to find the required information. To overcome this
problem, you can create a link at the beginning of the document that allows the
visitor to directly access other sections of the resume.
To create links in the same document, you need an object known as anchor.
Anchor is the <A> tag which becomes the marker or destination that will be
accessed using links.
The syntax uses the characteristics NAME as follows:
<A NAME= “Name_Anchor”>Marker_Object</A>
In the resume, it can be used as follows:
<A NAME= “Edu”>Education</A>
Anchor does not need to be in text form. You can use other objects such as
graphics as markers.
Once you have created an anchor, you will need to create a suitable link for it.
Links using tags are the same, which is <A> or anchor with different properties.
Syntax for the links is as follows:
<A HREF=”#Name_Anchor”>Text_Link</A>
Hence, the syntax for the links for the Education anchor in your resume is as
follows:
<A HREF=”#Edu”>Education</A>
HREF refers to the location of the destination object. In the example above, the
destination object is the anchor represented by #Edu.
Link_Text created is underlined to differentiate it from normal text. In Activity

2.1, you will create a link in Ahmad YusufÊs resume similar to the links shown in
Figure 2.1.

18  TOPIC 2 HYPERTEXT LINKS
Figure 2.1: Create the following links
ACTIVITY 2.1
Creating Links
(a) Insert a thumb drive into your computer.
(b) Create a folder, name it Topic 2 in your thumb drive.
(c) Open file named activity6.htm in the Topic1 folder and save it as
activity7.htm in the Topic 2 folder.
(d) Identify the H2 heading tag for the Objectives section. The HTML
code is:
<H2>Objective</H2>
(e) Insert an anchor tag at the side of the head tag so the HTML code
will become as follows:
<H2><A NAME=”Obj”>Objective</A></H2>

(f) Identify other head tags for the following sections: Biodata, Education,
Position and Additional Information. Add anchor tags as shown in
step 5. The HTML code for the head tags with the added anchors are:
<H2><A NAME= “Bio”>Biodata</A></H2>
<H2><A NAME= “Edu”>Education</A></H2>
<H2><A NAME=”pos”>Position</A></H2>
<H2><A NAME= “Add_Info”>Additional Information </A></H2>
(g) To create links, you need to identify the image tag first which is:
“<P ALIGN=”Center”><IMG SRC=”Ahmad Yusuf.gif”> </P>”.
(h) Create a new line at the bottom.
(i) Add the following programme code:
<P ALIGN=”Center”>
<A HREF=”#Obj”>Objective</A> &#183
<A HREF=”#Bio”>Biodata</A> &#183
<A HREF=”#Edu”>Education</A> &#183
<A HREF=”#Pos”>Position</A> &#183
<A HREF=”#Add_Info”>Additional Information</A>
(j) Save the file, open the file with your web browser.
(k) Test each link to make sure the links function properly. If the links do
not function, make sure that both anchors at NAME and HREF are the
same. The values are case-sensitive.
ACTIVITY 2.2
In step (k) above, what do the &#183 symbols represent?
Take a short break before you continue with this topic.

2.2 LINKS TO SEVERAL HTML FILES
ACTIVITY 2.3
Have you heard of hyperlinks or links? What are the differences of these
two terms and what is the connection with links?
Links created are not only to link objects in the same document. Links can also be
used to open other documents in the same folder or different folders. To be able
to do this, you may use the same tag which is <A>. The syntax is:
<A HREF= “Document_HTML”>Text_Link</A>
Document_HTML refers to the HTML file name that you would like to link to;
such as resume.htm and reference.htm. Similar to the previous activities, the
Text_Link that you create will be underlined.
In the resume example, you will create a link to reference.htm document. Before
this, it would have been necessary for you to download reference.htm and save it
in the Topic2 folder, in your thumb drive.

ACTIVITY 2.4
Creating inter-document links

(b) Save it as activity8.htm in the same folder.
(c) Open the reference.htm file from the DVD and save it in the same
folder2.
(d) Scroll down until you reach the section Additional Information.
Insert the list below under the code “<H2>Additional
Information</H2>”:
<UL>
<L1><A HREF=”reference.htm”>Reference</A>
<L1>Open University Malaysia
</UL>
(e) Save this file.
(f) Open the web browser and try to link the file Reference that you
have just created. When you click on the link, the file reference.htm
will be displayed.
(g) Return to the text editor and open the file reference.htm.
(h) You will insert a link in the reference.htm file to return to file
activity8.htm. Add the following codes:
<P ALIGN= “Center”>
<A HREF= “activity8.htm”>Curriculum Vitae</A>
&#183
<A HREF= “activity8.htm#Add_Info”>Additional
Information</A>
</P>
(i) Click Refresh on your web browser, and you should find both links
have already been created in the reference.htm file.
(j) Click on both links to make sure that they are functioning. Take note
of the different functions between the two links.

So far, you have not created links to files in other folders. To open a file in
another folder, you will need to specify the fileÊs location. The location is known
as path. There are two types of paths in HTML:
(a) Absolute path and

(b) Relative path.
Absolute path refers to the actual location of a file in your computer. In

HTML, the absolute path begins with the symbol „/‰. This symbol refers to
the root or drive where the file is located.
For example, „/Student/Topic1/activity1.htm‰, means that the file activity1.htm

that is in Topic1 is a subfolder to the Student folder. Figure 2.2 and Table 2.1
illustrates the folder tree and matching absolute paths.
Figure 2.2: Folder tree

Table 2.1: Example of Absolute Path
Absolute Path Explanation

/index.htm File name index.htm is not in any folder. It is a
root file.
/Topic1/activity1.htm File name activity1.htm is in folder Topic 1.
/Topic2/activity8.htm File name activity8.htm is in folder Topic 2
which is on the same level as Topic 1 in the root
files.
/Topic2/Ref/reference.htm File name reference.htm in the Ref folder is a
sub-folder to Topic 2.
Another type of path is known as the relative path.
Relative path refers to the location of a relative file to a document that you
have opened. This path does not begin with the symbol „/‰. Instead, the
symbol „..‰ is used to refer to a file or folder that is located one level above
the document.
Table 2.2 will explain the usages of relative paths based on Figure 2.2.
Table 2.2: Examples of Relative Paths
Present Document Target Document Relative Path

index.htm activity1.htm activity1.htm
index.htm reference.htm Topic2/Ref/reference.htm
activity1.htm activity8.htm ../ Topic2/activity8.htm
reference.htm index.htm ../../index.htm
reference.htm activity1.htm ../.. Topic1/activity1.htm
ACTIVITY 2.5
1. What is the difference between absolute path and relative path?

2. Referring to Figure 2.2, what is the relative path if the current document
is reference.htm and the target document is activity8.htm?

2.3 LINKS TO OTHER WEB OBJECTS

To make your website more interesting, you cannot only rely on the information
that you have. You need to link your document to other websites owned and
operated by individuals or organisations that are related to the theme of your
website. With many useful links in your website, you are able to present and
share information with other user of the WWW.
To obtain the location of other websites, you need to understand the term URL.
Uniform Resource Locator (URL) is the standard to state the Internet

documentÊs location.
HTTP is the acronym for Hypertext Transfer Protocol. HTTP is a

communications protocol. It is also a set of programmes that determine how
information is transferred from one computer to another computer.
Table 2.3 explains URL components.
Table 2.3: URL Components
Components Explanation
http:// Communication Protocol
www.w3.org Name of the Internet host for the
computer that stores the document.
/Consortium/Legal/privacy-statement Path and document name
#Member Anchor name
Other than websites, you can also include your e-mail address in the website so
visitors can comment on your website. For example, in Ahmad YusufÊs resume,
his e-mail address is very important as it allows employment agencies to contact
him. Many web browsers assume an e-mail address is similar to a link. The
syntax is:
<A HREF=mailto:ahmadyusuf@freemail.com>ahmadyusuf@freemail.com
</A>

If a visitor clicks on the e-mail address, automatically the e-mail application in the
visitorÊs computer will run. Figure 2.3 shows the Outlook Express application
that will run automatically once the link has been clicked on. Notice that the
recipientÊs e-mail address is also inserted into the textbox automatically.
Figure 2.3: Outlook Express Application
ACTIVITY 2.6
Document links to other web objects.

(a) Open activity8.htm file in Topic 2 folder.
(b) Save it as activity9.htm in the same folder.
(c) Identify Ahmad YusufÊs e-mail address. Modify
ahmadyusuf@freemail.com to
<A HREF=”mailto:ahmadyusuf@freemail.com”>
ahmadyusuf@freemail.com</A>
(d) Scroll down to the text portion in the additional information section
that you would like to link to OUM.
(e) Add the following to the text
<LI><A HREF=http://www.oum.edu.my”>Open University q
Malaysia</A>
(f) Save the file.
(g) Open the web browser and click on the link that you have created.

Test yourself by answering the following Activity before you complete Topic 2.
ACTIVITY 2.7
1. What is HTTP? What are its uses?

2. What is the syntax for the e-mail link fn17537@sun1.fitmc.oum.my?
 Now you have succeeded in creating links to objects in the same document as
well as to other web objects. This enables visitors to explore your entire
website you have developed.
 However, your website will not look interesting without colours, graphics
and attractive fonts. To acquire these skills, we can continue to the next topic.
Absolute path Relative path

Anchor Uniform Resource Locator
HREF Web objects
HTTP

Topic  Website
3 Design
LEARNING OUTCOMES
1. Use value and colour names in your website;
2. Modify font format;
3. Manipulate graphics;
4. Modify placing and presentation of graphics; and
5. Use image maps and hotspots in developing an interactive website.
 INTRODUCTION
The website that you have developed will not look interesting without elements
such as colours, graphics and fonts. Not only do you have to organise the
contents of your website to present useful information to visitors, you will also
have to think about the websiteÊs presentation or design. An interesting and
attractive design will certainly impress the visitors. This topic will introduce you
to the basic elements of design, such as colours, graphics and fonts.
3.1 ADDING COLOURS
ACTIVITY 3.1
What is the importance of colours in making a website more appealing

and interesting?

28  TOPIC 3 WEBSITE DESIGN
Each website you develop will look more interesting if colour and graphics are
added to it. Adding colour in a document using editor software such as Microsoft
Word is not difficult. Just use your mouse. Click on the desired colour and the
text that you want to colour. However, adding colour to a HTML document is not
that easy.
There are two ways to represent colour in HTML. The first is to use colour value
and the second is to use colour name.
Colour values are numerals that represent a particular colour.
These numerals originate from three basic colours, which are red (R), green (G)
and blue (B), (see Figure 3.1). For each basic colour, HTML provides 255 shades.
That means, numeral 0 represents the lightest shade, while numeral 255
represents the darkest shade.
BLUE GREEN
CYAN
MAGENTA YELLOW
RED
Figure 3.1: Basic colours

TOPIC 3 WEBSITE DESIGN  29
Generally, there are 255ò or 16.7 million colours that can be created with this
combination of colours. There are too many colours for you to remember. It is for
this reason that each colour is differentiated by using RGB triplet. RGB triplet is
based on Red, Green and Blue components. For example, white will have an RGB
triplet value (255,255,255) and black will have the value (0, 0, 0). Figure
3.2 shows the colour dialogue box that you will see in the text editor application.
Figure 3.2: Colour Dialogue Box
However, in HTML you will not use numerals 0 until 255 but hexadecimal
numbers. Hexadecimal numbers are numbers with a base value of 16. The
equivalent of decimal base ten numbers and hexadecimals are stated in Table 3.1.
Table 3.1: Base Ten Numbers and Hexadecimals
Base Ten Numbers Hexadecimals

0…..9 0……9
10 A
11 B
12 C
13 D
14 E
16 F
To add colour in HTML documents, you have to change the RGB triplet value,
from base 10 to base 16. Table 3.2 describes the main colours in RGB triplet
value and hexadecimals.

Table 3.2: RGB Triplet Value and Equivalent Hexadecimal Values
Colour Name RGB Triplet Value Hexadecimal Value

Red (255,0,0) FF0000
Green (0,255,0) 00FF00
Blue (0,0,255) 0000FF
Cyan (0,255,255) 00FFFF
Yellow (255,255,0) FFFF00
Magenta (255,0,255) FF00FF
White (255,255,255) FFFFFF
Obtaining the hexadecimal value for each colour is a complicated process. It is a

trial and error process and it can be time consuming. To overcome this problem,
you can use another colour representation technique which is colour name.
Colour name is the name that represents a particular colour.
Therefore, you can continue to represent the colour red with the name “Red” or
green as “Green”. However, not all colour names are recognised by your web
browser. Colour names that are usually used and recognised by web browsers
are listed in Table 3.3.
Table 3.3: Examples of Colour Names
Aqua Grey Navy Silver

Black Green Olive Teal
Blue Lime Purple White
Fuchsia Maroon Red Yellow
Blue violet Gold Orange Sea green
Chocolate Hot pink Pale turquoise Sienna
Dark goldenrod Indigo Peach puff Snow
Firebrick Mint cream Salmon Tan

You can change the colour scheme of your website by changing the property in
the BODY tag. Examples of property are shown in Table 3.4 below.
Table 3.4: Examples of BODY Tag Property
Property Explanation
BGCOLOUR To determine the background colour of the document.
TEXT To determine the document text colour.
LINK To determine the colour of the links.
VLINK To determine the colour of visited links.
Syntax for the BODY tag is:
<BODY BGCOLOUR= “colour” TEXT= “colour” LINK= “colour”

VLINK= “colour”>
To add colour, you can use the colour name such as Maroon or Tan, or the colour
value such as #808080 and #CCCCCC. For example:
<BODY BGCOLOUR= “#FFFF00” TEXT= “Black” LINK= “Blue” VLINK=

“#FF0000”>
The script will result in a yellow background colour, black text, blue links and red
for visited links. Try the following Activity 3.1.

ACTIVITY 3.2
Changing the Text Colour and Document Background

(a) Insert a thumb drive in your computer drive.
(b) Create a folder; name it Topic 3 in your drive.
(c) Download the exhibition.htm, bakawali.htm, lestari.htm and
blockc.htm files from the website and save it in the Topic 3 folder.
(d) Run the text editor application and open the exhibition.htm file.
(e) Identify the BODY tag and complete the HTML code as follows:
<BODY BGCOLOUR = “Navy”TEXT = “#00FF00”
LINK=”#FF0000”VLINK= “Purple”>
(f) Save the file.
(g) Perform the same operation on bakawali.htm, lestari.htm and
blockc.htm. files. Save the files at the end of each operation.
(h) Run the web browser and open the exhibition.htm file in Topic 3.
(i) Click on the link and return to exhibition.htm. Notice the different
colours between the links.
ACTIVITY 3.3
1. What is colour value?

2. What is the colour name for the hexadecimal 00FFFF?
3.2 FONT MODIFICATION

In Activity 3.2, you have succeeded in modifying text colour by using BODY tag.
However, this operation changes the entire text colour. How do you change the
colour of a specific text? You can do this by using the FONT tag. The font syntax is
as shown below:
<FONT COLOUR= “colour”>Text To Be Changed</FONT>

For example, by inserting COLOUR= “Navy” in FONT tag, you are changing the
text colour to navy blue.
ACTIVITY 3.4
What is the difference between using BODY tag and FONT tag in
modifying the font colour in your website?
Apart from colour, FONT tag has the property to allow you to change the font
type. The default font for many web browsers is Times New Roman. You can
change the font type to:
 Arial
 Helvetica
 San Serif
 Courier New
The syntax is:
<FONT FACE=”font_type”>Text To Be Changed</FONT>
For example, if you want to change the text to Sans Serif, you need to insert the
property FACE= „San Serif‰ in the FONT tag. Figure 3.3 displays several
examples of font types.
Arial
Helvetica
San Serif
Courier New
Figure 3.3: Types of font
The SIZE property allows you to change the size of certain texts. Size is measured
by using point measurement. Table 3.5 shows the heading size in points.

Table 3.5: Heading Size in Points
Heading <Font SIZE=?>
H1 6
H2 5
H3 4
H4 3
H5 2
H6 1
The syntax to use SIZE property is:
<FONT SIZE= “Size”>Text To Be Changed</FONT>
For example, if you want to change the font size to 5, enter SIZE= „5‰ in the
FONT tag. If you want to increase the font size by 3 points relative to the font size
of the text, you insert SIZE= „+3‰.
ACTIVITY 3.5
Changing the Text Format

(a) Reopen the exhibition.htm file in Topic3 folder using notepad.
(b) Identify the text „Towards a Cyber Life‰.
(c) Add the following tag to the text.
<FONT COLOUR= „Yellow‰ FACE= „Arial‰ SIZE= „+2‰> Towards
a Cyber Life</FONT>
(d) Save the file.
(e) Run the web browser and open the exhibition.htm file in Topic 3.

ACTIVITY 3.6
1. What is the default font for most web browsers?

2. Write the FONT tag to display the text „Welcome‰. Here, the font
type is Arial, font colour is green and font size is 4 points larger than
the rest of the text.
3.3 MANIPULATING IMAGES
ACTIVITY 3.7
Is it possible to manipulate all image formats in website development?
Image is another object that you can insert into your website. By inserting the
appropriate images in terms of size, format and theme, your website will be more
interesting.
There are two types of image format that can be opened on most web browsers,
GIF and JPEG formats. Both these formats have their advantages and
disadvantages. Therefore, choosing the right format is important in website
development.
The syntax for graphic is:
<IMG SRC= “graphic_file_name” ALIGN=”align”

ALT= “text_mouse_over” VSPACE= “vertical_distance”
HSPACE= “horizontal_distance” WIDTH= “width” HEIGHT=
“height”>
Explanations for each of the variables are given in Table 3.6.

Table 3.6: Variables in Graphic Syntax
Variable Explanation
graphic_file_name Images from GIF or JPEG format.
Align How the text around the image will be arranged.
text_mouse_over Text that will be displayed when you run the mouse
pointer over the image.
vertical_distance Vertical distance between the image and surrounding

text.
horizontal_distance Horizontal distance between the image and surrounding
text.
Width Image width which is displayed (not necessarily the
actual size of the image)
Length Image length which is displayed (not necessarily the
actual size of the image)
GIF or Graphics Interchange Format is the graphic format that is most widely
used in the web. However, GIF files can only display a maximum of 256 colours.
Therefore, GIF is suitable for simple images such as logos, lines and icons.
Images that have more than 256 colours will look distorted on the web browser.
Among the advantages of GIF format include the capability of saving transparent
and animated images.
If you do not have the time to create GIF animated images, you can obtain them
for free from the web.

ACTIVITY 3.8
Inserting GIF Images into a Website

(a) Download the logo.gif image file from LMS and save it in Topic 3
folder.
(b) Open all exhibition.htm files that are in the Topic 3 folder using
Notepad.
(c) Identify the text „Computer and Human Exhibition 2007‰. You will
be replacing this text with a transparent GIF image.
(d) Delete the text and substitute it with the following code:
<IMG SRC=”logo.gif”>
(e) Save the file.
(f) Run the web browser and open file exhibition.htm in Topic 3.
Another graphic file format that can be opened by web browsers is JPEG or Joint
Photographic Experts Group. JPEG is different from GIF as JPEG is able to
support total colours and is capable of saving images of 16.7 million types of
colours. For this reason, JPEG is suitable for photographic images and video
images.
Another graphic file format that can be opened by web browsers is JPEG or Joint
Photographic Experts Activity 3.9.

ACTIVITY 3.9
Inserting JPEG Images into a Website

(a) Download the pusanika.jpg from LMS and save it in Topic 3 folder.
(b) Run the editor and open the exhibition.htm file in the Topic 3 folder.
(c) Identify the first paragraph that begins with the text „Computer and
Human Exhibition 2007 is ⁄⁄‰
(d) Insert the following graphic tag before the text and after the <P>
tag:
<P><IMG SRC= “pusanika.jpg” ALT= “Pusanika,
Universiti Kebangsaan Malaysia” ALIGN=”Left”
VSPACE= “5”
HSPACE= “20” WIDTH= “150” HEIGHT= “150”> Computer
and Human Exhibition 2007 is ……
(e) Save the file.
(f) Run the web browser and open exhibition.htm in Topic 3.
(g) Download file bg.jpg and save it in Topic 3 folder.
(h) Add BACKGROUND property to the BODY tag as follows:
<BODY … BACKGROUND= “bg.jpg”>
(i) Save the file and refresh the web browser to see the difference.
As a tip, when you insert colour and graphic into a HTML document, you will
find that the size of the file increases. This will slow down the display of the
document if the user is using a normal Internet connection. Therefore, there are
several ways to decrease the file size:
(a) Decrease the total colour that you are using. Use 256 colours, instead of 16.7
million colours.
(b) Decrease the graphic size by using graphic application such as Paint and
Adobe (this is not changing the width value and height in the IMG tag).
(c) Try to save the graphic in GIF and JPEG formats. Choose the format with
the smaller file size which does not improvise the quality of the graphic.
(d) Use GIF animation only for small images such as icons, lines and button.

(e) Use thumbnails, which are small images with low image quality. Place a
link at the thumbnail images to the actual graphic image. This gives the
visitor the opportunity to view the actual image.
(f) Recycle graphics. This is because web browsers will save graphic files when
you first access them into your computer. If needed, the computer can
access the same file at a later date.
ACTIVITY 3.10
1. Discuss the advantages of JPEG graphic files as compared to GIF.

2. Write the HTML code for a graphic file „title.jpeg‰ that has a 32-point
vertical distance and 25-point horizontal distance from the surrounding
text.
3.4 IMAGE MAP

Another application that you must be familiar with is the use of image maps.
Image map is a list of coordinates at an image that determines the boundary for
one or more hotspots. A hotspot is an area on the image that functions as a link.
Visitors can click on the hotspot and the link will be activated.
The purpose of image maps, is to make images interactive by placing several

links at the image. In the case of the website for exhibition.htm, you can place a
map of the Pusanika building as shown in Figure 3.4 to make it easier for visitors
to see the programme for each area.
To create image maps, you must open the image file with a graphics
application and record its coordinates to create hotspots. This is time consuming
and can be difficult. You can use several applications such as MapEdit, MapServe
and Web Hotspot that is used specifically to create image maps.

Figure 3.4: Pusanika map
Even though the applications create image maps automatically for you, it can
only be used as a support tool. You must still know the image maps syntax
because it will help you to understand the web browser display.
Image map syntax is:
<MAP NAME=”name_image_map”>
<AREA SHAPE=”form” COORDS=”coordinates” HREF=”URL”>
</MAP>
with name_image_map as any name that can represent image maps, form is the
type of hotspot form, coordinates are the coordinate points of the hotspot and
URL is the link document. Once the tag map has been completed, you will need to
add USEMAP property to the IMG tag as below:
<IMG SRC= “name_file_graphic” USEMAP= “#name_image_map”>
name_image_map is the same as MAP tag.
There are three types of hotspot shapes that you can use. The first hotspot shape
is a square. The SHAPE property for the square form is „Rect‰. The coordinates
for COORDS property is determined by two points, which are the corner points
on the top-left corner and on the right-down corner.

For the Pusanika map, the Lestari Auditorium can represent a square. Two
important points for the Lestari Auditorium will be (261, 91) and (339,196) as
shown in Figure 3.5. Therefore, the AREA tag syntax for the Lestari Auditorium
is:
<AREA SHAPE= “Rect” COORDS= “261, 91, 339,196”>
Figure 3.5: Lestari auditorium hotspot
The second shape is the circle and is represented as „Circle‰ at the SHAPE
property. The COORDS value for the circle is determined by the centre and
radius of the circle. The radius is calculated in pixel units. In the Pusanika map,
Bakawali Hall is the area which can be represented by a circle.
Figure 3.6 shows the centre and radius points of the Bakawali Hall. Therefore, the
AREA syntax for the Bakawali Hall is:
<AREA SHAPE= “Circle” COORDS= “220, 196, 40”>
The third hotspot shape is a polygonal, which is represented as „Poly‰. This form
of hotspot is suitable for areas shaped other than a square and circle. The
coordinates depend on the number of corners that make up the shape.

Figure 3.6: Bakawali hall hotspot
For example in Figure 3.7, a triangle has three corners, therefore its COORDS
equal to 6. For the Pusanika map, the Block C area has six corners. The AREA
syntax for Block C is:
<AREA SHAPE= “Poly”

COORDS= “142, 21, 142, 78, 82, 78, 82, 197, 20,
197, 20, 21”>
Figure 3.7: Block C hotspot

ACTIVITY 3.11
Inserting Image Maps in a Website

(a) Download the map.gif file from LMS and save it in Topic 3 folder.
(b) Open file exhibition.htm that is in the Topic 3 folder using notepad.
(c) Identify the text „With the cooperation from Fakulti Teknologi dan
Sains Maklumat, UKM‰. Insert the following codes, one line above
and below the text.
(d) Complete the code as follows:
<P ALIGN= “Center”>Click on each location to know
which program is going to be run or is being
run</P>
<P ALIGN= “Center”><IMG SRC= “map.gif” USEMAP=
“#pusanika”>
</P>
<P ALIGN= “Center”>With the cooperation from
Fakulti Teknologi dan Sains Maklumat, UKM</P>
<MAP NAME= “pusanika”>
<AREA SHAPE= “rect” coords= “261,91,339,196” href=
“lestari”>
<AREA SHAPE= “circle” coords=
“142,21,142,78,82,78,82,197,20,197,20,21” href=
“blockc.htm”>
<AREA SHAPE= “poly”
coords= “142,21,142,78,82,78,82,197,20,197,20,21”
href= “blokc.htm”>
</MAP>”
(e) Save the file.
(f) Run the web browser and open the exhibition.htm file in Topic3.
(g) Click on all three hotspots.

Around the map, you will see a purple coloured line. This line is called a BORDER.
This happens because your image contains links. To hide the line, add a BORDER
property to the IMG tag as follows:
<IMG SRC= “map.gif” USEMAP= “#pusanika” BORDER= “0”>
ACTIVITY 3.12
1. What is the meaning of hotspot and image map?

2. How many types of hotspots are there? List them down.
 You have learnt how to insert colour and to modify font type in your website.
You also learnt about several types of graphic file formats. You were able to
create image maps for those graphics.
 You may also want to display tables in your website. You may draw the table
as a graphic and display it as you have learnt in this topic.
 However, this is not an efficient method. In the following topic, you will learn
ways of inserting and modifying tables in your website.
Hexadecimal value Image map

Hotspot RGB triplet value

Topic  Using Tables
4
LEARNING OUTCOMES
1. Use one command to create a text table;
2. Create graphical tables with four appropriate commands;
3. Use at least one of the seven properties to modify table display; and
4. Create tables that have spanning rows and columns.
 INTRODUCTION
Now, you have an interesting website to present. To increase interactivity, there
is one more method for you to present text-based information. The text that you
would like to insert into your website does not have to be only in paragraphs. At
times, you may want to arrange your information into tables, especially if you are
presenting statistical information or a list of student names.
In the table itself, you can display or hide the column and row lines. In HTML,
the table object is known as table. In this topic, you will learn about tables and
how to create tables to insert into your website.
4.1 CREATING A TEXT TABLE

There are two methods to insert tables into a website. It involves inserting either
text tables or graphical tables. A text table is shown in Figure 4.1. This type of
table only contains texts that are arranged in columns of the same size.

46  TOPIC 4 USING TABLES
To use a text table, you need to use a typewriter or fixed-width font. An example
would be Courier New. Each letter in this font has the same width. Notice that
the font width for letters „m‰ and „i‰ is the same for Courier New as compared to
other fonts such as Arial and Verdana. The choice of fonts is important to
determine similar spacing between each word and space for each column.
Figure 4.1: Text table
The syntax for a text table is
<PRE>
Table_Contents
</PRE>
ACTIVITY 4.1
When is it most appropriate to use a text table?
In Topic 1, you learnt that HTML will ignore excessive tabs and spacebar.
However, this will not occur in PRE tag. You can press the spacebar many times
to create empty spaces so that your table is symmetrical and organised. Try to
complete Activity 4.1 below.

TOPIC 4 USING TABLES  47
ACTIVITY 4.2
Creating a Text Table

(b) Create a folder and name it Topic 4 in your drive.
(c) Download the file named activity15.htm from myLMS and save in
folder named Topic 4.
(d) Run the text editor application and open the activity15.htm file.
(e) Identify the <HR SIZE = „1‰ WIDTH = „100%‰> tag and create an
empty line below it.
(f) Type <PRE> and press the Enter key to create a new line under it.
(g) Type Item# and press the spacebar twice.
(h) Type Brand and press the spacebar three times.
(i) Type Model and press the spacebar sixteen times.
(j) Type Price and press the Enter key.
(k) Press the = key until a long line is created where it ends under the
letter „e‰ in the word Price.
(l) Complete the information in the table below. Make sure your
columns are wide enough to type the following information.
682 Dell PowerPC800 RM 3550
6840 Compact Inspire-X2 RM 3990
7894 Gateway GPC-450 RM 3680
1858 NEC Millennium Edition RM 3510
(m) Press the Enter key on the last line of the table and insert the closing
tag </PRE>.
(n) Save the file.
(o) Run the web browser and open file activity15.htm in Topic 4.

ACTIVITY 4.3
1. What are the two types of tables that you can insert into a website?
2. What is the tag used to create a text table?
4.2 CREATING GRAPHICAL TABLES

Another type of table is the graphical table as shown in Figure 4.2. This type of
table allows you to insert elements such as colour, shading and border. You can
also control the size of the table, column cells, row cells and text alignment in the
table. Therefore, you have the ability to determine the design of your table.
Graphical table displays are more attractive than text tables.
Figure 4.2: Graphical table
A graphical table uses the opening tag <TABLE> and is ends with the closing tag
</TABLE>. Each line is opened with the <TR> (table row) tag and is ended with
the closing tag </TR>. In each <TR> tag you need to insert the <TD> tag (table
data). The <TD> tag marks the beginning of the column and insert </TD> to close
the column.
You can insert as many columns for each line. If you want two lines and three
columns in a table, you must have two pairs of <TR> tags and six pairs of <TD>
tags.

The syntax for Figure 4.3 is as follows:
<TABLE BORDER= “1”>

<TR>
<TD> Cell One</TD>
<TD>Cell Two</TD>
</TR>
<TR>
<TD>Cell Three</TD>
<TD>Cell Four</TD>
</TR>
<TR>
<TD>Cell Five</TD>
<TD>Cell Six</TD>
</TR>
</TABLE>
The tag at the top most of the syntax is indented to differentiate it from the row
and column tags. You do not have to do this, but this indentation prevents you
from making mistakes and it will make it easier for you to read the codes.
Cell One Cell Two

Cell Three Cell Four
Cell Five Cell Six
Figure 4.3: Graphical table display

ACTIVITY 4.4
Creating a Graphical Table
(a) Download activity 16.htm from the DVD and save the file in the
Topic 4 folder.
(b) Open file activity 16.htm using Notepad.
(c) Identify the <HR SIZE = „1‰ WIDTH = „100%‰> tag and create an
empty line below it.
(d) Type <TABLE BORDER=1> to start a graphical table and press
Enter.
(e) For the column title of this table, type the following codes:
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
(f) Then, for the first line of the table type the following codes:
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
(g) Since the table has four columns for each line, you will have to
repeat step 6 three more times. Finally, you will have four pairs of
<TR> and </TR> tags.
(h) Return to the table heading, insert the following text as the title in
the first line.
<TR>
<TH>Item#</TH>
<TH>Brand</TH>
<TH>Model</TH>
<TH>Price</TH>
</TR>

(i) Next, insert the following text in the relevant columns for all four rows
that you have created.
<TR>
<TD>4682</TD>
<TD>Dell</TD>
<TD>PowerPC800</TD>
<TD>RM 3550</TD>
</TR>
<TR>
<TD>6840</TD>
<TD>Compaq</TD>
<TD>Inspire-X2</TD>
<TD>RM 3990</TD>
</TR>
<TR>
<TD>7894</TD>
<TD>Gateway</TD>
<TD>GPC-450</TD>
<TD>RM 3680</TD>
</TR>
<TR>
<TD>1858</TD>
<TD>NEC</TD>
<TD>Millennium Edition</TD>
<TD>RM 3510</TD>
</TR>
(j) Press the Enter key to create a new line and type the closing tag
</TABLE>.
(k) Save the file.
(l) Run the web browser and open the file activity 16.htm to see the
result.

ACTIVITY 4.5
(a) Explain the uses of the tags below:

<TABLE>
<TR>
<TH>
<TD>
(b) How do you determine the number of rows and columns in a

graphical table?
4.3 TABLE APPEARANCE
ACTIVITY 4.6
Appearance is related to the image we are showing. What is the

importance of table appearance?
In a graphical table, you can insert properties that can change the appearance of
the table such as colour, shading and borders so your table will look more
attractive. This section will discuss <TABLE> tag properties which are BORDER,
CELLSPACING, CELLPADDING, ALIGN, WIDTH, HEIGHT and BGCOLOR.
The use of BORDER property is to display table lines. By default, if you do not
insert BORDER properties, your table will be displayed without lines as shown in
Figure 4.1. The syntax for BORDER property is:
<TABLE BORDER=”size”>
whereby size is in pixel units.
In Figure 4.4, an example of a table display is shown with different BORDER

values.

Figure 4.4: Table with several different BORDER property values
CELLSPACING is the property that controls the space between cells in a table. The
default CELLSPACING value is 2. If you require a different value, you can set
CELLSPACING = „0‰. The property syntax for CELLSPACING is:
<TABLE CELLSPACING = “size”>
An example of a table display with several CELLSPACING values is shown in

Figure 4.5.
Figure 4.5: Table with different CELLSPACING property values
To determine the space between cell lines and text, you will need to use the
CELLPADDING property. By default, CELLPADDING value is 1. The syntax for
CELLPADDING property is
<TABLE CELLPADDING = “size”>
Here, you may be confused between CELLSPACING and CELLPADDING

properties. You must remember that CELLSPACING is the space between cells
and CELLPADDING is the space in the cell. Figure 4.6 is a display of a table with
several CELLPADDING values that are different.

Figure 4.6: Table with different CELLPADDING property values
By default, your table will be positioned at the left column or margin. You can
change the position by using the ALIGN property. The syntax is as follows:
<TABLE ALIGN= “position”>
Positioning can be done either to the left, centre or right. The ALIGN property can
also be used in the TD tag. Therefore, you can control the text positioning in each
cell. For example, the code:
<TD ALIGN = “Center”>ABC</TD>
will place text ÂABCÊ at the centre of the cell.
The size of a table is determined by the text contained within the cells. By default,
if you add text in a cell, the web browser will increase the width of the cell so that
the text in the cell is contained within a row. If you continue to insert text into the
cell until the width of the table is the same as the width of the display, the web
browser will place the text on the next line. This means that the width and height
of the table can be controlled automatically by the web browser.
In some situations, you will need to control the width and height of the table that
you have created. To do this, you will need to add to the WIDTH and HEIGHT
properties in the TABLE tag. The syntax is as follows:
<TABLE WIDTH = “width” HEIGHT = “height”>
with height and width in pixel units or percentages (%). The code is:
<TABLE WIDTH = “100%” HEIGHT = “300”>

This will result in your table being as wide as the web browser display and the
height will be 300 pixels. The following code:
<TABLE WIDTH = “100%” HEIGHT = “100%”>
will result in the table being the width and height of the web browser display.
This code is useful when you want to divide your website display page into
several sections.
The WIDTH property can also be used to determine the width of a cell. The syntax
for the WIDTH property is:
<TD WIDTH = “size”>
where size is in pixel units or percentages (100%).
Width value in percentage is the relative percentage to the width of the table and
not to the width of the web browser display. For example, if the width of the table
is 500 pixels, the cell with a 50% width is half of the 500 pixel value which is 250
pixels.
By default, the table cannot have any colour and is dependant on the background
colour or graphics of the document. To add colour in the table, you must use the
BGCOLOUR property. You can insert this property in the TABLE, TR, TH or TD tags.
The syntax is as follows:
<TABLE BGCOLOUR = “colour”>

<TR BGCOLOUR = “colour”>
<TH BGCOLOUR = “colour”>
<TD BGCOLOUR = “colour”>
where colour is the same as colour value or colour name. You are encouraged to
attempt the following activity.

ACTIVITY 4.7
Manipulating Graphical Tables

(a) Reopen the activity16.htm file from the Topic 4 folder. Save it as
activity17.htm in the same folder.
(b) Open the activity17.htm file using Notepad.
(c) Identify the tag TABLE and insert the property BORDER = „5‰ as below:
(d) Save the file and open file activity16.htm using the web browser to
view the border table.
(e) Next, add CELLSPACING and CELLPADDING properties in the same
tag as below:
<TABLE BORDER= “5” CELLSPACING= “0” CELLPADDING=
“5”>
(f) Save the file and refresh the web browser to view the changes to the
table.
(g) To position the table at the centre of the document, add ALIGN=
„Center‰ as below:
“5” ALIGN= “Center”>
(h) Next, save the file and refresh your web browser. The table
positioning should have changed from the left to the centre.
(i) In the same tag, add the property BGCOLOUR= „Silver‰ as below:
“5” ALIGN= “Center” BGCOLOUR= “Silver”>
(j) Save the file and refresh your web browser. You will find that the
background of your table is silver.
(k) For the table header, you may have to add a different background
colour such as „Gray‰. You may also want to set the width of the
price column so that it will not be too wide. Complete the following
code for the table header as below:
<TR BGCOLOUR= “Gray”>
<TH>Item#</TH>
<TH>Brand</TH>
<TH>Model</TH>

<TH WIDTH= “90”>Price</TH>

</TR>
(m) After you have completed the codes above, save the file and refresh
the web browser to view the changes that you have done to the table
header.
(n) You may want to colour the Item# column „Tan‰ and align it to the
„Center‰. To make the positioning of your Price column neater, you
may want to change the alignment to Right. Complete the codes
below:
<TR>
<TD ALIGN= “Center” BGCOLOUR= “Tan”>4682</TD>
<TD>Dell</TD>
<TD>PowerPC800</TD>
<TD ALIGN= “Right” WIDTH= “90”>RM 3550</TD>
</TR>
<TR>
<TD>Compaq</TD>
<TD>Inspire-X2</TD>
</TR>
<TR>
<TD ALIGN= “Center” BGCOLOUR= “TAN”>7894</TD>
<TD>Gateway</TD>
<TD>GPC-450</TD>
</TR>
<TR>
<TD ALIGN= “Center” BGCOLOUR= “Tan”> 1858</TD>
<TD>NEC</TD>
</TR>
(o) Save the file and refresh your web browser to view the display of your
new table.

To have a solid understanding on the subject matter of this topic, attempt Activity
4.8.
ACTIVITY 4.8
1. What is the code used to insert a column title in the first line of the
table?
2. What are the two units of measurement to determine width and
height of a table?
3. What is the difference between CELLSPACING and CELLPADDING?
4.4 SPANNING COLUMNS AND ROWS

The table that you have created in Section 4.3 has different information in each
row. In the real world, you may have to insert more than one row that contains
the same information. To help you from entering the same data repeatedly, you
can insert text into one cell which is a combination of several rows or columns.
This type of cell is known as spanning cell.
Spanning cell are cells that comprise more than one column or row.
An example of a table with spanning cells is shown in Figure 4.7.
Figure 4.7: Spanning cells in a table
The syntax for a spanning row is:
<TD ROWSPAN = “total_rows”>Text_In_Cell</TD>

where the total_rows is the total number of rows that you want to combine. For
example, if you enter the codes below, the output will be similar to that shown in
Figure 4.8.

<TR>
<TD WIDTH= “100”>1</TD>
<TD ROWSPAN= “3”>2(ROWSPAN)</TD>
<TD WIDTH = “100”>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
</TR>
</TABLE>
In the code above, you need two rows below the cell that is declared ROWSPAN (or
two more <TR> and </TR> tags). Therefore, the total number of rows to be
combined is three rows including the row where the cell is positioned at.
Figure 4.8: Example of a table that contains ROWSPAN
The syntax for a spanning column is
<TD COLSPAN=”total_columns”>Text_In_Cell</TD>
where the total_columns is the total number of columns that you wish to
combine.

The code below is an example of COLSPAN application. The output is shown in

Figure 4.9.
<TABLE BORDER “1”>

<TR>
<TD WIDTH= “100”>1</TD>
<TD WIDTH= “100”>2</TD>
<TD WIDTH= “100”>3</TD>
</TR>
<TR>
<TD COLSPAN= “3”>4</TD>
</TR>
<TR>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
</TR>
</TABLE>
In the code above, you need three columns at the row below.
Figure 4.9: Table that contains COLSPAN

ACTIVITY 4.9
Inserting ROWSPAN into a Table

(a) Reopen the file activity17.htm in folder Topic 4 and save it as
activity18.htm in the same folder.
(b) Open the activity18.htm file using notepad.
(c) Identify the tag table header and create a title column as below.
<TR BGCOLOUR= “Gray”>
<TH>Platform</TH>
<TH>Item#</TH>
<TH>Brand</TH>
<TH>Model</TH>
<TH WIDTH= “90”>Price</TH>
</TR>
(d) Next, insert the cell that you want merge to the first row of the table
as below:
<TR>
<TD ROWSPAN= “3”>Windows</TD>
<TD>Dell</TD>
<TD>PowerPC800</TD>
<TD ALIGN= “Right” WIDTH= “90”RM 3550</TD>
</TR>
(e) Next, insert the unrelated cells that is not merged into the last row
of the table (merging of cells only involves three rows, while the
table has four rows). Complete the code as below:
<TR>
<TD>MacIntosh</TD>
<TD>NEC</TD>
</TR>
(f) Save the file and open the file activity18.htm using the web browser
to display the results of the cell merge above.

ACTIVITY 4.10
1. What is meant by spanning cell?

2. What are the differences between COLSPAN and ROWSPAN?
ACTIVITY 4.11
This assignment requires you to create a colour table that has spanning
columns and rows.
SITUATION
Puan Salmah, the class teacher of 2-Sentosa, would like to put her class
timetable on the web. The timetable looks like the diagram below:
Day/Time 9-10 10-11 11-12 12-1 1-2 2-3 3-4
Physical
Monday BM-1 Math Eng-1 Eng-2
Education
Pend.
Tuesday Math BM-2 Eng-2
Islam
Pend.
Wednesday BM-1 BM-2 BREAK Math
Islam
Thursday BM-1 Math BM-2 Art Eng-2
Pend.
Friday Eng-1 Eng-2 Music Math
Islam

ASSIGNMENT
You are required to create the timetable for Puan SalmahÊs class. You are
also required to add colours to the timetable.
Additional information for the timetable are:

Ć The title of the document is „Timetable for Class 2-Sentosa‰,
Ć Table BORDER is 1,
Ć Table WIDTH is 75% of the web browserÊs display,
Ć CELLSPACING for the table is 0 and
Ć CELLPADDING of the table is 5.
Once completed, print out the results displayed on the web browser and the
HTML code and submit it to your tutor.
 In this topic, you have succeeded in creating two types of tables i.e. text and
graphical tables.
 You now can modify tables by adding colours and borders. You are also able
to span row and column cells on the table.
 By using the table, you can also create an object in HTML which is form.
 In the next topic, you will learn methods to create and send forms on the web.
Cellpadding Rowspan
Cellspacing Table
Colspan

Topic  Forms in
5 Web Pages
LEARNING OUTCOMES
1. Explain the concept of CGI script in web development;
2. Name elements in creating FORM tag;
3. Use six form elements; and
4. Differentiate two types of buttons in forms.
 INTRODUCTION
Forms are sometimes a necessity in web pages. You may be developing a website
in which you would like visitors to give certain input like registration of
customers and fill in the questionnaires. For this purpose, you need forms which
are objects in HTML to get the values visitors keyed in and process it.
In this topic, you will explore forms, its elements and the method of retrieving
values sent by visitors.
5.1 COMMON GATEWAY INTERFACE (CGI)

SCRIPT
ACTIVITY 5.1
Why is CGI script important in the development of interactive websites?

TOPIC 5 FORMS IN WEB PAGES  65
Before creating forms, you need to know how a form is read and processed on the
web first. Refer to Figure 5.1 to view form elements.
In HTML, there are specific tags that allow you to create a form like Figure 5.1.
However, forms do not have the ability to process information that has been
entered. One way of processing this information is by sending it to an application
run at the web server called CGI Script.
CGI Script or Common Gateway Interface script is any application or set of

instructions that receive data from HTML documents for performing certain
operations on that data.
Figure 5.1: Elements in a form

66  TOPIC 5 FORMS IN WEB PAGES
Figure 5.2 illustrates how a HTML document interacts with CGI Script.
With the introduction to CGI Script, you should be able to change the perspective
on the usage of HTML documents. HTML documents are no longer used solely to
display information (static) but also, to receive input from visitors and process it
(dynamic). This will encourage the development of many applications with web-
orientation such as:
(a) Database access;

(b) E-commerce;
(c) Sending e-mail; and
(d) Online forums, etc.
CGI Script can be developed using a number of programming languages like:
(a) C/C++;
(b) AppleScript;
(c) Perl;
(d) TCL; and
(e) Visual Basic.
Completed forms are

sent to the server
Data is
processed
by CGI
script in
the server
Results are sent back

to the web browser
Figure 5.2: CGI Script applications

CGI script is run on the web server; therefore you cannot create it and edit it. This
is due to the fact that CGI Script is developed in line with the web server
specifications and platform which you have no information on.
ACTIVITY 5.2
1. What is meant by CGI Script?

2. What is the advantage of a dynamic website?
5.2 FORM TAG

After understanding CGI Script, you need to know the elements that can be used
in HTML forms. These elements are:
Table 5.1: Elements in Form
Form Element Usage

Input box Accept/insert text
Selection list Long lists
Radio button Choose one option from a fixed list
Check box Check if an item is there or not
Text area Text that exceeds one line
Submit and Reset button Either to send or cancel delivery and return to the original
condition of the form
Before using the elements above, you need to declare to the web browser that the
website will be using forms. The tag used for this purpose is <FORM>. <FORM> tag
declares the start of the form and </FORM> tag is the closing tag. The syntax for
this tag is:
<FORM>
Elements
</FORM>
You can insert more than one form in a HTML document. However remember,
you cannot put a form in another form!

Between the <FORM> tags, you can insert other tags like heading, graphic, link,
table and more. This allows you to design the form so that it follows a particular
order. You can also have more than one form in the same HTML file. To
differentiate one form from another, you can insert NAME property in <FORM> tag
like below:
<FORM NAME= “form_name”>
ACTIVITY 5.3
1. What is the use of <FORM> tag?

2. What is the name of the element in form used to insert text that exceeds
one line?
5.3 FORM ELEMENTS

The main elements of form are Input Box, Selection List, Radio Button, Check
Box, Text Area and Hidden Field.
5.3.1 Input Box

The first element that will be discussed is the input box.
Input boxes allow you to add information in text or numbers.
The tag used is <INPUT> coupled with TYPE = “Text” property. The syntax is:
<INPUT TYPE= “TEXT” NAME= “element_name” SIZE= “size”

MAXLENGTH= “maximum_characters” VALUE= “initial_value”>
The NAME property is a must for INPUT tags. When a form is sent to CGI script,
the NAME property will be used to differentiate information that is sent from
various form elements. An example of NAME property usage is:
<INPUT TYPE= “TEXT” NAME= “Email”>
The SIZE property is to determine the width of the text box. On default, if you do
not declare this property, the width of the text box is 20 characters wide. If you
entered more than 20 words, the text typed in will automatically scroll to the left.

What this means is, you can enter as much text as you want but only 20
characters can be seen at a time. Nevertheless, the entire text will be sent to CGI
script. Some examples of the SIZE property can be seen in Figure 5.3.
Figure 5.3: Output of <INPUT TYPE= “TEXT” SIZE= “5”> and <INPUT TYPE=
“TEXT” SIZE “20”>
The MAXLENGTH property is where the total number of characters that can be
entered into the box is blocked. However, this property does not determine the
number of characters that can be viewed at a time as this is controlled by the
SIZE property. This property is important only when you require the user to
enter a certain amount of characters like postcodes (5 digits), and identity card
numbers (14 characters including „-„).
Another property that you can use is VALUE. The VALUE property is where a
default value is placed into an input box. Let us say that there is a box for
Country in your form. If most of the visitors to your website are Malaysians, you
can have „Malaysia‰ as the default text in the box. Visitors who are not from
Malaysia can delete this default value and enter the country they reside in.
In some situations you may want to block users from seeing the text that is
entered into an input box. For example, text boxes for passwords and credit card
numbers. You want the text here to be hidden from others that may be near the
user when the form is being filled out. This is made possible by changing the text
box to a password box. Input typed into a password box will be represented by
bullets or asterisks. The syntax is:
<INPUT TYPE= “PASSWORD”>
Figure 5.4 shows an example of a password box.
Figure 5.4: Password box

5.3.2 Selection List

The next element is the selection list.
Selection list is a list box that allows the user to choose an item of choice using
the mouse.
This element is useful if you have a list of fixed answers like country name, the
name of a particular companyÊs product or the months in every year.
For this you will use the <SELECT> tag for lists and <OPTION> tag for each item
in the list. Both tags require a closing tag. The syntax for selection list is:
<SELECT NAME= “element_name” SIZE=”size” MULTIPLE>

<OPTION VALUE= “value_of_Item1_to_be_sent”>
Item1 text</OPTION>
<OPTION VALUE=”value_of_Item2_to_be_sent”>
Item2 text</OPTION>
...
</SELECT>
Like other form of elements, the NAME property is needed for selection list. By
default, selection list will display only the first item in its list. If you wish to see
other items, you will need to press the drop-down arrow.
The SIZE property allows you to display more than one item at a time. Figure
5.5 shows the display of a few boxes using different SIZE property values.
Figure 5.5: Selection list using a few different values of SIZE property

Users are not necessarily confined to choosing only one item from the selection
list. You can change the list by entering the MULTIPLE property. It is meant to
allow users to choose more than one item in the list. There are two ways of
choosing more than one item:
(a) One-by-one
Press the Ctrl button while clicking on the desired items.
(b) Linked
Choose the first item in the desired item category, while pressing the Shift
key, choose the last item in the category. All the items between the first item
and the last chosen item will be automatically selected.
By default, a form will send the item text that you choose from the selection list.
However, in some circumstances you may want to send a code or value that is
not the same as the item text.
You can perform this by using the VALUE property in the OPTION tag. The
example below illustrates how a country code is sent to CGI script in place of the
country name.
<SELECT NAME=“ Country”>

<OPTION VALUE= “S”>Selangor</OPTION>
<OPTION VALUE= “w”>Wilayah Persekutuan</OPTION>
<OPTION VALUE= “P”>Pahang</OPTION>
<OPTION VALUE= “A”>Perak</OPTION>
...
</SELECT>
If you wish to preset an item as the default setting, use the SELECTED property as
shown below:
<OPTION VALUE= “C” SELECTED>Pahang</OPTION>
Continue reading again by visiting http://www.w3.org/TR/REC-

html40/interact/forms.html#h-17.4. Follow example 17.4.2 on the said website.
Apart from that, there are more information and current issues on the said
website that are related to the topic in this topic.

5.3.3 Radio Button
Radio button is a fixed list in button form.
The function of radio button is similar to selection list in the sense that it displays
the list for the user to choose from. Unlike the selection list however, the radio
button allows the user to choose one item only. When one item is chosen, the
previous selected item is cancelled.
To create a radio button, you need to use an INPUT tag together with a TYPE=
“RADIO” property. The syntax is as shown below:
<INPUT TYPE= “RADIO” NAME= “element_name”

VALUE= “item1_value”>Item1 text
<INPUT TYPE= “RADIO” NAME= “element_name”
The NAME property is necessary for radio buttons. The VALUE property is the
same as in the OPTION tag, which is to determine the value for the item that will
be sent to CGI script. Figure 5.6 shows the display for a few radio buttons. If you
wish to preset an item as the default, add the CHECKED property into the INPUT
tag as shown below:
<INPUT TYPE= “RADIO” CHECKED>
If you have more than one group of radio buttons, you will have to differentiate
them by giving different NAME properties to each one.
Figure 5.6: Example of a radio button

5.3.4 Check Box
Check box is a form element used to determine whether or not an item is

there.
Users will need to select or de-select a check box. Compared to the radio button, a
check box allows users to make more than one choice. The tag that you will need
to use for a check box is INPUT with the TYPE= “CHECKBOX” property. The
check box syntax is:
<INPUT TYPE= “CHECKBOX” NAME= “element_name”

<INPUT TYPE= “CHECKBOX” NAME= “element_name”
The NAME property is needed for check box just like other form elements. The
VALUE property is the same as in radio button, to determine the value for the
item that will be sent to CGI script.
You can see examples check boxes in Figure 5.7. If you wish to set an item as the
default selection, add the CHECKED property in the INPUT tag as shown below:
<INPUT TYPE= “CHECKBOX” CHECKED>
Figure 5.7: Example of a check box
5.3.5 Text Area
Text Area is a form element that allows users to insert text that exceeds one line.
Its syntax is:
<TEXTAREA NAME= “element_name” ROWS=”number_of_rows” COLS=

“number_of_characters” WRAP= “type_of_wrap”> Default
Text</TEXTAREA>

Rows property sets out the allowed number of lines. Meanwhile, the COLS
property refers to the number of characters that are permitted for each line.
TEXTAREA tag requires an opening tag which is <TEXTAREA>, and a closing tag
which is </TEXTAREA>. The text between the opening and closing tags is the
default text in the text area box.
WRAP property determines how text will fill each line in the text area box. It also
determines how the format of text that is sent to CGI script will be. Table 5.2
displays three WRAP property values that you may use.
Table 5.2: WRAP property values
Value Description
OFF Text is displayed in a long line. The text will scroll to the left if the
number of characters is more than the COLS value. Text will
move to the next line when you hit the Enter key. The text is sent
to CGI script in one line.
SOFT/ VIRTUAL Text will move to the next line automatically if the number of
characters exceeds the value in COLS. The text is still sent to CGI
script in one line
HARD/ PHYSICAL Text will move to the next line automatically if the number of
characters exceeds the value in COLS. Text is sent to CGI script
according to the number of lines as shown in the text area box.
Figure 5.8 shows the display for the following code:
<TEXTAREA NAME= “Comments ROWS= “5” COLS= “40” WRAP=

“VIRTUAL”>Enter your comments in here.</TEXTAREA>
Enter your comments in here.
Figure 5.8: Example of TEXTAREA display
ACTIVITY 5.4
Can you determine when do we use an input box and when do we use a
text area?

5.3.6 Hidden Field

Not all information that is sent to CGI script comes from the user. There are
situations when you predetermine the information and there is no need for input
from the user. The user does not need to see this information too. To create this
form element, you will use the INPUT tag together with a TYPE= “HIDDEN” tag.
The syntax is:
<INPUT TYPE= “HIDDEN” NAME= “element_name” VALUE=

“hidden_value”>
Like other form elements, the NAME property is required. An important property
is VALUE, which is the value hidden from the userÊs knowledge. You can put this
tag anywhere between the opening and closing TEXTAREA tags. The best place is
at the beginning of the TEXTAREA in order for you to understand the function of
the form.
ACTIVITY 5.5
1. What is the difference between SIZE and MAXLENGTH properties in

text boxes?
2. Explain two ways to choose more than one item from a selection list.
3. Explain the similarities and differences between radio option and
check box.
4. What is the use of the WRAP property in a TEXTAREA tag?
5.4 FORM BUTTON

So far, all the form elements that you have come to know store information that is
entered either by you or the user. Another type of element in forms is the button
that does not store any information but executes operations when clicked. The
button can execute three operations, namely running an application, submitting a
form and resetting information in a form.
The general syntax to run a program is:
<INPUT TYPE= “BUTTON” VALUE=”Text on the button”>

The general syntax for submitting a form is:
<INPUT TYPE= “SUBMIT” VALUE=”Text on the button”>
The general syntax to reset information in a form is:
<INPUT TYPE= “RESET” VALUE= “Text on the button”>
The VALUE property is the text displayed on the button. If you do not enter the
VALUE property for SUBMIT and RESET buttons, the default text „Submit‰ and
„RESET‰ will be displayed respectively. Figure 5.9 shows the display for two
types of buttons (SUBMIT and RESET).
<INPUT TYPE= “SUBMIT” VALUE=”Download”>

HTML
<INPUT TYPE= “RESET” VALUE= “Reset”>
tag
HTML tag to
create buttons
Download Reset
Figure 5.9: Buttons in form
5.5 FORM SUBMISSION

Before you submit a form, you need to know how and where it is sent. Therefore,
you will need to insert a few properties into the FORM tag which is the ACTION
property and METHOD property. The syntax for both properties is:
<FORM ACTION=”url” METHOD=”POST_or_GET”>
For example, if the CGI script is located at URL http://www.server.com/CGI-

bin/process.exe, its ACTION property is:
<FORM ACTION= “http://www.server.com/CGI-bin/process.exe”>

The ACTION property is to determine the location of the CGI script that will
process the form. The METHOD property will determine how the web browser will
send information to the CGI script. The values for METHOD are either GET or
POST. Discussion on the differences between these values is beyond the scope of
this topic.
However, in brief, GET will place every form of information at the end of the CGI
script URL. The CGI script will then change the information at the end of the URL
into text that will be processed. The POST method in a nutshell, sends
information as separate data streams.
POST is safer and more popular as there are instances when GET may cause
lengthy information to be cropped.
ACTIVITY 5.6
1. What are the differences between SUBMIT and RESET button?

2. What is the purpose of the METHOD property in a FORM tag?
ACTIVITY 5.7
Creating Form in a Table

(a) Create a new folder, Topic5.
(b) Open a new file using Notepad.
(c) Create a form based on Figure 5.1.
(d) Once done, save the file as activity19.htm.
(e) Run this file in a web browser to see the result of this form.

 Now you know how to use forms in a website and have completed this topic.
 Until now, the forms you have created have not been processed. This is
because input entered into the form was not sent to any application in the
server.
 You will therefore, learn in the next topic how to produce scripts at the server
that will manipulate input from web form. This script is known as Active
Server Pages (ASP).
CGI Selection list

Check box Server
Input box Text Area
Radio button

Topic  Introduction
6 to Scripts
LEARNING OUTCOMES
1. Explain the concept of client and server in a web page;
2. State three applications that can be built with client-side scripting;
3. Explain the importance of server-side programming;
4. Use scripts in developing web pages; and
5. Determine the needs of using events script.
 INTRODUCTION
One way to increase the interactivity of a web page is through the use of scripts.
JavaScript and VBScript are among the scripts you may have heard or read.
However, many people do not understand the usage and classification of scripts
in HTML.
Therefore, this topic will explain some important concepts like the client-server
concept, client-side programming and server-side programming and the use of
events, before delving into insertion of scripts into web pages.

80  TOPIC 6 INTRODUCTION TO SCRIPTS
6.1 CLIENT AND SERVER
ACTIVITY 6.1
What is your definition of client and server in the field of Information

Technology?
CGI Script or Common Gateway Interface script is any application or set of

instructions that receive data from HTML documents for performing certain
operations on that data.
When the web server opens a website, the operations executed by the web server
is not just a switch from HTML codes to text or pictures only. At the same time,
the web server also functions as a client that interacts with other servers that have
the HTML documents that you are accessing.
The simplest model to illustrate the relationship between client and server is the
processing of forms by the Common Gateway Interface (CGI) application. CGI is
an application that is run from the web server. The web user fills in a form and it
is sent to the CGI (see Figure 6.1).
Request
HTML file
Sent
Client Server
Figure 6.1: Client-server relationship
The userÊs request is received by the CGI and the requested output is sent. This is
illustrated in Figure 6.2. This shows that HTML is not a static document but it is
capable of developing server and client applications such as database access.
Value to
CGI Value is
processed
by CGI
Text
(result)
Client Server
Figure 6.2: CGI and web browser interaction

TOPIC 6 INTRODUCTION TO SCRIPTS  81
6.2 CLIENT PROGRAMMING

CGI is an example of a program that is run on the web browser. However, there
are several weaknesses to it, such as the need for the user to connect to the server
before running any CGI script. If the connection is terminated or cut off, the CGI
is unable to receive the web serverÊs request. Other than that, only the
programmer can modify the CGI program because the user is not authorised to
operate the web server.
In special situations, CGI can only be run by certain users to avoid intrusions to
the system that can slow down or even damage the web serverÊs application. This
restriction is set up by the system administrator.
The issues above have been the motivating factor to develop several types of
programs or scripts that can be run using a web browser on the clientÊs computer.
Client-side programming solved several problems related to interaction between

HTML documents and CGI. This process is no longer operated by the web server;
it is operated by the clientÊs script.
Scripts run on web browsers will reduce the burden of processes that are
performed by the server. Besides that, the reaction or output generated on the
web browser becomes faster. This is due to the fact that users no longer need to
send requests and wait for CGI output that is sent through the Internet.
Examples of client-side scripts are JavaScript and VBScript. The use of scripts is
limited to simple applications. An example of a simple application is the
development of a loan calculator in a web page. Besides that, among other
applications are form validation, web page decoration and dynamic web page
generation. HTML website developers are more comfortable with scripts because
scripts can be inserted into HTML files without changing the HTML codes.
There are other available client-side programming technologies like Java Applet
and ActiveX that are capable of performing more complex operations like
displaying graphics. Despite this, Java Applet cannot be discussed in this unit
due to its wide scope.
Operations on the clientÊs computer normally use JavaScript or VBScript. It

checks the contents of the form before sending it to the CGI. Data sent from the
form to CGI has to be checked first to ensure that the data does exist and the data
type is suitable for CGI.
To illustrate further, assume you are building a form to send the value of a
textbox that contains the name of a person to CGI. Initially, you may have to
ensure that the textbox is not empty. After that, you will have to enter a name.
Make sure that no numerical digit is inserted because logically a human name
does not contain digit.
It cannot be denied that scripts are able to perform many processes in a HTML
document. Given this, it cannot fully replace the applications provided by CGI. An
online shopping program for example, cannot store buying data at the client-side as
this would mean that data cannot be centrally kept up-to-date. Instead, the data is
combined in a database located at the web server. The role of CGI comes into play
here, to access the data for processing and sending it back to the client.
6.3 PROGRAMMING AT THE SERVER-SIDE
ACTIVITY 6.2
Why are client-side and server-side programs differentiated?
The use of programs at the server-side to increase the interactivity of your website is
the best choice. Among examples of programs at the server-side are CGI programs,
NSAPI/ ISAPI, Active Server Pages, Live Wire and Cold Fusion.
There are two reasons as to why programs need to be applied at the server-side:
(a) The Program Can be Fully Controlled

If there are changes to be made, the program file on the server only needs to
be updated. There is also no need to worry about the compatibility of the
program with the various web browsers available in the market. This is
because some client-side scripts can only be run on certain web browsers.
(b) Most of the Data Needed by Applications are Real-time Data

An example is applications that involve database. Users will perform a
variety of operations on a website which results in the need to update
particular data constantly. In addition to this, new data may need to be
added or old data may need to be deleted. It is impossible to keep this data
at the client-side. Hence, applications and the data are better kept at the
server.
One weakness of using programs at the server is that applications will rely
entirely on the server. The client or web browser needs only to send requests via
forms and then receive the result or decision from the server. Therefore, the
server workload increases and may cause delay in the processing of data at the

server. This situation can be aggravated when there are many requests from the
client at a time.
ACTIVITY 6.3
1. Provide two types of client-side scripts that are popular.

2. Provide three applications that can be built using client-side scripting.
3. Discuss two factors that encourages you to use applications on the
server.
6.4 INSERTING SCRIPTS INTO THE WEB PAGE

The main method of inserting a script into a web page is by using the <SCRIPT>
tag. This tag tells the web browser that all the text contained within it is script
and not HTML. The syntax for using the <SCRIPT> tag is as follows:
<SCRIPT SRC=”url” Language=”Script_Type”>

<!-
Place All Script Instructions Here
...
->
</SCRIPT>
url is the location and name of the script file if the script is located in a separate
file. JavaScript script for example can be placed under a file name like script.js.
Disregard this property if the code is placed in the same HTML file.
Script_Type refers to the type of script that is used. As you already know,
there are two types of popular scripts: JavaScript and VBScript. For instance, if
using JavaScript it would read as Language=”JavaScript”.
The symbols <!— and --> are used to hide the script from older versions of
web browsers that do not support the script. If the symbols are not placed, these
web browsers would read the script as part of the HTML document. This will
affect the way the existing web page is displayed. The <!— and --> symbols in
effect make the script as text comments. When older version web browsers read
the code, the script between <SCRIPT> and </SCRIPT> tag is ignored.

You can place <SCRIPT> tag anywhere in the HTML document. It can be placed
either in the <HEAD> tag or <BODY>. Nevertheless, many programmers prefer to
place it in the <HEAD> tag to differentiate script code and other HTML tags that
are display functions. There are some web developers who are more comfortable
placing it in the <BODY> tag in a location where the code will be run and then
displayed. Try Activity 6.5, so you can differentiate script that is inserted within
the <HEAD> tag and script placed in the <BODY>.
ACTIVITY 6.4
In the second paragraph of Subtopic 6.4, it is mentioned that script can be

written in a separate file. Using your idea, how did the script file concept
come about?
ACTIVITY 6.5
Inserting script into the web page

(b) Create a folder and name it Topic 6.
(c) Open Notepad from your computer.
(d) Type the code below:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!-
function Hello() {
alert(“Hello World”);
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad=”Hello”();”>
Push the Refresh button a few times.
</BODY>
</HTML>

(e) Store the file above as activity1a.htm. Open this file using a web
browser.
Next, open a new file using Notepad and type the following code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 ALIGN=”CENTER”>Title</H1>
<HR>
Website Contents
<BR><BR><BR><BR><BR><BR><BR>
<HR>
<SCRIPT LANGUAGE= “JavaScript”>
<!-
document.write(“Updated on:” +
document.lastModified);
-->
</SCRIPT>
</BODY>
</HTML>
(f) Store the above file as activity1b.htm and display it using a web
browser.
Before moving on to the next topic, test your theoretical understanding by doing
Activity 6.6.
ACTIVITY 6.6
1. Write the <SCRIPT> tag syntax using VBScript.

2. What is the purpose of  symbols?

6.5 EVENT SCRIPTS

What are events? Events are the result after an action is performed by the user.
Examples of events are the click of a mouse button, pressing a button on the
keyboard, double-clicking the mouse or moving the mouse cursor on the display
screen. There are also external events that are not initiated by the user like page
loading.
Other examples of events are onclick, onblur, onload, etc. You will be trying the
onclick event later in Activity 6.7. HTML allows numerous types of events which
are partially listed in Table 6.1.
Table 6.1: Events List
Events Explanation Allowed Elements

Onblur Run when an element loses focus. The user <A>, <AREA>,
shifts either to a form or different form <BUTTON>, <INPUT>,
element by clicking the mouse or hitting the <LABEL>, <SELECT>,
tab key. <TEXTAREA>
Onchange When a form element loses focus and its value <INPUT>, <SELECT>,
is changed compared to the previous value. <TEXTAREA>
Onclick Run when an element is clicked. Most HTML elements
Onfocus When an element gets the focus upon the click <A>, <AREA>,
of a mouse or use of the Tab key. <BUTTON>, <INPUT>,
<LABEL>, <SELECT>,
<TEXTAREA>
Onload Performed when the window or frame <BODY>, <FRAMESET>
containing the document is opened.
Onsubmit When a form is sent via a click of the Submit <FORM>
button on the form.

ACTIVITY 6.7
Inserting script into the web page

(a) Open a text editor (like Notepad) in your system.
(b) Type the following code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=”Button” onclick=’alert(“Hello
World”)’
VALUE=”Click Here”>
</FORM>
</BODY>
</HTML>
(c) Store the file above as activity2.htm and display it using a web
browser.
ACTIVITY 6.8
1. State what is meant by events?

2. When does the need arise to use the Onsubmit event and what types
of element can be used for this event?
 Now you know the basics of scripting, the next step is to apply this client
script and your ability to develop simple applications on the client-side.
 Before this, you will need to know the syntax for the script, as each script will
have a different syntax from the other.
 To obtain this skill, you will learn JavaScript in the next topic.

ActiveX Java Applet

CGI Scripts
Client Server
Client-side programming Server-side programming
Event Scripts

Topic  Javascripts
7
LEARNING OUTCOMES
1. Insert JavaScript into HTML documents;
2. Declare JavaScript variables and data;
3. Identify three types of functions that can be used in JavaScript; and
4. Use selection control structures and loops in JavaScript.
 INTRODUCTION
JavaScript is an example of a script language. Script language can be considered
as a non-complex programming language. Like other programming languages,
JavaScript consists of instructions that can be executed. What differentiates it is it
can be inserted into a HTML document. The results of a script can be viewed
using a web browser like Netscape and Internet Explorer.
In this topic, you will explore in detail the characteristics of JavaScript, syntax like
variables, operations and expressions, functions, control structures and loops for
JavaScript.
7.1 INTRODUCTION TO JAVASCRIPT

JavaScript can make HTML documents more interactive and provide operations
that HTML cannot. Among the simple operations that JavaScript is able to
execute are form checking, digital clock displays, background colour changes and
pop-up windows.

90  TOPIC 7 JAVASCRIPTS
JavaScript is a subset of Java with a few differences. It does not need to be

compiled but is directly translated by the web browser. However, JavaScript is no
match to the capabilities of Java. Table 7.1 highlights some of the differences
between Java and JavaScript.
Table 7.1: The Differences between Java and JavaScript
Java Java Script

Complicated Easy to understand and use
Requires Java Development Kit (JDK) for Does not need to be compiled
compiling
Programme is developed in a separate Script is placed in the same HTML
file document
Able to create complex applications For simple operations
7.2 USING JAVASCRIPT IN HTML DOCUMENTS

You have learnt in Topic 6 about types of tags needed if you wish to insert scripts
in a HTML Document. The important tag here is <SCRIPT>. For JavaScript, the
declaration for <SCRIPT> tag is as follows:
Examine the script below:
<HTML>
<HEAD>
</HEAD>
<BODY>
<!-
//print Hello World!
document.write(“Hello World!”)
->
</SCRIPT>
</BODY>
</HTML>
This script will give the following output:
Hello World!

TOPIC 7 JAVASCRIPTS  91
The instruction document.write (“Hello World”) will display the text

contained within (). In C and Java programming, every instruction must end with
a semicolon. It is usual for most programmers to type a semicolon at the end of
an instruction. Despite this, the semicolon is just an option in JavaScript.
Semicolons are necessary if you wish to insert more than one instruction in a line.
The previous versions of web browsers that do not support this script will
display the script code as normal text. To prevent this from happening,  can be used to make the script in between appear as comments to the
web browser. The // symbol is also a symbol for comments that are on a single
line only. This will prevent JavaScript from running the lines.
7.3 VARIABLES
Variables are temporary spaces to store data where it will be used to run
JavaScript programme. The value of the variable can change when the script is
run. You can refer to a variable by its name for the purpose of viewing the value
contained within or to change the existing value.
There are a few important rules that you need to remember when naming a
variable:
(a) Variable names are case sensitive; and

(b) Must begin with an alphabet or underscore.
You can declare a variable in two ways.
(a) Using the keyword var:

var intYear = value ā i.e. var intYear = 1502
(b) Without using the keyword var:

intYear = value ā i.e. intYear = 1502
When a variable is declared in a function, the variable can be accessed in that

function only. This type of variable is called a local variable. Therefore, you can
declare a variable with the same name in another function.
If the variable is declared outside the function, all functions in the programme
can access that variable. The lifespan of the variableÊs value begins when it is
declared and ends when the document is closed.

ACTIVITY 7.1
Obtain specific rules for naming variables besides the ones stated above.
7.4 OPERATIONS
Let us see how operations are used in JavaScript.
7.4.1 Arithmetic
JavaScript also provides a few arithmetic operators for use in mathematical
calculations. Table 7.2 illustrates JavaScript arithmetic operation symbols and
operation examples if the values a = 6, b = 11, and c = 3.
Table 7.2: Arithmetic Operations
Example
Symbol Definition
Operation Value d
+ Add d=b+c 14
- Subtract d=c-a -3
* Multiply d=a*b 66
/ Divide d=a/c 2
% Modulo d=b%a 5
++ Increase d = c++ 4
-- Decrease d = b-- 10

7.4.2 Accumulation
Certain operators may be used if you wish to accumulate the value of a variable.
Table 7.3 below lists the operation symbols for accumulation in JavaScript.
Table 7.3: Accumulation Operations
Operator Example Equivalent To

= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
7.4.3 Relationships
JavaScript also provides operators for operations involving meaningful
relationships, if you wish to run a comparison of data. Table 7.4, illustrates the
JavaScript symbols for relationship operations and examples of operations if a =
4, b = „g‰, c = -3 and d = „G‰. The ÂvalueÊ column shows the result given by the
computer after executing the relationship operation. The value 0 indicates a false
relationship value, while 1 represents a true relationship.
Table 7.4: Relationship Operations
Example
Symbol Definition
Operation Value
< Less than a<c 0
<= Less than or equal to c <= a 1
> Greater than d>b 0
>= Greater than or equal to a >= c 1
== Equals b == d 0
!= Not Equal to d != b 1

7.4.4 Logical
You may use logical operators when comparing between one or more operations.
Logical operators are shown in Table 7.5.
Table 7.5: Logical Operations
Example
Operator Type
Operation Value d
x=7, y=4
&& And True
(x < 10 && y > 1)
x=4, y=6
Or False
(x == 5 ŨŨ y == 5)
x=8, y=1
! Not True
x != y
7.5 FUNCTIONS
Function contains a portion of the code that will be run by events or the call to the
particular function. One function is one set of instructions. You may use the same
instruction repeatedly. An instruction like
alert(“Hello World!”)
actually means that a text value; “Hello World!” has been sent to the function
called alert.
(a) Functions with Arguments

A function is created by declaring its name, value (argument), and
instructions as follows:
function function_name (argument1,argument2,etc)

{
instructions
}
Argument is a variable that will be used in function. You can pass value to
function using argument. Example of a function call includes argument:
function_name (341, “Java”, etc)

Value 341 will be assigned in argument 1 and „Java‰ string will be assigned
in argument 2. Meanwhile, a function that does not include arguments must
remain as such.
Function Function_name()
{
instructions
}
The function call for the above function is:
function_name()
(b) Functions that Return a Value

Another type of function is a function that returns a value. Observe that this
function uses the keyword „return‰ that is normally placed at the end of a
function. The keyword return will resend a value to the instruction calling
the function. For example, this function that calculates the total of two
numbers:
function total(x,y)
{
result=x+y
return result
}
When this function is called, two values will have to be prepared to be sent
to the function. A variable also has to be prepared to receive the value
returned to the function. In the example below, total is a variable that will
receive the total of 4 and 1 which is 5.
total=total(4,1)

ACTIVITY 7.2
Functions
(a) Open your Notepad.
(b) Type the code below:
<HTML>
<HEAD>
<SCRIPT LANGUAGE= “Javascript”>
function speech(text)
{
alert(text)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE= “BUTTON”
ONCLICK= “speech(‘Selamat Datang!’)”
VALUE= “Bahasa Melayu”>
<INPUT TYPE= “BUTTON”

ONCLICK= “speech(‘Welcome!’)”
VALUE= “English”>
</FORM>
</BODY>
</HTML>
(c) Save the above file as activity3.htm and display it using your web
browser.

7.6 SELECTION CONTROL STRUCTURES

When writing a programme code, you may wish to execute different instructions
for different results. You can use selective control structures for this. In JavaScript
there are three selective control structures:
(a) if instruction
(b) if...else instruction
(c) switch instruction
Let us discuss the selection control structures further.
(a) if instruction
This instruction is used when you wish to run a set of codes given that a
particular condition is true. The syntax for this selective structure is as
follows:
if (condition)
{
code to be run if condition is true
}
(b) if...else instruction

This instruction is used when you wish to run one of two sets of
instructions. This selective structure has the following syntax:
if (condition)
{
code to be run if condition is true
}
else
{
code to be run if condition is false
}
(c) switch instruction

Use this instruction if you wish to run one of many instructions. The syntax
for switch is as follows:
switch (expression)
{
case value1:
code that is run if expression = value1
break

case value2:
code that is run if expression = value2
break
default:
code that is run if expression is neither value1 nor
value2
}
ACTIVITY 7.3
if () and switch ()
(a) Open your notepad.

<HTML>
<BODY>
var date = new Date()
var time = date.getHours()
if (time < 12)
{
document.write (“<b>Good Morning</b>”)
}
else if (time < 7)
{
document.write (“<b>Good Evening</b>”)
}
else
{
document.write (“<b>Time to Sleep</b>”)
}
</SCRIPT>
</BODY>
</HTML>
(c) Save the file above as activity4a.htm and display it on your web
browser.

(d) Next, open a new editor and type the following code.
<HTML>
<BODY>
var date = new Date()
var today = date.getDay()
switch (today)
{
case 1:
document.write(“Today is Monday”)
break
case 2:
document.write(“Today is Tuesday”)
break
case 3:
document.write(“Today is Wednesday”)
break
case 4:
document.write(“Today is Thursday”)
break
case 5:
document.write(“Today is Friday”)
break
default:
document.write(“Today is a holiday”)
}
</SCRIPT>
</BODY>
</HTML>
(e) Save the file above as activity4b.htm and display it using your web
browser.
7.7 LOOPING CONTROL STRUCTURES

When writing a programme code, it cannot be denied that you may want a
specific set of instructions to be run a few times. This can be achieved by using
repetition instructions. JavaScript has provisions for a few types of repetition
instructions as shown below:

(a) while
The program will run a specific set of instructions as long as the condition is
true. The syntax for while is:
while (condition)
{
code to be run when the condition is true
}
(b) do...while
The program will run a set of instructions once and will repeat it if the
condition is true. Do...while has the following syntax:
do
{
code that will be run
}
while (condition)
(c) for
An instruction that will repeat a set of instructions a few times. The syntax
for the instruction is as follows:
for (initialisation; condition; increment)

{
Code that will be run
}
An example for this instruction is:
{
document.write(“Number : “ + i)
document.write(“<br>”)
}
The output for the code above is:
Number 1
Number 2
Number 3

 In this topic, you have studied important characteristics and syntax in

JavaScript. There is another alternative script to JavaScript, which is VBScript.
 Follow VBScript in the next topic which is also capable of executing

instructions made with JavaScript. What sets them apart is the syntax used.
 In the next topic, you will learn the characteristics and syntax for VBScript
programming.
Control structures Selection structures

Function Variables

Topic  VBScripts
8
LEARNING OUTCOMES
1. Produce output from HTML documents using VBScript;
2. Apply two types of functions in VBScript; and
3. Use selection control structures and repetitions in VBScript.
 INTRODUCTION
In principle, the programming techniques in VBScript are the same as JavaScript.
What differentiates them is the syntax used. VBScript is an alternative to
JavaScript. A number of web developers choose VBScript because its syntax is
easier than JavaScript. How far is this true?
This Topic will explore further the characteristics of VBScript, syntax like
variables, operations, expressions, functions, control structures and repetitions
for VBScript.

TOPIC 8 VBSCRIPTS  103
8.1 INTRODUCTION TO VBSCRIPT

VBScript is the abbreviation for Microsoft Visual Basic Edition. It is a simplified
version of the Visual Basic and Visual Basic for Application family of
programming languages. It can be assumed to resemble BASIC programming
language.
Like JavaScript, VBScript is a type of script programming language that can

enhance the capabilities of a HTML document. The presence of this script can
make a website more dynamic in nature. Microsoft created VBScript specifically
as a client-side programming language for Microsoft Explorer 3.0 and above
while serving as a server-side programming language for Microsoft Internet
Information Server 3.0 and above.
The advantage of VBScript is the syntax is easier than JavaScript. In Activity 8.2
below, you will be creating VBScript to request a user name that will be placed in
the message box and displayed on your web page. Like other scripting
languages, VBScript can produce various types of programmes capable of
processing user input before data is sent to the server. Yet, the weakness of
VBScript is that the older versions of web browsers or browsers other than
Microsoft Internet Explorer may not be able to run VBScript properly.
ACTIVITY 8.1
Can you state the strengths and weaknesses of VBScript in comparison

to JavaScript?

104  TOPIC 8 VBSCRIPTS
ACTIVITY 8.2
Data Input
(a) Open a new file using Notepad.
(b) Create a new folder called Topic 8 in your thumb drive. Save this
file (Save as) activity1.htm.
(c) Type the following code:
<HTML>
<HEAD>
<TITLE>VBScript Example</TITLE>
<!-
UserName = InputBox("Enter Your Name?") MsgBox
UserName
Document.Write "<H1>"
Document.Write "My name is: " & UserName
Document.Write " <\/H1>"
->
</SCRIPT>
</HEAD>
</BODY>
</HTML>
(d) Save this file.
(e) Return to the web browser and open the file from
your thumb drive:\Topic8\activity1.htm
8.2 USING VBSCRIPT IN HTML DOCUMENTS

You have learnt in Topic 7 about the types of tags that need to be used if you
wish to insert JavaScript into a HTML document. The same tag; <SCRIPT>;
will be used. For VBScript declaration of a SCRIPT tag is as follows:

<SCRIPT LANGUAGE="VBScript">
An example of VBScript code is as follows:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE= "VBScript">
<!-
‘print the text "This is VBScript"
document.write("This is VBScript")
->
</SCRIPT>
</BODY>
</HTML>
The above script gives output as:
This is VBScript
Like JavaScript, the instruction document.write („This is VBScript‰) will print the
string or text within (). Older versions of web browsers that do not support this
script will display the script as normal text. To prevent this from happening, the
<!- and -> symbols will also be used. Their purpose is to make the script in
between appear as comments. The Â symbol is also a symbol to make a line of
instruction appear as comments. This will prevent VBScript from running
those lines.
8.3 VARIABLES
All types of variables in VBScript are in the variant type. This type of variable can
contain any data like integer, double, and string. Like other scripting languages,
there are a few important matters that need attention when naming variables in
VBScript as listed below:
(a) Must begin with an alphabet;

(b) Cannot contain a full stop punctuation; and
(c) Cannot exceed 255 characters.

You can declare a variable using the keyword Dim, Public or Private as shown in
Table 8.1 below.
Table 8.1: Declaring Variables
Using the Keyword DIM Without the Dim Keyword

Syntax Syntax
Dim Variable Variable = value
Variable = value
Example Example
Dim intAge intAge = 25
intAge = 25
Now, you have created a variable called intAge. Yet this method is not the best
method. There is a possibility that the variable name is misspelled, resulting in
wrong output by the program. For example, ıintAgeˆ could be misspelled as
ıintAggˆ. This causes to appear as if VBScript has been instructed to create
another variable called ıintAggˆ.
To prevent the error above, you can use the Option Explicit instruction. By using
this instruction, you will have to declare all variables with Dim, Public, or
Private. There is no issue of misspelling of variables. You can place the
instruction Option Explicit above your VBScript like this:
Option Explicit
Dim intAge
intAge = value
In the declaration of this variable, you will need to classify whether this variable
is local or universal. Refer to Subtopic 6.3 of Topic 6 as the concept is the same.
ACTIVITY 8.3
Compare the rules for naming VBScript to naming JavaScript. Are they
the same?

8.4 OPERATIONS
In Topic 7, we learnt about the operations in JavaScript. Now, let us see how it is
done in VBScript.
8.4.1 Arithmetic
Like JavaScript programming language, VBScript also provides for a couple of
arithmetic operators to be used in mathematical calculations. Table 8.2 shows
VBScript arithmetic operation symbols. Observe the example below with the
values for a=10, b=5, and c=2.
Table 8.2: Arithmetic Operations
Example
Symbol Definition
Operation Value d
+ Add d=b+c 7
- Subtract d=c-a -8
* Multiply d=a*b 50
/ Divide d=a/c 5
Mod Modulo d=b%a 5
8.4.2 Relationships
VBScript is equipped with operators for operations involving relationships that
are meaningful. If you wish to compare some data, refer to Table 8.3. The table
illustrates VBScript relationship operation symbols and operation examples if
a=7, b= ıfˆ, c=-1 and d= ıFˆ. The value used to show the result of the
relationship operation is 0 which represents false and 1 which represents true.

Table 8.3: Relationship Operations
Example
Symbol Definition
Operation Value
< Less than a<c 0
<= Less than or equal to c <= a 1
> Greater than d>b 0
>= Greater than or equal to a >= c 1
== Equals b == d 0
Not x = y Not Equal to Not d = b 1
8.4.3 Logical
In VBScript, you may use logical operators (as shown in Table 8.4) in the event
that you wish to compare one or more operations.
Table 8.4: Logical Operations
Example
Operator Type
Operation Value
x=6, y=3
And And True
(x < 10 And y > 1)
x=3, y=7
Or Or False
(x == 5 Or y == 5)
Not Not x=2, y=5 x Not y True
8.5 FUNCTIONS
VBScript has two types of functions that is Sub and Function.
8.5.1 Sub Functions

(a) Characteristics of Sub Function
 A set of instructions that begin with Sub and ends with End Sub.
 Executes instructions without returning any value.

 Can receive instructions that are sent to it via arguments.

 If there are no arguments, it still requires ().
The general form of Sub is as (i) or (ii):
Table 8.5: General form of Sub
(i) Sub sub_name () (ii) Sub sub_name(argument1,

argument2,etc)
instructions
instructions
End Sub
End Sub
(b) Call for Sub

To call Sub that has arguments, you can execute the following code:
Call sub_name (“VBScript, 3, etc)
The value ıVBScript will be accumulated into argument 1 and the integer
3 will be accumulated to argument2.
Call sub that does not have any arguments will still require () as shown:
Call sub_name()
8.5.2 Functions of Function

(a) Function Characteristics
Characteristics of Function on the other hand are:
 A set of instructions that begins with Function and ends with End
Function.
 Executes instructions and can return a value.
 Can receive instructions that are sent to it via arguments.
 If there are no arguments, it still requires ().
 The desired value that is returned must be accumulated to the name of

the function.

The general form of Function is as (i) or (ii):
(i) Function function_name()

instructions
function_name = return_value
End Function
(ii) Function function_name (argument1,argument2,etc)

instructions
function_name = return_value
End Function
(b) Call for Function

When you call function, you do not need to use the keyword Call. If
the function returns a value, you can use a code like:
variable = function_name()
or,
msgbox "Your name is " & function_name()
In the above instruction, a function called function_name is being called. The

value that is returned by the function will be combined into text that will then be
displayed in the message box.

ACTIVITY 8.4
Functions
(a) Open the Notepad.
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "VBScript">
Sub BM_OnClick()
msgbox "Selamat Datang"
End Sub
Function speech()
msgbox "Welcome" End Function
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" NAME = "BM"
VALUE= "Bahasa Melayu">
<INPUT TYPE= "BUTTON" NAME = "ENG"

ONCLICK= "Call Speech"
VALUE= "ENGLISH">
</FORM>
</BODY>
</HTML>
(c) Save the file above as avtivity5.htm in your Topic 8 folder and view
the output using a web browser.

8.6 SELECTION CONTROL STRUCTURES

The control structures provided in VBScript are different from control methods in
other languages. There are four types of selective control structures in VBScript
which are:
(a) if...then instruction

Use this instruction if you wish to run a set of codes when the condition is
true.
if i=7 Then msgbox "July"
The above instruction is suitable if you wish to run only one instruction
when the condition is true. If you want to run more than one instruction,
you must end the instruction with End if. Study the code below:
if i=7 Then
msgbox "July"
i=i+1
End if
(b) if...then...else instruction

Use this instruction if you wish to run one of two instructions. If you wish
to perform one set of instructions when the condition is true and run the
other set when the condition is false, you need to use the keyword Else.
An example is as below:
if i=1 then
msgbox "Right"
else
msgbox "left"
end if
(c) if...then...elseif instruction

Use this instruction if you want to run one of the many sets of instructions.
An example for the if...then...elseif control structure is as follows:
if pay= "Cash" then

msgbox "Payment Mode - cash"
elseif pay= "Visa" then

msgbox "Payment Mode - Visa"

elseif pay="AmEx" then
msgbox "Payment Mode - American Express"
else
msgbox "No mode of payment"
end if
(d) select...case instruction

Use this instruction if you wish to run one of many sets of instructions.
The program code that uses the control structure of (c) above can also be
suited for the select...case control structure. Look at the same code in
the form of select...case as shown below:
select case pay case "Cash"

msgbox "Payment Mode - cash"
case "Visa"
msgbox "Payment Mode - visa"
case "AmEx"
msgbox "Payment Mode - American Express"
case Else
msgbox "No mode of payment"
end select
In the code above, there are expressions which are normally variables desired to
be valued. An example is the variable Pay. The value of the intended variable to
be matched is included in each case. If the value of the variable is the same as
the matched value in a case, then the instruction for that case is executed.

ACTIVITY 8.5
if...then and select case
(a) Open your Notepad.

<HTML>
<BODY>
<SCRIPT LANGUAGE= "VBScript"> Dim hour

hour = hour(now())
if hour < 12 then
document.write("<b>Good Morning</b>")
elseif hour < 20 then document.write("<b>Good
Evening</b>")
else
document.write("<b>Time To Sleep!</b>")
end if
</SCRIPT>
</BODY>
</HTML>
(c) Save the above file as activity6a.htm and view the output on your
web browser.

(d) Open a new text editor and type the code below.
<HTML>
<BODY>
<SCRIPT LANGUAGE= "VBScript"> Dim today

today = day(now())
select case today

case 1
document.write("Today is Monday")
case 2
document.write("Today is Tuesday")
case 3
document.write("Today is Wednesday")
case 4
document.write("Today is Thursday")
case 5
document.write("Today is Friday")
case else
document.write("Today is a holiday")
end select
</SCRIPT>
</BODY>
</HTML>
(e) Save the file above as activity6b.htm in the Topic 8 folder and view
the output using a web browser.
8.7 LOOPING CONTROL STRUCTURES

As in JavaScript, VBScript also provides a number of different types of looping
instructions that can be used to run a set of instructions repetitively. The control
structure is as follows:
(a) For...Next ă repeat a set of instructions a few times.

(b) For Each...Next ă run instructions for each collection of items or each
element in an array.
(c) Do...Loop ă program will run a set of instructions as long as the
condition is true.

You can use the control structure For...Next if you know the number of loops
for a set of instructions that you wish to execute. Here, you may use a variable
whose function is to count the number of loops. The value for the counter can
increase or decrease. In the example below, the counter is the variable i.
For i=1 to 12
Next
The value for i will begin with 1 and increase by a margin of 1 until its value
reaches 12 through the keyword Next. What if the counter value should be
added more than 1? You may use the keyword step. By using step, you can
increase or decrease the counter value according to the value that is declared. The
following code show an example of the use of step.
For i=12 To 1 step -2

Next
If you do not know the number of loops that need to be performed, you should
use Do...Loop. The code below will be run when i is greater than 12.
Do While i>12
Loop
The next code will be run once for the first time, and the condition will be
inspected. If i is greater than 12, looping will be done.
Do
Loop While i>12
For Each...Next control structure will repeat a set of instructions for every
item in a collection or every element in an array. It is almost like the
For...Next control structure. The difference is that you do not need to state the
number of loops to be performed. The code below is an example:

dim Name(2)
names(0)= "Ahmad"
names(1)= "Yosuf"
names(2)= "Ismail"
For each x in Name

document.write(x & "<br>")
Next
The output for the above code is:
Ahmad
Yosuf
Ismail
You can use the keyword Exit if you wish to stop the loop. The code below is an
example of the use of Exit in a For...Next and Do...Loop control
structure.
For i=12 To 1
if i=5 then Exit
Next
Do While i>12
if i = 3 then Exit
Loop

ACTIVITY 8.6
This assignment tests your comprehension and skill to use events,

function and control structure in VBScript.
PROBLEM
A teacher needs one website that can show her learners adding operation
of two numbers. Below is the form she needs.
Name:
Email:
First Number:
Second Number:
Result:
Add
Your task is to create the form that enables the user to fill up the required
information which are the Name, Email, First Number and Second
Number before the answers are displayed in the Result textbox. If the
user does not fill up the textbox with any of the required information, a
message such as the one below must be displayed. The teacher also
requires that only the email addresses that are inserted in the email
textbox be checked so that only users who place their email addresses
correctly are allowed to execute the operation stated above.
Error message if the Name textbox is left empty.
Error message if the Email textbox is left empty.

Error message if the First Number textbox is left empty.
Error message if the Second Number textbox is left empty.
Error message if the email address entered has errors. For example, there
are no @ or ÂÊ.
TASK
You are requested to create a form that can produce addition result once the
Add button was clicked using VBScript codes. Once completed, display the
result in web browser and the HTML codes and send it to your tutor for
verification.
 You have learnt the important VBScript characteristics and syntax. Besides
being a client-side script, VBScript is also used as the foundation language
at the server-side. In other words, VBScript can also be run at the server.
 In the next topic you will study yet another scripting language called Active
Server Pages (ASP). This script runs on VBScript-based servers.

Looping VBScript
Sub functions

Topic  Active Server
9 Pages
LEARNING OUTCOMES
1. State the advantages of Active Server Pages (ASP);
2. Create ASP files;
3. Declare variables and data in ASP;
4. Apply functions and syntax in ASP; and
5. Use forms in ASP.
 INTRODUCTION
Script programming at the server using CGI is difficult to perform. This is
because you need to have knowledge on Perl and C. To overcome this problem,
Microsoft introduced Active Server Pages (ASP). ASP has syntax that is easier
and capable of creating a plethora of applications that are developed compared
to using CGI before. In this topic, you will learn basic ASP script programming.
You will also explore characteristics and syntax for some primary objects in ASP.
9.1 INTRODUCTION TO ACTIVE SERVER PAGES
ACTIVITY 9.1
Why is there a need for ASP when HTML is already in existence? What is
its advantage?

122  TOPIC 9 ACTIVE SERVER PAGES
You may have heard from someone or read about ASP. ASP is the abbreviation
for Active Server Pages. ASP can be referred to as an application that can be run
in IIS. IIS is the abbreviation for a Microsoft product called Internet Information
Services. IIS is also a type of web server.
IIS was bundled as a free component in Windows 2000. It can be found in

Microsoft NT 4.0 Option Pack that can be downloaded from the Microsoft
website. For personal computers that run on Windows 95/98, you can use
Personal Web Server (PWS) which is a smaller version with the same capabilities
as IIS. You can obtain PWS from the Windows 98 CD.
The history of ASP can be traced to its official launch by Microsoft on 12

December 1996. Since then, ASP has received high popularity and attention from
web developers. This is due to the capabilities that ASP has to offer which are:
(a) Ability to create dynamic forms and return results.
(b) Able to access information in databases and display them on the website.
(c) Ability to update information on a website without changing the HTML

code at all.
If HTML files have the extension *.htm, ASP files on the other hand end with .asp
such as index.asp. ASP files are the same as normal HTML files. You can insert
text, HTML, XML and script. The difference is in the way ASP files are processed
before being displayed to the web browser. When a web browser requests a
HTML file, the server sends the file to the client to be opened by the web
browser. In contrast, when a web browser requests an ASP file, IIS at the server
will process the file line by line and the result is sent to the client in text form.
ACTIVITY 9.2
1. What is the difference between IIS and PWS?

2. What is the advantage of ASP compared to HTML?

TOPIC 9 ACTIVE SERVER PAGES  123
9.2 INSERTING ASP SCRIPT INTO THE WEB

ASP files normally contain HTML tags like other HTML files. In addition to that,
ASP may also contain server-side scripts that are basically VBScript. However,
this script is run at the server and not the web browser (client). There are two
ways in which you can insert ASP script into HTML:
 Beginning the script with <% and ending it with %>. For example:
<%
...ASP Script
%>
 Insert the property runat = server in the SCRIPT tag. The code is as follows:
<script language = VBScript runat = server>

...ASP Script
</script>
You can use the Write method in the Response object to display text at the
web browser. For example, the code below will display the text „Hello World‰
on the web browser.
Response.Write(“Hello World”)

ACTIVITY 9.3
Creating an ASP file

(a) Open a new file in Notepad.
(b) Save this file as activity2.asp in the folder
C:\Inetpub\wwwroot\OUM that you created in Activity 9.2.
(c) Type the code below:
<%
Response.Write(“Hello World<BR>”)
Response.Write(“<B>Hello World</B><BR>”)
Response.Write) “<I>Hello World</I>”)
%>
(d) Save the file again.
(e) Open the web browser and type
http://localhost/OUM/activity2.asp
(f) The Response object also provides another method called
Response.Redirect. This method is used to open files as determined.
The syntax is:
Response.Redirect(“file_name”)
For example:
Response.Redirect(“erratum.asp”)
In the example above, ASP application will quit the processing of any file
currently open and jump to the file erratum.asp.
9.3 VARIABLES
There are two types of variables that can be declared in ASP and they are
Session or Application.
The Session variable stores information pertaining to a user. Hence, the same
variable will have different values for other users. This variable will begin storing
values as long as the user does not close the web browser. In general, this type of

variable is suitable for storing user information like name, ID, password, etc. The
syntax to accumulate the value at the Session variable is as follows:
Session(“variable_name”) = value
Session(“employee_id”) = A1302
The Application variable can be accessed by all users using the application.
Normally, the Application variable stores values that belong to all users. For
example, variables that store the number of visitors that have visited your
website. The syntax is as follows:
Application(“variable_name”) = value
Application(“system”) = “Student Information System”
To display the value of a variable in ASP, the syntax below is used:
<%=variable%>
For example:
<%=x%>
<%=Session(“employee_id”)%>

ACTIVITY 9.4
Variables in ASP
(a) Open a new file in Notepad and save the file as activity3.asp in the
OUM folder. (Server)
<%
dim count
count = count + 1
Session(“visitor_name”) = “Ahmad”
Application(“visitor_no”) = count
%>
Welcome <%Session(“visitor_name”)%>, you are
visitor number <%=Application(“visitor_no”)%>
(c) Save the file again.
(d) Open the web browser and type http://
localhost/OUM/activity3.asp
(e) Click the Refresh button and see the change to the visitor number in
your website.
ACTIVITY 9.5
1. Write the syntax to display „Welcome‰ text in the form of header H1

on the web browser.
2. What is the difference between Session and Application variables?

9.4 FUNCTIONS IN ASP

The syntax for functions in ASP is the same as function syntax in VBScript, which
is:
<%
sub sub_name(argument1, argument2, etc)
ASP instructions
end sub
%>
The instruction to call the above function is as follows:
Call sub_name(value_argument1, value_argument2, etc)
Do Activity 9.7 below to try out the functions in ASP.
ACTIVITY 9.6
Functions in ASP
(a) Open a new file in Notepad and save the file as activit4.asp in the
OUM folder. (Server)
<html>
<head>
<%
sub total(num1,num2)
response.write(num1+num2)
end sub
%>
</head>
<body>
The total of 5 and 9 is: <%call total(5,9)%>
</body>
</html>
(c) Save the file again.
(d) Open the web browser and type in http://localhost/OUM/
activity4.asp

9.5 FORMS IN ASP

Using HTML forms is a precise method for obtaining input from the user. An
example of a HTML form to obtain the userÊs name is:
<form method= “get” action= “process.asp”>
Mr/Mrs/Ms: <input type= “text” name= “title”><br>
Name: <input type= “text” name= “name”><br>
<input type=s “submit” value= “Send”>
</form>
There are two ways to get the value for the form above and that is through the
use of Response.Querystring or Response.Form.
Response.Querystring will take the form values in text format. For this, you
need to use method = get (observe the value for method in the form above).
The user can see this value. For example, if the form above is filled in as En.
Ahmad, the text that contains the formÊs value will be sent to process.asp will be
as follows:
http://localhost/Unitem/process.asp?title=En.&name=Ahmad
In the process.asp file, the value for title and name will each be received by
Response.Querystring. An example of the code for process.asp is:
<body>
Welcome
<%
response.write(request.querystring(“title”))
response.write(request.querystring(“name”) & “!”)
%>
</body>
The output for the above code is:
Welcome En. Ahmad
Response.Form on the other hand uses the method=post property in the
form. This method hides the values sent from the visitor. In the process.asp file,
Response.Querystring will receive each value for title and name. The code
for process.asp that uses Response.Form is:
<body>
Welcome
<%
response.write(request.form(“title”))
response.write(request.form(“name”) & “!”)
%>
</body>

The output is the same as the previous output which is:
Welcome En. Ahmad!
Try Activity 9.7 to get familiar with another property for form.
ACTIVITY 9.7
Forms in ASP
(a) Open a new file in Notepad and save this file as activity5.asp in the
OUM folder.
(b) Type the code below. Observe that the form will be sent to itself:
<html>
<body>
<form action= “activity4.asp” method= “post”>
Insert your name:
<input type= “text” name= “name”>
<br>
<input type= “submit” value= “Send”>
</form>
<%
If Request.Form(“name”)<>”” Then
Response.Write (“Hello “ & Request.Form (“name) &
“.”)
else
Response.Write (“Please follow instructions!”)
End if
%>
</body>
</html>
(c) Save the file.

(d) Open the web browser and type http://localhost/OUM/
activity5.asp.
Have you seen the output for Activity 9.7? Now answer the questions below to
improve your comprehension.

ACTIVITY 9.8
1. Give two ways for ASP to obtain values sent by a form.

2. Discuss the differences between GET and POST methods.
 In this topic, you have learnt the importance of ASP syntax. ASP
programming is not limited to applications that you have gone through in the
examples above.
 One application that has popularised ASP is information processing in

databases. By using ASP, you are able to get input from the user and then
store this data in a database.
Active Server Pages POST

GET

MODULE FEEDBACK
MAKLUM BALAS MODUL
If you have any comment or feedback, you are welcome to:
1. E-mail your comment or feedback to modulefeedback@oum.edu.my
OR
2. Fill in the Print Module online evaluation form available on myINSPIRE.
Thank you.
Centre for Instructional Design and Technology

(Pusat Reka Bentuk Pengajaran dan Teknologi )
Tel No.: 03-27732578
Fax No.: 03-26978702

CDWP2203

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

CDWP2203

Diunggah oleh

Hak Cipta:

Format Tersedia

Faculty of Science and Technology

Copyright © Open University Malaysia (OUM)

Copyright © Open University Malaysia (OUM)

Module Writers: Mohd Juzaidin Abd Aziz

Moderator: Dr Hamidah Ibrahim

Developed by: Centre for Instructional Design and Technology

First Edition, November 2008

Topic 1 Introduction to HTML 1

Topic 2 Hypertext Links 16

Topic 3 Website Design 27

Topic 4 Using Tables 45

Copyright © Open University Malaysia (OUM)

Topic 5 Forms in Web Pages 64

Topic 6 Introduction to Scripts 79

Copyright © Open University Malaysia (OUM)

Topic 8 VBScripts 102

Topic 9 Active Server Pages 121

Copyright © Open University Malaysia (OUM)

Copyright © Open University Malaysia (OUM)

Copyright © Open University Malaysia (OUM)

COURSE GUIDE DESCRIPTION

Copyright © Open University Malaysia (OUM)

Table 1: Estimation of Time Accumulation of Study Hours

Study Activities Study Hours

1. Exposing students to the latest internet technology.

Topic 2 gives you basic understanding of web programming. (Hypertext link)

Copyright © Open University Malaysia (OUM)

Topic 7 explores further detail the characteristics of JavaScript, syntax like

Topic 8 explores further the characteristics of VBScript, syntax like variables,

TEXT ARRANGEMENT GUIDE

Self-Check: This component of the module is inserted at strategic locations

Activity: Like Self-Check, the Activity component is also placed at various

Copyright © Open University Malaysia (OUM)

yourself in higher order thinking where you might be required to analyse,

References: The References section is where a list of relevant and useful

Sebesta, R. W. (2009). Programming the world wide web. Addison Wesley.

TAN SRI DR ABDULLAH SANUSI (TSDAS) DIGITAL

Copyright © Open University Malaysia (OUM)

Copyright © Open University Malaysia (OUM)

1.1 METHODS IN THE PREPARATION OF

Let us discuss this further.

Copyright © Open University Malaysia (OUM)

(a) What You See is What You Get (WYSIWYG) Tool

(b) The Markup Language

Markup Language is a set of formal specifications used to define

Markup Languages inherited a system called SGML (Standard Generalised

HTML is a popular Markup Language to develop a hypertext document.

HTML is a set of specifications (each one with an individual markup

Copyright © Open University Malaysia (OUM)

(i) Hypertext documents can be used in all platforms such as Microsoft

(ii) Hypertext documents can be displayed faster because text specifications

Visit http://www.w3c.org. The w3c consortium is an organisation

1.2 CREATING HTML DOCUMENT

Document content is information that you wish to display on the web

Copyright © Open University Malaysia (OUM)

Tag writing format and document content are as follows:

<Name Tag> Document Content</ Name tag>

Table 1.1: Examples of Tags

Opening Tag Closing Tag Explanation

<H1 ALIGN = “Center”>Ahmad Yusuf’s Website</H1>

Copyright © Open University Malaysia (OUM)

Creating HTML documents

(a) Insert the thumb drive into the computer drive.

(b) Create a ÂTopic 1Ê folder in the computer drive.