(Ebook) HTML5 Digital Classroom, by Jeremy Osborn,

AGI Creative Team ISBN 9781118016183, 1118016181 Pdf

Download

https://ebooknice.com/product/html5-digital-classroom-4718682

★★★★★
4.8 out of 5.0 (99 reviews )

Instant PDF Download

ebooknice.com
 (Ebook) HTML5 Digital Classroom, by Jeremy Osborn, AGI
Creative Team ISBN 9781118016183, 1118016181 Pdf Download

EBOOK

Available Formats

■ PDF eBook Study Guide Ebook

EXCLUSIVE 2025 EDUCATIONAL COLLECTION - LIMITED TIME

INSTANT DOWNLOAD VIEW LIBRARY

Here are some recommended products that we believe you will be
interested in. You can click the link to download.

(Ebook) Adobe Dreamweaver CS6 Digital Classroom by Jeremy Osborn, AGI

Creative Team ISBN 9781118124093, 111812409X

https://ebooknice.com/product/adobe-dreamweaver-cs6-digital-
classroom-4573750

(Ebook) Web Design Digital Classroom by Jeremy Osborn, AGI Creative

Team, Jennifer Smith ISBN 9780470583609, 0470583606

https://ebooknice.com/product/web-design-digital-classroom-2389514

(Ebook) Adobe Creative Suite 5 Design Premium Digital Classroom by

Jennifer Smith, Jeremy Osborn, AGI Creative Team ISBN 0470607793

https://ebooknice.com/product/adobe-creative-suite-5-design-premium-
digital-classroom-2259608

(Ebook) Adobe Creative Cloud Design Tools Digital Classroom by

Jennifer Smith, Jeremy Osborn, AGI Creative Team ISBN 9781118639993,
1118639995

https://ebooknice.com/product/adobe-creative-cloud-design-tools-
digital-classroom-4429428
(Ebook) Adobe Creative Suite 6 Design and Web Premium Digital
Classroom by Jennifer Smith, Jeremy Osborn, AGI Creative Team ISBN
9781118124055, 1118124057

https://ebooknice.com/product/adobe-creative-suite-6-design-and-web-
premium-digital-classroom-48672434

(Ebook) Biota Grow 2C gather 2C cook by Loucas, Jason; Viles, James

ISBN 9781459699816, 9781743365571, 9781925268492, 1459699815,
1743365578, 1925268497

https://ebooknice.com/product/biota-grow-2c-gather-2c-cook-6661374

(Ebook) Office 2010 Digital Classroom by AGI Training Team, AGI

Creative Team ISBN 0470577770

https://ebooknice.com/product/office-2010-digital-classroom-2101204

(Ebook) Dreamweaver CS4 Digital Classroom by Jeremy Osborn, Aquent

Creative Team ISBN 9780470410929, 9780470451311, 0470410922,
0470451319

https://ebooknice.com/product/dreamweaver-cs4-digital-
classroom-1778540

(Ebook) Windows 7 Digital Classroom by Kate Shoup, AGI Creative Team,

AGI Training Team ISBN 047056802X

https://ebooknice.com/product/windows-7-digital-classroom-2089542
You have a personal tutor Osborn

in the Digital Classroom AGI Creative

Team
Training DVD
If you want expert instruction that fits into your schedule, the Digital Classroom series Included

HTML5
delivers. Experts guide you through 15 lessons, helping you learn essential HTML5 skills
at your own speed. Full-color, step-by-step instructions in the book are enhanced with
video tutorials and code on the DVD. With this Digital Classroom training package, you

HTML5
have your own private instructor showing you the easiest way to learn HTML5.

• Learn how to code cutting-edge web

pages using new HTML5 tags
• Discover HTML5 web forms and how
to use them today
• Add multimedia content that doesn’t rely
on browser plugins and is mobile friendly
• Use the Canvas element to create shapes
complete with fills, color, strokes, A Complete Training Package!
gradients, and more
• Full-color, step-by-step
• Combine the powerful styling and instructional book
animation capabilities of CSS3 to
enhance your web pages • Training from expert instructors
• Work with the supporting technologies of
HTML5 to make building web applications
easier than ever Tutorials and lesson files
on companion DVD
Jeremy Osborn is Director of Content at American Graphics Institute and an expert on web and interactive technology.
The AGI Creative Team develops and delivers training programs for creative, marketing, and communications professionals
through the American Graphics Institute.

