Higher Certificate in Information Technology

WEB DEVELOPMENT

Module Guide

Copyright © 2024
MANCOSA
All rights reserved, no part of this book may be reproduced in any form or by any means, including photocopying machines,
without the written permission of the publisher.Please report all errors and omissions to the following email address:
[email protected]
 Web Development

Table of Contents
Preface 2
Unit 1: Introduction to the Basic Principles of Website Construction 11
Unit 2: Hyper Text Mark-up Languages and Related Tools for Website
41
Construction
Unit 3: Importance of Structure and Design 80
Unit 4: User Behaviour in a Web Environment 120
Unit 5: Best Practice on the Creation, Organisation and Maintenance of
146
Websites
References 176
Bibliography 177

1
 Web Development

Preface
A. Welcome
Dear Student

It is a great pleasure to welcome you to Web Development (WD5). To make sure that you share our
passion about this area of study, we encourage you to read this overview thoroughly. Refer to it as
often as you need to, since it will certainly make studying this module a lot easier. The intention of this
module is to develop both your confidence and proficiency in this module.

The field of Web Development is extremely dynamic and challenging. The learning content, activities
and self- study questions contained in this guide will therefore provide you with opportunities to
explore the latest developments in this field and help you to discover the field of Web Development
as it is practiced today.

This is a distance-learning module. Since you do not have a tutor standing next to you while you
study, , you need to apply self-discipline. You will have the opportunity to collaborate with each other
via social media tools. Your study skills will include self-direction and responsibility. However, you will
gain a lot from the experience! These study skills will contribute to your life skills, which will help you
to succeed in all areas of life.

This module guide is an integral part of the MANCOSA Higher Certificate in Information Technology
qualification and serves to introduce the student to the fundamentals of Web Development. This is an
introductory module and provide for the student a grounding in Web Development which will later
assist students to understand modules done at the next level of study if they so wish to pursue a
career in Web Development and Web Design.

Web Development is an evolving field and changes to the subject matter are rapid, just as all aspects
of Information Technology. If this is a chose career path, it is advisable to keep up t date with the latest
technologies in the field.

The AIM of this module is to provide the learner with a basis for an understanding of Web
Development. Web Development has several components to it but this module seeks to introduce
basic concepts to the learner. This provides a foundation which will lead to more advanced concepts
later in the learner’s academic future.

2
 Web Development

Please note that some Activities, Think Points and Revision Questions may not have answers
available, where answers are not available this can be further discussed with your lecturer at
the webinars.

We hope you enjoy the module.

-------
MANCOSA does not own or purport to own, unless explicitly stated otherwise, any intellectual property
rights in or to multimedia used or provided in this module guide. Such multimedia is copyrighted by the
respective creators thereto and used by MANCOSA for educational purposes only. Should you wish to use
copyrighted material from this guide for purposes of your own that extend beyond fair dealing/use, you
must obtain permission from the copyright owner.

B. Module Overview
The Module is a 15 credit module at NQF level 5. The purpose of this module is to provide you with a
sound theoretical framework creating an understanding and overview of the key concepts which will
be used throughout this program. You will be introduced to the concept of projects and project
management. We will unpack the phases in a project life cycle and consider the respective
international standards and global trends.

Purpose of the module:

The purpose of this module is to incrementally expose the student’s understanding to Web
Technologies using programming tools already mastered through previous modules. Students are
exposed to the evaluation of the idea of a website through the process of constructing and
maintaining a website. Various types of websites are dealt with e.g. e-commerce websites,
information-based websites etc.

Contents and Structure

Section 1: Introduction to the Basic Principles of Website Construction

This first section is where we look at the basic element of a Web page and an introduction in the
concepts of Hyperlinking. It is also important to understand that while the field of Information
Technology is constantly changing, these basic elements hardly ever change. It is this initial work that
has remained constant and other areas of Web Development has changed. Students will be
3
 Web Development

introduced to the concepts of Usability and Standards, and these are recognized worldwide. Web
Accessibility is something that plays a very important role in Web Development, but not much
consideration is given to it.

Section 2: Mark-up Languages & Related Tools for Website Construction

Students are given a brief introduction into the history of the Internet, before exploring the concept of
Mark-up languages. A brief look at the history of Web browsers and how it came into being where we
currently have the number of Web browsers in use today. Students are they introduced to the concept
of Mark-up languages and HTML Elements. A comprehensive look into XML leads to the conclusion
of Section 2.

Section 3: The Importance of Structure and Design

Like so many other aspects of Information Technology, Web Development has ‘borrowed’ concepts
from it to ensure uniformity. As there is a process set out for Systems Analysis and Design, so too has
there been a model to prescribe to for Web Development. Students are introduced to the Web
Development Life Cycle. The 5 phases to this are: Planning, Analysis, Design and Development,
Testing, and Implementation and Maintenance. There is a comprehensive look into this life cycle. IN
conclusion to this section, students are guided by the importance of structure.

Section 4: User Behaviour in a Web Environment

In this section, students are introduced to Web technologies. The concepts of programming
languages like PHP, Perl and Java. These are common programming languages with the most
common being Java, that is used in most development taking place currently. User interaction is also
discussed and examples of the different types of Websites are explored.

4
 Web Development

Section 5: Best practice on the Creation, Organization & Maintenance of Websites

Students are exposed to best practice in relation to the creation, organization and maintenance of
Websites in Web Development. Fundamental concepts like organise, file naming, and folder naming,
creating effective and accessible content are some of the topics that students are introduced too. In
terms of maintenance, students are introduced to the Backup and Recovery and this also shows best
practice.

Section 6: Conclusion

A summary of all the sections and how they fit together to form the module on Web Development.

Figure 1: Overview of Module Structure

5
 Web Development

C. Exit Level Outcomes and Associated Assessment Criteria of the

Programme

D. Learning Outcomes and Associated Assessment Criteria of the Module

E. Programme Notional Learning Hours

Learnin
Types of learning activities g Time
%

Lectures/Workshops (face to face, limited or technologically mediated) 10

Tutorials: individual groups of 30 or less 0

6
 Web Development

Syndicate groups 0

Practical workplace experience (experiential learning/work-based learning etc.) 0

Independent self-study of standard texts and references (study guides, books, journal
60
articles)

Independent self-study of specially prepared materials (case studies, multi-media, etc.) 25

Other: Online 5

Total 100

F. How to Use this Module

This Module Guide was compiled to help you work through your units and textbook for this module,
by breaking your studies into manageable parts. The Module Guide gives you extra theory and
explanations where necessary, and so enables you to get the most from your module.

The purpose of the Module Guide is to allow you the opportunity to integrate the theoretical concepts
from the prescribed textbook and recommended readings. We suggest that you briefly skim read
through the entire guide to get an overview of its contents. At the beginning of each Unit, you will find
a list of Learning Outcomes and Associated Assessment Criteria. This outlines the main points that
you should understand when you have completed the Unit/s. Do not attempt to read and study
everything at once. Each study session should be 90 minutes without a break

This module should be studied using the prescribed and recommended textbooks/readings and the
relevant sections of this Module Guide. You must read about the topic that you intend to study in the
appropriate section before you start reading the textbook in detail. Ensure that you make your own
notes as you work through both the textbook and this module. In the event that you do not have the
prescribed and recommended textbooks/readings, you must make use of any other source that deals
with the sections in this module. If you want to do further reading, and want to obtain publications that
were used as source documents when we wrote this guide, you should look at the reference list and
the bibliography at the end of the Module Guide. In addition, at the end of each Unit there may be link
to the PowerPoint presentation and other useful reading.

7
 Web Development

G. Study Material
The study material for this module includes programme handbook, this Module Guide, a list of
prescribed and recommended textbooks/readings which may be supplemented by additional
readings.

H. Prescribed Textbook
The textbook presents a tremendous amount of material in a simple, easy-to-learn format. You should
read ahead during your course. Make a point of it to re-read the learning content in your module
textbook. This will increase your retention of important concepts and skills. You may wish to read
more widely than just the Module Guide and the prescribed textbook, the Bibliography and Reference
list provides you with additional reading.

The precribed and recommended readings for this module are:

Prescribed Reading

Carey, P. (2021) New Perspectives on HTML 5 and CSS: Comprehensive: Comprehensive

(MindTap Course List). Eighth Edition. Australia, Brazil, Mexico, Singapore, United Kingdom,
United States: Cengage Learning

Recommended Reading

DuRocher, D. (2021) HTML and CSS Quickstart Guide. The simplified Beginners Guide to
Developing a strong coding Foundation, Building Responsive Websites, and mastering of modern
websites A Social, Ethical and Legal Perspective. ClydeBank Media LLC: Idea Group Publishing
Frain, B. (2020) Responsive Web Design with HTML5 and CSS: Develop future-proof responsive
websites using the latest HTML5 and CSS techniques. Third Edition. Birmingham, UK: Packt
Publishing
Carey, P. (2020). New Perspectives on HTML 5 and CSS: Comprehensive: Comprehensive
(MindTap Course List) 8th Edition, Cengage Learning

I. Special Features
In the Module Guide, you will find the following icons together with a description. These are designed to
help you study. It is imperative that you work through them as they also provide guidelines for examination
purposes.

8
 Web Development

~~~~~~~~~~~~~~

Special Feature Icon Description

The Learning Outcomes indicate what aspects of the particular

LEARNING
Unit you have to master and demonstrate that you have
OUTCOMES
mastered them.

The Associated Assessment Criteria is the evaluation of student

ASSOCIATED
understanding with respect to agreed-upon outcomes. The
ASSESSMENT
Criteria set the standard for the successful demonstration of the
CRITERIA
understanding of a concept or skill.

A think point asks you to stop and think about an issue.

THINK POINT Sometimes you are asked to apply a concept to your own
experience or to think of an example.

You may come across activities that ask you to carry out specific
tasks. In most cases, there are no right or wrong answers to
ACTIVITY
these activities. The aim of the activities is to give you an
opportunity to apply what you have learned.

At this point, you should read the reference supplied. If you are
unable to acquire the suggested readings, then you are
READINGS
welcome to consult any current source that deals with the
subject. This constitutes research.

PRACTICAL
Real examples or cases will be discussed to enhance
APPLICATION
understanding of this Module Guide.
OR EXAMPLES

You may come across knowledge check questions at the end of

KNOWLEDGE
each Unit in the form of Multiple-choice questions (MCQ’s) that
CHECK
will test your knowledge. You should refer to the module for the
QUESTIONS
answers or your textbook(s).

You may come across self-assessment questions that test your

REVISION understanding of what you have learned so far. These may be
QUESTIONS attempted with the aid of your textbooks, journal articles and
Module Guide.

9
 Web Development

Case studies are included in different sections in this module

CASE STUDY guide. This activity provides students with the opportunity to
apply theory to practice.

VIDEO You may come across links to videos as well as instructions on

ACTIVITY activities to attend to after watching the video.

10
 Web Development

Unit
1: Introduction to the Basic Principles of
Website Construction

Unit 1: Introduction to the Basic Principles of Website Construction

11
 Web Development

Unit Learning Outcomes

Prescribed and Recommended Textbooks/Readings

Prescribed Reading
Carey, P. (2021) New Perspectives on HTML 5 and CSS:
Comprehensive: Comprehensive (MindTap Course List). Eighth Edition.
Australia, Brazil, Mexico, Singapore, United Kingdom, United States:
Cengage Learning

Recommended Reading
DuRocher, D. (2021) HTML and CSS Quickstart Guide. The simplified
Beginners Guide to Developing a strong coding Foundation, Building
Responsive Websites, and mastering of modern websites A Social,
Ethical and Legal Perspective. ClydeBank Media LLC: Idea Group
Publishing

Frain, B. (2020) Responsive Web Design with HTML5 and CSS: Develop
future-proof responsive websites using the latest HTML5 and CSS
techniques. Third Edition. Birmingham, UK: Packt Publishing

Carey, P. (2020). New Perspectives on HTML 5 and CSS:

Comprehensive: Comprehensive (MindTap Course List) 8th Edition,
Cengage Learning

12
 Web Development

1.1 Introduction
The Web has grown in leaps and bounds over the past two decades. The advent of Web 1.0 and its
advancement to Web 2.0 has seen more businesses and people using the Web more and more.
However, the fundamentals of creating website that form the Web are often overlooked by many. As
IT students, a clear understanding of the creation of website and/or web applications is critical in the
age of the Fourth Industrial Revolution (4IR).
In this section of the module emphasis will be placed on the fundamental terminology and principles
that need to considered in creating website that are fit for purpose. This section will also introduce
you to the process of creating basic websites.

Video Activity 1.1

Follow the link and answer the questions that follow:

https://www.youtube.com/watch?v=AhvEca4Vhwk&list=RDCMUCELSb-
IYi_d5rYFOxWeOz5g&index=1
1. Explain the Grid system?
2. While writing an error message what aspects should you take into
consideration.

1.2 Elements of a Web Page

Today, many people – individuals, students, teachers, business executives, Web developers, and
others – are developing Web pages for personal or professional reasons. Each person has their own
style and the resulting Web pages are as diverse as the people who create them. Most Web pages,
however, include several basic features, or elements. A web page’s elements hold the web page’s
content, which is the most important part of a web page. After deciding on which elements to use and
implementing those elements, you will want to focus on formatting the content. (Dean, J, 2019:28)

Browser Window Elements

The title of a Web page is the text that appears in the title bar and taskbar of the web browser window
when a Web page appears. The title is also the name assigned to the page if the user adds the page
to the browser’s list of favourites, or bookmarks. It is important that a title should be included for every
web page. The title, which usually is the first element you see, should identify the subject or purpose
of the page. The title of a web page falls under the head element in an HTML code.

The head element, which we will look at in detail below, include all elements associated with the web
13
 Web Development

page as a whole.

The title should be concise, yet descriptive, and briefly explain the page’s content or purpose to the
visitor. (Dean, J,2019:31)

Practical Application 1.1

This example shows how to integrate a title in an HTML code.

In your editor of choice write the following code and save document with the
extension .html for you to get the results below.
<head>
<meta charset="utf-8">
<meta name="author" content="Your-name-here">
<meta name="description" content="Mancosa-higher-Certificate">
<title>MancosaHCI</title>
</head>
1. What is the title shown on the web page?

The example above contains Meta elements; Meta describes or gives information about the web
page. They are different types of Meta elements most of which are not necessary but advisable for
your web page to include some just like in example 1.1. An interesting thing to note is that Meta
elements do not necessarily need end tags </> as demonstrated in the example.

The body of the Web page contains the information that is displayed in the browser window. The body
can include text, graphics, and other elements. The body can include text, graphics, and other
elements. The Web page displays anything that is contained within the <body> (start body) and
</body) (end body) tags. The background of the Web page is a solid colour, a picture, or a graphic
against which the other elements on the Web page appear. When choosing your background, be
sure it does not overpower the information on the Web page.

As you surf the Web, watch for background colours or images that do not allow the content of the
14
 Web Development

Web to show through. This is certainly a “what not to do” guideline for Web developers (Dean,
J,2019:34)

Text Elements

Normal text is the default text format used for main content of a Web page. Normal text can be used
in a standard paragraph or formatted to appear as: bold, italic, or underlined; in different colours; and
so on. You can also use inline styles to alter the format of the text. Normal text can also be used in a
series of text items called a list. Typically, lists are bulleted or numbered. Various attributes of lists can
be altered. For example, you might want to have square bullets rather than the default round bullets,
or to have your list text in italic or bold.

Headings are used to set off paragraphs of text or different sections of a page. Headings are a larger
font size than normal text and are often bold or italic or a different colour than normal text. Heading
sizes run from 1 (the largest) to 6 (the smallest). You generally go from one heading size to the next
smallest when setting up a Web page. (Dean, J, 2019:31)

Image Elements

Web pages typically use several different types of graphics, or images, such as an icon, bullet, line,
photo, illustration, or other picture. An image used in a Web page is also known an inline image,
which means that the image or graphic file is not part of the HTML file. Instead, the Web browser
merges the separate graphic file into the Web page as it is displayed in the browser window. The
HTML file contains <img> tags that tell the browser which graphic file to request from the server,
where to insert it on the page and how to display it.

Web pages typically use several different types of inline images. An image map is a special type of
inline image in which you define one or more areas as hotspots. A hotspot is an area of an image that
activates a function when selected. For example, each hotspot in an image map can link to a different
Web page. Some inline images are animated, meaning they include motion and can change in
appearance.

15
 Web Development

