Professor Emerita Harper College 10Th Edition Web Development and Design Foundations

Home , CSS Flexible Box Layout, CSS grid layout

10th Edition Web Development and Design Foundations with HTML5

Terry Ann Felke-Morris, Ed.D.

Professor Emerita Harper College

330 Hudson Street, NY NY 10013

A01_FELK9996_10_SE_FM.indd 3 18/09/19 5:26 PM Contents

1.7 Uniform Resource Identifiers and Domain CHAPTER 1 Names 13 URIs and URLs 13 Introduction to the Internet and Domain Names 13 World Wide Web 1 1.8 Markup Languages 16 1.1 The Internet and the Web 2 Standard Generalized Markup Language The Internet 2 (SGML) 16 Birth of the Internet 2 Hypertext Markup Language Growth of the Internet 2 (HTML) 16 Birth of the Web 2 Extensible Markup Language The First Graphical Browser 2 (XML) 16 Convergence of Technologies 3 Extensible Hypertext Markup Language (XHTML) 17 Who Runs the Internet? 3 HTML5—the Newest Version Intranets and Extranets 4 of HTML 17 1.2 Web Standards and Accessibility 4 1.9 Popular Uses of the Web 17 W3C Recommendations 4 E-Commerce 17 Web Standards and Accessibility 5 Mobile Access 18 Accessibility and the Law 5 Blogs 18 Universal Design for the Web 5 Wikis 18 1.3 Information on the Web 6 Social Networking 18 Reliability and Information on the Web 6 Cloud Computing 19 Ethical Use of Information on the Web 7 RSS 19 1.4 Network Overview 8 Podcasts 19 1.5 The Client/Server Model 9 Constant Change 19 1.6 Internet Protocols 10 Chapter Summary 20 File Transfer Protocol (FTP) 10 Key Terms 20 E-mail Protocols 11 Review Questions 20 Hypertext Transfer Protocol (HTTP) 11 Hands-On Exercise 21 Hypertext Transfer Protocol Secure (HTTPS) 11 Web Research 22 Transmission Control Protocol/Internet Protocol Focus on Web Design 23 (TCP/IP) 11

xii

A01_FELK9996_10_SE_FM.indd 12 18/09/19 5:26 PM Contents xiii

Relative Hyperlinks 55 CHAPTER Site Map 55 2 The Target Attribute 59 HTML Basics 25 Block Anchor 59 2.1 HTML Overview 26 E-Mail Hyperlinks 59 Accessibility and Hyperlinks 61 HTML 26 XML 26 2.18 HTML Validation 61 XHTML 26 Chapter Summary 64 HTML5 27 Key Terms 64 2.2 Document Type Definition 27 Review Questions 65 2.3 Web Page Template 28 Apply Your Knowledge 66 Hands-On Exercises 67 HTML Element 28 2.4 Web Research 68 2.5 Head, Title, Meta, and Body Focus on Web Design 68 Elements 28 Website Case Study 68 The Head Section 28 The Body Section 29 2.6 Your First Web Page 29 2.7 Heading Element 33 CHAPTER 3 Accessibility and Headings 35 Configuring Color and Text 2.8 Paragraph Element 35 with CSS 83 Alignment 36 3.1 Overview of Cascading Style 2.9 Line Break Element 37 Sheets 84 2.10 Blockquote Element 38 Advantages of Cascading Style Sheets 84 Configuring Cascading Style Sheets 85 2.11 Phrase Elements 39 CSS Selectors and Declarations 85 2.12 Ordered List 40 The background-color Property 85 The Type, Start, and Reversed The color Property 86 Attributes 41 Configure Background and Text Color 86 2.13 Unordered List 42 3.2 Using Color on Web Pages 87 2.14 Description List 44 Hexadecimal Color Values 88 Web-Safe Colors 88 Special Characters 46 2.15 CSS Color Syntax 88 Structural Elements 47 2.16 3.3 Inline CSS with the Style Attribute 89 Div Element 48 The Style Attribute 89 Header Element 48 Nav Element 48 3.4 Embedded CSS with the Style Main Element 48 Element 91 Footer Element 48 Style Element 91 Section Element 51 3.5 Configuring Text with CSS 94 Article Element 51 The font-family Property 94 Aside Element 52 More CSS Text Properties 96 Time Element 52 3.6 CSS Class, Id, and Descendant 2.17 Hyperlinks 53 Selectors 102 The A Element 53 The Class Selector 102 The Href Attribute 53 The Id Selector 103 Absolute Hyperlinks 54 The Descendant Selector 104