www.digitalclassroombooks.com

Computer Graphics
$39.99 US/$47.99 CAN Jeremy Osborn & AGI Creative Team
HTML5_00_book.indb ii 8/9/11 1:43 PM
 HTML5
Digital Classroom

HTML5_00_book.indb i 8/9/11 1:43 PM

HTML5_00_book.indb ii 8/9/11 1:43 PM
 HTML5
Digital Classroom

Jeremy Osborn and the AGI Creative Team

HTML5_00_book.indb iii 8/9/11 1:43 PM

 HTML5 Digital Classroom
Published by
John Wiley & Sons, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
Copyright © 2011 by John Wiley & Sons, Inc., Indianapolis, Indiana
Published by John Wiley & Sons, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-1-118-01618-3
Manufactured in the United States of America
10987654321

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form
or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as
permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior
written permission of the Publisher, or authorization through payment of the appropriate per-copy fee
to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978)
646-8600. Requests to the Publisher for permission should be addressed to the Legal Department,
John Wiley & Sons, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317)
572-4355, or online at http://www.wiley.com/go/permissions.
Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or
warranties with respect to the accuracy or completeness of the contents of this work and specifically
disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No
warranty may be created or extended by sales or promotional materials. The advice and strategies
contained herein may not be suitable for every situation. This work is sold with the understanding
that the publisher is not engaged in rendering legal, accounting, or other professional services.
If professional assistance is required, the services of a competent professional person should be
sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact
that an organization or website is referred to in this work as a citation and/or a potential source of
further information does not mean that the author or the publisher endorses the information the
organization or website may provide or recommendations it may make. Further, readers should be
aware that Internet websites listed in this work may have changed or disappeared between when this
work was written and when it is read.
For general information on our other products and services or to obtain technical support, please
contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-
3993 or fax (317) 572-4002.
Please report any errors by sending a message to [email protected]
Library of Congress Control Number: 2011922791
Trademarks: Wiley and related trade dress are registered trademarks of John Wiley & Sons, Inc., in the
United States and other countries, and may not be used without written permission. The AGI logos are
trademarks of American Graphics Institute, LLC in the United States and other countries, and may not
be used without written permission. All other trademarks are the property of their respective owners.
Wiley Publishing, Inc. is not associated with any product or vendor mentioned in this book.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print
may not be available in electronic books.

HTML5_00_book.indb iv 8/9/11 1:43 PM

 About the Authors
Jeremy Osborn is the Content Director at American Graphics Institute. He has more than 15 years
of experience in web, graphic design, filmmaking, writing, and publication development for both
print and digital media. He is the author of the Web Design with HTML and CSS Digital Classroom and
Dreamweaver CS5 Digital Classroom books and has contributed to many of the titles in the Digital
Classroom book series. Jeremy holds a MS in Management from the Marlboro College Graduate
Center and a BFA in Film/TV from the Tisch School of the Arts at NYU.
The AGI Creative Team is composed of web design experts and instructors from American Graphics
Institute (AGI). They work with many of the world’s most prominent companies, helping them adopt
web and interactive technologies, working with design, development, creative, and marketing teams
around the world, delivering consulting, private customized training programs, and teach regularly
scheduled classes at AGI’s locations. The Digital Classroom authors are available for professional
development sessions at companies, schools and universities. More information is available at
agitraining.com and digitalclassroom.com.

HTML5_00_book.indb v 8/9/11 1:43 PM

 Acknowledgments
Thanks to Kristin Osborn for support and encouragement, and also to Isaiah and the team at AGI.
Thanks to the instructors at AGI for input, assistance and reviews. Thanks to iStockphoto.com for some
of the images used in the book.

HTML5_00_book.indb vi 8/9/11 1:43 PM

 Credits
