Web Design

Basics of

Fifth Edition

HTML5 & CSS

A01_FELK5486_05_SE_FM.indd 1 13/11/2018 20:25

A01_FELK5486_05_SE_FM.indd 2 13/11/2018 20:25

Web Design

Basics of

Fifth Edition

HTML5 & CSS

Terry Ann Felke-Morris, Ed.D.Professor Emerita

Harper College

A01_FELK5486_05_SE_FM.indd 3 13/11/2018 20:25

Senior Vice President, Portfolio Management, Engineering and 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 Disanno

Content 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 CSC

The author has created a variety of fictitious 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 fictitious items to any person, company/organization, or location is unintentional and purely coincidental.

Credits and acknowledgments borrowed from other sources and reproduced, with permission, in this textbook appear on the appropriate page within text.

Copyright © 2020, 2018, 2016, 2014, 2012 Pearson, Inc. Hoboken, NJ 07030. All Rights Reserved. Manufactured 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 otherwise. For information regarding permissions, request forms and the appropriate contacts within the Pearson Education Global Rights & Permissions department, please visit www.pearsoned.com/permissions/.

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.

Acknowledgments of third party content appear on the same page as the content, which constitutes an extension of this copyright 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 devel-opment, research, and testing of theories and programs to determine their effectiveness. The author and publisher make no 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 INFOR-MATION 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 DAM-AGES 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 PER-FORMANCE OF INFORMATION AVAILABLE FROM THE SERVICES. 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.

MICROSOFT® AND WINDOWS® ARE REGISTERED TRADEMARKS OF THE MICROSOFT CORPORATION IN THE USA AND OTHER COUNTRIES. SCREEN SHOTS AND ICONS REPRINTED WITH PERMISSION FROM THE MICROSOFT CORPORATION. THIS BOOK IS NOT SPONSORED OR ENDORSED BY OR AFFILIATED WITH THE MICROSOFT CORPORATION.

Library of Congress Cataloging-in-Publication Data

Names: 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) | ISBN 0135225485Subjects: 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 at https://lccn.loc.gov/2018046351

ISBN 10: 0-13-522548-5ISBN 13: 978-0-13-522548-6

1 19

A01_FELK5486_05_SE_FM.indd 4 13/11/2018 20:25

Preface vPreface v

Preface

Basics of Web Design: HTML5 & CSS is intended for use in a beginning web design or web development course. Topics are introduced in two-page sections that focus on key points 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 Web

Student files are available for download from the companion website for this book at www.pearson.com/felke-morris. These files include solutions to the Hands-On Practice exercises, starter files for the Hands-On Practice exercises, and the starter files for the Case Study. See the access information on the inside front cover of this book for further instructions.

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 expanded focus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSS Grid Layout

◗◗ Expanded coverage of responsive image techniques including the HTML5 picture element

◗◗ Updated reference sections for HTML5 and CSS

Features of the TextDesign for Today and Tomorrow. The textbook prepares students to design web pages that work today in addition to being ready to take advantage of new HTML5 and CSS coding techniques of the future.

Well-Rounded Selection of Topics. This text includes both “hard” skills such as HTML5 and Cascading Style Sheets (Chapters 1–2 and 4–11) and “soft” skills such as web design

A01_FELK5486_05_SE_FM.indd 5 13/11/2018 20:25

vi Preface