A01_FELK9996_10_SE_FM.indd 13 18/09/19 5:26 PM xiv Contents

3.7 Span Element 106 4.6 More About Images 164 3.8 Using External Style Sheets 107 Image Maps 164 Link Element 107 The Favorites Icon 166 Configuring a Favorites Icon 167 Center HTML Elements with CSS 112 3.9 CSS Sprites 168 3.10 The “Cascade” 114 4.7 Sources and Guidelines for Graphics 168 3.11 CSS Validation 117 Sources of Graphics 168 Guidelines for Using Images 169 Chapter Summary 119 Accessibility and Visual Elements 170 Key Terms 119 Review Questions 119 4.8 CSS Visual Effects 171 Apply Your Knowledge 120 CSS Rounded Corners 171 Hands-On Exercises 122 The box-shadow Property 173 Web Research 124 The opacity Property 177 Focus on Web Design 124 CSS RGBA Color 178 Website Case Study 125 CSS HSLA Color 180 CSS Gradients 183

Chapter Summary 185 CHAPTER 4 Key Terms 185 Visual Elements and Graphics 137 Review Questions 185 Apply Your Knowledge 187 4.1 Configuring Lines and Borders 138 Hands-On Exercises 188 Horizontal Rule Element 138 Web Research 189 The border and padding Properties 138 Focus on Web Design 190 4.2 Graphics on the Web 144 Website Case Study 190 Graphic Interchange Format (GIF) 144 Joint Photographic Experts Group (JPEG) 145 Portable Network Graphic (PNG) 146 CHAPTER 5 WebP Image Format 146 Popular Graphics Applicaitions 147 Web Design 205 4.3 Img Element 147 5.1 Design for Your Target Audience 206 Accessibility and Images 148 5.2 Website Organization 207 Image Hyperlinks 149 Hierarchical Organization 207 Accessibility and Image Hyperlinks 151 Linear Organization 208 4.4 More Visual Elements 152 Random Organization 208 Figure and Figcaption Elements 153 5.3 Principles of Visual Design 209 Meter Element 155 Repetition: Repeat Visual Components Progress Element 155 Throughout the Design 209 4.5 Background Images 155 Contrast: Add Visual Excitement and Draw Attention 209 The background-image Property 156 Proximity: Group Related Items 210 Browser Display of a Background Image 156 Alignment: Align Elements to Create Visual The background-repeat Property 157 Unity 210 The background-position Property 159 Design to Provide Accessibility 210 The background-attachment Property 159 5.4 Who Benefits from Universal Design The background-clip Property 160 and Increased Accessibility? 211 The background-origin Property 160 Accessible Design Can Benefit Search Engine The background-size Property 161 Listing 211 Multiple Background Images 162 Accessibility is the Right Thing to Do 211

A01_FELK9996_10_SE_FM.indd 14 18/09/19 5:26 PM Contents xv

5.5 Writing for the Web 212 Optimize Text for Mobile Use 232 Organize Your Content 212 Mobile Design Quick Checklist 232 Choosing a Font 213 5.12 Responsive Web Design 233 Font Size 213 5.13 Web Design Best Practices Font Weight 213 Checklist 234 Font Color Contrast 213 Line Length 214 Chapter Summary 237 Alignment 214 Key Terms 237 Text in Hyperlinks 214 Review Questions 237 Reading Level 214 Hands-On Exercises 238 Spelling and Grammar 214 Web Research 241 Focus on Web Design 241 Use of Color 214 5.6 Website Case Study 242 Color Scheme Based on an Image 214 Color Wheel 215 Color Scheme Based on the Color Wheel 216 Implementing a Color Scheme 217 CHAPTER Accessibility and Color 217 6 Colors and Your Target Audience 218 Page Layout 245 5.7 Use of Graphics and Multimedia 220 6.1 Width and Height with CSS 246 File Size and Image Dimensions Matter 220 The width Property 246 Antialiased/Aliased Text in Media 220 The min-width Property 246 Use Only Necessary Multimedia 220 The max-width Property 247 Provide Alternate Text 221 The height Property 247 5.8 More Design Considerations 221 6.2 The Box Model 248 Mobile Devices 221 Content 248 Browsers 222 Padding 248 Screen Resolution 222 Border 248 White Space 222 Margin 248 Flat Web Design 222 The Box Model in Action 249 Single Page Website 223 6.3 Normal Flow 250 5.9 Navigation Design 223 6.4 CSS Float 252 Ease of Navigation 223 CSS Clearing a Float 254 Navigation Bars 224 6.5 The clear Property 254 Breadcrumb Navigation 224 The overflow Property 255 Using Graphics for Navigation 224 Skip Repetitive Navigation 225 6.6 CSS Box Sizing 257 Dynamic Navigation 225 6.7 CSS Two-Column Layout 258 Site Map 226 Your First Two-Column Layout 258 Site Search Feature 226 Two-Column Layout Example 261 5.10 Page Layout Design 226 6.8 Hyperlinks in an Unordered List 262 Wireframes and Page Layout 226 Configure List Markers with CSS 262 Page Layout Design Techniques 228 Vertical Navigation with an Unordered List 263 5.11 Design for the Mobile Web 230 The display Property 264 Mobile Web Design Considerations 231 Horizontal Navigation with an Unordered List 264 Optimize Layout for Mobile use 231 6.9 CSS Interactivity with Pseudo-Classes 265 Optimize Navigation for Mobile Use 231 CSS Button 267 Optimize Graphics for Mobile Use 232 6.10 CSS Sprites 271

