Skip to main content


Beginning HTML5 and CSS3 For Dummies

Ed Tittel, Chris Minnick

ISBN: 978-1-118-65720-1 September 2013 384 Pages


Your full-color, friendly guide to getting started with HTML5 and CSS3!

HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the latest versions of HTML and CSS: HTML5 and CSS3. Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules and style sheets, addresses common mistakes and explains how to fix them, and explores interesting HTML5 tools.

  • Serves as an ideal introduction to HTML5 and CSS3 for beginners with little to no web development experience
  • Details the capabilities of HTML5 and CSS3 and how to use both to create responsive, practical, and well-designed websites
  • Helps you understand how HTML5 and CSS3 are the foundation upon which hundreds of millions of web pages are built
  • Features full-color illustrations to enhance your learning process

Beginning HTML5 and CSS3 For Dummies is the perfect first step for getting started with the fundamentals of web development and design.

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

Where’s the HTML? 22

Where’s 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 <html> Element 56

Anatomy of the <head> 56

Meeting the <head> himself 57

Handling metadata with <meta> 57

Redirecting users to another page 58

Naming your page with a <title> 61

The <body> 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 <table> Got a Bad Name in HTML 81

What’s in a Table? LOTS of Markup 82

Setting Up a Table Border 84

The Table Head (<thead>) 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

The Role of Images in a Web Page 139

Chapter 9: Working with Images in HTML 139

Creating Web-Friendly Images 140

Adding an Image to a Web Page 142

Image location 142

Using the <img> 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 <style> 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 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 Do’s and Don’ts 317

Don’t 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

Don’t Lose Track of Those Tags 319

Do Avoid Browser Dependencies 320

Don’t Make It Hard to Navigate Your Wild and Woolly Web 321

Don’t Think Revolution, Think Evolution 322

Don’t Get Stuck in the Two-Dimensional-Text Trap 323

Don’t 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, They’ll 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

x Beginning HTML5 & CSS3 For Dummies 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

Please check back here for updates.