Web Development and Design Foundations with HTML5

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.1 The Internet and the Web 1

The Internet 2

Birth of the Internet 2

Growth of the Internet 2

Birth of the Web 2

The First Graphical Browser 2

Convergence of Technologies 3

Who Runs the Internet? 3

Intranets and Extranets 4



1.2 Web Standards and Accessibility 4 W3C Recommendations 4

Web Standards and Accessibility 5

Accessibility and the Law 5

Universal Design for the Web 5



1.3 Information on the Web 6

Reliability and Information on the Web 6

Ethical Use of Information on the Web 7



1.4 Network Overview 8

1.5 The Client/Server Model 9



1.6 Internet Protocols 10 File Transfer Protocol (FTP) 10

E-mail Protocols 11

Hypertext Transfer Protocol (HTTP) 11

Transmission Control Protocol/Internet Protocol

(TCP/IP) 11



1.7 Uniform Resource Identifiers and

Domain Names 13

URIs and URLs 13

Domain Names 13



1.8 Markup Languages 15 Standard Generalized Markup Language

(SGML) 15

Hypertext Markup Language

(HTML) 16

Extensible Markup Language

(XML) 16

Extensible Hypertext Markup Language

(XHTML) 16

HTML5–the Newest Version of

HTML 16



1.9 Popular Uses of the Web 17

E-Commerce 17

Mobile Access 17

Blogs 17

Wikis 18

Social Networking 18

Cloud Computing 18

RSS 18

Podcasts 19

Web 2.0 19

Chapter Summary 20

Key Terms 20

Review Questions 20

Hands-On Exercise 21

Web Research 22

Focus on Web Design 23

Chapter 2

HTML Basics 25



2.1 HTML Overview 26 HTML 26

XML 26

XHTML 26

HTML5 27



2.2 Document Type Definition 27



2.3 Web Page Template 28

2.4 HTML Element 28



2.5 Head, Title, Meta, and Body Elements 28

The Head Section 28

The Body Section 29



2.6 Your First Web Page 29



2.7 Heading Element 33 Accessibility and Headings 35



2.8 Paragraph Element 35

Alignment 36



2.9 Line Break Element 37

2.10 Blockquote Element 38



2.11 Phrase Elements 39

2.12 Ordered List 40

The Type, Start, and Reversed Attributes 41



2.13 Unordered List 42

2.14 Description List 44



2.15 Special Characters 46

2.16 Structural Elements 47

The Div Element 47

HTML5 Structural Elements 48

The Header Element 48

The Nav Element 48

The Main Element 48

The Footer Element 48



2.17 Anchor Element 50 Absolute Hyperlinks 51

Relative Hyperlinks 52

Site Map 52

E-Mail Hyperlinks 55

Accessibility and Hyperlinks 57

Block Anchor 57



2.18 HTML Validation 58

Chapter Summary 61

Key Terms 61

Review Questions 62

Apply Your Knowledge 63

Hands-On Exercises 64

Web Research 65

Focus on Web Design 65

Website Case Study 65

Chapter 3

Configuring Color and Text

with CSS 81



3.1 Overview of Cascading Style Sheets 82 Advantages of Cascading Style Sheets 82

Configuring Cascading Style Sheets 83

CSS Selectors and Declarations 83

The background-color Property 83

The color Property 84

Configure Background and Text Color 84



3.2 Using Color on Web Pages 85

Hexadecimal Color Values 86

Web-Safe Colors 86

CSS Color Syntax 86



3.3 Inline CSS with the Style Attribute 87 The Style Attribute 87



3.4 Embedded CSS with the Style

Element 89

Style Element 89



3.5 Configuring Text with CSS 92 The Property 92

More CSS Font Properties 94

CSS3 text-shadow Property 96



3.6 CSS Class, id, and Descendant

Selectors 99

The Class Selector 99

The id Selector 100

The Descendant Selector 102



3.7 Span Element 102

3.8 Using External Style Sheets 104

Link Element 104



