Examples

About Download

Chapters

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Appendices

A B C D E F

These Web pages contain all the examples from the book HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro.

Use these examples to help you understand the difference between raw (X)HTML code and what appears within your browser. Scroll down to the appropriate chapter (or use the left navigational bar as a shortcut). Each chapter's example files are listed. Click an example to view it. To see the (X)HTML code, choose View > Source or View > Page Source or however the command is worded in your browser. For more information about viewing the source code, see page 67 in the book. (I'll get to information about downloading all the examples shortly.)

Note that all of the examples, as well as their auxiliary files (CSS, CGI, and PHP files) will open in the same “examples” window. If you have room, leave both this window and the examples window open on your screen.

Not all sections have examples. If the section does not appear, that means there is no example for that section. In that case, just consult the corresponding section in the book where you'll most often find a complete explanation.

Some sections have more links than you might expect. For example, check out the Appendices, down at the bottom of the list at left. You'll find live links to the HTML tools and graphics, and online versions of the charts in Appendices B-D. There's also an online version of the index and several color charts.

You can also download the example files all at once (for either Macintosh or Windows). If you need help unzipping either file, check out StuffIt (again, for both Macs and Windows), or your favorite decompression program. A version of this page that you are reading (with localized links) is also included, and as you can see below, it contains a helpful table that explains which files go with which pages/sections.

Remember that all the examples files and images are © 2006 Elizabeth Castro. All rights reserved.

Hope you find them helpful!

If you have any questions or comments about the examples, please send them to me. I'll do my best to help you out.

Note that you can still find the examples from both the Fifth Edition and the Fourth Edition online.

Copyright 1998-2006 by Elizabeth Castro. All Rights Reserved

1: Web Page Building Blocks

All of the examples in this chapter (unless otherwise noted) can be found in the blocks folder.

Markup: Elements, Attributes, and Values (p. 30)Figure 1.6: blueflax_nocss.html
A Web Page’s Text Content (p. 32)Figure 1.10: blueflax_nocss.html
Links, Images, and Other Non-Text Content (p. 33)Figure 1.12: tigerlily_nocss.html
HTML vs XHTML (p. 38)XHTML: blueflax_nocss.html
HTML: blueflax_html.html
Versions, flavors, and DOCTYPE (p. 40-1) Common Doctypes
Figure 1.36, 1.37: blueflax_quirky_nodoc.html with blueflax_quirky.css
Figure 1.38: blueflax_quirky_yesdoc.html with blueflax_quirky.css
Figure 1.39: blueflax.html with blueflax.css
The Default Display of (X)HTML (p. 42)Figure 1.40: blueflax_nocss.html

2: Working with Web Page Files

All of the examples in this chapter (unless otherwise noted) can be found in the blocks folder.

The Inspiration of Others (p. 53)Figures 2.27-2.29: blueflax.html with blueflax.css

3: Basic (X)HTML Structure

All of the examples in this chapter (unless otherwise noted) can be found in the foundation folder.

Starting Your Web Page (pp. 56-7)Figure 3.1: doctype_html.html
Figure 3.2: doctype.html
Common Doctypes
Creating the Foundation (p. 58)Figure 3.3: headbody.html
Declaring the Encoding (p. 59)Figure 3.5: charset.html
Creating a Title (p. 60)Figure 3.6: title.html
Creating Section Headers (p. 61)Figure 3.10: headers.html
Starting a New Paragraph (p. 62)Figure 3.12: paragraphs.html
Naming Elements (p. 63)Figure 3.14: idclass.html
Breaking up a Page into Divisions (p. 64)Figure 3.16: div.html
Note that the id and class attributes are different from Figure 3.14, but are the ones used throughout the rest of the chapter.
Creating Inline Spans (p. 65)Figure 3.18: span.html
View with styles applied: styles.html with gaudistyles.css
Creating a Line Break (p. 66)Figure 3.20: br.html
Adding Comments (p. 67)Figure 3.23: comments.html
Labeling Elements in a Web Page (p. 68)Figure 3.25: title_att.html

4: Basic (X)HTML Formatting