Horizontal rules are lines that are displayed across a Web page to separate different sections of the
page. Although the appearance of a horizontal rule can vary, many Web pages use an inline image
as a horizontal rule. Alternatively, you can use the horizontal rule tag (<hr/> to add a simple horizontal
rule (Dean, J,2019:31)

Hyperlink Elements

One of the more important elements of a Web page is a hyperlink, or link. A link is text, an image, or
another Web page element that you click to instruct the browser to go to a location in a file or to
request a file from a server. On the Web, links are the primary way to navigate between Web pages
and among Websites. Links point not only to Web pages, but also to graphics, sound video, program
files, e-mail addresses, and parts of the same Web page.

Text links, also called hypertext links, are the most commonly used hyperlinks. When text identifies a
hyperlink, it usually appears as underlined text, in a colour different from the rest of the Web page
text. Image links are also very common. A corporate or organisational logo often serves as an image
link to the home page or corporate information (Dean, J, 2019:171)

16
 Web Development

Knowledge Check Questions 1.1

1. Lists of hypertext links should be enclosed within what tags?

A. <a> …</a>

B. <dl> … </dl>

C. <links> … </link>

D. <nav> … </nav>

2. What tag can be used to define the starting point for relative paths?
A. <start />

B. <base />

C. <a> … </a>

D. <link />

3. To link to the email address [email protected], use the URL:

A. mail:[email protected]

B. sms:[email protected]

C. fax:[email protected]

D. mailto:[email protected]

Other Elements

After determining the purpose of the Website and defining the content and functionality, you need to
consider the Website’s design. Some key considerations in Website design are defining how to
organise Web page content, selecting the appropriate Website structure, determining how to use
multimedia, addressing accessibility issues, and designing pages for an international audience. One
of the most important aspects of Website design is determining the best way to provide navigation on
the Website. If users cannot easily find the information that they are seeking, they will not return to
your website. (Dean, J,2019:34)

17
 Web Development

Think Point 1.1

1. Outline two web design paradigms/types

Practical Application or Examples 1.2

1. Explain with aid of a code, how to set an image as a web page

background?
2. Explain how a developer learn about web design

18
 Web Development

1.3 Web Design Principles

There are several design guidelines that can be found in several textbooks, for the purposes of this
course, only two guidelines will be focused on. And these can be applied globally. The two are:

Get it right
Make it nice

Getting it right means making sure that your site work properly, delivering their information and
services to all visitors. Making it nice means ensuring that the experience of visiting your sites is a
pleasant and rewarding one.

Gestalt principles are essential for web design, as users need to be able to comprehend what they
see and follow instructions quickly and easily. Without following the Gestalt principles, users may find
it difficult to make associations between unconnected or grouped items and exit the page.

Gestalt is a German word that means, “unified whole”. It describes how people typically view objects
by grouping like elements together and identifying the overall pattern before making sense of the
separate components and other details. The following are some of the Gestalt principles that are
linked to web development.

1. Proximity
2. Similarity
3. Continuation
4. Symmetry
5. Closure. (Carey, P,2020:814)

Video Activity 1.2

https://www.youtube.com/watch?v=ERQdkL9SN5o
Use the video link to answer the questions below.
1. Which of the Gestalt principles is described in the video?
2. What does the principle state in relation to web design?

Think Point 1.2

1. Outline the Gestalt Principles When Applied to Design.

19
 Web Development

Standards

Standards are a key component in getting things right. Within their scope, standards define what is
right – or at least they should do. Most standards have no legal status; they are just agreements
between interested parties that specify in detail the characteristics of components and processes,
with the intention of ensuring that products that conform to standards should be interchangeable. In
the case of the World Wide Web, standards specify the precise syntax and semantics of the various
languages used to create Web pages, and the protocols (rules governing the way computers
exchange data over the Internet) used to retrieve pages.

By conforming to standards, Web designers should be able to ensure that their pages will display and
behave correctly in all browsers. By implementing the standards, browser developers should be able
to ensure that their browsers will be able to display all Web pages correctly (Dean, J,2019:31)

In reality, matters are not quite so rosy. During the 1990’s, the makers of the two most widely used
browsers, Microsoft and Netscape, tried to compete to establish a monopoly. They did this by adding
propriety features to their browsers, deliberately making them incompatible. Only towards the end of
the 1990’s did the stupidity of this approach become evident, but since then progress towards the
universal acceptance of standards has been substantial, to the extent that all Web designers should
now be creating pages according to the standards, and not trying to cope with the quirks of older
browsers that do not implement standards correctly.

Several different bodies create standards concerning the World Wide Web. The most important is the
World Wide Web Consortium or W3C. W3C standards (officially called Recommendations, but
increasingly referred to less diffidently as standards) specify several languages of importance on the
Web. Chief among them is Extensible Mark-up Language (XML), Extensible HyperText Mark-up
Language (XHTML) and Cascading Style Sheets (CSS), all of which is described later in this module.
The W3C also specifies a Document Object Model (DOM), which provides a means for programs to
interact with the components of Web pages, although the standard for the scripting language most
often used in conjunction with the W3C DOM is, JavaScript (Dean, J,2019:31)

20
 Web Development

Knowledge Check Questions 1.2

1. DOM is a tree-like structure that is created when an HTML document is

loaded in a browser.

True
False

2. What does W3C stand for?

A. World Wide Web Computing

B. World Wide Web Corporation
C. World Wide Web Creators
D. World Wide Web Consortium

3. Every node in the DOM represents an HTML element.

True
False

1.4 Technical Aspects of Effective Web Design

Website design is not all about just creating a website in an attractive way because it may be possible
that the site which is looking attractive has many technical disadvantages. We will focus on technical
aspects that are required for designing a website in a completely professional way. Nowadays, most
people prefer to use templates which is quite easy and convenient to use but there may be more
harm than good. Its primary advantage is simplicity as well as affordability. However, the impact
occasioned by the disadvantages outstrips the benefits.

Take a look at the disadvantages of a template-based website which are mentioned below:

Technical Challenges: In designing a website, there is a lot of coding at the backend. The back
coding includes HTML, JavaScript, and CSS along with many others. This coding is very helpful to do
many kinds of changes or updates frequently in an easy and convenient way. It is just opposite in
case of template-based website. You cannot do any kind of change in it. It is usually very difficult or
just impossible. Hence, it is very important to choose a good web design company where professional
designers can design your website in a way that is easy to manage and update in the future as per
the requirements.

Difficult or Impossible to Customise: Nowadays, many people use their cell phones to browse or

21
 Web Development

perform various searches online. It is however, very difficult and tedious to develop a customised site
that can run efficiently on a mobile phone. In case you want to design a website which can proficiently
run on personal computers as well as on mobile phones, you must hire a professional web design
company to create two separate versions of your site; one is for PCs or Mac and the other for mobile
phones exclusively.

Common: Once you find a template for your website, there is a possibility that thousands of other
people are using the same template. Having the same or common template that is used by various
other companies or organisations will not create a good impression of your organisation. Moreover,
you cannot establish your company as a brand by using these common-feature templates, which are
generally used by many people or organisations.

Search Engines Unfriendly: Template-based websites are not friendly to search engines as their
crawlers or spiders find great difficulties in visiting and indexing sites frequently. There may be
difficulties in implementing Search Engine Optimisation (SEO) tags such as h1 tag, h2 tag, Meta tags.
(Dean, J,2019:38)

Video Activity 1.3

Follow the link and answer the questions that follow:

https://www.youtube.com/watch?v=mOA0WH00reA
1. What are some of the bad examples in web design?
2. As a web-designer while declaring the “delete” button. What would be
your colour of choice?

1.5 Web Accessibility

It is vital to the success of any website that its designers never lose sight of the fact that it exists to
communicate with and provide services to the people who visit it. If it fails to do so, it will also fail in
any other purpose it may have, such as making money for its owners, providing information, or
enhancing, the reputations of its designers. No amount of programming or design virtuosity can
compensate for a website that is hard or impossible to use.

Just about everybody will have come across sites that are so poorly presented and/or organised that
it is a struggle to figure out what you have to do to use the site. You may however find it hard to
imagine a site that is actually impossible to use. If so, you probably have good vision and motor
control, and no cognitive disabilities. For people who do not share your good fortune, it is quite
conceivable that Websites might be literally unusable (Carey, P,2020:182)
22
 Web Development

Activity 1.1

1. Using your own words, describe web accessibility?

2. What characteristics should an accessible website possess?

1.6 Problems with Access

If a Web page is equally usable by everybody, irrespective of any physical or mental limitations they
may suffer from at the time, it is said to be accessible. Following the latest draft guidelines of the
W3C Web Accessibility Initiative, we can refine the definition, by saying that a page is accessible if
and only if its content is perceivable by every user, any interface components it contains are operable
by every user, the content and controls are understandable to every user and the content is robust
enough to work with current and future technologies. These four principles of accessibility are
sometimes collectively referred to by the acronym POUR (Carey, P. 2020:183).

Making Web sites accessible benefits a wide range of people, but it most obviously and effectively
helps people with physical and mental disabilities. If this does not make you feel a social obligation to
maximise the accessibility of your sites, you should be aware that in many countries there are legal
requirements to do so. Legislation forbidding discrimination against people with disabilities is
increasingly common around the world. Although there is considerable variation among the laws in
different countries, generally, where disability legislation is in force, either Web sites are explicitly
required to provide certain sorts of services to be made accessible – according to some specification
criterion – or general prohibitions against discrimination are interpreted by lawyers as applying to
Web sites.

We would expect most Web designers to feel that making sites accessible is the right thing to do,
irrespective of the legal position. However, the existence of laws that effectively require sites to be
accessible provides a lever for convincing clients that it is worth the extra effort and cost to maximise
accessibility. Another argument is provided by the number of people affected by accessibility issues.

It is not possible to arrive at an accurate value for the number of people in the world facing barriers to
Web access. Not all problems are reported; the only figures that are readily available are those for
people who are officially registered as disabled, but definitions of what qualifies as disability vary from
country to country. A broad picture can be obtained for some conditions though.

23
 Web Development

Think Point 1.3

POUR is an acronym for accessibility principles. Can you list these
principles and briefly explain them.

Even if we add together all the people who might possibly be suffering from some permanent or
temporary condition that interferes with their access to Web sites, we still underestimate the potential
benefits of making sites accessible. People who work in noisy environments cannot always hear
anything on their computers, so they are presented with the same barriers to using the Web as deaf
people.

Anybody who uses a mobile device to access Web sites may experience the same problem as
somebody with limited vision or an injury that prevents them from using a mouse. The small screens
of these devices often prevent an entire page being displayed at once: a similar problem is faced by
people who use screen magnifiers. The revenue models and low bandwidth of current mobile
connection makes downloading of large images expensive and slow, so users may prefer to turn off
image loading, so that they need to be able to understand and use pages without images, just as
blind people using screen readers do. Mobile devices usually lack any pointing device, so that sites
that reply on the use of a mouse are as inaccessible to mobile users as to Repetitive Strain Injury
sufferers. Finally, mobile devices rarely support scripting and the full range of plug-ins used by
desktop browsers, so mobile users may be denied interactivity and multimedia content, in the same
way as users who are blind or deaf. Thus, increasing accessibility does not just benefit users with
physical or cognitive problems, it also benefits users with mobile devices (who tend to have relatively
large disposable incomes, if you insist in viewing accessibility in commercial terms).

There is one final benefit from increasing accessibility. The robots and spiders that crawl the World
Wide Web on behalf of search engines cannot see, hear or use a mouse. Any information that is
embedded in a bitmapped image cannot be indexed; any links that can only be activated by a mouse
click (perhaps because they are implemented using script) cannot be followed. In other words, by
making your site accessible, you increase the amount of information that can be extracted from it
automatically, and thus you increase the site’s visibility to search engines. (Carey, P,2020:182).

1.7 Accessible Content

Screen readers can only read text, but the majority of Web pages include some non-textual elements.
Images appear on most Web pages, but time-based media, including animation, and applets are also
fairly common. If these non-textual elements are to be accessible, some way of making them evident

24
 Web Development

to screen readers and similar technology is required.

Activity 1.2

1. Briefly outline the benefits of using website templates.

1.8 Time Based Media

Time-based media require textual alternatives at least as much as still images do, since video and
animation often include soundtracks, and sound is sometimes used alone on Web pages. When
considering time-based media, we must take account of the needs of people who cannot hear, either
because they are deaf or hard of hearing, or because they are using devices that do not support
audio. Such people require written text alternatives.

For video and animation, we still need to consider people who cannot see. Their needs may be met
by an audio equivalent to the visual content, such as a spoken commentary track. Any controls for
starting and pausing playback, and so on, should not require the use of a pointing device. This is
usually a property of the plug-in which is used, which cannot be controlled by the designer, but Flash
movies with embedded controls must take account of the needs of people who cannot use a mouse.

Ideally time-based media should be provided with a synchronised textual alternative, in the form of
captions or sub-titles, comprising a transcript of any dialogue or commentary and representations of
any significant sounds that occur, interspersed with a description of what is happening in the scene
being displayed. This is a tall order, especially for live video, and a lesser compromise may be
required. On the other hand, even providing synchronised captions does not satisfy the needs of all
users.

Some people who are deaf, especially those who were born deaf, are more fluent in sign language
than they are in written language, so, to provide the best experience for such people, a sign
interpretation should be supplied (as it often is for televised transmissions of important political
events, for instance). Since the sign languages used in different countries are different, this presents
considerable problems, and is a task that would usually require the services of a specialist agency.

XHTML provides no means for attaching synchronised text tracks to video, but all the major Web
video formats do. Hence, adding these tracks is part of the video post-production processes. Plug-ins
do not always make it possible to turn captions on and off, so it may be necessary to provide two
versions of a video clip and allow users to choose which one to play.
25
 Web Development

Software tools of creating caption text and adding time code to it in order to synchronise it with video
are available. Advice on how to write captions so that they convey their information most efficiently
can be obtained from various organisations concerned with captioning – a considerable body of
experience has grown out of the use of captions in television.

To augment the synchronised captions, a complete transcript should be supplied. This can be an
XHTML document, which can be pointed to by a link. Whereas captions that are part of the
embedded video may not be accessible to screen readers, a transcript of this sort always would be,
so it can serve as an alternative for blind users. Transcripts can also benefit people with cognitive
difficulties, who may have trouble following what is going on in a video, and people who are learning
the language used on the soundtrack. As with captions, the transcript includes a description of
significant actions and sounds, as well as any spoken content.

If it is feasible to supply a synchronised textual alternative or a full transcript for embedded time-
based media, you must at least provide a short alternative, as you do for images. (This is your only
real option for animated GIFs). Ideally, the description should give some indication of what happens,
but if this is not possible in a few words the text should state the subject of the video or animation.

The content of an object element is displayed if the media it embeds cannot be, so a textual
alternative can be placed there. If you must use the embed element, it has an alt attribute that can be
used in the same way as for img elements. These ways of providing alternatives are not entirely
satisfactory, because they require users to disable the display of video in order to allow the alternative
text to be displayed.

All of this may tempt you to simply forget about using time-based media on your Web pages. You
should bear in mind, though, that a short animation or video clip may convey information more clearly
than pure text, especially to people who suffer from some sort of cognitive problem, so by banishing
time-based media you may decrease the accessibility of your site in some ways. It is certainly the
case that you should not abandon the use of images since these can undoubtedly communicate
efficiently and making them accessible with alt text presents no substantial problems.

26
 Web Development

Activity 1.3

1. Time based media is one of the web accessibility guidelines. Can you list
examples of content regarded as time-based media?
2. Identify other platforms and content libraries that run mostly time based
media.

Colour

If colour is used wisely, people with defective colour vision may be unable to distinguish some of the
content of a Web page. To take an extreme – and, we hope, unlikely – example, if you use green text
on a red background of the same brightness (or vice versa), people who are red/green colour-blind
will be completely unable to read it – indeed they will probably not even realise that there is text on a
page. In situations where colour is used to convey information, as when red is used to highlight
compulsory fields in a date entry form, people who cannot distinguish colours may fail to perceive the
necessary information.

You can use programs that simulate what people with various colour defects see in order to find out
whether a particular combination is likely to cause problems. More simply, you can just switch your
display to greyscale – although few people are unable to distinguish any colours as well, this will
show you the tonal contrast present in your colour scheme. Somebody who is red/green colour-blind
will be able to read red text on a green background, provided that the red and green differ enough in
tone.

(Just as anybody can read red text on a red background, if one red is light and the other dark).
Maintaining high tonal contrast between text and its background will ensure that information can be
perceived by the maximum number of sighted users and is generally to be recommended in all cases.

Where diagrams of other created graphics are used, colour schemes should also be chosen to
maintain a good tonal contrast, for instance, in a pie chart, the colours of adjacent slices should
contrast in tone. High contrast is, in itself, of great benefit to anybody whit low vision, so maintaining it
wherever possible contributes to accessibility for a much larger group of people than those who have
problems distinguishing different colours.

27
 Web Development

If a page uses a patterned or textured background, you should make sure that there is even more
tonal contrast between it and any text that is superimposed on it.

Your own eyes should tell you if a background texture is interfering with the legibility of text, but if in
doubt, avoid the use of textured backgrounds. The Web Content Accessibility Guidelines (WCAG) 1.0
guidelines also require you to ensure that all information conveyed with colour is also available
without colour. Context or additional styling should be used to supplement any colour coding.

For instance, where a colour is used to denote which of the fields in a form the user is required to
complete, an asterisk, or the word required, can be placed next to the fields label, or the label can be
set in bold or italic. The classic example default style of displaying links, they are shown in blue and
underlined, so anyone who cannot perceive colour will see underlining. (However, by default, colour
alone is used to distinguish between visited links, which violates this guideline.) A different approach
is to add icons and other ornaments that do not depend on colour to argument information conveyed
in colour. For instance, some sites append a little icon to links.

As before, it is not colour in the wide sense that causes problems, just hue, so variations in brightness
can be used to convey information. For instance, if a background highlight is used to indicate the
presence of a link, it is only necessary to ensure that it contrasts whit the link text and the page
background.

28
 Web Development

Practical Application or Examples 1.3

1. What is the best way to ensure that a Web site will not cause problems for
people with defective colour vision? How can you test whether a Web page
will be readable by someone with defective colour vision?
2. What is the main software used by a Web Designer for writing HTML
structures? How does one check for web design issues that appear in
websites?

Motion

Animation is a technique of creating the illusion of movement by displaying a sequence of changing

images, known as key frames, in rapid succession. The brain interprets the rapidly changing key
frames not as distinct images but rather as a single image in motion. CSS replaces the concept of key
frame images with key frame styles that are applied in rapid succession to a page object. While a
transition is limited to two style rules defined at the initial and end states, an animation can contain
multiple styles defined for each key frame.Probably all Web users have been irritated at one time or
another by distracting moving elements on a page, such as flashing icons or blinking text.

For some people these elements are more than a minor annoyance. In individuals with what is known
as a ‘photosensitive seizure disorder’, epileptic-like seizures may be triggered by flashes at certain
frequencies.

29
 Web Development

These seizures are serious and can lead to hospitalisation; potentially they can lead to injury or
death. Flashes of a saturated red colour are most likely to trigger photosensitive seizures. (Carey,
P,2020:670)

Preventing the use of detailed technical definitions of flash thresholds can prevent triggering
photosensitive seizures in individuals that suffer from that condition. As a web designer, you should
consider other safe and simple ways of creating good web pages. Avoid using flash content or
media. As you create your web pages you might want to avoid other features, for example the use of
the value blink for the text decoration feature in CSS and also avoid creating animations that use
strobe-like effects.

Another, less-dramatic, reason for avoiding blinking is that it has a distracting effect. Most people can
cope with this, but people suffering from certain cognitive problems, including attention deficit
disorders, may find blinking elements so distracting that they are unable to use the site. If you are
certain that your blinking will not be dangerous and you are convinced that its function of attracting
attention is necessary, you should arrange that nothing blinks for more than about three seconds.

Moving elements generally, can be difficult for people with various cognitive problems. In particular,
people who have difficulty reading will find it even harder, or impossible, to read moving text. The
fashion for using crawling and rolling text on the Web has more or less passed, although it is still seen
on some sites. If you found a compelling use for this effect, you should, in the interest of accessibility,
provide a way for users to pause the movement of the text to give themselves a chance to read it.
(Carey, P,2020:684).

Knowledge Check Questions 1.3

1. What indicates the content in a file is HTML when delivered on the

network

A) The extension of the file “.html”

B) The “content-type” header
C) Both “.html” extension and “content-type” header
D) The “content type” header

30
 Web Development

2. HTML and XHTML stands for ______

A) Hyper Text Mark-up Language and Extensible HyperText Mark-up

Language
B) Hyper Text Mark-up Language and Extensible HyperText Marking
Language
C) Hyper Text Marking Language and Extensible Hypertext Marking
Language
D) Hyper Text Marking Language and Extensible HyperText Mark-up
Language

3. The _____________ attribute specifies an inline style associated with an

element, which determines the rendering of the affected element.

A) Dir
B) Style
C) Class
D) Article

4. Which of the following CSS property should be used to make a responsive

image?

A) Float
B) Max-width
C) Margin-right
D) All of the above

5. Which of the following is used to read a HTML page and render it?

A) Web browser
B) Web server
C) Web matrix
D) Web network

31
 Web Development

Revision Questions

1. Mention what are the main language or platform used for web-design?
2. What is website designing?
3. HTTP defines two ways in which values entered by a user at the browser
can be sent to the Web server. Which method encodes the values as part of
the URL?

