CBWP2203

Web Programming

Copyright © Open University Malaysia (OUM)

 CBWP2203
WEB
PROGRAMMING
Mohd Juzaidin Abd Aziz
Zulkarnain Md Ali
Mohammad Faidzul Nasrudin

Copyright © Open University Malaysia (OUM)

Project Director: Prof Dato' Dr Mansor Fadzil
Open University Malaysia

Module Writers: Mohd Juzaidin Abd. Aziz

Zulkarnain Md Ali
Mohammad Faidzul Nasrudin
University Kebangsaan Malaysia

Moderators: Dr Hamidah Ibrahim

University Putra Malaysia

Hidayah Elias

Developed by: Centre for Instructional Design and Technology

Open University Malaysia

First Edition, November 2008

Second Edition, April 2017
Copyright © Open University Malaysia (OUM), April 2017, CBWP2203
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 3
1.2 Creating HTML Document 6
1.3 Headings, Paragraphs and Lists 9
1.3.1 Headings 9
1.3.2 Paragraphs 11
1.3.3 List 14
1.4 Modifying Text Format 17
1.5 Lines and Graphic 20
Summary 23
Key Terms 24

Topic 2 Hypertext Links 25

2.1 Links to Other Website Objects 25
2.2 Links to Several HTML Files 28
2.3 Links to Other Web Objects 32
Summary 36
Key Terms 37

Topic 3 Website Design 38

3.1 Adding Colours 38
3.2 Font Modification 44
3.3 Manipulating Images 47
Summary 51
Key Terms 51

Topic 4 Using Tables 52

4.1 Creating a Text Table 53
4.2 Creating Graphical Tables 55
4.3 Table Appearance 59
4.4 Spanning Columns and Rows 66
Summary 70
Key Terms 71

Copyright © Open University Malaysia (OUM)

iv  TABLE OF CONTENTS

Topic 5 Forms in Web Pages 72

5.1 Common Gateway Interface (CGI) Script 73
5.2 Form Tag 76
5.3 Form Elements 77
5.3.1 Input Box 77
5.3.2 Selection List 79
5.3.3 Radio Button 82
5.3.4 Check Box 83
5.3.5 Text Area 84
5.3.6 Hidden Field 85
5.4 Form Button 86
5.5 Form Submission 87
Summary 89
Key Terms 89

Topic 6 Introduction to Scripts 90

6.1 Client and Server 91
6.2 Client Programming 92
6.3 Programming at the Server-side 93
6.4 Inserting Scripts into the Web Page 94
6.5 Event Scripts 97
Summary 99
Key Terms 100

Topic 7 JavaScript 101

7.1 Introduction to JavaScript 104
7.2 Using JavaScript in HTML Documents 102
7.3 Variables 104
7.4 Operations 105
7.4.1 Arithmetic 105
7.4.2 Accumulation 107
7.4.3 Relationships 107
7.4.4 Logical 108
7.5 Functions 108
7.6 Selective Control Structures 111
7.7 Looping Control Structures 115
Summary 118
Key Terms 119

Copyright © Open University Malaysia (OUM)

 TABLE OF CONTENTS  v

Topic 8 VBScript 120

8.1 Introduction to VBScript 121
8.2 Using VBScript in HTML Documents 123
8.3 Variables 124
8.4 Operations 126
8.4.1 Arithmetic 126
8.4.2 Relationships 128
8.4.3 Logical 129
8.5 Functions 130
8.5.1 Sub Functions 131
8.5.2 Functions of Function 132
8.6 Selective Control Structures 134
8.7 Looping Control Structures 137
Summary 139
Key Terms 140

Topic 9 Active Server Pages 141

9.1 Introduction to Active Server Pages 142
9.2 Inserting ASP Script into the Web 144
9.3 Variables 146
9.4 Functions in ASP 148
9.5 Forms in ASP 149
Summary 152
Key Terms 152

Topic 10 Database in ASP 153

10.1 ODBC and Server Object 153
10.2 Reading Records 156
10.3 Adding Records 158
10.4 Deleting Records 160
10.5 Updating Records 161
Summary 163
Key Terms 163

Copyright © Open University Malaysia (OUM)

vi  TABLE OF CONTENTS

Topic 11 Application Development: Case Study 164

11.1 Identify the Problem 165
11.2 Database Development and Website Structure 166
11.2.1 Database Entities 166
11.2.2 Website Structure 167
11.3 Website Creation 169
11.4 Developing ASP File 170
11.4.1 Function 1: To List the Names and Phone 171
Numbers of All Individuals
11.4.2 Function 2: To Display Detailed 174
Information of an Individual
11.4.3 Function 3: To Add Individual Record 177
11.4.4 Function 4: To Update the Specific Individual 182
Record
11.4.5 Function 5: To Delete the Individual Record 187
11.5 ASP Script Error 188
Summary 190
Key Terms 190

Topic 12 XML Technology 191

12.1 The Need for XML 191
12.2 What is XML? 193
12.2.1 Document Type Definition 194
12.2.2 Document Example 195
12.3 The Creation of XML Document 197
12.3.1 Creating DTD 197
12.3.2 Creating Document Example 198
12.3.3 Document Display 200
12.4 XML Document Conversion 202
12.5 DTD Standard 206
Summary 207
Key Terms 208

Copyright © Open University Malaysia (OUM)

COURSE GUIDE

Copyright © Open University Malaysia (OUM)

Copyright © Open University Malaysia (OUM)
 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
CBWP2203 Web Programming is one of the courses offered 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 learners taking the Bachelor of Information Technology
and other IT-related programmes.

As an open and distance learner, you should be acquainted with learning

independently and being able to optimise the learning modes and environment
available to you. Before you begin this course, please ensure that you have the
right course materials, and understand the course requirements as well as how
the course is conducted.

Copyright © Open University Malaysia (OUM)

x  COURSE GUIDE

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.

Table 1: Estimation of Time Accumulation of Study Hours

Study
Study Activities
Hours
Understanding the course content and initial discussions 2
Reading the module 60
Tutorials 8
Online learning 12
Completion of assignment 20
Revision 18
TOTAL STUDY HOURS ACCUMULATED 120

COURSE OUTCOMES
By the end of this course, you should be able to:

1. Explain the latest Internet technology;

2. Describe the technology which can be applied in web application
development; and
3. Discuss the methods of developing interactive and dynamic web
applications.

Copyright © Open University Malaysia (OUM)

 COURSE GUIDE  xi

COURSE SYNOPSIS
This course is divided into 12 topics. The synopsis for each topic is listed as
follows:

Topic 1 exposes learners to the basic static web development documents which
can be linked to other static sites through the Hypertext link. In this topic, we will
also learn about HTML.

Topic 2 explains the Hypertext link.

Topic 3 explains website architecture and design.

Topic 4 explains the different types of tables and how to create text table,
graphical table, table appearances and spanning columns and rows.

Topic 5 introduces the concept of Common Gateway Interface (CGI), which is a

specification to transfer information from the web server to CGI programme. The
CGI programme is one which receives and returns data according to CGI
specifications. Certain information in HTML found between the tag <FORM>
and </FORM> can be sent to CGI for processing.

Topic 6 and Topic 7 introduce scripting language that can be embedded in a

HTML document. This script enables HTML to be more interactive and dynamic.
JavaScript covered in these topics must be learnt because it is a script that
functions in most browsers (cross-browsers). The script appears similar to
programming language although it is not a real programming language such as
C or Java.

Topic 8 discusses VBScript. It is an alternative to JavaScript. VBScript is not cross

browser compatible and it can only be performed on the Internet Explorer
Browser. Both JavaScript and VBScript are scripts that are executed, interpreted
and translated on the client side (browser). This approach is known as client side
scripting. VBScript is also applied by Microsoft as a server side scripting.

Topic 9 explains the Active Server Page (ASP). It is also one of the web
programming scripts. The difference between ASPÊs application and JavaScript
or VBScript is that the ASP script is executed on the server side. This approach is
known as the server side scripting. The ASP technology is executed within the
Microsoft Software environment.

Topic 10 discusses database in ASP. It explains the database connectivity through

ODBC layer using ASP script as learnt in Topic 9.

Copyright © Open University Malaysia (OUM)

xii  COURSE GUIDE

Topic 11 discusses application development with a case study exercise using the
cook book method. You need to type the codes and execute it to your computer
for the result. You also need to use Access database, the required support file, IIS
and a browser. Tutors and learners need to execute the examples given in their
respective computers.

Topic 12 describes Extensible Markup Language, also known as XML. It is

important in Internet technology especially for interoperability and data sharing
between applications. It must be introduced to learners. XML and related
technology such as Document Type Definition (DTD), Extensible Stylesheet
Language (XSL) and others are standard languages and are not subjected to any
particular product. The required software for this topic is a browser.

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
yourself in higher order thinking where you might be required to analyse,
synthesise and evaluate instead of only having to recall and define.

Copyright © Open University Malaysia (OUM)

 COURSE GUIDE  xiii

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
There is no prior knowledge needed.

ASSESSMENT METHOD
Please refer to myINSPIRE.

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, Books24×7, 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.

Copyright © Open University Malaysia (OUM)

x  PANDUAN KURSUS

Copyright © Open University Malaysia (OUM)

Topic  Introduction
to HTML
1
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Identify two methods of preparing hypertext documents;
2. Create a HTML document;
3. Use headings, paragraphs and lists;
4. Modify text format; and
5. Use lines and graphics.

 INTRODUCTION
Welcome to the CBWP2203 Web Programming module. Can you list some of the
top programming languages used in web development? How many can you list?
Let us look at Figure 1.1 to find out what are the top programming languages used
in web development.

Copyright © Open University Malaysia (OUM)

2  TOPIC 1 INTRODUCTION TO HTML

Figure 1.1: Top programming languages used in web development

Source: https://www.cleverism.com

As you can see in Figure 1.1, one of the top programming languages is HTML5.
HTML5 is the latest version of the hypertext markup language or more popularly
known as HTML. Therefore, this first topic will introduce you to and give you basic
knowledge of HTML.

In order to achieve this objective, you will learn some important concepts in HTML.
This includes the methods of preparing hypertext documents, formatting the
layout, formatting the texts as well as using lines and graphics in HTML
documents.

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  3

ACTIVITY 1.1

You can read more on Top Programming Languages Used in Web

Development by visiting this URL:
https://www.cleverism.com/programming-languages-web-
development/

Then, find out the latest top programming languages used in web
development for the year 2016 and compare them with this article.

1.1 METHODS IN THE PREPARATION OF

HYPERTEXT DOCUMENTS
Let us start this first subtopic by opening the Open University Malaysia (OUM)
website (see Figure 1.2).

Figure 1.2: Open University Malaysia (OUM) official website

How do we create a hypertext document (web page) as in Figure 1.2? There are
two methods to create a hypertext document (web page). These methods are listed
in Figure 1.3.

Copyright © Open University Malaysia (OUM)

4  TOPIC 1 INTRODUCTION TO HTML

Figure 1.3: Two methods to create a hypertext document (web page)

These two methods are further explained as follows:

(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 documents can be transformed into hypertext document
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) Markup Language

The second approach in preparing hypertext document is by using markup
language (HTML). In fact, HTML is a popular markup language to develop
a hypertext document. What does it stand for? Generally, a markup language
is a set of formal specifications used to define information. To be specific, here
is the meaning of HTML:

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

that can be used to define the elements of hypertext documents.

What is the objective of HTML? The objective of HTML is to specify how a

particular text should be processed.

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  5

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.

Actually, SGML is a complex plan structure to describe markup language. In

the SGML terminology, a markup language according to SGML is called DTD
(Document Type Definition). Therefore, markup languages like HTML and
XML are DTD based on SGML. Web servers such as Internet Explorer will act
like 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 for new versions are still growing (as stated before,
the latest version is HTML5). 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. Thus, some advantages of these differences are:

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

Windows, Linux and Unix; and

