Transcription

Copyrighted Material10th 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

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 492Website Case Study 49211.11 Multimedia, Animation, and InteractivityAccessibility Issues 524Chapter SummaryCHAPTER11Web Multimedia andInteractivity 49311.1 Containers and Codecs 49411.2 Getting Started with Audio and Video495CHAPTERAudio and Video Elements 497CSS Drop Down Menu 502The transform Property 504A01 FELK9996 10 SE FM.indd 1812E-Commerce Overview12.1 What Is E-Commerce?Audio Element 497Source Element 498Audio on a Web Page 498Video Element 499Source Element 500Video on a Web Page 50011.4 M ultimedia Files and Copyright Law11.5 CSS and Interactivity 502525Key Terms 525Review Questions 525Apply Your Knowledge 527Hands-On Exercises 528Web Research 528Focus on Web Design 529Website Case Study 529Provide a Hyperlink 495Working with Multimedia on the Web 49611.3517Ajax 518Ajax Resources484Web Hosting ProvidersJavaScript 516JavaScript ResourcesChoosing a Domain Name 482Registering a Domain Name 48410.5 Web Hosting514Details Element 514Summary Element 515Details & Summary Widget 515537538Advantages of E-Commerce 538Risks of E-Commerce 53950212.2 E-Commerce Business Models12.3 Electronic Data Interchange(EDI)54054012.4 E-Commerce Statistics 54012.5 E-Commerce Issues 54118/09/19 5:26 PM

Contents12.6 E-Commerce Security13.613.713.8543Encryption 543Integrity 544Secure Sockets Layer (SSL) 544Digital Certificate 545SSL and Digital Certificates 54612.7 Order and Payment Processing13.954712.8 E-Commerce Technology Solutions548550Key Terms 550Review Questions 550Hands-On Exercises 551Web Research 552Focus on Web Design 553Website Case Study 553Chapter Summary56613.5 Submitting Your Website to a SearchA01 FELK9996 10 SE FM.indd 19571581Key Terms 581Review Questions 581Hands-On Exercises 582Web Research 583Focus on Web Design 583Website Case Study 584Keywords 568Page Titles 568Heading Tags 568Description 568Description Meta Tag 568Linking 569Images and Multimedia 569Valid Code 569Content of Value 569HTTPS Protocol 569Map Your Site578Iframe Element 578Video in an Inline Frame 580Search Engine Optimization 567570Other Site Promotion Activities 575FramesRobot 566Database 567Search Form 567EngineSocial Media Optimization 57413.10 Serving Dynamic Content with Inline13Web Promotion 56513.1 Search Engine Overview 56613.2 Popular Search Engines 56613.3 Components of a Search Engine13.4Link Popularity 574Quick Response (QR) Codes 575Affiliate Programs 575Banner Ads 576Banner Exchange 576Reciprocal Link Agreements 576Newsletters 576Sticky Site Features 577Personal Recommendations 577Website Forum Postings 577Traditional Media Ads and Existing MarketingMaterials 577Instant Online Storefront 548Shopping Cart Software 549E-Commerce Platform 549CHAPTERMonitoring Search Listings 572Blogs 574Social Networking 574Credit Card 547Stored-value Card 547Digital Wallet 547Digital Cash 548Chapter SummaryxixCHAPTER14A Brief Look at JavaScript andjQuery 58714.1 Overview of JavaScript 58814.2 The Development of JavaScript 58814.3 Popular Uses for JavaScript 589Alert Message 589Popup Windows 589Jump Menus 590Mouse Movement Techniques 59014.4Adding JavaScript to a Web Page 591Script Element 591Alert Message Box 59214.514.6Document Object Model Overview 594Events and Event Handlers 59718/09/19 5:26 PM

xx14.7ContentsVariables 600Writing a Variable to a Web Page 600Collecting Variable Values Using a Prompt 60214.814.17 jQuery Plugins 62814.18 jQuery Resources 632Chapter SummaryI ntroduction to ProgrammingConcepts 604Arithmetic Operators 604Decision Making 604Functions 607The addEventListener Method 61014.9 Form Handling 61214.10 Accessibility and JavaScript 61714.11 JavaScript Resources 61814.12 Overview of jQuery 61814.13 Adding jQuery to a Web Page 618Download jQuery 618Access jQuery via a Content Delivery Network 619The Ready Event 61914.14 jQuery Selectors 62114.15 jQuery Methods 62114.16 jQuery Image Gallery 624633Key Terms 633Review Questions 633Apply Your Knowledge 635Hands-On Exercises 636Web Research 637Website Case Study 637Web Developer’s Handbook 645Appendix A HTML5 Quick Reference 647Appendix B Special Entity Characters 651Appendix C CSS Property Reference 653Appendix D WCAG 2.1 Quick Reference 659Appendix E Landmark Roles with ARIA 663Appendix F FTP Tutorial 665Appendix G Web-Safe Color Palette 669AnswersIndex671691VideoNotes are available at www.pearson.com/felke-morrisLOCATION OF VIDEONOTES IN THE TEXTVideoNoteA series of videos have been developed as a companion for this textbook.VideoNoteicons indicate the availability of a video on a specific topic.A01 FELK9996 10 SE FM.indd 20Chapter 1Evolution of the Web, p. 2Chapter 2Your First Web Page, p. 29HTML Validation, p. 61Chapter 3External Style Sheets, p. 107CSS Validation, p. 117Chapter 4CSS Background Images, p. 156Rounded Corners with CSS, p. 171Chapter 5Principles of Visual Design, p. 209Chapter 6Interactivity with CSS pseudo-classes, p. 265Linking to a Named Fragment, p. 282Chapter 7CSS Grid Layout, p. 326Chapter 8Configure a Table, p. 386Chapter 9Connect a Form to Server-Side Processing, p. 438Chapter 10Choosing a Domain Name, p. 482Chapter 11HTML5 Video, p. 501Chapter 12E-Commerce Benefits and Risks, p. 538Chapter 13Configure an Inline Frame, p. 580Chapter 14JavaScript Message Box, p. 59218/09/19 5:26 PM

Professor Emerita Harper College 10th Edition Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D. 330 Hudson Street, NY NY 10013File Size: 720KBPage Count: 10