Introduction 1
About this Book 2
Foolish Assumptions 3
Icons Used in This Book 4
Beyond the Book 4
Where to Go from Here 5
Part I: Getting Started with HTML and CSS on the Web 7
Chapter 1: An Overview of HTML and CSS on the Web 9
How and Where Web Pages Come to Life Online 10
HyperText 10
Content versus presentation 14
Web browsers 14
Getting to know Internet protocols 16
Understanding HTML and Its Versions 17
Different versions of HTML 17
Creating HTML markup 18
Building HTML documents 19
Understanding the Role of CSS 20
Different versions here, too 20
Creating CSS markup 21
Dissecting a Simple Markup Example 22
Wheres the HTML? 22
Wheres the CSS? 23
A partnership of equals 23
Chapter 2: Meeting the Structure and Components of HTML 25
Like Any Language: Syntax and Rules 25
Color-coding the markup 26
Breaking down the elements 27
Adding Attributes to Your HTML 29
Examining Entities in Markup 30
Non-ASCII characters 30
Character codes 31
(Special) tag characters 32
Organizing Web Pages 32
Organizing HTML text 34
Complementing and enhancing text 36
Chapter 3: Creating and Viewing a Web Page 37
Before You Get Started 37
Creating a Page from Scratch 39
Step 0: Gather your tools 39
Step 1: Planning a simple design 40
Step 2: Writing some HTML 41
Step 3: Saving your page 44
Step 4: Viewing your page 46
Editing an Existing Web Page 47
Posting Your Page Online 49
Part II: Getting the Structure and Text Right 51
Chapter 4: HTML Documents Need Good Structure 53
Establishing a Document Structure 53
HTML Document Organization Revisited 54
HTML DOCTYPE Starts Things Off 55
The Element 56
Anatomy of the 56
Meeting the himself 57
Handling metadata with 57
Redirecting users to another page 58
Naming your page with a 61
The Is a BIG Container 61
Chapter 5: Text and Lists 63
Formatting Text 63
Paragraphs 65
Headings 66
Controlling Text Blocks 68
Block quotes 68
Preformatted text 69
Horizontal rules 71
Organizing Information 73
Numbered lists 73
Bulleted lists 75
Definition lists 77
Nesting lists 79
Chapter 6: Tip-Top Tables in HTML 81
How Got a Bad Name in HTML 81
Whats in a Table? LOTS of Markup 82
Setting Up a Table Border 84
The Table Head () and Its Elements 85
Managing Table Layouts 87
Making Good Table Bodies 89
Shaping a solid table 89
Sitting at the Footer of the Table 92
Exploring and Explaining a Table 92
Oh caption, my caption 93
Is the header dead yet? 93
Marching through the table body 94
Finishing with the footer 94
Chapter 7: Working with Forms in HTML 97
Exploring Types of Web Forms 97
Search forms 98
Data collection forms 99
Creating Forms 100
Structure 101
Input tags 102
Input fields 103
Form validation 113
Processing Data 115
Processing forms on your pages 115
Designing User-Friendly Forms 117
Other Noteworthy Forms-Related Markup 118
Form Frameworks 120
Part III: Adding Links, Images, and Other Media 123
Chapter 8: Getting Hyper with Links in HTML 125
Basic Links 101 125
Exploring link options 127
Avoiding common mistakes 129
Customizing Links 130
Opening new windows 130
Specifying locations in web pages 132
Linking to non-HTML resources 134
Chapter 9: Working with Images in HTML 139
The Role of Images in a Web Page 139
Creating Web-Friendly Images 140
Adding an Image to a Web Page 142
Image location 142
Using the element 143
Adding alternative and title text 143
Specifying image size 146
Image borders and alignment 149
Images That Link 149
Triggering links 149
Building image maps 150
Chapter 10: Managing Media and More in HTML 153
The Battle of the Media Formats 154
Meet the major audio formats 155
Meet the major video formats 156
Comparing Traditional and HTML5 Media Handling 157
Mastering HTML5 Media Markup 158
Making beautiful music with audio 158
Moving media with video 159
Undergoing the conversion experience 162
Working with Web Page Controls 163
Displaying a meter bar 163
Tracking progress on activities 165
Tracking and reporting on time 166
Updating HTML5 controls 168
Part IV: Adopting CSS Style 169
Chapter 11: Advantages of Style Sheets 171
Advantages of Style Sheets 172
The four steps to style 173
Understanding the C in CSS 174
What CSS can do for a web page 174
Styling a Document with CSS 175
Using HTML5 Boilerplate 176
Normalize before you stylize 176
What you can do with CSS 180
Putting CSS in Its Place 182
Pixels, points, and dots Oh my! 182
Understanding the viewport 183
Property measurement values 184
About the CSS3 Standard 186
Chapter 12: CSS Structure and Syntax 191
Exploring CSS Structure and Syntax 191
Selectors and declarations 194
The selectors 195
Inheriting styles 204
Understanding the Cascade 205
Chapter 13: Using Different Kinds of Style Sheets 207
Applying Inline Styles 208
Getting to Know Internal Style Sheets 210
Understanding the element 210
Figuring out internal style sheet scope 210
Working with External Style Sheets 212
CSS files 212
Link element attributes 213
Importing and when to use @import 214
Part V: Enhancing Your Pages Look and Feel 215
Chapter 14: Managing Layout and Positioning 217
Managing Layout 217
Tiny boxes 217
Block versus inline elements 219
Normal flow 222
Managing Positioning 225
About coordinates and offsets 226
Relative positioning 226
Absolute positioning 227
Floating 228
Using a Layout Generator 230
Chapter 15: Building with Boxes, Borders, and Buttons 233
Meeting the Box Model 233
Putting the Box Model into Practice 235
Specifying padding and margin widths 239
Adding borders 243
Aligning text 246
Indenting text 247
Creating buttons with CSS 247
Chapter 16: Using Colors and Backgrounds 251
Defining Color Values 251
Color names 251
Color numbers 253
Defining Color Definitions 255
Text 256
Links 256
Backgrounds 258
Advanced backgrounds 259
Chapter 17: Web Typography 261
Finding Out about Fonts 261
Font family 262
Sizing 265
Trying Out Text Treatments 268
Embolden with bold 268
Emphasizing with italic 269
Changing capitalization 270
Getting fancy with the text-decoration property 271
Checking Out the Catchall Font Property 272
Experimenting with Web Fonts 273
Font file formats 273
Finding fonts 274
Linking fonts 274
Using Google Fonts 275
Chapter 18: CSS Text and Shadow Effects 281
Creating Shadows 282
text-shadow 282
box-shadow 283
Creating Inset Text 284
Creating 3D Text 285
Creating a Letterpress Effect 286
Drop Shadows 287
Text Rotation 289
Chapter 19: Multimedia and Animation with CSS 291
Using CSS with Multimedia 291
Visual media styles 293
Paged media styles 299
Getting Animated 300
Using the animation properties 302
Creating animations with @keyframes 303
Animating color 303
Part VI: The Part of Tens 305
Chapter 20: Ten Keys to Mobile Web Design 307
Design for Different Mobile Devices 307
Design for People 310
Design for Small Screens 310
Design for Low Bandwidth 311
Design for Touch 311
Design for Distracted Surfers 313
Test on Many Mobile Devices 313
Design for Simplicity 314
Set Up Mobile Web Addresses 314
Include a Link to the Desktop Site 315
Chapter 21: Ten HTML Dos and Donts 317
Dont Lose Sight of Your Content 317
Do Structure Your Documents and Your Site 318
Do Make the Most from the Least 318
Do Build Attractive Pages 319
Dont Lose Track of Those Tags 319
Do Avoid Browser Dependencies 320
Dont Make It Hard to Navigate Your Wild and Woolly Web 321
Dont Think Revolution, Think Evolution 322
Dont Get Stuck in the Two-Dimensional-Text Trap 323
Dont Let Inertia Overcome You 323
Chapter 22: Ten Ways to Kill Web Bugs Dead 325
Make a List and Check It Twice 325
Master Text Mechanics 326
Lack of Live Links a Lousy Legacy 327
When Old Links Must Linger 328
Make Your Content Mirror Your World 328
Look for Trouble in All the Right Places 328
Cover All the Bases with Peer Reviews 329
Use the Best Tools of the Testing Trade 330
Schedule Site Reviews 330
Foster User Feedback 331
If You Give to Them, Theyll Give to You! 332
Chapter 23: Ten Cool HTML Tools and Technologies 333
WYSIWYG HTML Editors 334
Dreamweaver 334
Other WYSIWYG editors 335
Helper HTML Editors 335
Aptana Studio 335
Other helper editors 336
Inexpensive Graphics Editors 337
Professional Graphics Editors 337
Adobe Photoshop 338
Adobe Fireworks 338
W3C Link Checker 339
Other Link Checkers 339
HTML Validators 340
FTP Clients 341
Miscellaneous Helpful Web Tools 341
Part VII: Appendixes 343
Appendix A: Twitterati 345
Appendix B: About the Dummies HTML Site 349
About WordPress 349
The dashboard 349
Appearance and themes 350
Pages and posts 351
Widgets 351
Responsive Design 352
HTML5 Cafe 352
The home page 352
About Us 354
The Menu 354
Contact Us 354
HTML5 Boilerplate 355
Index 357
