lOMoARcPSD|7885538

BIT 1202 Introduction to Web Design and Development 5mm

Introduction to web design (Mount Kenya University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

BIT 1202 Introduction to Web Design and

Development
Lecture Notes
Lindah Sawe
Department of Information Technology
Mount Kenya University
Sep———Dec 2024

Contents
1 Course outline 3
1.1 Pre-requisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Course purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Expected learning outcomes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Course description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.5 Mode of delivery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.6 Instructional materials/equipment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.7 Course assessment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.8 Course textbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.9 Reference textbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.10 Course journals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.11 Reference journals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Work Breakdown (per semester week) 5

2.1 Week 1: Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Week 2: Web project management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Week 3: Website interface design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Week 4: HTML page layout design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.5 Week 5 - 9: Page Layout: Introduction to CSS (Cascading Style Sheets) . . . . . . . . . . . . . . . . 5
2.6 Week 10 - 14: Client side scripting: Introduction to JavaScript . . . . . . . . . . . . . . . . . . . . . 5
2.7 Week 15 and 16: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 Lecture Notes 7
3.1 Week 1: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.1 Services provided by the Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.2 Requirements for connecting to the internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.3 Important components of the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.4 Common Internet Protocols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.5 Internet Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Week 2: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.1 Introduction to Project management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.2 Online project management systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.3 Examples of web projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.4 Choosing a web development firm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.5 Budget planning for web development project . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.6 Cost estimation for web projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2.7 How to measure the size of the website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Week 3: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3.1 Introduction to Web Interface Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3.2 Principles of User Interface Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3.3 Web usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3.3.4 Key Elements of a Good Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.3.5 Website organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3.6 Website wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.4 Week 4: HTML Page layout design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.4.1 HTML Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.4.2 HTML Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.4.3 HTML iFrames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.5 Week 5: Introduction to Cascading Style Sheets (CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.5.1 Introduction to CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.5.2 CSS Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.5.3 Advantages of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.5.4 CSS Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.5.5 CSS Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.5.6 CSS id and class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.5.7 Three Ways to insert CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

4 Introduction to JavaScript 25
4.1 JavaScript uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.2 Writing JavaScript to The HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.3 Changing HTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.4 JavaScript Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.4.1 Single line comments start with //. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.4.2 JavaScript Multi-Line Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.4.3 Using comments to prevent execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.4.4 Some browsers do not support JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.5 Where to place JavaScript in HTML document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.6 JavaScript statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.6.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.6.2 Mathematical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.6.3 Assignment operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.6.4 Concatenation operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.6.5 Adding strings and numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.6.6 Comparison operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.6.7 Logical operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.6.8 Ternary operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.6.9 Conditional statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.6.10 Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.6.11 Break and continue statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.6.12 Popup boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.6.13 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.6.14 Return statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

2
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

1 Course outline
1.1 Pre-requisites
1. BIT 1106 Introduction to Computer Applications and Packages.
2. BIT 1101 Computer Architecture.

1.2 Course purpose

To enable the learner to design and develop dynamic websites.

1.3 Expected learning outcomes

By the end of the course unit, the learner will be able to;
1. Describe the methodology for developing an organisational website.
2. Define advanced structures using a mark-up language.
3. Enumerate the basic principles of web design.

1.4 Course description

Overview of web technology, web project budgeting, estimation and management; Scripting: CGI, JavaScript, Java,
Java applets; Use of scripting languages for animation images and sound; Advanced features of internet-based pro-
gramming language; Managing events and creating user interfaces and their application in internet; Creating dynamic
client-server systems using tools such as JSP, Java servlets, PHP; Management of resources and users - performance
monitoring.

1.5 Mode of delivery

Lecture, Tutorials and Laboratory exercises.

1.6 Instructional materials/equipment

Audio-visual aids in lecture rooms and computers in a laboratory.

1.7 Course assessment

30% Continuous assessment (Tests 10%, Assignment 10%, Practical 10%).
70% End of semester examination.

1.8 Course textbooks

1. Jennifer Niederst Robbins (2018). Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript and Web
Graphics, 5th Edition, O’Reilly Media, ISBN: 978-1-491-96020-2.
2. Philip Ackermann (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming,
Rheinwerk Computing; First Edition, ISBN-10: 1493222864, ISBN-13: 978-1493222865.
3. David DuRocher (2021). HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong
Coding Foundation, Building Responsive Websites, and Mastering, ClydeBank Media LLC, ISBN-10: 1636100007,
ISBN-13: 978-1636100005.

1.9 Reference textbooks

1. Jürgen Wolf (2023). HTML and CSS: The Comprehensive Guide, Rheinwerk Computing, First Edition, ISBN-10:
1493224220, ISBN-13: 978-1493224227.
2. Laurence Lars Svekis, Maaike Van Putten and Rob Percival (2021). JavaScript from Beginner to Professional:
Learn JavaScript quickly by building fun, interactive, dynamic web apps, games, and pages, Packt Publishing,
ISBN-10: 1800562527, ISBN-13: 978-1800562523.

1.10 Course journals

1. Annals of software Engineering, ISSN 1022-7091.
2. Journal of computer science and Technology, ISSN 1000-9000.
3. Procedia Computer Science, Online ISSN: 1877-0509.

1.11 Reference journals

1. Journal of Science and Technology, ISSN 1860-4749.
2. Central European Journal of Computer Science, ISSN 1896-1533.

3
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3. Information and Software Technology, Online ISSN: 1873-6025, Print ISSN: 0950-5849.

4
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

2 Work Breakdown (per semester week)

2.1 Week 1: Introduction
• Services provided by the internet.
• Important components of the web.
• Common internet protocols.
• Internet architecture.

2.2 Week 2: Web project management

• Project management.
• Online project management systems.
• Choosing a web development firm.
• Budget planning for the web development project.
• Cost estimation for web projects.
• How to measure the size of the website

2.3 Week 3: Website interface design

• Website design basics.
• Principles of user interface design.
• Key elements of a good website.
• Web site organisation.
• Website wireframe.

2.4 Week 4: HTML page layout design

• HTML forms.
• HTML iFrames.
• HTML layouts.

2.5 Week 5 - 9: Page Layout: Introduction to CSS (Cascading Style

Sheets)
• Introduction to CSS.
• CSS syntax.
• CSS ID and class.
• CSS background styling.
• CSS text styling.
• CSS font styling.
• CSS link styling.
• CSS list styling.
• CSS table styling.
• CSS box model.
• CSS border.
• CSS outline.
• CSS margin.
• CSS padding.

2.6 Week 10 - 14: Client side scripting: Introduction to JavaScript

• Introduction to JavaScript.
• JavaScript statements.
• JavaScript comments.
• JavaScript variables.
• JavaScript operators.
• JavaScript conditional statements.
• JavaScript functions.
• JavaScript loops.

5
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

• JavaScript events.
• JavaScript Try...Catch.
• JavaScript Throw.
• JavaScript validation.

2.7 Week 15 and 16:

End of semester and final examinations

6
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3 Lecture Notes
3.1 Week 1:
3.1.1 Services provided by the Internet
The Internet provides different services that include;
1. Communication services
• Electronic mail - Also known as e-mail, is one of the most popular Internet services. E-mail allows you to
send messages to one person, or to send a message simultaneously to a group of people. One of the advantages
of e-mail over other forms of communication is the convenience to the recipient. Messages wait in your mailbox
until you open them. Sending and receiving mail messages electronically requires an e-mail account. The e-mail
account allows you to check your e-mail messages from any location that has an Internet connection.
• Logging to remote network computers - To access remote network computers, you need Telnet. Telnet
allows you to execute commands on a remote host (another computer) as if you were logged in locally. You
need to know the name of the machine to which you want to connect and to have valid access credentials i.e.,
username and password.
• Newsgroups - Newsgroups, also called bulletin boards, are similar to e-mail conferencing system, but are less
intrusive to the subscriber since messages are posted to Usenet sites around the world instead of appearing
in each subscriber’s mailbox. Newsgroups refers to the huge collection of messages which are posted to
tens of thousands of newsgroups worldwide. Millions of people around the world regularly read newsgroup
messages, following their favourite topics of interest. Newsgroups can provide a unique information resource not
readily accessible from any other source. If you are looking for personal anecdotes about products, especially
computer-related hardware and software products, how-to information, practical advice, or the latest news
stories, newsgroup archives may be a valuable resource.
• Internet chat - Communication on the Internet goes even further than personal e-mail, newsgroups and
mailing lists, to encompass real-time conversations (synchronous communication) among two or more people.
Chat is available on the Internet through Internet Relay Chat or IRC. It consists of thousands of chat channels,
each covering a different topic and with participants from all over the world.
• Mailing lists - Used to organize a group of internet users to share common information through e-mail.
• Internet telephony (VoIP) - Allows the internet users to talk across the internet to any PC equipped to
receive the call.
2. Information retrieval services.
• File transfer - This service allows gaining limited access to another machine on the Internet, and obtaining
files from it. The service is supported by the File Transfer Protocol (FTP). You need full Internet connectivity,
to do FTP interactively. File transfer has many advantages that include allowing internet users to get new
software or updated versions of old programs, useful data and documents for research or class assignments.
When you start an FTP connection, you will be asked for a username and a password.
• Search engine services.
3. Web services. Web services allow exchange of information between applications on the web. Using web services,
applications can easily interact with each other.
4. World Wide Web (WWW) services. The internet supports the World Wide Web that offers access to doc-
uments spread over several servers on the internet. These documents may contain texts, graphics, audio, video,
hyperlinks. The hyperlinks allow the users to navigate between the documents.
5. Video/web conferencing services. Web conferencing can be used by businesses for employee training, meetings
and general communication. Educational institutions are using web conferencing as a way to enhance online classes
or distance education classes. Web conferencing is a tool which provides a way for “students" to share information,
ask questions, get answers, discuss problems and work collaboratively online.
6. E-commerce services Electronic commerce, also known as e-commerce or e-Commerce, is a business concept that
allows businesses and individuals to buy and sell goods through the internet. Example: Amazon, Flipkart, etc.
websites/apps.
3.1.2 Requirements for connecting to the internet
Internet service provider - an internet service provider provides you with a connection to the internet and the software
you will need to navigate. An Internet service provider (ISP) is a company that provides access to the Internet.
Access ISPs directly connect customers to the Internet using copper wires, wireless or fiber-optic connections.
Telecommunication line (Mobile or Wired) - a telephone line is required to connect you to the internet service
provider.
Modem - a modem converts a digital signal received from a computer into an analogue signal that can be sent along
ordinary telephone lines, and back to digital at the other end.
Web browser - a web browser is software used to view and download Web pages and various types of files such as text,

7
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

graphics and video. Examples are Microsoft Internet Explorer, Google Chrome and Mozilla Firefox.
3.1.3 Important components of the Web
Web server. Web server can refer to either the hardware (the computer) or the software (the computer application)
that helps to deliver content that can be accessed through the Internet. The most common use of Web servers is
to host web sites but there are other uses like data storage or for running enterprise applications. A web server
is a computer programs that delivers (serves) content, such as web pages, using the Hypertext Transfer Protocol
(HTTP), over the World Wide Web.
Web search engine is designed to search for information on the World Wide Web and FTP servers. The search results
are generally presented in a list of results and are often called hits. The information may consist of web pages,
images, information and other types of files. Some search engines also mine data available in databases or open
directories. Unlike web directories, which are maintained by human editors, search engines operate algorithmically
or are a mixture of algorithmic and human input. Examples of search engines are yahoo, google, msn etc.
Web crawler is an automated web browser which follows every link it sees. The contents of each page are then analyzed
to determine how it should be indexed (for example, words are extracted from the titles, headings, or special fields
called meta tags). Data about web pages are stored in an index database for use in later queries. Some search
engines, store all or part of the source page (referred to as a cache) as well as information about the web pages,
whereas others, store every word of every page they find. When a user enters a query into a search engine the
engine examines its index and provides a listing of best-matching web pages according to its criteria, usually with
a summary containing the document’s title and sometimes parts of the text.
Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource connected to
the Internet or a private network. It associates information with domain names assigned to each of the participants.
Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associ-
ated with networking equipment to locate and address these devices worldwide. The Domain Name System makes
it possible to assign domain names to groups of Internet users in a meaningful way, independent of each user’s
physical location. Internet domain names are easier to remember than IP addresses such as 208.77.188.166 (IPv4)
or 2001:db8::1f70:6e8 (IPv6). The Domain Name System distributes the responsibility of assigning domain names
and mapping those names to IP addresses by designating authoritative name servers for each domain. Authoritative
name servers are assigned to be responsible for their particular domains, and in turn, can assign other authoritative
name servers for their sub-domains. The DNS database of Domain names and the corresponding IP addresses can
not be held on one machine. As a distributed resource, it is maintained by many organisations, each manages a
little bit of it. DNS defines a tree structure, and each node on the tree is owned by one of the naming authorities.
The owner of a node can create any number of child nodes, but each must have a unique name.
URLs . Addresses for websites are called URLs (Uniform Resource Locators). Most of them begin with HTTP (Hyper-
Text Transfer Protocol), followed by a colon and two slashes. For example, the URL for the MKU is http://www.
mku.ac.ke/. Some of the URL addresses include a directory path and a file name. Consequently, the addresses can
become quite long. For example, the URL of a web page may be: http://www.mku.ac.ke/uploads/default.htm.
In this example, “default.htm" is the name of the file which is in a directory named “uploads" on the server hosting
the MKU website.
Top-level domain. Each part of a domain name contains certain information. The first field is the hostname, identi-
fying a single computer or organization. The last field is the top-level domain, describing the type of organization
and occasionally the country of origin associated with the address. Top-level domain names include:

.com Commercial
.edu Educational
.gov US Government
.int Organization
.mil US Military
.net Networking Providers
.org Non-profit organization.

Domain name country codes include, but are not limited to:

.au Australia
.de Germany
.fr France
.nl Netherlands
.uk United Kingdom
.us United States
.ke Kenya
Routers. All of these networks rely on Network Access Points (NAPs), backbones and routers to talk to each other.
What is incredible about this process is that a message can leave one computer and travel halfway across the
world through several different networks and arrive at another computer in a fraction of a second. The routers

8
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

determine where to send information from one computer to another. Routers are specialized computers that send
your messages and those of every other Internet user speeding to their destinations along thousands of pathways.
A router has two separate, but related, jobs:
• It ensures that information doesn’t go where it’s not needed. This is crucial for keeping large volumes of data
from clogging the connections of “innocent bystanders."
• It makes sure that information does make it to the intended destination.
In performing these two jobs, a router is extremely useful in dealing with two separate computer networks. It
joins the two networks, passing information from one to the other. It also protects the networks from one another,
preventing the traffic on one from unnecessarily spilling over to the other. Regardless of how many networks are
attached, the basic operation and function of the router remain the same. Since the Internet is one huge network
made up of tens of thousands of smaller networks, its use of routers is an absolute necessity.
3.1.4 Common Internet Protocols
The Internet protocols are derived from the TCP/IP (Transmission Control Protocol/ Internet Protocol) suite of pro-
tocols which is the set of protocols used to communicate across the Internet. It is also widely used on many organizational
networks due to its flexibility and wide array of functionality.
Common Internet Protocols include;
ARP: Address Resolution Protocol enables the packaging of IP data into ethernet packages. It is the system and
messaging protocol that is used to find the ethernet (hardware) address from a specific IP number. Without this
protocol, the ethernet package could not be generated from the IP package, because the ethernet address could not
be determined.
RARP: Reverse address resolution protocol is used to allow a computer without a local permanent data storage media
to determine its IP address from its ethernet address.
IP: IP provides the mechanism to use software to address and manage data packets being sent to computers.
TCP: A reliable connection oriented protocol used to control the management of application level services between
computers. It is used for transport by some applications.
UDP: An unreliable connection less protocol used to control the management of application level services between
computers. It is used for transport by some applications which must provide their own reliability.
HTTP - Hypertext Transfer Protocol is used to transport HTML pages from web servers to web browsers. The protocol
is used to communicate between web servers and web browser software clients.
BOOTP - the Bootstrap Protocol, or BOOTP, is a network protocol used by a network client to obtain an IP address
from a configuration server. BOOTP is usually used during the bootstrap process when a computer is starting up.
A BOOTP configuration server assigns an IP address to each client from a pool of addresses.
DHCP - Dynamic Host Configuration Protocol is a method of assigning and controlling the IP addresses of computers
on a given network. It is a server based service that automatically assigns IP numbers when a computer boots. This
way the IP address of a computer does not need to be assigned manually. This makes changing networks easier to
manage. DHCP can perform all the functions of BOOTP.
RIP - Routing Information Protocol is used to dynamically update router tables on WANs or the internet. A distance-
vector algorithm is used to calculate the best route for a packet.
OSPF - Open Shortest Path First dynamic routing protocol. A link state protocol rather than a distance vector protocol.
It tests the status of its link to each of its neighbours and sends the acquired information to them.
POP3 - Post Office Protocol version 3 is used by clients to access an internet mail server to get mail. It is not a transport
layer protocol.
IMAP4 - Internet Mail Access Protocol version 4 is the replacement for POP3.
Telnet is used to remotely open a session on another computer. It relies on TCP for transport.
3.1.5 Internet Architecture
Internet is by definition a meta-network, a constantly changing collection of thousands of individual communicating
networks. The Internet’s architecture is described in its name, a short form of the compound word “internetworking".
This architecture is based on the standard TCP/IP protocol, designed to connect any two networks which may be
very different in internal hardware, software, and technical design. Once two networks are interconnected, end-to-end
communication is enabled with TCP/IP so that any node on the Internet has the ability to communicate with any other
no matter where they are.
The companies running the Internet backbone operate very high bandwidth networks relied on by governments,
corporations, large organizations, and other Internet service providers. Their technical infrastructure often includes global
connections through underwater cables and satellite links to enable communication between countries and continents.
Each communication packet goes up the hierarchy of Internet networks as far as necessary to get to its destination
network where local routing takes over to deliver it to the addressee. In the same way, each level in the hierarchy pays the
next level for the bandwidth they use, and then the large backbone companies settle up with each other. Bandwidth is
priced by large Internet service providers by several methods, such as at a fixed rate for constant availability of a certain
number of megabits per second, or by a variety of use methods that amount to a cost per gigabyte. Due to economies of

9
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

scale and efficiencies in management, bandwidth cost drops dramatically at the higher levels of the architecture.
The internet is based on client/server architecture where the server and the client reside in different machines. The
client-server model (see Figure 1) is a distributed application structure that partitions tasks or workloads between
the providers of a resource or service, called servers, and service requesters, called clients. Often clients and servers
communicate over a computer network on separate hardware, but both client and server may reside in the same system.
A server machine is a host that is running one or more server programs which share their resources with clients. A
client does not share any of its resources but requests a server’s content or service function. Clients therefore initiate
communication sessions with servers which await incoming requests.

Figure 1: Client/server architecture.

Advantages of client/server architecture:

• In most cases, client/server architecture enables the roles and responsibilities of a computing system to be distributed
among several independent computers that are known to each other only through a network. This creates an
additional advantage to this architecture: greater ease of maintenance. For example, it is possible to replace,
repair, upgrade, or even relocate a server while its clients remain both unaware and unaffected by that change.
• All data is stored on the servers, which generally have far greater security controls than most clients. Servers can
better control access and resources, to guarantee that only those clients with the appropriate permissions may
access and change data.
• Since data storage is centralized, updates to that data are far easier to administer in comparison to a P2P archi-
tecture. In the latter, data updates may need to be distributed and applied to each peer in the network, which is
time-consuming as there can be thousands or even millions of peers.
• Many mature client/server technologies are already available which were designed to ensure security, friendliness of
the user interface, and ease of use.
• It functions with multiple different clients of different capabilities.

Disadvantages of client/server architecture:

• As the number of simultaneous client requests to a given server increases, the server can become overloaded.
Contrast that to a P2P network, where its aggregated bandwidth actually increases as nodes are added, since the
P2P network’s overall bandwidth can be roughly computed as the sum of the bandwidths of every node in that
network.
• The client/server paradigm lacks the robustness of a good P2P network. Under client/server, should a critical
server fail, clients’ requests cannot be fulfilled. In P2P networks, resources are usually distributed among many
nodes. Even if one or more nodes depart and abandon a downloading file, for example, the remaining nodes should
still have the data needed to complete the download.
CONTINUE FROM HERE, 10H00 class, presentations from the first 2 groups on common internet protocols, CRE-
ATING A LIBRARY CATALOGUE OF 10-15 BOOKS, SHOW COMMENTS AND SPLITTING TABLE CELLS

10
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3.2 Week 2:
3.2.1 Introduction to Project management
Definition 3.1. Project management is the discipline of planning, organizing, securing and managing resources to
bring about the successful completion of specific project goals and objectives.

A project is a temporary endeavor, having a defined beginning and end (usually constrained by date, funding and
deliverables), undertaken to meet unique goals and objectives, usually to bring about beneficial change or additional
value. The temporary nature of projects stands in contrast to business (or operations), which are repetitive, permanent
or semi-permanent functional work to produce products or services.
The primary challenge of project management is to achieve all of the project goals and objectives while honoring the
preconceived project constraints. Typical constraints are scope, time, and budget. The secondary, and more ambitious,
challenge is to optimize the allocation and integration of inputs necessary to meet pre-defined objectives.
The following are the major project management processes/steps:-
1. Initiation. The initiation process determines the nature and scope of the project. If this stage is not performed
well, it is unlikely that the project will be successful in meeting the business needs. The initiation stage should
include a plan that encompasses the following areas:-
• Analyzing the business needs/requirements in measurable goals.
• Reviewing of the current operations.
• Financial analysis of the costs and benefits including a budget.
• Stakeholder analysis, including users, and support personnel for the project.
• Project charter including costs, tasks, deliverables, and schedule.
2. Planning and design. After the initiation stage, the project is planned to an appropriate level of detail. The main
purpose is to plan time, cost and resources adequately to estimate the work needed and to effectively manage risk
during project execution. Project planning generally consists of:-
• Determining how to plan.
• Developing the scope statement.
• Selecting the planning team.
• Identifying deliverables and creating the work breakdown structure.
• Identifying the activities needed to complete those deliverables and networking the activities in their logical
sequence.
• Estimating the resource requirements for the activities.
• Estimating time and cost for activities.
• Developing the schedule.
• Developing the budget.
• Risk planning.
• Gaining formal approval to begin work.
3. Execution. Execution consists of the processes used to complete the work defined in the project management plan
to accomplish the project’s requirements. The execution process involves coordinating people and resources, as well
as integrating and performing the activities of the project per the project management plan. The deliverables are
produced as outputs from the processes performed as defined in the project management plan.
4. Monitoring and controlling. Monitoring and controlling consists of those processes performed to observe project
execution so that potential problems can be identified on time and corrective action can be taken, when necessary,
to control the execution of the project. The key benefit is that project performance is observed and measured
regularly to identify variances from the project management plan. Monitoring and Controlling include:-
• Measuring the ongoing project activities (‘where we are’).
• Monitoring the project variables (cost, effort, scope, etc.) against the project management plan and the project
performance baseline (where we should be).
• Identify corrective actions to address issues and risks properly (How can we get on track again).
5. Closing. Closing includes the formal acceptance of the project and the ending. Administrative activities include
the archiving of the files and documenting lessons learned. This phase consists of:-
• Project close: Finalize all activities across all of the process groups to formally close the project or a project
phase.
• Contract closure: Complete and settle each contract (including the resolution of any open items) and close
each contract applicable to the project or project phase.
3.2.2 Online project management systems
Online project management systems allows for project management tasks to be done over the Internet. Online project
management systems allow any authorized person connected to the network to check the status of the project. The

11
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

system centralizes all the information in a location that can be accessed easily by others.

Basic Online Project Management Functions The purpose of an online project management system is to orga-
nize and simplify projects from start to finish. The following are the basic functions that almost every online project
management system has:
• Organization:- keep track of files and documents. Most allow users to customize the filing system. The goal of the
system is to make it easy to find any single piece of information in a project, no matter how complex that project
may be.
• Document management:- tracks document modifications, including the identity of the person who changed the file.
Many systems archive older copies of files rather than deleting them.
• Scheduling:- Many systems include streamlined features that let managers keep track of who’s doing what and the
project’s progress as a whole.
• Time tracking:- keeps track of how much time people spend working on each part of a project. Many companies bill
customers based on how much time was spent on a particular project. Others might pay employees at an hourly
rate. Time tracking applications let the company keep tabs on how many hours each person in the project has
worked on various phases of the project.
• Documentation:- this involves keeping a detailed history of projects, which can help protect a company from
liability. For example, let’s say a construction company gets a request to build a house. The client makes a change
to the house’s design early in the project. The construction company makes a note of the client’s requests and
documents it using an online project management system. Later, when construction is complete, the client expresses
dissatisfaction with the way the house looks due to the changes in design. With the documentation feature, the
construction company has a record that can help it prove that the changes were at the client’s request.
• Issue tracking:- lets users create a file to report any problems or issues that crop up during a project. These
applications have a feature that e-mails the appropriate parties so that the issue can be resolved as quickly as
possible. Once someone fixes the problem, he or she can note it in the issue report. The system then files the report
as part of the documentation function.
• Communication:- might include a message board, instant messaging program, chat room or some other commu-
nication forum. Including a message system within the overall system makes it easier for people involved in the
project to pass information along.
3.2.3 Examples of web projects
• New website design and development.
• Website redesign: A high-level overhaul that involves significantly changing elements like the code, content, struc-
ture, and visuals of a website
• Adding functionalities to an existing website e.g., adding an interactive calendar, adding social networking, etc.
• Search engine optimization (SEO): the process of maximizing the number of visitors to a particular website by
ensuring that the site appears high on the list of results returned by a search engine.
• Website or Internet marketing: online advertising of goods and services on a website or the Internet. Also known
as online marketing.
• Email campaigns: An email campaign is a coordinated set of individual email messages that are deployed across a
specific period of time with one specific purpose.
• Developing a mobile version of a website.
3.2.4 Choosing a web development firm
In order to find a Web design firm best suited for web project, an organization should be aware of the following:
• The intended goal of the project.
• The intended audience for the Web site.
• The anticipated budget for the Web site development.
• The individuals/departments within the organization responsible for the project.
Five steps to follow when choosing a Web design and development company.
• Self analysis - define the web development and marketing requirements of the organization.
• Generate a list - gather a list of potential Web design firms from referrals, analysis of other sites you admire and
from lists provided by consultants.
• Create a shortlist - From the list of potential web design firms, shortlist of 3-5 firms that are best suited for the
web project. To determine which web design firms are most appropriate for the project, do the following:
– Examine their portfolio.
– Examine their technical competence and experience.
– Analyze the process.
– Determine what other products/services the web design company can offer.
• Get proposals - Once you have selected a short-list of top web development firms, request that they send a proposal.

12
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

Ask that their proposal include an overview of your web project requirements and their proposed solution. This
will help to determine which web design firm understands your requirements best. Also ask that each web design
firm includes a description of their development process and a price breakdown for the various aspects of the web
site project.
• Evaluate and select a firm - start off by examining each proposal individually. After your organization has reviewed
all proposals, compare them with each other. Once you have made a decision, contact the top web development
firm and let them know the good news.
3.2.5 Budget planning for web development project
First, make sure that the scope is defined for the web project.
Next, state the goals for the web project and the planned strategies and tactics for meeting those goals. This process
will allows identifying quantifiable success metrics and provide rationale for funding.
Next, assign costs to each line item. Make sure you take into consideration the costs for hardware, software, design,
implementation and maintenance. Other cost considerations are training, communication and change management.
Website goals should include specific projects (i.e. a site re-design) as well as day-to-day operations. Your budget
should account for all the things that are required for maintaining a quality Web presence. This should include daily up-
keep of design and editorial content, ongoing usability and analytics and maintenance of website tools and infrastructure.
Depending on how your organization budgets, you may have a stand-alone website budget or you may need to
collaborate with other departments to make sure they’re accounting for the Web project in their budgets. A detailed
website plan for upcoming projects and day-to-day operations will help everyone understand priorities and costs for the
Web presence. Share the plan with your Web stakeholders to ensure buy-in and support for the budget.

The following are the main reasons why web projects get over budget:-
• Frequently changing requirements - rigid requirements make it difficult to react to the changes that inevitably occur
as knowledge and environments evolve. Requirements that have been omitted are generally picked up late in the
process, by which time they are awkward and costly to implement.
• Too many stakeholders having a say in the web development process.
• Inadequate budget allocation.
• Inadequate time allocation.

How to ensure that web design and development projects are delivered on budget:-
• Take a collaborative approach to Web project development - The approach would involve regular meetings with all
stakeholders, where working software is tested and enough quality assurance is carried out.
• By using a combination of web development, project management and software engineering tools.
• Making sure that requirements were collected exhaustively.
• Allocating enough time and budget to the web project.
3.2.6 Cost estimation for web projects
Software cost models and effort estimates help project managers allocate resources, control costs and schedule, leading
to projects that are completed on time and within budget. s Web project cost estimation is the process through which
the web developer decides how much the development process of the website will cost the organization.
For web development, cost is difficult to estimate because:
• There is no standard to sizing web applications. Each can be created using diverse technologies such as HTML,
JavaScript, XML, XSL, and so on.
• Web project’s primary goal is to bring quality applications to the market as quickly as possible.
• Inexperienced developers.
• Processes employed are in general heuristic, although some organizations are starting to look into the use of agile
methods.
• Web projects have short schedules and a fluid scope.
• Typical project size is small, using 3 to 7 team members

Several techniques for cost and effort estimation have been proposed that fall into two general categories:-
Expert judgement (EJ) - EJ has been widely used. However, the means of deriving an estimate are not explicit and
therefore not repeatable. Expert opinion, although always difficult to quantify, can be an effective estimating tool
on its own or as an adjusting factor for algorithmic models.
Algorithmic models (AM) - attempts to represent the relationship between effort and one or more project charac-
teristics. The main cost driver used in such a model is usually the notion of software size (e.g., the number of lines
of source code, number of pages, and number of links). Algorithmic models need calibration or adjustment to local
circumstances.

13
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3.2.7 How to measure the size of the website

Several size measures for cost estimation and risk assessment have been recommended for web application development
projects. The measures have been organised into the following categories: -
• Web-site design. This entails creation and organisation of web pages.
Length measures provided are web pages (number of Web pages), home pages (number of major entry points to
the Web application/site), leaf nodes (number of leaf web pages, i.e., pages that have no siblings), hidden nodes
(number of pages excluded from the main navigation buttons), depth (number of nodes on the second level that
have siblings).
Complexity measures are interconnectivity (number of URLs that link to other pages in the same applica-
tion/site), external hyperlinks (number of unique URLs in the web application/site).
Functionality measures are actions (number of independent actions provided from a web page by use of JavaScript
or other web programming languages).
• Technical authoring. Collection of text and related hyperlinks, and text structuring sections etc.
Length measures proposed are paragraph count (number of paragraphs in a web page, web application, or external
document, i.e., PDF document), word count (number of words in a Web page or document.
Complexity measures are navigational structures (number of different structures in a Web page or document).
• Data entry. Creation and maintenance of databases used by a web application.
Length measures proposed are key record types (number of different tables accessed by the application/site),
key entries (number of keys in a database table), entry fields (number of table attributes manipulated by the
application/site), secure fields (number of fields that contain safety-critical or financially secure information).
• Graphics design. Creation of 2D images using graphics design tools.
Length measures are delivered images (number of unique images used by the Web application/site), image size
(width × height), image composites (number of layers from which the final image was created), language versions
(the number of versions of an image that must be produced to accommodate different languages or different cultural
priorities).
• VR(Virtual Reality) design. Creation of objects and environments with which the user can interact.
Length measures are 3d objects (number of files including one or more 3D objects used in the Web application/site)
and virtual worlds (number of files including one or more virtual worlds used in the Web application/site).
• Sound engineering. Adaptation of existing audio tracks for use in web applications.
Length measures are audio files (number of unique audio files used in the Web application/site), duration (summed
duration of all sequences within an audio file), audio sequences (number of sequences within the audio file), tracks
(number of layers within an audio sequence), audio edits (number of edits applied to groups of frames within a
sequence, e.g., fades) and imported images (number of separate graphics images imported into an interactive audio
file).
• Animation and video editing. Building movies from existing images, video, text and sound.
Length measures are movies (number of movie files used in a Web application, web page, or referenced by other
movies at this Web application or Web page), duration of a movie, and story composites (for each scene, count the
number of layers from which the final image was created), frame rate (number of frames per second as defined in
the delivered file).
• Programming. Creation of server-side software and client-side programs that replace browsers. Classifies measures
into three categories - Specification, Design and Program.
Specification length measures proposed are user commands (number of different menu commands, buttons, etc
that the user can access from the application’s interface), database files (number of entities and relationships in the
database schema) and classes definitions (object-oriented classes resulting from the analysis of use cases).
Design length measures are any design object-oriented measures where no one in particular is specified.
Design functionality measures are function points or full function points.
Program length measures are lines of source code.

14
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3.3 Week 3:
3.3.1 Introduction to Web Interface Design
Web interface design involves making decisions on the look and feel of the website. This starts when the web developer
collects the site requirements from the users. Using the defined user needs the web developer is able to decide which
design is most appropriate for a certain website. User interface is the space where interaction between humans and website
occurs. The goal of interaction between a human and a website at the user interface is effective operation and control of
the website and feedback from the website which aids the user in make certain decisions. User interfaces provide a means
of:
• Input, allowing the users to manipulate a website.
• Output, allowing the website to indicate the effects of the users’ manipulation.
Web design is the process of designing websites - a collection of online content including documents and applications
that reside on web servers. The process of web design includes planning, postproduction, research, advertising, as well as
media control that is applied to the pages within the site by the designer or group of designers with a specific purpose.
The site itself can be divided into its main page, also known as the home page, which cites the main objective as well
as highlights of the site’s daily updates; which also contains hyperlinks that functions to direct viewers to a designated
page within the site’s domain.

Website design basics Following are some basic steps to be followed while creating web pages:
• Create a Welcome/Index/first page of your web site.
• Selecting and using appropriate graphics.
• Representing the user requirements.
Some minimum technical requirements might include:
• Fast loading of pages.
• Presentation with clarity and readability - with or without graphics.
• Validation of the contents.
• Easy and clear navigation.
• Instruction on how to use the site.
Identify and address all potential problems such as:
• Slow connections.
• Physical constraints of the user such as sight or hearing impaired visitors.
• Platform support.
• Browser support.
CONTINUE FROM HERE ON 9 SEP 2024, 10H00 CLASS

Web page design considerations:

• Follow a simple and consistent design. Complex designs can confuse people, so keep it simple. A consistent design
will let your readers concentrate on content, without having to waste time figuring out how to maneuver your layout.
At Cornell, the time and workstation “power” required to load a Web page are still important considerations when
using some of the latest Web authoring tools, especially if your visitor is connecting to campus with a modem.
• Don’t create gratuitous graphics. Graphics are one reason for the interest in the Web by both publishers and readers
and should definitely be included on your Web page if possible. It is important not to overuse them. Blinking text
and other excessive decorations can be distracting; background colors and textures can affect download time.
Think very carefully about the colors and textures you choose for backgrounds and the effects they will have on
the readability of text.
• Give people cross links. Visitors should be able to move from one major page to another on your site without
having to go back to your home page. Put cross links to all your major pages at the bottom of all major pages.
For a good example, see the bottom of this page.
• Be careful about “over-linking”. While linking to the work of others in your organization and throughout the world
can help your readers, it can also lead to information overload. It is important to balance linking within your page
design. Too many links can be a visual eyesore on the page and a distraction from the original information you
want your readers to concentrate on.
• Don’t create dead-end links. Readers can get discouraged from returning to your pages when those pages are filled
with empty links.
3.3.2 Principles of User Interface Design
Principles of User Interface Design are intended to improve the quality of user interface design:
The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based
on clear, consistent models that are apparent and recognizable to users, putting related things together and sep-

15
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

arating unrelated things, differentiating dissimilar things and making similar things resemble one another. The
structure principle is concerned with overall user interface architecture.
The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in
the user’s language, and providing good shortcuts that are meaningfully related to longer procedures.
The visibility principle: The design should make all needed options and materials for a given task visible without dis-
tracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives
or confuse them with unneeded information.
The feedback principle: The design should keep users informed of actions or interpretations, changes of state or con-
dition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous
language familiar to users.
The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by al-
lowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences
and by interpreting all reasonable actions.
The reuse principle: The design should reuse internal and external components and behaviours, maintaining con-
sistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and
remember.
3.3.3 Web usability
Web usability is an approach to make websites easy to use for an end-user, without the requirement that any specialized
training be undertaken. The user should be able to intuitively relate the actions he needs to perform on the web page,
with other interactions he sees in the general domain of life e.g. press of a button leads to some action. The broad goal
of usability can be:
• Present the information to the user clearly and concisely.
• To give the correct choices to the users, in a very obvious way.
• To remove any ambiguity regarding the consequences of an action e.g. clicking on delete/remove/purchase.
• Put the most important thing in the right place on a web page or a web application.
3.3.4 Key Elements of a Good Website
The objective of any website is to get viewed and read as much as possible. Elements such as content, appearance
and usability are some of the factors that set apart a great website from a good one. There are several factors that go
into making a successful website. Besides its use, appearance and user-friendliness are the most important factors that
help make a website popular. The following are the key elements of a good website:
Content - The most important element in any website is good content. Your content is the reason users visit your site.
If it is superficial or badly written, you can be sure that they will leave fast and won’t come back again. The copy
for your website should be well framed and helpful Truthful information about your company, products, services,
etc is a must. Information one must not forget to include is an ’about’ page as well as contact information. The
important aspect to keep in mind here is to provide information that is going to be useful to your user. Also, ensure
that the content on your website is updated and does not contain any grammatical or spelling mistakes, for it is a
direct reflection of your company’s image.
Visual appeal - We all know what they say about first impressions, and this school of thought extends to websites too.
The decision to go through the content of a website is likely to be based on how a visitor responds to its appearance.
Your website design should be clean and simple, but all the same - eye-catching. A tasteful website is not flashy.
Blinking letters and flashing pictures are disturbing and will turn away most readers instead of attracting them.
They also make it a lot harder to read the information provided, which can be quite irritating for the user.
User interface - A good user interface is another key element of a good website. The user interface should be the kind
an average user will find easy to use, and enable them to find whatever they need with ease. Part of this includes
well-planned major (top-level) categories and navigation that is easy to spot and consistent throughout the website.
One way to achieve this is to have links to the key areas of your site in the top half of your website. This layout
should remain consistent throughout the various pages. A good user interface will offer the same options in the
footer or even a few extra links. Larger websites with lots of pages should have a site map.
Content layout - A big mistake is to place text over backgrounds, for it makes reading difficult. Dark background
colours do not make reading any easier. Studies have shown that black text on a white background is the best
combination for reading and remembering. Large blocks of text should be split up into paragraphs containing 4-5
sentences. Ensure that your page contains sufficient white space, for clarity and neatness. Every page should have
the same margins. There should be consistency throughout the website, so only one set of fonts, colours and layout
should be used on all pages. One element that annoys most users is multiple scroll bars. Keep them at a minimum
and try to avoid the side-to-side scroll bars.
Search tool - Good websites containing many pages have a search field to assist their readers. This feature is very
helpful and enables potential customers to find whatever they want with ease. One can make use of use a Google
Search on their site, or WordPress (or another blogging platform or CMS (Content Management System). It will
be a little more challenging with a static HTML site, but there are services available that will let one incorporate
a functional search box onto their site.

16
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

Separate design from content - The best-developed sites on the Internet combine the use of XHTML and CSS (Cas-
cading Style Sheets), which create a separation of design vs content. Among its many advantages is that one has
to update just one CSS file to see the change implemented site-wide. Also, this separation of content from design
will result in quick loading (search engines will no longer have to go through excess code to find out if the content
is relevant). On the same note, minimize your utilization of flash animations, music, or video or anything that is
going to make your site take a long time to load. Web surfers have very little patience and a short attention span.
Cross browser compatibility - Another key element of a good website is that it displays well in as many of the
mainstream web browsers as possible and is also compatible across platforms. Although most Internet users utilize
Firefox, you don’t want to leave out those using Internet Explorer and the other few browsers. Also, the success of
your website can be hinged on how well it is optimized for search engines.
Web optimized images - Good picture quality on a website instantly leaves a user impressed. Most people save all
their images in a compressed format. So be careful while doing this as your images will appear pixelated when you
upload them on your site.
3.3.5 Website organization
A well-organized website will increase its usability resulting in your visitors staying on your site longer and coming
back more frequently. The main page of your site, also referred to as the home or index page, is the first page visitors
will see when going to your domain. On this page, there should be a navigation linking to each of the major subpages
of your site. These navigation links can be either text links or image buttons. For example, imagine a fictional company
that wants a website as a sort of online brochure. They have 3 products to sell, they don’t want to sell them online but
would like detailed information about each of them to be available on their site. They also want an About Us, a Contact
Us, and a Photos page. A products page could be set up that gives an introduction about their products and then links
to 3 separate pages each of which describes one of the products in detail. The main page could be referred to as level
one, the Our Products, About Us, Contact Us, and the Photos page as level 2, and each of the individual product pages
as level three. See the diagram below.

Figure 2: Website layout.

There would then be five main navigational links for this site:
• Main page
• About Us
• Our Products
• Photos
• Contact Us
These five links should appear on each of the eight pages of the site. The header and title on the top of each page
should either be the same as or similar to the text on each of the navigation links. In this way whichever page of the site
a visitor finds themselves on, either through moving around the site on their own or by entering the site on any of its
eight pages through a search engine link, they should be able to easily figure out exactly where on the site they are.
To maintain a consistent look and feel throughout the site, the same overall design should be used on each page. For
example, if each of the five main navigation links were made from buttons shaped like hats, and were lined up along a

17
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

left column, they should be that way on each page of the site. It is, however, a good idea to include plain text links to
each of the main pages on the bottom of each page of the site. This is especially important if the other links are made
from graphics. There are people who use browsers with either no graphics capability, or they have them turned off. They
will need a way to navigate through your site also.
It has also been stated that it should not take more than three clicks to get from one page to any other page on the
same website, and if it does, the site just isn’t organized well.
3.3.6 Website wireframe
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal
framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface
elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, colour,
or graphics, since the main focus lies in functionality, behaviour, and priority of content. Website wireframe focuses on -
what a screen does, not what it looks like. Wireframes focus on:
• The kinds of information displayed.
• The range of functions available.
• The relative priorities of the information and functions.
• The rules for displaying certain kinds of information.
• The effect of different scenarios on the display.
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface,
or visual design of the website. Wireframes help establish functionality and the relationships between different screen
templates of a website. In an iterative process, creating wireframes is an effective way to make rapid prototypes of pages
while measuring the practicality of a design concept. Wireframing typically begins between - high-level structural work
like flowcharts or site maps and screen designs. Within the process of building a website, wireframing is where thinking
becomes tangible.

Uses of wireframes Developers use wireframes to get a more tangible grasp of the site’s functionality, while designers
use them to push the user interface (UI) process. User experience designers and information architects use wireframes to
show navigation paths between pages. Business stakeholders use wireframes to ensure that requirements and objectives
are met through the design. Working with wireframes may be a collaborative effort since it bridges the information
architecture to the visual design. Due to overlaps in these professional roles, conflicts may occur, making wireframing a
controversial part of the design process. Since wireframes signify a - bare-bones aesthetic, it is difficult for designers to
assess how closely the wireframe needs to depict actual screen layouts. Another difficulty with wireframes is that they
don’t effectively display interactive details. Modern UI design incorporates various devices such as expanding panels,
hover effects, and carousels that pose a challenge for 2-D diagrams. Wireframes may have multiple levels of detail and
can be broken up into two categories in terms of fidelity, or how closely they resemble the end product.
• Low-fidelity Resembling a rough sketch or a quick mock-up, low-fidelity wireframes have less detail and are quick
to produce. These wireframes help a project team collaborate more effectively since they are more abstract, using
rectangles and labelling to represent content.
• High-fidelity High-fidelity wireframes are often used for documenting because they incorporate a level of detail that
more closely matches the design of the actual webpage, thus taking longer to create.

Elements of wireframes The skeleton plan of a website can be broken down into three components: information
design, navigation design, and interface design. Page layout is where these components come together, while wireframing
is what depicts the relationship between these components.
Information design - Information design is the presentation, placement and prioritization of information in a way that
facilitates understanding. Information design is an area of graphic design, meant to display information effectively
for clear communication. For websites, information elements should be arranged in a way that reflects the goals
and tasks of the user.
Navigation design - The navigation system provides a set of screen elements that allow the user to move from page to
page through a website. The navigation design should communicate the relationship between the links it contains
so that users understand the options they have for navigating the site. Often, websites contain multiple navigation
systems such as global navigation, local navigation, supplementary navigation, contextual navigation, and courtesy
navigation.
Interface design - User interface design includes selecting and arranging interface elements to enable users to interact
with the functionality of the system. The goal is to facilitate usability and efficiency as much as possible. Common
elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop-down menus.

18
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3.4 Week 4: HTML Page layout design

3.4.1 HTML Layouts
Web page layout is very important to make your website look good. Design your webpage layout very carefully.
Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns
is created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create
backgrounds or colorful look for the pages.
1. HTML layouts using tables. The simplest way of creating layouts is by using the HTML <table> tag. The
following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the
colspan attribute.
<html>
2 <body>
<t a b l e width=" 500 " b o r d e r=" 0 ">
4 <t r >
<td c o l s p a n=" 2 " s t y l e=" background−c o l o r :#FFA500 ; ">
6 <h1>Main T i t l e o f Web Page</h1></td>
</t r >
8 <t r v a l i g n=" top ">
<td s t y l e=" background−c o l o r :#FFD700 ; width : 1 0 0 px ; t e x t −a l i g n : top ; ">
10 <b>Menu</b><br />
HTML<br />
12 CSS<br />
JavaScript
14 </td>
<td s t y l e=" background−c o l o r :#EEEEEE; h e i g h t : 2 0 0 px ; width : 4 0 0 px ; t e x t −a l i g n : top ; ">
16 Content g o e s h e re </td>
</t r >
18 <t r >
<td c o l s p a n=" 2 " s t y l e=" background−c o l o r :#FFA500 ; t e x t −a l i g n : c e n t e r ; "></td>
20 </t r >
</ t a b l e >
22 </body>
</html>
24

Listing 1: Page layout using tables.

Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting
tabular data - NOT as a layout tool.
BEGIN FROM HERE FOR THE 10H00 and 13h00 CLASS ON SEP 25, 2024, PREPARE A CAT FOR JUNE 25,
2024 - GIVE EXPECTATIONS FOR THE CAT DAY I.E., TEACH FOR 1.5 HOURS AND THEN DO THE CAT
FOR 1.5 HOURS or vice versa
2. HTML layouts using div elements. The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the
previous example:
<html>
2 <body>
<d i v i d=" c o n t a i n e r " s t y l e=" width : 5 0 0 px ">
4 <d i v i d=" h e a d e r " s t y l e=" background−c o l o r :#FFA500 ; ">
<h1 s t y l e=" margin−bottom : 0 ; ">Main T i t l e o f Web Page</h1></div>
6 <d i v i d=" menu " s t y l e=" background−c o l o r :#FFD700 ; h e i g h t : 2 0 0 px ; width : 1 0 0 px ; f l o a t : l e f t ; ">
<b>Menu</b><br />
8 HTML<br />
CSS<br />
10 J a v a S c r i p t </div>
<d i v i d=" c o n t e n t " s t y l e=" background−c o l o r :#EEEEEE; h e i g h t : 2 0 0 px ; width : 4 0 0 px ; f l o a t : l e f t ; ">
Content g o e s h e re </div>
12 <d i v i d=" f o o t e r " s t y l e=" background−c o l o r :#FFA500 ; c l e a r : both ; t e x t −a l i g n : c e n t e r ; "> C o p y r i g h t
@ 2011 W3Schools . com</div>
</div>
14 </body>
</html>
16

Listing 2: Page layout using divs.

Already covered for 10h00 class, give more examples for the input types
3.4.2 HTML Forms
A form on a web page allows a user to enter data that is sent to a server for processing. HTML forms resemble paper
or database forms because internet users fill out the forms using checkboxes, radio buttons, or text fields. For example,
forms can be used to enter shipping or credit card data to order a product or can be used to retrieve data (e.g., searching
on a search engine).

19
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

In addition to functioning as input templates for new information, forms can also be used to query and display
existing data in a similar manner to mail merge forms, with the same advantages. The decoupling of message structure
and underlying data allow both to vary independently. The use of forms for this purpose avoids the problems associated
with explicitly creating separate web pages for each record in a database.
HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-
buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
2 .
.
4 .
input elements
6 .
.
8 .
</form>

Listing 3: Form tags

The Input Element The most important form element is the input element. The input element is used to select user
information. An input element can vary in many ways, depending on the type attribute. An input element can be of
type text field, checkbox, password, radio button, submit button, and more. The most used input types are described
below.
1. Text field. <input type="text" /> defines a one-line input field that a user can enter text into.
<form>
2 F i r s t name : <i n p u t t y p e=" t e x t " name=" f i r s t n a m e " /><br />

4 L a s t name : <i n p u t t y p e=" t e x t " name=" l a s t n a m e " />

</form>
6

Listing 4: Text field.

2. Password field. <input type="password" /> defines a password field:

<form>
2 Password : <i n p u t t y p e=" password " name=" pwd " />
</form>
4

Listing 5: Password field.

3. Radio buttons. <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of
a limited number of choices.
<form>
2 <i n p u t t y p e=" r a d i o " name=" s e x " v a l u e=" male " /> Male <br />
<i n p u t t y p e=" r a d i o " name=" s e x " v a l u e=" f e m a l e " /> Female
4 </form>

Listing 6: Radio button.

4. Checkboxes. <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options
of a limited number of choices.
<form>
2 <i n p u t t y p e=" checkbox " name=" v e h i c l e " v a l u e=" Bike " /> I have a b i k e <br />
<i n p u t t y p e=" checkbox " name=" v e h i c l e " v a l u e=" Car " /> I have a c a r
4 </form>

Listing 7: Checkboxes.

5. Submit button. <input type="submit" /> defines a submit button. A submit button is used to send form data
to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action
attribute usually does something with the received input.
<form name=" i n p u t " a c t i o n=" p r o c e s s . j s " method=" g e t ">
2 Username : <i n p u t t y p e=" t e x t " name=" u s e r " />
<i n p u t t y p e=" submit " v a l u e=" Submit " />
4 </form>

Listing 8: Submit button.

20
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input
to a page called "process.js".
3.4.3 HTML iFrames
An iframe is used to display a web page within a web page.

Syntax for adding an iframe: <iframe src="URL"></iframe>

The URL points to the location of the separate page.

iframe - Set height and width The height and width attributes are used to specify the height and width of the
iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example:
<iframe src="demo_iframe.html" width="200" height="200"></iframe>

Iframe - remove the border The frameborder attribute specifies whether or not to display a border around the
iframe. Set the attribute value to "0" to remove the border.
Example:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Use iframe as a target for a link An iframe can be used as the target frame for a link. The target attribute of a
link must refer to the name attribute of the iframe.
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

21
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

3.5 Week 5: Introduction to Cascading Style Sheets (CSS)

3.5.1 Introduction to CSS
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and
formatting) of a document written in a markup language. Its most common application is to style web pages written in
HTML and XHTML, but the language can also be applied to any kind XML document, including plain XML and SVG.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup
language) from document presentation, including elements such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the specification of presentation characteristics,
enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. CSS can also
allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in
print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While
the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet,
perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular
element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are
predictable.

CSS Variations: CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new
features and typically denoted as CSS 1, CSS 2, and CSS 3. Profiles are typically a subset of one or more levels of CSS
built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets.
1. CSS 1. The first CSS specification to become an official W3C Recommendation is CSS level 1, published in
December 1996. Among its capabilities are support for:
• Font properties such as typeface and emphasis.
• Color of text, backgrounds, and other elements.
• Text attributes such as spacing between words, letters, and lines of text.
• Alignment of text, images, tables and other elements.
• Margin, border, padding, and positioning for most elements.
• Unique identification and generic classification of groups of attributes.
2. CSS 2. CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and
z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties
such as shadows.
3. CSS 3. Instead of defining all features in a single, large specification like CSS 2, CSS 3 is divided into several
separate documents called "modules". Each module adds new capability or extends features defined in CSS 2, over
preserving backward compatibility.
3.5.2 CSS Limitations
• Poor controls for flexible layouts - CSS is not a layout language.
• Selectors are unable to ascend - CSS offers no way to select a parent or ancestor of an element that satisfies certain
criteria.
• Vertical control limitations - While horizontal placement of elements is generally easy to control, vertical placement
is frequently unintuitive, convoluted, or impossible.
• Absence of expressions - There is currently no ability to specify property values as simple expressions.
• Lack of column declaration - While possible in current CSS 3 (using the column-count module), layouts with
multiple columns can be complex to implement in CSS 2.1.
• Cannot explicitly declare new scope independently of position.
• Pseudo-class dynamic behavior not controllable - CSS implements pseudo-classes that allow a degree of user feedback
by conditional application of alternate styles.
3.5.3 Advantages of CSS
• Flexibility - By combining CSS with the functionality of a Content Management System, a considerable amount of
flexibility can be programmed into content submission forms.
• Accessibility - Without CSS, web designers must typically lay out their pages with techniques that hinder accessi-
bility for vision-impaired users, like HTML tables.
• Separation of content from presentation - CSS facilitates publication of content in multiple presentation formats
based on nominal parameters.
• Site-wide consistency - When CSS is used effectively, in terms of inheritance and "cascading," a global style sheet
can be used to affect and style elements site-wide.
• Bandwidth - A stylesheet, whether internal to the source document or separate, will specify the style once for a
range of HTML elements selected by class, type or relationship to others.

22
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

• Page reformatting - With a simple change of one line, a different style sheet can be used for the same page.
3.5.4 CSS Syntax
h1 {
2 c o l o r : blue ;
f o n t −s i z e : 12 px ;
4 }

Listing 9: CSS syntax.

• Selector.
• Property.
• Value.
The selector is normally the HTML element you want to style. Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value. A CSS declaration always ends with
a semicolon, and declaration groups are surrounded by curly brackets.
3.5.5 CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments
are ignored by browsers. A CSS comment begins with “/*”, and ends with “*/”, like this.
3.5.6 CSS id and class
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.

The id selector: The id selector is used to specify a style for a single, unique element. The id selector uses the id
attribute of the HTML element, and is defined with a “#”. The style rule below will be applied to the element with id
= "para1".
#para1 {
2 t e x t −a l i g n : c e n t e r ;
c o l o r : red ;
4 }

Listing 10: id selector.

Note: Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class selector: The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements. This allows you to set a particular style for many HTML elements
with the same class. The class selector uses the HTML class attribute, and is defined with a “.” In the example below,
all HTML elements with class = “center” will be center-aligned:
. c e n t e r { t e x t −a l i g n : c e n t e r ; }

Listing 11: class selector.

You can also specify that only specific HTML elements should be affected by a class. In the example below, all p
elements with class = “center” will be center-aligned:
p . c e n t e r { t e x t −a l i g n : c e n t e r ; }

Listing 12: class selector for specific HTML elements.

Note: Do NOT start a class name with a number! This is only supported in Internet Explorer.
3.5.7 Three Ways to insert CSS
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a
style sheet:
1. External style sheet. An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
2 <l i n k r e l=" s t y l e s h e e t " t y p e=" t e x t / c s s " h r e f=" m y s t y l e . c s s " />
</head>
4

Listing 13: External linking of CSS.

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style
sheet should be saved with a .css extension.

23
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

2. Internal style sheet. An internal style sheet should be used when a single document has a unique style. You
define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
2 < s t y l e t y p e=" t e x t / c s s ">
hr { c o l o r : s i e n n a ; }
4 p { margin− l e f t : 2 0 px ; }
body { background−image : u r l ( " images / back40 . g i f " ) ; }
6 </ s t y l e >
</head>
8

Listing 14: Internal linking of CSS.

3. Inline style. An inline style loses many of the advantages of style sheets by mixing content with presentation. Use
this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the colour and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

24
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

4 Introduction to JavaScript
JavaScript is a prototype-based, object-oriented scripting language that is dynamic, weakly typed and has first-class
functions. It is also considered a functional programming language like Scheme and OCaml because it has closures and
supports higher-order functions. JavaScript is an implementation of the ECMAScript language standard and is primarily
used in the form of client-side JavaScript, implemented as part of a web browser to provide enhanced user interfaces and
dynamic websites. This enables programmatic access to computational objects within a host environment. JavaScript is
the most popular scripting language on the internet and works in all major browsers, such as Internet Explorer, Firefox,
Chrome, Opera, and Safari.
JavaScript:
• was designed to add interactivity to HTML pages.
• is a scripting language. A scripting language is a lightweight programming language.
• is usually embedded directly into HTML pages.
• is an interpreted language (means that scripts execute without preliminary compilation).
• Everyone can use JavaScript without purchasing a license.

4.1 JavaScript uses

1. JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but
JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code
into their HTML pages.
2. JavaScript can react to events - JavaScript can be set to execute when something happens, like when a page has
finished loading or when a user clicks on an HTML element.
3. JavaScript can read and write HTML elements - JavaScript can read and change the content of an HTML element.
4. JavaScript can be used to validate data - JavaScript can be used to validate form data before it is submitted to a
server. This saves the server from extra processing.
5. JavaScript can be used to detect the visitor’s browser - JavaScript can be used to detect the visitor’s browser, and
- depending on the browser - load another page specifically designed for that browser.
6. JavaScript can be used to create cookies - JavaScript can be used to store and retrieve information on the visitor’s
computer.
JavaScript is an implementation of the ECMAScript language standard. ECMA-262 is the official JavaScript standard.

4.2 Writing JavaScript to The HTML Document

The HTML <script> tag is used to insert JavaScript into an HTML page.
<html>
2 <body>
<h1>My F i r s t Web Page</h1>
4 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
document . w r i t e ( "<p>" + Date ( ) + "</p>" ) ;
6 </ s c r i p t >
</body>
8 </html>

Listing 15: Writing JavaScript to HTML document.

The example above writes a <p> element with current date information to the HTML document.

4.3 Changing HTML Elements

The example below writes the current date into an existing <p> element:
<html>
2 <body>
<h1>My F i r s t Web Page</h1>
4 <p i d=" demo "></p>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
6 document . getElementById ( " demo " ) . innerHTML=Date ( ) ;
</ s c r i p t >
8 </body>
</html>

Listing 16: Changing HTML elements.

Note: To manipulate HTML elements JavaScript uses the DOM (Document Object Model) method getElementById().
This method accesses the element with the specified id.

25
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

4.4 JavaScript Comments

JavaScript comments can be used to make the code more readable. Comments can be added to explain the JavaScript,
or to make the code more readable.
4.4.1 Single line comments start with //.
The following example uses single line comments to explain the code:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // Write a h e a d i n g
document . w r i t e ( "<h1>This i s a heading </h1>" ) ;
4 // Write two p a r a g r a p h s : document . w r i t e (" <p>This i s a
p a r a g r a p h . </p>" ) ; document . w r i t e ( "<p>This i s a n o t h e r
6 p a r a g r a p h . </p>" ) ;
</ s c r i p t >

Listing 17: JavaScript single line comments.

4.4.2 JavaScript Multi-Line Comments

Multi-line comments start with /* and end with */. The following example uses a multi-line comment to explain the
code:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 /∗
The code below w i l l w r i t e
4 one h e a d i n g and two p a r a g r a p h s
∗/
6 document . w r i t e ( "<h1>This i s a heading </h1>" ) ;
document . w r i t e ( "<p>This i s a p a r a g r a p h . </p>" ) ;
8 document . w r i t e ( "<p>This i s a n o t h e r p a r a g r a p h . </p>" ) ;
</ s c r i p t >

Listing 18: JavaScript multi-line comments.

4.4.3 Using comments to prevent execution

In the following example, the comment is used to prevent the execution of a single code line (can be suitable for
debugging):
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // document . w r i t e (" <h1>This i s a heading </h1 >") ;
document . w r i t e ( "<p>This i s a p a r a g r a p h . </p>" ) ;
4 document . w r i t e ( "<p>This i s a n o t h e r p a r a g r a p h . </p>" ) ;
</ s c r i p t >

Listing 19: Using comments to prevent execution.

4.4.4 Some browsers do not support JavaScript

Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this,
and as a part of the JavaScript standard, the HTML comment tag should be used to “hide” the JavaScript. Just add
an HTML comment tag <!– before the first JavaScript statement, and a –> (end of comment) after the last JavaScript
statement, like this:
<html>
2 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 <!−−
document . getElementById ( " demo " ) . innerHTML=Date ( ) ;
6 //−−>
</ s c r i p t >
8 </body>
</html>

Listing 20: Using HTML comments to prevent execution.

The two forward slashes at the end of the comment line (//) is the JavaScript comment symbol. This prevents
JavaScript from executing the –> tag.

4.5 Where to place JavaScript in HTML document

1. In the body section. The example below writes the current date into an existing <p> element when the page
loads:
<html>
2 <body>

26
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

<p i d=" demo "></p>

4 < s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
document . getElementById ( " demo " ) . innerHTML=Date ( ) ;
6 </ s c r i p t >
</body>
8 </html>

Listing 21: Using JavaScript in the body section.

2. In the head section. The example below calls a function when a button is clicked:
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 function displayDate () {
document . getElementById ( " demo " ) . innerHTML=Date ( ) ;
6 }
</ s c r i p t >
8 </head>
<body>
10 <h1>My F i r s t Web Page</h1>
<p i d=" demo "></p>
12 <bu tton t y p e=" bu tton " o n c l i c k=" d i s p l a y D a t e ( ) ">D i s p l a y Date</button>
</body>
14 </html>

Listing 22: Using JavaScript in the body section.

3. Using external JavaScript. JavaScript can also be placed in external files. External JavaScript files often
contain code to be used on several different web pages. External JavaScript files have the file extension .js. Note:
External script cannot contain the <script></script> tags! To use an external script, point to the .js file in the
"src" attribute of the <script> tag.
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t " s r c=" xxx . j s "></ s c r i p t >
4 </head>
<body>
6
</body>
8 </html>

Listing 23: Using JavaScript in an external file.

4.6 JavaScript statements

JavaScript is a sequence of statements to be executed by the browser. A JavaScript statement is a command to a
browser. The purpose of the command is to tell the browser what to do. This JavaScript statement tells the browser to
write "Hello Dolly" to the web page:
document.write("Hello world!");
It is normal to add a semicolon at the end of each executable statement. The semicolon is optional (according to the
JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Note:
Using semicolons makes it possible to write multiple statements on one line.

JavaScript is Case Sensitive: Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely
when you write JavaScript statements, create or call variables, objects and functions.

JavaScript code: JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is
executed by the browser in the sequence they are written. This example will write a heading and two paragraphs to a
web page:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 document . w r i t e ( "<h1>This i s a heading </h1>" ) ;
document . w r i t e ( "<p>This i s a p a r a g r a p h . </p>" ) ;
4 document . w r i t e ( "<p>This i s a n o t h e r p a r a g r a p h . </p>" ) ;
</ s c r i p t >

Listing 24: JavaScript code.

JavaScript blocks: JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket
{, and end with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together.
This example will write a heading and two paragraphs to a web page:

27
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">

2 {
document . w r i t e ( "<h1>This i s a heading </h1>" ) ;
4 document . w r i t e ( "<p>This i s a p a r a g r a p h . </p>" ) ;
document . w r i t e ( "<p>This i s a n o t h e r p a r a g r a p h . </p>" ) ;
6 }
</ s c r i p t >

Listing 25: JavaScript block.

4.6.1 Variables
Variables are "containers" for storing information. JavaScript variables are used to hold values or expressions. A
variable can have a short name, like x, or a more descriptive name, like carname or lastName.
Rules for JavaScript variable names:
• Variable names are case sensitive (y and Y are two different variables).
• Variable names must begin with a letter or the underscore character.
A variable’s value can change during the execution of a script. You can refer to a variable by its name to display or
change its value.
Creating variables in JavaScript is most often referred to as "declaring" variables. You declare JavaScript variables
with the var keyword:
var x ;
2 var lastname ;

After the declaration shown above, the variables are empty (they have no values yet). However, you can also assign
values to the variables when you declare them:
var x = 5 ;
2 v a r l a s t n a m e = " Kimani " ;

After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value
Kimani.

Local JavaScript variables: A variable declared within a JavaScript function becomes LOCAL and can only be
accessed within that function (the variable has local scope). You can have local variables with the same name in different
functions, because local variables are only recognized by the function in which they are declared. Local variables are
destroyed when you exit the function.

Global variables: Variables declared outside a function become GLOBAL, and all scripts and functions on the web
page can access them. Global variables are destroyed when you close the page.

Assigning values to undeclared JavaScript variables: If you assign values to variables that have not yet been
declared, the variables will automatically be declared as global variables. The statements below will declare the variables
x and carname as global variables (if they don’t already exist):
x = 5;
carname = "Volvo";
4.6.2 Mathematical Operators
= is used to assign values.
+ is used to add values.
- subtraction.
* multiplication
/ division.
% modulus.
++ increment.
-- decrement.
4.6.3 Assignment operators
= e.g. , x = y;
2 += e . g . , x += y ; => x = x + y ;
−+ e . g . , x −= y ; => x = x − y ;
4 ∗= e . g . , x ∗= y ; => x = x ∗ y ;
/= e . g . , x /= y ; => x = x / y ;
6 %= e . g . , x %= y ; => x = x % y ;

28
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

4.6.4 Concatenation operator

The + operator can also be used to add string variables or text values together. To add two or more string variables
together, use the + operator.
var firstname = "John";
var lastname = "Onyango";
var name = firstname + lastname;
4.6.5 Adding strings and numbers
The rule is: If you add a number and a string, the result will be a string!
Example;

2 x=5+5;
document . w r i t e ( x ) ; // o utpu t : 10
4
x=" 5 "+" 5 " ;
6 document . w r i t e ( x ) ; // o utpu t : 55

8 x=5+" 5 " ;
document . w r i t e ( x ) ; // o utpu t : 55
10
x=" 5 " +5;
12 document . w r i t e ( x ) ; // o utpu t : 55

4.6.6 Comparison operators

Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x=5,
= = i s e q u a l t o e . g . , x==8 i s f a l s e x==5 i s t r u e .
2 = = = i s e x a c t l y e q u a l t o ( v a l u e and t y p e ) e . g . , x===5 i s t r u e ; x = = = " 5 " i s false .
!= i s not e q u a l x !=8 i s t r u e .
4 > i s g r e a t e r than x>8 i s f a l s e .
< i s l e s s than e . g . , x<8 i s t r u e .
6 >= i s g r e a t e r than o r e q u a l t o e . g . , x>=8 i s f a l s e .
<= i s l e s s than o r e q u a l t o e . g . , x<=8 i s t r u e .

4.6.7 Logical operators

Logical operators are used to determine the logic between variables or values.
Given that x=6 and y=3,
&& and e . g . , ( x < 10 && y > 1 ) i s t r u e
2 | | o r e . g . , ( x==5 | | y==5) i s f a l s e
! not e . g . , ! ( x==y ) i s t r u e

4.6.8 Ternary operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax:
variablename=(condition)?value1:value2
g r e e t i n g = ( v i s i t o r=="PRES" ) ? " Dear P r e s i d e n t " : " Dear " ;

If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value "Dear President
" else it will be assigned "Dear".
4.6.9 Conditional statements
Conditional statements are used to perform different actions based on different conditions. Very often when you write
code, you want to perform different actions for different decisions. You can use conditional statements in your code to
do this. In JavaScript we have the following conditional statements:

29
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

1. if statement - use this statement to execute some code only if a specified condition is true.
Syntax:
i f ( condition ){
2 code t o be e x e c u t e d i f c o n d i t i o n i s t r u e
}
4

Example:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // Write a " Good morning " g r e e t i n g i f
// t h e time i s l e s s than 10
4 v a r d = new Date ( ) ;
v a r time = d . g e t H o u r s ( ) ;
6 i f ( time < 1 0 ) {
document . w r i t e ( "<b>Good morning </b>" ) ;
8 }
</ s c r i p t >
10

2. if...else statement - use this statement to execute some code if the condition is true and another code if the condition
is false.
Syntax
i f ( condition ){
2 code t o be e x e c u t e d i f c o n d i t i o n i s t r u e
} else {
4 code t o be e x e c u t e d i f c o n d i t i o n i s not t r u e
}
6

Example:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 // Write a " Good morning " g r e e t i n g i f
// t h e time i s l e s s than 10
4 v a r d = new Date ( ) ;
v a r time = d . g e t H o u r s ( ) ;
6 i f ( time < 1 0 ) {
document . w r i t e ( "<b>Good morning </b>" ) ;
8 } else {
document . w r i t e ( " Good day ! " ) ;
10 }
</ s c r i p t >
12

3. if...else if....else statement - use this statement to select one of many blocks of code to be executed.
Syntax:
i f ( condition1 ){
2 code t o be e x e c u t e d i f condition1 i s true
} else i f ( condition2 ) {
4 code t o be e x e c u t e d i f condition2 i s true
} else {
6 code t o be e x e c u t e d if n e i t h e r c o n d i t i o n 1 nor
condition2 i s true
8 }

30
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

Example:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 /∗ Write a " Good morning " g r e e t i n g i f
t h e time i s l e s s than 1 0 ,
4 " Good day " g r e e t i n g i f t h e time i s g r e a t e r
than 10 and l e s s than 1 6 .
6 O t h e r w i s e w r i t e " H e l l o world ! " message .
∗/
8 v a r d = new Date ( ) ;
v a r time = d . g e t H o u r s ( ) ;
10 i f ( time < 1 0 ) {
document . w r i t e ( "<b>Good morning </b>" ) ;
12 } e l s e i f ( time > 10 && time < 1 6 ) {
document . w r i t e ( " Good day ! " ) ;
14 } else {
document . w r i t e ( "<b>H e l l o World! </b>" ) ;
16 }
</ s c r i p t >
18

4. switch statement - use this statement to select one of many blocks of code to be executed.
Syntax:
switch (n) {
2 case 1:
e x e c u t e code b l o c k 1
4 break ;
case 2:
6 e x e c u t e code b l o c k 2
break ;
8 default :
code t o be e x e c u t e d i f n i s different
10 from c a s e 1 and 2
}
12

Example:
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
2 /∗You w i l l r e c e i v e a d i f f e r e n t g r e e t i n g based
on what day i t i s . Note t h a t Sunday =0 ,
4 Monday=1 , Tuesday =2 , e t c . ∗/
v a r d = new Date ( ) ;
6 v a r theDay = d . getDay ( ) ;
s w i t c h ( theDay ) {
8 case 1:
document . w r i t e ( " Monday " ) ;
10 break ;
case 2:
12 document . w r i t e ( " Tuesday " ) ;
break ;
14 case 0:
document . w r i t e ( " S l e e p y Sunday " ) ;
16 break ;
default :
18 document . w r i t e ( " I ’m l o o k i n g f o r w a r d t o t h i s weekend ! " ) ;
}
20 </ s c r i p t >

4.6.10 Loops
Loops execute a block of code a specified number of times i.e., repeatedly or while a specified condition is true. In
JavaScript, there are two different kinds of loops:
1. for - loops through a block of code a specified number of times.
Syntax:
f o r ( v a r i a b l e = s t a r t V a l u e ; v a r i a b l e <= endValue ; i n c r e m e n t ) {
2 code t o be e x e c u t e d
}
4

31
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

Example:
<html>
2 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 var i ;
f o r ( i = 0 ; i <= 5 ; i ++){
6 document . w r i t e ( " The number i s " + i ) ;
document . w r i t e ( "<br />" ) ;
8 }
</ s c r i p t >
10 </body>
</html>
12

The example above defines a loop that starts with i = 0. The loop will continue to run as long as i is less than, or
equal to 5. i will increase by 1 each time the loop runs. The increment parameter could also be negative, and the
<= could be any comparing statement.
2. while - loops through a block of code while a specified condition is true.
Syntax:
w h i l e ( v a r i a b l e <= e n d v a l u e ) {
2 code t o be e x e c u t e d
}
4

Example:
<html>
2 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 var i = 0 ;
w h i l e ( i <= 5 ) {
6 document . w r i t e ( " The number i s " + i ) ;
document . w r i t e ( "<br />" ) ;
8 i ++;
}
10 </ s c r i p t >
</body>
12 </html>

3. do...while loop. The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE,
and then it will repeat the loop as long as the specified condition is true.
Syntax
do {
2 code t o be e x e c u t e d
}
4 w h i l e ( v a r i a b l e <= e n d v a l u e ) ;

32
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

Example:
<html>
2 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 var i = 0 ;
do {
6 document . w r i t e ( " The number i s " + i ) ;
document . w r i t e ( "<br />" ) ;
8 i ++;
}
10 w h i l e ( i <= 5 ) ;
</ s c r i p t >
12 </body>
</html>
14

4.6.11 Break and continue statements

The break statement will break the loop and continue executing the code that follows after the loop (if any).
Example:
<html>
2 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 var i ;
f o r ( i =0; i <=10; i ++){
6 i f ( i ==3){
break ;
8 }
document . w r i t e ( " The number i s " + i ) ;
10 document . w r i t e ( "<br />" ) ;
document . w r i t e ( " Statement a f t e r t h e b r e a k . " ) ;
12 }
</ s c r i p t >
14 </body>
</html>

The continue statement will break the current loop and continue with the next value.
Example:
<html>
2 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 var i ;
f o r ( i = 0 ; i <= 1 0 ; i ++){
6 i f ( i == 3 ) {
continue ;
8 }
document . w r i t e ( " The number i s " + i ) ;
10 document . w r i t e ( "<br />" ) ;
}
12 </ s c r i p t >
</body>
14 </html>

4.6.12 Popup boxes

JavaScript has three kinds of popup boxes:
1. Alert box. An alert box is often used if you want to make sure information comes through to the user. When an
alert box pops up, the user will have to click "OK" to proceed.
Syntax:
a l e r t ( " sometext " ) ;
2

33
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

Example:
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 f u n c t i o n showAlert ( ) {
a l e r t ( " I am an a l e r t box ! " ) ;
6 }
</ s c r i p t >
8 </head>
<body>
10 <i n p u t t y p e=" button " o n c l i c k=" s h o w A l e r t ( ) " v a l u e=" Show a l e r t box " />
</body>
12 </html>

2. Confirm box. A confirm box is often used if you want the user to verify or accept something. When a confirm
box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns
true. If the user clicks "Cancel", the box returns false.
Syntax:
confirm ( " sometext " ) ;
2

Example:
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 f u n c t i o n showConfirm ( ) {
v a r r=c o n f i r m ( " P r e s s a b utto n " ) ;
6 i f ( r==t r u e ) {
a l e r t ( " You p r e s s e d OK! " ) ;
8 }else {
a l e r t ( " You p r e s s e d C an ce l ! " ) ;
10 }
}
12 </ s c r i p t >
</head>
14 <body>
<i n p u t t y p e=" button " o n c l i c k=" showConfirm ( ) " v a l u e=" Show c o n f i r m box " />
16 </body>
</html>
18

3. Prompt box. A prompt box is often used if you want the user to input a value before entering a page. When a
prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax:
prompt ( " s o m e t e x t " , " d e f a u l t v a l u e " ) ;
2

Example:
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 f u n c t i o n showPrompt ( ) {
v a r name=prompt ( " P l e a s e e n t e r your name " , " Harry P o t t e r " ) ;
6 i f ( name!= n u l l && name!= " " ) {
document . w r i t e ( " H e l l o " + name + " ! How a r e you today ? " ) ;
8 }
}
10 </ s c r i p t >
</head>
12 <body>
<i n p u t t y p e=" button " o n c l i c k=" showPrompt ( ) " v a l u e=" Show prompt box " />
14 </body>
</html>
16

34
Downloaded by Douglas K.W ([email protected])
 lOMoARcPSD|7885538

4.6.13 Functions
A function is a piece of code that performs a specific task. The function is executed by an event or by a call to the
function.
Syntax:
f u n c t i o n functionname ( var 1 , var 2 , . . . , var n ) {
2 some code
}

The parameters (i.e., var 1, var 2, etc.) are variables or values passed into the function. The { and the } define the
start and end of the function. A function with no parameters must include the parentheses () after the function name.
Example:
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 function displayMessage () {
var a = 5 ;
6 var b = 6 ;
a l e r t ( " H e l l o World ! " ) ;
8 }
</ s c r i p t >
10 </head>
<body>
12 <form>
<i n p u t t y p e=" bu tton " v a l u e=" C l i c k me ! " o n c l i c k=" d i s p l a y m e s s a g e ( ) " />
14 </form>
</body>
16 </html>

4.6.14 Return statement

The return statement is used to specify the value that is returned from the function. Functions that are going to
return a value must use the return statement. The example below returns the product of two numbers (a and b):
Example:
<html>
2 <head>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
4 f u n c t i o n product ( a , b) {
var r e s u l t = a ∗ b ;
6 return r e s u l t ;
}
8 </ s c r i p t >
</head>
10 <body>
< s c r i p t t y p e=" t e x t / j a v a s c r i p t ">
12 document . w r i t e ( p r o d u c t ( 4 , 3 ) ) ;
</ s c r i p t >
14 </body>
</html>

35
Downloaded by Douglas K.W ([email protected])