01_Felke-Morris_Lecture_ppt_ch01.pptx

1 - 1
Web Development & Design Foundations
with HTML5
Tenth Edition
Chapter 1
Introduction to the Internet
and World Wide Web
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved

1 - 2
Learning Outcomes (1 of 2)
In this chapter, you will learn how to
• 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

1 - 3
• Identify networking protocols
• Define URIs and domain names
• Describe HTML, XHTML, and HTML5

1 - 4
Internet
The interconnected network of computer networks that spans the
globe.

1 - 5
Reasons for Internet Growth in the
1990s
• Removal of the ban on commercial activity
• Development of the World Wide Web
by Tim Berners-Lee at CERN
• Development of Mosaic,
the first graphics-based web browser at NCSA
• Personal computers were increasingly available and
affordable
• Online service providers offered low-cost connections
to the Internet

1 - 6
Figure 1.1 Convergence of Technologies

1 - 7
The World Wide Web
The graphical user interface to information
stored on computers running web servers connected to
the Internet.

1 - 8
Internet Standards & Coordination (1 of 2)
IETF – Internet Engineering Task Force
The principal body engaged in the development of new
Internet protocol standard specifications.
RFC – Requests for Comments
A formal document from the IETF that is drafted by a
committee and subsequently reviewed by interested
parties
IAB – Internet Architecture Board
Provides guidance and broad direction to the IETF.
Responsible for publications for RFCs.

1 - 9
Internet Standards & Coordination (2 of 2)
• ICANN - The Internet Corporation for Assigned
Numbers & Names
– Non-profit organization
– Main function is to coordinate the assignment of:
 Internet domain names
 IP address numbers
 Protocol parameters
 Protocol port numbers.

1 - 10
Growth of the Internet
Year Percentage of Global
Population Using the Internet
1995 0.4%
2000 5.8%
2005 15.7%
2010 28.10%
2015 45%
2018 55.1%
2019 56.1%
Source: http://www.internetworldstats.com/emarketing.htm

1 - 11
Intranet & Extranets
Intranet
• A private network contained within an organization or
business used to share information and resources
among coworkers.
Extranet
• A private network that securely shares part of an
organization’s information or operations with external
partners

1 - 12
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

1 - 13
Web Accessibility
Accessible Website
• provides accommodations for individuals with visual,
auditory, physical, and neurological disabilities
WAI
• W3C’s Web Accessibility Initiative
http://www.w3.org/WAI
WCAG 2.1
• Web Content Accessibility Guidelines
http://www.w3.org/WAI/WCAG20/quickref/

1 - 14
Web Accessibility & The Law
Americans with Disabilities Act (ADA)
• Prohibits discrimination against people with disabilities
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
• http://www.section508.gov

1 - 15
Universal Design for the Web
Universal Design
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

1 - 16
Figure 1.2 A smooth ride is a benefit of
universal design

1 - 17
Reliability & Information on the Web
Questions to Ask:
• Is the organization credible?
• How recent is the information?
• Are there links to additional resources?
• Is it Wikipedia?
If so, further research is needed.

1 - 18
Checkpoint 1.1
1. Describe the difference between the Internet and the
Web.
2. Explain three events that contributed to the
commercialization and exponential growth of the
Internet.
3. Is the concept of universal design important to web
developers? Explain your answer.

1 - 19
Network Overview
Network
two or more computers connected together for the
purpose of communicating and sharing resources

1 - 20
Figure 1.4 Common components of a
network

1 - 21
Networks
LAN – Local Area Network
• Usually confined to a single building or group of
buildings
WAN – Wide Area Network
• Usually uses some form of public or commercial
communications network to connect computers is
widely dispersed geographical areas.

1 - 22
Internet Infrastructure
Internet Backbone
A high capacity communication link that carries data
gathered from smaller links that interconnect with it.
Maps of the Internet Backbone
http://www.google.com/search?q=global+internet+backb
one+map+images

1 - 23
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

1 - 24
Client – Web Browser Server – Web
Server
Figure 1.5 Web client and web server

1 - 25
Web Client
Connected to the Internet when needed
Usually runs web browser (client) software
(such as Microsoft Edge or Google Chrome)
Uses HTTP (Hypertext Transfer Protocol) or HTTPS
Requests web pages from server
Receives web pages and files from server

1 - 26
Web Server
Continually connected to the Internet
Runs web server software
(such as Apache or Internet Information Server)
Uses HTTP (Hypertext Transfer Protocol) or HTTPS
Receives request for the web page
Responds to request and transmits status code, web
page, and associated files

1 - 27
MIME Type
Multi-Purpose Internet Mail Extension
• a set of rules that allow multimedia documents
to be exchanged among many different computer
systems

1 - 28
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.

1 - 29
FTP File Transfer Protocol
A set of rules that allow files to be exchanged between
computers on the Internet.
Web developers commonly use FTP to transfer web
page files from their computers to web servers.
FTP is also used to download programs and files from
other servers to individual computers.

1 - 30
E-mail Protocols
Sending E-mail
• SMTP Simple Mail Transfer Protocol
Receiving E-mail
• POP (POP3) Post Office Protocol
• IMAP Internet Mail Access Protocol

1 - 31
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 and the requested files
back to the web browsers.
HTTPS – Hypertext Transfer Protocol Secure
Combines HTTP with a security and encryption protocol

1 - 32
TCP/IP Transmission Control Protocol/
Internet Protocol
TCP/IP has been adopted as the official communication
protocol of the Internet.
TCP and IP have different functions that work together
to ensure reliable communication over the Internet.

1 - 33
TCP Transmission Control Protocol
Purpose is to ensure the integrity of communication
Breaks files and messages into individual units called
packets

1 - 34
Figure 1.6 TCP packet

1 - 35
IP Internet Protocol
• A set of rules that controls how data is sent between
computers on the Internet.
• IP routes a packet to the correct destination address.
• The packet gets successively forwarded to the next
closest router (a hardware device designed to move
network traffic) until it reaches its destination.
http://www.monitis.com/traceroute/

1 - 36
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.

1 - 37
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

1 - 38
Uniform Resource Identifier
URI – Uniform Resource Identifier
• identifies a resource on the Internet
URL – Uniform Resource Locator
• a type of URI which represents the network location of
a resource such as a web page, a graphic file, or an
MP3 file.

1 - 39
Figure 1.8 URL Describing a file within a folder

1 - 40
TLD Top-Level Domain Name
A top-level domain (TLD) identifies the right-most part of
the domain name.
Examples of generic TLDs:
.com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat,
.jobs, .name, .biz, .museum,
.info, .coop, .post, .pro, .tel, .travel

1 - 41
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/cctld/cctld-whois.htm

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

1 - 43
Figure 1.9 Accessing a web page

1 - 44
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.

1 - 45
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.

1 - 46
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.

1 - 47
HTML 5
• The next version of HTML4 and XHTML
• https://www.w3.org/TR/html5/
• It’s already been updated!
• HTML 5.1
– https://www.w3.org/TR/html51/
• HTML 5.2
– https://www.w3.org/TR/html52/

1 - 48
Checkpoint 1.2
1. Describe the components of the client/server model
as applied to the Internet.
2. Identify two protocols used on the Internet to convey
information that use the Internet but do not use the
Web.
3. Explain the similarities and differences between a
URL and a domain name.

