Sams teach yourself web publishing with HTML and CSS in one hour a day: includes new HTML5 coverage (6th Edition)

ptg

ptg

in One Hour a Day

Web Publishing with

HTML and CSS

SamsTeachYourself

Laura Lemay

Rafe Colburn

800 East 96th Street, Indianapolis, Indiana 46240

ptg

Sams Teach Yourself Web Publishing with HTML

and CSS in One Hour a Day

Copyright © 2011 by Sams Publishing

All rights reserved. No part of this book shall be reproduced, stored in a retrieval system,

or transmitted by any means, electronic, mechanical, photocopying, recording, or other￾wise, without written permission from the publisher. No patent liability is assumed with

respect to the use of the information contained herein. Although every precaution has been

taken in the preparation of this book, the publisher and authors assume no responsibility for

errors or omissions. Nor is any liability assumed for damages resulting from the use of the

information contained herein.

ISBN-13: 978-0-672-33096-4

ISBN-10: 0-672-33096-2

Library of Congress Catalog-in-Publication data is on file.

First Printing: August 2010

Trademarks

All terms mentioned in this book that are known to be trademarks or service marks have

been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this infor￾mation. Use of a term in this book should not be regarded as affecting the validity of any

trademark or service mark.

Warning and Disclaimer

Every effort has been made to make this book as complete and as accurate as possible, but

no warranty or fitness is implied. The information provided is on an “as is” basis. The

authors and the publisher shall have neither liability nor responsibility to any person or

entity with respect to any loss or damages arising from the information contained in this

book or from the use of the CD or programs accompanying it.

Bulk Sales

Pearson offers excellent discounts on this book when ordered in quantity for bulk pur￾chases or special sales. For more information, please contact

U.S. Corporate and Government Sales

1-800-382-3419

[email protected]

For sales outside of the U.S., please contact

International Sales

[email protected]

Acquisitions Editor

Mark Taber

Development Editor

Songlin Qiu

Managing Editor

Sandra Schroeder

Project Editor

Seth Kerney

Copy Editor

Keith Cline

Indexer

Brad Herriman

Proofreader

Apostrophe Editing

Services, Inc.

Technical Editor

Julie Meloni

Publishing

Coordinator

Vanessa Evans

Multimedia

Developer

Dan Scherf

Book Designer

Gary Adair

Page Layout

Studio Galou, LLC

ptg

Contents at a Glance

PART I: Getting Started

1 Navigating the World Wide Web 7

2 Preparing to Publish on the Web 25

3 Introducing HTML and XHTML 49

PART II: Creating Web Pages

4 Learning the Basics of HTML 67

5 Organizing Information with Lists 81

6 Adding Links to Your Web Pages 99

7 Formatting Text with HTML and CSS 131

PART III: Doing More with HTML and CSS

8 Using CSS to Style a Site 173

9 Adding Images, Color, and Backgrounds 211

10 Building Tables 259

11 Designing Forms 311

12 Integrating Multimedia: Sound, Video, and More 355

13 Advanced CSS: Page Layout in CSS 389

PART IV: Using JavaScript and Ajax

14 Introducing JavaScript 411

15 Using JavaScript in Your Pages 435

16 Using JavaScript Libraries 459

17 Working with Frames and Linked Windows 489

PART V: Designing Effective Web Pages

18 Writing Good Web Pages: Do's and Don'ts 531

19 Designing for the Real World 567

PART VI: Going Live on the Web

20 Putting Your Site Online 593

21 Taking Advantage of the Server 619

22 Content Management Systems and Publishing Platforms 657

PART VII: Appendix

A Sources for Further Information 691

ptg

Table of Contents

Introduction 1

Who Should Read This Book .................................................................................. 2

What This Book Contains ...................................................................................... 2

What You Need Before You Start ............................................................................ 3

Conventions Used in This Book .............................................................................. 4

Special Elements .......................................................................................... 4

HTML Input and Output Examples.................................................................. 5

Special Fonts .............................................................................................. 5

Workshop.................................................................................................... 5

PART I: Getting Started

LESSON 1: Navigating the World Wide Web 7

How the World Wide Web Works ............................................................................ 8

The Web Is a Hypertext Information System...................................................... 8

The Web Is Graphical and Easy to Navigate ...................................................... 9

The Web Is Cross-Platform .......................................................................... 10

