HTML5 Step by Step

Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
What Is HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Understanding HTML Tags . xix
Understanding Cascading Style Sheets xxi
Why Learn HTML in Notepad? . xxi
Choosing an HTML Version xxii
Why Code in HTML5? xxiii
Minimum System Requirements xxiv
Using the Practice Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
Conventions and Features in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
What Next? xxx
Part 1 Getting Started with HTML
1 Editing and Viewing HTML Files 3
Opening a Web Page in Notepad 3
Adding the Data File Location to the Favorites List 5
Opening a File from Windows Explorer 7
Previewing a Web Page in a Web Browser 7
Making, Saving, and Viewing Changes . 10
Key Points 11

2 Setting Up the Document Structure 13
Specifying the Document Type 14
Creating the HTML, Head, and Body Sections 15
Creating Paragraphs and Line Breaks . 17
Specifying a Page Title and Metatags . 19
Publishing a File to a Server 22
Key Points 23
3 Formatting Text by Using Tags 25
Creating Headings 26
Applying Bold and Italic Formatting . 29
Applying Superscript and Subscript Formatting . 31
Using Monospace and Preformatted Text 32
Formatting a Block Quotation 37
Configuring View Settings in Internet Explorer 40
Key Points 45
4 Using Lists and Backgrounds 47
Creating Bulleted and Numbered Lists . 48
Nesting Lists 49
Changing the Bullet or Number Character 50
Specifying the Start of a Numbered List . 51
Creating Definition Lists 54
Inserting Special Characters 55
Inserting Horizontal Lines . 57
Choosing Background and Foreground Colors . 60
Specifying Colors 60
Applying a Background Color 61
Applying a Foreground Color . 61
Specifying a Background Image File . 62
Key Points 65
5 Creating Hyperlinks and Anchors 67
Hyperlinking to a Web Page . 68
Using Partial Paths and Filenames . 68
Using Relative and Absolute Paths 69
Setting a Target Window . 70

Hyperlinking to an E-Mail Address 71
Creating and Hyperlinking to Anchors . 75
Hyperlinking to Other Content 78
Key Points 81
Part 2 Style Sheets and Graphics
6 Introduction to Style Sheets 85
Understanding Styles . 86
Constructing Style Rules 87
Creating Styles for Nested Tags . 91
Creating Classes and IDs for Applying Styles . 93
Applying Styles to Hyperlinks 96
Creating and Linking to External Style Sheets . 98
Key Points 100
7 Formatting Text by Using Style Sheets 103
Specifying a Font Family 104
Specifying a Font Size and Color . 107
Applying Bold and Italics 111
Applying Strikethrough and Underlining . 114
Creating Inline Spans . 117
Adjusting Spacing Between Letters . 119
Key Points 123
8 Formatting Paragraphs by Using Style Sheets 125
Indenting Paragraphs 126
Applying a Border to a Paragraph . 130
Specifying a Border Style 130
Setting Border Padding . 131
Specifying Border Width and Color . 131
Formatting Border Sides Individually 132
Setting All Border Attributes at Once 133
Specifying the Horizontal Alignment of a Paragraph 135
Specifying Vertical Space within a Paragraph 137
Key Points 139

9 Displaying Graphics 141
Selecting a Graphics Format . 142
Preparing Graphics for Web Use 143
Inserting Graphics 144
Arranging Elements on the Page . 147
Controlling Image Size and Padding . 149
Hyperlinking from Graphics 153
Using Thumbnail Graphics 155
Including Alternate Text for Graphics . 158
Adding Figure Captions . 158
Key Points 161
Part 3 Page Layout and Navigation
10 Creating Navigational Aids 165
Planning Your Site’s Organization 166
Creating a Text-Based Navigation Bar 167
Creating a Graphical Navigation Bar . 171
Creating an Image Map . 174
Redirecting to Another URL 180
Key Points 183
11 Creating Division-Based Layouts 185
Understanding HTML5 Semantic Tags 186
Beginning to Think in Divisions 187
Creating Divisions . 188
Creating an HTML5 Semantic Layout 190
Positioning Divisions 192
Floating a Division to the Right or Left . 192
Positioning a Division on the Page 193
Formatting Divisions 197
Key Points 203
12 Creating Tables 205
Creating a Simple Table . 207
Specifying the Size of a Table . 211
Specifying the Width of a Column 216

