Web Development and Design Foundations with HTML5

Using Hands-On Practice exercises and Web Site Case Studies to motivate readers, Web Development and Design Foundations with HTML5 includes all the necessary lessons to guide students in developing highly effective Web sites. A well-rounded balance of hard skills (HTML5, XHTML, CSS, JavaScript) and soft skills (Web Design, e-commerce, Web site promotion strategies) presents everything beginning Web developers need to know to build and promote successful Web sites.

Terry Felke-Morris is a Professor of Computer Information Systems at William Rainey Harper College in Palatine, Illinois. She holds a Doctor of Education degree, a Master of Science degree in information systems, and numerous certifications, including Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster, Microsoft Certified Professional, Master CIW Designer, and CIW Certified Instructor.

Dr. Felke-Morris has been honored with Harper College’s Glenn A. Reich Memorial Award for Instructional Technology in recognition of her work in designing the college’s CIS Web Development program and courses. In 2006, she received the Blackboard Greenhouse Exemplary Online Course Award for use of Internet technology in the academic environment. Ms.Felke-Morris received two international awards in 2008: the Instructional Technology Council’s Outstanding e-Learning Faculty Award for Excellence and the MERLOT Award for Exemplary Online Learning Resources–MERLOT Business Classics.

With over 25 years of information technology experience in business and industry, Dr. Felke-Morris published her first website in 1996 and has been working with the Web ever since. A long-time promoter of Web standards, she has been a member of the Web Standards Project Education Task Force. Dr. Felke-Morris helped to develop the Web Development certificate and degree programs at William Rainey Harper College and currently is the senior faculty member in that area. For more information about Dr. Felke-Morris, visit http://terrymorris.net.

