HTML5 Books | Sue Brandreth's Learning Resources

Crowther, R., Lennon, J., Blue, A., and Wanish, G. (2014) HTML5 in Action, Manning Publications Co.

Download Source Code (ZIP 510KB)
Download eBook PDF (PDF 15.2MB)

HTML5 in Action provides a complete introduction to web development using HTML5. You’ll explore every aspect of the HTML5 specification through real-world examples and code samples. It’s much more than just a specification reference, though. It lives up to the name HTML5 in Action by giving you the practical, hands-on guidance you’ll need to use key features.
About the Technology
HTML5 is not a few new tags and features added to an old standard—it’s the foundation of the modern web, enabling its interactive services, single-page UI, interactive games, and complex business applications. With support for standards-driven mobile app development, powerful features like local storage and WebSockets, superb audio and video APIs, and new layout options using CSS3, SVG, and Canvas, HTML5 has entered its prime time.
About the Book
HTML5 in Action provides a complete introduction to web development using HTML5. It explores the HTML5 specification through real-world examples and code samples. It earns the name “in Action” by giving you the practical, hands-on guidance you’ll need to confidently build the sites and applications you—and your clients—have been wanting for years.
This book concentrates on new HTML5 features and assumes you are familiar with standard HTML.

What’s Inside

New semantic elements and form input types
Single-page application design
Creating interactive graphics
Mobile web apps

Part 1 Introduction

1. Chapter 1 HTML5: from documents to applications

1.1. Exploring the markup: a whirlwind tour of HTML5

1.2. Beyond the markup: additional web standards

1.3. The HTML5 DOM APIs

1.4. Additional APIs and specifications

1.5. Summary

Part 2 Browser-based apps

2. Chapter 2 Form creation: input widgets, data binding, and data validation

2.1. Previewing the form and gathering prerequisites

2.2. Building a form’s user interface

2.3. Calculating totals and displaying form output

2.4. Checking form input data with the Constraint Validation API

2.5. Providing fallbacks for unsupported browsers

2.6. Summary

3. Chapter 3 File editing and management: rich formatting, file storage, drag and drop

3.1. The Super HTML5 Editor: application overview, prerequisites and first steps

3.2. Rich-text editing and geolocation

3.3. Managing files locally: the File System, Quota Management, File, and File Writer APIs

3.4. Adding drag-and-drop interactivity

3.5. Summary

4. Chapter 4 Messaging: communicating to and from scripts in HTML5

4.1. Server-sent events (SSE)

4.2. Using WebSockets to build a real-time messaging web app

4.3. Messaging on the client side

4.4. Summary

5. Chapter 5 Mobile applications: client storage and offline execution

5.1. My Tasks: application overview, prerequisites, and first steps

5.2. Managing data with the Web Storage API

5.3. Manging data using IndexedDB

5.4. Creating a web application that works offline: using the application cache manifest

5.5. Summary

Part 3 Interactive graphics, media, and gaming…

6. Chapter 6 2D Canvas: low-level, 2D graphics rendering

6.1. Canvas basics

6.2. Creating a Canvas game

6.3. Breathing life into Canvas elements

6.4. Polishing Canvas games

6.5. Summary

7. Chapter 7 SVG: responsive in-browser graphics

7.1. How bitmap and vector graphics compare

7.2. Starting SVG Aliens with XML

7.3. Adding JavaScript for interactivity

7.4. Summary

8. Chapter 8 Video and audio: playing media in the browser

8.1. Playing video with HTML5

8.2. Controlling videos with the HTMLMediaElement interface

8.3. Specifying multiple formats with the element

8.4. Combining user input with video to build a telestrator

8.5. Summary

9. Chapter 9 WebGL: 3D application development

9.1. Building a WebGL engine

9.2. Communicating with a graphics card

9.3. Putting it all together: creating Geometry Destroyer

9.4. Summary

Appendix A: HTML5 and related specifications

Appendix B: HTML5 API reference

Appendix C: Installing PHP and MySQL

Appendix D: Computer networking primer

Appendix E: Setting up Node.js

Appendix F: Channel messaging

Appendix G: Tools and libraries

Appendix H: Encoding and FFmpeg

Appendix I: HTML next

Appendix J: Links and references

Goldstein, A., Lazaris, L. and Weyl, E. (2011) HTML5 and CSS3 for the Real World, First Edition, SitePoint Pty. Ltd

A newer edition of this book is available

Download eBook PDF (PDF 9,509KB)

Download Source Code (ZIP 2,326KB)

Why should you learn HTML5 and CSS3?

It works on just about every platform, is compatible with older browsers, and handles errors gracefully. You can create powerful, easy-to-maintain, future-proof web pages.

Many common tasks are now simplified, putting more power in your hands.

Additionally, you’ll have the freedom to be more expressive in the semantics of your markup. No more tricky hacks or workarounds. Oh, and its easy to use and seriously fun!

So, perhaps the question is, why would you not learn HTML5 and CSS3?

HTML5 and CSS3 for the Real World will show you how to create dynamic websites using these new technologies. No fluff or hype here – Only fun, effective techniques you can start using today.

This easy-to-follow guide covers everything you need to know to get started today. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds.

“HTML5 & CSS3 for the Real World is the perfect book for those who are new to HTML5 and CSS3, as well as those who are familiar with these topics but want to dive in deeper. These three amazing authors have created one of the best HTML5 and CSS3 resources available today. Worth its weight in gold!” Russ Weakley, Max Design

HTML5 and CSS3 for the Real World is ideal for any web designer or developer who wants to start using the latest generation of web technologies in their everyday work.

This book will teach you how to:

understand the new semantic markup available in HTML5
use CSS3 to make sites beautiful without sacrificing clean markup or resorting to complex workarounds
employ native HTML5 video and audio in your pages
use web fonts to enrich a site’s typography
make web applications accessible using WAI-ARIA
make the most of the new HTML form elements.

This easy-to-follow guide is illustrated with lots of examples, and leads readers through the process of creating great websites from start to finish using HTML5 and CSS3.It also features:

details on all the new HTML5 and CSS3 elements and features
information on the current level of browser support
advice for creating great experiences for all users thanks to progressive enhancement.

McGraith, M. (2011) HTML5 in Easy Steps, Computer Active

Download Source Code (ZIP 1,823KB)

Without doubt HTML5 is the future of the web and HTML5 in easy steps demonstrates all you can achieve NOW in the latest browsers – all described in easy to follow steps.

HTML5 in easy steps instructs you how to employ the latest development for web page design with HyperText Markup Language (HTML5). Modern web browsers have united to support exciting new features of the HTML5 standard that allows easy creation of stunning web pages and engaging interactive applications.

HTML5 in easy steps contains examples and screenshots that illustrate each feature of HTML5, describing how to incorporate meta information about a document within its ‘head’ section and how to add structured ‘body’ content. You’ll learn how to create web pages to display text, images, lists, tables, hyperlinks, forms, audio, and video – and also how to write script instructions that draw and animate graphics on embedded ‘canvas’ areas. Each chapter builds your knowledge so by the end of the book you’ll have gained a sound understanding of HTML5.

HTML5 in easy steps has an easy-to-follow style that will appeal to anyone looking to create compelling web pages for the latest browsers. Ideal for programmers who need to quickly learn the latest HTML5 techniques, students learning website design at school or college, those seeking a career in web development who need a thorough understanding of HTML5, and the enthusiast eager to build the latest HTML5 features into their websites.

Holzner, S. (2011) Sams Teach Yourself HTML5 in 10 Minutes – Sams, Pearson Education

Download eBook PDF (PDF 5,436KB)

Download Source Code (ZIP 3,478KB)

A quick, clear guide to using the exciting new features of HTML5 today.

Practical, hands-on approach helps web designers or developers begin using HTML5 right away.

Step-by-step directions show how to implement HTML5 video, drawing, drag and drop, forms, and more.
Makes sense of all the competing claims and misinformation about what HTML5 is or isn’t.
You don’t need to wait to begin using HTML5, the successor to HTML 4 and XHTML. HTML5 is now being implemented in the latest versions of all the major browsers, and with it come some of the most exciting and powerful advances in web development technology in years.

Teach Yourself HTML5 in 10 Minutes offers straightforward, practical answers for fast results. By working through the book’s clear, step-by-step examples, web designers or developers new to HTML5 can learn everything they need to know to quickly and easily get up to speed with HTML5.

Table of Contents

Introduction
Chapter 1 Essential HTML5
Chapter 2 Drawing in the Canvas Control
Chapter 3 Dragging and Dropping with HTML5
Chapter 4 Web Form Controls
Chapter 5 Inline Editing
Chapter 6 Working with Browser History
Chapter 7 Getting the Point Across with Messaging
Chapter 8 Using Video and Audio
Chapter 9 Web Storage
Chapter 10 The New HTML5 Elements

Hogan, B. P. (2010) HTML5 and CSS3: Develop with Tomorrow’s Standards Today, The Pragmatic Programmers

Download Source Code (ZIP 44,245KB)

Download eBook PDF (PDF 11,533KB)

HTML5 and CSS3 are the future of web development, but you don’t have to wait to start using them. Even though the specification is still in development, many modern browsers and mobile devices already support HTML5 and CSS3. This book gets you up to speed on the new HTML5 elements and CSS3 features you can use right now, and backwards compatible solutions ensure that you don’t leave users of older browsers behind.

This book gets you started working with many useful new features of HTML5 and CSS3 right away. Gone are the days of adding additional markup just to style a button differently or stripe tables. You’ll learn to use HTML5’s new markup to create better structure for your content and better interfaces for your forms, resulting in cleaner, easier-to-read code that can be understood by both humans and programs.

You’ll find out how to embed audio, video, and vector graphics into your pages without using Flash. You’ll see how web sockets, client-side storage, offline caching, and cross-document messaging can ease the pain of modern web development. And you’ll discover how simple CSS3 makes it to style sections of your page. Throughout the book, you’ll learn how to compensate for situations where your users can’t take advantage of HTML5 and CSS3 yet, developing solutions that are backwards compatible and accessible.

You’ll find what you need quickly with this book’s modular structure, and get hands-on with a tutorial project for each new HTML5 and CSS3 feature covered. “Falling Back” sections show you how to create solutions for older browsers, and “The Future” sections at the end of each chapter get you excited about the possibilities when HTML5 and CSS3 reach widespread adoption. Get ready for the future – it’s here already.

Keith, J. (2010) HTML5 For Web Designers, A Book Apart

A more recent edition of this book is available.

Download eBook PDF (First Edition) (PDF 696KB)

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.
HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?
In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

Lowery, J.W. and Fletcher, M. (2011) HTML5 – 24-Hour Trainer, Wrox Programmer to Programmer, Wiley Publishing

Download Source Code (ZIP 26,838KB)

Comprehensive written and interactive instruction for learning HTML5

HTML is the core technology for building websites. Today, with HTML5 opening the Internet to new levels of rich content and dynamic interactivity, developers are looking for information to learn and utilize HTML5. HTML5 24-Hour Trainer provides that information, giving new and aspiring web developers the knowledge they need to achieve early success when building websites.

Covers the most basic aspects of a web page, including a brief introduction to Cascading Style Sheets (CSS)

Provides lessons that are backed up by professionally created training videos and interactive content to fully illustrate the dynamic nature of HTML5 and the Internet, while also providing a full learning experience

Combines easy-to-follow lessons with expertly crafted training videos to provide you with both written and interactive instruction for learning HTML5

Written by bestselling author Joseph Lowery and with DVD content created by well-known multimedia and eLearning producer Mark Fletcher, HTML5 24-Hour Trainer brings the new features of HTML5 and the Internet to life unlike any other resource.

Table of Contents

Introduction xxv

Getting Section I: Started with HT ML5

Lesson 1: What Is HT ML? 3

The Language of the Web 3

How Browsers Style Web Pages 5

The Latest Version: HTML5 6

Try It 7

Lesson 2: Creating Your First Web Page 9

HTML5 Syntaxes: An Embarrassment of Riches 9

Understanding Basic Page Structure 10

Try It 12

Lesson 3: Viewing Web Pages 15

Opening Files in a Browser 15

Setting a Web Workflow 16

Try It 18

Section II : Styling Your Web Page

Lesson 4: What Is CSS ? 21

Understanding Cascading Style Sheets 21

Key CSS Concepts 23

Working with CSS Placement 25

Working with Selectors 26

Lesson 5: Testing CSS 29

Validating Your CSS 29

Checking Your CSS in a Browser 30

Try It 33

Section III : Working with HT ML Basics

Lesson 6: Adding Text 37

Working with Paragraphs 37

Try It 38

Adding Headings 39

Try It 41

Applying Special Characters 42

Try It 43

Lesson 7: Styling Text with CSS 45

Picking Your Font Family 45

Try It 46

Setting Text Size and Line Height 48

Try It 50

Choosing Text Color 51

Try It 52

Aligning and Emphasizing Text 53

Try It 54

Lesson 8: Linking to Content 55

Linking to Other Pages 55

Try It 58

Linking to a Page Section 59

Try It 60

Styling Link States 61

Working with E mail and Document Links 63

Try It 64

Lesson 9: Validating Your Pages 67

Working with the HTML5 doctype 67

Using the W3C Validator 69

Try It 71

Section IV: Incorporating Images

Lesson 10: Working with Images 75

Understanding Web Images 75

Inserting Foreground Images 77

Try It 78

Using Links with Images 79

Aligning Images 80

Try It 81

Including Background Images 83

Try It 84

Lesson 11: Using Image Maps 87

Creating an Image Map 87

Try It 89

Lesson 12: Adding Horizontal Rules 93

Separating Page Sections 93

Sizing and Styling Rules 94

Try It 96

Section V: Using Lists

Lesson 13: Inserting Unordered Lists 101

Working with Bulleted Items 101

Try It 102

Nesting Unordered Lists 103

Changing List Appearance 104

Try It 106

Lesson 14: Working with Ordered Lists 109

Creating Numbered Lists 109

Try It 110

Expanding an Outline 111

Combining Unordered and Ordered Lists 112

Try It 113

Lesson 15: Extending Lists 115

Understanding Website Navigation Bars 115

Working with Lists for Navigation 116

Try It 118

Using Definition Lists and the Tag 120

Try It 123

Section VI: Structuring Tables

Lesson 16: Building a Simple Table 127

Understanding HTML Tables 127

Working with Rows and Columns 130

Try It 131