1.9 Summary
In this unit, the learning outcomes include the explanation of Website elements, Web design
principles and Web accessibility. Students were introduced to concepts such as the Gestalt theory,
which web designers are, encouraged to take into consideration when designing user-friendly web
page interfaces. In brief, the Gestalt theory states that humans see objects by grouping similar items
together and recognising the overall shape/pattern before seeing individual components and details.
(https://www.pedalo.co.uk/the-principles-of-gestalt-within-web-design). Web accessibility guidelines
should be adhered to when the ultimate goal is to create a good website. This is the foundation for
understanding good Web design and development.

Case Study 1.1

Aaron is the owner and principal chef of Bellville Foodies, a restaurant owner
and now food truck vendor in Cape Town that specialises in African dishes.
Aaron has hired you to develop the company’s website by laying out the web
site requirements to him and give him a brief overview of how the web site will
help him market and grow his business. Aaron does not know much about
technology and web design his main aim is to grow his business and attract
different types of customers. Aaron needs you to convince him that a website
will be able to cater for all his clients that is, the elderly, the young, the visually
impaired and even those with physical disabilities.
(Carey, P. 2020 New Perspectives on HTML 5 and CSS 8th Edition, Cengage
p. 59)

32
 Web Development

Answer to Activities

Activity 1.1

1. Web accessibility means that websites, tools, and technologies are designed and developed so
that people with disabilities can use them. More specifically, people can perceive, understand,
navigate, and interact with the Web.

2. Web accessibility encompasses all disabilities that affect access to the Web, including:

Auditory
Cognitive
Neurological
Physical
Speech
Visual

Web accessibility also benefits people without disabilities, for example:

People using mobile phones, smart watches, smart TVs, and other devices with small screens,
different input modes, etc.

Think point 1.1

Organisations are trying to become more competitive and efficient by digitally enabling their core
business processes and evolving into digital firms. The internet has stimulated globalisation by
dramatically reducing the costs of producing, buying and selling goods on a global scale. New
information system trends include the emerging mobile digital platform, big data (including LoT), more
remote management, democratisation of decision making, machine learning systems, and the
growing use of social media in business. Information systems are a foundation for conducting
business

Video Activity 1.1

1. A grid system is a structure comprising a series of horizontal and vertical lines which intersect and
used to arrange content. It is a way of providing a system that designers can work with the structure
and present content.
33
 Web Development

For web design beginners, it is always suggested that they use the pre-made framework for web
design as they are relatively easy to use.

2. You need to take following things in consideration

a. Don’t use negative words

b. Clearly mention the error so that the user knows what to correct

c. Give user a clue or link to solve the error

Practical Application 1.1

The title on the web page must read MancosaHCI

Think Points 1.1

1. Web Design can be broadly classified into two major types i.e., Static and Dynamic. Dynamic Web
Design are the one in which values and data are fetched regularly from database. Static Web Design
are the one’s which uses only the HTML CSS and JS portion for presenting web layouts with no data
fetching from database at all.

Practical Application or Examples 1.2

1. To set an image as a background on web page, point the body background to the name of your
image you want to set as a background as shown below.

</head>tag.

<body background= “picture.gif”>

You can also fix the background image, so while using the scroll bar in the browser, it does not move.
To do this add the BGPROPERTIES tag as shown below
<body background = “picture.gif”bgproperties=”fixed”>

34
 Web Development

Developer can learn about web design by following tips

2. Visit website like “Smashing Magazine” to get better idea about web design

Another website is “Best Web Gallery” can also be helpful to get insight of quality design and layouts

Try your hands-on tools like Adobe Illustrator

Create dynamic website using MySQL and PHP

Learn basic languages as HTML, CSS, JavaScript, PHP, or jQuery

Knowledge check Questions 1.1

1. A

2. B

3. D

Video Activity 1.2

1. Proximity

2. The Gestalt law of proximity states that “objects or shapes that are close to one another appear to
form groups”. Even if the shapes, sizes, and objects are radically different, they will appear as a group
if they are close together. Good examples of proximity can be seen in web design when menu links or
buttons are kept close together, such that a sense of ‘unity’ and clarity is created between these
elements.

Think Point 1.2

Clarity, whitespace, and simplicity directly relates to one another. In order to achieve clarity, the UI
should be simple, easy to use, and uncluttered, employing many different facets of whitespace to give
importance to or take attention away from elements.

35
 Web Development

Clarity - Clarity among elements on a page means that every piece should have a clear purpose for
its presence on the page as well as its positioning. Clarity can also refer to the literal sharpness of an
object.

Whitespace - Whitespace can mean many things. It could mean, very obviously, the space
surrounding any element. The spacing between elements does not have to be literal white, but
alludes more to the negative space surrounding the elements. The amount of negative space
employed can give a very different feel from website to website. Whitespace could also refer to the
line-spacing between lines of text. Whitespace can also be found in the margins and padding of
elements.

Simplicity - It has been proven that simple website designs are preferred by users. Unless your
website is specifically geared toward tantalising people with a mind-blowing design, most of the time
your users are simply looking for information. Sometimes complex designs can interfere

Video Activity 1. 3

1. Some examples of bad web design:

Blinking, spinning or flashing images

Black background with white, light or pale text
Black backgrounds with dark text
Busy tiled background images with any color text
Everything Centered
Too many images or huge images
List of links
Too many headlines or Blinking text

2. Make the “Delete” button more prominent by using color like Red, especially when you have to
must show two button side by side. Red is sign of caution, so that will definitely help the user to draw
their attention.

Knowledge Check Questions 1.2

1. True

2. D
36
 Web Development

3. True

Think Point 1.3

1. Perceivable – This means a user should be able to identify content and interface elements using
their senses. This could be by use of vision for some users or sound and touch for others.

2. Operable- This refers to the successful use of controls, buttons, navigation and other interactive
elements available on the website. This means that the interface should the easy to operate either by
use of the mouse to click, drag, swipe or tap. The same applies if a user can only use the keyboard or
to operate the interface.

3. Understandable- The web page must be easy for users to comprehend its content.

4. Robust- It should be easy for users to choose the technology they would like to use to interact with
websites. Accessing a web page should not be mammoth task or challenge.

Activity 1. 2

Templates offer several benefits that both inexperienced and experienced web designers can use
to their advantage. For example, novices who want to learn how high-quality websites should look
like can examine the coding used in a well-coded template
For professional web designers who take on multiple small projects, templates can be a great
time-saver
Instead of making designs from scratch, they can just use a template as the basic layout for a
website and then customise and optimise it according to their client’s specifications
Templates also serve as excellent visual aids especially for clients who may find it difficult to
imagine how your creative ideas look like. If you want to show a client how the finished product
should look like, you can use a template to communicate that clearly
Templates are commonly used for small website projects, landing pages, and personal blogging
sites. But templates have their own limitations, such as lack of flexibility

37
 Web Development

Practical Activity 1.3

1. Examples of time based media

Audio-only
Video-only
A combination audio/video
Audio and or video combined with an interaction

2. Time based media software platforms and content libraries examples:-

YouTube
Video.js
SoundCloud
Spotify

Activity 1.3

1. Making a suitable design for all forms of colour blindness can be exceedingly difficult. If you keep in
mind the following basic perceptions of colour, you can create User Interfaces (UI) that people with
colour deficit can relate with. So, hue, saturation and lightness can determine colour perception:

Hue is the spectral wavelength, represented by the outside edge of a colour wheel (red, orange,
yellow, green, blue and violet)
Saturation is the scale from grey at the centre of the colour wheel to the pure vivid colour at the
edge, sometimes called shade
Lightness is the level of darkness or lightness, sometimes called tint

Visolve executes the following colour transformations:

Red – Green transformation, makes reds brighter, and greens darker.

Blue-Yellow transformation makes blues brighter, yellows darker.

Increases saturation.

Filters – darkens all colours other than the specified colour.

38
 Web Development

Hatches – draws different hatch patterns depending on the colour.

When people with colour blindness use this software and apply, for example Red-Green
transformation while keeping in mind the colour changes, they can easily guess a normal colour.

2. Adobe Dreamweaver, Notepad ++, Sublime, However, there are also other online software
available which are used for writing HTML for web structure.

Knowledge Check Questions 1.3

1. B

2. A

3. B

4. D

5. A

Case Study Answer

The first stage would be to explain to Aaron the importance of an effective web site which include:

1. A web site will increase his market potential, when people want to learn about a place, a restaurant
or company they visit its web site first to get all the information they need and also to have a picture of
what they will experience when they visit for the first time.

Use POUR to explain how the web site will cater for all types of people not leaving out the visually
impaired, people with physical disability and those with other specific conditions that are triggered by
bad graphic choices by the designer.

39
 Web Development

The website will display information about Belville Foodies, including the truck’s daily locations, menu,
catering opportunities, and contact information. It will also convey the message that customers will get
the same great food and service whether they order in the restaurant, from the food truck or through
the website. Special features such as time-based media in the form of a video clip will be used to
introduce the restaurant to the customers and also giving information on what they should expect if
they decide to visit the place.

40
 Web Development

Unit
2: Hyper Text Mark-up Languages and Related
Tools for Website Construction

U n i t 2 : H y p e r T e x t M a r k - u p L a n g u a g e s a n d R e l a t e d T o o l s f o r W e b s i t e C o n s t r u c t i o n

41
 Web Development

Unit Learning Outcomes

42
 Web Development

Prescribed and Recommended Textbooks/Readings

Prescribed Reading
Carey, P. (2021) New Perspectives on HTML 5 and CSS:
Comprehensive: Comprehensive (MindTap Course List). Eighth Edition.
Australia, Brazil, Mexico, Singapore, United Kingdom, United States:
Cengage Learning

Recommended Reading
DuRocher, D. (2021) HTML and CSS Quickstart Guide. The simplified
Beginners Guide to Developing a strong coding Foundation, Building
Responsive Websites, and mastering of modern websites A Social,
Ethical and Legal Perspective. ClydeBank Media LLC: Idea Group
Publishing

Frain, B. (2020) Responsive Web Design with HTML5 and CSS: Develop
future-proof responsive websites using the latest HTML5 and CSS
techniques. Third Edition. Birmingham, UK: Packt Publishing

Carey, P. (2020). New Perspectives on HTML 5 and CSS:

Comprehensive: Comprehensive (MindTap Course List) 8th Edition,
Cengage Learning

43
 Web Development

2.1 Introduction
The biggest obstacle to effectively using the Internet is the network’s sheer scope and size. Most of
the early Internet tools required users to master a bewildering array of terms, acronyms, and
commands. Due to the need for network users had to be well versed in computers and network
technology, Internet use was largely limited to programmers and computer specialists working for
universities, large businesses, and the government. The solution to this problem was developed in
1989 by Timothy Berners-Lee and other researchers at the CERN nuclear research facility near
Geneva, Switzerland.

They needed an information system that would make it easy for their researchers to locate and share
data on the CERN network, and so developed a system of hypertext documents. Hypertext is a
method of organisation in which data sources are interconnected through a series of links or
hyperlinks activated to jump from one data source to another. Hypertext is ideally suited for the
Internet because end users do not need to know where a service is located—they only need to know
how to activate the link. The effectiveness of this technique quickly spread beyond Geneva and was
adopted across the Internet.

The totality of these interconnected hypertext documents became known as the World Wide Web.
The fact that the Internet and the World Wide Web are synonymous in many users’ minds is a
testament to the success of the hypertext approach. (Carey.P, 2021:4)

Video Activity 2.1

Use the video link to answer questions on the brief history of the web.
https://www.youtube.com/watch?v=sSqZ_hJu9zA
1. What was the name of the program that Tim Berners-Lee wrote when he
needed to understand a lot of information, how to link people, hardware and
software?
2. In which year did he get the first web server up and running?
3. Which organisation declared the web as an open standard to be used by
everyone in 1993 ?

44
 Web Development

2.2 Understanding Web Browsers

A web browser is an easy to-use software tool with a graphical user interface for displaying web
pages and for accessing the web and other Internet resources. Microsoft’s Internet Explorer, Microsoft
Edge, Mozilla Firefox, Google Chrome, and Apple Safari browsers are examples.

It is no exaggeration to say that the World Wide Web has had as profound an effect on human
communication as the printing press. One key difference is that operation of the printing press was
limited to a few select tradesmen but on the web, everyone can be a publisher of a website. (Laudon
and Laudon,2022:222)

Before creating your first website, you will examine a short history of the web because that history
impact the way you write code for your web pages.We have all noticed that a web browser is also
included with the installation of a computer’s operating system. The following character should
however be considered when choosing a web browser.

Compatibility
Security
Ease of use
Functionality
Appeal

(https://us-cert.cisa.gov/ncas : Mindi Mcdowell)

A computer system can have more than one web browser installed. As many as they are they are
very few that are capable of performing different tasks effectively hence the need for one or more
browsers. Some web sites may work effectively with some web browsers and not so effective with
others.

45
 Web Development

Readings

Read up on browser wars in particular between Netscape and Microsoft.

Follow this link: https://acodez.in/browser-wars/

From that understand the evolution of Chrome and finally compare the
advantages and disadvantages of each of the common browsers

Differentiate Safari from the other popular browsers

Have an understating of browsers for mobile devices

Think Point 2.1

Considering the fact that DHTML is not a programming language but
instead combines the features of various web development technologies
for making web pages dynamic and interactive. 1. List the web
development technologies that are combined with DHTML?

2.3 What is Hypertext Markup Language?

Web pages are created using Hypertext Mark-up Language (HTML), which is an authoring
language used to create documents for the World Wide Web. HTML uses a set of special instruction
called tags or mark-up to define the structure and layout of a Web document and specify how the
page is displayed in a browser. A web page is a simple text file written in HTML (Hypertext Markup
Language).

A markup language is a language that describes the content and structure of a document by
“marking up” or tagging, different document elements. (Carey. P 2021:5)

HTML has gone through many phases from HTML, XHTMLand HTML 5.2. The diagram below shows
the HTML version history.

46
 Web Development

HTML documents are simple text files that are developed using text editors as simple as windows
note pad or Text editor for Mac. However, it is recommended that developers more advanced free
editors that provide built-in support and examples include notepad++, eclipse and coffeeCup. These
advanced and enhanced editors are good for beginners. However, professional web developers
working on large websites would use a web Integrated Development Environment (IDE). Wed IDE is
a software package that provides comprehensive coverage of all phases of the development process
from writing HTML code to creating scripts for programs running on web servers. (Carey. P, 2021:27)

Regardless of what platform you are using. One of the greatest benefits of Web technology is that the
same Web page can be viewed on many different types of digital hardware, including mobile devices
like smartphones.

47
 Web Development

Activity 2.1

1. There are 3 general categories of Electronic Mark-up, namely

Presentational Mark-up

Procedural Mark-up and

Descriptive Mark-up.

Research each of the above, provide information on each type of mark-up,

and write a brief outline of each.
Follow this link: https://www.techopedia.com/definition/2668/mark-up-language

2.4 HTML Elements

HTML combines tags and descriptive attributes that define how a document should appear in a Web
browser. HTML elements include headings, paragraphs, hyperlinks, lists, images, and more. When a
tag is discussed in general, without reference to a particular tag instance, it is called an element and it
is written without the angled brackets. There are two types of elements—container elements and void
elements.

A container element (usually called simply a “container”) has a start tag and an end tag, and it
contains content between its two tags. For example, the h1 element is a container. On the other hand,
a void element has just one tag, and its content is stored within the tag. (Dean, J.2019:29)

For example, when discussing the <h1>tag in general, refer to it as the h1 element.

HTML elements

The head element contains two types of elements—meta and title

The meta elements provide information about the web page. There are many different types of
meta elements—some you should always include, but most are just optional. The meta element is
a void element (not a container), so it does not have an end tag. E.g. <meta charset="utf-8" /> the
space and the dash are used by most programmers to end their void elements. (Dean, J,2019:31)
Title stores the document’s title or name, usually displayed in the browser title bar or on a browser
tab
Style defines the display styles used to render the document content
Script provides programming code for programs to be run within the document
Link specifies an external resource that the document is connected to

48
 Web Development

Base specifies the document’s location for use with resolving relative hypertext links. (Carey.
P,2021:33)

Knowledge Check Questions 2.1

1. Which of the following defines the page title for an HTML document?
1. A. <title>My Web Page</title>
2. B. <pageTitle>My Web Page</title>
3. C. <head id="title">My Web Page</title>
4. D. <titleStart>My Web Page</titleEnd>

2. a Marks content that acts as a hypertext link.

1. True
2. False

3. A style sheet is a set of rules specifying how page elements are displayed.
1. True
2. False

HTML Element Functionality

There are a number of available HTML elements. Below is a list of some of the functions they
perform:
Provide information about the web page (the metadata)
Building the content of the page into sections
Embed images, videos, audio clips, or other multimedia
Construct lists, tables, and forms
Product more information about certain text content
Link to style sheets which have rules about how the browser should display the page
Add scripts to make a page more interactive and dynamic. (Carey. P,2021,27)

49
 Web Development

The Element Hierarchy

The structure of an HTML document can be regarded of as a set of nested elements in a hierarchical
tree. The html element will be at the top of the hierarchy marking the entire document. Within the
HTML element is the head element enclosing information about the document itself and the body
element enclosing the content of the web page. The example code below shows the hierarchy and
how it is presented.

<html>

<head>

head content

</head>

<body>

body content

</body>

</html>

The head content and body content are nested elements enclosed within the document head and
body. You should always remember that, the body element is always placed after the head element.
(Carey. P,2021,28)

Creating an HTML file

To create an HTML file, you need to use a text editor and mentioned before. They are so many text
editors that can be used just to create a simple html file. Choose one that is most convenient to you.
For Windows users the windows notepad and for Mac users the text editor. After writing, your html
code save the file with a .html extension and open with a browser of your choice to view the output.

50
 Web Development

Creating the Basic Structure of an HTML File

• To create the basic structure of an HTML file, enter the tags

<!DOCTYPE html>

<html>

<head>

head content

</head>

<body>

body content

</body>

</html>

Where head, content, and body content contain nested elements that mark the content of the head
and body sections. (Carey. P,2021:31)

Creating a document head

The document head contains metadata, which is content that describes the document or information
about how the document should be processed by the browser. Examples of metadata elements that
can be found in the document head include:

Head
Base
Link
Meta
Script
51
 Web Development

Style
Title

The first metadata that will be added to the first html file is the title element. (Carey. P,2021:33)

Setting the Page Title

The title element is part of the document head because it’s not displayed within the web page, but
rather in the browser title bar or browser tab. Page titles are defined using the following title element

<title>document title</title>

Where document title is the text of the title. (Carey. P,2021:34)

Writing the page Body

The page body will include general mark-up tags that identify the major sections of the page body,
and working inward to more specific content within those sections. When designing the page body
you need to identify the page’s major headings. (Carey. P,2021:42)

52
 Web Development

Practical Application 2.1

Using the example code above, create a simple HTML file with the following
content.
<html>
<head>
<title>MancosaHCIT</title>
</head>
<body>
<h1>Web Development</h1>
<hr>
<p>
Creating an HTML file
</p>
</body>
</html>
1. If you save the file as .txt will it open as a webpage using a browser?
2. Which element represents the head?
3. What is the name of the page?

Cascading Style Sheets

There is a well-known fact that HTML only defines a document’s content and structure, not how it is
displayed. Style sheets written in the Cascading Style Sheets (CSS) language determine the
appearance of a webpage.

As with HTML, CSS has gone through several versions, the latest of which is CSS Version 3, more
commonly known as CSS. CSS is not based on a single specification but rather is built upon several
modules, where each module is focused on a separate design topic. (Carey. P,2021:50)

53
 Web Development

Types of Style Sheets

A website’s appearance is not the product of a single style sheet; rather, it is a combination of style
sheets starting from the browser style sheet and then superseded by user-defined style sheets,
external style sheets, embedded style sheets, and finally, inline styles. (Carey. P,2021,107)

Hierarchy of style sheets

The first styles to be processed in rendering a website are the browser styles or user agent styles,
built into the browser itself. In the absence of competing styles from other style sheets, browser styles
are the ones applied to the web page. The next styles to be processed are user-defined styles,
created by the user within the browser. For example, a user with a visual impairment could make a
website easier to read by altering the browser’s default settings, displaying text in highly contrasting
colours and a large font. Any user-defined style has precedence over a browser style. User-defined
styles are superseded by external styles, which are styles created and placed within a CSS file and
linked to the website.

Multiple documents can access the same style sheet, making it easier to apply a common design to
an entire website. Embedded styles are the styles placed within the HTML file itself. Embedded styles
only apply to the HTML document in which they are created and are not accessible to other
documents in the website.

Inline styles are added as attributes of specific elements within the HTML file. The use of embedded
styles and inline styles is not advisable because it violates one of the basic principles of HTML, that
HTML files should only describe the content and structure of the document and not the design itself.
Thus, the final appearance of the website is based on a combination of the styles from these different
sources. (Carey. P,2021:109)

CSS Rules

CSS rule uses a type selector with the hr element type and applies a width of 50% to all the hr
elements in the current web page of the give example below.

54
 Web Development

Practical Examples 2.2

The example shows an html code that includes css rules. Use the same
code in a text editor of your choice and describe the output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Student HCIT">
<title>Web development using html and css</title>
<style>
* {text-align: center;}
hr {width: 50%;}
h2, p {font-style: italic; color: blue;}
</style>
</head>
<body>
<h2>css rules</h2>
<hr>
<p>
Coding has never been this exciting<br>
Css rules
</p>
</body>
</html>

A “width of 50%” means that for each hr element, its horizontal line will span 50% of the width of its
enclosing container. Usually, but not always, the enclosing container will be the web page’s body
container. Now for another type of selector—the universal selector. The universal selector uses the
same syntax as the type selector, except that instead of specifying an element type, you specify *. The
asterisk is a wildcard. In general, a wildcard is something that matches every item in a collection of
things. (Dean,J 2019:75)

55
 Web Development

CSS Syntax and Style

The following example represents all three CSS rules in a style container.

<style>

* {text-align: center;}

hr {width: 50%;}

h2, p {font-style: italic; color: blue;}

</style>

In example 2.1 above the style container is positioned at the bottom of the web pages head container.
It is right to position it in the body container, but it is not recommended. (Dean,J,2019:77)

Document Object Model (DOM)

The Document Object Model (DOM) is a term that crops up particularly when discussing JavaScript’s
relationship to a page, and as a web designer/developer, it is an important term to be aware of. It is a
standard way of representing a document, in this case an HTML page, as a treelike data structure
composed of connected nodes. The nodes represent the elements, attributes, and text content in the
page. Through its branching, tree-like structure, the DOM describes how the nodes are nested inside
of each other.

The DOM and the nodes it contains are represented in JavaScript as objects, which describe what a
particular node contains and can do. Using JavaScript, individual components on the page can be
accessed using dot notation to traverse the tree structure. If you are not familiar with dot notation, it
simply means that one node in the DOM tree that is nested inside another can be accessed through
its containing nodes (known as objects in this context) by supplying the node (object) name
separated by a period. For example, the HTML page is represented in the DOM as an object named
document, which contains the actual HTML page contents. (Dean,J,2019:7)

56
 Web Development

Extensible Hypertext Mark-up Language (XHTML)

As you have learned, HTML uses tags to describe how a document should appear in a Web browser,
or the Web page format. HTML is used to display data, whereas Extensible Mark-up Language (XML)
is designed to transport and store data. XML provides a set of rules that are used to encode
documents in machine-readable form. Extensible Hypertext Mark-up Language (XHTML) is a
reformulation of HTML formatting, so it conforms to XML structure and content rules. By combining
HTML and XML, XHTML combines the display features of HTML and the stricter coding standards
required by XML.

2.5 Creating Web Pages

HTML has evolved and has been improved such that it is still being used to create web pages the
plan is that it will thrive as it is getting updates and improving on compatibility. The following are some
of the improved characteristics of HTML from its previous versions.

1. Backward Compatibility- HTML5 is compatible with the previous versions of HTML, syntax and
tags.
2. Error handling- It seeks to finally document how variations in syntax should be handled. Web
browsers have two choices when dealing with a parsing error: either implement the rules specified
in the HTML5 specification or abort processing the document at the first error.
3. Simplified doctype- HTML often begins its code with a doctype declaration. In the past, it used to
be very long and included many characters and was written like this <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">. This has since been simplified to this <!DOCTYPE html>.

(Carey. P, 2021:27)

57
 Web Development

To begin writing the HTML file:

1. Using text editor of your choice, create a new blank HTML file and save the file as hcit__about.html.
Always save your html filenames in lowercase letters and do not put spaces.

2. Enter the following code into the file:

<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

</body>

</html>

Think Point 2.2

HTML is not case sensitive but it is always good to write using lowercase
as it looks presentable and neat. Part of writing good HTML code is being
aware of a number of requirements.

1. Can you think of a few guidelines for writing good HTML code?

58
 Web Development

2.6 Tools for Creating HTML Documents

There are many different text editors, with varying degrees of functionality. Microsoft’s Notepad is free
and provides no special web functionality. To use it, the web developer simply enters text and the text
appears as is. Although it’s possible to use a plain text editor such as Notepad, most web developers
use a fancier type of text editor—a web authoring tool. Different web authoring tools have different
features that are intended to make the web development process easier. At a minimum, web
authoring tools are able to suggest valid code after the user has typed part of a command. This is
done by showing a pop-up to the user that suggests valid code that could complete the command
currently being entered. This auto-complete mechanism is often called intellisense and sometimes
called picklist. Another feature common to all web authoring tools is WYSIWYG, pronounced
“wizeewig.” It stands for “what you see is what you get.” WYSIWYG means that as you are editing your
text, you can see what your text will look like after it’s eventually uploaded to a website. On this book’s
website, we provide a tutorial for learning how to use the Visual Studio web-authoring tool. Visual
Studio is from Microsoft, so it is not free. However, fear not, Microsoftophiles. If you plan to use Visual
Studio for no business purposes, you can download Microsoft Visual Studio Community for free (that
means you—students, faculty, and open-source project contributors). Visual Studio Community
includes all the functionality of Visual Studio’s professional version.1

There are a lot of other web authoring tools that you are welcome to learn on your own. Visual Studio
and its offshoots run on Windows, but if you have a Mac(intosh) computer, check out Adobe’s
Dreamweaver web authoring tool. It works on both Windows and Mac. Or, do a Google search for
other web authoring tools—most are free and some are quite good! Normally, web-authoring tools
enable developers to create not just web pages, but other software as well. Such general-purpose
web authoring tools are normally referred to as integrated development environments, or IDEs for
short. (Carey. P,2021:25)

These advanced Web features make it simple to save any document, spreadsheet, database, or
presentation to display as a Web page. Corporate policies, procedure manuals and Power Point
presentations, an example can easily be saved as web pages and published to the company’s
intranet.

You can also create Web pages using “What You See Is What You Get” (WYSIWYG) editor such as
Adobe Dream Weaver, Adobe GoLive, MS FrontPage, CoffeeCup and Apache NetBeans HTML
editors etc.

59
 Web Development

Adobe Dreamweaver As of this writing, Dreamweaver has emerged as the industry-standard HTML
authoring tool, due the fact that it produces the cleanest code of any of its competitors. It does not
generate proprietary code and it will not change any code that you add. It is one of the most full-
featured authoring tools on the market. It has a steep learning curve.

Adobe GoLive Another powerful and professional-level HTML editing tool, GoLive supports all the
cutting-edge web technologies (JavaScript, ActiveX, WebObjects, style sheets, etc.). It also provides
excellent site management tools. Its interface is more difficult to learn than other tools, but it seems to
be worth the effort. Microsoft FrontPage (Windows only) FrontPage is easy for beginners to learn and
is popular with the business community. It offers wizards, themes, and tools that make web page
creation easy for beginners. FrontPage 2000 will not mangle your code the way earlier versions did,
which is good news, but it still produces code that many professional web authors consider to be
unsatisfactory.

CoffeeCup offers a free HTML editor, but if you are looking for more of a WYSIWYG (what you see is
what you get) setup, it offers a visual editor for an additional cost. You can use CoffeeCup to create
both HTML and CSS files, as well as to edit existing website files.

Apache NetBeans A free and open source integrated development environment (IDE), Apache’s
NetBeans can help you develop in HTML5, PHP, JavaScript, C++, and several other coding
languages. It offers code templates and generators, as well as project management tools to help
organise larger projects and teams.

A WYSIWYG editor is a program that provides a graphical user interface that allows a developer to
preview the Web page during its development. A WYSIWYG creates the HTML code for you as you
add elements to the Web page, which means that you do not have to enter HTML tags directly. The
main problem with WYSIWYG editors is that they often create ‘puffed-up’ HTML code (HTML tags
with many lines of additional code surrounding them).

Regardless of which type of program you use to create Web pages, it is important to understand the
specifics of HTML so that you can make changes outside of the editor. There are many other web-
authoring tools that you are welcome to learn on your own.

60
 Web Development

Visual Studio and its offshoots run on Windows, but if you have a Mac(intosh) computer, check out
Adobe’s Dreamweaver web authoring tool. It works on both Windows and Mac. (Dean, J,2019:27)

Practical Application or Examples 2.3

1. Write the code below in a text editor of your choice and show the output?
2. Is the code below in XML or HTML?
<note>
<date>2022-01-10</date>
<to>Siphe</to>
<from>Jacque</from>
<heading> Quick question?</heading>
<body>How do you like your coding?</body>
</note>.

2.7 Introducing XML

Extensible Mark-up Language or XML is a language for designing specialised mark-up languages
called XML vocabularies, which can be used for a variety of document needs. Some popular XML
vocabularies include MathML for mathematical content, CML for documenting chemical structures,
and MusicML for describing musical scores. Individual users and businesses can also create mark-up
languages tailored for their specific needs. The content

of XML documents resembles what you have seen for HTML documents in which content is marked
with element tags that can contain element attributes. (Carey, P,2020:911)

XML has its roots in the Standard Generalised Mark-up Language (SGML), a language introduced in
1980 that describes the structure and contents of any machine-readable information. SGML is device-
independent and system independent, meaning that document s written in XML can be used, in
theory, on almost any type of device under almost any type of operating system. An SGML
programmer concentrates on the data stored in an SGML document, not how that document will be
rendered. SGML has been the chosen vehicle for creating structured documents in businesses and
government organisations of all sizes.

61
 Web Development

For example, think of the daunting task of documenting all the parts used in a jet airplane, vehicle
simultaneously creating structure that engineers, mechanics, and developers can use to quickly
retrieve and edit that information. SGML provides tools to manage documentation projects of this
magnitude. (Carey, P,2020:618)

XML Release History

eXtensible Mark-up Language has evolved throughout the years but there remain to be two releases
available.

Version 1.0

XML Version 1 was designed in 1998. This version of the mark-up language has been revised and
updated throughout the year that truly make the currently available version 1 the fifth iteration of the
mark-up language. It was last updated and published on November 26, 2008. This version is widely
implemented throughout the internet and is still recommended for use.

Version 1.1

Published on February 4th, 2004, version 1.1 was meant to add specific user functionality. It enabled
the use of line-ending characters from EBCDIC platforms and the use of scripts and characters that
are absent from Unicode 3.2. This version is not widely available and is recommended for very
specific purposes.

Much of the online world can manage to work out mark-up schemas with version 1 of eXtensible
Mark-up Language. The updates and maintenance performed on the mark-up language since its
inception have solidified the currently available versions.

However, there has been discussions from online entities of developing a Version 2.0. As it stands, no
organisation or company has announced plans to take control of this project. eXtensible Mark-up
Language SW(Skunkworks), created by one of the original eXtensible Mark-up language developers,
attempts to showcase what a Version 2.0 might contain. Elements like integration of namespaces,
elimination of DTDs from syntax, and eXtensible Mark-up Base and Information Set. (https://history-
computer.com)

XHTML is another XML vocabulary in which the content and structure is written in XML but uses the
62
 Web Development

tags and attributes associated with HTML. However, the structure of an XHTML document differs from
an HTML document in ways.

All XML documents, and thus all XHTML documents, must begin with a prolog that indicates the
document adheres to the syntax rules of XML. The form of the XML prolog is <?xml version="value"
encoding="type" ?>

where the version attribute indicates the XML version of the document and the encoding attribute
specifies its character encoding. For XHTML documents, set the version to “1.0”. The encoding
depends on the character set being used. For example, if a document is saved using the UTF-8
character set, you would start the XHTML

document with the following prolog:

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

With XHTML documents, you can define the character encoding within the XML prolog or with the
following meta element, added to the document head <meta http-equiv="Content-type"
content="text/html;charset=type" /> where type is once again the character encoding.

Thus, the meta element <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

defines the content type as using the UTF-8 character set.(Carey,P,2021:912)

63
 Web Development

Knowledge Check Questions 2.2

1. The ________ declaration specifies which characters and delimiters may

appear in the application.

A) DTD
B) SGML
C) XML
D) HTML

