Advanced HTML5 and CSS3 Specialist

1 Advanced HTML5 and CSS3 Specialist : CIW Web and Mobile Design Series Student Guide CCL02-CDHTCS-CK-1405 version rd042214 Advanced HTML5 and CSS3 Specialist Student Guide Chief Executive Officer Barry Fingerhut Vice President, Operations & Development Todd Hopkins Senior Content Developer Kenneth A. Kozakis Managing Editor Susan M. Lane Editor Sarah Skodak Project Manager/Publisher Tina Strong Customer Service Certification Partners, LLC 1230 W. Washington St., Ste. 201 Tempe, AZ 85281 (602) 275-7700 Copyright 2014, All rights reserved.

2 Advanced HTML5 and CSS3 Specialist Developer Patrick T. Lane Contributors James Stanger, , Sadie Hebert, Jason Hebert and Susan M. Lane Editor Susan M. Lane Project Manager/Publisher Tina Strong Trademarks Certification Partners is a trademark of Certification Partners, LLC. All product names and services identified throughout this book are trademarks or registered trademarks of their respective companies. They are used throughout this book in editorial fashion only. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with the book. Copyrights of any screen captures in this book are the property of the software's manufacturer. Disclaimer Certification Partners, LLC, makes a genuine attempt to ensure the accuracy and quality of the content described herein; however, Certification Partners makes no warranty, express or implied, with respect to the quality, reliability, accuracy, or freedom from error of this document or the products it describes.

3 Certification Partners makes no representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of fitness for any particular purpose. Certification Partners disclaims all liability for any direct, indirect, incidental or consequential, special or exemplary damages resulting from the use of the information in this document or from the use of any products described in this document. Mention of any product or organization does not constitute an endorsement by Certification Partners of that product or corporation. Data used in examples and labs is intended to be fictional even if actual data is used or accessed. Any resemblance to, or use of real persons or organizations should be treated as entirely coincidental.

4 Certification Partners makes every effort to ensure the accuracy of URLs referenced in all its material, but cannot guarantee that all URLs will be available throughout the life of a course. When this course was published, all URLs were checked for accuracy and completeness. However, due to the ever-changing nature of the Internet, some URLs may no longer be available or may have been redirected. Copyright Information This training manual is copyrighted and all rights are reserved by Certification Partners, LLC. No part of this publication may be reproduced, transmitted, stored in a retrieval system, modified, or translated into any language or computer language, in any form or by any means, electronic, mechanical, magnetic, optical, chemical, manual or otherwise without written permission of Certification Partners, 1230 W.

5 Washington Street, Suite 201, Tempe, AZ 85281. Copyright 2014 by Certification Partners, LLC All Rights Reserved ISBN: 0-7423-3250-0 iv 2014 Certification Partners, LLC. All Rights Reserved. Version v 2014 Certification Partners, LLC. All Rights Reserved. Version Table of Contents Course Description .. ix Courseware .. x Course xiv Classroom Setup .. xiv System Requirements .. xiv Conventions and Graphics Used in This Book .. xvi Lesson 1: HTML5 Essentials .. 1-1 Pre-Assessment Questions .. 1-2 Introduction to HTML5 and CSS3 .. 1-3 Migration to Mobile Devices .. 1-3 The Web Development 1-5 The Evolution of HTML5 .. 1-6 HTML5 Structure Elements .. 1-9 Validating HTML5 Code .. 1-10 The <video> Element .. 1-15 The <audio> Element .. 1-19 HTML5 APIs .. 1-21 Case Study .. 1-24 Lesson 1 Review.

6 1-26 Lesson 2: Using Cascading Style Sheets (CSS) Technology .. 2-1 Pre-Assessment Questions .. 2-2 Cascading Style Sheets (CSS) .. 2-3 Style Guides .. 2-3 CSS and HTML .. 2-5 CSS Terms and Syntax .. 2-6 Applying CSS Styles .. 2-9 Page Layout with CSS .. 2-14 CSS Positioning Schemes .. 2-21 The CSS Box Model .. 2-22 Case Study .. 2-25 Lesson 2 Review .. 2-27 Lesson 3: Introduction to CSS Version 3 (CSS3) .. 3-1 Pre-Assessment Questions .. 3-2 Introduction to CSS3 .. 3-3 CSS3 Selectors and Properties .. 3-3 CSS3 Background Properties .. 3-8 CSS3 Border Properties .. 3-14 CSS3 Font Properties .. 3-18 CSS3 Text Effects .. 3-20 Case Study .. 3-24 Lesson 3 Review .. 3-26 Lesson 4: Using Advanced CSS3 Techniques .. 4-1 Pre-Assessment Questions .. 4-2 Introduction to Advanced CSS3 Techniques .. 4-3 CSS3 2D and 3D Transformations.

