Transcription
9th EditionWeb Developmentand DesignFoundations withHTML5A01 FELK1148 09 SE FM.indd 11/8/18 12:24 PM
A01 FELK1148 09 SE FM.indd 21/8/18 12:24 PM
9th EditionWeb Developmentand DesignFoundations withHTML5Terry Ann Felke-Morris, Ed.D.Professor EmeritaHarper College330 Hudson Street, NY NY 10013A01 FELK1148 09 SE FM.indd 31/8/18 12:24 PM
Senior Vice President, Courseware Portfolio Management, Engineering and Computer Science:Marcia J. HortonDirector, Portfolio Management: Julian PartridgeExecutive Portfolio Manager: Matt GoldsteinPortfolio Management Assistant: Meghan JacobyField Marketing Manager: Demetrius HallProduct Marketing Manager: Yvonne VannattaMarketing Assistant: Jon BryantManaging Producer: Scott DisannoSenior Content Producer: Erin AultContent Producer: Lora FriedenthalManager, Rights and Permissions: Ben FerinniOperations Specialist: Maura Zaldivar-GarciaCover Designer: Joyce WellsCover Photo: FrankRamspott/Getty ImagesComposition/Full-Service Project Management:SPi GlobalFull-Service Project Management: Kabilan SelvakumarCover Printer: Lehigh-Phoenix Color/HagerstownPrinter/Binder: Lake Side Communications, Inc.Typeface: 10/12 Times Ten LT STD RomanCredits and acknowledgments borrowed from other sources and reproduced, with permission, in this textbookappear on appropriate page within text.Copyright 2019, 2017, 2015, 2014 by Pearson Higher Education, Inc., Hoboken, NJ 07030. All rightsreserved. Manufactured in the United States of America. This publication is protected by copyright andpermissions should be obtained from the publisher prior to any prohibited reproduction, storage in a retrievalsystem, or transmission in any form or by any means, electronic, mechanical, photocopying, recording,or likewise. For information regarding permissions, request forms and the appropriate contacts within thePearson Education Global Rights & Permissions department, please visit www.pearsoned.com/permissions/.Many of the designations by manufacturers and seller to distinguish their products are claimed as trademarks.Where those designations appear in this book, and the publisher was aware of a trademark claim, thedesignations have been printed in initial caps or all caps.Acknowledgements of third party content appear the same page as the content, which constitutes an extensionof this copyright page. All other photos and figures copyright Terry Felke-Morris.Icon credits: Focus on Accessibility, Checkpoint, and FAQ: FaysalFarhan/Shutterstock; Hands-on Practice:Alexwhite/123RF; Focus on Ethics: Alexwhite/Shutterstock; and Website Case Study: FaysalFarhan/123RF.Microsoft and Windows are registered trademarks of the Microsoft Corporation in the U.S.A. and othercountries. Screen shots and icons reprinted with permission from the Microsoft Corporation. This book is notsponsored or endorsed by or affiliated with the Microsoft Corporation.The author and publisher of this book have used their best efforts in preparing this book. These efforts includethe development, research, and testing of theories and programs to determine their effectiveness. The authorand publisher make no warranty of any kind, expressed or implied, with regard to these programs or thedocumentation contained in this book. The author and publisher shall not be liable in any event for incidentalor consequential damages with, or arising out of, the furnishing, performance, or use of these programs.Library of Congress Cataloging-in-Publication DataNames: Felke-Morris, Terry, author.Title: Web development and design foundations with HTML5 / Felke-Morris,Description: 9th edition. Pearson Higher Education, Inc.,[2019]Identifiers: LCCN 2017053503 ISBN 9780134801148 ISBN 0134801148Subjects: LCSH: XHTML (Document markup language) Web sitedevelopment—Computer programs. Web sites—Design.Classification: LCC QA76.76.H94 M655 2019 DDC 006.7/4—dc23 LC record available athttps://lccn.loc.gov/2017053503118ISBN 10: 0-13-480114-8ISBN 13: 978-0-13-480114-8A01 FELK1148 09 SE FM.indd 41/8/18 12:24 PM
PrefaceWeb Development and Design Foundations with HTML5 is intended for use in a beginning web development course. This textbook introduces HTML and CSS topics such astext configuration, color configuration, and page layout, with an enhanced focus on thetopics of design, accessibility, and Web standards. The text covers the basics that webdevelopers 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 JavaScriptA special feature of this text is the Web Developer’s Handbook, which is a collection ofappendixes that provide resources such as an HTML5 Reference, Comparison of XHTMLand HTML5, Special Entity Character List, CSS Property Reference, WCAG 2.0 QuickReference, FTP Tutorial, and web-safe color palette.New to This EditionBuilding on this textbook’s successful eighth edition, new features for the ninth editioninclude the following: Updated coverage of HTML5 elements and attributes Expanded coverage of designing for mobile devices Updates for HTML5.1 elements and attributes Expanded coverage of responsive web design techniques and CSS media queries Updated code samples, case studies, and web resources An introduction to CSS Grid Layout Updated reference sections for HTML5 and CSS Additional Hands-On Practice exercisesA01 FELK1148 09 SE FM.indd 51/8/18 12:24 PM
viPrefaceStudent files are available for download from the companion website for this textbook atwww.pearson.com/cs-resources. These files include solutions to the Hands-On Practiceexercises, the Website Case Study starter files, and access to the book’s companionVideoNotes. See the access card in the front of this textbook for further instructions.Design for Today and TomorrowThis textbook has a modern approach that prepares students to design web pages thatwork today, in addition to being ready to take advantage of the new HTML5 and CSScoding techniques of the future.Organization of the TextThis textbook is designed to be used in a flexible manner; it can easily be adapted to suita variety of course and student needs. Chapter 1 provides introductory material, whichmay be skipped or covered, depending on the background of the students. Chapters 2through 4 introduce HTML and CSS coding. Chapter 5 discusses web design bestpractices and can be covered anytime after Chapter 3 (or even along with Chapter 3).Chapters 6 through 9 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 7 (More on Links, Layout, andMobile), 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 and jQuery). A chapter dependency chart is shown in Figure P.1.Figure P.1 This textbook isflexible and can be adapted toindividual needsA01 FELK1148 09 SE FM.indd 61/8/18 12:24 PM
PrefaceviiBrief Overview of Each ChapterChapter 1: Introduction to the Internet and World Wide Web Thisbrief introduction covers the terms and concepts related to the Internet and the Webwith which Web developers need to be familiar. For many students, some of this will be areview. Chapter 1 provides the base of knowledge on which the rest of the textbook is built.Chapter 2: HTML Basics As HTML5 is introduced, examples and exercisesencourage students to create sample pages and gain useful experience. Solution pages forthe Hands-On Practice are available in the student files.Chapter 3: Configuring Color and Text with CSSThe technique of usingCascading Style Sheets to configure the color and text on web pages is introduced. Students are encouraged to create sample pages as they read through the text. Solutions forthe Hands-On Practice are available in the student files.Chapter 4: Visual Elements and GraphicsThis chapter discusses the use ofgraphics and visual effects on web pages, including image optimization, CSS borders, CSSimage backgrounds, new CSS3 visual effects, and new HTML5 elements. Students areencouraged to create web pages as they read through the text. Sample solutions for theHands-On Practice are available in the student files.Chapter 5: Web Design This chapter focuses on recommended web design practices and accessibility. Some of this is reinforcement because tips about recommendedwebsite design practices are incorporated into the other chapters.Chapter 6: Page Layout This chapter continues the study of CSS begun earlierand introduces techniques for positioning and floating web page elements, including atwo-column CSS page layout. New HTML5 semantic elements and techniques to provideHTML5 compatibility for older browsers are also introduced. Sample solutions for theHands-On Practice are available in the student files.Chapter 7: More on Links, Layout, and Mobile This chapter revisits earliertopics and introduces more advanced techniques related to hyperlinks, using CSS sprites,a three-column page layout, configuring CSS for print, designing pages for the mobileweb, responsive web design with CSS media queries, responsive images, the new FlexibleBox Layout Module, and the new CSS Grid Layout Module. Students are encouraged to create pages as they read through the text. Sample solutions for the Hands-On Practice are available in the student files.Chapter 8: TablesThis chapter focuses on the HTML elements used to createtables. Methods for configuring a table with CSS are introduced. Students are encouragedto create pages as they read through the text. Sample solutions for the Hands-On Practiceare available in the student files.Chapter 9: FormsThis chapter focuses on the HTML elements used to createforms. Methods for configuring the form with CSS are introduced. New HTML5 form control elements and attribute values are introduced. Students are encouraged to createsample pages as they read through the text. Sample solutions for the Hands-On Practiceare available in the student files.A01 FELK1148 09 SE FM.indd 71/8/18 12:24 PM
viiiPrefaceChapter 10: Web Development This chapter focuses on the process of websitedevelopment, 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 InteractivityThis chapter offers an overview of topics related to adding media and interactivity to web pages. These topics includeHTML5 video and audio, Flash , Java applets, CSS3 transform and transition properties,interactive CSS menu, interactive image gallery, JavaScript, jQuery, Ajax, and HTML5 APIs.Students are encouraged to create pages as the topics are discussed. Sample solutions forthe Hands-On Practice are available in the student files.Chapter 12: E-Commerce OverviewThis chapter introduces e-commerce,security, and order processing on the Web.Chapter 13: Web Promotion This chapter discusses site promotion from the webdeveloper’s point of view and introduces search engine optimization.Chapter 14: A Brief Look at JavaScript and jQuery This chapter providesan introduction to client-side scripting using JavaScript and jQuery. Sample solutions forthe Hands-On Practice are available in the student files.Web Developer’s Handbook Appendixes:This handbook contains appendixes that include resources and tutorials that are useful for students, such as an HTML5Quick Reference, Special Entity Characters, a Comparison of XHTML and HTML5, a CSS Property Reference, a WCAG 2.0 Quick Reference, an FTP Tutorial, and a web-safe colorpalette.Features of the TextWell-Rounded Selection of TopicsThis text includes both “hard” skills suchas HTML5, CSS, and JavaScript (Chapters 2, 3, 4, 6, 7, 8, 9, and 14) and “soft” skillssuch as web design (Chapter 5), website promotion (Chapter 13), and e-commerce( Chapter 12). This well-rounded foundation will help students as they pursue careers asweb professionals. Students and instructors will find classes more interesting because theycan discuss, integrate, and apply both hard and soft skills as students create web pagesand websites.Hands-On PracticeWeb development is a skill and skills are best learned by handson practice. This text emphasizes hands-on practice through exercises within the chapters,end-of-chapter exercises, and the development of websites through ongoing real-worldcase studies. The variety of exercises provides instructors with a choice of assignments fora particular course or semester.Website Case Studies There are four case studies that continue throughout mostof the text (starting with Chapter 2). An additional case study starts in Chapter 5. Thecase studies serve to reinforce the skills discussed in each chapter. Instructors can cycleassignments from semester to semester or allow students to choose the case study thatmost interests them. Sample solutions to the case studies are available for download fromthe Instructor Resource Center at www.pearson.com.A01 FELK1148 09 SE FM.indd 81/8/18 12:24 PM
PrefaceixWeb ResearchEach chapter offers web research activities that encourage students tofurther study the topics introduced in the chapter.Focus on Web DesignMost chapters offer additional activities that explore the webdesign topics related to the chapter. These activities can be used to reinforce, extend, andenhance the course topics.FAQs In the author’s web development courses, she is frequently asked similar questionsby students. They are included in this textbook and are marked with the identifying FAQ logo.CheckpointsEach chapter contains two or three Checkpoints, which are groups ofquestions 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 thanever and this textbook is infused with accessibility techniques throughout. The special iconshown here makes accessibility information easy to find.Focus onAccessibilityFocus on EthicsEthics issues related to web development are highlighted throughout the textbook and are marked with the special ethics icon shown here.Reference Materials The appendixes in the Web Developer’s Handbook offer reference materials, including an HTML5 Quick Reference, Special Entity Characters, Comparison of XHTML and HTML5, a CSS Property Reference, a WCAG 2.0 Quick Reference, anFTP Tutorial, an introduction to ARIA Landmark Roles, and a Web-Safe Color Palette.Focus onEthicsVideoNotesThese short step-by-step videos demonstrate how to solve problems fromdesign through coding. VideoNotes allow for self-placed instruction with easy navigationincluding the ability to select, play, rewind, fast-forward, and stop within each VideoNoteexercise.VideoNoteMargin icons in your textbook let you know when a VideoNote video is available for aparticular concept or homework problem.Supplemental MaterialsStudent ResourcesThe student files for the web page exercises, Website CaseStudy assignments, and access to the book’s VideoNotes are available to all readers ofthis textbook at its companion website www.pearson.com/cs-resources. A complimentaryaccess code for the companion website is available with a new copy of this textbook. Subscriptions may also be purchased online.Instructor ResourcesThe following supplements are available to qualified instructorsonly. Visit the Pearson Instructor Resource Center (www.pearson.com) for information onhow to access them: Solutions to the end-of-chapter exercises Solutions for the case study assignmentsA01 FELK1148 09 SE FM.indd 91/8/18 12:24 PM
xPreface Test questions PowerPoint presentations Sample syllabiAuthor’s WebsiteIn addition to the publisher’s companion website for this textbook,the author maintains a website at http://www.webdevfoundations.net. This website containsadditional resources, including review activities and a page for each chapter with examples, links, and updates. This website is not supported by the publisher.AcknowledgmentsVery special thanks go to all the folks at Pearson, especially Michael Hirsch,Matt Goldstein, Erin Ault, and Lora Friedenthal.Thank you to the following people who provided comments and suggestions that wereuseful for this ninth edition and previous editions:Carolyn Andres—Richland CollegeJames Bell—Central Virginia Community CollegeRoss Beveridge—Colorado State UniversityKarmen Blake—Spokane Community CollegeJim Buchan—College of the OzarksDan Dao—Richland CollegeJoyce M. Dick—Northeast Iowa Community CollegeElizabeth Drake—Santa Fe Community CollegeMark DuBois—Illinois Central CollegeGenny Espinoza—Richland CollegeCarolyn Z. Gillay—Saddleback CollegeSharon Gray—Augustana CollegeTom Gutnick—Northern Virginia Community CollegeJason Hebert—Pearl River Community CollegeSadie Hébert—Mississippi Gulf Coast CollegeLisa Hopkins—Tulsa Community CollegeBarbara James—Richland Community CollegeNilofar Kadivi—Richland Community CollegeJean Kent—Seattle Community CollegeMary Keramidas—Sante Fe CollegeKaren Kowal Wiggins—Wisconsin Indianhead Technical CollegeManasseh Lee—Richland Community CollegeNancy Lee—College of Southern NevadaKyle Loewenhagen—Chippewa Valley Technical CollegeMichael J. Losacco—College of DuPageLes Lusk—Seminole Community CollegeMary A. McKenzie—Central New Mexico Community CollegeBob McPherson—Surry Community CollegeCindy Mortensen—Truckee Meadows Community CollegeJohn Nadzam—Community College of Allegheny CountyTeresa Nickeson—University of DubuqueBrita E. Penttila—Wake Technical Community CollegeAnita Philipp—Oklahoma City Community CollegeA01 FELK1148 09 SE FM.indd 101/8/18 12:24 PM
PrefacexiJerry Ross—Lane Community CollegeNoah Singer—Tulsa Community CollegeAlan Strozer—Canyons CollegeLo-An Tabar-Gaul—Mesa Community CollegeJonathan S. Weissman—Finger Lakes Community CollegeTebring Wrigley—Community College of Allegheny CountyMichelle Youngblood-Petty—Richland CollegeA very special thank you also goes to Jean Kent, North Seattle Community College, andTeresa Nickeson, University of Dubuque, for taking time to provide additional feedbackand sharing student comments about the book.Thanks are in order to colleagues at William Rainey Harper College for their support andencouragement, especially Ken Perkins, Enrique D’Amico, and Dave Braunschweig.Most of all, I would like to thank my family for their patience and encouragement. Mywonderful husband, Greg Morris, has been a constant source of love, understanding,support, and encouragement. Thank you, Greg! A big shout-out to my children, James andKaren, who grew up thinking that everyone’s Mom had their own website. Thank you bothfor your understanding, patience, and timely suggestions! And, finally, a very specialdedication to the memory of my father who is greatly missed.About the AuthorTerry Ann Felke-Morris is a Professor Emerita of Computer Information Systems at WilliamRainey Harper College in Palatine, Illinois. She holds a Doctor of Education degree, aMaster of Science degree in information systems, and numerous certifications, includingAdobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster, MicrosoftCertified Professional, Master CIW Designer, and CIW Certified Instructor.Dr. Felke-Morris has been honored with Harper College’s Glenn A. Reich Memorial Awardfor Instructional Technology in recognition of her work in designing the college’s WebDevelopment program and courses. In 2006, she received the Blackboard GreenhouseExemplary Online Course Award for use of Internet technology in the academicenvironment. Dr. Felke-Morris received two international awards in 2008: the InstructionalTechnology Council’s Outstanding e-Learning Faculty Award for Excellence and theMERLOT Award for Exemplary Online Learning Resources—MERLOT Business Classics.With more than 25 years of information technology experience in business and industry,Dr. Felke-Morris published her first website in 1996 and has been working with the Webever since. A long-time promoter of Web standards, she was a member of the WebStandards Project Education Task Force. Dr. Felke-Morris is the author of the populartextbook Basics of Web Design: HTML5 & CSS3, currently in its fourth edition. She wasinstrumental in developing the Web Development certificate and degree programs atWilliam Rainey Harper College. For more information about Dr. Terry Ann Felke-Morris,visit http://terrymorris.net.A01 FELK1148 09 SE FM.indd 111/8/18 12:24 PM
ContentsCHAPTER11.7 Uniform Resource Identifiers and DomainNamesURIs and URLs 13Domain Names 13Introduction to the Internet andWorld Wide Web 11.1 The Internet and the Web 21.8 Markup Languages4W3C Recommendations 4Web Standards and Accessibility 5Accessibility and the Law 5Universal Design for the Web 51.3 Information on the Web6Reliability and Information on the Web 6Ethical Use of Information on the Web 71.4 Network Overview 81.5 The Client/Server Model1.6 Internet Protocols 1016Standard Generalized Markup Language(SGML) 16Hypertext Markup Language(HTML) 16Extensible Markup Language(XML) 16Extensible Hypertext Markup Language(XHTML) 17HTML5.1—the Newest Versionof HTML 17The Internet 2Birth of the Internet 2Growth of the Internet 2Birth of the Web 2The First Graphical Browser 2Convergence of Technologies 3Who Runs the Internet? 3Intranets and Extranets 41.2 Web Standards and Accessibility139File Transfer Protocol (FTP) 10E-mail Protocols 11Hypertext Transfer Protocol (HTTP) 11Transmission Control Protocol/Internet Protocol(TCP/IP) 111.9 Popular Uses of the Web17E-Commerce 17Mobile Access 18Blogs 18Wikis 18Social Networking 18Cloud Computing 19RSS 19Podcasts 19Web 2.0 19Chapter Summary21Key Terms 21Review Questions 21Hands-On Exercise 22Web Research 23Focus on Web Design 24xiiA01 FELK1148 09 SE FM.indd 121/8/18 12:24 PM
xiiiContentsCHAPTER2HTML Basics 252.1 HTML Overview2.18 HTML ValidationChapter Summary26HTML 26XML 26XHTML 26HTML5 272.2 Document Type Definition 272.3 Web Page Template 282.4 HTML Element 282.5 Head, Title, Meta, and BodyElements28The Head Section 29The Body Section 292.6 Your First Web Page2.7 Heading Element 3329Accessibility and Headings 352.8 Paragraph ElementAlignment35362.9 Line Break Element 372.10 Blockquote Element 382.11 Phrase Elements 392.12 Ordered List 40The Type, Start, and ReversedAttributes 412.13 Unordered List 422.14 Description List 442.15 Special Characters 462.16 Structural Elements 47Div Element 47HTML5 Structural Elements 48Header Element 48Nav Element 48Main Element 48Footer Element 48Practice with Structural Elements 502.17 Anchor Element51Absolute Hyperlinks 53Relative Hyperlinks 53Site Map 53E-Mail Hyperlinks 57Accessibility and Hyperlinks 58A01 FELK1148 09 SE FM.indd 135962Key Terms 62Review Questions 63Apply Your Knowledge 64Hands-On Exercises 65Web Research 66Focus on Web Design 66Website Case Study 66CHAPTER3Configuring Color and Textwith CSS 813.1 Overview of Cascading StyleSheets82Advantages of Cascading Style Sheets 82Configuring Cascading Style Sheets 83CSS Selectors and Declarations 83The background-color Property 83The color Property 84Configure Background and Text Color 843.2 Using Color on Web Pages85Hexadecimal Color Values 86Web-Safe Colors 86CSS Color Syntax 863.3 Inline CSS with the Style Attribute87The Style Attribute 873.4 Embedded CSS with the StyleElement89Style Element893.5 Configuring Text with CSS92The font-family Property 92More CSS Text Properties 94CSS3 text-shadow Property 973.6 CSS Class, Id, and DescendantSelectors100The Class Selector 100The Id Selector 101The Descendant Selector 1023.7 Span Element 1043.8 Using External Style Sheets105Link Element 1053.9 Center HTML Elements with CSS1101/8/18 12:24 PM
xivContents3.10 The “Cascade”3.11 CSS Validation4.8 CSS3 Visual Effects112The CSS3 background-clipProperty 165The CSS3 background-originProperty 166The CSS3 background-sizeProperty 166CSS3 Multiple Background Images 168CSS3 Rounded Corners 169The CSS3 box-shadow Property 171The CSS3 opacity Property 175CSS3 RGBA Color 176CSS3 HSLA Color 178CSS3 Gradients 181115Chapter Summary117Key Terms 117Review Questions 117Apply Your Knowledge 118Hands-On Exercises 120Web Research 122Focus on Web Design 122Website Case Study 123CHAPTER4Visual Elements and Graphics4.1 Configuring Lines and Borders135136Horizontal Rule Element 136The border and padding Properties 1364.2 Types of Graphics142Graphic Interchange Format (GIF) Images 142Joint Photographic Experts Group (JPEG)Images 143Portable Network Graphic (PNG) Images 144New WebP Image Format 1444.3 Image Element145154158Sources of Graphics 162Guidelines for Using Images 163Accessibility and Visual Elements 164A01 FELK1148 09 SE FM.indd 145204207Repetition: Repeat Visual ComponentsThroughout the Design 207Contrast: Add Visual Excitement and DrawAttention 207Proximity: Group Related Items 208Alignment: Align Elements to Create VisualUnity 2085.4 Design to Provide AccessibilityImage Maps 158The Favorites Icon 160Configuring a Favorites Icon 160Image Slicing 162CSS Sprites 1624.7 Sources and Guidelines for GraphicsCHAPTER5.3 Principles of Visual DesignThe background-image Property 154Browser Display of a Background Image 154The background-repeat Property 155The background-position Property 157The background-attachment Property 1584.6 More About Images183Key Terms 183Review Questions 183Apply Your Knowledge 185Hands-On Exercises 186Web Research 187Focus on Web Design 188Website Case Study 188Hierarchical Organization 205Linear Organization 206Random Organization 206150Figure and Figcaption Elements 151Meter Element 153Progress Element 1534.5 Background ImagesChapter SummaryWeb Design 2035.1 Design for Your Target Audience5.2 Website Organization 205Accessibility and Images 146Image Hyperlinks 147Accessibility and Image Hyperlinks 1494.4 HTML5 Visual Elements165162208Who Benefits from Universal Design andIncreased Accessibility? 209Accessible Design Can Benefit Search EngineListing 209Accessibility is the Right Thingto Do 2095.5 Writing for the Web210Organize Your Content 210Choosing a Font 2111/8/18 12:24 PM
xvContents5.12 Web Design Best PracticesFont Size 211Font Weight 211Font Color Contrast 211Line Length 212Alignment 212Text in Hyperlinks 212Reading Level 212Spelling and Grammar 2125.6 Use of ColorChecklistChapter SummaryColor Scheme Based on an Image 212Color Wheel 213Shades, Tints, Tones 213Color Scheme Based on theColor Wheel 214Implementing a Color Scheme 215Accessibility and Color 215Colors and Your Target Audience 2165.7 Use of Graphics and MultimediaCHAPTER218219Load Time 219Above the Fold 220White Space 220Avoid Horizontal Scrolling 221Browsers 221Screen Resolution 2216.2 Normal Flow 2486.3 CSS Float 2506.4 CSS: Clearing a Float252256Your First Two-Column Layout 256Two-Column Layout Example 259225Wireframes and Page Layout 225Page Layout Design Techniques 226229Three Approaches 229Mobile Device Design Considerations 229Example Desktop Website and MobileWebsite 230Mobile Design Quick Checklist 230Responsive Web Design 230A01 FELK1148 09 SE FM.indd 15246246246246Model in Action 2476.5 CSS Box Sizing 2556.6 CSS Two-Column Layout2215.11 Design for the Mobile WebContentPaddingBorderMarginThe BoxThe clear Property 252The overflow Property 253Ease of Navigation 221Navigation Bars 222Breadcrumb Navigation 222Using Graphics for Navigation 222Skip Repetitive Navigation 223Dynamic Navigation 223Site Map 224Site Search Feature 2255.10 Page Layout Design6Page Layout 2456.1 The Box Model 246File Size and Image DimensionsMatter 218Antialiased/Aliased Text in Media 218Use Only Necessary Multimedia 218Provide Alternate Text 2195.8 More Design Considerations236Key Terms 236Review Questions 236Hands-On Exercises 237Web Research 240Focus on Web Design 240Website Case Study 2412125.9 Navigation Design2326.7 Hyperlinks in an Unordered List260Configure List Markers with CSS 260Vertical Navigation with an Unordered List 261Horizontal Navigation with an Unordered List 2626.8 CSS Interactivity withPseudo-Classes263CSS Buttons 2656.9 Practice with CSS Two-ColumnLayout 2666.10 Header Text Image Replacement269Improved Header Text Image ReplacementTechnique 2706.11 Practice with an Image Gallery6.12 Positioning with CSS 274271Static Positioning 274Fixed Positioning 274Relative Positioning 2741/8/18 12:24 PM
xviContentsAbsolute Positioning 275Practice with Positioning 2766.13 CSS Debugging TechniquesMedia Query Example Using a Link Element 329Media Query Example Using an @mediaRule 330278Verify Correct HTML Syntax 278Verify Correct CSS Syntax 278Configure Temporary Background Colors 278Configure Temporary Borders 278Use Comments to Find the UnexpectedCascade 2796.14 More HTML5 Structural Elements280Section Element 280Article Element 280Aside Element 280Time Element 280282CHAPTERMore on Relative Linking 306Relative Link Examples 306Fragment Identifiers 308The Target Attribute 310Block Anchor 310Telephone and Text Message Hyperlinks 3107.2 CSS Sprites 3117.3 Three-Column CSS Page Layout7.4 CSS Styling for Print 320313Print Styling Best Practices 320325Mobile Web Design Best Practices 326328What’s a Media Query? 329A01 FELK1148 09 SE FM.indd 16353Key Terms 353Review Questions 353Apply Your Knowledge 354Hands-On Exercises 357Web Research 358Focus on Web Design 358Website Case Study 359More on Links, Layout, andMobile 3057.1 Another Look at Hyperlinks 306327346Chapter Summary77.6 Viewport Meta Tag7.7 CSS Media Queries341Configure a Grid Container 346Configure Grid Columns and Rows 346Configure Grid Items 3472857.5 Designing for the Mobile Web339Testing with a Desktop Browser 340For Serious D
HTML5 video and audio, Flash , Java applets, CSS3 transform and transition properties, interactive CSS menu, interactive image gallery, JavaScript, jQuery, Ajax, and HTML5 APIs. Students are encouraged to create pages as the topics are discussed. Sample solutions for