2. For entity which term is used by XML?

A) Character entity referencea) character entity reference

B) Numeric character reference
C) Predefined entities
D) Character and numeric entity reference

3. Which of the following is a server-side solution for implementing

responsive images?

A) Http://adaptive-images.com
B) Http://github.com/scottjehl/picturefill
C) Http://www.netmagazine.com
D) Http://offroadcode.com

4. HTTP request is between _______________

A) Client and host

B) Client and server
C) Server and host
D) User and server

64
 Web Development

5. 404 HTTP error is generated due to ____________

A) Missing JavaScript file

B) Any missing file
C) Slow loading of the web page
D) On removing the newline character

6. XML View Technology is useful in the following situations?

A) Your application needs system catalog views to administer your

XML data and XML schema
B) Indexing Capabilities
C) You want to bulk load XML data and decompose them into the
underlying tables by using the XML view
D) None of the Mentioned

2.8 The Limits of HTML

Despite its popularity, HTML has some limitations and flaws that frustrate Web developers. One major
problem occurred when the Web became a source of information storage and retrieval, a task for
which HTML was not designed.

As long as your only concern is placing text on a Web page, it makes no difference whether the page
is about mushrooms or music. However, if you want a search engine to quickly scan this document
and extract information about the artist or music tracks, it would help if the document structure told the
search engine something about the document contents. Without being able to determine whether a
particular tag refers to the title, music track, price, or artist, it is difficult to locate that precise piece of
information.

A second limitation of HTML for data storage is that it is limited to a set of predefined elements and
cannot be expanded to accommodate different types of information. In some cases, browser
manufactures have expanded the versions of HTML they support to offer new features, as Netscape
did by introducing frames and as Internet Explorer did by offering inline frames.

However, nothing in the language enables an individual Web Author to expand the scope of HTML to
meet the needs of a particular Web document. (Carey.P,2021:618-619)

65
 Web Development

Knowledge Check Questions 2.3

1. They are 2 tags in a regular element.

True
False

2. The difference between an opening tag and a closing tag is a closing tag
has a/ in front.

True
False

3. The is a type of an opening tag.

True
False

One result of these browser modifications to HTML was a confusing mix of competing HTML
standards – often one for each browser and, indeed, each browser version. Although the innovations
offered by Netscape, Internet Explorer, and others did much to increase the scope, power, and
popularity of HTML, they did so at the expense of clarity. Web authors could not easily create
Websites without taking into account all of the browser differences.

A final limitation of HTML is that it can be inconsistently applied. For example, the syntax of HTML
instructs the Web page author to enclose all attribute values in single or double quotation marks and
to match all opening tags with ending tags. However, to make HTML easier for nonprogrammers,
most browsers will accept violation of these basic syntax rules. Even though this lack of enforced
standards makes it easier to write HTML code, it also meant that browser code had to be more
cumbersome than necessary to accommodate all of the various lapses in HTML syntax perpetrated
by some Web authors and editing programs.

As a result, there were several reasons to look for a new language standard that would more easily
extend to new information types, be customisable, require stricter adherence to the syntax of the
language, and provide meaning and structure to the information contained within each document.

66
 Web Development

Video Activity 2.2

https://www.youtube.com/watch?v=88PXJAA6szs
1. What are HTML comments? What are HTML Themes and templates?
2. What are Self-Closing Tags in HTML?

2.9 Exploring the Concepts behind XML

XML can be thought of as “SGML light”. Like SGML, XML is a language used to create vocabularies
for other mark-up languages, but it does not have SGML’s complexity and expansiveness. The
standards for XML are developed and maintained by the World Wide Web Consortium (W3C).

Video Activity 2.3

https://www.youtube.com/watch?v=jn3n-f__tAY
1. What is XML?
2. What is XML HTTP request? What are its advantages?

2.10 Benefits of XML

XML Is an Industry Standard

As you learned previously, XML is a W3C recommendation. This means it is an industry standard
governed by a vendor-independent body. History shows that vendor-specific proprietary standards do
not get massive acceptance in the software industry.

This non-acceptance affects overall cross-platform data sharing and integration. Being an industry
standard has helped XML gain huge acceptance. (Bipin,J, 2017)

XML Is Self-Describing

XML documents are self-describing. Because of mark-up tags, they are more readable than,
say, comma-separated values (CSV) files.

XML Is Extensible

Mark-up languages such as HTML have a fixed set of tags and attributes—you cannot add your own
tags. XML, on the other hand, allows you to define your own mark-up tags.

67
 Web Development

XML Can Be Processed Easily

Traditionally, the CSV format was a common way to represent and transport data. However, to
process such data, you need to know the exact location of the commas (,) or any other delimiter used.
This makes reading and writing the document difficult. The problem becomes severe when you are
dealing with a number of altogether different and unknown CSV files.

As mentioned earlier, XML documents are processed by a piece of software called a parser. Since
XML documents use mark-up tags, a parser can read them easily. (Bipin,J. 2017)

XML Can Be Used to Easily Exchange Data

Integrating cross-platform and cross-vendor applications is always difficult and challenging.

Exchanging data in heterogeneous systems is a key problem in such applications. Using XML as a
data-exchange format makes your life easy. XML is an industry standard, so it has massive support,
and almost all vendors support it in one way or another. (Bipin,J,2017)

XML Can Be Used to Easily Share Data

The fact that XML is nothing but textual data ensures that it can be shared among heterogeneous
systems. For example, how can the data generated by a Windows Forms application running on a
Windows machine be accessible in a Java application running on a Unix box? XML is the answer.

XML Can Be Used to Create Specialised Vocabularies

By using XML as a base, you can create your own vocabularies. Wireless Application Protocol
(WAP), Wireless Mark-up Language (WML), and Simple Object Access Protocol (SOAP) are some
examples of specialised XML vocabularies. (Bipin,J. 2017)

Activity 2.2

1. What are the Characteristics of HTML Elements?

2. What is the usage of XML in development?
3. How do fonts work with HTML? Explain the term Web Safe fonts.
4. What is the difference between XML and HTML

68
 Web Development

2.11 Creating an XML Document

You are ready to create your first XML document. Like HTML documents, XML documents can be
created with a basic text editor such as Notepad or Text Editor. More sophisticated XML editors are
available that can make it easier to design documents.

The Structure of an XML Document

An XML document consist of 3 parts: the prolog, the document body, and the epilog. The prolog
includes the following parts:
An XML declaration indicating that the document is written in the language of XML
Comment lines used to provide additional information about the document contents (optional)
Processing instructions for a program reading the XML document (optional)
A document type declaration to provide information about the rules used in the document’s
vocabulary (optional)

Once an XML document is created, a program called an XML parser checks the file for errors in
syntax and content. An XML document that employs the correct syntax is called a well-formed
document. Browsers usually accept HTML documents that violate HTML syntax as long as the
violation is not too severe; however, an XML parser rejects any XML document that is not well formed.

For example, the following code is an example of code that is not well formed because it violates the
basic rule that every two-sided tag must have both an opening and closing tag:

Not well-formed code:

<body>

<h1>Web Page Title

</body>

An XML parser rejects documents that are not well formed and thus the document content will not be
displayed by the browser. To correct this error and make the code well formed, you need to add the
closing tag as shown next.

69
 Web Development

Well-formed code:

<body>

<h1>Web Page Title </h1>

</body>

(Carey,P. 2021:912)

XML Declaration

The following example shows an XML declaration in an XML document.

The following figure shows the tree structure that is created from the declaration:

Figure 2.2: Tree Structure from XML Declaration

Because different languages use different character sets, the encoding declaration allows XML to be
used across a range of written languages.

The default encoding scheme is UTF-8, which matches most English language characters as well as
characters from other languages such as Japanese and Korean. However, if the XML document
contains special characters such as ö or _, you might need to use an extended character set. (Carey,
P,2020:624)

The document type declaration (DTD) of an XML message is represented by a syntax element of type
DocTypeDecl.(https://www.ibm.com/docs/en/integration-bus/10.0?topic=constructs-xml-document-
type-declaration)

70
 Web Development

Finally, the standalone attribute indicates whether the document contains any references to external
files. If so, such references usually point to DTDs contained in external files. A standalone value of
yes indicates that the document is self-contained, and a value of no indicates that the document
requires additional information from external documents. The default value is no. The sample XML
declaration:

Activity 2.3

1. While writing an xml document what are the rules that are to be followed?
2. In HTML Web and Internet, what factors result into a complete HTML
formation?
4. What are XML naming rules?

Revision Questions

1. What is HTML?
2. What are well-formed XML documents?
3.How will you differentiate between HTML tags vs. elements vs. attributes?

71
 Web Development

2.12 Summary
Students were introduced to Mark-up languages and have a clear understanding of the elements that
are needed to create Web documents. Simple tags were introduced and the use of such tags was
displayed to the student. Students should be able to use simple Text Editors like Notepad to create
basic Web documents. The student can also use Notepad to create simple XML documents.

Case Study 2.1

This case study is a continuation of the case study from unit one. The
task now is to create the first web page for the business. Refer to case
study in Unit 1.
Now that Aaron has been convinced that his business needs a functional
website to attract more customers he has finally agreed and signed a contract
with you for the development of the new website. Aaron would like for you to
create the first web page which will display information about Belville Foodies,
including the truck’s daily locations, menu, catering opportunities, and contact
information. Aaron wants the pages to convey the message that customers will
get the same great food and service whether they order in the restaurant or
from the food truck. To complete this task, create the first web page using html
5 code.
(Carey. P, 2021:49)

72
 Web Development

Answers to Activities

Video Activity 2.1

1. ENQUIRE was the program that Tim wrote in order to link computers, people and networks.
2. 1990
3. CERN

Think Point 2.1

1. HTML 4.0
2. CSS
3. JavaScript
4. DOM.

Knowledge Check Questions 2.1

1. A

2. True

3. True

Activity 2.1

A mark-up language is a type of language used to annotate text and embed tags in accurately styled
electronic documents, irrespective of computer platform, operating system, application or program.

Presentational Mark-up: Used by traditional word processing systems with WYSIWYG; it is hidden
from human users
Procedural Mark-up: Integrated with text to provide text processing instructions to programs. Such
text is visibly manipulated by the author. Procedural mark-up systems include programming
constructs, where macros or subroutines are defined and invoked by name
Descriptive Mark-up: Used to label parts of a document as to how they should be treated. For
example, the HTML <cite> tag is used to label citations in text

73
 Web Development

Practical Application 2.1

1. If the file is saved with the extension .txt it will open showing the html code instead of a web page.

2. h1

3. MancosaHCIT

Practical Application 2.2

Think point 2.2

Become well versed in the history of HTML and the various versions of HTML and XHTML. Unlike
other languages, HTML’s history does impact how you write your code.

Know your market. Do you have to support older browsers, or have your clients standardised on
one particular browser or browser version? Will your web pages be viewed on a single device
such as a computer, or do you have to support a variety of devices?
Test your code on several different browsers and browser versions. Do not assume that if your
page works in one browser, it will work in other browsers or even in earlier versions of the same
browser. Also check on the speed of the connection. A large file that performs well with a high-
speed connection might be unusable with a slower connection
Read the documentation on the different versions of HTML and XHTML at the W3C website and
keep up to date with the latest developments in the language

74
 Web Development

Knowledge Check Questions 2.2

1. B
2. C
3. A
4. A
5. B
6. C

Video activity 2.2

1. HTML Comment tag are the basic instructions given with in any html layout and these are not
displayed in browser and are just for informative purpose only. To build HTML websites there are pre-
built themes and templates that are used for that specific purpose only. HTML news template, HTML
admin theme etc.

2. HTML Self Closing Tags: There are a few tags that does not require closing tags and they can end
within a starting tag only or survive without any. Similarly, many names are associated with these tags
along with Self Closing, empty tags, void elements, void tags, singleton tags etc. Their list with
description and examples is shared below.

Video activity 2.3

1. XML stands for eXtensible Mark-up Language. It is a simple and flexible mark-up language. It is
known as universal language for data on the web because XML documents can be created and used
in any language. It is universal standard for information interchange. XML technology facilitates you to
create your own mark-up language.

2. All modern browsers have a built-in XML HTTP request object to request for data from a server.

Its advantages are as follows:

Updating a web page without reloading the page
Request data from a server
Receive data from a server after the page has been loaded
Send data to a server in the background

75
 Web Development

Practical Application 2.3

Note

To: Siphe

From: Jacque

Date: 2022-01-10

Quick question

How do you like your coding?

The code is XML.

Activity 2.2

1. HTML is formed by HTML elements which are HTML tags only.

Characteristics of HTML elements:

HTML elements can be Nested Elements i.e.; Elements can contain elements
All HTML elements should be closed for proper results
HTML tags are not case sensitive, but it is recommended to use them in lowercase

2. XML has multiple usages as shown below:

XML is used for flat files and databases.

It is used to store data and transport data on the Internet
It can generate different dynamic data using style sheets
XML is used to develop database-driven websites
It is used to store data for e-commerce websites

3. Fonts are different calligraphy presentation of writing characters. Earlier Font tag was specifically
used for making desired effects but with HTML5 font tag is depreciated now! Now in CSS3 they are
directly used as CSS font attribute with specific value only. Web Safe Fonts are those fonts which are
available on most of the system all around the world.

76
 Web Development

So, users can have a similar calligraphic result for their fonts over the global internet with which fonts
they were started with.

4.

XML HTML

XML consists of user defined tags. HTML consists of pre-defined tags.

XML is used to store and transform data. HTML is used for designing a web page.

XML is content driven. HTML is format driven.

XML is case sensitive. HTML is not case sensitive.

XML requires end tag for well formatted HTML does not require an end tag.
document.
Knowledge check question 2.3

1. True

2. True

3. False

Activity 2.3

1. Since xml does not have any predefined tags or elements there are not many problems in writing
an xml document. Although there are a few rules that should be kept in mind while writing the
document such as:
- The tags in xml once opened also must be closed.
- All the tags in xml are case sensitive.
- All xml elements must be properly nested.
For example:

<home>
<room>
….

77
 Web Development

….
</room>

</home>

The entire document must contain a root node which would contain all the tags defined in the
document within it.

- Any attribute values must be specified between quotes.

2. Web Browsers: All HTML files will run in Web Browsers. Web Browsers helps in interpreting
information from HTML file to viewer. Browsers only display the content inside the HTML tags. We can
fill these tags with anything with correct syntax like image (<img>), video (<video>), audio(<section>)
tags.

<Doctype> Declaration: <Doctype> declaration is given in the beginning even before any tag starts. It
is not case sensitive. It gives indication to browsers that we are going to display HTML. Correct type
&and version of declaration is necessary for browser to display. Each version of HTML had its own
declaration.

Case study

<header>

<h1>Belville Foodies</h1>

</header>

<article>

<h1>About Us</h1>

</article>

<p>

78
 Web Development

Contact us to cater your next party and experience what

<cite>Capetown</cite> calls <q>the finest

African food on or off the streets of Capetown.</q>

</p>

<footer>

Belville Foodies 3508 Belville Captown

</footer>

79
 Web Development

Unit
3: Importance of Structure and Design

Unit 3: Importance of Structure and Design

80
 Web Development

Unit Learning Outcomes

Prescribed and Recommended Textbooks/Readings

Prescribed Reading
Carey, P. (2021) New Perspectives on HTML 5 and CSS:
Comprehensive: Comprehensive (MindTap Course List). Eighth Edition.
Australia, Brazil, Mexico, Singapore, United Kingdom, United States:
Cengage Learning

Recommended Reading
DuRocher, D. (2021) HTML and CSS Quickstart Guide. The simplified
Beginners Guide to Developing a strong coding Foundation, Building
Responsive Websites, and mastering of modern websites A Social,
Ethical and Legal Perspective. ClydeBank Media LLC: Idea Group
Publishing

Frain, B. (2020) Responsive Web Design with HTML5 and CSS: Develop
future-proof responsive websites using the latest HTML5 and CSS
techniques. Third Edition. Birmingham, UK: Packt Publishing

Carey, P. (2020). New Perspectives on HTML 5 and CSS:

Comprehensive: Comprehensive (MindTap Course List) 8th Edition,
Cengage Learning

81
 Web Development

3.1 Introduction
In this unit we are going to discuss the importance of structure and design of a web site. The structure
of the web site determines how the different pages are linked with each other. It also looks at how the
information on the website is organised and presented. A good website should be easy for users to
navigate and access links.

More than 52% of ICT projects fail. The major reason behind this statistic is the fact that these
projects are poorly planned. As a result of this, to be a successful web developer you will need a
framework that will guide you in ensuring that all your web development projects succeed. In this unit
you will be introduced to the Web Development Life Cycle. This cycle’s intention is to ensure that the
process of creating website structure is followed properly to increase the web site’s chances of
success. The different phases of the cycle will be discussed individually.

Knowledge Check Questions 3.1

1. Web site structure can also be referred to as website architecture.

True
False

2. Poor planning has led to 52% failing.

True
False

3. A homepage is the first page you see when you visit a website

True
False

3.2 Elements of a good website structure

Hierarchical website structures are the most common; they are based on one parent page, which is
the main page, and child pages that include categories and sub categories that are dependent on the
main page. The figure below shows how a hierarchical website structure looks like.

82
 Web Development

Figure 3.1: A Hierarchical Website Structure

Source: https://www.uxpin.com/studio/

We are going to look at these elements one by one and how they can be optimised during the web
design process.

The Homepage

