, and |
93
Improving table accessibility
94
Adding a descriptive summary to a table
95
Quoting text
97
What’s a ?
97
Citations (or )
98
Quotations (or )
99
Other tags in the Standardistas’ toolbox
100
Abbreviations
100
Making a case for rules:
101
A note on self- closing tags
102
and
103
Marking up changes with and
104
and
104
Summary
106
Homework: Gordo’s Adventure
106
Chapter 5: Including Images
108
Introducing the ![]() tag
109
An ![]() tag in action
109
Adding width, height, and title attributes to images
113
Working with images
114
Which image editor? (Or how long is a piece of string?)
115
Photoshop
115
Fireworks
116
Photoshop Express
116
Bring out the GIMP (and its friends)
117
Image optimization
117
Why compressing your files is important
118
Save for Web
119
Image formats for the Web
120
JPG: Photographs
120
GIF: Graphics and type
122
PNG: The new (old) kid on the block
123
PNG-8
124
PNG-24
124
A pixel is a pixel is a pixel
126
Size matters
126
The limitations of bitmaps
127
Vector graphics
127
Finding the right image
129
Low-cost images
129
Flickr and Creative Commons
129
Summary
130
Homework: A picture is worth a thousand words
130
Chapter 6: Creating Links with Anchors
132
Meet
133
Using descriptive link text
134
The title attribute
135
Let’s create some links!
137
External links
137
The dreaded ampersand and the validator
138
Checking your links
139
The (evil) target attribute
139
Local links
140
Internal links
141
E-mail links
142
Wrapping up
143
Absolute vs. relative links
144
Structuring your site
145
Organizing your files and folders
145
The magic index file
147
Linking between different folders in our site
149
Linking within a folder
150
Linking down into a subfolder
151
Linking up into a “parent” folder
152
Linking up and then linking down
153
Summary
154
Homework: Housekeeping first; links second
155
Chapter 7: Getting Your Site Online
158
Your address on the Web
159
What is a domain name?
159
What’s a TLD?
160
Think of a name!
161
Registering a domain name
162
Web hosting
163
Free web hosting?
163
Getting the balance right
164
Things to look for in a hosting company
164
Disk space
164
Bandwidth
165
E-mail
165
A control panel
165
Support
165
Moving web hosts
166
Uploading your files
166
Local vs. remote
166
File Transfer Protocol
167
Propagation
168
Tools we’re using
168
Which FTP client?
169
Transferring files to the server: A walkthrough
169
What you need
169
The address of the server
170
Your username
170
Your password
170
Let’s get started
170
Online walkthrough
174
Summary
174
Homework: Getting your site online
175
PART TWO: ADDING STYLE WITH CSS
177
Chapter 8: CSS 101
178
Adding some style
180
HTML: A brief refresher
180
CSS isn’t new
181
Tag soup or lean and mean?
181
CSS to the rescue
183
Meet CSS
183
Anatomy of a CSS rule
184
A note on formatting
185
A slightly more complex rule
186
Adding CSS to a web page
187
Adding an embedded style sheet
188
A simple walkthrough
190
Getting colorful
190
Styling the
191
Styling the headings: and
194
Styling the
197
Commenting your CSS
198
Summary
202
Homework: Adding some CSS to Gordo’s web page
202
Chapter 9: Styling Text
205
Typography on the Web
206
What is typography?
206
CSS: Our flexible friend
207
Making your text accessible
207
Inheritance and specificity
208
Inheritance
208
Meet specificity
210
Specifying type on the Web
212
Core Web Fonts
213
Writing more reliable CSS rules to specify fonts
214
Serif
215
Sans serif
216
Monospace
216
Cursive
216
Fantasy
216
Size matters
216
Sizing text with pixels
217
Sizing text with ems
217
Writing more efficient rules
219
Show and tell: Adding a few more rules
221
Specifying a typeface
221
Let’s lose some weight
222
Text transform
223
Letter spacing
224
Styling paragraphs
225
Setting a line height
225
Adding paragraph indents
227
Aligning text using text-align
228
Styling links
230
Using pseudo-classes to style links
230
LoVe HAte your links
234
Summary
235
Homework: Improving Gordo’s typography
235
Chapter 10: A One-Column CSS Layout
238
The Cascade in Cascading Style Sheets
239
So what exactly is the cascade?
239
The order of your CSS rules is important
241
Introducing margins, borders, and padding
242
Meet the box model
242
Applying margins, borders, and padding
243
Using CSS shorthand for margins, borders, and padding
249
Styling our
252
Dividing up your document
253
Identifying your document’s sections
254
Using div and span elements with id and class attributes
255
div and span elements
256
id and class attributes
257
It’s all in a name
258
Using div elements to create CSS layouts
259
A one-column CSS layout
261
Using descendant selectors to minimize markup
269
Styling details with the span element
271
Using a span to style inline content
271
Dan Cederholm’s illustrious ampersand
272
Styling with class attributes
273
Enhancing your design by adding background images with CSS
274
Adding a background image to the body
275
Using background images with other elements
277
Summary
279
Homework: Creating a one- column CSS layout
280
Chapter 11: A Two-Column CSS Layout
283
A float-based CSS layout
284
Floating divs
285
Applying floats to layouts
293
Creating our two-column CSS layout
296
Calculating the width of your elements
301
A short box model recap
301
What happens when your elements are too wide?
303
Collapsing margins
305
Applying a float to an image
307
Faux Columns
312
Wrapping up with King Kong
315
Summary
317
Homework: Adding a second column to Gordo’s web page
317
Chapter 12: List-O-Matic
320
Styling lists
322
Styling a simple list
322
Styling a navigation list
328
Creating horizontal lists
333
Styling nested lists
336
Styling a site map with a nested list
337
Styling an ordered list
344
Summary
346
Homework: Adding the Famous Primates web site’s navigation
347
Chapter 13: Harnessing the Power of External Style Sheets
349
The head elements that make it all happen
350
The importance of meta tags
351
It’s all in a name
353
Speaking a foreign language
354
External Style Sheets
356
Embedded vs. linked style sheets
356
Linking to an external style sheet
357
Media types
357
Using @import
358
Creating our external CSS file
358
The real power of CSS
360
Adding a print style sheet
361
Building the print style sheet
361
Style the body
362
Hide unnecessary content
362
Style the headings
362
Style the links
363
Click Print and check the results
364
Conditional comments for Internet Explorer
365
A conditional comment in action
366
Adding a favicon
367
Adding scripts
368
Testing and troubleshooting
369
Testing
369
Web-based browser test services
370
Building a guerilla testing suite
372
Graded browser support
372
Troubleshooting
374
Validate, validate, validate!
374
Leanr to spel
375
Adopt a lurid palette
376
Check for repetition
376
Reduce to deduce
377
XHTML rule reference
377
Summary
378
Homework: Linking to external style sheets
378
Chapter 14: Where to from Here?
381
But really, where to from here?
382
JavaScript libraries
385
Database-driven sites
386
AJAX and Rich Internet Applications
386
www.webstandardistas.com
387
The Web Standardistas’ periodical
388
Book reviews
388
Resources
388
Tools
388
Badges
389
Tea
389
Tools to make your life easier
389
Firefox Web Developer Add-on
389
Firebug
390
Tools for other browsers
392
Basecamp
392
What else is out there?
393
Recommended books
393
Bulletproof Web Design
394
CSS Artistry
394
The Zen of CSS Design
394
CSS Mastery
395
HTML Mastery
395
Other books we recommend
395
Recommended sites
396
Organizations and publications
396
W3C
396
Web Standards Project
396
A List Apart
397
Digital Web Magazine
397
Design and inspiration
397
Design Observer
397
The Elements of Typographic Style Applied to the Web
398
Stylegala
398
CSS Zen Garden
398
Accessibility
398
456 Berea Street
398
Dive Into Accessibility
399
Joe Clark
399
North Temple Journal of Design
399
People
399
Dan Cederholm
399
John Gruber
400
John Hicks
400
Jeffrey Zeldman
400
A fond farewell
400
Summary
401
Homework: You’ve earned the badges—now use them!
401
Index
402
|
