6t h Edit ion Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D Professor Harper College Boston Columbus Indianapolis New York San Francisco Upper Saddle River Amsterdam Cape Town Dubai London Madrid Milan Munich Paris Montreal Toronto Delhi Mexico City São Paulo Sydney Hong Kong Seoul Singapore Taipei Tokyo Edit orial Direct or, ECS: Marcia Horton Manager, Visual Research: Karen Sanatar Edit or-in-Chief: Michael Hirsch Image Permission Coordinat or: Cathy Mazzucca Acquisit ions Edit or: Matt Goldstein Manager, Right s and Permissions: Michael Joyce Edit orial Assist ant s: Chelsea Kharakozova and Permissions Coordinat or: Shannon Foreman, Emma Snider Electronic Publishing Services, Inc Direct or of Market ing: Patrice Jones Cover Art : © Dmitry Nikolajchuk/Shutterstock Market ing Manager: Yezan Alayan Images LLC Market ing Coordinat or: Kathryn Ferranti Media Edit or: Daniel Sandin Direct or of Product ion: Vince O’Brien Media Project Manager: John Cassar Managing Edit or: Jeff Holcomb Full-Service Project Management : Dennis Free, Manufact uring Buyer: Lisa McDowell Aptara, Inc Art Direct or: Anthony Gemmellaro Composit ion and Art : Aptara, Inc Cover Designer: Joyce Cosentino Wells Print er/Binder: Courier/Kendallville Text Designer: Susan Raymond Cover Print er: Lehigh-Phoenix Color/Hagerstown Credits and acknowledgments borrowed from other sources and reproduced, with permission, in this textbook appear on the Credits page in the end matter The author has created a variety of fi ctitious names, company names, e-mail addresses, URLs, phone numbers, fax numbers, and other similar items for the purposes of illustrating the concepts and techniques described within this textbook Any resemblance of these fi ctitious items to any person, company/ organization, or location is unintentional and purely coincidental Microsoft® and Windows® are registered trademarks of the Microsoft Corporation in the U.S.A and other countries Screen shots and icons reprinted with permission from the Microsoft Corporation This book is not sponsored or endorsed by or affi liated with the Microsoft Corporation Copyright © 2013, 2011, 2007, 2004 Pearson Education, Inc., publishing as Addison-Wesley All rights reserved Printed in the United States of America This publication is protected by Copyright, and permission should be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise To obtain permission(s) to use material from this work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to 201-236-3290 Many of the designations by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed in initial caps or all caps Library of Congress Cat aloging-in-Publicat ion Dat a Morris, Terry (Terry A.) Web development and design foundations with HTML5 / Terry Ann Felke-Morris.—6th ed p cm ISBN-13: 978-0-13-278339-2 ISBN-10: 0-13-278339-8 XHTML (Document markup language) Web site development—Computer programs Web sites—Design I Title QA76.76.H94M655 2011 006.7'4 —dc23 2011047581 10 1—CK—16 15 14 13 12 11 ISBN 10: 0-13-278339-8 ISBN 13: 978-0-13-278339-2 Preface Web Development and Design Foundations with HTML5 is intended for use in a beginning web development course The text covers the basics that web developers need to build a foundation of skills: ● Internet concepts ● Creating web pages with HTML5 ● Configuring text, color, and page layout with Cascading Style Sheets (CSS) ● Web design best practices ● Accessibility standards ● The web development process ● Using media and interactivity on web pages ● New CSS3 properties ● Website promotion and search engine optimization ● E-commerce and the Web ● JavaScript A special feature of this text is the Web Developer’s Handbook , which is a collection of appendixes that provide resources such as an HTML5 Reference, XHTML Reference, Special Entity Character List, CSS Property Reference, WCAG 2.0 Quick Reference, and FTP Tutorial New to This Edition Building on this textbook’s successful fifth edition, the sixth edition features a major update from XHTML to the introduction of HTML5 and CSS3 This textbook continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout, with an enhanced focus on the topics of design, accessibility, and Web standards This textbook has a modern approach that prepares students to design web pages that iii iv Preface work today, in addition to being ready to take advantage of the new HTML5 coding techniques of the future XHTML syntax is introduced, but the focus is on HTML5 syntax New HTML5 elements are presented, with an emphasis on coding web pages that work in both current and future browsers New features for the sixth edition include the following: ● New sections introducing HTML5 elements and attributes ● New sections introducing CSS3 properties ● Updated code samples, case studies, and web resources ● Updated accessibility coverage for Web Content Accessibility Guidelines (WCAG) 2.0 ● Expanded coverage of designing for mobile devices ● Color figures throughout ● Updated reference section for XHTML, HTML5, and CSS ● New FTP Tutorial in the appendix ● New VideoNotes A series of videos have been developed as a companion for this textbook Student files are available for download from the companion website for this textbook at http://www.pearsonhighered.com/felke-morris These files include solutions to the Hands-On Practice exercises, the Website Case Study starter files, and access to the book’s companion VideoNotes See the access card in the front of this textbook for further instructions Design for Today and Tomorrow This textbook has a modern approach that prepares students to design web pages that work today, in addition to being ready to take advantage of the new HTML5 coding techniques of the future XHTML syntax is introduced, but the focus is on HTML5 syntax New HTML5 elements are presented, with an emphasis on coding web pages that work in both current and future browsers Organization of the Text This textbook is designed to be used in a flexible manner; it can easily be adapted to suit a variety of course and student needs Chapter provides introductory material, which may be skipped or covered, depending on the background of the students Chapters through introduce HTML and CSS coding Chapter discusses web design best practices and can be covered anytime after Chapter (or even along with Chapter ) Chapters through continue with HTML and CSS Any of the following chapters may be skipped or assigned as independent study, depending on time constraints and student needs: Chapter (More on Links, Layout, and Mobile), Chapter 10 (Web Development), Chapter 11 (Web Multimedia and Interactivity), Chapter 12 (E-Commerce Overview), Chapter 13 (Web Promotion), and Chapter 14 (A Brief Look at JavaScript) A chapter dependency chart is shown in Figure P.1 Preface v Figure P.1 This textbook is fl exible and can be adapted to individual needs Brief Overview of Each Chapter Chapter : Introduction to the Internet and World Wide Web This brief introduction covers the terms and concepts related to the Internet and the Web with which Web developers need to be familiar For many students, some of this will be a review Chapter provides the base of knowledge on which the rest of the textbook is built Chapter : HTML Basics As HTML5 and XHTML are introduced, examples and exercises encourage students to create sample pages and gain useful experience Solution pages for the Hands-On Practice are available in the student fi les Chapter : Configuring Color and Text with CSS The technique of using Cascading Style Sheets to confi gure the color and text on web pages is introduced Students are encouraged to create sample pages as they read through the text Solutions for the Hands-On Practice are available in the student fi les Chapter : Visual Elements and Graphics This chapter discusses the use of graphics and visual eff ects on web pages, including image optimization, CSS borders, CSS image backgrounds, new CSS3 visual eff ects, and new HTML5 elements Students are encouraged to create web pages as they read through the text Sample solutions for the Hands-On Practice are available in the student fi les Chapter : Web Design This chapter focuses on recommended web design practices and accessibility Some of this is reinforcement because tips about recommended website design practices are incorporated into the other chapters vi Preface Chapter : Page Layout This chapter continues the study of CSS begun earlier and introduces techniques for positioning and fl oating web page elements, including a two-column CSS page layout New HTML5 semantic elements are also introduced Sample solutions for the Hands-On Practice are available in the student fi les Chapter : More on Links, Layout, and Mobile This chapter revisits earlier topics and introduces more advanced techniques related to hyperlinks, using CSS sprites, a three-column page layout, confi guring CSS for print, and designing pages for the mobile web Students are encouraged to create pages as they read through the text Sample solutions for the Hands-On Practice are available in the student fi les Chapter : Tables This chapter focuses on the HTML elements used to create tables Methods for confi guring a table with CSS are introduced Students are encouraged to create pages as they read through the text Sample solutions for the Hands-On Practice are available in the student fi les Chapter : Forms This chapter focuses on the HTML elements used to create forms Methods for confi guring the form with CSS are introduced New HTML5 form control elements and attribute values are introduced Students are encouraged to create sample pages as they read through the text Sample solutions for the Hands-On Practice are available in the student fi les Chapter 10 : Web Development This chapter focuses on the process of website development, including the job roles needed for a large-scale project, the web development process, and web hosting A web host checklist is included in this chapter Chapter 11 : Web Multimedia and Interactivity This chapter off ers an overview of topics related to adding media and interactivity to web pages These topics include new HTML5 video and audio, Flash ® , Java™ applets, a CSS Image Gallery, new CSS3 transform and transition properties, JavaScript, and AJAX Students are encouraged to create pages as the topics are discussed Sample solutions for the Hands-On Practice are available in the student fi les Chapter 12 : E-Commerce Overview This chapter introduces e-commerce, security, and order processing on the Web Chapter 13 : Web Promotion This chapter discusses site promotion from the web developer’s point of view and introduces search engine optimization Chapter 14 : A Brief Look at JavaScript This chapter provides an introduction to client-side scripting using JavaScript Sample solutions for the Hands-On Practice are available in the student fi les Web Developer’s Handbook Appendixes: This handbook contains appendixes that include resources and tutorials that are useful for students, such as an HTML5 Quick Reference, an XHTML Quick Reference, Special Entity Characters, a CSS Property Reference, a WCAG 2.0 Quick Reference, a Web-Safe Color Palette, and an FTP Tutorial Preface vii Features of the Text Well-Rounded Selection of Topics This text includes both “hard” skills such as HTML5, CSS, and JavaScript ( Chapters , , , , , , , and 14 ) and “soft” skills such as web design ( Chapter ), website promotion ( Chapter 13 ), and e-commerce ( Chapter 12 ) This well-rounded foundation will help students as they pursue careers as web professionals Students and instructors will fi nd classes more interesting because they can discuss, integrate, and apply both hard and soft skills as students create web pages and websites Hands-On Practice Web development is a skill and skills are best learned by hands-on practice This text emphasizes hands-on practice through exercises within the chapters, end-of-chapter exercises, and the development of websites through ongoing real-world case studies The variety of exercises provides instructors with a choice of assignments for a particular course or semester Website Case Studies There are four case studies that continue throughout most of the text (starting with Chapter ) An additional case study starts in Chapter The case studies serve to reinforce the skills discussed in each chapter Instructors can cycle assignments from semester to semester or allow students to choose the case study that most interests them Sample solutions to the case studies are available for download from the Instructor Resource Center at http://www.pearsonhighered.com/irc Web Research Each chapter off ers web research activities that encourage students to further study the topics introduced in the chapter Focus on Web Design Most chapters off er additional activities that explore the web design topics related to the chapter These activities can be used to reinforce, extend, and enhance the course topics FAQs In the author’s web development courses, she is frequently asked similar questions by students They are included in this textbook and are marked with the identifying FAQ logo Checkpoints Each chapter contains two or three Checkpoints, which are groups of questions to be used by students to self-assess their understanding of the material A special Checkpoint icon appears with each group of questions Focus on Accessibility Developing accessible websites is more important than ever and this textbook is infused with accessibility techniques throughout The special icon shown here makes accessibility information easy to fi nd Focus on Accessibility Focus on Ethics Ethics issues related to web development are highlighted throughout the textbook and are marked with the special ethics icon shown here Focus on Reference Materials Ethics The appendixes in the Web Developer’s Handbook off er reference materials, including an HTML5 Quick Reference, an XHTML Quick Reference, Special Entity Characters, a CSS Property Reference, a WCAG 2.0 Quick Reference, a Web-Safe Color Palette, and an FTP Tutorial viii Preface VideoNotes VideoNotes are Pearson’s new visual tool designed for teaching students key programming concepts and techniques These short step-by-step videos demonstrate how to VideoNot e solve problems from design through coding VideoNotes allow for self-placed instruction with easy navigation including the ability to select, play, rewind, fast-forward, and stop within each VideoNote exercise Margin icons in your textbook let you know when a VideoNote video is available for a particular concept or homework problem Supplemental Materials Student Resources The student fi les for the web page exercises, Website Case Study assignments, and access to the book’s VideoNotes are available to all readers of this textbook at its companion website http://www.pearsonhighered.com/felke-morris A complimentary access code for the companion website is available with a new copy of this textbook Subscriptions may also be purchased online Instructor Resources The following supplements are available to qualifi ed instructors only Visit the Pearson Instructor Resource Center ( http://www.pearsonhighered.com/irc ) or send an e-mail to computing@aw.com for information on how to access them: ● Solutions to the end-of-chapter exercises ● Solutions for the case study assignments ● Test questions ● PowerPoint ® presentations ● Sample syllabi Author’s Website In addition to the publisher’s companion website for this textbook, the author maintains a website at http://www.webdevfoundations.net This website contains additional resources, including review activities and a page for each chapter with examples, links, and updates This website is not supported by the publisher Acknowledgments Very special thanks go to all the folks at Pearson, especially Michael Hirsch, Matt Goldstein, Chelsea Kharakozova, Emma Snider, and Jeff Holcomb Thank you to the following people who provided comments and suggestions that were useful for this sixth edition: James Bell— Central Virginia Community College Carolyn Z Gillay— Saddleback College Jason Hebert— Pearl River Community College Jean Kent— Seattle Community College Bob McPherson— Surry Community College Teresa Nickerson— University of Dubuque Anita Philipp— Oklahoma City Community College Preface ix Thank you to those who provided reviews and comments for previous editions: Carolyn Andres— Richland College James Bell— Central Virginia Community College Ross Beveridge— Colorado State University Karmen Blake— Spokane Community College Jim Buchan— College of the Ozarks Dan Dao— Richland College Joyce M Dick— Northeast Iowa Community College Elizabeth Drake— Santa Fe Community College Mark DuBois— Illinois Central College Genny Espinoza— Richland College Sharon Gray— Augustana College Lisa Hopkins— Tulsa Community College Barbara James— Richland Community College Nilofar Kadivi— Richland Community College Jean Kent— Seattle Community College Karen Kowal Wiggins— Wisconsin Indianhead Technical College Manasseh Lee— Richland Community College Nancy Lee— College of Southern Nevada Kyle Loewenhagen— Chippewa Valley Technical College Michael J Losacco— College of DuPage Les Lusk— Seminole Community College Mary A McKenzie— Central New Mexico Community College Cindy Mortensen— Truckee Meadows Community College John Nadzam— Community College of Allegheny County Brita E Penttila— Wake Technical Community College Anita Philipp— Oklahoma City Community College Jerry Ross— Lane Community College Noah Singer— Tulsa Community College Alan Strozer— Canyons College Lo-An Tabar-Gaul— Mesa Community College Tebring Wrigley— Community College of Allegheny County Michelle Youngblood-Petty— Richland College A special thank you also goes to Jean Kent, North Seattle Community College, and Teresa Nickerson, University of Dubuque, for taking time to provide additional feedback and sharing student comments about the book Thanks are in order to colleagues at William Rainey Harper College for their support and encouragement, especially Ken Perkins, Sarah Stark, Enrique D’Amico, and Dave Braunschweig Most of all, I would like to thank my family for their patience and encouragement My listing in search engine, 524 – 526 phases, 414 listservs and, 532 – 533 production and, 418 marketing materials and, 533 project job roles and, 412 – 413 monitoring search listings, 526 – 528 project staffi ng criteria, 413 newsgroups and, 532 – 533 testing and, 418 – 421 newsletters and, 531 – 532 web hosting and, 424 – 425 personal recommendations and, 532 Web hosting, 424 – 425 popular search engines, 520 checklist, 426 quick response codes and, 529 – 530 co-located hosting, 425 reciprocal link agreements and, 531 dedicated hosting, 424 search engine components, 520 – 521 operating systems and, 425 search engine optimization, 522 – 524 providers, 424 – 425 search engine overview, 520 virtual hosting, 424 – 425 social media optimization and, 528 – 529 Web host server, 14 social networking and, 529 Web information, – sticky site features and, 532 ethical use of, – traditional media ads and, 533 information recency and, Web-safe color palette, 605 links to additional resources and, Web-safe colors, 82 organization credibility and, Website logs, 526 – 527 reliability of, – Website organization, 195 – 196 WebKit, 163 , 166 , 174 hierarchical organization, 195 – 196 Web 2.0 LogoCreator, 157 linear organization, 196 Web 2.0 movement, 471 random organization, 196 Web multimedia and interactivity site map and, 195 – 196 accessibility and, 446 , 474 Web standards and accessibility, – Adobe Flash, 446 – 452 accessibility and the law, Ajax, 470 – 471 universal design and, audio on web page, 440 – 443 , 445 W3C recommendations and, browser compatibility issues and, 446 Weight, font, 200 common audio fi le types, 437 Well-formed document, 25 common video fi le types, 437 White House website, 296 – 297 CSS3 and interactivity, 458 – 465 White space, web design and, 209 – 210 HTML5 audio and video elements, 452 – 457 Wide area network (WAN), HTML5 canvas element, 472 – 473 width property, 222 Java, 465 – 468 Wikipedia, JavaScript, 469 – 470 Wikis, 18 multimedia fi les and copyright law, 457 – 458 Window-Eyes, 38 , 451 plug-ins, containers, and codecs, 436 – 437 Window object, 550 providing hyperlink and, 438 Windows Media Player, 436 video on web page, 443 – 445 World Intellectual Property Organization (WIPO), XHTML object and param elements, WorldLingo, 493 439 – 446 World Wide Web Web Page Analyzer, 419 birth of, Web pages blogs and, 18 adding JavaScript to, 547 – 550 e-commerce and, 17 after embedded styles are confi gured, 87 mobile access and, 17 using color on, 82 – 83 podcasts and, 19 Index 645 RSS and, 19 social networking and, 18 X xml:lang attribute, 27 Web , 19 wikis and, 18 World Wide Web Consortium (W3C), – Wrappers, 237 Y Young adults, color use and, 202 Writing for web, 199 – 201 YouTube, 529 , 535 – 536 common fonts and, 200 content organization and, 200 font color contrast and, 200 font size and weight and, 200 Z Zebra striping, 341 reading level and, 200 Zeldman, Jeff rey, 237 spelling and grammar and, 201 ZenCart, 499 text in hyperlinks and, 200 This page intentionally left blank Credits All photographs except those noted below © Terry Ann Morris “Checkpoint” icon (green check mark), “Web Site Case Study” icon (blue “WWW”), “FAQ” icon (orange caption bubble), “Focus on Accessibility” icon (orange key) © Fotolia LLC “Hands-On Practice” icon (green hand); empty green, yellow, purple, red, and blue icons © Piotr M./Fotolia LLC “Focus on Ethics” icon (black scales) © so47/Fotolia LLC Empty gray icon © Faysal Farhan/Fotolia LLC Figure 1.1 © 2001–2011, Miniwatts Marketing Group All rights reserved worldwide Figure 1.2 © National Center for Supercomputing Applications Figures 1.3, 2.22, 2.23, 2.24, 3.24, 3.25, 3.26, 10.6 © W3C (World Wide Web Consortium) Figure 1.4 © Maridav/Shutterstock Images LLC Figure 1.6 © Gliff y, Inc All Rights Reserved (http://www.gliff y.com) Figures 1.7, 9.23 (computer tower) © Viktor Gmyria/Shutterstock Images LLC Figures 1.7, 9.23 (fl at-screen monitor, keyboard, mouse) © Lightvision, LLC/Shutterstock Images LLC Figures 2.17, 2.22, 2.23, 2.24, 4.4, 4.10 (screen captures depicting author’s own material within Microsoft Internet Explorer) © Microsoft Corporation MICROSOFT AND/OR ITS RESPECTIVE SUPPLIERS MAKE INFORMATION NO REPRESENTATIONS ABOUT THE SUITABILITY OF THE CONTAINED IN THE DOCUMENTS AND RELATED GRAPHICS PUBLISHED AS PART OF THE SERVICES FOR ANY PURPOSE ALL SUCH DOCUMENTS AND RELATED GRAPHICS ARE PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND MICROSOFT AND/OR ITS RESPECTIVE SUPPLIERS HEREBY DISCLAIM ALL WARRANTIES AND CONDITIONS WITH REGARD TO THIS INFORMATION, INCLUDING ALL WARRANTIES AND CONDITIONS OF MERCHANTABILITY, WHETHER EXPRESS, IMPLIED OR STATUTORY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT IN NO EVENT SHALL MICROSOFT AND/OR ITS RESPECTIVE SUPPLIERS BE LIABLE FOR ANY SPECIAL, INDIRECT OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF INFORMATION AVAILABLE FROM THE SERVICES 647 648 Credit s THE DOCUMENTS AND RELATED GRAPHICS CONTAINED HEREIN COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS CHANGES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN MICROSOFT AND/OR ITS RESPECTIVE SUPPLIERS MAY MAKE IMPROVEMENTS AND/OR CHANGES IN THE PRODUCT(S) AND/OR THE PROGRAM(S) DESCRIBED HEREIN AT ANY TIME PARTIAL SCREEN SHOTS MAY BE VIEWED IN FULL WITHIN THE SOFTWARE VERSION SPECIFIED Figures 4.14, 9.25, 9.33, 9.34, 9.35, 9.37, 9.44, 9.47, 11.13 © Opera Software A/S Figure 5.9 © Dmitriy Shironosov/Shutterstock Images LLC The Web Design Best Practices Checklist (Table 5.1) © Terry Ann Morris (http://www.terrymorris.net) Figure 10.5 (fl at-screen monitor, keyboard, mouse) © jossnat/Shutterstock Images LLC Figure 10.5 (laptop) © portfolio/Shutterstock Images LLC Figure 10.5 (mobile device) © valkos/Shutterstock Images LLC Page 199, Web Content Accessibility Guidelines 2.0 (WCAG 2.0) recommended by the W3C’s Web Accessibility Initiative (WAI) © W3C (World Wide Web Consortium) Table 12.1 © Pew Internet & American Life Project Appendix E, “WCAG 2.0 Quick Reference” © W3C (World Wide Web Consortium) Document Outline Cover Title Page Copyright Page Preface Acknowledgments About the Author Contents CHAPTER Introduction to the Internet and World Wide Web 1.1 The Internet and the Web The Internet Birth of the Internet Growth of the Internet Birth of the Web The First Graphical Browser Convergence of Technologies Who Runs the Internet? Intranets and Extranets 1.2 Web Standards and Accessibility W3C Recommendations Web Standards and Accessibility Accessibility and the Law Universal Design for the Web 1.3 Information on the Web Reliability and Information on the Web Ethical Use of Information on the Web 1.4 Network Overview 1.5 The Client/Server Model 1.6 Internet Protocols File Transfer Protocol (FTP) E-mail Protocols Hypertext Transfer Protocol (HTTP) Transmission Control Protocol/Internet Protocol (TCP/IP) 1.7 Uniform Resource Identifiers and Domain Names URIs and URLs Domain Names 1.8 Markup Languages Standard Generalized Markup Language (SGML) Hypertext Markup Language (HTML) Extensible Markup Language (XML) Extensible Hypertext Markup Language (XHTML) HTML5—the Newest Version of HTML 1.9 Popular Uses of the Web E-Commerce Mobile Access Blogs Wikis Social Networking RSS Podcasts Web 2.0 Chapter Summary Key Terms Review Questions Hands-On Exercise Web Research Focus on Web Design CHAPTER HTML Basics 2.1 HTML Overview HTML XHTML HTML5 2.2 Document Type Definition 2.3 Example XHTML Web Page 2.4 Example HTML5 Web Page 2.5 Head, Title, Meta, and Body Elements The Head Section The Body Section 2.6 Your First Web Page 2.7 Heading Element Accessibility and Headings More Heading Options in HTML5 2.8 Paragraph Element Alignment 2.9 Line Break Element 2.10 Blockquote Element 2.11 Phrase Elements 2.12 Unordered List The Type Attribute HTML5 and Unordered Lists 2.13 Ordered List The Type Attribute The Type Attribute HTML5 and Ordered Lists 2.14 Description List 2.15 Special Characters 2.16 Div Element 2.17 Anchor Element Absolute Hyperlinks Relative Hyperlinks E-Mail Hyperlinks Accessibility and Hyperlinks Block Anchor 2.18 HTML Validation Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER Configuring Color and Text with CSS 3.1 Overview of Cascading Style Sheets Advantages of Cascading Style Sheets Configuring Cascading Style Sheets CSS Selectors and Declarations The background-color Property The color Property Configure Background and Text Color 3.2 Using Color on Web Pages Hexadecimal Color Values Web-Safe Colors CSS Color Syntax 3.3 Inline CSS with the Style Attribute The Style Attribute 3.4 Embedded CSS with the Style Element Style Element 3.5 Configuring Text with CSS The font-family Property More CSS Font Properties 3.6 CSS Class, id, and Contextual Selectors The Class Selector The id Selector The Contextual Selector 3.7 Span Element 3.8 Using External Style Sheets Link Element 3.9 Center HTML Elements with CSS 3.10 The “Cascade” 3.11 CSS Validation Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER Visual Elements and Graphics 4.1 Configuring Lines and Borders The Horizontal Rule Element The border and padding Properties 4.2 Types of Graphics Graphic Interchange Format (GIF) Images Joint Photographic Experts Group (JPEG) Images Portable Network Graphic (PNG) Images New WebP Image Format 4.3 Image Element Accessibility and Images Image Hyperlinks Optimize an Image for the Web 4.4 HTML5 Visual Elements HTML5 Figure Element HTML5 Figcaption Element HTML5 Meter Element HTML5 Progress Element 4.5 Background Images The background-image Property Browser Display of a Background Image The background-repeat Property The background-position Property The background-attachment Property 4.6 More About Images Image Maps The Favorites Icon Image Slicing CSS Sprites 4.7 Sources and Guidelines for Graphics Sources of Graphics Guidelines for Using Images Accessibility and Visual Elements 4.8 CSS3 Visual Effects The CSS3 background-clip Property The CSS3 background-origin Property The CSS3 background-size Property CSS3 Multiple Background Images CSS3 Rounded Corners The CSS3 box-shadow Property The CSS3 text-shadow Property The CSS3 opacity Property CSS3 RGBA Color CSS3 Gradients Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER Web Design 5.1 Design for Your Target Audience 5.2 Website Organization Hierarchical Organization Linear Organization Random Organization 5.3 Principles of Visual Design Repetition: Repeat Visual Elements Throughout the Design Contrast: Add Visual Excitement and Draw Attention Proximity: Group Related Items Alignment: Align Elements to Create Visual Unity 5.4 Design to Provide Accessibility Who Benefits from Universal Design and Increased Accessibility? Accessible Design Can Benefit Search Engine Listing Accessibility Is the Right Thing to Do 5.5 Writing for the Web Organize Your Content Text in Hyperlinks Reading Level Use Common Fonts Font Size and Weight Font Color Contrast Spelling and Grammar 5.6 Use of Color Choosing Colors Accessibility and Color Colors and Your Target Audience 5.7 Use of Graphics and Multimedia File Size and Image Dimensions Matter Antialiased/Aliased Text in Media Use Only Necessary Multimedia Provide Alternate Text 5.8 Navigation Design Ease of Navigation Navigation Bars Breadcrumb Navigation Using Graphics for Navigation Skip Repetitive Navigation Dynamic Navigation Site Map Site Search Feature 5.9 Page Layout Design Wireframes and Page Layout Page Layout Design Techniques Design for the Mobile Web 5.10 More Design Considerations Load Time Above the Fold White Space Avoid Horizontal Scrolling Browsers Screen Resolution 5.11 Web Design Best Practices Checklist Chapter Summary Key Terms Review Questions Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER Page Layout 6.1 The Box Model Content Padding Border Margin The Box Model in Action 6.2 Normal Flow A Look Ahead: CSS Layout Properties 6.3 CSS Positioning Relative Positioning Absolute Positioning 6.4 CSS Float 6.5 CSS: Clearing a Float The clear Property The overflow Property 6.6 CSS Two-Column Page Layout Two Columns with Left Navigation Two Columns with Top Header and Left Navigation 6.7 Hyperlinks in an Unordered List Configure List Markers with CSS Vertical Navigation with an Unordered List Horizontal Navigation with an Unordered List 6.8 CSS Interactivity with Pseudo- Classes 6.9 Practice with CSS Two-Column Layout 6.10 CSS Resources CSS Debugging Techniques CSS Web Resources 6.11 HTML5 Structural Elements Header Element Hgroup Element Nav Element Footer Element Section Element Article Element Aside Element Time Element HTML5 and Today’s Browsers Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER More on Links, Layout, and Mobile 7.1 Another Look at Hyperlinks More on Relative Linking Fragment Identifiers The Target Attribute Block Anchor Telephone and Text Message Hyperlinks 7.2 CSS Sprites 7.3 Three-Column CSS Page Layout 7.4 CSS Styling for Print Print Styling Best Practices 7.5 CSS Styling for the Mobile Web Mobile Web Design Best Practices Viewport Meta Tag CSS Media Queries Testing Mobile Display More on Media Queries Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER Tables 8.1 Table Overview Table Element Table Captions 8.2 Table Rows, Cells, and Headers Table Row Element Table Data Element Table Header Element 8.3 Span Rows and Columns The colspan Attribute The rowspan Attribute 8.4 Configure an Accessible Table 8.5 Style a Table with CSS 8.6 CSS3 Structural Pseudo-Classes 8.7 Configure Table Sections Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER Forms 9.1 Overview of Forms Form Element Form Controls 9.2 Input Element Form Controls Text Box Submit Button Reset Button Check Box Radio Button Hidden Input Control Password Box 9.3 Scrolling Text Box Textarea Element 9.4 Select List Select Element Option Element 9.5 Image Buttons and the Button Element Image Button Button Element 9.6 Accessibility and Forms Label Element Fieldset and Legend Elements The tabindex Attribute The accesskey Attribute 9.7 Styling a Form Table Structure Transitional Approach Style a Form with CSS 9.8 Server-Side Processing Privacy and Forms Server-Side Processing Resources 9.9 HTML5 Form Controls E-mail Address Input URL Input Telephone Number Input Search Field Input Datalist Form Control Slider Form Control Spinner Form Control Calendar Form Control Color-well Form Control HTML5 and Progressive Enhancement Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER 10 Web Development 10.1 Successful Large-Scale Project Development Project Job Roles Project Staffing Criteria 10.2 The Development Process Conceptualization Analysis Design Production Testing Launch Maintenance Evaluation 10.3 Domain Name Overview Choosing a Domain Name Registering a Domain Name 10.4 Web Hosting Web Host Providers 10.5 Choosing a Virtual Host Chapter Summary Key Terms Review Questions Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER 11 Web Multimedia and Interactivity 11.1 Plug-ins, Containers, and Codecs 11.2 Getting Started with Audio and Video Provide a Hyperlink 11.3 XHTML Object and Param Elements Object Element Param Element Audio on a Web Page Video on a Web Page Working with Multimedia on the Web 11.4 Adobe Flash Flash Animation on a Web Page HTML5 Embed Element Flash Resources 11.5 HTML5 Audio and Video Elements Audio Element Source Element HTML5 Audio on a Web Page Video Element Source Element HTML5 Video on a Web Page 11.6 Multimedia Files and Copyright Law 11.7 CSS3 and Interactivity CSS Image Gallery CSS3 Transform Property CSS3 Transition Property 11.8 Java Adding a Java Applet to a Web Page Java Applet Resources 11.9 JavaScript JavaScript Resources 11.10 Ajax Ajax Resources 11.11 HTML5 Canvas Element 11.12 Accessibility and Multimedia/Interactivity Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER 12 E-Commerce Overview 12.1 What Is E-Commerce? Advantages of E-Commerce Risks of E-Commerce 12.2 E-Commerce Business Models 12.3 Electronic Data Interchange (EDI) 12.4 E-Commerce Statistics 12.5 E-Commerce Issues 12.6 E-Commerce Security Encryption Integrity Secure Sockets Layer (SSL) Digital Certificate SSL and Digital Certificates 12.7 Order and Payment Processing Cash Model Check Model Credit Model Smart Card Model Mobile Payment Model 12.8 E-Commerce Storefront Solutions Instant Online Storefront Off-the-Shelf Shopping Cart Software Custom-Built Solutions Semi-Custom-Built Solutions on a Budget Chapter Summary Key Terms Review Questions Hands-On Exercise Web Research Focus on Web Design Website Case Study CHAPTER 13 Web Promotion 13.1 Search Engine Overview 13.2 Popular Search Engines 13.3 Components of a Search Engine Robot Database Search Form 13.4 Search Engine Optimization Keywords Page Titles Heading Tags Description Description Meta Tag Linking Images and Multimedia Valid Code Content of Value 13.5 Listing in a Search Engine Map Your Site Alliances 13.6 Monitoring Search Listings 13.7 Link Popularity 13.8 Social Media Optimization Blogs and RSS Feeds Social Networking 13.9 Other Site Promotion Activities Quick Response (QR) Codes Affiliate Programs Banner Ads Banner Exchange Reciprocal Link Agreements Newsletters Sticky Site Features Personal Recommendations Newsgroup and Listserv Postings Traditional Media Ads and Existing Marketing Materials 13.10 Serving Dynamic Content with Inline Frames The iframe Element YouTube Video in an Inline Frame Chapter Summary Key Terms Review Questions Hands-On Exercises Web Research Focus on Web Design Website Case Study CHAPTER 14 A Brief Look at JavaScript 14.1 Overview of JavaScript 14.2 The Development of JavaScript 14.3 Popular Uses for JavaScript Alert Message Popup Windows Jump Menus Mouse Movement Techniques 14.4 Adding JavaScript to a Web Page Script Element JavaScript Statement Block Template Alert Message Box 14.5 Document Object Model Overview 14.6 Events and Event Handlers 14.7 Variables Writing a Variable to a Web Page Collecting Variable Values Using a Prompt 14.8 Introduction to Programming Concepts Arithmetic Operators Decision Making Functions 14.9 Form Handling 14.10 Accessibility and JavaScript 14.11 JavaScript Resources Chapter Summary Key Terms Review Questions Apply Your Knowledge Hands-On Exercises Web Research Website Case Study Appendix A: HTML5 Quick Reference Appendix B: XHTML Quick Reference Appendix C: Special Entity Characters Appendix D: CSS Property Reference Appendix E: WCAG 2.0 Quick Reference Appendix F: Web-Safe Color Palette Appendix G: FTP Tutorial Answers Index A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Credits Table of Contents 1.7 Uniform Resource Identifiers and CHAPTER Domain Names 14 1.8 Markup Languages 16 1.1 The Internet and the Web Birth of the Web Intranets and Extranets HTML5—the Newest Version of W3C Recommendations Universal Design for the Web Blogs 18 RSS 19 Ethical Use of Information on the Web 1.4 Network Overview 1.6 Internet Protocols 11 Chapter Summary 20 Hands-On Exercise 21 Transmission Control Protocol/Internet Protocol Web Research 22 Web Research 61 CHAPTER Website Case Study 62 2.1 HTML Overview 24 CHAPTER HTML5 25 2.2 Document Type Definition 26 3.1 Overview of Cascading Style Sheets 78 2.4 Example HTML5 Web Page 27 Configuring Cascading Style Sheets 79 2.5 Head, Title, Meta, and Body The background-color Property 80 2.6 Your First Web Page 29 3.2 Using Color on Web Pages 82 2.7 Heading Element 32 Accessibility and Headings 33 CSS Color Syntax 83 Alignment 35 3.4 Embedded CSS with the Style 2.10 Blockquote Element 37 2.11 Phrase Elements 38 3.5 Configuring Text with CSS 88 2.12 Unordered List 39 The Type Attribute 40 More CSS Font Properties 90 3.6 CSS Class, id, and Contextual 2.13 Ordered List 41 HTML5 and Ordered Lists 42 2.14 Description List 43 The Contextual Selector 96 2.15 Special Characters 45 ... 10 : Web Development This chapter focuses on the process of website development, including the job roles needed for a large-scale project, the web development process, and web hosting A web host... 475 Web Research 431 Apply Your Knowledge 476 Focus on Web Design 432 Hands-On Exercises 478 Website Case Study 432 Web Research 478 Focus on Web Design 479 Website Case Study 480 CHAPTER 11 Web. .. 453 Development 412 HTML5 Audio on a Web Page 453 Project Job Roles 412 Video Element 455 Project Staffing Criteria 413 Source Element 455 10.2 The Development Process 413 HTML5 Video on a Web