Lesson 17: Styling Tables 133

Creating White Space in Tables 133

Aligning Tables 136

Working with Borders 137

Modifying Table Colors 139

Try It 141

Lesson 18: Making Tables More Accessible 143

Inserting Captions 143

Incorporating Details and Summary 144

Try It 146

Section VII : Building Forms

Lesson 19: Creating a Form 151

Understanding Forms 151

Using Text and Textarea Fields 153

Try It 154

Working with Radio Buttons 156

Offering Checkbox Options 156

Implementing Select Lists 157

Try It 158

Using Hidden Form Controls 160

Inserting Form Buttons 160

Try It 161

Lesson 20: Enhancing Forms 165

Applying Fieldsets and Legends 165

Try It 166

Using Tables for Form Layout 168

Styling Forms with CSS 169

Understanding Additional HTML5 Form Enhancements 172

Try It 173

Enhancing Section VIII : HT ML with JavaScript

Lesson 21: Adding JavaScript 179

Understanding JavaScript 179

Integrating JavaScript Code 181

Degrading Gracefully 186

Testing JavaScript 187

Try It 189

Lesson 22: Advanced JavaScript 191

Linking External Files 191

Incorporating a JavaScript Framework 194

Try It 196

Section IX : Adding Media

Lesson 23: Working with Plug–Ins 201

Understanding Plug–Ins 201

Inserting an SWF File 205

Adding Silverlight Code 207

Try It 208

Lesson 24: Inserting Audio 211

Using Web–Compatible Audio 211

Linking to MP3 Files 212

Embedding Audio with Plug–Ins 213

Incorporating HTML5 Audio 215

Try It 218

Lesson 25: Inserting Video 221

Working with Video Types 221

Adding a Video Player 223

Integrating Video without a Plug–In 226

Try It 229

Section X: Next Steps in HT ML5

Lesson 26: Looking Ahead in HT ML5 233

Using HTML5 Today 233

What Works Now 234

What Doesn t Work Yet 235

Determining What Works Dynamically 236

Try It 237

Lesson 27: Enhancing Web Page Structure 239

Understanding Current Layouts 239

Working with the New HTML5 Semantics 241

Try It 247

Lesson 28: Integrating Advanced Design Elements 249

Expanding Font Possibilities 249

Designing for Multiple Screens 251

Drawing with 253

Try It 263

Appendix A: Browser Support for HTML5 265

HTML5 New Features 265

CSS3 New Features 271

Appendix B: Advanced HTML5 Features 277

Editable Content 277

Local Storage 278

Geolocation 279

Appendix C: What s on the DVD? 281

System Requirements 281

Using the DVD 282

What s on the DVD 282

Troubleshooting 282

Customer Care 283

View Lesson 1 Video – What is HTML? (FLV 7,746KB)

embedded by Embedded Video
Download Video

Content on this page requires a newer version of Adobe Flash Player.

View Lesson 2 Video – Creating Your First Web Page (FLV 4,745KB)

embedded by Embedded Video
Download Video

Content on this page requires a newer version of Adobe Flash Player.

View Lesson 3 Video – Viewing Web Pages (FLV 4,993KB)

embedded by Embedded Video
Download Video

Content on this page requires a newer version of Adobe Flash Player.

Lawson, B. and Sharp, R. (2011) Introducing HTML5, New Riders

Download Source Code (ZIP 28,676KB)

Download eBook PDF (PDF 7,626KB)

Suddenly, everyone’s talking about HTML5, and ready or not, you need to get acquainted with this powerful new development in web and application design. Some of its new features are already being implemented by existing browsers, and much more is around the corner.

Written by developers who have been using the new language for the past year in their work, this book shows you how to start adapting the language now to realize its benefits on today’s browsers. Rather than being just an academic investigation, it concentrates on the practical – the problems HTML5 can solve for you right away. By following the book’s hands-on HTML5 code examples you’ll learn:

new semantics and structures to help your site become richer and more accessible.
how to apply the most important JavaScript APIs that are already implemented
the uses of native multimedia for video and audio
techniques for drawing lines, fills, gradients, images and text with canvas
how to build more intelligent web forms
implementation of new storage options and web databases
how geolocation works with HTML5 in both web and mobile applications

Celik, T. (2011) HTML5 NOW – A Step-By-Step Tutorial For Getting Started Today, New Riders

Download HTML5 NOW – A Step-By-Step Tutorial For Getting Started Today – HTML5 Extended Reference Guide (PDF 4,071KB)

HTML5 NOW – A Step-By-Step Tutorial For Getting Started Today – Presentation (HTML 1KB) (Need Internet Access)

HTML5 has captured the attention of web designers and developers worldwide. Browsers like Firefox and Safari, and numerous mobile devices (Apple iPhone, Google Android, Palm Pre) all have some support for HTML5 – but it’s not obvious what you can use. That’s where this video and booklet step in. It delivers a solid introduction to HTML5 and how to get started today. The video and booklet provide instruction, examples, and explanations to get started with using HTML5 immediately, both in new projects, and how to transition existing HTML and XHTML pages to HTML5. All this is explained in ways that are compatible with existing browsers and shows authors how to progressively take advantage of new support in modern browsers and devices.

Pilgrim, M. (2010) HTML5: Up and Running, O’Reilly Media, Inc., Google Press

Download eBook PDF (PDF 5,691KB)

