Copyright 2018 Cengage Learning. All Rights Reserved. MWayO noWt be! ceoBpieod,o skca nned, or duplicated, in whole or in part. WCN 02-200-203 www.wowebook.org Want to turn C’s into A’s? Obviously, right? But the right way to go about it isn’t always so obvious. Go digital to get the grades. MindTap’s customizable study tools and eTextbook give you everything you need all in one place. Engage with your course content, enjoy the flexibility of studying anytime and anywhere, stay connected to assignment due dates and instructor notifications with the MindTap Mobile app... and most of all…EARN BETTER GRADES. TO GET STARTED VISIT WWW.CENGAGE.COM/STUDENTS/MINDTAP Copyright 2018 Cengage Learning. All Rights Reserved. MWayO noWt be! ceoBpieod,o skca nned, or duplicated, in whole or in part. WCN 02-200-203 www.wowebook.org 80818_ifc_ptg01.indd 1 1/20/16 9:47 AM New PersPectives oN HTML5 and CSS3 7th Edition Comprehensive Patrick Carey Australia • Brazil • Mexico • Singapore • United Kingdom • United States WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 1 11/3/16 3:15 PM New Perspectives on HTML5 and CSS3, 7th Edition, © 2017 Cengage Learning Comprehensive ALL RIGHTS RESERVED. No part of this work covered by the copyright Patrick Carey herein may be reproduced, transmitted, stored or used in any form or by any means graphic, electronic, or mechanical, including but not limited to Senior Product Director: Kathleen McMahon photocopying, recording, scanning, digitizing, taping, Web distribution, Associate Product Manager: Kate Mason information networks, or information storage and retrieval systems, except Associate Content Development Manager: Alyssa as permitted under Section 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the publisher. Pratt Development Editor: Pam Conrad For product information and technology assistance, contact us at Product Assistant: Abby Pufpaff Cengage Learning Customer & Sales Support, 1-800-354-9706 Senior Content Project Manager: Jennifer K. Feltri-George For permission to use material from this text or product, submit all Art Director: Diana Graham requests online at www.cengage.com/permissions Manufacturing Planner: Fola Orekoya Further permissions questions can be emailed to [email protected] Cover image(s): Shutterstock/AGCuesta Compositor: GEX Publishing Services Library of Congress Control Number: 2016954611 ISBN: 978-1-305-50393-9 Cengage Learning 20 Channel Center Street Boston, MA 02210 USA Cengage Learning is a leading provider of customized learning solutions with office locations around the globe, including Singapore, the United Kingdom, Australia, Mexico, Brazil, and Japan. Locate your local office at: www.cengage.com/global Cengage Learning products are represented in Canada by Notice to the Reader Nelson Education, Ltd. Publisher does not warrant or guarantee any of the For your course and learning solutions, visit www.cengage.com products described herein or perform any Purchase any of our products at your local college store or at our independent analysis in connection with any of the preferred online store www.cengagebrain.com product information contained herein. Publisher does not assume, and expressly disclaims, any obligation Some of the product names and company names used in this book have to obtain and include information other than that been used for identification purposes only and may be trademarks or regis- provided to it by the manufacturer. The reader is tered trademarks of their respective manufacturers and sellers. expressly warned to consider and adopt all safety precautions that might be indicated by the activities Disclaimer: Any fictional data related to persons or companies or URLs used described herein and to avoid all potential hazards. throughout this book is intended for instructional purposes only. At the By following the instructions contained herein, the time this book was printed, any such data was fictional and not belonging reader willingly assumes all risks in connection with to any real persons or companies. such instructions. The publisher makes no Microsoft and the Windows logo are registered trademarks of Microsoft representations or warranties of any kind, including Corporation in the United States and/or other countries. Cengage Learning but not limited to, the warranties of fitness for is an independent entity from Microsoft Corporation, and not affiliated with particular purpose or merchantability, nor are any Microsoft in any manner. such representations implied with respect to the material set forth herein, and the publisher takes no responsibility with respect to such material. The publisher shall not be liable for any special, consequential, or exemplary damages resulting, in whole or part, from the readers’ use of, or reliance upon, this material. Printed in the United States of America Print Number: 01 Print Year: 2016 WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 2 11/3/16 3:15 PM Preface The New Perspectives Series’ critical-thinking, problem-solving approach is the ideal way to prepare students to transcend point-and-click skills and take advantage of all that HTML5 and CSS3 has to offer. In developing the New Perspectives Series, our goal was to create books that give students the software concepts and practical skills they need to succeed beyond the classroom. We’ve updated our proven case-based pedagogy with more practical content to make learning skills more meaningful to students. With the New Perspectives Series, students understand why they are learning what they are learning, and are fully prepared to apply their skills to real-life situations. “I love this text because About This Book it provides detailed instructions and real- This book provides thorough coverage of HTML5 and CSS3, and includes the following: world application • Up-to-date coverage of using HTML5 to create structured websites examples. It is ideal for • Instruction on the most current CSS3 styles to create visually-interesting pages and classroom and online instruction. At the end captivating graphical designs of the term my students • Working with browser developer tools to aid in the creation and maintenance of comment on how much fully-functioning websites they’ve learned and New for this edition! put to use outside the • Coverage of responsive design techniques to create website designs that can scale to classroom.” mobile, tablet, and desktop devices. —Bernice Howard St. Johns River Community • Hands-on study of new HTML elements and CSS styles including layouts using College f lexboxes and grid frameworks. • Exploration of CSS3 styles for graphic design, including image borders, drop shadows, gradient fills, 2D and 3D transformations, and graphic filters. • Exploration of responsive design for web tables. • Coverage of CSS styles for animation and transitions. • Coverage of JavaScript arrays, program loops, and conditional statements. System Requirements This book assumes that students have an Internet connection, a text editor, and a current browser that supports HTML5 and CSS3. The following is a list of the most recent versions of the major browsers at the time this text was published: Internet Explorer 11, Microsoft Edge 15, Firefox 48.02, Safari 10, Opera 39.0, and Google Chrome 53. More recent versions may have come out since the publication of this book. Students should go to the Web browser home page to download the most current version. All browsers interpret HTML5 and CSS3 code in slightly different ways. It is highly recommended that students have several different browsers installed on their systems for comparison and, if possible, access to a mobile browser or a mobile emulator. Students might also want to run older versions of these browsers to highlight compatibility issues. The screenshots in this book were produced using Google Chrome 53 running on Windows 10 (64-bit), unless otherwise noted. If students are using different devices, browsers, or operating systems, their screens might vary from those shown in the book; this should not present any problems in completing the tutorials. iii WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 3 11/3/16 3:15 PM iv New Perspectives Series “New Perspectives texts The New Perspectives Approach provide up-to-date, real-world application Context of content, making book selection easy. The Each tutorial begins with a problem presented in a “real-world” case that is meaningful to step-by-step, hands-on students. The case sets the scene to help students understand what they will do in the tutorial. approach teaches students concepts they hands-on Approach can apply immediately.” Each tutorial is divided into manageable sessions that combine reading and hands-on, step-by-step —John Taylor work. Colorful screenshots help guide students through the steps. trouble? tips, which anticipate Southeastern Technical common mistakes or problems, help students stay on track and continue with the tutorial. College visual overview visual overviews Each session begins with a Visual Overview, a two-page spread that includes colorful, enlarged figures with numerous callouts and key term definitions, giving students a comprehensive preview of the topics covered in the session, as well as a handy study guide. Proskills proskills Boxes ProSkills boxes provide guidance for applying concepts to real-world, professional situations, involving one or more of the following soft skills: decision making, problem solving, t eamwork, verbal communication, and written communication. keY steP Key steps Important steps are highlighted in yellow with attached margin notes to help students pay close attention to completing the steps correctly and avoid time-consuming rework. iNsight insight Boxes InSight boxes offer expert advice and best practices to help students achieve a deeper under- standing of the concepts behind the software features and skills. margin Tips Margin Tips provide helpful hints and shortcuts for more efficient use of the software. The Tips appear in the margin at key points throughout each tutorial, giving students extra information when and where they need it. review Assessment Retention is a key component to learning. At the end of each session, a series of Quick Check aPPlY questions helps students test their understanding of the material before moving on. Engaging challeNge end-of-tutorial Review Assignments and Case Problems have always been a hallmark feature of create the New Perspectives Series. Colorful bars and brief descriptions accompany the exercises, making it easy to understand both the goal and level of challenge a particular assignment holds. refereNce reference Within each tutorial, Reference boxes appear before a set of steps to provide a succinct glossarY/iNdex summary or preview of how to perform a task. In addition, each book includes a combination Glossary/Index to promote easy reference of material. WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 4 11/3/16 3:15 PM HTML5 and CSS3, 7th Edition, Comprehensive v Level Color Scheme Our Complete System of Instruction Coverage To meet Your needs Whether you’re looking for just a small amount of coverage or enough to fill a semester-long class, we can provide you with a textbook that meets your needs. • Introductory books contain an average of 5 to 8 tutorials and include essential skills on the books concepts. • Comprehensive books, which cover additional concepts and skills in depth, are great for a full-semester class, and contain 9 to 12+ tutorials. So, if you are looking for just the essential skills or more complete in-depth coverage of a topic, we have an offering available to meet your needs. Go to our Web site or contact your Cengage Learning sales representative to find out what else we offer. mindTap MindTap is a personalized learning experience with relevant assignments that guide students to analyze, apply, and improve thinking, allowing you to measure skills and outcomes with ease. For instructors: personalized teaching becomes yours with a Learning Path that is built with key student objectives. Control what students see and when they see it. Use as-is, or match to your syllabus exactly: hide, rearrange, add, or create your own content. For students: a unique Learning Path of relevant readings, multimedia, and activities that guide you through basic knowledge and comprehension to analysis and application. Better outcomes: empower instructors and motivate students with analytics and reports that provide a snapshot of class progress, time in course, engagement, and completion rates. The MindTap for HTML5 and CSS3 includes coding labs, study tools, and interactive q uizzing, all integrated into an eReader that includes the full content of the printed text. instructor resources We offer more than just a book. We have all the tools you need to enhance your lectures, check students’ work, and generate exams in a new, easier-to-use and completely revised package. This book’s Instructor’s Manual, Cognero testbank, PowerPoint presentations, data files, solution files, figure files, and a sample syllabus are all available at sso.cengage.com. Acknowledgments I would like to thank the people who worked so hard to make this book possible. Special thanks to my developmental editor, Pam Conrad, for her hard work, attention to detail, and valuable insights, and to Associate Content Developer Manager, Alyssa Pratt, who has worked tirelessly in overseeing this project and made my task so much easier with enthusiasm and good humor. Other people at Cengage who deserve credit are Kathleen McMahon, Sr. Product Manager; Kate Mason, Associate Project Manager; Abby Pufpaff, Product Assistant; Jen Feltri-George, Senior Content Project Manager; Diana Graham, Art Director; Fola Orekoya, Manufacturing Planner; GEX Publishing Services, Compositor, as well as Chris Scriver - Sr. MQA Project Leader, and the MQA testers John Freitas and Danielle Shaw. WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 5 11/3/16 3:15 PM vi New Perspectives Series Feedback is an important part of writing any book, and thanks go to the following reviewers for their helpful ideas and comments: Alison Consol, Wake Technical Community College; Dana Hooper, The University of Alabama; Kenneth Kleiner, Fayetteville Technical Community College; and Laurie Crawford, Franklin University. I want to thank my wife Joan and my six children for their love, encouragement, and patience in putting up with a sometimes distracted husband and father. This book is dedicated to my grandchildren: Benedict, David, and Elanor. – Patrick Carey WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 6 11/3/16 3:15 PM HTML5 and CSS3, 7th Edition, Comprehensive vii BRIEF ConTEnTS htMl level i tutorials tutorial 1 Getting Started with HTML5 ........................... HTML 1 Creating a Website for a Food Vendor tutorial 2 Getting Started with CSS ............................. HTML 83 Designing a Website for a Fitness Club level ii tutorials tutorial 3 Designing a Page Layout ............................ HTML 169 Creating a Website for a Chocolatier tutorial 4 Graphic Design with CSS ............................ HTML 257 Creating a Graphic Design for a Genealogy Website tutorial 5 Designing for the Mobile Web ........................ HTML 341 Creating a Mobile Website for a Daycare Center level iii tutorials tutorial 6 Working with Tables and Columns ..................... HTML 433 Creating a Program Schedule for a Radio Station tutorial 7 Designing a Web Form .............................. HTML 499 Creating a Survey Form tutorial 8 Enhancing a Website with Multimedia .................. HTML 585 Working with Sound, Video, and Animation tutorial 9 Getting Started with JavaScript ....................... HTML 665 Creating a Countdown Clock tutorial 10 Exploring Arrays, Loops, and Conditional Statements ..... HTML 735 Creating a Monthly Calendar appendix a Color Names with Color Values, and HTML Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HTML A1 appendix B HTML Elements and Attributes ....................... HTML B1 appendix c Cascading Styles and Selectors ......................HTML C1 appendix d Making the Web More Accessible. . . . . . . . . . . . . . . . . . . . .HTML D1 appendix e Designing for the Web ............................. HTML E1 appendix f Page Validation with XHTML ......................... HTML F1 glossary ref 1 index ref 11 WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 7 11/3/16 3:15 PM WOW! eBook www.wowebook.org Copyright 2018 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. WCN 02-200-203 aa_C8937_fmtoc_ptg01_hr_i-xvi.indd 8 11/3/16 3:15 PM