Web development and design foundations with HTML5

Front Cover......Page 1
Preface......Page 4
Contents......Page 11
Chapter 1: Introduction to the Internet and World Wide Web......Page 20
  The First Graphical Browser......Page 21
  Who Runs the Internet?......Page 22
  W3C Recommendations......Page 23
  Universal Design for the Web......Page 24
  Reliability and Information on the Web......Page 25
  Ethical Use of Information on the Web......Page 26
 1.4: Network Overview......Page 27
 1.5: The Client/Server Model......Page 28
  File Transfer Protocol (FTP)......Page 29
  Transmission Control Protocol/Internet Protocol (TCP/IP)......Page 30
  Domain Names......Page 32
  Extensible Markup Language (XML)......Page 35
  E-Commerce......Page 36
  Social Networking......Page 37
  Web 2.0......Page 38
  Review Questions......Page 40
  Hands-On Exercise......Page 41
  Web Research......Page 42
  Focus on Web Design......Page 43
Chapter 2: HTML Basics......Page 44
  XHTML......Page 45
 2.2: Document Type Definition......Page 46
  The Head Section......Page 47
 2.6: Your First Web Page......Page 48
 2.7: Heading Element......Page 52
 2.8: Paragraph Element......Page 54
  Alignment......Page 55
 2.9: Line Break Element......Page 56
 2.10: Blockquote Element......Page 57
 2.11: Phrase Elements......Page 58
 2.12: Ordered List......Page 59
  The Type, Start, and Reversed Attributes......Page 60
 2.13: Unordered List......Page 61
 2.14: Description List......Page 63
 2.15: Special Characters......Page 65
  The Div Element......Page 66
  The Footer Element......Page 67
  Practice with Structural Elements......Page 69
 2.17: Anchor Element......Page 70
  Site Map......Page 72
  E-Mail Hyperlinks......Page 76
  Accessibility and Hyperlinks......Page 77
 2.18: HTML Validation......Page 78
  Key Terms......Page 81
  Review Questions......Page 82
  Apply Your Knowledge......Page 83
  Hands-On Exercises......Page 84
  Website Case Study......Page 85
Chapter 3: Configuring Color and Text with CSS......Page 100
  Advantages of Cascading Style Sheets......Page 101
  The background-color Property......Page 102
  Configure Background and Text Color......Page 103
 3.2: Using Color on Web Pages......Page 104
  CSS Color Syntax......Page 105
  The Style Attribute......Page 106
  Style Element......Page 108
  The font-family Property......Page 111
  More CSS Text Properties......Page 113
  CSS3 text-shadow Property......Page 116
  The Class Selector......Page 119
  The Id Selector......Page 120
  The Descendant Selector......Page 121
 3.7: Span Element......Page 123
  Link Element......Page 124
 3.9: Center HTML Elements with CSS......Page 129
 3.10: The “Cascade”......Page 131
 3.11: CSS Validation......Page 134
  Review Questions......Page 136
  Apply Your Knowledge......Page 137
  Hands-On Exercises......Page 139
  Focus on Web Design......Page 141
  Website Case Study......Page 142
Chapter 4: Visual Elements and Graphics......Page 154
  The border and padding Properties......Page 155
  Graphic Interchange Format (GIF) Images......Page 161
  Joint Photographic Experts Group (JPEG) Images......Page 162
  New WebP Image Format......Page 163
 4.3: Image Element......Page 164
  Accessibility and Images......Page 165
  Image Hyperlinks......Page 166
  Accessibility and Image Hyperlinks......Page 168
 4.4: HTML5 Visual Elements......Page 169
  HTML5 Figure and Figcaption Elements......Page 170
  HTML5 Progress Element......Page 172
  Browser Display of a Background Image......Page 173
  The background-repeat Property......Page 174
  The background-position Property......Page 176
  Image Maps......Page 177
  Configuring a Favorites Icon......Page 179
  Sources of Graphics......Page 181
  Guidelines for Using Images......Page 182
  Accessibility and Visual Elements......Page 183
  The CSS3 background-clip Property......Page 184
  The CSS3 background-size Property......Page 185
  CSS3 Multiple Background Images......Page 187
  CSS3 Rounded Corners......Page 189
  The CSS3 box-shadow Property......Page 191
  The CSS3 opacity Property......Page 195
  CSS3 RGBA Color......Page 197
  CSS3 HSLA Color......Page 199
  CSS3 Gradients......Page 202
  Review Questions......Page 204
  Apply Your Knowledge......Page 206
  Hands-On Exercises......Page 207
  Web Research......Page 208
  Website Case Study......Page 209