Merging Table Cells 220
Using Tables for Page Layout . 224
Key Points 229
13 Formatting Tables 231
Applying Table Borders . 232
Applying Borders by Using Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Applying Borders by Using Styles 235
Applying Background and Foreground Fills 241
Changing Cell Padding, Spacing, and Alignment 245
Setting Cell Padding . 246
Setting Cell Spacing 246
Setting Horizontal and Vertical Alignment 247
Key Points 249
14 Creating User Forms 251
Creating a Basic Form 252
Creating a Text Box 253
Special Field Types for E-Mail and Web Addresses . 254
Creating a Text Area . 255
Creating a Submit or Clear Button . 255
Adding Default or Placeholder Text 256
Creating Check Boxes and Option Buttons 259
Creating Lists . 262
Additional Input Types in HTML5 267
Understanding CGI and Other Advanced Tools 268
Key Points 269
15 Incorporating Sound and Video 271
What’s New with Audio and Video in HTML5? 272
HTML Multimedia Basics . 273
Multimedia Formats and Containers . 273
Codecs: Decoding the Video and Audio . 274
Which Format to Choose? . 275
File Size and Quality . 275
Encoding Video . 276

Embedding Video Clips . 277
Introducing the <video> Tag 277
The <embed> Tag: Your Fallback Plan 279
Placing a Video Clip on a Web Page . 279
Incorporating Audio on a Web Page 282
Playing Audio with the <audio> Tag . 282
Playing Audio in Older Browsers 283
Placing an Audio Clip on a Web Page . 283
Key Points 285
16 Including JavaScript and External Content 287
Introducing the Canvas 287
JavaScript, Briefly 288
Including JavaScript on Your Web Page 289
Your First JavaScript Web Page 289
JavaScript Events and jQuery 292
Obtaining jQuery 293
Getting Ready for jQuery 294
Selecting Elements with jQuery 295
Calling Functions with JavaScript . 297
Responding to Events with jQuery and JavaScript 298
Using the HTML5 <canvas> Tag 303
Including External Content in Web Pages 310
Key Points 311
Part 4 Other Ways to Create HTML Code
17 HTML and Microsoft Expression Web 315
Exploring the Expression Web Interface . 316
Creating Web Sites and Web Pages 320
Create a Page by Using a CSS Template . 325
Insert Graphics 328
Import an Images Folder . 328
Place Images on a Page . 330
Add a Background Image to a Division 331
Formatting Text 333
Formatting a Division 338

Inserting Hyperlinks . 340
Key Points 343
Part 5 Appendixes
A Designing for Usability 347
Understanding Usability 347
Planning for Usability . 348
Sketching the Site Organization . 349
Designing a Consistent Page Template 349
Designing the Content of Individual Pages 350
Performing Usability Testing 351
B Designing for Accessibility 353
Guideline 1: Provide Equivalent Alternatives to Auditory and Visual Content . 354
Guideline 2: Don’t Rely on Color Alone 354
Guideline 3: Use Markup and Style Sheets, and Do So Properly 355
Guideline 4: Clarify Natural Language Usage 356
Guideline 5: Create Tables that Transform Gracefully . 356
Guideline 6: Ensure that Pages Featuring New Technologies Transform Gracefully .
357
Guideline 7: Ensure User Control of Time-Sensitive Content Changes 357
Guideline 8: Ensure Direct Accessibility of Embedded User Interfaces 358
Guideline 9: Design for Device Independence 358
Guideline 10: Use Interim Solutions 359
Guideline 11: Use W3C Technologies and Guidelines 359
Guideline 12: Provide Context and Orientation Information 360
Guideline 13: Provide Clear Navigation Mechanisms . 360
Guideline 14: Ensure that Documents are Clear and Simple . 361
C Tags Added and Removed in HTML5 363
Tags Added in HTML5 363
Tags Removed in HTML5 . 364
Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385