(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 find classes more interesting because they can discuss, integrate, and apply both hard and soft 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 and timely 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 millennial multi 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-world case studies. The variety of exercises provides instructors with a choice of assignments for 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 design topics related to the chapter. These activities can be used to reinforce, extend, and enhance the course topics.

FAQs. 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, and this text is infused with accessibility techniques throughout. The special icon shown here makes accessibility information easy to find.

Focus on Ethics. Ethical issues related to web development are highlighted throughout the text with the special ethics icon shown here.

Quick Tips. Quick tips, which provide useful background information, or help with productiv-ity, are indicated with this Quick Tip icon.

Explore Further. The special icon identifies enrichment topics along with web resources useful for delving deeper into a concept introduced in book.

Reference Materials. The appendices offer reference material, including an HTML5 reference, a Cascading Style Sheets reference, a WCAG 2.1 Quick Reference, and an over-view of ARIA Landmark Roles.

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 solve problems from design through coding. VideoNotes allow for self-placed instruction with easy navigation including the ability to select, play, rewind, fast-forward,

? FAQ

Focus on

ACCESSIBILITY

ETHICS

Focus on

Quick TIP

N

S

W E xplore FURTHER

A01_FELK5486_05_SE_FM.indd 6 13/11/2018 20:25

Preface vii

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 hands-on practice.

Supplemental MaterialsStudent Resources. Student files for the case studies and the web page hands-on practice exercises, and access to the book’s VideoNotes are available to all readers of this book at its companion website www.pearson.com/felke-morris. A complimentary access code for the companion website is available with a new copy of this book. Subscriptions may also be purchased online.

Instructor Resources. The following supplements are available to qualified instructors only. Visit the Pearson Instructor Resource Center (http://www.pearson.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 book, the author maintains a website at https://www.webdevbasics.net. This website contains additional resources, including a color chart, learning/review games, and a page for each 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 wonder-ful 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 and Karen, who grew up thinking that everyone’s Mom had their own website. Thank you both for your understand-ing, patience, and timely suggestions. Finally, a very special dedication to the memory of my father who will be greatly missed.

About the Author Dr. Terry Ann Felke-Morris is a Professor Emerita at Harper College in Palatine, Illinois. She holds a Doctor of Education degree, a Master of Science degree in information systems, and numerous certifications, including Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster, Microsoft Certified Professional, Master CIW Designer, and CIW Certified Instructor.

A01_FELK5486_05_SE_FM.indd 7 13/11/2018 20:25

viii Preface

Dr. Felke-Morris received the Blackboard Greenhouse Exemplary Online Course Award in 2006 for use of Internet technology in the academic environment. She is the recipient of two international awards: the Instructional Technology Council’s Outstanding e- Learning Faculty Award for Excellence and the MERLOT 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 Web 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 certificate programs at Harper College. For more information about Dr. Terry Ann Felke-Morris, visit https://terrymorris.net.

A01_FELK5486_05_SE_FM.indd 8 13/11/2018 20:25

Contents ix

CONTENTS

CHAPTER 1

Internet and Web Basics 1The Internet and the Web 2Web Standards and Accessibility 4Web Browsers and Web Servers 6Internet Protocols 8Uniform Resource Identifiers and Domain Names 10Information on the Web 14HTML Overview 16Under the Hood of a Web Page 18Your First Web Page 20

Review and Apply 24

CHAPTER 2

HTML Basics 27Heading Element 28Paragraph Element 30Line Break and Horizontal Rule 32Blockquote Element 34Phrase Element 36Ordered List 38Unordered List 40Description List 42Special Entity Characters 44HTML Syntax Validation 46Structural Elements 48Practice with Structural Elements 50More Structural Elements 52Anchor Element 54Practice with Hyperlinks 56E-Mail Hyperlinks 60

Review and Apply 62

CHAPTER 3

Web Design Basics 71Your Target Audience 72

Website Organization 74Principles of Visual Design 76Design to Provide for Accessibility 78Use of Text 80Web Color Palette 82Design for Your Target Audience 84Choosing a Color Scheme 86Use of Graphics and Multimedia 90More Design Considerations 92Navigation Design 94Wireframes and Page Layout 96Fixed and Fluid Layouts 98Design for the Mobile Web 100Responsive Web Design 102Web Design Best Practices Checklist 104

Review and Apply 106

CHAPTER 4

Cascading Style Sheets Basics 111Cascading Style Sheets Overview 112CSS Selectors and Declarations 114CSS Syntax for Color Values 116Configure Inline CSS 118Configure Embedded CSS 120Configure External CSS 122CSS Selectors: Class, Id, and Descendant 124Span Element 126Practice with CSS 128The Cascade 130Practice with the Cascade 132CSS Syntax Validation 134

Review and Apply 136

CHAPTER 5

Graphics & Text Styling Basics 143Web Graphics 144Image Element 146

A01_FELK5486_05_SE_FM.indd 9 13/11/2018 20:25

x Contents

Image Hyperlinks 148Configure Background Images 150Position Background Images 152CSS Multiple Background Images 154Fonts with CSS 156CSS Text Properties 158Practice with Graphics and Text 160Configure List Markers with CSS 162The Favorites Icon 164Image Maps 166Figure and Figcaption Elements 168

Review and Apply 170

CHAPTER 6

More CSS Basics 179Width and Height with CSS 180The Box Model 182Margin and Padding with CSS 184Borders with CSS 186CSS Rounded Corners 188Center Page Content with CSS 190CSS Box Shadow and Text Shadow 192CSS Background Clip and Origin 194CSS Background Resize and Scale 196Practice with CSS Properties 198CSS Opacity 200CSS RGBA Color 202CSS HSLA Color 204CSS Gradients 206

Review and Apply 208

CHAPTER 7

Page Layout Basics 217Normal Flow 218Float 220Clear a Float 222Overflow 224CSS Box Sizing 226Basic Two-Column Layout 228Vertical Navigation with an Unordered List 232Horizontal Navigation with an Unordered List 234

CSS Interactivity with Pseudo-Classes 236Practice with CSS Two-Column Layout 238CSS for Print 240CSS Sprites 242Positioning with CSS 244Practice with Positioning 246Fixed Position Navigation Bar 248

Review and Apply 250

CHAPTER 8

Responsive Layout Basics 257CSS Flexible Box Layout 258More About Flex Containers 260Flexbox Image Gallery 262Configure Flex Items 264Practice with Flexbox 266CSS Grid Layout 268Grid Columns, Rows, and Gap 270Two-Column Grid Page Layout 272Progressive Enhancement with Grid 274Centering with Flexbox and Grid 276Viewport Meta Tag 278CSS Media Queries 280Responsive Layout with Media Queries 282Responsive Grid Layout with Media Queries 286Flexible Images with CSS 290Picture Element 292Responsive Img Element Attributes 294Testing Mobile Display 296

Review and Apply 290

CHAPTER 9

Table Basics 309Table Overview 310Table Rows, Cells, and Headers 312Span Rows and Columns 314Configure an Accessible Table 316Style a Table with CSS 318CSS Structural Pseudo-classes 320Configure Table Sections 322

Review and Apply 324

A01_FELK5486_05_SE_FM.indd 10 13/11/2018 20:25

Contents xi

CHAPTER 10

Form Basics 331Form Overview 332Text Box 334Submit Button and Reset Button 336Check Box and Radio Button 338Hidden Field and Password Box 340Textarea Element 342Select Element and Option Element 344Label Element 346Fieldset Element and Legend Element 348Style a Form with CSS 350CSS Grid Layout Form 352Server-Side Processing 354Practice with a Form 356More Text Form Controls 358Datalist Element 360Slider and Spinner Controls 362Calendar and Color-Well Controls 364More Form Practice 366

Review and Apply 368

CHAPTER 11

Media and Interactivity Basics 379Plug-ins, Containers, and Codecs 380Configure Audio and Video 382Flash and the HTML5 Embed Element 384Audio Element and Source Element 386Video Element and Source Element 388Practice with Video 390Iframe Element 392CSS Transform Property 394

CSS Transition Property 396Practice with Transitions 398CSS Drop-Down Menu 400Details Element and Summary Element 402JavaScript & jQuery 404HTML5 APIs 406

Review and Apply 408

CHAPTER 12

Web Publishing Basics 415File Organization 416Targeting Hyperlinks 418Register a Domain Name 420Choose a Web Host 422Secure Sockets Layer (SSL) 424Publish with File Transfer Protocol 426Search Engine Submission 428Search Engine Optimization 430Accessibility Testing 432Usability Testing 434

Review and Apply 436

APPENDIXAnswers to Review Questions 439HTML5 Cheat Sheet 440CSS Cheat Sheet 445WCAG 2.1 Quick Reference 453Landmark Roles with ARIA 455

Index 457Credits 473Web Safe Color Palette 475

A01_FELK5486_05_SE_FM.indd 11 13/11/2018 20:25

xii VideoNotes

CHAPTER 1 Internet and Web Basics

Evolution of the Web 3Your First Web Page 20

CHAPTER 2 HTML Basics

HTML Validation 46

CHAPTER 3 Web Design Basics

Principles of Visual Design 76

CHAPTER 4 Cascading Style Sheets Basics

External Style Sheets 122CSS Validation 134

CHAPTER 5 Graphics & Text Styling Basics

Background Images 152

CHAPTER 6 More CSS Basics

CSS Rounded Corners 188

CHAPTER 7 Page Layout Basics

Interactivity with CSS Pseudo-Classes 236

CHAPTER 8 Responsive Layout Basics

Two-Column Grid Page Layout 272

CHAPTER 9 Table Basics

Configure a Table 312

CHAPTER 10 Form Basics

Connect a Form to Server-side Processing 354

CHAPTER 11 Media and Interactivity Basics

HTML5 Video 388Configure an Inline Frame 393

CHAPTER 12 Web Publishing Basics

Linking to a Named Fragment 418Choosing a Domain Name 420

VideoNotesLocations of VideoNotes

www.pearson.com/felke-morris

A01_FELK5486_05_SE_FM.indd 12 13/11/2018 20:25