Web Design - Pearson
Basics ofWeb DesignHTML5 & CSSFifth EditionA01 FELK5486 05 SE FM.indd 113/11/2018 20:25
A01 FELK5486 05 SE FM.indd 213/11/2018 20:25
Basics ofWeb DesignHTML5 & CSSFifth EditionTerry Ann Felke-Morris, Ed.D.Professor EmeritaHarper CollegeA01 FELK5486 05 SE FM.indd 313/11/2018 20:25
Senior Vice President, Portfolio Management, Engineeringand Computer Science: Marcia HortonDirector, PortfolioManagement: Julian PartridgeExecutive Portfolio Manager: Matt GoldsteinPortfolio Management Assistant: Meghan JacobyProduct Marketing Manager: Yvonne VannattaField Marketing Manager: Demetrius HallMarketing Assistant: Jon BryantManaging Producer: Scott DisannoContent Producer: Amanda BrandsOperations Specialist: Maura Zaldivar-GarciaManager, Rights and Permissions: Ben FerriniCover Designer: Pearson CSCCover Art: Getty Images: Pakorn Kumruen/EyeEmPrinter: Lake Side Communications, Inc.Full-Service Project Management: Billu Suresh, Pearson CSCComposition: Pearson CSCThe author has created a variety of fictitious names, company names, e-mail addresses, URLs, phone numbers, fax n umbers,and other similar items for the purposes of illustrating the concepts and techniques described within this textbook. Any resemblance of these fictitious items to any person, company/organization, or location is u nintentional and purely coincidental.Credits and acknowledgments borrowed from other sources and reproduced, with permission, in this textbook appear onthe appropriate page within text.Copyright 2020, 2018, 2016, 2014, 2012 Pearson, Inc. Hoboken, NJ 07030. All Rights Reserved. M anufactured inthe United States of America. This publication is protected by copyright, and permission should be obtained from thepublisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means,electronic, mechanical, photocopying, recording, or otherwise. For information r egarding permissions, request formsand the appropriate contacts within the Pearson Education Global Rights & Permissions department, please visitwww.pearsoned.com/permissions/.Many of the designations by manufacturers and sellers to distinguish their products are claimed as trademarks. Wherethose designations appear in this book, and the publisher was aware of a trademark claim, the designations have beenprinted in initial caps or all caps.Acknowledgments of third party content appear on the same page as the content, which constitutes an extension of thiscopyright page. All other photos and figures copyright Terry Felke-Morris.The author and publisher of this book have used their best efforts in preparing this book. These efforts include the development, research, and testing of theories and programs to determine their effectiveness. The author and publisher makeno warranty of any kind, expressed or implied, with regard to these programs or the documentation contained in this book.The author and publisher shall not be liable in any event for incidental or consequential damages with, or arising out of,the furnishing, performance, or use of these programs.MICROSOFT AND/OR ITS RESPECTIVE SUPPLIERS MAKE NO REPRESENTATIONS ABOUT THE SUITABILITY OF THE INFORMATION CONTAINED IN THE DOCUMENTS AND RELATED GRAPHICS PUBLISHED AS PART OF THE SERVICES FOR ANYPURPOSE. 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 REGARDTO 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 SHALLMICROSOFT 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 OFCONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF INFORMATION AVAILABLE FROM THE SERVICES. THE DOCUMENTS AND RELATED GRAPHICS CONTAINEDHEREIN COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDEDTO THE INFORMATION HEREIN. MICROSOFT AND/OR ITS RESPECTIVE SUPPLIERS MAY MAKE IMPROVEMENTS AND/ORCHANGES IN THE PRODUCT(S) AND/OR THE PROGRAM(S) DESCRIBED HEREIN AT ANY TIME. PARTIAL SCREEN SHOTSMAY BE VIEWED IN FULL WITHIN THE SOFTWARE VERSION SPECIFIED.MICROSOFT AND WINDOWS ARE REGISTERED TRADEMARKS OF THE MICROSOFT CORPORATION IN THE USA AND ICROSOFT CORPORATION.OTHER COUNTRIES. SCREEN SHOTS AND ICONS REPRINTED WITH PERMISSION FROM THE MTHIS BOOK IS NOT SPONSORED OR ENDORSED BY OR AFFILIATED WITH THE M ICROSOFT CORPORATION.Library of Congress Cataloging-in-Publication DataNames: Felke-Morris, Terry, author.Title: Basics of web design: HTML5 & CSS / Terry Ann Felke-Morris, Ed.D.,Professor Emerita.Description: Fifth edition. NY, NY : Harper College, [2020] Includes bibliographical references.Identifiers: LCCN 2018046351 ISBN 9780135225486 (alk. paper) ISBN0135225485Subjects: LCSH: HTML (Document markup language) Cascading style sheets. Web site development—Computer programs. Web sites—Design.Classification: LCC QA76.76.H94 F455 2018 DDC 006.7/4—dc23 LC record available athttps://lccn.loc.gov/2018046351119ISBN 10: 0-13-522548-5ISBN 13: 978-0-13-522548-6A01 FELK5486 05 SE FM.indd 413/11/2018 20:25
PrefaceBasics of Web Design: HTML5 & CSS is intended for use in a beginning web design orweb development course. Topics are introduced in two-page sections that focus on keypoints and often include a hands-on practice exercise. The text covers the basics that web designers need to develop their skills: Introductory Internet and World Wide Web concepts Creating web pages with HTML5 Configuring text, color, and page layout with Cascading Style Sheets Configuring images and multimedia on web pages Exploring CSS Flexbox and CSS Grid layout systems Web design best practices Creating web pages that display well on both desktop and mobile devices Accessibility, usability, and search engine optimization considerations Obtaining a domain name and a web host Publishing to the WebStudent files are available for download from the companion website for this book atwww.pearson.com/felke-morris. These files include solutions to the Hands-On Practiceexercises, starter files for the Hands-On Practice exercises, and the starter files for theCase Study. See the access information on the inside front cover of this book for furtherinstructions.Building on this textbook’s successful third edition, the fifth edition features: Additional Hands-On Practice exercises Updated code samples, case studies, and web resources Updates for HTML5.2 elements and attributes Expanded treatment of page layout design and responsive web design techniques Chapter 8 has been renamed “Responsive Layout Basics” and has an expandedfocus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSSGrid Layout Expanded coverage of responsive image techniques including the HTML5 picture element Updated reference sections for HTML5 and CSSFeatures of the TextDesign for Today and Tomorrow. The textbook prepares students to design web pagesthat work today in addition to being ready to take advantage of new HTML5 and CSS codingtechniques of the future.Well-Rounded Selection of Topics. This text includes both “hard” skills such as HTML5and Cascading Style Sheets (Chapters 1–2 and 4–11) and “soft” skills such as web designPreface vA01 FELK5486 05 SE FM.indd 513/11/2018 20:25
(Chapter 3) and publishing to the Web (Chapter 12). This well-rounded foundation will help students as they pursue careers as web professionals. Students and instructors will findclasses more interesting because they can discuss, integrate, and apply both hard andsoft skills as students create web pages and websites. The topics in each chapter are introduced on concise two-page sections that are intended to provide quick overviews andtimely practice with the topic.Two-Page Topic Sections. Most topics are introduced in a concise, two-page section.Many sections also include immediate hands-on practice of the new skill or concept.This approach is intended to appeal to your busy students—especially the millennialmulti taskers—who need to drill down to the important concepts right away.Hands-On Practice. Web design is a skill, and skills are best learned by hands-on practice.This text emphasizes hands-on practice through practice exercises within the chapters, end-of-chapter exercises, and the development of a website through ongoing real-worldcase studies. The variety of exercises provides instructors with a choice of assignmentsfor a particular course or semester.Website Case Study. There are case studies that continue throughout most of the text( beginning at Chapter 2). The case studies serve to reinforce skills discussed in each chapter. Sample solutions to the case study exercises are available on the Instructor Resource Center at http://www.pearson.com.Focus on Web Design. Every chapter offers an additional activity that explores web designtopics related to the chapter. These activities can be used to reinforce, extend, and enhancethe course topics.?FAQFocusonACCESSIBILITYFocusonETHICSQ uickTIPNE xploreWSFURTHERFAQs. In her web design courses, the author is frequently asked similar questions by students. They are included in the book and are marked with the identifying FAQ icon.Focus on Accessibility. Developing accessible websites is more important than ever, andthis text is infused with accessibility techniques throughout. The special icon shown heremakes accessibility information easy to find.Focus on Ethics. Ethical issues related to web development are highlighted throughout thetext with the special ethics icon shown here.Quick Tips. Quick tips, which provide useful background information, or help with productivity, are indicated with this Quick Tip icon.Explore Further. The special icon identifies enrichment topics along with web resourcesuseful for delving deeper into a concept introduced in book.Reference Materials. The appendices offer reference material, including an HTML5r eference, a Cascading Style Sheets reference, a WCAG 2.1 Quick Reference, and an overview of ARIA Landmark Roles.VideoNotes. VideoNotes are Pearson’s new visual tool designed for teaching studentskey programming concepts and techniques. These short step-by-step videos demonstratehow to solve problems from design through coding. VideoNotes allow for self-placed instruction with easy navigation including the ability to select, play, rewind, fast-forward,vi PrefaceA01 FELK5486 05 SE FM.indd 613/11/2018 20:25
and stop within each VideoNote exercise. Margin icons in your textbook let you know whena VideoNote video is available for a particular concept or hands-on practice.Supplemental MaterialsStudent Resources. Student files for the case studies and the web page hands-on practiceexercises, and access to the book’s VideoNotes are available to all readers of this book atits companion website www.pearson.com/felke-morris. A complimentary access code forthe companion website is available with a new copy of this book. S ubscriptions may also bepurchased online.Instructor Resources. The following supplements are available to qualified instructorsonly. Visit the Pearson Instructor Resource Center (http://www.pearson.com) for informationon how to access them: Solutions to the end-of-chapter exercises Solutions for the case study assignments Test questions PowerPoint presentations Sample syllabiAuthor’s Website. In addition to the publisher’s companion website for this book, theauthor maintains a website at https://www.webdevbasics.net. This website contains additional resources, including a color chart, learning/review games, and a page foreach chapter with examples, links, and updates. This website is not supported by the publisher.AcknowledgmentsVery special thanks go to the people at Pearson, including Matt Goldstein, Meghan Jacoby,and Amanda Brands.A special thank you also goes to Enrique D’Amico at Harper College for taking time to provide additional feedback and sharing student comments about the book.Most of all, I would like to thank my family for their patience and encouragement. My wonderful husband, Greg Morris, has been a constant source of love, understanding, support, andencouragement. Thank you, Greg! A big shout-out to my children, James and Karen, who grewup thinking that everyone’s Mom had their own website. Thank you both for your understanding, patience, and timely suggestions. Finally, a very special dedication to the memory of myfather who will be greatly missed.About the AuthorDr. Terry Ann Felke-Morris is a Professor Emerita at Harper College in Palatine, Illinois. Sheholds a Doctor of Education degree, a Master of Science degree in information systems,and numerous certifications, including Adobe Certified Dreamweaver 8 Developer, WOWCertified Associate Webmaster, Microsoft Certified Professional, Master CIW Designer, andCIW Certified Instructor.Preface viiA01 FELK5486 05 SE FM.indd 713/11/2018 20:25
Dr. Felke-Morris received the Blackboard Greenhouse Exemplary Online Course Award in2006 for use of Internet technology in the academic environment. She is the recipient oftwo international awards: the Instructional Technology Council’s Outstanding e- LearningFaculty Award for Excellence and the MERLOT Award for Exemplary Online LearningResources—MERLOT Business Classics.With more than 25 years of information technology experience in business and i ndustry,Dr. Felke-Morris published her first website in 1996 and has been working with theWeb ever since. A long-time promoter of web standards, she was a member of the Web Standards Project Education Task Force. Dr. Felke-Morris is the author of the popular textbook Web Development and Design Foundations with HTML5, currently in its ninth edition. She was instrumental in developing the Web Development degree and certificateprograms at Harper College. For more information about Dr. Terry Ann Felke-Morris, visithttps://terrymorris.net.viii PrefaceA01 FELK5486 05 SE FM.indd 813/11/2018 20:25
CONTENTSCHAPTER 1Internet and Web BasicsThe Internet and the WebWeb Standards and AccessibilityWeb Browsers and Web ServersInternet ProtocolsUniform Resource Identifiersand Domain NamesInformation on the WebHTML OverviewUnder the Hood of a Web PageYour First Web PageReview and Apply12468101416182024CHAPTER 2HTML BasicsHeading ElementParagraph ElementLine Break and Horizontal RuleBlockquote ElementPhrase ElementOrdered ListUnordered ListDescription ListSpecial Entity CharactersHTML Syntax ValidationStructural ElementsPractice with Structural ElementsMore Structural ElementsAnchor ElementPractice with HyperlinksE-Mail HyperlinksReview and ApplyWebsite OrganizationPrinciples of Visual DesignDesign to Provide for AccessibilityUse of TextWeb Color PaletteDesign for Your Target AudienceChoosing a Color SchemeUse of Graphics and MultimediaMore Design ConsiderationsNavigation DesignWireframes and Page LayoutFixed and Fluid LayoutsDesign for the Mobile WebResponsive Web DesignWeb Design Best Practices ChecklistReview and 4869092949698100102104106CHAPTER 4Cascading Style Sheets Basics 111Cascading Style Sheets OverviewCSS Selectors and DeclarationsCSS Syntax for Color ValuesConfigure Inline CSSConfigure Embedded CSSConfigure External CSSCSS Selectors: Class, Id,and DescendantSpan ElementPractice with CSSThe CascadePractice with the CascadeCSS Syntax ValidationReview and TER 5CHAPTER 3Web Design Basics71Your Target Audience72Graphics & Text Styling Basics 143Web GraphicsImage Element144146Contents ixA01 FELK5486 05 SE FM.indd 913/11/2018 20:25
Image HyperlinksConfigure Background ImagesPosition Background ImagesCSS Multiple Background ImagesFonts with CSSCSS Text PropertiesPractice with Graphics and TextConfigure List Markers with CSSThe Favorites IconImage MapsFigure and Figcaption ElementsReview and Apply148150152154156158160162164166168170CHAPTER 6More CSS BasicsWidth and Height with CSSThe Box ModelMargin and Padding with CSSBorders with CSSCSS Rounded CornersCenter Page Content with CSSCSS Box Shadow and Text ShadowCSS Background Clip and OriginCSS Background Resize and ScalePractice with CSS PropertiesCSS OpacityCSS RGBA ColorCSS HSLA ColorCSS GradientsReview and 208Normal FlowFloatClear a FloatOverflowCSS Box SizingBasic Two-Column LayoutVertical Navigation withan Unordered ListHorizontal Navigation withan Unordered ListReview and ApplyResponsive Layout BasicsCSS Flexible Box LayoutMore About Flex ContainersFlexbox Image GalleryConfigure Flex ItemsPractice with FlexboxCSS Grid LayoutGrid Columns, Rows, and GapTwo-Column Grid Page LayoutProgressive Enhancement with GridCentering with Flexbox and GridViewport Meta TagCSS Media QueriesResponsive Layout with Media QueriesResponsive Grid Layout withMedia QueriesFlexible Images with CSSPicture ElementResponsive Img Element AttributesTesting Mobile Display217CHAPTER 9218220222224226228Table Basics232234236238240242244246248250CHAPTER 8Review and ApplyCHAPTER 7Page Layout BasicsCSS Interactivity with Pseudo-ClassesPractice with CSS Two-Column LayoutCSS for PrintCSS SpritesPositioning with CSSPractice with PositioningFixed Position Navigation BarTable OverviewTable Rows, Cells, and HeadersSpan Rows and ColumnsConfigure an Accessible TableStyle a Table with CSSCSS Structural Pseudo-classesConfigure Table SectionsReview and ontentsA01 FELK5486 05 SE FM.indd 1013/11/2018 20:25
CHAPTER 10Form BasicsForm OverviewText BoxSubmit Button and Reset ButtonCheck Box and Radio ButtonHidden Field and Password BoxTextarea ElementSelect Element and Option ElementLabel ElementFieldset Element and Legend ElementStyle a Form with CSSCSS Grid Layout FormServer-Side ProcessingPractice with a FormMore Text Form ControlsDatalist ElementSlider and Spinner ControlsCalendar and Color-Well ControlsMore Form PracticeReview and 360362364366368CHAPTER 11CSS Transition PropertyPractice with TransitionsCSS Drop-Down MenuDetails Element and Summary ElementJavaScript & jQueryHTML5 APIsReview and Apply396398400402404406408CHAPTER 12Web Publishing BasicsFile OrganizationTargeting HyperlinksRegister a Domain NameChoose a Web HostSecure Sockets Layer (SSL)Publish with File Transfer ProtocolSearch Engine SubmissionSearch Engine OptimizationAccessibility TestingUsability TestingReview and edia and Interactivity Basics379Plug-ins, Containers, and CodecsConfigure Audio and VideoFlash and the HTML5 Embed ElementAudio Element and Source ElementVideo Element and Source ElementPractice with VideoIframe ElementCSS Transform Property380382384386388390392394Answers to Review QuestionsHTML5 Cheat SheetCSS Cheat SheetWCAG 2.1 Quick ReferenceLandmark Roles with ARIA439440445453455IndexCreditsWeb Safe Color Palette457473475Contents xiA01 FELK5486 05 SE FM.indd 1113/11/2018 20:25
VideoNotesLocations of VideoNoteswww.pearson.com/felke-morrisCHAPTER 1CHAPTER 7Internet and Web BasicsEvolution of the WebYour First Web PagePage Layout Basics320Responsive Layout BasicsHTML BasicsTwo-Column Grid Page LayoutCHAPTER 9Table BasicsWeb Design BasicsConfigure a TableCHAPTER 10Form BasicsCascading Style Sheets BasicsConnect a Form to Server-side Processing 354122134HTML5 VideoConfigure an Inline FrameGraphics & Text Styling Basics388393152CHAPTER 12CHAPTER 6Web Publishing BasicsMore CSS BasicsCSS Rounded CornersCHAPTER 11Media and Interactivity BasicsCHAPTER 5Background Images31276CHAPTER 4External Style SheetsCSS Validation27246CHAPTER 3Principles of Visual Design236CHAPTER 8CHAPTER 2HTML ValidationInteractivity with CSS Pseudo-Classes188Linking to a Named FragmentChoosing a Domain Name418420xii VideoNotesA01 FELK5486 05 SE FM.indd 1213/11/2018 20:25
Web design is a skill, and skills are best learned by hands-on practice. This text emphasizes hands-on practice through practice exercises within the chapters, end-of-chapter exercises, and the development of a website through ongoing real-world case studies. The variety of exercises provides instructors with a choice of assignments
Pearson Education LTD. Pearson Education Australia PTY, Limited. Pearson Education Singapore, Pte. Ltd. Pearson Education North Asia, Ltd. Pearson Education Canada, Ltd. Pearson Educación de Mexico, S.A. de C.V. Pearson Education—Japan Pearson Education Malaysia, Pte. Ltd. The Libra
Pearson Education LTD. Pearson Education Australia PTY, Limited. Pearson Education Singapore, Pte. Ltd. Pearson Education North Asia, Ltd. Pearson Education Canada, Ltd. Pearson Educatión de Mexico, S.A. de C.V. Pearson Education—Japan Pearson Education Malaysia, Pte. Ltd. Library of Co
Pearson (UK) 80 Strand, London WC2R 0RL, UK T 44 (0)20 7010 2000 F 44 (0)20 7010 6060 firstname.lastname@pearson.com www.pearson.com Pearson (US) 1330 Avenue of the Americas, New York City, NY 10019, USA T 1 212 641 2400 F 1 212 641 2500 firstname.lastname@pearson-inc.com www.pearson.com Pearson Education One Lake Street, Upper Saddle River,
Pearson BTEC Level 4 HNC The Pearson BTEC Level 4 HNC in Business is a qualification with a minimum of 120 credits of which 60 are mandatory core. The Pearson BTEC Level 4 HNC programme must contain a minimum of 65 credits at level 4. Pearson BTEC Level 5 HND The Pearson BTEC Lev
Pearson Education Canada, Inc. Pearson Education Malaysia, Pte. Ltd. Pearson Education-Japan Pearson Education Upper Saddle River, New Jersey Pearson Education Australia PTY, Limited PEARSON 10 9 8 7 6 5 4 ISBN-13: 17Ö-D-13-S0M507-7 ISBN-ID: G-13-5tmsa7-X . For Diane Perin Hock and Caroline Mei Perin Hock . CONTENTS PREFACE xi CHAPTER I BIOLOGY AND HUMAN BEHAVIOR 1 READING 1: ONE BRAIN OR TWO .
To contact Pearson by phone or fax . Phone: 0870 850 8870 . Phone (Welsh): 0300 200 1133 . Fax: 0161 855 7481 . To contact Pearson by email . Email: trainerbooker@pearson.com . To contact Pearson by post . Pearson Driving Assessments Ltd. Attention: Trainer Booker team . PO Box 381 . Ma
Pearson_Nursing_2022.indd 7 2022/02/10 15:39. Contact us Pearson Customer Services Tel: 021 532 6008: Eml ai @pes i rospenznoeqarosn.ucmeai ra. pearsonza.orders@pearson.com Pearson eStore To browse and purchase ebooks, visit shop.pearson.co.za Learn more at Pearson South Africa
Pearson, Always Learning, PSI Design, and PsychCorp are trademarks, in the US and/or other countries, of Pearson Education, Inc., or its affiliates. PsychCorp is an imprint of Pearson Clinical Assessment. NCS Pearson, Inc. 5601 Green Valley Drive Bloomington, MN 55437 Produced in the U
