Table of Contents

Cover

Table of Contents

Title Page

Copyright

About the Author

Publisher’s Acknowledgements

Acknowledgments

Introduction

Who Should Read This Book?

What You Will Learn

How to Use This Book

Using This Book with Treehouse

part 1: Creating Web Pages with HTML5

chapter one: Getting Started with HTML5

What is HTML?

Setting Up Your Tools

Building Your First HTML5 Web Page

Constructing Elements

Validating Your Web Page

All Browsers Are Not Created Equal

Summary

chapter two: Structuring a Web Page

Creating Layout Templates

Extending the <head> with Metadata

Styling the Page with CSS

Summary

chapter three: Creating the Page Templates

Adding a Logo

Adding Navigation

Adding Footer Content

Global Attributes

Summary

chapter four: Creating the Web Pages

Adding Content to the Home Page

Adding Content to the About Page

Creating the Locations Page

Creating the Sitemap Page

Creating the Menu Page

Creating the News Page

Summary

part 2: Dealing with Data

chapter five: Working with Forms

Setting Up the Bookings Page with the <form> Element

Adding the Form Fields to the Bookings Page with <input> and <label> Elements

Adding a Message Box with the <textarea> Element

Adding a Submit Button to Your Bookings Page

Adding a Drop-Down Menu to Your Bookings Page

Handling Files

Grouping the Input Fields in Your Bookings Page Using <fieldset> and <legend>

Updating the Site Navigation and Sitemap

Summary

chapter six: Enhancing Your Web Forms with HTML5

Adding HTML5 to Your Bookings Form

HTML5 Input Types

HTML5 Input Attributes

Datalists

Summary

chapter seven: Validating Form Data Using HTML5

Adding Validations to Your Bookings Form

Requiring Data from the User

Restricting Length

Restricting Range

Matching Patterns

Regular Expression Basics

Summary

chapter eight: Using Microdata

About Schema.org

Using Microdata

Commonly Used Schemas

Summary

chapter nine: Ensuring Accessibility

Why Is Accessibility Important?

Screen Readers

Making Web Forms Accessible

Making Tables Accessible

Making Images Accessible

Making Links Accessible

Testing Accessibility

Summary

part 3: Enhancing Web Pages with HTML5 and JavaScript

chapter ten: Introducing JavaScript

What is JavaScript?

The <script> Element

JavaScript Basics

The Document Object Model (DOM)

JavaScript Libraries

Summary

chapter eleven: Adding Video and Audio

Converting Video and Audio Files

Adding a Video to the About Page Using the <video> Element

Creating Custom Controls Using JavaScript

Making Your Video Accessible

Summary

chapter twelve: Storing Data

Why Use Client-Side Storage?

LocalStorage

Saving Customer Data from the Bookings Form

Storing Objects and Arrays

SessionStorage

Additional Considerations on Using Client-Side Storage

Summary

part 4: Advanced HTML5 Technologies

chapter thirteen: Using Geolocation

Getting the User’s Location

Calculating the Distance Between Two Sets of GPS Coordinates

Finding the Nearest Restaurant

Summary

chapter fourteen: Using Canvas to Create Online Ads

Setting Up Your Canvas

Creating the Background

Adding Text

Drawing Lines

Drawing Circles

Creating Gradients

Adding Shadows

Adding the Offer Text

Saving and Restoring State

Adding Images

Summary

appendix a: Additional HTML Markup for Text

appendix b: HTML Elements Index

appendix c: Where to Go from Here

Books

Websites and Blogs

End User License Agreement

List of Illustrations

chapter one: Getting Started with HTML5

Figure 1-1 Editing an HTML document with Sublime Text 2.

Figure 1-2 Inspecting a web page using the Chrome developer tools.

Figure 1-3 Your first HTML5 web page.

Figure 1-4 Your web page with the new text you just added.

Figure 1-5 Your web page passed validation as HTML5.

Figure 1-6 A simple HTML web page in Google Chrome.