All of the examples in this chapter (unless otherwise noted) can be found in the html_format folder.

Making Text Bold or Italic (p. 70)Figure 4.1: bolditalic.html
Figure 4.2: strongem.html
Changing the Size of Text (p. 71)Figure 4.4: bigsmall.html
Using a Monospaced Font (p. 72)Figure 4.6: code.html
Using Preformatted Text (p. 73)Figure 4.9: precode_chunk.html
View entire script: precode.html
Quoting Text (p. 74)Figure 4.11: blockquote.html
Figure 4.13: q.html
Creating Superscripts and Subscripts (p. 76)Figure 4.15: subsup.html
View with adjusted line height: subsup_size.html with subsup.css
Marking Changed Text (p. 77)Figure 4.17: insdel.html
Explaining Abbreviations (p. 78)Figure 4.19: abbr_acronym.html
Centering Elements on a Page (p. 79)Figure 4.22: center.html

5: Images

All of the examples in this chapter (unless otherwise noted) can be found in the use_images folder.

About Images for the Web (p. 83)Figure 5.3: arcadia_big.html
Figure 5.4: arcadia_small.html
Inserting Images on a Page (p. 90)Figure 5.7: image.html
Offering Alternate Text (p. 91)Figure 5.9: alt.html
Specifying Size for Speedier Viewing (p. 92)Figure 5.15: sizing.html
Scaling an Image (p. 94)Figure 5.17: scale_bef.html
Figures 5.18, 5.19: scale_aft.html
Making Images Float (pp. 96-7)Figure 5.22: floatright.html
Figure 5.25: floatleft.html
Figure 5.26: floatboth.html
Stopping Elements from Wrapping (p. 98)Figure 5.28: clearleft.html
Figure 5.30: clearall.html
Adding Space around an Image (p. 99)Figure 5.31: space_bef.html
Figures 5.32, 5.33: space.html
Aligning Images (p. 100)Figure 5.34: align.html
Adding Horizontal Rules (p. 101)Figure 5.36: hrnormal.html
Figure 5.38: hr.html
Adding an Icon for your Web Site (p. 102)Figure 5.41: favicon.html

6: Links

All of the examples in this chapter (unless otherwise noted) can be found in the links folder.

Creating a Link to Another Web Page (pp. 104-5)Figure 6.2: simplelink.html
Figure 6.5: externallink.html
Creating Anchors (p. 106)Figure 6.8: anchor.html
Linking to a Specific Anchor (p. 107)Figures 6.9 and 6.10: anchor.html
Targeting Links to Specific Windows (p. 108)Figure 6.11: target.html
Setting the Default Target (p. 109)Figure 6.14: targetbase.html
Creating Other Kinds of Links (p. 110)Figure 6.15: newotherlinks.html
Creating Keyboard Shortcuts for Links (p. 112)Figure 6.17: keyboard.html
Setting the Tab Order for Links (p. 113)Figure 6.20: tabindex.html
Using Images to Label Links (p. 114)Figure 6.22: buttonlink.html
Linking Thumbnails to Images (p. 115)Figure 6.24: icons.html
Creating a Client-Side Image Map (p. 117)Figure 6.29: map.html

7: Style Sheet Building Blocks

All of the examples in this chapter (unless otherwise noted) can be found in the cssblocks folder.

Adding Comments to Style Rules (p. 121)Figure 7.3: base_comments.css
Figure 7.4: base_comments2.css
The Cascade: When Rules Collide (pp. 122-3)Figure 7.5: blueflax.css
Figure 7.6: blueflax.html
Figure 7.8: specificity.css
Figure 7.9: specificity.html
A Property’s Value (p. 126)Figure 7.16: Sixteen Predefined Colors

8: Working with Style Sheet Files

All of the examples in this chapter (unless otherwise noted) can be found in the styles-files folder.

