Web Development and Design Foundations with HTML5, Global Edition

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