Figure 1-7 The same HTML web page displayed in Internet Explorer (using IE7 compatibility mode).

chapter two: Structuring a Web Page

Figure 2-1 A page from the Treehouse website.

Figure 2-2 Wireframe of the home page layout.

Figure 2-3 Wireframe of the content page layout.

Figure 2-4 Inspecting your page elements using the Chrome developer tools.

Figure 2-5 Inspecting the <header> element with the Chrome developer tools.

Figure 2-6 The index.html file with the new logo <div> element, as displayed in Google Chrome.

Figure 2-7 The home page template, complete with <nav> element.

Figure 2-8 Inspecting the main content <div> with the Chrome developer tools.

Figure 2-9 The content page template with the new page text section.

Figure 2-10 The home page template with new content sections, displayed with the Chrome developer tools.

Figure 2-11 The home page template.

Figure 2-12 The content page template.

Figure 2-13 The home page template, with CSS.

Figure 2-14 The content page template, with CSS.

Figure 2-15 A sample directory structure.

chapter three: Creating the Page Templates

Figure 3-1 Page hierarchy.

Figure 3-2 The home page with your new logo.

Figure 3-3 An unordered list.

Figure 3-4 An ordered list.

Figure 3-5 Navigation links.

Figure 3-6 The home page with new footer content.

Figure 3-7 A tooltip displaying the value of the title attribute.

chapter four: Creating the Web Pages

Figure 4-1 The home page with a completed main feature section.

Figure 4-2 The home page with the new text content.

Figure 4-3 The home page with the special offers section.

Figure 4-4 The About page.

Figure 4-5 A simple image displayed in Google Chrome.

Figure 4-6 The Locations page.

Figure 4-7 The Sitemap page.

Figure 4-8 A table of exam results.

Figure 4-9 A table with <th> elements that use the colspan attribute.

Figure 4-10 A table that uses the <thead>, <tbody>, and <tfoot> elements.

Figure 4-11 The Menu page with the new table.

Figure 4-12 A <figure> element with a <figcaption>.

Figure 4-13 The updated Menu page with product images.

Figure 4-14 The News page.

chapter five: Working with Forms

Figure 5-1 The completed Bookings page, displayed in Opera.

Figure 5-2 The newly created Bookings page.

Figure 5-3 A simple text input and label.

Figure 5-4 The updated Bookings page.

Figure 5-5 A password input field.

Figure 5-6 A simple checkbox.

Figure 5-7 Multiple input elements with the type radio.

Figure 5-8 The updated bookings form with the message box added.

Figure 5-9 The bookings form with the new Submit button.

Figure 5-10 Using the <select> element with <option> elements versus using radio buttons.

Figure 5-11 The updated restaurant field with a drop-down menu.

Figure 5-12 A <select> element with multiple <option> and <optgroup> elements, as displayed in Google Chrome.

Figure 5-13 The file browser displayed when a user clicks the file input in Mac OS X.

Figure 5-14 The finished Bookings page.

Figure 5-15 The updated Sitemap page.

chapter six: Enhancing Your Web Forms with HTML5

Figure 6-1 The bookings form with HTML5 input types and attributes (shown in Opera).

Figure 6-2 The iOS keyboard displayed for input elements with the type tel.

Figure 6-3 The iOS keyboard displayed for input elements with type email.

Figure 6-4 An input element with the type number, displayed in Google Chrome.

Figure 6-5 The iOS keyboard displayed for input elements with the type url.

Figure 6-6 An input element with the type search, as displayed in Google Chrome on Mac OS X.

Figure 6-7 An input element with the type range, as displayed in Google Chrome.

Figure 6-8 An input element with the type color, as displayed in Google Chrome on Mac OS X.

Figure 6-9 An input element with the type datetime, as displayed in Opera.

Figure 6-10 An input element with the type time, as displayed in Opera.

Figure 6-11 An input element with the type week, as displayed in Opera.

Figure 6-12 An input element with the type month, as displayed in Opera.