CHAPTER 1 Introduction to the Internet and World Wide Web
1.1 The Internet and the Web
The Internet
Birth of the Internet
Growth of the Internet
Birth of the Web
The First Graphical Browser
Convergence of Technologies
Who Runs the Internet?
Intranets and Extranets
1.2 Web Standards and Accessibility
W3C Recommendations
Web Standards and Accessibility
Accessibility and the Law
Universal Design for the Web
1.3 Information on the Web
Reliability and Information on the Web
Ethical Use of Information on the Web
1.4 Network Overview
1.5 The Client/Server Model
1.6 Internet Protocols
File Transfer Protocol (FTP)
E-mail Protocols
Hypertext Transfer Protocol (HTTP)
Transmission Control Protocol/Internet Protocol (TCP/IP)
1.7 Uniform Resource Identifiers and Domain Names
URIs and URLs
Domain Names
1.8 Markup Languages
Standard Generalized Markup Language (SGML)
Hypertext Markup Language (HTML)
Extensible Markup Language (XML)
Extensible Hypertext Markup Language (XHTML)
HTML5–the Newest Version of HTML
1.9 Internet and Web Trends
Chapter Summary
Key Terms
Review Questions
Hands-On Exercise
Web Research
Focus on Web Design
CHAPTER 2 HTML Basics
2.1 HTML Overview
HTML
XHTML
HTML5
2.2 Document Type Definition
2.3 Example XHTML Web Page
2.4 Example HTML5 Web Page
2.5 Head, Body, Title, and Meta Elements
The Head Section
The Body Section
2.6 Your First Web Page
2.7 Heading Element
Accessibility and Headings
More Heading Options in HTML5
2.8 Paragraph Element
Alignment
2.9 Line Break Element
2.10 Blockquote Element
2.11 Phrase Elements
2.12 Unordered List
The type Attribute
HTML5 and Unordered Lists
2.13 Ordered List
The type Attribute
HTML5 and Ordered Lists
2.14 Description List
2.15 Special Characters
2.16 Div Element
2.17 Anchor Element
Absolute Hyperlinks
Relative Hyperlinks
E-Mail Hyperlinks
Accessibility and Hyperlinks
Block Anchor
2.18 HTML Validation
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study
CHAPTER 3 Configuring Color and Text with CSS
3.1 Overview of Cascading Style Sheets
Advantages of Cascading Style Sheets
Configuring Cascading Style Sheets
CSS Selectors and Declarations
The background-color Property
The color Property
Configure Background and Text Color
3.2 Using Color on Web Pages
Hexadecimal Color Values
Web Safe Colors
CSS Color Syntax
3.3 Inline CSS with the Style Attribute
The Style Attribute
3.4 Embedded CSS with the Style Element
Style Element
3.5 Configuring Text with CSS
The Property
More CSS Font Properties
3.6 CSS Class, Id, and Contextual Selectors
The Class Selector
The Id Selector
The Contextual Selector
3.7 Span Element
3.8 Using External Style Sheets
Link Element
3.9 Center HTML Elements with CSS
3.10 The Cascade
3.11 CSS Validation
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Implementing CSS
CHAPTER 4 Visual Elements and Graphics
4.1 Configuring Lines and Borders
Horizontal Rule Element
The border and padding Properties
4.2 Types of Graphics
Graphic Interchange Format (GIF) Images
Joint Photographic Experts Group (JPEG) Images
Portable Network Graphic (PNG) Images
New WebP Image Format
4.3 Image Element
Accessibility and Images
Image Hyperlinks
Optimize an Image for the Web
4.4 HTML5 Visual Elements
HTML5 Figure Element
HTML5 Figcaption Element
HTML5 Meter Element
HTML5 Progress Element
4.5 Background Images
The background-image Property
Browser Display of a Background Image
The background-repeat Property
The background-position Property
The background-attachment Property
4.6 More About Images
Image Maps
The Favorites Icon
Image Slicing
CSS Sprites
4.7 Sources and Guidelines for Graphics
Sources of Graphics
Guidelines for Using Images
Accessibility and Visual Elements
4.8 CSS3 Visual Effects
The CSS3 background-clip Property
The CSS3 background-origin Property
The CSS3 background-size Property
CSS3 Multiple Background Images
CSS3 Rounded Corners
CSS3 Box Shadow
CSS3 Text Shadow
CSS3 Opacity
CSS3 RGBA Color
CSS3 Gradients
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Using Graphics & Visual Elements
CHAPTER 5 Web Design
5.1 Design for Your Target Audience
Browser-Friendly
Screen Resolution
5.2 Website Organization
Hierarchical Organization
Linear Organization
Random Organization
5.3 Principles of Visual Design
Repetition: Repeat Visual Elements throughout Design
Contrast: Add Visual Excitement and Draw Attention
Proximity: Group-Related Items
Alignment: Align Elements to Create Visual Unity
5.4 Design to Provide Accessibility
Who Benefits from Universal Design and Increased Accessibility?
Accessible Design Can Benefit Search Engine Listing
Legal Requirements
Accessibility is the Right Thing To Do
5.5 Writing for the Web
Organize Your Content
Text in Hyperlinks
Reading Level
Use of Fonts
Spelling and Grammar
5.6 Use of Color
Choosing Colors
Accessibility and Color
Appealing to Children and Preteens
Appealing to Young Adults
Appealing to Everybody
Appealing to Older Adults
5.7 Use of Graphics and Multimedia
File Size and Dimension Matter
Antialiased/Aliased Text in Media
Use Only Necessary Multimedia
Provide Alternate Text
5.8 Navigation Design
Ease of Navigation
Navigation Bars
Breadcrumb Navigation
Using Graphics for Navigation
Dynamic Navigation
Site Map
Site Search Features
5.9 Page Layout Design
Wireframes and Page Layout
Page Layout Design Techniques
Design for the Mobile Web
5.10 More Design Considerations
Load Time
Above the Fold
White Space
Avoid Horizontal Scrolling
Browsers
Screen Resolution
5.11 Web Design Best Practices Checklist
Chapter Summary
Key Terms
Review Questions
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Web Design Best Practices
CHAPTER 6 Page Layout
6.1 The Box Model
Content
Padding
Border
Margin
The Box Model in Action
6.2 Normal Flow
6.3 CSS Positioning
Relative Positioning
Absolute Positioning
6.4 CSS Float
6.5 CSS Clearing a Float
The clear Property
The overflow Property
6.6 CSS Two-Column Page Layout
Two Column with Left Navigation
Two Column with Top Header and Left Navigation
6.7 Hyperlinks in an Unordered List
Configure List Markers with CSS
Vertical Navigation with an Unordered List
Horizontal Navigation with an Unordered List
6.8 CSS Interactivity with Pseudo-Classes
6.9 Practice with CSS Two Column Layout
6.10 CSS Resources
CSS Debugging Techniques
CSS Web Resources
6.11 HTML5 Structural Elements
Header Element
Hgroup Element
Nav Element
Footer Element
Section Element
Article Element
Aside Element
Time Element
HTML5 & Today’s Browsers
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Implementing CSS Two-Column Page Layout
CHAPTER 7 More on Links and Layout
7.1 Another Look at Hyperlinks
More on Relative Linking
Fragment Identifiers
The target Attribute
Block Anchor
Telephone & Text Message Hyperlinks
7.2 CSS Sprites
7.3 Three-Column CSS Page Layout
7.4 CSS Styling for Print
Print Styling Best Practices
7.5 CSS Styling for the Mobile Web
Mobile Web Design Best Practices
Viewport Meta Tag
CSS Media Queries
Testing Mobile Display
More on Media Queries
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus On Web Design
Website Case Study: Styling for the Mobile Web
CHAPTER 8 Tables
8.1 Table Overview
Table Element
Table Captions
8.2 Table Rows, Cells, and Headers
Table Row Element
Table Data Element
Table Header Element
8.3 Span Rows and Columns
The colspan Attribute
The rowspan Attribute
8.4 Configure an Accessible Table
8.5 Style a Table with CSS
8.6 CSS Structural Pseudo-classes
8.7 Configure Table Sections
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Using Tables
CHAPTER 9 Forms
9.1 Overview of Forms
Form Element
Form Controls
9.2 Input Element Form Controls
Text Box
Submit Button
Reset Button
Check Box
Radio Button
Hidden Input Control
Password Box
9.3 Scrolling Text Box
Textarea Element
9.4 Select List Select List
Select Element
Option Element
9.5 Image Buttons and the Button Element
Image Button
Button Element
9.6 Accessibility and Forms
Label Element
Fieldset Element
Legend Element
The tabindex Attribute
The accesskey Attribute
9.7 Styling a Form
Table Structure
Transitional Approach
Style a Form with CSS
9.8 Server-Side Processing
Privacy and Forms
Server-Side Processing Resources
9.9 HTML5 Form Controls
E-mail Address Input
URL Input
Telephone Number Input
Search Field Input
Datalist Form Control
Slider Form Control
Spinner Form Control
Calendar Form Control
Color-well Form Control
HTML5 and Progressive Enhancement
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Adding a Form
CHAPTER 10 Web Development
10.1 Successful Large-Scale Project Development
Project Job Roles
Project Staffing Criteria
10.2 The Development Process
Conceptualization
Analysis
Design
Production
Testing
Launch
Maintenance
Evaluation
10.3 Domain Name Overview
Choosing a Domain Name
Registering a Domain Name
10.4 Web Hosting
Web Host Providers
Hosting Needs
10.5 Choosing a Virtual Host
Chapter Summary
Key Terms
Review Questions
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Testing Phase
CHAPTER 11 Web Multimedia and Interactivity
11.1 Plug-Ins, Containers, and Codecs
11.2 Getting Started with Audio and Video
Provide a Hyperlink
11.3 XHTML Object & Param Elements
Object Element
Param Element
Audio on a Web Page
Video on a Web Page
Working with Multimedia on the Web
11.4 Adobe Flash
Flash Animation on a Web Page
HTML5 Embed Element
Flash Resources
11.5 HTML5 Audio & Video Elements
Audio Element
Source Element
HTML5 Audio on a Web Page
Video Element
Source Element
HTML5 Video on a Web Page
11.6 Multimedia Files & Copyright
11.7 CSS3 & Interactivity
CSS Image Gallery
CSS3 Transform Property
CSS3 Transition Property
11.8 Java
Adding a Java Applet to a Web Page
Java Applet Resources
11.9 JavaScript
JavaScript Resources
11.10 Ajax
Ajax Resources
11.11 HTML5 Canvas Element
11.12 Accessibility and Multimedia/Interactivity
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Adding Multimedia
CHAPTER 12 E-Commerce Overview
12.1 What Is E-Commerce?
Advantages of E-Commerce
Risks of E-Commerce
12.2 E-Commerce Business Models
12.3 Electronic Data Interchange (EDI)
12.4 E-Commerce Statistics
12.5 E-Commerce Issues
12.6 E-Commerce Security
Encryption
Integrity
Secure Sockets Layer (SSL)
Digital Certificate
SSL and Digital Certificates
12.7 Order and Payment Processing
Cash Model
Check Model
Credit Model
Smart Card
12.8 E-Commerce Storefront Solutions
Instant Online Storefront
Off-the-Shelf Shopping Cart Software
Custom-Built Solution
Semi-Custom-Built Solutions on a Budget
Chapter Summary
Key Terms
Review Questions
Hands-On Exercise
Web Research
Focus on Web Design
Website Case Study: Adding a Catalog Page for an Online Store
CHAPTER 13 Web Promotion
13.1 Search Engine Overview
13.2 Popular Search Engines
13.3 Components of a Search Engine
Robot
Database
Search Form
13.4 Designing Your Pages for Promotion
Keywords
Page Titles
Heading Tags
Description
Description Meta Tag
Linking
Page Layout
Images and Multimedia
Valid Code
Content of Value
13.5 Listing in a Search Engine and Search Index
Map Your Site
Alliances
13.6 Monitoring Search Listings
13.7 Link Popularity
13.8 Social Media Optimization
Social Bookmarking
Blogs and RSS Feeds
Social Networking
13.9 Other Site Promotion Activities
Quick Response (QR) Codes
Affiliate Programs
Banner Ads
Banner Exchange
Reciprocal Link Agreements
Newsletters
Sticky Site Features
Personal Recommendations
Newsgroup and Listserv Postings
Traditional Media Ads and Existing Marketing Materials
13.10 Serving Dynamic Content with Inline Frames
Iframe Element
YouTube Video in an Inline Frame
Chapter Summary
Key Terms
Review Questions
Hands-On Exercises
Web Research
Focus on Web Design
Website Case Study: Meta Tags to Promote Web Sites
CHAPTER 14 A Brief Look at JavaScript
14.1 Overview of JavaScript
14.2 The Development of JavaScript
14.3 Popular Uses for JavaScript
Alert Message
Popup Windows
Browser Sniffing
Jump Menus
Mouse Movement Techniques
14.4 Adding JavaScript to a Web Page
The Script Element
JavaScript Statement Block Template
Alert Message Box
14.5 Document Object Model Overview
14.6 Events and Event Handlers
14.7 Variables
Writing a Variable to a Web Page
Collecting Variable Values Using a Prompt
14.8 Introduction to Programming Concepts
Arithmetic Operators
Decision Making
Functions
14.9 Form Handling
14.10 Accessibility and JavaScript
14.11 JavaScript Resources
Chapter Summary
Key Terms
Review Questions
Apply Your Knowledge
Hands-On Exercises
Web Research
Website Case Study: Adding JavaScript

Web Developer’s Handbook Appendixes
A. HTML5 Quick Reference
B. XHTML Quick Reference
C. Special Entity Characters
D. CSS Property Reference
E. WCAG 2.0 Quick Reference
F. FTP Tutorial
Answers
Index