At the top of the website hierarchy, that’s where you find the homepage and the central place where
users navigate the website from. Ensure that all the important pages on your website are linked from
this page. The relationship between your homepage and the main category pages is represented by
your website’s menu or main navigation. (https://www.uxpin.com/studio/)

Video Activity 3.1

https://www.youtube.com/watch?v=sdlLk0xsuow
https://protect-za.mimecast.com/s/xENmCr0pnGuw8Pmnt7taOw?
domain=mancosa.zoom.us

83
 Web Development

The menu or navigation list

The website users will use the menu to understand how information is structured on a website and to
find what they are looking for. Always make sure that all your main category pages are represented
on your menu or main navigation. Additionally, use the following rules when creating your menu.
(https://www.uxpin.com/studio/)

Use short phrases or even one word for each element

Use simple language that your users can understand
Don’t clutter your menu

Categories and sub categories

Categories are used to group website pages that are similar or that have similar content to make it
easy for users to access the content.

If you are designing an e-commerce website, you can group your products into categories such as
‘men’ and ‘women.’ If your categories are, too many you can further subdivide them into
subcategories. Using an e-commerce shop example, the women category can have subcategories
such as ‘clothes’, ‘shoes’, and ‘handbags’.

A great example of this is the Superbalist website where their clothing category has a subcategory
that shows the types of clothing available in the marketplace such as dresses, jackets and coats,
sleepwear, and maternity. (https://www.uxpin.com/studio/blog/web-structures-explained/)

Individual Pages

When structuring when individual pages, it is important to do it in a way that makes it easy for visitors
to find what they are looking for, finding similar content and understanding where they are on the
website.

Tags

Tags are another useful way of grouping similar content on a specific page. The difference between
tags and categories is that categories have a hierarchy and can be further subdivided into
subcategories, but tags have no hierarchy. They simply group similar content.

84
 Web Development

Tags can also be used in e-commerce websites to group products according to brand and direct
users to similar products. Here are the best practises for creating tags:

Don’t create too many tags or a new tag for every post

Place tags in a place where site visitors can easily see them such as your sidebar or at the end of
your blog posts/product pages. (https://www.uxpin.com/studio)

Practical Application 3.2

Use the HTML code below to create a page with links. Please take
note of the image link in the code, add a picture link and make sure the
picture shows on your web page.
<header>
<a href="new_page.html"><img scr ="new_pagelogo.png" alt="Belville
Foodies" /></a>
<nav>
<li><a href="new_about.html">About</a></li>
<li><a href="new_locations.html">Locations</a></li>
<li><a href="new_menu.html">Menu</a></li>
<li><a href="new_reviews.html">Reviews</a></li>
<li><a href="new_catering.html">Catering</a></li>
<li><a href="new_contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact_us</h1>
<p>Contact Belville Foodies for your next event or just to find out when
our mobile truck will next be in your area. Employment opportunities
available now!</p>

85
 Web Development

3.3 Web Development Life Cycle

For years, university and college information technology courses have stressed the importance of
following the Systems Development Life Cycle when designing and implementing new software to
ensure consistency and completeness. The Web development process should follow a similar cycle.
If you start to code your Web pages without thorough planning and analysis, you run the risk of
missing pertinent information. It is much less expensive to make corrections to a Web site in the early
phases of project development than it is to alter Web pages that are completed.

The Web development life cycle outlined in this section is one that can be utilised for any type or size
of Web development project. The Web development life cycle is a process that can be used for
developing Web pages at any level of complexity. The Web Development life cycle includes the
following phases: planning, analysis, design and development, testing and implementation and
maintenance. Table 3.1 lists several questions that should be asked during each phase in the Web
development life cycle.

Figure 3.2: Web Development Life Cycle

86
 Web Development

Readings

https://www.monocubed.com/web-development-life-cycle/

https://xbsoftware.com/blog/website-development-process-full-guide/

https://www.educative.io/edpresso/what-are-the-steps-involved-in-a-
website-development-lifecycle

Video Activity 3.2

https://www.youtube.com/watch?v=tNAfniBcsJM
1. Describe the importance of the web development life cycle
2. How is Website testing conducted?

87
 Web Development

Table 3.1: Web Development Phases and Questions

88
 Web Development

Website Planning

Website planning which is the first phase of the Web development life cycle, involves identifying the
goals or purposes of the Website. The first step in the Website planning phase is to answer the
question – “What is the purpose of this Website?” Individuals and groups design and publish
Websites for a variety of purposes. Individuals develop Websites to share their hobbies, to post
resumes, or just to share ideas on personal interests. Organisations create Websites to keep member
informed of upcoming events or to recruit new members. Businesses create Websites to advertise
and sell products or to give their customers 24-hour online support. Instructors publish Websites, or
add information to their courses using the school’s online course management software, to inform
students of course policies, assignment and due dates as well as course requirements. Until you can
adequately identify the intended purpose of the Website, you should not proceed with the Web
development project.

The following are some of the steps that one needs to take when planning a website:

Set your purpose and goals, it is important to identify your website’s purpose and target audience
Have budget, for your website expenses
Assign roles, people in your team should know their responsibility and what is expected of them
Create a content strategy, this means anything that gives your target audience information
Structure your website
Create a demo site
Start designing
Test the site
Maintain the site

In addition to understanding the Website’s purpose, you should also understand who will use the
Website and the computing environments of most users. Knowing the make-up of your target
audience – including age, gender, general demographic background, and level of computer literacy –
will help you design a Website appropriate for the target users. For example, if most users have low-
speed Internet connections, you do not want to create pages with large graphics or multimedia
elements.

89
 Web Development

A final aspect to the Website planning phase is to identify the content owners and authors. To
determine this, you need to ask the question:

Who owns and authors the information on the Website?

Who decides if/where the information goes on the Website?

Once you have identified who will provide and authorise the Website content, you can include these
individuals in all aspects of the Web development project. (Dean, J.2019: Web Programming with
HTML, CSS and JavaScript, p.24).

Think Point 3.1

1. During website planning, when we say structure your website what are
we referring to?

2. What is the difference between structuring the website and designing it?

Website analysis

During the analysis phase, you make decision about the Website content and functionality. To help
define the appropriate Website content and functionality, you should first identify the tasks that users
need to perform. Answering that question allows you to define necessary content to facilitate those
tasks and determine useful information for the users. Extraneous content that does not serve any
purpose should be eliminated for the Website.

Most people ignore this critical step in the web development process. To ensure that your design and
development is on the right path, gathering information about the project and the client is crucial.

Unless your developers have a clear idea of what they are working for and what the requirements
are, they will not be able to provide the right solution.

Some common questions to ask yourself or your clients in the information gathering stage are-

Purpose:

What is the purpose of the website?

90
 Web Development

What Type of website/ web app will it be that is, informational, commercial, product, or service
based?
What is your target audience?

Requirements:

Is there adequate demand in the market?

Why do users need your website?
What requirements of the consumers are you trying to fulfil?
What are the non-negotiable requirements for the website?

Expectations:

What do you expect the look and feel to be?

How and what will the website generate for your business?
What features will the user expect from such an application?
What are some features you wish to include?

During this phase, it is important to visualise what type of people your website is going to be catering
to. Taking into consideration their age, gender, preferences, and needs, set goals and generate
requirement elicitation documents.

If this step is ignored, all the remaining web development stages become irrelevant and cannot
produce the desired outputs. ( https://www.monocubed.com/web-development-life-cycle/)

Think Point 3.2

1. Which, in your opinion, is the most important phase in the Web
development life cycle? Please substantiate your answer.

Website Design and Development

The development is a stage where the website is built while maintaining the essence of the website’s
purpose. All the graphic elements are taken into consideration and are used to generate a functional
website.

91
 Web Development

The process begins with first developing the home page followed by the interior pages. The focus is
given to the navigational structure of the site.

Content Management System, interactive contact us forms, shopping carts are made functional in this
development step. The web design and development company suggest changes that are done after
consideration.

A successful website needs an understanding of the front end web development and backend
development. This means valid HTML/CSS codes are compiled as per the web standards to enhance
the functionality for a larger audience.

Video Activity 3.3

Use the video link below to answer the questions that follow.
https://www.youtube.com/watch?v=gGGPTskb7c8
1. Why Web Page Design and Development?
2. Why Website Implementation and Maintenance?

92
 Web Development

Table 3.2: Web Page Organisational Standards

Page designer needs to cope with a wide range of possible screen widths ranging from wide screen
monitors with widths of 1680 pixels or more, down to mobile devices with screen widths of 320 pixels
and even less.

93
 Web Development

Complicating matters even more is that a screen width represents the maximum space available to
the user, but some space is always taken up by toolbars, sidebar panes, and other browser features.
In addition, the user might not even have the browser window maximised to fill the entire screen.
Thus, you need a layout plan that will accommodate a myriad of screen resolutions and browser
configurations.

Web page layouts fall into three general categories: fixed, fluid, and elastic. A fixed layout is one in
which the size of the page and the size of the page elements are fixed, usually using pixels as the unit
of measure. The page width might be set at 960 pixels and the width of the company logo set to 780
pixels. These widths are set regardless of the screen resolution of the user’s device and this can
result in the page not fitting into the browser window if the device’s screen is not wide enough.

By contrast, a fluid layout sets the width of page elements as a percent of the available screen width.
For example, the width of the page body might be set to fill 90% of the screen and the width of the
company logo might be set to fill 80% of that page body. Under a fluid layout, the page resizes
automatically to match the screen resolution of the user’s device.

(Carey, P,2021:201)

With different devices accessing your website, it is usually best to work with a fluid layout that is more

94
 Web Development

adaptable to a range of screen resolutions. Fixed layouts should only be used when you have more
control over the devices that will display your page, such as a web page created specifically for a
digital kiosk at a conference.

Another layout design is an elastic layout in which all measurements are expressed in em units and
based on the default font size used in the page. If a user or the designer increases the font size, then
the width, height, and location of all of the other page elements, including images, change to match.
Thus, images and text are always sized in proportion to each other and the layout never changes with
different font sizes.

The disadvantage to this approach is that, because sizing is based on the font size and not on the
screen resolution, there is a danger that if a user sets the default font size large enough, the page will
extend beyond the boundaries of the browser window. Finally, the web is moving quickly toward the
principles of responsive design in which the layout and design of the page change in response to the
device that is rendering it. The page will have one set of styles for mobile devices, another for tablets,
and yet another for laptops or desktop computers.

Working with Width and Height

The width and height of an element are set using the following width and height properties

width: value;

height: value;

where value is the width or height using one of the CSS units of measurement or as a percentage of
the width or height of the parent element. For example, the following style rule sets the width of the
page body to 95% of the width of its parent element (the browser window):

body {width: 95%;}

Usually, you do not set the height value because browsers automatically increase the height of an
element to match its content. Note that all block elements, like the body element, have a default width
of 100%. Thus, this style rule makes the body element width slightly smaller than it would be by
default.

95
 Web Development

Setting Maximum and Minimum Dimensions

You can set limits on the width or height of a block element by applying the following properties

min-width: value;

min-height: value;

max-width: value;

max-height: value; where value is once again a length expressed in one of the CSS units of measure
(usually pixels to match the measurement unit of the display device). For example, the following style
rule sets the width of the page body to 95% of the browser window width but confined within a range
of 640 to 1680 pixels:

body {

width: 95%;

min-width: 640px;

max-width: 1680px;

Maximum and minimum widths are often used to make page text easier to read. Studies have shown
that lines of text that are too wide are difficult to read because the eye has to scan across a long
section of content and that lines of text that are too narrow with too many line returns break the flow of
the material. (Carey, P (2021) HTML5 and CSS Comprehensive. 8th Edition., Cengage, p.202).

Centering a Block Element

Block elements can be centred horizontally within their parent element by setting both the left and
right margins to auto. Thus, you can centre the page body within the browser window using the style
rule:

96
 Web Development

body {

margin-left: auto;

margin-right: auto;

Vertical Centering

Centering an element vertically within its parent element is not easily accomplished because the
height of the parent element is usually determined by its content, which might not be a defined value.
One solution is to display the parent element as a table cell with a defined height and then set the
vertical-align property set to middle.

For example, to vertically center the following h1 heading within the div element

<div>

<h1>Belville Foodies</h1>

</div>

you would apply the style rule:

div {

height: 40px;

display: table-cell;

vertical-align: middle;

97
 Web Development

Using this style rule, the h1 heading will be vertically centred.To vertically centre a single line of text
within its parent element, set the line height of the text larger than the text’s font size. The following
style rule will result in an h1 heading with vertically centred heading text.

h1 {

font-size: 1.4em;

line-height: 2em;

Note that this approach will only work for a single line of text. If the text wraps to a second line, it will
no longer be vertically centred. Vertical centering is a common design challenge and there are
several other workarounds that have been devised over the years.

Readings

One major challenge about web design is the fact that the website can be
viewed using devices that have different screen sizes while the website needs
to be clear and readable. To curb this challenge Responsive Web Design was
introduced. Follow the link below to learn more about what Responsive Web
Design is and how it is configured on a website:
https://www.w3schools.com/html/html_responsive.asp
http://alistapart.com/articles/responsive-web-design/

Floating Page Content

By default, content is displayed in the page in the order it appears within the HTML file as part of the
normal document flow. Floating an element takes it out of position and places it along the left or right
edge of its parent element. Subsequent content that is not floated occupies the space previously
taken up by the floated element

98
 Web Development

(Carey, P (2021) HTML5 and CSS Comprehensive. 8th Edition, Cengage, p.207)

To float an element, apply the following float property

float: position;

Where position is none (the default), left to float the object on the left margin, or right to float the
object on the right margin. If sibling elements are floated along the same margin, they are placed
alongside each other within a row.

99
 Web Development

Floating multiple elements in a row

Website Testing

A Web site should be tested at various stages if the Web design and development process. The
testing process should be comprehensive and include a review of Web page content, functionality,
and usability. Web sites with broken links, missing graphics, and incorrect content create a poor
impression. You want to attract users to your Web site and maintain their interest. If visitors find that
your page is poorly tested and maintained, they will be less likely to return. You cannot get your
message out if users do not frequently visit the Web site. Some basic steps to test content and
functionality include:

Validating each Web page by running it through the W3C mark-up validation service
Proofreading page content and titles to review for accurate spelling and grammar
Checking links to ensure they are not broken and are linked correctly
Checking graphics to confirm they appear properly are linked correctly
Ensuring that accessibility and internationalisation issues are addressed
Testing forms and other interactive page elements
Testing pages to make sure they load quickly, even over lower-speed connections
Printing each page to check how printed pages look (Carey, P.2020: New Perspectives on HTML 5

100
 Web Development

and CSS: Comprehensive: Comprehensive (MindTap Course List) 8th Edition, Cengage Learning
376)

Here are a few of the basic testing techniques for web applications:

1. Functionality Testing

Functional testing is the most common testing techniques to check if the product works as the
customer intended. The main goal of functional testing is to make sure that all the functions within a
web app are working smoothly without any technical glitches. In a web application, functional
testing could cover different things like whether all the links are working properly or not, testing forms
in all the pages, testing cookies, validating HTML or CSS, testing database for the security and so on.

Functional testing includes the following:

Testing UI workflows
Testing hyperlinks
Input field validation
Cookie testing

2. Usability Testing

When it comes to make the application user-friendly and effective, its user interface should comply
with the standards. It is important that you follow all the global conventions and web standards while
developing a web application. Usability testing is suitable for the applications that are intended to
streamline the manual process. There three types of usability testing which are comparative usability
testing, explorative usability testing and interface testing.

3. Web UI Testing

One of the most important interfaces within a web application are web server and application server
interface and database server interface. Web UI testing will ensure that all the individual components
within a web application are connected appropriately.

101
 Web Development

Knowledge Check Questions 3.2

1. Usability test are run to gather unbiased user opinions amongst other
reasons

True
False

2. Security testing includes link testing, form validation, search operations,

and navigation testing.

True
False

3. Database Testing includes verifying data integrity on creating, updating or

deleting data in the database, obtain a correct result on executing heavy
queries, retrieve data from the database and represent on the web pages
correctly.

True
False

4. Compatibility Testing

Compatibility of your web application is one of the most crucial things you should consider while
testing the application. Compatibility testing will check your website or web application for browser
compatibility, operating system compatibility, mobile browsing and printing options.

5. Performance Testing

Performance testing will help you determine the performance of your web application under various
scenarios. Performance testing usually involves stress testing, scalability testing and load testing. In
this testing method, website is usually tested for its functionality on different operating system,
hardware platforms and more.

102
 Web Development

6. Security Testing

This testing method is one of the most important ones for your web application as if data leaks or
modifications are tolerable or not. It usually involves various things like testing the CAPTCHA for
automates scripts logins, testing SSL for security measures, whether it is possible to access web
directories or files directly or not and so on. (https://www.techbeamers.com/web-application-testing).

Activity 3.1

1. How is the web application load time optimised and reduced?

2. Describe the key responsibilities of a Web Developer?

Usability is the measure of how well a product, such as a Website, allows a user to accomplish his or
her goals. Usability testing is a method by which users of a Website or other products are asked to
perform certain tasks in an effort to, measure the product’s ease-of-use and the user’s perception of
the experience. Usability testing for a Website should focus on three key aspects: content, navigation
and presentation.

Usability testing can be conducted in several ways; one effective way is to directly observe users
interfacing with the (or using) the Website. As you observe users, you can track the links they click
and record their actions and comments. You can even ask the users to explain what tasks they were
trying to accomplish while navigating the site. The information gained by observing users can be
invaluable in helping identify potential problem areas in the Website. For example, if you observe that
users have difficulty finding the Web page that lists store locations and hours of operation, you may
want to clarify the link descriptions or make the links more prominent on the home page.

There are a few different types of usability testing or reasons to conduct usability research:

Comparative Usability Testing

Used to compare the usability of one website with another. Comparative tests are commonly used to
compare a website against peer or competitor sites. However, it can also be used to compare two
designs to establish which provides the best user experience.

103
 Web Development

Explorative Usability Testing

Before a new product is released, explorative usability testing can establish what content and
functionality a new product should include meeting the needs of its users. Users test a range of
different services where they are given realistic scenarios to complete which helps to highlight any
gaps in the market that can be taken advantage of and illustrate where to focus design effort. (
https://www.experienceux.co.uk/)

Usability Evaluation

This is a test of a new or updated service either pre or post-launch. This usability test introduces
users to the new design to ensure it is intuitive to use and provides a positive user experience. The
aim of the usability evaluation is to ensure any potential issues are highlighted and fixed before the
product is launched.

Usability testing can also be completed using a questionnaire or survey. When writing a questionnaire
or survey, be sure to write open-ended questions that can give you valuable information. For
instance, asking a yes/no question “Is the Website visually appealing?” will not gather useful
information. If you change that question to use a scaled response such as, “Rate the visual appeal of
the Website, using a scale of 1 for low and 5 for high,” you can get more valuable input from the
users. Make sure, however, that the scale itself is clear and understandable to the users. If you intend
that a selection of one equates to a “low” rating, then users think a 1 means “high”, then your survey
results are questionable.

Advantages

There are many advantages of usability testing including:

Feedback direct from the target audience to focus the project team
Internal debates can be resolved by testing the issue to see how users react to the different
options being discussed
Issues and potential problems are highlighted before the product is launched

104
 Web Development

Website Implementation and Maintenance

Once Website testing is complete and required changes have been made, the Website can be
implemented. Implementation of a Website involves the actual publishing of the Web pages to a Web
server. Many HTML editors and WYSIWYG editors provide publishing capabilities.

You can also use File Transfer Protocol (FTP) software, such as WS_FTP or Cute FTP, to publish
your Web pages to a Web server. After you publish a Website, you should test the Web pages again
to confirm no obvious errors exist such as broken links or missing graphics.

After a site is tested and implemented, you need to develop a process to maintain the Website. Users
will undoubtedly request changes and content will require timeous updates. You need to ensure
however, that updates to the Website do not compromise the site’s integrity and consistency. For
example, if you have several different people updating various Web pages on a large Website, you
might find it difficult to maintain a consistent look on all pages across the Website. You should plan to
update your Website on a regular basis to keep content up-to-date.

This could mean hourly, daily, weekly, or less often, depending on the site purpose. Do not allow
content to become stale, outdated, or include broken links to Web pages that no longer exist. As a
user looking for information related to a specific topic, how likely are you to believe the information
found on a Web page that says “Last update on December 10, 1998” comes from a reliable source?

To help manage the task of Website maintenance, first determine who is responsible for updates to
content, structure, functionality, and so on. Then, limit update responsibilities to specific users.

As updates and changes are made to a Website, consider notifying users with a graphic banner or a
“What’s New” announcement, explaining any new features and how the features will benefit them.
This technique not only keeps users informed, but also encourages them to come back to the
Website to see what is new.

Finally, Website monitoring is another key aspect of maintaining a Website. Usually, the Web servers
that host Websites keep logs of information about Website usage. A log is the file that lists all of the
Web pages that have been requested from the Website. Website logs are an invaluable source of
information for a Web developer.

105
 Web Development

Obtaining and analysing the logs allow you to determine such things as the number of visitors,
browser types and versions, connecting speeds, pages most frequently requested, and usage
patterns. With this information, you can design a Website that is effective for your targeted audience,
providing visitors with a rich and rewarding experience.

3.4 The Importance of Web Site Structure

The structure of your website, blog or E-commerce store is very important for a great user
experience. It should be user-friendly, easy to navigate, fast and serve its purpose: attract new
customers, get more email subscribers, make a sale, get revenue from advertising or just present the
information in the best possible way.

Although the design and look n feel of a website is subjective, there are some components necessary
for a high quality site. These components make the site search engine friendly, usable, trusted and
professional. As a result, you rank higher in Google and other search engines, and most important of
all loyal visitors.(http://www.reliablesoft.net)

The Home Page

The home page is probably the most important page of your, website. It is the main page of your
website, the first page that your visitors come across when they type in the websites address. This is
the place to show off your best content, promote your brand and establish the unique identity of your
site. While the design of a home page (colours, images, theme and template) depends on the type of
website and preferences of the designer.

Static VS Dynamic Home Page

Many website owners wonder whether to use static or dynamic Home pages. It is recommended to
use a hybrid home page with both static and dynamic areas.

The static part can include your best content; products or services you are selling or that unique
characteristic that distinguishes your web site from the rest.

The dynamic part can include, the latest tweets or Facebook Page updates.

106
 Web Development

Factors to consider when choosing between dynamic and static websites:

(Source Adam 2021: https://adamtheautomator.com/static-vs-dynamic-website/)

Activity 3.2

1. State the differences between the static and dynamic webpages?

2. What are the characteristics of a home page?

107
 Web Development

3.5 Essential Pages for a High Quality Site

About Page

A well designed About Page improves the credibility and trustworthiness of a Web site. Typical items
to include in an ABOUT page:

Welcome message – What the web site is about, when it was created etc. It is just a basic
introduction to the site
Philosophy and goals – This part of the Web site, defines the Purpose, Vision and Goals of this
particular site
Team – Not a necessity, but it is useful to include in a site. It also depends on the type of web site.
This should provide information like, who runs the site, who writes the articles, who to contact in
case of a problem
Contact Page – This is a very important feature on any Web site. Email and or physical address,
phone to contact the webmaster
Privacy Policy – What is your policy regarding cookies and use of personal information. How do
you ensure the privacy of the data you collect from users?
Disclaimer – Especially important if you are running a health related web site that provides advice
which when followed by a reader can create the possibility of problems
HTML (User) Sitemap - The sitemap page should provide easy access to all site pages

Practical Application or Examples 3.2

1. What are Compatibility and Performance testing process?

2. What do you think will be the biggest trends in future web development?

108
 Web Development

Knowledge Check Questions 3.3

1. This extra information is usually maintained in the form of a _________ at

the client.

A) Cookie
B) History
C) Remainder
D) None of the mentioned

2. Html code contains:

A) Tags
B) Attributes
C) Elements
D) All of the mentioned

3. Test planning is not used in web application testing.

True
False

4. Which of the following is not one of the dimensions of quality used to

access a web application?

A) Content
B) Usability
C) Functionality
D) Maintainability

5. With web application content is everything, a poorly defined user interface

will be quickly overlooked by frequent users.

True
False

109
 Web Development

Revision Questions

1. Describe the characteristics of a Dreamweaver template?

2. What are web browsers?
3. How do you consider SEO, maintainability, UX, performance, and security
when you are building a web application?
4. Explain difference between Class and Prototypal inheritance?

3.6 Summary
The structure and design of any site will determine how successful a Web site is. Users will only use a
site that is easy to navigate, information is easy to find, and the layout and format of the site is easy
on the eye. This can only be achieved if a site is developed properly any by following the correct
methodology and techniques. Sites that are created using the Web development life cycle meet of all
of the above criteria. Understanding the Web development life cycle plays a fundamental role in other
aspects of Information Technology.

110
 Web Development

Case Study 3.1

Carmine’s Pizzeria is a pizza outlet that has been operating, as a traditional

pizza shop. It has no website or online app its business operates only from its
stores. They have recently hired new staff including a new CEO. Their
marketing manager has proposed that the company should start operating
online to improve on sales and to increase its market share. They have
approached you and have given the specifications of the web site that they
want you create for them. However, they have requested that you create the
page below quickly for them so they can judge your experience in web
development.
Create the following web page, and name the file demo.html.

(Dean.J, 2019: Web Programming with HTML 5, CSS and Javascript, p. 85)

111
 Web Development

Answers to Activities

Knowledge Check Questions 3.1

1. True
2. True
3. True

Video activity 3.1

Sample menu code should

<nav>
<li><a href="new_about.html">About</a></li>
<li><a href="new_locations.html">Locations</a></li>
<li><a href="new_menu.html">Menu</a></li>
<li><a href="new_reviews.html">Reviews</a></li>
<li><a href="new_catering.html">Catering</a></li>
<li><a href="new_contact.html">Contact</a></li>
</ul>
</nav>

Practical 3.1

<header>
<a href="new_page.html"><img scr ="new_pagelogo.png" alt="Belville Foodies" /></a>
<nav>
<li><a href="new_about.html">About</a></li>
<li><a href="new_locations.html">Locations</a></li>
<li><a href="new_menu.html">Menu</a></li>
<li><a href="new_reviews.html">Reviews</a></li>
<li><a href="new_catering.html">Catering</a></li>
<li><a href="new_contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact_us</h1>
112
 Web Development

<p>Contact Belville Foodies for your next event or just to find out when our mobile truck will next
be in your area. Employment opportunities available now!</p>

Video activity 3.2

1. Ensures project consistency and completeness

Planning, Analysis, Design and Development, Testing, Implementation and Maintenance

2. Web sites should be tested at various stages of the WDLC.

Review of Web page content, functionality, and usability.

Usability is the measure of how well the Web page allows a user to accomplish goals.
Usability testing

Think Point 3.1

The planning phase has to be the most important. There is an English phrase which says “If you fail to
plan, you plan to fail”. This is also the case with website development. The planning phase outline
what needs to be and when it should be done.

Think Point 3.2

1. The structure of the web site determines how the different pages are linked with each other. It also
looks at how the information on the website is organised and presented.

2.

Structuring a website Designing a website

Decide what pages you’ll be using and what Designing a website is all about making your
features will be on each one. Most websites have navigation easy to understand and easy to find.
an About and Contact page, but the pages you
use should meet your business’ needs. Use an easy-to-read font for blocks of text.
Choose a background color and text color that
contrast well

Make sure your site fits the screen.

113
 Web Development

Video Activity 3.3

1.

Professors publish to inform students

Businesses publish to advertise products or to give support
Organisations publish to keep members informed
Individuals publish to share hobbies and knowledge

2.

Implementation involves the publishing of Web pages to a Web server

Determine who is responsible for updates to the Web page
Limit the ability of certain users to update the Web page
Web site monitoring
Utilise logs to keep track of Web site usage and statistics

Practical Activity 3.1

1. Compatibility tests ensures that your web application displays correctly across different devices.

Browser Compatibility Test: Same website in different browsers will display differently. You need to
test if your web application is being displayed correctly across browsers, JavaScript, AJAX and
authentication is working fine. You may also check for Mobile Browser Compatibility.

The rendering of web elements like buttons, text fields etc. changes with change in Operating
System. Make sure your website works fine for various combination of Operating systems such as
Windows, Linux, Mac and Browsers such as Firefox, Internet Explorer, Safari etc.

Performance Testing: This will ensure your site works under all loads. Software testing activities will
include but not limited to -

Website application response times at different connection speeds

Load test your web application to determine its behavior under normal and peak loads

114
 Web Development

Stress test your web site to determine its break point when pushed to beyond normal loads at peak
time.

Test if a crash occurs due to peak load, how does the site recover from such an event

Make sure optimisation techniques like zip compression, browser and server-side cache enabled to
reduce load times

This is an open-ended question, and candidates may talk about technologies like Motion UI, AI-
powered customer service chatbots, voice search, Google’s improvements to their Accelerated
Mobile Pages technology, emerging cybersecurity threats, or advanced analytics techniques.
Whatever they focus on, ask them how they think this will improve user experience, what challenges
the technology presents, and how they think they might integrate the new technology with their
current work

Knowledge Check Questions 3.2

1. True
2. False
3. True

Activity 3.1

1. Almost half of all users want a web page to load within two seconds. Ask this question to learn if a
candidate is aware of the impact that page load time has on the user experience, and how a web
developer should analyse data and track improvements to optimise load time.

How much importance they place in optimising web applications

Understanding of the tools they can use to analyse website speed
Evidence they have successfully reduced load time

Example: “Although there are numerous techniques a web developer can use in reducing load time, I
always rely on optimising images, enabling browser caching and minimising HTTP requests.

My go-to tool for evaluating site speed is Google Page Speed Insights. In one instance, I successfully
reduced page load time from 2.1 seconds to .7 seconds by solely enabling browser caching.”

115
 Web Development

2.

Program test and debug all web applications

Design, develop, test and deploy web applications
Uploading sites onto server and registering it with different search engines
Coordinate with other designers and programmers to develop web projects
Fix bugs, troubleshoot and resolve problems
In case of system failure initiate periodic testing and implement contingency plans
Develop appropriate code structures to solve specific tasks
Support and assist in the upkeep and maintenance of websites
Assume ownership of code throughout staging, development, testing and production.

Practical 3.2

1. Compatibility tests ensures that your web application displays correctly across different devices.

Browser Compatibility Test: Same website in different browsers will display differently. You need to
test if your web application is being displayed correctly across browsers, JavaScript, AJAX and
authentication is working fine. You may also check for Mobile Browser Compatibility.

The rendering of web elements like buttons, text fields etc. changes with change in Operating
System. Make sure your website works fine for various combination of Operating systems such as
Windows, Linux, Mac and Browsers such as Firefox, Internet Explorer, Safari etc.

Performance Testing: This will ensure your site works under all loads. Software testing activities will
include but not limited to - Website application response times at different connection speeds

Load test your web application to determine its behavior under normal and peak loads

Stress test your web site to determine its break point when pushed to beyond normal loads at peak
time.

Test if a crash occurs due to peak load, how does the site recover from such an event

Make sure optimisation techniques like zip compression, browser and server-side cache enabled to
reduce load times.

116
 Web Development

2. This is an open-ended question, and candidates may talk about technologies like Motion UI, AI-
powered customer service chatbots, voice search, Google’s improvements to their Accelerated
Mobile Pages technology, emerging cybersecurity threats, or advanced analytics techniques.
Whatever they focus on, ask them how they think this will improve user experience, what challenges
the technology presents, and how they think they might integrate the new technology with their
current work.

Activity 3.2

1. Static websites contain fixed number of pages and format of web page is fixed which delivers
information to the client. There are 110 changes in contents of web page while page is running on
client's browser. This kind of web sites created from HTML and CSS coding on simple text editor like
notepad. Example an organisation site, institute site etc.

Dynamic websites can change the web page contents dynamically while the page is running on
client's browser. This kind of websites use server- side programming like PHP, Asp.NET. and JSP etc.
to modify page contents on run time. Dynamic websites use client side scripting for prepare dynamic
design and server- side code to handle event, manage session and cookies, and storing and
retrieving data from database. Example E-commerce sites, online form application, E-governance
site, social networking sites etc.

2.

i. Well Designed and Functional

ii. Easy to Use

iii. A Clear And Concise Menu

iv. Should include key products and services

v. Be crystal clear about what your company does and how you help people solve challenges

117
 Web Development

3.Functional testing is the most common testing techniques to check if the product works as the
customer intended. The main goal of functional testing is to make sure that all the functions within a
web app are working smoothly without any technical glitches. In a web application, functional testing
could cover different things like whether all the links are working properly or not, testing forms in all
the pages, testing cookies, validating HTML or CSS, testing database for the security and so on.

Knowledge check question 3.3

1. B
2. C
3. False
4. D
5. True

Case study

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="author" content="HCIT student">

<title>Carmine's Pizzeria</title>

</head>

<body>

<h1>Carmine's Pizzeria</h1>

<p>

118
 Web Development

Each of our pizzas has a volume of

&pi;&centerdot;<var>radius</var>²&centerdot;<var>height</var>.

If <var>radius</var>&nbsp;=&nbsp;<var>z</var> &amp;

<var>height</var>&nbsp;=&nbsp;<var>a</var>, that means the volume spells

"Pi&centerdot;z&centerdot;z&centerdot;a"!

</p>

<p>

==&gt;&nbsp; <strong>Late night special:</strong> slice of cheese

&frac13; off&nbsp; &1t;==

</p>

</body>

</html>

119
 Web Development

Unit
4: User Behaviour in a Web
Environment

Unit 4: User Behaviour in a Web Environment

120
 Web Development

Unit Learning Outcomes

Prescribed and Recommended Textbooks/Readings

Prescribed Reading
Carey, P. (2021) New Perspectives on HTML 5 and CSS:
Comprehensive: Comprehensive (MindTap Course List). Eighth Edition.
Australia, Brazil, Mexico, Singapore, United Kingdom, United States:
Cengage Learning

Recommended Reading
DuRocher, D. (2021) HTML and CSS Quickstart Guide. The simplified
Beginners Guide to Developing a strong coding Foundation, Building
Responsive Websites, and mastering of modern websites A Social,
Ethical and Legal Perspective. ClydeBank Media LLC: Idea Group
Publishing

Frain, B. (2020) Responsive Web Design with HTML5 and CSS: Develop
future-proof responsive websites using the latest HTML5 and CSS
techniques. Third Edition. Birmingham, UK: Packt Publishing

Carey, P. (2020). New Perspectives on HTML 5 and CSS:

Comprehensive: Comprehensive (MindTap Course List) 8th Edition,
Cengage Learning

121
 Web Development

4.1 Introduction
In order to understand user behaviour, one needs to understand the different types of Web sites that
are available. On a broader definition, there exists Intranets (which are internal facing, meaning that
only internal staff can view the sites) and the Internet (which is external facing, meaning that it is
viewable to the public). From Internet sites, there are several types of sites that will be covered in this
section.

Activity 4.1

1. How would you choose the right website type for your audience?
2. How would you guide a client for what is best for their company’s website?
3. Explain the design and specification phase in wed development
4. What is the role in web development
5. What are the various roles of JavaScript in web development

4.2 What are the various types of Web sites?

Originally, websites were purely informational. Before the web was opened to the public, educational
and research institutions and government agencies were able to make information available to each
other via text-only websites. Now that we have the World Wide Web, there are more types of
websites. Here we will discuss the basic types, noting that we will not include all and that there are
hybrids of all those that exist.

4.2.1 Personal Websites

Your Internet Service Provider may offer you free server space for you to create your own website
that might include some family photos and an online diary. Usually these will have a web address
(URL) looking something like this: www.mweb.co.za/vasuchetty/. This type of site is useful for a family,
teenagers, grandparents, etc. to stay in touch with each other. This site is not advisable for a small
business because the URL is not search engine friendly and the limited server capabilities your ISP
offer may not be sophisticated enough for a small business website.

122
 Web Development

Figure 4.1: Example of a Personal Website

4.2 2 Photo Sharing Websites

These are very common sites. There are web companies like, Flickr.com, Photosite.com, and
Google's Picasa. There could easily be over a hundred such sites that offer free photo sharing paid
for by their online advertising. Also, many digital cameras and photo printers now come with software
enabling people to create digital photo slide shows and upload them to the web.

Figure 4.2: Example of a Photo Sharing Website.

123
 Web Development

4.2 3 Community Building Websites

These websites build online communities of people who want to interact with other people socially or
meet people who share their interests. The best known website of this type is probably
FaceBook.com. There is also Linkedin.com, and MySpace.com just to mention a few. For sharing and
discussing mutual interests, there are online forums for practically any subject you can think of.
Forum websites can be a great source of information and help for the small business. This is where
we start to get into the idea of "hybrid" sites. Photo sharing sites might also be considered community
building sites, much as Blogging sites are.

Figure 4.3: Example of a Community Building Website

Think Point 4.1

1. Can you give examples of other social building websites that you have
used?

2. Besides Wikipedia, what other information websites can you identify?

4.2 4 Blogging Websites

People took the words Web Logs and shortened it to Blogs—online diaries, journals, or editorials. A
person used to be outdated if he/she did not have a website, now having a blog is mandatory. A blog
owner will log-on daily, weekly, or whenever, and write about whatever is going on in their lives or
business, or they may comment on politics and news. Now anyone who can afford a blog can be self-
published and allow their thoughts to be read by anyone in the world who has online access.

124
 Web Development

Figure 4.4: Example of a Blogging Website

4.2 5 Informational Websites

A major informational site is wikipedia.org, the online encyclopaedia. And it is unique, because it
allows visitors to contribute and edit articles. Several other informational Websites exist, YouTube,
Microsoft’s Technet, to name a few.

Figure 4.5: Example of an Informational Website

Wiki websites

A Wiki website is one that is set up to serve as an encyclopaedic presentation of information that can
be contributed to and edited by multiple volunteers. The generic term derives from its original use by
the largest of them all, Wikipedia.

125
 Web Development

While in principle editing is open to all, each Wiki website tends to have its own set of rules imposed
by the managers and enforced by the administrators. This is necessary in order to maintain quality
standards and allow for arbitration based on a coherent set of principles in the event of an editing
dispute between different volunteers.

Each Wiki may also have its own rules regarding what content is appropriate for it. Even the most
encyclopaedic Wiki by design, Wikipedia, excludes by policy any individuals who fall short of its
‘notability’ criteria and some topics that fall short of its criteria for scientific and factual reliability.

4.2 6 Online Business Brochure/ Catalogue Websites

In the days before the Internet, people used to print, use the radio, and television media to spread the
word about their businesses. Now we can cast a large net, reaching literally millions of people with
just one Website. With your online brochure or catalogue, you can show anyone who looks for and
finds your Website, photos and descriptions of your products or services. To some this may sound like
an Ecommerce Website, but there are many businesses that deal in products or services that are not
sellable over the Web—think hair-stylist, dentist, or day-care centre.

Figure 4.6: Example of an Online Business Brochure/ Catalogue Website.

126
 Web Development

Knowledge Check Questions 4.1

1. These sites are ideal for individuals to help share information and photos
with friends. The domain registrar offers free space, and thus you use that
advantage to create a personalised site.

A. E-commerce Websites
B. Personal Websites
C. Political Sites
D. News Websites

2. These sites give political information like campaign information,

candidate’s information, political news, and blogs, etc. They help to provide
first-hand information to potential citizens about their politicians

A. E-commerce Websites
B. Personal Websites
C. Political Sites
D. News Websites

3. News websites give the latest news in entertainment, weather, and sports.
They offer breaking news, news update concerning the country/ the world
and overall global news

True
False

4.2 7 Directory Websites

Just as people used to use the printed Yellow Pages in phone books to find services and businesses,
today we have Website directories. The Yellow Pages is one, yellowpages.co.za. Directories can be
dedicated to a certain topic or industry, or they can encompass geographical areas. Search Engines,
such as Google.com and Yahoo.com can be considered directories, but since their databases are so
large, rather than searching alphabetically, one enters a search term in the search field

127
 Web Development

Figure 4.7: Example of a Directory Website

4.2 8 E-Commerce Websites

Ever heard of Amazon.com? It's one of the grand-daddies of all E-commerce websites. But you don't
have to be Amazon to sell your products online. There are millions of small businesses who use their
E-commerce websites to sell their products over the Internet. Just about anything that can be sold in
a brick-and-mortar store can be sold online—with much less overhead! There are several South
African examples of e-commerce stores, the most popular being Kalahari.com and more recently
olx.co.za

128
 Web Development

Figure 4.8: Example of an e-Commerce Website

Infopreneur websites

Infopreneur websites are essentially informational websites that additionally serve as a sales portal to
information-based products or services. They include areas closed off to the public for which a
membership-based pass should be provided, documents that must be paid for to be downloaded,
advertisements for teaching, training and tutoring services or courses that are offered at a cost by the
website owner, and perhaps also an e-commerce area selling books or electronic books that have
been written by the website owner.

News and magazine websites

Stories can be posted and updated in real time, reaching audiences faster than scheduled television
or radio news output, and much faster than print newspapers.

In fact, news websites have become so well-frequented that the entire print newspaper industry has
fallen into a prolonged and steep decline in the past 20 years.

Responding to this crisis, some providers have adopted a subscription-based access model – notably
(in the UK) the Times, the Daily Telegraph and the Financial Times. Others, such as the Guardian,
have held out with a free access model out of an idealistic aim to disseminate important news and
perspectives to a wide public audience irrespective of its ability to pay, but have resorted to pleas for
and met with some success in attracting public donations in order to curb their losses and make
themselves more sustainable.
129
 Web Development

Entertainment websites

Entertainment websites are those that are designed to entertain the website user. They include
websites based around comedy, and those providing comic strips, works of fiction, music, films and
drama series. They also include those allowing users to play online games.

While audio-visual features are commonly found on entertainment websites, they are not necessarily
required. Websites allowing users to read out-of-copyright novels presented attractively on dedicated
reading apps are still serving the function of entertainment.

The business models of entertainment websites vary widely. Some may invite users to upload their
own content, while others enter into arrangements with publishers to feature their content. In the
cases of websites that allow users to upload their own content, there have been some problems with
piracy and the unauthorised uploading of copyrighted content that have remained a source of
widespread controversy

Think Point 4.2

1. Can you name other e-commerce websites in South Africa and give a
brief explanation of how they work?

130
 Web Development

Table 4.1: Types of Websites

131
 Web Development

Knowledge Check Questions 4.2

1. Google+ is another alternative to which of the following site?

A. Amazon
B. Facebook
C. Bing
D. Yahoo

2. Static Websites are generally designed using _________.

A. Dreamviewer
B. Visual C++ Studio
C. Netbeans
D. Eclipse

3. Which of the following is not an example of E-Commerce site?

A. Tweeter
B. Ebay
C. FlipKart
D. Amazon

4. SEO Stands for ___________.

A. Search Engine Operation

B. Search Entry Optimisation
C. Search Engine Optimisation
D. None of these

5. A __________ is the simplest form of website, in which the site’s content is

delivered without the use of server-side processing.

A. E-Commerce Website
B. Dynamic Websites
C. Static website
D. Social Networking Websites

132
 Web Development

Practical Application or Examples 4.1

1. How to acquire Optimised Design with websites?

2. How to develop an Illustrative Website with an example?

4.3 Web Related Technologies

Several examples exist on Web related technologies, but for the purposes of this course, only the
most commonly used technologies will be covered. There are 5 categories that will be covered:
1. Website structure and design
2. Dynamic content
3. Programming languages
4. Web server configuration
5. Web standards.

Under each category, examples will be provided with an explanation.

4.3.1 Web Site Structure and Design

a. HTML – “Developed by Tim Berners-Lee in 1990, HTML is short for HyperText Markup Language
and is a language used to create electronic documents, especially pages on the World Wide Web that
contain connections called hyperlinks to other pages. Every web page you see on the Internet
contains HTML code that helps format and show text and images in an easy to read format. Without
HTML a browser would not know how to format a page and would only display plain text with no
formatting that contained no links.

b. XHTML – “XHTML stands for Extensible HyperText Markup Language and is the next step in the
evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family.
XHTML was developed by the W3C to help web developers make the transition from HTML to XML.

c. CSS – “CSS is an acronym for Cascading Style Sheets. CSS is a style language that defines layout
of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width,
background images, advanced positions and many other things.

133
 Web Development

4.3 2 Dynamic Content

Flash – “A bandwidth friendly and browser independent vector-graphic animation technology. As long
as different browsers are equipped with the necessary plug-ins, Flash animations will look the same.
With Flash, users can draw their own animations or import other vector-based images.

JavaScript – “It is a scripting language designed primarily for adding interactivity to Web pages and
creating Web applications. JavaScript is different from the Java language however; the two
languages can interoperate well.

Java Applets – “An applet is a small Internet-based program written in Java, a programming
language for the Web, which can be downloaded by any computer. The applet is also able to run in
HTML. The applet is usually embedded in an HTML page on a Website and can be executed from
within a browser.

4.3 3 Programming Languages

PHP – “PHP is probably the most popular scripting language on the web. It is used to enhance web
pages. With PHP, you can do things like create username and password login pages, check details
from a form, create forums, picture galleries, surveys, and a whole lot more. If you've come across a
web page that ends in PHP, then the author has written some programming code to liven up the plain,
old HTML.
Perl –” Perl is a well-established programming language that has been developed through the time
and effort of countless free software programmers into an immensely powerful tool that can be used
on practically every operating system in the world.

Java –” Java is a programming language and computing platform first released by Sun Microsystems
in 1995. There are lots of applications and websites that will not work unless you have Java installed,
and more are created every day. Java is fast, secure, and reliable. From laptops to data centres,
game consoles to scientific supercomputers, cell phones to the Internet.”

Practical Application or Examples 4.2

1. Using sample code differentiate between Javascript and HTML.

2. Describe Perl as a programming language

134
 Web Development

4.3.4 Web Server Configuration

Plug-in configuration involves configuring the web server to use the binary plug-in module that
WebSphere® Application Server provides. Plug-in configuration also includes updating the plug-in
XML configuration file to reflect the current application server configuration. The binary module uses
the XML file to help route web client requests.

After installing a supported web server, you must install a binary plug-in module for the web server by
installing the Web Server Plug-ins. The plug-in module lets the web server communicate with the
application server. The Web Server Plug-ins Configuration Tool allows you to configure the web
server and create a web server definition in the configuration of the application server. The Web
Server Plug-ins Configuration Tool uses the following files to configure a plug-in for the web server
that you select:

The web server configuration file on the web server machine, such as the httpd.conf file for IBM
HTTP Server
The binary web server plug-in file on the web server machine
The plug-in configuration file, plugin-cfg.xml, on the application server machine that you
propagate (copy) to a Web server machine
The default (temporary) plug-in configuration file, plugin-cfg.xml, on the web server machine
The configure web server name script that you copy from the web server machine to the
application server machine. (https://www.ibm.com/docs/en/was/9.0.5?topic=in-configuring-web-
server-plug-ins)

135
 Web Development

Knowledge Check Questions 4.3

1. The declaration in HTML informs the browser of the documents html

version.

True
False

2. The purpose of the element denotes the starting and ending points of the
html document.

True
False

3. Perl statements end with a fullstop.

True
False

The plug-ins configuration process uses the following files to configure a plug-in for the web server
that you select:

The web server configuration file on the web server machine, such as the httpd.conf file for IBM
HTTP Server
The binary web server plug-in file on the web server machine
The plug-in configuration file, plugin-cfg.xml, on the application server machine that you
propagate (copy) to a Web server machine
The configuration script for configuring the web server definition for your application server in a
remote HTTP scenario.( https://www.ibm.com/docs/en/was/9.0.5?topic=in-configuring-web-server-
plug-ins)

The web server configuration file is installed as part of the web server.

The Web Server Plug-ins Configuration Tool must re-configure the configuration file for a supported
web server.

136
 Web Development

Configuration consists of adding directives that identify file locations of two files:

Binary web server plug-in file

Plug-in configuration file, plugin-cfg.xml (https://www.ibm.com/docs/en/was)

Video Activity 4.1

https://www.youtube.com/watch?v=ZliIs7jHi1s
1. What tools are available to debug and improve website performance?
2. What HTML features promote accessibility?

4.3 5 Web Standards

W3C compliance– “The World Wide Web Consortium (W3C) is an international community where
Member organisations, a full-time staff, and the public work together to develop Web standards. Led
by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full
potential.(Carey.P (2021)New Perspectives on HTML 5 and CSS 8th edition, p. 849)

SOAP – Short for Simple Object Access Protocol, a lightweight XML-based messaging protocol used
to encode the information in Web service request and response messages before sending them over
a network. SOAP messages are independent of any operating system or protocol and may be
transported using a variety of Internet protocols, including SMTP, MIME, and HTTP.

Video Activity 4.2

https://www.youtube.com/watch?v=Pw8U9l8acPA
1. What do common Web layouts contain?
2. What are HTML text fundamentals

Revision Questions

1. Explain the various programming Languages used in web development.

2. Describe Web Server Software?
3. What is a Magazine website?
4. What are website surveys and why are they valuable?

137
 Web Development

4.4 Summary
Information Technology is a fast-moving field and the evolution does not seem like it is about to slow
down. This unit provided you with an outlook of some of the different types of Websites that exist. The
Web technologies that exist are also explained in this unit and provides a good grounding for future
work in this area. The unit has provided guidelines on creating e-commerce websites including the
importance of updating content and other relevant information that allows easy navigation for the
users. Different coding languages have been identified and discussed giving a clear idea of what is
expected when using a particular language for web development.

Case Study 4.1

JCar
Jcar has made car rides safer and comfortable with the unique video
recording feature. Get rides from anywhere with JCar at pocket-friendly prices.
Even, drivers can earn big with each ride.

BACKGROUND
A nationwide ride-sharing system, JCar is an on-demand application that
connects passengers with drivers for ride-sharing services. The app features
different panels for customers and drivers. Although there are multiple ride-
sharing apps, JCar is more reliable for passengers and provides drivers with
more opportunities to earn.

THE PROBLEM
The client approached us to develop their app from scratch, instead of using
scripts that are made years ago using old technologies. In addition to common
app solutions, the client wanted us to add more features to the app and make
it more valuable for customers/drivers.
(Hussein.T, Mouftah,T, Kantarci. E and Rehmani. M. 2018:Transportation and
Power Grid in Smart Cities. O’rielly)

138
 Web Development

Answers to Activities

Activity 4.1

1. Design and Specification: After the strategy making, the next step in the web development process
is to develop a planned work. Web developer must determine the schedule and the specifications.
The tasks in this phase are as follows.

Developing approach
Planning of contents needed for use
Making of rough design for project
Making of final design from rough design if there are no considerable modification in rough design
Frame a prototype of project for developing
Test the prototype

2. Companies need to analyse which devices their target audiences are viewing their website on in
order to determine the best design structure of their website. For example, if your customers are not
viewing your website on smartphones, do not bother spending large amounts of money or time on
perfecting the responsive design structure and layout for smartphones. However with the increase in
the use of smart and the convenience of doing business on smart it is advisable to have website that
is mobile phone compatible.

3. Good design is much more than simply an appealing look, but also drives user engagement and is
highly targeted to the needs of the audience viewing the site. Pay attention to what other companies
have done with their website design and quickly identify which format works best for each project.
Knowing what others have accomplished with different page types gives you a strong feel for the kind
of website that will work best for you.

the pack, prepare your website for every device

4. Various role of JavaScript in web development:

Beside of CSS and HTML, it is standardised as one of the central technologies of the WWW. in
the development of the web

139
 Web Development

It can also be utilised in another factor rather than Web-based like site-specific browser, PDF
document, and desktop widgets
JavaScript is also utilised for the development and creation of many applications of desktop and
mobile. It is also used to develop games, server-side network programming like Node.js.
JavaScript decides the "fate of the future"

5. Role of HTML in web designing:

All websites are made up of HTML element which are the building blocks of websites
HTML is a language known for portraying web pages
HTML itself, not a programming language instead it is a mark-up language
HTML Documents = Web Pages, which means HTML documents describe web pages
HTML uses images and objects in its document which can be used to create interactive forms
It denotes structural semantics for text such as paragraphs, lists, links, quotes, headings, and
other items to create structured documents
The behaviour of HTML web pages can also be affected by inserting scripts written in languages
like JavaScript, CSS, etc
An API is an application programming interface. It is created by the developer of an application to
allow other developers to use some of the application's functionality without sharing code.
Developers expose “end points” which are like inputs and outputs of the application. Using an API
can control access with API keys. Examples of good API’s are those created by Facebook, Twitter,
and Google for their web services.

Knowledge Check Questions 4.1

1. B
2. C
3. True

Knowledge Check Questions 4.2

1. B

2. A

3. A

4. B

140
 Web Development

5. C

Practical Activity 4.1

1. Optimised design is when a website reformats its layout to clearly display the page on a different
screen size. For example, a website that is mobile responsive will completely reshuffle its layout in
order to fit on a mobile screen, keeping the user journey as smooth as possible.

There are three different types of optimised design: Static/fixed, Fluid/liquid, and Responsive

Static/fixed- A fixed website is not optimised for screens of different sizes. The website will remain
a fixed width of pixels, no matter which device it is displayed on whether that is a desktop, tablet,
or mobile. When viewing a static/fixed website on a mobile, you will need to pinch, zoom, and
swipe in order to see what is written on the page. This results in a bad user experience and
means we would not recommend this design
Fluid/liquid - A website built with a fluid or liquid design ensures that the website looks the same in
te 0rms of proportions no matter which screen it is displayed on. Each element of the website,
such as the navigation bar, will take up the same relative amount of space on every device,
resulting in a simple user journey
Responsive - Responsive design goes one step further than fluid or liquid. A website with
responsive design will look different on each device. In fact, some less important elements will
even disappear to fit on the screen, in order to minimise the need for zooming, pinching, or
scrolling

2. The illustration is an incredibly versatile tool that can find many different uses in design. And when
it comes to web design, we can find an extremely wide variety of implementations.

Illustrations and cartoon drawings can really bring web design to life. Drawing is a creative activity by
definition and incorporating it into a website’s design is one of the most creative methods of
presenting information on the web. In 2016, illustration has become a vital part of a web appearance
by its enticing and fun little elements like icons. Plus, the site will be more personal for users and
connect users better.

141
 Web Development

Practical Application or Examples 4.2

142
 Web Development

1.

JavaScript is a programming language that HTML (HyperText Markup Language) is the

conforms to the ECMAScript specification. It is a most basic building block of the Web. It defines
high-level scripting language introduced by the meaning and structure of web content. It is
Netscape to be run on the client-side of the web the combination of Hypertext and Markup
browser. It can insert dynamic text into language. Hypertext defines the link between
HTML.JavaScript is also known as the browser’s the web pages.
language.
<!DOCTYPE html>
function greet() {
<html>
const string = `My name is
${this.firstName} ${this.secondName}. I <body>
am ${this.age} years old.`;
<h2 title="My name is">The title
console.log(string); Attribute</h2>

} <p title="I am years old">Mouse over this

paragraph, to display the title attribute as a
const human = { tooltip.</p>

firstName: "Judah", </body>

lastName: "Parker", </html>

age: 26,

};
2. The language is intended to be practical (easy to use, efficient, complete) rather than beautiful
(tiny, elegant, minimal). Its major features are that it is easy to use, supports both procedural and
object-oriented (OO) programming, has powerful built-in support for text processing, and has one of
the world's most impressive collections of third-party modules

143
 Web Development

Knowledge Check Questions 4.3

1. True
2. True
3. False

Video Activity 4.1

1. This set of articles shows you how to use the Developer Tools in Firefox to debug and improve
performance of your website, using the tools to check memory usage, the JavaScript call tree, the
number of DOM nodes being rendered, and more.
2. This set of articles shows you how to use the Developer Tools in Firefox to debug and improve
performance of your website, using the tools to check memory usage, the JavaScript call tree, the
number of DOM nodes being rendered, and more.

Video Activity 4.2

1. When designing pages for your website, it is good to have an idea of the most common layouts.
This article runs through some typical Web layouts, looking at the parts that make up each one.
2. This set of articles shows you how to use the Developer Tools in Firefox to debug and improve
performance of your website, using the tools to check memory usage, the JavaScript call tree, the
number of DOM nodes being rendered, and more.

Case study 4.1

THE SOLUTION

Selecting the right tools

After taking inputs from the client, we appointed a team of experienced developers to develop
complete on-demand app solution. To ensure that the app works well on both Android and iOS
platforms, we make use of advanced technologies including Swift, Java, MongoDB, Node.js and AWS
server. To make navigation possible, we used Google Maps.

144
 Web Development

Features

Our team of app developers adds those features to the application that it required to operate like an
on-booking taxi booking app. We also infused some more security features than similar apps in the
market have. Plus, we also provided the client with a well-designed landing page. We ensure that the
app gets flexibility in order to make it easy-to-use for customers.

THE RESULT

As a result of efforts by our development team, we provided the client with outcomes that they were
expecting from us. We not just created a fully functional app for the client but also launched it on the
app store to ensure that it is available to download. From the play store, people can easily download
the app and start utilising its features.

We also provided the client with a landing page and maintenance services to ensure that the app
keeps on working in the right way. According to the client, they are happy with the final results and
enjoying its

145
 Web Development

Unit
5: Best Practice on the Creation, Organisation and
Maintenance of Websites

Unit 5: Best Practice on the Creation, Organisation and Maintenance of Websites

146
 Web Development

Unit Learning Outcomes

Prescribed and Recommended Textbooks/Readings

Prescribed Reading
Carey, P. (2021) New Perspectives on HTML 5 and CSS:
Comprehensive: Comprehensive (MindTap Course List). Eighth Edition.
Australia, Brazil, Mexico, Singapore, United Kingdom, United States:
Cengage Learning

Recommended Reading
DuRocher, D. (2021) HTML and CSS Quickstart Guide. The simplified
Beginners Guide to Developing a strong coding Foundation, Building
Responsive Websites, and mastering of modern websites A Social,
Ethical and Legal Perspective. ClydeBank Media LLC: Idea Group
Publishing

Frain, B. (2020) Responsive Web Design with HTML5 and CSS: Develop
future-proof responsive websites using the latest HTML5 and CSS
techniques. Third Edition. Birmingham, UK: Packt Publishing

Carey, P. (2020). New Perspectives on HTML 5 and CSS:

Comprehensive: Comprehensive (MindTap Course List) 8th Edition,
Cengage Learning

147
 Web Development

5.1 Introduction

The most importance aspect in creating a website is the content and content organisation. Content
should be organised according to the user’s needs that is what is the main reason for a user to visit
the website? Therefore, to successfully design a large website is to organise the information logically,
so that users can easily locate the information they are looking for. The first step in organising a
website is a concept called "chunking,” dividing the site's content into manageable chunks of
information, with all chunks related conceptually to one another. Content within each chunk can then
be arranged hierarchically, so that the most important topics within a chunk will appear first in a
navigational system.

Knowledge Check Questions 5.1

1. An intranet can be defined as, a public, internal, local area network to

access information across some parts of the organisation

True
False

2. File naming and folder naming are not essential when it comes to website
organisation.

True
False

3. Chunking can be defined as dividing the site's content into manageable

chunks of information

True
False

5.2 Organising your Web Site

Introduction

Organising your website will depend on the amount of content there is on the website. If your web
pages have more content, you will want to present that content in an organised manner so that
readers will be able to access content more easily.(Dean.J, 2019:133)

148
 Web Development

5.2.1 File Naming

There should be much consideration given to File Naming. When you create a new Web page, you
must include the page name and the extension (usually newpage.html). These are some of the
criteria when creating Page names (including folders). They should:

Be kept short
Be as meaningful as possible
Be in lowercase
Names containing multiple words should contain hyphens to join words (underscores should not
be used)
Never contain spaces or special characters. (Dean.J ,2019:135)

For your files to traverse the network successfully, you must name them in accordance with
established file naming conventions, that is:

Avoid character spaces in filenames. Although this is perfectly acceptable for local files on a
Macintosh or Windows machine, character spaces are not recognised by other systems. It is
common to use an underscore or hyphen character to visually separate words within filenames,
such as andre_bio.html or andre-bio.html. Hyphens are sometimes preferred because they tend
to better enable search engines to index the individual words in a filename
Avoid special characters such as ?, %, #, /, and : in filenames. It is best to limit filenames to
letters, numbers, underscores (in place of character spaces), hyphens, and periods
Use proper suffixes. HTML documents should use the suffix .html (.htm also works on most
servers). GIF graphic files take the suffix .gif, and JPEGs should be named .jpg or .jpeg. If your
files do not have the correct suffix, the server might not send the proper HTTP Content-Type
header, and thus the browser may not recognise the files as web-based files
Consistently using all lowercase letters in filenames, while certainly not necessary, may make
them easier to remember. In addition, filenames are case-sensitive on some servers, so keeping
them all lowercase avoids potential hassles. (Robbins. J, 2018)

149
 Web Development

Folder Naming

To keep your Website structure tidy and easier to use, it is a good idea to use several standard
folders, e.g. use an 'images' folder for all your pictures and a 'news' folder for your news stories (if you
publish these regularly). Folders can contain any number of sub-folders. For example:

/department
/images
/news
/news/2013
/news/2014

Ideally, folder naming and organisation should be decided at the planning stage of a new Web site.
Ensure everyone who works on the Web site is aware of the folder structure. (Dean.J, 2019:135)

Intranets

Intranets are secure internal facing Websites. Usually organisations have only one Intranet site. They
are generally used for storing Policies and Procedures for that organisation. No person that is
external to the organisation will have access to the Intranet, as the information or documents on the
Intranet are confidential. Intranets use the same technologies and techniques as the larger Internet,
and they often are simply a private access area in a larger company website. (Laundon and Laundon,
2022:84)

5.2.2 Renewing and Replacing Material

It is important that unwanted files or obsolete or even old files are removed from the server. When
making changes to a page, it is vital that the original is saved and possibly stored away or archived
within the system (but invisible to users). Should the need arise to revert to an old page or
information, this will be easily available.

Redirects

This is somewhat common on Websites. If a Web page is to be removed or renamed, a redirect

should be set up. In this way, users will be redirected to the new location. If this is not set up, users
will be redirected to a dead-end. This is unprofessional and reflects poorly on the Website, and the
organisation.

150
 Web Development

Think Point 5.1

1. What you say and how you say it will depend on such things as?

2. Business owners have four options when it comes to web maintenance,

can you identify these four points.

5.3 Creating Effective and Accessible Content

Writing Effective Web Copy

Although the rules of good writing apply, equally to the web as they do to print, screen reading differs
from print reading in several ways:

Print is static and rigid whereas the web is dynamic and flexible: Websites can be accessed on
many devices (e.g. laptop, smartphone, etc.) and browsing software (blind people may use a
screen reader), all with different sizes and resolutions
Web readers skim and scan rather than read in detail, they look at headings, subheadings and
hyperlinks. They look for keywords, and they jump around and scroll up and down
Web readers are constantly on the move: they are impatient, intolerant and critical and if they
don't see something that grabs their attention within seconds they will look elsewhere

Video Activity 5.1

https://www.youtube.com/watch?v=Y3jKa9fPvSU
Use the video link to find out more about writing effective content and answer
the questions that follow.
1.Identify 3 factors to consider when writing web content?

151
 Web Development

In a nutshell, effective Web writing:

Is like a conversation - think as if you were talking to the reader, rather than writing
Answer people's questions (don't just rely on a Frequently Asked Questions section to do this)
Let’s people 'grab and go' - people rarely want to read everything on a website, they want to grab
what they need and move on
How can this be achieved?

Practical Application or Examples 5.1

1. What steps in Website Maintenance are to be done weekly?

2. How would you write/create User-Friendly Web Content?

Stop and think, as planning what you are going to write will be the key. Some key questions to be
asked are:

What is the key message? What is that you are trying to achieve?
What is its purpose/goal?

E.g. to inform, to promote, to educate, to persuade, to inspire, etc.

Who is the target audience(s)?

Think of them in terms of age, language ability, level of education, level of expertise on the topic, etc.

Why are they coming to the Website? What information are they looking for or what do they need
from the Web page?

Tip: Try to think as a member of your target audience and list the questions they need answers to.
Write these questions as headings and under each point and make notes of the points that need to
be covered.

Once you have clear answers to the questions above, you are ready to write. However, before you
start, read the following guidelines:

Cut the fluff: write for your target audience not for yourself (or anyone else who is not your target
reader). As a rule, Web content should have half the word count of its paper equivalent

152
 Web Development

Use clear and simple language:

Adopt a conversational style of writing (address your reader as you and refer to your
organisation as we)
Avoid using complex sentence structures: i.e. have one idea per sentence
Write in the active form (most of the time): e.g., we did the research so that... instead of …. The
research was done by us so that...
Avoid slang or jargon at all costs

Use simple words where possible (e.g. end rather than terminate, because rather than in view of the
fact, etc.)

Have only one idea per paragraph

Start both Web pages and paragraphs with an introduction, followed by explanations and details
Use lists whenever possible (bullet lists when order is irrelevant and numbered lists when it is)
Divide your Web page into sections of a few paragraphs, introduced by clear headings and sub-
headings
Systematically check the spelling and grammar of your Web pages

Knowledge Check Questions 5.2

1. Which statement best describes how a web user reads a website?

A. Scan the site looking for content

B. Thoroughly read every word that is written
C. Look at pictures to find anything that excites them

2. Which of the following statements is an example of good website design?

A. Having very detailed instructions to teach the user how to use the
website
B. Having navigation which makes it intuitive to use the website
C. Having lots of flashing animation that shows how clever the
designer is

3. Animation should never be used on a website, it is just too distracting.

True
False

153
 Web Development

Links and Navigation

A clear and consistent style of presentation on each Web page allows users to locate navigation
mechanisms (e.g. navigation bars, content lists, site maps, etc.) more easily. Link text that is
ambiguous, unclear or meaningless when taken out of context can be frustrating for anyone,
especially blind people using a screen reader, and people with learning and reading difficulties.

Making link text as meaningful and descriptive of its target as possible is one of the most important
things you can do to make your Webpages more usable and accessible.

For this reason, do not use meaningless expressions or words like click here, read more, etc.
which don't say anything about the link target
In fact, 'click here' is never necessary
Make sure link text is unambiguous
Do not embed too many links in a block of text, instead put the links in a bullet list at the end of the
section

Using Images

Attractive and appropriate images enhance the visual appeal of Web pages. However, they can be
problematic for users who, for one reason or another, cannot see them, and because computers and
assistive technology (e.g. screen readers) cannot analyse the content of images and determine what
they represent. Therefore, providing appropriate alternative text for images is essential for three
reasons:

1. It can be read by screen readers, making the content and function of images accessible to blind
users in particular.
2. It is displayed in place of images in browsers when the user has chosen to turn them off or in the
case of non-graphical browsers.
3. It provides a semantic description to images that can be read by search engines.

Another important aspect of using images in webpages relates to file and pixel size. Images should
be optimised to a suitable size for the web so that they are quick to download. To optimise the images
for the Web, it is recommended that the size of an image be kept under 50KB.

154
 Web Development

Practical Application or Examples 5.2

The use of images on Websites is very common. It enhances the way a

website looks and it provides visuals examples of what the designer wants to
convey. However, there is a severe problem with Copyrights of images.
Provide a short essay on the legal use of images from websites. 1. How can
this be achieved and provide examples of when you are not allowed to use
images from websites.

Improving Website Visibility

The Best from Search Engines

Search Engine Optimisation (SEO) is the process of improving the visibility of a Website or a Web
page in search engines.

Search engines are deaf, blind, and do not understand JavaScript or plugins. They analyse Web
page content to determine how it should be indexed (for example, words are extracted from the titles,
headings, or special fields called Meta tags). Websites that are well-structured, accessible and use
valid HTML are ranked higher in search results.

A website’s SEO can be improved by doing the following things:

Use clear and meaningful headings (because search engines rank text in headings higher than
text in paragraphs without headings)
Use meaningful alternate text for images
Use clear and meaningful text for all links (including those to downloadable files)
Add appropriate title tags on links and images
Provide a concise summary of the Web page in the first paragraph (because some search
engines only index the first 100 words on a Web page)
Ensure the Webpage is usable with images, JavaScript and CSS are turned off

155
 Web Development

Think Point 5.2

1. Over time, links break and stop working. How would one go about
making sure this does not happen or prevents this from happening?

2. List and explain the key features for organising a Website.

5.4 Website Maintenance

Owning a website has its responsibilities. It is unprofessional to just upload the content and forget
about it. Regular Web site maintenance is necessary if you want your site to be successful and if
there is a need for wanting people to make regular visits to your Web site.

Why is Website Maintenance Important?

Video Activity 5.2

https://www.youtube.com/watch?v=OFpE7Ou7-nI
1. What does Website Maintenance mean?
2. Why would you need a website maintenance process?

With regular website maintenance, your site will run smoothly. There will be no disgruntled visitors
because something on the site did not work or a link you provided is broken.

Regular visitors are looking for what is new, so it is important to provide them with new and exciting
information, products or features.

Web sites are subject to being hacked. By using a proper Web site maintenance program, you can try
and avoid being hacked by keeping everything up to date.

There are all kinds of things that need to be done when maintaining a Web site. Whether you decide
to do these yourself or hire out the work, it still needs to be done.

156
 Web Development

Practical Application or Examples 5.3

Website maintenance is a key aspect of the upkeep of a website. Explain

some of the challenges one faces if maintenance is not carried out regularly.

Activity 5.1

1. How would you make each Web page an effective and accessible Search
Engine?
2. Websites are designed to trigger action by readers, so using a clear call of
action list how would you end every web page content?

Feature Addition

If at the time you created the Website there was something that was left out because of budget
constraints, and maybe it is now affordable, this should be added and updated.

There could also be feedback from visitors to your site. Missing this important information can be
detrimental depending on what type of site you have.

Fix any usability issues that have been mentioned.

5.5 Website Content

5.4.1 Product Updates

Product updates are important if your site has an e-commerce element to it.

Regular Maintenance Tasks

There are some regular Website maintenance tasks you should perform on a scheduled basis.
Scheduling at least monthly would be the timeline to start with.

157
 Web Development

Backing up your website

Backing up a website is something that should be done all the time, especially if it is an e-commerce
site or site that has transactions taking place on it. Things happen. Even though the Web hosting
company says they, backup the sites on their servers, their last backup could have been before your
last edit. If the server crashes for some reason or your site is hacked, your edits will not exist if the
Web hosting company restores what they had backed up. Imagine losing a whole day’s work, just
because you did not take a few minutes to back up the site.

Video Activity 5.3

https://www.youtube.com/watch?v=ugAjyA_hq6o
1. Why is it important to design accessible websites?
2. Why is website content strategy essential?

Monitor Website Outages

There are several programs on the market that notify you if the site has gone down. Ideally, you
should be the first person to know that your site is down and not when a customer notifies you of such
an action. It reflects poorly on your company or organisation.

Site Up is one such program that runs on your computer in the background checking the site on a
regular basis.

It will notify you if your site goes down via a pop-up. There is more sophisticated software that will
either send you an e-mail or even a text message (SMS) notifying you that the site has gone down.

Test Website Speed

Testing the download speed of your site regularly is important. Especially if you have added a new
feature. Web surfers have a very short attention span. If your site is slow to load, they are not going to
wait. You need to do everything you can to improve the download speed of your site so that visitors
stay and read the content on your site and hopefully provide you with organic incoming links by
spreading the word about how good your site is. Given the cost of bandwidth in South Africa, it is
important to have good download speeds for customers.

158
 Web Development

Knowledge Check Questions 5.3

1. Maintenance consist of the which action(s)

A) Replace of component
B) Repair of component
C) Service of component
D) All of the above

