1.

0 Introduction to Web Design

Lesson Introduction

Just imagine a life of a person in modern world. How do they do their work that
much fast? How do they manage to save their time? Well answer would be the
Internet. Now all most everything can do very easily using the Internet. People
can do online banking, bill payment, buy products, sell products, communication,
can get any information etc. In your lifetime you may also have used the Internet
at least once. Have you ever thought about how it works? How it provides such
vast information within a second? In this lesson you will learn how it works.
Mainly this lesson gives you an introduction to web and web architecture,
different application areas, operation modes, communication concepts,
information organization and fundamental building blocks of web-based system
design.

Learning Outcomes:
After completion of this lesson, the learner will be able to describe diverse types
of web-based systems and their operations.
This lesson enables you to
▪ Describe application areas of web - based systems
▪ Categorize the types of web sites
▪ Describe website components
▪ Describe the process of web communication
▪ Describe basic web design tools
▪ Structure and Organize information to build web sites
Lesson outline
▪ What is the Internet and World Wide Web (WWW)?
▪ Internet and Web as a communication media
▪ Asserts of web communication
▪ Website types and their operational modes
▪ Information gathering, structuring and organization of content
▪ Aesthesis of web and design concepts with colors
▪ Application Technologies in web
▪ Web design tools and IDE’s
1.1 What is the Internet?

Internet is the global network that defines how the hardware can be connected
or it can be seen as a medium for collaboration and interaction between
individuals and their computers regardless geographic location. That includes
everything from the cables that carry terabits of data/information every second
to inter connected computers. Examples of devices on the Internet are PCs,
laptops, routers, servers, cellular phone towers, satellites, radios, smartphones
and many more. All these devices together create the network of networks.

All this hardware wouldn't work without the second component of the Internet:
the protocols. Protocols are sets of rules that machines (devices) follow to
complete tasks. There are several protocols on the Internet. For example,
hypertext transfer protocol is a protocol uses to view websites through a browser:
that's what the http at the front of any Web address stands for.

The Internet was conceived by the Advanced Research Projects Agency (ARPA) of
the U.S. government in 1969 and their future-oriented funder of ‘high-risk, high-
gain’ research, lays the groundwork for what becomes the ARPANET and, much
later, the Internet.

Since its beginning in 1969, the Internet has grown from four host computer
systems to tens of millions. However, just because nobody owns the Internet, it
doesn't mean it is not monitored and maintained in diverse ways. The Internet
Society, a non-profit group established in 1992, oversees the formation of the
policies and protocols that define how we use and interact with the Internet.

Follow the link History of the Internet to watch the Internet history.
1.2 What is the WWW?

The World Wide Web(WWW) is an Internet based hypertext project that allowed
global information sharing. It is a collection of interlinked multimedia documents
that stored in the Internet. A protocol (HTTP) is used to access the documents.
Also, it is a one way of sharing information via Internet. The WWW is based on
two concepts:
▪ Hypertext
▪ Web browser

1.2.1 Hypertext

Hypertext is text that links to other information. By clicking on a link in a

hypertext document, a user can quickly jump to different content. Though
hypertext is usually associated with Web pages, the technology has been around
since the 1960s. Hypertext is text, which is not constrained to be linear content.
Hypermedia is a term used for hypertext which is not constrained to be text: it
can include graphics, video and sound.
Examples (click on the text and image)
• Hypertext

1.2.2 Web browser

When it needs to view information from the Internet, First it requires opening a
web browser. Web browser is software that used to access the Internet. A web
browser provides access to websites and do activities within them like login, view
multimedia, link from one site to another, visit one page from another, print, send
and receive email, among many other activities. The most common browser
software in the market are: Microsoft Internet Explorer, Google's Chrome, Mozilla
Firefox, Apple's Safari, and Opera. Some browsers are depending on the operating
system of the computer such as Safari on Mac, Internet Explorer on Windows etc.
 Figure 1.2.1: Web Browser Icons

Now you might have a problem. What is a search engine? And what is the
difference between web browser and the search engine?

Search Engine : is also a Computer program that alows user to search

information in the web.

Well you can get a very clear idea from below example.
If you are sitting in your car, the browser would be your windshield and the
steering wheel would be the search engine. Which means you basically use
a Browser to access information on the Internet while you use a Search
Engine to point you in the right direction of a website that relates to the
words you would like to search.

