Web development and design foundations with html5 10th edition free

Web development and design foundations with html5 10th edition free

5m ago

584 Views

75 Downloads

1.35 MB

18 Pages

Transcription

10th EditionWeb Developmentand DesignFoundations withHTML5Terry Ann Felke-Morris, Ed.D.Professor EmeritaHarper College330 Hudson Street, NY NY 10013A01 FELK9996 10 SE FM.indd 318/09/19 5:26 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),including the new CSS Flexbox and CSS Grid Layout Systems Web design best practices Accessibility standards The web development process Using media and interactivity on web pages 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 including an HTML5 Reference, Special EntityCharacter List, CSS Property Reference, WCAG 2.1 Quick Reference, FTP Tutorial, andweb-safe color palette.New to This EditionBuilding on this textbook’s successful ninth edition, new features for the tenth editioninclude the following: Updated coverage of HTML5 elements and attributes Updated code samples, case studies, and web resources Expanded treatment of page layout design and responsive web design techniques Chapter 7 has been renamed Responsive Page Layout, takes a mobile firstapproach, and has an expanded focus on new layout systems including CSSFlexible Layout Module (Flexbox) and CSS Grid Layout Form layout with the CSS Flexbox and Grid Layout Systems Updated reference sections for HTML5 and CSS Additional Hands-On Practice exercisesA01 FELK9996 10 SE FM.indd 518/09/19 5:26 PM

viPrefaceStudent files are available for download from the companion website for this textbookat www.pearson.com/felke-morris. These files include solutions to the Hands-OnPractice exercises, the Website Case Study starter files, and access to the book’scompanion VideoNotes. See the access card in the front of this textbook for furtherinstructions.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 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 needsBrief 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 bea review. Chapter 1 provides the base of knowledge on which the rest of the textbookis built.A01 FELK9996 10 SE FM.indd 618/09/19 5:26 PM

PrefaceviiChapter 2: HTML Basics As HTML5 is introduced, examples and exercisesencourage students to create sample pages and gain useful experience. Students use avariety of structural, grouping, and text-level HTML elements to create web pages withhyperlinks. Solution pages for the 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, CSS visual effects, and HTML5 visual elements. Students are encouraged to create web pages as they read through the text. Sample solutions for the HandsOn Practice are available in the student files.Chapter 5: Web DesignThis chapter focuses on recommended web designpractices and accessibility. Some of this is reinforcement because tips about recommended website design practices are incorporated into the other chapters.Chapter 6: Page LayoutThis chapter has been greatly revised for the 10th ediition. Itcontinues the study of CSS begun earlier and introduces techniques for positioning and floating web page elements, including CSS two-column page layouts. Coding techniques for CSSsprites, configuring for print, a fixed position navigation bar, a single page website, and parallax scrolling are also introduced. Students are encouraged to create web pages as they readthrough the text. Sample solutions for the Hands-On Practice are available in the student files.Chapter 7: Responsive Page LayoutThis chapter has undergone a huge revision for the 10th edition. Chapter 7 has increased in-depth coverage of CSS Flexible BoxLayout (Flexbox) and CSS Grid Layout. Chapter 7 continues to introduce CSS media queriesand responsive image techniques along with CSS feature queries. Students are encouragedto create pages as they read through the text. Sample solutions for the Hands-On Practiceare 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, including using CSS GridLayout. HTML5 form c ontrol elements and attribute values are introduced. Students areencouraged to create sample pages as they read through the text. Sample solutions for theHands-On Practice are available in the student files.Chapter 10: Web DevelopmentThis chapter focuses on the process of websitedevelopment, including the job roles needed for a large-scale project, the web development process, and web hosting. The topic of file organization is also addressed. A webhost checklist is included in this chapter.A01 FELK9996 10 SE FM.indd 718/09/19 5:26 PM