3.9 Center HTML Elements with CSS 109

3.10 The “Cascade” 110



3.11 CSS Validation 113 Chapter Summary 116

Key Terms 116

Review Questions 116

Apply Your Knowledge 117

Hands-On Exercises 119

Web Research 121

Focus on Web Design 121

Website Case Study 122

Chapter 4

Visual Elements and Graphics 133



4.1 Configuring Lines and Borders 134

The Horizontal Rule Element 134

The border and padding Properties 134



4.2 Types of Graphics 140 Graphic Interchange Format (GIF) Images 140

Joint Photographic Experts Group (JPEG)

Images 141

Portable Network Graphic (PNG) Images 142

New WebP Image Format 142



4.3 Image Element 143

Accessibility and Images 144

Image Hyperlinks 144

Optimize an Image for the Web 147



4.4 HTML5 Visual Elements 148 HTML5 Figure Element 148

HTML5 Figcaption Element 149

HTML5 Meter Element 150

HTML5 Progress Element 151



4.5 Background Images 151

The background-image Property 151

Browser Display of a Background Image 152

The background-repeat Property 153

The background-position Property 153

The background-attachment Property 155



4.6 More About Images 156 Image Maps 156

The Favorites Icon 158

Configuring a Favorites Icon 158

Image Slicing 159

CSS Sprites 159



4.7 Sources and Guidelines for Graphics 160

Sources of Graphics 160

Guidelines for Using Images 161

Accessibility and Visual Elements 162



4.8 CSS3 Visual Effects 162 The CSS3 background-clip Property 163

The CSS3 background-origin Property 163

The CSS3 background-size Property 164

CSS3 Multiple Background Images 165

CSS3 Rounded Corners 167

The CSS3 box-shadow Property 169

The CSS3 opacity Property 171

CSS3 RGBA Color 173

CSS3 HSLA Color 175

Hue, Saturation, Lightness, and Alpha 176

HSLA Color Examples 176

CSS3 Gradients 178

W3C Linear Gradient Syntax 178

CSS3 Gradients and Progressive

Enhancement 178

Configuring CSS3 Gradients 178

Chapter Summary 180

Key Terms 180

Review Questions 180

Apply Your Knowledge 181

Hands-On Exercises 183

Web Research 184

Focus on Web Design 184

Website Case Study 185

Chapter 5

Web Design 199



5.1 Design for Your Target Audience 200



5.2 Website Organization 201 Hierarchical Organization 201

Linear Organization 202

Random Organization 202



5.3 Principles of Visual Design 203

Repetition: Repeat Visual Components

Throughout the Design 203

Contrast: Add Visual Excitement and Draw

Attention 203

Proximity: Group Related Items 204

Alignment: Align Elements to Create Visual

Unity 204



5.4 Design to Provide Accessibility 204 Who Benefits from Universal Design and

Increased Accessibility? 205

Accessible Design Can Benefit Search Engine

Listing 205

Accessibility is the Right Thing to Do 205



5.5 Writing for the Web 206

Organize Your Content 206

Choosing a Font 207

Font Size 207

Chapter Summary 231

Key Terms 231

Review Questions 231

Hands-On Exercises 232

Web Research 234

Focus on Web Design 235

Website Case Study 236

Chapter 6

Page Layout 239



6.1 The Box Model 240 Content 240

Padding 240

Border 240

Margin 240

The Box Model in Action 242



6.2 Normal Flow 242



6.3 CSS Float 244

6.4 CSS: Clearing a Float 246

The clear Property 246

The overflow Property 247



6.5 CSS Two-Column Page Layout 249 Two Columns with Left Navigation 249

Two Columns with Top Header and Left

Navigation 250



6.6 Hyperlinks in an Unordered List 251

Configure List Markers with CSS 251

Vertical Navigation with an Unordered List 253

Horizontal Navigation with an Unordered

List 254



6.7 CSS Interactivity with Pseudo- Classes 254



6.8 Practice with CSS Two-Column

Layout 257



