Build Your Own Website The Right Way Using HTML & CSS

Build Your Own Web Site The Right Way Using HTML & CSS......Page 1
Table of Contents......Page 9
Preface......Page 19
What is a Browser?......Page 21
What You’ll Learn from This Book......Page 23
HTML, Markup, CSS… Welcome to Your First Bits of Jargon!......Page 24
What This Book Won’t Tell You......Page 26
What’s in This Book?......Page 27
Updates and Errata......Page 29
The SitePoint Newsletters......Page 30
Acknowledgements......Page 31
Conventions Used in This Book......Page 32
Setting Up Shop......Page 35
The Basic Tools You Need......Page 36
Your Text Editor: Notepad......Page 37
Your Web Browser: Internet Explorer......Page 38
Your Web Browser: Safari......Page 39
Beyond the Basic Tools......Page 40
Firefox......Page 41
TextWrangler......Page 42
Not Just Text, Text, Text......Page 43
Picasa......Page 45
GraphicConverter......Page 46
iPhoto......Page 47
Windows......Page 48
Mac OS X......Page 50
Getting Help......Page 51
Summary......Page 52
Anatomy of a Web Page......Page 53
Viewing the Source......Page 54
Basic Requirements of a Web Page......Page 56
The Doctype......Page 57
The html Element......Page 58
The head Element......Page 60
The title Element......Page 61
meta Elements......Page 62
The body Element......Page 64
The Most Basic Web Page in the World......Page 65
Headings and Document Hierarchy......Page 67
For People Who Love Lists......Page 68
Commenting Your HTML......Page 70
Using Comments to Hide Markup from Browsers Temporarily......Page 72
Symbols......Page 73
Diving into Our Web Site......Page 74
The Homepage: the Starting Point for All Web Sites......Page 75
Setting a Title......Page 76
Welcoming New Visitors......Page 77
What’s It All About?......Page 78
Adding Structure......Page 84
The Sectioned Page: All Divided Up......Page 88
Splitting Up the Page......Page 91
Linking Between Our New Pages......Page 96
The blockquote (Who Said That?)......Page 100
strong and em......Page 102
Taking a Break......Page 103
Summary......Page 104
Adding Some Style......Page 105
Inline Styles......Page 106
Adding Inline Styles......Page 107
The span Element......Page 108
Embedded Styles......Page 110
Why Embedded Styles Are Better than Inline Styles......Page 111
The Bad Old Days......Page 112
Creating an External CSS File......Page 113
Linking CSS to a Web Page......Page 114
Starting to Build Our Style Sheet......Page 115
Stylish Headings......Page 118
A Mixture of New Styles......Page 120
A New Look in a Flash!......Page 122
A Beginner’s Palette of Styling Options......Page 125
Changing the Emphasis......Page 127
Looking at Elements in Context......Page 131
Contextual Selectors......Page 134
Grouping Styles......Page 135
Which Rule Wins?......Page 137
Styling Links......Page 138
Link States......Page 139
Class Selectors......Page 143
Styling Partial Text Using span......Page 147
Summary......Page 149
Shaping Up Using CSS......Page 151
Block-level Elements......Page 152
Inline Elements......Page 154
Inline Begets Inline......Page 155
Inline Elements Can Never Contain Block-level Elements......Page 156
Styling Inline and Block-level Elements......Page 157
Setting a Width......Page 158
Setting a Height......Page 159
Adding Borders to Block-level Elements......Page 162
Simple Black Border......Page 163
Colored Ridge Border......Page 164
Simple Gray Border......Page 165
Dotted Red Border......Page 166
Styling Individual Sides of an Element......Page 167
Shorthand Border Styles......Page 168
Border Styles You Can Use......Page 169
Shaping and Sizing Our Diving Site......Page 170
Adding Padding......Page 176
Introducing Padding to the Project Site......Page 178
Margins......Page 179
The Box Model......Page 180
Showing the Structure......Page 182
Absolute Positioning......Page 185
Getting Ready to Move into Position......Page 186
More Absolute Positioning......Page 196
Relative Positioning......Page 198
Benefits of Relative Positioning......Page 200
Floated Positioning......Page 202
Styling Lists......Page 208
Summary......Page 210
Picture This! Using Images on Your Web Site......Page 211
The alt Attribute: Making Images Useful to Everyone......Page 212
Web Accessibility......Page 214
GIF vs JPG vs PNG......Page 217
Transparency......Page 218
PNG: King of Transparency......Page 219
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 227
Image Cropping......Page 232
Picasa......Page 233
GraphicConverter......Page 236
Picasa......Page 237
Picasa......Page 238
GraphicConverter......Page 239
Filling up the Gallery......Page 240
Sourcing Images for Your Web Site......Page 243
Repeated Patterns......Page 244
Horizontal Repeats......Page 245
Non-repeating Images......Page 248
Fixed Heights and Widths......Page 250
Setting a Background for Our Navigation......Page 252
Applying a Fade to the Tag Line......Page 253
A Lick of Paint for the Main Heading......Page 254
Summary......Page 256
Tables: Tools for Organizing Data......Page 257
What is a Table?......Page 258
Anatomy of a Table......Page 262
Borders, Spacing, and Alignment......Page 264
Linearization......Page 267
Captioning your Table......Page 268
Adding an Events Table......Page 269
Stylish Table Cells......Page 275
Merging Table Cells......Page 276
rowspan and colspan......Page 277
The scope Attribute......Page 278
Summary......Page 280
Forms: Interacting with Your Audience......Page 283
Anatomy of a Form......Page 284
A Simple Form......Page 285
The form Element......Page 286
The fieldset and legend Elements......Page 288
The input Element......Page 289
Text Input......Page 290
Password Input......Page 292
Checkboxes......Page 293
Preselecting Checkboxes......Page 294
Radio Buttons......Page 295
The select Element......Page 296
Preselecting Options......Page 297
The textarea Element......Page 298
Submit Buttons......Page 299
The Default Control Appearance......Page 300
Building a Contact Page......Page 302
Editing the Contact Us Page......Page 303
Adding a form and a fieldset Element......Page 304
Styling fieldset and legend with CSS......Page 306
Adding Text Input Controls......Page 308
Tidying up label Elements with CSS......Page 312
Adding a select Element......Page 314
Adding a textarea Element......Page 316
Adding Radio Buttons and Checkboxes......Page 318
Completing the Form: a Submit Button......Page 320
Processing the Form......Page 323
Signing Up for Form Processing......Page 324
Inserting the Form Code......Page 327
Feedback by Email......Page 337
Summary......Page 339
The Client–Server Model......Page 341
Hosting Your Web Site—Finding Server Space......Page 343
Free Hosting—with a Catch!......Page 344
What is Web Forwarding?......Page 345
The Downsides of Web Forwarding......Page 346
FTP Access to Your Server......Page 348
Adequate Storage Space......Page 349
A Reasonable Bandwidth Allowance......Page 351
Email Accounts......Page 352
Support for Scripting Languages and Databases......Page 353
Uploading Files to Your Server......Page 355
Uploading with FileZilla for Windows......Page 356
Uploading with Cyberduck—Mac OS X......Page 361
Other Uploading Tools......Page 363
Checking Links......Page 364
Validating Your Web Pages......Page 365
How to Validate Your Live Web Pages......Page 366
Validate Everything......Page 368
Promoting Your Web Site......Page 369
Submit Your Web Site to Search Engines......Page 370
Post on a Related Forum......Page 371
Summary......Page 372
Adding a Blog to Your Web Site......Page 373
Where to Set up a Blog......Page 374
Signing up for Blogger......Page 377
How Blogger Creates a Web Page......Page 386
Customizing Your Blogger Template......Page 388
Merging the Blogger Code with Your Existing Web Page......Page 392
Blog Comments......Page 398
Viewing Comments......Page 399
Validating Your Blog......Page 403
Managing Your Blogger Posts......Page 406
Encouraging Others to Contribute to Your Blog......Page 408
Summary......Page 410
Pimp My Site: Cool Stuff You Can Add for Free......Page 411
Getting the Low-down on Your Visitors......Page 412
Choosing a Statistics Service......Page 413
Registering a Google Account......Page 414
Adding the Statistics Code to Your Web Pages......Page 420
What to Look for—a Summary......Page 423
A Search Tool for Your Site......Page 424
Searching by Genre......Page 427
Signing up for a Blogroll......Page 433
Integrating the Blogroll with Your Web Site......Page 436
Discussion Forums......Page 438
Summary......Page 439
Where to Now? What You Could Learn Next......Page 441
Improving Your XHTML......Page 442
The Official Documentation......Page 443
The Ultimate HTML Reference......Page 444
A List Apart......Page 445
Advancing Your CSS Knowledge......Page 446
The Official Documentation......Page 447
The Ultimate CSS Reference......Page 448
CSS Discussion Lists......Page 449
Other CSS Resources......Page 450
Enter the Hacks......Page 451
The CSS Discuss List’s Companion Site......Page 452
Learning JavaScript......Page 453
Learning Server-side Programming......Page 455
Scripting Languages in Brief......Page 456
Learning PHP......Page 457
Summary......Page 458
Index......Page 459