viiiPrefaceChapter 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, CSS transform, transition, and animation properties, interactivedrop-down 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 PromotionThis chapter discusses site promotion from the webdeveloper’s point of view and introduces search engine optimization. A solution for theHands-On Practice is available in the student files.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 appendixesthat include resources and tutorials that are useful for students, such as an HTML5 QuickReference, Special Entity Characters, CSS Property Reference, a WCAG 2.1 Quick Reference, FTP Tutorial, ARIA Landmark Roles, and web-safe color palette.Features of the TextWell-Rounded Selection of Topics This 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 StudiesThere 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.Web ResearchEach chapter offers web research activities that encourage students tofurther study the topics introduced in the chapter.A01 FELK9996 10 SE FM.indd 818/09/19 5:26 PM

PrefaceixFocus 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 the HTML5 Quick Reference, Special Entity Characters, CSSProperty Reference, a WCAG 2.1 Quick Reference, FTP Tutorial, ARIA Landmark Roles,and 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 navigation including the ability to select, play, rewind, fast-forward, and stop within each VideoNote exercise.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/felke-morris. 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 Supplemental Design Activities Solutions for the case study assignments Test questions PowerPoint presentations Sample syllabiA01 FELK9996 10 SE FM.indd 918/09/19 5:26 PM

xPrefaceAuthor’s WebsiteIn addition to the publisher’s companion website for this textbook,the author maintains a website at https://www.webdevfoundations.net. This website contains additional resources, including review activities and a page for each chapter withexamples, links, and updates. This website is not supported by the publisher.AcknowledgmentsVery special thanks go to all the folks at Pearson, especially Michael Hirsch,Tracy Johnson, Erin Sullivan, Scott Disanno, Carole Snyder, and Robert Engelhardt.Thank you to the following people who provided comments and suggestions that wereuseful for this tenth 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 CollegeWill Mahoney-Watson—Portland 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 CollegeJerry Ross—Lane Community CollegeNoah Singer—Tulsa Community CollegeAlan Strozer—Canyons CollegeA01 FELK9996 10 SE FM.indd 1018/09/19 5:26 PM

PrefacexiLo-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 & CSS, currently in its fifth 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 https://terrymorris.net.A01 FELK9996 10 SE FM.indd 1118/09/19 5:26 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—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) 11Hypertext Transfer Protocol Secure (HTTPS) 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 19Constant Change 19Chapter Summary20Key Terms 20Review Questions 20Hands-On Exercise 21Web Research 22Focus on Web Design 23xiiA01 FELK9996 10 SE FM.indd 1218/09/19 5:26 PM

xiiiContentsCHAPTER2HTML Basics 252.1 HTML OverviewRelative Hyperlinks 55Site Map 55The Target Attribute 59Block Anchor 59E-Mail Hyperlinks 59Accessibility and Hyperlinks 6126HTML 26XML 26XHTML 26HTML5 272.18 HTML ValidationChapter Summary2.2 Document Type Definition 272.3 Web Page Template 282.4 HTML Element 282.5 Head, Title, Meta, and BodyElements282.6 Your First Web Page 292.7 Heading Element 33Accessibility and Headings 352.8 Paragraph Element35362.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 48Header Element 48Nav Element 48Main Element 48Footer Element 48Section Element 51Article Element 51Aside Element 52Time Element 522.17 Hyperlinks53The A Element 53The Href Attribute 53Absolute Hyperlinks 54A01 FELK9996 10 SE FM.indd 1364Key Terms 64Review Questions 65Apply Your Knowledge 66Hands-On Exercises 67Web Research 68Focus on Web Design 68Website Case Study 68The Head Section 28The Body Section 29Alignment61CHAPTER3Configuring Color and Textwith CSS 833.1 Overview of Cascading StyleSheets84Advantages of Cascading Style Sheets 84Configuring Cascading Style Sheets 85CSS Selectors and Declarations 85The background-color Property 85The color Property 86Configure Background and Text Color 863.2 Using Color on Web Pages87Hexadecimal Color Values 88Web-Safe Colors 88CSS Color Syntax 883.3 Inline CSS with the Style Attribute89The Style Attribute 893.4 Embedded CSS with the StyleElement91Style Element913.5 Configuring Text with CSS94The font-family Property 94More CSS Text Properties 963.6 CSS Class, Id, and DescendantSelectors102The Class Selector 102The Id Selector 103The Descendant Selector 10418/09/19 5:26 PM

