Basics of

Web
Design
Chapter 1
Internet & Web Basics
Key Concepts

Copyright © 2019
Terry Ann Morris, Ed.D.
http://terrymorris.net
 Learning Outcomes
 Describe the evolution of the Internet and the Web
 Explain the need for web standards
 Describe universal design
 Identify benefits of accessible web design
 Identify reliable resources of information on the Web
 Identify ethical use of the Web
 Describe the purpose of web browsers and web servers
 Identify Internet protocols
 Define URIs and domain names
 Describe HTML
 Create your first web page
 Use the body, head, title and meta elements
 Name, save, and test a web page
2

Copyright © 2019 Terry Ann Morris, Ed. D.

 The Evolution of the Internet
 Internet
 Interconnected network of computer networks
 ARPAnet
 Advanced Research Project Agency
 1969 – four computers connected
 NSFnet
 National Science Foundation

 Use of the Internet was originally limited to

government, research and academic use

 1991 Commercial ban lifted

Copyright © 2019 Terry Ann Morris, Ed. D.

 The World Wide Web

The graphical user interface to

information stored on some of the
computers connected to the
Internet.

Copyright © 2019 Terry Ann Morris, Ed. D.

Convergence of
Technologies

Copyright © 2019 Terry Ann Morris, Ed. D.

 Convergence of
Technologies
 Removal of the ban on commercial activity

 Development of the World Wide Web at CERN

 Development of the first graphics-based web browser

named Mosaic at NCSA

 Affordable personal computers with GUI operating

systems

 Affordable Internet Service Providers

Copyright © 2019 Terry Ann Morris, Ed. D. 6
 Web Standards
and the W3C
Consortium
W3C – World Wide Web Consortium
 Develops recommendations and prototype
technologies related to the Web

 Produces specifications, called Recommendations,

in an effort to standardize web technologies

 WAI – Web Accessibility Initiative

Copyright © 2019 Terry Ann Morris, Ed. D.

 Web Accessibility
“The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.” – Tim Berners-Lee

Accessible Websites
provide accommodations that help individuals to
individuals with visual, auditory, physical, and
neurological disabilities overcome barriers

WAI – Web Accessibility Initiative

 Develops accessibility recommendations
 WCAG 2.0
 WCAG 2.1 – expands WCAG 2.0
 Web Content Accessibility Guidelines
http://www.w3.org/WAI/WCAG20/quickref/

Copyright © 2019 Terry Ann Morris, Ed. D.

 Web Accessibility
Section 508 of the Rehabilitation
Act
Requires that government agencies
must give individuals with disabilities
access to information technology that
is comparable to the access available
to others

Aligned to WCAG 2.0

Copyright © 2019 Terry Ann Morris, Ed. D.

 Universal Design

A “strategy for making products, environments,

operational systems, and services welcoming and
usable to the most diverse range of people
possible.”

https://www.dol.gov/odep/topics/Univ
ersalDesign.
htm

10

Copyright © 2019 Terry Ann Morris, Ed. D.

 Network Overview

Network
two or more computers connected together for the purpose of
communicating and sharing resources

11

Copyright © 2019 Terry Ann Morris, Ed. D.

 The Client/Server Model

 Client/Server can describe a

relationship between two computer
programs – the "client" and the
"server".
 Client
 requests some type of service (such as a
file or database access) from the server.
 Server
 fulfills the request and transmits the
results to the client over a network
12

Copyright © 2019 Terry Ann Morris, Ed. D.

 The Client/Server Model

 The Internet Client/Server Model

 Client: Web Browser
 Server: Web Server

13

Copyright © 2019 Terry Ann Morris, Ed. D.

 Internet Protocols
 Protocols
› Rules that describe the methods used
for clients and servers to
communicate with each other over a
network.

 There is no single protocol that

makes the Internet and Web
work.

 A number of protocols with

specific functions are needed. 14

Copyright © 2019 Terry Ann Morris, Ed. D.

 Common Internet
Protocols
 Official Communication Protocol:
TCP/IP

 Specialized Protocols:
 File Transfer: FTP
 E-mail: SMTP, POP3, IMAP
 Websites: HTTP, HTTP/2

15
Copyright © 2019 Terry Ann Morris, Ed. D.
HTTP Hypertext Transfer Protocol

A set of rules for exchanging files

such as text, graphic images,
sound, video, and other
multimedia files on the Web.

 Web browsers send HTTP requests

for web pages and their
associated files.

 Web servers send HTTP responses

back to the web browsers.

16

Copyright © 2019 Terry Ann Morris, Ed. D.

IP Address

 Each device connected to the Internet

has a unique numeric IP address.

 These addresses consist of a set of

