Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02 200 203 This is an electronic version of the print textbook Due to electronic rights restrictions, some third party content may be suppressed Editorial review has deemed that any suppressed content does not materially affect the overall learning experience The publisher reserves the right to remove content from this title at any time if subsequent rights restrictions require.
Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 This is an electronic version of the print textbook Due to electronic rights restrictions, some third party content may be suppressed Editorial review has deemed that any suppressed content does not materially affect the overall learning experience The publisher reserves the right to remove content from this title at any time if subsequent rights restrictions require it For valuable information on pricing, previous editions, changes to current editions, and alternate formats, please visit www.cengage.com/highered to search by ISBN, author, title, or keyword for materials in your areas of interest Important notice: Media content referenced within the product description or the product text may not be available in the eBook version Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Web Design with HTML5 & CSS3 COMPREHENSIVE MINNICK Eighth Edition Australia • Brazil • Mexico • Singapore • United Kingdom • United States Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Web Design with HTML5 and CSS3, Comprehensive, Eighth Edition Jessica Minnick Product Director: Kathleen McMahon Product Team Manager: Kristin McNary Senior Content Developers: Kate Mason and Marjorie Hunt Marketing Director: Michelle McTighe Senior Content Project Manager: Matthew Hutchinson Art Director: Heather Marshall, Lumina Datamatics, Inc Manufacturing Planner: Julio Esperas IP Analyst: Amber Hill Senior IP Project Manager: Kathryn Kucharek Production Service: Lumina Datamatics, Inc Compositor: Lumina Datamatics, Inc Cover Images: Background image: iStockPhoto.com/ virusowy Computers: iStockPhoto.com/scyther5 © 2017, 2013 Cengage Learning ALL RIGHTS RESERVED No part of this work covered by the copyright herein may be reproduced or distributed in any form or by any means, except as permitted by U.S copyright law, without the prior written permission of the copyright owner For product information and technology assistance, contact us at Cengage Learning Customer & Sales Support, 1-800-354-9706 For permission to use material from this text or product, submit all requests online at cengage.com/permissions Further permissions questions can be emailed to permissionrequest@cengage.com Library of Congress Control Number: 2015958528 Student Edition: ISBN: 978-1-305-57816-6 Cengage Learning 20 Channel Center Street Boston, MA 02210 USA Cengage Learning is a leading provider of customized learning solutions with employees residing in nearly 40 different countries and sales in more than 125 countries around the world. Find your local representative at www.cengage.com Cengage Learning products are represented in Canada by Nelson Education, Ltd For your course and learning solutions, visit www.cengage.com Unless otherwise stated, all screenshots courtesy of Microsoft Corporation Microsoft is either a registered trademark or a trademark of Microsoft Corporation in the United States and/ or other countries Cengage Learning is an independent entity from the Microsoft Corporation, and not affiliated with Microsoft in any manner Purchase any of our products at your local college store or at our preferred online store www.cengagebrain.com Trademarks: Some of the product names and company names used in this book have been used for identification purposes only and may be trademarks or registered trademarks of their respective manufacturers and sellers Printed in the United States of America Print Number: 01 Print Year: 2016 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Web Design with HTML5 & CSS3 COMPREHENSIVE Eighth Edition Contents Preface ix Web Design with HTML5 and CSS3 CHAPTER ONE Introduction to the Internet and Web Design Objectives Introduction Project — Create a Basic Webpage Roadmap Exploring the Internet World Wide Web Protocols Web Browsers Types of Websites Planning a Website Purpose of the Website Target Audience Multiplatform Display Wireframe Site Map Graphics Navigation Typography Color Accessibility Planning Checklist Understanding the Basics of HTML HTML Elements and Attributes Technologies Related to HTML HTML5 Understanding the Role of Other Web Programming Languages JavaScript jQuery PHP ASP Using Web Authoring Tools Text Editors WYSIWYG Editors Creating a Basic Webpage To Start Notepad++ and Create a Blank Document To Add Basic HTML Tags to a Document To Add a Title and Text to a Webpage To Save a Webpage To View a Webpage in a Browser Using a Different Text Editor Chapter Summary Apply Your Knowledge HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 11 HTML 11 HTML 12 HTML 13 HTML 14 HTML 14 HTML 17 HTML 17 HTML 18 HTML 19 HTML 20 HTML 20 HTML 21 HTML 21 HTML 23 HTML 23 HTML 23 HTML 23 HTML 24 HTML 24 HTML 24 HTML 24 HTML 24 HTML 27 HTML 29 HTML 30 HTML 31 HTML 32 HTML 33 HTML 34 HTML 34 HTML 35 HTML 36 Extend Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Your Turn CHAPTER TWO Building a Webpage Template with HTML5 Objectives Introduction Project — Plan and Build a Website Roadmap Designing a Website Site Map Wireframe File Management To Create a Website Folder and Subfolders Using HTML5 Semantic Elements Header Element Nav Element Main Element Footer Element Creating a Webpage Template To Create a Webpage Template Document To Add HTML5 Semantic Elements to a Webpage Template To Add a Title to a Webpage Template Comments To Add Comments to a Webpage Template Webpage Content To Add Content to the Header Section Using Symbol Entities To Add Text and Nonbreaking Spaces to the Nav Section To Add Content and a Symbol to the Footer Section Validating HTML Documents To Validate the Webpage Template To Validate an HTML Document with Errors Creating a Home Page Using a Webpage Template To Create a Home Page Using a Webpage Template and Add Content To Display a Home Page in the Default Browser Chapter Summary Apply Your Knowledge Extend Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Your Turn Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML 40 HTML 41 HTML 43 HTML 47 HTML 49 HTML 50 HTML 50 HTML 51 HTML 52 HTML 52 HTML 53 HTML 54 HTML 55 HTML 56 HTML 57 HTML 57 HTML 57 HTML 57 HTML 58 HTML 59 HTML 60 HTML 61 HTML 61 HTML 62 HTML 63 HTML 63 HTML 64 HTML 65 HTML 66 HTML 67 HTML 67 HTML 68 HTML 69 HTML 70 HTML 71 HTML 72 HTML 73 HTML 75 HTML 76 HTML 78 HTML 81 iii iv Contents Web Design with HTML5 and CSS3 Comprehensive CHAPTER THREE Enhancing a Website with Links and Images Objectives Introduction Project — Add Links and Images to a Website Roadmap Adding Links to a Webpage Anchor Element Relative Links Absolute Links Image Links Email Links Telephone Links To Add Relative Links in a Website Template To Add an Email Link in a Website Template To Add Relative Links in the Home Page To Add an Email Link in the Home Page Adding Images to a Website Image File Formats Image Dimensions and File Size Image Tag and Its Attributes To Copy Files into the Images Folder To Add an Image to a Website Template To Add an Image to the Home Page Exploring Div Elements Div Element Div Attributes To Add a Div Element to a Website Template To Add a Div Element to the Home Page Class Attributes Adding Headings and Lists Heading Elements Lists To Create the About Us Webpage and Add a Heading and Image To Add Unordered Lists to the About Us Webpage To Add a Description List and Absolute Link to the About Us Webpage To Create the Contact Us Webpage and Add a Heading and Links To Preview a Website in a Browser and Test Page Links Chapter Summary Apply Your Knowledge Extend Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Your Turn CHAPTER FOUR Applying CSS Styles to Webpages Objectives Introduction Project — Format Webpages with CSS Roadmap Using Cascading Style Sheets Inline Styles Embedded Style Sheets External Style Sheets Style Sheet Precedence CSS Basics CSS Text Properties CSS Colors Understanding Inline Elements and Block Elements CSS Box Model HTML 83 HTML 84 HTML 84 HTML 85 HTML 86 HTML 86 HTML 87 HTML 87 HTML 87 HTML 88 HTML 88 HTML 89 HTML 91 HTML 92 HTML 94 HTML 94 HTML 95 HTML 99 HTML 101 HTML 104 HTML 105 HTML 106 HTML 107 HTML 107 HTML 108 HTML 109 HTML 110 HTML 110 HTML 111 HTML 111 HTML 112 HTML 114 HTML 116 HTML 118 HTML 120 HTML 122 HTML 124 HTML 125 HTML 127 HTML 129 HTML 130 HTML 135 HTML 139 HTML 140 HTML 140 HTML 141 HTML 141 HTML 143 HTML 143 HTML 144 HTML 144 HTML 145 HTML 146 HTML 147 HTML 149 HTML 150 Creating an External Style Sheet Selectors To Create a CSS File and a Style Rule for the Body Element Linking an HTML Document to a CSS File To Link HTML Pages to the CSS File Aligning Webpage Content To Center Content Creating Style Rules for Structural Elements To Create a Style Rule for the Header Element To Create a Style Rule for the Nav Element To Create a Style Rule for the Main Element To Create a Style Rule for the Footer Element Creating Style Rules for Classes To Create a Style Rule for the equip Class Using CSS List Properties To Create Styles for List Elements To View the Website in a Browser Adding Comments to CSS Files To Add Comments to a CSS File Validating CSS Files To Validate the CSS File To Validate a CSS File with Errors Chapter Summary Apply Your Knowledge Extend Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Your Turn HTML 152 HTML 152 HTML 153 HTML 155 HTML 155 HTML 157 HTML 157 HTML 159 HTML 159 HTML 161 HTML 162 HTML 164 HTML 165 HTML 166 HTML 167 HTML 168 HTML 170 HTML 171 HTML 171 HTML 173 HTML 173 HTML 174 HTML 175 HTML 176 HTML 179 HTML 182 HTML 183 HTML 195 CHAPTER FIVE Responsive Design Part 1: Designing for Mobile Devices Objectives Introduction Project — Redesign a Website for Mobile Devices Roadmap Exploring Responsive Design Designing for Mobile Devices Using Fluid Layouts Creating a Fluid Layout Navigation Elements in Fluid Layouts To Code the Navigation Links as an Unordered List Making Images Flexible To Add Flexible Images Following a Mobile-First Strategy Styles for Content on Mobile Devices Steps in a Mobile-First Strategy Analyze the Home Page for Mobile-First Design To Modify the Home Page To Modify the Style Rule for the mobile Class To Add a Style Rule for the desktop Class Analyze the About Us Page for Mobile-First Design To Modify the About Us Page To Add a Style Rule for the tablet Class To Modify the equip, ul, dt, and dd Style Rules Analyze the Contact Us Page for Mobile-First Design Using the Span Element To Add a Span Element to the Contact Us Page Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML 201 HTML 202 HTML 202 HTML 203 HTML 204 HTML 205 HTML 208 HTML 210 HTML 212 HTML 212 HTML 214 HTML 215 HTML 217 HTML 218 HTML 220 HTML 227 HTML 227 HTML 229 HTML 229 HTML 232 HTML 233 HTML 234 HTML 235 HTML 236 HTML 237 HTML 237 Web Design with HTML5 and CSS3 Comprehensive Contents v Adding Meta Tags To Add the Meta Tag for Responsive Design Testing Webpages in Viewports of Different Sizes To Preview a Mobile Website in the Google Chrome Emulator Chapter Summary Apply Your Knowledge Extend Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Your Turn HTML 238 HTML 238 HTML 239 HTML 240 HTML 242 HTML 243 HTML 244 HTML 245 HTML 246 HTML 251 CHAPTER SIX Responsive Design Part 2: Designing for Tablet and Desktop Devices Objectives HTML 255 Introduction HTML 256 Project — Use Media Queries to Design for Tablet and Desktop Viewports HTML 256 Roadmap HTML 257 Using Media Queries HTML 257 Breakpoints HTML 258 Media Query Expressions HTML 259 Adding Media Queries to an External Style Sheet HTML 261 Designing for Tablet Viewports HTML 261 To Create a Media Query for a Tablet Viewport HTML 262 Page Design for a Tablet Viewport HTML 262 Navigation Design for a Tablet Viewport HTML 263 To Style the Navigation Area for a Tablet Viewport HTML 264 To Style the Main Element for a Tablet Viewport HTML 266 To Show and Hide Content for a Tablet Viewport HTML 267 About Us Page Design for a Tablet Viewport HTML 268 To Display and Style the equip Class HTML 269 To Create and Style the items Class for a Tablet Viewport HTML 270 Designing for Desktop Viewports HTML 274 To Create a Media Query for a Desktop Viewport HTML 274 About Us Page Design for a Desktop Viewport HTML 281 Modifying Breakpoints HTML 283 To Determine the Viewport Width for Tablet and Desktop Viewports HTML 283 To Set the New Viewport Widths for the Tablet and Desktop Media Queries HTML 286 Using Pseudo-Classes HTML 287 To Add Pseudo-Classes to a Style Sheet HTML 288 Using Gradients HTML 291 To Add a Linear Gradient HTML 293 Chapter Summary HTML 295 Apply Your Knowledge HTML 296 Extend Your Knowledge HTML 297 Analyze, Correct, Improve HTML 299 In the Labs HTML 300 Consider This: Your Turn HTML 308 CHAPTER SEVEN Improving Web Design with New Page Layouts Objectives Introduction Project — Use HTML5 Structural Elements to Redesign a Website Roadmap Using HTML5 Semantic Elements Article Element Aside Element Section Element Figure and Figure Caption Elements Website Layout HTML 311 HTML 312 HTML 312 HTML 314 HTML 315 HTML 315 HTML 317 HTML 319 HTML 320 HTML 322 Redesigning the Home Page To Add a figure Element to the Home Page To Update the Style Sheet for the New Design in a Mobile Viewport To Add New Style Rules for Anchor Elements in a Mobile Viewport To Update the Style Sheet for the New Design in a Tablet Viewport To Add New Style Rules to the Tablet Viewport To Update the Style Sheet for the New Design in a Desktop Viewport To Add New Style Rules to the Desktop Viewport Updating the About Us Page To Add Section Elements to the About Us Page To Style the About Us Page for a Tablet Viewport To Style the About Us Page for a Desktop Viewport Updating the Contact Us Page To Modify the Contact Us Page To Style the Contact Us Page Creating the Nutrition Page To Add article and aside Elements to the Nutrition Page To Style the Nutrition Page for a Mobile Viewport To Create a Three-Column Layout for the Nutrition Page in a Tablet Viewport To Apply the Overflow Property to the main Element Style Rule To Style the article Element for the Nutrition Page To Style the aside Element for the Nutrition Page To Style the article h2 Element for the Nutrition Page in a Desktop Viewport Chapter Summary Apply Your Knowledge Extend Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Your Turn CHAPTER EIGHT Creating Tables and Forms Objectives Introduction Project — Create a Table and a Form Roadmap Discovering Tables Creating a Table with HTML Elements Table Borders, Headers, and Captions Table Tag Attributes Use of Tables Planning the Table To Add a Table Element to the Classes Page Styling Table Elements Styling Tables for Responsive Web Design To Style a Table for a Tablet Viewport To Style a Table for a Desktop Viewport Creating Webpage Forms Form Controls Form Labels Attributes of HTML Tags Used to Create Forms Form Processing To Add a Form, Labels, and Text Input Controls to the Contact Us Page To Add email and tel Input Controls to a Form To Add Check Boxes to a Form To Add a select Element to a Form To Add a textarea Element to a Form To Add Submit and Reset Buttons to a Form Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML 323 HTML 326 HTML 327 HTML 329 HTML 330 HTML 332 HTML 334 HTML 336 HTML 340 HTML 340 HTML 342 HTML 344 HTML 345 HTML 346 HTML 346 HTML 349 HTML 350 HTML 353 HTML 353 HTML 354 HTML 355 HTML 357 HTML 358 HTML 360 HTML 361 HTML 363 HTML 363 HTML 365 HTML 372 HTML 375 HTML 376 HTML 376 HTML 378 HTML 378 HTML 379 HTML 380 HTML 382 HTML 382 HTML 382 HTML 385 HTML 390 HTML 391 HTML 391 HTML 394 HTML 396 HTML 396 HTML 400 HTML 400 HTML 402 HTML 402 HTML 404 HTML 404 HTML 405 HTML 407 HTML 407 vi Contents Web Design with HTML5 and CSS3 Comprehensive Styling Forms TTo Style a Form for a Mobile Viewport TTo Style a Form for a Tablet Viewport TTo Style a Form for a Desktop Viewport Chapter Summary Apply Y Your Knowledge Extend Y Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Y Your Turn CHAPTER NINE Integrating Audio and Video Objectives Introduction Project — Add Audio and Video to a Webpage Roadmap Using Multimedia Creating Multimedia Files Embedded vs External Multimedia Media Players and Plug-Ins HTML5 and Multimedia Flash Java Applets Object Element Integrating Audio Audio File Formats File Compression and Codecs HMTL5 audio Element TTo Add Audio to the Home Page Integrating Video Video File Formats HTML5 video Element Using the video Element TTo Add Video to the About Us Page TTo Style the Video TTo Validate the Style Sheet TTo Validate the HTML Files Chapter Summary Apply Y Your Knowledge Extend Y Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Y Your Turn CHAPTER TEN Creating Interactivity with Social Media and JavaScript Objectives Introduction Project — Add Social Media and JavaScript to a Webpage Roadmap Using Social Media Facebook T Twitter Google+ Y YouTube Instagram Pinterest Other Social Media Options Blogs Adding Facebook and TTwitter Links to a Website TTo Add Social Media Icons and Links to the Home Page TTo Add Social Media Icons and Links to Webpages To Style the Copyright div Element TTo Style the Social div Element and Social Media Icons HTML 408 HTML 408 HTML 410 HTML 412 HTML 414 HTML 415 HTML 417 HTML 418 HTML 420 HTML 430 HTML 433 HTML 434 HTML 434 HTML 436 HTML 436 HTML 437 HTML 439 HTML 440 HTML 441 HTML 441 HTML 441 HTML 442 HTML 442 HTML 443 HTML 444 HTML 444 HTML 446 HTML 448 HTML 448 HTML 449 HTML 449 HTML 451 HTML 452 HTML 455 HTML 455 HTML 456 HTML 457 HTML 458 HTML 458 HTML 460 HTML 463 HTML 465 HTML 466 HTML 466 HTML 468 HTML 469 HTML 469 HTML 470 HTML 472 HTML 472 HTML 474 HTML 475 HTML 476 HTML 476 HTML 477 HTML 478 HTML 480 HTML 481 HTML 481 Incorporating JavaScript JavaScript TTerminology Writing JavaScript Code Pop-up Windows TTo Add a Pop-up Window to the Home Page TTo Create a Function in an External JavaScript File TTo Call a JavaScript Function The open() Method TTo Add More Functions to a JavaScript File TTo Call the New Functions TTo Validate the Style Sheet TTo Validate the HTML Files Chapter Summary Apply Y Your Knowledge Extend Y Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Y Your Turn CHAPTER ELEVEN Publish and Promote a Website Objectives Introduction Project — Publish a Website Roadmap Finding a Website Search Engines Search Engine Optimization Meta TTags TTo Add a Description Meta Tag to a Webpage TTo Modify Alt Text on a Webpage Publishing a Website Domain Name Website Hosting Publishing a Website FTP Clients TTransferring Files TTo Start FileZilla and Connect to a Remote Server TTo Upload Folders and Files to a Remote Server TTo View and Test a Published Website Marketing a Website Registering with Search Engines TTo Validate the HTML Files Chapter Summary Apply Y Your Knowledge Extend Y Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Y Your Turn CHAPTER TWELVE Maintaining a Website Objectives Introduction Project — Performing Website Maintenance Roadmap Website Development Life Cycle Website Planning Website Analysis Website Design and Development Website Testing Website Implementation Website Maintenance Reviewing Websites Updating Websites TTo Update the Home Page TTo Update the About Us Page TTo Update the Classes Page TTo Improve the Contact Us Page Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML 484 HTML 485 HTML 487 HTML 488 HTML 488 HTML 489 HTML 490 HTML 491 HTML 492 HTML 493 HTML 495 HTML 495 HTML 496 HTML 497 HTML 498 HTML 498 HTML 500 HTML 503 HTML 505 HTML 506 HTML 506 HTML 507 HTML 508 HTML 508 HTML 509 HTML 509 HTML 511 HTML 512 HTML 513 HTML 513 HTML 514 HTML 515 HTML 516 HTML 517 HTML 518 HTML 519 HTML 520 HTML 520 HTML 521 HTML 521 HTML 522 HTML 523 HTML 524 HTML 524 HTML 525 HTML 527 HTML 529 HTML 530 HTML 530 HTML 532 HTML 532 HTML 534 HTML 534 HTML 534 HTML 536 HTML 538 HTML 538 HTML 539 HTML 540 HTML 540 HTML 541 HTML 541 HTML 542 Web Design with HTML5 and CSS3 Comprehensive Contents vii Project Management Content Updates Copyright Law Content Management Systems Web Frameworks E-Commerce TTo Validate the Style Sheet TTo Validate the HTML Files Chapter Summary Apply Y Your Knowledge Extend Y Your Knowledge Analyze, Correct, Improve In the Labs Consider This: Y Your Turn HTML 543 HTML 545 HTML 545 HTML 545 HTML 548 HTML 549 HTML 550 HTML 551 HTML 551 HTML 552 HTML 553 HTML 554 HTML 555 HTML 559 Common HTML Elements APPENDIX B CSS Quick Reference CSS Properties Color Reference APPENDIX D Accessibility Standards for Webpage Developers Making the Web Accessible Section 508 Guidelines Web Content Accessibility Guidelines APPENDIX E Symbols and Characters Quick Reference Using Symbols and Special Characters Appendices APPENDIX A HTML Quick Reference APPENDIX C Color Reference Palette Index APP APP 17 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 APP 29 APP 31 APP 31 APP 32 APP 37 IND Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter How should you submit solutions to questions in the assignments identified with a symbol? Every assignment in this book contains one or more questions identified with a symbol These questions require you to think beyond the assigned presentation Present your solutions to the questions in the format required by your instructor Possible formats may include one or more of these options: create a document that contains the answer; present your answer to the class; discuss your answer in a group; record the answer as audio or video using a webcam, smartphone, or portable media player; or post answers on a blog, wiki, or website Apply Your Knowledge Creating Media Queries Instructions: In this exercise, you will use your text editor to add tablet and desktop media queries to a style sheet You will create style rules for a tablet viewport and a desktop viewport You then add a style rule for an image element to style the pictures in two columns for a tablet viewport and three columns for a desktop viewport The completed webpage is shown in Figure 6–53 for a tablet viewport and Figure 6–54 for a desktop viewport You will also use professional web development practices to indent, space, comment, and validate your code Figure 6–53 Figure 6–54 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 CONSIDER THIS STUDENT ASSIGNMENTS HTML Open apply06.html in your text editor, review the page, and modify the comment at the top of the page to include your name and today’s date Open the applystyles06.css file from the apply\css folder Modify the comment at the top of the style sheet to include your name and today’s date In the applystyles06.css file, add a media query to target a tablet viewport Use min-width: 481px and include the following comment, Styles for tablet layout Create a new style rule for the media query img element to set the width to 45% within the tablet In the applystyles06.css file, add a media query to target a desktop viewport Use min-width: 769px and include the following comment, Styles for desktop layout Create a new style rule for the img element to set the width to 30% within the desktop media query Save all of your changes and open the apply06.html in Google Chrome Use the developer tools in Google Chrome to view each viewport’s dimensions and determine a better viewport size for the desktop viewport 10 Modify the desktop media query with the new value in the applystyles06.css file 11 Validate your HTML document using the W3C validator found at validator.w3.org and fix any errors that are identified 12 Validate your CSS file using the W3C validator found at http://jigsaw.w3.org/css-validator/ and fix any errors that are identified 13 Submit the files in a format specified by your instructor 14 In steps and 6, you created media queries to target tablet and desktop viewports by using min-width and a value Describe how you could use max-width and provide the value you would use for each media query Extend Your Knowledge Exploring Gradients Instructions: In this exercise, you will explore how to work with different kinds of gradients You will discover how to modify linear gradients and how to create angled gradients, diagonal gradients, radial gradients, and gradients with multiple colors The completed webpage is shown in Figure 6–55 Figure 6–55 Continued Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 > HTML Chapter Perform the following tasks: Open apply06.html in your browser to view the webpage STUDENT ASSIGNMENTS HTML Chapter HTML STUDENT ASSIGNMENTS HTML HTML Chapter Extend Your Knowledge continued Perform the following tasks: Open extend06.html in your browser to view the webpage Adjust the browser window to a desktop viewport Open extend06.html in your text editor and modify the comment at the top of the page to include your name and today’s date Open the styles06.css file from the extend\css folder Modify the comment at the top of the style sheet to include your name and today’s date In the styles.css file, add a linear gradient to the background for the #gradient1 selector Include comments to note which prefix is needed for each browser: background: -moz-linear-gradient(to right, #000066, #99FF99 25%); background: -o-linear-gradient(to right, #000066, #99FF99 25%); background: -webkit-linear-gradient(to right, #000066, #99FF99 25%); background: linear-gradient(to right, #000066, #99FF99 25%); /* List the standard syntax last */ Save your changes and view extend06.html in your browser to view the changes In the styles.css file, add a linear gradient to the #gradient2 selector, but style it to the left, using the same colors, and 10% as the color stop Add the same linear gradient with a prefix for all major browsers and include comments to note the prefix needed for each browser Save your changes and view extend06.html in your browser to view the changes In the styles.css file, add the following radial gradient to the background for the #gradient3 selector Include comments to note which prefix is needed for each browser: background: -webkit-radial-gradient(#006699, #00CC00, #FF0000); background: -o-radial-gradient(#006699, #00CC00, #FF0000); background: -moz-radial-gradient(#006699, #00CC00, #FF0000); background: radial-gradient(#006699, #00CC00, #FF0000); /* List the standard syntax last */ Save your changes and view extend06.html in your browser to view the changes 10 In the styles.css file, add the following repeating radial gradient to the background for the #gradient4 selector Add the same repeating radial gradient with a prefix for all major browsers above the standard syntax and include comments to note the prefix needed for each browser: background: repeating-radial-gradient(#006699, #00CC00 10%, #FF0000) 15%; /* List the standard syntax last */ 11 Save your changes and view extend06.html in your browser to view the changes 12 In the styles.css file, add the following linear gradient to the background for the #gradient5 selector Add the same linear gradient with a prefix for all major browsers above the standard syntax and include comments to note the prefix needed for each browser: background: linear-gradient(to top left, #FFFF00, #FF6600, #006699, #3333FF); /* List the standard syntax last */ 13 Save your changes and view extend06.html in your browser to view the changes 14 In the extend06.html file, add a heading three element with title above each div gradient element 15 Save your files and submit them in a format specified by your instructor 16 In this exercise, you explored more about gradients and used percentages to set color stops Use your browser to research how to set gradient color stops using percentages Include a description of your findings Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Modifying Media Queries Instructions: Work with the analyze06.html file in the analyze folder and the analyzestyles06.css file in the analyze\css folder from the Data Files for Students The analyze06.html webpage is a draft template, but must be corrected and improved for responsive design before presenting it to the client Use Figure 6–56 and Figure 6–57 as a guide to correct these files Figure 6–56 Figure 6–57 Continued > Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter Analyze, Correct, Improve STUDENT ASSIGNMENTS HTML Chapter HTML STUDENT ASSIGNMENTS HTML HTML Chapter Analyze, Correct, Improve continued Correct a Open the analyze06.html file in your editor from the Data Files for Students and then modify the comment at the top of the page to include your name and today’s date b Open the analyzestyles06.css file in your editor from the Data Files for Students and then modify and correct the comment at the top of the document to include your name and today’s date c View analyze06.html in your browser and resize the page to display mobile, tablet, and desktop viewports The navigation links for the tablet viewport extend beyond their boundary at the current breakpoint d Open analyze06.html in Google Chrome and use the developer tools to determine the dimensions for a tablet viewport e In the analyzestyles06.css file, modify the tablet media query with a suitable breakpoint value f In the analyzestyles06.css file, modify the #container width within the desktop media query with a suitable value for a desktop viewport Improve a In the analyzestyles06.css file, pseudo-class properties are included within the desktop media query, but they all use the same value Use #FFCCFF for the hover color value and #9900FF for the active color value b In the analyzestyles06.css file, add a font-size property with value of 1.05em for the :hover pseudo-class c In the analyzestyles06.css file, create new style rule for the body selector within the desktop media query that uses a background property with a value of lineargradient(#FFFFFF, #336699); and then add the properties and values needed to accommodate the major browsers Place the standard syntax at the bottom d In the analyzestyles06.css file, add the property background-attachment with a value of fixed to the style rule for the body selector e Save your changes and test your webpage It should look like Figure 6–56 for the tablet viewport and Figure 6–57 for the desktop viewport f Validate your CSS file using the W3C validator found at http://jigsaw.w3.org/css-validator/ and fix any errors that are identified g Validate your HTML webpage using the W3C validator found at validator.w3.org and fix any errors that are identified h Identify other ways to style a pseudo-class and provide an example In the Labs Lab 1: Designing for Tablet and Desktop Viewports for the New Harvest Food Bank Problem: You volunteer at a local food bank called New Harvest Food Bank that collects community food donations and provides food and other services to those in need The company has asked you to create a responsive website Start with the fbstyles.css and index.html files you completed in Chapter You have already created the mobile layout, but now need to design a tablet and desktop layout Style the webpage shown in Figure 6–58 for the tablet viewport and shown in Figure 6–59 for the desktop viewport Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter STUDENT ASSIGNMENTS HTML Chapter HTML Figure 6–58 Figure 6–59 Instructions: Perform the following tasks: Open your text editor and then open the index.html file in the lab1 folder and the fbstyles.css file in the lab1\css folder In the index.html document, modify the comment at the top of the page to include today’s date In the index.html document, insert a div element, div class="desktop" below the div class=“mobile” element In the index.html document, insert the following paragraph elements in the new div class="desktop" elementToo many people in our local community go to bed hungry, many of whom are children We can reduce that number, but we need your help
Continued Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 > STUDENT ASSIGNMENTS HTML HTML Chapter In the Labs continuedNew Harvest Food Bank is proud to help and support our local community Through your donations, we are able to help feed those in need Please partner with us and help those in your local community with food donations, clothing donations, or by volunteering your time.
In the fbstyles.css file, modify the comment at the top of the page to include today’s date In the fbstyles.css file, create a media query for a tablet viewport and use min-width: 481px Add the following style rules to the tablet media query and include comments for each img { width: 25%; float: left; } header p { margin-bottom: 4em; padding-top: 1.5em; } nav li { display: inline; float: left; margin-left: 1%; margin-right: 1%; padding-left: 0; padding-right: 0; width: 23%; } main { clear: left; margin-top: 12em; } mobile { display: none; } desktop { display: inline; } In the fbstyles.css file, create a media query for a desktop viewport and use min-width: 769px Add the following styles to the desktop media query and include comments for each #container { width: 80%; } Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 margin-top: -5em; } nav ul { margin: 0; padding-left: 0.50%; padding-right: 0.50%; } nav li { background-color: #FFFFFF; border-radius: 0; margin-left: 0; margin-right: 0; padding: 0; width: 18%; } nav li a { color: #FF6600; display: inline-block; padding: 0.7em; font-size: 1.25em; } nav li a:link { color: #FF6600; } nav li a:hover { color: #4C1F00; font-style: italic; } main { border: none; border-radius: 1em; box-shadow: 1em 1em 1em #331400; margin-top: 1em; } 10 In the fbstyles.css file, add a style rule to hide the desktop class for the mobile layout and include a comment 11 Validate your HTML code and fix any errors 12 Validate your CSS code and fix any errors 13 Save all files and open the index.html page within a browser as shown in Figure 6–58 for a tablet viewport and Figure 6–59 for a desktop viewport Continued > Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter nav { STUDENT ASSIGNMENTS HTML Chapter HTML STUDENT ASSIGNMENTS HTML HTML Chapter In the Labs continued 14 Submit your assignment in the format specified by your instructor 15 In step 9, you created a style rule for the nav element and used a negative number for the top margin value Discuss the effect of this property and value on the nav element Lab 2: Designing for Tablet and Desktop Viewports for Steve’s Screen Services Problem: You work for a screening company called Steve’s Screen Services that specializes in screening, cleaning, and repairing screened patios The company has asked you to create a responsive website Start with the screenstyles.css and index.html files you completed in Chapter You have already created the mobile layout, but now need to design a tablet and desktop layout Style the webpage shown in Figure 6–60 for a tablet viewport and Figure 6–61 for a desktop viewport Figure 6–60 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter STUDENT ASSIGNMENTS HTML Chapter HTML Figure 6–61 Instructions: Perform the following tasks: Open your text editor and then open the index.html file in the lab2 folder and the screenstyles css file in the lab2\css folder In the index.html document, modify the comment at the top of the page to include today’s date In the index.html document, insert a div element, div class="desktop" below the div class="mobile" element In the index.html document, insert the following paragraph elements in the new div class="desktop" elementSteve’s Screen Services specializes in screening new patios, screen repairs, and screen cleaning Our professional and courteous staff uses only the best products to service your screen needs.
Are your children or pets ruining your screen? Let us install a durable, tough screen that can handle your pet’s claws and your child’s outdoor activities Our tough screen is guaranteed not to tear.
Contact us today for a free estimate, (555) 654-5555.
In the screenstyles.css file, modify the comment at the top of the page to include today’s date In the screenstyles.css file, create a media query for a tablet viewport and use min-width: 481px Add the following style rules to the tablet media query and include comments for each img { width: 80%; } nav li { display: inline; float: left; margin-left: 1%; margin-right: 1%; padding-left: 0; padding-right: 0; width: 18%; } Continued Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 > STUDENT ASSIGNMENTS HTML HTML Chapter In the Labs continued main { clear: left; } mobile { display: none; } desktop { display: inline; } In the screenstyles.css file, create a media query for a desktop viewport and use min-width: 769px Add the following styles to the desktop media query and include comments for each #container { width: 80%; } img { width: 60%; } nav ul { margin: 0; padding-left: 0.50%; padding-right: 0.50%; } nav li { border-radius: 0; margin-left: 0; margin-right: 0; padding: 0; width: 20%; white-space: nowrap; } nav li a { display: inline-block; padding: 0.7em; font-size: 1.25em; } Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 main { STUDENT ASSIGNMENTS border: none; border-radius: 1em; box-shadow: 1em 1em 1em #331400; margin-top: 1em; } 10 In the screenstyles.css file, add the following pseudo-classes: nav li a:link { color: #FFFFFF; } nav li a:hover { color: #CCFFCC; font-size: 1.5em; } 11 In the screenstyles.css file, add a style rule to the desktop viewport to apply the following linear gradient to the background Insert additional properties and values required to accommodate all major browsers Include comments for all background: linear-gradient(#FFFFFF, #3366CC); 12 In the screenstyles.css file, add a style rule to hide the desktop class for the mobile layout and include a comment 13 Open index.html in Google Chrome and use the developer tools to determine a suitable breakpoint value for the desktop media query and modify the desktop media query 14 Validate your HTML code and fix any errors 15 Validate your CSS code and fix any errors 16 Save all files and open the index.html page within a browser as shown in Figure 6–60 and Figure 6–61 17 Submit your assignment in the format specified by your instructor 18 In step 11, you created a style rule for a gradient Discuss at least three different ways this gradient could be applied Lab 3: Expand Your World Discovering More About CSS3 Properties Problem: In this chapter, you applied a gradient to a webpage; a gradient is a CSS3 property In this exercise, you will explore other CSS3 properties that you have not yet used in this book Instructions: Use your browser to research CSS3 properties and read the information you find Spend some time browsing through examples Locate at least three CSS3 properties that you have not yet used and answer the following questions for each property a Describe the purpose of the property b Provide an example of the code and include a list of possible property values and what each means c Identify where you might apply this property within a webpage d Include a link to your resource HTML Chapter HTML Chapter HTML Continued > Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 STUDENT ASSIGNMENTS HTML HTML Chapter In the Labs continued Submit your answers in the format specified by your instructor CSS is an integral part of the web design process Use your browser to research the latest CSS trends and tips for today’s websites Identify at least three trends or tips and include the URL for each Consider This: Your Turn Applying Additional Responsive Design Techniques to Your Personal Portfolio Website Personal Part 1: In Chapter 5, you styled your personal portfolio website for a mobile layout In this exercise, you update that page to use responsive design as follows: Open the external style sheet you created in Chapter and save it with the name portfoliostyles06.css in the styles folder within the your_turn_1 folder Add your name and the current date as a comment to the first line of the portfoliostyles06.css file In your HTML editor, open the files you created for your portfolio website in Chapter and make sure your name and the current date are added as a comment to the first line of all files a Update the HTML files to modify the link to the external style sheet to reference portfoliostyles06.css b Apply a class named mobile to elements that should only be displayed on a mobile viewport, such as the telephone link c Apply a class named desktop to elements that should only be displayed on a tablet or desktop viewport Update the CSS file to: a Create a media query for tablet and desktop viewports b Create style rules for tablet and desktop viewports c Hide the desktop class for the mobile layout d Hide the mobile class for the desktop layout e Refine your style sheet as desired f Adjust viewport widths if necessary g Add comments to note all changes and updates Save and test your files Validate and correct your HTML and CSS files, and submit your assignment in the format specified by your instructor Part 2: Use your browser to research responsive storytelling and discuss how this web design process could be helpful to your portfolio site Applying Additional Responsive Design Techniques to the WebDevPros Webpages Professional Part 1: In Chapter 5, you created a mobile layout for WebDevPros In this exercise, you will update theCopyright site to2017 include media queries for tablet and desktop viewports Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Add your name and the current date as a comment to the first line of the webdevstyles06.css file Open the files you created for WebDevPros in Chapter in your HTML editor and make sure your name and the current date are added as a comment to the first line of all files Update the HTML files to: a Apply a class named mobile to elements that should only be displayed on a mobile viewport, such as the telephone link b Apply a class named desktop to elements that should only be displayed on a tablet or desktop viewport Update the CSS file to: a Create a media query for tablet and desktop viewports b Create style rules for tablet and desktop viewports c Create style rules for pseudo-classes within the desktop media query d Hide the mobile class for the tablet and desktop viewports e Display the desktop class for tablet and desktop viewports f Refine your style sheet as desired g Adjust viewport widths if necessary h Add comments to note all changes and updates Save and test your files Validate and correct your HTML and CSS files, and submit your assignment in the format specified by your instructor Part 2: In step 5c, you added style rules for pseudo-classes Use your browser to research pseudoclasses Identify two other types of pseudo-classes not covered in this chapter and provide an example of each Applying Additional Responsive Design Strategies to the Dog Hall of Fame Webpages Research and Collaboration Part 1: In Chapter 5, you styled the Dog Hall of Fame webpages for a mobile viewport In this ex- ercise, you will update those pages to apply media queries for tablet and desktop viewports Do the following activities as a group: Open the external style sheet you created in Chapter and save it with the name dogstyles06.css in the styles folder within the your_turn_3 folder Add your name and the current date as a comment to the first line of the dogstyles06.css file Open the files you created for the Dog Hall of Fame in Chapter in your HTML editor and make sure your name and the current date are added as a comment to the first line of all files Modify the link to the external style sheet to reference dogstyles06.css Decide how you will design the tablet and desktop viewports At a minimum, update the HTML and CSS files to the following: a Create a media query for tablet and desktop viewports b Create style rules for tablet and desktop viewports c Create style rules for pseudo-classes within the desktop viewport d Apply a gradient to the webpages in the tablet and desktop viewports Continued > Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter Open the external style sheet you created in Chapter and save it with the name webdevstyles06.css in the styles folder within the your_turn_2 folder STUDENT ASSIGNMENTS HTML Chapter HTML STUDENT ASSIGNMENTS HTML HTML Chapter Consider This: Your T Turn continued e Hide the mobile class for the tablet and desktop viewports f Display the desktop class for the tablet and desktop viewports g Refine your style sheet as desired h Adjust viewport widths where necessary i Add comments to note all changes and updates Save and test your files Validate and correct your HTML and CSS files, and submit your assignment in the format specified by your instructor Part 2: Each person in the group should research web design trends for tablet and desktop viewports and bring it to a group discussion In the discussion, each person should share at least three trends for each viewport Secondly, each person should share an example of a website using the current trends Organize your group’s findings as requested by your instructor Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 ... part WCN 02-200-203 Web Design with HTML5 & CSS3 COMPREHENSIVE Eighth Edition Contents Preface ix Web Design with HTML5 and CSS3 CHAPTER ONE Introduction to the Internet and Web Design Objectives... iii iv Contents Web Design with HTML5 and CSS3 Comprehensive CHAPTER THREE Enhancing a Website with Links and Images Objectives Introduction Project — Add Links and Images to a Website Roadmap... 237 Web Design with HTML5 and CSS3 Comprehensive Contents v Adding Meta Tags To Add the Meta Tag for Responsive Design Testing Webpages in Viewports of Different Sizes To Preview a Mobile Website