Version available on line as:
Mark Pilgrim – Dive into HTML5 (http://diveintohtml5.org/)

If you don’t know about the new features available in HTML5, now’s the time to find out. This book provides practical information about how and why the latest version of this markup language will significantly change the way you develop for the Web.

HTML5 is still evolving, yet browsers such as Safari, Mozilla, Opera, and Chrome already support many of its features — and mobile browsers are even farther ahead. HTML5: Up and Running carefully guides you though the important changes in this version with lots of hands-on examples, including markup, graphics, and screenshots. You’ll learn how to use HTML5 markup to add video, offline capabilities, and more — and you’ll be able to put that functionality to work right away.

Learn new semantic elements, such as <header>, <footer>, and <section>
Meet Canvas, a 2D drawing surface you can program with JavaScript
Embed video in your web pages without third-party plugins
Use Geolocation to let web application visitors share their physical location
Take advantage of local storage capacity that goes way beyond cookies
Build offline web applications that work after network access is disconnected
Learn about several new input types for web forms
Create your own custom vocabularies in HTML5 with microdata

Table of Contents

Preface; Diving In; Conventions Used in This Book; Using Code Examples; A Note on the Editions of This Book; Safari® Books Online; How to Contact Us; Chapter 1: How Did We Get Here?; 1.1 Diving In; 1.2 MIME Types; 1.3 A Long Digression into How Standards Are Made; 1.4 An Unbroken Line; 1.5 A Timeline of HTML Development from 1997 to 2004; 1.6 Everything You Know About XHTML Is Wrong; 1.7 A Competing Vision; 1.8 What Working Group?; 1.9 Back to the W3C; 1.10 Postscript; 1.11 Further Reading; Chapter 2: Detecting HTML5 Features; 2.1 Diving In; 2.2 Detection Techniques; 2.3 Modernizr: An HTML5 Detection Library; 2.4 Canvas; 2.5 Canvas Text; 2.6 Video; 2.7 Video Formats; 2.8 Local Storage; 2.9 Web Workers; 2.10 Offline Web Applications; 2.11 Geolocation; 2.12 Input Types; 2.13 Placeholder Text; 2.14 Form Autofocus; 2.15 Microdata; 2.16 Further Reading; Chapter 3: What Does It All Mean?; 3.1 Diving In; 3.2 The Doctype; 3.3 The Root Element; 3.4 The Element; 3.5 New Semantic Elements in HTML5; 3.6 A Long Digression into How Browsers Handle Unknown Elements; 3.7 Headers; 3.8 Articles; 3.9 Dates and Times; 3.10 Navigation; 3.11 Footers; 3.12 Further Reading; Chapter 4: Let’s Call It a Draw(ing Surface); 4.1 Diving In; 4.2 Simple Shapes; 4.3 Canvas Coordinates; 4.4 Paths; 4.5 Text; 4.6 Gradients; 4.7 Images; 4.8 What About IE?; 4.9 A Complete Example; 4.10 Further Reading; Chapter 5: Video on the Web; 5.1 Diving In; 5.2 Video Containers; 5.3 Video Codecs; 5.4 Audio Codecs; 5.5 What Works on the Web; 5.6 Licensing Issues with H.264 Video; 5.7 Encoding Ogg Video with Firefogg; 5.8 Batch Encoding Ogg Video with ffmpeg2theora; 5.9 Encoding H.264 Video with HandBrake; 5.10 Batch Encoding H.264 Video with HandBrake; 5.11 Encoding WebM Video with ffmpeg; 5.12 At Last, the Markup; 5.13 What About IE?; 5.14 A Complete Example; 5.15 Further Reading; Chapter 6: You Are Here (And So Is Everybody Else); 6.1 Diving In; 6.2 The Geolocation API; 6.3 Show Me the Code; 6.4 Handling Errors; 6.5 Choices! I Demand Choices!; 6.6 What About IE?; 6.7 geo.js to the Rescue; 6.8 A Complete Example; 6.9 Further Reading; Chapter 7: The Past, Present, and Future of Local Storage for Web Applications; 7.1 Diving In; 7.2 A Brief History of Local Storage Hacks Before HTML5; 7.3 Introducing HTML5 Storage; 7.4 Using HTML5 Storage; 7.5 HTML5 Storage in Action; 7.6 Beyond Named Key/Value Pairs: Competing Visions; 7.7 Further Reading; Chapter 8: Let’s Take This Offline; 8.1 Diving In; 8.2 The Cache Manifest; 8.3 The Flow of Events; 8.4 The Fine Art of Debugging, a.k.a. “Kill Me! Kill Me Now!”; 8.5 Let’s Build One!; 8.6 Further Reading; Chapter 9: A Form of Madness; 9.1 Diving In; 9.2 Placeholder Text; 9.3 Autofocus Fields; 9.4 Email Addresses; 9.5 Web Addresses; 9.6 Numbers As Spinboxes; 9.7 Numbers As Sliders; 9.8 Date Pickers; 9.9 Search Boxes; 9.10 Color Pickers; 9.11 And One More Thing…; 9.12 Further Reading; Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words; 10.1 Diving In; 10.2 What Is Microdata?; 10.3 The Microdata Data Model; 10.4 Marking Up People; 10.5 Marking Up Organizations; 10.6 Marking Up Events; 10.7 Marking Up Reviews; 10.8 Further Reading; The All-in-One Almost-Alphabetical Guide to Detecting Everything; List of Elements; Further Reading; Colophon;|

Preface
Chapter 1: How Did We Get Here?
Chapter 2: Detecting HTML5 Features
Chapter 3: What Does It All Mean?
Chapter 4: Let’s Call It a Draw(ing Surface)
Chapter 5: Video on the Web
Chapter 6: You Are Here (And So Is Everybody Else)
Chapter 7: The Past, Present, and Future of Local Storage for Web Applications
Chapter 8: Let’s Take This Offline
Chapter 9: A Form of Madness
Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words
The All-in-One Almost-Alphabetical Guide to Detecting Everything

David, M. (2010) HTML5 – Designing Rich Internet Applications, Focal Press

Download Source Code 1 (ZIP 211KB)

Download Source Code 2 (ZIP 1,213KB)

Download – Some Additional Files – The Canvas Bouncing Men (ZIP 38KB)

Download eBook PDF (PDF 16,597KB)

Implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions. Understand how HTML5 is changing the Web development game with this full-color, project-based treatment that shows you-not just tells you-what HTML5 can do for your Web sites. Reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away. The companion website, http://visualizetheweb.com, is packed full of extra information, online code libraries, and a user forum, offering even more opportunity to learn new skills, practice your coding and interact with other users.

Table of Contents

Introduction

How to use this book

Review the technology covered
Learn how to design with the technology
Analyze a project using the technology covered in section

How HTML 5 came to be

Why Tag based languages matter
Building HTML 5 from standards
Why should HTML 5 be important to you?
Which Web Browsers Support HTML 5
Beyond the PC: the browser is on your phone, your game system and even your fridge

HTML 5: New HTML 5 Tags for Designers

HTML 5 is the first major release of the HTML Web Standard in more than a decade. This release is comprised of several key sections (CSS3, CANVAS, JavaScript). The most fundamental changes come with the core TAG base language of HTML itself. In this section, you will be introduced to the new HTML 5 tags, how you can use them and what you need to look out for as you design you new Web sites.

Understanding HTML 5

This section introduces HTML 5 to the designer.

The rocky road from HTML 4 to HTML 5
- CSS1 and CSS2
- JavaScript grows up
- XML adds data
- Web 2.0 Applications and Solutions
What is included in HTML 5
- Enhancements to core Tag Language
- New Tags
- Supplementing HTML Tags with CSS, vector graphics and scripting
Leveraging HTML 5 as the core to your Rich Internet Applications

Working with HTML 5

The goal of this section is to draw attention to the new HTML tags a designer is likely to use. New tools that can be applied today are reviewed with examples on how to use.

Changes to HTML
- Modifications to sections of content
  - Using the SECTION tag
  - Using the ARTICLE tag
  - Using the HEADER and FOOTER tag
- New features to groups of content
- New Text Level semantic additions and changes
  - Using the MARK tag
  - Using the TIME tag
  - Using the PROGRESS tag
Working with FORMS
- What has changed in HTML FORMS
- Controlling the display of FORM elements
- Displaying data with the DATAGRID and DISPLAY setting
Storing data locally
What is not being supported
How to gracefully migrate your sites to work with the new HTML 5 standard

Take HTML 5 Tags on the road

A sample site using HTML 5 tag technology is diagnosed. The sample site, a basic Corporate site design, will look to highlight the following new HTML Tags:

PROGRESS to load the site
Content formatted with SECTION, ARTICLE and HEADER/FOOTER
A section using new FORM elements, including the DATAGRID, will be shown

HTML 5: CSS3 style for Designers

The goal of “CSS3 style for Designers” is to show how Cascading Style Sheets 3, or CSS3, builds on top of CSS1 and CSS2 to deliver a rich and comprehensive toolset the designer can use for their Web sites.

Understanding CSS3

The goal of this section is to introduce CSS3 to a new user. The following topics will be covered:

Introduction to CSS
CSS as a designers tools
- The format of CSS
- Cascading your designs
- Applying consistent design across your Web sites
Designing your Web page with CSS
- Controlling font display with CSS
- Positioning design elements with CSS
- Creating interactivity with CSS
Working with a CSS Class
- Controlling HTML tag display
- Creating your own elements
Target Web browsers that leverage CSS

Working with CSS3

The goal of this section is to highlight key features of CSS3 that a Designer will be particularly interested in. The following sections will be covered:

Applying Font Control
- Embedding fonts
- Adding text effects
- Increase your control over color
Discovering enhanced Border Control
Dazzling your audience with CSS3 Animation
- Using Transitions
- Applying CSS3 visual effects
- CSS3 Animation
Delivering Solutions for the Mobile market

Take CSS3 on the road

A complete CSS3 Web site is broken down for the designer. The section will diagnose the design highlighting tools and techniques the designer can use on their own Web projects. The following key CSS3 technologies will be presented in a single site, a mock Blog site:

Non-standard FONT
Advanced text formatting
Animation and transitions

HTML 5: Illustration and Images in HTML 5 for Designers

Designers have had limited control with their graphics in Web sites. It has been JPEG or GIF images or bust. Not a lot of choice. To add interactivity designers have relied on plugin technologies such as Adobe’s Flash. The challenge this brings is that you have to ensure that your site visitor has the correct plugin installed. This section reviews the many different image controls HTML 5 provides from new Bitmap image formats through to interactive vector based image control in 2D and 3D.

Understanding Images in HTML 5

New image formats, both bitmap and vector based, are introduced with HTML 5. In this section you will learn which formats you should be using for your web sites.

The tale of two image formats
- Bitmap images – using JPEG, GIF and PNG images on the Web
- Using Vector images on the Web
Introducing Vector Images to the Web
- The long history of Web Vector images
  - The death of VML
  - The Success of Flash
- Standards based Vector images
  - Introducing SVG
  - SVG’s partner in crime: CANVAS Tag
2D and 3D formatting with CANVAS
- Illustrating with CANVAS
- Creating 3D with CANVAS

Working with new image formats in HTML 5

The goal of this section is to focus in on the CANVAS tag and illustrate how you, as a designer, can use it in your Web site designs.

Adding the CANVAS tag to your Web page
Starting with the basics
- Drawing lines
- Adding color
- Adding text
Controlling Shapes
- Drawing Simple Shapes
- Creating Line Paths for complex shapes
- Merging it all together
Adding effects
- Applying Transformations
- Using Shadow effects
- Integrating images
Bringing it all together
- Adding interactivity with JavaScript
- Displaying on the page

Taking PNG and CANVAS control on the road

Arguably, the two most impressive image additions to HTML 5 are the complete ratification of PNG and the new CANVAS vector image tag. In this section, you will build a Web site using PNG for the photo-realistic images with vector images and animation developed using CANVAS. The example site, a mock online store, will leverage the following:

2D illustration with CANVAS
Introduce 3D perspective CANVAS drawing in your Web design
Integrate PNG graphics within CANVAS designs

HTML 5: VIDEO and AUDIO in HTML 5 for Designers

Video has exploded over the Web. It can be argued that sites such as YouTube.com have permanently changed how people interact with video. You simply don’t need cable TV anymore. In this section you will learn about the new ways in which video and audio can be easily embedded into your Web applications.

Understanding Video and Audio in HTML 5

The demand for video delivery over the Web is a critical element to most Web sites. Video, however, is complicated and bulky with failed industry support. Imagine requiring a different TV for each program you watch. This is the state of video on the Web today. HTML 5’s VIDEO and AUDIO tags move to bring a single, unified standard for how you add video to your Web sites and eliminate the need for you visitors to constantly install additional third party software.

The video explosion on the Web
- Streaming media
- Rich Internet Applications
- Flash Killed the Video Star
Using Flash or SilverLight to deliver Video
HTML 5 VIDEO makes it all so simple
VIDEO tags support in Mobile phones

Working with Video and Audio Tags

There are two elements to controlling rich media content: the client and the server. In this section you will learn the details of how to control the client piece, the HTML 5 VIDEO and AUDIO tags, and review the different ways media can be delivered by servers.

Using HTML 5 Rich Media Tags
- Controlling audio with AUDIO tags
- Controlling video with VIDEO tags
Encoding video and audio for delivery over the web
- Using Ogg Video
- Using H.264 Video
Serving it is up old school
- Using traditional video/audio servers to communicate with your HTML 5 code
- When not to use the VIDEO and AUDIO tags

Take HTML 5 Video and Audio on the road

This section analyzes a complete Web site built using Ogg Vorbis and H.264 Video/Audio. The objective the sample site, a mock YouTube.com like site, is to demonstrate using the following:

Embedded VIDEO
CSS3 for page presentation with your video
Using JavaScript to control the video

HTML 5: JavaScript interactivity to your Web Designs

It is often stated that JavaScript is the glue that enables HTML to become interactive. JavaScript has matured into a programmable language that allows you to develop solutions that match the richness of traditional desktop solutions. The goal of this section is to show how the designer can leverage Open Source JavaScript Libraries to quickly build beautiful Web applications.

Understanding JavaScript

The goal of this section is to show how JavaScript can be used with HTML 5 by a designer to give exceptional visual control to the layout of the web page.

JavaScript as programming language
- Developing JavaScript
- Integrating JavaScript with CSS, HTML, SVG and CANVAS
- Taking JavaScript to the next level with AJAX
Using AJAX in your work
- Understanding what AJAX is
- Data control with XML in AJAX
- Library Manager with AJAX
Popular AJAX libraries
- AJAX in the real world
- Developing AJAX libraries

Working with JavaScript

This section takes the most popular AJAX libraries and demonstrates how you can use them in your Web site designs.

Working with AJAX Libraries
Using Adobe SPRY AJAX Libraries
- Visual Controls
- Animation
- Data presentation
Microsoft ASP.NET AJAX Libraries
- Visual Controls
- Data management
- Server integration
Additional Libraries
- Popular Libraries
- Integration with HTML 5

Take JavaScript and HTML on the road

The final exercise reviews how you can build complex, engaging Web sites using JavaScript and HTML 5 standards. The final site, a mock Social Network site, will leverage all of the technologies used in book with a specific focus on:

CSS3
HTML 5
JavaScript for interactivity

Osborn, J. (2011) HTML5 Digital Classroom, AGI Creative Team, Wiley

Download eBoook PDF (PDF 5,227KB)

Download Source Code (ZIP 236,833KB)

This training package – complete with full–color book and instructional video – is the easiest way to learn HTML5!

HTML5 boasts extensive new features that allow you to create dynamic web pages and present users with amazing multimedia experiences, and this one–of–a–kind training package is your guide to creating websites that wow! HTML5 Digital Classroom provides step–by–step instruction to help you gain the essential HTML5 knowledge you need to master the latest HTML5 specifications. This book–and–video package will have you creating web pages and web applications using HTML5, styling using CSS3, and working effectively with JavaScript and jQuery like a pro.

This personal training course uses a full–color book plus video tutorials to teach you how to design compelling websites and web apps, develop your coding skills, and take full advantage of the new web standards for creating rich multimedia experiences. This book starts at a foundational level with an introduction to HTML5 before moving on to more advanced topics like creating HTML5 forms, using geo location, implementing drag–and–drop, utilizing the Canvas element to create 2D and 3D graphics, and more.

Includes 15 lessons in full–color covering introductory to advanced HTML5 topics plus video tutorials and sample files that allow you to test your skills and work at your own pace
Fully updated for the latest HTML5 specifications and browser capabilities
Covers the basics of creating web pages with HTML5, formatting text and layouts with CSS3, using web fonts, understanding HTML5 markup, and optimizing your site for viewing on mobile devices
Explains more advanced concepts like working with video and audio, taking advantage of offline storage, using the Canvas element, enhancing your website with JavaScript and jQuery, and incorporating best practices for web coding into your workflow

Get comfortable with writing and reviewing HTML5 compliant code and put your web development skills to work today with HTML5 Digital Classroom.

Starting Up
Lesson 1: Defining HTML5
Lesson 2: Using HTML5 Markup
Lesson 3: Creating HTML5 Forms
Lesson 4: Working with Video and Audio Elements
Lesson 5: Working with Canvas
Lesson 6: Styling with CSS3
Lesson 7: CSS3 Media Queries and the future of CSS3
Lesson 8: Offline Storage in HTML5
Lesson 9: HTML5 Geolocation
Lesson 10: HTML5 Drag and Drop
Appendix: HTML5

HTML5 boasts extensive new features that allow you to create dynamic Web pages and present users with amazing multimedia experiences. This personal training course uses a full-color book plus video tutorials on a DVD to teach you how to take full advantage of the new Web standard for creating rich multimedia experiences. While learning at your own pace, you’ll discover how to approach site concept creation and bring your vision from the drawing board through to full operability. The step-by-step directions, lesson files and an instructional DVD demonstrate the many exciting features of HTML5.

HTML5 allows you to create dynamic Web pages; this book-and-DVD package offers step-by-step training on its abilities
Presents 15 lessons in full color, supported by video tutorials and lesson files on the DVD, all of which allow you to work at your own pace
Demonstrates how to code, develop, and test Web sites
Explores the many ways the newest version of HTML differs from previous iterations

Table of Contents

Starting Up.

SECTION ONE: Essentials of HTML, HTML5, and CSS.

Lesson 1: Defining HTML5.

Lesson 2: Fundamentals of HTML, XHTML, and CSS.

Lesson 3: Formatting Text with CSS.

Lesson 4: Introduction to CSS Layout.

Lesson 5: Advanced CSS Layout.

SECTION TWO: HTML5 with CSS3 and JavaScript.

Lesson 6: Using HTML5 Markup.

Lesson 7: Creating HTML5 Forms.

Lesson 8: Introduction to JavaScript and jQuery.

Lesson 9: Working with Video and Audio Elements.

Lesson 10: Working with Canvas.

Lesson 11: Styling with CSS3.

Lesson 12: CSS3 Media Queries and the Future of CSS3.

Lesson 13: Offl ine Storage in HTML5.

Lesson 14: HTML5 Geolocation.

Lesson 15: HTML5 Drag and Drop.

Appendix: HTML5 Elements and Attributes.

Sikos, L.F. (2011) Web Standards – Mastering HTML5, CSS3, and XML, First Edition, Apress

A newer version of this book is available

Download eBook PDF (PDF 13,392KB)

Companion website (http://www.masteringhtml5css3.com/)

Web Standards: Mastering HTML5, CSS3, and XML is also a comprehensive guide to current and future standards for the World Wide Web. As a web developer, you’ll have seen problems with inconsistent appearance and behavior of the same site in different browsers. Web standards can and should be used to completely eliminate these problems.

Web Standards: Mastering HTML5, CSS3, and XML describes how you can make the most of web standards, through technology discussions as well as practical sample code that you can use for your own sites and web applications. It also provides a quick guide to standard website creation for Web developers.

Web Standards: Mastering HTML5, CSS3, and XML provides solutions to the most common website problems, and gives you a deep understanding of web standards and how they can be applied to improve your website. You will learn how to create fully standards-compliant websites and provide search engine-optimized Web documents with faster download times, accurate rendering, correct appearance and layout, lower development cost, approved accessibility, backward and forward compatibility, and easy maintenance and content updating. The book covers all major Web standards, focusing on syntax, grammar, recommended annotations, and other standardization concerns.

Learn techniques and best practices to achieve full standards compliance
Write valid markup, styles, and news feeds from scratch or standardize websites by redesign
Restrict markup to semantics and provide reliable layout

Table of Contents

Introduction to Web Standards
Internationalization
Markup Languages: More Than HTML5
Serving and Configuration for a Modern Website
Style Sheets and CSS3
JavaScript and Web Applications
Metadata and the Semantic Web
Web Syndication
Optimizing the Appearance of a CSS3 and HTML5 Website
Accessibility
Web Standards Development Tools
Putting it All Together
HTML5 and CSS3 Best Practices
Markup Validation
Most Common HTML5 and CSS3 Errors

What you’ll learn

The importance and benefits of Web standards
How to write valid markup from scratch
The most up-to-date standards, rather than non-finalized specifications
How to provide meaningful semantics and machine-readable metadata
How to restrict markup to semantics
How to achieve full standard compliance reasonably

Forster, K. and Oggl, B. () HTML5 – Guidelines for Web Developers, Addison-Wesley, Pearson Education

Download ebook PDF (PDF 7,760KB)

Companion Website: http://html5.komplett.cc/code/index_en.html

In HTML5 Guidelines for Web Developers, two pioneering web developers provide a comprehensive guide to HTML5’s powerful new elements and techniques through compact, practical, easy-to-understand examples. You’ll discover just how much you can do with HTML5―from programming audio/video playback to integrating geographical data into pages and applications.

This concise, friendly reference is packed with tips, tricks, and samples for making the most of HTML5 with JavaScript and the DOM. The authors present “pure HTML5” examples that are supported by browsers right now, and they share realistic insights into the challenges of leading-edge HTML5 development. All examples are available for download, with links to web resources for new information and specification updates. Topics covered include

Browser support: What you can (and can’t) do with HTML5 today
HTML5 document structure and semantics
Intelligent forms, including new input types, elements, and client-side validation
The “video” and “audio” elements, and scripting media solutions
Advanced graphics with Canvas and SVG
Geolocation in the browser, including location tracking via Google Maps
Web storage, offline web applications, WebSockets,and Web Workers
Embedding sematic markup with Microdata and the Microdata DOM API
Implementing drag-and-drop with the “draggable” attribute
New global attributes: “data-*,” “hidden,” “contenteditable,” “spellcheck,” and more

If you’re a web developer or designer with at least basic knowledge of HTML, JavaScript, and CSS, this book is all you need to masterHTML5―and get to the cutting edge of web development.

Table of Contents

Preface xi

About the Authors xiii

Chapter 1: Overview of the New Web Standard 1

1.1 How It All Started 1

1.2 Time Travel through Historic Events 7

1.3 In Medias Res 9

1.4 Can I Start Using HTML5 Now? 16

Summary 18

Chapter 2: Structure and Semantics for Documents 19

2.1 Header with “header” and “hgroup” 21

2.2 Content with “article” 22

2.3 Footer with “footer” and “nav” 24

2.4 Sidebar with “aside” and “section” 25

2.5 The Outline Algorithm 27

2.6 Figures with “figure” and “figcaption” 28

2.7 Text-Level Semantics―More New Tags 29

Summary 35

Chapter 3: Intelligent Forms 37

3.1 New Input Types 38

3.2 Useful Attributes for Forms 43

3.3 New Elements 47

3.4 Client-Side Form Validation 57

3.5 Example: A Support Form 64

Summary 68

Chapter 4: Video and Audio 69

4.1 A First Example 70

4.2 The “video” Element and Its Attributes 71

4.3 Video Codecs 73

4.4 Tools for Video Conversion 76

4.5 Which Format for Which Browser? 82

4.6 Interim Solutions for Older Browsers 83

4.7 Video and Scripting―A Simple Video Player 86

4.8 And What About Audio? 99

Summary 105

Chapter 5: Canvas 107

5.1 A First Example 108

5.2 Rectangles 111

5.3 Colors and Shadows 113

5.4 Gradients 114

5.5 Paths 117

5.6 Text 130

5.7 Embedding Images 135

5.8 Pixel Manipulation 141

5.9 Compositing 149

5.10 Patterns 152

5.11 Transformations 156

5.12 Base64 Encoding with “canvas.toDataURL()”163

5.13 “save()” and “restore()”165

5.14 Animations 166

5.15 Anything Still Missing? 173

Summary 177

Chapter 6: SVG and MathML 179

6.1 MathML 180

6.2 SVG 182

Summary 183

Chapter 7: Geolocation 185

7.1 Introduction to Geolocation 186

7.2 A First Experiment: Geolocation in the Browser 190

7.3 Technical Background of Determining Position 193

7.4 Display of Current Position on OpenStreetMap 194

7.5 Location Tracking with Google Maps 196

7.6 Example: Geonotes 197

7.7 Browser Support 202

Summary 203

Chapter 8: Web Storage and Offline Web Applications 205

8.1 Storage 206

8.2 Offline Web Applications 212

8.3 Browser Support 220

8.4 Example: Click to tick! 220

Summary 230

Chapter 9: WebSockets 231

9.1 The WebSocket Server 233

9.2 Example: A Broadcast Server 234

9.3 Example: Battleships 239

Summary 248

Chapter 10: Web Workers 249

10.1 Introduction to Web Workers 249

10.2 Search for Leap Years 251

10.3 Calculate Altitude Profiles with Canvas 253

Summary 259

Chapter 11: Microdata 261

11.1 The Syntax of Microdata 263

11.2 The Microdata DOM API 269

Summary 271

Chapter 12: Finishing Touches: Some Global Attributes 273

12.1 News for the “class” Attribute 274

12.2 Defining Custom Attributes with “data-*” 275

12.3 The “hidden” Attribute 276

12.4 The “classList” Interface 276

12.5 Drag and Drop with the “draggable” Attribute 278

12.5.1 Drag and Drop in Combination with the “FileAPI” 284

12.6 The Attributes “contenteditable” and “spellcheck” 288

Summary 290

Meloni, J. C. (2012) HTML, CSS and JavaScript All in One, Sams Publishing, Pearson Education, Inc

There is a newer edition of this book

Download eBook PDF (PDF 17,338KB)

Download Source Code (ZIP 10,067KB)

Companion Website: http://www.thickbook.com/books-2/sams-teach-yourself-html-css-javascript-all-in-one/

The all-in-one HTML, CSS and JavaScript beginner’s guide: covering the three most important languages for web development.

Covers everything beginners need to know about the HTML and CSS standards and today’s JavaScript and Ajax libraries – all in one book, for the first time
Integrated, well-organized coverage expertly shows how to use all these key technologies together
Short, simple lessons teach hands-on skills readers can apply immediately
By best-selling author Julie MeloniMastering HTML, CSS, and JavaScript is vital for any beginning web developer – and the importance of these technologies is growing as web development moves away from proprietary alternatives such as Flash. Sams Teach Yourself HTML, CSS, and JavaScript All in One brings together everything beginners need to build powerful web applications with the HTML and CSS standards and the latest JavaScript and Ajax libraries.With this book, beginners can get all the modern web development knowledge you need from one expert source. Bestselling author Julie Meloni (Sams Teach Yourself PHP, MySQL and Apache All in One) teaches simply and clearly, through brief, hands-on lessons focused on knowledge you can apply immediately. Meloni covers all the building blocks of practical web design and development, integrating new techniques and features into every chapter. Each lesson builds on what’s come before, showing you exactly how to use HTML, CSS, and JavaScript together to create great web sites.

Table of Contents

Sams Teach Yourself HTML, CSS, & JavaScript All-in-One

PART I: Getting Started on the Web
Chapter 1: Publishing Web Content
Chapter 2: Understanding HTML and XHTML Connections
Chapter 3: Understanding Cascading Style Sheets
Chapter 4: Understanding JavaScript

PART II: Building Blocks of Practical Web Design
Chapter 5: Working with Fonts, Text Blocks, and Lists
Chapter 6: Using Tables to Display Information
Chapter 7: Using External and Internal Links
Chapter 8: Working with Colors, Images, and Multimedia

PART III: Advanced Web Page Design with CSS
Chapter 9: Working with Margins, Padding, Alignment, and Floating
Chapter 10: Understanding the CSS Box Model and Positioning
Chapter 11: Using CSS to Do More with Lists, Text, and Navigation
Chapter 12: Creating Fixed or Liquid Layouts

PART IV: Getting Started with Dynamic Web Sites
Chapter 13: Understanding Dynamic Web Sites
Chapter 14: Getting Started with JavaScript Programming
Chapter 15: Working with the Document Object Model (DOM)
Chapter 16: Using JavaScript Variables, Strings, and Arrays
Chapter 17: Using JavaScript Functions and Objects
Chapter 18: Controlling Flow with Conditions and Loops
Chapter 19: Responding to Events
Chapter 20: Using Windows and Frames

PART V: Advanced JavaScript Programming
Chapter 21: Using Unobtrusive JavaScript
Chapter 22: Using Third Party Libraries
Chapter 23: Greasemonkey: Enhancing the Web with JavaScript
Chapter 24: AJAX: Remote Scripting

PART VI: Advanced Web Site Functionality and Management
Chapter 25: Creating Print-Friendly Web Pages
Chapter 26: Working with Web-Based Forms
Chapter 27: Organizing and Managing a Web Site
Chapter 28: Helping People Find Your Web Pages

MacDonald, M. (2011) HTML5: The Missing Manual, O’Reilly Media, Inc.

A newer edition of this book is available

Download eBook PDF (PDF 20,480KB)

Download Source Code: http://examples.oreilly.com/0636920018001/

HTML5 is more than a markup language—it’s a dozen independent web standards all rolled into one. Until now, all it’s been missing is a manual. With this thorough, jargon-free guide, you’ll learn how to build web apps that include video tools, dynamic drawings, geolocation, offline web apps, drag-and-drop, and many other features. HTML5 is the future of the Web, and with this book you’ll reach it quickly.

The important stuff you need to know:

Structure web pages in a new way. Learn how HTML5 helps make web design tools and search engines work smarter.
Add audio and video without plugins. Build playback pages that work in every browser.
Draw with Canvas. Create shapes, pictures, text, and animation—and make them interactive.
Go a long way with style. Use CSS3 and HTML5 to jazz up your pages and adapt them for mobile devices.
Build web apps with rich desktop features. Let users work with your app offline, and process user-selected files in the browser.
Create location-aware apps. Write geolocation applications directly in the browser.

Table of Contents

The Missing Credits; About the Author; About the Creative Team; Acknowledgments; The Missing Manual Series; Introduction; What You Need to Get Started; When Will HTML5 Be Ready?; About the Outline; About the Online Resources; Safari® Books Online; Part 1: Meet the New Language; Chapter 1: Introducing HTML5; 1.1 The Story of HTML5; 1.2 Three Key Principles of HTML5; 1.3 Your First Look at HTML5 Markup; 1.4 A Closer Look at HTML5 Syntax; 1.5 HTML5’s Element Family; 1.6 Using HTML5 Today; Chapter 2: A New Way to Structure Pages; 2.1 Introducing the Semantic Elements; 2.2 Retrofitting a Traditional HTML Page; 2.3 Browser Compatibility for the Semantic Elements; 2.4 Designing a Site with the Semantic Elements; 2.5 The HTML5 Outlining System; Chapter 3: Meaningful Markup; 3.1 The Semantic Elements Revisited; 3.2 Other Standards that Boost Semantics; 3.3 Google Rich Snippets; Part 2: Creating Modern Web Pages; Chapter 4: Web Forms, Refined; 4.1 Understanding Forms; 4.2 Revamping a Traditional HTML Form; 4.3 Validation: Stopping Errors; 4.4 New Types of Input; 4.5 New Elements; 4.6 An HTML Editor in a Web Page; Chapter 5: Audio and Video; 5.1 Understanding Video Today; 5.2 Introducing HTML5 Audio and Video; 5.3 Format Wars and Fallbacks; 5.4 Controlling Your Player with JavaScript; Chapter 6: Basic Drawing with the Canvas; 6.1 Getting Started with the Canvas; 6.2 Building a Basic Paint Program; 6.3 Browser Compatibility for the Canvas; Chapter 7: Deeper into the Canvas; 7.1 Other Things You Can Draw on the Canvas; 7.2 Shadows and Fancy Fills; 7.3 Making Your Shapes Interactive; 7.4 Animating the Canvas; 7.5 A Practical Example: the Maze Game; Chapter 8: Boosting Styles with CSS3; 8.1 Using CSS3 Today; 8.2 Web Typography; 8.3 Adapting to Different Devices; 8.4 Building Better Boxes; 8.5 Creating Effects with Transitions; Part 3: Building Web Apps with Desktop Smarts; Chapter 9: Data Storage; 9.1 Web Storage Basics; 9.2 Deeper into Web Storage; 9.3 Reading Files; Chapter 10: Offline Applications; 10.1 Caching Files with a Manifest; 10.2 Practical Caching Techniques; Chapter 11: Communicating with the Web Server; 11.1 Sending Messages to the Web Server; 11.2 Server-Sent Events; 11.3 Web Sockets; Chapter 12: More Cool JavaScript Tricks; 12.1 Geolocation; 12.2 Web Workers; 12.3 History Management; Part 4: Appendixes; A Very Short Introduction to CSS; Adding Styles to a Web Page; The Anatomy of a Style Sheet; Slightly More Advanced Style Sheets; A Style Sheet Tour; A Very Short Introduction to JavaScript; How a Web Page Uses JavaScript; A Few Language Essentials; Interacting with the Page; Colophon;|

The Missing Credits
Introduction
Part 1: Meet the New Language
- Chapter 1: Introducing HTML5
- Chapter 2: A New Way to Structure Pages
- Chapter 3: Meaningful Markup
Part 2: Creating Modern Web Pages
- Chapter 4: Web Forms, Refined
- Chapter 5: Audio and Video
- Chapter 6: Basic Drawing with the Canvas
- Chapter 7: Deeper into the Canvas
- Chapter 8: Boosting Styles with CSS3
Part 3: Building Web Apps with Desktop Smarts
- Chapter 9: Data Storage
- Chapter 10: Offline Applications
- Chapter 11: Communicating with the Web Server
- Chapter 12: More Cool JavaScript Tricks
Part 4: Appendixes
- A Very Short Introduction to CSS
- A Very Short Introduction to JavaScript

Crowther, R. (2012) Hello! HTML5 & CSS3: A user-friendly reference guide, Manning Publications

Download eBook PDF (PDF 29,637KB)
Download Source Code (ZIP 36,089KB)

Further information: https://www.manning.com/books/hello!-html5-&-css3

Hello! HTML5 & CSS3 is written for the web designer or developer who wants a fast, example-oriented introduction to the new HTML and CSS features. This snappy, user-friendly, and fun guide will get you started right away.

About this Book

Whether you’re building web pages, mobile apps, or desktop apps, you need to learn HTML5 and CSS3. So why wait? Hello! HTML5 & CSS3 is a smart, snappy, and fun way to get started now.

In this example-rich guide to HTML5 and CSS3, you’ll start with a user-friendly introduction to HTML5 markup and then take a quick tour through forms, graphics, drag-and-drop, multimedia, and more. Next, you’ll explore CSS3, including new features like drop shadows, borders, colors, gradients, and backgrounds. Every step of the way, you’ll find hands-on examples, both large and small, to help you learn by doing.

Purchase of the print book comes with an offer of a free PDF, ePub, and Kindle eBook from Manning. Also available is all code from the book.

What’s inside

Easy-to-follow intro to HTML5 and CSS3
Fully illustrated and loaded with examples
Designed for low-stress learning

No prior experience needed!

Table of Contents

PART 1 LEARNING HTML5

Introducing HTML5 markup
HTML5 forms
Dynamic graphics
Audio and video
Browser-based APIs
Network and location APIs

PART 2 LEARNING CSS3

New CSS language features
Layout with CSS3
Motion and color
Borders and backgrounds with CSS3
Text and fonts

West, M. (2012) HTML5 Foundations, Treehouse Book Series, John Wiley & Sons, Ltd.

Download Source Code (ZIP 86,357KB)

Companion Website: https://html5foundations.com/

Master innovative and eye–catching website design with the exciting new Treehouse Series of books

Turn plain words and images into stunning websites using HTML5 and this beautiful, full–colour guide. Taking you beyond the constraints of prebuilt themes and simple site building tools, this new Treehouse book combines practicality with inspiration to show you how to create fully customized, modern, and dazzling websites that make viewers want to stop and stay.

The exciting new Treehouse Series of books is authored by Treehouse experts and packed with innovative design ideas and practical skill–building. If you′re a web developer, web designer, hobbyist, or career–changer, every book in this practical new series should be on your bookshelf.

Part of the new Treehouse Series of books, teaching you effective and compelling website development and design, helping you build practical skills
Provides career–worthy information from Treehouse industry pros and trainers
Explains HTML5 basics, such as how to format text, add scripts to pages, and use HTML5 for audio and video
Also covers hypermedia, CSS and JavaScript, embedding video, geolocation, and much more

Leverage pages of dazzling website design ideas and expert instruction with a new Treehouse Series book.

Table of Contents

Introduction 1

Part 1: Creating Web Pages with HTML5

Chapter One: Getting Started with HTML5 7

Chapter Two: Structuring a Web Page 25

Chapter Three: Creating the Page Templates 53

Chapter Four: Creating the Web Pages 73

Part 2: Dealing with Data

Chapter Five: Working with Forms 109

Chapter Six: Enhancing Your Web Forms with HTML5 141

Chapter Seven: Validating Form Data Using HTML5 157

Chapter Eight: Using Microdata 167

Chapter Nine: Ensuring Accessibility 189

Part 3: Enhancing Web Pages with HTML5 and JavaScript

Chapter Ten: Introducing JavaScript 209

Chapter Eleven: Adding Video and Audio 237

Chapter Twelve: Storing Data 265

Part 4: Advanced HTML5 Technologies

Chapter Thirteen: Using Geolocation 285

Chapter Fourteen: Using Canvas to Create Online Ads 299

Appendix A: Additional HTML Markup for Text 333

Appendix B: HTML Elements Index 339

Appendix C: Where to Go from Here 355

Castro, E. and Hyslop, B. (2012) HTML5 and CSS3 Visual QuickStart Guide, Creative Edge, PeachPit Press

There is a newer edition of this book

Download eBook PDF (PDF 37,465KB)

Download Source Code (ZIP 9,188KB)

Companion Website: http://www.bruceontheloose.com/htmlcss/

Want to learn how to build Web sites fast? This best-selling guide’s visual format and step-by-step, task-based instructions will have you up and running with HTML5 and CSS3 in no time. This Seventh Edition is a major revision, with approximately 125 pages added and substantial updates to (or complete rewrites of) nearly every page from the preceding edition. Authors Elizabeth Castro and Bruce Hyslop use clear instructions, friendly prose, and real-world code samples to teach you HTML and CSS from the ground up. Over the course of 21 chapters you will learn how to:

Write semantic HTML, both with elements that have been around for years and ones that are new in HTML5.

Prepare images for the Web and add them to your pages.

Use CSS to style text, add background colors and images, and implement a multicolumn layout.

Build a single site for all users―whether they are using a mobile phone, tablet, laptop, desktop computer, or other Web-enabled device―based on many of the components of responsive Web design, including CSS3 media queries.

Leverage new selectors in CSS3, add Web fonts to your pages with @font-face, and use CSS3 effects such as opacity, background alpha transparency, gradients, rounded corners, drop shadows, shadows inside elements, text shadows, and multiple background images.

Improve your site’s accessibility with ARIA landmark roles and other good coding practices.

Build forms to solicit input from your visitors.

Include media in your pages with the HTML5 audio and video elements.

Test and debug your Web pages.

Secure a domain name and publish your site.

And much more! All book code samples and more are available on the companion web site.

Table of Contents

Introduction
Chapter 1: Web Page Building Blocks
Chapter 2: Working with Web Page Files
Chapter 3: Basic HTML Structure
Chapter 4: Text
Chapter 5: Images
Chapter 6: Links
Chapter 7: CSS Building Blocks
Chapter 8: Working with Style Sheets
Chapter 9: Defining Selectors
Chapter 10: Formatting Text with Styles
Chapter 11: Layout with Styles
Chapter 12: Style Sheets for Mobile to Desktop
Chapter 13: Working with Web Fonts
Chapter 14: Enhancements with CSS3
Chapter 15: Lists
Chapter 16: Forms
Chapter 17: Video, Audio, and Other Multimedia
Chapter 18: Tables
Chapter 19: Working with Scripts
Chapter 20: Testing & Debugging Web Pages
Chapter 21: Publishing Your Pages on the Web
Index

Brown, T., Butters, K, and Panda, S. (2014) Jump Start HTML5, SitePoint Pty. Ltd

Download eBook PDF (PDF 7,302KB)

Download Source Code (ZIP 23,378KB)

This short book provides a practical introduction to HTML5. HTML (HyperText Markup Language) is the predominant language of web pages. Originally developed as a way to describe and share scientific papers, HTML is now used to mark up all sorts of documents and create visual interfaces for browser-based software.

With HTML5, however, HTML has become as much an of API for developing browser-based software as it is a markup language. In this book, we’ll talk about the history of HTML and HTML5 and explore its new features.

It covers:

HTML5 basics
Multimedia
Canvas and SVG
HTML5 applications
HTML5 APIs

HTML5 is required knowledge for every professional web designer and developer. This book will quickly get you up to speed with the fundamentals of HTML5 and give you the confidence to start experimenting on your own.

Get up to speed with HTML5 in a weekend.

Everything you need to know about HTML5 in one place!

If you’re any sort of web developer then you need to know HTML. The language has undergone some dramatic changes in recent years: HTML5 has come onto the scene, offering a slew of exciting new features, like native audio and video, vector graphics, offline apps, and much more.

This book is the perfect primer to get to grips with HTML5, and start to take advantage of its power in your projects.

What you’ll learn

Master multimedia: embed native audio and video with ease!
Create stunning graphics that scale using SVG and the new <canvas> element.
Build apps that work, even when your internet connection doesn’t, with local storage and IndexedDB

Basics: What is HTML5?
Basics: The Anatomy of HTML5
Basics: Structuring Documents
Basics: HTML5 Forms
Basics: Multimedia, Audio and Video
Multimedia: Preparing Your Media
Multimedia: Using Native HTML5 Audio
Multimedia: Using Native HTML5 Video
Multimedia: The source Element
Mutimedia: The track Element
Multimedia: Scripting Media Players
Canvas & SVG: An Introduction to Canvas
Canvas & SVG: Canvas Basics
Canvas & SVG: Handling Non-supporting Browsers
Canvas & SVG: Canvas Gradients
Canvas & SVG: Canvas Images and Videos
Canvas & SVG: An Introduction to SVG
Canvas & SVG: Using SVG
Canvas & SVG: SVG Bézier Curves
Canvas & SVG: SVG Filter Effects
Canvas & SVG: Canvas or SVG?
Offline Apps: Detecting When the User Is Connected
Offline Apps: Application Cache
Offline Apps: Web Storage
Offline Apps: Storing Data With Client-side Databases
APIs: Overview
APIs: Web Workers
APIs: The Geolocation API
APIs: Server Sent Events
APIs: The WebSocket API
APIs: The Cross-document Messaging API

Panda, S. (2013) Jump Start HTML5: APIs, SitePoint Pty. Ltd.

Download eBook PDF (PDF 1,418KB)

Download Source Code (ZIP 6KB)

HTML5 has dramatically changed the way we write web pages. I am sure you might have heard about many of the new elements that were introduced in HTML5. But HTML5 also offers several JavaScript APIs that enhance the interactivity of your pages. This, in turn, enables us to create cutting-edge and powerful web applications just by using HTML5 and its related JavaScript APIs.

In this book, we’ll take a quick tour of five of the most useful and powerful new HTML5 APIs. Specifically, we will cover:

The Web Workers API
The Geolocation API
The Server-sent Events API
The WebSocket API
The Cross-document Messaging API

This is a short book, so we’ll be unable to cover each of these APIs exhaustively; nor will we be building complex real-life applications with each one. However, we will provide code snippets for the APIs, and provide example use cases for each of them.

This book is for intermediate web developers. You should be familiar with HTML and the fundamentals of JavaScript and the Document Object Model (DOM). It’s unnecessary to have a deep knowledge of JavaScript. Still, you should understand event handling, JavaScript data types, and control structures such as while loops and if-else conditionals. We’ll keep our script examples fairly simple, though, and will explain them line by line.1. APIs Overview2. Web Workers3. The Geolocation API4. Server Sent Events5. The WebSocket API6. The Cross-document Messaging API

Butters, K. (2013) Jump Start HTML5: Canvas and SVG, SitePoint Pty. Ltd.

Download eBook PDF (PDF 3,999KB)
Download Source Code (ZIP 73,633KB)

Once upon a time, rich graphics and animations had to be prepared—and presented—using technologies like Flash and Silverlight. HTML5′s element makes it easy to create graphics that load in a flash, don’t need plugins, and are easily manipulated with JavaScript. What’s more is completely free to use, and works across different devices — making it the perfect choice for mobile-first web design.

Jump Start HTML5: Canvas and SVG will show you how to put this powerful new technology to use in your own designs in a single weekend!

Brown, T. B. (2013) Jump Start HTML5: Multimedia, SitePoint Pty. Ltd.

Download eBook PDF (PDF 7,755KB)
Download Source Code (ZIP 9,591KB)

One of the biggest advances of HTML5 is its multimedia capabilities. In the bad old days of the web, watching a video clip or listening to music required a browser plugin. If the user didn’t have the plugin installed, she’d have to wait for it to download, then wait for it to install, then restart her browser and find her way back to the page.

For developers, plugins often required expensive software and specialized know-how. Each plugin had its own authoring environment and slightly different methods for embedding in an HTML document. Building a Flash video player, for example, required a license for Flash or Flash Builder and familiarity with ActionScript. Encoding your file in Windows Media meant that non-Windows users were locked out of your content (that is, until compatible plugins emerged for other platforms).

These days, multimedia on the web is much easier. We can add audio or video to our web documents with an <audio> or <video> tag.

This book is aimed at intermediate HTML developers. Over the course of it, we will build both an audio and video player using HTML5. We’ll assume that you’re familiar with the basics of HTML5. If not, start with Jump Start HTML5: Basics.Many of our examples also use JavaScript to interact with the APIs for audio and video. Don’t let that scare you, however. Most examples won’t use heavy-duty scripting, and will feature explanatory text. Still, if you’re unfamiliar with JavaScript, you may like to read SitePoint’s Simply JavaScript by Kevin Yank, for an introduction. Mozilla Developer Network also offers learning resources and documentation for both JavaScript and the Document Object Model.1. Preparing Your Media Files2. Using Native HTML5 Audio3. Using Native HTML5 Video4. The source Element5. The track Element6. Scripting Media Players

Brown, T. B. (2013) Jump Start HTML5: Offline Applications, SitePoint Pty. Ltd.

Download eBook PDF (PDF 1,820KB)
Download Source Code (ZIP 22KB)

One of the greatest features introduced with HTML5 is support for offline functionality. Before HTML5, if you wanted any kind of persistent storage for your web-based application, there were three options:

cookies
Flash local shared objects
server-side data storage

As a means to store significant amounts of data, cookies were a poor option historically. Cookies are limited to 4KB of data, and browsers typically limit cookies to 50 per domain. That’s about 200KB of data per domain, and we can’t control what is deleted with the 51st cookie. But the biggest deal-breaker with cookies for offline apps is that they’re restricted to the domain that created them—they fail to work offline.

Local shared objects (LSOs) are a little bit better since they’re stored on the client, and aren’t sent with each request. LSOs allow an application to store up to 100MB of data before asking the user to store more. Unfortunately, they also depend on the user having Flash installed.

The other alternative, of course, is server-side data storage. Server-side storage allows us to store much larger amounts of data; however, server-side storage often requires a database server, and it always requires an internet connection. If this connection is interrupted somehow—for example, while passing through a tunnel on a mobile device—we’d likely suffer from data loss.

HTML5’s offline capabilities solve many of these problems. They make it possible to use applications when internet connectivity is patchy or unavailable. Mind, you’ll still need a server to deliver your files to the user, and your users will require an internet connection to download those files. But offline applications allow us to work even when our internet doesn’t.

This book is for intermediate web developers. You should be familiar with HTML and the fundamentals of JavaScript and the Document Object Model (DOM). It’s unnecessary to have deep knowledge of JavaScript. Still, you should understand event handling, JavaScript data types, and control structures such as while loops and if-else conditionals. We’ll keep our script examples simple, though, and explain them line by line.If you’re unfamiliar with JavaScript, you may like to read SitePoint’s Simply JavaScript by Kevin Yank for an introduction. Mozilla Developer Network also offers fantastic learning resources and documentation for both JavaScript and the DOM.1. Detecting When the User Is Connected2. Application Cache3. Web Storage: the localStorage and sessionStorage Objects4. Storing Data With Client-side Databases

Hales, W. (2013) HTML5 and JavaScript Web Apps – Bridging the Gap Between the Web and the Mobile Web, O’Reilly Media

Download eBook PDF (PDF 11,476KB)

Download Source Code: https://github.com/html5e

This hands-on book looks past the hype and buzzwords surrounding HTML5 and gives you a conservative and practical approach to using HTML5, JavaScript MVC frameworks, and the latest W3C specifications. You’ll quickly master how to build mobile and desktop web apps that are widely supported across all major web browsers and devices.

Even though Web Storage, Web Workers, Geolocation, Device Orientation, and WebSockets have been covered many times in the past, it is often from a very high or basic level. This book goes into the trenches to review actual use cases for each of these APIs and gives real-world examples on how to use each one. If you’re familiar with JavaScript, CSS and HTML basics and are ready to start piecing together the architecture of HTML5, then this book is for you.

Assemble a coherent architectural whole from HTML5’s complex collection of parts
Gain a clear understanding of client-side architecture and the “mobile first” approach
Design, create, and tune eye-catching and robust mobile web apps
Explore how the top five JavaScript MVC frameworks interact with the server
Learn best practices for setting up a raw WebSocket server
Examine how sites such as Google, Twitter, and Amazon store data on the client
Use real-world methods for applying geolocation, and learn the pitfalls of various implementations
Process images and other data in the background with Web Workers

Table of Contents

Preface; Who This Book Is For; Who This Book Is Not For; What You’ll Learn; About the Code; Conventions Used in This Book; Using Code Examples; Safari® Books Online; How to Contact Us; Acknowledgments; Chapter 1: Client-Side Architecture; 1.1 Before HTML5; 1.2 More Code on the Client; 1.3 The Browser as a Platform; 1.4 Conclusion; Chapter 2: The Mobile Web; 2.1 Mobile First; 2.2 Deciding What to Support; 2.3 Mobile Browser Market Share; 2.4 Browser Grading; 2.5 HTML5 in the Enterprise; 2.6 QA and Device Testing; Chapter 3: Building for the Mobile Web; 3.1 Mobile Web Look and Feel; 3.2 Interactions and Transitions; 3.3 Fetching and Caching; 3.4 Network Type Detection and Handling; 3.5 Frameworks and Approaches; Chapter 4: The Desktop Web; 4.1 The Browser as a Platform; 4.2 Device and Feature Detection; 4.3 Compression; 4.4 JavaScript MVC Frameworks and the Server; Chapter 5: WebSockets; 5.1 Building the Stack; 5.2 Programming Models; Chapter 6: Optimizing with Web Storage; 6.1 The Storage API; 6.2 The StorageEvent API; 6.3 Using JSON to Encode and Decode; 6.4 Security and Private Browsing; 6.5 Who’s Using Web Storage?; 6.6 Syncing Data from the Client Side; 6.7 Using Web Storage in Any Browser; 6.8 Frameworks; Chapter 7: Geolocation; 7.1 A Practical Use Case: User Tracking; 7.2 A Practical Use Case: Reverse Geocoding; 7.3 Frameworks; Chapter 8: Device Orientation API; 8.1 A Practical Use Case: Scrolling with Device Movement; Chapter 9: Web Workers; 9.1 A Practical Use Case: Pooling and Parallelizing Jobs;

Hill, J. (2012) HTML5 and CSS3 in Simple Steps, Prentice-Hall, Pearson Education

HTML & CSS in Simple Steps will enable you to create accessible, standards-compliant, websites – equipping you with knowledge on theory, coding skills, and best practice needed to build Web pages.

Top 10 HTML5 and CSS3 Tips

1 Steps before you begin

2 Structuring documents with HTML5

3 Using HTML text markup tags

4 Working with hyperlinks and images

5 Working with HTML tables

6 Working with HTML forms and attributes

7 Using more HTML input controls

8 Specifying CSS Styles

9 Setting borders and colours with CSS

10 Formatting fonts and text with CSS

11 Controlling white space

12 Sizing elements with CSS

13 Positioning elements with CSS

14 Formatting tables with CSS

What you’ll learn

How to use all of the core features of HTML5
How to make the most of the APIs that surround HTML5, such as Geolocation, Web Storage, and drag and drop
How to leverage the media capabilities of the modern web: Canvas, audio, and video

Who this book is for

Web developers and designers who want to increase their HTML5 skills to create modern, standards-compliant websites.

Manian, D. (2012) HTML5 Boilerplate Web Development, Packt Publishing

Download eBook PDF (PDF 3,468KB)

Download Source Code (ZIP 1KB)

Master Web Development with a robust set of templates to get your projects done quickly and effectively

Overview

Master HTML5 Boilerplate as starting templates for future projects
Learn how to optimize your workflow with HTML5 Boilerplate templates and set up servers optimized for performance
Learn to feature-detect and serve appropriate styles and scripts across browser types

In Detail

HTML5 Boilerplate is the number one choice for many web developers to get their projects going. It provides a comprehensive set of starting templates to get your developments going, ensuring you don’t forget any important elements of a typical web project while also ensuring you are writing quality code and mark up. Learning how to use this framework of page and code templates will allow you to kick-start your projects quickly without losing out on quality.

“HTML5 Boilerplate Web Development” will enable you to build new projects effectively with minimal effort. HTML5 Boilerplate allows you to deploy quality websites successfully and quickly while also ensuring robust cross-browser performance. It takes you through the step-by-step process of creating a website and teaches you to take full advantage of the html layouts provided within HTML5 Boilerplate; be it styles, mark up, or code so you can accomplish your goals.

This book will guide you through the process of building a music festival website, as an applicable example, using HTML5 Boilerplate. You will install, set up HTML5 Boilerplate and deploy production sites.

First, we will look at how to install HTML5 Boilerplate so you can use it repeatedly to jumpstart your projects, then we will look at structuring your website using the base files. We will use Modernizr and feature detection to dynamically serve different styles and scripts based on support of certain features. We will discover how to best configure our server to provide high performance and security for our website. Finally, we employ the Build Tool to combine files, remove comments and make the site ready for production use.

“HTML5 Boilerplate Web Development” offers a well-rounded tutorial in expert web development; not just a starting place for web projects. It develops code snippets, links to further resources for and in addition to makes you understand the nuances of HTML5 Boilerplate.

What you will learn from this book

Master the internals of HTML5 Boilerplate
Write code using feature detection that will work in all browsers while providing alternate experiences where necessary
Use a build tool to minimize the cost of deploying your project to production
Maintain good page performance of web pages in your project by choosing the best server defaults
Write end-to-end web projects that are robust and work across browsers by default
Learn how to use HTML5 Boilerplate with CMSs and other language frameworks; such as WordPress, Django, and more.
Find ways to debug easily and methods of asking for help so you receive quick responses

Approach

“HTML5 Boilerplate Web Development” is a practical guide rich with information on getting the best out of the boilerplate. Readers follow the expert author through a project of building a music festival site; the tutorials and lessons learned are easily applicable to any website project.

What You Will Learn

Master the internals of HTML5 Boilerplate
Write code using feature detection that will work in all browsers while providing alternate experiences where necessary
Use a build tool to minimize the cost of deploying your project to production
Maintain good page performance of web pages in your project by choosing the best server defaults
Write end-to-end web projects that are robust and work across browsers by default
Learn how to use HTML5 Boilerplate with CMSs and other language frameworks; such as WordPress, Django, and more.
Find ways to debug easily and methods of asking for help so you receive quick responses

1: Before We Begin

2: Starting Your Project

3: Creating Your Site

4: Adding Interactivity and Completing Your Site

5: Customizing the Apache Server

6: Making Your Site Better

7: Automate Deployment With the Build Script

Grannell, C., Sumner, V. and Synodinos, D. (2012) The Essential Guide to HTML5 and CSS3 Web Design, friendsofEd, Apress

Download Source Code (ZIP 1,064KB)

The Essential Guide to HTML5 and CSS3 Web Design has been fully revised from its critically acclaimed first edition, and updated to include all of the new features and best practices of HTML5 and CSS3. This book reveals all you’ll need to design great web sites that are standards-compliant, usable, and aesthetically pleasing, but it won’t overwhelm you with waffle, theory, or obscure details! You will find The Essential Guide to HTML5 and CSS3 Web Design invaluable at any stage of your career, with its mixture of practical tutorials and reference material. Beginners will quickly pick up the basics, while more experienced web designers and developers will keep returning to the book again and again to read up on techniques they may not have used for a while, or to look up properties, attributes and other details. This book is destined to become a close friend, adopting a permanent place on your desk. The Essential Guide to HTML5 and CSS3 Web Design starts off with a brief introduction to the web and web design, before diving straight in to HTML5 and CSS3 basics, reusing code, and other best practices you can adopt. The book then focuses on the most important areas of a successful web site: typography, images, navigation, tables, layouts, forms and feedback (including ready-made PHP scripts) and browser quirks, hacks and bugs. The Essential Guide to HTML5 and CSS3 Web Design is completely up-to-date, covering support of the newest standards in all the latest browsers, including IE 9 and Firefox 4. The last chapter of the book provides several case studies to dissect and learn from, including all the most popular web site archetypes a blog, a store front, a corporate home page, and an online gallery. You’ll also appreciate several detailed reference appendices covering CSS, HTML, color references, entities, and more any details you need to look up will be close at hand. What you’ll learn The basics of HTML5 and CSS3 web

Table of Contents

An introduction to web design
Web page essentials
Working with type
Working with images
Using links and creating navigation
Tables: How nature (and the W3C) intended
Page layouts with CSS
Getting user feedback
Dealing with browser quirks
Putting everything together
Appendix A: HTML5 Reference
Appendix B: Web Color Reference
Appendix C: Entities Reference
Appendix D: CSS3 Reference

The Essential Guide to HTML5 and CSS3 Web Design has been fully revised from its critically acclaimed first edition, and updated to include all of the new features and best practices of HTML5 and CSS3. This book reveals all you’ll need to design great web sites that are standards-compliant, usable, and aesthetically pleasing, but it won’t overwhelm you with waffle, theory, or obscure details!

You will find The Essential Guide to HTML5 and CSS3 Web Design invaluable at any stage of your career, with its mixture of practical tutorials and reference material. Beginners will quickly pick up the basics, while more experienced web designers and developers will keep returning to the book again and again to read up on techniques they may not have used for a while, or to look up properties, attributes and other details. This book is destined to become a close friend, adopting a permanent place on your desk.

The Essential Guide to HTML5 and CSS3 Web Design starts off with a brief introduction to the web and web design, before diving straight in to HTML5 and CSS3 basics, reusing code, and other best practices you can adopt. The book then focuses on the most important areas of a successful web site: typography, images, navigation, tables, layouts, forms and feedback (including ready-made PHP scripts) and browser quirks, hacks and bugs.

The Essential Guide to HTML5 and CSS3 Web Design is completely up-to-date, covering support of the newest standards in all the latest browsers, including IE 9 and Firefox 4. The last chapter of the book provides several case studies to dissect and learn from, including all the most popular web site archetypes—a blog, a store front, a corporate home page, and an online gallery. You’ll also appreciate several detailed reference appendices covering CSS, HTML, color references, entities, and more—any details you need to look up will be close at hand.

What you’ll learn

The basics of HTML5 and CSS3 web design
How to implement effective layouts, tables, images, navigation, forms and typography on web sites
How to deal with cross-browser issues, including quirks, bugs, and hacks in IE, Firefox, Safari, Chrome, Opera, and all other major browsers
How to make sure your sites are both usable and accessible
How to implement several different styles of web front-end, through several complete case studies, including a blog, a store front, and an online gallery
Detailed references are also provided so you don’t need to learn every little detail of HTML and CSS

Who this book is for

Web developers and designers either starting out, or seeking to familiarize themselves with the new features of HTML5 and CSS3.

Casario, M., Elst, P., Brown, C., Wormser, N. and Hanquez, C. (2011) HTML5 Solutions: Essential Techniques for HTML5 Developers, friendsofEd, Apress

Download eBook PDF (PDF 16,937KB)

Download Source Code (ZIP 137KB)

HTML5 brings the biggest changes that HTML has seen in years. Web designers and developers now have a whole host of new techniques up their sleeves, from displaying video and audio natively in HTML, to creating realtime graphics directly on a web page without the need for a plugin. But all of these new technologies bring more tags to learn and more avenues for things to go wrong. HTML5 Solutions provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project. What you’ll learn Real-world solutions for everyday HTML development, saving hours of frustration. Problems covered include: Sending multi-bitrate videos to different devices Creating custom video components Programming a custom video controller Designing a canvas with custom gradients Capturing and drawing images Storing data offline using the Web SQL Databases Dragging data from the desktop into the browser Creating HTML5 WebSockets Who this book is for Web developers and designers seeking practical advice on making HTML5 sites work. Table of Contents HTML5 Page Structures HTML5 Markup Structural and Semantic Elements HTML5 Forms HTML5 Media Elements: Audio and Video HTML5 Drawing APIs HTML5 Canvas HTML5 Communication APIs HTML5 WebSockets HTML5 Geolocation API HTML5 Local Storage HTML5 Accessibility

Table of Contents

HTML5 Page Structures
HTML5 Markup
Structural and Semantic Elements
HTML5 Forms
HTML5 Media Elements: Audio and Video
HTML5 Drawing APIs
HTML5 Canvas
HTML5 Communication APIs
HTML5 WebSockets
HTML5 Geolocation API
HTML5 Local Storage
HTML5 Accessibility

What you’ll learn

Real-world solutions for everyday HTML development, saving hours of frustration. Problems covered include:

Sending multi-bitrate videos to different devices
Creating custom video components
Programming a custom video controller
Designing a canvas with custom gradients
Capturing and drawing images
Storing data offline using the Web SQL Databases
Dragging data from the desktop into the browser
Creating HTML5 WebSockets

Who this book is for

Web developers and designers seeking practical advice on making HTML5 sites work.

Nixon, R. (2011) Robin Nixon’s HTML5 Crash Course, Nixon Publishing

Download Source Code (ZIP 309KB)

Whether you are a professional or amateur web developer you need all the HTML5 tools in your kit, and this book from the author of the best-selling Learning PHP, MySQL & JavaSript, is the fastest and easiest way there is to learn HTML5.

HTML5 is the future of HTML and all developers need to get up-to-speed with what it offers, including audio and video, without using a plug-in, and a canvas area with professional tools for creating paths, lines, curves, shapes, fills, gradients, patterns, text and more.

It also provides accurate geolocation, background web workers, offline web applications, microdata, a local storage engine and many other improvements to standard HTML, such as dozens of new form tags and attributes.

Reasons you will learn all you need from this course:

Each Lecture begins by listing the three key skills you will learn.
A summary at the end of each lecture reminds you what you have learned.
Useful, fully-tested examples illustrate every tag, attribute and function.
Each lecture features several notes providing extra, handy advice.
The examples can all be downloaded from the companion website.

Lubbers, P., Albers, B. and Salim, F. (2011) Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development (Expert’s Voice in Web Development), Second Edition, Apress

Download eBook PDF (PDF 7,796KB)

Download Source Code (ZIP 70,291KB)

HTML5 is here, and with it, web applications have acquired power, ease, scalability, and responsiveness like never before. With this book, developers will learn how to use the latest cutting-edge HTML5 web technology available in the most recent versions of modern browsers to build web applications with unparalleled functionality, speed, and responsiveness. This new edition includes major revisions for WebSockets functionality, reflecting the new W3C specification. It also features new chapters covering the drag-and-drop API as well as SVG. Explains how to create real-time HTML5 applications that tap the full potential of modern browsers Provides practical, real-world examples of HTML5 features in action Covers all the new HTML5 APIs to get you up-to-speed quickly with HTML5 Fully updated to include the latest revisions of the WebSocket API, and much more. What you’ll learn How the HTML5 specification has evolved How to develop cutting-edge web applications using new HTML5 features like WebSockets, geolocation, web storage, Canvas, and audio/video Which features are available in modern browsers Who this book is for Web designers and developers who want to use the latest cutting-edge technology available in current browsers Developers who want to create dynamic, HTML5 web applications Developers who want to know which HTML5 features are supported by modern browsers.

Table of Contents

Overview of HTML5
Using the Canvas API
Working With Scalable Vector Graphics
Working with Audio and Video
Using the Geolocation API
Using the Communication APIs
Using the WebSocket API
Using the Forms API
Working with Drag-and-Drop
Using the Web Workers API
Using the Storage APIs
Creating Offline Web Applications
The Future of HTML5

HTML5 is here, and with it, web applications take on a power, ease, scalability, and responsiveness like never before. In this book, developers will learn how to use the latest cutting-edge HTML5 web technology—available in the most recent versions of modern browsers—to build web applications with unparalleled functionality, speed, and responsiveness.

Explains how to create real-time HTML5 applications that tap the full potential of modern browsers
Provides practical, real-world examples of HTML5 features in action
Shows which HTML5 features are supported in current browsers
Covers all the new HTML5 APIs to get you up to speed quickly with HTML5

What you’ll learn

How the HTML5 specification has evolved
How to develop cutting-edge web applications using new HTML5 features like WebSockets, geolocation, Web Storage, Canvas, and audio and video
Which features are available in browsers today

Who this book is for

Web designers and developers who want to use the latest cutting-edge technology available in current browsers
Developers who want to create dynamic, HTML5 web applications
Developers who want to know which HTML5 features are supported in current browsers

Meyer, J. (2010) The Essential Guide to HTML5: Using Games to learn HTML5 and JavaScript, Apress

Download eBook PDF (PDF 12,497KB)

Download Source Code (ZIP 1,777KB)

The Essential Guide to HTML5 focuses on teaching the core HTML5 techniques through game development, and covers a different game in each chapter. The game development side gives readers more motivation to learn, and makes it more engaging and effective.

Table of Contents

The Basics
Dice Game
Bouncing Ball
Cannonball and Slingshot
The Memory (aka Concentration) Game
Quiz
Mazes
Rock, Paper, Scissors
Hangman
Blackjack

HTML5 opens up a plethora of new avenues for application and game development on the web. Games can now be created and interacted with directly within HTML, with no need for users to download extra plugins, or for developers to learn new languages. Important new features such as the Canvas tag enable drawing directly onto the web page. The Audio tag allows sounds to be triggered and played from within your HTML code, the WebSockets API facilitates real-time communication, and the local storage API enables data such as high scores or game preferences to be kept on a user’s computer for retrieval next time they play. All of these features and many more are covered within The Essential Guide to HTML5.

The book begins at an introductory level, teaching the essentials of HTML5 and JavaScript through game development. Each chapter features a familiar game type as its core example, such as hangman, rock-paper-scissors, or dice games, and uses these simple constructs to build a solid skillset of the key HTML5 concepts and features. By working through these hands on examples, you will gain a deep, practical knowledge of HTML5 that will enable you to build your own, more advanced games and applications.

Concepts are introduced and motivated with easy-to-grasp, appealing examples
Code is explained in detail after general explanations
Reader is guided into how to make the examples ‘their own’

What you’ll learn

Use HTML5 and JavaScript to create interactive web sites
Program in JavaScript with the new HTML5 features
Draw on canvas and place text on the canvas
Create animated scenes using timing events
Handle mouse events for interaction with the user/player
Important concepts useful in any programming language/environment
HTML tags, canvas, Math.random, setInterval, setTimerout, addEventListener, Date, localStorage and other features

Who this book is for

Anyone who wants to make interactive websites. This book is suited for:

Total beginners
Those who have done some HTML but are afraid to do any programming
Those with some experience with HTML, JavaScript, or Flash ActionScript but who are unfamiliar with the new features in HTML5

Murphy, C., Clark, R., Studholme, O. and Manian, D. (2012) Beginning HTML5 and CSS3: The Web Evolved (Expert’s Voice in Web Development), Apress

Download eBook PDF (PDF 21,269KB)

Download Source Code (ZIP 48,453KB)

Beginning HTML5 and CSS3 is your introduction to the new features and elements of HTML5—as a web developer you’ll learn about all the leaner, cleaner, and more efficient code available now with HTML5, along with some new tools that will allow you to create more meaningful and richer content. For everyone involved in web design, this book also introduces the new structural integrity and styling flexibility of CSS 3—which means better-looking pages and smarter content in your website projects.

For all forward-looking web professionals who want to start enjoying and deploying the new HTML5 and CSS3 features right away, this book provides you with an in-depth look at the new capabilities—including audio and video—that are new to web standards. You’ll learn about the new HTML5 structural sections, plus HTML5 and CSS3 layouts. You’ll also discover why some people think HTML5 is going to be a Flash killer, when you see how to create transitions and animations with these new technologies. So get ahead in your web development through the practical, step-by-step approaches offered to you in Beginning HTML5 and CSS3.

What you’ll learn

Cutting-edge web development techniques with HTML5 and CSS3
The new features of HTML5 and how to work with HTML5 and CSS3
The new web standards being implemented by all the major web browsers
How to work with the new HTML5 structural sections
How to create HTML5 and CSS3 layouts
How to create transitions and animations without using Flash
New web typography solutions
A new vision of web development with HTML5 and CSS3

Who this book is for

This book is for web developers and anyone involved in web design who wants to embrace the new web standards and cutting-edge features of HTML5 and CSS3. With a practical, accessible approach, this book is for anyone who wants to push their websites forwards with the latest technologies.

Table of Contents

HTML5: Now, Not 2022
Your First Plunge Into HTML5
New Structural Elements
A Richer Approach to Content Markup
Rich Media
Paving the Way for Web Applications
CSS3―Here and Now
Keeping Your Markup Slim Using CSS3 Selectors
A Layout for Every Occasion
Improving Web Typography
Putting CSS3 Properties to Work
Transforms, Transitions, and Animation
The Future of CSS

Cook, C. and Garber, J. (2012) Foundation HTML5 and CSS3, friendsofEd, Apress

Download eBook PDF (PDF 11,584KB)

Download Source Code (ZIP 15,868KB)

If you want to get into developing web sites, the most important thing you’ll need is a solid understanding of Hypertext Markup Language, or HTML-the most common language used to write web site content. The most recent version of the language is HTML5, and it contains a whole host of new features to give you more power when creating websites. Foundation HTML5 with CSS3: A Modern Guide and Reference incorporates practical examples to show how to structure data correctly using HTML5, along with styling and layout basics using the latest release of Cascading Style Sheets, CSS3. This book is forward-thinking because all the featured code and techniques are standards-compliant, and it demonstrate best practices you won’t waste your time on outdated, bad techniques. Your web pages will work properly in most web browsers and be accessible to web users with disabilities, easily located using popular search engines, and compact in file size. Even if you already know HTML5 and CSS3 basics, this book will still be useful to you. It features comprehensive reference tables, so you can look up troublesome attributes, codes, and properties quickly and easily. What you’ll learn Standards-compliant HTML5, not outdated techniques Styling and layout basics using CSS3 Who this book is for Web designers and developers who want to bring themselves up to speed in the correct usage of HTML5 and CSS3, or those starting out in modern web development. Table of Contents Getting Started HTML and CSS Basics The Document Structuring Content Embedding Media Linking the Web Constructing Tables Building Forms Page Layout with CSS Putting it All Together

Table of Contents

Getting Started
HTML and CSS Basics
The Document
Structuring Content
Embedding Media
Linking the Web
Constructing Tables
Building Forms
Page Layout with CSS
Putting it All Together

If you want to get into developing web sites, the most important thing you’ll need is a solid understanding of Hypertext Markup Language, or HTML—the most common language used to write web site content. The most recent version of the language is HTML5, and it contains a whole host of new features to give you more power when creating websites.

Foundation HTML5 with CSS3: A Modern Guide and Reference incorporates practical examples to show how to structure data correctly using HTML5, along with styling and layout basics using the latest release of Cascading Style Sheets, CSS3.

This book is forward-thinking because all the featured code and techniques are standards-compliant, and it demonstrate best practices—you won’t waste your time on outdated, bad techniques. Your web pages will work properly in most web browsers and be accessible to web users with disabilities, easily located using popular search engines, and compact in file size.

Even if you already know HTML5 and CSS3 basics, this book will still be useful to you. It features comprehensive reference tables, so you can look up troublesome attributes, codes, and properties quickly and easily.

What you’ll learn

Standards-compliant HTML5, not outdated techniques
Styling and layout basics using CSS3

Who this book is for

Web designers and developers who want to bring themselves up to speed in the correct usage of HTML5 and CSS3, or those starting out in modern web development.

Freeman, E. and Robson, E. (2011) Head First HTML5 Programming: Building Web Apps with JavaScript, O’Reilly Media, Inc.

Download eBook PDF (PDF 86,877KB)

Download Source Code (ZIP 2,045KB)

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building web applications with Web storage, 2D drawing, offline support, sockets and threads, and more. And to speak this language you’ve got to go beyond HTML5 markup and into the world of the DOM, events, and JavaScript APIs.

Now you probably already know all about HTML markup (otherwise known as structure) and you know all aboutCSS style (presentation), but what you’ve been missing is JavaScript (behavior). If all you know about are structure and presentation, you can create some great looking pages, but they’re still just pages. When you add behavior with JavaScript, you can create an interactive experience; even better, you can create full blown web applications.

Head First HTML5 Programming is your ultimate tour guide to creating web applications with HTML5 and JavaScript, and we give you everything you need to know to build them, including: how to add interactivity to your pages, how to communicate with the world of Web services, and how to use the great new APIs being developed for HTML5.

Here are just some of the things you’ll learn in Head First HTML5 Programing:

Learn how to make your pages truly interactive by using the power of the DOM.
Finally understand how JavaScript works and take yourself from novice to well-informed in just a few chapters.
Learn how JavaScript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.
Use the Geolocation API to know where your users are.
Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.
Go beyond just plugging a video into your pages, and create custom video experiences.
Learn the secret to grabbing five megabytes of storage in every user’s browser.
Improve your page’s responsiveness and performance with Web workers.
And much more.

Table of Contents

; Advance Praise for Head First HTML5 Programming; Praise for other books from Eric Freeman & Elisabeth Robson; Authors of Head First HTML5 Programming; How to Use this Book: Intro; Who is this book for?; We know what you’re thinking; And we know what your brain is thinking; Metacognition: thinking about thinking; Here’s what WE did:; Here’s what YOU can do to bend your brain into submission; Read me; Software requirements; The technical review team; Acknowledgments; Even more Acknowledgments!The large number of acknowledgments is because we’re testing the theory that everyone mentioned in a book acknowledgment will buy at least one copy, probably more, what with relatives and everything. If you’d like to be in the acknowledgment of our next book, and you have a large family, write to us.; Safari® Books Online; Chapter 1: Getting to Know HTML5: Welcome to Webville; 1.1 Would the REAL HTML5 please stand up…; 1.2 How HTML5 really works…; 1.3 What can you do with JavaScript?; 1.4 Writing Serious JavaScript; 1.5 Writing Serious JavaScript Revisited…; Chapter 2: Introducing JavaScript and the DOM: A Little Code; 2.1 The Way JavaScript Works; 2.2 What can you do with JavaScript?; 2.3 Declaring a variable; 2.4 How to name your variables; 2.5 Getting Expressive; 2.6 Doing things over and over…; 2.7 Make decisions with JavaScript; 2.8 Making more decisions… and, adding a catchall; 2.9 How and where to add JavaScript to your pages; 2.10 How JavaScript interacts with your page; 2.11 How to bake your very own DOM; 2.12 A first taste of the DOM; 2.13 Test drive the planets; 2.14 You can’t mess with the DOM until the page has fully loaded; 2.15 So, what else is a DOM good for anyway?; 2.16 Can we talk about JavaScript again? Or, how to store multiple values in JavaScript; 2.17 The Phrase-O-Matic; Chapter 3: Events, Handlers and All that Jazz: A Little Interaction; 3.1 Get ready for Webville Tunes; 3.2 Getting started…; 3.3 But nothing happens when I click “Add Song”; 3.4 Handling Events; 3.5 Making a Plan…; 3.6 Getting access to the “Add Song” button; 3.7 Giving the button a click handler; 3.8 A closer look at what just happened…; 3.9 Getting the song name; 3.10 How do we add a song to the page?; 3.11 How to create a new element; 3.12 Adding an element to the DOM; 3.13 Put it all together…; 3.14 …and take it for a test drive; 3.15 Review―what we just did; 3.16 How to add the Ready Bake Code…; 3.17 Integrating your Ready Bake Code; Chapter 4: JavaScript Functions and Objects: Serious JavaScript; 4.1 Expanding your vocabulary; 4.2 How to add your own functions; 4.3 How a function works; 4.4 Local and Global Variables; 4.5 Knowing the scope of your local and global variables; 4.6 The short lives of variables; 4.7 Oh, did we mention functions are also values?; 4.8 What you can do with functions as values; 4.9 Did someone say “Objects”?!; 4.10 Thinking about properties…; 4.11 How to create an object in JavaScript; 4.12 Some things you can do with objects; 4.13 Let’s talk about passing objects to functions; 4.14 Our next showing is at….; 4.15 Testing at the drive-in; 4.16 Objects can have behavior too…; 4.17 Meanwhile back at Webville Cinema…; 4.18 But we know that can’t be quite right…; 4.19 Let’s get the movie parameter out of there…; 4.20 Now what?; 4.21 Adding the “this” keyword; 4.22 A test drive with “this”; 4.23 How to create a constructor; 4.24 Now let’s use our constructor; 4.25 How does this really work?; 4.26 Test drive your constructor right off the factory floor; 4.27 What is the window object anyway?; 4.28 A closer look at window.onload; 4.29 Another look at the document object; 4.30 A closer look at document.getElementById; 4.31 One more object to think about: your element objects; Chapter 5: Making Your HTML Location Aware: Geolocation; 5.1 Location, Location, Location; 5.2 The Lat and Long of it…; 5.3 How the Geolocation API determines your location; 5.4 Just where are you anyway?; 5.5 Test drive your location; 5.6 What we just did…; 5.7 How it all fits together; 5.8 Revealing our secret location…; 5.9 Writing the code to find the distance; 5.10 Location-enabled test drive; 5.11 Mapping your position; 5.12 How to add a Map to your Page; 5.13 Displaying the Map; 5.14 Test drive your new heads-up display; 5.15 Sticking a Pin in it…; 5.16 Testing the marker; 5.17 Meanwhile back at the Geolocation API…; 5.18 Can we talk about your accuracy?; 5.19 Accuracy Test; 5.20 “Wherever you go, there you are”; 5.21 Getting the app started; 5.22 Reworking our old code…; 5.23 Time to get moving!; 5.24 You’ve got some Options…; 5.25 The world of timeouts and maximum age…; 5.26 How to specify options; 5.27 Let’s finish this app!; 5.28 Integrating our new function; 5.29 And one more time…; Chapter 6: Talking to The Web: Extroverted Apps; 6.1 Mighty Gumball wants a Web app; 6.2 A little more background on Mighty Gumball; 6.3 Just a quick start…; 6.4 So how do we make requests to web services?; 6.5 How to make a request from JavaScript; 6.6 Move over XML, meet JSON; 6.7 A quick example using JSON; 6.8 Let’s get to work!; 6.9 Displaying the gumball sales data; 6.10 Watch Out, Detour Ahead!; 6.11 How to set up your own Web Server; 6.12 How to set up your own Web Server, continued; 6.13 Back to the code; 6.14 Let’s test this already!; 6.15 Impressing the client…; 6.16 Reworking our code to make use of JSON; 6.17 The Home Stretch…; 6.18 Moving to the Live Server; 6.19 A Live Test Drive…; 6.20 It’s a cliffhanger!; 6.21 Remember, we left you with a cliffhanger? A bug; 6.22 So, what do we do now?!; 6.23 What Browser Security Policy?; 6.24 So, what are our options?; 6.25 Meet JSONP; 6.26 But what is the “P” in JSONP for?; 6.27 Let’s update the Mighty Gumball web app; 6.28 Test drive your new JSONP-charged code; 6.29 Improving Mighty Gumball; 6.30 Step 1: Taking care of the script element…; 6.31 Step 2: Now it’s time for the timer; 6.32 A time-driven test drive; 6.33 Step 3: Reimplementing JSONP; 6.34 We almost forgot: watch out for the dreaded browser cache; 6.35 One more TIME test drive; 6.36 How to remove duplicate sales reports; 6.37 Updating the JSON URL to include the lastreporttime; 6.38 Test drive lastReportTime; 6.39 A Special Message from Chapter 7…; Chapter 7: Bringing Out Your Inner Artist: The Canvas; 7.1 Our new start-up: TweetShirt; 7.2 Checking out the “comps”; 7.3 Let’s drop in on the TweetShirt crew…; 7.4 How to get a canvas into your web page; 7.5 Test drive your new canvas; 7.6 How to see your canvas; 7.7 Drawing on the Canvas; 7.8 A little Canvas test drive…; 7.9 A closer look at the code; 7.10 Failing gracefully; 7.11 TweetShirt: the Big Picture; 7.12 First, let’s get the HTML in place; 7.13 Now, let’s add the

; 7.14 Time to get computational, with JavaScript; 7.15 Writing the drawSquare function; 7.16 Time for a test drive!; 7.17 Add the call to fillBackgroundColor; 7.18 Meanwhile, back at TweetShirt.com…; 7.19 Drawing with Geeks; 7.20 Breaking down the arc method; 7.21 A little taste of using the arc; 7.22 I say degree, you say radian; 7.23 Back to writing the TweetShirt circle code; 7.24 Writing the drawCircle function…; 7.25 Welcome back…; 7.26 Getting your tweets; 7.27 Test driving Tweets; 7.28 Giving drawText a spin; 7.29 Completing the drawText function; 7.30 A quick test drive and then LAUNCH!; 7.31 Yet another test drive; Chapter 8: Not Your Father’s TV: Video …With Special Guest Star “Canvas”; 8.1 Meet Webville TV; 8.2 The HTML, let’s get it done…; 8.3 Plug that set in and test it out…; 8.4 How does the video element work?; 8.5 Closely inspecting the video attributes…; 8.6 What you need to know about video formats; 8.7 The contenders; 8.8 How to juggle all those formats…; 8.9 How to be even more specific with your video formats; 8.10 I was told there would be APIs?; 8.11 A little content “programming” on Webville TV; 8.12 Implementing Webville TV’s playlist; 8.13 So what’s up with that event handler code?; 8.14 How to write the “end of video” handler; 8.15 Another test drive…; 8.16 How the canPlayType method works; 8.17 We need your help!; 8.18 Step inside the booth, let’s take a look…; 8.19 Unpacking the Demo Unit; 8.20 Inspecting the rest of the factory code; 8.21 The setEffect and setVideo handlers; 8.22 And here are the helper functions; 8.23 That new demo machine smell…test drive time!; 8.24 Getting our demo videos ready…; 8.25 Implementing the video controls; 8.26 Implementing the rest of the video controls; 8.27 Another test drive!; 8.28 Taking care of a loose end…; 8.29 And another…; 8.30 Switching test videos; 8.31 It’s time for special effects; 8.32 The FX plan; 8.33 Time to get those effects buttons working; 8.34 How video processing works; 8.35 How to process video using a scratch buffer; 8.36 Implementing a scratch buffer with Canvas; 8.37 How to position the video and canvases; 8.38 Writing the code to process the video; 8.39 How to create the buffer; 8.40 How to process the buffer; 8.41 Now we need to write some effects; 8.42 A film noir test drive; 8.43 The Big Test Drive; 8.44 If only it were a perfect world…; 8.45 How to use error events; 8.46 Test Crash!; 8.47 Where can you go from here?; Chapter 9: Storing Things Locally: Web Storage; 9.1 How browser storage works (1995 – 2010); 9.2 How HTML5 Web Storage works; 9.3 Note to self…; 9.4 Time for a test drive!; 9.5 Were Local Storage and the Array separated at birth?; 9.6 Getting serious about stickies; 9.7 Creating the interface; 9.8 Now let’s add the JavaScript; 9.9 Time for another test drive!; 9.10 Completing the user interface; 9.11 Yet another test drive!; 9.12 We need to stop for a little scheduled service; 9.13 Do-It-Yourself maintenance; 9.14 We have the technology…; 9.15 Reworking our app to use an array; 9.16 Converting createSticky to use an array; 9.17 What needs to change?; 9.18 Putting it all together; 9.19 Putting it all together continued…; 9.20 Test Drive!; 9.21 Deleting sticky notes; 9.22 The deleteSticky function; 9.23 How do you select a sticky to delete?; 9.24 How to get the sticky to delete from the event; 9.25 Delete the sticky from the DOM, too; 9.26 But of course we can!; 9.27 Update the user interface so we can specify a color; 9.28 JSON.stringify, it’s not just for Arrays; 9.29 Using the new stickyObj; 9.30 Test drive sticky note colors; 9.31 Now that you know localStorage, how are you going to use it?; Chapter 10: Putting JavaScript to Work: Web Workers; 10.1 The Dreaded Slow Script; 10.2 How JavaScript spends its time; 10.3 When single-threaded goes BAD; 10.4 Adding another thread of control to help; 10.5 How Web Workers work; 10.6 Your first Web Worker…; 10.7 Writing Manager.js; 10.8 Receiving messages from the worker; 10.9 Now let’s write the worker; 10.10 Serving up a test drive; 10.11 Virtual Land Grab; 10.12 Take a look around; 10.13 How to compute a Mandelbrot Set; 10.14 How to use multiple workers; 10.15 Let’s build the Fractal Explorer app; 10.16 Creating workers, and giving them tasks…; 10.17 Writing the code; 10.18 Getting the workers started; 10.19 Implementing the worker; 10.20 A little pit stop…; 10.21 Time to get back on the road…; 10.22 Back to the code: how to process the worker’s results; 10.23 Psychedelic test drive; 10.24 Another test drive; 10.25 Fitting the canvas to the browser window; 10.26 The anal-retentive chef coder; 10.27 Time for the final test drive!; 10.28 Congratulations! You made it to the end; Leftovers: The Top Ten Topics (We Didn’t Cover); #1 Modernizr; #2 Audio; #3 jQuery; #4 XHTML is dead, long live XHTML; #5 SVG; #6 Offline web apps; #7 Web Sockets; #8 More canvas API; #9 Selectors API; #10 But, there’s even more!; The HTML5 Guide to New Construction; Adding style to your new construction with CSS3; This isn’t goodbye; Colophon;|

Advance Praise for Head First HTML5 Programming
Praise for other books from Eric Freeman & Elisabeth Robson
Authors of Head First HTML5 Programming
How to Use this Book: Intro
Chapter 1: Getting to Know HTML5: Welcome to Webville
Chapter 2: Introducing JavaScript and the DOM: A Little Code
Chapter 3: Events, Handlers and All that Jazz: A Little Interaction
Chapter 4: JavaScript Functions and Objects: Serious JavaScript
Chapter 5: Making Your HTML Location Aware: Geolocation
Chapter 6: Talking to The Web: Extroverted Apps
Chapter 7: Bringing Out Your Inner Artist: The Canvas
Chapter 8: Not Your Father’s TV: Video …With Special Guest Star “Canvas”
Chapter 9: Storing Things Locally: Web Storage
Chapter 10: Putting JavaScript to Work: Web Workers
Leftovers: The Top Ten Topics (We Didn’t Cover)
This isn’t goodbye

Johnson, G. (2013) Training Guide: Programming in HTML5 with JavaScript and CSS, Microsoft Press

Download eBook PDF (PDF14,058 KB)

Download Source Code (ZIP 65,069KB)

Designed to help experienced programmers develop real-world, job-role-specific skills—this Training Guide focuses on creating applications with HTML5, JavaScript, and CSS3. Build hands-on expertise through a series of lessons, exercises, and suggested practices—and help maximize your performance on the job.

Provides in-depth, hands-on training you take at your own pace
Focuses on job-role-specific expertise for using HTML5, JavaScript, and CSS3 to begin building modern web and Windows 8 apps
Features pragmatic lessons, exercises, and practices
Creates a foundation of skills which, along with on-the-job experience, can be measured by Microsoft Certification exams such as 70-480
Coverage includes: creating HTML5 documents; implementing styles with CSS3; JavaScript in depth; using Microsoft developer tools; AJAX; multimedia support; drawing with Canvas and SVG; drag and drop functionality; location-aware apps; web storage; offline apps; writing your first simple Windows 8 apps; and other key topics

Table of Contents

Introduction; Backward compatibility and cross-browser compatibility; System requirements; Hardware requirements; Software requirements; Practice exercises; Acknowledgments; Errata and book support; We want to hear from you; Stay in touch; Chapter 1: Getting started with Visual Studio 2012 and Blend for Visual Studio 2012; 1.1 Before you begin; 1.2 Lesson 1: Visual Studio 2012; 1.3 Lesson 2: Blend for Visual Studio 2012; 1.4 Practice exercises; 1.5 Suggested practice exercises; 1.6 Answers; Chapter 2: Getting started with HTML5; 2.1 Before you begin; 2.2 Lesson 1: Introducing HTML5; 2.3 Lesson 2: Embedding content; 2.4 Practice exercises; 2.5 Suggested practice exercises; 2.6 Answers; Chapter 3: Getting started with JavaScript; 3.1 Before you begin; 3.2 Lesson 1: Introducing JavaScript; 3.3 Lesson 2: Writing, testing, and debugging JavaScript; 3.4 Lesson 3: Working with objects; 3.5 Practice exercises; 3.6 Suggested practice exercises; 3.7 Answers; Chapter 4: Getting started with CSS3; 4.1 Before you begin; 4.2 Lesson 1: Introducing CSS3; 4.3 Lesson 2: Understanding selectors, specificity, and cascading; 4.4 Lesson 3: Working with CSS properties; 4.5 Practice exercises; 4.6 Suggested practice exercises; 4.7 Answers; Chapter 5: More HTML5; 5.1 Before you begin; 5.2 Lesson 1: Thinking HTML5 semantics; 5.3 Lesson 2: Working with tables; 5.4 Practice exercises; 5.5 Suggested practice exercises; 5.6 Answers; Chapter 6: Essential JavaScript and jQuery; 6.1 Before you begin; 6.2 Lesson 1: Creating JavaScript objects; 6.3 Lesson 2: Working with jQuery; 6.4 Practice exercises; 6.5 Suggested practice exercises; 6.6 Answers; Chapter 7: Working with forms; 7.1 Before you begin; 7.2 Lesson 1: Understanding forms; 7.3 Lesson 2: Form validation; 7.4 Practice exercises; 7.5 Suggested practice exercises; 7.6 Answers; Chapter 8: Websites and services; 8.1 Before you begin; 8.2 Lesson 1: Getting started with Node.js; 8.3 Lesson 2: Working with web services; 8.4 Practice exercises; 8.5 Suggested practice exercises; 8.6 Answers; Chapter 9: Asynchronous operations; 9.1 Before you begin; 9.2 Lesson 1: Asynchronous operations using jQuery and WinJS; 9.3 Lesson 2: Working with web workers; 9.4 Practice exercises; 9.5 Suggested practice exercises; 9.6 Answers; Chapter 10: WebSocket communications; 10.1 Before you begin; 10.2 Lesson 1: Communicating by using WebSocket; 10.3 Practice exercises; 10.4 Suggested practice exercises; 10.5 Answers; Chapter 11: HTML5 supports multimedia; 11.1 Before you begin; 11.2 Lesson 1: Playing video; 11.3 Lesson 2: Playing audio; 11.4 Lesson 3: Using the HTMLMediaElement object; 11.5 Practice exercises; 11.6 Suggested practice exercises; 11.7 Answers; Chapter 12: Drawing with HTML5; 12.1 Before you begin; 12.2 Lesson 1: Drawing by using the

Introduction
Chapter 1: Getting started with Visual Studio 2012 and Blend for Visual Studio 2012
Chapter 2: Getting started with HTML5
Chapter 3: Getting started with JavaScript
Chapter 4: Getting started with CSS3
Chapter 5: More HTML5
Chapter 6: Essential JavaScript and jQuery
Chapter 7: Working with forms
Chapter 8: Websites and services
Chapter 9: Asynchronous operations
Chapter 10: WebSocket communications
Chapter 11: HTML5 supports multimedia
Chapter 12: Drawing with HTML5
Chapter 13: Drag and drop
Chapter 14: Making your HTML location-aware
Chapter 15: Local data with web storage
Chapter 16: Offline web applications
About the author
Training Guide: Programming in HTML5 with JavaScript and CSS3 and Exam 70-480

Introduction
Chapter 1: Getting started with Visual Studio 2012 and Blend for Visual Studio 2012
Chapter 2: Getting started with HTML5
Chapter 3: Getting started with JavaScript
Chapter 4: Getting started with CSS3
Chapter 5: More HTML5
Chapter 6: Essential JavaScript and jQuery
Chapter 7: Working with forms
Chapter 8: Websites and services
Chapter 9: Asynchronous operations
Chapter 10: WebSocket communications
Chapter 11: HTML5 supports multimedia
Chapter 12: Drawing with HTML5
Chapter 13: Drag and drop
Chapter 14: Making your HTML location-aware
Chapter 15: Local data with web storage
Chapter 16: Offline web applications
About the author
Training Guide: Programming in HTML5 with JavaScript and CSS3 and Exam 70-480