2. To make your website mobile friendly, you can make your website

A) Responsive
B) Reactive
C) Fast Loading
D) Light

3. Which of the following is true about JavaScript?

A) It is a server side scripting language

B) It is client side scripting language
C) It is a Software
D) It is a database

4. Which of the following statements is true?

a) The web designer should not just be concerned about the looks but
also about user interface
b) Usability is especially important in web design
c) A and B
d) None of the above

5. With the increase in preventive maintenance cost, breakdown

maintenance cost

A) Increases
B) Decreases
C) Remain same
D) Any of the above

159
 Web Development

Revision Questions

1. How do you provide a meaningful link text?

2. Why is it important to do website maintenance?
3. How would you organise websites and intranets?

5.6 Summary

There are several methodologies that explain best practises for creating, organising and maintaining
Websites. This unit provided a generic sample of what can be done to achieve this. In conclusion, it is
important to create web pages that are compatible on mobile devises and well as on desktop
computers as well. As mentioned early, the generation of people that are always online these days is
not patient enough to struggle with a website that is not responsive. As a web developer, it is
important to make sure that you have done enough research as to the type of content you are
creating, your target market and the keywords that will make the website a hit. Enhancing the user’s
experience with links and menus is very important. When the website has been up a running for a
while it is advisable to have a maintenance plan in place. A website can be updated to suit the client’s
needs or to meet the web users interests depending on what users are constantly searching for.