Linking External Style Sheets (p. 129)Figure 8.3: base.css, Figure 8.4: link.html
Figure 8.6: link2.html with base.css
Offering Alternate Style Sheets (p. 130)Figure 8.7: base.css
Figure 8.8: preferred.css
Figure 8.9: alternate.css
Figure 8.10: choices.html
Creating an Internal Style Sheet (p. 131)Figure 8.12: internal.html
Importing External Style Sheets (p. 132)Figure 8.15: link.html with base.css
Figure 8.15: import.html with not_for_Netscape4.css
Using Media-Specific Style Sheets (p. 133)Figure 8.17: medialink.html
Figure 8.18: mediaimport.html
Applying Styles Locally (p. 134)Figure 8.19: local.html
The Importance of Location (p. 135)Figure 8.21: conflict.html with base.css
Figure 8.23: conflict2_linklast.html with base.css
The inspiration of Others: CSS (p. 136)Figure 8.25: choices.html
Figure 8.28: base.css

9: Defining Selectors

All of the examples in this chapter (unless otherwise noted) can be found in the selectors folder. Note that the (X)HTML files are practically identical, except for the link element that calls the style sheet.

Selecting Elements by Name (p. 139)Figure 9.6: name.html, Figure 9.7: name.css
Selecting Elements by Class or ID (p. 140)Figure 9.9: classid.html, Figure 9.10: classid.css
Selecting Elements by Context (pp. 141-3)Figure 9.12: descendant.html, Figure 9.13: descendant.css
Figure 9:15: child.css, Figures 9.16 and 9.17: child.html
Figure 9.18: firstchild.css, Figure 9.19: firstchild.html
Figure 9.20: adjsibling.css, Figure 9.21: adjsibling.html
Selecting Part of an Element (pp. 144-5)Figures 9.22 and 9.24: firstline.html, Figure 9.23: firstline.css
Figure 9.25: firstletter.css, Figures 9.26: firstletter.html
Figure 9.27: firstletter-quote.html
Selecting Link Elements Based on Their State (p. 146)Figure 9.28: state.html, Figure 9.29: state.css
Selecting Elements Based on Attributes (p. 147)Figure 9.35: attribute.html, Figure 9.36: attribute.css
Specifying Groups of Elements (p. 148)Figure 9:38: group.html, Figure 9:39: group.css

10: Formatting with Styles

All of the examples in this chapter (unless otherwise noted) can be found in the styles-format folder. Note that in this chapter, each successive CSS file adds to the previous one. The (X)HTML files are identical except for the link element that calls the new CSS file.

Formatting with Styles (p. 151)Figure 10.1: nostyles.html
Choosing a Font Family (p. 152)Figure 10.2: fontfamily.css
Figures 10.3-4: fontfamily.html
Specifying Alternate Fonts (p. 153)Figure 10.5: fontfamily-alternate
Figures 10.6-7: fontfamily-alternate.html
Creating Italics (p. 154)Figure 10.8: italic.css
Figures 10.9-10: italic.html
Applying Bold Formatting (p. 155)Figure 10.11: bold.css
Figures 10.12-3: bold.html
Setting the Font Size (p. 156)Figure 10.14: fontsize.css
Figure 10.15: fontsize.html
Figure 10.16: fontsize-relative.css
Figure 10.18: fontsize-relative.html
Setting the Line Height (p. 158)Figure 10.19: lineheight.css
Figure 10.20: lineheight.html
Setting All Font Values at Once (p. 159)Figure 10.21: font.css
Figure 10.22: font.html
Setting the Color (p. 160)Figure 10.23: color.css
Figure 10.24: color.html
Changing the Text’s Background (p. 161)Figure 10.25: background.css
Figure 10.26: background.html
Controlling Spacing (p. 162)Figure 10.27: letterspacing.css
Figure 10.28: letterspacing.html
Adding Indents (p. 163)Figure 10.29: indents.css
Figure 10.30: indents.html
Setting White Space Properties (p. 164)Figure 10.31: whitespace.css
Figure 10.32: whitespace.html
Aligning Text (p. 165)Figure 10.33: textalign.css
Figure 10.34: textalign.html
Changing the Text Case (p. 166)Figure 10.35: texttransform.css
Figure 10.36: texttransform.html
Using Small Caps (p. 167)Figure 10.37: smallcaps.css
Figure 10.38: smallcaps.html
Decorating Text (p. 168)Figure 10.39: decoration.css
Figure 10.40: decoration.html