7 4-3 CSS3 Transitions .. 4-8 CSS3 Animations .. 4-11 CSS3 User Interfaces .. 4-15 Creating Menus and Buttons with CSS3 .. 4-17 Case Study .. 4-21 Lesson 4 Review .. 4-23 Lesson 5: Introduction to JavaScript .. 5-1 Pre-Assessment Questions .. 5-2 HTML5 and JavaScript .. 5-3 Introduction to Scripting .. 5-4 vi 2014 Certification Partners, LLC. All Rights Reserved. Version JavaScript Characteristics .. 5-4 JavaScript vs. Other Languages .. 5-6 Embedding JavaScript into HTML5 Documents .. 5-8 JavaScript and Common Programming Concepts .. 5-10 Objects, Properties and Methods .. 5-10 Variables .. 5-14 Expressions and Operators .. 5-17 Case Study .. 5-23 Lesson 5 Review .. 5-25 Lesson 6: JavaScript Events, Functions and Methods .. 6-1 Pre-Assessment Questions .. 6-2 User Events and JavaScript Event Handlers.

8 6-3 Introduction to JavaScript Functions .. 6-4 Defining a Function .. 6-5 Calling a Function .. 6-9 Methods as Functions .. 6-19 Errors In JavaScript .. 6-22 Case Study .. 6-26 Lesson 6 Review .. 6-27 Lesson 7: Using HTML5 APIs .. 7-1 Pre-Assessment Questions .. 7-2 Introduction to HTML5 APIs .. 7-3 Document Object Model (DOM).. 7-3 Common HTML5 APIs .. 7-4 The Canvas API .. 7-4 The Offline AppCache API .. 7-10 The Geolocation API .. 7-13 The Drag-and Drop API .. 7-16 The File API .. 7-20 The History API .. 7-22 Retrieving Data with XMLHttpRequest .. 7-24 Manipulating Data with jQuery .. 7-24 Case Study .. 7-28 Lesson 7 Review .. 7-30 Lesson 8: Developing HTML5 Forms .. 8-1 Pre-Assessment Questions .. 8-2 Introduction to HTML5 Forms .. 8-3 Cross-Browser Compatible HTML5 Forms .. 8-3 HTML5 Form Input Types.

9 8-4 New Form Elements in HTML5 .. 8-9 HTML5 Global Attributes for Form Elements .. 8-13 Case Study .. 8-21 Lesson 8 Review .. 8-23 Lesson 9: Completing, Submitting and Validating User Input Forms .. 9-1 Pre-Assessment Questions .. 9-2 Improving Forms with HTML5 .. 9-3 HTML5 Attributes for the <form> Element .. 9-3 HTML5 Attributes for the <input> Element .. 9-5 Submitting Forms with the <button> Element .. 9-8 Concepts and Techniques for Validating User Input .. 9-11 Validating User Input with HTML5 Attributes .. 9-13 Validating User Input with JavaScript .. 9-20 Case Study .. 9-22 Lesson 9 Review .. 9-24 Lesson 10: Designing for Mobile Devices .. 10-1 Pre-Assessment Questions .. 10-2 Introduction to Mobile 10-3 Mobile Web Sites vs. Mobile Apps .. 10-3 vii 2014 Certification Partners, LLC.

10 All Rights Reserved. Version Designing Web Sites for Mobile Devices .. 10-6 Page Layout for Mobile Devices .. 10-8 Navigation and Hyperlinks for Mobile Devices .. 10-10 Images and Mobile Design .. 10-13 Validating and Testing Mobile Web Pages .. 10-14 Responsive Web Design .. 10-17 Case Study .. 10-25 Lesson 10 Review .. 10-28 Appendixes .. Appendixes-1 Glossary .. Glossary-1 Index .. Index-1 List of Labs Lab 1-1: Structuring and validating a Web page .. 1-12 Lab 1-2: Embedding video with the HTML5 <video> element .. 1-18 Lab 1-3: Embedding audio with the HTML5 <audio> element .. 1-20 Lab 2-1: Formatting text with CSS .. 2-11 Lab 2-2: Laying out a page's structure using CSS .. 2-18 Lab 2-3: Positioning images relative to text using CSS .. 2-20 Lab 2-4: Modifying elements using CSS margins, borders and padding.