1 - 49
Popular Uses of the Internet
E-Commerce
Mobile Access
Blogs
Wikis
Social Networking
RSS
Podcasts
Cloud Computing

1 - 50
Summary
This chapter provided a brief overview of Internet, Web,
and introductory networking concepts.

1 - 51
with HTML5
Tenth Edition
Chapter 2
HTML Basics

1 - 52
In this chapter, you will learn how to ...
• Describe HTML, XHTML, and HTML5
• Identify the markup language in a web page document
• Use the html, head, body, title, and meta elements to
code a template for a web page
• Configure the body of a web page with headings,
paragraphs, line breaks, divs, lists, and blockquotes
• Configure text with phrase elements

1 - 53
• Configure a web page using structural elements
including header, nav, main, footer, section, aside,
and article elements
• Configure special characters
• Use the anchor element to link from page to page
• Create absolute, relative, and e-mail hyperlinks
• Code, save, and display a web page document
• Test a web page document for valid syntax

1 - 54
What is HTML?
HTML:
The set of markup symbols or codes placed in a file
intended for display on a Web browser page.
The World Wide Web Consortium (http://w3c.org) sets
the standards for HTML and its related languages.

1 - 55
HTML Elements
• Each markup code represents an HTML element.
• Each element has a purpose.
Most elements are coded as a pair of tags:
an opening tag and a closing tag.
• Tags are enclosed in angle brackets, “<” and ”>”
symbols.

1 - 56
What is HTML5 ?
• Newest version of HTML/XHTML
• Supported by modern browsers
• Intended to be backwards compatible
• Adds new elements
• Adds new functionality
– Edit form data
– Native video and audio
– And more!
Source: W3C http://www.w3.org/html/logo/

1 - 57
Document Type Definition
Document Type Definition (DTD)
• doctype statement
• identifies the version of HTML contained in your
document.
• placed at the top of a web page document
<!DOCTYPE html>

1 - 58
Example HTML5 Web Page
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Page Title Goes Here</title>
<meta charset=“utf-8”>
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>

1 - 59
Head & Body Sections
Head Section
Contains information that describes the web page document
<head>
…head section info goes here
</head>
Body Section
Contains text and elements that display in the web page
document
<body>
…body section info goes here
</body>

1 - 60
Figure 2.3 Code displayed in Notepad. Courtesy
of Microsoft Corporation.
Title Element
Meta Element

1 - 61
Figure 2.5 Web page displayed by Microsoft
Edge. Courtesy of Microsoft Corporation.

1 - 62
Heading Element
<h1>Heading Level 1</h1>

1 - 63
Paragraph Element
Paragraph element
<p> …paragraph goes here… </p>
• Groups sentences and sections of text together.
• Block Display – Configures empty space above and below

1 - 64
Line Break Element
Line Break element
• Stand-alone, or void tag
…text goes here <br>
This starts on a new line….
• Causes the next element or text to display on a new
line

1 - 65
Blockquote Element
Blockquote element
• Indents a block of text for special emphasis
<blockquote>
…text goes here…
</blockquote>
• Block Display – Configures empty space above and
below

1 - 66
Table 2.1 Phrase Elements
Element Example Usage
<b> bold text Text that has no extra importance but is styled in bold font
by usage and convention
<em> emphasized
text
Causes text to be emphasized in relation to other text;
usually displayed in italics
<i> italicized text Text that has no extra importance but is styled in italics by
usage and convention
<mark> mark text Text that is highlighted in order to be easily referenced
(HTML5 only)
<small> small text Legal disclaimers and notices (“fine print”) displayed in
small font-size
<strong> strong text Strong importance; causes text to stand out from
surrounding text; usually displayed in bold
<sub> sub text Displays a subscript as small text below the baseline
<sup> sup text Displays a superscript as small text above the baseline
Indicate the context and meaning of the text

1 - 67
Proper Nesting
CODE:
<p><i>Call for a free quote for your web development
needs: <strong>888.555.5555 </strong></i></p>
BROWSER DISPLAY:
Call for a free quote for your web development needs: 888.555.5555

1 - 68
HTML Lists
Unordered List
Ordered List
Description List

1 - 69
Unordered List
Displays a bullet, or list marker,
before each entry in the list.
<ul>
Contains the unordered list
<li>
Contains an item in the list

1 - 70
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

1 - 71
Ordered List
Displays a numbering or lettering system to itemize the
information contained in the list
<ol>
Contains the ordered list
• type attribute determines numbering scheme of list,
default is numerals
<li>
Contains an item in the list

1 - 72
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>

1 - 73
Description List
Useful to display a list of terms and descriptions or a list
of FAQ and answers
• <dl>
Contains the description list
• <dt>
Contains a term/phrase/sentence
Configures empty space above and below the text
• <dd>
Contains a description of the term/phrase/sentence
– Indents the text
– Configures empty space above and below the text

1 - 74
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

1 - 75
Checkpoint
1. Describe the features of a heading element and how
it configures the text.
2. Describe the difference between ordered lists and
unordered lists.
3. Describe the purpose of the blockquote tag.

1 - 76
Special Characters
• Display special characters such as quotes, copyright
symbol, etc.
Character Code
© ©
< <
> >
& &
 
Also see Table 2.3

1 - 77
Div Element
Configures a structural block area or “division” on a web
page with empty space above and below.
Can contain other block display elements, including
other div elements
<div>Home Services Contact</div>

1 - 78
Figure 2.20 Wireframe for Casita Sedona

1 - 79
HTML5 Structural Elements (1 of 3)
header Element
<header></header>
Contains the web page
document’s headings
nav Element
<nav></nav>
Contains web page
document’s main navigation

1 - 80
main Element
<main></main>
document’s main content
footer Element
<footer></footer>
document’s footer

1 - 81
Figure 2.21 Casita Sedona web page

1 - 82
<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<main> main content goes here </main>
<footer> document footer information goes here
</footer>
</body>

1 - 83
More Structural Elements (1 of 2)
Aside Element
• block display; contains a sidebar, a note, or other
tangential content
Section Element
• contains a “section” of a document, such as a chapter
or topic
• block display

1 - 84
More Structural Elements (2 of 2)
Article Element
• contains an independent entry, such as a blog
posting, comment, or e-zine article that could stand on
its own
• block display
Time Element
• represents a date or a time
• could be useful to date articles
or blog posts
• inline display

1 - 85
Figure 2.22 The blog page.

1 - 86
A Element (Anchor Element)
 Specifies a hyperlink reference (href) to a file
 Text between the <a> and </a> is displayed on the
web page.
<a href="contact.html">Contact Us</a>
 href Attribute
• Indicates the file name or URL

1 - 87
Opening a Link in a New Browser
Window
The target attribute on the anchor element opens a link
in a new browser window or new browser tab.
<a href="https://google.com" target="_blank">Search
Google</a>

1 - 88
HTML5 Block Anchor
Configure block display elements within a hyperlink
<a href="http://www.w3.org/TR/html-markup">
<h1>HTML5 Reference</h1>
<p>Bookmark this site for a handy HTML5
reference.</p>
</a>

1 - 89
Absolute & Relative Hyperlinks
Absolute link
• Link to a different website
<a href="http://yahoo.com">Yahoo</a>
Relative link
• Link to pages on your own site
<a href="index.htm">Home</a>

1 - 90
E-Mail Hyperlink
Automatically launch the default mail
program configured for the browser
If no browser default is configured,
a message is displayed
<a ref=“mailto:me@gmail.com”>me@gmail.com</a>

1 - 91
Hyperlinks
• Hands-On Practice
Figure 2.24 Site map

1 - 92
Checkpoint (2 of 2)
1. Describe the purpose of special characters.
2. Describe when to use an absolute link.
Is the http protocol used in the href value?
3. Describe when to use a relative link. Is the http
protocol used in the href value?

1 - 93
Writing Valid HTML
Check your code for syntax errors
Benefit:
Valid code 
more consistent browser display
W3C HTML Validation Tool
http://validator.w3.org

1 - 94
Summary
This chapter introduced you to HTML.
You will use these skills over and over again as you
create web pages.

1 - 95
with HTML5
Tenth Edition
Chapter 3
Configuring Color and Text
with CSS

1 - 96
In this chapter, you will learn how to . . .
• Describe the evolution of style sheets from print media
to the Web
• List advantages of using Cascading Style Sheets
• Use color on web pages
• Create style sheets that configure common color and
text properties
• Apply inline styles
• Use embedded style sheets

1 - 97
• Use external style sheets
• Configure element, class, id, and contextual selectors
• Utilize the “cascade” in CSS
• Validate CSS

1 - 98
Overview of Cascading Style Sheets
(CSS)
See what is possible with CSS:
• Visit http://www.csszengarden.com
Style Sheets
• used for years in Desktop Publishing
• apply typographical styles
and spacing to printed media
CSS
• provides the functionality of style sheets (and much more) for web
developers
• a flexible, cross-platform, standards-based language developed by
the W3C.

1 - 99
Figure 3.1 The power of a single CSS file

1 - 100
CSS Advantages
Greater typography and page layout control
Style is separate from structure
Styles can be stored in a separate document
and associated with the web page
Potentially smaller documents
Easier site maintenance

1 - 101
Types of Cascading Style Sheets
Inline Styles
Embedded Styles
External Styles
Imported Styles

1 - 102
Cascading Style Sheets (1 of 2)
• Inline Styles
– body section
– HTML style attribute
– apply only to the specific element
• Embedded Styles
– head section
– HTML style element
– apply to the entire web page document

1 - 103
Cascading Style Sheets (2 of 2)
• External Styles
– Separate text file with .css file extension
– Associate with a HTML link element in the head section
of a web page
• Imported Styles
– Similar to External Styles
– We’ll concentrate on the other three types of styles.

1 - 104
CSS Syntax
Style sheets are composed of “Rules” that describe the
styling to be applied.
Each Rule contains a Selector and a Declaration

1 - 105
Figure 3.2 Using CSS to set the text color to blue

1 - 106
CSS Syntax Sample
Configure a web page to display blue text and yellow
background.
body { color: blue;
background-color: yellow; }
This could also be written using hexadecimal color
values as shown below.
body { color: #0000FF;
background-color: #FFFF00; }

1 - 107
Common Formatting CSS Properties
• See Table 3.1 Common CSS Properties, including:
– background-color
– color
– font-family
– font-size
– font-style
– font-weight
– line-height
– margin
– text-align
– text-decoration
– width

1 - 108
Using Color on Web Pages
Computer monitors display color as intensities of red, green,
and blue light
RGB Color
The values of red, green, and blue vary from 0 to 255.
Hexadecimal numbers (base 16) represent these color
values.

1 - 109
Figure 3.4 Color swatches and
hexadecimal color values

1 - 110
Hexadecimal Color Values
• # indicates a hexadecimal value
• Hex value pairs range from 00 to FF
• Three hex value pairs describe an RGB color
#000000 black #FFFFFF white
#FF0000 red #00FF00 green
#0000FF blue #CCCCCC grey

1 - 111
Figure 3.5 Partial color chart

1 - 112
Web Color Palette
• A collection of 216 colors
• Display the most
similar
on the Mac and PC
platforms
• Hex values:
00, 33, 66, 99, CC, FF
• Color Chart
http://webdevfoundations.net
/color Source: http://webdevfoundations.net/color

1 - 113
Making Color Choices
How to choose a color scheme?
• Monochromatic
– http://meyerweb.com/eric/tools/color-blend
• Choose from a photograph or other image
– http://www.colr.org
• Begin with a favorite color
– Use one of the sites below to choose other colors
– http://colorsontheweb.com/colorwizard.asp
– https://color.adobe.com/create/color-wheel
– http://paletton.com

1 - 114
Support Web Accessibility Verify
Sufficient Contrast
When you choose colors for text and background,
sufficient contrast is needed so that the text is easy to
read.
Use one of the following online tools to verify contrast:
• http://webaim.org/resources/contrastchecker
• http://snook.ca/technical/colour_contrast/colour.html
• http://juicystudio.com/services/luminositycontrastratio.
php

1 - 115
Configuring Color with Inline CSS
Inline CSS
• Configured in the body of the web page
• Use the style attribute of an HTML tag
• Apply only to the specific element
Example: configure red color text in an <h1> element:
<h1 style="color:#ff0000">Heading text is red</h1>

1 - 116
Configuring Color with Inline CSS (2)
Example 2: configure the red text in the heading
configure a gray background in the heading
Separate style rule declarations with a ; symbol
<h1 style="color:#FF0000;background-
color:#cccccc">This is displayed as a red heading
with gray background</h1>

1 - 117
CSS Embedded (Internal) Styles
Configured in the head section of a web page.
Use the HTML <style> element
Apply to the entire web page document
Style declarations are contained between the opening and
closing <style> tags
Example: Configure a web page with white text on a black
background
<style>
body { background-color: #000000;
color: #FFFFFF;
}
</style>

1 - 118
Figure 3.10 The web page after
embedded styles are configured

1 - 119
CSS Embedded Styles
• The body selector sets the global style rules for the
entire page.
• These global rules are overridden for <h1> and <h2>
elements by the h1 and h2 style rules.
<style>
body { background-color: #E2FFFF;
color: #15495E;}
h1 { background-color: #237B7B;
color: #E2FFFF;}
h2 { background-color: #B0E6E6;
color: #237B7B;}
</style>

1 - 120
Checkpoint 3.1
1. List three reasons to use CSS on a web page.
2. When designing a page that uses colors other than
the default colors for text and background, explain
why it is a good reason to configure style rules for
both text color and background color.
3. Describe one advantage to using embedded styles
instead of inline styles.

1 - 121
Configuring Text with CSS
CSS properties for configuring text:
• font-weight
– Configures the boldness of text
• font-style
– Configures text to an italic style
• font-size
– Configures the size of the text
• font-family
– Configures the font typeface of the text

1 - 122
The font-size Property
Accessibility Recommendation: Use em or percentage font sizes–these
can be easily enlarged in all browsers by users

1 - 123
Figure 3.11 Common fonts

1 - 124
The font-family Property
• Not everyone has the same fonts installed in their
computer
• Configure a list of fonts and include a generic family
name
p { font-family: Arial, Verdana, sans-serif; }

1 - 125
Figure 3.14 CSS configures color and text
properties on the web page

1 - 126
Embedded Styles Example
<style>
body { background-color: #E2FFFF; color: #15495E;
font-family: Arial, Verdana, sans-serif; }
h1 { background-color: #237B7B; color: #E2FFFF;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif;
text-indent: 1em;
text-shadow: 3px 3px 5px #000000; }
h2 { background-color: #B0E6E6; color: #237B7B;
text-align: center; }
nav { font-weight: bold;
font-size: 1.25em;
word-spacing: 1em; }
p { font-size: .90em; text-indent: 3em; }
ul { font-weight: bold; }
</style>

1 - 127
More CSS TEXT Properties (1 of 2)
• line-height
– Configures the height of the line of text
(use the value 200% to appear double-spaced)
• text-align
– Configures alignment of text within a block display
element
• text-indent
– Configures the indentation of the first line of text
• text-decoration
– Modifies the appearance of text with an underline,
overline, or line-through

1 - 128
More CSS TEXT Properties (2 of 2)
• text-transform
– Configures the capitalization of text
• letter-spacing
– Configures space between text characters
• word-spacing
– Configures space between words
• text-shadow
– Configures a drop shadow on text

1 - 129
CSS Selectors
CSS style rules can be configured for an:
• HTML element selector
• class selector
• id selector
• descendant selector

1 - 130
Using CSS with “class”
class Selector
• Apply a CSS
rule to a certain “class” of
elements on a web page
• Does not associate the
style to a specific HTML element
Configure with .classname
• code CSS to create a class called “new” with red italic text.
Apply the class:
<p class=“new”>This is text is red and in italics</p>
<style>
.new { color: #FF0000;
font-style: italic;
}
</style>

1 - 131
Using CSS with “id”
id Selector
• Apply a CSS
rule to ONE element
on a web page.
Configure with #idname
• Code CSS to create an id called “new”
with red, large, italic text.
Apply the id:
<p id=“new”>This is text is red, large, and in italics</p>
<style>
#new { color: #FF0000;
font-size:2em;
font-style: italic;
}
</style>

1 - 132
CSS Descendant Selector
Specify an element within the context of its container
(parent) element.
AKA contextual selector
The example configures a
green text color only for
p tags located within an element assigned to the id
named content
Advantage of contextual selectors:
Reduces the number of classes and ids you need to
apply in the HTML
<style>
#content p { color: #00ff00;
}
</style>

1 - 133
span element
Purpose:
• configure a specially formatted area displayed in-line
with other elements, such as within a paragraph.
There is no additional empty space above or below
a span – it is inline display.

1 - 134
span Element Example
Embedded CSS:
<style>
.companyname { font-weight: bold;
font-family: Georgia, “Times New Roman”, serif;
font-size: 1.25em; }
</style>
HTML:
<p>Your needs are important to us at <span class=“companyname”
>Acme Web Design</span>.
We will work with you to build your website.</p>
Your needs are important to us at Acme Web Design. We will
work with you to build your website.

1 - 135
External Style Sheets - 1
CSS style rules are contained in a text file separate
from the HTML documents.
The External Style Sheet text file:
• extension “.css”
• contains only style rules
• does not contain any HTML tags

1 - 136
External Style Sheets - 2
Multiple web pages can associate with the same external
style sheet file.
site.css
body {background-color:#E6E6FA;
color:#000000;
font-family: Arial, sans-serif;
font-size:90%; }
h2 { color: #003366; }
nav { font-size: 16px;
font-weight: bold; }
index.html
clients.html
about.html
Etc…

1 - 137
link Element
A self-contained tag
Placed in the head section
Purpose: associates the external style sheet file with the
web page.
Example:
<link rel=“stylesheet” href=“color.css”>

1 - 138
Using an External Style Sheet
External Style Sheet color.css
body { background-color: #0000FF;
color: #FFFFFF;
}
To associate the external style sheet called color.css, the
HTML code placed in the head section is:
<link rel=“stylesheet” href=“color.css”>

1 - 139
Checkpoint 3.2
1. Describe a reason to use embedded styles. Explain
where embedded styles are placed on a web page.
2. Describe a reason to use external styles. Explain
where external styles are placed and how web pages
indicate they are using external styles.
3. Write the code to configure a web page to use an
external style sheet called “mystyles.css”.

1 - 140
Centering Page Content with CSS
#container { margin-left: auto;
margin-right: auto;
width: 80%; }

1 - 141
Figure 3.23 The page content is centered
within the browser viewport

1 - 142
Figure 3.24 The “cascade” of Cascading
Style Sheets

1 - 143
W3C CSS Validation
http://jigsaw.w3.org/css-validator/
Partial screenshot of http://jigsaw.w3.org/css-validator

1 - 144
Summary
This chapter introduced you to Cascading Style Sheet
Rules associated with color and text on web pages.
You configured inline styles, embedded styles, and
external styles.
You applied CSS style rues to HTML, class, id, and
descendent selectors.
You are able to submit your CSS to the W3C CSS
Validation test.

1 - 145
with HTML5
Tenth Edition
Chapter 4
Visual Elements and
Graphics

1 - 146
• Create and format lines and borders on web pages
• Apply the image element to add graphics to web
pages
• Optimize an image for web page display
• Configure images as backgrounds on web pages
• Configure images as hyperlinks
• Configure visual effects with CSS3 including multiple
background images, rounded corners, box shadow,
text shadow, opacity, and gradients

1 - 147
• Configure RGBA and HSLA color with CSS3
• Use figure and figcaption elements
• Use the meter and progress elements
• Follow recommended web design guidelines for
graphics on web pages

1 - 148
Horizontal Rule Element
Configures a horizontal line
<hr>
Figure 4.1 The <hr> tag configures a horizontal line

1 - 149
CSS border Property
Configures a border on the top, right, bottom, and left
sides of an element
Consists of
• border-width
• border-style
• border-color
h2 { border: 2px solid #ff0000 }

1 - 150
CSS Borders: Block / Inline Elements
• Block display element
– Default width of element content extends to browser
margin (or specified width)
• Inline display element
– Border closely outlines the element content
h2 { border: 2px solid #ff0000; }
a { border: 2px solid #ff0000; }

1 - 151
Border Display Can Vary by Browser
Figure 4.2 Examples of the various border-style values rendered by Firefox

1 - 152
Configuring Specific Sides of a Border
Use CSS to configure a line on one or more sides of an
element
• border-bottom
• border-left
• border-right
• border-top
h2 { border-bottom: 2px solid #ff0000 }

1 - 153
CSS padding Property
Configures empty space between the content of the HTML
element and the border
Set to 0px by default
h2 { border: 2px solid #ff0000; padding: 5px; }
No padding property configured:

1 - 154
Configure Padding on Specific Sides of
an Element
Use CSS to configure padding on one or more sides of
an element
• padding-bottom
• padding-left
• padding-right
• padding-top
h2 { border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px; }

1 - 155
CSS padding Property Shorthand: two
values
Two numeric values or percentages
• first value configures top and bottom padding
• the second value configures left and right padding
padding: 20px 10px;
}

1 - 156
CSS padding Property Shorthand: four
values
Four numeric values or percentages
• Configure top, right, bottom, and left padding
width: 250px;
padding: 30px 10px 5px 20px;
}

1 - 157
Hands-On Practice
h2 { background-color: #B0E6E6;
color: #237B7B;
text-align: center;
border-bottom: 2px dashed #237B7B; }

1 - 158
Figure 4.3 CSS border and padding properties
add visual interest to the page.

1 - 159
Checkpoint 4.1
1. Is it reasonable to try to code a web page that looks exactly
the same on every browser and every platform? Explain your
answer.
2. When a web page containing the style rules below is rendered
in a browser, the border does not display.
Describe what is incorrect with the following code:
h2 { background-color: #ff0000
border-top: thin solid #000000
}
3. True or False? CSS can be used to configure visual elements
such as rectangular shapes and lines on web pages.

1 - 160
Types of Graphics (1 of 2)
Graphic types commonly used on web pages:
• GIF
• JPG
• PNG
• WebP

1 - 161
Figure 4.6 Comparison of transparent and
nontransparent GIFs
Background
color – no
transparency
Background
color
configured to
be transparent

1 - 162
Types of Graphics (2 of 2)
• Graphics Interchange Format
• Best used for line art and logos
• Maximum of 256 colors
• One color can be configured as transparent
• Can be animated
• Uses lossless compression
• Can be interlaced

1 - 163
JPEG
• Joint Photographic Experts Group
• Best used for photographs
• Up to 16.7 million colors
• Use lossy compression
• Cannot be animated
• Cannot be made
transparent
• Progressive JPEG – similar to interlaced display

1 - 164
Figure 4.7 A JPEG saved at 80% quality (55KB
file size) displays well on a web page

1 - 165
PNG
• Portable Network Graphic
• Supports millions of colors
• Supports multiple levels of transparency
(but most browsers do not – so limit to one transparent
color for Web display)
• Supports interlacing
• Uses lossless compression
• Combines the best of GIF & JPEG
• Well-supported by modern browsers

1 - 166
WebP
• https://developers.google.com/speed/webp/
• Supports millions of colors
• Supports transparency
• Uses both lossy and lossless compression
• Intended to provide improved compression for GIF
and JPG images
• Browser support is growing

1 - 167
HTML Image Element
• Configures graphics on a web page
<img src="dog.jpg" alt="Dog at computer" height="100"
width="100">
• src Attribute
– File name of the graphic
• alt Attribute
– Configures alternate text description
• height Attribute
– Height of the graphic in pixels
• width Attribute
– Width of the graphic in pixels
Figure 1.3 Who really
updated that web page you
are viewing?

1 - 168
Accessibility & Images
Required:
• Configure the alt attribute
– Alternate text content to convey the meaning/intent of
the image
– NOT the file name of the image
– Use alt="" for purely decorative images
Recommended:
• If your site navigation uses image links for the main
navigation, provide simple text links at the bottom of
the page.

1 - 169
Image Link
• To create an image hyperlink use an anchor element
to contain an image element
<a href="index.html"><img src="home.gif"
height="19" width="85" alt="Home"></a>
• Some browsers automatically add a border to image
links.
• Configure CSS to eliminate the border
img { border-style: none; }
Home

1 - 170
Thumbnail Image (1 of 2)
A small image configured to link to a larger version of
that image.
<a href=“island.jpg”><img src=“small.jpg” alt=“tropical
island” width=“200” height=“100”></a>

1 - 171
Thumbnail Image (2 of 2)
Figure 4.9 This small
thumbnail image is only 5KB
Figure 4.7 A JPEG saved at 80% quality
(55KB file size) displays well on a web page

1 - 172
Image Optimization
The process of creating an image with the lowest file
size that still renders a good quality image—balancing
image quality and file size.
Photographs taken with digital cameras are not usually
optimized for the Web

1 - 173
Optimize An Image for the Web
Image Optimization
• Reduce the file size of the image
• Reduce the dimensions of the image to the actual
width and height of the image on the web page.
Image Editing Tools:
• GIMP https://www.gimp.org/ (FREE!)
• Adobe Photoshop
• Pixlr
– https://pixlr.com/x/ (FREE!)

1 - 174
Choosing Names for Image Files
Use all lowercase letters
Do not use punctuation symbols and spaces
Do not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)
Keep your file names short but descriptive
• i1.gif is probably too short
• myimagewithmydogonmybirthday.gif is too long
• dogbday.gif may be just about right

1 - 175
Organizing Your Site
• Place images in their own folder
• Code the path to the file in the src attribute
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”>

1 - 176
Figure 4.21 A folder named “images” contains
the graphic files

1 - 177
HTML5 Figure and Figcaption Elements
Figure Element: contains a unit of content that
is self-contained, such as an image, along with one
optional figcaption element.
<figure>
<img src= "myisland.jpg" width= "400" height= "400"
alt=“Tropical Island Getaway">
<figcaption>
Tropical Island Getaway
</figcaption>
</figure>

1 - 178
Figure 4.14 The figure and figcaption elements
were used in this web page

1 - 179
HTML5 Meter Element
Displays a visual gauge of a numeric value within a known
range
<meter value="14417" min="0" max="14417">14417</meter>14,417 Total
Visits<br>
<meter value="7000" min="0" max="14417">7000</meter> 7,000
Chrome<br>
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Edge<br>
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Firefox<br>
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br>
<meter value="312" min="0" max="14417">312</meter>    312
Opera<br>
<meter value="200" min="0" max="14417">200</meter>    200
other<br>

1 - 180
Figure 4.15 The meter element

1 - 181
HTML5 Progress Element
Displays a bar that depicts a numeric value within a
specified range
<progress value="5000"ax="10000">5000</progress>
Progress Towards Our Goal
Figure 4.16 The progress element

1 - 182
CSS background-image Property
Configures a background-image
By default, background images tile (repeat)
body { background-image: url(background1.gif); }

1 - 183
Figure 4.17 A long, thin background image tiles
down the page

1 - 184
Figure 4.18 A small rectangular background is
repeated to fill the web page window

1 - 185
CSS background-repeat Property
Figure 4.19 Examples of the CSS background-repeat property

1 - 186
Using background-repeat
flower.gif:
h2 { background-color: #d5edb3;
color: #5c743d;
padding-left: 30px;
background-image: url(flower.gif);
background-repeat: no-repeat;
}

1 - 187
CSS background-position Property
The default placement of a background image is top
left.
The background-position property can change this
placement.
h2 { background-image: url(flower.gif);
background-position: right;
background-repeat: no-repeat; }

1 - 188
CSS background-clip Property
• confines the display of the background image
Figure 4.23 The CSS background-clip property

1 - 189
CSS background-origin Property
• positions the background image relative to the content,
padding or border
Figure 4.24 The CSS background-origin property

1 - 190
CSS background-size Property
can be used to resize or scale the background image
Figure 4.25 Configuring a background image.

1 - 191
CSS Multiple Background Images
Use the background property to configure
multiple background images.
Example:
body { background: url(coffee.gif) no-repeat left
bottom,
url(coffeepour.jpg) no-repeat
fixed;
background-size: auto, cover; }

1 - 192
Figure 4.27 The browser displays multiple
background images.

1 - 193
Checkpoint 4.2
1. Describe the CSS to configure a graphic named
circle.jpg to display once in the background of all
<h1> elements. Code sample CSS to demonstrate
this.
2. Describe the CSS that configures a file named bg.gif
to repeat vertically down the background of a web
page. Code sample CSS to demonstrate this.
3. Explain how the browser will render the web page if
you use CSS to configure both a background image
and a background color.

1 - 194
More About Images
Image Map
Favorites Icon
CSS Sprites
Sources for Graphics
Guidelines for Using Images
Accessibility & Visual Elements

1 - 195
Image Map (1 of 2)
map element
• Defines the map
area element
• Defines a specific area on a map
• Can be set to a rectangle,
circle, or polygon
– href Attibute
– shape Attribute
– coords Attribute

1 - 196
Image Map (2 of 2)
<map name="boat" id="boat">
<area href="http://www.fishingdoorcounty.com"
shape="rect"
coords="24, 188, 339, 283" alt="Door County
Fishing">
</map>
<img src="fishingboat.jpg" usemap="#boat" alt="Door
County“
width="416" height="350">

1 - 197
Figure 4.29 Sample image map

1 - 198
Favorites Icon - favicon
• A square image
associated
with a web
page
• Usually named: favicon.ico
• May display in the browser address bar, tab, or
favorites/bookmarks list
• Configure with a link tag:
<link rel="icon" href="favicon.ico" type="image/x-icon">

1 - 199
Figure 4.30 The favorites icon displays in the
browser tab and address bar

1 - 200
CSS Sprites
Sprite –
• an image file that contains multiple small graphics that
are configured as background images for various web
page elements
Modern technique to optimize use of multiple icon or
small images
Saves overhead by reducing the number of http
requests made by the browser.
You’ll use CSS Sprites in Chapter 7!

1 - 201
Sources for Graphics (1 of 2)
• Create them yourself using a graphics application:
– GIMP
– Adobe Photoshop
– Adobe Fireworks
• Download graphics from a free site
• Purchase/download professional-quality graphics
• Purchase a graphics collection on a CD

1 - 202
Sources for Graphics (2 of 2)
• Take digital photographs
• Scan your photographs
• Scan your drawings
• Hire a graphic designer to create graphics

1 - 203
Guidelines for Using Images
Reuse images
Consider image file size with image quality
Consider image load time
Use appropriate resolution
Specify dimensions
Be aware of brightness and contrast

1 - 204
Images and Accessibility
Don’t rely on color alone.
• Some visitors may have color perception deficiencies.
Use high contrast between background and text color.
Provide a text equivalent for non-text elements.
• Use the alt attribute on your image elements
If your site navigation uses image links, provide
simple text links at the bottom of the page.

1 - 205
Checkpoint 4.3 (1 of 2)
Search for a site that uses image links to provide
navigation. List the URL of the page.
What colors are used on the image links?
If the image links contain text, is there good contrast
between the background color and letters on the image
links?
Would the page be accessible to a visitor who is sight-
challenged?

1 - 206
Checkpoint 4.3 (2 of 2)
How have accessibility issues been addressed?
Is the alt attribute used to describe the image link?
Is there a row of text links in the footer section of
the page?
Answer the questions above and discuss your findings.

1 - 207
CSS Rounded Corners
border-radius property
• Configures the horizontal radius and vertical radius of
the corner
• Numeric value(s) with unit (pixel or em) or percentage
Example
h1 { border-radius: 15px;
}
Figure 4.32 Rounded corners were
configured with CSS

1 - 208
Examples of Rounded Corners
One value for border-radius configures all four corners
Example:
border-radius: 15px;
Four values for border-radius configure each corner separately
Ordered by top left, top right, bottom right, bottom left
Example:
border-radius: 15px 30px 100px 5px;

1 - 209
CSS box-shadow Property
Configure the horizontal offset, vertical offset, blur
radius, and valid color value
Example:
#wrapper { box-shadow: 5px 5px 5px #828282; }
Optional keyword: inset

1 - 210
Figure 4.35 The centered neutral background
along with shadow properties add dimension

1 - 211
CSS opacity Property
Configure the transparency of the element
Opacity range:
• 0 Completely Transparent
• 1 Completely Opaque
horizontal offset, vertical offset, blur radius, and valid
color value
Example:
h1{ background-color: #FFFFFF;
opacity: 0.6; }

1 - 212
Figure 4.37 The background of the h1 area is
transparent

1 - 213
Rgba Color (1 of 2)
Four values are required:
red color, green color, blue color, and
alpha(transparency)
• The values for red, green, and blue
must be decimal values from 0 to 255.
• The alpha value must be a number between 0
(transparent) and 1 (opaque).

1 - 214
Rgba Color (2 of 2)
Example:
h1 { color: #ffffff;
color: rgba(255, 255, 255, 0.7);
font-size: 5em; padding-right: 10px;
text-align: right;
font-family: Verdana, Helvetica, sans-serif;
}

1 - 215
Figure 4.38 Hexadecimal and RGB decimal color
values

1 - 216
Figure 4.39 CSS RGBA color configures the
transparent text

1 - 217
HSLA Color
hue, saturation, light, alpha
Hue is a value between 0 and 360
Saturation: percent
Lightness: percent
Optional alpha: from 0 to 1
Figure 4.40 A color wheel

1 - 218
Figure 4.41 HSLA color examples

1 - 219
CSS Gradients
Gradient: a smooth blending of shades from one color
to another
Use the background-image property
• linear-gradient()
• radial-gradient()
Example:
body {
background-color: #8FA5CE;
background-image: linear-gradient(#FFFFFF,
#8FA5CE); }

1 - 220
Figure 4.44 The gradient in the background was
configured with CSS without an image file

1 - 221
Summary
• This chapter introduced the use of visual elements
and graphics on web pages.
• As you continue to create web pages, look back at the
guidelines and accessibility issues related to graphics.
• The number one reason for visitors to leave web
pages is too long of a download time. When using
images, be careful to minimize this issue.
• Provide alternatives to images (such as text links) and
use the alt attribute on your pages.

1 - 222
with HTML5
Tenth Edition
Chapter 5
Web Design

1 - 223
• Describe the most common types of website
organization
• Describe principles of visual design
• Design for your target audience
• Create clear, easy-to-use navigation
• Improve the readability of the text on your web pages
• Use graphics appropriately on web pages

1 - 224
• Apply the concept of universal design to web pages
• Describe web page layout design techniques
• Describe the concept of responsive web design
• Apply best practices of web design

1 - 225
Overall Design Is Related to the Site
Purpose (1 of 2)
Figure 5.1 The compelling graphic draws you in

1 - 226
Overall Design Is Related to the Site
Purpose (2 of 2)
• Consider the target audience of these sites.
Figure 5.2 This text-intensive web page offers numerous choices

1 - 227
Website Organization
Hierarchical
Linear
Random
(sometimes called Web Organization)

1 - 228
Hierarchical Organization
A clearly defined home page
Navigation links to major site sections
Often used for commercial and corporate websites
Figure 5.3 Hierarchical site organization

1 - 229
Hierarchical & Shallow (1 of 2)
Figure 5.4 This site design uses a shallow hierarchy

1 - 230
Hierarchical & Shallow (2 of 2)
Be careful that the organization is not too shallow.
• Too many choices  a confusing and less usable web
site
• Information Chunking
• Be aware of the number of major navigation links
• Try to group navigation links visually into groups with
no more than about four links.

1 - 231
Hierarchical & Deep
• Be careful that the organization is not too deep.
– This results in many “clicks” needed to drill down to the
needed page.
– User Interface “Three Click Rule”
 A web page visitor should be able to get from any page on
your site to any other page on your site with a maximum of
three hyperlinks.

1 - 232
Figure 5.5 This site design uses a deep
hierarchy

1 - 233
Linear Organization
A series of pages that provide a tutorial, tour, or
presentation.
Sequential viewing
Figure 5.6 Linear site organization

1 - 234
Random Organization
• Sometimes called “Web” Organization
• Usually there is no clear path through the site
• May be used with artistic or concept sites
• Not typically used for commercial sites.
Figure 5.7 Random site organization

1 - 235
Design Principles
Repetition
• Repeat visual elements throughout design
Contrast
• Add visual excitement and draw attention
Proximity
• Group related items
Alignment
• Align elements to create visual unity

1 - 236
Figure 5.8 The design principles of repetition, contrast,
proximity, and alignment are applied on this web page.

1 - 237
Design to Provide for Accessibility
“The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee
Who benefits from increased accessibility?
• A person with a physical disability
• A person using a slow Internet connection
• A person using an old, outdated computer
• A person using a mobile phone
Legal Requirement: Section 508
Standards: WCAG 2.0, WCAG 2.1

1 - 238
Design for Accessibility (1 of 2)
• Web Content Accessibility Guidelines 2.0
WCAG 2.0
https://www.w3.org/TR/WCAG21/Overview
https://www.w3.org/WAI/WCAG21/quickref/?versi
ons=2.0

1 - 239
Design for Accessibility (2 of 2)
Based on Four Principles (POUR)
1. Perceivable
Content must be Perceivable
2. Operable
Interface components in the content must be Operable
3. Understandable
Content and controls must be Understandable
4. Robust.
Content should be Robust enough to work with current
and future user agents, including assistive technologies

1 - 240
Writing for the Web
Avoid long blocks of text
Use bullet points
Use headings and subheadings
Use short paragraphs

1 - 241
Design “Easy to Read” Text
Use common fonts:
• Arial, Helvetica, Verdana, Times New Roman
Use appropriate text size:
• medium, 1em, 100%
Use strong contrast between text & background
Use columns instead of wide areas of horizontal text

1 - 242
More Text Design Considerations
• Carefully choose text in hyperlinks
– Avoid “click here”
– Hyperlink key words or phrases, not entire sentences
• Chek yur spellin (Check your spelling)

1 - 243
Color Theory
Color Theory:
• the study of color
and its use in design
Color Wheel
• Primary Colors
• Secondary Colors
• Tertiary Colors
Figure 5.11 Color wheel

1 - 244
Color Schemes Based on The Color
Wheel (1)
Monochromatic – shades, tints, or tones
of the same color
http://meyerweb.com/eric/tools/color-blend
Analogous – a main color and two colors adjacent to it
on the color wheel
Complementary – two colors that are opposite each
other on the color wheel

1 - 245
Wheel (1)
Figure 5.13 Monochromatic color scheme
Figure 5.14 Analogous color scheme
Figure 5.15 Complementary color
scheme

1 - 246
Wheel (2)
Split Complementary – a main color, the color opposite
it on the color wheel (the complement) and two colors
adjacent to the complement
Triadic- three colors that are equidistant on the color
wheel
Tetradic – two complementary color pairs

1 - 247
Wheel (2)
Figure 5.16 Split complementary color
scheme
Figure 5.17 Triadic color scheme
Figure 5.18 Tetradic color scheme

1 - 248
Implementing a Color Scheme
Choose one color to be dominant
Use other colors in the color scheme as accent colors
• headings,
• subheadings
• borders,
• list markers, etc.
Use neutrals such as white, off-white, gray, black, or
brown
Do not restrict yourself to web-safe colors
Feel free to use tints, shades, or tones of colors

1 - 249
Verify Sufficient Contrast
When you choose colors for text and background,
sufficient contrast is needed so that the text is easy to
read.
Use one of the following online tools to verify contrast:
• http://webaim.org/resources/contrastchecker
• http://snook.ca/technical/colour_contrast/colour.html
• http://juicystudio.com/services/luminositycontrastratio.
php

1 - 250
Color Scheme Resources
https://meyerweb.com/eric/tools/color-blend
http://paletton.com
http://www.colorsontheweb.com/colorwizard.asp
https://color.adobe.com/create
http://www.colorspire.com
http://hslpicker.com
Figure 5.11 Color wheel

1 - 251
Color & Target Audience (1 of 4)
Appealing to Kids & Preteens
Figure 5.20 A web page intended to appeal to children

1 - 252
Appealing to Young Adults
Figure 5.21 A web page intended to appeal to children

1 - 253
Appealing to Everyone
Figure 5.22 A compelling graphic along with white background for the
content area

1 - 254
Appealing to Older Adults
Figure 5.23 A site designed specifically for the 55-and-older age
Group

1 - 255
Checkpoint
1. List the four basic principles of design.
View the home page of your school and describe
how each principle is applied.
2. View https://www.walmart.com,
http://www.willyporter.com , and
https://www.sesamestreet.org/art-maker
3. Describe the target audience for each site.
How do their designs differ?
Do the sites meet the needs of their target
audiences?

1 - 256
Use of Graphics & Multimedia
• File size and dimension matter
• Provide for robust navigation
• Antialiased/aliased text considerations
• Provide alternate text
• Use only necessary multimedia

1 - 257
Graphic Design Best Practices(1)
• Be careful with large graphics!
• Use the alt attribute to supply descriptive alternate text
• Be sure your message gets across even if images are
not displayed.
– If using images for navigation provide plain text links at
the bottom of the page.
• Use animation only if it makes the page more effective
and provide a text description.

1 - 258
Graphic Design Best Practices (2)
• There is no requirement to limit your color choices to
web safe colors.
• Use anti-aliased text in images
Figure 5.24 Antialiased text
Figure 5.25 This graphic was
not antialiased: The letter “A”
has a jagged look

1 - 259
Graphic Design Best Practices (3)
• Use only necessary images
• Reuse images
• Goal: image file size should be as small as possible
with acceptable display quality
Do you really
need to see a
photo of my
dog right now?
Sparky the Dog © Terry Felke-Morris

1 - 260
Web Page Design Browsers & Screen
Resolution
• Test with multiple browsers
– Google Chrome, Mozilla Firefox, Microsoft Edge, Apple
Safari
• Test at various screen resolutions
• Design to look good at various screen resolutions
– Centered page content
– Set to either a fixed or percentage width

1 - 261
Figure 5.38 This fixed-width centered content is
balanced on the page by left and right margins

1 - 262
Navigation Design
• Make your site easy to navigate
– Provide clearnavigation in the same location on each
page
– Most common – across top or down left side
• Consider:
– Navigation Bars
– Breadcrumb Navigation
– Using Graphics for Navigation
– Dynamic Navigation
– Site Map
– Site Search Feature
– “Skip to Content” Hyperlink

1 - 263
Figure 5.31 Dynamic navigation with HTML and
CSS

1 - 264
Wireframe
A sketch or blueprint of a web page
Shows the structure of the basic page elements,
including:
• Header
• Navigation
• Content
• Footer
• Image locations

1 - 265
Figure 5.35 This wireframe page layout a top
navigation area and a hero image

1 - 266
Web Page Design Page Layout (1)
• Place the most important information "above the fold"
• Use adequate "white" or blank space
• Use an interesting page layout

1 - 267
Figure 5.33 An adequate page layout
This is usable, but
a little boring. See
the next slide for
improvements in
page layout.

1 - 268
Figure 5.34 An adequate page layout
Better
Columns make the page more
interesting and it’s easier to
read this way.

1 - 269
Web Page Design Page Layout (3)
Best
Figure 5.35
Columns interspersed with graphics
and headings create the most
interesting, easy to read page.
Figure 5.36

1 - 270
Page Layout Design Techniques (1 of 2)
Fixed Layout
• AKA rigid or
“ice” design
• Fixed-width often
at left margin
• More appealing if
fixed with content is
centered
Figure 5.37
Figure 5.38

1 - 271
Page Layout Design Techniques (2 of 2)
Fluid Layout
• AKA “liquid” design
• Expands to fill the
browser at all
resolutions.
Figure 5.39
Fluid Layout Adaptation:
• Full width top bar
• Other age content
typically centered with
side margins
Figure 5.40

1 - 272
Flat Web Design
A minimalistic design style with a focus on simplicity,
blocks of color, empty space between design elements,
hero images, long shadows, buttons with transparent
backgrounds, and use of typography.
Figure 5.27

1 - 273
Single Page Website
“One Page Website”
Contains one very long page (a single HTML file) with a
clearly defined navigation area, usually at the top of the
page. This navigation takes you to specific areas on the
page.
(More in Chapter 6)

1 - 274
Figure 6.53 Using the background-attachment
property

1 - 275
Mobile Design Quick Checklist
Small screen size
Bandwidth issues
Single-column layout
Maximize contrast
Optimize images for mobile display
Descriptive alternate text for images
Avoid display of non-essential content

1 - 276
Figure 5.42 Mobile display.

1 - 277
Progressive Enhancement (1 of 2)
• Design your website so it displays well in mobile
devices
• Design your website so that it is usable in older
browsers
• Add enhancements with CSS and/or HTML5 to take
advantage of the capabilities of modern browsers.

1 - 278
Progressive Enhancement (2 of 2)
Figure 5.41 Figure 5.42

1 - 279
Responsive Web Design
Ethan Marcotte, noted web developer
https://www.alistapart.com/articles/responsive-web-
design
Progressively enhancing a web page
for different viewing contexts
(such as smartphones and tablets)
through the use of coding techniques, including flexible
layouts and media queries.
Examples: https://www.mediaqueri.es

1 - 280
Web Design Best Practices Checklist
https://terrymorris.net/bestpractices
• Page Layout
• Browser Compatibility
• Navigation
• Color and Graphics
• Multimedia
• Content Presentation
• Functionality
• Accessibility

1 - 281
Checkpoint (1 of 2)
1. View the home page of your school. Use the Best
Practices Checklist (Table 5.1) to evaluate the page.
Describe the results.
2. View your favorite web site (or a URL provided by your
instructor).
• Maximize and resize the browser window.
• Decide whether the site uses fixed or fluid design.
• Adjust the screen resolution on your monitor
(Start > Control Panel > Display > Settings) to a different
resolution than you normally use.
• Does the site look similar or very different?
• List two recommendations for improving the design of the
site.

1 - 282
Checkpoint (2 of 2)
3. List three best practices of using graphics on web
pages. View the home page of your school.
Describe the use of graphic design best practices on
this page.

1 - 283
Summary
• This chapter introduced you to best practices of web
design.
• The choices you make in the use of color, graphics,
and text should be based on your particular target
audience.

1 - 284
with HTML5
Tenth Edition
Chapter 6
Page Layout Basics

1 - 285
• Describe and apply the CSS Box Model
• Configure width and height with CSS
• Configure margin with CSS
• Configure float with CSS
• Configure fixed, relative, absolute, and sticky
positioning with CSS
• Create two-column page layouts using CSS
• Configure navigation in unordered lists and style with
CSS

1 - 286
• Add interactivity to hyperlinks with CSS pseudo-
classes
• Configure a hyperlink to a named fragment internal to
a web page
• Configure images with CSS sprites
• Configure CSS for printing
• Configure a single page website with parallax scrolling

1 - 287
Width and Height with CSS
Table 6.1 Unit Types and Purpose
Unit Purpose
px Configures a fixed number of pixels as the value
em Configures a value relative to the font size
% Configures a percentage value of the parent
element
vh Configures a value relative to 1% of the viewport
height
vw Configures a value relative to 1% of the viewport
width

1 - 288
CSS Width and Height Properties
• width property
– Configures the width
of an element’s content
• min-width property
– Configures minimum width of an element
• max-width property
– Configures the maximum width of an element
• height property
– Configures the height of an element
h1{ width: 80%; }
h1{ height: 100px; }

1 - 289
The Box Model
Content
• Text & web page elements in the container
Padding
• Area between the content and the border
Border
• Between the padding and the margin
Margin
• Determines the empty space between the element
and adjacent elements

1 - 290
Figure 6.6 The CSS box model

1 - 291
Configure Margin with CSS
• The margin property
• Related properties:
– margin-top, margin-right, margin-left, margin-bottom
• Configures empty space between the element and
adjacent elements
• Syntax examples
h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }

1 - 292
Configure Padding with CSS
• The padding property
• Related properties:
– padding-top, padding-right, padding-left, padding-
bottom
• Configures empty space between the content of the
HTML element (such as text) and the border
• Syntax examples
h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }

1 - 293
Box Model in Action
Figure 6.7 Examples of the box model

1 - 294
The CSS box-sizing Property
Default value for width or height is the value for ONLY
the content (not including border and padding).
The box-sizing property with border-box value
directs the browser to calculate the width and height of
an element to include the value for content, padding,
and border.
Use the universal selector (*) to apply this to all the
element on the page
Example:
* { box-sizing: border-box; }

1 - 295
Normal Flow
Browser display of elements in the order they are coded in
the web page document
Figure 6.8 Two divelements
Figure 6.9 Nested divelements

1 - 296
Figure 6.10 The image is configured to float

1 - 297
float Property (1 of 2)
h1 { background-color: #CCCCCC;
padding: 5px;
color: #000000;
}
p { font-family: Arial,sans-serif;
}
#yls { float: right;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}

1 - 298
float Property (2 of 2)
Elements that seem to “float" on the right or left side of
either the browser window or another element are often
configured using the float property.

1 - 299
Figure 6.11 The CSS float property left aligns the
image
The h2 text is
displayed in
normal flow.

1 - 300
clear Property
Useful to “clear” or terminate a float
Values are left, right, and both
Figure 6.12 The clear property is applied to a line break tag
Apply clear: left;
to a line break element
within the div element.
Now, the h2 begins on a
new line under the
floated image.

1 - 301
overflow Property
Intended to configure the display of elements on a web
page.
However, it is useful to “clear” or terminate a float before the
end of a container element
Values are auto, hidden, and scroll

1 - 302
Figure 6.14 The overflow property is applied to
the div selector
overflow: auto;
was applied to the div
that contains the image
and paragraph.
Now the background
extends and the h2 text
displays AFTER the
floated image.

1 - 303
Checkpoint (1 of 2)
1. List the components of the box model from
innermost to outermost.
2. Describe the purpose of the CSS float property.
3. Which two CSS properties can be used to clear a
float?

01_Felke-Morris_Lecture_ppt_ch01.pptx

01_Felke-Morris_Lecture_ppt_ch01.pptx

Recommended

Recommended

More Related Content

Similar to 01_Felke-Morris_Lecture_ppt_ch01.pptx

Similar to 01_Felke-Morris_Lecture_ppt_ch01.pptx (20)

More from MattMarino13

More from MattMarino13 (20)

Recently uploaded

Recently uploaded (20)

01_Felke-Morris_Lecture_ppt_ch01.pptx