Activity 1.1

What is the difference between Internet and WWW?

Hint: Internet is H/W oriented and WWW is S/W oriented.

1.3 Internet and web as a communication media

1.3.1 How we connect?
People access the Internet from home through an Internet service provider (ISP).
An ISP connects to a regional network that is connected to a national network. In
general, small local Internet service providers connect to medium-sized regional
networks, which connect to large national networks, which then connect to very
large bandwidth networks on the Internet backbone.

1.3.2 Internet connection options

Internet service providers (ISPs) provide several ways to connect to the Internet,
including:
• Voice grade telephone lines
• Broadband connections
• Leased lines
• Wireless
The major distinguishing factor is bandwidth (the amount of data that can be
transferred per unit of time) or data transfer rate.

1.3.3 WWW Components

Structural Components
• Clients/browsers – to access and operate on network
• Servers – run on sophisticated hardware and keep shared resources
• Internet – the global infrastructure which facilitates data transfer

Syntactic Components
• Hyper Text Transfer Protocol (HTTP)
• Hyper Text Markup Language (HTML)
o eXtensible Markup Language (XML)
• Uniform Resource Identifiers (URIs)

1.3.3.1 Definitions
Client
A client is the requesting program in a client/server relationship, e. g, the user of a
Web browser is effectively making client requests for pages from servers all over
the Web.

Server
In general, a server is a computer program that provides services to other
computer programs in the same or other computers.
HTML
HTML stands for Hyper Text Markup Language (HTML). It describes the structure
of Web pages using markups. HTML elements are the building blocks of web
pages and HTML elements are represented by < > tags.
Browsers do not display the HTML tags, but render them and produce output
display according to the content of the page.

HTTP
HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files (text,
graphic images, sound, video, and other multimedia files) on the World Wide
Web.

URI
A URI (Uniform Resource Identifier) is a sequence of characters that identifies a
logical or physical resource.

Web Page
A mixture of text, graphics, sound and animation in the HTML format, to make
information accessible in a easy to understand format using the Internet.

Website
A collection of web pages (Structurally organized) connected (linked) by Hypertext
(or Hypermedia) clickable links.

Website Storage/Hosting
After a web site is designed, it must be stored on a computer (server) that can be
accessed through the Internet, this process called as web hosting.

1.3.4 HTTP Connection

Let’s check how a computer requesting a web resource from the Internet. Let’s
see how it is works.

• 1. Client
– Makes an HTTP request for a web page
– Makes a TCP/IP connection
• 2. Server accepts request
– Sends page as HTTP
• 3. Client downloads page
• 4. Server breaks the connection
 2. Makes HTTP request
Y
1. Client
download 3. Makes TCP connection
the page
4. Accepts request and sends page

5. Server breaks the connection

Figure 1.3.4 HTTP Connection

When a user wants to access a web page she/he type the relevant keywords in
the browser(client). Then browser will try to make a connection to the server
using TCP/IP protocol. Once the connection is established, client sends a request
for a web page using HTTP protocol. After that server will accept the request and
responds with appropriate data again using HTTP protocol. Then client download
the web page and server will breaks the connection.

Important

▪ HTTP makes use of TCP to open connections between clients and servers
and to pass the requests and responses between them.
▪ HTTP is a stateless protocol, meaning each request for data is dealt with in
isolation; once the server sends the response, it forgets everything about
the original request.

1.3.5 Use of Protocols

When two or more computers communicate, they must have a common way in
which to communicate. That common way is known as protocols. Protocols are
sets of rules that machines follow to complete tasks. Without a common set of
protocols communication between devices couldn't happen. The various
machines would be unable to understand one another or even send information
in a meaningful way. The protocols provide both the method and a common
language for machines to use to transmit data. Transfer Control
Protocol(TCP)/Internet Protocol(IP) is the underlying protocol for the Internet.
1.3.5.1 How TCP/IP works

