ACS-1809-051

Web Design and Development

Chapter 1
ACS-1809-051 – Slides Used In The Course

A note on the use of these slides:

These slides has been adopted and/or modified
from the original for the use in this course. The
author of the text have make these slides
available to all (faculty, students, readers) and
they obviously represent a lot of work on their
part.
In return for use, please:
• If slides are being used (e.g., in a class) that
the source be mentioned (after all, the author
like people to use our book!)
• If any slides are being posted on a www site,
note that they are adapted from (or perhaps
identical to) the author original slides, and
note their copyright of this material.

© McGraw-Hill Osborne Media 2013, HTML. A

beginners guide, 5th Edition
Introduction
• HTML is a means of telling a web browser how to display a page.
• Standard language for creating web pages and web applications.
• HTML is the acronym for :
Hypertext Markup language
• CSS is a means of telling a web browser how to style a page.
• A style sheet language used for describing the presentation of a
document
• CSS is the acronym for :
Cascading Style Sheet
Understanding the Internet
The Internet is a medium for disseminating information:
• World Wide Web - www
• URLs – Uniform Resource Locator
• Web servers
– A combination of compute hardware and software that that
host the information for the World Wide Web
• Sites
• Pages
• Web browsers
• Internet service providers
World Wide Web
World Wide Web (www) is a network of information resources located
around the world.
There are three components:
• A simple protocol to access documents on a web servers
– Hypertext Transfer Protocol (HTTP)
• A simple language for structuring documents and providing links
between them
– Hypertext Markup Language (HTML)
• Browsers to access documents from web servers and present these
documents to human readers
– A client/server system: your computer and the web server
– Web browsers: MS Internet Explorer, MS Edge, Mozilla Firefox,
Chrome, Safari, Opera, etc.
– Web server: Internet server that speaks HTTP – Apache, MS IIS, etc.
World Wide Web – Brief History
The two most important innovations leading to
WWW
• Hypertext
• GUI - Graphical User Interface
World Wide Web – Brief History
Hypertext
– In 1960s, Ted Nelson described a system
• Text on one page links to text on other pages
• He called this system hypertext
– Douglas Englebart created the first experimental hypertext
system on one of the large computers of the 1960s
– He is also the inventor of computer mouse
– And in 1991 - Tim Berners-Lee and Robert Cailliau developed
the code for a hypertext server and made it available on the
Internet
– They called their system of hyperlinked HTML document World
Wide Web
World Wide Web – Brief History
GUI - Graphical User Interface
– A way to present program output to users using pictures, icons,
and other graphical elements instead of text
– To WWW, it’s the Web browser: Mozilla, Netscape, IE ..
– In 1993, Mark Andreessen developed Mosaic - the first GUI
program widely available for PCs that can read HTML and use
hyperlinks to navigate from page to page on computers on the
Internet
– In 1994, Netscape - was an instant success.
– In 1995, Microsoft created its Internet Explorer Web browser
and entered the market
– Now there are serval number of Web browsers being use, e.g.
Internet Explorer, Safari, Chrome, Firefox to name a few.
URL - Uniform Resource Locator
URL - Uniform Resource Locator
• The unique address to any Web document
• It contains the following information
• The type of service the resource is served by
• The Internet host name of the site containing the resource, e.g.
uwinnipeg.ca
• The Internet port number of the service – HTTP standard port is
80
• The location of the resource in the directory structure of the
server
URL - Uniform Resource Locator
An URL follows this format
protocol://hostname/other_information
Breaking down each part of an URL:
– The different protocol can be http, https, ftp and etc.
– The hostname (domain name) is the computer on which the
resource is located and ends with .com, .org, .edu
– The .com, .org, .edu are what we call a root domain
– Every web site has to have an URL
– It has to be unique like your home address
– One part of a URL is the domain name, which helps to identify
and locate computers (web server or website) on the Internet
– To avoid confusion, each domain name must be unique
• Example: www.uofw.ca, www.ucla.edu
Domain Name System/Service
• Domain names are use for identifying Internet resources, such as
computers, networks, and services
• A domain name may represent entire collections of resources or
individual instances
• A domain name is easier to memorize than the actual numerical
addresses (IP address) used on the Internet
• The IP address gives the specific address of where the site you’re
looking for is located on the Internet
• Computers use IP addresses, while people feel more natural to
use domain names
• Domain Name System/Service (DNS) convert domain name into IP
address
• Example – amazon.ca IP address is 54.239.18.172
Web Servers
• Every web site and web page also needs a web server.
– A web server is a computer, running special software, which is
always connected to the Internet.
– When you type a URL into your web browser or click a link in a
web page, you send a request using the Hyper Text Transfer
Protocol (HTTP) to the server hosting that information.
Sites and Pages
Pages
– When you visit a web site, you look at pages on the site that
contain all its text, graphics, sound, and video content
– A page usually ends with “.htm” or “.html” file extention
– A default page of a particular site can be “index.html” or
“home.html”, which you can skip when typing the URL
– New content management system could use different fashion –
like WordPress
Sites
– A site is a collection of interlinked pages
• For a particular organization, department, or unit, …
Web Browser
A web browser is a piece of software that runs on your
personal computer and enables you to view web pages.
• Web browsers, often simply called “browsers”, interpret
the HTML code and provide a visual layout displayed on
the screen
• Browser typically can also be used to check web-based
e-mail and access newsgroups
• The most popular browsers include Microsoft Internet
Explorer (IE) – recent one like Microsoft Edge, Google
Chrome, Mozilla Firefox
• Apple’s pre-installed browser with the Mac OS X is Safari
Web Browsers - History
• Most of the popular browsers are part of a breed called
“Mozilla-based” browsers.
– The name comes from the fact that each browser is
based on a framework named Mozilla, which has its
roots in the old Netscape browser
Web Browsers - Update
• Browsers are updated regularly, changing to address
new aspects of HTML or emerging technologies
– This means, at any given time, there may be two or
three active versions of one browser on different
computers, and several different versions of other
browsers being employed by the general public
– As a web developer you need to deal with this issue
and create web pages that work properly on different
versions of different browsers
– Testing your web page/site on different versions of
different browsers are as important as creating the
web page/site
Internet Service Provider
We use an Internet Service Provider (ISP) to gain access to
the Internet.
– This connection can be made through a phone line
(MTS) or through a cable line with a company like
Shaw.
– It can be wireless too – from Starbucks to MTS, public
library, and anyone that provide Wi-Fi services.
– Some of these ISP also provide hosting service that
allow you to host your web page/site (for a fee).
Hypertext Markup Language
Hypertext Markup Language (HTML)
• It is a language that describes a document’s structure
and content
• It is designed to specify the logical organization of a
document
• The standard mark up language used on the WWW
• The text available on the WWW must be formatted
according to this generally accepted standard
– To allow web browser to read and interpret them
Hypertext Markup Language
Note that HTML it is not designed to be the language of a WYSIWYG
word processor such as MS-Word
– Because the same HTML document may be viewed by many
different web browsers with very different abilities
– Example: HTML allows you to mark selections of text as titles or
paragraphs, and then leaves the interpretation of these marked
elements up to the browser to interpret and present
HTML - All the Different Versions
• In its earliest years, HTML quickly went through much iterations,
which led to lack of standardization across the Internet
• The World Wide Web Consortium (W3C – a group of Web
developers (founded in 1994) ) stepped in and began publishing a
list of recommendations, called standards for HTML and other
web languages
• Older standard - HTML 2 (November 24, 1995), HTML 3 (January
14, 1997), HTML 4 (December 18, 1997), and HTML 4.01 (May
2000)
• Last official standard (December 14, 2017) for HTML is HTML 5.2
HTML 5 – Brief History
• In 2008, W3C released a working draft of HTML -- HTML5
– To address the slow adoption of XML
– Much capable to do almost anything a web designer wants to do, without
the help of plug-ins
– Features
– More intuitive structure
– Better portability
– Next-generation forms
– Rich media
– Audio and Video
• On 28 October 2014, HTML5 was formally released as a W3C Recommendation
– It is the final and complete (fifth) revision of the HTML standard
– HTML 5.1 (November 1, 2016) was revised and published as a W3C
Recommendation
– HTML 5.2 (December 14, 2017) was revised and published as a W3C
Recommendation
Cascading Style Sheet
Cascading Style Sheet (CSS)
– Is to enable the separation of presentation and content,
including layout, colors, and fonts.
– The separation improve content accessibility and provide more
flexibility and control of the presentation characteristics
– Enable multiple web pages to share formatting by specifying the
relevant CSS in a separate .css file
– Reduce complexity and repetition in the structural content.
– CSS has various levels and profiles
– Each level (or version) of CSS builds upon the last, adding new
features.
– Different levels are denoted as CSS 1, CSS 2, CSS 3, and CSS 4.
– We will be using CSS 3 in all our examples, assignments and
project.
HTML and CSS – In a Nutshell