6.9 Header Text Image Replacement 260 Improved Header Text Image Replacement

Technique 260



6.10 Practice with an Image Gallery 262



6.11 Positioning with CSS 264 Static Positioning 264

Fixed Positioning 265

Relative Positioning 265

Absolute Positioning 266



6.12 CSS Debugging Techniques 268



6.13 More HTML5 Structural Elements 270 The Section Element 270

Font Weight 207

Font Color Contrast 207

Line Length 208

Alignment 208

Text in Hyperlinks 208

Reading Level 208

Spelling and Grammar 208



5.6 Use of Color 208

Color Scheme Based on an Image 208

Color Wheel 209

Color Scheme Based on the Color Wheel 209

Implementing a Color Scheme 210

Accessibility and Color 211

Colors and Your Target Audience 211



5.7 Use of Graphics and Multimedia 214 File Size and Image Dimensions Matter 214

Antialiased/Aliased Text in Media 214

Use Only Necessary Multimedia 215

Provide Alternate Text 215



5.8 More Design Considerations 215

Load Time 215

Above the Fold 216

White Space 217

Avoid Horizontal Scrolling 217

Browsers 217

Screen Resolution 217



5.9 Navigation Design 218 Ease of Navigation 218

Navigation Bars 218

Breadcrumb Navigation 218

Using Graphics for Navigation 218

Skip Repetitive Navigation 219

Dynamic Navigation 219

Site Map 220

Site Search Feature 220



5.10 Page Layout Design 220

Wireframes and Page Layout 220

Page Layout Design Techniques 222



5.11 Design for the Mobile Web 224 Three Approaches 224

Mobile Device Design Considerations 224

Example Desktop Website and Mobile

Website 225

Mobile Design Quick Checklist 225

Responsive Web Design 226



5.12 Web Design Best Practices

Checklist 227

The Article Element 270

The Aside Element 270

The Time Element 270



6.14 HTML5 Compatibility with Older Browsers 272

Configure CSS Block Display 273

HTML5 Shim 273

Chapter Summary 275

Key Terms 275

Review Questions 275

Apply Your Knowledge 276

Hands-On Exercises 279

Web Research 279

Focus on Web Design 280

Website Case Study 280

Chapter 7

More on Links, Layout, and Mobile 295



7.1 Another Look at Hyperlinks 296

More on Relative Linking 296

Relative Link Examples 296

Fragment Identifiers 298

Landmark Roles with ARIA 300

The Target Attribute 300

Block Anchor 301

Telephone and Text Message Hyperlinks 301



7.2 CSS Sprites 301

7.3 Three-Column CSS Page Layout 304



7.4 CSS Styling for Print 310 Print Styling Best Practices 311



7.5 Designing for the Mobile Web 315

Mobile Web Design Best Practices 316



7.6 Viewport Meta Tag 318

7.7 CSS3 Media Queries 319

What’s a Media Query? 319

Media Query Example Using a Link Element 320

Media Query Example Using an @media

Rule 320



7.8 Flexible Images 324

7.9 Testing Mobile Display 326

Testing with a Desktop Browser 327

For Serious Developers Only 328

Media Queries & Internet Explorer 328

Mobile First 328



7.10 CSS3 Flexible Box Layout 328 Configure a Flexible Container 329

Configure the Flex Items 329

Chapter Summary 335

Key Terms 335

Review Questions 335

Apply Your Knowledge 336

Hands-On Exercises 339

Web Research 340

Focus on Web Design 340

Website Case Study 341

Chapter 8

Tables 355



8.1 Table Overview 356

Table Element 356

The border Attribute 357

Table Captions 357



8.2 Table Rows, Cells, and Headers 358 Table Row Element 358

Table Data Element 358

Table Header Element 358



8.3 Span Rows and Columns 360

The colspan Attribute 360

The rowspan Attribute 360



8.4 Configure an Accessible Table 362

8.5 Style a Table with CSS 364



8.6 CSS3 Structural Pseudo-Classes 366