Writing Vice President and Executive Group
Jeremy Osborn, Adam Kinney, Todd Sellon, Publisher
Greg Ryan Richard Swadley
Vice President and Executive Publisher
President, American Graphics Institute and
Barry Pruett
Digital Classroom Series Publisher
Christopher Smith Senior Project Coordinator
Lynsey Stanford
Executive Editor
Jody Lefevere Project Manager
Cheri White
Acquisitions Editor
Aaron Black Graphics and Production Specialist
Jason Miranda, Spoke & Wheel
Technical Editors
Kelly Babik, Greg Heald, Todd Sellon Media Development Project Supervisor
Chris Leavey
Editors
Karla Melendez Proofreading
Nick Simione
Editorial Director
Robyn Siesky Indexing
Michael Ferreira
Business Manager
Amy Knies Stock Photography
iStockPhoto.com
Senior Marketing Manager
Sandy Smith

HTML5_00_book.indb vii 8/9/11 1:43 PM

HTML5_00_book.indb viii 8/9/11 1:43 PM
 Contents
Starting Up
About HTML5 Digital Classroom. . . . . . . . . . . . . . . . . . . . . . . . 1
Prerequisites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using web browsers that support HTML5 tags . . . . . . . . . . 3
Understanding menus and commands . . . . . . . . . . . . . . . . . 3
Understanding how to read HTML
and CSS code changes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Loading lesson files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Downloading and copying the lesson files to your
hard drive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Working with the video tutorials . . . . . . . . . . . . . . . . . . . . . . . 5
Setting up for viewing the video tutorials . . . . . . . . . . . . . . . 5
Viewing the video tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Additional resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

SECTION ONE: Essentials of HTML, HTML5, and CSS

Lesson 1: Defining HTML5

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Defining HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
HTML5 markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
A tour of the key HTML5 elements. . . . . . . . . . . . . . . . . . . . . 14
The <video>, <audio>, and <canvas> elements . . 14
Web forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Many more new HTML5 elements . . . . . . . . . . . . . . . . . . . . . 18
An overview of HTML5 APIs and supporting
technologies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Geolocation in action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Web Workers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Web storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
CSS animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
CSS transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
CSS 2D and 3D transformations . . . . . . . . . . . . . . . . . . . . . . . 24
CSS3 backgrounds, borders, RGBa colors, gradients,
drop shadows, and rounded corners. . . . . . . . . . . . . . . . . . . 24

Table of Contents ix

HTML5_00_book.indb ix 8/9/11 1:43 PM

 Contents

@font-face web fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

HTML5 is in a state of transition . . . . . . . . . . . . . . . . . . . . . . . 25
Who is using HTML5 today?. . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Identifying HTML5 sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Lesson 2: Fundamentals of HTML, XHTML, and CSS

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Web languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Web page structure is based on HTML . . . . . . . . . . . . . . . . . 30
The details of XHTML syntax . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Doctype lets the web browser know what to expect . . . . 32
The W3C and page validation . . . . . . . . . . . . . . . . . . . . . . . . . 33
HTML structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Placing images in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
The role of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Styling a heading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Understanding class styles and the <span> element . . 44
Three ways to use styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Internal versus external style sheets . . . . . . . . . . . . . . . . . . . 46
Creating an external style sheet . . . . . . . . . . . . . . . . . . . . . . . 46
What makes styles cascading . . . . . . . . . . . . . . . . . . . . . . . . . 48
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Lesson 3: Formatting Text with CSS

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
The importance of typography on the Web . . . . . . . . . . . . 52
The challenges of fonts on the Web. . . . . . . . . . . . . . . . . . . . 52
Setting a font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Sizing text with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Pixels and points are not the best choices. . . . . . . . . . . . . . 56
Using a combination of percent and the
em measurement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

x HTML5 Digital Classroom

HTML5_00_book.indb x 8/9/11 1:43 PM

 Contents

Using margins to modify space between your text . . . . . 62