A Web Page

HTML CSS
Content and Structure Presentation
Heading, Fonts,
Paragraphs, Colour,
Lists, Background Colour,
Tables Borders
A Web Site – In a Nutshell

A Website

Web Page Web Page Web Page Web Page Web Page Web Page
Planning and Designing a Web Site
The 5 steps process
1. Define goals
2. Plan strategy
3. Design and development
4. Test
5. Launch and maintain

1/23/2020 25
Planning for Design a Web Site
1. Define goals
• The first step is to define some goals and objectives for the website
• An example of a list of questions that need to be answered before
commencing the web design project:
– What are the objectives of the website and what goals does it need to accomplish?
– Who are the target audience or users of the website?
– What are the intended benefit your website brings to the users that use it?
– What is the primary intent of the website – informing, selling, getting the users to
sign up for a service, or something else?
– Is there a competitor website that already operates within the same niche? What
are its strengths and weaknesses?
• Answering these questions helps to gives a direction to the design project
• When defining the target audience, classify them into distinct audience
personas. Provide value proposition and benefit that the website offers to the
target audience
• May have to conduct market research and competitor analysis to determine
where your website or web application fit into as a part of a wider segment

1/23/2020 26
Goals & Main topic areas

• Example: a stationary store

– Primary goal: sell office supplies to offices
– Secondary goal: to recruit potential employee

