Contents
Preface
Introduction
vii
xix
AL
Chapter 1: Introducing the Site
RI
Problems with HTML
Design
MA
D
TE
PY
Summary
RI
Home page
Product list pages
Product details page
Site structure
Updating the site
GH
The Story Behind CSS
Using Style Sheets
Introducing the Sample Site
TE
Clarifying terminology
A Little Background to HTML
Browser issues
Lessons from the mobile world
Accessibility
Separating style from content
Putting the X in XHTML
Problem
Design
CO
Chapter 2: Moving from HTML to XHTML
Strict XHTML
Transitional XHTML
Frameset XHTML
An example XHTML document
Writing documents using XML syntax
Why XML?
Differences between Transitional and Strict XHTML 1.0
XHTML compliance in authoring tools
Validation
1
2
3
4
5
8
9
10
11
12
13
14
16
19
27
30
34
35
37
39
40
40
41
42
42
43
44
53
56
62
63
Contents
Solution
Home page
Product list page
Product details page
Validation
Summary
Chapter 3: Using CSS to Style Documents
Problem
Design
How CSS works
A closer look at adding CSS rules
Selectors
Fonts
Text properties
Text pseudo-elements
Understanding the box model
The <div> and <span> elements
Box properties
Dimensions
Color and background
Solution
The home page
The product list pages
The product details pages
Summary
Chapter 4: Adding More Style with CSS
Problem
Design
Pseudo-classes and pseudo-elements
Lists
Table properties
Visibility of elements
Multiple style sheets and @import
Precedence of rules
Validating CSS
Solution
Improving the look of links
Product pages table borders
Summary
viii
67
68
77
81
84
84
87
88
88
88
94
99
103
110
116
118
121
123
130
134
143
143
153
155
158
159
160
160
160
175
178
182
185
187
188
189
189
190
194
Contents
Chapter 5: Using CSS for Layout
Problem
Design
CSS positioning schemes
Overlapping layers
Common layouts
Choices for layout
Solution
Summary
Chapter 6: Understanding Accessibility
Problem
Design
Assistive technology
Additional accessibility benefits
Introducing the guidelines
Creating accessible Web pages
Solution
Providing nontext items with text equivalents
Checking for dynamic content, color, and contrast issues
Adding links to skip repetitive navigation
Summary
Chapter 7: Creating Accessible Tables and Forms and Testing Your Site
Problem
Design
Tables
Forms
Accessibility issues for deaf people
Accessible frames
Text only the last resort
Testing your site for accessibility
Solution
Product details pages
Testing with Bobby
Testing with LIFT
Summary
195
195
196
196
212
215
231
232
241
243
244
244
245
246
247
249
279
280
281
281
283
285
286
286
287
299
313
314
317
317
320
320
322
323
323
ix
Contents
Chapter 8: Looking to the Future
Problem
Design
The situation today
The new devices
Lessons from the mobile world
The abstract modules of XHTML
XHTML 1.1
XHTML Basic
Hybrid documents
XHTML on different devices
Solution
Summary
Appendix A: Final Example Code
Home Page
Product List Page
Product Details Page
CSS Style Sheet
Appendix B: XHTML Element Reference
Core Attributes
<a> (all)
<abbr> (IE 4+, N 6+)
<acronym> (IE 4+ N 6+)
<address> (all)
<applet> Deprecated (all)
<area> (all)
<b> (all)
<base>
<basefont> Deprecated (all)
<bdo> (IE 5+, N 6+)
<bgsound> (IE only IE 3+)
<big> (IE 4+, N 4+)
<blink> (Netscape only N 3+)
<blockquote> (all)
<body> (all)
<br /> (all)
<button> (IE 4+, N 3+)
<caption> (all)
325
326
326
326
327
328
329
330
336
338
344
350
354
357
358
360
363
365
371
372
373
373
373
373
374
374
375
375
375
376
376
376
376
377
377
377
378
378
Contents
<center> Deprecated (all)
<cite> (all)
<code> (all)
<col> (IE 3+, N 6+)
<colgroup> (IE 3+, N 6+)
<dd> (all)
<del> (IE 4+, N 6+)
<dfn> (all)
<dir> Deprecated (all)
<div> (all)
<dl> (all)
<dt> (all)
<em> (all)
<embed> (all) *
<fieldset> (IE 4+, N 6+)
<font> Deprecated (all)
<form> (all)
<frame> (all)
<frameset> (all)
<head> (all)
<hn> (all)
<hr /> (all)
<html> (all)
<i> (all)
<iframe> (IE 3+, N 6+)
<img> (all)
<input type="button"> (all)
<input type="checkbox"> (all)
<input type="file"> (all)
<input type="hidden"> (all)
<input type="image"> (all)
<input type="password"> (all)
<input type="radio"> (all)
<input type="reset"> (all)
<input type="submit"> (all)
<input type="text"> (all)
<ins> (IE 4+, N 6+)
<isindex> Deprecated (all)
<kbd> (all)
<label> (IE 4+, N 6+)
<layer> (Netscape only, N 4+)
<legend> (IE 4+, N 6+)
378
378
378
379
379
379
380
380
380
380
380
380
380
381
381
382
382
382
383
383
384
384
384
385
385
386
386
387
387
388
388
389
389
390
390
391
391
391
392
392
392
393
xi
Contents
<li> (all)
<link> (all)
<map> (all)
<menu> Deprecated (all)
<meta> (all)
<noembed> (N 2+)
<noframes> (all)
<nolayer> (N 4+ only)
<noscript> (all)
<object> (IE 3+, N 6+)
<ol>
<optgroup> (IE 6+, N 6+)
<option> (all)
<p> (all)
<param> (IE 3+, N 6+)
<pre> (all)
<q> (IE 4+, N 6+)
<s> Deprecated (all)
<samp> (all)
<script> (all)
<select> (all)
<small> (all)
<span> (all)
<strike> Deprecated (all)
<strong> (all)
<style> (IE 3+, N 4+)
<sub> (all)
<sup> (all)
<table> (all)
<tbody> (IE 3+, N 6+)
<td> (all)
<textarea> (all)
<tfoot> (IE 3+, N 6+)
<th> (all)
<thead> (IE 3+, N 6+)
<title> (all)
<tr> (all)
<tt> (all)
<u> (all)
<ul> (all)
<var> (IE 3+, N 6+)
xii
393
394
394
394
394
395
395
395
395
395
396
396
397
397
397
398
398
398
398
398
399
399
399
399
399
400
400
400
400
401
401
402
403
403
404
404
404
405
405
405
405
Contents
Appendix C: CSS Properties
407
Font Properties
407
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
407
408
408
409
409
410
410
410
Text Properties
411
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
white-space
word-spacing
411
411
411
412
412
412
413
413
Color and Background Properties
background
background-attachment
background-color
background-image
background-position
background-positionX
background-positionY
background-repeat
Border Properties
border (border-bottom, border-left, border-top, border-right)
border-style (border-bottom-style, border-left-style, border-top-style,
border-right-style)
border-width (border-bottom-width, border-left-width, border-top-width,
border-right-width)
border-color (border-bottom-color, border-left-color, border-top-color, border-right-color)
414
414
414
414
415
415
416
416
416
416
416
417
417
418
Dimensions
418
height
width
line-height
max-height
max-width
418
418
419
419
420
xiii
Contents
min-height
min-width
Margin Properties
margin (margin-bottom, margin-left, margin-top, margin-right)
Padding Properties
padding (padding-bottom, padding-left, padding-right, padding-top)
List Properties
list-style
list-style-position
list-style-type
marker-offset
Positioning Properties
position
top
left
bottom
right
vertical-align
z-index
clip
overflow
overflow-x
overflow-y
Outline Properties
Outline (outline-color, outline-style, outline-width)
420
420
421
421
421
421
422
422
422
422
423
423
423
424
424
425
425
425
426
426
427
427
427
427
427
Table Properties
427
border-collapse
border-spacing
caption-side
empty-cells
table-layout
428
428
429
429
429
Classification Properties
clear
display
float
visibility
Internationalization Properties
direction
unicode-bidi
Lengths
Absolute Lengths
Relative Lengths
xiv
430
430
430
430
431
431
431
432
432
432
432
Contents
Appendix D: Escape Characters
Built-In XML Character Entities
XHTML Character Entities
Currency
Trade Symbols
Math and Measurement
Punctuation
Miscellaneous
Appendix E: MIME Types
433
434
434
434
434
435
435
436
437
text
image
multipart
audio
video
application
438
438
438
438
439
439
Index
441
xv
