HTML5 24-Hour Trainer

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

Index 287