• Two main topic areas:

– Shop for office supplies
– Browse available jobs

1/23/2020 27
Target audience – Example - Functions Performed

User Functions Performed Age Gender Web

Group experience
Current - Bank online 16+ M/F Varies
customers - Contact customer service
- Research additional
services/products
Potential - Research services/products 16+ M/F Varies
customers - Contact sales

Potential - Search job openings 18-60 M/F Varies

employees - Research company
- Contact HR
Financial - Research services/products 30-60 M/F Savvy
consultant - View company financials 60/40
s - Contact sales

1/23/2020 28
Target audience – Example 2

1/23/2020 29
Planning for Design a Web Site
2. Plan strategy
I. Development tools and technology stacks
• Analysing and selecting development tools and technology stacks for
developing the website
• Example: content management system – WordPress, Drupal and etc.
II. Sitemap and wireframe
• Sitemap provides an insight into the website's information architecture
• Sitemap also helps plan a more effective website navigation.
• Wireframing provides a framework for the website's visual design and
content elements and guide to the final look of the website
• Both the sitemap and wireframes are blueprint to the website that forms
the building blocks of the final website.
• The wireframe and the sitemap also act as a guide to the content
distribution and placement within the website.

1/23/2020 30
Planning for Design a Web Site
2. Plan strategy (cont.)
III. Content planning
• An website is all about the content, content, and content
• It is the only reason people decide to visit the website, therefore it is
importance to stress for a well-planned content
• Content development has to take into account an Search Engine
Optimization (SEO) strategy so that website content reaches its target
audience
• A well-planned content strategy boosts search engine rankings
• Search Engine Optimization tools such as Google Analytics is a must for
content creation

1/23/2020 31
Developing Navigation
• You need to plan how a visitor is to navigates between each of the
pages and sections.
• A good practice:
– Include a standard navigation bar on all pages for consistency
and ease of use.
– Links to your home page and major topic areas.
– Name of business or logo.
– Highlight the current section on the navigation bar.
– As many visual clues as possible.
• Include page title, headline, page filename, etc.

1/23/2020 32
Sitemap Example 1

1/23/2020 33
Sitemap Example 2

1/23/2020 34
Tree Diagram
A tree diagram showing the structure for a sample office supply site. How HTML and other files are
organized

1/23/2020 35
Organize Content
• All the content for the site should fit under each of the
topic areas in the site structure.
• There might be several subcategories in each topic area.
Category Name Folder Name
Paper shop/paper/
Pens shop/ pens/
Software shop/software/
Furniture shop/furniture/
Furniture, Desks shop/furniture/desks/
Furniture, Chairs shop/furniture/chairs/
Furniture, Bookcases shop/furniture/bookcase/

1/23/2020 36
Wireframe Example 1

1/23/2020 37
Wireframe Example 2

1/23/2020 38
Planning for Design a Web Site
3. Design and development
• The design element is largely influenced by the existing brand elements
• The color scheme, logo design and any other interactive design elements
needs to incorporate the brand it stands for
• New company and startups can have more freedom to choose, but the
website design still needs to appears consistent with the existing branding
• Once design hand-off to the development team actual coding process
starts
• The designed platform, database and framework that were finalize in the
planning stage will be coded into actual functioning webpages.
• Both front-end and back-end development need to incorporation of the
• website content into the design.
• The front-end coding involves HTML/CSS code and deploying it to run
across the server

1/23/2020 39
User Experience (UX) and User Interface (UI)
In web design there are two terms we need to clarify, the two terms
are User Experience (UX) and User Interface (UI).

These two terms although seems similar and there differences are:
1. UX Is Not UI
2. UX Makes Interfaces Useful, UI Makes Interfaces Beautiful
3. UX Helps Users Accomplish Goals, UI Makes Emotional Connections
4. UX Design Is Done First, UI Design Is Done Second…(Sometimes)
5. UX Is Employed Across Products, Interfaces And Services, UI Only Pertains To
Interfaces
Article - 5 Big Differences Between UX And UI Design
By Dawn Schlecht, updated on October 9th, 2017
URL https://careerfoundry.com/en/blog/ux-design/5-big-differences-
between-ux-and-ui-design/