11: Layout with Styles

All of the examples in this chapter (unless otherwise noted) can be found in the styles-layout folder. In contrast with the previous chapter, the new CSS discussed in each section is contained in its own CSS file and is added individually via a new link element. In addition, there is a base CSS file with text formatting applied to each example. For more on text formatting, see Chapter 10.

Layout with Styles (p. 169)Figure 11.1: allformatting.html with allformatting.css
Structuring Your Pages (p. 170)Figure 11.2: noformatting.html
With non-layout formatting: text_formatting.html with text.css
Changing the Background (p. 172)Figure 11.5: background-individual.css
Figure 11.6: background.css
Figure 11.7: background-individual.html or background.html
Figure 11.8: background-screen.css
Figures 11.9-10: background-screen.html
Setting the Height or Width for an Element (pp. 174-5)Figures 11.11, 11.13: width.css
Figure 11.12: width.html
Figure 11.14: widthtest.html
Setting the Margins around an Element (p. 176)Figures 11.16, 11.18:: margin.css
Figures 11.17, 11.19: margin.html
Adding Padding around an Element (p. 177)Figure 11.20: padding.css
Figure 11.21: padding.html
Figure 11.22: padding-screen.css
Figure 11.23: padding-screen.html
Figure 11.24: background-white.html with background_white.css
Offsetting Elements In the Natural Flow (p. 178)Figures 11.26 and 11.28: relative.css
Figures 11.27 and 11.29: relative.html
Positioning Elements Absolutely (p. 179)Figure 11.31: absolute.css
Figure 11.32: absolute.html
Affixing an Element to the Browser Window (p. 180)Figure 11.33: fixed.css
Figures 11.34 and 11.35: fixed.html with
Making Elements Float (p. 181)Figure 11.36: float.css
Figure 11.37: float.html
Controlling Where Elements Float (p. 182)Figure 11.39: clear.css
Figure 11.40: clear.html with
Positioning Elements in 3D (p. 183)Figure 11.42: z-index.css
Figure 11.43: z-index.html
Setting the Border (pp. 184-5)Figure 11.44: border.css
Figures 11.45 and 11.46: border.html
Figure 11.47: borderstyles.html
Changing the Cursor (p. 186)Figure 11.50: cursor.css
Figure 11.51: cursor.html
Determining Where Overflow Should Go (p. 187)Fiure 11.53: overflow.css
Figures 11.54 and 11.55: overflow.html
Aligning Elements Vertically (p. 188)Figure 11.57: vertical-align.css
Figure 11.58: vertical-align.html

12: Dynamic Effects with Styles

All of the examples in this chapter (unless otherwise noted) can be found in the css-effects folder.

Displaying and Hiding Elements (pp. 190-1) Figures 12.1 and 12.2: displayall.html
Figures 12.3 and 12.4: displaynone.html
Figures 12.5 and 12.6: visibility.html
Creating Rollover Buttons (p. 192)Figures 12.7: rolloverbuttons.html
Creating Pop-ups (p. 193)Figures 12.9 and 12.10: popups.html
Creating Drop-Down Menus with Lists (pp. 194-5)Figures 12.11, 12.13, and 12.14: dropdownmenus-noformat.html
Figure 12.12: dropdownonly.css
Figure 12.15: dropdownmenus.html with dropdownonly.css and dropdownformat.css
Replacing Headers with Images (pp. 196-7)Figures 12.16: imagereplacement.css
Figures 12.17 and 12.18: imagereplacement.html

13: Style Sheets for Handhelds

All of the examples in this chapter (unless otherwise noted) can be found in the styles-handheld folder.