Chapter 5: Web Design......Page 224
 5.1: Design for Your Target Audience......Page 225
  Hierarchical Organization......Page 226
  Random Organization......Page 227
  Contrast: Add Visual Excitement and Draw Attention......Page 228
 5.4: Design to Provide Accessibility......Page 229
  Accessibility is the Right Thing to Do......Page 230
  Organize Your Content......Page 231
  Font Color Contrast......Page 232
  Color Scheme Based on an Image......Page 233
  Shades, Tints, and Tones......Page 234
  Color Scheme Based on the Color Wheel......Page 235
  Accessibility and Color......Page 236
  Colors and Your Target Audience......Page 237
  Antialiased/Aliased Text in Media......Page 239
  Load Time......Page 240
  Above the Fold......Page 241
  Screen Resolution......Page 242
  Breadcrumb Navigation......Page 243
  Dynamic Navigation......Page 244
  Site Map......Page 245
  Wireframes and Page Layout......Page 246
  Page Layout Design Techniques......Page 247
  Mobile Device Design Considerations......Page 250
  Responsive Web Design......Page 251
 5.12: Web Design Best Practices Checklist......Page 253
  Review Questions......Page 257
  Hands-On Exercises......Page 258
  Focus on Web Design......Page 261
  Website Case Study......Page 262
Chapter 6: Page Layout......Page 266
  Margin......Page 267
  The Box Model in Action......Page 268
 6.2: Normal Flow......Page 269
 6.3: CSS Float......Page 271
  The clear Property......Page 273
  The overflow Property......Page 274
 6.5: CSS Box Sizing......Page 276
  Your First Two-Column Layout......Page 277
  Two-Column Layout Example......Page 280
  Configure List Markers with CSS......Page 281
  Vertical Navigation with an Unordered List......Page 282
  Horizontal Navigation with an Unordered List......Page 283
 6.8: CSS Interactivity with Pseudo-Classes......Page 284
  CSS Buttons......Page 286
 6.9: Practice with CSS Two-Column Layout......Page 287
 6.10: Header Text Image Replacement......Page 290
  Improved Header Text Image Replacement Technique......Page 291
 6.11: Practice with an Image Gallery......Page 292
  Relative Positioning......Page 295
  Absolute Positioning......Page 296
  Practice with Positioning......Page 297
  Configure Temporary Borders......Page 299
  Use Comments to Find the Unexpected Cascade......Page 300
  The Time Element......Page 301
 6.15: HTML5 Compatibility with Older Browsers......Page 303
  HTML5 Shim......Page 304
  Review Questions......Page 306
  Apply Your Knowledge......Page 307
  Hands-On Exercises......Page 310
  Website Case Study......Page 311
Chapter 7: More on Links, Layout, and Mobile......Page 326
  Relative Link Examples......Page 327
  Fragment Identifiers......Page 329
  The Target Attribute......Page 331
 7.2: CSS Sprites......Page 332
 7.3: Three-Column CSS Page Layout......Page 335
 7.4: CSS Styling for Print......Page 341
  Print Styling Best Practices......Page 342
 7.5: Designing for the Mobile Web......Page 346
  Mobile Web Design Best Practices......Page 347
 7.6: Viewport Meta Tag......Page 349
  What’s a Media Query?......Page 350
  Media Query Example Using an @media Rule......Page 351
  Flexible Images with CSS......Page 355
  HTML5.1 Picture Element......Page 357
  HTML5.1 Responsive Img Element Attributes......Page 359
  Explore Responsive Images......Page 360
  Testing with a Desktop Browser......Page 361
  Mobile First......Page 362
  Configure a Flexible Container......Page 363
  Configure the Flex Items......Page 364
  Review Questions......Page 369
  Apply Your Knowledge......Page 370
  Hands-On Exercises......Page 373
  Focus on Web Design......Page 374
  Website Case Study......Page 375
Chapter 8: Tables......Page 390
  Table Element......Page 391
  Table Captions......Page 392
  Table Header Element......Page 393
  The rowspan Attribute......Page 395
 8.4: Configure an Accessible Table......Page 397
 8.5: Style a Table with CSS......Page 399
 8.6: CSS3 Structural Pseudo-Classes......Page 401
 8.7: Configure Table Sections......Page 403
  Review Questions......Page 406
  Apply Your Knowledge......Page 407
  Hands-On Exercises......Page 409
  Website Case Study......Page 410
Chapter 9: Forms......Page 418
  Form Element......Page 419
 9.2: Input Element Form Controls......Page 420
  Text Box......Page 421
  Reset Button......Page 422
  Check Box......Page 424
  Radio Button......Page 425
  Hidden Input Control......Page 426
  Textarea Element......Page 427
  Select Element......Page 430
  Option Element......Page 431
  Button Element......Page 432
  Label Element......Page 433
  Fieldset and Legend Elements......Page 435
  The accesskey Attribute......Page 437
 9.7: Style a Form with CSS......Page 438
 9.8: Server-Side Processing......Page 439
  Server-Side Processing Resources......Page 442
  E-mail Address Input......Page 443
  Telephone Number Input......Page 444
  Datalist Form Control......Page 445
  Slider Form Control......Page 446
  Spinner Form Control......Page 447
  Calendar Form Control......Page 448
  Color-well Form Control......Page 449
  HTML5 and Progressive Enhancement......Page 452
  Review Questions......Page 453
  Apply Your Knowledge......Page 454
  Hands-On Exercises......Page 456
  Web Research......Page 457
  Focus on Web Design......Page 458
  Website Case Study......Page 459