A01_FELK9996_10_SE_FM.indd 15 18/09/19 5:26 PM xvi Contents

6.11 CSS for Printing 273 7.5 Grid Columns, Rows, and Gap 324 Print Styling Best Practices 273 Grid Gap 324 The order Property 325 6.12 Positioning with CSS 275 Static Positioning 275 7.6 Two-Column Grid Page Layout 326 Fixed Positioning 275 Configure Grid Columns and Rows 327 Relative Positioning 275 Configure Grid Items 327 Sticky Positioning 276 Grid Line Numbers 327 Absolute Positioning 277 7.7 Layout with Grid Areas 329 Practice with Positioning 277 The grid-area Property 329 6.13 Fixed Position Navigation Bar 279 The grid-template-areas The z-index Property 279 Property 330 The grid-template Property 332 6.14 Single Page Website 282 Fragment Identifiers 282 7.8 Progressive Enhancement Parallax Scrolling 285 with Grid 333 CSS Feature Query 333 Chapter Summary 288 Key Terms 288 7.9 Centering with Flexbox and Grid 336 Review Questions 288 7.10 Viewport Meta Tag 338 Apply Your Knowledge 289 7.11 CSS Media Queries 340 Hands-On Exercises 292 What’s a Media Query? 340 Web Research 293 Media Query Example Using a Focus on Web Design 293 Link Element 340 Website Case Study 293 Media Query Example Using an @media Rule 341 Mobile First 342 CHAPTER 7 7.12 Responsive Layout with Media Responsive Page Layout 311 Queries 342 7.1 CSS Flexible Box Layout 312 7.13 Responsive Grid Layout with Media Configure a Flexible Container 312 Queries 347 The display Property 312 7.14 Responsive Images 352 The flex-wrap Property 313 Flexible Images with CSS 352 The flex-direction Property 313 Picture Element 354 7.2 More About Flex Containers 314 Responsive Img Element Attributes 356 Flow Direction 314 7.15 Testing Mobile Display 358 The justify-content Property 314 Testing with a Desktop Browser 358 The align-items Property 315 Browser Viewport Size 358 The flex-flow Property 315 Responsive Testing Tools 359 Flexbox Image Gallery 316 For Serious Developers Only 359 7.3 Configure Flex Items 318 Proportional Flexible Item 319 Chapter Summary 360 The order Property 319 Key Terms 360 Practice With Flexbox 320 Review Questions 360 7.4 CSS Grid Layout 322 Apply Your Knowledge 361 Configure a Grid Container 322 Hands-On Exercises 365 The display Property 322 Web Research 365 Designing a Grid 322 Focus on Web Design 366 Configure Grid Columns and Grid Rows 323 Website Case Study 366

A01_FELK9996_10_SE_FM.indd 16 18/09/19 5:26 PM Contents xvii