four groups of numbers, called octets.
216.58.194.46 will get you Google!
 An IP address may correspond to a
domain name.

17

Copyright © 2019 Terry Ann Morris, Ed. D.

 Domain Name
 Locates an organization or other entity
on the Internet

 Domain Name System

◦ Divides the Internet into logical groups and
understandable names
◦ Associates unique computer IP Addresses
with the text-based domain names you
type into a web browser
◦ Browser: http://google.com
◦ IP Address: 216.58.194.46

18

Copyright © 2019 Terry Ann Morris, Ed. D.

 URI
Uniform Resource
Indicator

URL
Uniform Resource Locator
Represents the address of a resource on the
Internet.

19

Copyright © 2019 Terry Ann Morris, Ed. D.

 TLD
Top-Level Domain Name
A top-level domain (TLD) identifies the
right-most part of the domain name.

 Some generic TLDs:

.com, .org, .net, .mil, .gov, .edu, .int, .ae
ro, .asia, .cat, .jobs, .name, .biz, .museu
m, .info, .coop, .pro, .travel

20

Copyright © 2019 Terry Ann Morris, Ed. D.

NEW gTLDs!
 As
of 2017, there were over 1,500
TLDs
 New gTLDs to become available
included .bike, .guru, .holdings, .clothi
ng, .singles, .ventures, and .plumbing.
 ICANN has set a schedule to
periodically launch new gTLDs.
 http://newgtlds.icann.org/en/program-
status/delegated-strings
for a list of new gTLDs.

21

Copyright © 2019 Terry Ann Morris, Ed. D.

 County Code TLDs
 Two character codes originally
intended to indicate the geographical
location (country) of the web site.

 In practice, it is fairly easy to obtain a

domain name with a country code TLD
that is not local to the registrant.

 Examples:
 .tv, .ws, .au, .jp, .uk
 See http://www.iana.org/domains/root/db
for a list of TLDs.

22

Copyright © 2019 Terry Ann Morris, Ed. D.

Domain Name System
The Domain Name System (DNS)
associates Domain Names with IP
addresses.

23

Copyright © 2019 Terry Ann Morris, Ed. D.

Information on the Web
On the Web, no one
knows I’m a
Pekingese!

Reliability and information

Evaluate the credibility of the
site

Ethical use of information

Copyright and the Web 24

Copyright © 2019 Terry Ann Morris, Ed. D.

Markup Languages
 SGML – Standard Generalized
Markup Language
› A standard for specifying a markup
language or tag set

 HTML – Hypertext Markup

Language
› The set of markup symbols or
codes placed in a file intended for
display on a web browser.
 Element or tag – individual markup code
 Attribute – modifies the purpose of a tag
Copyright © 2019 Terry Ann Morris, Ed. D. 25
 Markup Languages (2)
 XML – eXtensible Markup Language

A text-based language designed to

describe, deliver, and exchange structured
information.

 It is not intended to replace HTML –

it is intended to extend the power of HTML
by separating data from presentation.

Copyright © 2019 Terry Ann Morris, Ed. D. 26

 Markup Languages (3)
 XHTML – eXtensible Hypertext Markup
Language

 Developed by the W3C as the

reformulation of HTML 4.0 as an
application of XML.

 It combines the formatting strengths

of HTML 4.0 and the data structure
and extensibility strengths of XML.

Copyright © 2019 Terry Ann Morris, Ed. D. 27

 Markup Languages (4)
 HTML 5 – Recommendation Status
2014
› The successor to HTML 4
› Replaces XHTML
› Incorporates features of both HTML and XHTML
› Adds new elements
› Eliminates some elements
› Intended to be backward compatible
› Constantly evolving…

 HTML 5.1 – Recommendation Status

2016

 HTML 5.2 – Recommendation Status

2017 28

Copyright © 2019 Terry Ann Morris, Ed. D.

Your First HTML5 Web Page:
index.html
<!DOCTYPE html">
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML tags go here ...
</body>
</html>
29

Copyright © 2019 Terry Ann Morris, Ed. D.

 Under the Hood of
a Web Page

 DTD – describes the markup language syntax

 HTML element– contains the web page document
 Head element – contains the head section
The head section contains information that describes the web
page document.
 Title element– Text displays in title bar of window
 Meta element – describes the character encoding
 Body element – contains the body section
The body section contains the text and elements that display in the
browser viewport. 30

Copyright © 2019 Terry Ann Morris, Ed. D.

 Summary

This chapter provided a

brief overview of Internet,
Web, and introductory
networking concepts
along with your very first
web page.
31

Copyright © 2019 Terry Ann Morris, Ed. D.