8.7 Configure Table Sections 368

Chapter Summary 371

Key Terms 371

Review Questions 371

Apply Your Knowledge 372

Hands-On Exercises 374

Web Research 375

Focus on Web Design 375

Web Site Case Study 375

Chapter 9

Forms 383



9.1 Overview of Forms 384 Form Element 385

Form Controls 386



9.2 Input Element Form Controls 386

Text Box 386

Submit Button 387

Reset Button 387

Check Box 389

Radio Button 390

Hidden Input Control 391

Password Box 392



9.3 Scrolling Text Box 392 Textarea Element 392



9.4 Select List 395

Select Element 395

Option Element 396



9.5 Image Buttons and the Button Element 397

Image Button 397

Button Element 397



9.6 Accessibility and Forms 398

Label Element 398

Fieldset and Legend Elements 400

The tabindex Attribute 402

The accesskey Attribute 402



9.7 Style a Form with CSS 403

9.8 Server-Side Processing 404

Privacy and Forms 407

Server-Side Processing

Resources 407



9.9 HTML5 Form Controls 408 E-mail Address Input 408

URL Input 409

Telephone Number Input 409

Search Field Input 410

Datalist Form Control 410

Slider Form Control 411

Spinner Form Control 412

Calendar Form Control 413

Color-well Form Control 414

HTML5 and Progressive

Enhancement 417

Chapter Summary 418

Key Terms 418

Review Questions 418

Apply Your Knowledge 419

Hands-On Exercises 421

Web Research 422

Focus on Web Design 423

Website Case Study 424

Chapter 10

Web Development 435



10.1 Successful Large-Scale Project

Development 436

Project Job Roles 436

Project Staffing Criteria 437



10.2 The Development Process 437 Conceptualization 439

Analysis 440

Design 440

Production 442

Testing 442

Launch 445

Maintenance 446

Evaluation 446



10.3 Domain Name Overview 446

Choosing a Domain Name 446

Registering a Domain Name 447



10.4 Web Hosting 448 Web Hosting Providers 448



10.5 Choosing a Virtual Host 449

Chapter Summary 452

Key Terms 452

Review Questions 452

Hands-On Exercises 453

Web Research 455

Focus on Web Design 455

Website Case Study 456

Chapter 11

Web Multimedia and Interactivity 457



11.1 Plug-Ins, Containers, and Codecs 458

11.2 Getting Started with Audio and

Video 460

Provide a Hyperlink 460

Working with Multimedia on the Web 461



11.3 Adobe Flash 463 HTML5 Embed Element 463

Flash Resources 465



11.4 HTML5 Audio and Video Elements 466

Audio Element 466

Source Element 467

HTML5 Audio on a Web Page 467

Video Element 469

Source Element 469

HTML5 Video on a Web Page 470



11.5 Multimedia Files and Copyright Law 471

11.6 CSS3 and Interactivity 472

CSS Image Gallery 472

CSS3 Transform Property 474

CSS3 Rotate Transform 475

CSS Transition Property 476

Practice with Transitions 478



11.7 Java 480 Adding a Java Applet to a Web Page 481

Java Applet Resources 482



11.8 JavaScript 483

JavaScript Resources 485



11.9 Ajax 485 Ajax Resources 486



11.10 jQuery 486

jQuery Resources 487



11.11 HTML5 APIs 487 Geolocation 487

Web Storage 487

Offline Web Applications 488

Drawing with the Canvas Element 488



11.12 Accessibility and Multimedia/

Interactivity 490

Chapter Summary 492

Key Terms 492

Review Questions 492

Apply Your Knowledge 493

Hands-On Exercises 495

Web Research 495

Focus on Web Design 496

Website Case Study 496

Chapter 12

E-Commerce Overview 503



12.1 What Is E-Commerce? 504 Advantages of E-Commerce 504

Risks of E-Commerce 505



12.2 E-Commerce Business Models 506



12.3 Electronic Data Interchange (EDI) 506