Transfer Control Protocol (TCP) breaks data into small pieces of packets. So,
Internet data transfer takes place through packets. For example, every Web page
that receives comes as a series of packets, and every e-mail send leaves as a
series of packets. Each packet carries the information of sender's IP address, the
intended receiver's IP address, something that tells the network, how many
packets that entire message has been broken into and the number of the given
packet. The packets carry the data according to the Transmission Control
Protocol/Internet Protocol (TCP/IP). A typical packet contains about 1,000 or
1,500 bytes.

Each packet travels to its destination by using best possible route through routers.
Once a packet reaches destination, TCP checks the data for corruption against the
header included in each packet, ensuring the delivery of the entire message. If
TCP finds any mismatch with packets, it sends a request that the packet to be
resent.

Click here to watch Packet’s tale

1.3.6 IP addresses

Every device on a network has a unique identification. As an address of a letter to

send in the posted mail, computer devices use a unique identifier to send data to
specific device on a network. Currently, TCP/IP protocol uses as the standard to
communicate on the network. In the TCP/IP protocol, the unique identifier for a
device is called as an IP address.

There are two versions of IP addresses: IP Version 4 (IPv4) and IP Version 6 (IPv6).
All Internet devices with IP addresses have an IPv4 address, and some are starting
to use the novel IPv6 address system.

▪ IPv4 uses 32 binary bits to create a single unique address on the network. An
IPv4 address is expressed by four numbers separated by dots. Each number is
the decimal (base-10 0-255) representation for an eight-digit binary (base-2)
number, also called an octet. For example: 192.248.12.9
▪ IPv6 uses 128 binary bits to create a single unique address on a network. An
IPv6 address is expressed by eight groups of hexadecimal (base-16) numbers
separated by colons, as in 2001:cdba:0000:0000:0000:0000:3257:9652. Groups
of numbers that contain all zeros are often omitted to save space, leaving a
colon separator to mark the gap (as in 2001:cdba::3257:9652).

Numeric IP addresses works very well for computers,

but humans find it difficult to use long patterns of
numbers.

Therefore, humans identify computers using Uniform

Resource Locators (URLs) or Web Addresses. Example: https://online.codl.lk
These addresses are bind with numerical addresses. Address translation happens
when communication operates.

1.3.7 Uniform Resource Locator

This is a universal addressing mechanism and it would be impossible to navigate