Mobilize vs. Miniaturize (p. 200)Figures 13.2 and 13.3 (if you're on a mobile device): Google
Looking at Your Site (p. 201)Figure 13.4 and 13.5: allformatting.html with allformatting.css
Creating Style Sheets for Handhelds (p. 204)Figure 13.6: handheld.html
Hiding Extraneous Elements (p. 205)Figure 13.8: hide.css
Figures 13.9 and 13.10: handheld-hide.html
Creating and Using an Image Header (p. 206)Figures 13.12 and 13.15: handheld-logo.html
Figure 13.13: allformatting-hideheader.css
Figure 13.14: logo.css
Creating Extra Links to the Top (p. 207)Figure 13.16: extralinks.html
Figures 13.17: allformatting-hideextralinks.css
Adjusting for the Small Screen (p. 208)Figure 13.19: handheld.css
Figure 13.20: handheld-adjust.html

14: Style Sheets for Printing

All of the examples in this chapter (unless otherwise noted) can be found in the printing folder.

Creating a Style Sheet for Print (p. 210)Figure 14.1: base.html
Figure 14.2: import_print.html
How Print Style Sheets Differ (p. 211)Figures 14.3 and 14.4: base.html with screen.css and print.css
Controlling Page Breaks (p. 212)Figure 14.5: pagebreaks.css
Figure 14.6: pagebreaks.html (and then choose Print or Print Preview)
Printing Link URLs (p. 213)Figure 14.7: printurl.css
Figure 14.8: printurl.html (and then choose Print or Print Preview)
Controlling Widows and Orphans (p. 214)Figure 14.10: orphans.css
Figure 14.11: orphans.html

15: Lists

All of the examples in this chapter (unless otherwise noted) can be found in the lists folder.

Creating Ordered and Unordered Lists (pp. 216-7)Figure 15.1: orderedlists.html
Figure 15.3: unordered.html
Choosing Your Markers (Bullets) (p. 218)Figure 15.5: markers.html, Figure 15.6: markers.css
Choosing Where to Start List Numbering (p. 219)Figure 15.8: start_value.html
Using Custom Markers (p. 220)Figure 15.10: custommarkers.html, Figure 15.11: custommarkers.css
Controlling Where Markers Hang (p. 221)Figure 15.13: position.html, Figure 15.14: position.css
Setting All List-Style Properties at Once (p. 222)Figure 15.16: liststyle.css, Figures 15.17 and 15.18: liststyle.html
Creating Definition Lists (p. 223)Figure 15.19: definitionlists.html, Figure 15.20: definitionlists.css
Styling Nested Lists (p. 224)Figure 15.22: nested.html, Figure 15.23: nested.css

16: Tables

All of the examples in this chapter (unless otherwise noted) can be found in the tables folder.

Tables (p. 227)Figure 16.1: rowspan.html with colspannew.css
Creating a Simple Table (p. 229)Figure 16.3: simple.html, Figure 16.4: simple.css
Adding a Border (pp. 230-1)Figures 16.7 and 16.8: border_html.html with simple.css
Figure 16.9: border.css
Figure 16.10: border_css.html with border.css
Figure 16.11: border_css_nohtml.html with border.css
Figure 16.12: border_none.css (with border_none_css.html)
Setting the Width (pp. 232-3)Figure 16.13: width.html, Figure 16.14: width.css
Figure 16.16: width_toosmall.css, Figure 16.17: width_toosmall.html
Figure 16.18: width_bigger.css, Figure 16.19: width_bigger.html
Centering a Table on the Page (p. 234)Figure 16.20: center_css.html
Figure 16.21: center.css
Using only CSS: center_css_nohtml.html with center.css
Using only XHTML: center_html.html with width.css
Wrapping Text around a Table (p. 235)Figure 16:23 (using only XHTML): wrap.html
Figure 16.24: float.css (Note: some coloring is added here. For more details, see page 160.
Figure 16.25: float.html with float.css
Combining Tables (pp. 236-7)Figure 16.26: nest.html
Figure 16.27: nest.html with nest.css
Figures 16.28 and 16.30: multiple.html
Figure 16.29: multiple.css
Using a pixel shim to keep the left column from collapsing when the browser window is very narrow: multiple_pixelshim.html>
I've added the pixel shim to the rest of the examples in this chapter.
Aligning a Cell’s Contents (pp. 238-9)Figure 16.31: valign.html
Figure 16.32: nest.css
Using only CSS: align_css_nohtml.html with align.css
Changing the Background (p. 240)Figures 16.35 and 16.36 (Changing background color with XHTML and foreground color with CSS): bgcolor_html.html with bgcolor_html.css
Figures 16.37 and 16.38 (Changing both background (including image) and foreground with only CSS: background_css_nohtml.html with background.css
Controlling the Space (p. 242)Figures 16.40, 16.41, and 16.42: space_html.html with background.css
Figure 16.43 and 16.44, Using XHTML and CSS: spacenew.html with spacenew.css
Note that the pixel shim was reduced to 110 pixels from these examples forward in order to leave room for the padding.
Spanning a Cell across Columns (p. 244)Figure 16.45: colspan.html with colspannew.css
Spanning a Cell across Rows (p. 245)Figure 16.47: rowspan.html with colspannew.css
Dividing Your Table into Column Groups (p. 246)Figure 16.49: colgroup.html, Figure 16.50: colgroup.css
Figure 16.52: col.html, Figure 16.53: col.css
Dividing the Table into Horizontal Sections (p. 248)Figure 16.55: tbody.html, Figure 16.56: tbody.css
Choosing Which Borders to Display (p. 249)Figure 16.58: frame.html, Figure 16.59: frame.css
Figures 16.61 and 16.62: rules_cols.html with frame.css
Figures 16.63 and 16.64: rules_groups.html with frame.css
Controlling Line Breaks in a Cell (p. 251)Figure 16.65: nowrap_bef.html with frame.css
Figures 16.66 and 16.67: nowrap.html with frame.css
Note: You may want to make the examples window very narrow to see the full effect of the nowrap attribute.
Speeding up Table Display (p. 240)Figure 16.68: tabledisplay.css, with tabledisplay.html

17: Forms

All of the examples in this chapter (unless otherwise noted) can be found in the forms folder.

Creating a Form (pp. 254-5)Figure 17.1: fullform.html
Figure 17.2: mainform.css
Figure 17.3: fullform.html and mainform.css
Processing Forms (pp. 256-7)Figure 17.4: showform.txt Note: you'll have to change the extension to .php for it to work properly.
Sending Form Data via E-mail (pp. 258-9)Figure 17.6: emailform.txt Note: you'll have to change the extension to .php for it to work properly.
Figure 17.7: fullform_email.html
Organizing the Form Elements (pp. 260-1)Figure 17.10: fieldsetlegend.html, Figure 17.11: fieldset.css
Figure 17.13: plegend.html, Figure 17.11: plegend.css
Creating Text Boxes (p. 262)Figure 17.16: textboxes.html
Creating Password Boxes (p. 263)Figure 17.18: password.html
Formally Labeling Form Parts (p. 264)Figure 17.20: label.html, Figure 17.21: label.css
Creating Radio Buttons (p. 265)Figure 17.23: radio.html, Figure 17.24: radio.css
Creating Menus (pp. 266-7)Figure 17.26: menu.html, Figure 17.27: menu.css
Figure 17.29: submenu.html with menu.css
Creating Checkboxes (p. 268)Figure 17.31: checkboxes.html, Figure 17.32: checkboxes.css
Creating Larger Text Areas (p. 269)Figure 17.34: textarea.html, Figure 17.35: textarea.css
Allowing Visitors to Upload Files (p. 270)Figure 17.37: uploading.html with uploading.cgi (change name to "uploading.cgi" before using)
Creating the Submit Button (pp. 272-3)Figure 17.40: submit.html, Figure 17.41: submit.css
Figure 17.43: buttonsubmit.html, Figure 17.44: button.css
Resetting the Form (pp. 274-5)Figure 17.46: reset.html, Figure 17.47: submit.css
Figure 17.49: buttonreset.html with button.css with vote.cgi
Using an Image to Submit Data (p. 276)Figure 17.51: zonemap.html with zonemap.php (Note: You'll have to change the extension of the php file to "php" for it to work properly.
Setting the Tab Order in a Form (p. 277)Figure 17.54: taborder.html
Adding Keyboard Shortcuts (p. 278)Figure 17.56: keyboard.html
Disabling Form Elements (p. 279)Figure 17.58: disabled.html
Keeping Elements from Being Changed (p. 280)readonly.html

18: Multimedia

All of the examples in this chapter (unless otherwise noted) can be found in the multimedia folder.

Linking to Multimedia Files (p. 285)Figure 18.5: Blog Entry, Figure 18.6: segadors.mov
Embedding QuickTime Movies for Windows (pp. 286-7)Figure 18.7: justforie.html
Embedding QuickTime Movies for Everyone besides IE (pp. 288-9)Figure 18.9: forstandards.html
Embedding QuickTime Movies for All (pp. 290-1)Figure 18.12: forall.html
Figure 18.14: hide2ndobject.html
Using JavaScript to Call a Movie (p. 292-3)Figure 18.16: jsmovie.js
Figure 18.17: jsmovie_lines.js (View with jsmovie_lines.html
Figure 18.18: jsmovie.html
Scaling a QuickTime Movie (p. 294)scale.html
Changing the Movie's Background Color (p. 295)bgcolor.html
Looping a QuickTime Movie (p. 296)loop.html
Offering a Preview Movie (p. 297)preview.html
Adding Attributes to Secodary Movies (p. 298)preview-loop.html
Offering a Sequel (p. 299)sequel.html
Embedding MP3 Audio on a Page (p. 300)Figure 18.32: embedmp3-new.html
Embedding Windows Media, Part 1 (pp. 302-3)Figure 18.42: hide2ndwmv.html
Embedding Windows Media, Part 2 (p. 304)Figure 18.46: newwmv.html
Embedding Flash (p. 305)Figure 18.48: embedflash.html
Embedding Google and YouTube Video (pp. 306-7)Figure 18.50: Vilaweb on Google Video
Figure 18.51: googlevideoobject.html
Figure 18.54: youtube-object.html
Inserting Java Applets (p. 308)javaobject.html
Creating an Automatic Slide Show (p. 310)slide1.html with slides.css
slide2.html
slide3.html

19: Scripts

All of the examples in this chapter (unless otherwise noted) can be found in the scripts folder.

Adding an “Automatic” Script (p. 312)Figure 19.1: simple.html
Calling an External Automatic Script (p. 313)Figure 19.3: extscript.txt, Figure 19.4: extern.html
Triggering a Script (pp. 314-5)Figure 19.7: event.html
Creating a Button that Executes a Script (p. 316)Figure 19.10: button.html
Adding Alternate Information (p. 317)Figure 19.13: noscript.html
Hiding Scripts from Older Browsers (p. 318)Figure 19.17: hide.html
Hiding Scripts from XML Parsers (p. 319)Figure 19.19: time.xml
Setting the Default Scripting Language (p. 320)Figure 19.20: default.html

20: JavaScript Essentials

All of the examples in this chapter (unless otherwise noted) can be found in the javascript folder.

Adding the Current Date and Time (p. 322)Figure 20.1: time.js
Figures 20.2 and 20.3: time.html
Setting a New Window’s Size (p. 323)Figure 20.4: hawthorne.html
Changing an Image When a Visitor Points (p. 324)Figure 20.7: rollover.html
Loading Images into Cache (p. 326)Figure 20.11: loadimages.js, Figure 20.12: loadimages.html

21: Symbols and Non-English Characters

All of the examples in this chapter (unless otherwise noted) can be found in the multilingual folder.

Symbols and Non-English Characters (p. 327)Alan Wood’s Unicode Resources
Richard Ishida's pages at the W3C
About Character Encodings (p. 329)(X)HTML Entity References
Declaring Your Page’s Character Encoding (p. 330)Figure 21.6: booklanguages.html
Figure 21.7: booklanguages-noencode.html
Declaring a Style Sheet's Encoding (p. 332)Figure 21.9: estils.css
Saving Your Page with the Proper Encoding (p. 333)Common Character Encodings
Editing a Page with the Proper Encoding (p. 334)Figure 21.12: windowslatin1.html
Adding Characters from Outside the Encoding (pp. 336-7)Unicode.org charts
(X)HTML Entity References
Figure 21.18: references.html
Specifying Your Page’s Language (p. 338)Figure 21.20: lang_fr.html

22: Testing and Debugging Web Pages

All of the examples in this chapter (unless otherwise noted) can be found in the debugging folder.

Validating Your Code (p. 345)W3C (X)HTML Validator
W3C CSS Validator
validation.html
Testing Your Page (p. 346)Figures 22.16 and 22.17: testbad.html with testpage.css
Figure 22.18: testfixed.html with testpage.css
When the Browser Displays the Code (p. 348)Figures 22.19 and 22.20: maryanna.html
When Images Don’t Appear (p. 349)Figure 22.21: noimage.html
Differences from Browser to Browser (p. 350)Figure 22.24: forms/checkboxes.html

23: Publishing Your Pages on the Web

Getting Your Own Domain Name (p. 355)InterNIC - Registrar List
Transferring Files to the Server (pp. 356-9)Ipswitch
Fetch Softworks

24: Getting People to Visit

All of the examples in this chapter (unless otherwise noted) can be found in the publicizing folder.

Getting People to Visit (p. 361)Search Engine Optimization -- FREE! by Paul Boutin
Sending Search Engine Traffic to Your Site by Paul Boutin
SearchEngineWatch
About Keywords (p. 362)Figure 24.1: barcelonamarket.html
Explicitly Listing Keywords (p. 363)Figure 24.3: keywords_meta.html
Providing a Description of Your Page (p. 364)Figure 24.4: description_meta.html
Controlling Other Information (p. 365)Figure 24.6: otherinfo_meta.html
Keeping Visitors Away (p. 366)Figure 24.8: robotsout.html
Keeping Pages From Being Archived (p. 367)Figure 24.10: noarchive.html
Submitting Your Site to a Search Engine (p. 370)Figure 24.15: Add your URL to Google
Yahoo! - How to Suggest Your Site

25: Syndication and Podcasting

All of the examples in this chapter (unless otherwise noted) can be found in the syndicating folder.

Starting an RSS Feed (p. 379)Figure 25.4: start.xml
Sidebar: Feeder
Describing Your Site in the Feed (pp. 380-1)Figure 25.5: channel.xml
RSS specification
Adding Items to a Feed (pp. 382-3)Figure 25.6: items.xml
NewsGator (makers of NetNewsWire shown in Figure 25.7)
RSS Media Module (used by Flickr for Photo feeds)
Add an Enclosure (pp. 384-5)Figure 25.9: enclosure.xml
Mime types
Creating Podcasts for iTunes (pp. 386-391)Figure 25.12: namespace.xml
Figure 25.13: contact.xml
Figure 25.14: podcastinfo.xml
Figure 25.17: episodeinfo.xml (same as real feed on catalunyalive.blogspot.com for Jul/06)
Validating a Feed (p. 392)Figure 25.20: Feed Validator
Publishing Your RSS Feed on Your Site (p. 394)Figures 25.25 - 25.29: Liz Castro on HTML, XHTML, and CSS (View source to see the code for the links to the feed.)

A: (X)HTML Elements and Attributes

(X)HTML Elements and Attributes (p. 429)(X)HTML Elements and Attributes
W3C - Official HTML 4.01 specs
W3C - Official XHTML 1 specs

B: CSS Properties and Values

CSS Properties and Values (p. 439)CSS Properties and Values
W3C - Official CSS 2 specs
W3C - Official CSS 2.1 specs

C: Intrinsic Events

Intrinsic Events (p. 447)events.html

D: (X)HTML Symbols and Characters

(X)HTML Symbols and Characters (p. 449)(X)HTML Entity References
Unicode.org

E: Hexadecimals

Hexadecimals (p. 459)hexchart.html

F: (X)HTML Tools

(X)HTML Editors (p. 462)tools.html
Images and Graphics (p. 464)tools.html
Graphics Tools (p. 464)tools.html