6th Edition Web Development and Design Foundations with HTML5 [Terry Ann Felke-Morris, Ed.D.J Professor Harper College International Edition contributions by Piyali Sengupta PEARSON Boston Columbus Indianapolis New York San Francisco Upper Saddle River Amsterdam Cape Town Dubai London Madrid Milan Munich Paris Montreal Toronto Delhi Mexico City Sao Paulo Sydney Hong Kong Seoul Singapore Taipei Tokyo
Contents CHAPTER 1 Introduction to the Internet and World Wide Web 21 IL1 The Internet and the Web 22 The Internet 22 Birth of the Internet 22 Growth of the Internet 22 Birth of the Web 23 The First Graphical Browser 23 Convergence of Technologies 23 Who Runs the Internet? 23 Intranets and Extranets 24 1,2 Web Standards and Accessibility 24 W3C Recommendations 25 Web Standards and Accessibility 25 Accessibility and the Law 25 Universal Design for the Web 26 1 3 Information on the Web 26 Reliability and Information on the Web 26 Ethical Use of Information on the Web 27 1.4 Network Overview 29 1.5 The Client/Server Model 29 'L( Internet Protocols 31 File Transfer Protocol (FTP) 31 E-mail Protocols 31 Hypertext Transfer Protocol (HTTP) 31 Transmission Control Protocol/Internet Protocol (TCP/IP) 32 1,,* Uniform Resource Identifiers and Domain Names 33 URIs and URLs 33 Domain Names 34 si.11 Markup Languages 36 Standard Generalized Markup Language (SGML) 36 Hypertext Markup Language (HTML) 36 Extensible Markup Language (XML) 36 Extensible Hypertext Markup Language (XHTML) 36 HTML5 the Newest Version of HTML 37 1! f Popular Uses of the Web 37 E-Commerce 37 Mobile Access 37 Blogs 38 Wikis 38 Social Networking 38 RSS 39 Podcasts 39 Web 2.0 39 Chapter Summary 40 Key Terms 40 Review Questions 40 Hands-On Exercise 41 Web Research 42 Focus on Web Design 42 11
. Special 12 Contents CHAPTER Z HTML Basics 43 Web Research 81 Focus on Web Design 81 Website Case Study 82 2Ji HTML Overview 44 HTML 44 XHTML 44 CHAPTER?fi!P^ HTML5 45 *'Vd Document Type Definition 46 g Example XHTML Web Page 46 ; u/s Example HTML5 Web Page 47 3,'Head, Title, Meta, and Body Elements 48 The Head Section 48 The Body Section 48 %Jh Your First Web Page 49 VL"} Heading Element 52 Accessibility and Headings 53 More Heading Options in HTML5 53 SUi Paragraph Element 53 Alignment 55 Sl y Line Break Element 55 2.1 Blockquote Element 57 Phrase Elements 58 2/12 Unordered List 59 The Type Attribute 60 HTML5 and Unordered Lists 60 Ordered List 61 The Type Attribute 61 HTML5 and Ordered Lists 62 Description List 63 Overview of Cascading Style Sheets 98 Advantages of Cascading Style Sheets 98 Configuring Cascading Style Sheets 99 CSS Selectors and Declarations 99 The background-color Property 100 The color Property 100 Configure Background and Text Color 100 Using Color on Web Pages 102 Hexadecimal Color Values 102 Web-Safe Colors 102 CSS Color Syntax 103 Inline CSS with the Style Attribute 103 The Style Attribute 103 Embedded CSS with the Style Element 105 Style Element 105 Configuring Text with CSS 108 The font-family Property 108 More CSS Font Properties 110 CSS Class, id, and Contextual Selectors 114 The Class Selector 114 The id Selector 114 The Contextual Selector 116 Characters 65 Span Element 117 l.lii Div Element 66 Anchor Element 68 Absolute Hyperlinks 70 Relative Hyperlinks 70 E-Mail Hyperlinks 73 Accessibility and Hyperlinks 74 Block Anchor 74 2Llf HTML Validation 75 Chapter Summary 78 Key Terms 78 Review Questions 78 Apply Your Knowledge 79 Hands-On Exercises 81 Using External Style Sheets 118 Link Element 118 Center HTML Elements with CSS 123 The "Cascade" 125 CSS Validation 127 Chapter Summary 130 Key Terms 130 Review Questions 130 Apply Your Knowledge 131 Hands-On Exercises 133 Web Research 135 Focus on Web Design 135 Website Case Study 136
Contents 13 CHAPTER 4 The CSS3 opacity Property CSS3 RGBA Color 191 CSS3 Gradients 192 189 4=1 Configuring Lines and Borders 150 The Horizontal Rule Element 150 The border and padding Properties 150 Types of Graphics 156 Graphic Interchange Format (GIF) Images 156 Joint Photographic Experts Group (JPEG) Images 157 Portable Network Graphic (PNG) Images 158 Chapter Summary 195 Key Terms 195 Review Questions 195 Apply Your Knowledge 196 Hands-On Exercises 198 Web Research 199 Focus on Web Design 199 Website Case Study 200 New WebP Image Format 158 4*3 Image Element 159 44 Accessibility and Images 160 Image Hyperlinks 160 Optimize an Image for the Web 163 HTML5 Visual Elements 164 HTML5 Figure Element 164 HTML5 Figcaption Element 165 HTML5 Meter Element 166 HTML5 Progress Element 167 4«i Background Images 167 The background-image Property 167 Browser Display of a Background Image 168 The background-repeat Property 169 The background-position Property 169 The background-attachment Property 171 4-6 More About Images 172 Image Maps 172 The Favorites Icon 174 Image Slicing 175 CSS Sprites 176 4*7 Sources and Guidelines for Graphics 176 Sources of Graphics 176 Guidelines for Using Images 177 Accessibility and Visual Elements 178 4 J CSS3 Visual Effects 179 The CSS3 background-clip Property 179 The CSS3 background-origin Property 180 The CSS3 background-size Property 180 CSS3 Multiple Background Images 181 CSS3 Rounded Corners 183 The CSS3 box-shadow Property 186 The CSS3 text-shadow Property 187 CHAPTER Design for Your Target Audience 214 Website Organization 215 Hierarchical Organization 215 Linear Organization 216 Random Organization 216 Principles of Visual Design 217 Repetition: Repeat Visual Elements Throughout the Design 217 Contrast: Add Visual Excitement and Draw Attention 217 Proximity: Group Related Items 217 Alignment: Align Elements to Create Visual Unity 217 Design to Provide Accessibility 217 Who Benefits from Universal Design and Increased Accessibility? 218 Accessible Design Can Benefit Search Engine Listing 218 Accessibility Is the Right Thing to Do 218 Writing for the Web 219 Organize Your Content 220 Text in Hyperlinks 220 Reading Level 220 Use Common Fonts 220 Font Size and Weight 220 Font Color Contrast 220 Spelling and Grammar 221 Use of Color 221 Choosing Colors 221 Accessibility and Color 221 Colors and Your Target Audience 222 5-7 Use of Graphics and Multimedia 223 File Size and Image Dimensions Matter 223 Antialiased/Aliased Text in Media 223
14 Contents Use Only Necessary Multimedia 223 Provide Alternate Text 224 5»8 Navigation Design 224 Ease of Navigation 224 Navigation Bars 224 Breadcrumb Navigation 224 Using Graphics for Navigation 225 Skip Repetitive Navigation 225 Dynamic Navigation 225 Site Map 225 Site Search Feature 225 5«f Page Layout Design 226 Wireframes and Page Layout 226 Page Layout Design Techniques 227 Design for the Mobile Web 227 5.1 More Design Considerations 228 Load Time 228 Above the Fold 229 White Space 229 Avoid Horizontal Scrolling 230 Browsers 230 Screen Resolution 230 5.11 Web Design Best Practices Checklist 231 Chapter Summary 234 Key Terms 234 Review Questions 234 Hands-On Exercises 235 Web Research 237 Focus on Web Design 237 Website Case Study 238 CHAPTER 6 Page Layout 241 1.1 The Box Model 242 Content 242 Padding 242 Border 242 Margin 242 The Box Model in Action 243 6.2 Normal Flow 244 A Look Ahead: CSS Layout Properties 246 6 5 CSS Positioning 246 Relative Positioning 246 Absolute Positioning 247 5,4 CSS Float 250 4>g CSS: Clearing a Float 252 The clear Property 252 The overflow Property 253 tlfi CSS Two-Column Page Layout 255 Two Columns with Left Navigation 255 Two Columns with Top Header and Left Navigation 256 SL Hyperlinks in an Unordered List 257 Configure List Markers with CSS 257 Vertical Navigation with an Unordered List 259 Horizontal Navigation with an Unordered List 259 608 CSS Interactivity with Pseudo- Classes 260 i»f Practice with CSS Two-Column Layout 263 6.1 CSS Resources 266 CSS Debugging Techniques 266 CSS Web Resources 267 Cll HTML5 Structural Elements 268 Header Element 268 Hgroup Element 268 Nav Element 268 Footer Element 268 Section Element 271 Article Element 271 Aside Element 271 Time Element 271 HTML5 and Today's Browsers 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 297 5<.l Another Look at Hyperlinks 298 More on Relative Linking 298 Fragment Identifiers 299 The Target Attribute 301 Block Anchor 302 Telephone and Text Message Hyperlinks 302
Contents 15 "1,2 CSS Sprites 302 7 fi Three-Column CSS Page Layout 305 'M CSS Styling for Print 311 Print Styling Best Practices 312 7.5 CSS Styling for the Mobile Web 316 Mobile Web Design Best Practices 317 Viewport Meta Tag 319 CSS Media Queries 320 Testing Mobile Display 321 More on Media Queries 326 Chapter Summary 328 Key Terms 328 Review Questions 328 Apply Your Knowledge 329 Hands-On Exercises 332 Web Research 333 Focus on Web Design 333 Website Case Study 334 CHAPTER 8 Tables 349 8. 1 Table Overview 350 Table Element 350 Table Captions 351 8.2 Table Rows, Cells, and Headers 352 Table Row Element 352 Table Data Element 352 Table Header Element 352 flj Span Rows and Columns 354 The colspan Attribute 354 The rowspan Attribute 354 8-4 Configure an Accessible Table 356 s Style a Table with CSS 358 8.6 CSS3 Structural Pseudo-Classes 361 f>."j Configure Table Sections 362 Chapter Summary 365 Key Terms 365 Review Questions 365 Apply Your Knowledge 366 Hands-On Exercises 368 Web Research 369 Focus on Web Design 369 Website Case Study 369 CHAPTER 9 Forms 377 9.1 Overview of Forms 378 Form Element 378 Form Controls 379».2 Input Element Form Controls 380 Text Box 380 Submit Button 381 Reset Button 381 Check Box 383 Radio Button 384 Hidden Input Control 385 Password Box 386 f 3 Scrolling Text Box 386 Textarea Element 386.4 Select List 389 Select Element 389 Option Element 390 9» Image Buttons and the Button Element 391 Image Button 391 Button Element 391 f 6 Accessibility and Forms 392 Label Element 392 Fieldset and Legend Elements 394 The tabindex Attribute 396 The accesskey Attribute 396 %J Styling a Form 397 Table Structure 397 Transitional Approach 398 Style a Form with CSS 399 f.8 Server-Side Processing 400 Privacy and Forms 403 Server-Side Processing Resources 403 9.9 HTML5 Form Controls 404 E-mail Address Input 404 URL Input 405 Telephone Number Input 405 Search Field Input 406 Datalist Form Control 406 Slider Form Control 408 Spinner Form Control 409 Calendar Form Control 410 Color-well Form Control 411 HTML5 and Progressive Enhancement 413
16 Contents Chapter Summary 414 Key Terms 414 Review Questions 414 Apply Your Knowledge 415 Hands-On Exercises 417 Web Research 418 Focus on Web Design 419 Website Case Study 420 CHAPTER 1 0 Web Development 431 110.1 Successful Large-Scale Project Development 432 Project Job Roles 432 Project Staffing Criteria 433 10,2 The Development Process 433 Conceptualization 435 Analysis 436 Design 436 Production 438 Testing 438 Launch 441 Maintenance 442 Evaluation 442 llfl.g Domain Name Overview 442 Choosing a Domain Name 442 Registering a Domain Name 443 1@4 Web Hosting 444 Web Host Providers 444 10.5 Choosing a Virtual Host 445 ChapterSummary 448 Key Terms 448 Review Questions 448 Hands-On Exercises 449 Web Research 451 Focus on Web Design 452 Website Case Study 452 CHAPTER 1 1 Web Multimedia and Interactivity 455 11.1 Plug-ins, Containers, and Codecs 456 11.2 Getting Started with Audio and Video 458 Provide a Hyperlink 458 1 s 3 XHTML Object and Param Elements 459 Object Element 459 Param Element 459 Audio on a Web Page 460 Video on a Web Page 463 Working with Multimedia on the Web 465 114 Adobe Flash 466 Flash Animation on a Web Page 467 HTML5 Embed Element 469 Flash Resources 471 I %S HTML5 Audio and Video Elements 472 Audio Element 472 Source Element 473 HTML5 Audio on a Web Page 473 Video Element 475 Source Element 475 HTML5 Video on a Web Page 476 11.6 Multimedia Files and Copyright Law 477 II : l CSS3 and Interactivity 478 CSS Image Gallery 478 CSS3 Transform Property 480 CSS3 Transition Property 482 11J Java 485 Adding a Java Applet to a Web Page 486 Java Applet Resources 488 11.9 JavaScript 489 JavaScript Resources 490 ll'l,1fi Ajax 490 Ajax Resources 491 11 111 HTML5 Canvas Element 492 11J 2 Accessibility and Multimedia/ Interactivity 494 Chapter Summary 495 Key Terms 495 Review Questions 495 Apply Your Knowledge 496 Hands-On Exercises 498 Web Research 498 Focus on Web Design 499 Website Case Study 500 CHAPTER 1 2 E-Commeree Overview 507 12.1 What Is E-Commerce? 508 Advantages of E-Commerce 508 Risks of E-Commerce 509
Contents 17 12.2 E-Commerce Business Models 510 i log Electronic Data Interchange (EDI) 510 12.4 E-Commerce Statistics 511 12.5 E-Commerce Issues 512 e 1, 6 E-Commerce Security 513 Encryption 513 Integrity 514 Secure Sockets Layer (SSL) 515 Digital Certificate 515 SSL and Digital Certificates 516 12*J Order and Payment Processing 517 Cash Model 517 Check Model 517 Credit Model 517 Smart Card Model 518 Mobile Payment Model 518 11.8 E-Commerce Storefront Solutions 518 Instant Online Storefront 519 Off-the-Shelf Shopping Cart Software 519 Custom-Built Solutions 519 Semi-Custom-Built Solutions on a Budget 519 Chapter Summary 521 Key Terms 521 Review Questions 521 Hands-On Exercise 522 Web Research 523 Focus on Web Design 524 Website Case Study 524 CHAPTER 1 3 Web Promotion 539 *l 'i Search Engine Overview 540 II I Popular Search Engines 540 ii =S Components of a Search Engine 540 Robot 541 Database 541 Search Form 541 li 3.4 Search Engine Optimization 542 Keywords 542 Page Titles 542 Heading Tags 542 Description 542 Description Meta Tag 542 Linking 543 Images and Multimedia 543 Valid Code 543 Content of Value 543 Listing in a Search Engine 544 Map Your Site 545 Alliances 546 is % > Monitoring Search Listings 546 "i%"27 Link Popularity 548 "If.S Social Media Optimization 548 Blogs and RSS Feeds 549 Social Networking 549 1 S«SI Other Site Promotion Activities 549 Quick Response (QR) Affiliate Programs 550 Banner Ads 550 Banner Exchange 551 Codes 549 Reciprocal Link Agreements 551 Newsletters 551 Sticky Site Features 552 Personal Recommendations 552 Newsgroup and Listserv Postings 552 Traditional Media Ads and Existing Marketing Materials 553 If.l Serving Dynamic Content with Inline Frames 553 The iframe Element 554 YouTube Video in an Inline Frame 555 Chapter Summary 557 Key Terms 557 Review Questions 557 Hands-On Exercises 558 Web Research 559 Focus on Web Design 559 Website Case Study 560 CHAPTER 1 4 A Brief Look at JavaScript 563 Overview of JavaScript 564 14=2 The Development of JavaScript 564 14.3 Popular Uses for JavaScript 565 Alert Message 565 Popup Windows 565 Jump Menus 566 Mouse Movement Techniques 566
18 Contents Adding JavaScript to a Web Page 567 Script Element 567 JavaScript Statement Block Template 567 Alert Message Box 568 Document Object Model Overview 570 Events and Event Handlers 573 Variables 575 Writing a Variable to a Web Page 576 Collecting Variable Values Using a Prompt 578 Introduction to Programming Concepts 579 Arithmetic Operators 579 Decision Making 580 Functions 583 Form Handling 585 Accessibility and JavaScript 592 JavaScript Resources 592 Chapter Summary 593 Key Terms 593 Review Questions 593 Apply Your Knowledge 594 Hands-On Exercises 596 Web Research 596 Website Case Study 597 Appendix A: HTML5 Quick Reference 605 Appendix B: XHTML Quick Reference 611 Appendix C: Special Entity Characters 615 Appendix D: CSS Property Reference 617 Appendix E: WCAG 2.0 Quick Reference 623 Appendix F: Web-Safe Color Palette 625 Appendix G: FTP Tutorial 627 Answers 631 Index 651 Credits 667