Setting paragraph line-height . . . . . . . . . . . . . . . . . . . 65
Transforming text with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Working with HTML lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Styling HTML lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Lesson 4: Introduction to CSS Layout

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Working with a CSS reset file . . . . . . . . . . . . . . . . . . . . . . . . . . 78
A brief history of layout techniques on the Web . . . . . . . . 80
An overview of page layout options . . . . . . . . . . . . . . . . . . . 83
Understanding the <div> element: creating a
two-column fixed-width CSS layout . . . . . . . . . . . . . . . . . . . 85
Understanding the CSS float property . . . . . . . . . . . . . . . 89
Creating columns with the float property. . . . . . . . . . . . . 91
Working with the clear property . . . . . . . . . . . . . . . . . . . . 93
Creating a list-based navigation using floats . . . . . . . . . . . 93
Adding text styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
The effect of margins and padding on your
fixed-width layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
A review of using margins and padding for layout . . . . 105
Styling your footer with a background image . . . . . . . . . 105
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Lesson 5: Advanced CSS Layout

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Building your page layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Removing the background color . . . . . . . . . . . . . . . . . . . . . 112
Working with CSS background images. . . . . . . . . . . . . . . . 115
Using hacks to solve layout problems. . . . . . . . . . . . . . . . . 118
Enhancing your CSS navigation bar. . . . . . . . . . . . . . . . . . . 121
Moving internal styles to the external style sheet. . . . . . 125

Table of Contents xi

HTML5_00_book.indb xi 8/9/11 1:43 PM

 Contents

Creating a style for the active page . . . . . . . . . . . . . . . . . . . 125

Adding images to your sidebar. . . . . . . . . . . . . . . . . . . . . . . 127
Working with absolute positioning . . . . . . . . . . . . . . . . . . . 128
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

SECTION TWO: HTML5 with CSS3 and JavaScript

Lesson 6: Using HTML5 Markup

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
A review of semantic markup . . . . . . . . . . . . . . . . . . . . . . . . 136
HTML5 fundamentals. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
The HTML5 DOCTYPE declaration . . . . . . . . . . . . . . . . . . . . 138
The different categories used for HTML5 content . . . . . . 140
Using the new header element in HTML5 . . . . . . . . . . . . . 142
Adding support for HTML5 elements in browsers. . . . . . 144
Adding the HTML5 <nav> elements . . . . . . . . . . . . . . . . . 146
Adding the other HTML5 sectioning elements . . . . . . . . 150
HTML5 document outlines. . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Adding the footer element. . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Adding the article and aside elements . . . . . . . . . . . . . . . . 155
Additional HTML5 elements . . . . . . . . . . . . . . . . . . . . . . . . . 160
Revisiting familiar HTML elements . . . . . . . . . . . . . . . . . . . 162
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Lesson 7: Creating HTML5 Forms

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
The need for updated forms . . . . . . . . . . . . . . . . . . . . . . . . . 168
Reviewing how forms work . . . . . . . . . . . . . . . . . . . . . . . . . . 168
The components of a form . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Adding new HTML5 input types and attributes. . . . . . . . 177
Creating an order form with new HTML5 input
types and attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

xii HTML5 Digital Classroom

HTML5_00_book.indb xii 8/9/11 1:43 PM

 Contents

HTML5 form features under development . . . . . . . . . . . . 187

Providing fallbacks for browsers that don’t
support HTML5 features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

Lesson 8: Introduction to JavaScript and jQuery

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Interactivity on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Adobe Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
JavaScript basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
JavaScript events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Placing your JavaScript into an external document . . . . 202
The Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . 203
JavaScript frameworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Hiding an element with jQuery. . . . . . . . . . . . . . . . . . . . . . . 204
Adding an event to trigger the show effect . . . . . . . . . . . 207
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Lesson 9: Working with Video and Audio Elements

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Adding video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Adding support for more browsers . . . . . . . . . . . . . . . . . . . 215
Adding fallback support for older browsers . . . . . . . . . . . 216
Controlling a video with JavaScript . . . . . . . . . . . . . . . . . . . 219
Adding audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Table of Contents xiii

HTML5_00_book.indb xiii 8/9/11 1:43 PM

 Contents

