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 BlocksAll 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 FilesAll 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 StructureAll 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 FormattingAll 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: ImagesAll 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: LinksAll 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 BlocksAll 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 FilesAll 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 SelectorsAll 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 | |
| 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 StylesAll 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 | |
| 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 StylesAll 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 | |
| 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 StylesAll 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 HandheldsAll 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 PrintingAll 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: ListsAll 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: TablesAll 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: FormsAll 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: MultimediaAll 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: ScriptsAll 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 EssentialsAll 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 CharactersAll 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 PagesAll 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 |
| Still Stuck? (p. 351) | Question and Answer Forum |
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 VisitAll 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 PodcastingAll 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 |