Figure 6-13 An <option> element that is linked to a <datalist>, as displayed in Opera.

chapter seven: Validating Form Data Using HTML5

Figure 7-1 The bookings form with validations, shown in Opera.

Figure 7-2 The tip displayed in Google Chrome if the user fails to fill in a required form field.

Figure 7-3 The validation tip displayed in Google Chrome when the input does not match the validation pattern.

chapter eight: Using Microdata

Figure 8-1 Extracting microdata from the Locations page using the Google Rich Snippets Tool.

chapter nine: Ensuring Accessibility

Figure 9-1 The VoiceOver screen reader in action.

Figure 9-2 The menu tables with captions.

Figure 9-3 Testing accessibility using WAVE.

Figure 9-4 The Google home page, converted to grayscale using Spur.

chapter ten: Introducing JavaScript

Figure 10-1 A visual representation of a segment from the DOM tree.

Figure 10-2 Selecting an element getElementById().

Figure 10-3 Selecting elements using getElementsByClassName().

Figure 10-4 Selecting Elements Using getElementsByTagName().

Figure 10-5 Selecting elements using getElementsByName().

chapter eleven: Adding Video and Audio

Figure 11-1 The About page with video.

Figure 11-2 How the About page appears if the userâ€™s browser does not support HTML5 video.

Figure 11-3 The video element now has a poster image that replaces the black box that was previously displayed.

Figure 11-4 The new Play button.

Figure 11-5 The new Pause button.

Figure 11-6 The new Seek bar.

Figure 11-7 The new Volume control.

Figure 11-8 The Mute button.

Figure 11-9 The About page with video subtitles.

chapter twelve: Storing Data

Figure 12-1 Retrieving data in localStorage using the getItem() function.

Figure 12-2 Removing data using the removeItem() function.

Figure 12-3 Finding key names using the key() function.

Figure 12-4 Using the clear() function to delete all the stored data.

Figure 12-5 The Name, Phone, and Email fields are populated from data stored in LocalStorage.

Figure 12-6 Converting a JavaScript object to JSON.

Figure 12-7 Converting a JSON string to a JavaScript object.

Figure 12-8 Retrieving and parsing an object from LocalStorage.

chapter thirteen: Using Geolocation

Figure 13-1 Using the GeoLocation API to highlight the nearest restaurant on the Locations page.

Figure 13-2 Location permissions in Google Chrome.

Figure 13-3 An alert dialog showing my current position.

Figure 13-4 The Locations page with distance labels.

Figure 13-5 The finished Locations page with geolocation built in.

chapter fourteen: Using Canvas to Create Online Ads

Figure 14-1 The advertisement you are going to create.

Figure 14-2 The canvas coordinate grid.

Figure 14-3 The canvas with a semitransparent black rectangle.

Figure 14-4 Drawing text onto a canvas.

Figure 14-5 Drawing lines onto a canvas.

Figure 14-6 A simple circle drawn using Canvas.

Figure 14-7 Drawing a segment of a circle.

Figure 14-8 Drawing a sector of a circle.

Figure 14-9 Drawing a circle on your canvas.

Figure 14-10 A simple canvas gradient.

Figure 14-11 Adding a gradient to your canvas.

Figure 14-12 A simple shadow.

Figure 14-13 Adding a shadow to your canvas.

Figure 14-14 Drawing the offer text on your canvas.

Figure 14-15 Saving and restoring state.

Figure 14-16 Using the save() and restore() functions to remove the text shadow.

Figure 14-17 The finished HTML5 Canvas advertisement.

appendix a: Additional HTML Markup for Text

Figure A-1 The <s> element, as displayed in Google Chrome.

Figure A-2 The <ins> element, as displayed in Google Chrome.

Figure A-3 A <meter> element, as displayed in Google Chrome.

Figure A-4 A series of <meter> elements, showing the variations in color states.

Figure A-5 A <progress> element, as displayed in Google Chrome.

List of Tables

chapter three: Creating the Page Templates

Table 3-1 Link Types

chapter four: Creating the Web Pages