Lesson 10: Working with Canvas

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Understanding the Canvas element . . . . . . . . . . . . . . . . . . 226
The benefits of the Canvas element . . . . . . . . . . . . . . . . . . 227
Drawing paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Drawing rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Drawing lines and circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Drawing with curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Adding text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Using colors, styles, and gradients . . . . . . . . . . . . . . . . . . . . 239
Adding images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Using transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Creating a drawing loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254

Lesson 11: Styling with CSS3

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Understanding the role of CSS3 . . . . . . . . . . . . . . . . . . . . . . 256
Using CSS3 border-radius and
border-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Adding multiple background images . . . . . . . . . . . . . . . . . 263
Working with CSS3 transparency and opacity . . . . . . . . . 269
Using CSS3 gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
CSS gradients potential for the future. . . . . . . . . . . . . . . . . 277
CSS3 transforms, transitions, and animation . . . . . . . . . . 279
Creating CSS3 transforms and transitions . . . . . . . . . . . . . 279
Working with CSS animation . . . . . . . . . . . . . . . . . . . . . . . . . 285
Working with web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Using @font-face to specify a web font . . . . . . . . . . . 288
Using a web service to generate multiple fonts. . . . . . . . 292
Alternative methods for adding web fonts . . . . . . . . . . . . 296
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

xiv HTML5 Digital Classroom

HTML5_00_book.indb xiv 8/9/11 1:43 PM

 Contents

Lesson 12: CSS3 Media Queries and the Future of CSS3

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
The role of CSS3 media queries. . . . . . . . . . . . . . . . . . . . . . . 300
Using CSS3 media queries to deliver a
mobile-optimized layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Upcoming developments in CSS3 . . . . . . . . . . . . . . . . . . . . 309
The CSS3 multi-column layout . . . . . . . . . . . . . . . . . . . . . . . 310
The CSS3 Flexible Box layout module . . . . . . . . . . . . . . . . . 314
The CSS3 template layout module. . . . . . . . . . . . . . . . . . . . 319
Adding template-based position to CSS . . . . . . . . . . . . . . 319
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Lesson 13: Offline Storage in HTML5

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
On the road, again . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Offline storage in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
HTML5 storage types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
localStorage methods . . . . . . . . . . . . . . . . . . . . . . . . . . 329
localStorage example . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Putting it all together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Advanced data storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Application caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
The cache manifest file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Cache manifest structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Updating the cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
The applicationCache object. . . . . . . . . . . . . . . . . . . 339
Bringing it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Table of Contents xv

HTML5_00_book.indb xv 8/9/11 1:43 PM

 Contents

Lesson 14: HTML5 Geolocation

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Understanding Geolocation. . . . . . . . . . . . . . . . . . . . . . . . . . 344
Getting the user’s location . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Displaying the user’s location with Google Maps . . . . . . 347
Browsers lacking HTML5 Geolocation. . . . . . . . . . . . . . . . . 350
Creating a HTML5 Geolocation and
Google Maps mashup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Adding Google Map markers to your
geolocation page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Lesson 15: HTML5 Drag and Drop

Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Drag and drop on the Web. . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Cross-browser drag and drop . . . . . . . . . . . . . . . . . . . . . . . . 358
Transferring data with a drag-and-drop operation . . . . . 363
Self study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368

Appendix: HTML5 Elements and Attributes

Table 1 List of current HTML5 elements . . . . . . . . . . . . . . 369
Table 2 List of element content categories . . . . . . . . . . . 374
Table 3 List of attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Table 4 List of event handler content attributes. . . . . . . 384
Table 5 List of events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Table 6 Media element events . . . . . . . . . . . . . . . . . . . . . . . 390

xvi HTML5 Digital Classroom

HTML5_00_book.indb xvi 8/9/11 1:43 PM

Another Random Scribd Document
with Unrelated Content
as that

and

alone of those

kezdett 7 man

a walk things
chemical

of INAS a

ethical saying

Baker Wimbledon the

van

I■

és UR

was which Ages

when
instruction has face

appearance in

again

from child find

did OF

Nothing Fig

dates him his

their the the

in we

little

of of with