1/23/2020 40
User Experience (UX)
User experience design uses approaches like
• human-computer interaction
• user-centered design
It also includes elements from similar disciplines like
• interaction design
• visual design
• information architecture
• user research, and others

1/23/2020 41
User Interface (UI)
• User interface design requires a good understanding of user needs.
• There are several phases and processes in the user interface design:
– Functionality requirements gathering
– User and task analysis
▪ Typical questions involve:
➢ What would the user want the system to do?
➢ How would the system fit in with the user's normal workflow or
daily activities?
➢ How technically savvy is the user and what similar systems does
the user already use?
➢ What interface look & feel styles appeal to the user?
– Information architecture
– Prototyping
– Usability inspection or Usability testing
– Graphical user interface design
– Software Maintenance

1/23/2020 42
Planning for Design a Web Site
4. Testing
• Testing is a critical step in the website design process, it should take place
concurrently with development.
• End-to-end website testing includes
– Functionality
• ensures all the features within the website are validated against the
functional specifications document
– Usability
• focuses on the ease of use in terms of accessibility, searchability and
usefulness.
– Interface
– Compatibility
• ensures that the website functions uniformly across a range of devices
and operating systems, including mobile devices and tablets
– Performance
– Security testing

1/23/2020 43
Planning for Design a Web Site
5. Launch and maintain
• Launching of the website
• Transfer from a local/development server to the live/production server
• Maintenance phase
– Technical
▪ Keeping website up and running.
▪ Testing process is continuous as the site will be constantly updated
with new content
▪ Fix broken links if any
▪ Adding and testing new features and content basis of user feedback
and current trends to ensure stellar user experience
– Non-technical
▪ Content update – e.g. blog, events, update stock and add new
inventories, update pricing and etc.
▪ Answering customer feedback/blog
▪ Remember – content, content and content

1/23/2020 44
An Example from Apple

1/23/2020
More Examples

For more well design web site you can read this article created by a Web design
company call iMPACT - https://www.impactbnd.com/blog/18-award-winning-
website-designs
1/23/2020
Now get to the work
First, is to select a HTML editor working best for you
• Tons and tons of them, and the number is still growing
• Table 1-3 lists a tiny number of them
• They can be divided into two categories
– WYSIWYG editors
– Text based editors

1/23/2020
Editors – WYSIWYG and Text Based
WYSIWYG Editors
– They don’t require knowledge of HTML – you can just drag and drove
– You can instantly see the layout/effect of your page
– They can speed your work, in some situations
Text-based Editors
– You have to know some HTML to use them (which is the reason why you are
here, to learn to code in HTML and CSS)
– Better control -- WYSIWYG editors may write HTML in a variety of ways
– Faster pages -- WYSIWYG editors sometimes overcompensate for the amount
of code needed to render a page properly
– Speedier editing -- the large-scale WYSIWYG editors can take a lot of memory
and system resources, slowing both the computer and the development
process
– More flexible while can be also very specific – you can produce the code
exactly the way you want (skip the “auto-correct” )

1/23/2020
List Of HTML Editors

You can use any test based editor like

Notepad ++ (free) or an editor that I have
been using – Microsoft Visual Studio Code -
It is free and can be downloaded from
https://code.visualstudio.com
It will run on Windows, Mac and Linux

This product suite is not available anymore,

but Expression Web is free to download from
Microsoft.

1/23/2020
Learn From the Pro
One of the best ways to learn HTML is to surf the Web and look at the HTML for
sites you like
• Maybe those you don’t like as well
• Most web browsers enable you to view the HTML source code of web pages
– In older versions of web browsers
▪ In Chrome, choose View | Developer | View Source
▪ In Firefox or Mozilla, right-click and select View Page Source
▪ In IE, choose View | Source or Page | Source
▪ In Safari, you must first choose Safari | Preferences | Advanced and
check the option to Show Develop menu in menu bar. Then, choose
Develop | Show Page Source
– In most newest web browsers, right-click and select View Page Source

1/23/2020
View Page Source

1/23/2020
Design example
• Chop Point Camp site : by Wendy Willard
www.choppoint.org
• Research about the organization, target audience, goals.
– Meeting Notes
• Sample questions:
– Who are the target users/visitors of the site? Do you have any
existing research regarding your client or user base, such as
demographics, statistics, or other marketing information?
– What business problem(s) will the web site address? What do
you want to accomplish? What are your goals for the web
site?

1/23/2020 52
Design example Cont.

• Target users and the functions they perform

User Group Functions Performed at Ages Web
Site Experience

1. Potential -Check session dates 10-18 Moderate-

campers -Sign-up high
-Get more information
2.

• Content
• Navigation

1/23/2020 53
Site structure

1/23/2020 54
Questions?