9.4 Select List 425 CHAPTER 8 Select Element 426 Option Element 426 Tables 385 9.5 Image Buttons and the Button 8.1 Table Overview 386 Element 428 Table Element 386 Image Button 428 The Border Attribute 387 Button Element 428 Table Captions 387 9.6 Accessibility and Forms 429 8.2 Table Rows, Cells, and Headers 388 Label Element 429 Table Row Element 388 Fieldset and Legend Elements 430 Table Data Element 388 The Tabindex Attribute 433 Table Header Element 388 The Accesskey Attribute 433 8.3 Span Rows and Columns 390 9.7 Style a Form with CSS 434 The Colspan Attribute 390 Form with CSS Float 434 The Rowspan Attribute 390 Form with CSS Grid Layout 436 8.4 Configure an Accessible Table 392 9.8 Server-Side Processing 438 8.5 Style a Table with CSS 394 Privacy and Forms 440 Server-Side Processing CSS Structural Pseudo-Classes 396 8.6 Resources 441 8.7 Configure Table Sections 398 9.9 HTML5 Form Controls 442 Chapter Summary 401 E-mail Address Input 442 Key Terms 401 URL Input 442 Review Questions 401 Telephone Number Input 443 Apply Your Knowledge 402 Search Field Input 443 Hands-On Exercises 404 Datalist Form Control 443 Web Research 405 Slider Form Control 445 Focus on Web Design 405 Spinner Form Control 446 Website Case Study 405 Date and Time Form Control 446 Color-well Form Control 448 Progressive Enhancement 450 CHAPTER 9 Chapter Summary 451 Forms 413 Key Terms 451 Review Questions 451 9.1 Overview of Forms 414 Apply Your Knowledge 452 Form Element 414 Hands-On Exercises 454 Form Controls 415 Web Research 455 9.2 Input Element Form Controls 415 Focus on Web Design 456 Text Box 416 Website Case Study 457 Submit Button 417 Reset Button 417 Check Box 419 CHAPTER Radio Button 420 10 Hidden Input Control 421 Web Development 469 File Upload Control 422 10.1 Successful Large-Scale Project Password Box 422 Development 470 9.3 Scrolling Text Box 423 Project Job Roles 470 Textarea Element 423 Project Staffing Criteria 471

A01_FELK9996_10_SE_FM.indd 17 18/09/19 5:26 PM xviii Contents

10.2 The Development Process 471 Rotate Transform 505 Conceptualization 473 Scale Transform 505 Analysis 474 The transition Property 506 Design 474 CSS Animations 511 Production 476 Define an Animation with @keyframes Rule 511 Testing 476 Apply the Animation 511 Launch 479 Maintenance 480 11.6 Details and Summary Elements 514 Evaluation 480 Details Element 514 Summary Element 515 10.3 File Organization 480 Details & Summary Widget 515 Relative HyperLink Examples 480 11.7 JavaScript 516 10.4 Domain Name Overview 482 JavaScript Resources 517 Choosing a Domain Name 482 Registering a Domain Name 484 11.8 Ajax 518 Ajax Resources 518 10.5 Web Hosting 484 Web Hosting Providers 484 11.9 jQuery 519 jQuery Resources 519 10.6 Choosing a Virtual Host 485 11.10 HTML5 APIs 520 Chapter Summary 488 Geolocation 520 Key Terms 488 Web Storage 520 Review Questions 488 Progressive Web Application 520 Hands-On Exercises 489 Drawing with the Canvas Element 521 Web Research 491 Multimedia, Animation, and Interactivity Focus on Web Design 492 11.11 Accessibility Issues 524 Website Case Study 492 Chapter Summary 525 Key Terms 525 Review Questions 525 CHAPTER 11 Apply Your Knowledge 527 Web Multimedia and Hands-On Exercises 528 Web Research 528 Interactivity 493 Focus on Web Design 529 11.1 Containers and Codecs 494 Website Case Study 529 11.2 Getting Started with Audio and Video 495 Provide a Hyperlink 495 Working with Multimedia on the Web 496 CHAPTER 11.3 Audio and Video Elements 497 12 Audio Element 497 E-Commerce Overview 537 Source Element 498 12.1 What Is E-Commerce? 538 Audio on a Web Page 498 Advantages of E-Commerce 538 Video Element 499 Risks of E-Commerce 539 Source Element 500 Video on a Web Page 500 12.2 E-Commerce Business Models 540 11.4 Multimedia Files and Copyright Law 502 12.3 Electronic Data Interchange (EDI) 540 11.5 CSS and Interactivity 502 CSS Drop Down Menu 502 12.4 E-Commerce Statistics 540 The transform Property 504 12.5 E-Commerce Issues 541

A01_FELK9996_10_SE_FM.indd 18 18/09/19 5:26 PM Contents xix