xivContents3.7 Span Element 1063.8 Using External Style SheetsLink Element4.6 More About Images1071073.9 Center HTML Elements with CSS3.10 The “Cascade” 1143.11 CSS Validation 117Chapter Summary1124.8 CSS Visual Effects137138Horizontal Rule Element 138The border and padding Properties 1384.2 Graphics on the Web144Graphic Interchange Format (GIF) 144Joint Photographic Experts Group (JPEG) 145Portable Network Graphic (PNG) 146WebP Image Format 146Popular Graphics Applicaitions 147147Accessibility and Images 148Image Hyperlinks 149Accessibility and Image Hyperlinks 1514.4 More Visual Elements152Figure and Figcaption Elements 153Meter Element 155Progress Element 1554.5 Background Images155The background-image Property 156Browser Display of a Background Image 156The background-repeat Property 157The background-position Property 159The background-attachment Property 159The background-clip Property 160The background-origin Property 160The background-size Property 161Multiple Background Images 162A01 FELK9996 10 SE FM.indd 14171CSS Rounded Corners 171The box-shadow Property 173The opacity Property 177CSS RGBA Color 178CSS HSLA Color 180CSS Gradients 183Chapter SummaryVisual Elements and Graphics4.1 Configuring Lines and Borders168Sources of Graphics 168Guidelines for Using Images 169Accessibility and Visual Elements 17011944.3 Img ElementImage Maps 164The Favorites Icon 166Configuring a Favorites Icon 167CSS Sprites 1684.7 Sources and Guidelines for GraphicsKey Terms 119Review Questions 119Apply Your Knowledge 120Hands-On Exercises 122Web Research 124Focus on Web Design 124Website Case Study 125CHAPTER164185Key Terms 185Review Questions 185Apply Your Knowledge 187Hands-On Exercises 188Web Research 189Focus on Web Design 190Website Case Study 190CHAPTER5Web Design 2055.1 Design for Your Target Audience5.2 Website Organization 207206Hierarchical Organization 207Linear Organization 208Random Organization 2085.3 Principles of Visual Design209Repetition: Repeat Visual ComponentsThroughout the Design 209Contrast: Add Visual Excitement and DrawAttention 209Proximity: Group Related Items 210Alignment: Align Elements to Create VisualUnity 2105.4 Design to Provide Accessibility210Who Benefits from Universal Designand Increased Accessibility? 211Accessible Design Can Benefit Search EngineListing 211Accessibility is the Right Thing to Do 21118/09/19 5:26 PM