The Web Is Distributed ................................................................................ 10

The Web Is Dynamic .................................................................................. 11

The Web Is Interactive ................................................................................ 13

Web Browsers .................................................................................................... 15

What the Browser Does................................................................................ 15

An Overview of Some Popular Browsers ........................................................ 16

Using the Browser to Access Other Services.................................................... 18

Web Servers........................................................................................................ 19

Uniform Resource Locators .................................................................................. 20

Summary............................................................................................................ 21

Workshop .......................................................................................................... 21

Q&A ........................................................................................................ 21

Quiz ........................................................................................................ 22

Quiz Answers ............................................................................................ 22

Exercises .................................................................................................. 23

ptg

LESSON 2: Preparing to Publish on the Web 25

Anatomy of a Website .......................................................................................... 26

What Do You Want to Do on the Web? .................................................................... 28

Setting Your Goals .............................................................................................. 30

Breaking Up Your Content into Main Topics ............................................................ 31

Ideas for Organization and Navigation .................................................................... 32

Hierarchies ................................................................................................ 33

Linear ...................................................................................................... 35

Linear with Alternatives .............................................................................. 36

Combination of Linear and Hierarchical.......................................................... 38

Web.......................................................................................................... 39

Storyboarding Your Website .................................................................................. 42

What’s Storyboarding and Why Do I Need It?.................................................. 42

Hints for Storyboarding................................................................................ 43

Web Hosting ...................................................................................................... 44

Using a Content-Management Application ...................................................... 44

Setting Up Your Own Web Hosting ................................................................ 45

Summary............................................................................................................ 46

Workshop .......................................................................................................... 47

Q&A ........................................................................................................ 47

Quiz ........................................................................................................ 48

Quiz Answers ............................................................................................ 48

Exercises .................................................................................................. 48

LESSON 3: Introducing HTML and XHTML 49

What HTML Is (And What It Isn’t) ........................................................................ 50

HTML Describes the Structure of a Page ........................................................ 50

HTML Does Not Describe Page Layout .......................................................... 51

Why It Works This Way .............................................................................. 52

How Markup Works .................................................................................... 53

A Brief History of HTML Tags .................................................................... 53

The Current Standard: XHTML 1.1 ........................................................................ 54

The Future Standard: HTML5 ................................................................................ 55

What HTML Files Look Like ................................................................................ 55

Text Formatting and HTML .......................................................................... 60

Using Cascading Style Sheets ................................................................................ 61

Including Styles in Tags .............................................................................. 62

ptg

Programs to Help You Write HTML........................................................................ 62

Summary............................................................................................................ 64

Workshop .......................................................................................................... 64

Q&A ........................................................................................................ 64

Quiz ........................................................................................................ 65

Quiz Answers ............................................................................................ 65

Exercises .................................................................................................. 65

PART II: Creating Web Pages

LESSON 4: Learning the Basics of HTML 67

Structuring Your HTML........................................................................................ 68

The <html> Tag .......................................................................................... 68

The <head> Tag.......................................................................................... 69

The <body> Tag ........................................................................................ 69

The Title ............................................................................................................ 70

Headings............................................................................................................ 72

Paragraphs.......................................................................................................... 75

Comments .......................................................................................................... 75

Summary............................................................................................................ 78

Workshop .......................................................................................................... 78

Q&A ........................................................................................................ 78

Quiz ........................................................................................................ 79

Quiz Answers ............................................................................................ 79

Exercises .................................................................................................. 80

LESSON 5: Organizing Information with Lists 81

Lists: An Overview .............................................................................................. 82

Numbered Lists .................................................................................................. 83

Customizing Ordered Lists .......................................................................... 84

Unordered Lists .................................................................................................. 87

Customizing Unordered Lists........................................................................ 88

Glossary Lists .................................................................................................... 90

Nesting Lists ...................................................................................................... 92

Other Uses for Lists ............................................................................................ 94

Summary............................................................................................................ 95

Workshop .......................................................................................................... 96

vi Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day

ptg

Q&A ........................................................................................................ 96

Quiz ........................................................................................................ 97

Quiz Answers ............................................................................................ 97

Exercises .................................................................................................. 98

LESSON 6: Adding Links to Your Web Pages 99

Creating Links .................................................................................................. 100

The Link Tag: <a> .................................................................................... 100