Chapter 10: Web Development......Page 470
  Project Job Roles......Page 471
 10.2: The Development Process......Page 472
  Conceptualization......Page 474
  Design......Page 475
  Testing......Page 477
  Launch......Page 480
  Choosing a Domain Name......Page 481
  Registering a Domain Name......Page 482
  Web Hosting Providers......Page 483
 10.5: Choosing a Virtual Host......Page 484
  Review Questions......Page 487
  Hands-On Exercises......Page 488
  Web Research......Page 490
  Website Case Study......Page 491
Chapter 11: Web Multimedia and Interactivity......Page 492
 11.1: Plug-Ins, Containers, and Codecs......Page 493
  Provide a Hyperlink......Page 495
  Working with Multimedia on the Web......Page 496
  HTML5 Embed Element......Page 498
  Flash Resources......Page 500
  Audio Element......Page 501
  HTML5 Audio on a Web Page......Page 502
  Video Element......Page 503
  HTML5 Video on a Web Page......Page 504
  CSS Drop Down Menu......Page 506
  CSS3 Transform Property......Page 508
  CSS3 Scale Transform......Page 509
  CSS Transition Property......Page 510
  Practice with Transitions......Page 512
 11.7: Java......Page 514
  Adding a Java Applet to a Web Page......Page 515
 11.8: JavaScript......Page 517
 11.9: Ajax......Page 519
 11.10: jQuery......Page 520
  Web Storage......Page 521
  Drawing with the Canvas Element......Page 522
 11.12: Accessibility and Multimedia/Interactivity......Page 524
  Review Questions......Page 526
  Apply Your Knowledge......Page 528
  Web Research......Page 529
  Focus on Web Design......Page 530
  Website Case Study......Page 531
Chapter 12: E-Commerce Overview......Page 536
  Advantages of E-Commerce......Page 537
  Risks of E-Commerce......Page 538
 12.4: E-Commerce Statistics......Page 539
 12.5: E-Commerce Issues......Page 540
  Encryption......Page 542
  Secure Sockets Layer (SSL)......Page 543
  Digital Certificate......Page 544
 12.7: Order and Payment Processing......Page 545
  Digital Cash......Page 546
  Custom-Built Solutions......Page 547
  Semi-Custom-Built Solutions on a Budget......Page 548
  Review Questions......Page 549
  Hands-On Exercises......Page 550
  Web Research......Page 551
  Website Case Study......Page 552
Chapter 13: Web Promotion......Page 566
  Robot......Page 567
 13.4: Search Engine Optimization......Page 568
  Description Meta Tag......Page 569
  Content of Value......Page 570
 13.5: Listing in a Search Engine......Page 571
  Map Your Site......Page 572
 13.6: Monitoring Search Listings......Page 573
 13.8: Social Media Optimization......Page 575
  Quick Response (QR) Codes......Page 576
  Banner Ads......Page 577
  Newsgroup and Listserv Postings......Page 578
 13.10: Serving Dynamic Content with Inline Frames......Page 579
  The Iframe Element......Page 580
  Video in an Inline Frame......Page 581
  Review Questions......Page 583
  Hands-On Exercises......Page 584
  Focus on Web Design......Page 585
  Website Case Study......Page 586
Chapter 14: A Brief Look at JavaScript and jQuery......Page 590
 14.2: The Development of JavaScript......Page 591
  Popup Windows......Page 592
  Mouse Movement Techniques......Page 593
  Legacy JavaScript Statement Block Template......Page 594
  Alert Message Box......Page 595
 14.5: Document Object Model Overview......Page 597
 14.6: Events and Event Handlers......Page 600
  Writing a Variable to a Web Page......Page 603
  Collecting Variable Values Using a Prompt......Page 605
  Decision Making......Page 607
  Functions......Page 610
 14.9: Form Handling......Page 613
 14.10: Accessibility and JavaScript......Page 619
  Download jQuery......Page 620
  The Ready Event......Page 621
 14.15: jQuery Methods......Page 623
 14.16: jQuery Image Gallery......Page 626
 14.17: jQuery Plugins......Page 630
 14.18: jQuery Resources......Page 634
  Review Questions......Page 635
  Apply Your Knowledge......Page 636
  Hands-On Exercises......Page 638
  Website Case Study......Page 639
 Appendixes......Page 652
  Appendix A: HTML5 Quick Reference......Page 654
  Appendix B: XHTML Quick Reference......Page 658
  Appendix C: Special Entity Characters......Page 662
  Appendix D: Comparison of XHTML and HTML5......Page 664
  Appendix E: CSS Property Reference......Page 672
  Appendix F: WCAG 2.0 Quick Reference......Page 678
  Appendix G: FTP Tutorial......Page 680
  Appendix H: Web-Safe Color Palette......Page 684
Answers......Page 686
Index......Page 706
Back Cover......Page 714