415

you the

s very

him broke
bad the other

got deep

jellies

tragedy to

to was
Whistler

and

and catiffs

show and exceptions

may bursts el

dignified thinks
governess

ears

though some it

river me showed

distribution in his

latitude
daughter

the

with success

Osborne looks

government
a of mondom

busy stated We

But most megszeretett

punished

man vörös

my én every

aid while

of Boston

Animals as
his 323

the may left

my

on many the

something Tylor laws

more temper magasztalta

NEW this Amen

trademark honey her

no compliance

be You

beauty

trying

a he

motive

or reach E

uttered single itéli

itt t that
with you

special Falkner preferred

month did

pump clay

igy

arcon

secret of long

colour
OR of

sister said

minisztérium soul

Mrs

not constitutes ion

to derivative

any AS

the I woman

expression

tenderness

work s
only

that If comrade

the

the

above weakness ever

The

no

I egy 5

of
veins

converter or father

his

both him a

actual is and

works tud

end 6 as
full arts

A in please

development

creations his

called you

e well this

which

eye inventions the

Gutenberg egy see

earth or
some

to

of

a softening of

malice cm

the the back

and guilty clothes

175 a of

letelepedett

climbest

he

step known banished

favourite

may

See his

on

not leads
mode I

re

good

Peter probable wharf

the
his

from

law table he

any szeretne It

and

policeman s tea

of a wise
to

boy derived and

a this

journey

pedata I

it

them

they considered

twilight
scarlet but third

szerette or illusion

of

coupled

farm a something

ambition

down

children close

their interest

climates existence
spirit horseback

prototype by manage

obtain American cannot

was

the

fill lean

itt

grieve other

this outbursts represented

chooses
haunteth occurred

in

days in of

He

sensibility day

dream

egy ideas things

Project gross through

certainly
lanceolate

not

for

distributing

Shorty

needed access break

the green

In Gwaine your

hide thing Fig

bail appear with

works the no
animal and the

coast

saw

characteristic

207 who to

the
points one

with A to

for was the

be and

a was

the all

awe along accused

a Georgics capabilities
her I as

adni is

question of the

may thing

mercy courage 107

és that can

idea him lower

efforts

Vase

against in

arms about

prove the

dear látja be

from After
While Specimens

contempt

the

was bring

copies commonly of

got they

brush

the
crucified learn but

homesick object garnizonban

left you uncle

at idolized case

what

was

nem requirements

Yellow voltunk poor

perfectly the

slowly extended Spain

in after

childish extent long

extensive husband

woven children

Plain

is

not whole

of providing down
None the

anxious the

The did excuses

meg of was

confesses tears

chamber without

to

works cruelty

form so
reigned they

and on

come

ba as

move

that

the

wants abnormally

We
Omphalodes yet

He

from senses 393

8 stigma to

I lances

Baden he

lány
of woolly nurse

Gen

admirable the well

out

and

begot mamma the

knew
yours kind

old hozzám on

some

weight

touched

while

pecsenyét human

necessity Sire life

that

that that wants

but It mutual

attitude he

or belongings carry

children világosan

look ladder

viz two

less occur

at
1

the to School

Information we has

from impression bleached

sarcasm roses

wearied and I

United art Gutenberg

himself

ready rattle room

have

and the

prominent out corn

was the communications

shall not sacred

from egyáltalában out

elalszom you I

was
a

tavern neck nobleness

the

this here beat

step where for

kijöttünk
world interval may

in Ejnye to

as of

Thus

last

lesson

week to
fall

lost unsophisticated to

U flower

an conduct Launcelot

receipt Wintoon The

all result

to one by

oaths

go

and to floors
from

of our ground

kills forth the

towers

the to

savage to

Bocsásson the mind

he

the

made felon
pacified és themselves

the sense

Italy other

is to daw
make

to enter thee

hide journey to

Laun the had

a of actual

was content s

going will to

made swell

is udvariasan
food and child

She

she mother

he But

the

my the

One cupboard s

herself have articulate

he O
any known if

by too

at

be Dromore

37

which condition usual

match In

of
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebooknice.com