(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.

SELF-CHECK 1.1

State the advantages and the disadvantages of using the WYSIWYG

and markup language approach in developing a hypertext document.

Copyright © Open University Malaysia (OUM)

6  TOPIC 1 INTRODUCTION TO HTML

ACTIVITY 1.2
Visit W3CÊs official website at http://www.w3c.org. The W3C
consortium is an organisation consisting of web programmers, IT
representatives and researchers that determine HTML specifications and
standards. You should try to obtain the HTML definition from this
website.

1.2 CREATING HTML DOCUMENT

In each hypertext document (website), there are two main elements that you need
to be familiar with which are document content and tag (see Figure 1.4).

Figure 1.4: Two elements in a hypertext document

The writing format for tag and document content are as follows:
<Name Tag> Document Content</Name tag>

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 which
are 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>

Note: Programming syntax uses US spelling (for example, Center and Color);
not the UK spelling. Make sure you spell it right or otherwise your program will
not run successfully or have error.

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  7

Let us look at Table 1.1 which gives you some examples of tags that you can use.

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 beginning and end of website content body.
<H1> </H1> This tag represents the heading.

Let us try Demo 1.1 by following the steps instructed.

Demo 1.1:
Creating HTML Documents
(a) Create a „Topic 1‰ folder in the C drive.
(b) Open text editor (similar to Notepad) that is in your system.
(c) Type the following codes:
<HTML>
<HEAD>
<TITLE>Ahmad Yusuf’s Website</TITLE>
</HEAD>
<BODY>
<H1>Curriculum Vitae</H1>
<H2>Ahmad Yusuf</H2>
</BODY>
</HTML>
(d) Save the file as demo1.htm in Topic 1 folder in your C drive.

Copyright © Open University Malaysia (OUM)

8  TOPIC 1 INTRODUCTION TO HTML

The new file that you have created in Demo 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 is no syntax or logical mistakes in completed HTML
documents. This can be done by displaying it to the web browser like Internet
Explorer, Google Chrome or Firefox. It must show the following output (Figure
1.5).

Figure 1.5: Output for Demo 1.1

Now let us do Demo 1.2 as the continuation of Demo 1.1.

Demo 1.2:
Display HTML File on Web Browser
(a) Run the web browser that is on your system (such as Internet Explorer).
(b) Choose „File‰ menu  „Open‰.
(c) Locate file demo1.htm that you have saved in Demo 1.1. The file is possibly
located at C:\Topic1\demo1.htm.
(d) Click the „OK‰ button. Results will be displayed on your web browser
screen.
Open the demo1.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?

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  9

SELF-CHECK 1.2

Why do you need to place the <HTML> tag in your website?

1.3 HEADINGS, PARAGRAPHS AND LISTS

Did you know that we can set headings, paragraphs and lists in hypertext
documents? Let us learn how to do this by continuing the lesson.

1.3.1 Headings
What does heading mean?

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>

Where x is the value from 1 to 6.

Let us look at Example 1.1 that creates a heading.

Example 1.1:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Copyright © Open University Malaysia (OUM)

10  TOPIC 1 INTRODUCTION TO HTML

This will produce the following result (see Figure 1.6):

Figure 1.6: Output for Example 1.1

A header tag also has its characteristics like ALIGN. ALIGN = “Center” means
that the web browser will display the text in the centre of the screen. For example:

<H1 ALIGN= “Center”> Curriculum Vitae </H1>

Header Characteristic

This syntax will produce the output as in Figure 1.7.

Figure 1.7: A header tag that has been set to ALIGN = “Center”

The screenshot in Figure 1.7 shows you the output for H1 characteristic. Now you
are required to complete Demo 1.3. This activity will sharpen your skills in
constructing HTML documents.

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  11

Demo 1.3:
Inserting Heading into a Resume
(a) Run the text editor and open demo1.htm file.
(b) Save file as („Save As‰) demo2.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>
<H2>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 C:\Topic1\demo2.htm.

What is the output of this file?

1.3.2 Paragraphs
Did you know that 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. Let us look at Example 1.2 that
creates a paragraph.

Copyright © Open University Malaysia (OUM)

12  TOPIC 1 INTRODUCTION TO HTML

Example 1.2:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is first paragraph of text.</p>
<p>This is a second paragraph of text.</p>
<p>This is a third paragraph of text.</p>
<p>This is a paragraph with BR<br>of text.</br></p>
</body>
</html

So what is the output of this coding? The coding in Example 1.2 will produce the
following results (see Figure 1.8):

Figure 1.8: Output for Example 1.2

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  13

Let us do Demo 1.4 which will help you to differentiate between <P> and <BR>
tags.

Demo 1.4:
Inserting Paragraphs in Resume
(a) Open file demo2.htm.
(b) Save file as („Save As‰) demo3.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 happened when the resume is
opened in 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.

What is the output of this coding?

Copyright © Open University Malaysia (OUM)

14  TOPIC 1 INTRODUCTION TO HTML

1.3.3 List
Did you know that in HTML, there are two types of tags that you can use to
generate lists? These two types of tags can generate an ordered list and an
unordered list.

(a) Ordered List

An 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:
(i) item A
(ii) item B
(iii) item C
Let us look at Example 1.3 which demonstrates an ordered list.

Example 1.3:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Onion</li>
<li>Ginger</li>
<li>Potato</li>
<li>Garlic</li>
</ol>
</body>
</html>

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  15

So what is the output of this coding? The output of Example 1.3 is as follows
(see Figure 1.9):

Figure 1.9: Output for Example 1.3

(b) Unordered List

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:
(i) item A
(ii) item B
(iii) item C
Let us look at Example 1.4 which demonstrates an unordered list.

Example 1.4
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Onion</li>
<li>Ginger</li>
<li>Potato</li>
<li>Garlic</li>
</ul>
</body>
</html>

Copyright © Open University Malaysia (OUM)

16  TOPIC 1 INTRODUCTION TO HTML

This will produce the following results (see Figure 1.10):

Figure 1.10: Output for Example 1.4

Are you aware that each item for the two lists must be preceded by an item list tag,
which is <LI> with no closing tag? Let us try Demo 1.5 which will add the two lists
in the resume. The aim of Demo 1.5 is to test your theoretical knowledge.

Demo 1.5:
Inserting List in Resume
(a) Open file demo3.htm.
(b) Save file as demo4.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>

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  17

(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>”:
<LI>CGPA: 3.19
<LI>Secretary Computer Club
<LI>Member Rugby Club
</UL>

(f) Save file, run the web browser and reopen the file.

So what is the output of this program?

SELF-CHECK 1.3

Explain the two types of tags that you can use to generate lists.

1.4 MODIFYING TEXT FORMAT

Now let us learn how to modify the 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, italicised (slanted) and so on. The syntax to subscript text is
as follows:

<SUB>Text that can be subscripted</SUB>

Copyright © Open University Malaysia (OUM)

18  TOPIC 1 INTRODUCTION TO HTML

Among the tags that you can use to change the physical characteristic of the text
are stated in Table 1.2.

Table 1.2: Example of Tag to Modify Text Format

Tag Function
<B> Indicates text to be in bold.
<I> Indicates text to be italicised (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 the tags stated in Table 1.2 have 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. Let us look at Example 1.5 which uses the <BIG> tag.

Example 1.5:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p><b>Indicates text to be in bold.</b></p>
<p><i>Indicates text to be slanted.</i></p>
<p><big>Indicates text of a larger font size.</big></p>
<p><small>Indicates text of a smaller font size.</small></p>
<p>Indicates text to be displayed as
_subscript.</p>
<p>Indicates text to be displayed as
^superscript.</p>
</body>
</html>

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  19

This will produce the following results (see Figure 1.11):

Figure 1.11: Output for Example 1.5

Now, it is your turn to modify the text format by doing Demo 1.6. All the best!

Demo 1.6:
Modifying Text Format
(a) Open demo4.htm file.
(b) Save file as demo5.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>Technical Assistant</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.

ACTIVITY 1.3

Can one or more tags be combined to format the same text?

Copyright © Open University Malaysia (OUM)

20  TOPIC 1 INTRODUCTION TO HTML

1.5 LINES AND GRAPHICS

Before we end this first topic, let us learn how to apply lines and graphics in HTML
documents. Lines in HTML refer to horizontal tag lines; <HR>. You will find that
the line is a horizontal line. Take note that there are no vertical lines in HTML.

Similar to tag items in lists, 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”>

x is the margin format, whether Right, Left or Center while y represents 1

to 12, referring to the size or height of the line and lastly, z is the length of the line
in pixel or percentages.

Let us look at the tag example in Example 1.6 which will draw the line in the center
of the display. The line is 1 unit in thickness, with 50% length of the display width
or

<HR ALIGN=“Center” SIZE=“1” WIDTH=“50%”

Example 1.6:

<html>
<head>
<title>HTML hr Tag</title>
</head>
<body>
<p>This text will be followed by a horizontal line <hr
align=”Center” size=”1” width=”50%”></hr></p>
</body>
</html>

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  21

So what does this coding produce? This coding produces the following result (see
Figure 1.12).

Figure 1.12: Output for Example 1.6

In addition, HTML is capable of displaying graphics. This is one of the factors that
make HTML popular. There are two types of graphic formats that you can use in
HTML which is Graphics Interchange Format (GIF) and Joint Photographic
Experts Group (JPEG). The benefit of these formats is the file size is smaller than
other file formats such as BMP and PCX.

The following is the tag syntax for graphics:

<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 follows:

<IMG SRC=“name_folder/name_file_graphic?”>

Let us look at Example 1.7 which demonstrates this matter.

Example 1.7:

<!DOCTYPE html>
<html>
<head>
<title>HTML Tag</title>
</head>
<body>
<img src="pic1.jpg" width="247" height="204" >
</body>
</html

Copyright © Open University Malaysia (OUM)

22  TOPIC 1 INTRODUCTION TO HTML

This will produce the following results (see Figure 1.13):

Figure 1.13: Output for Example 1.7

Now let us try Demo 1.7 to add more lines and graphics in the resume.

Demo 1.7:
Insert Lines and Graphics into Resume
(a) Open file demo5.htm.
(b) Save it as demo6.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. The new line will be displayed.
(e) Obtain a picture that you will insert into the resume. Name it Ahmad
Yusof.gif and save it in Topic 1 folder in drive C (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 "<HG SIZE="1" WIDTH = "100%.">".
Enter the following HTML code:
<P ALIGN="Center"><IMG SRC="AhmadYusuf.gif"></P>
(g) Open the web browser and view the picture displayed.
(h) 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:

Copyright © Open University Malaysia (OUM)

 TOPIC 1 INTRODUCTION TO HTML  23

<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>
(i) Save this file.
(j) Open the web browser and observe the changes in the resume.

What can you see from the output of this coding? That marks the end of this topic.
HTML is easy right?

• Two methods in preparing hypertext documents are by using the „What You
See Is What You Get‰ (WYSIWYG) tool and markup language.

• There are two main elements that you need to be familiar with when creating
a website which are: Document content and tags.

• Heading is normally text with bigger fonts than the rest of the text. HTML
contains six stages of headings from 1 to 6.

• 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.

• In HTML, there are two types of tags that you can use to generate lists such
as an ordered list and an unordered list. An ordered list, <OL> is a list that
follows a number sequence while an unordered list <UL> is a list that does
not follow a particular sequence.

• Lines in HTML refer to horizontal tag lines; <HR>. You will find that the line
is a horizontal line. There are no vertical lines in HTML.

• HTML is capable of displaying graphics. There are two types of graphic

formats that you can use in HTML, namely, Graphics Interchange Format
(GIF) and Joint Photographic Experts Group (JPEG).

Copyright © Open University Malaysia (OUM)

24  TOPIC 1 INTRODUCTION TO HTML

Document content Paragraphs

Graphics Tags
Heading Text format
Lines What you see is what you get
(WYSIWYG) tool
List
Markup language

Copyright © Open University Malaysia (OUM)

Topic   Hypertext
Links
2
LEARNING OUTCOMES
By the end of this topic, you should be able to:
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 of 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, you
can use links to draw a visitor's attention to important and interesting concepts.

Copyright © Open University Malaysia (OUM)

26  TOPIC 2 HYPERTEXT LINKS

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>

Links for the “Education” anchor in your “resume” are as follows:

<A HREF=“#Edu”>Education</A>

HREF refers to the location of the destination object. In the previous example, 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.

Copyright © Open University Malaysia (OUM)

 TOPIC 2 HYPERTEXT LINKS  27

Figure 2.1: Create the following links

ACTIVITY 2.1

Creating Links
(a) Create a folder, naming it Topic 2 in C drive.

(b) Open file named activity7.htm in the Topic 1 folder and save it as
activity8.htm in the Topic 2 folder.

(c) Identify the H2 heading tag for the Objectives section. The HTML
code is:
<H2>Objective</H2>

(d) 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>

(e) Identify other head tags for the following sections; Biodata,
Education, Position and Additional Information. Add anchor tags
as shown in step (e). 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= “Add_Info”>Additional Information
</A></H2>

Copyright © Open University Malaysia (OUM)

28  TOPIC 2 HYPERTEXT LINKS

(f) To create links, you need to identify the image tag first which is:
“<P ALIGN=“Center”><IMG SRC=“Ahmad Yusuf.gif”>
</P>”.

(g) Create a new line at the bottom.

(h) 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>
(i) Save the file, open the file with your web browser.

(j) 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 (h) above, what does the &#183 symbol represent?

2.2 LINKS TO SEVERAL HTML FILES

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>

Copyright © Open University Malaysia (OUM)

 TOPIC 2 HYPERTEXT LINKS  29

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 references.htm and save it
in the Topic 2 folder, in your C drive.

SELF-CHECK 2.1

Have you heard of hyperlinks or links? What are the differences between
these two terms and how are they connected with links?

ACTIVITY 2.3

Creating inter-document links

(a) Open file activity7.htm.

(b) Save it as activity8.htm in the same folder.

(c) Download the reference.htm file from WebCT site and save it in
the same folder.

(d) Scroll down until you reach section Additional Information. Insert
the following list 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.

Copyright © Open University Malaysia (OUM)

30  TOPIC 2 HYPERTEXT LINKS

<P ALIGN= “Center”>

<A HREF= “activity8.htm”>Curriculum Vitae</A>
&#183
<A HREF= “activity8.htm#Add_Info”>Additional
Information</A>
</P>

(h) Click Refresh on your web browser, and you should find both links
have already been created in the reference.htm file.

(i) Click on both the 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, that is, absolute path and 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 Topic 1 is a subfolder to the Student folder. Figure 2.2 and Table 2.1
illustrate the folder tree and matching absolute paths.

Figure 2.2: Folder tree

Copyright © Open University Malaysia (OUM)

 TOPIC 2 HYPERTEXT LINKS  31

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: Example 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

SELF-CHECK 2.2
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?

Copyright © Open University Malaysia (OUM)

32  TOPIC 2 HYPERTEXT LINKS

2.3 LINKS TO OTHER WEB OBJECTS

To make your website more interesting, you cannot rely solely 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 an Internet document's

location.

HTTP is the acronym for Hypertext Transfer Protocol. HTTP is a

communications protocol. It is also a set of programs 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- Path and document name
statement
#Member Anchor name

Syntax:
<a href="url">link text</a>

Copyright © Open University Malaysia (OUM)

 TOPIC 2 HYPERTEXT LINKS  33

Example:

<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<a href="www.oum.edu.my">Open University of Malaysia </a>
</body>
</html>

Other than websites, you can also include your email address in the website so
visitors can comment on your website. For example, in Ahmad Yusuf's resume, his
email address is very important as it allows employment agencies to contact him.
Many web browsers assume an email address is similar to a link. The syntax is:

Syntax:

<AHREF=mailto:target_email>email_label</A>

Example:

<AHREF=mailto:ahmadyusuf@freemail.com>ahmadyusuf@freemail.co
m</A>

Copyright © Open University Malaysia (OUM)

34  TOPIC 2 HYPERTEXT LINKS

If a visitor clicks on the email address, automatically the email application in the
visitor's computer will run. Figure 2.3 shows the Outlook Express application will
run automatically once the link has been clicked on. Notice that the recipient's
email address is also inserted into the textbox automatically.

Figure 2.3: Outlook express application

Copyright © Open University Malaysia (OUM)

 TOPIC 2 HYPERTEXT LINKS  35

You also can create a text link to make your PDF, DOC or ZIP files downloadable.
This is very simple; you just need to give the complete URL of the downloadable
file as shown in Activity 2.4:

ACTIVITY 2.4

Document links to other web objects

(a) Open activity8.htm file in Topic1 folder.

(b) Save it as activity9.htm in the same folder.

(c) Identify Ahmad Yusuf's email 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

Malaysia</A>

(f) Save the file.

(g) Open the web browser and click on the link that you have created.

SELF-CHECK 2.3

1. What is HTTP? What are its uses?

2. What is the syntax for the email link fn17537@oum.my?

Copyright © Open University Malaysia (OUM)

36  TOPIC 2 HYPERTEXT LINKS

• Websites can contain links to display documents or other topics. Links are
selected by clicking the computer mouse. By inserting links into websites,
visitors can access relevant documents easily.

• Anchor is used to create links in the same document. Anchor is the <A> tag
which becomes the marker or destination that will be accessed using links.
Anchor does not need to be in text form. You can use other objects such as
graphics as markers.

• Links can also be used to open other documents in the same folder or different
folders. The same tag is used, <A>.

• 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, that is, absolute
path and 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.

• 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.

• Websites can contain links to other web objects too.

• To obtain the location of other websites, you need to understand the term URL.
Uniform Resource Locator (URL) is the standard to state an Internet
document's location.

• HTTP is the acronym for Hypertext Transfer Protocol. HTTP is a

communications protocol. It is also a set of programs that determine how
information is transferred from one computer to another computer.

• Beside the links to other web objects, you can include the email address.

Copyright © Open University Malaysia (OUM)

 TOPIC 2 HYPERTEXT LINKS  37

Absolute path Relative path

Anchor Uniform Resource Locator (URL)
Hypertext Transfer Protocol (HTTP)

Copyright © Open University Malaysia (OUM)

Topic   Website
Design
3
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Use value and colour names in your website;
2. Modify font format;
3. Manipulate graphics; and
4. Modify placing and presentation of graphics.

 INTRODUCTION
The website that you have developed will not look interesting without elements
such as attractive-looking 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 impress visitors. This topic will introduce you to the
basic elements of design such as colours, graphics and fonts.

3.1 ADDING COLOURS

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.

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  39

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). Figure 3.1 shows these colours. For each basic colour, HTML provides 255
shades. This means that, numeral 0 represents the lightest shade, while numeral
255 represents the darkest shade.

Figure 3.1: Basic colours

Copyright © Open University Malaysia (OUM)

40  TOPIC 3 WEBSITE DESIGN

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 the 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

SELF-CHECK 3.1
What are the importance of colours in making a website more
appealing and interesting?

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  41

However, in HTML you will not use numerals 0 until 255. You will use
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.

Copyright © Open University Malaysia (OUM)

42  TOPIC 3 WEBSITE DESIGN

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
in the list of W3C Standard Colours names and it is recommended to use them as
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. The property is shown in Table 3.4:

Table 3.4: 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.

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  43

Syntax for the BODY tag is:

<BODY BGCOLOUR= “color” TEXT= “color” LINK= “color” VLINK=

“color">

To add colour, you can use the colour name such as Maroon or Tan, or the colour
value such as #808080 and #CCCCCC. Example:

<BODY BGCOLOR= “#FFFF00” TEXT= “Black” LINK= “Blue” VLINK=

“#FF0000">

The previous 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.1

Changing Text Colour and Document Background

(a) Identify the BODY tag and complete the HTML code as follows:
<BODY BGCOLOR = “Navy" TEXT = “#FFFFFF”
LINK= “#FFOOOO” VLINK= “Purple”>

(b) Add BACKGROUND property to The Body tag as follows:

<BODY BACKGROUND = “image.jpg”>

(c) Save the file.

SELF-CHECK 3.2
1. What is colour value?
2. What is the colour name for the hexadecimal OOFFFF?

Copyright © Open University Malaysia (OUM)

44  TOPIC 3 WEBSITE DESIGN

3.2 FONT MODIFICATION

In Activity 3.1, you have succeeded in modifying the text colour by using the 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 follows:
<FONT COLOR= “color”>Text To Be Changed</FONT>

For example, by inserting COLOR= “red” in FONT tag, you are changing the text
colour to red.

<font color="red"> Open University of Malaysia </font>

The previous tag will produce text as follows:

Open University of Malaysia

ACTIVITY 3.2

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:
(a) Arial
(b) Helvetica
(c) San Serif
(d) Courier New

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  45

The syntax is:

<FONT FACE= “font_type”>Text To Be Changed</FONT>

Example:

<font face="Courier New"> Open University of Malaysia

</font>
The output:

Open University of Malaysia

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.

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. Figure 3.4 shows the heading size in points.

Table 3.4: Heading Size in Points

Heading <Font SIZE=?>

H1 6
H2 5
H3 4
H4 3
H5 2
H6 1

Copyright © Open University Malaysia (OUM)

46  TOPIC 3 WEBSITE DESIGN

The syntax to use SIZE property is:

<FONT SIZE= “Size”>Text To Be Changed</FONT>

Example: 
<font size="6"> Open University of Malaysia </font>

The Output:

Open University of Malaysia

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.3

Changing the Text Format

(a) Add the following tag to the text.

<FONT COLOUR= “Yellow” FACE= “Arial” SIZE= “+2”>

Towards a Cyber Life</FONT>

(b) Save the file.

SELF-CHECK 3.3

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

2. Write the FONT tag to display the text "Welcome". Font type is Arial,
font color is green and font size is 4 points larger than the rest of the
text.

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  47

3.3 MANIPULATING IMAGES

An 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 formats 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 graphics is:

<IMG SRC= “graphic_file_name” ALIGN=“align”

ALT= “text_mouse_over” VSPACE= “vertical_distance”
HSPACE= “horizontal_distance” WIDTH= “width” HEIGHT=
“height">

Example:

<img src="pic1.jpg" width="232" height="166" align="middle"

alt="My Picture" hspace="100" vspace="300">

The Output:

Copyright © Open University Malaysia (OUM)

48  TOPIC 3 WEBSITE DESIGN

Explanations for each of the variables are given in Table 3.5.

Table 3.5: 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 overt 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 includes the capability of saving transparent
and animated images.

If you do not have the time to create GIF animated images, you can obtain them
free from the Web. Among the websites where you can obtain GIF animations are:

Website Name URL

Animation Factory http://www.animfactory.com/
Animation City http://www.animationcity.com/

If you have come across any other suitable websites, add them to the previous list.

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  49

ACTIVITY 3.4

Inserting GIF Images into a Website

(a) Download the logo.gif image file from myINSPIRE and save it in
Topic 3 folder.

(b) Run the editor and open any htm files that are in the Topic 3 folder.

(c) Identify 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.

SELF-CHECK 3.4

Is it possible to manipulate all image formats in website development?

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.

Copyright © Open University Malaysia (OUM)

50  TOPIC 3 WEBSITE DESIGN

As a tip, when you insert colour and graphics 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 and not 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 image 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.5

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.

Copyright © Open University Malaysia (OUM)

 TOPIC 3 WEBSITE DESIGN  51

• There are two ways to represent colour in HTML. The first is to use colour value
and the second is to use colour name.

• In HTML font modification, you can change the font colour, font type and font
size using FONT tag.

• There are two types of image formats that can be opened on most web
browsers; GIF and JPEG formats. Choosing the right format is important in
website development. Both formats have their advantages and disadvantages.

• By inserting images using the IMG tag, you can adjust the size, position and
the action of the image on text_mouse_over.

Colour name Graphics Interchange Format (GIF)

Colour value Joint Photographic Experts Group (JPEG)

Copyright © Open University Malaysia (OUM)

 Topic   Using
Tables
4
LEARNING OUTCOMES
By the end of this topic, you should be able to:
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.

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  53

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.

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 spacebars.
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.2.

Copyright © Open University Malaysia (OUM)

54  TOPIC 4 USING TABLES

ACTIVITY 4.2

Creating a text table

(a) Create a folder and name it Topic 4 in your C drive.

(b) Download file named activity15.htm from WebCT and save in

folder named Topic 4.

(c) Run the text editor application and open the activity15.htm file.

(d) Identify the BODY tag and create an empty line below it.

(e) Type <PRE> and press the Enter key to create a new line under it.

(f) Type Item# and press the spacebar twice.

(g) Type Brand and press the spacebar three times.

(h) Type Model and press the spacebar sixteen times.

(i) Type Price and press the Enter key.

(j) Press the = key until a long line is created where it ends under the
letter "e" in the word Price.

(k) Complete the information in the following table. 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

(l) Press the Enter key on the last line of the table and insert the
closing tag </PRE>.

(m) Save the file.

(n) Run the web browser and open file activity15.htm in Topic 4.

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  55

SELF-CHECK 4.1

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 a 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.

Copyright © Open University Malaysia (OUM)

56  TOPIC 4 USING TABLES

The syntax for the table 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. The
display for the previous syntax is shown in Figure 4.3.

Figure 4.3: Graphical table display

ACTIVITY 4.3
“Try it yourself‰ ă Visit w3schools.com/html/html_tables.asp. Apart
from interactive examples, there are also additional notes for this topic.

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  57

ACTIVITY 4.4

Creating a graphical table

(a) Run the text editor application and open file any htm file.

(b) Identify the BODY tag and create an empty line below it.

(c) Type <TABLE BORDER=1> to start a graphical table and press

Enter.

(d) For the column title of this table, type the following codes:
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
(e) Then, for the first line of the table type the following codes:

<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>

(f) Because 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.

(g) 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>

Copyright © Open University Malaysia (OUM)

58  TOPIC 4 USING TABLES

(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>
<TD>7894</TD>
<TD>Gateway</TD>
<TD>GPC-450</TD>
<TD>RM 3680</TD>
<TR>
</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 as table.htm

(l) Run the web browser and open the file table.htm to see the result.

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  59

ACTIVITY 4.5

1. Explain the uses of the following tags:

<TABLE>
<TR>
<TH>
<TD>
2. How do you determine the number of rows and columns in a
graphical table?

4.3 TABLE APPEARANCE

In a graphical table, you can insert properties that can change the appearance of
the table such as color, 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
Exercise 4.3. The syntax for BORDER property is:

<TABLE BORDER= “size”>

Example:

<table border="1">

whereby size is in pixel units and it determines the thickness of a table. For a
borderless table, set the size to 0 (border="0").

Copyright © Open University Malaysia (OUM)

60  TOPIC 4 USING TABLES

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

SELF-CHECK 4.2

Appearance is related to the image we are showing. Think of the

importance of table appearance.

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”>

whereby size is in pixel units.

An example of a table display with several CELLSPACING values is shown in

Figure 4.5.

Figure 4.5: Table with different CELLSPACING property value

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  61

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”>

whereby size is in pixel units.

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 is either on 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.

Copyright © Open University Malaysia (OUM)

62  TOPIC 4 USING TABLES

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 dependent on the background
color or graphics of the document. To add colour in the table, you must use the
BGCOLOR property. You can insert this property either in the TABLE, TR, TH or
TD tags. The syntax is as follows:
<TABLE BGCOLOUR = “color”>
<TR BGCOLOUR = “color”>
<TH BGCOLOUR = “color”>
<TD BGCOLOUR = “color”>
where colour is the same as colour value or colour name. You are encouraged to
attempt Activity 4.6.

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  63

ACTIVITY 4.6

Manipulating graphical tables

(a) Reopen the table.htm file from the Topic4 folder.

(b) Identify the tag TABLE and insert the property BORDER = “5‰ as
below:

<TABLE BORDER= “5”>

(c) Save the file and open file using the web browser to view the border
table.

(d) Next, add CELLSPACING and CELLPADDING properties in the

same tag as follows:

<TABLE BORDER= “5” CELLSPACING= “0” CELLPADDING= “5">

(e) Save the file and refresh the web browser to view the changes to the
table.

(f) To position the table at the center of the document, add ALIGN=
“Center" as follows;

<TABLE BORDER= “5” CELLSPACING= “0” CELLPADDING=

“5” ALIGN= “Center”>

(g) Next, save the file and refresh your web browser. The table
positioning should have changed from the left to the center.

(h) In the same tag, add the property BGCOLOR= “Silver‰ as follows:

<TABLE BORDER= “5” CELLSPACING= “0” CELLPADDING=

“5” ALIGN= “Center” BGCOLOR= “Silver”>

(i) Save the file and refresh your web browser. You will find that the
background of your table is silver.

Copyright © Open University Malaysia (OUM)

64  TOPIC 4 USING TABLES

(j) 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 follows:

<TR BGCOLOUR= “Gray”>

<TH>Item#</TH>

<TH>Brand</TH>

<TH>Model</TH>
<TH WIDTH= “90”>Price</TH>
</TR>
(l) After you have completed the previous codes, save the file and
refresh the web browser to view the changes that you have done to
the table header.
(m) 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 as
follows.
<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 ALIGN= “Center” BGCOLOUR= “Tan”>6840</TD>
<TD>Compaq</TD>
<TD>Inspire-X2</TD>
<TD ALIGN= “Right” WIDTH= “90”>RM 3990</TD>
<TD ALIGN= “Right” WIDTH= “90”>RM 3680</TD>
</TR>

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  65

<TR>
<TD ALIGN= “Center” BGCOLOUR= “TAN”>7894</TD>
<TD>Gateway</TD>
<TD>GPC-450</TD>
<TD ALIGN= “Right” WIDTH= “90”>RM 3680</TD>
</TR>
<TR>
<TD ALIGN= “Center” BGCOLOUR= “Tan”> 1858</TD>
<TD>NEC</TD>
<TD>Millennium Edition</TD>
TD ALIGN= “Right” WIDTH= “90”>RM 3510</TD>
</TR>
(n) 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 Self-
Check 4.3.

SELF-CHECK 4.3

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?

Copyright © Open University Malaysia (OUM)

66  TOPIC 4 USING TABLES

4.4 SPANNING COLUMNS AND ROWS

The table that you have created in Subtopic 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 cells are cells that comprise more than one column or row.

An example of a table with spanning cells is shown in Figure 4.7 as follows:

Figure 4.7: Spanning cells in a table

The syntax for a spanning row is:

<TD ROWSPAN = “total_rows”>Text_In_Cell</TD>

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  67

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

<HTML>
<BODY>
<TABLE BORDER= “1”>
<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>

</BODY>
</HTML>

In the previous code, 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.

Copyright © Open University Malaysia (OUM)

68  TOPIC 4 USING TABLES

The following code 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 previous code, you need three columns at the row below.

Figure 4.9: Table that contains COLSPAN

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  69

ACTIVITY 4.7

Inserting ROWSPAN into a Table

(a) Reopen the file table.htm in folder Topic4.

(b) Identify the tag table header and create a title column as follows:

<TR BGCOLOR= “Gray”>

<TH>Platform</TH>
<TH>Item#</TH>
<TH>Brand</TH>
<TH>Model</TH>
<TH WIDTH= “90”>Price</TH>
</TR>

(c) Next, insert the cell that you want merge to the first row of the
table as follows:

<TR>
<TD ROWSPAN= “3”>Windows</TD>
<TD ALIGN= “Center” BGCOLOR= “Tan”>4682</TD>
<TD>Dell</TD>
<TD>PowerPC800</TD>
<TD ALIGN= “Right” WIDTH= “90”RM 3550</TD>
</TR>

(d) Next, insert the unrelated cells that are not merged into the last
row of the table (merging of cells only involves 3 rows, while the
table has 4 rows). Complete the code as follows:

<TR>
<TD>MacIntosh</TD>
<TD ALIGN= “Center” BGCOLOR= “Tan”>1858</TD>
<TD>NEC</TD>
<TD>Millennium Edition</TD>
<TD ALIGN= “Right” WIDTH= “90”>RM 3510</TD>
</TR>

(e) Save the file and open the file using the web browser to display
the results of the previous cell merge.

Copyright © Open University Malaysia (OUM)

70  TOPIC 4 USING TABLES

ACTIVITY 4.8
http://www.tutorialspoint.com/html/html_tables.htm.

Rewrite the examples as given on the computer. Did you achieve the
same results as in the website?

Test your understanding by answering the following questions in Self-Check 4.4.

SELF-CHECK 4.4

1. What is spanning cell?

2. What are the differences between COLSPAN and ROWSPAN?

• Two methods to insert table into website: Text table and graphical table.

• Text table (PRE tag) contains text that is arranged in column of the same size.
For this table, you need to use a typewriter or fixed-width font, for example,
Courier New.

• Graphical table (TABLE tag) allows the user 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.

• 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. It uses <TABLE> tag properties, that is, BORDER, CELLSPACING,
CELLPADDING, ALIGN, WIDTH, HEIGHT and BGCOLOR.

• To enter 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 a
spanning cell. Spanning cells are cells that comprise more than one column or
row.

Copyright © Open University Malaysia (OUM)

 TOPIC 4 USING TABLES  71

Cell padding Spanning cell

Cell spacing Text table
Graphical table

Copyright © Open University Malaysia (OUM)

Topic  Forms in
Web Pages
5
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Explain the concept of CGI script in web development;
2. Name the elements involved in creating FORM tag;
3. Discuss six form elements according to the need; and
4. Differentiate the 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 the filling in of questionnaires. For this purpose, you need forms which are
objects in HTML to get the values visitors key in and to process it.

In this topic, you will explore forms, its elements and the method of retrieving
values sent by visitors.

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  73

5.1 COMMON GATEWAY INTERFACE (CGI)

SCRIPT
Before creating forms, you need to know how a form is read and processed on the
web. 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.

SELF-CHECK 5.1

Why is CGI script important in the development of interactive

websites?

Copyright © Open University Malaysia (OUM)

74  TOPIC 5 FORMS IN WEB PAGES

Figure 5.1: Elements in a form

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.

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  75

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.

The completed form is

sent to web server

Figure 5.2: CGI script applications

Copyright © Open University Malaysia (OUM)

76  TOPIC 5 FORMS IN WEB PAGES

CGI script is run on the web server, therefore, you cannot create 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.1
Notes, documentation and tutorials for CGI Script can be obtained at this
website https://www.tutorialspoint.com/perl/perl_cgi.htm

SELF-CHECK 5.2
1. What is 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 or 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 Either to send or cancel delivery and return to the original
button condition of the form

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  77

Before using these elements, 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 but, 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 the NAME property in the
<FORM> tag as follows:

<FORM NAME= “form_name”>

SELF-CHECK 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.

Copyright © Open University Malaysia (OUM)

78  TOPIC 5 FORMS IN WEB PAGES

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
enter more than 20 words, the text typed in will automatically scroll to the left.
What this means is, you can enter in 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: The syntax for above input box: <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.

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  79

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: Password box

Figure 5.4 shows an example of a 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>

Copyright © Open University Malaysia (OUM)

80  TOPIC 5 FORMS IN WEB PAGES

Example:

<select name="printer" id="mnuPrinter" size="3">

<option value="1">ScanMaster</option>
<option value="2">ScanMasterII</option>
<option value="3">LaserPrint 1000</option>
<option value="4">LaserPrint 5000</option>
<option value="5">Print/Scan 150</option>
<option value="6">Print/Scan 250</option>
</select>

The output of the previous script will be displayed as in Figure 5.5. Like other form
of elements, the NAME property is needed for selection list. By default, the 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

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  81

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
following example 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
shown as follows:

<OPTION VALUE= “P” SELECTED>Pahang</OPTION>

ACTIVITY 5.1

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 is more information and current issues
on this website that are related to the content in
this topic.

Copyright © Open University Malaysia (OUM)

82  TOPIC 5 FORMS IN WEB PAGES

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 shown as follows:

<INPUT TYPE= “RADIO” NAME= “element_name”

VALUE= “item1_value”>Item1 text
<INPUT TYPE= “RADIO” NAME= “element_name”
VALUE= “item2_value”>Item2 text

The output of the previous script will be displayed as in Figure 5.6. 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 the
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 shown
as follows:

<INPUT TYPE= “RADIO” CHECKED>

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  83

Example:

<input type=“radio” name=“radio” value=“malay” checked>

Malay
<input type=“radio” name=“radio” value=“Chinese”> Chinese
<input type=“radio” name=“radio” value=“indian”> Indian
<input type=“radio” name=“radio” value=“others”> Others

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: Radio button

5.3.4 Check Box

The 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”

VALUE= “item1_value”>Item1 text
<INPUT TYPE= “CHECKBOX” NAME= “element_name”
VALUE= “item2_value”>Item2 text

The output of the previous script will be displayed as in Figure 5.7. The NAME
property is needed for the 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.

Copyright © Open University Malaysia (OUM)

84  TOPIC 5 FORMS IN WEB PAGES

You can see examples of 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 shown as follows:

<INPUT TYPE= “CHECKBOX” CHECKED>

Example:

<input type=“checkbox” name=“win7” value=“win7”>Windows 7

<input type=“checkbox” name=“win8” value=“win8”>Windows 8
<input type=“checkbox” name=“linux” value=“linux”>Linux
<input type=“checkbox” name=“mac” value=“mac”>Macintosh

Figure 5.7: 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. 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 3 WRAP property values that you may use.

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  85

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>

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 the CGI
script according to the number of lines as shown in the text area
box.

Figure 5.8: Example of TEXTAREA display

SELF-CHECK 5.4

Can you determine when to use an input box and when to use a text
area?

5.3.6 Hidden Field

Not all information that is sent to the 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.

Copyright © Open University Malaysia (OUM)

86  TOPIC 5 FORMS IN WEB PAGES

The syntax is:

<INPUT TYPE= “HIDDEN” NAME= “element_name” VALUE=

“hidden_value">

Example:

<input type="hidden" name="ic" value="123321"/>

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.

SELF-CHECK 5.5

1. What is the difference between the 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 the 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
are 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: Running an application, submitting a form
and resetting information in a form.

The syntax to run a program is:

<INPUT TYPE= “BUTTON” VALUE=“Text on the button”>

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  87

The syntax for submitting a form is:

<INPUT TYPE= “SUBMIT” VALUE=“Text on the button”>

The syntax to reset information in a form is:

<INPUT TYPE= “RESET” VALUE= “Text on the button”>

The VALLUE 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. The following example shows the button
tag implementation that produce the output as in Figure 5.9:

<input type=“button” name=“Upload” id=“upload” value=“Upload”>

<input type=“submit” name=“submit” id=“submit” value=“Submit”>
<input type=“reset” name=“reset” id=“reset” value=“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”>

Copyright © Open University Malaysia (OUM)

88  TOPIC 5 FORMS IN WEB PAGES

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. 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.

Test your understanding by doing Self-Check 5.6.

SELF-CHECK 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.3
Creating form in a table
(a) Create a new folder, Topic5.

(b) Run the text editor application and open a new file.

(c) Create a form based on Figure 5.1.

(d) Once done save the file as form.htm.

Copyright © Open University Malaysia (OUM)

 TOPIC 5 FORMS IN WEB PAGES  89

• 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.

• CGI Script can be developed using a number of programming languages as

follows:
− C/C++;
− AppleScript;
− Perl;
− TCL; and
− Visual Basic.

• Elements that can be used in the HTML forms are:

− Input box;
− Selection list;
− Radio button;
− Check box;
− Text area; and
− Submit and Reset button.

• Form button is the element that does not store any information, but executes
operations when clicked. The button can execute three operations: Running an
application, submitting a form and resetting information in a form.

• For form submission, you need to insert ACTION and METHOD properties.
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.

Action property Forms

Common Gateway Interface (CGI) Method property

Copyright © Open University Malaysia (OUM)

Topic  Introduction
to Scripts
6
LEARNING OUTCOMES
By the end of this topic, you should be able to:
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 programming to the server;
4. Insert scripts into 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 of.
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 as well as the use
of events, before delving into insertion of scripts into web pages.

Copyright © Open University Malaysia (OUM)

 TOPIC 6 INTRODUCTION TO SCRIPTS  91

6.1 CLIENT AND SERVER

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.
HTML
file
request

HTML is
sent
Server Client
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.

Parameter
The value
Value to
is
CGI
processed
by CGI
Text
(Result)
Server Client
Figure 6.2: CGI and web browser interaction

SELF-CHECK 6.1

What is your definition of client and server in the field of information

technology?

Copyright © Open University Malaysia (OUM)

92  TOPIC 6 INTRODUCTION TO SCRIPTS

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 spoil 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 solves 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. 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 code.

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 is not discussed in this unit due to
its wide scope. ActiveX on the other hand has already been discussed previously.
You will be introduced to JavaScript and VBScript in Topic 7 and 8.

Copyright © Open University Malaysia (OUM)

 TOPIC 6 INTRODUCTION TO SCRIPTS  93

ACTIVITY 6.1

Obtain the definition of Java Applet and available examples from

http://www.tutorialspoint.com/java/java_applet_basics.htm to be used
in your web page.

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. The user will have to enter a name. Then you will have to
ensure that no numerical digits are inserted because logically a human name does
not contain digits.

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. In contrast, 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

SELF-CHECK 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 are
NSAPI/ ISAPI, Active Server Pages, Live Wire and Cold Fusion.

Copyright © Open University Malaysia (OUM)

94  TOPIC 6 INTRODUCTION TO SCRIPTS

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 a 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 wholly
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.

SELF-CHECK 6.3

1. List two types of client-side scripts that are popular.

2. What are the three applications that can be built using client-side
scripting?
3. Discuss two factors that encourage 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>

Copyright © Open University Malaysia (OUM)

 TOPIC 6 INTRODUCTION TO SCRIPTS  95

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. The script
format is as follows:

Format:

<script src=“filename” type=“script_type”>

Example:

<script src=“script.js” type=“text/javascript”>

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= „text/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 damage
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 the <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.2, so you can differentiate script that is inserted
within the <HEAD> tag and script placed in the <BODY>.

ACTIVITY 6.2
In the second paragraph of Subtopic 6.4, it is mentioned that scripts can
be written in a separate file. From your knowledge, how did the script
file concept come about?

Copyright © Open University Malaysia (OUM)

96  TOPIC 6 INTRODUCTION TO SCRIPTS

ACTIVITY 6.3
Inserting script into the web page

(a) Create a folder and name it Topic 6.

(b) Open a text editor (like Notepad) that is in your system.

(c) Type the following code:

<!DOCTYPE HTML>
<html>
<head>
<script>
function Hello(){
alert("Hello World!!!");
}
</script>
</head>
<body onload="Hello()">
Push the Refresh button a few times.
</body>
(d) Store the file above as activity1a.htm. Open this file using a web
browser.

Next, open a new editor and type the following code:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

Copyright © Open University Malaysia (OUM)

 TOPIC 6 INTRODUCTION TO SCRIPTS  97

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Title</h1>
Website Contents
<br><br><br><br><br><br><br>
<hr>
<script>
document.write("Updated on:"
+document.lastModified);
</script>
</body>
</html>
(e) 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 in Self-
Check 6.3.

SELF-CHECK 6.4

Write the <SCRIPT> tag syntax using VBScript.

6.5 EVENT SCRIPTS

What are events? Events are the results after an action is performed by the user.
Examples of events are the click of a mouse button, pressing a button on the
keyboard and 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 and onload. You will be trying the
onclick event later in Activity 6.4. HTML allows numerous types of events which
are partially listed in Table 6.1.

Copyright © Open University Malaysia (OUM)

98  TOPIC 6 INTRODUCTION TO SCRIPTS

Table 6.1: Events list

Events Explanation Allowed Elements

onblur Runs 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 <INPUT>, <SELECT>,
value is changed compared to the previous <TEXTAREA>
value.
onclick Runs when an element is clicked. Most HTML elements
onfocus When an element gets the focus upon the <A>, <AREA>,
click 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.4
Inserting script into the web page

(a) Open a text editor (like Notepad) in your system.

(b) Type the following code:

<!DOCTYPE HTML>
<html>
<head>
<title>Event Function</title>
</head>
<body>
<input name="Button" type="button" value="Click
Here" onclick='alert("Hello World!!")'>
</body>
</html>

(c) Store the file above as activity2.htm and display it using a web
browser.

Copyright © Open University Malaysia (OUM)

 TOPIC 6 INTRODUCTION TO SCRIPTS  99

How did you fare in Activity 6.4? It is hoped you got the expected result. Before
ending this topic, try doing Self-Check 6.5 as a revision.

SELF-CHECK 6.5
1. State what is meant by events.

2. When does the need arise to use the onsubmit event and what
types of elements can be used for this event?

• 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 users are accessing.

• Client-side programming solves 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. Examples of client-side scripts
are JavaScript and VBScript. The use of scripts is limited to simple applications.

• There are other available client-side programming technologies like Java

Applet and ActiveX that are capable of performing more complex operations
like displaying graphics.

• Using programs at the server-side increases the interactivity of the website. The
examples of programs at the server-side are CGI programs, NSAPI/ ISAPI, Active
Server Pages, Live Wire and Cold Fusion.

• 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.

• 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.
To perform the event, the programmer needs to insert the event script.

Copyright © Open University Malaysia (OUM)

100  TOPIC 6 INTRODUCTION TO SCRIPTS

Client-server relationship Events

Client-side programming Server-side programs
Client-side script Web server
Event script

Copyright © Open University Malaysia (OUM)

Topic  JavaScript
7
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Insert JavaScript into HTML documents;
2. Declare JavaScript variables and data;
3. Identify the three types of functions that can be used in JavaScript; and
4. Use selected control structures and loops in JavaScript.

 INTRODUCTION
JavaScript is an example of a script language. A 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 Google Chrome, FireFox and Internet Explorer.

In this topic, you will explore in further 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.

Copyright © Open University Malaysia (OUM)

102  TOPIC 7 JAVASCRIPT

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 JavaScript
Complicated Easy to understand and use
Requires Java Development Kit (JDK) for Does not need to be compiled
compiling
Program is developed in a separate file Script is placed in the same HTML
document
Able to create complex applications For simple operations

ACTIVITY 7.1

Get JavaScript codes for free! Examples of programming codes can be

obtained from https://www.javascript.com/resources.

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:

<SCRIPT>
............
.............
</SCRIPT>

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  103

Examine the following script:

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>

<body>
<script language=”javaScript”>
//print Hello World!
document.write("Hello World!!");
</script>
</body>
</html>

The previous script will give the following output:

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, <!-- and -->
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.

Copyright © Open University Malaysia (OUM)

104  TOPIC 7 JAVASCRIPT

7.3 VARIABLES
Variables are temporary spaces to store data where it will be used to run the
JavaScript program. 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 heed 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

Example:

<script language="javascript">
var intYear = 1502
intMonth=9
</script>

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 program 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.2

Obtain specific rules for naming variables besides the ones stated
previously.

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  105

7.4 OPERATIONS
JavaScript operations are used to assign value, compare value and perform
arithmetic operation. In this subtopic you will learn to create codes using these
operations. Let us start with the arithmetic.

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

Copyright © Open University Malaysia (OUM)

106  TOPIC 7 JAVASCRIPT

Example:

<!DOCTYPE HTML>
<html>
<head>
<title>Variable</title>
</head>
<body>
<script language="javaScript">
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("a="+a+", b="+b);
document.write(linebreak);
document.write("a + b = "); document.write(a+b);
document.write(linebreak);
document.write("a - b = "); document.write(a-b);
document.write(linebreak);
document.write("a / b = "); document.write(a/b);
document.write(linebreak);
document.write("a % b = "); document.write(a%b);
document.write(linebreak);
a++;
document.write("a++ = "); document.write(a);
document.write(linebreak);
b--;
document.write("b-- = "); document.write(b);
document.write(linebreak);
</script>
<p>Set the variables to different values and then try...</p>
</body>
</html>

The output of the script will be displayed as follows:

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  107

7.4.2 Accumulation
Certain operators may be used if you wish to accumulate the value of a variable.
Table 7.3 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

Copyright © Open University Malaysia (OUM)

108  TOPIC 7 JAVASCRIPT

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
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
Functions contain 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)

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  109

Value 341 will be assigned in argument 1 and “Java„ string will be assigned
in argument 2. Meanwhile, function that does not include arguments must
remain as such,

Function Function_name()
{
instructions
}

The function call for the previous 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 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 following example, total is a variable that will
receive the total of 4 and 1 which is 5.

total=total(4,1)

To test your understanding, attempt Activity 7.3.

Copyright © Open University Malaysia (OUM)

110  TOPIC 7 JAVASCRIPT

ACTIVITY 7.3
Functions

(a) Open your text editor application.

(b) Type the following codes:

<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.

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  111

7.6 SELECTIVE CONTROL STRUCTURES

When writing a program 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

Continue reading for further explanation.

(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 (see Figure 7.1) has the following syntax:
if (condition)
{
code to be run if condition is true
}
else
{
code to be run if condition is false
}

Figure 7.1: Structure of if...else instruction

Copyright © Open University Malaysia (OUM)

112  TOPIC 7 JAVASCRIPT

(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
}

The following flow chart (see Figure 7.2) explains a switch-case statement works.

Figure 7.2: Switch-case statement

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  113

ACTIVITY 7.4

Activity 7.4: if () and switch ()

(a) Open your text editor application.

(b) Type the following code:

<HTML>
<BODY>
<SCRIPT LANGUAGE= "Javascript">
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.

Copyright © Open University Malaysia (OUM)

114  TOPIC 7 JAVASCRIPT

(d) Next, open a new editor and type the following code.

<HTML>
<BODY>
<SCRIPT LANGUAGE= “Javascript”>
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 activity4a.htm and display it on your web
browser.

* If the output does not appear on your browser, re-type „ ‰ symbol

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  115

7.7 LOOPING CONTROL STRUCTURES

When writing a program 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
shown as follows:
(a) while
The program will run a specific set of instructions as long as the condition is
true (see Figure 7.3). The syntax for while is:

while (condition)
{
code to be run when the condition
is true
}

Figure 7.3: while structure statement

(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)

Copyright © Open University Malaysia (OUM)

116  TOPIC 7 JAVASCRIPT

Figure 7.4: do...while structure statement

(c) for
An instruction that will repeat a set of instructions a few times (see Figure
7.5). The syntax for the instruction for is as follows:

for (initialization; condition; increment)

{
Code that will be run
}

Figure 7.5: for structure statement

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  117

An example for this instruction is:

<html>
<body>
<script language="javascript">
var count;
for(count = 0; count < 4; count++){
document.write("Number " + count );
document.write("<br />");
}
</script>
</body>
</html>

The output for the previous script is:

Following are the comparisons of using looping by three types that produce the
same output as mentioned previously.

while Do-while for

var count = 0; var count = 0; var var count;
while(count< 4){ do{ for(count=0;count<4;count++){
document.write("Number”+ document.write("Number"+ document.write("Number"+
count); count); count);
document.write("<br/>"); document.write("<br />"); document.write("<br />");
count++; count++; }
} }while(count< 4);

Copyright © Open University Malaysia (OUM)

118  TOPIC 7 JAVASCRIPT

• JavaSript is a script language. A script language can be considered as a non-

complex programming language. 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. The results of a script can be viewed using a web browser like
Google Chrome, FireFox and Internet Explorer.

• JavaScript can make HTML documents more interactive and provide

operations that HTML cannot.

• JavaScript uses <SCRIPT> tag for declaration.

• Variables are temporary spaces to store data where it will be used to run the
JavaScript program. The value of the variable can change when the script is
run.

• Variable are case sensitive and must begin with an alphabet or underscore.

• JavaScript operations are used to assign value, compare value and perform
arithmetic operation.

• JavaScript operations are arithmetic, accumulation, relationships and logical.

• Functions contain 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. Functions
consist of:
− Functions with arguments; and
− Functions that return a value.

• Selective control structures are used to execute different instructions for

different results. In JavaScript there are three selective control structures:
− if instruction;
− if...else instruction; and
− switch instruction.

• Looping control structures are repetition instructions. They are used to get a
specific set of instruction to be run a few times. JavaScript has provisions for a
few types of repetition instructions:
− while;
− do...while; and
− for.

Copyright © Open University Malaysia (OUM)

 TOPIC 7 JAVASCRIPT  119

<SCRIPT> Logical operator

Accumulation Looping
Arithmetic operation Looping control structures
Functions that return a value Selective control structures
Functions with argument Variable

Copyright © Open University Malaysia (OUM)

Topic  VBScript
8
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Produce output from HTML documents using VBScript;
2. Apply two types of functions in VBScript; and
3. Use selective 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.

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  121

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

augment 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 its syntax is easier than JavaScript. In Activity 8.1,
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 programs capable of processing user input
before data is sent to the server. Yet, the weakness in VBScript is that older versions
of web browsers or browsers other than Microsoft Internet Explorer may not be
able to run VBScript properly.

SELF-CHECK 8.1

Can you state the strengths and weaknesses of VBScript in

comparison to JavaScript?

Copyright © Open University Malaysia (OUM)

122  TOPIC 8 VBSCRIPT

ACTIVITY 8.1
Data Input

(a) Run the text editor and open a new file.

(b) Create a new folder called Topic 8. Save this file (Save as)
activity1.htm.

(c) Type the following code:

<html>
<head>
<title>VBSCRIPT</title>
</head>
<body>
<script type="text/vbscript">
<!--
UserName = InputBox("Enter Your Name?")
MsgBox UserName
Document.Write ("<H1>")
Document.Write ("My name is:" &UserName)
Document.Write ("</H1>")
//-->
</script>
</body>
</html>

(d) Save this file.

(e) Return to the web browser and open the file activity1.htm in folder
Topic 8.

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  123

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 usage is as follows:

<!DOCTYPE HTML>
<html>
<head>
<title>VBScript</title>
</head>
<body>
<script language="VBScript" type="text/Vbscript">
<!--
'print the text “This is VBScript”
document.write("This is VBScript")
//-->
</script>
</body>
</html>

*Run on Internet Explorer for better results

The previous script gives output as:

Copyright © Open University Malaysia (OUM)

124  TOPIC 8 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 listed as follows:

(a) Must begin with an alphabet;

(b) Cannot contain a full stop punctuation;

(c) Cannot exceed 255 characters; and

(d) Variable names should be unique in the declared context.

SELF-CHECK 8.2

Compare the rules for naming VBScript to naming JavaScript. Are

they the same?

Values are assigned similar to an algebraic expression. The variable name on the
left hand side is followed by an equal to (=) symbol and then its value on the right
hand side.

Rules for assigning value:

(a) The numeric values should be declared without double quotes;

(b) The string values should be enclosed within double quotes ("); and

(c) Date and time variables should be enclosed within hash symbol (#).

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  125

Examples:

' The value 25 is assigned to the variable Value1.

Value1 = 25

' A String Value ÂWelcomeÊ is assigned to the variable StrValue.

StrValue = „Welcome‰

' The date 01/01/2020 is assigned to the variable nextDay.

nextDay = #01/01/2020#

' A Specific Time Stamp is assigned to a variable in the following example.

Time1 = #12:30:44 PM#

You can declare a variable using the keywords Dim, Public or Private as shown in
Table 8.1.

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's 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 mentioned previously, 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

Copyright © Open University Malaysia (OUM)

126  TOPIC 8 VBSCRIPT

In the declaration of this variable, you will need to classify whether this variable is
local or universal.

8.4 OPERATIONS
Just like JavaScript, VBScript has the same operations; arithmetic, relationships
and logical. Let us get started.

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 following example 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

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  127

Try the following example to understand all the arithmetic operators available in
VBScript:

<!DOCTYPE html>
<html>
<body>
<script language="vbscript" type="text/vbscript">
Dim a : a = 5
Dim b : b = 10
Dim c
c = a+b
Document.write ("Addition : " &c)
Document.write ("<br></br>") 'Inserting a Line Break
for readability
c = a-b
Document.write ("Subtraction : " &c)
Document.write ("<br></br>")
c = a*b
Document.write ("Multiplication:" &c)
Document.write ("<br></br>")
c = b/a
Document.write ("Division :" &c)
Document.write ("<br></br>")
c = b MOD a
Document.write ("Modulus :" &c)
Document.write ("<br></br>")
c = b^a
Document.write ("Exponentiation : " &c)
Document.write ("<br></br>")
</script>
</body>
</html>

*Run on Internet Explorer for better results

Copyright © Open University Malaysia (OUM)

128  TOPIC 8 VBSCRIPT

The previous script will produce the following result:

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

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  129

8.4.3 Logical
In VBScript, you may use logical operators in the event that you wish to compare
one or more operations. The logical operators are shown in Table 8.4.

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)
x=2, y=5
Not Not True
x Not y

The following example is to understand all the logical operators available in

VBScript:

Dim c
If a<>0 AND b<>0 Then
Document.write ("AND Operator Result is : True")
Document.write ("<br></br>") 'Inserting a Line Break for
readability
Else
Document.write ("AND Operator Result is : False")
Document.write ("<br></br>")
End If
If a<>0 OR b<>0 Then
Document.write ("OR Operator Result is : True")
Document.write ("<br></br>")
Else
Document.write ("OR Operator Result is : False")
Document.write ("<br></br>")
End If
If NOT(a<>0 OR b<>0) Then
Document.write ("NOT Operator Result is : True")
Document.write ("<br></br>")
Else
Document.write ("NOT Operator Result is : False")
Document.write ("<br></br>")

Copyright © Open University Malaysia (OUM)

130  TOPIC 8 VBSCRIPT

End If
If (a<>0 XOR b<>0) Then
Document.write ("XOR Operator Result is : True")
Document.write ("<br></br>")
Else
Document.write ("XOR Operator Result is : False")
Document.write ("<br></br>")
End If

When you execute it in web browser, then the previous script will produce the following
results:

8.5 FUNCTIONS
VBScript has two types of functions that is Sub and Function. Let us see how
these work.

8.5.1 Sub Functions

The following are Sub function details:

(a) Characteristics of Sub Function

(i) A set of instructions that begin with Sub and ends with End Sub;

(ii) Executes instructions without returning any value;

(iii) Can receive instructions that are sent to it via arguments; and

(iv) If there are no arguments, it still requires ().

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  131

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,

instructions argument2,etc)
End Sub instructions
End Sub

Example:

(i) Sub sayHello() (ii) Sub sayHello(name, age)

msgbox("Hello Document.write( name & "
there") is " & age & " years old.")
End Sub End Sub

(b) Call for Sub

To call Sub that has arguments, you can execute the following code:

Call sub_name (value1, value2, etc)

Example:
Call sayHello("Ahmad", 25)

The value "Ahmad‰ will be accumulated into argument 1 and the integer 25
will be accumulated to argument2.

Call Sub that does not have any arguments will still require () as shown:

Call sub_name()

Example:

Call sayHello()

Copyright © Open University Malaysia (OUM)

132  TOPIC 8 VBSCRIPT

8.5.2 Function of Function

Following are the explanation of Function functions:

(a) Function Characteristics

Characteristics of Function on the other hand are:

(i) A set of instructions that begin with Function and end with End
Function;

(ii) Executes instructions and can return a value;

(iii) Can receive instructions that are sent to it via arguments;

(iv) If there are no arguments, it still requires (); and

(v) 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 as follows:

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.

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  133

ACTIVITY 8.2

Functions

(a) Open the text editor application.

(b) Type the following code:

<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<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" onclick="call
BM_OnClick" value= "Bahasa Melayu">
<input type= "BUTTON" name = "ENG" onclick= "Call
Speech" value= "ENGLISH">
</form>
</body>
</html>

(c) Save the file above as activity5.htm and display using a web
browser.

*Run on Internet Explorer for better results

Copyright © Open University Malaysia (OUM)

134  TOPIC 8 VBSCRIPT

8.6 SELECTIVE 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 previous 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 following code:

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 follows:

if i=1 then
msgbox “Right”
else
msgbox “left”
end if

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  135

(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 shown as follows:

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 previous code, 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.

Copyright © Open University Malaysia (OUM)

136  TOPIC 8 VBSCRIPT

ACTIVITY 8.2
if...then and select case

(a) Open your text editor application.

(b) Type the following code:

<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 previous file as activity6a.htm and view the output on
your web browser.

(d) Open a new text editor and type the following code.

<HTML>
<BODY>

<SCRIPT LANGUAGE= “VBScript”>

Dim today
today = day(now())

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  137

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 and view the display 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.

Copyright © Open University Malaysia (OUM)

138  TOPIC 8 VBSCRIPT

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 following example, the counter is the variable i.

For i=1 to 12
code that will be run
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
codes show an example of the use of step.

For i=12 To 1 step -2

code that will be run
Next

If you do not know the number of loops that need to be performed, you should use
Do...Loop. The following code will be run when i is greater than 12.

Do While i>12
code that will be run
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
code that will be run
Loop While i>12

For Each...Next, the 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 following code is an example:

dim names(2)
names(0)= "Ahmad"
names(1)= "Yosuf"
names(2)= "Ismail"
for x=0 to 2
document.write(x &" "& names(x) & "<br>")
Next

Copyright © Open University Malaysia (OUM)

 TOPIC 8 VBSCRIPT  139

The output for the previous code is:

You can use the keyword Exit if you wish to stop the loop. The following code
is an example of the use of Exit in a For...Next and Do...Loop control
structure.

For i=12 To 1
code that will be run
if i=5 then Exit
Next

Do While i>12
code that will be run
if i = 3 then Exit
Loop

• 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 the BASIC
programming language.

• VBScript uses the same tag as JavaScript to insert script in the HTML
document, <SCRIPT>.

• All types of variables in VBScript are in the variant type. This type of variable
can contain any data like integer, double and string.

• VBScript also provides for a couple of arithmetic operators to be used in

mathematical calculations.

Copyright © Open University Malaysia (OUM)

140  TOPIC 8 VBSCRIPT

• VBScript is equipped with operators for operations involving relationships

that are meaningful.

• VBScript has two types of functions that is Sub and Function.

• There are four types of selective control structures in VBScript:

− if...then instruction;
− if...then...else instruction;
− if…then…elseif instruction; and
− select…case instruction.

• VBScript provides a number of different types of looping instructions that

can be used to run a set of instructions repetitively.
− For...Next;
− For Each...Next; and
− Do...Loop.

<SCRIPT> Relationship
Arithmetic Selective control structures
Function function Sub function
Logical Variant type
Looping control structures

Copyright © Open University Malaysia (OUM)

Topic  Active Server
Pages
9
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. List 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. Apply form usage in ASP.

 INTRODUCTION
Script programming at the server like CGI applications is a matter that is difficult
to perform. This is because you need to be skilled in programming like 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.

Copyright © Open University Malaysia (OUM)

142  TOPIC 9 ACTIVE SERVER PAGES

9.1 INTRODUCTION TO 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 can also be referred to as a type of web server.

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; and
(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
like 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.

To run ASP, you need PWS. Therefore, you need to complete Activity 9.1 which
will show you the steps to install PWS in your computer.

SELF-CHECK 9.1

Why is there a need for ASP when HTML is already in existence?

What is its advantage?

Copyright © Open University Malaysia (OUM)

 TOPIC 9 ACTIVE SERVER PAGES  143

ACTIVITY 9.1

Installing PWS for Windows 7 and Windows 8:

(a) To perform this installation, go to Control Panel.

(b) Click on Programs and Features.

(c) Click ÂTurn Windows Features on or offÊ on the left side of Control
Panel interface.

(d) You may receive the Windows Security warning. Click Allow to
continue. The Windows Features dialog box is displayed.

(e) Expand Internet Information Services. Additional categories of IIS

features are displayed. Select Internet Information Services to choose
the default features for installation.

(f) A folder called Inetpub will be created in your hard disk. Inside this
folder is another folder called wwwroot.

(g) In the wwwroot folder, create a folder with the name OUM.

(h) Use a text editor like Notepad. Write any text and save the file as
default.asp

(i) Ensure that your web browser is running (check for the PWS icon on
the bottom right corner of your computer screen).

(j) Open the web browser and type http://localhost/OUM/default.asp

to open the ASP file that you created in step (h).

IIS will install several components such as Internet Service Manager, World
Wide Web service and FTP services. Upon completion, it will create a new
folder for website services named c:\inetpub\wwwroot.

Then, you can test whether IIS has been installed into your browser by typing
the IP Address in web server in the same network. For example, type
http:\\202.185.23.45. The IIS website will be displayed. If you test it by using
the web browser in the server itself, you may type the IP loopback which is
http://127.0.0.1. You will be able to see the same IIS website.

Copyright © Open University Malaysia (OUM)

144  TOPIC 9 ACTIVE SERVER PAGES

ACTIVITY 9.2
1. If IIS cannot be run, perform the following steps.

2. Click start button > setting >control panel >administrator tools>

services.

3. Choose World Wide Web publishing service.

4. Click start.

You can determine services automatically by choosing Startup and click

'Automatic'

The previous exercise is practical training that you will need to do. Following are
the theoretical questions.

SELF-CHECK 9.2

1. What is the difference between IIS and PWS?

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

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 which is:

(a) Beginning the script with <% and ending it with %>. For example:
<%
...ASP Script
%>

(b) Insert the property runat = server in the SCRIPT tag. The code is as follows:
<script language = VBScript runat = server>
...ASP Script
</script>

Copyright © Open University Malaysia (OUM)

 TOPIC 9 ACTIVE SERVER PAGES  145

You can use the Write method in the Response object to display text at the web
browser. For example, the following code will display the text "Hello World" on
the web browser.

Reponse.Write(“Hello World”)

ACTIVITY 9.3

Creating an ASP file

(a) Run the text editor and open a new file.

(b) Save this file as activity2.asp in the folder

C:\Inetpub\wwwroot\OUM that you created in Exercise 9.1.

(c) Type the following code:

<%
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”)

Copyright © Open University Malaysia (OUM)

146  TOPIC 9 ACTIVE SERVER PAGES

In the previous example, ASP application will quit the processing of any file
currently open and jump to the file erratum.asp

ACTIVITY 9.4

You are required to visit this website http://www.asptutorial.info/ as it

contains more instructions and additional topics that can help in creating
an interactive website.

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 and password. 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 following syntax is used:

<%=variable%>

For example:

<%=x%>
<%=Session(“employee_id”)%>

Copyright © Open University Malaysia (OUM)

 TOPIC 9 ACTIVE SERVER PAGES  147

ACTIVITY 9.5
Variables in ASP

(a) Open a new file in Notepad and save the file as activity3.asp in the
OUM folder.

(b) Type the following code:

<%
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.

Answer Self-Check 9.3 to strengthen your theoretical understanding.

SELF-CHECK 9.3
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?

Copyright © Open University Malaysia (OUM)

148  TOPIC 9 ACTIVE SERVER PAGES

9.4 FUNCTIONS IN ASP

The syntax for functions in ASP is the same as the function syntax in VBScript,
which is:
<%
sub sub_name(argument1, argument2, etc)
ASP instructions
end sub
%>

The instructions to call the above function are as follows:

Call sub_name(value_argument1, value_argument2, etc)

Do Activity 9.6 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.

(b) Type the following code:

<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/

Copyright © Open University Malaysia (OUM)

 TOPIC 9 ACTIVE SERVER PAGES  149

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>

Following is the output from the previous script.

There are two ways to get the value for the previous form 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 previous form).
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>

Copyright © Open University Malaysia (OUM)

150  TOPIC 9 ACTIVE SERVER PAGES

The output for the previous code is:

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:

Copyright © Open University Malaysia (OUM)

 TOPIC 9 ACTIVE SERVER PAGES  151

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 following code. Observe that the form will be sent to itself:

<html>
<body>
<form action= "activity5.asp" method= "post">
Insert your name:
<input type= "text" name= "name">
<input type= "submit" value= "Send">
<br>
</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 following questions to
improve your comprehension.

SELF-CHECK 9.4
1. Give two ways for ASP to obtain values sent by a form.

2. Discuss the differences between GET and POST methods.

Copyright © Open University Malaysia (OUM)

152  TOPIC 9 ACTIVE SERVER PAGES

• 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 can also be referred to as a type of web
server.

• ASP files normally contain HTML tags like other HTML files. ASP has two
ways to insert the script into HTML:

− Beginning the script with <% and ending it with %>; and

− Insert the property runat = server in the SCRIPT tag.

• 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. 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.

• The Application variable can be accessed by all users using the application.
Normally, the Application variable stores values that belong to all users.

• Syntax for functions in ASP is the same as function syntax in VBScript; sub.

<% %> Internet Information Services (IIS)

<script> Session
Active Server Pages (ASP) sub
Application

Copyright © Open University Malaysia (OUM)

Topic  Database
in ASP
10
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Explain the advantages of ODBC and the concept of ADC; and
2. Manipulate data like accessing, adding, deleting and updating records.

 INTRODUCTION
When you use a HTML file, a lot of time and effort is required to ensure that data
displayed in the website is up-to-date. For example, if your website shows the stock
for a product, it needs to be updated every time a purchase of that product is made.

By using ASP, you can store the above-mentioned stock data in a database and
allow your website to have constant access to the latest data. In this topic, you will
focus on learning ASP syntax to access and update a database from a website.

10.1 ODBC AND SERVER OBJECT

If you have been involved with database programming, you may have heard of
ODBC. ODBC is the abbreviation for Open Database Connectivity. ODBC was
created to make it easier for programmers to access a database. By using ODBC,
programmers no longer have to worry about complex codes, location or driver
type needed to access databases. You can use the same method to access different
databases.

Figure 10.1 shows an application using ODBC to access three different databases;
Access, SQL Server and Oracle. To access a database, ODBC refers to a name
known as DSN. DSN is the abbreviation for Data Source Name. Every database

Copyright © Open University Malaysia (OUM)

154  TOPIC 10 DATABASE IN ASP

relationship and ODBC has a unique name. The following Activity 10.1 is an
example for creating DSN.

Figure 10.1: ODBC

ACTIVITY 10.1
Creating DSN

(a) Create a database reference.mdb using Microsoft Access.

(b) Click on the Windows Start menu and then select Control Panel.

(c) Select System and Maintenance in the Control Panel.

(d) Next select Administrative Tools. Under Administrative Tools,

double-click on Data Sources (ODBC) to open the ODBC Data
Source Administrator.

(e) In the ODBC Data Source Administrator, click on the Add button.

(f) Choose the Microsoft Access Driver (*.mdb) and click on the Finish
button.

(g) In the Data Source Name textbox, type OUM.

(h) Click on the Select button to locate the reference.mdb file that you
have created in step 1. Browse until you find the file.

(i) Click on the OK button and you will find that OUM has been
included in the DSN list. Click OK to close the ODBC window.

Copyright © Open University Malaysia (OUM)

 TOPIC 10 DATABASE IN ASP  155

After creating the DSN, you can obtain data from that database. A Server object
facilitates your applications in creating a relationship with the database. The syntax
is:

Set objConn = Server.CreateObject ("ADODB.Connection")

ObjConn.Open "DSN=OUM"
Other ASP instructions
ObjConn.Close

The code on the first line will create a relationship in the form of a Connection
object called objConn. You can give any name to this object. Do you know what
ADODB is? ADODB comes from ActiveX Data Objects (ADO). ADO contains
functions that you can use to create access to the database. Among others, ADO
allows you to read, search, update and delete a record in the database.

After creating a relationship, you can link it to the database using the Open
method like the code in the second line. You will open a predefined DSN called
OUM. After performing other instructions, you need to close the ObjConn
relationship using the Close method.

ACTIVITY 10.2

In Activity 10.1 earlier, you had the opportunity to create a Microsoft

Access DSN file. What if a data file is stored in a different database like a
SQL Server? To learn the technique, visit the website
https://www.mssqltips.com/sqlservertip/1471/sql-server-dsn-and-
odbc-configuration/

SELF-CHECK 10.1

1. What is the advantage of ODBC?

2. What is meant by ADO?

Copyright © Open University Malaysia (OUM)

156  TOPIC 10 DATABASE IN ASP

10.2 READING RECORDS

This topic relates with SQL (Structured Query Language). Before you proceed with
your reading, try to recall the basic syntax of SQL to read or choose records in a
database.

The first operation that you will learn is reading records in a database. Before
writing any codes, ensure that you already know the tables that are in the database.
In addition to this, you need to know all the fields in each table. This is important
because you need to know in which table the record you are looking for is located.

After understanding the tables in a database, you also need to know the basics of
SQL queries. Query is the standard language used to perform any operation in a
database. If you recall, this SQL was discussed in a previous unit. The query syntax
that is used to read a record is:

Select <field_name> from <table_name> where <condition>

Where <condition> is an optional part. The following example is to read all

Title and Year fields in a Book table:

Select Title, Year from Book

On the other hand, the code to display all fields in a Book table published in 1992
is:

Select * from Book where Year = 1992

Attention should be given to the value of the field in the query. If the value of the
field is in text, you need to insert an apostrophe (') in the beginning and the end of
the value. For example, the ISBN field in the Book table is text, therefore, the ISBN
value is '0-0131985-2-1'. If the field is a number like the Year, you do not need to
insert the apostrophes. If the field is a date or time then you need to insert the %
symbol as in %12/5/2002%.

Copyright © Open University Malaysia (OUM)

 TOPIC 10 DATABASE IN ASP  157

ACTIVITY 10.3

Reading Records

(a) Run the text editor and open a new file.

(b) Save this file as book2009.asp in the C:\Inetpub\wwwroot\OUM

folder.

(c) Type the following code:

<html>
<head>
<title>Untitled</title>
</head>
<body>
<%
Dim objConn
Dim sql
Dim objRec
Set objConn = Server.CreateObject
("ADODB.Connection")
ObjConn.Open "DSN=OUM"
sql = "Select Title,Year from book where Year =
2009"
Set objRec = objConn.Execute(sql)
do while not objRec.EOF
Response.Write objRec("Title")
Response.Write "(" & objRec("Year") & ")"
& "<BR>"
Loop
objRec.Close
objConn.Close
Set objRec = Nothing
Set objConn = Nothing
%>
</body>
/html>

(d) Save the file again.

(e) Open the web browser and type

http://localhost/OUM/book2009.asp.

Copyright © Open University Malaysia (OUM)

158  TOPIC 10 DATABASE IN ASP

In the previous code:

sql = „Select Title,Year from Book where Year = 2009”

The variable sql is accumulated with the query. An object called recordset,
objRec is created to store records that will be accessed. The Execute method in
the relationship object, objConn, as follows is meant to run the query.

Set objRec = objConn.Execute(sql)

As long as Recordset contains a record, which means that End of File (EOF)
has not been reached, the record is brought out on the web browser. All objects
that have been created should be destroyed as shown in the following code:
„‰
objRec.Close
objConn.Close
Set objRec = Nothing
Set objConn = Nothing

10.3 ADDING RECORDS

The script to make additions into a database is similar to the operation for reading
records. The same is for deleting and updating operations that are discussed in the
subsequent subtopics. What is different is the query. This is because queries will
determine the operation to be performed.

The adding query that you will use is:

Insert into <table_name(field_name)> values <(field_value)>

For example:

Insert into Book(Title, Year, ISBN) values (‘Visual

Programming’, 2002, ‘0-79-329892-x’)

The above query will insert a new record into the Book table by inserting values
into the Title, Year and ISBN fields. Value sequences are the same as field
sequences. This means that 'Visual Programming' is a value for Title, 2002 is a value
for field and '0-79-329892-x' is a value for ISBN.

Copyright © Open University Malaysia (OUM)

 TOPIC 10 DATABASE IN ASP  159

ACTIVITY 10.4

Adding Records
(a) Run the text editor and open a new file.
(b) Save this file as addAuthor.asp in C:\\Inetpub\wwwroot\ OUM
folder.
(c) Type the following code:
<%
Dim objConn
Dim sql
Set objConn = Server.CreateObject
(“ADODB.Connection”)
objConn.Open “DSN=OUM”
sql=“insert into Author(Author, Born) values(‘Ahmad
Yusof’, 1977)”
objConn.Execute(sql)
Response.Write “One Author record has been added”
objRec.Close
objConn.Close
Set objRec = Nothing
Set objConn = Nothing
%>

(d) Save the file again.

(e) Open the web browser and type http://localhost/OUM/

addAuthor.asp

Observe that the code to run queries does not use the Recordset object. Instead, the
Execute method continues to be used as in:

objConn.Execute(sql)

This is because the operation of adding records does not return any result. Only
one record is added. Therefore, there is no need to accumulate any value into
Recordset.

Copyright © Open University Malaysia (OUM)

160  TOPIC 10 DATABASE IN ASP

10.4 DELETING RECORDS

The query used to delete records in a database is:
delete from <table_name> where <condition>

For example, if you wish to delete all records in the Publisher table, the query will
be:
delete from Publisher

The Publisher table will be emptied. In contrast, if you wish to delete a particular
record, you will need to specify a condition. As an example, to delete Publisher
record located in country 'NY', the query will be:

delete from Publisher where Country = ‘NY’

Queries do not have to be limited to one condition only. You can put in as many
conditions as necessary. Just add the AND or OR operator in between the
conditions. For example, if you want to delete Publisher record from country ÂNYÊ
that has a Publisher_ID of more than 50, the query is:

delete from Publisher where Country = 'NY' and

Publisher_ID > 50

You will observe that only records where the Publisher_ID is more than 50 and
country is 'NY' will be erased from the database.

ACTIVITY 10.5

(a) Run the text editor and open a new file.

(b) Save this file as DeleteBook1992.asp in the

C:\Inetpub\wwwroot\OUM folder.

(c) Type the following code:

<%
Dim objConn
Dim sql
Set objConn = Server.CreateObject

Copyright © Open University Malaysia (OUM)

 TOPIC 10 DATABASE IN ASP  161

“ADODB.Connection”)
objConn.Open “DSN=OUM”
sql = “delete from Book where Year = 1992”
objConn.Execute(sql)
Response.Write “All books from year 1992 has been
deleted”
objRec.Close
objConn.Close
Set objRec = Nothing
Set objConn = Nothing
%>

(d) Save the file.

(e) Open the web browser and type

http://localhost/OUM/DeleteBook1992.asp

10.5 UPDATING RECORDS

The final operation that you need to learn is the updating operation. Updating
operations is necessary when you wish to change the value of a field for a record
in the database. The query to update records is:

Update <table_name> set <field_name> = <new_value> where

<condition>

For example, if you wish to change the name of a Publisher record that has
Publisher_ID = 1 to ÂDewan Bahasa dan PustakaÊ, the query is:

Update Publisher set Name = ‘Dewan Bahasa dan Pustaka’ where

Publisher_ID = 1

If you do not need to put in a condition, then the query is:

Publisher set Name = 'Dewan Bahasa dan Pustaka'

Copyright © Open University Malaysia (OUM)

162  TOPIC 10 DATABASE IN ASP

With this, the field Name for all records will be changed to ÂDewan Bahasa dan
Pustaka. You may wish to change two fields in a record. You can do this by adding
the name and value of the other record like this:

Update Publisher set Name = 'Dewan Bahasa dan Pustaka, Country

= 'KL' where Publisher_ID = 1

ACTIVITY 10.6

Updating Records

(a) Run the text editor and open a new file.

(b) Save this file as updatePublisher.asp in

C:\Inetpub\wwwroot\OUM.

(c) Type the following code:

<%
Dim objConn
Dim sql

Set objConn = Server.CreateObject

(“ADODB.Connection”)
objConn.Open “DSN=OUM”

sql = “Update Publisher set Name = 'Dewan Bahasa

dan Pustaka' where Publisher_ID = 1”

objConn.Execute(sql)

Response.Write “Publisher name has been updated”

objRec.Close
objConn.Close
Set objRec = Nothing
Set objConn = Nothing
%>

(d) Save the file again.

(e) Open the web browser and type

http://localhost/OUM/updatePublisher.asp

Copyright © Open University Malaysia (OUM)

 TOPIC 10 DATABASE IN ASP  163

ACTIVITY 10.7

Up until now you have learnt how data can be manipulated. Try and
list out SQL codes that are important for reading, adding, deleting and
updating records.

• ODBC is the abbreviation for Open Database Connectivity. ODBC was created
to make it easier for programmers to access a database. By using ODBC,
programmers no longer have to worry about complex codes, location, or driver
type needed to access databases.

• To read the records (database), the programmer needs to know the SQL
(Structured Query Language). Query is the standard language used to perform
any operation in a database.

• The script to make additions, deleting and updating into a database is similar
to the operation for reading records.

ActiveX Data Objects (ADO) Open Database Connectivity (ODBC)

Data Source Name (DSN) Structured Query Language (SQL)

Copyright © Open University Malaysia (OUM)

Topic  Application
Development:
11 Case Study
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Identify the steps to understand problems and online application
development;
2. Construct a database with specific tables and columns;
3. Create an ASP file according to the problems given;
4. Differentiate the functions of HTML, VBScript and ASP applications; and
5. Modify the programs according to the problems.

 INTRODUCTION
In the previous topic, you have been exposed to HTML which is used to format
information on the website. You have also been introduced to VBScript and
JavaScript which is used to validate data keyed in by users using forms (<FORM>)
like Text box, Radio button and Check box. You also understand the concept of
Active Server Pages (ASP) and the database usage which enables you to update, to
add and delete records on your website.

In this topic, you will use your knowledge on ASP, VBScript and HTML to build a
simple application. If you look on the Internet, many online applications have been
developed using ASP. For example, book purchasing system (www.amazon.com),
bidding system (www.onsale.com), career information system
(www.jobstreet.com.my) and many more. For a start, you will learn basic steps on
how to develop a simple application of an online phone book.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  165

11.1 IDENTIFY THE PROBLEM

Assume that you have volunteered to develop the alumni website for your college.
You have also included a list of names and phone numbers of your old friends in
the website. This list will make it easier for you to connect with your friends and
plan for gatherings or a reunion.

In the beginning, you were able to list down only 20 people. However, recently,
more than 100 people were added on the list with more to come. You frequently
receive calls from friends who would like to include their names in the list. You
also receive requests to delete or update their personal details in the list. Due to
the overwhelming response, some of your friends even asked you to include other
information such as hand phone numbers, home and email addresses and personal
URL websites.

Now, your task is to develop a website that will enable your friends to add, delete
and update their personal information online. This application is similar to the
concept of an ordinary phone book but the information is kept in a database and it
can be accessed online. This website will display the information dynamically
according to the database. With this application, there is no need for you to
manage your friendsÊ information as they are able to manage on their own.

As a conclusion, the application should function to:

(a) List names and phone numbers of all individuals;

(b) Display detailed information of each individual;

(c) Add individual record;

(d) Update certain individual record; and

(e) Delete certain individual record.

SELF-CHECK 11.1

Understand the scenario outlined. Think of the entities involved in this

problem.

Copyright © Open University Malaysia (OUM)

166  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

11.2 DATABASE DEVELOPMENT AND WEBSITE

STRUCTURE
The first activity involves designing a database and to develop a website structure.
Why do you first need to design a database? This is because data determines the
structure and the interface of your website.

11.2.1 Database Entities

Based on the problem identified in Subtopic 11.1, information that you would like
to keep are names, home phone numbers, hand phone numbers, email addresses
and personal URL websites. You can add all of the information to one main
individual entity. The following are characteristics of individual entity that will be
the schedule in the database.

Individual (ID, Name, HomeNo, HPNo, Email, Address, URL)

Each entity will be given an ID to create a unique record. The proposed data
dictionary for that individual table that you need to create is in Table 11.1:

Table 11.1: Databases Entities

No. Field Name Type Size Explanation

1. ID AutoNumber ă Individual number which is
automatically created.
2. Name Text 50 Individual name for example; Ali bin
Abu.
3. HomeNo Text 15 Home phone number for example; 03-
89216706
4. HPNo Text 15 Handphone number for example;
012-3646324
5. Email Text 50 Email address for example;
abu@hotmail.com
6. Address Text 255 Home address for example; 14, Jalan
Putra 8/8, Bandar Putrajaya, 44000
Putrajaya, Selangor
7. URL Text 100 Personal URL, for example:
http://www.yahoo.com/~abu

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  167

11.2.2 Website Structure

The structure and number of websites that you need to create for this application
depends on the number of functions or operations that you would like to develop.
There are five functions stated in Subtopic 11.1 that you need to use in this
application. Each function will include one or more ASP files. The following tables
show the list of files that you need to create according to its specific functions.

Table 11.2: List of ASP Files According to its Application Functions

Function Explanation File(s) Involved

1 List of names and phone numbers of list.asp
all individuals
2 Display detail information for each individual.asp
individual
3 Add individual record add_individual_form.asp
add_individual.asp
4 Update certain individual record update_individual_form.asp,
update_individual.asp
5 Delete certain individual record delete_individual.asp

The structure of the website in its conceptual form is depicted in Figure 11.1. The
ASP files in this figure are classified according to the five functions shown. The
arrows show the application flow. For example, if you would like to execute
Function 4, you have to open list.asp (Function 1) followed by individual.asp
(Function 2). Once the individual_update.asp is run, the application flow will go
back to the list.asp file.

Copyright © Open University Malaysia (OUM)

168  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

Figure 11.1: Website structure

You do not have to worry about what needs to be in each asp. file in the previous
figure because you will continuously develop it. This figure is important as a
reference for you to understand the function of each asp. file in this application.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  169

ACTIVITY 11.1
Run Microsoft Access.

(a) Create an individual table according to Table 11.1.

(b) Save the database with the name telephone_book.mdb

(c) Insert several records in the individual table to be used in your

testing. You can input the following record examples.

(d) Individual:

ID Home
ID Name HP Number Email Address URL
Category Number
3, Jalan 3/2F,
Ali bin ali@yahoo.
001 1 03-89279302 012-6632829 Bandar Baru Nilai, None
Wahid com
53000 Nilai, NS
22, Jalan Maju 1,
Taman Sri Indah, http://
Ang Chu lee@hotmail.
002 1 None 013-2831111 55100 Kuala Lumpur lee.mysite.
Lee com
com

39, Jalan 33A,

Chandran cs@fastmail.
003 3 06-4891422 019-9393255 Taman Perwira, None
A/L Siva com
70500 Seremban, NS

(e) Create a new DSN for the telephone_book.mdb in ODBC. Please

refer to Topic 10 for this step. Name the DSN that you will be creating
as Telephone Book.

11.3 WEBSITE CREATION

You now understand the website structure that you will be developing. You have
also created a database called telephone_book.mdb in the previous Activity 11.1.
What you need to do next is to create a server to keep the database and your ASP
files that you will create.

In Topic 9, you were instructed to install a PWS server or IIS. With this web
browser, now you know the home directory that you will be able to reach via the
Web. By default, the home directory for PWS and IIS is c:\lnetpub\wwwroot. For
this application, you will be creating a new directory within the home directory.
This is to prevent your ASP files from being mixed up with other application files.
Please complete Activity 11.2.

Copyright © Open University Malaysia (OUM)

170  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

ACTIVITY 11.2

(a) Run Microsoft Internet Explorer.

(b) Create a directory called Telephone Book in the home directory

c:\lnetpub\wwwroot. This means you will be able to reach this
website by typing the URL http://localhost/TelephoneBook from
your web browser.

(c) Copy the database telephone_book.mdb into the directory

c:\lnetpub\wwwroot/TelephoneBook

(d) To ensure that your website is functional, you can input any html
file to your Telephone Book directory. You can either create your
own file or obtain it from other directories. Let us say your file is
test.htm, then you would type in your URL web browser
http:/localhost/TelephoneBook/test.htm. If the correct html page
displays, this means your website is functional. If not, please seek
your tutor's assistance.

*Try this:

Can the home directory be changed to c:\lnetpub\wwwroot/ to

another directory? You may obtain the answer from the Internet
Service Manager by clicking Start> Settings> Control Panel>
Administrative Tools> Internet Service Manager. Please get the
information of the sequence of the files that will be opened by your
web browser according to priority.

*For IIS web server only

11.4 DEVELOPING ASP FILES

After you have completed the website creation, now you will need to develop each
ASP file according to the website structure in Figure 11.1. To simplify the
explanation for the ASP script you will be writing, the development of the file will
be based on the five functions that have been discussed earlier. You will execute
each function until you complete it.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  171

11.4.1 Function 1: To List the Names and Phone

Numbers of All Individuals
Function 1 of the Telephone Book application is to list down the names and phone
numbers of all individuals based on the records contained in the database. You
may visualise the website as having one table consisting of a list of all the
individual names. Complete Activity 11.3. The explanation of the ASP script is
provided after the activity.

ACTIVITY 11.3

(a) Run Notepad Editor.

(b) Type the following HTML and ASP script:

1 <%
2 id_individual = request.querystring(“id”)
3
4 Set Connection = Server.CreateObject(“ADODB.
Connection”)
5 Connection.Open “DSN=PhoneBook”
6
7 sql = “SELECT * FROM Individual WHERE ID = “ &
id_individual
8 Set rsIndividual = Connection.Execute(sql)
9
10 %>
11
12 <html>
13 <head>
14 <title>Phone Book</title>
15 </head>
16
17 <body bgcolor=#FFFFFF>
18 <b>Detail Information</b><br>
19 <br>
20 <a href=list.asp>Name List</a>
21 <a href=add_individual_form.asp>
22 Add Individual</a><br>
23 <br>

Copyright © Open University Malaysia (OUM)

172  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

24
25 <table border=1>
26 <tr>
27 <td><b>Name</b></td>
28 <td><%=rsIndividual(“Name”)%></td>
29 </tr>
30 <tr>
31 <td><b>Home Number</b></td>
32 <td><%=rsIndividual(“HomeNo”)%></td>
33 </tr>
34 <tr>
35 <td><b>HP Number</b></td>
36 <td><%=rsIndividual(“HPNo”)%></td>
37 </tr>
38 <tr>
39 <td><b>Email</b></td>
40 <td><%=rsIndividual(“Email”)%></td>
41 </tr>
42 <tr>
43 <td><b>Address</b></td>
44 <td><%=rsIndividual(“Address”)%></td>
45 </tr>
46 <tr>
47 <td><b>Website</b></td>
48 <td><%=rsIndividual(“URL”)%></td>
49 </tr>
50 </table>
51 <br>
52 <a
href=add_individual_form.asp?id=<%=id_individ
ual%>>
53 Update</a>
54 |< ahref=delete_individual_form.asp?id=<%=
id_individu%>>Delete</a>
55
56 </body>
57 </html>

(c) Save this file as individual.asp in the directory

c:\lnetpub\wwwroot/TelephoneBook

(d) Open your web browser and type in the URL

http://localhost/TelephoneBook/list.asp.

(e) Click on any of the individual name links. The individual file
will open and the detailed information will be displayed.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  173

There is no need to discuss lines 13 to 24, 30 to 34, 53 and 54 because it only involves
common HTML scripts. What is important is the understanding of the ASP script,
that is, the scripts that are tagged <% and %>. Lines 1 to 6 refer to the ASP script to
call the database using the DSN Telephone Book that you created earlier.

Lines 8 and 9 run the SQL instruction where it will retrieve all the records in the
individual table and will be put it recordset rsName. Lines 24, 28 and 51 are if
statements. If rsName is not in record, it will run lines 25 to 27, if not lines 29 to 50
will be executed.

Lines 31 to 34 is the first row (heading of the table). Lines 39-43 will create the total
rows according to the records contained in the individual table.

According to Line 36, as long as rsName contains record it will continue to loop
lines 37 to 46. In line 40, the script <%=counter%> is to output the number of rows.
In lines 42 and 43, <%=rsName („Name‰)% is to output the individual names.
Href=individual.asp?id=,%=rsName („ID‰) %> is a reference to the individual.asp
file that has a variable ID which refers to the individual ID.

Line 45, <% rsName.Movenext %> moves to the next record contained in rsName;
then 1 will be added to the counter variable. Finally, when you reach the end of the
record, the table will appear according to the loop script and will execute the rest
of the remaining script, lines 48 to 54.

Copyright © Open University Malaysia (OUM)

174  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

The result from the list.asp file is as Figure 11.2 as follows:

Figure 11.2: List.asp

11.4.2 Function 2: To Display Detailed Information of

an Individual
The Function 2 application is to display the detailed information of an individual
that you have clicked in the list.asp file. In the individual.asp file, you will have to
get the value of the variable ID that is sent from the list.asp as a reference in the
SQL instruction. From this file also, you will be able to add new records (Function
3, updating) (Function 4 and delete Function 5 to the individual records). Complete
Activity 11.4 and read the explanations.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  175

ACTIVITY 11.4
(a) Run Notepad Editor.

(b) Type the following HTML and ASP script as follows (excluding
the line number):
1 <%
2 id_individual = request.querystring(“id”)
3
4 Set Connection = Server.CreateObject(“ADODB.
Connection”)
5 Connection.Open “DSN=PhoneBook”
6
7 sql = “SELECT * FROM Individual WHERE ID = “ &
id_individual
8 Set rsIndividual = Connection.Execute(sql)
9
10 %>
11
12 <html>
13 <head>
14 <title>Phone Book</title>
15 </head>
16
17 <body bgcolor=#FFFFFF>
18 <b>Detail Information</b><br>
19 <br>
20 <a href=list.asp>Name List</a>
21 | <a href=add_individual_form.asp>
22 Add Individual</a><br>
23 <br>
24
25 <table border=1>
26 <tr>
27 <td><b>Name</b></td>
28 <td><%=rsIndividual(“Name”)%></td>
29 </tr>
30 <tr>
31 <td><b>Home Number</b></td>
32 <td><%=rsIndividual(“HomeNo”)%></td>
33 </tr>
34 <tr>
35 <td><b>HP Number</b></td>
36 <td><%=rsIndividual(“HPNo”)%></td>
37 </tr>

Copyright © Open University Malaysia (OUM)

176  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

38 <tr>
39 <td><b>Email</b></td>
40 <td><%=rsIndividual(“Email”)%></td>
41 </tr>
42 <tr>
43 <td><b>Address</b></td>
44 <td><%=rsIndividual(“Address”)%></td>
45 </tr>
46 <tr>
47 <td><b>Website</b></td>
48 <td><%=rsIndividual(“URL”)%></td>
49 </tr>
50 </table>
51 <br>
52 <a
href=add_individual_form.asp?id=<%=id_individ
ual%>>
53 Update</a>
54 |<ahref=delete_individual_form.asp?id=<%=
id_individu%>>Delete</a>
55
56 </body>
57 </html>
(c) Save this file as individual.asp in the directory
c:\lnetpub\wwwroot/TelephoneBook
(d) Open your web browser and type in the URL
http://localhost/TelephoneBook/list.asp.
(e) Click on any of the individual name links. The individual file will
open and the detailed information will be displayed.

Lines 1 to 10 is the ASP script to retrieve the database. In Line 2, request.querystring

( „id‰) is a script to receive the value id that is sent from list.asp and inserted into
the variable called individual_id. This variable will continue to be used in Line 7,
in the SQL instruction "SELECT * FROM Individual WHERE ID = „&
Individual_id.

Next, based on the SQL instruction that is set in rsIndividual lines 28, 32, 36, 40, 44,
48 will output the table. In lines 52 and 53, a reference is set to link to the
updating_individual_form.asp is created by containing the variable individual id.
In line 54, a reference is created as a link to the individual.asp file which carries the
variable ID as well.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  177

The result from the individual.asp file is as in Figure 11.3.

Figure 11.3: Individual.asp

11.4.3 Function 3: To Add Individual Record

The next function is to enable users to add additional records. This function
includes two ASP files. The first file, add_individual_form.asp contains a form to
be filled up by the users. The form fields contained in the form are similar to the
ones contained in the individual table. This form will then be sent to the second file
individual_add.asp where it will keep the information from the form to the
database using the SQL instruction. At the end of the second file, the user will be
directed back to list.asp file. Complete Activity 11.5 and observe the explanations.

Copyright © Open University Malaysia (OUM)

178  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

ACTIVITY 11.5
(a) Run the Notepad Editor.
(b) Type the following HTML script (excluding the line number):
1 <html>
2 <head>
3 <title>Phone Book</title>
4 </head>
5
6 <body bgcolor=#FFFFFF>
9 <a href=list.asp>Name List</a>
10 <br>
11
12 <form action=add_individual.asp method=post>
13
14 <table border=1>
15 <tr>
16 <td><b>Name</b></td>
17 <td><input type=text name=txtName></td>
18 </tr>
19 <tr>
20 <td><b>Home No</b></td>
21 <td><input type=text name=txtHome></td>
22 </tr>
23 <tr>
24 <td><b>Handphone No</b></td>
25 <td><input type=text name=txtHP></td>
26 </tr>
27 <tr>
28 <td><b>Email</b></td>
29 <td><input type=text name=txtEmail></td>
30 </tr>

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  179

31 <tr>
32 <td><b>Address</b></td>
33 <td><textarea name= txtAddress col=50
row=4>
34 </textarea></td>
35 </tr>
36 <tr>
37 <td><b>Website</b></td>
38 <td><input type=text name=txtWeb></td>
39 </tr>
40 </table>
41 <br>
42 <input type=submit value=OK>
43 </form>
44
45 </body>
46 </html>

(c) Save this file as add_individual_form.asp

c:\lnetpub\wwwroot/TelephoneBook

(d) Run your web browser and open the URL

http://localhost/TelephoneBook/add_individual_form.asp

The previous file does not involve any ASP script. The HTML script used is only
to create a form. What is important is for you to observe Line 12
action=add_individual.asp. All information contained in this form will be sent to
the second file add_individual.asp. You will also have to observe the naming of the
form field used in the form in lines 17, 21, 25, 29, 33 and 38 for example txtname,
txthome etc. This is important as it will be used in the reference in the second file.
The result of the file is as shown in Figure 11.4.

To achieve a more comprehensive form, you can also input VBScript or JavaScript
to verify the form number. This means if the user forgets or did not input the
number in the form field, a pop-up window will be displayed as a reminder. Refer
to the VBScript or JavaScript topic to include this function.

Copyright © Open University Malaysia (OUM)

180  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

Figure 11.4: add_individual_form.asp

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  181

ACTIVITY 11.6

(a) Run the Notepad Editor.

(b) Type the ASP script as follows (excluding the line number):

1 <%
2 name = request.form(“txtName”)
3 homenumber = request.form(“txtHome”)
4 hpnumber = request.form(“txtHP”)
5 email = request.form(“txtEmail”)
6 address = request.form(“txtAddress”)
7 url = request.form(“txtWeb”)
8
9 Set Connection =
Server.CreateObject(“ADODB.Connection”)
10 Connection.Open “DSN=PhoneBook”
11
12 sql = “INSERT INTO Individual(Name, PhoneNo,“
13 sql = sql & “HPNo, Email, Address, URL)
VALUES(“
14 sql = sql & “‘“ & name & “‘“ & “,”
15 sql = sql & “‘“ & homenumber & “‘“ & “,”
16 sql = sql & “‘“ & hpnumber & “‘“ & “,”
17 sql = sql & “‘“ & email & “‘“ & “,”
18 sql = sql & “‘“ & address & “‘“ & “,”
19 sql = sql & “‘“ & url & “‘“ & “)”
20 Connection.Execute(sql)
21
22 response.redirect(“list.asp”)
%>

(c) Save this file as add_individual.asp in c:\lnetpub\

wwwroot/TelephoneBook

(d) Run your web browser and open the URL http://localhost/
TelephoneBook/add_individual_form.asp.

(e) Fill in the form with the complete information and click the OK
button. If there is no error, you will be directed to list.asp. The new
record added will be displayed in that list.

Copyright © Open University Malaysia (OUM)

182  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

Activity 11.6 shows a file that only uses ASP script. The HTML is not used because
this file is only used to input data in the database. Next, the user will be directed to
the list.asp. There are no interfaces used. Users will not be aware of the existence of
this file.

Lines 2 to 7 is the script to capture the values sent by the form called
add_individual.asp. For example, you will be using the script request.form
("txtName") with txtName referring to the name of the field in the form. The data
value, as an example will be put into another variable called name.

Lines 12 to 19 involve quite a confusing script. The purpose of this script is actually
to create an SQL instruction but this SQL instruction is too long. Therefore, the
instruction has to be combined using variable sq1. Example of an SQL instruction
that you would create is as follows:

Sql = “INSERT INTO Individual (Name, Homeno, HPno,

Email,Address, URL) VALUES (‘Ali’, ’03-88882121’, ‘012-
3993000’,‘ali@email.com’,‘Ali_address’, ‘http://www.ali.com’)

Line 20 will execute the above SQL instruction. Finally, the user will be directed to
list.asp because this file has no interface. To ensure that this function works, you
will be able to see the additional record in the list.asp. This shows you have
succeeded in adding the individual record.

11.4.4 Function 4: Updating the Specific Individual

Record
Function 4 is to enable users to update a particular individual record. To execute
this function, users have to observe the record thoroughly first (Function 2). This
will ensure which record needs to be updated. This function includes two ASP files.
The first file, update_individual_form.asp, consists of an existing form containing
the information of particular individual. This form is similar to the add_form but
containing information.

This form will then be sent to the second file update_individual.asp that will
update the information contained in the form to the database using the SQL
instruction. At the end of the second file, users will be redirected to the list.asp file.
Complete Activity 11.7 and read the explanation.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  183

ACTIVITY 11.7
(a) Run the Notepad Editor.
(b) Type the HTML and ASP script as follows (excluding the line
number):
1 <%
2 individual_id = request.querystring("id”)
3
4 Set Connection=Server.CreateObject
(“ADODB.Connection”)
5 Connection.Open “DSN=PhoneBook”
6
7 sql=“SELECT * FROM Individual WHERE ID=“ &
individual_id
8 Set rsIndividual = Connection.Execute(sql)
9
10 %>
11
12 <html>
13 <head>
14 <title>Phone Book</title>
15 </head>
16
17 <body bgcolor=#FFFFFF>
18 <b>Individual Update Form</b><br>
19 <br>
20 <a href=list.asp>Name List</a>
21 <br>
22
23 <form action=add_individual.asp method=post>
24
25 <table border=1>
26 <tr>
27 <td><b>Name</b></td>
28 <td><input type=text name=txtName
29 value=”<%=rsIndividual(“Name”)%>”></td>
30 </tr>
31 <tr>
32 <td><b>Home No</b></td>
33 <td><input type=text name=txtHome
34
value=”<%=rsIndividual(“HomeNo”)%>”></td>
35 </tr>
36 <tr>
37 <td><b>HP No</b></td>

Copyright © Open University Malaysia (OUM)

184  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

45 </tr>
46 <tr>
47 <td><b>Address</b></td>
48 <td><textarea name= txtAddress col=50 row=4>
49
<%=rsIndividual(“Address”)%></textarea></td>
50 </tr>
51 <tr>
52 <td><b>Website Web</b></td>
53 <td><input type=text name=txtWeb
54 value=”<%=rsIndividual(“URL”)%>”></td>
55 </tr>
56 </table>
57 <br>
58 <input type=submit value=OK>
59 <input type=hidden name=HiddenID
value=”<%=individual_id%>”>
60 </form>
61
62 </body>
63 </html>

(c) Save this file as update_individual_form.asp in

c:\lnetpub\wwwroot/TelephoneBook

(d) Run your web browser and open the URL

http://localhost/TelephoneBook/list.asp. Click on any name of the
individual links. The individual file will open and the detailed
information will be displayed. Then click on the update button to
display the updated form.

The previously mentioned file is similar to the add_individual_form.asp. The

difference is in the add form. The users will input the data value, whereas in the
update form, the data value that needs to be updated has been inserted into the
form field.

In lines 1 to 10, the ASP script used is similar to the script in individual.asp which
is to retrieve the detailed individual information according to ID. The information
will be kept in RSIndividual which will be later used in the property value text box.
For example lines 28 and 29, by using the value="<%=rsIndividual ("Name")%>,
the text box txtName contains the initial data value which is equal to the name of
the individual but the textarea does not contain a property value. You can output

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  185

the individual's address, <%=rsIndividual ("Address")%> within the tag

<textarea> and </textarea> as in lines 48 and 49. One of the important things in
the script is the usage of hidden fields in line 59. Contrary to the other information,
the individual ID normally cannot be updated, but it still needs to be included in
this form. Therefore, it is inserted in a hidden field so that users cannot see or
change its value. The example of the output that you should get is displayed in
Figure 11.5.

Figure 11.5: update_individual_form.asp

Copyright © Open University Malaysia (OUM)

186  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

ACTIVITY 11.8

(a) Run the Notepad Editor.

(b) Type the ASP script as follows (excluding the line number):
1 <%
2 name = request.form(“txtName”)
3 homeno = request.form(“txtHome”)
4 hpno = request.form(“txtHP”)
5 email = request.form(“txtEmail”)
6 address = request.form(“txtAddress”)
7 url = request.form(“txtWeb”)
8 individual_id = request.form(“HiddenID”)
9
10 Set Connection=Server.CreateObject
“ADODB.Connection”)
11 Connection.Open “DSN=PhoneBook”
12
13 sql = “UPDATE Individual SET”
14 sql = sql & “ Name = “ & “‘“ & name & “‘“ & “,”
15 sql = sql & “ HomeNo = “ & “‘“ & homeno & “‘“ &
“,”
16 sql = sql & “ HPNo = “ & “‘“ & hpno & “‘“ & “,”
17 sql = sql & “ Email = “ & “‘“ & email & “‘“ & “,”
18 sql = sql & “ Address = “ & “‘“ & address & “‘“ &
“,”
19 sql = sql & “ URL = “ & “‘“ & url & “‘“
20 sql = sql & “ WHERE ID = “ & individual_id
21 Connection.Execute(sql)
22
23 response.redirect(“list.asp”)
24 %>

(c) Save this file as update_individual.asp in c:\lnetpub \wwwroot/

TelephoneBook.
(d) Run your web browser and open the URL http://localhost/
TelephoneBook/list.asp. Click on any of the names of the individual
links. The individual file will open and the detailed information will
be displayed. Then click on the update button to display the updated
form. Make the necessary updates to the data and click the OK button.
If there are no errors, you will be redirected to list.asp.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  187

The individual file is similar to the add_individual.asp file which uses only ASP
script. Lines 2 to 8 are the script to capture the value that is sent from the file
update_individual_form.asp.

Lines 12 to 19 use this script to create and update SQL instructions. When linked,
the SQL instruction will form the following:

Sql = "UPDATE Individual SET Name = 'Ali', Homeno='03-88882121', HPno='012-

3993000', Email='ali@email.com', WHERE ID=‰& individual_id

Line 20 will execute the above SQL instruction. Finally, the user will be redirected
to list.asp using the response.redirect ("list.asp") script.

11.4.5 Function 5: To Delete the Individual Record

The last function is to enable users to delete individual records. This function uses
only one file which is delete_individual.asp. The only script involved in this file is
the ASP script for the deletion of the record in the database. There are no interfaces
used.

Similar to the update function, this function requires the users to view the record
thoroughly first (Function 2). This ensures which record that needs to be deleted.
When the user clicks on the delete button, the specified individual record will be
deleted from the database and the user will be directed to the list.asp. Complete
Activity 11.9 and read the explanation.

EXERCISE 11.9

Copyright © Open University Malaysia (OUM)

188  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

ACTIVITY 11.9

(a) Run Notepad editor.

(b) Type the ASP script as follows (excluding the line number):
1 <%
2 individual_id = request.querystring(“id”)
3
4 Set Connection =
Server.CreateObject(“ADODB.Connection”)
5 Connection.Open “DSN=PhoneBook”
6
7 sql = “DELETE FROM Individual WHERE ID = “ &
individual_id
8 Connection.Execute(sql)
9
10 response.redirect(“list.asp”)
11 %>
(c) Save this file as delete_individual.asp in c:\lnetpub\wwwroot
/TelephoneBook.
(d) Run your web browser and open the URL
http://localhost/TelephoneBook/list.asp. Click on any of the
names of the individual links. The individual file will open and
the detailed information will be displayed. Then click on the
delete button to display the updated form.

The explanation to this file is relatively simple. In line 2, you will capture the data
value for the ID record that you would like to delete. The particular ID will be
inserted in the variable individual_id which will be used in the SQL instruction in
lines 7 and 8. You will run the SQL instruction in line 8. Finally, the user will be
redirected to the list.asp file.

11.5 ASP SCRIPT ERROR

While you are developing the previous application, obviously you will face many
errors including syntax errors, spelling errors and logic script. These errors will
result in a web display error and the correct output will not be seen.

Copyright © Open University Malaysia (OUM)

 TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY  189

The best way to resolve this issue is to refer to the line that contains the error. The
web browser IIS or PWS will give you some guidance to the users on the error
occurred. In a website that contains error, you will have to refer to the error column
or 'Error Type' as displayed in Figure 11.6. Observe the cause of the problem
thoroughly and the line where the error occurred.

Figure 11.6: Website error

Copyright © Open University Malaysia (OUM)

190  TOPIC 11 APPLICATION DEVELOPMENT: CASE STUDY

• To create an application using ASP, VBScript and HTML, the application

should function to:
− List names and phone numbers of all individuals;
− Display detailed information of each individual;
− Add individual record;
− Update certain individual record; and
− Delete certain individual record.

• The first activity involves designing a database and to develop a website

structure. The need to design a database determines the structure and the
interface of your website.

• The structure and number of websites that you need to create for this
application depends on the number of functions or operations that you would
like to develop. For this application you have five functions.

• Next is to create a server to keep the database and your ASP files that you will
create.

• After completing the website creation, you will need to develop each ASP file
according to the website structure (five functions).

Active Server Pages (ASP) Identify the problem

ASP files JavaScript
ASP script error VBScript
Database entities Website
Hypertext Markup Language (HTML) Website structure

Copyright © Open University Malaysia (OUM)

Topic  XML
Technology
12
LEARNING OUTCOMES
By the end of this topic, you should be able to:
1. Identify the concept of XML, DTD, CSS and XSL;
2. Create an XML document;
3. Implement a document conversion; and
4. Discuss the importance and benefits of XML.

 INTRODUCTION
You have seen the usage of HTML in creating a website in the previous topics.
HTML uses a simple language and structure to display its information in the
website. This makes it easy to be learned and understood by the users. Today, the
Internet world and information contained within it is getting more complex. Is the
use of HTML sufficient? Is there a way to create your own tag and not be limited
to the tags created by W3C? Now, you are able to create your document using your
own tags, for example <CUSTOMER> or <CAT> with its own attributes. At the
same time, your document will show the semantics for every tag you create. This
can be done using the XML technology that we will discuss in this topic.

12.1 THE NEED FOR XML

Documents are created by human for one main reason: to communicate. These
documents are created using the word processor software. HTML is a document
format that you have learned. The commercialisation of the Internet has made the
documents on the Internet more complex. Users go for the HTML format so that
they are on par with business development. However, till today, HTML is still not

Copyright © Open University Malaysia (OUM)

192  TOPIC 12 XML TECHNOLOGY

able to correctly present the various types of documents and applications that are
on the Internet.

The main disadvantage of HTML is the content of the document produced in the
HTML format does not show the meaning or semantics. This is also called
metadata which is the data information that enables the system to understand the
information. This disadvantage can be observed in the following example:

<P><H1>Introduction to XML</H1>
<H2>Mastura binti Sahak</H2>
<H2><I>31 October 2004</I></H2></P>

The above tag does not define the meaning of the text contained within the tags to
you. The HTML above only displays the text „Introduction to XML‰ in large font
which is H1. Probably the H2 tag, „Mastura binti Sahak‰ is the name of someone
and the text „31 October 2004‰ is her birth date. Is your prediction correct? What
you are able to summarise here is that the HTML tag is only used to format what
is displayed but not the true semantics of the information contained in it.

We cannot deny that what is displayed by HTML is interesting and important. At

the same time, the semantics of the information contained is equally important. For
example,

<Article>
<Title>Introduction to XML</Title>
<Author>Mastura binti Sahak</Author>
<Date>31 October 2004</Date>
</Article>

will give a different view to you. By using the previously mentioned tags, the actual
text is information of the article which consists of title, author and date published.

By understanding the particular information, you can share your documents with
other users that understand the tags that you created. For example, a company will
be able to share some of the standard tags with the vendors that work with them.
With this, the company and the vendors can communicate using the documents
containing information that is more structured and complete.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  193

Other than being able to share the standard documents, XML also allows the
information to be processed. For example by using other applications, the
information from the previous article can be retrieved according to the tag <Title>,
<Author> and <Date>. If the data is numeric, it can be used in certain calculation
processes. More importantly is to be able to store the data in the database. With
HTML, you are not able to do this.

ACTIVITY 12.1
XML enables you to download a document in the Internet and save it
in the database. If the Utusan Malaysia website uses XML, you can
continue to download your article or news on the database. Think of
other information on the Internet that you find valuable to download
to be used in the future.

12.2 WHAT IS XML?

In February 1998, W3C introduced a new document standard called Extensible
Markup Language (XML). Like HTML, XML originated from XGML. Thus, it is
able to produce the same documents that are produced by HTML. However, in
XML there are no specific texts like HTML. On the other hand, you can create your
own tag and define the structure of the document.

XML defines the standard method for document management and a complex
document exchange. We can also say that XML is a language to create structured
documents. For example by using XML, you can define all the HTML tags
according to your own definition. Would it not be confusing if everyone were to
define texts differently? Yes. Therefore, the next step is to authorise specific text for
specific industry. For example, the broadcasting community will agree to use texts
like ARTICLE, NEWS, NEWSCASTER, DOCUMENTARY, DIALOGUE,
JOURNALIST, etc. Thus, all these tags can be used widely by broadcasting
companies, for example in their email and documentation.

Copyright © Open University Malaysia (OUM)

194  TOPIC 12 XML TECHNOLOGY

XML Usage A, short list of XML usage says it all:

(a) XML can work behind the scenes to simplify the creation of HTML
documents for large web sites;
(b) XML can be used to exchange the information between organisations and
systems;
(c) XML can be used for offloading and reloading of databases;
(d) XML can be used to store and arrange the data, which can customise your
data handling needs;
(e) XML can easily be merged with style sheets to create almost any desired
output; and
(f) Virtually any type of data can be expressed as an XML document.

12.2.1 Document Type Definition

When you create a new XML tag, the web browser has to be able to read the text
and execute the next process. The next XML tag that you create needs to adhere to
one language scheme called DTD (Document Type Definition). DTD lists the set
elements in a document and the content of each element. Therefore, you will have
to create a DTD for ARTICLE, NEWS, NEWSCASTER, etc.

To understand more about DTD, try the Activity 12.2.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  195

ACTIVITY 12.2

(a) Run the Text editor and open a new file.

(b) Save this file (save as) article.dtd.

(c) Type the following code:

<!ELEMENT article (body, b o d y )>

<!ELEMENT head (title,author,date?)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT a u t h o r (#PCDATA)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT body (topic | text | s i d e )*>
<!ELEMENT topic (#PCDATA)>
<!ELEMENT text (#PCDATA)>
<!ELEMENT side (topic | text)*>

(d) Save the file again.

What you have created in Activity 12.2 is the content of a file article that is called
article.dtd. The first line means that the element "article" contains the element
"head" followed by the element "body". The following line means the element
"head" contains the element "title" followed by the element "author" and the
optional element "date". Line 3 shows that the title contains data characters that
cannot be read by XML. These data will be sent to specific applications to be
processed. The next two lines are similar to the explanation of the element "title".
The definition of element body states that "body" can contain more than one
element "top", "text" and "side". The remaining lines are as we have discussed
earlier.

12.2.2 Document Example

The actual XML document that defines a specific DTD is called a document or
instance. In other words, the example document is how you use the new text you
created like an article in the XML document. Complete the Activity 12.3 by using
the article DTD that you have created.

Copyright © Open University Malaysia (OUM)

196  TOPIC 12 XML TECHNOLOGY

ACTIVITY 12.3
(a) Open a new file by using the Notepad editor.

(b) Save this file (save as) newspaper_article.xml in the folder that
contains Article.dtd file.

(c) Type the following code:

<?xml version=”1.0" encoding=”UTF-8"?>

<!DOCTYPE article SYSTEM “article.dtd”>
<article>
<head>
<title>Introduction to XML</title>
<author>Mastura Binti Sahak</ author>
</head>
<body>
<topic>Declining Popularity of HTML</topic>
<text>Place text h e r e </text>
<topic>The Rise of XML Era</topic>
<text>Place more text here</text>
<text>Add more text here</text>
<side>
<topic>Definition of XML</topic>
<text>List definition here</text>
</side>
</body>
</article>

(d) Save the file again.

You will observe that the XML document above is very structured like a HTML
but containing your own tags. The first line sets the XML version. The second line
refers to the article.dtd file. The next line is to input the data according to the DTD
structure. You can actually visualise this document as an information tree. With
this, you will know that the example text „The Rise of the XML Era‰ is not a general
text but a topic in an article.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  197

History

In 1996, the International Organization for Standardization chose Standard

Generalised Markup Language (SGML) to solve issues in document standards.
SGML defines the structure of all the existing documents. This makes it too
complex and difficult to develop software that uses SGML. Imagine you are using
SGML on the Internet, the web browser will contain large amounts of data because
it has to support and create all the various texts that we can think of.

ACTIVITY 12.4
1. List down two advantages of XML that you cannot obtain from
HTML.

2. Try drafting a figure tree for the document in Activity 12.3. Start
by drawing the element „article‰ first followed by the element
„head‰, „body‰ and so on.

12.3 THE CREATION OF XML DOCUMENT

In Subtopic 12.1, you were introduced with DTD and example documents. In this
subtopic, you will know the actual steps in creating an XML document.

12.3.1 Creating DTD

The first step in using XML is to think how you want to structure your data.
Usually, you would start with a tree figure containing a single element called
„article‰ that you have created in Activity 12.2. Then, you will need to think about
how you will select a few elements and group it together. For example, the element
„title‰ and „author‰ is within the element ‰head‰. Continue with this step until
you have achieved the correct structure. Type this structure in a file and save it in
DTD. Sometimes you would not be able to structure this document correctly until
you have used it.

Copyright © Open University Malaysia (OUM)

198  TOPIC 12 XML TECHNOLOGY

12.3.2 Creating Document Example

The second step is to create an example document as you have done in Activity
12.3. Even though XML is a text file, this does not necessarily mean it can be created
and edited using a normal text editor like Notepad. On the other hand, you can use
specific editors for XML like Xmetal, XML Writer, Amaya and others. Other than
these editors, there are many more XML editors that you can download for free on
the Internet. In this module, you will be introduced to the Morphon XML-Editor.

The following table depicts the syntax rules to write different types of markup and
text in an XML document as in Table 12.1.

Table 12.1: XML Syntax Rules

Syntax Description Example

XML Declaration The XML document can <?xml version="1.0"
optionally have an XML encoding="UTF-8"?
declaration
Tags and An XML file is structured by <element>....</element>
Elements several XML-elements, also called
XML-tags. XML elementÊs names
are enclosed by triangular
brackets < >
Attribute An attribute specifies a single <a
property for the element, using a href="http://www.tutorialspoi
name or value pair. An XML nt.com/">tutorialspoint!</a>
element can have one or more
attributes.
XML References References usually allow you to Entity References:
add or include additional text or &name;
markup in an XML document.
Character References:
References always begin with the
symbol "&" which is a reserved &#65;
character and end with the
symbol ";".

The advantage of using this XML editor is it helps to minimise your mistakes in
the tag usage as defined in the DTD file. A good XML editor will request you to
prepare the DTD file before creating the XML file. With this, the editor will force
you to follow the document structure that you have defined in the DTD.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  199

ACTIVITY 12.5
1. Download the installation file of the Morphon XML-Editor from
the OUM website or from the CD-ROM given to you. You can also
download it from http://morphon-xml-editor.software.informer
.com/

2. Run the installation file until it is completed.

3. Run the Morphon XML-Editor until you see the interface as

follows:

Figure 12.1: The main interface of Morphon XML-Editor

4. To open the XML file you need to click on File>Open⁄ "Open

Document" window will appear.

5. Click on the "Browse" button in the "XML document". Please search

for the Newspaper_Article.xml that you have saved in Activity2.
Select the file and click to the "Open" button.

6. You will return to the "Open Document" window. Click on the

"Load" button. The file will open and you will see the Figure
displayed before.

Copyright © Open University Malaysia (OUM)

200  TOPIC 12 XML TECHNOLOGY

Figure 12.2: Newspaper_article.xml interface

7. If there is an error of a structure or Newspaper_Article.xml, a

„Parser Log‰ will appear to explain the error contained in the file.
An error can occur as well if your DTD file is not referenced
correctly.

8. Create a new XML file with the trial-and-error method by clicking

the menu File>New. Try to evaluate, comparing it to Notepad;
does this XML editor make it easier for you to create an XML file?

12.3.3 Document Display

After you have created the example document, obviously you would like to
display it in the correct form, for example, you definitely want to display
Newspaper_Article.xml in a layout article. For that, you will need another file to
explain the layout of the document which is cascade style sheet (CSS). Therefore,
your XML file will refer to the CSS file to create a document layout.

This CSS file is needed in XML to explain the meaning of the data and not how it
should be displayed like bold, italic, font type and so on. Try opening
Newspaper_Article.xml from your browser. You will find that it will be displayed
in a tree figure. To produce a correct display, complete the Activity 12.6. This
activity shows you how to produce the CSS file and how to use it in the XML file.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  201

ACTIVITY 12.6
1. Open a new file from your Notepad editor.

2. Save this file (save as) Article.css in the same folder that contains
Article.dtd and Newspaper_Article.xml.

3. Type the following codes:

title {
font-size: 18pt; font-weight: bold; display:
block; }

author {
font-size: 12pt; font-style: italic; display:
block; }

topic {
font-size: 16pt; display: block; }

text {
font-size: 12pt; display: block; }

side {
background-color: blue; display: block; }

4. Save the file again.

5. Run the Morphon XML-Editor again. Click on menu

File>Open⁄the „Open Document‰ window will appear.

6. Click on the „Browse‰ button in the "XML Document‰. Similar to

the Activity1, open the Newspaper_Article.xml file.

7. Next, in the „CSS Stylesheet‰, click on "File‰ in the combo

"Method" box. Click on the „Browse‰ button and search on
Article.css. Once found, click on the „Load" button.

8. You will see the figure appearing as follows: This display is

different because the data contained in your DTD tag have been
removed from a different style. Your data have been displayed in
a different font and background colour like an article. Another
example is if your DTD is an Invoice, then this is the way to format
the font type, font size, the sequence of the data and so forth so
that it will look like an Invoice copy.

Copyright © Open University Malaysia (OUM)

202  TOPIC 12 XML TECHNOLOGY

Figure 12.3: Interface for Newspaper_Article.xml with CSS

In the Article.css file, you have set the format for each DTS element. For example,
for the author element, you have set the font size to 16 and italicised it. If you did
not set any format to the data, the element will be displayed according to the
default format.

SELF-CHECK 12.1

1. Write down the content of the DTD file and data structure for an
invoice document.

2. What is the use of a CSS file?

12.4 XML DOCUMENT CONVERSION

CSS is not the only way to display an XML document. Another method is to
convert the XML document to another document and display it according to the
new format defined. This can be done by using the extensible style sheet language
(XSL). XSL defines this method to convert a document structure to a different
structure, for example, you can output an XML document to PDF, Excel, Word,
HTML and others. This process can be pictured in Figure 12.4.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  203

Figure 12.4: The figure flow for document conversion

If you would like to convert XML document to PDF, then you need to understand
the structure of your PDF document. Since now you understand, the following
Activity 12.7 will show you the way to convert the XML document to HTML.

ACTIVITY 12.7
1. Open a new file from the Notepad editor.

2. Save this file (save as) Article_convert_html.xsl in the same folder

that contains the file Article.dtd, Newspaper_Article.xml and
Article.css.

3. Type the following code:

<xsl:stylesheet
xmlns:xsl=”http://www.w3.org/1999/
XSL/ Transform” version=”1.0">
<xsl:template match=”article”>
<html>
<head>
<title><xsl:apply-templates select=”head/
title”/></title>
</head>
<body>
<h2><xsl:apply-templates select=”head/title”/
></h2>
<h4>By <xsl:apply-templates select=”head/
author “/></h4>
<xsl:apply-templates select=”body/topic|body/
text|body /side”/>

Copyright © Open University Malaysia (OUM)

204  TOPIC 12 XML TECHNOLOGY

</body>
</html>
</xsl:template>

<xsl:template match=”head/title”>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match=”head/author”>
<xsl:apply-templates/>
</xsl:template>

<xsl:template match=”body/topic”>
<h3><xsl:apply-templates/></h3>
</xsl:template>

<xsl:template match=”body/text”>
<p><xsl:apply-templates/></p>
</xsl:template>

<xsl:template match=”body/side”>
<table bgcolor=”yellow”><td>
<xsl:apply-templates/>
</td></table>
</xsl:template>

<xsl:template match=”body/side/topic”>
<h3><xsl:apply-templates/></h3>
</xsl:template>

<xsl:template match=”body/side/text”>
<p><xsl:apply-templates/></p>
</xsl:template>

<xsl:template match=”*|@*”>
<xsl:copy>
<xsl:apply-templates select=”@*”/>
<xsl:apply-templates select=”node()”/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>

4. Save the file again.

5. Run the Morphon XML-Editor and open the
Newspaper_Article.xml

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  205

6. Save the file again.

7. Run the Morphon XML-Editor and open the Newspaper

_Article.xml

6. Click on the menu File>Process XSL⁄ „Preview XSL Output‰

„window will appear

7. Click the „Browse‰ button and find Article_Convert_html.xsl.

8. Click the "Preview" button to start the conversion process. Click

the processor tab if you would like to see whether the conversion
is successful or not. If it is not successful, observe the line number
that contains the arrow and fix it. If it is successful, you will see
the display as shown in the following figure:.

Figure 12.5: Results of the conversion of XML to HTML

Copyright © Open University Malaysia (OUM)

206  TOPIC 12 XML TECHNOLOGY

The display above is HTML produced from Newspaper_Article.xml. Next, you can
save the display above into a HTML file by clicking the „save as‰ button. This is an
example of XML conversion to another document that has a different format. Other
than the Morphon XML-Editor, there are other editors that enable you to use XSL,
for example POA, HTML-Kit, XSL TESTER, XSLT-process and others.

12.5 DTD STANDARD

XML is used and applied in various industries and the usage is widely spread. The
main usage is to share information from different sources. What we need is an
agency or body that is recognised to define a suitable XML text for their field (DTD)
and make it a standard for communicating in that specific field.

There are many applications and industries that are developing a standard DTD.
These are a few examples of available standards and the details are as follows:

(a) Electronic business XML (ebXML) is a set of specifications that enables

business entities to perform their business activities and other deals via the
Internet. This enables the users to communicate without the geographical
barriers between them. By using ebXML, companies have standard
procedures to exchange messages, business relationships, sharing data by
using the same terms and registering business processes.

(b) WeatherML is a global standard protocol for weather derivatives which is

processed electronically. It is built to enable the weather business to work
electronically in an effective way. The WeatherML helps the system to
communicate well, and lessens the operational costs and the operational
risks.

(c) Directory Service Markup Language (DRSS) is a standard to prepare for

directory enquiries, updating and operational results. Before this, the use of
this directory policy and profile information was achieved for each directory
that needs to be retrieved. This method will minimise the company mergers.
It is also expensive and takes time, especially in the building of a system
development such as supply chain and marketing distribution. With the
XML standard, the XML-based application, you will see the directory
information set using XML.

XML-based standards will increase as organisations are more confident with its
capabilities. These standards will make it easier for sharing of information between
two organisations, ignoring the internal conditions of the organisations mentioned.

Copyright © Open University Malaysia (OUM)

 TOPIC 12 XML TECHNOLOGY  207

ACTIVITY 12.8

Browse the W3C website at http://www.w3c.org or Google

http://www.google.com. Obtain further information on some of the
DTD standards such as SwiftML, RecipeML, PROSE-XML, MusicML
and MDML. Find out their purposes and how far they have been used
in the specific industries.

• In February 1998, W3C introduced a new document standard called Extensible

Markup Language (XML). It is able to produce the same documents that are
produced by HTML.

• In XML there are no specific texts like HTML. You can create your own tag and
define the structure of the document.

• XML defines the standard method for document management and a complex
document exchange. XML is a language to create a structured document. For
example, by using XML you can define all the HTML tags according to your
own definition.

• The XML tag that you create needs to adhere to one language scheme called
DTD (Document Type Definition). DTD lists the set elements in a document
and the content of each element.

• The actual XML document that defines a specific DTD is called a document or
instance.

• The first step in using XML is to think how you want to structure your data.
The second step is to create an example document. Next is to display the
document in correct form, for example, a newspaper article would be in a
layout article. For that, you will need another file to explain the layout of the
document which is cascade style sheet (CSS). Therefore, your XML file will
refer to the CSS file to create a document layout.

• CSS is not the only way to display an XML document. Another method is to
convert the XML document to another document and display it according to
the new format defined. It can be done by using the extensible style sheet
language (XSL).

Copyright © Open University Malaysia (OUM)

208  TOPIC 12 XML TECHNOLOGY

Cascade Style Sheet (CSS) Extensible Mark-up Language (XML)

Document Type Definition (DTD) Standard Generalised Mark-up
Language (SGML)

Copyright © Open University Malaysia (OUM)

 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

Copyright © Open University Malaysia (OUM)

Copyright © Open University Malaysia (OUM)