Build Your Own Web Site The Right Way using HTML & CSS

Build Your Own Web Site The Right Way using HTML & CSS
What is a Browser? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Who Should Read This Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
What You’ll Learn from This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
How You’ll Learn to Build Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . xxiv
HTML, Markup, CSS… Welcome to Your First Bits of Jargon! . . . . xxiv
Building the Example Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
What You Can Expect from the Example Web Site . . . . . . . . . . . . xxvi
What This Book Won’t Tell You . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
What’s in This Book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
The Book’s Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
The Code Archive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Updates and Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxx
Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxi
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxi
Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxii
Chapter 1 Setting Up Shop . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Basic Tools You Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Windows Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Mac OS X Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Beyond the Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Windows Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Mac OS X Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Not Just Text, Text, Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
x
Windows Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Mac OS X Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Creating a Spot for Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Chapter 2 Your First Web Pages . . . . . . . . . . . . . . . . . . . 19
Nice to Meet You, XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Anatomy of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Viewing the Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Basic Requirements of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
The html Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The head Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The title Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
meta Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Other head Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The body Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The Most Basic Web Page in the World . . . . . . . . . . . . . . . . . . . . . . . 31
Headings and Document Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
For People Who Love Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Commenting Your HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Diving into Our Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
The Homepage: the Starting Point for All Web Sites . . . . . . . . . . . . 41
Splitting Up the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Linking Between Our New Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
xi
The blockquote (Who Said That?) . . . . . . . . . . . . . . . . . . . . . . . . . 66
The cite Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
strong and em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Taking a Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Chapter 3 Adding Some Style . . . . . . . . . . . . . . . . . . . . . . 71
What is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Adding Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The span Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Embedded Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Jargon Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Why Embedded Styles Are Better than Inline Styles . . . . . . . . . . . . 77
External Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Why External Style Sheets Are Better than Embedded Styles . . . . . 78
Creating an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Linking CSS to a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Starting to Build Our Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Stylish Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
A Mixture of New Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
A New Look in a Flash! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
A Beginner’s Palette of Styling Options . . . . . . . . . . . . . . . . . . . . . . . 91
Recap: the Style Story so Far . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Looking at Elements in Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Contextual Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Grouping Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Which Rule Wins? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Recapping Our Progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
xii
Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Styling Partial Text Using span . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Chapter 4 Shaping Up Using CSS . . . . . . . . . . . . . . . . 117
Block-level Elements vs Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . 118
Block-level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Inline Begets Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Inline Elements Can Never Contain Block-level Elements . . . . . . . 122
Recap: Block-level and Inline Elements . . . . . . . . . . . . . . . . . . . . . . 123
Styling Inline and Block-level Elements . . . . . . . . . . . . . . . . . . . . . 123
Sizing Up the Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Setting a Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Setting a Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Adding Borders to Block-level Elements . . . . . . . . . . . . . . . . . . . . . . . . . 128
Example Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Styling Individual Sides of an Element . . . . . . . . . . . . . . . . . . . . . . 133
Shorthand Border Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Border Styles You Can Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Recap: What Have We Learned? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Shaping and Sizing Our Diving Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Adding Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Introducing Padding to the Project Site . . . . . . . . . . . . . . . . . . . . . 144
Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
The Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Positioning Elements Anywhere You Like! . . . . . . . . . . . . . . . . . . . . . . . . 148
Showing the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
What We’ve Achieved: Full CSS Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 162
xiii
Other Layout Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
More Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Relative Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Floated Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Styling Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Chapter 5 Picture This! Using Images on
Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Inline Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Anatomy of the Image Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Web Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
GIF vs JPG vs PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
PNG: King of Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Adding an Image Gallery to the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Updating the Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Adding the New Gallery Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Adding the First Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Formatting the Picture using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Captioning the Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Basic Image Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Image Cropping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Special Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Resizing Large Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Other Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Filling up the Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Sourcing Images for Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Background Images in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Repeated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
xiv
Non-repeating Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Shorthand Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Fixed Heights and Widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Setting a Background for Our Navigation . . . . . . . . . . . . . . . . . . . 218
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Chapter 6 Tables: Tools for Organizing
Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
What is a Table? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Anatomy of a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Styling the Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Borders, Spacing, and Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Making Your Tables Accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Linearization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Captioning your Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Adding an Events Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Stylish Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Advanced Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Merging Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Advanced Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Chapter 7 Forms: Interacting with Your
Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Anatomy of a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
A Simple Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
The Building Blocks of a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
xv
The form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
The fieldset and legend Elements . . . . . . . . . . . . . . . . . . . . . . 254
The label Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The input Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The select Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
The textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Submit Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
The Default Control Appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Building a Contact Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Editing the Contact Us Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Adding a form and a fieldset Element . . . . . . . . . . . . . . . . . . . 270
Styling fieldset and legend with CSS . . . . . . . . . . . . . . . . . . . 272
Adding Text Input Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Tidying up label Elements with CSS . . . . . . . . . . . . . . . . . . . . . . . 278
Adding a select Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Adding a textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Adding Radio Buttons and Checkboxes . . . . . . . . . . . . . . . . . . . . . . 284
Completing the Form: a Submit Button . . . . . . . . . . . . . . . . . . . . . 286
What Have We Achieved? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Processing the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Signing Up for Form Processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Inserting the Form Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Feedback by Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Chapter 8 Launching Your Web Site . . . . . . . . . . . . 307
The Client–Server Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Web Hosting Jargon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Hosting Your Web Site—Finding Server Space . . . . . . . . . . . . . . . . . . . . 309
Free Hosting—with a Catch! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
xvi
Free Hosting—with a Domain Name at Cost . . . . . . . . . . . . . . . . . . 311
What is Web Forwarding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
The Downsides of Web Forwarding . . . . . . . . . . . . . . . . . . . . . . . . . 312
Paying for Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Hosting Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
FTP Access to Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Adequate Storage Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
A Reasonable Bandwidth Allowance . . . . . . . . . . . . . . . . . . . . . . . . 317
Hosting Nice-to-haves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Email Accounts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Server Side Includes (SSIs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Support for Scripting Languages and Databases . . . . . . . . . . . . . . 319
Pre-flight Check—How Do Your Pages Look in Different Browsers? . . . 321
Uploading Files to Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
FTP Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Uploading with FileZilla for Windows . . . . . . . . . . . . . . . . . . . . . . . 322
Uploading with Cyberduck—Mac OS X . . . . . . . . . . . . . . . . . . . . . . 327
Other Uploading Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Recap—Where’s Your Site At? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Checking Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Validating Your Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Promoting Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Submit Your Web Site to Search Engines . . . . . . . . . . . . . . . . . . . . 336
Tell Your Friends and Colleagues . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Craft an Email Signature with Your Web Site Details . . . . . . . . . . 337
Post on a Related Forum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Link Exchange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
xvii
Chapter 9 Adding a Blog to Your Web Site . . . 339
Where to Set up a Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Signing up for Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
How Blogger Creates a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Customizing Your Blogger Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Merging the Blogger Code with Your Existing Web Page . . . . . . . 358
Tidying up the Blogger Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Blog Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Validating Your Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Managing Your Blogger Posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Encouraging Others to Contribute to Your Blog . . . . . . . . . . . . . . . . . . . 374
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Chapter 10 Pimp My Site: Cool Stuff You Can
Add for Free . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Getting the Low-down on Your Visitors . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Choosing a Statistics Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Registering a Google Account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Adding the Statistics Code to Your Web Pages . . . . . . . . . . . . . . . 386
A Search Tool for Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Searching by Genre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Adding a Blogroll to Your Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Signing up for a Blogroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Integrating the Blogroll with Your Web Site . . . . . . . . . . . . . . . . . 402
Discussion Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
xviii
Chapter 11 Where to Now? What You Could
Learn Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Improving Your XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
The Official Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Other Useful XHTML Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Advancing Your CSS Knowledge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
The Official Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
The Ultimate CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
HTML Dog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
CSS Discussion Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Other CSS Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
The CSS Discuss List’s Companion Site . . . . . . . . . . . . . . . . . . . . . . 418
Learning JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Learning Server-side Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Scripting Languages in Brief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Learning PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Where Can You Learn PHP? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

admin

VinayakSolution