Build Your Own Website The Right Way Using HTML & CSS, 3rd Edition

Front Cover......Page 1
Front Matter......Page 2
Build Your Own Website The Right Way Using HTML & CSS......Page 4
Copyright......Page 5
Bios......Page 6
Dedication......Page 8
Table of Contents......Page 10
Preface......Page 22
What is a Browser?......Page 24
Who Should Read This Book......Page 25
What You’ll Learn from This Book......Page 26
HTML, Markup, CSS … Welcome to Your First Bits of Jargon!......Page 27
What This Book Won’t Tell You......Page 29
What’s in This Book......Page 30
The Code Archive......Page 33
Your Feedback......Page 34
Acknowledgements......Page 35
Markup Samples......Page 36
Tips, Notes, and Warnings......Page 37
Setting Up Shop......Page 38
The Basic Tools You Need......Page 39
Your Text Editor: Notepad......Page 40
Your Web Browser: Internet Explorer......Page 41
Your Text Editor: TextEdit......Page 42
Your Web Browser: Safari......Page 43
NoteTab......Page 44
TextWrangler......Page 45
Not Just Text, Text, Text......Page 46
Windows Tools......Page 48
Picasa......Page 49
Preview......Page 50
iPhoto......Page 51
Online Tools......Page 52
Windows......Page 53
Mac OS X......Page 55
Summary......Page 56
Anatomy of a Web Page......Page 58
Viewing the Source......Page 59
Basic Requirements of a Web Page......Page 60
The Doctype......Page 61
The html Element......Page 63
The title Element......Page 65
meta Elements......Page 67
The Most Basic Web Page in the World......Page 69
Analyzing the Web Page......Page 71
Headings and Document Hierarchy......Page 72
For People Who Love Lists......Page 73
Commenting Your HTML......Page 75
Using Comments to Hide Markup from Browsers Temporarily......Page 76
Symbols......Page 78
Diving into Our Website......Page 79
Setting a Title......Page 80
Welcoming New Visitors......Page 82
What’s It All About?......Page 83
Adding Structure......Page 88
Nesting Explained......Page 92
The Sectioned Page: All Divided Up......Page 93
Splitting Up the Page......Page 96
Linking Between Our New Pages......Page 101
The blockquote (Who said that?)......Page 105
strong and em......Page 107
Taking a Break......Page 108
Summary......Page 109
Adding Some Style......Page 110
Inline Styles......Page 111
Adding Inline Styles......Page 112
The span Element......Page 113
Embedded Styles......Page 115
Why Embedded Styles Are Better Than Inline Styles......Page 116
Happy Days! CSS Support Is Here......Page 117
Creating an External CSS File......Page 118
Linking CSS to a Web Page......Page 119
Starting to Build Our Stylesheet......Page 120
Stylish Headings......Page 123
A Mixture of New Styles......Page 125
A New Look in a Flash!......Page 127
A Beginner’s Palette of Styling Options......Page 131
Changing the Emphasis......Page 132
Emphasis or Italics? Strong or Bold?......Page 135
Looking at Elements in Context......Page 136
Contextual Selectors......Page 139
Grouping Styles......Page 140
Which Rule Wins?......Page 142
Styling Links......Page 143
Link States......Page 144
Class Selectors......Page 148
Styling Partial Text Using span......Page 152
Summary......Page 153
Shaping Up Using CSS......Page 156
Block-level Elements......Page 157
Inline Elements......Page 159
Inline Begets Inline......Page 160
Inline Elements Can Never Contain Block-level Elements......Page 161
Styling Inline and Block-level Elements......Page 162
Setting a Width......Page 163
Setting a Height......Page 164
Simple Black Border......Page 167
Inset Border......Page 168
Bold Border Effects......Page 169
Simple Gray Border (Version 2!)......Page 170
Dashed, Gray Border......Page 171
Styling Individual Sides of an Element......Page 172
Border Styles You Can Use......Page 173
Shaping and Sizing Our Diving Site......Page 174
Adding Padding......Page 179
Introducing Padding to the Project Site......Page 181
Margins......Page 183
The Box Model......Page 184
Showing the Structure......Page 185
Absolute Positioning......Page 188
Getting Ready to Move into Position......Page 189
More Absolute Positioning......Page 199
Relative Positioning......Page 201
Benefits of Relative Positioning......Page 203
Floated Positioning......Page 205
Styling Lists......Page 210
Summary......Page 211
Picture This! Using Images on Your Website......Page 212
Anatomy of the Image Element......Page 213
The alt Attribute: Making Images Useful to Everyone......Page 214
Web Accessibility......Page 215
What Makes a Good alt?......Page 216
JPEG versus GIF versus PNG......Page 218
Transparency......Page 219
PNG: King of Transparency......Page 220
Updating the Navigation......Page 221
Adding the New Gallery Page......Page 222
Adding the First Image......Page 223
Formatting the Picture Using CSS......Page 225
Captioning the Picture......Page 226
Image Cropping......Page 232
Picasa......Page 233
Preview......Page 235
Special Effects......Page 236
Preview......Page 237
Picasa......Page 238
Preview......Page 239
Filling up the Gallery......Page 240
Sourcing Images for Your Website......Page 243
Repeated Patterns......Page 244
Horizontal Repeats......Page 245
Vertical Repeats......Page 247
Nonrepeating Images......Page 248
Fixed Heights and Widths......Page 249
Setting a Background for Our Navigation......Page 251
Applying a Fade to the Tagline......Page 252
A Lick of Paint for the Main Heading......Page 253
Summary......Page 254
Tables: Tools for Organizing Data......Page 256
What is a Table?......Page 257
Anatomy of a Table......Page 261
Borders, Spacing, and Alignment......Page 263
Making Your Tables Accessible......Page 265
Linearization......Page 266
Captioning Your Table......Page 267
Adding an Events Table......Page 268
Stylish Table Cells......Page 274
rowspan and colspan......Page 275
The scope Attribute......Page 277
Summary......Page 279
Forms: Interacting with Your Audience......Page 280
Anatomy of a Form......Page 281
A Simple Form......Page 282
The form Element......Page 283
The fieldset and legend Elements......Page 284
The label Element......Page 285
Text Input......Page 286
Password Input......Page 288
Checkboxes......Page 289
Preselecting Checkboxes......Page 290
Radio Buttons......Page 291
The select Element......Page 292
Preselecting Options......Page 293
The textarea Element......Page 294
Submit Buttons......Page 295
The Default Control Appearance......Page 296
Building a Contact Page......Page 299
Editing the Contact Us Page......Page 300
Adding a form and a fieldset Element......Page 301
Styling fieldset and legend with CSS......Page 303
Adding Text Input Controls......Page 305
Tidying Up label Elements with CSS......Page 308
Adding a select Element......Page 311
Adding a textarea Element......Page 313
Adding Radio Buttons and Checkboxes......Page 314
Completing the Form: a Submit Button......Page 316
Processing the Form......Page 319
Signing Up for Form Processing......Page 320
Inserting the Form Code......Page 324
Feedback By Email......Page 333
Summary......Page 336
Interacting with Social Media......Page 338
But Facebook is the Internet, right?......Page 339
Go Where the Audience Is......Page 340
A Two-pronged Attack: Facebook and Twitter......Page 341
Setting Up a Facebook Page......Page 342
Adding a Like Box to Your Site......Page 350
Let’s Sprinkle on Some Twitter Glitter......Page 355
Adding Your Twitter Updates to the Site......Page 356
Getting a Follow Button......Page 360
Updating from a Twitter Client on Your Smartphone......Page 363
But the Page Looks Really Messy Now!......Page 364
Get Twitter to Update Facebook to Update Your Site......Page 365
Now the Training Wheels Are Off …......Page 368
Get Smart!......Page 369
Summary......Page 371
The Client–Server Model......Page 372
Hosting Your Website—Finding Server Space......Page 374
Free Hosting—with a Catch!......Page 375
What is Web Forwarding?......Page 376
The Downsides of Web Forwarding......Page 377
FTP Access to Your Server......Page 379
Adequate Storage Space......Page 380
A Reasonable Bandwidth Allowance......Page 382
Email Accounts......Page 383
Support for Scripting Languages and Databases......Page 384
Pre-flight Check: How Do Your Pages Look in Different Browsers?......Page 386
FTP Settings......Page 387
Uploading with FileZilla for Windows......Page 388
Uploading with Cyberduck—Mac OS X......Page 391
Checking Links......Page 394
Validating Your Web Pages......Page 395
How to Validate Your Live Web Pages......Page 396
Validate Everything......Page 398
Promoting Your Website......Page 399
Tell Your Friends and Colleagues......Page 400
Link Exchange......Page 401
Summary......Page 402
Enhancing the Site with HTML5 and CSS3......Page 404
HTML5: A Brief History......Page 405
Paving the Cow Paths......Page 406
Fixing IE Support......Page 407
Replacing Generic divs with Proper HTML5 Elements......Page 409
Marking Up the Main Content......Page 415
The aside Element......Page 416
The footer Element......Page 418
The article Element......Page 419
The figure and figcaption Elements......Page 420
HTML5 Forms Will Rock ... Soon......Page 424
CSS3 … CSS2 … what’s the difference?......Page 425
In Support of Vendor Prefixes......Page 426
The Reasoning Behind Vendor Jargon......Page 427
The Good News on CSS3......Page 428
Look at All Those Sharp, Pointy Corners!......Page 429
The Details in the Shadows......Page 432
From box-shadow to text-shadow......Page 435
We Don’t Serve Your Type Around Here!......Page 438
Google Web Fonts......Page 439
Other CSS3 Features to be Aware of......Page 445
Summary......Page 446
Adding Interactivity with jQuery......Page 448
JavaScript? jQuery? What’s the difference?......Page 449
How do I get jQuery and use it?......Page 450
jQuery: Primed and Ready For Action......Page 453
Setting Up References to jQuery......Page 456
Adding Default Form Value......Page 457
Showing the Picture Gallery’s Captions on Hover......Page 460
Summary......Page 462
Prevention......Page 464
Running Multiple Versions of Internet Explorer......Page 465
Validate HTML and CSS as You Go......Page 467
Prepare Your Browser for Battle—with Extensions!......Page 469
Get Firebug......Page 470
Install Web Developer Toolbar......Page 472
Add XRAY......Page 473
Inspecting Problems with Firebug......Page 474
Disable CSS......Page 481
Disable JavaScript......Page 482
Outline Elements on the Page......Page 483
Hide Images or Reveal alt Attributes......Page 484
And So Much More …......Page 486
How to use XRAY......Page 487
Summary......Page 491
Pimp My Site: Cool Stuff You Can Add for Free......Page 494
Getting the Low-down on Your Visitors......Page 495
Choosing a Statistics Service......Page 496
Registering a Google Account......Page 497
Adding the Statistics Code to Your Web Pages......Page 502
What to Look for—a Summary......Page 505
A Search Tool for Your Site......Page 506
Searching by Genre......Page 509
Enhancing Search Further with jQuery......Page 515
Discussion Forums......Page 516
Summary......Page 518
Where to Now? What You Could Learn Next......Page 520
Improving Your HTML......Page 521
The Official Documentation......Page 522
The Ultimate HTML Reference......Page 523
HTML Dog......Page 524
Advancing Your CSS Knowledge......Page 525
The Ultimate CSS Reference......Page 527
CSS Discussion Lists......Page 528
The CSS Discuss List’s Companion Site......Page 530
Learning JavaScript......Page 531
Becoming a jQuery Guru......Page 532
Learning Server-side Programming......Page 533
Learning PHP......Page 535
Summary......Page 536
Index......Page 538
Back Cover......Page 552