Basics of Web Design

Fifth Edition

Chapter 1
Internet & Web Basics
Key Concepts

Slide in this Presentation Contain Hyperlinks.

JAWS users should be able to get a list of links by
using INSERT+F7

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

1
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 URI s and domain names
• Describe H T M L
• Create your first web page
• Use the body, head, title and meta elements
• Name, save, and test a web page
Copyright © 2019 Pearson Education, Inc. All Rights Reserved
2
The Evolution of the Internet
• Internet
– Interconnected network of computer networks
– ARPA net
 Advanced Research Project Agency
 1969 – four computers connected
– NS F net
 National Science Foundation
– Use of the Internet was originally limited to
government, research and academic use
– 1991 Commercial ban lifted

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

3
The World Wide Web
The graphical user interface to information stored on some
of the computers connected to the Internet.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

4
Convergence of Technologies (1 of 2)

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

5
Convergence of Technologies (2 of 2)
• Removal of the ban on commercial activity
• Development of the World Wide Web at CER N
• Development of the first graphics-based web browser
named Mosaic at NCS A
• Affordable personal computers with G U I operating
systems
• Affordable Internet Service Providers

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

6
Web Standards and the W3 C
Consortium
W 3 C – World Wide Web Consortium
• Develops recommendations and prototype technologies
related to the Web
• Produces specifications, called Recommendations, in an
effort to standardize web technologies
• WA I – Web Accessibility Initiative

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

7
Web Accessibility (1 of 2)
“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
• WA I – Web Accessibility Initiative
– Develops accessibility recommendations
– W CA G 2.0
– W CA G 2.1 – expands W CA G 2.0
– Web Content Accessibility Guidelines http
://www.w3.org/WAI/WCAG20/quickref/
Copyright © 2019 Pearson Education, Inc. All Rights Reserved
8
Web Accessibility (2 of 2)
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 W CA G 2.0

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

9
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/UniversalDesign.htm

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

10
Network Overview

Network
two or more computers connected together for the purpose
of communicating and sharing resources
Copyright © 2019 Pearson Education, Inc. All Rights Reserved
11
The Client/Server Model (1 of 2)
• 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

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

12
The Client/Server Model (2 of 2)
• The Internet Client/Server Model
– Client: Web Browser
– Server: Web Server

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

13
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.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

14
Common Internet Protocols
• Official Communication Protocol: TC P/I P

• Specialized Protocols:
– File Transfer: FT P
– E-mail: SMT P, PO P 3, I MA P
– Websites: HTT P, HTT P/2
Copyright © 2019 Pearson Education, Inc. All Rights Reserved
15
HTT P 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 HTT P requests for web pages and
their associated files.
• Web servers send HTT P responses back to the web
browsers.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

16
I P Address
• Each device connected to the Internet has a unique
numeric I P address.
• These addresses consist of a set of four groups of
numbers, called octets.
216.58.194.46 will get you Google!
• An I P address may correspond to a domain name.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

17
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 I P Addresses with the
text-based domain names you type into a web browser
 Browser: http://google.com
 I P Address: 216.58.194.46

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

18
UR I Uniform Resource Indicator

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

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

19
TL D Top-Level Domain Name
• A top-level domain (TL D) identifies the right-most part of
the domain name.
• Some generic TLD s:
.com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat,
.jobs, .name, .biz, .museum, .info, .coop, .pro, .travel

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

20
New gTLD s!
• As of 2017, there were over 1,500 TLD s
– New gTLD s to become available included .bike,
.guru, .holdings, .clothing, .singles, .ventures, and
.plumbing.
– I CAN N has set a schedule to periodically launch new
gTLD s.
– http://
newgtlds.icann.org/en/program-status/delegated-string
for a list of new gTLD s.
s

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

21
County Code TLD s
• 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 TL D 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
TLD s.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

22
Domain Name System
The Domain Name System (DN S) associates Domain
Names with I P addresses.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

23
Information on the Web
• Reliability and information
– Evaluate the credibility of the site
• Ethical use of information
– Copyright and the Web

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

24
Markup Languages (1 of 4)
• SG M L – Standard Generalized Markup Language
– A standard for specifying a markup language or tag set
• HTM L – 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 Pearson Education, Inc. All Rights Reserved

25
Markup Languages (2 of 4)
• XM L – eXtensible Markup Language
– A text-based language designed to describe, deliver,
and exchange structured information.
– It is not intended to replace HTM L – it is intended to
extend the power of HTM L by separating data from
presentation.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

26
Markup Languages (3 of 4)
• XHTM L – eXtensible Hypertext Markup Language
– Developed by the W 3 C as the reformulation of HTM L
4.0 as an application of XM L.
– It combines the formatting strengths of HTM L 4.0 and
the data structure and extensibility strengths of XM L.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

27
Markup Languages (4 of 4)
• HTM L 5 – Recommendation Status 2014
– The successor to HTM L 4
 Replaces XHTM L
 Incorporates features of both HTM L and XHTM L
 Adds new elements
 Eliminates some elements
 Intended to be backward compatible
 Constantly evolving…
• HTM L 5.1 – Recommendation Status 2016
• HTM L 5.2 – Recommendation Status 2017
• http://www.w3.org/html/
Copyright © 2019 Pearson Education, Inc. All Rights Reserved
28
Your First HTML 5 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 HTM L tags go here ...
</body>
</html>

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

29
Under the Hood of a Web Page
• DT D – describes the markup language
syntax
• HTM L 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.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

30
Summary
This chapter provided a brief overview of Internet, Web, and
introductory networking concepts along with your very first
web page.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

31
Copyright

This work is protected by United States copyright laws and is

provided solely for the use of instructors in teaching their
courses and assessing student learning. Dissemination or sale of
any part of this work (including on the World Wide Web) will
destroy the integrity of the work and is not permitted. The work
and materials from it should never be made available to students
except by instructors using the accompanying text in their
classes. All recipients of this work are expected to abide by these
restrictions and to honor the intended pedagogical purposes and
the needs of other instructors who rely on these materials.

Copyright © 2019 Pearson Education, Inc. All Rights Reserved

32