Table 4-1 Date/Time Formats

chapter seven: Validating Form Data Using HTML5

Table 7-1 Input Validations

chapter eleven: Adding Video and Audio

Table 11-1 Video Codec Support in Modern Browsers

Table 11-2 Audio Codec Support in Modern Browsers

Guide

Cover

Table of Contents

Begin Reading

Pages

i

ii

iii

iv

v

vi

1

2

3

4

5

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

173

174

175

172

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

207

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

HTML5 Foundations

treehouse

Matt West

This edition first published 2013

© 2013 Matthew West

Registered office

John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.

The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/ or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Ltd. is not associated with any product or vendor mentioned in the book.

A catalogue record for this book is available from the British Library.

ISBN 978-1-118-35655-5 (paperback); ISBN 978-1-118-43268-6 (ebook); 978-1-118-43270-9 (ebook); 978-1-118-43269-3 (ebook)

Set in Chaparral Pro Light 10/12.5 by Indianapolis Composition Services

About the Author

MATT WEST is a developer and entrepreneur who has a keen fascination with exploring new ways that technology can be used to make our lives simpler. Currently residing just outside Northampton, England, Matt fell into web development after getting involved in a number of open-source projects in his spare time.

Matt currently runs Developer City, a small web development agency that specializes in creating innovative web applications for clients all around the world.

Matt writes a blog called Coding Skyscrapers (http://codingskyscrapers.com) and can be found as @MattAntWest on Twitter.

Publisher’s Acknowledgements

Some of the people who helped bring this book to market include the following:

Editorial and Production

VP Consumer and Technology Publishing Director: Michelle Leete

Associate Director–Book Content Management: Martin Tribe

Associate Publisher: Chris Webb

Assistant Editor: Ellie Scott

Development Editor: Sara Shlaer

Copy Editor: Debbye Butler

Technical Editor: Nick Elliott

Editorial Manager: Jodi Jensen

Senior Project Editor: Sara Shlaer

Editorial Assistant: Leslie Saxman

Marketing

Associate Marketing Director: Louise Breinholt

Marketing Manager: Lorna Mein

Senior Marketing Executive: Kate Parrett

Composition Services

Compositor: Indianapolis Composition Services

Proofreader: Wordsmith Editorial

Indexer: BIM Indexing & Proofreading Services

For my father.

Acknowledgments

There may be a single name on the cover of this book, but if the past six months has taught me anything, it is that writing a book is truly a team effort. I am forever grateful for the support and guidance given by so many throughout this process.

To Sara Shlaer, for her solid feedback, patience, and sharp editing skills.

To Nick Elliot, for his incredible eye-for-detail and honest feedback throughout.

To Debbye Butler, for guiding my transition to US English (and correcting the many mistakes that I made along the way.)

To Ellie Scott, for her help in keeping the legal department happy and her general support throughout.

To Chris Webb, for his help in conceiving the direction for this book and for giving me the opportunity to write it in the first place.

To all those at Wiley (and beyond) whom I didn’t have the privilege of working with personally, but whom I know worked hard to make this book a reality.

To Ryan Carson, for putting his trust in a stranger and for creating a company that is changing the lives of people all over the world.

To the Treehouse team—particularly Jim Hoskins, Nick Pettit and Michael Poley—for providing support whenever it was needed.

To all those within the web industry who share their thoughts, knowledge, and ideas; their inspiration has been invaluable throughout this process.

To my family and friends, for keeping me reasonably sane over the past six months.

Thank you.

Introduction

SOMETIMES IT’S DIFFICULT to remember a time before the World Wide Web. A time before we could find information about anything we desired by simply typing a few words into a search box on our computers, and these days even our mobile phones.

The web has come a long way since its humble origins in the research labs of academics. It has grown to be the single most valuable resource for information that the world has ever known. In doing so, it has created countless billionaires, sparked revolutions within countries throughout the world, and transformed education and science. The United Nations has even proposed that access to the Internet should be a basic human right.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!