12.4 E-Commerce Statistics 506



12.5 E-Commerce Issues 507

12.6 E-Commerce Security 509

Encryption 509

Integrity 510

Secure Sockets Layer (SSL) 510

Digital Certificate 511

SSL and Digital Certificates 512



12.7 Order and Payment Processing 512 Cash Model 513

Credit Model 513

Smart Card Model 513

Mobile Payment Model 513



12.8 E-Commerce Storefront Solutions 514

Instant Online Storefront 514

Off-the-Shelf Shopping Cart Software 514

Custom-Built Solutions 515

Semi-Custom-Built Solutions on a Budget 515

Chapter Summary 516

Key Terms 516

Review Questions 516

Hands-On Exercises 517

Web Research 518

Focus on Web Design 519

Website Case Study 519

Chapter 13

Web Promotion 533



13.1 Search Engine Overview 534

13.2 Popular Search Engines 534



13.3 Components of a Search Engine 534 Robot 535

Database 535

Search Form 535



13.4 Search Engine Optimization 536

Keywords 536

Page Titles 536

Heading Tags 536

Description 536

Description Meta Tag 536

Linking 537

Images and Multimedia 537

Valid Code 537

Content of Value 537



13.5 Listing in a Search Engine 538 Map Your Site 539

Alliances 540



13.6 Monitoring Search Listings 540



13.7 Link Popularity 542

13.8 Social Media Optimization 542

Blogs and RSS Feeds 543

Social Networking 543



13.9 Other Site Promotion Activities 543 Quick Response (QR) Codes 543

Affiliate Programs 544

Banner Ads 544

Banner Exchange 545

Reciprocal Link Agreements 545

Newsletters 545

Sticky Site Features 545

Personal Recommendations 545

Newsgroup and Listserv Postings 546

Traditional Media Ads and Existing Marketing

Materials 546



13.10 Serving Dynamic Content with Inline

Frames 546

The iframe Element 547

YouTube Video in an Inline Frame 548

Chapter Summary 550

Key Terms 550

Review Questions 550

Hands-On Exercises 551

Web Research 552

Focus on Web Design 552

Website Case Study 553

Chapter 14

A Brief Look at JavaScript and

jQuery 557



14.1 Overview of JavaScript 558

14.2 The Development of JavaScript 558



14.3 Popular Uses for JavaScript 559 Alert Message 559

Popup Windows 559

Jump Menus 560

Mouse Movement Techniques 560



14.4 Adding JavaScript to a Web Page 561

Script Element 561

Legacy JavaScript Statement Block

Template 561

Alert Message Box 562



14.5 Document Object Model Overview 564

14.6 Events and Event Handlers 567



14.7 Variables 570 Writing a Variable to a Web Page 570

Collecting Variable Values Using a Prompt 572



14.8 Introduction to Programming

Concepts 574

Arithmetic Operators 574

Decision Making 574

Functions 577



14.9 Form Handling 580

14.10 Accessibility and JavaScript 586



14.11 JavaScript Resources 587

14.12 Overview of jQuery 587



14.13 Adding jQuery to a Web Page 587 Download jQuery 587

Access jQuery via a Content Delivery

Network 588

The Ready Event 588



14.14 jQuery Selectors 590



14.15 jQuery Methods 590

14.16 jQuery Image Gallery 593



14.17 jQuery Plugins 597

14.18 jQuery Resources 601

Chapter Summary 602

Key Terms 602

Review Questions 602

Apply Your Knowledge 603

Hands-On Exercises 605

Web Research 606

WebSite Case Study 606

Appendix A: HTML5 Quick Reference 619

Appendix B: XHTML Quick Reference 623

Appendix C: Special Entity Characters 627

Appendix D: Comparison of XHTML and

HTML5 629

Appendix E: CSS Property Reference 637

Appendix F: WCAG 2.0 Quick Reference 643

Appendix G: FTP Tutorial 645

Appendix H: Web-Safe Color Palette 649

Answers 651

Index 000

Credits 000