xvContents5.5 Writing for the WebOptimize Text for Mobile Use 232Mobile Design Quick Checklist 232212Organize Your Content 212Choosing a Font 213Font Size 213Font Weight 213Font Color Contrast 213Line Length 214Alignment 214Text in Hyperlinks 214Reading Level 214Spelling and Grammar 2145.6 Use of Color5.12 Responsive Web Design 2335.13 Web Design Best PracticesChecklistChapter Summary214Color Scheme Based on an Image 214Color Wheel 215Color Scheme Based on the Color Wheel 216Implementing a Color Scheme 217Accessibility and Color 217Colors and Your Target Audience 2185.7 Use of Graphics and Multimedia220File Size and Image Dimensions Matter 220Antialiased/Aliased Text in Media 220Use Only Necessary Multimedia 220Provide Alternate Text 2215.8 More Design Considerations221Mobile Devices 221Browsers 222Screen Resolution 222White Space 222Flat Web Design 222Single Page Website 2235.9 Navigation Design223226Wireframes and Page Layout 226Page Layout Design Techniques 2285.11 Design for the Mobile Web230Mobile Web Design Considerations 231Optimize Layout for Mobile use 231Optimize Navigation for Mobile Use 231Optimize Graphics for Mobile Use 232A01 FELK9996 10 SE FM.indd 15237Key Terms 237Review Questions 237Hands-On Exercises 238Web Research 241Focus on Web Design 241Website Case Study 242CHAPTER6Page Layout 2456.1 Width and Height with CSS246The width Property 246The min-width Property 246The max-width Property 247The height Property6.2 The Box ModelContentPaddingBorderMarginThe BoxEase of Navigation 223Navigation Bars 224Breadcrumb Navigation 224Using Graphics for Navigation 224Skip Repetitive Navigation 225Dynamic Navigation 225Site Map 226Site Search Feature 2265.10 Page Layout Design234247248248248248248Model in Action 2496.3 Normal Flow 2506.4 CSS Float 2526.5 CSS Clearing a Float254The clear Property 254The overflow Property 2556.6 CSS Box Sizing 2576.7 CSS Two-Column Layout258Your First Two-Column Layout 258Two-Column Layout Example 2616.8 Hyperlinks in an Unordered List262Configure List Markers with CSS 262Vertical Navigation with an Unordered List 263The display Property 264Horizontal Navigation with an Unordered List 2646.9 CSS Interactivity with Pseudo-Classes265CSS Button 2676.10 CSS Sprites27118/09/19 5:26 PM

xviContents6.11 CSS for Printing7.5 Grid Columns, Rows, and Gap273Grid Gap 324The order PropertyPrint Styling Best Practices 2736.12 Positioning with CSS2756.13 Fixed Position Navigation Bar7.7 Layout with Grid Areas279282with Grid2887.9 Centering with Flexbox and Grid7.10 Viewport Meta Tag 3387.11 CSS Media Queries 340Responsive Page Layout 3117.1 CSS Flexible Box Layout 312Configure a Flexible Container 312The display Property 312The flex-wrap Property 313The flex-direction Property 313314Flow Direction 314The justify-content Property 314The align-items Property 315The flex-flow Property 315Flexbox Image Gallery 3167.3 Configure Flex Items318Proportional Flexible Item 319The order Property 319Practice With Flexbox 3207.4 CSS Grid Layout322Configure a Grid Container 322The display Property 322Designing a Grid 322Configure Grid Columns and Grid Rows 323A01 FELK9996 10 SE FM.indd 16336What’s a Media Query? 340Media Query Example Using aLink Element 340Media Query Example Using an @mediaRule 341Mobile First 34277.2 More About Flex Containers333CSS Feature Query 333Key Terms 288Review Questions 288Apply Your Knowledge 289Hands-On Exercises 292Web Research 293Focus on Web Design 293Website Case Study 293CHAPTER329The grid-area Property 329The grid-template-areasProperty 330The grid-template Property 3327.8 Progressive EnhancementFragment Identifiers 282Parallax Scrolling 285Chapter Summary326Configure Grid Columns and Rows 327Configure Grid Items 327Grid Line Numbers 327The z-index Property 2796.14 Single Page Website3257.6 Two-Column Grid Page LayoutStatic Positioning 275Fixed Positioning 275Relative Positioning 275Sticky Positioning 276Absolute Positioning 277Practice with Positioning 2773247.12 Responsive Layout with MediaQueries3427.13 Responsive Grid Layout with MediaQueries3477.14 Responsive Images352Flexible Images with CSS 352Picture Element 354Responsive Img Element Attributes 3567.15 Testing Mobile Display358Testing with a Desktop Browser 358Browser Viewport Size 358Responsive Testing Tools 359For Serious Developers Only 359Chapter Summary360Key Terms 360Review Questions 360Apply Your Knowledge 361Hands-On Exercises 365Web Research 365Focus on Web Design 366Website Case Study 36618/09/19 5:26 PM