to a site or a page linking would not be feasible without an URL.
URLs have 3 components:
• A Prefix (usually http:// or https:// -- Protocol)
• A Hostname: (such as www.uom.lk , www.mrt.ac.lk )
• A Path: (such as /web/itfac/index.htm for the document)

Anatomy of URL
▪ Describes components of a URL as shown in the following figure.
https://www.icann.org/resources/pages/welcome-2012-02-25-en

Protocol Top Directory/Folder Web page

Sub
Hostname level
domain
domain

Domain name
Figure 1.3.7 Anatomy of URL

Activity 1.3.7

What is the difference between URL, URI and URN?

Humans can understand the words in the URL easily than the IP address numbers,
computing devices and network devices can recognized the IP address. There is a
translator to translate the URL to an IP address as computers need to use IP
addresses to access websites. This translation happens through Domain Name
System (DNS).

1.3.8 Domain Name System (DNS)

A DNS server is a high-end computer that contains a database of public IP

addresses and their associated hostnames (URLs), it serves to resolve or translate,
those common names to IP addresses. It is also called as nameserver. DNS uses a
hierarchy to manage its distributed database system. The DNS hierarchy, which is
called as domain name space.

▪ The DNS tree has a single domain at the top of the structure called the root
domain. A period or dot (.) is the designation for the root domain.
▪ Root domain is divided into top-level domains.
▪ Top-level domains, the domain name space is further divided into sub
domains representing individual organizations.
For further information click here.

Following figure shows the hierarchical structure of a domain namespace.

Figure 1.3.8 Structure of DNS (Source: http://etutorials.org/shared/images/tutorials/tutorial_63/f05tk01.jpg)

As shown in the figure 1.3.8, domain names are organized right to left, with
general descriptors to the right, and specific descriptors to the left. The top-level
domain (TLD, or parent domain) is to the far right of a domain name. Mid-level
domains (children and grandchildren) are in the middle. Most machine names
hold "www".
1.4 Asserts of web communication

Let’s figure out what assets will be included on web pages. Assets include all types
of content, such as words, videos, images, audio, and more.

For example, assume a page about your company website, it needs written
description of company. This might involve a mission statement, a company
history, and some information about employees. This will be a part of the content
asset library that include in to the site.

The basic types of content that need to include:

Figure 1.4 Basic web asserts

1.5 Website types and operational modes

There are static and dynamic websites operates around globally, let’s see how
they're different. Websites that only use HTML and CSS are called static websites,
and websites with dynamic scripting are called dynamic websites. Content may
change according to the context, inputs, and other various aspects.
A Static Website

A static website is the simplest kind of website which can build. Static websites
are written in HTML and CSS only, with no scripting. The only form of interactivity
on a static website is hyperlinks.

A Dynamic Website

A dynamic website is a website that not only uses HTML and CSS but includes
website scripting as well. An interactive web app that people can use, must use
website scripting. To create a dynamic web site, it needs to embed scripts written
by languages such as JavaScript, PHP, Perl or ASP.NET languages.

1.6 Structuring and Organization of content

A website’s structure refers on how the website is organized, i.e. how the
individual subpages are linked to one another. Website needs to have a defined
structure, because without it, it’ll just a random collection of pages or blog posts.
The structure is very important to navigate around the site, to click from one page
to another. Google also uses the structure of sites to determine the importance or
relevance of content. Structuring of website is crucial for both usability and
search.

Three essential structures can be used to build a Web site: sequences,

hierarchies, and networked.

Sequences

The simplest way to organize information is to place it in a sequence. Straight

sequences are the most appropriate organization for training sites, for example,
in which the reader is expected to go through a fixed set of material and the only
links are those that support the linear navigation path:

More complex Web sites may still be organized as a logical sequence, but each
page in the main sequence may have links to one or more pages of digressions,
parenthetical information, or information on other Web sites:
Hierarchies

Information hierarchies are the best way to organize most complex bodies of
information. Because Web sites are usually organized around a single home page,
hierarchical schemes are particularly suited to Web site organization. Hierarchical
diagrams are very familiar in corporate and institutional life, so most users find
this structure easy to understand.

Webs or Networked

Web like organizational structures pose few restrictions on the pattern of

information use. In this structure, the goal is often to mimic associative thought
and the free flow of ideas, allowing users to follow their interests in a unique,
heuristic, idiosyncratic pattern. This organizational pattern develops with dense
links both to information elsewhere in the site and to information at other sites.
Webs work best for small sites dominated by lists of links and for sites aimed at
highly educated or experienced users looking for further education or enrichment
and not for a basic understanding of a topic.
1.6.1 How to create this kind of site structure

1. Plan out a hierarchy before you develop your website

2. Create a URL structure that follows your navigation hierarchy.
3. Create your site navigation in HTML or CSS.
4. Use a shallow depth navigation structure.
5. Create a header that lists your main navigation pages.
6. Develop a comprehensive internal linking structure.

Click here for further information.

1.7 Aesthetic of web and design concepts with colors.

Web design is the process of creating websites. It encompasses various aspects,

including webpage layout, content production, and graphic design. While the
terms web design and web development are often used interchangeably, web
design is technically a subset of the broader category of web development.
No matter whether you want to make static websites or dynamic web
applications, design is an important part of the process. The design is the first
thing people notice when they use it.
Website design should be focused on very specific goals. However, how do you
know if you are meeting those goals? Iterative web design is the way to evaluate
the progress towards design goals. Iterative design is merely the process of
creating a prototype, testing it, evaluating the results, redesigning, and retesting.
 Develop Test

Design Analyze
Figure 1.7 Web design life cycle

Prototyping tools can be the key to success.

The first step in designing a successful website is to gather information. This is an
extremely crucial step since it requires a solid understanding of the company, its
goals, target audience and requirements of the client. This phase requires a web
designer to ask tons of questions to the client before starting the project. Certain
questions that should be considered by web designers are:
1. What is the purpose of the website? Do you want to provide information,
promote a service or sell a product?
2. What do you hope to accomplish with this website?
3. Who is the target audience?
4. What is the scope of the project?
5. What are your technical and non-technical requirements? What are your
preferences?
It is important for a designer to gather as much relevant information as possible.
Many techniques are available for gathering requirements
Find more about information gathering techniques from here.
Second step is web outline design. After collecting all the required information, it
is time for the web designer to sketch out some creative ideas for the project. A
designer should prepare a bunch of rough designs and then narrow them down to
a few. These designs should then be sent to the client for feedback. This stage
mainly consists of a cycle of reviewing, tweaking and approving the design until
ideally both the client and designer are satisfied with the sketch of the design. It is
important to keep the end user (visitors of the site) in mind while designing the
sketches.
As the third step once a product is under active development, there are visual
mockups of the UI that designers create to show exactly what it should look like
to clients. This is the phase where the visual look of website starts to take shape.
Mockups in general denote the look of the website. The concept of creating
mockups is quite crucial for web designers to create an effective website. Web
designers use mockup software to develop a framework of the site that can help
them demonstrate near-precise color, font-sizes and precise placement of all the
navigation and content elements on the site.

1.7.1 Colors to communicate

In web design, colors influence the look and feel of any website such as clicking
links and interpret elements on a website. So as a web designer, it’s important to
understand how colors work and how to harness their power.
Colors may be specified as an RGB triplet in graphic programs and on the web
color triplets are often in hexadecimal format (a hex triplet) or according to their
common English names in some cases. A color tool or other graphics software is
often used to generate color values. In some uses, hexadecimal color codes are
specified with notation using a leading number sign (#). A color is specified
according to the intensity of its red, green and blue components, each
represented by eight bits. Digital color types can be represented as below. To find
more about colors click here.

Figure 1.7.1 Color types

Hex color wheel
Ever since humankind first began mixing paint, color has played a vital role in the
expression of ideas. Certain colors can evoke pointed emotions or memories.
Color can change the atmosphere and feeling of a piece from dull and lifeless to
bright and entrancing. As the role of the Internet in business and education
increases, color must be used both to interest clients and to work on behalf of
computer users.
The color wheel is a tool used by artists and designers to help determine the
relationship between colors. Colors are arranged chromatically around the core
triangle of primary colors.
To get a better understanding on hex colors watch this video.

Figure 1.7.1 Hex color wheel

Following example will shows you the importance of colors in web designing.

1.8 Application technologies in web

Web Design and Applications involve the standards for building and rendering
Web pages, including HTML, CSS, SVG, device APIs, and other technologies for
Web Applications (“WebApps”). This section includes information about current
technologies that used to develop a web site.
Web designing largely focuses on 3 main technologies.
1. Client-side technology
2. Server-side technology
3. Database technology
In this course module we only consider about client-side technologies.

1.8.1 Client-side technologies

HTML
Hyper Text Markup Language (HTML) is the chief web pages
markup language used for creating structured documents using
lists, headings, links, paragraphs, images, etc. It adds interactive
value to pages. Using latest HTML versions, it enables us to create
high quality, rich and attractive web pages.
CSS
Cascading Style Sheets is a web language and it was developed by
World Wide Web Consortium (W3C). It is used to add formatting
and look of the web document by adding assorted colors, spacing,
fonts and so on. It is used to style different markup language
documents, prominent languages being the HTML and XHTML. 3
specifications of CSS have been approved by W3C namely CSS1, CSS2 and CSS3.
JScript
JAVA Script is a scripting language, enabling programmatic access to
the objects in the client's applications. Whereas HTML defines a
webpage's structure and content and CSS sets the formatting and
appearance. JavaScript adds interactivity to a webpage and creates
rich web applications. It maintains the compatibility and security of the pages at
the client's end.

1.9 Web design tools and IDEs

There is much Web Design Software. Here we discus about few. These tools are
mainly towards people who’re just exploring options for web development.

Adobe Dreamweaver
Dreamweaver is a web development tool. It was first introduced by a company
called Macromedia, which was then acquired by Adobe. In
short, Dreamweaver provides with a nice environment to work
for website, which combines a code editor along with a live
view. Website design can be done in quick modifications. The
important thing about it is that it can build a complete website
with Dreamweaver from scratch. In this course module we
recommended to use this tool.
WordPress (FREE)

WordPress is a piece of software that sits in the background

and acts as the engine that keeps website online and modify
online. And it’s incredibly popular. Also, WordPress is a piece
of software that sits in the background and acts as the engine
that keeps your website going. WordPress is by far the most
popular website building platform which is very flexible.