Linking Local Pages Using Relative and Absolute Pathnames .................................... 105

Absolute Pathnames .................................................................................. 106

Using Relative or Absolute Pathnames? ........................................................ 107

Links to Other Documents on the Web .................................................................. 108

Linking to Specific Places Within Documents.......................................................... 113

Creating Links and Anchors........................................................................ 113

Linking to Anchors in the Same Document .................................................... 120

Anatomy of a URL ............................................................................................ 120

Parts of URLs .......................................................................................... 121

Special Characters in URLs ........................................................................ 122

Additional Attributes for the <a> Tag............................................................ 123

Kinds of URLs .................................................................................................. 123

HTTP...................................................................................................... 123

Anonymous FTP ...................................................................................... 124

Non-Anonymous FTP ................................................................................ 125

Mailto .................................................................................................... 125

File ........................................................................................................ 126

Summary .......................................................................................................... 127

Workshop ........................................................................................................ 128

Q&A ...................................................................................................... 128

Quiz........................................................................................................ 130

Quiz Answers .......................................................................................... 130

Exercises ................................................................................................ 130

LESSON 7: Formatting Text with HTML and CSS 131

Character-Level Elements .................................................................................... 132

Logical Styles .......................................................................................... 132

Physical Styles.......................................................................................... 135

Contents vii

ptg

Character Formatting Using CSS .......................................................................... 137

The Text Decoration Property ...................................................................... 137

Font Properties.......................................................................................... 138

Preformatted Text .............................................................................................. 139

Horizontal Rules ................................................................................................ 142

Attributes of the <hr> Tag .......................................................................... 143

Line Break ........................................................................................................ 145

Addresses ........................................................................................................ 147

Quotations ........................................................................................................ 147

Special Characters.............................................................................................. 149

Character Entities for Special Characters ...................................................... 150

Specifying Character Encoding .................................................................... 151

Character Entities for Reserved Characters .................................................... 152

Text Alignment.................................................................................................. 153

Aligning Individual Elements ...................................................................... 153

Aligning Blocks of Elements ...................................................................... 153

Fonts and Font Sizes .......................................................................................... 155

Summary .......................................................................................................... 167

Workshop ........................................................................................................ 171

Q&A ...................................................................................................... 171

Quiz........................................................................................................ 172

Quiz Answers .......................................................................................... 172

Exercises ................................................................................................ 172

PART III: Doing More with HTML and CSS

LESSON 8: Using CSS to Style a Site 173

Including Style Sheets in a Page............................................................................ 174

Creating Page-Level Styles.......................................................................... 174

Creating Sitewide Style Sheets .................................................................... 175

Selectors .......................................................................................................... 176

Contextual Selectors .................................................................................. 176

Classes and IDs ........................................................................................ 177

What Cascading Means .............................................................................. 179

Units of Measure................................................................................................ 180

The Box Model.................................................................................................. 182

Borders.................................................................................................... 183

viii Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day

ptg

Margins and Padding ................................................................................ 185

Controlling Size and Element Display .......................................................... 189

Float ...................................................................................................... 192

CSS Positioning ................................................................................................ 196

Relative Positioning .................................................................................. 197

Absolute Positioning .................................................................................. 199

Controlling Stacking .................................................................................. 202

The <body> Tag ................................................................................................ 205

Links .............................................................................................................. 206

Summary .......................................................................................................... 207

Workshop ........................................................................................................ 207

Q&A ...................................................................................................... 207

Quiz........................................................................................................ 208

Quiz Answers .......................................................................................... 208

Exercises ................................................................................................ 209

LESSON 9: Adding Images, Color, and Backgrounds 211

Images on the Web ............................................................................................ 212

Image Formats .................................................................................................. 213

GIF ........................................................................................................ 213

JPEG ...................................................................................................... 213

PNG ...................................................................................................... 214

Inline Images in HTML: The <img> Tag ................................................................ 214

Adding Alternative Text to Images .............................................................. 215

Images and Text ................................................................................................ 219

Text and Image Alignment .......................................................................... 220

Wrapping Text Next to Images .................................................................... 223

Adjusting the Space Around Images ............................................................ 226

Images and Links .............................................................................................. 228

Other Neat Tricks with Images ............................................................................ 232

Image Dimensions and Scaling .................................................................... 232