ContentsCHAPTER89.4 Select List9.5 Image Buttons and the Button386ElementTable Element 386The Border Attribute 387Table Captions 387388Table Row Element 388Table Data Element 388Table Header Element 3888.3 Span Rows and Columns390The Colspan Attribute 390The Rowspan Attribute 3908.4 Configure an Accessible Table 3928.5 Style a Table with CSS 3948.6 CSS Structural Pseudo-Classes 3968.7 Configure Table Sections 398Chapter Summary9.6 Accessibility and Forms99.7 Style a Form with CSS414Form Element 414Form Controls 4159.2 Input Element Form ControlsText Box 416Submit Button 417Reset Button 417Check Box 419Radio Button 420Hidden Input Control 421File Upload Control 422Password Box 4229.3 Scrolling Text Box423423434Form with CSS Float 434Form with CSS Grid Layout 4369.8 Server-Side Processing438Privacy and Forms 440Server-Side ProcessingResources 4419.9 HTML5 Form ControlsChapter SummaryForms 4139.1 Overview of Forms429Label Element 429Fieldset and Legend Elements 430The Tabindex Attribute 433The Accesskey Attribute 433442E-mail Address Input 442URL Input 442Telephone Number Input 443Search Field Input 443Datalist Form Control 443Slider Form Control 445Spinner Form Control 446Date and Time Form Control 446Color-well Form Control 448Progressive Enhancement 450401Key Terms 401Review Questions 401Apply Your Knowledge 402Hands-On Exercises 404Web Research 405Focus on Web Design 405Website Case Study 405A01 FELK9996 10 SE FM.indd 17428Image Button 428Button Element 4288.2 Table Rows, Cells, and HeadersTextarea Element425Select Element 426Option Element 426Tables 3858.1 Table OverviewCHAPTERxvii415451Key Terms 451Review Questions 451Apply Your Knowledge 452Hands-On Exercises 454Web Research 455Focus on Web Design 456Website Case Study 457CHAPTER10Web Development 46910.1 Successful Large-Scale ProjectDevelopment470Project Job Roles 470Project Staffing Criteria 47118/09/19 5:26 PM

xviiiContents10.2 The Development ProcessRotate Transform 505Scale Transform 505The transition Property 506CSS Animations 511Define an Animation with @keyframesRule 511Apply the Animation 511471Conceptualization 473Analysis 474Design 474Production 476Testing 476Launch 479Maintenance 480Evaluation 48010.3 File Organization11.6 Details and Summary Elements480Relative HyperLink Examples 48010.4 Domain Name Overview11.748211.810.6 Choosing a Virtual HostChapter Summary11.9484518jQuery 519jQuery Resources48511.10 HTML5 APIs488519520Geolocation 520Web Storage 520Progressive Web Application 520Drawing with the Canvas Element 521Key Terms 488Review Questions 488Hands-On Exercises 489Web Research 491Focus on Web Design 49

Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D. 330 Hudson Street, NY NY 10013 A01_FELK9996_10_SE_FM.indd 3 18/09/19 5:26 PM. Preface Web Development and Design Foundations with HTML5 is intended for use in a begin-ning web development course. This textbook introduces HTML and CSS topics such asFile Size: 1MBPage Count: 18Explore further(PDF) Web Development and Design . - Academia.eduwww.academia.edu[PDF/eBook] Web Development And Design Foundations With .findfullebook.com10th Edition Web Development and Design Foundations wit www.webdevfoundations.netWeb Development & Design Foundations with HTMLwww.webdevfoundations.netFelke-Morris, Web Development and Design . - Pearsonwww.pearson.comRecommended to you b