160
 Web Development

Case Study 5.1

We Got Lites
We GotLites is a place where you can find the custom, unique and top-quality
lighting products that would meet all your needs of home decoration and
renovation.

BACKGROUND
Situated in the Staten Island, NY, WeGotLites is engaged in the lighting
business for about four generations and have more than 20 luxury lighting
showrooms. They launched their first business website in 1998 when they
realised the role the internet can play in bringing more customers and making
their business renowned, worldwide.

THE PROBLEM
We Got Lites approached us to redesign their business website. Though they
were having a website, it was not bringing enough conversions despite the
huge website traffic. They wanted us to design the website from the scratch
that would not only represent their business to the best but would also incite
the visitors to make a purchase.
(https://we-got-lites.business.site/ )

Sample webpage

161
 Web Development

Answers to Activities

Knowledge Check Question 5.1

1. True
2. False
3. True

Think Points 5.1

1.

Their level of expertise. If you expect to be speaking to experts in your website copy, you are
going to use different language than if you are speaking to novices
What they really want to know. This is core to writing effective website content because if you can
answer their questions better than anyone else can, you have a greater chance of winning them
as a customer
How they will get to the page. Understanding where your users come from or what they may be
searching for when they land on your page can guide how you position your content
Their interests. Knowing what your audience is interested in beyond the landing page you are
creating can help you know what elements to add to your website content to keep them engaged
on your site

2. Business owners have four options when it comes to web maintenance, can you identify these four
points.

Hire a web and marketing team in-house. This is a more expensive option. You must pay for each
person’s salary, benefits, overhead costs, etc
Hire a variety of specialised freelancers. Hiring freelancers is less pricey but it requires good
coordination and communication. The issue here can be that freelancers work independently and
do not see the bigger picture of your business
Hire a web maintenance company. Working with a web maintenance company is a smart option. It
will have all the resources you need for web maintenance, including strategy, marketing, and
programming services
Do it yourself. If you decide to handle the web maintenance yourself, be prepared to invest an
ample amount of your time and patience
Business owners have four options when it comes to web maintenance, can you identify these
four points
162
 Web Development

Hire a web and marketing team in-house. This is a more expensive option. You must pay for each
person’s salary, benefits, overhead costs, etc
Hire a variety of specialised freelancers. Hiring freelancers is less pricey but it requires good
coordination and communication. The issue here can be that freelancers work independently and
do not see the bigger picture of your business
Hire a web maintenance company. Working with a web maintenance company is a smart option. It
will have all the resources you need for web maintenance, including strategy, marketing, and
programming services
Do it yourself. If you decide to handle the web maintenance yourself, be prepared to invest an
ample amount of your time and patience

Video Activity 5.1

1. Be concise and straight to the point.

2. Write simply, avoid unnecessary complexity like big words and long winding sentences
3. Use keywords, words that most are commonly used on the net.

Practical Activity 5.1

1. The most time-sensitive of these are website security updates and patches. Without these, your
website has the potential to be an actual danger to those who click on it.

To be done weekly:

Check that all your pages are loading without errors

Run a backup and make sure a previous version of your site is stored
Make updates to website software and plugins
Check that all your forms are running properly
Remove any spam comments from pages and posts
Check your pages to see if there are any broken links
Search for 404 errors and fix or redirect
Write one or more blog posts to keep your community engaged and encourage SEO traffic

2. It is important to target your audience when writing for the web. By knowing who you are writing for,
you can write at a level that will be meaningful for them.

Use the words your users use. By using keywords that your users use, you will help them
understand the copy and will help optimise it for search engines

163
 Web Development

Chunk your content. Chunking makes your content more scannable by breaking it into
manageable sections
Front-load the important information. Use the journalism model of the “inverted pyramid.” Start
with the content that is most important to your audience, and then provide additional details
Use pronouns. The user is “you.” The organisation or government agency is “we.” This creates
cleaner sentence structure and more approachable content
Use active voice. “The board proposed the legislation” not “The regulation was proposed by the
board”
Use short sentences and paragraphs. The ideal standard is no more than 20 words per
sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break
the sentence into two. It is ok to start a sentence with “and,” “but,” or “or” if it makes things clear and
brief
Use bullets and numbered lists. Do not limit yourself to using this for long lists—one sentence
and two bullets is easier to read than three sentences
Use clear headlines and subheads. Questions, especially those with pronouns, are particularly
effective
Use images, diagrams, or multimedia to visually represent ideas in the content. Videos and
images should reinforce the text on your page
Use white space. Using white space allows you to reduce noise by visually separate information

Knowledge check question 5.2

1. A
2. B
3. False

Practical Activity 5.2

When adding images to your website, it's important to keep the following things in mind.

Are we legally allowed to use the image?

Is it copyright protected? If so, do we have permission to use it?
Do you have the permission of the subjects in the image (if needed)?
We have permissions to use images of all faculty, staff, and students unless they opt out.

164
 Web Development

Beware of incorrectly licensed images

While understanding the difference between licenses and always attributing your images can help
you maintain legal image use, you can still run into trouble when images are licensed incorrectly.

For example, a person may buy a CC image for his or her own purpose, but then upload it to an
image-sharing site and label it with a CC license. If that happens and you use that image, you are still
infringing on the copyrights held by the original artist – and since intent does not matter when it
comes to copyright infringement, you may be fined.

Buy the rights to the images.

Buying image rights is always an option, but the cost of doing so can range from a dollar to $15.00 or
higher.

Create your own graphics.

You don’t need to be an Adobe Illustrator or Photoshop master to create great graphics. There are a
lot of tools and resources that can help you get the look without the expensive software or time
expenditure.

Take your own photos.

Today’s smart phones have impressive cameras and filters that make it easy to snap a decent photo.
When you need an image for your web page, take one yourself, and begin to build an image library of
your own. Not only can you be absolutely sure you are not breaking any copyright laws, but you’ll
have some incredibly unique photos.

Download images from trusted sources.

While there are thousands of places online to find images, there is risk that the images may be
incorrectly labelled.

165
 Web Development

Think point 5.2

1. Links breaks because the resources they are pointing to has been changed or moved, to avoid this
from happening, regular maintenance needs to be done on the web sites, that is constantly checking
to see if links are still performing as they should and that resources are still in the same positions that
they were in before.

2. When organising a web site, consider the following:

List the pages that you want include on your website that includes the home page, the about
page, contact page etc
Use effective colour schemes- It is important to use the company colours when creating a web site
The web content must be relatable to the users. Users should find exactly what they are looking
for when they visit the website. This means that web content should not be misleading

Video Activity 5.2

1. Website maintenance is the act of regularly checking your website for issues and mistakes and
keeping it updated and relevant. This should be done on a consistent basis to keep your website
healthy, encourage continued traffic growth, and strengthen your SEO and Google rankings.

2.

Good customer experience - Google wants its users to have a good user experience when they
click on a website from search results. Therefore, the more time people spend on your website,
the better
Overall Website Maintenance: This goes hand in hand with user experience. If you have issues
with your website, broken links, outdated plugins causing some sort of problems on your website
all these will provide a bad user experience for the user and Google will notice that too
Website Performance: Website Loading Speed it is a huge ranking factor in Google
Security: Making sure that your website is NOT hacked, it protects your reputation in Google. If
you are hacked, Google will quickly notice that and will remove you from the search engine
Website maintenance is the act of regularly checking your website for issues and mistakes and
keeping it updated and relevant. This should be done on a consistent basis to keep your website
healthy, encourage continued traffic growth, and strengthen your SEO and Google ranking

166
 Web Development

3. Good customer experience - Google wants its users to have a good user experience when they
click on a website from search results. Therefore, the more time people spend on your website, the
better.

Overall Website Maintenance: This goes hand in hand with user experience. If you have issues with
your website, broken links, outdated plugins causing some sort of problems on your website all these
will provide a bad user experience for the user and Google will notice that too.

Website Performance: Website Loading Speed it is a huge ranking factor in Google

Security: Making sure that your website is NOT hacked, it protects your reputation in Google. If you
are hacked, Google will quickly notice that and will remove you from the search engine

4. Website maintenance is the act of regularly checking your website for issues and mistakes and
keeping it updated and relevant. This should be done on a consistent basis to keep your website
healthy, encourage continued traffic growth, and strengthen your SEO and Google rankings.

Practical Application 5.3

We all know the importance of having a well-structured website. But simply having the site up and
running is not enough. Regularly updating and maintaining your site is crucial to ensuring that your
site is running at full capacity.

Just like cars, websites require maintenance to operate properly. Properly maintaining your site helps
to ensure site security, increase the number of new visitors, boost returning traffic, and more.

It Improves Security

Security is the main reason that website maintenance is so important. If your organisation is using a
Content Management System (CMS) such as Drupal or WordPress, you will want to ensure that your
site is keeping up with software patches and security updates. Failing to do so gives hackers the
chance to steal data from your site.

167
 Web Development

It Boosts Site Traffic

In order to provide searchers with the best quality content, search engines such as Google raise
rankings for websites that are updated regularly. A higher ranking increases your site’s visibility, which
increases the likelihood that your content appears when your target audiences search for relevant
keywords. Updating your site with valuable information, fixing broken links, removing duplicate pages,
and keeping your content updated will help drive both new and returning visitors.

It Optimises the Visitor Experience

Regularly updating your site with sharable content such as upcoming events, image galleries, and
blogs gives your audience an idea about who you are and what you do. Engage with your audience
by including actionable items such as a newsletter signup form and social media icons that link to
your organisation’s profile. A well-maintained website helps promote your brand, work, and mission.
Remove information that is out-of-date and conduct a site audit to track issues and errors on your
site. Do this regularly so that you can provide your visitors with the best possible user experience.

Website maintenance is important for all organisations, both big and small. Regularly maintaining
your site will improve performance and provide a safe and secure environment for your visitors.

Activity 5.1

1. Each web page you construct needs to contain the following elements. Note the careful placement
of keywords, the search words people would use to find this particular web page.

Title — provocative and descriptive, containing the most important keywords from that webpage,
no more than 80 characters. This is what shows up hyperlinked in search engine results, so make
people want to click on it
Meta tags — The description meta tag should include one or two sentences (up to about 250
characters) describing the contents of this particular webpage. Work into the sentence the most
important keywords and key phrases that occur on this page. Some search engines will display
your description
Headlines — H1, H2, H3 in HTML parlance. Your headline and subheadings should include your
important keyword at least once
Body text — The first paragraph of the content of your webpage article or text should contain the
main keywords for that page

168
 Web Development

Hyperlink text and filenames — Search engines believe that the words contained in hyperlinks on
your web page are important, and thus rank them higher. If the filenames contained in the
hyperlink URLs contain important keywords (such as widget.html for the filename of your widget
order page), so much the better

2. To help initiate that activity, use a clear call to action at the end of every page. Use these tips to tell
the reader exactly what you want them to do and why they should act.

Include proof. Show readers why they can trust you. Back up your statements by including
testimonials, stats, data, and social media mentions that provide proof and support
Overcome objections. Put yourself in the shoes of your audience and imagine what objections are
holding them back from acting. Address those concerns and provide options like free trials and
money-back guarantees to make it impossible for the audience to resist your offer
Use action words. Do not let your audience be the least bit confused when they reach the end of
your page. Include a call to action that uses action words (get started, click here, sign up, call, fill
out, etc.) that tells them exactly what they need to do to take the next step

Video Activity 5.3

1. As designers, we have the power and responsibility to make sure that everyone has access to
what we create regardless of ability, context, or situation. The great thing about making our work
accessible is that it brings a better experience to everyone
2. Website content strategy is critical in today’s digital landscape where search engine rankings and
being discovered by prospects is driven by quality content. Not only will your content help people
find your website, the quality and relevance of your content will make visitors stay and move
through your site. By following these steps, you are on a path to creating successful website
content that will increase traffic and generate leads for your business

Knowledge check question 5.3

1. D

2. A

3. B

4. C

169
 Web Development

5. C

Case study

THE SOLUTION

Selecting the right platform

Based on client's requirements, the recommended 3dCart for the development of this e-commerce
Store. 3dCart is the one stop shop for creating online stores. Its responsive themes, easy to follow
store management techniques, faster response time, regular updates, enhanced security, and 24
hours support team are the things that could let us design an eStore adaptive to the client's unique
business requirements.

Inter-connectivity

The paramount in the designing and development process was the inter connectivity within the site.
Within so many brands in play, it was crucial to ground the visitors to make them know where they are
and which brand they are looking for. This connectivity was to show a clear path to the visitors that
where they need to go next. We ensured a lot of flexibility so it can easily adapt to what the audience
look for.

THE RESULT

As a result of by developing a web page for WeGotLites an eCommerce store that was not only good
in the appearance but also had an amazing functionality to let the visitors find what they look for. The
responsive design, fast loading and easy navigation options worked great to bring new customers.

The full control over the website i.e. for managing content, adding and removing products, and more.
Now, it has experienced significant growth in their conversions through the newly designed website
and the greater ROI is the proof of that.

170
 Web Development

Answer to Revision Questions

Unit 1

Revision Question Answers:

1. The main language used for web designing are

HTML: Base template

CSS: Styling

JavaScript: Functionality

PHP: Server-side scripts

2. Website Designing may be defined as front-end architecture of websites using multiple skills and
disciplines i.e. Graphics, User Interface (UI), User Experience (UX), web layouts. Along with back end
script, the broad term becomes ‘Web Development’ but Web Designing only includes the front-end
portion of the websites. However, the front-end is a highly popular professional term too.

3. It is Get Method. For example, if the Google search page used a form with an input parameter
named q with the get method, and the user typed in the string “MANCOSA” and submitted the form,
the browser would request the following URL from the Web server: http://www.google.com/search?
q=MANCOSA.

Unit 2

1. HTML page structure: These elements form the basic page structure in every Web Browser. The
are to be used semantically. HTML is the basic of all web technologies being used today.

HTML stands for Hyper Text Mark-up Language

In the core mark-up language lies HTML tags
Each HTML tag will have different content

These html tags will add up to make html file.

171
 Web Development

2. Well-formed XML documents have the following features:

An XML document must have a root element

XML tags are case sensitive
XML elements should be properly nested
XML values should be properly quoted.
XML tags should be closed properly.

3. HTML elements are semantic parts of a document having start tag and end tag.

While tags are specific name character used for that purpose only, that is, p tag for a paragraph.
Attributes are defined as specific values for a given element like alt attribute for image tag.

4. Naming rules are:

Element names must start with a letter or underscore.

Element names are case sensitive.
Element names cannot start with the letters XML.
Element names can contain letters, digits, hyphens, underscore, and periods.
Element names cannot contain spaces.

Unit 3

1. Dreamweaver Templates enables webmasters to define “non-editable” and “editable” regions of a

webpage; only in Dreamweaver template, the “non-editable” regions can be edited. Any changes
implemented to the Dreamweaver Template will update any HTML pages that use the template.

2. This is also one of the commonly asked web designing interview questions and answers and there
are many ways to describe what a web browser does. However, we will try to put it as simply as
possible and say that web browsers are software programs that allow a user to locate, access, and
display web pages.

3. This is one of the tricky interview questions on web development because you need to explain that
the actions have to be prioritised according to the organisation’s type and requirements. For example,
if the organisation handles vital data, the security should be a top priority.

172
 Web Development

If, on the other hand, we are talking about small or medium-sized online businesses, SEO and UX
should be prioritised.

4. In JavaScript, the system is not class-based like in most of the programming languages; it is
prototype based. So, let’s try and explain both types of inheritance.

Class inheritance – a class is a description of the object to be created. Classes inherit from classes
and create subclass relationships.

Prototypal inheritance – a prototype is a working object instance. Objects inherit directly from other
objects.

Unit 4

1. To program business logic or custom functionality on your website, web developers use
programming languages. There are many, but the most common ones are PHP, ASP .NET, Java and
Ruby or less common or older languages like Perl, ColdFusion, C/C++ or Python.

2. The term web server can refer to either the hardware (the physical computer) or the software (the
computer application) that helps deliver your website to the end user. We are referring to the software
on the server that makes your website work. The web server is the layer between the Operating
System and Database Engine. The choice typically depends on what other technologies you are
using and where you will be hosting your website. Two web servers that dominate the landscape of
the Internet: Apache (Linux) and IIS (Microsoft).

3. Magazine website features articles, photos and videos that are informational and educational. In
the last twenty years, the magazine industry has changed from a print-only platform to largely digital
format. The magazine website type works well for informational websites, particularly publications
from universities and organisations. As you think about creating a magazine site, start by building a
basic framework. Users should see a similar layout no matter what day they land on your homepage,
and each article must have a similar layout and navigation.

4. A website survey is a way for businesses to gather feedback from visitors about their experience of
a website and find ways it can be improved.

173
 Web Development

Website surveys can take different forms, from small slide-ins or pop-ups in a corner to full-page
overlays, but they all help website owners and managers collect qualitative insight that sheds light on
the ‘why’ behind user actions.

Unit 5

1. Link texts like “click here” or “read more” are not good in terms of accessibility they should clearly
describe what the URL is about. This is especially helpful to people who rely on screen readers.
Assistive software can jump between links by generating a list of them. Here are some
recommendations as to the links:

Avoid raw URLs (like https://website.com/page), because screen readers will read it out to users,
no matter how long it is
Use meaningful keywords
Avoid many extra words and stay concise
Integrate link text naturally into the content
Make sure it reads well independently of the rest of the text
If it leads to downloading a file, specify its type and size (“Document sample (PDF, 5MB).”
Avoid extra links leading to the same destination

2. Many new businesses already have a lot on their plates without worrying about constantly checking
in on their website. It is tempting to buy a domain name, throw up something temporary, and just
worry about it later. There are many reasons why this is not a good idea. Maintaining a current,
healthy, and active website is important for a number of several reasons.

3. Organising Websites and Intranets:

The organisation of information in websites and intranets is a major factor in determining success,
and yet many web development teams lack the understanding necessary to do the job well.
Our goal is to provide a foundation for tackling even the most challenging information organisation
projects. Organisation systems are composed of organisation schemes and organisation
structures.
An organisation scheme defines the shared characteristics of content items and influences the
logical grouping of those items. An organisation structure defines the types of relationships
between content items and groups.

174
 Web Development

Organisation is closely related to navigation, labelling, and indexing. The hierarchical organisation
structures of websites often play the part of primary navigation system. The labels of categories
play a significant role in defining the contents of those categories.
Manual indexing is ultimately a tool for organising content items into groups at a very detailed an
incredibly detailed level.

175
 Web Development

References
Boehm, A. Ruvalcaba, Z. (2018) Murach’s HTML5 and CSS3,4th Edition, Mike Murach
&Associates
Carey, P (2021) HTML5 and CSS Comprehensive. 8th Edition. Cengage Learning In

The recommended textbooks/readings for this module are:

Carey, P. (2020). New Perspectives on HTML 5 and CSS: Comprehensive: Comprehensive

(MindTap Course List) 8th Edition, Cengage Learning
DuRocher, D. (2021). HTML and CSS Quickstart Guide. The simplified Beginners Guide to
Developing a strong coding Foundation, Building Responsive Websites, and mastering of
modern websites A Social, Ethical and Legal Perspective. Idea Group Publishing. ClydeBank
Media LLC
Frain, B (2020). Responsive Web Design with HTML5 and CSS: Develop future-proof responsive
websites using the latest HTML5 and CSS techniques, 3rd Edition, Packt
Grant, K.J. (2018) CSS in Depth 1st Edition, Manning
Robbins, J. (2018). Learning Web Design, A beginners guide to HTML, CSS,Javascript and Web
Graphics 5th Edition, O’Reilly Media
www.youtube.com
https://adamtheautomator.com/static-vs-dynamic-website/
https://www.experienceux.co.uk/
https://www.signitysolutions.com/
https://www.techopedia.com/definition/2668/mark-up-language

176
 Web Development

Bibliography
Boehm, A. Ruvalcaba, Z. (2018) Murach’s HTML5 and CSS3,4th Edition,Mike Murach
&Associates
Carey, P (2021) HTML5 and CSS Comprehensive. 8th Edition. Cengage Learning In

The recommended textbooks/readings for this module are:

Carey, P. (2020). New Perspectives on HTML 5 and CSS: Comprehensive (MindTap Course List)
8th Edition, Cengage Learning
DuRocher, D. (2021). HTML and CSS Quickstart Guide. The simplified Beginners Guide to
Developing a strong coding Foundation, Building Responsive Websites, and mastering of
modern websites A Social, Ethical and Legal Perspective. Idea Group Publishing. ClydeBank
Media LLC
Frain, B (2020). Responsive Web Design with HTML5 and CSS: Develop future-proof responsive
websites using the latest HTML5 and CSS techniques, 3rd Edition, Packt
Grant, K.J. (2018) CSS in Depth 1st Edition, Manning
Robbins, J. (2018). Learning Web Design, A beginners guide to HTML, CSS,Javascript and Web
Graphics 5th Edition, O’Reilly Media
www.youtube.com
https://adamtheautomator.com/static-vs-dynamic-website/)
https://www.experienceux.co.uk/
https://www.signitysolutions.com/
https://www.techopedia.com/definition/2668/mark-up-language

177
 Web Development

178