More About Image Borders ........................................................................ 233

Using Color ...................................................................................................... 234

Specifying Colors...................................................................................... 234

Changing Colors Using CSS........................................................................ 236

Changing Page Colors in HTML .................................................................. 236

Contents ix

ptg

Image Backgrounds............................................................................................ 238

Specifying Backgrounds for Elements .......................................................... 241

Using Images As Bullets .................................................................................... 242

What Is an Imagemap? ........................................................................................ 243

ImageMaps and Text-Only Browsers ............................................................ 244

Getting an Image ...................................................................................... 244

Determining Your Coordinates .................................................................... 245

The <map> and <area> Tags ...................................................................... 248

The usemap Attribute ................................................................................ 249

Image Etiquette.................................................................................................. 254

Summary .......................................................................................................... 255

Workshop ........................................................................................................ 256

Q&A ...................................................................................................... 256

Quiz........................................................................................................ 257

Quiz Answers .......................................................................................... 258

Exercises ................................................................................................ 258

LESSON 10: Building Tables 259

Creating Tables.................................................................................................. 260

Table Parts........................................................................................................ 260

The <table> Element.................................................................................. 261

The Table Summary .................................................................................. 261

Rows and Cells ........................................................................................ 262

Empty Cells ............................................................................................ 264

Captions .................................................................................................. 265

Sizing Tables, Borders, and Cells .......................................................................... 269

Setting Table Widths.................................................................................. 269

Changing Table Borders ............................................................................ 270

Cell Padding ............................................................................................ 273

Cell Spacing ............................................................................................ 274

Column Widths ........................................................................................ 275

Setting Breaks in Text ................................................................................ 278

Table and Cell Color .......................................................................................... 280

Aligning Your Table Content ................................................................................ 282

Table Alignment........................................................................................ 282

Cell Alignment ........................................................................................ 283

Caption Alignment .................................................................................... 286

x Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day

ptg

Spanning Multiple Rows or Columns .................................................................... 287

More Advanced Table Enhancements .................................................................... 296

Grouping and Aligning Columns.................................................................. 296

Grouping and Aligning Rows ...................................................................... 300

Other Table Elements and Attributes...................................................................... 303

How Tables Are Used ........................................................................................ 303

Summary .......................................................................................................... 304

Workshop ........................................................................................................ 309

Q&A ...................................................................................................... 309

Quiz........................................................................................................ 309

Quiz Answers .......................................................................................... 310

Exercises ................................................................................................ 310

LESSON 11: Designing Forms 311

Understanding Form and Function ........................................................................ 312

Using the <form> Tag ........................................................................................ 317

Using the <label> Tag ........................................................................................ 320

Creating Form Controls with the <input> Tag.......................................................... 321

Creating Text Controls .............................................................................. 322

Creating Password Controls ........................................................................ 323

Creating Submit Buttons ............................................................................ 324

Creating Reset Buttons .............................................................................. 325

Creating Check Box Controls ...................................................................... 325

Creating Radio Buttons .............................................................................. 326

Using Images as Submit Buttons.................................................................. 327

Creating Generic Buttons............................................................................ 328

Hidden Form Fields .................................................................................. 329

The File Upload Control ............................................................................ 329

Using Other Form Controls.................................................................................. 330

Using the button Element............................................................................ 330

Creating Large Text-Entry Fields with textarea .............................................. 331

Creating Menus with select and option .......................................................... 332

Grouping Controls with fieldset and legend ............................................................ 340

Changing the Default Form Navigation ........................................................ 341

Using Access Keys.................................................................................... 342

Creating disabled and readonly Controls........................................................ 342

Contents xi

ptg

Applying Cascading Style Sheet Properties to Form Elements.................................... 343

Planning Your Forms .......................................................................................... 349

Summary .......................................................................................................... 350

Workshop ........................................................................................................ 351

Q&A ...................................................................................................... 351

Quiz........................................................................................................ 352

Quiz Answers .......................................................................................... 352

Exercises ................................................................................................ 353

LESSON 12: Integrating Multimedia: Sound, Video, and More 355

Embedding Video the Simple Way ........................................................................ 356

Advantages and Disadvantages of Hosting Videos on YouTube.......................... 357

Uploading Videos to YouTube .................................................................... 358

Customizing the Video Player...................................................................... 359

Other Services .......................................................................................... 360