12.6 E-Commerce Security 543 13.6 Monitoring Search Listings 572 Encryption 543 13.7 Link Popularity 574 Integrity 544 Social Media Optimization 574 Secure Sockets Layer (SSL) 544 13.8 Blogs 574 Digital Certificate 545 Social Networking 574 SSL and Digital Certificates 546 12.7 Order and Payment Processing 547 13.9 Other Site Promotion Activities 575 Quick Response (QR) Codes 575 Credit Card 547 Affiliate Programs 575 Stored-value Card 547 Banner Ads 576 Digital Wallet 547 Banner Exchange 576 Digital Cash 548 Reciprocal Link Agreements 576 12.8 E-Commerce Technology Solutions 548 Newsletters 576 Instant Online Storefront 548 Sticky Site Features 577 Shopping Cart Software 549 Personal Recommendations 577 E-Commerce Platform 549 Website Forum Postings 577 Chapter Summary 550 Traditional Media Ads and Existing Marketing Materials 577 Key Terms 550 Review Questions 550 13.10 Serving Dynamic Content with Inline Hands-On Exercises 551 Frames 578 Web Research 552 Iframe Element 578 Focus on Web Design 553 Video in an Inline Frame 580 Website Case Study 553 Chapter Summary 581 Key Terms 581 Review Questions 581 CHAPTER 13 Hands-On Exercises 582 Web Promotion 565 Web Research 583 Focus on Web Design 583 13.1 Search Engine Overview 566 Website Case Study 584 13.2 Popular Search Engines 566 13.3 Components of a Search Engine 566 Robot 566 CHAPTER 14 Database 567 A Brief Look at JavaScript and Search Form 567 jQuery 587 13.4 Search Engine Optimization 567 Keywords 568 14.1 Overview of JavaScript 588 Page Titles 568 14.2 The Development of JavaScript 588 Heading Tags 568 14.3 Popular Uses for JavaScript 589 Description 568 Alert Message 589 Description Meta Tag 568 Popup Windows 589 Linking 569 Jump Menus 590 Images and Multimedia 569 Mouse Movement Techniques 590 Valid Code 569 Adding JavaScript to a Web Page 591 Content of Value 569 14.4 Script Element 591 HTTPS Protocol 569 Alert Message Box 592 13.5 Submitting Your Website to a Search Engine 570 14.5 Document Object Model Overview 594 Map Your Site 571 14.6 Events and Event Handlers 597

A01_FELK9996_10_SE_FM.indd 19 18/09/19 5:26 PM xx Contents

14.7 Variables 600 14.17 jQuery Plugins 628 Writing a Variable to a Web Page 600 14.18 jQuery Resources 632 Collecting Variable Values Using a Prompt 602 Chapter Summary 633 14.8 Introduction to Programming Key Terms 633 Concepts 604 Review Questions 633 Arithmetic Operators 604 Apply Your Knowledge 635 Decision Making 604 Hands-On Exercises 636 Functions 607 Web Research 637 The addEventListener Method 610 Website Case Study 637 14.9 Form Handling 612 14.10 Accessibility and JavaScript 617 Web Developer’s Handbook 645 Appendix A HTML5 Quick Reference 647 14.11 JavaScript Resources 618 Appendix B Special Entity Characters 651 14.12 Overview of jQuery 618 Appendix C CSS Property Reference 653 14.13 Adding jQuery to a Web Page 618 Download jQuery 618 Appendix D WCAG 2.1 Quick Reference 659 Access jQuery via a Content Delivery Network 619 Appendix E Landmark Roles with ARIA 663 The Ready Event 619 Appendix F FTP Tutorial 665 14.14 jQuery Selectors 621 Appendix G Web-Safe Color Palette 669 14.15 jQuery Methods 621 Answers 671 14.16 jQuery Image Gallery 624 Index 691

VideoNotes are available at www.pearson.com/felke-morris LOCATION OF VIDEONOTES IN THE TEXT A series of videos have been developed as a companion for this textbook.VideoNote VideoNote icons indicate the availability of a video on a specific topic. Chapter 1 Evolution of the Web, p. 2 Chapter 2 Your First Web Page, p. 29 HTML Validation, p. 61 Chapter 3 External Style Sheets, p. 107 CSS Validation, p. 117 Chapter 4 CSS Background Images, p. 156 Rounded Corners with CSS, p. 171 Chapter 5 Principles of Visual Design, p. 209 Chapter 6 Interactivity with CSS pseudo-classes, p. 265 Linking to a Named Fragment, p. 282 Chapter 7 CSS Grid Layout, p. 326 Chapter 8 Configure a Table, p. 386 Chapter 9 Connect a Form to Server-Side Processing, p. 438 Chapter 10 Choosing a Domain Name, p. 482 Chapter 11 HTML5 Video, p. 501 Chapter 12 E-Commerce Benefits and Risks, p. 538 Chapter 13 Configure an Inline Frame, p. 580 Chapter 14 JavaScript Message Box, p. 592

A01_FELK9996_10_SE_FM.indd 20 18/09/19 5:26 PM