Thông tin tài liệu
Rob Crowther
A user-friendly reference guide
MANNING
HTML5
&
CSS3
www.it-ebooks.info
Hello! HTML5 & CSS3
www.it-ebooks.info
www.it-ebooks.info
Hello! HTML5 & CSS3
A user-friendly reference guide
Rob Crowther
MANNING
SHELTER ISLAND
www.it-ebooks.info
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in
quantity. For more information, please contact:
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 261
Shelter Island, NY 11964
Email: orders@manning.com
©2013 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted,
in any form or by means electronic, mechanical, photocopying, or otherwise, without
prior written permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products
are claimed as trademarks. Where those designations appear in the book, and Manning
Publications was aware of a trademark claim, the designations have been printed in initial
caps or all caps.
User Friendly artwork, characters, and strips used by permission from UserFriendly.Org.
All Rights Reserved.
Recognizing the importance of preserving what has been written, it is Manning’s policy to
have the books we publish printed on acid-free paper, and we exert our best efforts to that
end. Recognizing also our responsibility to conserve the resources of our planet, Manning
books are printed on paper that is at least 15 percent recycled and processed without
elemental chlorine.
Manning Publications Co. Development editor: Cynthia Kane
20 Baldwin Road Copyeditor: Tiffany Taylor
PO Box 261 Technical proofreader: Adam London
Shelter Island, NY 11964 Typesetter: Marija Tudor
Cover designer: Marija Tudor
ISBN: 9781935182894
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – MAL – 17 16 15 14 13 12
www.it-ebooks.info
v
brief contents
PART 1 LEARNING HTML5 1
1 Introducing HTML5 markup 3
2 HTML5 forms 38
3 Dynamic graphics 73
4 Audio and video 119
5 Browser-based APIs 153
6 Network and location APIs 191
PART 2 LEARNING CSS3 231
7 New CSS language features 233
8 Layout with CSS3 271
9 Motion and color 313
10 Borders and backgrounds with CSS3 351
11 Text and fonts 392
www.it-ebooks.info
www.it-ebooks.info
vii
contents
preface xv
acknowledgments xvii
about this book xix
PART 1 LEARNING HTML5 1
1 Introducing HTML5 markup 3
Why do we need new elements? 4
New elements for page structure 7
Sectioning content 7
❍
Headings, headers, and the outlining
algorithm 9
❍
Common page elements 15
The HTML DOCTYPE 17
New elements for content 18
Time 18
❍
Images and diagrams with <figure> and
<figcaption> 21
❍
Emphasizing words and phrases 22
HTML5’s new global attributes 23
Accessibility with ARIA 24
❍
Extending HTML with custom
attributes 26
❍
Expressing more than just document
semantics with microdata 28
The HTML5 content model 29
Browser support 32
Supporting Internet Explorer 35
❍
Enabling HTML5 support
in Internet Explorer with html5.js 36
Summary 36
www.it-ebooks.info
viii contents
2 HTML5 forms 38
The limitations of HTML4 forms 39
Numbers, ranges, dates, and times 42
Validation 46
The required attribute 47
❍
The min, max, and pattern
attributes 47
❍
Taking advantage of validation with
CSS 49
❍
Turning off validation 50
Email and URLs 51
Email addresses 51
❍
Web addresses 53
Elements for user feedback 53
The <output> element 53
❍
The <progress> element 55
The <meter> element 56
Less-common form controls 57
Telephone numbers 57
❍
Color pickers 58
<keygen> 59
New attributes for the <input> element 59
Placeholder text 59
❍
Form autofocus 61
❍
Protecting
private information with the autocomplete attribute 61
Extending forms with JavaScript 62
Customizing the validation messages 62
❍
Triggering
validation with JavaScript 64
❍
Responding to any
changes in value 64
❍
Creating combo boxes with
<datalist> 65
❍
Easy ways to work with form
values in JavaScript 67
Browser support and detecting HTML5 features 68
Browser inconsistencies 69
❍
Detecting supported
features 69
❍
The html5-now library 71
Summary 72
3 Dynamic graphics 73
Getting started with <canvas>: shapes, images, and text 74
Drawing shapes 76
❍
Placing images 82
❍
Drawing
text 84
Advanced <canvas>: gradients, shadows, and animation 87
Creating gradients 88
❍
Drawing drop shadows 91
Transformations 92
❍
Animation 94
www.it-ebooks.info
contents ix
Getting started with SVG 96
Applying styles to SVG 98
❍
Drawing common shapes 99
Images, text, and embedded content 101
❍
Transforms,
gradients, patterns, and declarative animation 105
SVG vs. <canvas> 112
Browser support 114
Supporting <canvas> in older versions of IE with
explorercanvas 114
❍
SVG in XML vs. SVG in HTML 115
Embedding SVG as an image 115
❍
Referencing an SVG
image from CSS 116
❍
Embedding SVG as an object 116
SVG support in older browsers with SVG Web and Raphaël 116
Summary 118
4 Audio and video 119
Audio and video on the modern web 119
The <audio> element 123
Common attributes: controls, autoplay, loop, and preload 124
Codecs and license issues 129
❍
Using multiple sources 133
The <video> element 134
<video> element attributes 135
❍
Containers, codecs,
and license issues 138
❍
Easy encoding with Miro Video
Converter 139
❍
Advanced encoding with FFmpeg 140
Using multiple sources 142
Controlling audio and video with JavaScript 144
Integrating media with other content 146
Browser support 150
Web server configuration for audio and video 151
Supporting legacy browsers with Flash video 152
Summary 152
5 Browser-based APIs 153
Rich-text editing with the contenteditable attribute 154
Basic text editing 155
❍
The spellcheck attribute 157
Applying formatting to the editable text 160
Natural user interaction with drag-and-drop 164
Basic drag-and-drop 167
❍
Drag-and-drop in all
browsers 169
www.it-ebooks.info
[...]... Hello! HTML5 and CSS3 MORE DETAILED LISTINGS HAVE ANNOTATIONS JUST LIKE DIAGRAMS THIS ONE POINTS OUT THE EARLIER SNIPPET Code downloads Up-to-date downloadable code samples and other news about the book are available from the publisher’s website at www.manning.com/ HelloHTML5andCSS3 Author Online Purchase of Hello! HTML5 & CSS3 includes free access to a... provided to get you started in JavaScript Book structure and suggested reading order This book is split into two sections: part 1 concentrates on HTML5 and part 2 on CSS3 The HTML5 section has chapters on the new markup features of HTML5, forms and form validation, HTML5 s new dynamic graphics capabilities, using video and audio, new JavaScript APIs for client-side development, and new APIs related to networking... applications for corporate clients such as BNP Paribas, BNY Mellon, Honeywell, and Young & Co.’s Brewery www.it-ebooks.info Part 1 Learning HTML5 his part of the book focuses on HTML5 Chapter 1 introduces you to new and updated markup features in HTML5, chapter 2 discusses forms and form validation, chapter 3 explores HTML5 s new dynamic graphics capabilities, chapter 4 talks about how to use video and... THIS CODE LISTINGS & SNIPPETS Code listings and snippets and any occurrence of code in the text will appear in the LucidaMonoEF font Here is a typical code snippet: HTML5 and CSS3 www.it-ebooks.info about this book xxv Longer listings will look like this: LISTINGS WILL ALSO BE DISCUSSED BY CHARACTERS HERE IS A SIMPLE WEB PAGE Hello! ... and aspect ratio 291 ❍ Additional device-detection features 292 The future of CSS layout 293 Using flexible boxes for nested layout 294 ❍ Using the CSS3 Grid Alignment module 298 ❍ Controlling content flow with CSS3 Regions 303 ❍ Making complex shapes with CSS3 Exclusions and Shapes 305 Browser support 308 inline-block in IE6 and IE7 309 ❍ calc in Chrome and Firefox 310 ❍ box-sizing in Firefox and Safari... “Illiad” Fraser of User Friendly for letting Manning use the User Friendly cartoon characters in the Hello! series and for allowing me to put my own words in the characters’ mouths www.it-ebooks.info about this book You should read this book if you’re interested in learning about the new features in HTML5 and CSS3 available to web developers and enjoy an example-driven, visual approach to learning Readers... 6 look at the new APIs you can use for client-side development and networking www.it-ebooks.info 2 CHAPTER www.it-ebooks.info 1 Introducing HTML5 markup This chapter covers • New semantic elements in HTML5 • Updated HTML4 elements • New global attributes • The HTML5 content model • Getting new elements to work in old browsers This chapter assumes you have some knowledge of previous versions of HTML... www.it-ebooks.info 4 CHAPTER 1 Introducing HTML5 markup We’ll start with some background on how and why the particular set of new elements in HTML5 was chosen Then we’ll examine new elements for the overall structure of web pages before moving on to elements, both new and redefined, intended for particular bits of content You’ll then learn about the new attributes in HTML5 Next, we’ll spend a few pages considering... categorization in HTML5 Finally, you’ll go back to practicalities and learn how to make sure your new HTML5 content will work in old browsers Why do we need new elements? This section looks at some of the research that went into understanding the document structures that web authors were trying to describe semantically with HTML; this information was used to decide which new elements should be added in HTML5 We’ll... of CSS3 Chapter 8 on layout will be of less interest to you, but chapter 11 covers using custom fonts, so you may want to read that section WEB DESIGNER If you’re a pure web designer with no interest in JavaScript, then you can read the book while avoiding most of the code Any snippets of JavaScript you’ll come across in chapters 1 and 7 through 11 can be ignored unless you want to try replicating CSS3 . reference guide
MANNING
HTML5
&
CSS3
www.it-ebooks.info
Hello! HTML5 & CSS3
www.it-ebooks.info
www.it-ebooks.info
Hello! HTML5 & CSS3
A user-friendly. addresses 53
Elements for user feedback 53
The <output> element 53
❍
The <progress> element 55
The <meter> element 56
Less-common form controls
Ngày đăng: 23/03/2014, 02:20
Xem thêm: Hello! HTML5 & CSS3 potx, Hello! HTML5 & CSS3 potx