Hosting Your Own Video .................................................................................... 361

Video and Container Formats .............................................................................. 362

Converting Video to H.264 .................................................................................. 363

Converting Video to Ogg Theora.................................................................. 366

Embedding Video Using <video>.......................................................................... 366

The <video> Tag ...................................................................................... 367

Using the <source> Element........................................................................ 369

Embedding Flash Using the <object> Tag .............................................................. 370

Alternative Content for the <object> Tag ...................................................... 374

The <embed> Tag .............................................................................................. 375

Embedding Flash Movies Using SWFObject .......................................................... 376

Flash Video Players .......................................................................................... 378

JW Player ................................................................................................ 378

Using Flowplayer ...................................................................................... 380

Using the <object> Tag with the <video> Tag ................................................ 382

Embedding Audio in Your Pages .......................................................................... 383

The <audio> Tag ...................................................................................... 383

Flash Audio Players .................................................................................. 384

Summary .......................................................................................................... 385

Workshop ........................................................................................................ 386

Q&A ...................................................................................................... 386

Quiz........................................................................................................ 387

xii Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day

ptg

Quiz Answers .......................................................................................... 387

Exercises ................................................................................................ 388

LESSON 13: Advanced CSS: Page Layout in CSS 389

Laying Out the Page .......................................................................................... 390

The Problems with Layout Tables ................................................................ 390

Writing HTML with Structure .................................................................... 391

Writing a Layout Style Sheet ...................................................................... 394

The Floated Columns Layout Technique ........................................................ 401

The Role of CSS in Web Design .......................................................................... 403

Style Sheet Organization ............................................................................ 404

Sitewide Style Sheets ................................................................................ 407

Summary .......................................................................................................... 408

Workshop ........................................................................................................ 408

Q&A ...................................................................................................... 408

Quiz........................................................................................................ 409

Quiz Answers .......................................................................................... 409

Exercises ................................................................................................ 410

PART IV: Using JavaScript and Ajax

LESSON 14: Introducing JavaScript 411

Why Would You Want to Use JavaScript? .............................................................. 412

Ease of Use .............................................................................................. 412

Increasing Server Efficiency ........................................................................ 413

Integration with the Browser........................................................................ 413

The <script> Tag................................................................................................ 414

The Structure of a JavaScript Script .............................................................. 414

The src Attribute ...................................................................................... 415

The JavaScript Language .................................................................................... 415

Operators and Expressions .......................................................................... 417

Variables.................................................................................................. 418

Control Structures .................................................................................... 421

Functions ................................................................................................ 424

Data Types .............................................................................................. 426

Arrays .................................................................................................... 427

Objects.................................................................................................... 427

Contents xiii

ptg

The JavaScript Environment ................................................................................ 428

Events.............................................................................................................. 429

Summary .......................................................................................................... 432

Workshop ........................................................................................................ 433

Q&A ...................................................................................................... 433

Quiz........................................................................................................ 433

Quiz Answers .......................................................................................... 434

Exercises ................................................................................................ 434

LESSON 15: Using JavaScript in Your Pages 435

Validating Forms with JavaScript .......................................................................... 436

Hiding and Showing Elements.............................................................................. 443

Adding New Content to a Page ............................................................................ 452

Summary .......................................................................................................... 456

Workshop ........................................................................................................ 456

Q&A ...................................................................................................... 456

Quiz........................................................................................................ 457

Quiz Answers .......................................................................................... 457

Exercises ................................................................................................ 457

LESSON 16: Using JavaScript Libraries 459

What Are JavaScript Libraries? ............................................................................ 460

Reviewing the Popular JavaScript Libraries ............................................................ 460

jQuery .................................................................................................... 461

Dojo ...................................................................................................... 461

Yahoo! UI................................................................................................ 461

Prototype ................................................................................................ 461

Other Libraries.......................................................................................... 462

Getting Started with jQuery.................................................................................. 462

Your First jQuery Script ...................................................................................... 463

Binding Events .................................................................................................. 465

Modifying Styles on the Page .............................................................................. 466

Hiding and Showing Elements .................................................................... 466

Retrieving and Changing Style Sheet Properties.............................................. 467

Modifying Content on the Page ............................................................................ 468

Manipulating Classes ................................................................................ 468

Manipulating Form Values .......................................................................... 471

xiv Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day